SlideShare a Scribd company logo
1 of 9
Download to read offline
แนวคิด
ก่อนการทาการสร้างเว็บเพจ ผู้ที่ทาการสร้างจะต้องทราบถึงหลักการออกแบบ ขั้นตอน และ
วิธีการในการพัฒนา ลักษณะโครงสร้างโดยทั่วไปของเว็บเพจ การจัดเตรียมพื้นที่และข้อมูล ประกอบสาหรับ
การสร้างเว็บเพจ และวิธีการในการสร้างเอกสารเว็บ ซึ่งในหน่วยนี้จะกล่าวถึงหัวข้อ ดังกล่าว

สาระการเรียนรู้
1.
2.
3.
4.
5.
6.

หลักการออกแบบเว็บเพจ
ขั้นตอนการพัฒนาเว็บเพจ
ลักษณะโครงสร้างของเว็บเพจ
การกาหนดโฟลเดอร์สาหรับเก็บข้อมูล
การจัดเตรียมภาพที่เกี่ยวข้องกับเนื้อหาเว็บ
การสร้างเอกสารเว็บ

ผลการเรียนรูที่คาดหวัง
1.
2.
3.
4.
5.
6.

สามารถบอกหลักการออกแบบเว็บเพจ
สามารถบอกขั้นตอนการพัฒนาเว็บเพจ
สามารถบอกลักษณะโครงสร้างของเว็บเพจ
อธิบายวิธีการกาหนดโฟลเดอร์สาหรับจัดเก็บข้อมูลได้
อธิบายวิธีการจัดเตรียมภาพที่เกี่ยวข้องกับเนื้อหาเว็บได้
สามารถบอกวิธีการสร้างเอกสารเว็บ

หลักการออกแบบเว็บเพจ
วิธีการออกแบบและพัฒนาเว็บเพจนั้นสามารถทาได้หลายรูปแบบ ขึ้นอยู่กับล้กษณะของข้อมูลที่จะ
ใช้นาเสนอในเอกสารเว็บ ความพึงพอใจของผู้ที่ทาการสร้าง ตลอดจนกลุ่มเป้าหมายหลักที่ต้องการให้เป็นผู้อ่าน
ข้อมูลในเอกสารเว็บเหล่านั้น ตัวอย่างเช่น หากกลุ่มเป้าหมายเป็นเด็ก วัยรุ่น ควรนาเสนอข้อมูลเกี่ยวกับ
ความสนใจของกลุ่มวัยรุ่น เช่น ข้อมูลทางด้านบันเทิง และควรออกแบบให้มีลูกเล่นที่หลากหลาย มีสีสันสดใส
เป็นที่นาสนใจสาหรับวัยรุ่น เป็นต้น หากเป็นเว็บเพจที่เกี่ยวข้องทางด้านวิชาการ จะให้ความสาคัญกับเนื้อหา
ที่ข้อความมากกว่าสีสันที่ใช้ในเว็บเพจ
การออกแบบและพัฒนาเว็บเพจนั้นควรมีการวางแผนก่อนการพัฒนาเสมอ เนื่องจากระบบ
คอมพิวเตอร์ที่ใช้งานอยู่บนระบบเครือข่ายอินเทอร์เน็ตนั้นเป็นระบบที่หลากหลาย ระบบปฎิบัตการ
ิ
(Operating System: OS) ที่ใช้งานในระบบเครือข่ายก็หลากหลาย ตัวอย่างเช่น หากขณะที่สร้างเอกสาร
เว็บนั้น ผู้ที่ทาการพัฒนาเว็บใช้คอมพิวเตอร์ที่มีระบบปฏิบัติการที่เป็น โปรแกรมไมโครซอฟต์วินโดวส์
(Microsoft Windows)

รูปที่ 2.1 แสดงลั ก ษณะความแตกต่า งของประเภทเครื่ องคอมพิว เตอร์
และระบบปฏิบ้ ติ การที่ใช้ง านบนระบบเครื อข่า ยอิ นเทอร์เน็ต
หลังจากที่ทาการพัฒนาเสร็จแล้วต้องทาการโอนย้ายเอกสารเว็บเหล่านั้นไปเก็บไว้บนเครื่อง
คอมพิวเตอร์แม่ข่าย ซึ่งส่วนใหญ่แล้วจะเป็นระบบปฏิบัติการยูนิกซ์ (Unix) หรือบางครั้งอาจเป็น
ระบบปฏิบัติการที่เป็นวินโดวส์ และเอกสารเว็บที่ถูกนาไปเก็บบนเครื่องคอมพิวเตอร์แม่ข่ายนี้ อาจถูกเรียกใช้
งานเอกสารจากคอมพิวเตอร์ที่ใช้ระบบปฏิบัติการที่ต่างกันออกไป จะเห็นได้ว่า เอกสารเว็บนั้นจะต้องเกี่ยวข้อง
กับระบบปฏิบัติการหลายระบบดังนั้นในการพัฒนาเว็บเพจนั้นจะต้องคานึงถึงสิ่งเหล่านี้ด้วย
ผู้ที่ทาการสร้างเอกสารเว็บนั้น ควรจะต้องศึกษาถึงข้อกาหนดพื้นฐานที่ควรทราบก่อน เช่น
การกาหนดชื่อของโฟลเดอร์ ประเภทของแฟ้มข้อมูลที่เป็นเอกสารเว็บ ประเภทของแฟ้มข้อมูล รูปภาพที่
สามารถแสดงผลได้ ตลอดจนแฟ้มข้อมูลประเภทอื่นสามารถนามาใช้ประกอบในการทาเว็บเพจ
ในระบบปฏิบตการยูนิกซ์หรือระบบปฏิบัติการลินุกซ์ ลักษณะการตั้งชื่อแฟ้มข้อมูลนั้นจะเป็นแบบให้
ความสาคัญกับลักษณะของตัวอักษร (Case-Sensitive) กล่าวคือตัวอักษรพิมพ์ใหญ่ และตัวอักษรพิมพ์เล็ก
จะถือว่าเป็นตัวอักษรคนละตัวกันซึ่งต่างจากระบบปฏิบัติการวินโดวส์ (Windows) หรือระบบปฏิบัติการดอส
(DOS) เช่น แฟ้มข้อมูลที่ชื่อว่า "index.html" กับ "INDEX.HTML" ในระบบปฏิบัติการยูนิกซ์จะถือว่าเป็นชื่อ
ของแฟ้มคนละแฟ้มข้อมูลกัน แต่ถ้าเป็นในระบบปฏิบัติการวินโดวส์หรือดอส จะถือว่าเป็นแฟ้มข้อมูลเดียวกัน
ดังนั้นหากผู้ที่สร้างเว็บเพจใช้เครื่องคอมพิวเตอร์ที่มีระบบปฏิบัติการวินโดวส์ในการสร้าง เอกสารเว็บ
และกาหนดชื่อแฟ้มข้อมูลเป็น "NextPage.html" เมื่อป้อนคาสั่งสาหรับการเชื่อมโยง แฟ้มข้อมูลโดยให้
เชื่อมโยงไปยังแฟ้มข้อมูลผ่านแป้นพิมพ์เป็น "nextpage.html" ขณะที่ทาการ ทดสอบบนเครื่องคอมพิวเตอร์ที่
ใช้ในการสร้างเอกสารเว็บนั้นสามารถทางานได้โดยไม่มีข้อบกพร่อง แต่เมื่อทาการโอนถ่ายเอกสารเว็บนึ้ไปยัง
เครื่องคอมพิวเตอร์แม่ข่ายที่เป็นระบบปฏิบัติการยูนิกซ์ จะเกิดปัญหาในการเรียกดูเอกสารไม่ได้ เพราะบน
ระบบปฏิบัติการของเครื่องคอมพิวเตอร์แม่ข่าย จะถือว่าเป็นแฟ้มข้อมลคนละแฟ้มข้อมูลกัน
สร้างแฟ้มข้อมูล
Index.html

