SlideShare a Scribd company logo
1 of 7
Download to read offline
หน่ วยที่ 2
                                      การออกแบบเว็บเพจเบืองต้ น
                                                         ้
หลักการออกแบบเว็บเพจ
              วิธีการออกแบบและพัฒนาเว็บเพจนั้นสามารถทาได้หลายรู ปแบบ ขึ้นอยู่กบลักษณะของ
                                                                              ั
ข้อมูลที่ใช้ใช้นาเสนอในเอกสารเว็บ ความพึงพอใจของผูที่ทาการสร้ าง ตลอดจนกลุ่ มเป้ าหมายหลักที่
                                                  ้
ต้องการให้เป็ นผูอ่านข้อมูลในเอกสารเว็บเหล่ านั้น ตัวอย่างเช่ น หากกลุ่ มเป้ าหมายเป็ นเด็กวัยรุ่ น ควร
                 ้
นาเสนอข้อมูลเกี่ยวกับความสนใจของกลุ่มวัยรุ่ น เช่น ข้อมูลทางด้านบันเทิง และควรออกแบบให้มีลุกเล่น
ที่ หลากหลาย มี สีสันสดใสเป็ นที่ น่า สนใจสาหรั บ วัยรุ่ น เป็ นต้น หากเป็ นเว็บเพจที่ เกี่ ย วข้องทางด้า น
วิชาการ จะให้ความสาคัญกับเนื้อหาที่ขอความมากกว่าสี สันที่ใช้ในเว็บเพจ
                                    ้
            การออกแบบและพัฒนาเว็บเพจนั้นควรมี การวางแผนก่ อนการพัฒนาเสมอ เนื่ องจากระบบ
คอมพิ วเตอร์ ที่ ใ ช้ง านอยู่บ นระบบเครื อข่ า ยอิ นเทอร์ เน็ ตนั้น เป็ นระบบที่ หลากหลาย ระบบปฏิ บ ติก าร
                                                                                                    ั
(Operating System : OS) ที่ใช้งานในระบบเครื อข่ายก็หลากหลาย ตัวอย่าง เช่น หากขณะที่สร้างเอกสาร
เว็บนั้น ผูที่ทาการพัฒนาเว็บใช้คอมพิวเตอร์ ที่มีระบบปฏิ บติการที่ เป็ นโปรแกรมไมโครซอฟต์วินโดวส์
           ้                                             ั
(Microsoft Windows)
หลังจากที่ทาการพัฒนาเสร็ จแล้วต้องทาการโอนย้ายเอกสารเว็บเหล่านั้นไปเก็บไว้บนเครื่ องคอมพิวเตอร์ แม่
ข่าย ซึ่ งส่ วนใหญ่แล้วจะเป็ นระบบปฏิบติการยูนิกซ์ (Unix) หรื อบางครั้งอาจเป็ นระบบปฏิบติการที่เป็ น
                                      ั                                                ั
วินโดวส์ และเอกสารเว็บที่ ถูกนาไปเก็บบนเครื่ องคอมพิวเตอร์ แม่ข่ายนี้ อาจถู กเรี ยกใช้งานเอกสารจาก
คอมพิ ว เตอร์ ท่ี ใ ช้ ร ะบบปฏิ บ ัติ ก ารที่ ต่ า งกัน ออกไป จะเห็ น ได้ว่า เอกสารเว็บ นั้น จะต้อ งเกี่ ย วข้อ งกับ
ระบบปฏิบติการหลายระบบ ดังนั้นในการพัฒนาเว็บเพจนั้นจะต้องคานึงถึงสิ่ งเหล่านี้ดวย
        ั                                                                     ้
           ผูที่ทาการสร้างเอกสารเว็บนั้น ควรจะต้องศึกษาถึงข้อกาหนดพื้นฐานที่ควรทราบก่อน เช่น การ
             ้
กาหนดชื่ อของโฟล์เดอร์ ประเภทของแฟ้ มข้อมูล ที่ เป็ นเอกสารเว็บ ประเภทของแฟ้ มข้อมู ลรู ป ภาพที่
สามารถแสดงผลได้ ตลอดจนแฟ้ มข้อมูลประเภทอื่นสามารถนามาใช้ประกอบในการทาเว็บเพจ
ในระบบปฏิบติการยูนิกซ์หรื อระบบปฏิบติการลีนุกซ์ ลักษณะการตั้งชื่ อแฟ้ มข้อมูลนั้นจะเป็ น
                     ั                        ั
แบบให้ความสาคัญกับลักษณะของตัวอักษร (Case-Sensitive) กล่ าวคื อตัวอักษรพิมพ์ใหญ่และตัวอักษร
พิ ม พ์เ ล็ ก จะถื อ ว่ า เป็ นตัว อัก ษรคนละตัว กัน ซึ่ งต่ า งจากระบบปฏิ บ ัติ ก ารวิ น โดวส์ (Windows) หรื อ
ระบบปฏิ บ ัติ ก ารดอส (Dos)         เช่ น แฟ้ มข้อ มู ล ที่ ชื่ อ ว่า “index.html”   กับ “INDEX.HTML” ใน
ระบบปฏิ บติการยูนิกซ์จะถื อว่าเป็ นชื่ อของแฟ้ มคนละแฟ้ มข้อมูลกัน แต่ถาเป็ นระบบปฏิ บติการวินโดวส์
         ั                                                             ้              ั
หรื อดอส จะถือว่าเป็ นแฟ้ มข้อมูลเดียวกัน
         ดัง นั้น หากผูท่ี ส ร้ า งเว็บ เพจ ใช้เ ครื่ อ งคอมพิ วเตอร์ ที่ มี ระบบปฏิ บ ติก ารวิ นโดวส์ ใ นการส้ ราง
                       ้                                                               ั
เอกสารเว็ บ และก าหนดชื่ อ แฟ้ มข้อ มู ล เป็ น “NextPage.html” เมื่ อ ป้ อนค าสั่ ง ส าหรั บ การเชื่ อ มโยง
แฟ้ มข้อมูลโดยให้เชื่ อมโยงไปยังแฟ้ มข้อมูลผ่านแป้ นพิมพ์เป็ น “nextpage.html” ขณะที่ทาการทดสอบบน
เครื่ องคอมพิวเตอร์ ที่ใช้ในการสร้ างเอกสารเว็บนั้นสามารถทางานได้โดยไม่มีขอบกพร่ อง แต่เมื่อทาการ
                                                                          ้
โอนถ่ายเอกสารเว็บนี้ ไปยังเครื่ องคอมพิวเตอร์ แม่ข่ายที่เป็ นระบบปฏิ บติการยูนิกซ์ จะเกิดปั ญหาในการ
                                                                      ั
เรี ยกดูเอกสารไม่ได้เพราะบนระบบปฏิบติการของเครื่ องคอมพิวเตอร์ แม่ข่าย จะถือว่าเป็ นแฟ้ มข้อมูลคนละ
                                   ั
แฟ้ มข้อมูลกัน

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

ลาดับขั้นตอนสาหรับการพัฒนาเว็บเพจ สามารถจาแนกเป็ นลาดับขั้นตอนได้ดงนี้
                                                                  ั
    1. วางแผนการพัฒนาเว็บเพจ
    2. กาหนดโฟลเดอร์ ที่ใช้สาหรับเก็บแฟ้ มข้อมูลที่เกี่ยวกับเว็บเพจ
    3. จัดหาภาพที่เกี่ยวข้องกับเนื้ อหาและจัดเก็บไว้ในโฟลเดอร์ ได้กาหนดไว้
    4. สร้างเอกสารเว็บโดยกาหนดชื่อของแฟ้ มข้อมูลเอกสารเว็บ ให้เป็ นไปตามข้อกาหนดและจัดเก็บไว้
        ในโฟลเดอร์ ที่ได้กาหนดไว้
    5. ตรวจสอบผลเอกสารเว็บผ่านทางโปรแกรมเว็บเบราว์เซอร์
                                                      ่
    6. นาข้อมูลขึ้นไปเก็บไว้บนเครื่ องคอมพิวเตอร์ แม่ขาย (Server) และทาการตรวจสอบผลการเรี ยกดู
                        ่                         ่
        เอกสารเว็บที่อยูบนเครื่ องคอมพิวเตอร์ แม่ขาย
                                                             ่ ั ้
