หน่วยการเรียนรู้ที่ 8
การเรียนรู้กรณีศึกษาตัวอย่างเว็บไซต์

สาระสำคัญ

- การเตรียมข้อมูลก่อนการลงมือพัฒนาเว็บไซต์นั้นถือเป็นเรื่องที่สำคัญมาก เนื่องจากหากเรามีข้อมูลที่หลากหลายและมากพอในการพัฒนาเว็บไซต์นั้นก็จะทำได้ง่ายและรวดเร็วมากยิ่งขึ้น ข้อมูลที่กล่าวมาข้างต้น เช่น ข้อมูลภาพ เสียง ตัวอักษร ไฟล์ดาวน์โหลดในรูปแบบต่างๆ ไฟล์วิดีโอ เป็นต้น หลังจากที่ได้เตรียมข้อมูลแล้วขั้นต่อไปก็ทำการสร้างไซต์ จากกรณีตัวอย่างในหน่วยการเรียนรู้นี้ใช้วิธีการสร้าง Layout โดยจะมีเนื้อหาเกี่ยวกับการสร้าง การจัดการ การเพิ่ม การแก้ไข Layout รวมไปถึงการกำหนดสีให้กับ Tag ด้วย

สมรรถนะประจำหน่วย

แสดงกรณีศึกษาตัวอย่างเว็บไซต์

จุดประสงค์การเรียนรู้

1. กำหนดไซต์ได้

2. สร้าง Style Sheet และจัดการ Layoutได้

3. สร้างเว็บไซต์ได้


การสร้างหน้าเว็บเพจด้วยภาษาHTML5

HTML คืออะไร?

  • HTML ย่อมาจาก “Hyper Text Markup Language”

  • HTML เป็น Markup Language ชนิดหนึ่ง

  • Markup Language คือภาษาที่ใช้ Tags ในการอธิบายความหมายของเนื้อหา

  • HTML เป็นภาษาที่ใช้ในการสร้างเว็บเพจ

  • เว็บเพจคือหน้าแต่ละหน้าของเว็บไซต์

HTML Tags

  • HTML ใช้ Tags ในการอธิบายความหมายของเนื้อหา

  • ในการสร้าง HTML Tags ให้เราครอบ “ชื่อ Tag” ด้วยเครื่องหมาย ‘<>’ แบบนี้ <ชื่อ Tag>

  • โดยปกติแล้ว เราจะใช้ HTML Tags เป็นคู่ เช่น <header> กับ </header> เนื้อหาอะไรก็ตามที่อยู่ระหว่าง HTML tags คู่นี้จะถือเป็น “header”

  • เราจะเรียก HTML Tag ตัวแรกว่า “Tag เปิด” และจะเรียก HTML Tag ตัวหลังว่า “Tag ปิด”

  • “Tag ปิด” จะมีหน้าตาคล้ายกับ “Tag เปิด” แต่จะมี ‘/’ เพิ่มมาที่หน้า “ชื่อ Tag”

  • อย่างไรก็ตาม HTML Tag บางตัวจะมีแค่ “Tag เปิด” เท่านั้น เช่น <br> ที่หมายถึงการขึ้นบรรทัดใหม่ จะเห็นว่า <br> มีความหมายสมบูรณ์ในตัวอยู่แล้ว ไม่ต้องเอามันไปครอบเนื้อหาอะไรอีก

HTML Elements

  • เราจะเรียก “Tag เปิด”, เนื้อหาที่อยู่ภายใน และ “Tag ปิด” รวม 3 อย่างนี้ว่า “HTML Elements”

  • “HTML Elements” ก็คือสิ่งที่ “HTML Tag” สร้างขึ้นมา ซึ่งมันก็คือเนื้อหาที่มีความหมายนั่นเอง

HTML Attributes

  • HTML Elements ต่างๆ สามารถใส่ “Attributes(ลักษณะ)” เพิ่มได้ โดยเราจะใส่ Attributes หากต้องการระบุลักษณะเพิ่มเติมเกี่ยวกับ HTML Elements นั้นๆ

  • Attributes ของ HTML Elements จะใส่ไว้ที่ “Tag เปิด” เสมอ

  • Attributes จะประกอบไปด้วย “ชื่อของ Attribute” และ “ค่าของ Attribute”

  • Attributes ของแต่ละ HTML Elements จะแตกต่างกันออกไป

  • ลองดูตัวอย่างนี้ <คน เพศ=”ชาย” อายุ=”56″>Steve Jobs</คน> จะได้ว่า HTML Elements นี้มีชื่อว่า “คน” และมี Attributes เป็น “เพศ” และ “อายุ” จะเห็นว่า Attributes ช่วยทำให้ความหมายของ HTML Elements มีความชัดเจนยิ่งขึ้น

โครงสร้างของเว็บเพจ

มาถึงตรงนี้ เรารู้แล้วว่าเราจะต้องใช้ HTML ในการสร้างเว็บเพจ ทีนี้เราลองมาดูกันว่าโครงสร้างของเว็บเพจนั้นประกอบไปด้วยอะไรบ้าง

  • <!DOCTYPE html>

  • ส่วนนี้จะเป็นการระบุ version ของ html ที่เราจะเขียน โดยเราจะต้องใส่ส่วนนี้เอาไว้ที่บนสุดของเว็บเพจเสมอ

  • <html>

  • ส่วนนี้จะอยู่ต่อจาก <!DOCTYPE html> เราจะต้องใส่ HTML Elements ต่างๆ ไว้ในส่วนนี้

  • <head>

  • ส่วนนี้จะอยู่ภายใน <html> อีกที เราจะต้องใส่ HTML Elements ที่ใช้บอกรายละเอียดเพิ่มเติมเกี่ยวกับเว็บเพจไว้ในส่วนนี้

  • <body>

  • ส่วนนี้จะอยู่ต่อจาก <head> เราจะต้องใส่ HTML Elements ที่เราอยากให้มันแสดงผลออกมาไว้ในส่วนนี้

<!DOCTYPE html>

<html>

<head>

โค้ดที่อยู่ในนี้จะเอาไว้บอกรายละเอียดเพิ่มเติมเกี่ยวกับเว็บเพจ

</head>

<body>

โค้ดที่อยู่ในนี้จะแสดงผลออกมาทางหน้าจอ

</body>

</html>


<!DOCTYPE html>

<html>

<head>

โค้ดที่อยู่ในนี้จะเอาไว้บอกรายละเอียดเพิ่มเติมเกี่ยวกับเว็บเพจ

</head>

<body>

โค้ดที่อยู่ในนี้จะแสดงผลออกมาทางหน้าจอ

</body>

</html>

Workshop – สร้างเว็บเพจแรกของคุณ!

ตอนนี้เรารู้แล้วว่าโครงสร้างของเว็บเพจประกอบด้วยอะไรบ้าง ให้เราจำโครงสร้างนี้เอาไว้ให้ดี เพราะถ้าเราจำได้แล้ว สิ่งที่เหลือก็แค่เลือก HTML Elements มาใส่ในช่อง <head> และ <body> เท่านั้นเอง ลองมาดูสิว่า HTML Elements ที่เราต้องใช้บ่อยๆ มีอะไรบ้าง

Title

อย่างแรกเรามาดูการใส่ Title ของเว็บเพจกันเลยครับ ให้เราครอบชื่อ Title ของเราด้วย <title></title> แล้วเอาไปใส่ไว้ใน <head></head> ลองดูตัวอย่างนี้ครับ

