วันเสาร์ที่ 2 พฤศจิกายน พ.ศ. 2556

บทความ 3

บทความ 3

ขั้นที่6: การเพิ่มเส้นแบ่งในแนวนอน

ส่วนที่เราจะเพิ่มเป็นส่วนสุดท้ายใน style sheet คือการใส่เส้นแบ่งในแนวนอนเพื่อแยกข้อความออกจากส่วนของลายเซ็นต์ในส่วนท้าย เราจะใช้ 'border-top' เพื่อเพิ่มเส้นแบ่งแบบจุดในส่วนบนของ element <address>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted }
  </style>
</head>

<body>
[etc.]
ตอนนี้การใส่สไตล์ของเราก็เสร็จสมบูรณ์ต่อไปเราจะมาดูว่าเราจะแยก style sheet ไว้อีกไฟล์ได้อย่างไรเพื่อที่ว่าหน้าอื่นสามารถใช้สไตล์ร่วมกันได้

ขั้นที่ 7: การใส่ STYLE SHEET แยกไฟล์

ตอนนี้เรามีไฟล์ HTML ที่มี style sheet ฝังอยู่แต่หาก เวบไซด์ของเรามีเนื้อหาเพิ่มมากขึ้นเราอาจจะต้องการให้หน้าแต่ละหน้าสามารถใช้สไตล์ร่วม กันได้ ซึ่งมีวิธีที่ดีกว่าการก๊อปปี้ style sheet ลงไปในทุกๆหน้า นั่นก็คือหากเราใส่ style sheet แยกไฟล์ไว้ทุกๆหน้าเวบก็สามารถเรียกสไตล์มาใช้ ได้โดยตรง
ในการสร้างไฟล์สำหรับ style sheet เราต้องสร้างไฟล์ text เปล่าขึ้นมาอีกหนึ่งไฟล์ คุณสามารถทำได้โดยเลือก “New” จากเมนู File ในโปรแกรม แก้ไขเพื่อสร้างหน้าเปล่าขึ้นมาหนึ่งหน้า (ถ้าคุณใช้โปรแกรม TextEdit อย่าลืมว่าต้องแก้ไขให้เป็นข้อความธรรมดาก่อนโดยเลือกได้จากเมนู Format)
หลังจากนั้นให้ตัดและวางทุกส่วนที่อยู่ใน element <style> จากไฟล์ HTML ลงไปยังหน้าใหม่แต่อย่าก๊อปปี้ตัว element <style> และ </style> เอง เพราะเป็นส่วนที่ใช้กับ HTML ไม่ใช่ CSS ในหน้าใหม่ของโปรแกรมแก้ไข ควรจะมี style sheet ที่ครบสมบูรณ์ดังนี้
body {
  padding-left: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: purple;
  background-color: #d8da3d }
ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em }
h1 {
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif }
ul.navbar li {
  background: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black }
ul.navbar a {
  text-decoration: none }
a:link {
  color: blue }
a:visited {
  color: purple }
address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted }
ให้เลือก “Save As…” จากเมนู File ต้องแน่ใจว่าได้เซฟไว้อยู่ในส่วนหรือแฟ้มเดียวกันกับไฟล์ mypage.html และให้เซฟ style sheet เป็น “mystyle.css”
ตอนนี้ให้กลับไปยังหน้าที่มีโคด HTML ให้เอาทุกอย่างออกเริ่มตั้งแต่ tag <style> จนถึง tag </style> และแทนที่ด้วย element <link> ดังนี้
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <link rel="stylesheet" href="mystyle.css">
</head>

<body>
[etc.]
ส่วนนี้จะเป็นส่วนที่บอกบราวเซอร์ว่า style sheet จะอยู่ในไฟล์ที่ชื่อว่า “mystyle.css” และเนื่องจากไม่ได้มีการบอกถึงส่วนที่เก็บไฟล์ บราวเซอร์จะดูจากส่วน ที่เก็บไฟล์เดียวกันกับไฟล์ HTML
หากคุณเซฟไฟล์ HTML และโหลดใหม่ในบราวเซอร์ คุณอาจจะมองไม่เห็นถึงความแตกต่างเพราะหน้าเวบยังคงมีสไตล์เดิมแต่ตอนนี้สไตล์จะมาก จากไฟล์ที่อยู่ข้างนอก
ผลสุดท้ายจากการใส่สไตล์
ผลสุดท้ายที่ได้
ขั้นตอนต่อไปก็คือการวางทั้งไฟล์ mypage.html และ mystyle.css บนเวบไซด์ของคุณ (ซึ่งคุณอาจจะต้องการแก้ไขก่อนเล็กน้อย) แต่ส่วนวิธีการวางอย่าง ไรนั้นขึ้นอยู่กับผู้ให้บริการอินเตอร์เน็ทของคุณ
เขียนโดย ที่

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

สมัครสมาชิก: ส่งความคิดเห็น (Atom)