ขันตอนที่ 1 กำหนดโครงสร้ ำงของเว็บไซต์
้

 การสร้างเว็บไซต์นันควรเริ่มจากการสร้างแผนผังของเว็บไซต์ก่อน หรือที่
้

เรียกว่...
ขันตอนที่ 2 กำหนดกำรเชื่อมโยงระหว่ำงเว็บเพ็จ
้
 เราต้องกาหนดการเชื่อมโยงให้เว็บเพ็จแต่ละหน้ าเชื่อมโยงถึงกันเพื่อให้กลับไ...
ขันตอนที่ 3 กำรออกแบบเว็บเพ็จแต่ละหน้ ำ
้
 นักเรียนสามารถออกแบบหน้ าเว็บเพ็จแต่ละหน้ าให้สวยงาม โดยเฉพาะในเว็บ

เพ็จหน้ า...
ขันตอนที่ 4 กำรสร้ ำงเว็บเพ็จแต่ละหน้ ำ
้
 นาเว็บเพ็จที่ออกแบบไว้มาสร้างโดยใช้ภาษ html หรืออาจใช้โปรแกรม

สาเร็จรูป เช่น ...
ขันตอนที่ 5 กำรลงทะเบียนขอพื ้นที่เว็บไซต์
้
 เป็ นการเผยแพร่เว็บไซต์ที่สร้างเสร็จแล้วเข้าสู่ระบบเครือข่ายอินเทอร์เน็ต

เ...
ขันตอนที่ 6 กำรอัพโหลดเว็บไซต์
้
 หลังจากสร้างเว็บไซต์และลงทะเบียนขอพืนที่สาหรับฝากเว็บไซต์แล้ว ให้ใช้
้

โปรแกรมสาหรับอั...
รูปแบบโครงสร้ ำงของเว็บไซต์
การออกแบบโครงสร้างเว็บไซต์ สามารถทาได้หลาย
แบบ ขึนอยูกบลักษณะของข้อมูล ความถนัดของ
้ ่ ั
ผูออก...
1.โครงสร้ างของเว็บไซตแบบเรี ยงตามลาดับ
(Sequential Structure)


เป็ นโครงสร้างแบบธรรมดาที่ใช้กนมากที่สด เนื่ องจากง่ายต่...
2.โครงสร้ างของเว็บไซตแบบลาดับขัน
้
(Hierarchical Structure)
 เป็ นโครงสร้างที่ดีที่สดวิธีหนึ่ งในการจัดระบบโครงสร้างที่ม...
3.โครงสร้ างของเว็บไซตแบบตาราง
(Grid Structure)
่
 โครงสร้างรูปแบบนี้ มีความซับซ้อนมากกว่ารูปแบบที่ผานมา การออกแบบเพิ่ม
ค...
4. โครงสร้ างเว็บไซตแบบใยแมงมุม
(Web Structure)
 โครงสร้างประเภทนี้ จะมีความยืดหยุ่นมากที่สด ทุกหน้ าในเว็บสามารถจะ
ุ
เชื...
หลักในการสร้ างเว็บเพ็จ
เว็บเพ็จคือหน้ าเอกสารแต่ ละหน้ าของเว็บไซต สรุ ปหลักการในการสร้ างเว็บเพ็จได้ ดังนี ้

 1. การวา...
หลักในการสร้ างเว็บเพ็จ
 2. การเตรียมการ

เช่น การเตรียมการด้านข้อมูลทังที่เป็ นเนื้ อหา ภาพ เสียง หรือสิ่งจาเป็ นต่างๆ
้...
หลักในการสร้ างเว็บเพ็จ
 3. การจัดทา

เมื่อวางแผนและเตรียมการเรียบร้อยแล้ว ก็ถึงเวลาจัดทา
อาจจะทาคนเดียว หรือทาเป็ นกลุ่ม...
หลักในการสร้ างเว็บเพ็จ
 4. การทดสอบและการแก้ไข

การสร้างเว็บเพ็จทุกครังควรจะมีการทดสอบก่อนเผยแพร่ทกครังเพือหาข้อ
้
ุ ้ ่...
หลักในการสร้ างเว็บเพ็จ
 5. การนาเว็บเพ็จต่าง ๆ มารวบรวมเป็ นเว็บไซต์

เมื่อสร้างเว็บเพ็จเสร็จ จัดรวบรวม และเรียบเรียงหน้...
หลักในการออกแบบเว็บไซต์ (Web site)
Upcoming SlideShare
Loading in …5
×

หลักในการออกแบบเว็บไซต์ (Web site)

689
-1

Published on

หลักในการออกแบบเว็บไซต์ (Web site)

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
689
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