<!DOCTYPE html>

<html>

<head>

<title>สอนทำเว็บไซต์ by Siam HTML</title>

</head>

<body>

โค้ดที่อยู่ในนี้จะแสดงผลออกมาทางหน้าจอ

</body>

</html>


เมื่อลองพรีวิวดู เนื้อหาที่เราใส่ไปทั้งในส่วนของ <title> และในส่วนของ <body> กลับอ่านไม่ออก ทั้งนี้เป็นเพราะเรายังไม่ได้กำหนดการเข้ารหัสของตัวอักษรให้เป็นแบบ UTF-8 นั่นเอง

Meta

ในการทำให้ web browsers อ่านภาษาไทยออก เราจะต้องกำหนด “Character Sets” ให้เป็น UTF-8 ก่อน ให้เราใส่ “<meta charset=”UTF-8″ >” เข้าไปใน <head></head> แบบนี้ครับ

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>สอนทำเว็บไซต์ by Siam HTML</title>

</head>

<body>

โค้ดที่อยู่ในนี้จะแสดงผลออกมาทางหน้าจอ

</body>

</html>

เมื่อลองพรีวิวดูอีกครั้ง เราก็จะพบว่าภาษาไทยสามารถแสดงผลได้อย่างถูกต้องแล้ว

Headings

ทีนี้เราลองมาดูการใส่ “heading (หัวข้อ)” ให้กับเนื้อหากันบ้างครับ heading นั้นจะแบ่งระดับความสำคัญออกเป็น 6 ระดับ ด้วยกัน ได้แก่ <h1>, <h2>, <h3> ไล่ไปจนถึง <h6> ให้เราลองเอา Tags เหล่านี้ไปครอบหัวข้อของเราดูครับ


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>สอนทำเว็บไซต์ by Siam HTML</title>

</head>

<body>

<h1>หัวข้อ</h1>

<h2>หัวข้อ</h2>

<h3>หัวข้อ</h3>

<h4>หัวข้อ</h4>

<h5>หัวข้อ</h5>

<h6>หัวข้อ</h6>

</body>

</html>

เมื่อลองพรีวิวดู เราจะเห็นว่าหัวข้อของเรามีขนาดที่แตกต่างกัน โดยหัวข้อที่ครอบด้วย <h1> นั้นจะมีขนาดใหญ่สุด ส่วนหัวข้ออื่นๆ ก็จะมีขนาดเล็กลงมาเรื่อยๆ จนมาเล็กสุดที่หัวข้อที่ครอบด้วย <h6> ครับ

Paragraphs

เมื่อได้หัวข้อแล้ว เรามาต่อกันที่การสร้าง “Paragraph (ย่อหน้า)” ครับ ให้เราครอบเนื้อหาที่เป็น Paragraph ด้วย <p></p> ลองดูตัวอย่างนี้


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>สอนทำเว็บไซต์ by Siam HTML</title>

</head>

<body>

<h1>หัวข้อ</h1>

<p>Siam HTML เป็นเหมือนสังคมออนไลน์ของเพื่อนๆ Web Developer ที่จะนำประสบการณ์ ความรู้ หรือเทคนิคต่างๆ มาแบ่งปันกัน เป็นที่ๆ พวกเราทุกคน จะช่วยกันสร้างสรรค์วงการเว็บไซต์ของไทยให้พัฒนาไม่แพ้ชาติอื่นๆ และยังเป็นแหล่งความรู้ สำหรับนักพัฒนาเว็บไซต์หน้าใหม่ ที่จะช่วยส่งเสริมให้การพัฒนาเว็บไซต์ในไทยแพร่หลายมากยิ่งขึ้น</p>

<p>Siam HTML ยินดีเปิดรับบทความของเพื่อนๆ ทุกคน หากบทความของคุณสร้างสรรค์ แปลกใหม่ ไม่ซ้ำใคร หรือแค่คิดว่ามีประโยชน์กับเพื่อนๆ นักพัฒนาเว็บไซต์ด้วยกันก็ลงมือเขียนได้เลย!!!</p>

</body>

</html>

เมื่อลองพรีวิวดู จะเห็นว่าการครอบเนื้อหาด้วย <p></p> ทำให้ช่องว่างด้านบนและด้านล่างของเนื้อหาเพิ่มขึ้น ซึ่งจะเหมาะมากในการใช้แบ่งเนื้อหาออกเป็นพารากราฟ เพื่อให้อ่านได้ง่ายขึ้น

Links

สิ่งที่ขาดไม่ได้เลยสำหรับการทำเว็บก็คือการสร้าง “Link” นั่นเองครับ โดยเราจะใช้ <a></a> มาครอบข้อความที่ต้องการให้เป็น Link แล้วใส่ Attribute ที่ชื่อว่า “href” เพิ่มเข้าไปที่ <a> แล้วระบุค่าของ “href” ให้เป็น “URL” ที่เราต้องการจะให้ Link ไป ลองดูตัวอย่างนี้ครับ


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>สอนทำเว็บไซต์ by Siam HTML</title>

</head>

<body>

<h1>สอนทำเว็บไซต์</h1>

<p>

เรียนทำเว็บไซต์ Web Design ฟรี! ที่

<a href="http://www.siamhtml.com">SiamHTML.com</a>

</p>

</body>

</html>

เมื่อลองพรีวิวดู เราจะเห็นว่าข้อความ “SiamHTML.com” กลายเป็น Link ไปแล้วครับ เมื่อลองกดดู มันก็จะ Link ไปยัง “URL” ที่เราได้กำหนดไว้ด้วย Attribute “href” ครับ

Images

สิ่งสำคัญอีกอย่างหนึ่งในการทำเว็บก็คือ “รูปภาพ” ครับ ในการใส่รูปในหน้าเว็บ เราจะใช้ “<img>” ซึ่งเป็น HTML Tag ที่มีแต่ “Tag เปิด” เพียงอย่างเดียว ส่วนรายละเอียดต่างๆ ไม่ว่าจะเป็น URL รวมไปถึงความกว้างและความสูงของรูป ให้เรากำหนดโดยใช้ Attributes ครับ ในส่วนของ URL ให้เราใช้ “src” ส่วนความกว้างและความสูงของรูปให้เราใช้ “width” และ “height” ตามลำดับ ลองดูตัวอย่างนี้ครับ


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>สอนทำเว็บไซต์ by Siam HTML</title>

</head>

<body>

<h1>สอนทำเว็บไซต์</h1>

<a href="http://www.siamhtml.com">

<img src="http://www.siamhtml.com/wp-content/uploads/2013/09/siamhtml.png" width="240" height="192">

</a>

<p>

เรียนทำเว็บไซต์ Web Design ฟรี! ที่

<a href="http://www.siamhtml.com">SiamHTML.com</a>

</p>

</body>

</html>


การกำหนดคุณสมบัติด้วย CSS

การจัดรูปแบบเว็บเพจด้วย Cascading style sheet CSS

จากเนื้อหาของบทที่ผ่านๆ มาจะเห็นว่าขั้นตอนบางอย่างในการสร้างเว็บเพจนั้นใช้เวลามาก นั่นก็ คือ การจัดรูปแบบของบองค์ประกอบต่างๆ เช่น ฟอนด์ ขนาด และสีของข้อความ , รูปแบบหัวข้อบุลเล็ต , ลักษณะขอบ และสีพื้นของตาราง เป็นต้น ซึ่งถ้ามีเว็บเพจจำนวนมากคุณก็ต้องทำแบบเดียวกันซ้ำๆ บนทุกหน้า นอกจากนี้การเปลี่ยนแปลงในภายหลังก็ทำได้ยาก ดังนั้นคุณจึงควรนำสไตล์ CSS มาใช้ เพื่อช่วยให้การจัดรูปแบบเนื้อหาของเว็บเพจทำได้สะดวก และมีประสิทธิภาพมากขึ้น