รายละเอียดของขั้นตอนการพัฒนาเว็บเพจมีหลายขั้นตอนที่ตองขึ้นอยูกบผูดูแลระบบ (Web System
                                                    ้
Administrator) เป็ นผูกาหนดวิธีการ ดังนั้นก่อนดาเนิ นการสร้างเว็บเพจควรติดต่อขอข้อมูลเหล่านี้จาก
                      ้
ผูดูแลระบบก่อน
  ้
ลักษณะโครงสร้ างของเว็บเพจ
ลักษณะโครงสร้างของเว็บเพจโดยทัวไปแล้ว สามารถแบ่งได้ 3 ลักษณะดังนี้คือ
                              ่
   1. แบบลาดับชั้น เป็ นการจัดแสดงหน้าเอกสารเว็บในลักษณะเรี ยงตามลาดับเป็ นกิ่งก้านแตกแขนง
                            ั
       ต่อเนื่อง เปรี ยบได้กบต้นไม้กลับหัว




   2. แบบเชิงเส้น เป็ นการจัดแสดงหน้าเอกสารเว็บ โดยเรี ยงต่อเนื่ องกันไปในทิศทางเดียวไม่มีการแตก
       ออกเป็ นกิ่งก้านสาขา




   3. แบบผสม เป็ นการจัดเรี ยงหน้าของเอกสารเว็บโดยผสมผสานระหว่างแบบลาดับชั้นและแบบเชิง
       เส้น ทั้งนี้ก็ข้ ึนอยูกบผูที่ทาการออกแบบ ว่าจะจัดเรี ยงลาดับของรู ปแบบเอกสารเว็บในลักษณะใด
                             ่ ั ้
การวางแผนพัฒนาเว็บเพจ
          การวางแผนสาหรับการพัฒนาเว็บเพจนั้น ถือว่าเป็ นขั้นตอนสาคัญขั้นตอนหนึ่ง เนื่ องจาก
เอกสารเว็บที่สร้างขึ้นนั้นจะมีจานวนเพิ่มขึ้นเรื่ อย ๆ และจะมีจุดเชื่ อม (Link) เป็ นจานวนมาก หากไม่มี
การวางแผนไว้ก่อนจะทาให้การปรับปรุ งและพัฒนาในภายหลังเกิดปั ญหาขึ้นได้ง่าย ตัวอย่าง เช่น
แฟ้ มข้อมูลมีจานวนมากทาให้ไม่สามารถจดจาชื่ อของแฟ้ มข้อมูลที่เคยสร้างไว้แล้วได้ ซึ่ งจะส่ งผลให้
การทาการเชื่ อมโยงเอกสารเกิดปั ญหาขึ้น เพื่อป้ องกันปั ญหาดังกล่าวนี้ควรมีการวางแผนและออกแบบ
เอกสารเว็บบนกระดาษ และทาการกาหนดชื่ อแฟ้ มข้อมูลของแต่ละเอกสารเว็บให้เรี ยบร้อย จะทาให้ผู้
ที่ทาการสร้างเว็บเพจสามารถมองเห็นภาพการไหลของข้อมูล (Data Flow) ภายในเว็บเพจได้ชดเจน
                                                                                ั
                              ่                                             ั
และสามารถทาการพิจารณาต่อไปได้วาเอกสารเว็บแต่ละแฟ้ มข้อมูลนั้นมีความสัมพันธ์กบเอกสารอื่น
                    ั
อย่างไร และสัมพันธ์กบแฟ้ มข้อมูลเอกสารเว็บใดบ้าง
ตัวอย่าง ต้องการสร้างเว็บเพจเพื่อนาเสนอความรู ้เกี่ยวกับคอมพิวเตอร์ เบื้องต้น อาจสามารถทาการ
ออกแบบได้ดงนี้
          ั
การกาหนดชื่ อและนามสกุลของแฟ้ มข้อมูลเอกสารเว็บ
                                                                      ่ ั
           ข้อกาหนดสาหรับการตั้งชื่อของแฟ้ มข้อมูลนั้น นอกจากจะขึ้นอยูกบความสามารถของ
ระบบปฏิบติการแล้ว ยังต้องขึ้นอยูกบข้อกาหนดของผูดูแลระบบของเครื่ องแม่ข่ายที่ให้บริ การเว็บเพจ
        ั                       ่ ั            ้
(Web Administrator) ด้วย ดังนั้นผูที่สร้างเว็บเพจจึงต้องสอบถามกฎการตั้งชื่อเหล่านี้ โดยละเอียด
                                  ้
โดยทัวไปแล้วมีหลักการดังนี้
     ่
 ควรใช้ตวอักษร a-z หรื อตัวเลข 0-9 ในการตั้งชื่อไม่ควรใช้อกขระพิเศษ
         ั                                                 ั
 ตัวอักษร a-z ที่ใช้ในการตั้งชื่อ ควรเป็ นตัวอักษรพิมพ์เล็ก
 ไม่ควรเว้นวรรคช่องว่างภายในชื่อ
 ห้ามใช้อกขระพิเศษในการตั้งชื่ อ ยกเว้น Underscore (ขีดล่าง) หรื อ Dash (ขีดกลาง)
          ั
 ชื่อแฟ้ มข้อมูลแรกของเว็บเพจ มักจะใช้ชื่อ index.html หรื อ index.htm
 นามสกุลของแฟ้ มข้อมูลเอกสารเว็บมี 2 รู ปแบบ คือ .htm และ .html ส่ วนแฟ้ มข้อมูลประเภทอื่น ผู ้
   ที่ทาการสร้างเว็บเพจควรสอบถามจากผูดูแลเครื่ องคอมพิวเตอร์ แม่ข่ายว่าเครื่ องคอมพิวเตอร์ แม่
                                     ้
      ข่าย (Server) นี้สามารถใช้งานเก็บเอกสารที่มีนามสกุลของแฟ้ มข้อมูลเป็ นรู ปแบบใดได้อีก เช่น
.php , .asp เป็ นต้น
นอกจากการวางโครงร่ างของเว็บเพจข้างต้นแล้ว สิ่ งที่ควรจะทาการพิจารณาต่อไปคือ
- รู ปแบบการแสดงผลของหน้ าเว็บเพจ หมายถึงลักษณะการวางเนือหา และรายการเลือกต่ าง ๆ บน
                                                            ้
        หน้ าเว็บ ซึ่งมีได้ หลากหลายรู ปแบบ เช่ น
        - การแสดงผลเนื้อหาทั้งหมดรวมในหน้าเดียวกัน ซึ่ งการแสดงผลแบบนี้ จะรวมเอารายการเลือก
          และเนื้อหาไว้ในหน้าเดียวกัน
        - การแสดงผลด้วยตาราง การแสดงผลรู ปแบบนี้จะแยกระหว่างรายการเลือกหรื อเมนู (Menu) ไว้
                                                  ่
          ด้านหนึ่งของตาราง และเนื้อหาข้อความจะอยูอีกด้านหนึ่ง
        - การแสดงผลด้วยเฟรม การแสดงผลรู ปแบบนี้คล้ายกับการแสดงผลแบบตารางแต่รายการเลือก
          หรื อเมนูน้ นจะถูกตรึ งกับที่ จะไม่มีการเคลื่อนย้ายเมื่อทาการเลื่อนจอภาพหรื อเลือกเนื้อหาที่
                      ั
          ต้องการแสดงผล แต่จะทางานได้เฉพาะโปรแกรมเว็บเบราว์เซอร์ เท่านั้น
    -     ข้ อความทีใช้ สาหรับแสดงหัวเรื่องของเว็บเพจ หมายถึงข้ อความทีปรากฏในส่ วนหัวของหน้ าต่ าง
                    ่                                                  ่
          เอกสารเว็บ (Title Bar) โดยข้ อความส่ วนนีจะถูกนาไปใช้ เป็ นคาสาคัญ (Keyword) ทีใช้ ในการ
                                                   ้                                     ่
          ค้ นหาเว็บเพจจากบุคคลอืน ข้ อความทีนามากาหนดเป็ นเรื่องของเว็บเพจนั้น ควรมีลักษณะ
                                 ่           ่
          ดังต่ อไปนี้
          - สามารถเป็ นข้อความภาษาไทยหรื อภาษาอังกฤษ
          - มีความยาวไม่เกิน 64 ตัวอักษร
          - เป็ นข้อความที่สื่อความหมายที่กระชับเกี่ยวกับเนื้อหาในหน้าเว็บนั้น
    -    ลักษณะของหน้าเว็บ หมายถึงการกาหนดสี ของพื้นของเอกสารเว็บ (Background Color) หรื อ