ไม่เท่ากับ Index.html
บนระบบปฏิบัติการ UNIX

รูปที่ 2.2 แสดงความแตกต่ างระหว่างชื่ อของแฟัม ข้ อมู ล ในระบบปฏิบ้ติการที่ต่ างกัน

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

ลักษณะโครงสร้างของเว็บเพจ
ลักษณะโครงสร้างของเว็บเพจโดยทั่วไปแล้ว สามารถแบ่งได้ 3 ลักษณะดังนี้คือ
1. แบบลาดับชั้น เปีนการจัดแสดงหน้าเอกสารเว็บในลักษณะเรียงตามลาดับเปีนกิ่งก้าน แตกแขนง
ต่อเนื่อง เปรียบได้กับต้นไม้กลับหัว

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

รูปที่ 2.4 แสดงโครงสร้ างของเว็บ เพจแบบเชิงเส้ น
3. แบบผสม เป็นการจัดเรียงหน้าของเอกสารเว็บโดยผสมผสานระหว่างแบบลาดับชั้น และแบบเชิง
เส้น ทั้งนี้ก็ขึ้นอย่กับผ้ที่ทาการออกแบบ ว่าจะจัดเรียงลาดับของรปแบบเอกสารเว็บใน
รูปที่ 2.5 แสดงโครงสร้างของเว็บเพจแบบผสม

การวางแผนพัฒนาเว็บเพจ
การวางแผนสาหรับการพัฒนาเว็บเพจนั้น ถือว่าเป็นขั้นตอนสาคัญขั้นตอนหนึ่ง เนื่องจากเอกสาร
เว็บที่สร้างขึ้นนั้นจะมีจานวนเพิ่มขึ้นเรื่อยๆ และจะมีจุดเชื่อม (Link) เป็นจานวนมาก หากไม่มีการวางแผนไว้
ก่อนจะทาให้การปรับปรุงและพัฒนาในภายหลังเกิดปัญหาขึ้นได้ง่าย ตัวอย่างเช่น แฟ้มข้อมูลมีจานวนมากทา
ให้ไม่สามารถจดจาชื่อของแฟ้มข้อมูลที่เคยสร้างไว้แล้วได้ ซึ่งจะส่งผลให้การทาการเชื่อมโยงเอกสารเกิด
ปัญหาขึ้น เพื่อป้องกันปัญหาดังกล่าวนี้ควรมีการวางแผน และออกแบบเอกสารเว็บบนกระดาษ และทาการ
กาหนดชื่อแฟ้มข้อมูลของแต่ละเอกสารเว็บให้เรียบร้อย จะทาให้ผู้ที่ทาการสร้างเว็บเพจสามารถมองเห็นภาพ
การไหลของข้อมูล (Data Flow) ภายในเว็บเพจได้ชัดเจน และสามารถทาการพิจารณาต่อได้ว่าเอกสารเว็บ
แต่ละแฟ้มข้อมูลนั้น มีความสัมพันธ์กับเอกสารอื่นอย่างไร และสัมพันธ์กับแฟ้มข้อมลเอกสารเว็บใดบ้าง
ตัวอย่าง ต้องการสร้างเว็บเพจเพื่อนาเสนอความรู้เกี่ยวกับคอมพิวเตอร์เบื้องต้น อาจสามารถทาการออกแบบ
ได้ดังนี้
เมนู (หน้าหลัก)
Index.html

ความเป็นมาชอง
ระบบคอมพิวเตอร์
history.html

ระบบฮาร์ดแวร์
hardware.html

ระบบซอฟแวร์
software.html

บุคลากรด้าน
คอมพิวเตอร์
ppl.html

อุปกรณ์อินพุต

อุปกรณ์เอ้าพุต

ระบบปฏิบัตการ
ิ

โปรแกรมประบุกต์
รูปที่ 2.6 แสดงโครงสร้ างของเว็บ เพจเพื่อ นาเสนอความรู้เกี่ ยวกับ คอมพิว เตอร์

