ขั้นตอนการพัฒนาเว็บเพจ

งานนำเสนอเรื่อง: "ขั้นตอนการพัฒนาเว็บเพจ"— ใบสำเนางานนำเสนอ:

1 ขั้นตอนการพัฒนาเว็บเพจ

2 ขั้นตอนการพัฒนาเว็บเพจ
วางแผน/กำหนดหัวข้อ และเนื้อหาที่จะนำเสนอ ผมจะทำเว็บข้อมูลส่วนตัว เอ๋! จะมีหัวข้ออะไรบ้างน่ะ อ้อนึกได้แล้ว ประวัติ, หน้าที่การงาน, ผลงาน, งานอดิเรก, ความภาคภูมิใจ เท่านี้ก็พอมั้ง ใช่ไหมครับ เพื่อน ๆ

3 ขั้นตอนการพัฒนาเว็บเพจ
สร้างผังความสัมพันธ์ของข้อมูล แบบรากต้นไม้ Home Page ประวัติ หน้าที่ การงาน ผลงาน งาน อดิเรก ความ ภาคภูมิใจ

4 ขั้นตอนการพัฒนาเว็บเพจ
กำหนดชื่อไฟล์ของเอกสารเว็บ ชื่อไฟล์และนามสกุลของไฟล์เอกสารเว็บ จะถูกควบคุมจาก Web Administrator นามสกุลของไฟล์เอกสาร HTML มี 2 แบบคือ .htm, .html ชื่อและนามสกุลที่ใช้ เป็นภาษาอังกฤษตัวพิมพ์เล็ก ไม่มีช่องว่าง ไม่ควรใช้สัญลักษณ์พิเศษใด ๆ ยกเว้นเครื่องหมาย "ขีด –" เครื่องหมาย "อันเดอร์สกอร์ _" ไฟล์แรก (ไฟล์ที่เป็น Home page) มักจะใช้ชื่อ index.htm หรือ index.html

5 ชื่อไฟล์ควรใช้อักษรตัวเล็กทั้งหมด
ขั้นตอนการพัฒนาเว็บเพจ กำหนดชื่อไฟล์ของเอกสารเว็บ ชื่อไฟล์ควรใช้อักษรตัวเล็กทั้งหมด index.html p01.html p02.html p03.html p04.html p05.html

6 ขั้นตอนการพัฒนาเว็บเพจ
กำหนดการเชื่อมโยงระหว่างเว็บเพจ index.html p01.html p02.html p03.html p04.html p05.html index.html p02.html p03.html p04.html p05.html index.html p01.html p03.html p04.html p05.html index.html p01.html p02.html p04.html p05.html index.html p01.html p02.html p03.html p05.html index.html p01.html p02.html p03.html p04.html

7 ขั้นตอนการพัฒนาเว็บเพจ
ออกแบบเว็บเพจแต่ละหน้า ว่ามีองค์ประกอบใด แถบหัวด้านบน วัน/เดือน/ปี best view 1024x768 เมนู หน้าแรก ประวัติ หน้าที่การงาน ผลงาน งานอดิเรก ความภาคภูมิใจ ข่าวสารด้านการศึกษา ลิงก์การศึกษา ลิงก์ it ……………… รูปภาพกิจกรรมของตนเอง โลโก้ จากตัวอย่างในสไลด์ ผ่านมา จะต้อง ออกแบบหน้า เว็บเพจ ทั้งหมด 6 หน้า

8 ขั้นตอนการพัฒนาเว็บเพจ
สร้างโฟลเดอร์ สร้างโฟลเดอร์เฉพาะสำหรับเอกสารเว็บแต่ละชุด/เรื่อง ในโฟลเดอร์ที่สร้าง สามารถสร้างโฟลเดอร์ย่อย เพื่อเก็บไฟล์ให้เป็นระบบระเบียบได้ เช่น การสร้างโฟลเดอร์ myweb ในไดรว์ D: เป็นต้น

9 ขั้นตอนการพัฒนาเว็บเพจ
จัดหาภาพ หรือสร้างภาพที่เกี่ยวข้องกับเนื้อหา สร้างด้วยโปรแกรมกราฟิก เช่น Adobe PhotoShop คัดเลือกจาก ClipArt for Web เช่น CD-ROM รวมภาพ คัดเลือกจาก Internet (ระวัง ! เรื่องลิขสิทธิ์) ภาพที่เลือกใช้ทั้งหมด ต้องเก็บไว้ในโฟลเดอร์ที่สร้างไว้ก่อนแล้ว Copy to….

10 ขั้นตอนการพัฒนาเว็บเพจ
สร้างเอกสารเว็บ ด้วยโปรแกรม Dreamweaver หรือโปรแกรมอื่น ๆ ตามที่ได้ออกแบบไว้ ไฟล์เอกสาร HTML ทุกไฟล์จะต้องบันทึกไว้ในโฟลเดอร์ที่สร้างไว้ก่อน รวมกับรูปภาพที่จัดเตรียมไว้แล้ว Save... index.html p01.html p02.html

11 ขั้นตอนการพัฒนาเว็บเพจ
ตรวจสอบผลการเขียนเว็บเพจ ด้วยบราวเซอร์ของค่ายต่าง ๆ หลาย ๆ ค่าย เช่น Internet Explorer, Mozilla FireFox ทดสอบดูหน้าเว็บ

12 แม่ข่ายบริการเว็บ (Web server)
ขั้นตอนการพัฒนาเว็บเพจ ส่งข้อมูลขึ้น (Upload) เครื่องแม่ข่าย (Server) ตรวจสอบผลโดยการเรียกดูหน้าเว็บจากเครื่องแม่ข่าย แม่ข่ายบริการเว็บ (Web server) เครื่องคอมพิวเตอร์ที่เขียนเว็บเพจ

13 ขั้นตอนการพัฒนาเว็บเพจ
ตัวอย่างใช้โปรแกรม WS FTP ในการ Upload

14 ขั้นตอนการพัฒนาเว็บเพจ
ตัวอย่างใช้โปรแกรม FileZillaในการ Upload

15 ขั้นตอนการพัฒนาเว็บเพจ
ทดสอบดูหน้าเว็บโดยเรียกผ่าน URL ผลหลังจากที่ Upload ไปบนอินเทอร์เน็ตแล้ว