วันพฤหัสบดีที่ 30 มิถุนายน พ.ศ. 2554

ขั้นตอนการนำรูปภาพไปประกอบใน Dreamweaver

13.เปิดโปรแกรม Dreamweaver CS3 แล้วเปิดไฟล์ index ที่เป็น HTML

14.กำหนดระยะขอบของเว็บเพจ โดยคลิกเมนู Modify>Page Properties ใส่ตัวเลข 0 ที่ช่อง Left margin, Right margin,
Top margin, Bottom margin

15.เลือกเมนู File>Save เพื่อ save ไฟล์ index แล้วเลือกเมนู File>Save As..ตั้งชื่อเป็น about_us, faculty_staff, computer_graphic, design, archive, contact_us จะได้เป็นหน้าเว็บเพจ 7 หน้า เพื่อไว้ทำการลิงค์ทุกๆหน้าเข้าด้วยกัน
                                                            
16.คลิกที่ปุ่มเมนู home ที่ช่องBorder กรอกตัวเลข 0 แล้วคลิก Browse for file ทีช่องLink เลือก index คลิก OK

17.ทำตามข้อ 16 จนครบทั้ง 7 ปุ่ม เพื่อทำการลิงค์หน้าเว็บเพจทั้ง 7 หน้า เช่นคลิกปุ่มabout_usก็ให้ลิงค์กับไฟล์about_us.html
18.เลือกเมนู File>Save เพื่อ save ไฟล์ index
19.คลิกเลือกรูป home_body กดปุ่ม Delete แล้วคลิกที่แท็บ Common คลิกปุ่ม Image เลือกภาพ about_us_body คลิก OK จากนั้นเลือกเมนู File>Save As..ตั้งชื่อเป็น about_us เพื่อ saveทับไฟล์เดิมที่มีการสั่งลิงค์แล้ว

20. ทำเช่นเดียวกันโดยการเปลี่ยนรูปเป็นหน้า faculty_staff, computer_graphic, design, archive, contact_us แล้ว saveทับไฟล์เดิมที่มีการสั่งลิงค์แล้ว
21.หลังจากทำการเซฟหน้าเว็บเพจเรียบร้อยแล้วก็มาถึงขั้นตอนการทดสอบแสดงผลเว็บเพจผ่านโปรแกรม Internet Explorer โดยกดปุ่ม <F12> หรือเลือกคำสั่ง Preview in IExplore

วิชากราฟิกสารสนเทศ การสร้างเว็บด้วย 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