รู ปภาพที่จะนามาใช้เป็ นพื้นหลังของเอกสารเว็บ (Background Image) สี ของตัวอักษรปกติ (Normal Text)
สี ของตัวอักษรที่ใช้เป็ นจุดเชื่อม (Link Text) เพื่อให้เอกสารเว็บแต่ละหน้ามีการแสดงผลที่สวยงาม และ
ดึงดูดความสนใจของผูใช้งาน
                   ้
การกาหนดโฟลเดอร์ สาหรับเก็บข้ อมูล
         การกาหนดโฟลเดอร์ ก่อนที่จะทาการสร้างชุดเอกสารเว็บเพจนั้น เป็ นลาดับขั้นตอนที่ควรกระทา
ทุกครั้ง เพื่อให้เอกสารเว็บแต่ละชุดนั้นมีระบบการจัดเก็บที่เป็ นระบบ สามารถค้นหาเรี ยกใช้งานและแก้ไข
ข้อมูลภายหลังได้โดยสะดวก โดยที่ในการสร้างชุ ดเอกสารเว็บแต่ละชุดนั้นจะประกอบไปด้วยแฟ้ มข้อมูล
จานวนมาก ทั้งเอกสารเอชทีเอ็มแอล แฟ้ มข้อมูลรุ ปภาพ เสี ยง ภาพเคลื่อนไหว และอื่น ๆ ที่เกี่ยวข้องกับ
เว็บเพจ ดังนั้นแฟ้ มข้อมูลทั้งหมดนี้ควรจัดเก็บไว้อย่างเป็ นหมวดหมู่ โดยอาจสร้างเป็ นโฟลเดอร์ ยอยเพื่อทา
                                                                                              ่
การแยกกลุ่มแฟ้ มข้อมูล แต่จะต้องสร้างภายใต้โฟลเดอร์ หลักของเว็บเพจทั้งหมด ไม่ควรแยกไว้คนละ
ตาแหน่งกัน เพราะจะทาให้การจัดการเกี่ยวกับเว็บเพจนั้นมีปัญหายุงยากได้ โดยทาการสร้างโฟลเดอร์ 1
                                                             ่
โฟลเดอร์ ต่อเว็บไซต์ 1 เว็บไซต์
ตัวอย่างการสร้างโฟลเดอร์ ชื่อ WEB-SITE ไว้ที่ desktop ของ Windows
    - ที่หน้าจอของคอมพิวเตอร์จะแสดง Desktop ของ Windows
                                    ่
    - นาเมาส์ไปชี้ตรงตาแหน่งพื้นที่วางบน Desktop จากนั้นให้กดปุ่ มเมาส์ทางด้านขวาเพื่อแสดงเมนู
        ลัด
    - ทาการเลือกคาสั่ง New จากนั้นเลือก Folder
                             ่
    - ปรากฏไอคอนของโฟลเดอร์ วาง
    - ให้ทาการพิมพ์ชื่อของโฟลเดอร์ ในที่น้ ี คือ WEB-SITE จากนั้นทาการกดปุ่ ม ENTER
        จะปรากฏโฟลเดอร์ชื่อ WEB-SITE


การจัดเตรียมภาพทีเ่ กียวข้ องกับเนื้อหาเว็บ
                      ่
              เอกสารเว็บโดยทัวไปแล้วจะต้องเกี่ยวข้องกับรู ปภาพโดยตรง เพื่อใช้ในการสื่ อความหมายกับ
                             ่
ผูใช้งานได้ชดเจนมากกว่าการสื่ อความหมายด้วยตัวอักษรเพียงอย่างเดียว อีกทั้งเป็ นการดึงดุดความสนใจ
  ้         ั
ของผูใช้งาน ดังนั้นเมื่อทาการสร้างรู ปภาพหรื อจัดหารู ปภาพเป็ นที่เรี ยบร้อยแล้วควรที่จะทาการคัดลอกมา
     ้
เก็บไว้ในโฟลเดอร์ ท่ีได้จดเตรี ยมไว้ เพื่อให้สะดวกในการเรี ยกใช้งานรู ปภาพนั้นและสะดวกต่อการบริ หาร
                         ั
เว็บไซต์ในอนาคต
          แฟ้ มข้อมูลรู ปภาพที่นามาใช้ในการทาเว็บเพจนั้น ปั จจุบนนิยมใช้อยู่ 2 รู ปแบบ คือ
                                                                ั
          - ไฟล์ฟอร์แมต JPEG (Joint Photographer’s Experts Group File)
          - ไฟล์ฟอร์แมต GIF (Graphics Interlace File)
การจัดหารู ปแบบที่นามาใช้ในการจัดทาเว็บเพจนั้น สามารถจัดเตรี ยมได้หลายวิธี เช่น
    -   สร้างรู ปภาพโดยโปรแกรมกราฟิ กต่าง ๆ เช่น PhotoShop , Corel Draw เป็ นต้น ในการสร้าง
        แฟ้ มข้อมูลรู ปภาพ ซึ่ งจะได้ภาพที่ตรงกับความต้องการ แต่ใช้เวลาในการสร้างภาพมากขึ้น
    - เลือกรู ปภาพจากชุดภาพสาเร็ จรู ป ที่มีการวางจาหน่ายในลักษณะคลังรู ปภาพสาหรับทาเว็บเพจ
        (Web ClipArt) ซึ่ งสะดวกรวดเร็ วและง่ายต่อการใช้งาน แต่อาจจะได้ภาพที่ไม่ตรงกับความ
        ต้องการมากนัก
    - นารู ปภาพจากโปรแกรมอื่น หรื อเว็บเพจอื่นมาใช้ ซึ่ งสะดวกรวดเร็ วต่อการใช้งาน เช่นกัน แต่
        อาจเกิดปั ญหาทางด้านลิขสิ ทธิ์ ของภาพ
การสร้ างเอกสารเว็บ
             การสร้างเอกสารเว็บนั้น หากผูที่ทาการสร้างไม่ใช่ผดูแลระบบเครื่ องคอมพิวเตอร์ ที่ให้บริ การ
                                         ้                   ู้
เกี่ยวกับเว็บเพจ (Web Administrator) แล้ว การกาหนดชื่ อแฟ้ มข้อมูลของเอกสารเว็บต้องเป็ นไปตาม
ข้อกาหนดของผูดูแลระบบ และจัดเก็บไว้ในโฟลเดอร์ ที่ผดูแลระบบเตรี ยมไว้เท่านั้น
             ้                                    ู้
ดังนั้นจะต้องมีการประสานงานกับผูดูแลระบบก่อนที่จะนาเอกสารเว็บนั้นเข้าสู่ ระบบเครื อข่าย
                                ้
อินเทอร์ เน็ต
             แฟ้ มข้อมูลเอกสารเว็บนั้นจะเขียนโดยใช้ภาษาเอชทีเอ็มแอล (HTML) ซึ่ งก็คือแฟ้ มข้อมูล
