Workshop 9: สร้างป้ายหัวรายการ Workshop 10 : สร้างปุ่มสำหรับทำเมนูแบบ Rollover Workshop 11 : สร้างภาพ Background สำหรับพื้นเว็บเพจ

Workshop 9: สร้างป้ายหัวรายการ
เนื้อหาข้อมูลที่แสดงในหน้าเว็บเพจจะมีการแบ่งเนื้อหาให้เป็นหมวดหมู่ โดยการแบ่งออกเป็นหมวด ซึ่งจะมีข้อความหัวรายการหรือป้ายบอหัวรายการ เพื่อให้แยกเนื้อหาออกจากกันและสร้างความโดดเด่น เราอาจจะสร้างเป็นแถบป้ายชื่อ หรือภาพกราฟิกแล้วนำไปวางบนหัวรายการในแต่ละหมวดได้
- สร้างไฟล์รูปภาพใหม่ 1 ไฟล์ขนาด กว้าง 300 สูง 40 พิกเซล และพื้นหลังสีขาว
- ดับเบิลคลิกที่เลเยอร์ Background ให้เป็น Layer 0
- กำหนดสไตล์ให้กับเลเยอร์พื้นหลังตามต้องการ
- ใช้เครื่องมือ T Type พิมพ์ข้อความ ที่ต้องการแสดงบนป้ายรายการ
- กำหนดสไตล์ให้กับเลเยอร์ข้อความ
- บันทึกด้วยคำสั่ง File > Save for Web เพื่อจะนำไปใช้กับเว็บเพจต่อไป
Workshop 10 : สร้างปุ่มสำหรับทำเมนูแบบ Rollover
ปุ่มกดในเว็บเพจบางครั้งจะนิยมสร้างเอฟเฟ๊คต์เป็นแบบ Rollover ที่มีการโต้ตอบได้เมื่อผู้ชมเลื่อนเมาส์ไปบนปุ่ม เช่น มีการเปลี่ยนรูปภาพจากรูปภาพหนึ่งเป็นอีกรูปภาพหนึ่งซึ่งรูปภาพจะต้องเป็นขนาดเดียวกันแต่แตกต่างที่สี วิธีการเตรียมปุ่มสำหรับไปสร้างปุ่ม Rollover ในเว็บเพจแบบง่าย ๆ ทำได้ดังนี้
- เลือกคำสั่ง File > New และเลือกขนาดของไฟล์ กว้าง 120 สูง 30 พิกเซล กำหนดพื้นหลังเป็น Transparent
- ดับเบิลคลิกที่เลเยอร์ Background เปลี่ยนให้เป็น Layer 0
- กำหนดสีหรือรูปแบบสไตล์ให้กับเลเยอร์แรก
- คลิกลากเลเยอร์แรกมาที่ปุ่ม New Layer เพื่อก๊อปปี้เลเยอร์
- กำหนดชื่อให้กับเลเยอร์ทั้ง 2 ว่า UP และ Over ตามลำดับ
- กำหนดสีหรือรูปแบบสไตล์ให้กับเลเยอร์ที่สอง
- เลือกเครื่องมือ Type คลิกที่พิมพ์ข้อความที่จะแสดงบนปุ่มและปรับแต่งให้สวยงาม

Workshop 11 : สร้างภาพ Background สำหรับพื้นเว็บเพจ
Background หรือฉากหลังของเว็บเพจนั้นสามารถสร้างได้หลายขนาด เช่น สร้างเป็นภาพขนาดเล็กแล้วนำไปเรียงต่อกันเป็นภาพขนาดใหญ่แสดงเต็มพื้นเว็บเพจ หรือนำมาเรียงต่อกันแสดงด้านใดด้านหนึ่งของเว็บเพจ โดยใช้กับคำสั่ง CSS สร้างสไตล์ชีตภาพฉากหลัง ซึ่งวิธีการเตรียมรูปภาพมีดังนี้

การสร้างภาพขนาดเล็ก
จะเป็นรูปภาพใด ๆ ที่คุณต้องการนำมาตกแต่งพื้นหลังเว็บเพจ แต่ขนาดของภาพไม่ต้องใหญ่มาก
1. สร้างไฟล์รูปภาพที่ต้องการ ขนาดของภาพขึ้นอยู่กับว่าคุณจะนำไปใช้อย่างไร เช่น กำหนดเป็นพื้นฉากหลังรูปภาพ เพื่อนำไปใช้กับเว็บเพจที่มีสีพื้นหลากสีก็ควรเลือกฉากหลังเป็นโปร่งใส หากจะนำไปใช้กับพื้นเว็บเพจสีใด ๆ ก็กำหนดเป็นพื้นสีนั้นไปเลย และถ้าเป็นรูปแขนาดใหญ่อาจจะกำหนดค่า Opacity ของเลเยอร์ให้ต่ำ ๆ สีจะได้ดูอ่อน ๆ ไม่เข้มมากจนเกินไป
2. เลือกคำสั่ง File > Save for Web บันทึกไฟล์รูปภาพ และนำไปใช้ในโปรแกรมจัดหน้าเว็บเพจ

สร้างภาพฉากหลังแนวนอน
จะเป็นกราฟิกขนาดคงที่แน่นอนเท่ากับจำนวนความกว้างของเว็บเพจสูงสุดที่นิยมใช้กัน คือ กว้าง 1024 พิกเซล สูงไม่มากนักเพราะต้องนำภาพมาเรียงต่อกันในแนวนอน
1. เลือกคำสั่ง File > New และเลือกขนาดของไฟล์ กว้าง 1024 สูง 20 พิกเซล กำหนดฉากหลังเป็น White
2. คลิกเครื่องมือเติมสีแบบ Gradient และเลือกสีที่ต้องการไล่ระดับ หรือเติมลวดลายด้วย Pattern
3. คลิกลากลงสีจากมุมด้านใดด้านหนึ่งของพื้นที่ภาพ
4. เลือกคำสั่ง File > Save for Web
5. เลือกการบันทึกไฟล์เป็นภาพ GIF หรือ JPG
6. คลิกปุ่ม OK กำหนดชื่อไฟล์ และคลิกปุ่ม Save
7. นำไปทำพื้นฉากหลังของเว็บเพจด้วยโดยกำหนดใน Page Properties และ Background lmage