ใน Dreamweaver เมื่อคุณกำหนดคุณสมบัติของเว็บเพจใน Page Properties และจัดรูปแบบข้อความด้วยออปชั่นบนพาเนล Properties นั้น สไตล์ CSS จะถูกนำมาใช้แทนคำสั่ง HTML โดยอัตโนมัติ แต่สาหรับเนื้อหาอื่นๆ หากต้องการใช้ CSS มักจะต้องสร้าง และกำหนดสไตล์ให้กับเนื้อหาเหล่านั้นเอง

การใช้จัดรูปแบบเว็บเพจได้เกือบทุกส่วน

สามารถใช้สไตล์ CSS เพื่อจัดรูปแบบองค์ประกอบบนเว็บเพจได้เกือบทุกส่วน นอกจากนี้สไตล์หนึ่งๆ ยังนำไปใช้กับเนื้อหาได้หลายประเภท เช่น สไตล์ที่กำหนดสีพื้น หรือภาพฉากหลังอาจจะใช้กับตาราง , ข้อความ , AP Element หรือเว็บเพจทั้งหน้าก็ได้ จัดรูปแบบได้อย่างละเอียด และเที่ยงตรงตามที่ออกแบบไว้ CSS สามารถกำหนดตำแน่ง และขนาดของเนื้อหาต่างๆ บนเว็บเพจได้อย่างละเอียด และยังสามารถเลือกใช้หน่ายวัดใดๆ ก็ได้ เช่น mm , cm , in , point และ pixel ทำให้ได้เว็บเพจที่มีเลย์เอาท์เที่ยงตรงตามที่ออกแบบไว้ สำหรับกรณีของตัวอักษร เมื่อคุณกำหนดขนาดด้วย CSS ข้อความที่ได้จะมีขนาดคงที่บนเว็บเพจ โดยไม่ขึ้นกับการตั้งค่าขนาดตัวอักษรบนบราวเวอร์ของผู้ชม ทำให้ลดโอกาสผิดเพี้ยนของเลย์เอาท์ลงไป

การช่วยให้จัดรูปแบบเว็บเพจได้ง่าย และแก้ไขสะดวก

สไตล์ CSS เป็นการรวบรวมคำสั่งสำหรับจัดรูปแบบทั้งหมดไว้ที่เดียวกัน แทนที่จะกระจายไปตามแท็กต่างๆ ช่วยให้คุณจัดรูปแบบเว็บเพจทั้งหน้าได้ง่าย และเมื่อต้องการเปลี่ยนแปลงก็เพียงแต่แก้ไขที่สไตล์เท่านั้น

การควบคุมรูปแบบได้ทั้งเว็บไซต์จากจุดเดียว

นอกจากการสร้างสไตล์ เพื่อใช้ภายในเว็บเพจหน้าใดหน้าหนึ่งแล้ว คุณยังสามารถนำสไตล์ไปใช้กับเว็บเพจหลายๆ หน้า หรือทั้งเว็บไซต์ได้ โดยบันทึกสไตล์เหล่านั้นเป็นไฟล์นามสกุล .css แล้วจึงดึงไฟล์นี้ไปใช้บนเว็บเพจที่ต้องการคุณสมบัตินี้ช่วยให้คุณสร้างเว็บเพจที่มีรูปเหมือนกันตลอดทั้งเว็บไซต์ได้ง่าย และเมื่อจาเป็นต้องเปลี่ยนแปลงคุณลักษณะใดๆ ก็แก้ไขที่ไฟล์ .css เพียงไฟล์เดียวเท่านั้น การจัดรูปแบบบนเว็บเพจทั้งหมดจะเปลี่ยนไปโดยอัตโนมัติ

การสืบทอด และจัดลำดับความสำคัญของสไตล์ (Cascading)

CSS ยอมให้มีการใช้สไตล์ได้หลายระดับ โดยแต่ละระดับจะสืบทอดคุณสมบัติเดิมลงมาเป็นชั้นๆ แต่ในกรณีที่เกิดความขัดแย้งกันก็จะยึดตามระดับของสไตล์เหล่านั้น

ลักษณะการใช้งานสไตล์ CSS แบ่งออกเป็น 3 แบบคือ

- External Style Sheet คือ การนำสไตล์ที่เก็บอยู่ในไฟล์ .css เข้ามาใช้บนเว็บเพจ

- Embedded Style Sheet คือ การใช้สไตล์ที่เก็บอยู่ภายในเว็บเพจนั้นเอง

- Inline Style คือ การใช้คำสั่ง CSS กำกับไว้กับแท็ก HTML โดยตรงบนเว็บเพจหนี่งๆ อาจมีการใช้สไตล์ทั้ง 3 แบบก็ได้ โดยคุณสมบัติจากสไตล์ทุกแบบจะถูกนำมาผสมกัน แต่ถ้าเกิดความขัดแย้งก็จะดูตามระดับความสำคัญ คือ Inline style มีระดับสูงสุด รองลงไปคือ Embedded sytle sheet และ External style sheet นอกจากนี้ถ้ามีการใช้ไฟล์ .css หลายไฟล์ก็จะดูตามลำดับที่ไฟล์นั้นถูกรียกเข้ามาบนเว็บเพจ คุณสมบัติเช่นนี้จะทำให้คุณสามารถใช้ไฟล์ .css เพื่อควบคุมทั้งเว็บไซต์ แต่ในขณะเดียวกันก็ยังดัดแปลงรูปแบบบางอย่างให้มีผลเฉพาะบนเว็บเพจใดเว็บเพจหนึ่ง หรือจุดใดจุดหนึ่งที่ต้องการได้

ใน Dreamweaver จะสนับสนุนการใช้งาน External stynal style sheet และ Embedded style sheet เป็นหลัก ส่วน Inline style นั้น หากต้องการใช้คุณจะต้องแก้ไขแท็กเอง

รูปแบบของคำสั่ง CSS

คำสั่ง CSS ที่ใช้กำหนดคุณสมบัติของสไตล์จะประกอบด้วย 2 ส่วน คือ Selector และ Declaration

- Selector คือ ชื่อสไตล์

- Declaration เป็นส่วนประกอบไปด้วยคุณสมบัติ (Property) และค่าของคุณสมบัตินั้น (Value)

อย่างไรก็ตาม ในการใช้งาน Dreamweaver คุณไม่จำเป็นต้องเขียนชุดคำสั่งเหล่านี้เอง โดยเพียงแต่กำหนดคุณสมบัติของสไตล์บนพาเนล Properties หรือกำหนดสไตล์ด้วยพาเนล CSS Styles โปรแกรมก็จะสร้างชุดคำสั่งให้อัตโนมัติ

สไตล์ CSS ที่คุณสามารถใช้ใน Dreamweaver แบ่งออกเป็น 4 ประเภท คือ Class style , ID style,Tag style และ Compound style ซึ่งมีคุณสมบัติที่แตกต่างกันดังนี้