การกาหนดชื่อและนามสกุลของแฟ้มข้อมูลเอกสารเว็บ
ข้อกาหนดสาหรับการตั้งชื่อของแฟ้มข้อมูลนั้น นอกจากจะขึ้นอยู่กับความสามารถของ
ระบบปฏิบัติการแล้ว ยังต้องขึ้นอยู่กับข้อกาหนดของผู้ดูแลระบบของเครื่องแม่ข่ายที่ให้บริการเว็บเพจ
(Web Administrator) ด้วย ดังนั้นผู้ที่สร้างเว็บเพจจึงต้องสอบถามกฎการตั้งชื่อเหล่านี้โดยละเอียด โดยทั่วไป
แล้วมีหลักการดังนี้
1. ควรใช้ตัวอักษร a - z หรือตัวเลข 0 - 9 ในการตั้งชื่อไม่ควรใช้อักขระพิเศษ
2. ตัวอักษร a - z ที่ใช้ในการตั้งชื่อ ควรเป็นตัวอักษรพิมพ์เล็ก
3. ไม่ควรเว้นวรรคช่องว่างภายในชื่อ
4. ห้ามใช้อักขระพิเศษในการตั้งชื่อ ยกเว้น Underscore (ขีดล่าง) หรือ Dash (ขีดกลาง)
5. ชื่อแฟ้มข้อมูลแรกของเว็บเพจ มักจะใช้ชื่อ index.html หรือ index.htm
6. นามสกุลของแฟ้มข้อมูลเอกสารเว็บ มี 2 รูปแบบ คือ .htm และ .html ส่วนแฟ้มข้อมูลประเภท
อื่น ผู้ที่ทาการสร้างเว็บเพจควรสอบถามจากผู้ดูแลเครื่องคอมพิวเตอร์แม่ข่ายว่า เครื่องคอมพิวเตอร์แม่ข่าย
(Server) นี้ สามารถใช้งานเก็บเอกสารที่มีนามสกุลของ แฟ้มข้อมูลเป็นรปแบบใดได้อีก เช่น .php, .asp
เป็นต้น
นอกจากการวางโครงร่างของเว็บเพจข้างต้นแล้ว สิ่งที่ควรจะทาการพิจารณาต่อไปคือ
รูปแบบการแสดงผลของหน้าเว็บเพจ หมายถึงลักษณะการวางเนื้อหา และรายการเลือกต่างๆ
บนหน้าเว็บ ซึ่งมีไต้หลากหลายรูปแบบเช่น
การแสดงผลเนื้อหาทั้งหมดรวมในหน้าเดียวกัน ซึ่งการแสดงผลแบบนื้จะรวมเอารายการเลือก
และเนื้อหาไว้ในหน้าเดียวกัน
การแสดงผลด้วยตาราง การแสดงผลรูปแบบนี้จะแยกระหว่างรายการเลือกหรือเมนู (Menu) ไว้
ด้านหนึ่งของตาราง และเนื้อหาข้อความจะอยู่อีกด้านหนึ่ง
การแสดงผลด้วยเฟรม การแสดงผลรูปแบบนนี้คล้ายกับการแสดงผลแบบตาราง แต่รายการ
เลือกหรือเมนูนั้นจะถูกตรึงกับที่ จะไม่มีการเคลื่อนย้ายเมื่อทาการเลื่อนจอภาพหรือเลือกเนื้อหาที่ต้องการ
แสดงผล แต่จะทางานไต้เฉพาะโปรแกรมเว็บเบราว์เซอร์รุ่นใหม่
ข้อความที่ใช้สาหรับแสดงห้วเรื่องของเว็บเพจ หมายถึงข้อความที่จะปรากฏในส่วนหัวของ
หน้าต่าง เอกสารเว็บ (Title Bar) โดยข้อความส่วนนี้จะถูกนาไปใช้เป็นคาสาคัญ (Keyword) ที่ใช้ในการ
ค้นหาเว็บเพจจากบุคคลอื่น ข้อความที่นามากาหนดเป็นหัวเรื่องของเว็บเพจนั้น ควรมีลักษณะดังต่อไปนี้
สามารถเป็นข้อความภาษาไทยหรืออังกฤษ
มีความยาวไม่เกิน 64 ตัวอักษร
เป็นข้อความที่สื่อความหมายที่กระชับเกี่ยวกับเนี้อหาในหน้าเว็บนั้น
ส่วนหัวของหน้าต่างเอกสารเว็บของสถาบันเทคโนโลยีราชมงคล

รูปที่ 2.7 แสดงข้ อความในส่ ว นหั ว ของหน้าต่างเอกสารเว็บ
ลักษณะของหน้าเว็บ หมายถึงการกาหนดสีของพนของเอกสารเว็บ (Background Color) หรือ
รูปภาพที่จะนามาใช้เปีนพื้นหลังของเอกสารเว็บ (Background Image) สีของตัวอักษรปกติ (Normal Text) สี
ของตัวอักษรที่ใช้เป็นจุดเชื่อมต่อ (Link Text) เพื่อให้เอกสารเว็บแต่ละหน้ามีการแสดงผลที่สวยงาม และดึงดูด
ความสนใจของผู้ใช้งาน

การกาหนดโฟลเดอร์สาหรับเก็บข้อมูล
การกาหนดโฟลเดอร์ก่อนที่จะทาการสร้างชุดเอกสารเว็บเพจนั้น เป็นลาดับขั้นตอนที่ควรกระทา
ทุกครั้ง เพื่อให้เอกสารเว็บแต่ละชุดนั้นมีระบบการจัดเก็บที่เป็นระบบสามารถค้นหาเรียกใช้งานและแก้ไข
ข้อมูลภายหลังได้โดยสะดวก โดยที่ในการสร้างชุดเอกสารเว็บแต่ละชุดนั้นจะ ประกอบไปด้วยแฟ้มข้อมูล
จานวนมาก ทั้งเอกสารเอชทีเอ็มแอล แฟ้มข้อมูลรูปภาพ เสียง ภาพ เคลื่อนไหว และอื่นๆ ที่เกี่ยวข้องกับ
เว็บเพจ ดังนั้นแฟ้มข้อมูลทั้งหมดนี้ควรจัดเก็บไว้อย่างเป็นหมวดหมู่ โดยอาจสร้างเป็นโฟลเดอร์ย่อยเพื่อทาการ
แยกกลุ่มแฟ้มข้อมูล แต่จะต้องสร้างภายใต้โฟลเดอร์หลักของเว็บเพจทั้งหมด ไม่ควรแยกไว้คนละตาแหน่งกัน
เพราะจะทาให้การจัดการเกี่ยวกับ เว็บเพจนั้นมีปัญหายุ่งยากได้ โดยทาการสร้างโฟลเดอร์ 1 โฟลเดอร์ต่อ
เว็บไซต์ 1 เว็บไซต์
ตัวอย่าง การสร้างโฟลเดอร์ชื่อ WEB-SITE ไว้ที่ desktop ของ Windows
1. ที่หน้าจอของคอมพิวเตอร์จะแสดง Desktop ของ Windows
2. นาเมาส์ไปชี้ตรงตาแหน่งพื้นที่ว่างบน Desktop จากนั้นให้กดปุ่มเมาส์ทางด้านขวาเพื่อแสดงเมนูลัด
3. ทาการเลือกคาสั่ง New จากนั้นเลือก Folder

รู ปที่ 2.8 แสดงขั้น ตอนการสร้างโฟลเดอร์สาหรับเก็บ ข้ อมลเว็ บเพจ
1. ปรากฏไอคอนของโฟลเดอร์ว่าง
2. ให้ทาการพิมพ์ชื่อของโฟลเดอร์ ในที่นี้คือ 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

ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlSamorn Tara
 
ใบความรู้ที่ 2.4 ขั้นตอนการสร้างเว็บhtml
ใบความรู้ที่ 2.4 ขั้นตอนการสร้างเว็บhtmlใบความรู้ที่ 2.4 ขั้นตอนการสร้างเว็บhtml
ใบความรู้ที่ 2.4 ขั้นตอนการสร้างเว็บhtmlSmo Tara
 