หลักในการออกแบบเว็บไซต์ (Web site)

  1. 1. ขันตอนที่ 1 กำหนดโครงสร้ ำงของเว็บไซต์ ้  การสร้างเว็บไซต์นันควรเริ่มจากการสร้างแผนผังของเว็บไซต์ก่อน หรือที่ ้ เรียกว่า Site Map ดังภาพตัวอย่างมีการกาหนดหน้ าเว็บเพ็จ 4 หน้ า
  2. 2. ขันตอนที่ 2 กำหนดกำรเชื่อมโยงระหว่ำงเว็บเพ็จ ้  เราต้องกาหนดการเชื่อมโยงให้เว็บเพ็จแต่ละหน้ าเชื่อมโยงถึงกันเพื่อให้กลับไป กลับมา ระหว่างหน้ าต่าง ๆ ได้ โดยแสดงชื่อไฟล์ HTML แต่ละไฟล์ที่มี การเชื่อมโยงสัมพันธ์กนดังภาพ ั
  3. 3. ขันตอนที่ 3 กำรออกแบบเว็บเพ็จแต่ละหน้ ำ ้  นักเรียนสามารถออกแบบหน้ าเว็บเพ็จแต่ละหน้ าให้สวยงาม โดยเฉพาะในเว็บ เพ็จหน้ าแรก ซึ่งเรียกว่าโฮมเพ็จนักเรียนควรออกแบบให้สวยงามเพื่อดึงดูด ความสนใจของผูเข้าชมในขันตอนการออกแบบนี้ บางทีอาจเรียกว่าการ ้ ้ ออกแบบเลย์เอาท์(Lay Out) สามารถทาได้โดยการ เขียนลงใน กระดาษหรือใช้โปรแกรมคอมพิวเตอร์ ช่วยในการออกแบบก็ได้
  4. 4. ขันตอนที่ 4 กำรสร้ ำงเว็บเพ็จแต่ละหน้ ำ ้  นาเว็บเพ็จที่ออกแบบไว้มาสร้างโดยใช้ภาษ html หรืออาจใช้โปรแกรม สาเร็จรูป เช่น FrontPage, Macromedia Dreamweaver หรือโปรแกรมสาเร็จรูปอื่น ๆ ตามความถนัด
  5. 5. ขันตอนที่ 5 กำรลงทะเบียนขอพื ้นที่เว็บไซต์ ้  เป็ นการเผยแพร่เว็บไซต์ที่สร้างเสร็จแล้วเข้าสู่ระบบเครือข่ายอินเทอร์เน็ต เพื่อให้บคคลอื่น ๆ สามารถเข้าชมเว็บไซต์ของเราได้ วิธีการก็คือ นาเว็บไซต์ที่ ุ เราสร้างขึนไปไว้บนพืนที่ ที่ให้บริการ(Web Hosting) ซึ่งมีพืนที่ ที่ ้ ้ ้ ให้บริการฟรี และ แบบที่ต้องเสียค่าบริการ
  6. 6. ขันตอนที่ 6 กำรอัพโหลดเว็บไซต์ ้  หลังจากสร้างเว็บไซต์และลงทะเบียนขอพืนที่สาหรับฝากเว็บไซต์แล้ว ให้ใช้ ้ โปรแกรมสาหรับอัปโหลด (Upload) เช่นโปรแกรม CuteFTP , WS-FTP เพื่อให้คนทัวโลกสามารถเข้าชมเว็บไซต์ของเราผ่านทางระบบ ่ เครือข่ายอินเทอร์เน็ตได้
  7. 7. รูปแบบโครงสร้ ำงของเว็บไซต์ การออกแบบโครงสร้างเว็บไซต์ สามารถทาได้หลาย แบบ ขึนอยูกบลักษณะของข้อมูล ความถนัดของ ้ ่ ั ผูออกแบบ ตลอดจนกลุมเป้าหมายทีตองการนาเสนอ ้ ่ ่ ้ โครงสร้างของเว็บไซต์ประกอบไปด้วย 4 รูปแบบ ใหญ่ๆ ได้ดงนี้ ั
  8. 8. 1.โครงสร้ างของเว็บไซตแบบเรี ยงตามลาดับ (Sequential Structure)  เป็ นโครงสร้างแบบธรรมดาที่ใช้กนมากที่สด เนื่ องจากง่ายต่อการจัดระบบ ั ุ ข้อมูล ข้อมูลที่นิยม จัดด้วยโครงสร้างแบบนี้ มกเป็ นข้อมูลที่มีลกษณะเป็ น ั ั เรื่องราว ตามลาดับ เช่น การเรียงลาดับตามตัวอักษร ดรรชนี สารานุกรม หรือ อภิธานศัพท์ โครงสร้างแบบนี้ เหมาะกับเว็บไซต์ที่มีขนาดเล็ก เนื้ อหาไม่ซบซ้อน ั ใช้การลิงค์ (Link) ไปทีละหน้ า ทิศทางของการเข้าสู่เนื้ อหา (Navigation) ภายในเว็บจะเป็ นการดาเนินเรืองในลักษณะเส้นตรง โดยมี ่ ปุ่ มเดินหน้ า-ถอยหลัง เป็ นเครื่องมือหลักในการกาหนดทิศทาง ข้อเสียของ โครงสร้างระบบนี้ คือ ผูใช้ไม่สามารถกาหนดทิศทางการเข้าสู่เนื้ อหาของตนเอง ้ ได้ทาให้เสียเวลา ในการเข้าสู่เนื้ อหา
  9. 9. 2.โครงสร้ างของเว็บไซตแบบลาดับขัน ้ (Hierarchical Structure)  เป็ นโครงสร้างที่ดีที่สดวิธีหนึ่ งในการจัดระบบโครงสร้างที่มีความซับซ้อน ของ ุ ข้อมูล โดยแบ่งเนื้ อหา ออกเป็ นส่วนต่างๆ และมีรายละเอียดย่อย ๆ ในแต่ละ ส่วนลดหลันกันมาในลักษณะแนวคิดเดียวกับ แผนภูมิองค์กร จึงเป็ นการง่ายต่อ ่ การทาความเข้าใจกับโครงสร้างของเนื้ อหา ลักษณะเด่นคือการมีจดเริ่มต้นที่ ุ จุดร่วมจุดเดียว นันคือ โฮมเพ็จ ่ (Homepage) และเชื่อมโยงไป สู่เนื้ อหาในลักษณะเป็ นลาดับจาก บนลงล่าง
  10. 10. 3.โครงสร้ างของเว็บไซตแบบตาราง (Grid Structure) ่  โครงสร้างรูปแบบนี้ มีความซับซ้อนมากกว่ารูปแบบที่ผานมา การออกแบบเพิ่ม ความยืดหยุ่นให้แก่การเข้าสู่เนื้ อหาของผูใช้ โดยเพิ่มการเชื่อมโยง ซึ่งกันและกัน ้ ระหว่างเนื้ อหาแต่ละส่วน เหมาะแก่การแสดงให้เห็นความสัมพันธ์กนของ ั เนื้ อหา การเข้าสู่เนื้ อหาของผูใช้จะไม่เป็ นลักษณะเชิงเส้นตรง เนื่ องจากผูใช้ ้ ้ สามารถเปลี่ยนทิศทางการเข้าสู่เนื้ อหาของตนเองได้
  11. 11. 4. โครงสร้ างเว็บไซตแบบใยแมงมุม (Web Structure)  โครงสร้างประเภทนี้ จะมีความยืดหยุ่นมากที่สด ทุกหน้ าในเว็บสามารถจะ ุ เชื่อมโยงไปถึงกันได้หมด เป็ นการสร้างรูปแบบการเข้าสู่เนื้ อหาที่เป็ นอิสระ ผูใช้สามารถกาหนดวิธีการเข้าสู่เนื้ อหาได้ด้วยตนเอง การเชื่อมโยงเนื้ อหา ้ แต่ละหน้ าอาศัยการโยงข้อความที่มีมโนทัศน์ (Concept) เหมือนกัน ของแต่ละหน้ าในลักษณะของไฮเปอร์เท็กซ์หรือไฮเปอร์มีเดีย โครงสร้าง ลักษณะนี้ จดเป็ นรูปแบบที่ ไม่มีโครงสร้าง ั ที่แน่ นนอนตายตัว (Unstructured) นอกจากนี้ การเชื่อมโยงไม่ได้จากัดเฉพาะ เนื้ อหาภายในเว็บนันๆ แต่สามารถเชื่อม ้ โยงออกไปสู่เนื้ อหาจากเว็บภายนอกได้
  12. 12. หลักในการสร้ างเว็บเพ็จ เว็บเพ็จคือหน้ าเอกสารแต่ ละหน้ าของเว็บไซต สรุ ปหลักการในการสร้ างเว็บเพ็จได้ ดังนี ้  1. การวางแผน - กาหนดเนื้ อหา ก่อนลงทาเว็บเราจะต้องรู้ว่าเราจะทาเว็บเกี่ยวกับอะไร เนื้ อหาเป็ นอย่างไร กลุ่มเป้ าหมายเป็ นกลุ่มใด ทังนี้ เพื่อที่เราจะได้นาเนื้ อหา ้ เหล่านันมาใส่ในเว็บเพื่อแสดงให้รว่า เนื้ อหาโดยรวมเกี่ยวกับอะไร เช่น ้ ู้ เกี่ยวกับคอมพิวเตอร์ ก็ต้องมีข้อมูลของคอมพิวเตอร์แต่ละชนิด ลักษณะ ราคาแต่ ละรุ่นและสถานที่ขาย เป็ นต้น - ออกแบบมุมมองในหน้ าเว็บ (LayOut) คือการจัดวางองค์ประกอบใน เว็บเพ็จว่าส่วนใดควรจะมีอะไร อาจทาโดยการร่างใส่กระดาษเปล่า ๆ ไว้ก่อนหรือ ใช้โปรแกรมคอมพิวเตอร์ช่วยในการออกแบบก็ได้ การใช้ตารางช่วยในการจัด องค์ประกอบในหน้ าเว็บนันจะทาให้เว็บเพ็จมีความเป็ นระเบียบยิ่งขึน และสะดวก ้ ้ ต่อการแก้ไข ปรับปรุง
  13. 13. หลักในการสร้ างเว็บเพ็จ  2. การเตรียมการ เช่น การเตรียมการด้านข้อมูลทังที่เป็ นเนื้ อหา ภาพ เสียง หรือสิ่งจาเป็ นต่างๆ ้ ที่นักเรียนคิดว่าต้องการจะนาเสนอในการทาเว็บเพ็จนัน เมื่อเรารู้แล้วว่าเราจะทา ้ เว็บเกี่ยวกับอะไร การรวบรวมข้อมูลก็มีส่วนสาคัญ อย่างยิ่ง เช่น ถ้าจะทาเว็บ เกี่ยวกับ โรงเรียน ก็ต้องไปหาคติพจน์ ประจาโรงเรียน สีประจาโรงเรียน บุคลากรใน โรงเรียน ประวัติโรงเรียน ฯลฯ มารวบรวมไว้ แล้วหลังจากนันก็เอาข้อมูลนันมา ้ ้ จัดรูปแบบในเว็บต่อไป การหาเครื่องมือในการจัดทานัน ก็เป็ นเรื่องสาคัญ ้ เครื่องมือในที่นี้ หมายถึงโปรแกรมการทางานต่าง ๆ เช่นโปรแกรมจัดการรูปภาพ เสียง ภาพเคลื่อนไหวต่างๆ โปรแกรมในการจัดทาเว็บเพ็จ จะใช้โปรแกรมสาเร็จรูปหรือจะใช้ภาษาคอมพิวเตอร์ ในการสร้างต้องเตรียมการ ให้พร้อม
  14. 14. หลักในการสร้ างเว็บเพ็จ  3. การจัดทา เมื่อวางแผนและเตรียมการเรียบร้อยแล้ว ก็ถึงเวลาจัดทา อาจจะทาคนเดียว หรือทาเป็ นกลุ่ม โดยใช้เครื่องมือที่เตรียมไว้ ซึ่งจะอธิบายถึง วิธีการจัดทาหรือวิธีการสร้างเว็บเพ็จในลาดับต่อไป
  15. 15. หลักในการสร้ างเว็บเพ็จ  4. การทดสอบและการแก้ไข การสร้างเว็บเพ็จทุกครังควรจะมีการทดสอบก่อนเผยแพร่ทกครังเพือหาข้อ ้ ุ ้ ่ บกพร่องแล้วนามาแก้ไขการทาเว็บนันเมื่อทาเสร็จลอัพโหลดไปไว้ในเครื่อง ้ เซิรฟเวอร์แล้ว ให้ทดลองแนะนาเพื่อนที่สนิทชิดเชื้อและใช้อินเทอร์เน็ตอยู่ ลอง ์ เปิดดูและให้บอกข้อผิดพลาดมา เช่น การเชื่อมโยงต่าง ๆ , รูปภาพ และตัวอักษร ว่าถูกต้อง ช้าไปหรือเปล่า หากทดสอบจากเครื่องของตนเองแล้ว ข้อผิดพลาด ต่างๆ มักจะไม่ค่อยปรากฏให้เห็นเนื่ องจากว่าข้อมูลต่าง ๆ จะอยู่ในเครื่องของ ตนเองและการเชื่อมโยงต่างๆ เช่นกัน โปรแกรมจะทาการค้นหาในเครื่องจนพบ ทาให้เราไม่เห็นข้อผิดพลาด หลังจากทดสอบแล้วให้ดาเนินการแก้ไขข้อผิดพลาด
  16. 16. หลักในการสร้ างเว็บเพ็จ  5. การนาเว็บเพ็จต่าง ๆ มารวบรวมเป็ นเว็บไซต์ เมื่อสร้างเว็บเพ็จเสร็จ จัดรวบรวม และเรียบเรียงหน้ าเว็บเพ็จแต่ละหน้ า ทา การทดสอบ แก้ไขปรับปรุงเสร็จแล้ว ก็สามารถเผยแพร่เว็บเพ็จทังหมดออกสู่ ้ สาธารณชนในรูปแบบของเว็บไซต์ได้
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×