Class Style เป็นสไตล์ที่สามารถนำไปใช้ร่วมกับแท็กใดๆ ก็ได้ เพื่อทำให้แท็กนั้นมีคุณสมบัติตามที่กำหนดไว้ โดยจะไม่มีผลต่อแท็กเดียวกันที่อยู่ในส่วนอื่นๆ วิธีใช้สไตล์ประเภทนี้จะใช้แอดทริบิวต์ class ตัวอย่างเช่น

- ใช้กับแท็ก <p> เพื่อกำหนดคุณสมบัติของข้อความทั้งย่อหน้า เช่น ถ้าคาสั่งปกติเป็นดังนี้ <p> ลงทะเบียนสมาชิก </p>

เมื่อคุณกำหนด class style ที่ชื่อ page_body ให้กับย่อหน้าข้างต้น คำสั่งจะเปลี่ยนเป็น <p class=”page_body”> ลงทะเบียน </p>

- ในกรณีที่คุณใช้สไตล์กับข้อความเพียงบางส่วนของย่อหน้า โปรแกรมจะสร้างแท็ก <span> ขึ้นมารองรับ เพื่อกำหนดแอตทริบิวต์class เช่น ถ้าคาสั่งปกติเป็น <p> ลงทะเบียนสมาชิก </p> เมื่อคุณกำหนด Class style ให้กับข้อความ “ลงทะเบียน” คำสั่งจะเปลี่ยนเป็น <p> <span class=”page_body”> ลงทะเบียน </span> สมาชิก </p>

ID Style คุณจะสามารถใช้สไตล์นี้ร่วมกับออบเจ็คใดๆ ก็ได้ โดยจะต้องระบุชื่อสไตล์ด้วยแอดทริบิวต์ ID และจะต้องไม่มีออบเจ็คอื่นที่มีชื่อซ้ำกันอีกบนเว็บเพจนั้น ชื่อของสไตล์จะมีเครื่องหมาย # นำหน้า

Tag Style เป็นการใช้คำสั่ง CSS เพื่อดัดแปลงคุณสมบัติของแท็ก HTML โดยตรง ซึ่งจะทำให้มีผลต่อทุกๆ องค์ประกอบบนเว็บเพจที่ใช้แท็กนี้ เช่น ถ้าต้องการให้ข้อความหัวเรื่อง -1 (Heading 1) เป็นสีแดงก็ดัดแปลงแท็ก <h1> ข้อความหัวเรื่อง -1 ทุกๆ จุดบนเว็บเพจจะมีคุณสมบัติตามนี้ทันที

Com pound Style กรณีที่ต้องการดัดแปลงคุณสมบัติของแท็กบางชุดที่ใช้ร่วมกัน คุณก็ตั้งชื่อสไตล์ให้ตรงกับชุดแท็กนั้น เช่น ถ้าจะให้ข้อความหัวเรื่อง -1 (แท็ก<>h1>) ที่อยู่ในเซลของตาราง (แท็ก<td>) มีคุณสมบัติเฉพาะ ก็สร้างสไตล์ชื่อ td h1 แล้วกำหนดคุณสมบัติตามต้องการ ผลก็ คือ หัวเรื่อง -1 ที่อยู่ในตารางจะมีรูปแบบตามที่กำหนด และจะแตกต่างจากหัวเรื่อง 1 ที่อยู่นอกตาราง

พาเนล CSS Styles

พาเนล CSS Styles เป็นเครื่องมือหลักที่ใช้จัดการกับสไตล์ CSS เช่น สร้างสไตล์ใหม่ และแสดงรายชื่อ / คุณสมบัติของสไตล์ วิธีเปิด / ปิดพาเนลนี้ทาได้ โดยเลือกคำสั่ง window > css styles แสดงรายชื่อสไตล์ทั้งหมด แสดงคุณสมบัติของออบเจ็คภายในเว็บเพจ ที่กำลังเลือกบนเว็บเพจ

แก้ไขสไตล์ที่กำลังเลือก เลือกวิธีแสดงคุณสมบัติ ลบสไตล์ที่กำลังเลือก นำเข้าสไตล์จากไฟล์ .css สร้างสไตล์ใหม่

มุมมองในการแสดงคุณสมบัติ

เมื่อคุณกำหนดคุณสมบัติของเว็บเพจใน Page Properties หรือจัดรูปแบบข้อความด้วยพาเนล Properties โดยเลือกแบบ CSS นั้น โปรแกรมจะสร้างสไตล์ CSS สำหรับคุณสมบัติ หรือรูปแบบดังกล่าวให้อัตโนมัติ โดยสไตล์เหล่านี้จะถูกเก็บไว้ในเว็บเพจ (คือเป็น Embedded style sheet) ซึ่งจะดูรายชื่อทั้งหมดได้จากพาเนล CSS Styles

เทคนิคการตั้งชื่อสไตล์ประเภท Compound

สามารถทำได้หลายแบบขึ้นกับผลลัพธ์ที่ต้องการในที่นี้จะขอแนะนาบางแบบที่น่าสนใน ส่วนรายละเอียดที่สมบูรณ์นั้นค่อนข้างซับซ้อนถ้าใช้ชื่อแท็ก 2 ตัวขึ้นไปมาเรียงกัน สไตล์นี้จะมีผลต่อแท็กตัวหลังสุดเมื่อถูกครอบโดยแท็กที่อยู่ข้างหน้า เช่น สไตล์ชื่อ td h1 จะมีผลต่อ h1 (หัวเรื่อง -1) ที่อยู่ภายใน td (เซลของตาราง)

- ถ้าใช้ชื่อแท็กตามหลังชื่อ Class style สไตล์นี้จะมีผลต่อแท็กตัวหลัง เมื่อถูกครอบ โดยแท็กอื่นซึ่งใช้สไตล์ตัวข้างหน้า เช่น สไตล์ชื่อ .menulist a : link จะมีผลต่อลิงค์สถานะปกติที่อยู่ภายในตาราง (หรือภายในแท็กใดๆ ที่กำหนดกรอบของเนื้อหาได้ เช่น div) ที่ใช้สไตล์ .menulist

- ถ้าใช้ชื่อ Class style 2 ตัวขึ้นไปเรียงกัน สไตล์นี้จะมีผลต่อแท็กที่ใช้สไตล์ตัวหลังสุด เมื่อถูกครอบ โดยแท็กอื่น ซึ่งใช้สไตล์ตัวข้างหน้า เช่น สไตล์ .content .mytype จะมีผลต่อแท็กที่ใช้สไตล์ .mytype ซึ่งอยู่ภายในแท็กที่ใช้สไตล์ .content

- ถ้าใช้ชื่อที่ขึ้นต้นด้วย # เช่น #mystyle จะได้สไตล์ที่คล้ายกับ Class style แต่การเรียกใช้จะต้องทำผ่านพาเนล CSS Styles เท่านั้น โดยโปรแกรมจะใช้แอตทริบิวต์ ID ในการกำหนดสไตล์

คุณสมบัติของสไตล์ CSS เนื่องจากคุณสมบัติต่างๆ ของสไตล์ CSS มีเป็นจำนวนมาก ดังนั้น ในไดอะล็อกบ็อกซ์ CSS Rule definition จึงแบ่งย่อยออกเป็น 8 หมวด ดังนี้

หมวด Type สำหรับกำหนดคุณสมบัติทั่วไปของข้อความ เช่น ฟอนต์ , ขนาด , สี และน้ำหนักของตัวอักษร เป็นต้น



คุณสมบัติ

คำอธิบาย

