• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
หลักในการออกแบบเว็บไซต์ (Web site)
 

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

on

  • 577 views

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

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

Statistics

Views

Total Views
577
Views on SlideShare
228
Embed Views
349

Actions

Likes
0
Downloads
1
Comments
0

1 Embed 349

http://nuiphen.wordpress.com 349

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

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