การสร้างเว็บไซต์ด้วย Dreamweaver 8.0 บทที่สอง

สำหรับบทความในวันนี้ เป็นการสาธิตการสร้างเว็บไซต์ด้วย Dreamweaver 8.0 บทที่สอง ซึ่งเป็นตอนที่ต่อจากบทที่ 1 หากท่านยัไม่ได้อ่านบทที่ 1 แนะนำให้กับไปอานบทที่ 1 ก่อนเพือความเข้าใจและสามารถทำต่อไปได้ครับ สำหรับบทที่ 2 ในวันนี้ ก็จะเป็นการเปลี่ยนแปลงไฟล์ index ที่เราได้บันทึกไว้จากตอนที่แล้ว ให้มีภาพประกอบ เมนูลิงค์ และเนื้อหา ตามต้องการของเราเข้าไปครับ
ขั้นตอนแบบ step by step
1 เปิดโปรแกรม Dreamweaver ขึ้นมา และเปิดไฟล์ index.html ที่เราสร้างไว้ในบทที่หนึ่งขึ้นมา



2 จากนั้นให้เราแทนที่ในส่วนของชื่อเว็บ ,เมนูลิงค์, ให้เราพิมพ์ข้อความเข้าไปได้เลย โดยดูให้เหมาะสม มีความกระชับ และสื่อความหมาย ได้ดี สามารถดูได้ตามภาพตัวอย่าง ,ให้เราคิดและใส่เมนูลิงค์ให้ครบทุกช่องเลยครับ (เหลือไว้ก่อนได้ถ้าคิดไม่ออกจริงๆ)ซึงเมนูลิงค์ที่เราใส่เข้าไปก็จะเป็นตัวบอกคราวๆถึงจำนวนเพจหรือหน้าขอเว็บเพจของเว็บไซต์ที่เรากำลังสร้างอยู่ครับ เช่นตามตัวอย่างผมใส่ครบทุกช่องเมนูลิงค์ก็ประมาณ 20 ลิงค์เมนูได้ นั้นหมายถึงอย่างน้อยผมต้องสร้างหน้าเพจขึ้นมารองรับการเชื่อมโยงเมนูลิงค์เหล่านี้ในอนาคตต่อไป ซึ่งโชคดีที่ปัจจุบันข้อมูลภาพ+เนื้อหา เราสามารถหาได้ง่ายๆ จากแหล่งข้อมูลเปิดบนอินเตอร์เน็ตครับ



3 ในส่วนของภาพประกอบ และเนื้อหา เพื่อความง่ายในการสาธิต ผมได้คัดลอกข้อมูลจากเว็บไซต์ http://th.wikipedia.org/ ซึ่งเป็นฟรีสานานุกรมออนไลน์แบบเปิดในเรืองต่างๆจำนวนมาก ที่อนุญาตให้เราสามารถนำเนื้อหาและภาพประกอบไปใช้งานหรือเผยแพร่ต่อได้ โดยไม่เป็นการละเมิดลิขิทธิ์
Tips การกำหนดเมนูลิงค์ ควรกระชับสื่อความหมาย ,ส่วนเนื้อหาก็ให้พอดีกระชับและน่าสนใจ อย่างไรก็ตามเราสามารถกลับมาแก้ไขภายหลังได้ ดังนั้นก็ไม่ต้องซีเรียสมาก ใส่ให้ครบองค์ประกอบตามตัวอย่างก่อนละกัน


ตัวอย่างเว็บสานานุกรมออนไลน์แบบเปิด http://th.wikipedia.org/


ภาพแสดงตัวอย่างการใช้งาน google.com ในการค้นหาภาพตามที่เราต้องการ >เลือกค้นหารูปภาพ> กรอกคำสำคัญในการค้นหา>คลิกปุ่มค้นหา หรือกด Enter>


ผลการค้นหาของโปรแกรม ประกอบไปด้วยภาพต่างๆที่เกี่ยวข้องให้เราสามารถนำไปใช้งานได้ (ดูเรื่องภาพลิขสิทธิ์นิดหนึ่ง แต่สวนมากแล้วถือว่าหากนำมาแสดงบนเน็ตแล้วละก็แสดงว่าเป็นข้อมูลสาธารณะ เราสามารถนำไปใช้งานเพื่อการศึกษาและเรียนรู้ได้ฟรีครับ)


4 การแทรกรูปเข้าในตัวบรรจุภาพ สามารถทำได้สองวิธีคือ คลิกที่ Icon รูปภาพของเมนูด้านบน จากนั้นเข้าไปเลือกภาพในเครื่องของเราตามต้องการ และวิธีที่สอง นำเม้าส์ดับเบิลคลิกบนตัวรับภาพ ก็จะเขาสู่โหมดการเลือกภาพประกอบ ให้เราเลือกได้เช่นกัน
5 เมือเปลี่ยนเป็นข้อมูลของเราใหม่จนครบแล้ว อย่าลืมบันทึก File >save
6. การทดสอบผลงานของเราขั้นต้นในโปรแกรม web browser ให้เรากดแป้น F12 บนคีย์บอร์ด เพื่อดูผลงานของเราในข้นต้น

ก็เป็นอันจบบทที่สอง การหาข้อมูลภาพและเนื้อหา ,การแก้ไขเมนู ข้อความ รูปภาพตามต้องการ,การบันทึก,การดูผลงานขั้นต้นในโปรแกรมท่องเน็ต สำหรับบทต่อไป บทที่สาม ผมจะมาแนะนำการสร้างเว็บเพจหน้าอื่นๆ เพื่อรองรับการเชื่อมโยง (Link)ของลิงค์เมนูต่างๆ จากหน้าแรก (index) ไปยังหน้าอื่นๆ อีกต่อไปครับ
เรื่องที่เกี่ยวข้อง
การกำหนด Local site และการสร้างหน้าแรกของเว็บไซต์

1 ความคิดเห็น:

รอตอนต่อไปอยู่นะครับ

Reply

Post a Comment