ข้อความหรื อแฟ้ มข้อมูลตัวอักษร (Text File) ดังนั้นการสร้างเอกสรเว็บนั้น สามารถใช้โปรแกรมที่
สามารถจัดการเกี่ยวกับแฟ้ มข้อมูลตัวอักษรใดก็ได้ ในการช่วยสาหรับการเขียนรหัสคาสั่งภาษา
เอชทีเอ็มแอล เช่น Notepad , Wordpad เป็ นต้น นอกจากนี้ในปั จจุบนมีโปรแกรมช่วยในการสร้าง
                                                               ั
เอกสารเว็บอีกมากมาย เช่น โปรแกรมไมโครซอฟต์ ฟรอนต์เพจ (Front Page) เป็ นต้น
             เอกสารเว็บนั้นเป็ นเอกสารที่เป็ นลักษณะเป็ นแฟ้ มข้อความปกติ ที่เก็บรหัสคาสั่งของภาษา
เอชทีเอ็มแอล (HTML) ดังนั้นเพื่อเป็ นการบอกให้โปรแกรมเว็บเบราว์เซอร์ ทราบว่า เอกสารนี้เป็ น
แฟ้ มข้อมูลเฉพาะสาหรับกาหนดรู ปแบบการแสดงผลผ่านอินเทอร์ เน็ต จะใช้ส่วนของนามสกุลหรื อ
ส่ วนขยายของไฟล์ (File Extension) เป็ นตัวบอกแก่โปรแกรมเว็บเบราว์เซอร์ โดยนามสกุลหรื อส่ วน
ขยายของแฟ้ มข้อมูลคือ .htm หรื อ .html โดยเอกสารเว็บหน้าแรกของเว็บไซต์น้ นนิยมตั้งเป็ นชื่ อว่า
                                                                         ั
“index.html” , “index.htm” หรื อ “default.html” เป็ นต้น ทั้งนี้ก็ข้ ึนอยูกบผูดูแลระบบ
                                                                          ่ ั ้
         สาหรับการตั้งชื่อและนามสกุลของแฟ้ มข้อมูลที่เป็ นเอกสารเว็บนั้น ไม่ควรทาการตั้งชื่อเป็ น
ภาษาไทย เนื่องจากว่าระบบปฏิบติการหลายระบบไม่สนับสนุนภาษาไทย และควรใช้ตวอักษรพิมพ์
                            ั                                         ั
เล็กในการกาหนดชื่ อและนามสกุลของแฟ้ มข้อมูล เพื่อป้ องกันปั ญหาที่เกิดจากการทางานข้าม
ระบบปฏิบติการ เนื่องจากระบบอินเทอร์ เน็ตจะใช้ระบบปฏิบติการหลายระบบร่ วมกัน โดยเฉพาะ
        ั                                            ั
ยูนิกซ์ (Unix) จะถือว่าตัวอักษรพิมพ์ใหญ่และตัวอักษรพิมพ์เล็กนั้นมีความหมายที่ต่างกัน (Case-
Sensitive)

More Related Content

What's hot

นุ๊ก
นุ๊กนุ๊ก
นุ๊กsirinet
 
หวิว
หวิวหวิว
หวิวViewMik
 
หมวย
หมวยหมวย
หมวยsirinet
 
รออกแบบเว็บไซต์
รออกแบบเว็บไซต์รออกแบบเว็บไซต์
รออกแบบเว็บไซต์sirinet
 
ดรีม
ดรีมดรีม
ดรีมsirinet
 
การสืบค้นข้อมูลทางอินเตอร์เน็ต
การสืบค้นข้อมูลทางอินเตอร์เน็ตการสืบค้นข้อมูลทางอินเตอร์เน็ต
การสืบค้นข้อมูลทางอินเตอร์เน็ตeyechillchill
 
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlSamorn Tara
 
การออกแบบเว็บไซต์
การออกแบบเว็บไซต์การออกแบบเว็บไซต์
การออกแบบเว็บไซต์Ta'May Pimkanok
 
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Wordคู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Wordjompon
 
E book2
E book2 E book2
E book2 sisiopp
 
เทคนิคการสืบค้นข้อมูลทางอินเทอร์เน็ต
เทคนิคการสืบค้นข้อมูลทางอินเทอร์เน็ตเทคนิคการสืบค้นข้อมูลทางอินเทอร์เน็ต
เทคนิคการสืบค้นข้อมูลทางอินเทอร์เน็ตI'June Jindawong
 

What's hot (19)

Ten
TenTen
Ten
 
Yuu
YuuYuu
Yuu
 
New
NewNew
New
 
Website
WebsiteWebsite
Website
 
นุ๊ก
นุ๊กนุ๊ก
นุ๊ก
 
โบ
โบโบ
โบ
 
Best
BestBest
Best
 
หวิว
หวิวหวิว
หวิว
 
หมวย
หมวยหมวย
หมวย
 
รออกแบบเว็บไซต์
รออกแบบเว็บไซต์รออกแบบเว็บไซต์
รออกแบบเว็บไซต์
 
ดรีม
ดรีมดรีม
ดรีม
 
การสืบค้นข้อมูลทางอินเตอร์เน็ต
การสืบค้นข้อมูลทางอินเตอร์เน็ตการสืบค้นข้อมูลทางอินเตอร์เน็ต
การสืบค้นข้อมูลทางอินเตอร์เน็ต
 
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
 
การออกแบบเว็บไซต์
การออกแบบเว็บไซต์การออกแบบเว็บไซต์
การออกแบบเว็บไซต์
 
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Wordคู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
 
Table
TableTable
Table
 
E book2
E book2 E book2
E book2
 
Websitebasic
WebsitebasicWebsitebasic
Websitebasic
 
เทคนิคการสืบค้นข้อมูลทางอินเทอร์เน็ต
เทคนิคการสืบค้นข้อมูลทางอินเทอร์เน็ตเทคนิคการสืบค้นข้อมูลทางอินเทอร์เน็ต
เทคนิคการสืบค้นข้อมูลทางอินเทอร์เน็ต
 

Similar to หน่วยที่ 2

หมวย
หมวยหมวย
หมวยsirinet
 
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์แบบเสนอโครงร่างโครงงานคอมพิวเตอร์
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์Supaporn Pakdeemee
 
หนังสือเล่มเล็ก4
หนังสือเล่มเล็ก4หนังสือเล่มเล็ก4
หนังสือเล่มเล็ก4Magicianslove Beer
 
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Wordคู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Wordjompon
 
Presentation wordpress
Presentation wordpressPresentation wordpress
Presentation wordpressJatupon Panjoi
 
Chapter4
Chapter4Chapter4
Chapter4aumtall
 
หน่วยการเรียนรู้ที่ 4 อินเทอร์เน็ต(แก้ไข)
หน่วยการเรียนรู้ที่ 4  อินเทอร์เน็ต(แก้ไข)หน่วยการเรียนรู้ที่ 4  อินเทอร์เน็ต(แก้ไข)
หน่วยการเรียนรู้ที่ 4 อินเทอร์เน็ต(แก้ไข)Prapatsorn Keawnoun
 
คู่มือประกอบการสร้างเว็บไซต์Pdf
คู่มือประกอบการสร้างเว็บไซต์Pdfคู่มือประกอบการสร้างเว็บไซต์Pdf
คู่มือประกอบการสร้างเว็บไซต์Pdfjompon
 
งานคอมพิวเตอร์ วารุณี 5_1_25
งานคอมพิวเตอร์ วารุณี 5_1_25งานคอมพิวเตอร์ วารุณี 5_1_25
งานคอมพิวเตอร์ วารุณี 5_1_25Thanggwa Taemin
 
งานคอมพิวเตอร์ วารุณี 5_1_25
งานคอมพิวเตอร์ วารุณี 5_1_25งานคอมพิวเตอร์ วารุณี 5_1_25
งานคอมพิวเตอร์ วารุณี 5_1_25Thanggwa Taemin
 
งานคอมพิวเตอร์ วารุณี 5_1_25
งานคอมพิวเตอร์ วารุณี 5_1_25งานคอมพิวเตอร์ วารุณี 5_1_25
งานคอมพิวเตอร์ วารุณี 5_1_25Thanggwa Taemin
 