Font - family

ชุดฟอนต์ตัวอักษร สร้างชุดฟอนต์ตัวอักษร

Font - size

ขนาดตัวอักษร กำหนดขนาดตัวอักษร)

Font - weight

น้ำหนัก หรือความหนาของตัวอักษร

- 100 - 900 กำหนดเป็นค่าน้ำหนัก ถ้าค่ามากก็ คือตัวอักษรหนามาก

- Normal ให้ตัวอักษรมีน้ำหนักปกติ (เทียบได้กับ 400)

- Bold ให้ตัวอักษรมีน้ำหนักมากกว่าตัวอักษรปกติ (เทียบได้กับ 700)

- Bolder , lighter ให้ตัวอักษรมีน้ำหนักมาก หรือน้อยกว่าตัวอักษรปกติ

Font - style

ลักษณะตัวอักษรเป็นปกติ (normal) , ตัวเอียง (italic) หรือตัวเอียงแบบ oblique

Font - variant

ลักษณะตัวอักษรเป็นปกติ(normal)หรือเป็นตัวพิพม์ใหญ่ที่มีขนาดเล็ก (small-caps)

Line - height

ความสูงของบรรทัด (ระยะห่างระหว่างบรรทัดของข้อความในย่อหน้าเดียวกัน)

Text - transform

วิธีแปลงตัวอักษรระหว่างตัวพิมพ์ใหญ่ และพิมพ์เล็ก (สำหรับอักษรใหญ่)

Text - decoration

ลักษณะพิเศษของตัวอักษร ซึ่งประกอบดัวย underline (มีเส้นใต้) , over line (มีเส้นด้านบน) , line - through (มีเส้นพาดกลาง) , blink (เป็นตัวกระพริบ) และ none (ไม่มีลักษณะพิเศษใดๆ )

Color

สีของตัวอักษร


ตัวอย่าง : การสร้างสไตล์เพื่อจัดรูปแบบข้อความ

สมมติว่าต้องการสร้างสไตล์ชื่อ .Top 10 Country โดยใช้ชุดฟอนต์ Tahoma , Geneva , Sansserif และให้ตัวอักษรมีขนาด 18 พิกเซล , เป็นตัวหนา , สีแดง และขีดเส้นใต้ข้อความด้วย

หมวด Background สำหรับกำหนดสีพื้น และภาพฉากหลัง ซึ่งสามารถนาไปใช้กับองค์ประกอบใดๆ ก็ได้ ไม่ว่าจะเป็นเว็บเพจทั้งหน้า , ย่อหน้าข้อความ , ตาราง ฯลฯ เช่น ถ้ากำหนดสีพื้นเป็นสีเหลือง เมื่อใช้สไตล์นี้กับเว็บเพจ (แท็ก <body> ) พื้นเว็บเพจจะเป็นสีเหลือง แต่ถ้าใช้กับตารางพื้นของตารางก็จะเป็นสีเหลือง

หมวด Background

หมวด Block สำหรับกำหนดคุณสมบัติเกี่ยวกับระยะห่างระหว่างตัวอักษร หรือคำแต่ละคำ รวมทั้งลักษณะการจัดย่อหน้าของข้อความ

Background - color

กำหนดสีพื้น

Background - image

เลือกภาพฉากหลัง

Background - repeat

เลือกวิธีเรียงภาพซ้ำ (กรณีภาพฉากหลังเล็กกว่าพื้นที่ที่ใช้แสดง)

- No-repeat ไม่ต้องเรียงภาพซ้ำ (แสดงเพียงภาพเดียวเสมอ)

- Repeat เรียงภาพซ้ำทั้งแนวตั้งและแนวนอน

- Repeat - X เรียงภาพซ้ำในแนวนอนเพียงแถวเดียว

- Repeat - y เรียงภาพซ้ำในแนวตั้งเพียงคอลัมน์เดียว

Background -attachment

กำหนดให้ภาพฉากหลังเลื่อนตามการเลื่อนหน้าจอของผู้ชม

- Fixed ให้ภาพฉากหลังอยู่คงที่เสมอ

- Scroll ให้ภาพฉากหลังเลื่อนไปพร้อมกับเนื้อหาอื่นๆ

Background - position (X)

ตำแหน่งเริ่มต้นของการเรียงภาพในแนวนอน จะให้เริ่มจากด้านซ้าย (left) ตรงกลาง (center) ด้านขวา (right)

Background - position (Y)

ตำแหน่งเริ่มต้นของการเรียงภาพในแนวตั้ง จะให้เริ่มจากด้านบน (top) ตรงกลาง (center) ด้านล่าง (bottom) หรือระบุตำแหน่ง


คุณสมบัติ /คำอธิบาย

Work - spacing

ระยะห่างระหว่างคำ

Letter - spacing

ระยะห่างตัวอักษรแต่ละตัวที่เพิ่ม/ลดจากค่าปกติ (ใช้ค่าลบได้)

Vertical - align

วิธีจัดตำแหน่งในแนวตั้งของออบเจ็ค เมื่อเทียบกับองค์ประกอบหลักที่มันเกาะอยู่ เช่น หากรูปภาพถูกวางไว้บนย่อหน้าของข้อความ เมื่อคุณใช้สไตล์กับรูปภาพ คุณสมบัตินี้จะกำหนดวิธีจัดตำแหน่งภาพ เมื่อเทียบกับข้อความในย่อหน้านั้น

Text - align

การจัดตำแหน่งข้อความในย่อหน้าให้อยู่ชิดซ้าย (left) กึ่งกลาง (center) ชิดขวา (right) หรือให้ตรงกันทั้งด้านซ้าย และขวา (justify)

Text - indent

การจัดเยื้องข้อความบรรทัดแรกของย่อหน้า (ค่าบวก คือเยื้องไปทางขวา ค่าลบ คือเยื้องไปทางซ้าย)

White - space

วิธีจัดการกับช่องว่าง หรือการเว้นวรรคภายในข้อความ และการปัดคำขึ้นบรรทัดใหม่


ตัวอย่าง : การสร้างสไตล์เพื่อจัดรูปแบบย่อหน้าข้อความ

สมมติว่าต้องการสร้างสไตล์ชื่อ .txtparagraph โดยให้ตัวอักษรมีระยะห่างเพิ่มจากปกติ 1 พิกเซล , ให้ตำแหน่งอยู่กึ่งกลางเซลในแนวตั้ง และจัดข้อความชิดซ้าย

หมวด Box สำหรับกำหนดขนาดของออบเจ็ค และระยะห่างระหว่างออบเจ็คกับเนี้อหาอื่นๆ รวมทั้งวิธีจัดตำแหน่งออบเจ็คเทียบกับเนื้อหาปกติ


คุณสมบัติ คำอธิบาย

Width / height

ความกว้าง และความสูงของออบเจ็ค เช่น ถ้าใช้สไตล์นี้กับรูปภาพ ภาพก็จะมีขนาดกว้าง และสูงตามค่านี้ (โดยไม่ขึ้นกับค่าที่กำหนดบนพาเนลProperties)

Float

ตำแหน่งของออบเจ็ค เมื่อเทียบกับเนื้อหาปกติ เช่น รูปภาพที่วางไว้บนย่อหน้าข้อความคุณสามารถกำหนดให้มันไปอยู่ชิดขอบด้านซ้าย หรือขวา แล้วให้ข้อความโปรยตัวลงมาตามขอบด้านที่ว่าง (คล้ายการจัดตำแหน่งภาพเทียบกับข้อความ)

