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


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

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

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

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

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

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

สอนเชื่อม CSS HTML Dreamweaver เปิดไฟล์ใหม่

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

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

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

สอนเชื่อม CSS HTML Dreamweaver เลือก Template

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

สอนเชื่อม CSS HTML Dreamweaver หน้าตาหลังเปิด

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

สอนเชื่อม CSS HTML Dreamweaver เลือกเฉพาะที่เป็น CSS Code

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

สอนเชื่อม CSS HTML Dreamweaver สร้างไฟล์ CSS ใหม่

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

สอนเชื่อม CSS HTML Dreamweaver Paste ลงมา

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

สอนเชื่อม CSS HTML Dreamweaver ทำความสะอาด File

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

สอนเชื่อม CSS HTML Dreamweaver Save งานที่เป็น CSS

.
.

.
.

๙. ข้อนี้แล จะเป็นการเชื่อมไฟล์!!!
ให้กลับไปเปิดไฟล์ HTML ไฟล์แรก ที่เราเคยตัด CSS ออกมาจากเขา

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

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

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

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

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

สอนเชื่อม CSS HTML Dreamweaver เปิดหน้าต่าง CSS Style Sheet

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

สอนเชื่อม CSS HTML Dreamweaver หาไฟล์ CSS เพื่อเชื่อมโยง

สอนเชื่อม CSS HTML Dreamweaver และ Copy ไฟล์ที่สร้างไว้แล้ว

๑๒. ทำความสะอาดที่อยู่ 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” />

สอนเชื่อม CSS HTML Dreamweaver ทำความสะอาดที่อยู่ของไฟล์

———–

Advertisements

Leave a comment

Filed under Uncategorized

Leave a Reply ถาม หรือ แสดงความคิดเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s