โครงงาน ฮาร์ดดิสก์
โครงงาน ฮาร์ดดิสก์โครงงาน ฮาร์ดดิสก์
โครงงาน ฮาร์ดดิสก์teerarat55
 
แปล Design and implementation of e
แปล Design and implementation of eแปล Design and implementation of e
แปล Design and implementation of eSchool
 

Similar to หน่วยที่ 2 (20)

หมวย
หมวยหมวย
หมวย
 
Unit2
Unit2Unit2
Unit2
 
เวิลด์ไวด์เว็บ
เวิลด์ไวด์เว็บเวิลด์ไวด์เว็บ
เวิลด์ไวด์เว็บ
 
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์แบบเสนอโครงร่างโครงงานคอมพิวเตอร์
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์
 
หนังสือเล่มเล็ก4
หนังสือเล่มเล็ก4หนังสือเล่มเล็ก4
หนังสือเล่มเล็ก4
 
Joomla
JoomlaJoomla
Joomla
 
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Wordคู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
 
งานคอม
งานคอมงานคอม
งานคอม
 
Presentation wordpress
Presentation wordpressPresentation wordpress
Presentation wordpress
 
Chapter4
Chapter4Chapter4
Chapter4
 
หน่วยการเรียนรู้ที่ 4 อินเทอร์เน็ต(แก้ไข)
หน่วยการเรียนรู้ที่ 4  อินเทอร์เน็ต(แก้ไข)หน่วยการเรียนรู้ที่ 4  อินเทอร์เน็ต(แก้ไข)
หน่วยการเรียนรู้ที่ 4 อินเทอร์เน็ต(แก้ไข)
 
คู่มือ Word
คู่มือ Wordคู่มือ Word
คู่มือ Word
 
คู่มือประกอบการสร้างเว็บไซต์Pdf
คู่มือประกอบการสร้างเว็บไซต์Pdfคู่มือประกอบการสร้างเว็บไซต์Pdf
คู่มือประกอบการสร้างเว็บไซต์Pdf
 
งานคอมพิวเตอร์ วารุณี 5_1_25
งานคอมพิวเตอร์ วารุณี 5_1_25งานคอมพิวเตอร์ วารุณี 5_1_25
งานคอมพิวเตอร์ วารุณี 5_1_25
 
งานคอมพิวเตอร์ วารุณี 5_1_25
งานคอมพิวเตอร์ วารุณี 5_1_25งานคอมพิวเตอร์ วารุณี 5_1_25
งานคอมพิวเตอร์ วารุณี 5_1_25
 
งานคอมพิวเตอร์ วารุณี 5_1_25
งานคอมพิวเตอร์ วารุณี 5_1_25งานคอมพิวเตอร์ วารุณี 5_1_25
งานคอมพิวเตอร์ วารุณี 5_1_25
 
Common
CommonCommon
Common
 
โครงงาน ฮาร์ดดิสก์
โครงงาน ฮาร์ดดิสก์โครงงาน ฮาร์ดดิสก์
โครงงาน ฮาร์ดดิสก์
 
ใบความที่ 3
ใบความที่ 3ใบความที่ 3
ใบความที่ 3
 
แปล Design and implementation of e
แปล Design and implementation of eแปล Design and implementation of e
แปล Design and implementation of e
 

More from pom_2555

Handbook2007 for print
Handbook2007 for printHandbook2007 for print
Handbook2007 for printpom_2555
 
คอมพิวเตอร์
คอมพิวเตอร์คอมพิวเตอร์
คอมพิวเตอร์pom_2555
 
Ulead studio
Ulead studio Ulead studio
Ulead studio pom_2555
 
Ulead studio
Ulead studio Ulead studio
Ulead studio pom_2555
 
Ulead studio
Ulead studio Ulead studio
Ulead studio pom_2555
 
โปรแกรม Macromedia authorware 7.0 พิมผกา ลลิตา
โปรแกรม Macromedia authorware 7.0 พิมผกา ลลิตาโปรแกรม Macromedia authorware 7.0 พิมผกา ลลิตา
โปรแกรม Macromedia authorware 7.0 พิมผกา ลลิตาpom_2555
 
แนะนำโปรแกรม Macromedia authorware 7.0
แนะนำโปรแกรม Macromedia authorware 7.0 แนะนำโปรแกรม Macromedia authorware 7.0
แนะนำโปรแกรม Macromedia authorware 7.0 pom_2555
 
เอกสารนวัตกรรมบทที่ 1
เอกสารนวัตกรรมบทที่ 1เอกสารนวัตกรรมบทที่ 1
เอกสารนวัตกรรมบทที่ 1pom_2555
 
เอกสารนวัตกรรม
เอกสารนวัตกรรมเอกสารนวัตกรรม
เอกสารนวัตกรรมpom_2555
 
Flasheffect[1]
Flasheffect[1]Flasheffect[1]
Flasheffect[1]pom_2555
 

More from pom_2555 (10)

Handbook2007 for print
Handbook2007 for printHandbook2007 for print
Handbook2007 for print
 
คอมพิวเตอร์
คอมพิวเตอร์คอมพิวเตอร์
คอมพิวเตอร์
 
Ulead studio
Ulead studio Ulead studio
Ulead studio
 
Ulead studio
Ulead studio Ulead studio
Ulead studio
 
Ulead studio
Ulead studio Ulead studio
Ulead studio
 
โปรแกรม Macromedia authorware 7.0 พิมผกา ลลิตา
โปรแกรม Macromedia authorware 7.0 พิมผกา ลลิตาโปรแกรม Macromedia authorware 7.0 พิมผกา ลลิตา
โปรแกรม Macromedia authorware 7.0 พิมผกา ลลิตา
 
แนะนำโปรแกรม Macromedia authorware 7.0
แนะนำโปรแกรม Macromedia authorware 7.0 แนะนำโปรแกรม Macromedia authorware 7.0
แนะนำโปรแกรม Macromedia authorware 7.0
 
เอกสารนวัตกรรมบทที่ 1
เอกสารนวัตกรรมบทที่ 1เอกสารนวัตกรรมบทที่ 1
เอกสารนวัตกรรมบทที่ 1
 
เอกสารนวัตกรรม
เอกสารนวัตกรรมเอกสารนวัตกรรม
เอกสารนวัตกรรม
 
Flasheffect[1]
Flasheffect[1]Flasheffect[1]
Flasheffect[1]
 

