ในโปรแกรม Dreamweaver สามารถแบ่ง CCS Style เป็น 3ประเภทด้วยกันคือ
แบบที่ 1 CCS Style ที่สร้างขึ้นเอง
CCS Style ที่สร้างขึ้นเองเพื่อควบคุมรูปแบบเฉพาะในเว็บเพจ เช่น ข้อความบางส่วนที่ต้องการให้แตกต่างจากส่วนอื่น โดยการสร้าง CCS Style ใหม่มีขั้นตอนดังนี้
1.คลิกที่ปุ่ม New CCS Style
2.ปรากฏหน้าต่าง New CCS Styl ในช่อง Name ให้ตั้งชื่อ CCS Styl โดยต้องตั้งจุด (.) โดยที่นี้พิมพ์คำว่า .Jackstyle
3.ในหัวข้อ Selector Type คลิกเลือก Calass
4.ในหัวข้อ Define in คลืกเลือก This document oniy สำหรับปรับแต่งตัวอักษรให้ CCS Style เฉพาะเว็บเพจหน้านี้
7.ในส่วนของ Type ให้กำหนดรายละเอียดต่างๆ ดังนี้
ในช่อง Font เลือกรูปแบบตัวอักษร
ในช่อง Size เลือกขนาดตัวอักษร
ในช่อง Weight เลือกการปรับแต่งตัวอักษร
ในช่อง Style เลือกตัวอักษรปกติหรือเป็นตัวเอียง
ในส่วนช่อง Decoration ให้เลือกการปรับแต่งเพิ่มเติมหากไม่ต้องการให้คลิกที่ช่อง none
ในช่อง Color เลือกสีของตัวอักษร
8. คลิกที่ปุ่ม OK
9. ปรากฏ CCS Style ที่เรากำหนดขึ้นมาเอง
การใช้งาน CCS Style ที่เราสร้างขึ้นเอง
ในการใช้งาน CCS Style ที่สร้างขึ้นมีขั้นตอนดังนี้
1. เลือกข้อความที่ต้องการใช้งาน CCS Style
2. ในหน้าต่าง Properties ที่ช่อง Style ให้เลือก CCS Style ที่สร้างไว้
3. ข้อความที่เลือกจะมีรูปแบบเปลี่ยนไปตาม CCS Style ที่สร้างขึ้น
แบบที่ 2 CCS Style จากการแก้ไขคำสั่ง HTML
CSS Style จากการแก้ไขคำสั่ง HTML เป็นการใช้คำสั่ง CSS เพื่อเปลี่ยนแปลงแก้ไขคุณสมบัติ HTML โดยจะมีผลต่อองค์ประกอบบนเว็บเพจ ซึ่งมีขั้นตอนในการสร้างดังนี้
1.คลิกที่ปุ่ม New CSS Style
2.ในหัวข้อ Selector Type คลิกเลือก Tag(redefines the look of a specific tag)เพื่อสร้าง CSS Style จากการแก้ไขคำสั่ง HTML
3.ในหัวข้อ Define in คลิกเลือก This document only สำหรับใช้ CSS Style เฉพาะเว็บเพจหน้านี้
4.คลิกปุ่ม OK
5.คลิกเลือกคำสั่ง HTML จากช่อง Tag โดยในที่นี่ต้องการแก้ไข Head1 จึงเลือก h1
6.ในช่อง Category คลิกเลือกหัวข้อ Type สำหรับปรับแต่งตัวอัการให้ CSS Style
7.ในส่วนของ Type ให้กำหนดรายละเอียดต่างๆ ดังนี้
ในช่อง Font เลือกรูปแบบตัวอักษร
ในช่อง Size เลือกขนาดตัวอัษร
ในช่อง Weight เลือกการปรับแต่งตัวอัษร
ในช่อง Style เลือกตัวอักษรปกติหรือเป็นตัวเอียง
ในส่วนของ Decoration ให้เลือกการปรับแต่งเพิ่มเติม หากไม่ต้องการให้คลิกที่ช่อง none
ในช่อง Color เลือกสีของตัวอักษร
8.คลิกที่ปุ๋ม OK
9.ปรากฏ CSS Style จากการแก้ไขค่ำสั่ง HTML
การใช้งาน CCS Style จากการแก้ไขคำสั่งHTML/P>
ในการใช้งาน CCS Style จากการแก้ไขคำสั่ง HTML มีขั้นตอนดังนี้
1.เลือกข้อความที่ต้องการใช้งาน CCS Style
2.ในหน้าต่าง Properties ที่ช่อง Format ให้เลือก Heading 1
3.ข้อความที่เลือกไว้เปลี่ยนแปลงไปตาม CCS Style ที่ได้จากการแก้ไขคำสั่ง HTML
แบบที่ 3 CCS Style ควบคุมการแสดงผลของลิงก์
CCS Style แบบนี้ใช้ควบคุมการแสดงผลของลิงก์ เช่น สีของลิงก์ที่เป็นข้อความก่อนนำเมาส์ไปวางหรือหลังจากคลิกเลือกไปแล้ว รวมถึงรูปแบบและลักษณะของข้อความเป็นต้น โดยการสร้าง CCS Style ควบคุมการแสดงผลของลิงก์มีขั้นตอนดังนี้
1.คลิกที่ปุ่ม New Css Style
2.ในหัวข้อ Selector Type คลิกเลือก Advanced (IDs, Contextual selectors, etc) เพื่อสร้าง CCS Style ควบคุมการแสดงผลของลิงก์
3.ในหัวข้อ Define in คลิกเลือก This document only สำหรับใช้ CCS Style เฉพาะเว็บเพจหน้านี้
4.คลิกเลือกรูปแบบของลิงก์ในช่อง Selector ซึ่งมีรายละเอียดดังนี้
a:link หมายถึง ลิงก์ในรูปแบบปกติ
a:Visited หมายถึง ลิงก์เมื่อมีผู้เข้าชมคลิกเข้าไปดูแล้ว
a:hover หมายถึง ลิงก์เมื่อผู้เยี่ยมชมกำลังคลิกเลือก เพื่อรอเปิดเว็บเพจปลายทาง
a:active หมายถึง ลิงก์เมื่อผู้เยี่ยมชมกำลังคลิกเลือก เพื่อรอเปิดเว็บปลายทาง
5.การกำหนดรูปแบบของลิงก์จำเป็นต้องกำหนดตามลำดับ ดังนั้นให้เลือก ๐a:link ในชอง Selector ก่อน
6.คลิกที่ปุ่ม OK เพื่อกำหนดลิงก์ในสถานะปกติ
7.ในช่อง Category คลิกเลือกหัวข้อ Type สำหรับปรับแต่งตัวอักษรให้ CCS Style
8.ในส่วนของ Type ให้กำหนดรายละเอียดต่างๆ ดังนี้
ในช่อง Font เลือกรูปแบบตัวอักษร
ในช่อง Size เลือกขนาดตัวอักษร
ในช่อง Weight เลือกการปรับแต่งตัวอัษร
ในช่อง Style เลือกตัวอักษรปกติหรือเป็นตัวเอียง
ในส่วนของ Decoration ให้เลือกการปรับแต่งเพิ่มเติม หากไม่ต้องการให้คลิกที่ช่อง none
ในช่อง Color เลือกสีของตัวอักษร
9.คลิกที่ปุ่ม OK
10.ปรากฏ CSS Style ของลิงก์ในรูปแบบปกติ (a:link)
11.คลิกที่ปุ่ม New Css Style เพื่อสร้าง Css Style ในรูปแบบต่อไป
12.หัวข้อ Selector Type คลิกเลือก Advanced (IDs, Contextual selectors, etc) เพื่อสร้าง CCS Style ควบคุมการแสดงผลของลิงก์
13.ในหัวข้อ Define in คลิกเลือก This document only สำหรับใช้ CCS Style เฉพาะเว็บเพจหน้านี้
14.ในหัวข้อ Selector คลิกเลือก a:Visited
15.คลิกที่ปุ่ม OK
16.ในช่อง Category คลิกเลือกหัวข้อ Type สำหรับปรับแต่งตัวอักษรให้ CCS Style
17.ในส่วนของ Type ให้กำหนดรายละเอียดต่างๆ ดังนี้
ในช่อง Font เลือกรูปแบบตัวอักษร
ในช่อง Size เลือกขนาดตัวอักษร
ในช่อง Weight เลือกการปรับแต่งตัวอัษร
ในช่อง Style เลือกตัวอักษรปกติหรือเป็นตัวเอียง
ในส่วนของ Decoration ให้เลือกการปรับแต่งเพิ่มเติม หากไม่ต้องการให้คลิกที่ช่อง none
ในช่อง Color เลือกสีของตัวอักษร
18.คลิกที่ปุ่ม OK
19.ปรากฏ CSS Style ของลิงก์ในรูปแบบ a:Visited
20.คลิกที่ปุ่ม New Css Style เพื่อสร้าง Css Style ในรูปแบบต่อไป
21.ในหัวข้อ Selector คลิกเลือก a:hover
22.หัวข้อ Selector Type คลิกเลือก Advanced (IDs, Contextual selectors, etc) เพื่อสร้าง CCS Style ควบคุมการแสดงผลของลิงก์
23.ในหัวข้อ Define in คลิกเลือก This document only สำหรับใช้ CCS Style เฉพาะเว็บเพจหน้านี้
24.คลิกที่ปุ่ม OK
25.ในช่อง Category คลิกเลือกหัวข้อ Type สำหรับปรับแต่งตัวอักษรให้ CCS Style
26.ในส่วนของ Type ให้กำหนดรายละเอียดต่างๆ ดังนี้
ในช่อง Font เลือกรูปแบบตัวอักษร
ในช่อง Size เลือกขนาดตัวอักษร
ในช่อง Weight เลือกการปรับแต่งตัวอัษร
ในช่อง Style เลือกตัวอักษรปกติหรือเป็นตัวเอียง
ในส่วนของ Decoration ให้เลือกการปรับแต่งเพิ่มเติม หากไม่ต้องการให้คลิกที่ช่อง none
ในช่อง Color เลือกสีของตัวอักษร
27.คลิกที่ปุ่ม OK
28.ปรากฏ CSS Style ของลิงก์ในรูปแบบ a:hover
a:active เป็นรูปแบบของลิงก์เมื่อผู้เยี่ยมชมกำลังคลิกเลือกเพื่อรอเปิดเว็บเพจปลายทาง
ซึ่งเป็นรูปแบบที่ไม่มีความสำคัญเพราะเวลาระหว่างรอเปิดเว็บเพจปลายทางนั้นไม่นานนัก
ดังนั้นจึงข้ามไปไม้ต้องสร้างก็ได้
การใช้งาน CCS Style แบบควบคุมการแสดงผลของลิงก์
ในการใช้งาน CCS Style ที่ใช้ควบคุมการแสดงผลของลิงก์ มีขั้นตอนดังนี้
1.เลือกข้อความที่ต้องการใช้งาน CCS Style
2.ที่ช่อง Link พิมพ์ชื่อเว็บเพจปลายทาง
เมื่อได้เว็บเพจปลายทางที่ต้องการแล้ว ให้บันทึกเว็บเพจและกดปุ่ม เพื่อแสดงผลผ่านเบราเซอร์
จากนั้นคลิกที่ลิงก์ข้อความก็จะแสดงผลตามที่เรากำหนดไว้