- Left ให้ออบเจ็คไปอยู่ชิดขอบด้านซ้าย ส่วนเนื้อหาปกติจะโปรยตัวลงมาทางขวา

- Right ให้ออบเจ็คไปอยู่ชิดด้านขวา ส่วนเนื้อหาปกติจะโปรยตัวลงมาทางซ้าย

- None ไม่มีการเปลี่ยนตำแหน่งออบเจ็ค

Clear

ใช้กำหนดคุณสมบัติของเนื้อหาที่ไม่ต้องการให้มีออบเจ็คใดๆ มาวางอยู่ด้านข้าง ซึ่งถ้ามีก็ให้เนื้อหานี้ถูกปัดลงไปอยู่ใต้ออบเจ็คทันที (คุณสมบัตินี้จะไม่มีผลกับย่อหน้าที่คุณวางออบเจ็คไว้ และไม่สามารถใช่ร่วมกับออปชั่น Float)

padding

ระยะห่างระหว่างเนื้อหาจริงของออบเจ็คกับขอบเขตด้านบน (top) ด้านล่าง (bottom) ด้านซ้าย (left) และด้านขวา (right) ไม่ว่าจะถูกกำหนดให้แสดงเส้นกรอบ หรือไม่

margin

ระยะห่างระหว่างขอบเขตของออบเจ็คกับเนื้อหาอื่น โดยรอบ

Width / height

ความกว้าง และความสูงของออบเจ็ค เช่น ถ้าใช้สไตล์นี้กับรูปภาพ ภาพก็จะมีขนาดกว้าง และสูงตามค่านี้ (โดยไม่ขึ้นกับค่าที่กำหนดบนพาเนลProperties)


ตัวอย่าง : การสร้างสไตล์เพื่อกำหนดระยะห่างระหว่างออบเจ็ค

สมมติว่าต้องการสร้างสไตล์ชื่อ .txtbox โดยให้จัดออบเจ็คชิดด้านขวา มีระยะระหว่างออบเจ็คกับขอบ 15 พิกเซลทุกด้าน และระยะระหว่างขอบออบเจ็คกับเนื้อหาอื่นๆ 15 , 0 , 15 และ 10 พิกเซลตามลำดับ

หมวด Border สำหรับกำหนดคุณสมบัติเกี่ยวกับรูปแบบความหนา และสีของเส้นกรอบ โดยแต่ละด้านอาจมีลักษณะที่แตกต่างกันได้ คุณสมบัตินี้สามารถใช้ได้กับออบเจ็คต่างๆ ไม่ว่าจะเป็นภาพกราฟิก , ตาราง หรือเซล , เลเยอร์ และข้อความ เป็นต้น

หมวด List สำหรับกำหนดคุณสมบัติของรายการแบบมีหัวข้อ (list) โดยสามารถเลือกใช้เลขลำดับ หรือสัญลักษณ์หน้าหัวข้อแบบมาตรฐาน หรือจะให้รูปภาพแทนก็ได้

ตัวอย่าง : การสร้างสไตล์เพื่อจัดรูปแบบรายการแบบมีหัวข้อ

สมมติว่าต้องการสร้างสไตล์ชื่อ .bullet โดยใช้รูปภาพ arrow_whitebg.gif มาแสดงเป็นสัญลักษณ์หน้าหัวข้อ และกำหนดตำแหน่งแบบ inside

หมวด Positioning สำหรับแยกออบเจ็คออกจากเนื้อหาปกติของเว็บเพจ เพื่อให้สามารถกำหนดตำแหน่ง , ขนาด , การซ่อน/แสดง และอื่นๆ ได้อย่างอิสระ หรือสรุปก็ คือออบเจ็คจะมีคุณสมบัติเหมือน AP Element นั่นเอง

ตัวอย่าง : การสร้างสไตล์เพื่อแยกออบเจ็คจากเว็บเพจ

สมมติว่าต้องการสร้างสไตล์ชื่อ .photo_position เพื่อแยกรูปภาพออกจากเนื้อหาปกติ โดยให้มีขนาด 215 × 331 พิกเซล และวางไว้ที่ตาแหน่ง 40 พิกเซล จากขอบบน และ 20 พิกเซล จากขอบขวาของเว็บเพจ หมวด Extensions สำหรับกำหนดคุณสมบัติอื่นๆ ซึ่งจะใช้ได้กับบราวเซอร์เพียงบางตัว ดังนั้นจึงควรทดสอบก่อนนำไปใช้งาน

ตัวอย่าง : การสร้างสไตล์เพื่อกำหนดเอฟเฟ็คต์พิเศษให้รูปภาพ

สมมติว่าต้องการสร้างสไตล์ชื่อ .photo_effect เพื่อให้เมาส์กลายเป็นรูป + (crosshair) และให้ภาพพลิกกลับด้านในแนวนอน

การแก้ไขปรับแต่งสไตล์

คุณสามารถแก้ไขค่าคุณสมบัติเดิม หรือเพิ่มคุณสมบัติใหม่ให้กับสไตล์ได้ ไม่ว่าจะเป็นสไตล์ที่โปรแกรมสร้างให้อัตโนมัติ หรือสไตล์ที่สร้างเอง โดยทำได้หลายวิธี เช่น

- แก้ไขด้วยพาเนล CSS Styles

- ดับเบิลคลิกที่ชื่อสไตล์ แล้วใช้ไดอะล็อกบ็อกซ์ CSS Rule derintion กำหนดคุณสมบัติ

- เหมือนกับตอนสร้างสไตล์แก้ไขคำสั่ง CSS ในมุมมอง Code

เทคนิคการแก้ไขคุณสมบัติของสไตล์

- ค่าประเภทสี จะแสดงเป็นรูปไอคอนซึ่งคุณสามารถคลิก เพื่อเลือกสีจากตารางสี หรือคลิกในช่องทางขวาเพื่อพิมพ์ค่าสีเอง

- ค่าที่เป็นตัวเลือกทั่วๆ ไป เมื่อคลิกแล้วจะปรากฏเมนูสำหรับเลือกค่าที่ต้องการได้

- ค่าที่ให้พิมพ์ตัวเลขเองได้ มักจะมีช่องให้ระบุหน่วยด้วย

- ค่าที่ต้องระบุชื่อไฟล์ จะมีเครื่องมือให้ใช้เลือกไฟล์ได้

- ค่าที่ไม่มีตัวเลือก เป็นค่าที่คุณต้องพิมพ์คำสั่ง CSS แบบย่อเข้าไปเอง

แก้ไขคุณสมบัติของออบเจ็คที่กำลังเลือก

วิธีแก้ไขสไตล์ที่กล่าวมาในหัวข้อก่อน จะได้ผลดีถ้าโครงสร้างของการใช้สไตล์ CSS บนเว็บเพจไม่ซับซ้อนนัก และคุณรู้แน่ชัดว่าคุณสมบัติที่ต้องการแก้ไขนั้นมาจากสไตล์ใด

แต่เมื่อการใช้สไตล์ซับซ้อนมากขึ้น คุณสมบัติของออบเจ็คที่คุณต้องการแก้ไขอาจจะมาจากหลายสไตล์ คือบางอย่างก็มาจากสไตล์ที่คุณกำหนดให้กับออบเจ็คนั้นเอง แต่บางอย่างก็มาจากสไตล์ขององค์ประกอบอื่นๆ ที่ครอบออบเจ็คนั้นอยู่ ซึ่งวิธีง่ายๆ ที่ช่วยให้แก้ไขได้ถูกจุดทำ ดังนี้