การสืบค้นข้อมูลทางอินเตอร์เน็ต
การสืบค้นข้อมูลทางอินเตอร์เน็ตการสืบค้นข้อมูลทางอินเตอร์เน็ต
การสืบค้นข้อมูลทางอินเตอร์เน็ตeyechillchill
 
การออกแบบเว็บไซต์
การออกแบบเว็บไซต์การออกแบบเว็บไซต์
การออกแบบเว็บไซต์Ta'May Pimkanok
 
07 ใบเนื้อหา หน่วยที่ 8
07 ใบเนื้อหา หน่วยที่ 807 ใบเนื้อหา หน่วยที่ 8
07 ใบเนื้อหา หน่วยที่ 8Natchanon Srinuan
 
คู่มือ Power point
คู่มือ Power pointคู่มือ Power point
คู่มือ Power pointkeeree samerpark
 
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์แบบเสนอโครงร่างโครงงานคอมพิวเตอร์
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์Supaporn Pakdeemee
 
เทคนิคการสืบค้นข้อมูลทางอินเทอร์เน็ต
เทคนิคการสืบค้นข้อมูลทางอินเทอร์เน็ตเทคนิคการสืบค้นข้อมูลทางอินเทอร์เน็ต
เทคนิคการสืบค้นข้อมูลทางอินเทอร์เน็ตI'June Jindawong
 
ประมวลการสอน เว็บเพจ
ประมวลการสอน เว็บเพจประมวลการสอน เว็บเพจ
ประมวลการสอน เว็บเพจSchool
 
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Wordคู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Wordjompon
 
คู่มือประกอบการสร้างเว็บไซต์Pdf
คู่มือประกอบการสร้างเว็บไซต์Pdfคู่มือประกอบการสร้างเว็บไซต์Pdf
คู่มือประกอบการสร้างเว็บไซต์Pdfjompon
 
คู่มือการทำเวปไซต์เรื่อง ฮาร์แวร์
คู่มือการทำเวปไซต์เรื่อง  ฮาร์แวร์คู่มือการทำเวปไซต์เรื่อง  ฮาร์แวร์
คู่มือการทำเวปไซต์เรื่อง ฮาร์แวร์sommat
 
Portal manual (Original)
Portal manual (Original)Portal manual (Original)
Portal manual (Original)UsableLabs
 
12 หลักการออกแบบเว็บ
12 หลักการออกแบบเว็บ12 หลักการออกแบบเว็บ
12 หลักการออกแบบเว็บteaw-sirinapa
 
07 ใบเนื้อหา หน่วยที่ 3
07 ใบเนื้อหา หน่วยที่ 307 ใบเนื้อหา หน่วยที่ 3
07 ใบเนื้อหา หน่วยที่ 3Natchanon Srinuan
 
คู่มือ Power point
คู่มือ Power pointคู่มือ Power point
คู่มือ Power pointNooCake Prommali
 

What's hot (18)

ใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtmlใบความรู้ที่ 2.3 รู้จักภาษาhtml
ใบความรู้ที่ 2.3 รู้จักภาษาhtml
 
ใบความรู้ที่ 2.4 ขั้นตอนการสร้างเว็บhtml
ใบความรู้ที่ 2.4 ขั้นตอนการสร้างเว็บhtmlใบความรู้ที่ 2.4 ขั้นตอนการสร้างเว็บhtml
ใบความรู้ที่ 2.4 ขั้นตอนการสร้างเว็บhtml
 
การสืบค้นข้อมูลทางอินเตอร์เน็ต
การสืบค้นข้อมูลทางอินเตอร์เน็ตการสืบค้นข้อมูลทางอินเตอร์เน็ต
การสืบค้นข้อมูลทางอินเตอร์เน็ต
 
การออกแบบเว็บไซต์
การออกแบบเว็บไซต์การออกแบบเว็บไซต์
การออกแบบเว็บไซต์
 
07 ใบเนื้อหา หน่วยที่ 8
07 ใบเนื้อหา หน่วยที่ 807 ใบเนื้อหา หน่วยที่ 8
07 ใบเนื้อหา หน่วยที่ 8
 
คู่มือ Power point
คู่มือ Power pointคู่มือ Power point
คู่มือ Power point
 
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์แบบเสนอโครงร่างโครงงานคอมพิวเตอร์
แบบเสนอโครงร่างโครงงานคอมพิวเตอร์
 
เทคนิคการสืบค้นข้อมูลทางอินเทอร์เน็ต
เทคนิคการสืบค้นข้อมูลทางอินเทอร์เน็ตเทคนิคการสืบค้นข้อมูลทางอินเทอร์เน็ต
เทคนิคการสืบค้นข้อมูลทางอินเทอร์เน็ต
 
Unit2
Unit2Unit2
Unit2
 
ประมวลการสอน เว็บเพจ
ประมวลการสอน เว็บเพจประมวลการสอน เว็บเพจ
ประมวลการสอน เว็บเพจ
 
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Wordคู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
 
คู่มือประกอบการสร้างเว็บไซต์Pdf
คู่มือประกอบการสร้างเว็บไซต์Pdfคู่มือประกอบการสร้างเว็บไซต์Pdf
คู่มือประกอบการสร้างเว็บไซต์Pdf
 
คู่มือการทำเวปไซต์เรื่อง ฮาร์แวร์
คู่มือการทำเวปไซต์เรื่อง  ฮาร์แวร์คู่มือการทำเวปไซต์เรื่อง  ฮาร์แวร์
คู่มือการทำเวปไซต์เรื่อง ฮาร์แวร์
 
Portal manual (Original)
Portal manual (Original)Portal manual (Original)
Portal manual (Original)
 
ใบความที่ 3
ใบความที่ 3ใบความที่ 3
ใบความที่ 3
 
12 หลักการออกแบบเว็บ
12 หลักการออกแบบเว็บ12 หลักการออกแบบเว็บ
12 หลักการออกแบบเว็บ
 
07 ใบเนื้อหา หน่วยที่ 3
07 ใบเนื้อหา หน่วยที่ 307 ใบเนื้อหา หน่วยที่ 3
07 ใบเนื้อหา หน่วยที่ 3
 
คู่มือ Power point
คู่มือ Power pointคู่มือ Power point
คู่มือ Power point
 

Similar to หน่วยที่ 02

หนังสือเล่มเล็ก4
หนังสือเล่มเล็ก4หนังสือเล่มเล็ก4
หนังสือเล่มเล็ก4Magicianslove Beer
 
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Wordคู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Wordjompon
 
การบริการสารสนเทศบนเว็บด้วย OSS : Joomla Workshop
การบริการสารสนเทศบนเว็บด้วย OSS : Joomla Workshopการบริการสารสนเทศบนเว็บด้วย OSS : Joomla Workshop
การบริการสารสนเทศบนเว็บด้วย OSS : Joomla WorkshopSatapon Yosakonkun
 
