Workshop 12 : สร้างภาพพื้นหลังขนาดใหญ่ Workshop 13 : ออกแบบหน้าโฮมเพจ Workshop 14 : ออกแบบหน้าโฮมเพจ (index.html)

Workshop 12 : สร้างภาพพื้นหลังขนาดใหญ่
การสร้างภาพขนาดใหญ่เพื่อนำไปใช้เป็นฉากหลังของเว็บเพจทั้งหน้านั้น เราอาจจะระบุค่าความกว้างความสูงเท่ากับขนาดของหน้าเว็บเพจไปเลย ซึ่งจะทำให้ภาพมีขนาดใหญ่มากและจะทำให้เว็บเพจหน้านั้นโหลดช้ากว่าปกติบ้าง วิธีสร้างภาพขนาดใหญ่ทำได้ดังนี้
เมื่อได้รูปภาพตามต้องการแล้วก็ใช้คำสั่ง File > Save for Web บันทึกรูปภาพนี้ไว้เพื่อที่จะนำไปใช้ในเว็บเพจต่อไป

Workshop 13 : ออกแบบหน้าโฮมเพจ
การสร้างรูปภาพขนาดใหญ่สำหรับนำไปทำเป็นพื้นหลังของเว็บเพจนั้นอาจจะทำให้เราเปลี่ยนแปลงอะไรได้ยาก และขนาดของไฟล์รูปภาพจะใหญ่เพราะต้องแสดงภาพที่เดียวทั้งหมด แต่การจะทำให้เว็บเพจมีฉากหลักหรือส่วนหัวท้ายเว็บเพจที่สวยงามนั้นเราอาจจะใช้วิธีการออกแบบเว็บเพจภายในโปรแกรม Photoshop ไปเลยทั้งหน้า เมื่อจะนำไปใช้งานก็ใช้วิธีการ Slice ภาพให้เป็นชิ้นเล็ก ๆ เพื่อที่จะทำให้ภาพมีขนาดเล็กลงและโหลดได้เร็วขึ้น
ในปัจจุบันการพัฒนาเว็บไซท์จึงนิยมออกแบบหน้าโฮมเพจ และเว็บเพจหน้าอื่น ๆ ด้วยโปรแกรมออกแบบกราฟิก เช่น Photosthop lllustrator หรือ โปรแกรม Flash ใน Workshop นี้จะมาดูวิธีการออกแบบหน้าโฮมเพจและเว็บเพจอื่น ๆ
ออกแบบหน้าเว็บเพจแบบหน้าเดียว
- ออกแบบโครงร่างของเว็บไซท์แบบคร่าว ๆ เพื่อจะได้ดูว่ามีอะไรอยู่ตรงไหนบ้าง
- ออกแบบโฮมเพจด้วย Photoshop
- สร้างกราฟิกส่วนหัวของเว็บเพจด้วย วาดรูปสี่เหลี่ยม
- สร้างแถบเนวิกชั่นบาร์ที่ด้านข้างของหน้าเว็บเพจ โดยสร้างแถบบาร์ก่อน จากนั้นสร้างปุ่มลิสต์ และสร้างข้อความเมนูตามลำดับ
- จัดวางรูปภาพโลกของเว็บไซท์
- ตัดแบ่งภาพด้วยคำสั่ง Silce ให้มีขนาดเล็ก และบันทึกเป็นไฟล์เว็บเพจ HTML ด้วยคำสั่ง File > Save for Web จากนั้นก็ไปเปิดไฟล์ที่ Dreamweaver และเพิ่มเนื่องหาหรือข้อความ

Workshop 14 : ออกแบบหน้าโฮมเพจ (index.html)
โดยทั่วไปแล้วเว็บไซท์ทั่วไปจะนิยมออกแบบหน้าโฮมเพจ และหน้าเว็บเพจอื่น ๆ ที่แสดงเนื้อหานั้นให้แตกต่างกัน หน้าแรกจะเน้นที่การออกแบบที่เป็นเอกลักษณ์ของเว็บไซท์ให้โดดเด่นโดยไม่เน้นเน้อหามากนัก แต่จะสร้างเป็นเนวิเกชั่นบาร์ลิงค์ไปยังหน้าเว็บเพจที่เกี่ยวข้องอื่นแทน ซึ่งอาจจะออกแบบไว้อีกลักษณะหนึ่งเพื่อทำให้ดูแตกต่างกัน แต่จะคงความเป็น Theme ของเว็บไซท์เอาไว้ เช่น สีหรือกราฟิก
- สร้างไฟล์รูปภาพใหม่ขนาด 769x580 pixel และใส่สีพื้นเลเยอร์ Background เป็นสีดี
- พิมพ์ข้อความที่ต้องการแสดงในเว็บเพจหน้าแรกในจุดต่าง ๆ
- นำรูปภาพมาตกแต่งหน้าเว็บเพจให้สวยงาม และเว้นส่วนที่จะใส่ข้อความเพิ่มเป็นพื้นที่สีดำไว้
- ตัดแบ่งภาพตัวอย่างคำสั่ง Silce ให้มีขนาดเล็กและบันทึกเป็นไฟล์เว็บเพจ HTML ด้วยคำสั่ง File > Save for Web
- เปิดไฟล์ที่โปรแกรม Dreamweaver และต้องการเพิ่มเนื้อหาหรือข้อความลงไปในหน้าเว็บเพจ ให้คลิกที่ Slice ส่วนที่เป็นสีดำและกดคีย์ Delete ลงทิ้งไป คุณจะเห็นเป็นช่องตารางมีพื้นสีขาว คุณสามารถเปลี่ยนสีพื้นเซลในตารางให้เป็นสีเดียวกับพื้นรูปภาพ และพิมพ์ข้อความลงไปในเว็บเพจได้ตามต้อง ซึ่งรายละเอียดได้ดูเพิ่มในบทที่ 11 การสร้างเว็บเพจด้วยตาราง