หน่วยที่ 2

  • 1. หน่ วยที่ 2 การออกแบบเว็บเพจเบืองต้ น ้ หลักการออกแบบเว็บเพจ วิธีการออกแบบและพัฒนาเว็บเพจนั้นสามารถทาได้หลายรู ปแบบ ขึ้นอยู่กบลักษณะของ ั ข้อมูลที่ใช้ใช้นาเสนอในเอกสารเว็บ ความพึงพอใจของผูที่ทาการสร้ าง ตลอดจนกลุ่ มเป้ าหมายหลักที่ ้ ต้องการให้เป็ นผูอ่านข้อมูลในเอกสารเว็บเหล่ านั้น ตัวอย่างเช่ น หากกลุ่ มเป้ าหมายเป็ นเด็กวัยรุ่ น ควร ้ นาเสนอข้อมูลเกี่ยวกับความสนใจของกลุ่มวัยรุ่ น เช่น ข้อมูลทางด้านบันเทิง และควรออกแบบให้มีลุกเล่น ที่ หลากหลาย มี สีสันสดใสเป็ นที่ น่า สนใจสาหรั บ วัยรุ่ น เป็ นต้น หากเป็ นเว็บเพจที่ เกี่ ย วข้องทางด้า น วิชาการ จะให้ความสาคัญกับเนื้อหาที่ขอความมากกว่าสี สันที่ใช้ในเว็บเพจ ้ การออกแบบและพัฒนาเว็บเพจนั้นควรมี การวางแผนก่ อนการพัฒนาเสมอ เนื่ องจากระบบ คอมพิ วเตอร์ ที่ ใ ช้ง านอยู่บ นระบบเครื อข่ า ยอิ นเทอร์ เน็ ตนั้น เป็ นระบบที่ หลากหลาย ระบบปฏิ บ ติก าร ั (Operating System : OS) ที่ใช้งานในระบบเครื อข่ายก็หลากหลาย ตัวอย่าง เช่น หากขณะที่สร้างเอกสาร เว็บนั้น ผูที่ทาการพัฒนาเว็บใช้คอมพิวเตอร์ ที่มีระบบปฏิ บติการที่ เป็ นโปรแกรมไมโครซอฟต์วินโดวส์ ้ ั (Microsoft Windows) หลังจากที่ทาการพัฒนาเสร็ จแล้วต้องทาการโอนย้ายเอกสารเว็บเหล่านั้นไปเก็บไว้บนเครื่ องคอมพิวเตอร์ แม่ ข่าย ซึ่ งส่ วนใหญ่แล้วจะเป็ นระบบปฏิบติการยูนิกซ์ (Unix) หรื อบางครั้งอาจเป็ นระบบปฏิบติการที่เป็ น ั ั วินโดวส์ และเอกสารเว็บที่ ถูกนาไปเก็บบนเครื่ องคอมพิวเตอร์ แม่ข่ายนี้ อาจถู กเรี ยกใช้งานเอกสารจาก คอมพิ ว เตอร์ ท่ี ใ ช้ ร ะบบปฏิ บ ัติ ก ารที่ ต่ า งกัน ออกไป จะเห็ น ได้ว่า เอกสารเว็บ นั้น จะต้อ งเกี่ ย วข้อ งกับ ระบบปฏิบติการหลายระบบ ดังนั้นในการพัฒนาเว็บเพจนั้นจะต้องคานึงถึงสิ่ งเหล่านี้ดวย ั ้ ผูที่ทาการสร้างเอกสารเว็บนั้น ควรจะต้องศึกษาถึงข้อกาหนดพื้นฐานที่ควรทราบก่อน เช่น การ ้ กาหนดชื่ อของโฟล์เดอร์ ประเภทของแฟ้ มข้อมูล ที่ เป็ นเอกสารเว็บ ประเภทของแฟ้ มข้อมู ลรู ป ภาพที่ สามารถแสดงผลได้ ตลอดจนแฟ้ มข้อมูลประเภทอื่นสามารถนามาใช้ประกอบในการทาเว็บเพจ
  • 2. ในระบบปฏิบติการยูนิกซ์หรื อระบบปฏิบติการลีนุกซ์ ลักษณะการตั้งชื่ อแฟ้ มข้อมูลนั้นจะเป็ น ั ั แบบให้ความสาคัญกับลักษณะของตัวอักษร (Case-Sensitive) กล่ าวคื อตัวอักษรพิมพ์ใหญ่และตัวอักษร พิ ม พ์เ ล็ ก จะถื อ ว่ า เป็ นตัว อัก ษรคนละตัว กัน ซึ่ งต่ า งจากระบบปฏิ บ ัติ ก ารวิ น โดวส์ (Windows) หรื อ ระบบปฏิ บ ัติ ก ารดอส (Dos) เช่ น แฟ้ มข้อ มู ล ที่ ชื่ อ ว่า “index.html” กับ “INDEX.HTML” ใน ระบบปฏิ บติการยูนิกซ์จะถื อว่าเป็ นชื่ อของแฟ้ มคนละแฟ้ มข้อมูลกัน แต่ถาเป็ นระบบปฏิ บติการวินโดวส์ ั ้ ั หรื อดอส จะถือว่าเป็ นแฟ้ มข้อมูลเดียวกัน ดัง นั้น หากผูท่ี ส ร้ า งเว็บ เพจ ใช้เ ครื่ อ งคอมพิ วเตอร์ ที่ มี ระบบปฏิ บ ติก ารวิ นโดวส์ ใ นการส้ ราง ้ ั เอกสารเว็ บ และก าหนดชื่ อ แฟ้ มข้อ มู ล เป็ น “NextPage.html” เมื่ อ ป้ อนค าสั่ ง ส าหรั บ การเชื่ อ มโยง แฟ้ มข้อมูลโดยให้เชื่ อมโยงไปยังแฟ้ มข้อมูลผ่านแป้ นพิมพ์เป็ น “nextpage.html” ขณะที่ทาการทดสอบบน เครื่ องคอมพิวเตอร์ ที่ใช้ในการสร้ างเอกสารเว็บนั้นสามารถทางานได้โดยไม่มีขอบกพร่ อง แต่เมื่อทาการ ้ โอนถ่ายเอกสารเว็บนี้ ไปยังเครื่ องคอมพิวเตอร์ แม่ข่ายที่เป็ นระบบปฏิ บติการยูนิกซ์ จะเกิดปั ญหาในการ ั เรี ยกดูเอกสารไม่ได้เพราะบนระบบปฏิบติการของเครื่ องคอมพิวเตอร์ แม่ข่าย จะถือว่าเป็ นแฟ้ มข้อมูลคนละ ั แฟ้ มข้อมูลกัน ขั้นตอนการพัฒนาเว็บเพจ ลาดับขั้นตอนสาหรับการพัฒนาเว็บเพจ สามารถจาแนกเป็ นลาดับขั้นตอนได้ดงนี้ ั 1. วางแผนการพัฒนาเว็บเพจ 2. กาหนดโฟลเดอร์ ที่ใช้สาหรับเก็บแฟ้ มข้อมูลที่เกี่ยวกับเว็บเพจ 3. จัดหาภาพที่เกี่ยวข้องกับเนื้ อหาและจัดเก็บไว้ในโฟลเดอร์ ได้กาหนดไว้ 4. สร้างเอกสารเว็บโดยกาหนดชื่อของแฟ้ มข้อมูลเอกสารเว็บ ให้เป็ นไปตามข้อกาหนดและจัดเก็บไว้ ในโฟลเดอร์ ที่ได้กาหนดไว้ 5. ตรวจสอบผลเอกสารเว็บผ่านทางโปรแกรมเว็บเบราว์เซอร์ ่ 6. นาข้อมูลขึ้นไปเก็บไว้บนเครื่ องคอมพิวเตอร์ แม่ขาย (Server) และทาการตรวจสอบผลการเรี ยกดู ่ ่ เอกสารเว็บที่อยูบนเครื่ องคอมพิวเตอร์ แม่ขาย ่ ั ้ รายละเอียดของขั้นตอนการพัฒนาเว็บเพจมีหลายขั้นตอนที่ตองขึ้นอยูกบผูดูแลระบบ (Web System ้ Administrator) เป็ นผูกาหนดวิธีการ ดังนั้นก่อนดาเนิ นการสร้างเว็บเพจควรติดต่อขอข้อมูลเหล่านี้จาก ้ ผูดูแลระบบก่อน ้
  • 3. ลักษณะโครงสร้ างของเว็บเพจ ลักษณะโครงสร้างของเว็บเพจโดยทัวไปแล้ว สามารถแบ่งได้ 3 ลักษณะดังนี้คือ ่ 1. แบบลาดับชั้น เป็ นการจัดแสดงหน้าเอกสารเว็บในลักษณะเรี ยงตามลาดับเป็ นกิ่งก้านแตกแขนง ั ต่อเนื่อง เปรี ยบได้กบต้นไม้กลับหัว 2. แบบเชิงเส้น เป็ นการจัดแสดงหน้าเอกสารเว็บ โดยเรี ยงต่อเนื่ องกันไปในทิศทางเดียวไม่มีการแตก ออกเป็ นกิ่งก้านสาขา 3. แบบผสม เป็ นการจัดเรี ยงหน้าของเอกสารเว็บโดยผสมผสานระหว่างแบบลาดับชั้นและแบบเชิง เส้น ทั้งนี้ก็ข้ ึนอยูกบผูที่ทาการออกแบบ ว่าจะจัดเรี ยงลาดับของรู ปแบบเอกสารเว็บในลักษณะใด ่ ั ้
  • 4. การวางแผนพัฒนาเว็บเพจ การวางแผนสาหรับการพัฒนาเว็บเพจนั้น ถือว่าเป็ นขั้นตอนสาคัญขั้นตอนหนึ่ง เนื่ องจาก เอกสารเว็บที่สร้างขึ้นนั้นจะมีจานวนเพิ่มขึ้นเรื่ อย ๆ และจะมีจุดเชื่ อม (Link) เป็ นจานวนมาก หากไม่มี การวางแผนไว้ก่อนจะทาให้การปรับปรุ งและพัฒนาในภายหลังเกิดปั ญหาขึ้นได้ง่าย ตัวอย่าง เช่น แฟ้ มข้อมูลมีจานวนมากทาให้ไม่สามารถจดจาชื่ อของแฟ้ มข้อมูลที่เคยสร้างไว้แล้วได้ ซึ่ งจะส่ งผลให้ การทาการเชื่ อมโยงเอกสารเกิดปั ญหาขึ้น เพื่อป้ องกันปั ญหาดังกล่าวนี้ควรมีการวางแผนและออกแบบ เอกสารเว็บบนกระดาษ และทาการกาหนดชื่ อแฟ้ มข้อมูลของแต่ละเอกสารเว็บให้เรี ยบร้อย จะทาให้ผู้ ที่ทาการสร้างเว็บเพจสามารถมองเห็นภาพการไหลของข้อมูล (Data Flow) ภายในเว็บเพจได้ชดเจน ั ่ ั และสามารถทาการพิจารณาต่อไปได้วาเอกสารเว็บแต่ละแฟ้ มข้อมูลนั้นมีความสัมพันธ์กบเอกสารอื่น ั อย่างไร และสัมพันธ์กบแฟ้ มข้อมูลเอกสารเว็บใดบ้าง ตัวอย่าง ต้องการสร้างเว็บเพจเพื่อนาเสนอความรู ้เกี่ยวกับคอมพิวเตอร์ เบื้องต้น อาจสามารถทาการ ออกแบบได้ดงนี้ ั การกาหนดชื่ อและนามสกุลของแฟ้ มข้อมูลเอกสารเว็บ ่ ั ข้อกาหนดสาหรับการตั้งชื่อของแฟ้ มข้อมูลนั้น นอกจากจะขึ้นอยูกบความสามารถของ ระบบปฏิบติการแล้ว ยังต้องขึ้นอยูกบข้อกาหนดของผูดูแลระบบของเครื่ องแม่ข่ายที่ให้บริ การเว็บเพจ ั ่ ั ้ (Web Administrator) ด้วย ดังนั้นผูที่สร้างเว็บเพจจึงต้องสอบถามกฎการตั้งชื่อเหล่านี้ โดยละเอียด ้ โดยทัวไปแล้วมีหลักการดังนี้ ่  ควรใช้ตวอักษร a-z หรื อตัวเลข 0-9 ในการตั้งชื่อไม่ควรใช้อกขระพิเศษ ั ั  ตัวอักษร a-z ที่ใช้ในการตั้งชื่อ ควรเป็ นตัวอักษรพิมพ์เล็ก  ไม่ควรเว้นวรรคช่องว่างภายในชื่อ  ห้ามใช้อกขระพิเศษในการตั้งชื่ อ ยกเว้น Underscore (ขีดล่าง) หรื อ Dash (ขีดกลาง) ั  ชื่อแฟ้ มข้อมูลแรกของเว็บเพจ มักจะใช้ชื่อ index.html หรื อ index.htm  นามสกุลของแฟ้ มข้อมูลเอกสารเว็บมี 2 รู ปแบบ คือ .htm และ .html ส่ วนแฟ้ มข้อมูลประเภทอื่น ผู ้ ที่ทาการสร้างเว็บเพจควรสอบถามจากผูดูแลเครื่ องคอมพิวเตอร์ แม่ข่ายว่าเครื่ องคอมพิวเตอร์ แม่ ้ ข่าย (Server) นี้สามารถใช้งานเก็บเอกสารที่มีนามสกุลของแฟ้ มข้อมูลเป็ นรู ปแบบใดได้อีก เช่น .php , .asp เป็ นต้น นอกจากการวางโครงร่ างของเว็บเพจข้างต้นแล้ว สิ่ งที่ควรจะทาการพิจารณาต่อไปคือ
  • 5. - รู ปแบบการแสดงผลของหน้ าเว็บเพจ หมายถึงลักษณะการวางเนือหา และรายการเลือกต่ าง ๆ บน ้ หน้ าเว็บ ซึ่งมีได้ หลากหลายรู ปแบบ เช่ น - การแสดงผลเนื้อหาทั้งหมดรวมในหน้าเดียวกัน ซึ่ งการแสดงผลแบบนี้ จะรวมเอารายการเลือก และเนื้อหาไว้ในหน้าเดียวกัน - การแสดงผลด้วยตาราง การแสดงผลรู ปแบบนี้จะแยกระหว่างรายการเลือกหรื อเมนู (Menu) ไว้ ่ ด้านหนึ่งของตาราง และเนื้อหาข้อความจะอยูอีกด้านหนึ่ง - การแสดงผลด้วยเฟรม การแสดงผลรู ปแบบนี้คล้ายกับการแสดงผลแบบตารางแต่รายการเลือก หรื อเมนูน้ นจะถูกตรึ งกับที่ จะไม่มีการเคลื่อนย้ายเมื่อทาการเลื่อนจอภาพหรื อเลือกเนื้อหาที่ ั ต้องการแสดงผล แต่จะทางานได้เฉพาะโปรแกรมเว็บเบราว์เซอร์ เท่านั้น - ข้ อความทีใช้ สาหรับแสดงหัวเรื่องของเว็บเพจ หมายถึงข้ อความทีปรากฏในส่ วนหัวของหน้ าต่ าง ่ ่ เอกสารเว็บ (Title Bar) โดยข้ อความส่ วนนีจะถูกนาไปใช้ เป็ นคาสาคัญ (Keyword) ทีใช้ ในการ ้ ่ ค้ นหาเว็บเพจจากบุคคลอืน ข้ อความทีนามากาหนดเป็ นเรื่องของเว็บเพจนั้น ควรมีลักษณะ ่ ่ ดังต่ อไปนี้ - สามารถเป็ นข้อความภาษาไทยหรื อภาษาอังกฤษ - มีความยาวไม่เกิน 64 ตัวอักษร - เป็ นข้อความที่สื่อความหมายที่กระชับเกี่ยวกับเนื้อหาในหน้าเว็บนั้น - ลักษณะของหน้าเว็บ หมายถึงการกาหนดสี ของพื้นของเอกสารเว็บ (Background Color) หรื อ รู ปภาพที่จะนามาใช้เป็ นพื้นหลังของเอกสารเว็บ (Background Image) สี ของตัวอักษรปกติ (Normal Text) สี ของตัวอักษรที่ใช้เป็ นจุดเชื่อม (Link Text) เพื่อให้เอกสารเว็บแต่ละหน้ามีการแสดงผลที่สวยงาม และ ดึงดูดความสนใจของผูใช้งาน ้ การกาหนดโฟลเดอร์ สาหรับเก็บข้ อมูล การกาหนดโฟลเดอร์ ก่อนที่จะทาการสร้างชุดเอกสารเว็บเพจนั้น เป็ นลาดับขั้นตอนที่ควรกระทา ทุกครั้ง เพื่อให้เอกสารเว็บแต่ละชุดนั้นมีระบบการจัดเก็บที่เป็ นระบบ สามารถค้นหาเรี ยกใช้งานและแก้ไข ข้อมูลภายหลังได้โดยสะดวก โดยที่ในการสร้างชุ ดเอกสารเว็บแต่ละชุดนั้นจะประกอบไปด้วยแฟ้ มข้อมูล จานวนมาก ทั้งเอกสารเอชทีเอ็มแอล แฟ้ มข้อมูลรุ ปภาพ เสี ยง ภาพเคลื่อนไหว และอื่น ๆ ที่เกี่ยวข้องกับ เว็บเพจ ดังนั้นแฟ้ มข้อมูลทั้งหมดนี้ควรจัดเก็บไว้อย่างเป็ นหมวดหมู่ โดยอาจสร้างเป็ นโฟลเดอร์ ยอยเพื่อทา ่ การแยกกลุ่มแฟ้ มข้อมูล แต่จะต้องสร้างภายใต้โฟลเดอร์ หลักของเว็บเพจทั้งหมด ไม่ควรแยกไว้คนละ
  • 6. ตาแหน่งกัน เพราะจะทาให้การจัดการเกี่ยวกับเว็บเพจนั้นมีปัญหายุงยากได้ โดยทาการสร้างโฟลเดอร์ 1 ่ โฟลเดอร์ ต่อเว็บไซต์ 1 เว็บไซต์ ตัวอย่างการสร้างโฟลเดอร์ ชื่อ WEB-SITE ไว้ที่ desktop ของ Windows - ที่หน้าจอของคอมพิวเตอร์จะแสดง Desktop ของ Windows ่ - นาเมาส์ไปชี้ตรงตาแหน่งพื้นที่วางบน Desktop จากนั้นให้กดปุ่ มเมาส์ทางด้านขวาเพื่อแสดงเมนู ลัด - ทาการเลือกคาสั่ง New จากนั้นเลือก Folder ่ - ปรากฏไอคอนของโฟลเดอร์ วาง - ให้ทาการพิมพ์ชื่อของโฟลเดอร์ ในที่น้ ี คือ WEB-SITE จากนั้นทาการกดปุ่ ม ENTER จะปรากฏโฟลเดอร์ชื่อ WEB-SITE การจัดเตรียมภาพทีเ่ กียวข้ องกับเนื้อหาเว็บ ่ เอกสารเว็บโดยทัวไปแล้วจะต้องเกี่ยวข้องกับรู ปภาพโดยตรง เพื่อใช้ในการสื่ อความหมายกับ ่ ผูใช้งานได้ชดเจนมากกว่าการสื่ อความหมายด้วยตัวอักษรเพียงอย่างเดียว อีกทั้งเป็ นการดึงดุดความสนใจ ้ ั ของผูใช้งาน ดังนั้นเมื่อทาการสร้างรู ปภาพหรื อจัดหารู ปภาพเป็ นที่เรี ยบร้อยแล้วควรที่จะทาการคัดลอกมา ้ เก็บไว้ในโฟลเดอร์ ท่ีได้จดเตรี ยมไว้ เพื่อให้สะดวกในการเรี ยกใช้งานรู ปภาพนั้นและสะดวกต่อการบริ หาร ั เว็บไซต์ในอนาคต แฟ้ มข้อมูลรู ปภาพที่นามาใช้ในการทาเว็บเพจนั้น ปั จจุบนนิยมใช้อยู่ 2 รู ปแบบ คือ ั - ไฟล์ฟอร์แมต JPEG (Joint Photographer’s Experts Group File) - ไฟล์ฟอร์แมต GIF (Graphics Interlace File) การจัดหารู ปแบบที่นามาใช้ในการจัดทาเว็บเพจนั้น สามารถจัดเตรี ยมได้หลายวิธี เช่น - สร้างรู ปภาพโดยโปรแกรมกราฟิ กต่าง ๆ เช่น PhotoShop , Corel Draw เป็ นต้น ในการสร้าง แฟ้ มข้อมูลรู ปภาพ ซึ่ งจะได้ภาพที่ตรงกับความต้องการ แต่ใช้เวลาในการสร้างภาพมากขึ้น - เลือกรู ปภาพจากชุดภาพสาเร็ จรู ป ที่มีการวางจาหน่ายในลักษณะคลังรู ปภาพสาหรับทาเว็บเพจ (Web ClipArt) ซึ่ งสะดวกรวดเร็ วและง่ายต่อการใช้งาน แต่อาจจะได้ภาพที่ไม่ตรงกับความ ต้องการมากนัก - นารู ปภาพจากโปรแกรมอื่น หรื อเว็บเพจอื่นมาใช้ ซึ่ งสะดวกรวดเร็ วต่อการใช้งาน เช่นกัน แต่ อาจเกิดปั ญหาทางด้านลิขสิ ทธิ์ ของภาพ
  • 7. การสร้ างเอกสารเว็บ การสร้างเอกสารเว็บนั้น หากผูที่ทาการสร้างไม่ใช่ผดูแลระบบเครื่ องคอมพิวเตอร์ ที่ให้บริ การ ้ ู้ เกี่ยวกับเว็บเพจ (Web Administrator) แล้ว การกาหนดชื่ อแฟ้ มข้อมูลของเอกสารเว็บต้องเป็ นไปตาม ข้อกาหนดของผูดูแลระบบ และจัดเก็บไว้ในโฟลเดอร์ ที่ผดูแลระบบเตรี ยมไว้เท่านั้น ้ ู้ ดังนั้นจะต้องมีการประสานงานกับผูดูแลระบบก่อนที่จะนาเอกสารเว็บนั้นเข้าสู่ ระบบเครื อข่าย ้ อินเทอร์ เน็ต แฟ้ มข้อมูลเอกสารเว็บนั้นจะเขียนโดยใช้ภาษาเอชทีเอ็มแอล (HTML) ซึ่ งก็คือแฟ้ มข้อมูล ข้อความหรื อแฟ้ มข้อมูลตัวอักษร (Text File) ดังนั้นการสร้างเอกสรเว็บนั้น สามารถใช้โปรแกรมที่ สามารถจัดการเกี่ยวกับแฟ้ มข้อมูลตัวอักษรใดก็ได้ ในการช่วยสาหรับการเขียนรหัสคาสั่งภาษา เอชทีเอ็มแอล เช่น Notepad , Wordpad เป็ นต้น นอกจากนี้ในปั จจุบนมีโปรแกรมช่วยในการสร้าง ั เอกสารเว็บอีกมากมาย เช่น โปรแกรมไมโครซอฟต์ ฟรอนต์เพจ (Front Page) เป็ นต้น เอกสารเว็บนั้นเป็ นเอกสารที่เป็ นลักษณะเป็ นแฟ้ มข้อความปกติ ที่เก็บรหัสคาสั่งของภาษา เอชทีเอ็มแอล (HTML) ดังนั้นเพื่อเป็ นการบอกให้โปรแกรมเว็บเบราว์เซอร์ ทราบว่า เอกสารนี้เป็ น แฟ้ มข้อมูลเฉพาะสาหรับกาหนดรู ปแบบการแสดงผลผ่านอินเทอร์ เน็ต จะใช้ส่วนของนามสกุลหรื อ ส่ วนขยายของไฟล์ (File Extension) เป็ นตัวบอกแก่โปรแกรมเว็บเบราว์เซอร์ โดยนามสกุลหรื อส่ วน ขยายของแฟ้ มข้อมูลคือ .htm หรื อ .html โดยเอกสารเว็บหน้าแรกของเว็บไซต์น้ นนิยมตั้งเป็ นชื่ อว่า ั “index.html” , “index.htm” หรื อ “default.html” เป็ นต้น ทั้งนี้ก็ข้ ึนอยูกบผูดูแลระบบ ่ ั ้ สาหรับการตั้งชื่อและนามสกุลของแฟ้ มข้อมูลที่เป็ นเอกสารเว็บนั้น ไม่ควรทาการตั้งชื่อเป็ น ภาษาไทย เนื่องจากว่าระบบปฏิบติการหลายระบบไม่สนับสนุนภาษาไทย และควรใช้ตวอักษรพิมพ์ ั ั เล็กในการกาหนดชื่ อและนามสกุลของแฟ้ มข้อมูล เพื่อป้ องกันปั ญหาที่เกิดจากการทางานข้าม ระบบปฏิบติการ เนื่องจากระบบอินเทอร์ เน็ตจะใช้ระบบปฏิบติการหลายระบบร่ วมกัน โดยเฉพาะ ั ั ยูนิกซ์ (Unix) จะถือว่าตัวอักษรพิมพ์ใหญ่และตัวอักษรพิมพ์เล็กนั้นมีความหมายที่ต่างกัน (Case- Sensitive)