อินทุอร
อินทุอรอินทุอร
อินทุอรMiw Inthuorn
 
อินทุอร
อินทุอรอินทุอร
อินทุอรMiw Inthuorn
 
Presentation wordpress
Presentation wordpressPresentation wordpress
Presentation wordpressJatupon Panjoi
 
โครงงาน ฮาร์ดดิสก์
โครงงาน ฮาร์ดดิสก์โครงงาน ฮาร์ดดิสก์
โครงงาน ฮาร์ดดิสก์teerarat55
 
Course Syllabus การสร้าง Home page
Course Syllabus การสร้าง Home pageCourse Syllabus การสร้าง Home page
Course Syllabus การสร้าง Home pageKhon Kaen University
 
Chapter4
Chapter4Chapter4
Chapter4aumtall
 
นุ๊ก
นุ๊กนุ๊ก
นุ๊กsirinet
 
หมวย
หมวยหมวย
หมวยsirinet
 
ดรีม
ดรีมดรีม
ดรีมsirinet
 
หมวย
หมวยหมวย
หมวยsirinet
 
หวิว
หวิวหวิว
หวิวViewMik
 
รออกแบบเว็บไซต์
รออกแบบเว็บไซต์รออกแบบเว็บไซต์
รออกแบบเว็บไซต์sirinet
 

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

หนังสือเล่มเล็ก4
หนังสือเล่มเล็ก4หนังสือเล่มเล็ก4
หนังสือเล่มเล็ก4
 
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Wordคู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
 
การบริการสารสนเทศบนเว็บด้วย OSS : Joomla Workshop
การบริการสารสนเทศบนเว็บด้วย OSS : Joomla Workshopการบริการสารสนเทศบนเว็บด้วย OSS : Joomla Workshop
การบริการสารสนเทศบนเว็บด้วย OSS : Joomla Workshop
 
Yuu
YuuYuu
Yuu
 
Ten
TenTen
Ten
 
New
NewNew
New
 
อินทุอร
อินทุอรอินทุอร
อินทุอร
 
อินทุอร
อินทุอรอินทุอร
อินทุอร
 
Presentation wordpress
Presentation wordpressPresentation wordpress
Presentation wordpress
 
โครงงาน ฮาร์ดดิสก์
โครงงาน ฮาร์ดดิสก์โครงงาน ฮาร์ดดิสก์
โครงงาน ฮาร์ดดิสก์
 
Course Syllabus การสร้าง Home page
Course Syllabus การสร้าง Home pageCourse Syllabus การสร้าง Home page
Course Syllabus การสร้าง Home page
 
Chapter4
Chapter4Chapter4
Chapter4
 
นุ๊ก
นุ๊กนุ๊ก
นุ๊ก
 
โบ
โบโบ
โบ
 
Best
BestBest
Best
 
หมวย
หมวยหมวย
หมวย
 
ดรีม
ดรีมดรีม
ดรีม
 
หมวย
หมวยหมวย
หมวย
 
หวิว
หวิวหวิว
หวิว
 
รออกแบบเว็บไซต์
รออกแบบเว็บไซต์รออกแบบเว็บไซต์
รออกแบบเว็บไซต์
 

