สอนวิธีเชื่อม CSS style sheet กับหน้าเว็บ HTML ใน Dreamweaver

ก่อนอ่าน Post นี้ท่านอาจจะอยากอ่าน
ภาษา HTML กับภาษา CSS ที่ควรรู้ และ
วิธีเชื่อมไฟล์ CSS เข้ากับหน้าเว็บ HTML ด้วย NotePad ธรรมดา ๆ

โพสนี้ สว อิเฎล จะเริ่มเล่าตั้งแต่สร้าง Template ที่ Dreamweaver เขามีมาให้อยู่แล้ว และค่อยตัดเอา CSS ออกจาก Template ของเขาไปไว้ในไฟล์ใหม่ แล้วค่อยเชื่อมไฟล์นั้นกลับมาที่ HTML ไฟล์เดิม

ที่สวอิเฎลต้องทำเช่นนี้ เพื่อความสะดวกรวดเร็วในอนาคต คือ ถ้าเรามีไฟล์ HTML หลายร้อยไฟล์ และต้องการเปลี่ยนสีพื้นหลัง หรือเปลี่ยนสีตัวอักษรทุกไฟล์ เราสามารถแก้ได้ที่ไฟล์เดียวคือ ที่ CSS

การนี้ไม่จำเป็นต้องนั่งเปลี่ยน HTML ของทุก ๆ ไฟล์ รวมเป็นจำนวนร้อยครั้ง

วิธีการเชื่อม จะเริ่ม ณ บัดนี้

๑. ตอนนี้จะตามหาว่า Template สำเร็จรูปของ Dreamweaver อยู่ที่ไหน
๑.๑ เปิดโปรแกรม Dreamweaver
๑.๒ มองที่ตรงกลาง ด้านล่าง ๆ แล้วคลิก More

๒. เลือก Template ที่ตนชอบ
๒.๑ หลังจากที่คลิก More ไปแล้วจะมีหน้าต่างตามรูปด้านล่างปรากฎขึ้น
๒.๒ เลือก Blank Template ที่แถบเมนูทางซ้ายมือ
๒.๓ เลือก HTML template
๒.๔ จากนั้นจะเป็น List ของ template ขึ้นมามากมาย จะพบว่ามีคำว่า “fixed” และ ​”Liquid” ที่ดูน่าสงสัยอยู่

“fixed” แปลว่า ไม่ว่าหน้าต่าง browser จะกว้างหรือแคบเท่าใดก็ตาม ความกว้างของตารางหลักของเว็บก็จะเท่าเดิม
“Liquid” แปลว่า ความกว้างของตารางหลักจะยืดหรือย่อตามความกว้างของหน้าต่าง browser

๒.๕ เลือก template ที่ชอบ และกด Create ที่มุมขวาล่างของหน้าต่าง

๓. ภาพที่ปรากฎหลังจาก Create Template จะมีหน้าตาคลาย ๆ ดั่งรูป

๔. ตอนนี้เรามาดูที่ Code ซึ่ง Code ของ Template ที่เราสร้างมา จะมี HTML และ CSS ปะปนกันอยู่ ซึ่งเราจะตัดเอาเฉพาะ CSS ไป
๔.๑ มองหา คำว่า และ
๔.๒ ใช้ mouse เลือกตั้งแต่คำว่า และสิ่งที่อยู่ระหว่าง Tag จนกระทั่ง
๔.๓ Cut ส่วนที่เลือกออกไปโดย Ctrl + X หรือ Command + X หรือ คลิกขวาแล้วกด Cut

๕. สร้างไฟล์ CSS ใหม่เพื่อจะใส่สิ่งที่เรา Cut ออกมาลงไป
๕.๑ New
๕.๒ ที่เมนู Blank Page
๕.๓ คลิก CSS

๖. เมื่อได้หน้า CSS ว่าง ๆ ขึ้นมาแล้ว ให้ Paste สิ้งที่เรา Cut มาลงไป
Paste โดย Ctrl + V หรือ Command + V หรือ คลิกขวาแล้วกด Paste

