การจัดรูปแบบหน้าเว็บเพจ

1. ครูปิยะดนัย วิเคียน โรงเรียนเสริมงามวิทยาคม https://krupiyadanai.wordpress.com
การจัดรูปแบบหน้าเว็บเพจ
การจัดรูปแบบหน้าเว็บเพจเป็นกาหนดค่าเริ่มต้นให้กับเว็บเพจ เช่น การกาหนดสีตัวอักษร การใส่สี
พื้นหลัง การใส่รูปภาพพื้นหลัง การใส่ Title ฯลฯ เป็นต้น โดยมีขั้นตอนดังนี้
1. ไปที่เมนู Modify >> Page Properties… หรือ กด Ctrl+J ที่คีย์บอร์ด
รูปที่ 1 การตั้งค่าหน้าเอกสารเว็บเพจ
2. จะปรากฏหน้าตาดังรูป เราสามารถกาหนดคุณสมบัติพื้นฐาน ดังนี้
รูปที่ 2 การตั้งค่า Appearance (CSS)

2. ครูปิยะดนัย วิเคียน โรงเรียนเสริมงามวิทยาคม https://krupiyadanai.wordpress.com
 การกาหนดลักษณะการแสดงผล (Appearance (CSS))
Appearance (CSS) เป็นการกาหนดคุณสมบัติแบบ CSS ซึ่งเป็นการกาหนดรูปแบบการ
แสดงผลแบบใหม่ที่จะช่วยลดการใช้ภาษา HTML มีรายละเอียดดังนี้คือ
Page font การกาหนดรูปแบบตัวอักษร (font) ภายในเว็บเพจ
Size การกาหนดขนาดของตัวอักษรภายในเว็บเพจ
Text color ใช้กาหนดสีของตัวอักษรที่จะแสดงในเว็บเพจ โดยคลิกที่กล่องสี
เหลี่ยมจะมีสีให้เลือก โดยจะแสดงสีตัวอักษรทั้งหน้าเว็บ
Background color การกาหนดสีพื้นหลังของเว็บเพจ โดยคลิกที่กล่องสีเหลี่ยมจะมีสี
ให้เลือก
Background image ใช้กาหนดภาพฉากหลังของหน้าเว็บเพจ ให้เรา Click ที่ปุ่ม
Browse เพื่อเลือกรูปภาพมาเป็นพื้นหลังของเว็บเพจ (ในกรณีที่
ใช้พื้น Background เป็นรูปภาพ)
Repeat ใช้กาหนดการแสดงผลของภาพพื้นหลัง
Left margin การกาหนดระยะห่างของขอบเว็บเพจของเรากับขอบของ
Browser ทางซ้ายมือของเรา
Right margin การกาหนดระยะห่างของเว็บเพจที่เราออกแบบกับขอบของ
Browser ทางด้านขวา
Top margin การกาหนดระยะห่างของเว็บเพจที่เราออกแบบกับขอบของ
Browser ทางด้านบน
Bottom margin การกาหนดระยะห่างของเว็บเพจที่เราออกแบบกับขอบของ
Browser ทางด้านล่าง

3. ครูปิยะดนัย วิเคียน โรงเรียนเสริมงามวิทยาคม https://krupiyadanai.wordpress.com
 การกาหนดลักษณะการแสดงผล (Appearance (HTML))