หน่วยที่ 02

  • 1. แนวคิด ก่อนการทาการสร้างเว็บเพจ ผู้ที่ทาการสร้างจะต้องทราบถึงหลักการออกแบบ ขั้นตอน และ วิธีการในการพัฒนา ลักษณะโครงสร้างโดยทั่วไปของเว็บเพจ การจัดเตรียมพื้นที่และข้อมูล ประกอบสาหรับ การสร้างเว็บเพจ และวิธีการในการสร้างเอกสารเว็บ ซึ่งในหน่วยนี้จะกล่าวถึงหัวข้อ ดังกล่าว สาระการเรียนรู้ 1. 2. 3. 4. 5. 6. หลักการออกแบบเว็บเพจ ขั้นตอนการพัฒนาเว็บเพจ ลักษณะโครงสร้างของเว็บเพจ การกาหนดโฟลเดอร์สาหรับเก็บข้อมูล การจัดเตรียมภาพที่เกี่ยวข้องกับเนื้อหาเว็บ การสร้างเอกสารเว็บ ผลการเรียนรูที่คาดหวัง 1. 2. 3. 4. 5. 6. สามารถบอกหลักการออกแบบเว็บเพจ สามารถบอกขั้นตอนการพัฒนาเว็บเพจ สามารถบอกลักษณะโครงสร้างของเว็บเพจ อธิบายวิธีการกาหนดโฟลเดอร์สาหรับจัดเก็บข้อมูลได้ อธิบายวิธีการจัดเตรียมภาพที่เกี่ยวข้องกับเนื้อหาเว็บได้ สามารถบอกวิธีการสร้างเอกสารเว็บ หลักการออกแบบเว็บเพจ
  • 2. วิธีการออกแบบและพัฒนาเว็บเพจนั้นสามารถทาได้หลายรูปแบบ ขึ้นอยู่กับล้กษณะของข้อมูลที่จะ ใช้นาเสนอในเอกสารเว็บ ความพึงพอใจของผู้ที่ทาการสร้าง ตลอดจนกลุ่มเป้าหมายหลักที่ต้องการให้เป็นผู้อ่าน ข้อมูลในเอกสารเว็บเหล่านั้น ตัวอย่างเช่น หากกลุ่มเป้าหมายเป็นเด็ก วัยรุ่น ควรนาเสนอข้อมูลเกี่ยวกับ ความสนใจของกลุ่มวัยรุ่น เช่น ข้อมูลทางด้านบันเทิง และควรออกแบบให้มีลูกเล่นที่หลากหลาย มีสีสันสดใส เป็นที่นาสนใจสาหรับวัยรุ่น เป็นต้น หากเป็นเว็บเพจที่เกี่ยวข้องทางด้านวิชาการ จะให้ความสาคัญกับเนื้อหา ที่ข้อความมากกว่าสีสันที่ใช้ในเว็บเพจ การออกแบบและพัฒนาเว็บเพจนั้นควรมีการวางแผนก่อนการพัฒนาเสมอ เนื่องจากระบบ คอมพิวเตอร์ที่ใช้งานอยู่บนระบบเครือข่ายอินเทอร์เน็ตนั้นเป็นระบบที่หลากหลาย ระบบปฎิบัตการ ิ (Operating System: OS) ที่ใช้งานในระบบเครือข่ายก็หลากหลาย ตัวอย่างเช่น หากขณะที่สร้างเอกสาร เว็บนั้น ผู้ที่ทาการพัฒนาเว็บใช้คอมพิวเตอร์ที่มีระบบปฏิบัติการที่เป็น โปรแกรมไมโครซอฟต์วินโดวส์ (Microsoft Windows) รูปที่ 2.1 แสดงลั ก ษณะความแตกต่า งของประเภทเครื่ องคอมพิว เตอร์ และระบบปฏิบ้ ติ การที่ใช้ง านบนระบบเครื อข่า ยอิ นเทอร์เน็ต หลังจากที่ทาการพัฒนาเสร็จแล้วต้องทาการโอนย้ายเอกสารเว็บเหล่านั้นไปเก็บไว้บนเครื่อง คอมพิวเตอร์แม่ข่าย ซึ่งส่วนใหญ่แล้วจะเป็นระบบปฏิบัติการยูนิกซ์ (Unix) หรือบางครั้งอาจเป็น ระบบปฏิบัติการที่เป็นวินโดวส์ และเอกสารเว็บที่ถูกนาไปเก็บบนเครื่องคอมพิวเตอร์แม่ข่ายนี้ อาจถูกเรียกใช้ งานเอกสารจากคอมพิวเตอร์ที่ใช้ระบบปฏิบัติการที่ต่างกันออกไป จะเห็นได้ว่า เอกสารเว็บนั้นจะต้องเกี่ยวข้อง กับระบบปฏิบัติการหลายระบบดังนั้นในการพัฒนาเว็บเพจนั้นจะต้องคานึงถึงสิ่งเหล่านี้ด้วย ผู้ที่ทาการสร้างเอกสารเว็บนั้น ควรจะต้องศึกษาถึงข้อกาหนดพื้นฐานที่ควรทราบก่อน เช่น การกาหนดชื่อของโฟลเดอร์ ประเภทของแฟ้มข้อมูลที่เป็นเอกสารเว็บ ประเภทของแฟ้มข้อมูล รูปภาพที่ สามารถแสดงผลได้ ตลอดจนแฟ้มข้อมูลประเภทอื่นสามารถนามาใช้ประกอบในการทาเว็บเพจ
  • 3. ในระบบปฏิบตการยูนิกซ์หรือระบบปฏิบัติการลินุกซ์ ลักษณะการตั้งชื่อแฟ้มข้อมูลนั้นจะเป็นแบบให้ ความสาคัญกับลักษณะของตัวอักษร (Case-Sensitive) กล่าวคือตัวอักษรพิมพ์ใหญ่ และตัวอักษรพิมพ์เล็ก จะถือว่าเป็นตัวอักษรคนละตัวกันซึ่งต่างจากระบบปฏิบัติการวินโดวส์ (Windows) หรือระบบปฏิบัติการดอส (DOS) เช่น แฟ้มข้อมูลที่ชื่อว่า "index.html" กับ "INDEX.HTML" ในระบบปฏิบัติการยูนิกซ์จะถือว่าเป็นชื่อ ของแฟ้มคนละแฟ้มข้อมูลกัน แต่ถ้าเป็นในระบบปฏิบัติการวินโดวส์หรือดอส จะถือว่าเป็นแฟ้มข้อมูลเดียวกัน ดังนั้นหากผู้ที่สร้างเว็บเพจใช้เครื่องคอมพิวเตอร์ที่มีระบบปฏิบัติการวินโดวส์ในการสร้าง เอกสารเว็บ และกาหนดชื่อแฟ้มข้อมูลเป็น "NextPage.html" เมื่อป้อนคาสั่งสาหรับการเชื่อมโยง แฟ้มข้อมูลโดยให้ เชื่อมโยงไปยังแฟ้มข้อมูลผ่านแป้นพิมพ์เป็น "nextpage.html" ขณะที่ทาการ ทดสอบบนเครื่องคอมพิวเตอร์ที่ ใช้ในการสร้างเอกสารเว็บนั้นสามารถทางานได้โดยไม่มีข้อบกพร่อง แต่เมื่อทาการโอนถ่ายเอกสารเว็บนึ้ไปยัง เครื่องคอมพิวเตอร์แม่ข่ายที่เป็นระบบปฏิบัติการยูนิกซ์ จะเกิดปัญหาในการเรียกดูเอกสารไม่ได้ เพราะบน ระบบปฏิบัติการของเครื่องคอมพิวเตอร์แม่ข่าย จะถือว่าเป็นแฟ้มข้อมลคนละแฟ้มข้อมูลกัน สร้างแฟ้มข้อมูล Index.html ไม่เท่ากับ Index.html บนระบบปฏิบัติการ UNIX รูปที่ 2.2 แสดงความแตกต่ างระหว่างชื่ อของแฟัม ข้ อมู ล ในระบบปฏิบ้ติการที่ต่ างกัน ขั้นตอนการพัฒนาเว็บเพจ ลาดับขั้นตอนสาหรับการพัฒนาเว็บเพจ สามารถจาแนกเป็นลาดับขั้นตอนได้ดังนี้ 1. วางแผนการพัฒนาเว็บเพจ 2. กาหนดโฟลเดอร์ที่ใช้สาหรับเก็บแฟ้มข้อมูลที่เกี่ยวกับเว็บเพจ 3. จัดหาภาพที่เกี่ยวข้องกับเนื้อหาและจัดเก็บไว้ในโฟลเดอร์ได้กาหนดไว้ 4. สร้างเอกสารเว็บโดยกาหนดชื่อของแฟ้มข้อมูลเอกสารเว็บ ให้เป็นไปตามข้อกาหนดและจัดเก็บไว้ ในโฟลเดอร์ที่ได้กาหนดไว้ 5. ตรวจสอบผลเอกสารเว็บผ่านทางโปรแกรมเว็บเบราว์เซอร์ 6. นาข้อมูลขื้นไปเก็บไว้บนเครื่องคอมพิวเตอร์แม่ข่าย (Server) และทาการตรวจสอบ ผลการเรียกดู เอกสารเว็บที่อยู่บนเครื่องคอมพิวเตอร์แม่ข่าย รายละเอียดของขั้นตอนการพัฒนาเว็บเพจมีหลายขั้นตอนที่ต้องขึ้นอยู่กับผู้ดูแลระบบ
  • 4. (Web System Administrator) เป็นผู้กาหนดวิธีการ ดังนั้นก่อนดาเนินการสร้างเว็บเพจควรติดต่อ ขอข้อมล เหล่านี้จากผดแลระบบก่อน ลักษณะโครงสร้างของเว็บเพจ ลักษณะโครงสร้างของเว็บเพจโดยทั่วไปแล้ว สามารถแบ่งได้ 3 ลักษณะดังนี้คือ 1. แบบลาดับชั้น เปีนการจัดแสดงหน้าเอกสารเว็บในลักษณะเรียงตามลาดับเปีนกิ่งก้าน แตกแขนง ต่อเนื่อง เปรียบได้กับต้นไม้กลับหัว รูปที่ 2.3 แสดงโครงสร้ างของเว็บ เพจแบบลาดับ ขั้น 2. แบบเชิงเส้น เป็นการจัดแสดงหน้าเอกสารเว็บ โดยเรียงต่อเนื่องกันไปในทิศทางเดียวไม่มีการ แตกออกเป็นกิ่งก้านสาขา รูปที่ 2.4 แสดงโครงสร้ างของเว็บ เพจแบบเชิงเส้ น 3. แบบผสม เป็นการจัดเรียงหน้าของเอกสารเว็บโดยผสมผสานระหว่างแบบลาดับชั้น และแบบเชิง เส้น ทั้งนี้ก็ขึ้นอย่กับผ้ที่ทาการออกแบบ ว่าจะจัดเรียงลาดับของรปแบบเอกสารเว็บใน
  • 5. รูปที่ 2.5 แสดงโครงสร้างของเว็บเพจแบบผสม การวางแผนพัฒนาเว็บเพจ การวางแผนสาหรับการพัฒนาเว็บเพจนั้น ถือว่าเป็นขั้นตอนสาคัญขั้นตอนหนึ่ง เนื่องจากเอกสาร เว็บที่สร้างขึ้นนั้นจะมีจานวนเพิ่มขึ้นเรื่อยๆ และจะมีจุดเชื่อม (Link) เป็นจานวนมาก หากไม่มีการวางแผนไว้ ก่อนจะทาให้การปรับปรุงและพัฒนาในภายหลังเกิดปัญหาขึ้นได้ง่าย ตัวอย่างเช่น แฟ้มข้อมูลมีจานวนมากทา ให้ไม่สามารถจดจาชื่อของแฟ้มข้อมูลที่เคยสร้างไว้แล้วได้ ซึ่งจะส่งผลให้การทาการเชื่อมโยงเอกสารเกิด ปัญหาขึ้น เพื่อป้องกันปัญหาดังกล่าวนี้ควรมีการวางแผน และออกแบบเอกสารเว็บบนกระดาษ และทาการ กาหนดชื่อแฟ้มข้อมูลของแต่ละเอกสารเว็บให้เรียบร้อย จะทาให้ผู้ที่ทาการสร้างเว็บเพจสามารถมองเห็นภาพ การไหลของข้อมูล (Data Flow) ภายในเว็บเพจได้ชัดเจน และสามารถทาการพิจารณาต่อได้ว่าเอกสารเว็บ แต่ละแฟ้มข้อมูลนั้น มีความสัมพันธ์กับเอกสารอื่นอย่างไร และสัมพันธ์กับแฟ้มข้อมลเอกสารเว็บใดบ้าง ตัวอย่าง ต้องการสร้างเว็บเพจเพื่อนาเสนอความรู้เกี่ยวกับคอมพิวเตอร์เบื้องต้น อาจสามารถทาการออกแบบ ได้ดังนี้ เมนู (หน้าหลัก) Index.html ความเป็นมาชอง ระบบคอมพิวเตอร์ history.html ระบบฮาร์ดแวร์ hardware.html ระบบซอฟแวร์ software.html บุคลากรด้าน คอมพิวเตอร์ ppl.html อุปกรณ์อินพุต อุปกรณ์เอ้าพุต ระบบปฏิบัตการ ิ โปรแกรมประบุกต์
  • 6. รูปที่ 2.6 แสดงโครงสร้ างของเว็บ เพจเพื่อ นาเสนอความรู้เกี่ ยวกับ คอมพิว เตอร์ การกาหนดชื่อและนามสกุลของแฟ้มข้อมูลเอกสารเว็บ ข้อกาหนดสาหรับการตั้งชื่อของแฟ้มข้อมูลนั้น นอกจากจะขึ้นอยู่กับความสามารถของ ระบบปฏิบัติการแล้ว ยังต้องขึ้นอยู่กับข้อกาหนดของผู้ดูแลระบบของเครื่องแม่ข่ายที่ให้บริการเว็บเพจ (Web Administrator) ด้วย ดังนั้นผู้ที่สร้างเว็บเพจจึงต้องสอบถามกฎการตั้งชื่อเหล่านี้โดยละเอียด โดยทั่วไป แล้วมีหลักการดังนี้ 1. ควรใช้ตัวอักษร a - z หรือตัวเลข 0 - 9 ในการตั้งชื่อไม่ควรใช้อักขระพิเศษ 2. ตัวอักษร a - z ที่ใช้ในการตั้งชื่อ ควรเป็นตัวอักษรพิมพ์เล็ก 3. ไม่ควรเว้นวรรคช่องว่างภายในชื่อ 4. ห้ามใช้อักขระพิเศษในการตั้งชื่อ ยกเว้น Underscore (ขีดล่าง) หรือ Dash (ขีดกลาง) 5. ชื่อแฟ้มข้อมูลแรกของเว็บเพจ มักจะใช้ชื่อ index.html หรือ index.htm 6. นามสกุลของแฟ้มข้อมูลเอกสารเว็บ มี 2 รูปแบบ คือ .htm และ .html ส่วนแฟ้มข้อมูลประเภท อื่น ผู้ที่ทาการสร้างเว็บเพจควรสอบถามจากผู้ดูแลเครื่องคอมพิวเตอร์แม่ข่ายว่า เครื่องคอมพิวเตอร์แม่ข่าย (Server) นี้ สามารถใช้งานเก็บเอกสารที่มีนามสกุลของ แฟ้มข้อมูลเป็นรปแบบใดได้อีก เช่น .php, .asp เป็นต้น นอกจากการวางโครงร่างของเว็บเพจข้างต้นแล้ว สิ่งที่ควรจะทาการพิจารณาต่อไปคือ รูปแบบการแสดงผลของหน้าเว็บเพจ หมายถึงลักษณะการวางเนื้อหา และรายการเลือกต่างๆ บนหน้าเว็บ ซึ่งมีไต้หลากหลายรูปแบบเช่น การแสดงผลเนื้อหาทั้งหมดรวมในหน้าเดียวกัน ซึ่งการแสดงผลแบบนื้จะรวมเอารายการเลือก และเนื้อหาไว้ในหน้าเดียวกัน การแสดงผลด้วยตาราง การแสดงผลรูปแบบนี้จะแยกระหว่างรายการเลือกหรือเมนู (Menu) ไว้ ด้านหนึ่งของตาราง และเนื้อหาข้อความจะอยู่อีกด้านหนึ่ง
  • 7. การแสดงผลด้วยเฟรม การแสดงผลรูปแบบนนี้คล้ายกับการแสดงผลแบบตาราง แต่รายการ เลือกหรือเมนูนั้นจะถูกตรึงกับที่ จะไม่มีการเคลื่อนย้ายเมื่อทาการเลื่อนจอภาพหรือเลือกเนื้อหาที่ต้องการ แสดงผล แต่จะทางานไต้เฉพาะโปรแกรมเว็บเบราว์เซอร์รุ่นใหม่ ข้อความที่ใช้สาหรับแสดงห้วเรื่องของเว็บเพจ หมายถึงข้อความที่จะปรากฏในส่วนหัวของ หน้าต่าง เอกสารเว็บ (Title Bar) โดยข้อความส่วนนี้จะถูกนาไปใช้เป็นคาสาคัญ (Keyword) ที่ใช้ในการ ค้นหาเว็บเพจจากบุคคลอื่น ข้อความที่นามากาหนดเป็นหัวเรื่องของเว็บเพจนั้น ควรมีลักษณะดังต่อไปนี้ สามารถเป็นข้อความภาษาไทยหรืออังกฤษ มีความยาวไม่เกิน 64 ตัวอักษร เป็นข้อความที่สื่อความหมายที่กระชับเกี่ยวกับเนี้อหาในหน้าเว็บนั้น ส่วนหัวของหน้าต่างเอกสารเว็บของสถาบันเทคโนโลยีราชมงคล รูปที่ 2.7 แสดงข้ อความในส่ ว นหั ว ของหน้าต่างเอกสารเว็บ ลักษณะของหน้าเว็บ หมายถึงการกาหนดสีของพนของเอกสารเว็บ (Background Color) หรือ รูปภาพที่จะนามาใช้เปีนพื้นหลังของเอกสารเว็บ (Background Image) สีของตัวอักษรปกติ (Normal Text) สี ของตัวอักษรที่ใช้เป็นจุดเชื่อมต่อ (Link Text) เพื่อให้เอกสารเว็บแต่ละหน้ามีการแสดงผลที่สวยงาม และดึงดูด ความสนใจของผู้ใช้งาน การกาหนดโฟลเดอร์สาหรับเก็บข้อมูล การกาหนดโฟลเดอร์ก่อนที่จะทาการสร้างชุดเอกสารเว็บเพจนั้น เป็นลาดับขั้นตอนที่ควรกระทา ทุกครั้ง เพื่อให้เอกสารเว็บแต่ละชุดนั้นมีระบบการจัดเก็บที่เป็นระบบสามารถค้นหาเรียกใช้งานและแก้ไข ข้อมูลภายหลังได้โดยสะดวก โดยที่ในการสร้างชุดเอกสารเว็บแต่ละชุดนั้นจะ ประกอบไปด้วยแฟ้มข้อมูล จานวนมาก ทั้งเอกสารเอชทีเอ็มแอล แฟ้มข้อมูลรูปภาพ เสียง ภาพ เคลื่อนไหว และอื่นๆ ที่เกี่ยวข้องกับ เว็บเพจ ดังนั้นแฟ้มข้อมูลทั้งหมดนี้ควรจัดเก็บไว้อย่างเป็นหมวดหมู่ โดยอาจสร้างเป็นโฟลเดอร์ย่อยเพื่อทาการ แยกกลุ่มแฟ้มข้อมูล แต่จะต้องสร้างภายใต้โฟลเดอร์หลักของเว็บเพจทั้งหมด ไม่ควรแยกไว้คนละตาแหน่งกัน เพราะจะทาให้การจัดการเกี่ยวกับ เว็บเพจนั้นมีปัญหายุ่งยากได้ โดยทาการสร้างโฟลเดอร์ 1 โฟลเดอร์ต่อ เว็บไซต์ 1 เว็บไซต์ ตัวอย่าง การสร้างโฟลเดอร์ชื่อ WEB-SITE ไว้ที่ desktop ของ Windows
  • 8. 1. ที่หน้าจอของคอมพิวเตอร์จะแสดง Desktop ของ Windows 2. นาเมาส์ไปชี้ตรงตาแหน่งพื้นที่ว่างบน Desktop จากนั้นให้กดปุ่มเมาส์ทางด้านขวาเพื่อแสดงเมนูลัด 3. ทาการเลือกคาสั่ง New จากนั้นเลือก Folder รู ปที่ 2.8 แสดงขั้น ตอนการสร้างโฟลเดอร์สาหรับเก็บ ข้ อมลเว็ บเพจ 1. ปรากฏไอคอนของโฟลเดอร์ว่าง 2. ให้ทาการพิมพ์ชื่อของโฟลเดอร์ ในที่นี้คือ WEB-SITE จากนั้นทาการกดปุ่ม ENTER จะปรากฏ โฟลเดอร์ชื่อ WEB-SITE การจัดเตรียมภาพที่เกียวฟ้องกับเนื้อหาเว็บ ่ เอกสารเว็บโดยทั่วไปแล้วจะต้องเกี่ยวข้องกับรูปภาพโดยตรง เพื่อใช้ในการสื่อความหมายกับ ผู้ใช้งานได้ชัดเจนมากกว่าการสื่อความหมายด้วยตัวอักษรเพียงอย่างเดียว อีกทั้งเป็นการดึงดูดความสนใจของ ผู้ใช้งาน ดังนั้นเมื่อทาการสร้างรูปภาพหรือจัดหารูปภาพเป็นที่เรียบร้อยแล้ว ควรที่จะทาการคัดลอกมาเก็บไว้ ในโฟลเดอร์ที่ได้จัดเตรียมไว้ เพือให้สะดวกในการเรียกใช้งานรูปภาพ นั้นและสะดวกต่อการบริหารเว็บไซต์ใน ่ อนาคต แฟ้มข้อมูลรูปภาพที่นามาใช้ในการทาเว็บเพจนั้น ปัจจุบันนิยมใช้อยู่ 2 รูปแบบคือ - ไฟล์ฟอร์แมต JPEG (Joint Photographer's Experts Group File) - ไฟล์ฟอร์แมต GIF (Graphics Interlace File) การจัดหารูปภาพที่นามาใช้ในการจัดทาเว็บเพจนั้น สามารถจัดเตรียมได้หลายวิธี เช่น - สร้างรูปภาพโดยโปรแกรมกราฟิกต่างๆ เช่น PhotoShop, Corel Draw เป็นต้น ในการ สร้าง แฟ้มข้อมูลรูปภาพ ซึ่งจะได้ภาพที่ตรงกับความต้องการ แต่ใช้เวลาในการสร้าง ภาพมากขึ้น - เลือกรูปภาพจากชุดภาพสาเร็จรูป ที่มีการวางจาหน่ายในลักษณะคลังรูปภาพสาหรับ
  • 9. ทาเว็บเพจ (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)