๗. ทำความสะอาด CSS code โดยลบ Comment ออกให้หมด
Comment จะอยู่ระหว่าง /* และ */ ซึ่งเราอาจเห็นว่ามันเป็นสีเทาในหน้า Dreamweaver
(จริง ๆ แล้ว comment นี้ดี ไว้เตือน ไว้บอกรายละเอียด แต่ในห้องเรียน นักศึกษาควรได้ฝึกดูว่าอะไรคือ Code และอะไรไม่ใช่ Code; สว อิเฎล คิดว่าควร Save ไฟล์นึงที่มีคอมเมนต์เก็บไว้ เผื่อไว้ดู ถ้าติดขัด)

๘. Save งานหลังจากทำความสะอาด Code เรียบร้อย
๘.๑ คลิก File
๘.๒ คลิก Save as
๘.๓ เมื่อมีหน้าต่าง Save As ปรากฎขึ้น ให้ดูชนิดไฟล์ที่จะ Save ว่าเป็น .css
๘.๔ คลิก Save

.
.

.
.

๙. ข้อนี้แล จะเป็นการเชื่อมไฟล์!!!
ให้กลับไปเปิดไฟล์ HTML ไฟล์แรก ที่เราเคยตัด CSS ออกมาจากเขา
๙.๑ ดูที่หน้าต่างเมนู CSS Style (ปกติจะมีอยู่ทางด้านขวามือของหน้าจอ แต่ถ้าใครไม่มีให้ดูข้อ ๑๐)
๙.๒ คลิกขวาบนที่ว่าง ๆ ของหน้าต่างเมนู
๙.๓ จะมีเมนูขึ้นมา ให้คลิกเลือกคำว่า Attach Style Sheet

อีกวิธีนึงในการกด Attach Style Sheet
๙.๑ มองไปที่มุมขวาล่างของหน้าต่างเมนู CSS Style
๙.๒ ให้คลิกที่ปุ่มเล็ก ๆ ที่หน้าตาเหมือนลูกโซ่ (หน้าตาเหมือนสัญลักษณ์ Link)

ภาพด้านล่างแสดงวิธี Attach Style Sheet วิธีแรก ที่อิเฎลบอกให้คลิกขวา

ภาพด้านล่างแสดงวิธี Attach Style Sheet วิธีแรก ที่อิเฎลบอกให้คลิกลูกโซ่

๑๐ (เฉพาะคนที่ไม่มีหน้าต่างเมนู CSS) ปกติหน้า Dreamweaver จะมีหน้าต่าง CSS Styles ให้อยู่แล้ว แต่ถ้าใครไม่มีหน้าต่างเครื่องมือนี้ ให้คลิกเมนู Windows และเลือก เมนูย่อย CSS Styles หรือถ้าใครไม่อยากคลิดอะไรเลย ก็สามารถใช้คีย์ลัดได้คือ Shift+F11

๑๑. เลือกไฟล์เพื่อเชื่อม CSS
๑๑.๑ หลังจากคลิก Attach Style Sheet ในข้อ ๙ ไป จะมีหน้าต่างเล็ก ๆ ปรากฎขึ้น
๑๑.๒ ให้คลิก Browse เลือกไฟล์ CSS ที่เรา save ไว้ก่อนหน้านี้ (ในข้อ ๘.)
๑๑.๓ ตรงคำว่า Add as: ให้เลือกเป็น “Link”
๑๑.๔ คลิก OK เมื่อตั้งค่าเสร็จ

๑๒. ทำความสะอาดที่อยู่ URL ของชื่อไฟล์ CSS ใน HTML code
๑๒.๑ หลังจากคลิก OK ตามข้อ ๑๑. จะพบว่าใน Code จะมีบรรทัดนึงเพิ่มขึ้นมา หน้าตาดั่งด้านล่างนี้
<link href=”@#$%^&*//@#$%^/name.css” rel=”stylesheet” type=”text/css” />
๑๒.๒ ถ้าที่อยู่ก่อนชื่อไฟล์ยาวไป ให้ตัดออกจนเหลือเท่าที่จำเป็น
กรณีนักศึกษาที่ฝึกปฏิบัติการในชั้นเรียน จะไว้ไฟล์ CSS และ HTML ใน folder เดียวกัน ดังนั้นให้ลบที่อยู่ด้านหน้าชื่อไฟล์ และเหลือเพียงชื่อไฟล์อย่างเดียวพอ ก็จะเห็นเป็นดั่ง Code ด้านล่าง
<link href=”name.css” rel=”stylesheet” type=”text/css” />

———–