ตรวจสอบคุณสมบัติของออบเจ็คด้วยพาเนล CSS Styles

ออบเจ็คบนเว็บเพจอาจจะได้รับรูปแบบมาจากสไตล์ต่างๆ กัน ทำให้บางครั้งคุณสับสนว่าคุณสมบัติที่กำลังมีผลจริงอยู่นั้นมาจากสไตล์ใด และถ้าจะแก้ไขควรแก้ที่จุดใด ด้วยเหตุผลนี้โปรแกรมจึงได้เตรียมเครื่องมือบนพาเนล CSS Styles เพื่อให้คุณมองเห็นความสัมพันธ์ระหว่างออบเจ็คกับสไตล์ทั้งหมดที่มีผลต่อตัวมัน โดยแบ่งพื้นที่เป็น 3 ส่วนดังรูป

ส่วนที่ 1 : แสดงคุณสมบัติทั้งหมดที่มีผลจริงต่อออบเจ็คจะมาได้จาก 2 กรณี คือ

- กรณีที่ 1 คุณสมบัติของสไตล์ที่กำหนดไว้กับออบเจ็คนี้

- กรณีที่ 2 คุณสมบัติของสไตล์ที่กำหนดไว้กับแท็กต่างๆ ที่ครอบออบเจ็คนี้อยู่

ดังนั้นคุณสมบัติที่แสดงในส่วนที่ 1 นี้จึงอาจจะมาจากหลายสไตล์ก็ได้ โดยถ้าสไตล์ต่างๆขัดแย้งกัน คุณสมบัติซึ่งถูกกำหนดทีหลังเท่านั้นที่จะมีผลจริง เช่น ถ้าโครงสร้างสไตล์ของเว็บเพจมีส่วนประกอบดังนี้

- ตัวเว็บเพจถูกกำหนดให้ใช้ฟอนต์ Microsoft Sans Serif ขนาด 12 px

- เซลของตารางถูกกำหนดให้ข้อความเป็นสีน้าเงิน

- ย่อหน้าข้อความที่อยู่ภายในเซลถูกกำหนดให้ใช้ขนาดตัวอักษร 16 px

ส่วนที่ 2 : แสดงคำอธิบาย หรือรายชื่อแท็กที่ครอบออบเจ็ค

ส่วนที่ 3 : แสดงคุณสมบัติทั้งหมดของสไตล์

คุณสมบัติที่แสดงจะแบ่งเป็น 2 กรณี คือ

- กรณีที่ 1 เมื่อคุณคลิกเลือกคุณสมบัติใดจากส่วนที่ 1 ส่วนที่ 3 นี้จะแสดงรายการของคุณสมบัติทั้งหมดที่อยู่ในสไตล์เดียวกัน

- กรณีที่ 2 เมื่อคุณคลิกเลือกชื่อแท็ก หรือชื่อสไตล์จากส่วนที่ 2 ส่วนที่ 3 นี้จะแสดงรายการของคุณสมบัติทั้งหมดที่อยู่ในสไตล์นั้น

คุณสมบัติที่ถูกขีดฆ่า ในส่วนที่ 3 นี้ บางครั้งคุณจะพบว่ามีคุณสมบัติบางรายการที่ถูกขีดฆ่าไป ซึ่งถ้าต้องการรู้สาเหตุก็ให้เลื่อนเมาส์ไปชี้จะปรากฏคาอธิบาย แต่โดยทั่วไปสาเหตุจะแบ่งเป็น 2 กรณี

- คุณสมบัติดังกล่าวถูกยกเลิกโดยสไตล์ของแท็กที่อยู่ในลำดับถัดลงไป

- คุณสมบัติดังกล่าวไม่สามารถสืบทอดไปยังแท็กลำดับถัดไป คุณสมบัติบางอย่างจะไม่มีการสืบทอดต่อไป ดังนั้นมันจึงไม่ส่งผลไปยังแท็กที่ถูกครอบอยู่

การสร้างสไตล์เก็บเป็นไฟล์ CSS

นอกจากการสร้างสไตล์เพื่อใช้ภายในเว็บเพจนั้นเองแล้ว คุณยังสามารถแยกสไตล์เก็บเป็นไฟล์สไตล์ชีต (.css) เพื่อนาไปใช้กับเว็บเพจอื่นๆ ได้ โดยขั้นตอนการสร้างจะแตกต่างออกไปเล็กน้อยตรงที่คุณต้องระบุว่าจะให้โปรแกรมจัดเก็บสไตล์ที่สร้างใหม่ไว้ในไฟล์ใด

ผลที่ได้บนพาเนล CSS Styles จะปรากฏชื่อไฟล์ และถัดลงไปจะเป็นชื่อสไตล์แรกที่สร้าง หลังจากนี้คุณสามารถเพิ่มสไตล์เข้าไปยังไฟล์เติมได้ โดยในขั้นตอนที่ 4 ให้เลือกชื่อไฟล์ CSS นั้นแทรกการเลือก (New > Style Sheet > File)

ความแตกต่างระหว่าง Link และ Import

โดยทั่วไปขอแนะนาให้ใช้วิธี Link ซึ่งเหมาะกับไฟล์ CSS ที่มีขนาดใหญ่ นอกจากนี้วิธี Import จะใช้ไม่ได้กับบางบราวเซอร์ สำหรับความแตกต่างระหว่าง 2 วิธีนี้ที่ปรากฏใน Dreamweaver คือ

- ลักษณะของรายชื่อสไตล์ที่ปรากฏบนพาเนล CSS Styles จะต่างกัน

- เมื่อดูในมุมมอง Code คำสั่งที่นำไฟล์ CSS เข้ามาใช้จะแตกต่างกัน คือ กรณี Link

ชนิดของสื่อ (Medie) เป็นการระบุว่าคุณต้องการใช้สไตล์ในไฟล์ CSS นั้นเพื่อแสดงผลกับสื่อชนิดใด ซึ่งสื่อที่สำคัญได้แก่

- All (หรือไม่ระบุ) หมายถึงใช้กับสื่อทุกประเภท

- Print หมายถึงเครื่องพิมพ์ โดยสไตล์ในไฟล์ CSS จะมีผลเมื่อคุณสั่งพิมพ์เว็บเพจเท่านั้น

- Screen หมายถึงจอภาพ

ตัวอย่าง ถ้าต้องการให้คุณสมบัติของข้อความขณะแสดงบนจะภาพ และขณะที่พิมพ์แตกต่างกันก็ทำได้โดย

1. สร้างไฟล์ CSS 2 ไฟล์ คือ mystyle_screen และ mystyle_print โดยในแต่ละไฟล์ให้สร้างสไตล์ชื่อเดียวกัน แต่กำหนดคุณสมบัติที่แตกต่างกัน เพื่อให้เหมาะกับสื่อประเภทแต่ละประเภท

2. นำไฟล์ CSS ทั้งสองเข้ามาใช้บนเว็บเพจ โดยไฟล์ mystyle_screen.css ให้เลือก media เป็น screen และไฟล์ mystyle_print ให้เลือก print

3. กำหนดสไตล์ให้กับข้อความ แล้วทดสอบโดยคลิกปุ่มบนทูลบาร์ Style Rendering

ตัวอย่าง การเปลี่ยนสีสโครบาร์ของบราวเซอร์ด้วยสไตล์ CSS