Appearance (HTML) เป็นการกาหนดคุณสมบัติลักษณะการแสดงผลแบบเก่าที่ใช้ภาษา HTML
มีรายละเอียดดังนี้คือ
รูปที่ 3 การตั้งค่า Appearance (HTML)
Background image ใช้กาหนดภาพฉากหลังของหน้าเว็บเพจ ให้เรา Click ที่ปุ่ม
Browse เพื่อเลือกรูปภาพมาเป็นพื้นหลังของเว็บเพจ (ในกรณีที่
ใช้พื้น Background เป็นรูปภาพ)
Background การกาหนดสีพื้นหลังของเว็บเพจ
Text ใช้กาหนดสีของตัวอักษรที่จะแสดงในเว็บเพจ โดยคลิกที่กล่องสี
เหลี่ยมจะมีสีให้เลือก โดยจะแสดงสีตัวอักษรทั้งหน้าเว็บ
Links การกาหนดสีของอักษรที่เป็น link
Visited links การกาหนดสีของข้อความซึ่งเป็น Link และได้ทาการ Click ใช้
งานไปแล้ว
Active links การกาหนดสีของข้อความซึ่งเป็น Link ที่กาลังใช้งานอยู่
Left margin การกาหนดระยะห่างของขอบเว็บเพจของเรากับขอบของ
Browser ทางซ้ายมือของเรา
Right margin การกาหนดระยะห่างของเว็บเพจที่เราออกแบบกับขอบของ
Browser ทางด้านขวา
Top margin การกาหนดระยะห่างของเว็บเพจที่เราออกแบบกับขอบของ
Browser ทางด้านบน
Bottom margin การกาหนดระยะห่างของเว็บเพจที่เราออกแบบกับขอบของ
Browser ทางด้านล่าง

4. ครูปิยะดนัย วิเคียน โรงเรียนเสริมงามวิทยาคม https://krupiyadanai.wordpress.com
 การกาหนดลักษณะการเชื่อมโยง (Link (CSS))
Link (CSS) เป็นการกาหนดคุณสมบัติการเชื่อมโยงเว็บเพจในรูปแบบการใช้งาน CSS มี
รายละเอียดดังนี้คือ
รูปที่ 4 การตั้งค่า Link (CSS)
Link font การกาหนดรูปแบบตัวอักษรของลิงค์
Size การกาหนดขนาดตัวอักษรของลิงค์
Text สีของค่าเริ่มต้นที่ใช้กับตัวอักษรภายในเว็บเพจ
Links colors การกาหนดสีของอักษรที่เป็น link
Rollover links การกาหนดสีของข้อความเมื่อนาเมาส์ไปวางที่ Link
Visited links การกาหนดสีของข้อความซึ่งเป็น Link และได้ทาการ Click ใช้
งานไปแล้ว
Active links การกาหนดสีของข้อความซึ่งเป็น Link ที่กาลังใช้งานอยู่
Underline Style การกาหนดรูปแบบของการขีดเส้นใต้ของ Link
 การกาหนดขนาดหัวเรื่องต่าง ๆ (Headings (CSS))
Headings (CSS) เป็นการกาหนดขนาดหัวเรื่องต่าง ๆ ซึ่งสามารถกาหนดรูปแบบตัวอักษรของ
หัวเรื่อง และขนาดของหัวเรื่องตั้งแต่ Heading 1 - Heading 6 พร้อมสีที่ต้องการในแต่ละขนาด

5. ครูปิยะดนัย วิเคียน โรงเรียนเสริมงามวิทยาคม https://krupiyadanai.wordpress.com
รูปที่ 5 การตั้งค่า Headings (CSS)
 Title/Encoding
Title/Encoding เป็นการกาหนดหัวเรื่องของเว็บเพจ และ ภาษาที่ใช้ในการสร้างเว็บเพจ
รูปที่ 6 การตั้งค่า Title/Encoding
Title การกาหนดหัวเรื่องของเว็บเพจ
Document Type (DTD) การกาหนดชนิดของเอกสารซึงมีผลต่อรูปแบบ และคุณสมบัติ
การทางานของแท็กที่เราจะใช้ในเอกสารหน้านั้น
Encoding การกาหนดภาษาที่ใช้ในการสร้างเว็บเพจ
 Tracing Image
Tracing Image เป็นการเลือกรูปภาพเพื่อใช้วางเป็นต้นแบบในการ Layout เว็บเพจ (ภาพที่
เลือกจะไม่แสดงออกทาง Browser
รูปที่ 6 การตั้งค่า Tracing Image