วิชากราฟิกสารสนเทศ การสร้างเว็บด้วย photoshop+dreamweaver

ขั้นตอนการออกแบบหน้าเว็บเพจด้วยโปรแกรม Photoshop

1.เลือกเมนู File>New สร้างไฟล์ภาพใหม่ขนาด Width 1024 Height 768 pixels, Resolution 72 pixels/inches ตั้งชื่อว่า silpakham

เสร็จแล้ว save งานเลือกรูปแบบเป็น psd เผื่อไว้แก้ไขในภายหลัง

2.ในเลเยอร์ Background ใส่สีในส่วนต่างๆเพื่อแบ่งพื้นที่เป็นส่วนhead, menu, body จะได้ขนาดต่างๆดังนี้

   head ขนาด 1024 x 137 pixels, menu ขนาด 1024 x 34 pixels, body ขนาด 1024 x 597 pixels ต่อจากนั้นให้นักเรียนสร้างชิ้นงาน   ต่างๆให้ครบตามขนาดที่ตั้งไว้แล้ว                                                     จะได้ชิ้นงานต่างๆทั้งหมด 9 ชิ้น

                    3.เปิดไฟล์ head ที่ทำเตรียมไว้ แล้วลากมาวางให้ตรงตำแหน่ง แล้วให้เปลี่ยนชื่อเลเยอร์เป็น head

4.เปิดไฟล์ menu ที่ทำเตรียมไว้ แล้วลากมาวางให้ตรงตำแหน่ง แล้วให้เปลี่ยนชื่อเลเยอร์เป็น menu

5.เปิดไฟล์ body ที่ทำเตรียมไว้ 7 ชิ้น แล้วลากมาวางให้ตรงตำแหน่งทีละชิ้น แล้วให้เปลี่ยนชื่อเลเยอร์เป็น home, about us, faculty staff, computer graphic, design, archive, contact us ตามลำดับ

ขั้นตอนการนำรูปภาพไปใช้งานในการทำเว็บเพจ

1.เลือก View>Rulers เพื่อเปิดไม้บรรทัดขึ้นมาแล้วใช้เมาส์ลากเส้นไกด์ที่แท็ปไม้บรรทัดออกมาเพื่อแบ่งสัดส่วนของภาพ โดยแบ่งส่วนที่เป็น head 1 ชิ้น แบ่งส่วนที่เป็น body 1 ชิ้นแบ่งส่วนที่เป็น menu 7 ชิ้น

                            

2.คลิกเปิด  เลเยอร์ head, menu, home เลเยอร์อื่นปิดให้หมด แล้วใช้เครื่องมือ Slice ตัดแบ่งภาพเป็นชิ้นๆตามเส้นไกด์ที่กำหนดไว้ จะได้ภาพเป็นชิ้นต่างๆ คือ head, body, menu 7 ชิ้น

        

3.ใช้เครื่องมือ Slice คลิกเมาส์ขวาลือก Edit Slice Option…ที่แท็ปสีน้ำเงินของส่วน head แล้วตั้งชื่อเป็น head

แล้วทำแบบเดียวกันกับทุกsliceแล้วตั้งชื่อ

*ในส่วนของเมนูตั้งชื่อเป็น home_btn , about_us_btn, faculty_staff_btn, computer_graphic_btn, design_btn, archive_btn,  contact_us_btn

*ในส่วนของbodyตั้งชื่อเป็น home_body, about us_body, faculty staff_body, computer graphic_body, design_body, archive_body, contact us_body

4.เสร็จแล้ว save งานเลือกรูปแบบเป็น psd เผื่อไว้แก้ไขในภายหลัง

5.การบันทึกรูปภาพที่สร้างจากสไลซ์ไปใช้งานทำได้โดยคลิกเมนู File>Save for Web & Devices คลิกเลือกภาพในกรอปตัวอย่าง แล้วเลือกประเภทของไฟล์เป็น .JPG หรือ.GIF แล้วแต่ความเหมาะสมของภาพที่ต้องการรายละเอียดของสีมากน้อยแค่ไหน

6.ในหน้าต่าง Save Optimized As กำหนดค่าดังนี้

*ช่อง Save in เลือกโฟลเดอร์ที่จะเก็บไฟล์เว็บเพจ และไฟล์ภาพ

*ช่อง File name ตั้งชื่อไฟล์ หากเป็นหน้าแรกของเว็บไซต์ควรตั้งชื่อเป็น index

*ช่อง Save as type เลือกเป็น HTML and Images(*.html) บันทึกเป็นไฟล์เว็บเพจพร้อมรูปภาพ โดยจะสร้างเป็นไฟล์ html ที่เป็นตาราง

 และจัดวางรูปภาพย่อยๆที่เป็นสไลซ์ลงไปในตารางให้อัตโนมัติ

7.คลิก Save สั่งบันทึกได้

8.จะได้ไฟล์ที่อยู่ในโฟลเดอร์ silpakham คือโฟลเดอร์ images ที่เก็บรูปภาพย่อยๆที่ได้จากการสไลซ์ และไฟล์ html ที่จะนำไปประกอบในโปรแกรม Dreamweaver ต่อไป

9.คลิกเปิด เลเยอร์ head, menu, about us เลเยอร์อื่นปิดให้หมด

10.ใช้เครื่องมือ Slice คลิกเมาส์ขวาลือก Edit Slice Option…ที่แท็ปสีน้ำเงินของส่วน about us แล้วตั้งชื่อเป็น about_us_body

11.คลิกเมนู File>Save for Web & Devices คลิก Save จะปรากฎหน้าต่าง Save Optimized As กำหนดค่าในช่อง Save as type เลือกเป็น Images Only และต่อจากนั้นจะปรากฎหน้าต่าง Replace Files ให้คลิกปุ่ม Replace

จะได้รูป about_us_bodyในโฟลเดอร์ images เพิ่มขึ้นมา

12.ทำตามขั้นตอนข้อ 9-11 โดยเปิด เลเยอร์ faculty staff และส่วน body อื่นๆจนครบทุก body