สไตล์ CSS นอกจากจะใช้เพื่อจัดรูปแบบขององค์ประกอบบนเว็บเพจแล้วยังสามารถใช้สร้างเอฟเฟ็คต์พิเศษบางอย่างได้ ซึ่งเอฟเฟ็คต์หนึ่งที่นิยมกันก็ คือการเปลี่ยนสีสโครลบาร์ของบราวเซอร์

เอฟเฟ็คต์นี้จะใช้ได้กับบางบราวเซอร์เท่านั้น โดยคุณจะต้องพิมพ์คาสั่งเองในมุมมอง Code โดยแทรกไว้ระหว่างแท็กที่ส่วนหัวของเว็บเพจ

การตรวจสอบโค้ด CSS ด้วย CSS Inspection

คุณสามารถตรวจสอบโค้ด CSS โดยใช้ CSS Inspection ซึ่งเป็นคุณสมบัติใหม่ที่เพิ่มเข้ามาให้ใช้งานร่วมกับมุมมอง Live View ในขณะที่แสดงผลหน้าเว็บอยู่เพียงเลื่อนเมาส์หรือคลิกบริเวณที่ต้องการตรวจสอบ โปรแกรมจะแสดงสไตล์รวมทั้งคำสั่ง CSS ที่กำหนดไว้ขึ้นมาทั้งหมดคุณสามารถดู หรือแก้ไขโค้ดได้ทันที


การตบแต่งหน้าเว็บเพจด้วยรูป

การใช้งานเครื่องมือ Page Properties สามารถทำได้ดังนี้

1.เปิดเว็บเพจที่ต้องการปรับแต่ง

2.ไปที่ Menu เลือก Modify > Page Properties

3.จะมีหน้าต่างขึ้นมาดังรูปด้านล่าง

ทดลองเปลี่ยน พื้นหลัง , ชนิดของ font , สีของตัวอักษร , ระยะห่างของวัตถุกับหน้าเว็บเพจ

1.เปิดหน้าเว็บเพจที่ต้องการปรับแต่ง

2.ไปที่ Menu เลือก Modify > Page Properties

3.จะมีหน้าต่างขึ้นมา

4.ที่ categoty ทางซ้ายมือเลือก appearance จะมีหน้าจอให้ปรับ

รายละเอียดต่างๆของเครื่องมือมีดังนี้

1.Page font ใช้ปรับแต่งชนิดของ font ที่แสดงผล ด้านหลังจะมีสัญลักษณ์ B (ทำให้แสดงผลในหน้านี้เป็นตัวหนาทั้งหมด) และ I (ทำให้แสดงผลในหน้านี้เป็นตัวเอียงทั้งหมด) สามารถเลือกคลิกได้

2.Size ในช่องนี้คือขนาดของตัวอักษรที่จะแสดงในเว็บเพจ

3.Text color ใช้กำหนดสีของตัวอักษรที่จะแสดงในเว็บเพจ โดยคลิกที่กล่องสีเหลี่ยมจะมีสีให้เลือก

4.Background Color ใช้กำหนดสีพื้นหลังของเว็บเพจ โดยคลิกที่กล่องสีเหลี่ยมจะมีสีให้เลือก

5.Background image ใช้กำหนดภาพพื้นหลังของเว็บเพจ โดยคลิกที่ Browse จะมีหน้าต่างให้เลือกภาพที่จะใช้แสดงเป็นพื้นหลัง

6.Repeat ใช้กำหนดการแสดงผลของภาพพื้นหลัง โดยมีคำสั่งดังนี้

1.no-repeat ให้แสดงผลภาพพื้นหลังเพียงครั้งเดียว

2.repeat ให้แสดงผลภาพพื้นหลังซ้ำกันหลายๆครั้งจะเต็มพื้นที่เว็บเพจ

3.repeat-x ให้แสดงผลภาพพื้นหลังซ้ำกันเฉพาะในแนวนอนเท่านั้น

4.repeat-y ให้แสดงผลภาพพื้นหลังซ้ำกันเฉพาะในตั้งนอนเท่านั้น

7.Margin เป็นคำสั่งที่ใช้กำหนดระยะห่างของตัวอักษร และภาพ กับเว็บเพจ มีรายละเอียดดังนี้

1. left margin กำหนดให้วัตถุทุกอย่างห่างจากขอบเว็บเพจทางซ้ายเป็นระยะที่เรากำหนด

2. right margin กำหนดให้วัตถุทุกอย่างห่างจากขอบเว็บเพจทางขวาเป็นระยะที่เรากำหนด

3. top margin กำหนดให้วัตถุทุกอย่างห่างจากขอบเว็บเพจด้านบนเป็นระยะที่เรากำหนด

4. bottom margin กำหนดให้วัตถุทุกอย่างห่างจากขอบเว็บเพจด้านล่างเป็นระยะที่เรากำหนด

คลิกโอเค เว็บเพจก็จะปรับหน้าตามที่เราได้ตั้งไว้

เปลี่ยนสีของตัวอักษรที่เป็น Hyperlink

เราสามารถเปลี่ยนสี ขนาด การขีดเส้นใต้ ของตัวอักษรที่เป็น Hyperlink ได้ตามขั้นตอนด้านล่าง

1.เปิดหน้าเว็บเพทที่ต้องการปรับแต่ง

2.ไปที่ Menu เลือก Modify > Page Properties

3.จะมีหน้าต่างขึ้นมาดังรูปด้านล่าง

4.ที่ categoty ทางซ้ายมือเลือก link จะมีหน้าจอให้ปรับดังรูป


รายละเอียดต่างๆของเครื่องมือมีดังนี้

1. Link font เป็น font ที่จะใช้แสดงตัวอักษรที่เป็น hyperlink ด้านหลังจะมีสัญลักษณ์ B (ทำให้ตัวอักษรที่เป็น hyperlink เป็นตัวหนาทั้งหมด) และ I (ทำให้ตัวอักษรที่เป็น hyperlink เป็นตัวเอียงทั้งหมด) สามารถเลือกคลิกได้

2. Size ปรับขนาดของตัวอักษรที่เป็น hyperlink

3. การปรับสีของ hyperlink เมื่ออยู่ในสถานะต่างๆ มีรายละเอียดดังนี้

1.Link Color เป็นสีที่ใช้แสดง Hyperlink ที่เรายังไม่เคยคลิกเปิดดู

2.Visited Links เป็นสีที่ใช้แสดง Hyperlink ที่เราเคยคลิกเปิดดูแล้ว

3.Rollover Links เป็นสีที่ใช้แสดง Hyperlink เมื่อมีเมาส์วางอยู่ด้านบน

4.Active Links: เป็นสีที่ใช้แสดง Hyperlink เมื่อเราคลิกที่ hyperlink

4.ปรับการขีดเส้นใต้ของ Hyperlink มีรายละเอียดดังนี้

1.Always underline ให้แสดงเส้นใต้ในทุกกรณี

2.Never underline ไม่แสดงเส้นใต้ในทุกกรณี

3.Show underline only on rollver แสดงเส้นใต้เฉพาะตอนที่มีเมาส์อยู่ด้านบนเท่านั้น

4.Hide underline on rollver ปรกติจะแสดงเส้นใต้ แต่เมื่อเมาส์อยู่ด้านบนไม่ต้องแสดงเส้นใต้

คลิกโอเค Hyperlink ก็จะปรับหน้าตามที่เราได้ตั้งไว้