หน่วยที่ 2 การวิเคราะห์และออกแบบโครงสร้างเว็บไซต์

หนว ยที่ 2 การวเิ คราะหแ ละออกแบบโครงสรา งเว็บไซต                   

การออกแบบเว็บไซต      การออกแบบโครงสรางเวบ็ ไซต (Site Structure Design)    คอื   การจดั หมวดหม ู และลาํ ดบั ของเนอื้ หา แลว จดั ทาํ เปนแผนผงั โครงสรา งเวบ็ ไซต  ซ่งึ จะ ทําใหเรารวู า มีเน้อื หาอะไรบา งภายในเวบ็ ไซต และแตละหนา เว็บเพจนั้นมีการเช่อื มโยงกนั อยา งไร    โครงสรา งเวบ็ ไซตที่ดีจะชวยใหผูชมไมสบั สนและคน หาขอมลู ทตี่ องการไดอยา งรวดเรว็   ไม ควรเปน ลําดบั ท่ลี ึกหลายช้นั เกินไป เพราะผใู ชจะเบื่อเสียกอน กวา จะคน หาเจอหนาท่ีตอ งการ    1. รวบรวมขอมลู เนือ้ หาทีจ่ ะนํามาสรางเว็บ แลว นาํ มาจดั หมวดหมู และลําดบั เนื้อหากอนหลงั (ตดั สวนท่ีไมจาํ เปนออก) แลววางโครงสรา งเวบ็ ไซตใ นภาพรวมท้งั หมด  2. จัดทําแผนผังโครงสรางการเช่ือมโยงไฟล เปนแผนผงั ที่แสดงโครงสรา งขอมูล  ลําดบั ชั้น และการเชอื่ มโยงสวนตางๆ อยางชัดเจน   3. ออกแบบหนา แรกของเว็บไซต หรอื ที่เรียกวา Home page     ข้นั ตอนการออกแบบเว็บไซต          ข้ันแรกออกแบบโครงสรา งเวบ็ ไซต   

ข​ น้ั ทส่ี องออกแบบการเช่ือมโยงไฟล  ขั้นทส่ี ามออกแบบหนา โฮมเพจ็ (Home Page)      

สวนประกอบของหนาเว็บเพจ แบง ออกเปน 3 สวนหลักๆ คือ     1. สว นหวั ของเวบ็ เพ็จ (Page Header)    เปน สว นทีอ่ ยูตอนบนสดุ ของหนา และเปนสวนท่สี ําคญั ทีส่ ุดของหนา เพราะเปน สว นท่ี ดงึ ดดู ผชู มใหติดตามเนอ้ื หาภายในเวบ็ ไซต    มักใสภาพกราฟฟกเพ่อื สรา งความประทบั ใจ สว นใหญประกอบดวย  -​ โลโก (Logo) เปน สง่ิ ทีเ่ ว็บไซตควรมี เปนตวั แทนของเวบ็ ไซตไ ดเปนอยางดี และยัง ทาํ ใหเ วบ็ นา เชอ่ื ถือ  ​ - ชื่อเวบ็ ไซต  -​ เมนูหลักหรือลิงค (Navigation Bar) เปนจุดเช่อื มโยงไปสูเนื้อหาของเวบ็ ไซต     2.สว นของเน้ือหา (Page Body)    เปน สว นทีอ่ ยตู อนกลางของหนา ใชแสดงขอมูลเนอื้ หาของเวบ็ ไซต ซง่ึ ประกอบดว ย ขอ ความ, ตารางขอมูล ภาพกราฟก วีดีโอ และอ่นื ๆ และอาจมเี มนหู ลกั หรอื เมนูเฉพาะกลุม วาง อยูใ นสวนนด้ี วย    สําหรับสวนเนอื้ หาควรแสดงใจความสําคญั ท่ีเปน หัวเรอ่ื งไวบนสุด ขอ มลู มคี วามกระชบั ใช รูปแบบตัวอักษรทอ่ี า นงา ย และจัด Layout ใหเหมาะสมและเปน ระเบียบ     3. สวนทา ยของหนา (Page Footer)    เปนสว นท่ีอยูดานลางสุดของหนา จะมหี รอื ไมมกี ็ได มกั วางระบบนาํ ทางทเ่ี ปน ลิงค ขอ ความงาย ๆ และอาจแสดงขอ มลู เพม่ิ เติมเกี่ยวกบั เนอ้ื หาภายในเว็บไซต เชน เจาของเวบ็ ไซต,   ขอ ความแสดงลขิ สทิ ธ,ิ์ วธิ กี ารตดิ ตอ กบั ผดู ูแลเว็บไซต, คาํ แนะนําการใชเ วบ็ ไซต เปนตน  โดยปกติสว นหวั และสวนทา ยมักแสดงเหมอื นกนั ในทุกหนาของเว็บเพจ                    

  สวนประกอบยอยอนื่ ๆ ที่จําเปน     1. Text เปนขอความปกติ โดยเราสามารถตกแตงใหส วยงามและมลี ูกเลน ตา งๆ ดังเชน โปรแกรมประมวลคาํ     2. Graphic ประกอบดว ยรูปภาพ ลายเสน ลายพื้น ตางๆ มากมาย    3. Multimedia ประกอบดวยรปู ภาพ ภาพเคล่อื นไหว และแฟม เสียง    4. Counter ใชน ับจํานวนผทู เ่ี ขามาเยี่ยมชมเวบ็ เพจของเรา    5. Cool Links ใชเช่อื มโยงไปยงั เว็บเพจของตนเองหรอื เว็บเพจของคนอ่ืน    6. Forms เปน แบบฟอรมทใี่ หผูเ ขา เย่ียมชม กรอกรายละเอียด แลวสง กลบั มายงั เว็บเพจ    7. Frames เปน การแบงจอภาพเปนสวนๆ แตล ะสวนกจ็ ะแสดงขอมลู ทแี่ ตกตา งกนั และ เปนอสิ ระจากกนั     8. Image Maps เปน รูปภาพขนาดใหญท ่กี าํ หนดสวนตางๆ บนรูป เพ่ือเชอื่ มโยงไปยงั เวบ็ เพจอืน่ ๆ    9. Java Applets เปน โปรแกรมสําเร็จรูปเลก็ ๆ ทีใ่ สล งในเวบ็ เพจ เพอ่ื ใหก ารใชงาน เว็บเพจมีประสทิ ธิภาพมากยง่ิ ขนึ้     นอกจากสวนประกอบดงั กลาวแลว องคป ระกอบที่นิยมใสไ วในเว็บเพจอีก 2 สวน ไดแ ก  สมดุ เย่ียม (guestbook) และเวบ็ บอรด (webboard)  ที่ชว ยใหเ ว็บเพจกลายเปน สอื่ ทมี่ ีปฏิสมั พันธร ะหวางผใู ชก บั ผูสรางและระหวางผใู ชด วยกนั เอง                             

ประเภทของไฟลร ูปภาพ    ไฟลรปู ภาพทใี่ ชอ ยูในปจจบุ นั น้ีมหี ลายประเภท แตไ มส ามารถนาํ มาใชก ับเวบ็ เพจไดทุก ประเภท ประเภทของไฟลรปู ภาพทน่ี ยิ มมาใชกับเวบ็ เพจมี 3 ประเภทคอื   1. ไฟลประเภท GIF (Graphics Interchange Format)    เปน ไฟลภ าพท่ีมีขนาดเล็ก คุณภาพต่ํา เนือ่ งจากถูกบบี อดั ขอมูลใหม ขี นาดเล็ก แสดงสไี ด  256 สี แตเ ปน ที่นิยมสาํ หรบั ผเู ขยี นเวบ็ เพจเปน อยางมากเน่อื งจากสามารถทําเปนภาพเคลอ่ื นไหว  (Animation) และกําหนดใหแสดงภาพแบบโปรงแสง มองทะลไุ ปดานหลังได ไฟลประเภทน้สี ว น ใหญจะเปน รูปวาด ภาพการตนู รูป icon, emotion, ปา ยโฆษณาแบนเนอร และภาพทไ่ี ม ตอ งการความละเอียดมากนัก  ตวั อยางภาพประเภท GIF                         

2​ . ไฟลประเภท JPEG หรอื JPG (Joint Photographics Expert Group)    เปนไฟลรปู ภาพทม่ี กี ารบบี อดั ขอมูลนอ ยกวา ไฟลป ระเภท GIF สามารถแสดงสไี ด 16.7  ลานสี ภาพที่ไดจะมีความคมชัดมาก ไฟลป ระเภทน้เี หมาะกับภาพทต่ี อ งการความละเอยี ดสงู เชน   ภาพถายจากกลองดจิ ติ อลหรือ ภาพทไี่ ดจ ากการสแกน ภาพทีแ่ สดงการไลเฉดสี เปนตน  ตัวอยางภาพประเภท JPEG หรอื JPG                              

3. ไฟลประเภท PNG (Portable Network Graphic)    เปน ไฟลภ าพทีน่ าํ มาใชแทนทไ่ี ฟลประเภท GIF เน่ืองจากสามารถแสดงภาพไดเ ร็วกวา แต ยงั ไมค อ ยแพรห ลายมากนกั เน่อื งจากไมส ามารถทาํ เปน ภาพเคลอ่ื นไหวได และมขี อ เสียท่ีไม สามารถใชกบั เว็บเบราเซอรรนุ เกา ได    PNG-8 เปนรูป แบบท่ีใชส ีไดเพียง 256 สี และมีคณุ สมบัตคลายกบั ไฟล GIF จึงเหมาะ สาํ หรับใชทําภาพที่มสี ีเรียบๆ เชน ภาพโลโก, การต นู สามารถกําหนดพ้ืนหลังใหโปรงแสงได  PNG-24 เปนรปู แบบทใี่ ชสีได 16.7 ลานสี เชน เดยี วกับไฟล JPG เหมาะสาํ หรบั ภาพถาย  ตวั อยางภาพประเภท PNG                                       

เทคนิคการออกแบบเวบ็ ให้ดูดี ความเรียบงา ย    ความเรียบงายหมายถงึ การใชจํานวน pixel ตามทตี่ องใชเ พอ่ื ใหส ่อื สารสิ่งท่ตี อ งการใหไ ด และในการสอ่ื สารน้ันก็ประกอบไปดวย ขอ มลู หลกั hard data และ เน้อื หาทซ่ี อนอยู soft  information  ตัวอยางของขอมลู   Hard data  ขอ มลู สาระ เนอ้ื หาสําคญั ทต่ี อ งการจะส่ือ เชน ขา ว ราคา สนิ คา ตารางเวลารถไฟ  Soft Information  ความรูสึก บรรยกาศของหนาเวบ็ เปรยี บเทียบไดก บั ความ รูส ึกเมื่อแรกพบของผชู มท่ีมีตอ เว็บวานา ไวใจแคไ หน จะ เหมาะสมกบั ผใู ชหรอื ไม       เนอื้ หาอยูก ่ึงกลาง    จากทเ่ี คยกลา วถงึ ไปเมื่อบทความกอนหนา นี้ evolution of css layout วา หนา เวบ็ ใน ปจ จุบนั เร่ิมถกู ออกแบบใหม ีเนื้อหาอยูกึง่ กลาง ตอนนเ้ี รากส็ รุปไดแลว วาการวางเน้ือหาไวตําแหนง กลางหนาเวบ็ น้นั เปน หลกั การออกแบบท่ีดขี องดีไซนยุค 2.0    ซ่ึงเหตุผลก็คือ การวางเนอื้ หาไวกง่ึ กลางหนา เวบ็ นั้น สามารถแสดงถึงความเรยี บงา ย และ ตรงไปตรงมาได และจากการทเ่ี ราใชจาํ นวน pixel อยางประหยัดทาํ ใหเ ราไมถ ูกกดดนั ใหย ดั เยยี ด เน้ือหาจํานวนมาก ไวใ นพน้ื ทเี่ ลก็ ๆ เราสามารถสอ่ื ไดมากกวา จากความเรียบงาย และเหตผุ ลเดยี ว ทเ่ี ราอาจจะไมเ ลือก ทีจ่ ะออกแบบเนอ้ื ใหอยกู ง่ึ กลางหนาเว็บ คือ กรณที ีเ่ ราตองการยดั เนื้อหาไวใ น หนา เวบ็ เยอะๆ อยา งเชน หนาเวบ็ ของ web application      

    นอ ยคอลัมน    เม่อื กอ นเราจะเห็นหลายๆ เว็บแบง เน้ือหาในหนาเวบ็ เปน 3-4 คอลัมน แตป จจุบนั สวนใหญจะใชแ ค 2 คอลมั น หรืออยางมากก็ 3 เขาขา ยย่งิ นอ ยยงิ่ ดี ซง่ึ เปน ผลพวงมาจากการท่จี ัด ใหห นา เว็บอยกู ึง่ กลางจอดว ย ทาํ ใหเราไมตอ งบรรจุเนอื้ หาใหเต็มหนา จอ และเราก็ไมจําเปน ตองใช คอลัมนจาํ นวนมากในการสือ่ สาร แคใ ชค อลัมนท จ่ี ําเปน ที่ไดเ ลือกและคัดสรรคม าแลว ทําใหเรียบ งายกวา ตรงไปตรงมา และส่ือสารไดม ีประสิทธภิ าพมากวา     แยกสว นหัวของหนาเวบ็ อยางชัดเจน    หมายถึงการทําใหสวนหัวของหนา เว็บซ่งึ หมายถึงสวนโลโกและเมนู โดดเดนขีน้ มา จากสว นอนื่ ๆ เทคนคิ นไ้ี มใชอะไรท่ีใหม มกี ารประยุกตใ ชม านานแลว เพราะเปนเทคนคิ ท่ดี ี แต ปจ จุบันมีการนาํ มาใชม ากขนึ้ เปน พิเศษ และไดมีการแบง สัดสวนอยา งขัดเจนมากขึ้น      การแบง สัดสวนหวั ของหนาเวบ็ ไวอยางชัดเจนน้ันดีตรงท่ี ไดแ บง สดั สว นใหแ นชดั วา สว นไหนคอื สวนเรม่ิ ของหนา เวบ็ ซ่งึ เปนการเนนหลกั การดที ่ตี องการแสดงเนือ้ หาอยางหนกั แนน   เรียบงา ยและตรงไปตรงมา และการแยกสว นหัวของหนาเวปนน้ั สามารถทาํ ไดหลายวธิ เี ชน ใชส ที ี่ โดดเดน แตกตางจากเนอ้ื หาท่ีเหลอื ดงั เชน ตวั อยา งขา งตน หรอื จะใชเสน ขีดแบง ดังตวั อยา งตอไปน้ี ก็ได  สวนตางๆของหนาเวบ็ ประกอบไปดวย    - เมน ู   - พืน้ หลงั     - เน้ือหา    - สว นอนื่ ๆ    - ลิงค     

การที่จะจดั กลุม แบง แยกสว นตางๆไดอ ยางชัดเจนทสี่ ดุ คือการเลนสี แตก ารใชชอ งวางก็สําคญั ไม แพกัน  ขอ ควรระวงั ของการเลนสคี ือ สีสรรคตางๆจะดงึ ดดู ความสนใจไปจากเนอื้ หาทส่ี ําคัญ ดงั น้ันการ วางเนอื้ หาลงบนผืนผาใบทข่ี าวสะอาดจะชว ยใหผ ชู มรูส ึกผอนคลายมากข้ึน     เมนูเรยี บงา ย      เมนูหลักของหนา เว็บควรมีสกั ษณะโดดเดน สงั เกตเุ หน็ และมองออกไดง ายวาเปนเมนู โดย การใช font ท่หี นาใหญส ะอาดและชัดเจน รวมถงึ ลงิ คต างๆในเนือ้ หาควรดโู ดดเดนแตกตางจาก เน้ือหาท่ีเหลือ เพราะเราตองการใหผูเยีย่ มชมเวบ็ ไซดของเราบอกไดว า สวนไหนเปนเมนู เพ่อื ใหร บั ทราบถงึ ขอ มลู ตางๆวา  - ตอนนอ้ี ยูทจี่ ดุ ไหนแลว  - สามารถไปทไี่ หนไดอีก  - แสดงทางเลือกตา งๆใหช ดั เจน  เราสามารถทําใหเ มนดู โู ดดเดนไดโดย  - แยกสวนออกมาจากเนือ้ หา  - ทาํ ใหดูแตกตา ง โดยใชโทนสี และรูปรา ง  - ใชต วั ใหญแ ละหนา  - ใชภาษาทีช่ ัดเจนและเปน สากลเพ่อื ไมใหเ กดิ ความสบั สน    ส่งิ สาํ คัญคอื ตอ งทําใหล ิงคและเมนูดโู ดดเดนแตกตางจากเนือ้ หาสว นทไ่ี มไดเปนลิงค             

  โลโกตัวหนา    เพือ่ สรางภาพลกั ษณท ีช่ ดั เจนและหนักแนน  คณุ สมบตั ิของโลโก  - แสดงออกใหมองเห็นไดอ ยา งชัดเจน  - จาํ ไดง ายและแตกตาง  - เปน ตวั แทนภาพลักษณ  ตวั อักษรตวั ใหญ    การใชต วั อกั ษรตวั ใหญข น้ึ เมอ่ื เทยี บกับเว็บสไตลเกา ๆ การท่เี ราไมไดพ ยายามยดั เยยี ด เน้อื หาทาํ ใหเ รามีพนื้ ท่มี ากข้นึ และทําใหสามารถทจ่ี ะเลือกทําใหส่งิ สําคัญมขี นาดใหญกวาสงิ่ ทีไ่ ม สําคัญ ซง่ึ ตวั อยางการใชง านทผี่ า นมาไดแกก ารใชตวั อกั ษรใหญสาํ หรับหัวขอตา งๆ    การใชต ัวอักษรตัวใหญท าํ ใหเ ราสามารถเขาถึงกลุมเปา หมายไดม ากขึน้ ไมว า จะเปนคน สายตาสั้น ผอู า นทีอ่ านผานๆ ผคู นทน่ี งั่ หา งไกลจากจอ หรอื ผูใ ชจอ LCD ภายใตแสงแดด  ถงึ กระน้นั เรากค็ วรมีเหตผุ ลในการกาํ หนดวาสว นไหน ควรจะใชตัวอักษรตัวใหญ ใหใช เฉพาะกบั สว นที่สําคญั เพื่อกาํ หนดความโดดเดน หลงั จากทไี่ ดเ คลีย พน้ื ทีแ่ ลว ไมใ ชสกั แตว า ทําใหด ู ใหญไ ปหมด จะทําใหดูรก และไมไ ดผล ถาตองการจุเนือ้ หาทีม่ คี วามสําคญั พอๆกนั จํานวนมาก ควรคงขนาดตัวอักษรใหต ัวเล็กเทาๆกนั             

ตวั อกั ษรแนะนาํ ตวั หนา    เปน การสือ่ ขอความหลักของเนอื้ หา ซง่ึ สว นใหญจะเปนตวั อกั ษรกราฟฟก มากกวาตัวอักษร ธรรมดา เนื่องจากนักออกแบบตองการจะควบคุมสิ่งทห่ี นาเว็บตอ งการจะสือ่ อยา งชดั เเจน  ​ * แนะนําใหใชเ มอ่ื เปนสโลแกนหลกั เทา น้นั      สีสนั สดใส    สีสนั ทส่ี ดใสมคี ณุ สมบตั ใิ นการดึงดูดสายตา เราสามารถใชส ที ่ีตดั กันแบง สวนตางๆของหนา เวบ็ หรือกาํ หนดใหสว นท่ีสาํ คญั ดโู ดดเดน ขึ้นมาได แตกค็ วรระวังไมใ ชสสี ดเกินไปลอมรอบเนอ้ื หา  เพราะจะทําใหสายตาถกู ดึงหนีไปจากเน้อื หาหลัก ดังเชน ตัวอยา งตอ ไปน ี้ แลว กอ็ ยา ลมื วาการที่จุดนงึ ในหนาเว็บจะดึงดดู สายตาไดดว ยสสี ันทส่ี ดใส สใี นจุดอื่นๆก็ ควรจะออ นลงตามความสาํ คัญ มฉิ ะนัน้ จะทาํ ใหหนา เวบ็ ดูสบั สนและยงุ เหยงิ      มีลูกเลนบนพนื้ ผวิ     ลกู เลนตางๆบนพื้นผวิ ไมว าจะเปน การเลน แสงเงาหรือการไลสใี หเ ปน สามมิติเล็กนอย  ทําใหภาพกราฟฟคตา งๆดเู สรจ็ สมบูรณเ รยี บรอยและดูเสมือนวตั ถุจริง ไมวาจะเปน คารบอน ไฟเบอร หรือพลาสตกิ เงา    เทคนิคนีจ้ ะใชไดผ ลกต็ อ เม่อื เราทาํ ใหห นาเวบ็ มีสวนทเ่ี ปน สามมิติเพียงเลก็ นอยเพือ่ เนน ความโดดเดนเทาน้นั การทาํ ใหท กุ อยา งเปนสามมิติไปหมดนนั้ ไมใ ชส ง่ิ ท่ีดี เพราะจะลดความเดน ของสิ่งทเ่ี ราตอ งการที่จะเนน และทําใหโหลดชา            

ไลเฉดส ี   การไลเ ฉดสีสามารถ สรางมติ ิ และ กาํ หนดบรรยากาศของหนา เว็บได มีการนํามาใชใ หด ู เปนเงา หรือนาํ มาใชบนปุมเมน ู เงาสะทอน มหี ลกั ๆอยู 2 แบบคอื   - เงาสะทอ นบนพื้นผิวของตวั วัตถุเอง  - และเงาสะทอนบนพ้นื ผิวทีว่ ตั ถวุ างอย ู หรอื จะนาํ มาประยุกตใ ชใหวัตถมุ ีเงาสะทอนบนกลับไป บนพนื้ ผิวของตวั วตั ถุเอง กจ็ ะไดภา พกราฟฟคทน่ี าสนใจและสวยงาม     Icon นารัก    ไอคอนตา งๆ มบี ทบาทมากข้ึนในดไี ซน ปจจบุ ันเราเลอื กทีจ่ ะใชไ อคอนจาํ นวนนอยลง แต มคี วามหมายมากขน้ึ การใชไ อคอนจะมปี ระโยชนก ็ตอเมือ่ มองออกไดง า ย และสือ่ สารความหมาย ไดอ ยา งชดั เจน    ในอดตี ไดมกี ารใชไ อคอนมากเกินไป เชน ใชกบั ทุกเมนทู ม่ี ี ซ่ึงปจ จบุ นั เรานิยมท่จี ะใชต ัว อกั ษรท่ีส่ือความหมาย ไดอยา งชดั เจนกวา และไมทาํ ใหหนา เว็บรกไปดวยไอคอน เราจะนําไอคอน มาใชใ นจุดทส่ี ําคญั เทานั้น                     

สิ่งท่ีตอ งคาํ นงึ ถึงในการออกแบบโฮมเพจทด่ี  ี   การออกแบบเวบ็ ไซตควรคํานงึ ถงึ การใชง านเปน หลกั เพอ่ื กําหนดองคป ระกอบภายในเวบ็ ไมว าจะออกแบบอยา งไร ความรเู บื้องตน เกี่ยวกับการสรา งเว็บเพจเปน ส่ิงจําเปนซง่ึ ปจจบุ นั สามารถทาํ ไดง า ยโดยไมจ ําเปนตองพ่งึ พาความรทู างการเขียนโปรแกรมภาษา HTML อยางแตกอ น  เพยี งรูหลกั เบ้ืองตน บางเลก็ นองกเ็ พียงพอทจ่ี ะพัฒนาเว็บเพจไดดใี นระดับหนง่ึ แลว โปรแกรมทีจ่ ะ ชว ยพฒั นาเวบ็ มีอยูมากมายพอสมควรทีจ่ ะเลือกใชไ ดต ามความถนัดของผทู จี่ ะลองพฒั นาเว็บเพจ  ดังนนั้ เมอื่ จะลองเรมิ่ ตนสรา งเว็บเพจใหม คี วามเหมาสมควรคาํ นงึ ส่ิงตอไปน ้ี     ส่งิ ทตี่ อ งคาํ นงึ ถงึ ในการออกแบบโฮมเพจที่ด ี   1. ความแปลก ความแตกตาง (Contrast) คือแยกความแตกตางท่อี ยบู นจอภาพให เหน็ ชัดเจน เชนการใชตัวหนงั สอื เสน สี ขนาด ฯลฯ เพราะจะสามารถดึงดูดความสนใจไดด  ี 2. การยาํ้ ซาํ้ (Repetition) คอื แบบแผนหรอื สไตลข องผูอ อกแบบ จะตองมลี ักษณะ รูปแบบ สอดคลอ งกนั ทั้งหมด  3. การจดั แถว การวางแนว (Alignment) คอื การจัดวางองคประกอบตา ง ๆ ตอ ง ไมส ะเปะสะปะ ไรเ หตุผล ไมขัดกับความรสู ึก ของผูอ า น จัดใหด ูสะอาด  4. ความใกลเ คยี ง ความเกีย่ วเนื่อง (Proximity) คอื การจดั วางองคประกอบทีเ่ ก่ียว เนอ่ื งกนั ใหเปน กลุมกอนเดยี วกัน    นอกจากนน้ั ยงั มสี ่ิงที่ไมค วรทําอีก เชน รูปประกอบเรือ่ งมีขนาดใหญเ กนิ ไป รูปท่ใี ช ประกอบไมมีความละเอยี ดของภาพ อยูในระดบั ท่ีสามารถรบั ได เนน คาํ น้นั คาํ น้ีมากมายจนเกินไป 

องคประกอบของการออกแบบเว็บไซต ตอ งคํานงึ ถงึ   1. ความเรียบงา ย ไดแก มีรูปแบบทเ่ี รยี บงา ย ไมซ บั ซอ น และใชงานไดสะดวก ไมมกี ราฟก หรอื ตวั อกั ษรที่เคลือ่ นไหวอยูตลอดเวลา ชนดิ และสีของตัวอกั ษรไมม ากจนเกินไปทําให วนุ วาย  ​2. ความสม่าํ เสมอ ไดแ ก ใชรูปแบบเดียวกนั ตลอดทงั้ เว็บไซต เชน รปู แบบของหนา สไตล ของกราฟก ระบบเนวิเกชนั และโทนสี ควรมคี วามคลา ยคลงึ กันตลอดท้งั เว็บไซต  3. ความเปน เอกลักษณ การออกแบบเวบ็ ไซตควรคาํ นึงถงึ ลกั ษณะขององคก ร เพราะรปู แบบของเว็บไซตจ ะสะทอนถงึ เอกลักษณแ ละลักษณะขององคกรนนั้ ๆ เชน ถา เปน เวบ็ ไซต ของทาง ราชการ จะตอ งดูนาเชื่อถอื ไมเ หมือนสวนสนกุ ฯลฯ  4. เนื้อหาท่มี ีประโยชน เน้อื หาเปนสง่ิ ที่สาํ คัญท่ีสดุ ในเวบ็ ไซต ดังน้ันควร    - จัดเตรียมเน้อื หาและขอ มลู ทผ่ี ใู ชตองการใหถ ูกตอ ง และสมบรู ณ    - มกี ารปรบั ปรุงและเพม่ิ เตมิ ใหทนั เหตกุ ารณอ ยูเสมอ    - เนอ้ื หาไมค วรซาํ้ กับเว็บไซตอ่นื จึงจะดงึ ดดู ความสนใจ  5. ระบบเนวเิ กชนั ทีใ่ ชงานงาย ตอ งออกแบบใหผ ใู ชเขาใจงา ยและใชง านสะดวก    - ใชก ราฟกท่ีสือ่ ความหมายรว มกบั คําอธิบายท่ีชดั เจน    - มีรูปแบบและลาํ ดับของรายการท่สี มํา่ เสมอ เชน วางไว ตําแหนง เดยี วกันของทุกหนา  ​6. ลกั ษณะทน่ี าสนใจ หนาตาของเว็บไซตจ ะตองมคี วามสมั พนั ธก ับคุณภาพขององค ประกอบตา งๆ เชน คุณภาพของกราฟกท่จี ะตอ งสมบรู ณ การใชส ี การใชตัวอักษรที่อาน งา ย สบายตา การใชโ ทนสีทีเ่ ขา กัน  ลักษณะหนาตาที่นา สนใจนนั้ ขน้ึ อยูก ับความชอบของแตล ะบคุ คล  7. การใชงานอยา งไมจ าํ กดั ผูใ ชส วนใหญส ามารถเขา ถึงไดม ากท่ีสดุ     - เลือกใชบ ราวเซอรช นิดใดก็ไดใ นการเขา ถึงเนื้อหา    - สามารถแสดงผลไดทุกระบบปฏิบตั กิ ารและความละเอียดหนาจอตา งๆ กันอยา ง ไมมปี ญหาเปนลกั ษณะสาํ คัญสําหรับผูใชท มี่ จี าํ นวนมาก  ​8. คุณภาพในการออกแบบ การออกแบบและเรยี บเรียงเนื้อหาอยา งรอบคอบ สรางความ รูสึกวา เวบ็ ไซตม…ี .คุณภาพ ถูกตอง และเชือ่ ถือได  9. ระบบการใชงานทถ่ี ูกตอง การใชแ บบฟอรมสาํ หรบั กรอกขอมูลตอ งสามารถกรอกไดจ รงิ   ใชงานไดจ ริง 

ลิงคตา งๆ จะตองเช่อื มโยงไปหนา ท่ีมีอยจู ริงและถกู ตอง ระบบการทาํ งานตางๆ  ในเวบ็ ไซตจ ะตองมคี วามแนน อนและทําหนาท่ีไดอยางถกู ตอ ง  ขน้ั ตอนการออกแบบเว็บเพจ  กอ นจะลงมอื สรางเว็บ จําเปนตองผานกระบวนการออกแบบใหดกี อน นอกจากความ สวยงามแลว ส่งิ ทีต่ องคํานงึ ถงึ คอื   1. มสี ารบัญแสดงรายละเอยี ดของเว็บเพจนัน้   2. เชื่อมโยงขอมลู ไปยังเปา หมายไดตรงกบั ความตอ งการ  3. เนื้อหากระชบั ส้นั ทนั สมยั   4. สามารถตอบโตกับผูใชไดท นั ทวงท ี 5. มรี ูปภาพประกอบการนาํ เสนอทด่ี ี ไมค วรมีรูปภาพมากเกนิ ไป  6. เขาสกู ลมุ เปา หมายไดอยางถกู ตอ ง  7. ใชงานงาย  8. เปน มาตรฐานเดียวกัน                             



ขัน้ ตอนการพฒั นาเวบ็ เพจ  1. วางแผน/กาํ หนดขอ หวั และเน้อื หาทน่ี าํ เสนอ  2. สรา งผงั ความสมั พันธของขอมลู แบบรากตนไม  3. กําหนดช่ือไฟลของเอกสารเวบ็     ​การตั้งชือ่ ไฟลแ ละโฟลเดอร  ชื่อและนามสกุลไฟล ตลอดจนโฟลเดอรตา งๆ ควรใชอ ักษรภาษาอังกฤษตัวพิมพเ ลก็   หรอื ผสมกับตวั เลข 0-9 หรอื เครอ่ื งมือขีดลบ/ขดี ลาง  ถา มีไฟลจํานวนมากที่มชี ่อื และนามสุกลเปน ตวั พิมพใหญ หรอื ผสม สามารถ ดาวนโ หลดโปรแกรมเปลี่ยนชอ่ื ไฟลตวั พมิ พใหญ เปนตวั พิมพเล็กจากเว็บ  www.nectec.or.th/courseware เพื่อชวยแปลช่อื ได  4. สรา งโฟลเดอรเ ฉพาะสาํ หรับเอกสารเว็บแตล ะชุด/เร่ือง ในโฟลเดอรทีส่ ราง สามารถสราง โฟลเดอรยอ ย เพ่อื เกบ็ ไฟลใหเ ปนระบบระเบียบได  5. จดั หาภาพหรอื สรางภาพท่ีเก่ียวขอ งกับเนอื้ หา ไดแก  สรา งภาพดวยโปรแกรมกราฟก เชน Adobe PhotoShop  คัดเลือกจาก Clipart fot Web เชน CD-ROM รวมภาพสาํ หรับเวบ็   6. ภาพที่เลอื กใชทั้งหมด ตองเกบ็ ไวในโฟลเดรท สี่ รางไวกอ นแลว   7. สรา งเอกสารเวบ็ โดยลงรหสั HTML หรอื ใชโปรแกรมสรา งเวบ็ ชวย    7.1 การสรา งเว็บเพจ โดยลงรหัส HTML  - ใชภ าษา HTML โดยปอ นคาํ ส่ังภาษา HTML ดว ยโปรแกรม Text Editor เชน  NotePad  - ใสค ําส่ังไดตามตองการ  - ไมเ หมาะสําหรับผพู ฒั นาในระดบั ตน     7.2 .ใชโปรแกรมสรา งเอกสรางเว็บ เชน Macromedia Dreamweaver  - ไมตอ งศกึ ษาภาษา HTML  - จุดดอยคอื โปรแกรมจะไมร จู ักคาํ ส่งั HTML ใหมๆ  8. ภาษาไทยกบั การสรา งเวบ็ เลอื กรปู แบบการเขารหสั ภาษาไทยที่ถกู ตอ ง Windows-874  หรอื TIS-620 

9. กาํ หนดฟอนตใ หก ับขอ มูล เพอ่ื ใหแ สดงผลภาษาไทยไดถกตอ ง เชน MS San Serif,  Thonburi เปน ฟอนตท ่เี หมาะสมที่สุดในการแสดงผลภาษาไทย เชน การเวนวรรค เปน ระยะในประโยคเพอ่ื ใหเบราเซอรแ สดงผลภาษาไทย  10. ไฟลเอกสาร HTML ทกุ ไฟลตองบนั ทกึ ไวใ นโฟลเดอรที่สรางไวก อ น รวมกับรปู ภาพทจ่ี ดั เตรยี มไวแ ลว   11. ตรวจสอบผลเอกสาร HTML ดว ยเบราเซอรซ่งึ มหี ลายคายหลายรุน เว็บเบราเซอร แตละคาย แตละรนุ จะรจู กั คําส่งั HTML ไมเ ทากัน  12. สงขอ มลู ขึ้นเครือ่ งคอมพิวเตอรแมข า ย (server)  13. ตรวจสอบผลของเครอื่ งคอมพวิ เตอรลูกขายท่เี รียกดขู อ มูลจากเคร่ืองแมขา ย                                             

การวางแผน  1. ควรมีรายการสารบญั แสดงรายละเอยี ดของเวบ็ เพจน้ัน  การเขามาในเวบ็ เพจนัน้ เปรยี บเสมอื นการอา นหนงั สอื วารสารหรือตาํ ราเลมหนึ่ง  การทีผ่ ูใชจะเขาไปคน หาขอ มูลได ผูส รางควรแสดงรายการทงั้ หมดท่ีเวบ็ เพจนน้ั มีอยใู หผ ใู ช ทราบ โดยอาจจะทําอยูในรูปแบบของสารบัญ หรอื การเชอ่ื มโยง การสรา งสารบญั นจี้ ะชว ย ใหผ ูใชส ามารถคนหาขอ มูลภายในเวบ็ เพจไดอ ยา งรวดเรว็   2. เชอื่ มโยงขอ มูลไปยังเปาหมายไดตรงกบั ความตอ งการมากท่สี ุด  การสรา งจุดเช่ือมโยง น้ันสามารถจัดทําในรปู ของตวั อกั ษรหรอื รปู ภาพกไ็ ด แตควร ที่จะแสดงจุดเชอื่ มโยงใหผใู ชสามารถเขา ใจไดงา ย และท่นี ยิ มสรา งกันนั้น โดยสว นใหญเ มอ่ื มี เนือ้ หาตอนใดเอยถงึ สวนทเ่ี ปน รายละเอียดเกย่ี วเนื่องกนั ก็จะสรางเปนจุดเชอ่ื มโยงทนั ท ี นอกจากนี้ ในแตละเวบ็ เพจ ท่ีสรา งข้ึนมาควรมีจุดเชื่อมโยงกลับมายังหนาแรกของเวบ็ ไซตท ่ี กาํ ลังใชง านอยูด ว ย ทงั้ นเี้ ผ่ือวา ผใู ชเกดิ หลงทางและไมทราบวา จะทาํ อยา งไรตอ ไปดี จะไดม ี หนทางกลบั มาสูจุดเรม่ิ ตนใหม  3. เน้อื หากระชบั ส้ันและทนั สมัย  เนอ้ื หาที่นําเสนอกบั ผใู ชค วรเปนเร่ืองที่กาํ ลงั มคี วามสาํ คญั อยูในความสนใจของ ผคู นหรือเปนเร่อื งทต่ี องการใหผ ใู ชท ราบ และควรปรับปรุงใหท นั สมัยอยูเสมอ  4. สามารถโตต อบกบั ผใู ชไดอยางทนั ทว งท ี ควรกาํ หนดจุดทผี่ ใู ชส ามารถแสดงความคดิ เหน็ หรอื ใหค าํ แนะนํากบั ผสู รา งได  เชน ใสอเี มล ของผูทํา ลงในเว็บเพจ โดยตาํ แหนงท่ีเขยี นควรเปน ทส่ี วนบนสุดหรือสวนลาง สุดของเว็บเพจนน้ั ๆ ไมควรเขยี นแทรกไวท ี่ตาํ แหนงใดๆ ของจอภาพ เพราะผใู ชอาจจะหาไม พบก็ได  5. การใสภ าพประกอบ  ควรใชรปู ภาพทส่ี ามารถสอ่ื ความหมายกับผใู ชไดตรงตามวัตถุประสงค การใช รูปภาพเพอื่ เปน พนื้ หลัง ไมควรเนนสีสนั ท่ีฉูดฉาดมากนกั เพราะอาจจะไปลดความเดน ชัด ของเน้ือหา ควรใชภ าพทีม่ สี อี อนๆ ไมส วา งจนเกินไป ตวั อกั ษรที่นํามาแสดงบนจอภาพก็เชน เดียวกนั ควรเลอื กขนาดทอี่ านงา ย ไมมสี สี ันและลวดลายมากเกนิ ความจําเปน และทีส่ ําคญั ไมควรมีขนาดใหญห รอื มจี าํ นวนมากเกินไป เพราะอาจจะทําใหเนือ้ หาสาระของเวบ็ เพจนนั้ ถูกลดความสาํ คัญลง     

6. เขาสกู ลุม เปาหมายไดอยา งถูกตอง  การสรา งเวบ็ เพจนนั้ สิ่งหน่งึ ทต่ี องคํานงึ ถงึ มากทส่ี ดุ กค็ อื กลมุ เปาหมายที่ตอ งการ ใหเ ขา มาชมและใชบรกิ ารของเวบ็ เพจทสี่ รางขึ้น การกําหนดกลมุ เปาหมายอยา งชัดเจนยอ ม ทาํ ใหผูสรา งสามารถกาํ หนดเนอื้ หา และเรื่องราวเพื่อใหตรงกบั ความตอ งการของผูใชไ ด มากกวา  7. ใชง านงาย  สงิ่ สาํ คญั อกี ประการหนง่ึ ของการสรา งเวบ็ เพจคือ จะตอ งใชง านงาย เน่ืองจาก อะไรก็ตามถามคี วามงา ยในการใชง านแลว โอกาสท่จี ะประสบความสําเร็จยอมสูงขึน้ ตาม ลาํ ดบั และการสรางเวบ็ เพจ ใหง ายตอการใชง านนนั้ ขึ้นอยกู บั เทคนคิ และประสบการณข อง ผสู รา งแตล ะคน  8. เปนมาตรฐานเดยี วกัน  เว็บเพจที่ถูกสรา งขึ้นมานน้ั อาจจะมีจํานวนขอ มลู มากมายหลายหนา การทําใหผู ใชง านไมเกดิ ความสับสนกบั ขอมูลน้นั จําเปน ตองกําหนดขอ มลู ใหเปนมาตรฐานเดยี วกัน  โดยอาจแบงเนอื้ หาออกเปน สวนๆ ไป หรอื จดั เปนกลมุ เปนหมวดหมู เพื่อความเปนระเบยี บ นา ใชง าน       

 

หลกั การใชส ี   การใชส ีกับงานออกมาน้นั อยูท่นี ักออกแบบมีจดุ มุง หมายใด ทจี่ ะสรา งความสนใจ ความ เรา ใจตอผูดู เพ่อื ใหเ ขาถงึ จดุ หมายทตี่ นตองการ หลกั ของการใชมดี งั น ้ี   1.การใชส ีวรรณะเดียว  ความหมายของสีวรรณะเดียว (tone) คอื กลุมสีที่แบงออกเปนวงลอ ของสเี ปน 2 วรรณะ คอื   1.1 วรรณะรอ น (warm tone) ซ่งึ ประกอบดว ย สเี หลือง สีสม สีแดง สมี วง สีเหลานใี้ ห อทิ ธพิ ล ตอ ความรสู ึก ตน่ื เตน เราใจ กระฉับกระเฉง ถอื วา เปน วรรณะรอ น    1.2 วรรณะเย็น (cool tone) ประกอบดวย สเี หลอื ง สเี ขียว สนี ้ําเงนิ สมี วง สเี หลา นดี้  ู เยน็ ตา ใหความรสู กึ สงบ สดชืน่ (สีเหลอื งกบั สีมวงอยไู ดท ้ังสองวรรณะ)  การใชสีแตละคร้งั ควรใชส วี รรณะเดียวในภาพทัง้ หมด เพราะจะทําใหภ าพความเปน อนั หนึ่งอันเดยี วกนั (เอกภาพ) กลมกลนื มีแรงจงู ใจใหค ลอ ยตามไดมาก    ​2.การใชส ีตา งวรรณะ  หลักการทั่วไป ใชอ ตั ราสว น 80% ตอ 20% ของวรรณะสี คือ ถาใชส วี รรณะรอน 80% สี วรรณะเยน็ ก็ 20% เปนตน ซง่ึ การใชแ บบนีส้ รางจุดสนใจของผูดู ไมควรใชอ ตั ราสวนทีเ่ ทากัน เพราะจะทําใหไมม สี ีใดเดน ไมน าสนใจ 3.การใชสีตรงกนั ขาม  สตี รงขามจะทําใหค วามรูสึกทต่ี ดั กนั รุนแรง สรา งความเดน และเราใจไดม ากแตห ากใชไ ม ถูกหลัก หรือ ไมเหมาะสม หรือใชจ ํานวนสมี ากสจี นเกินไป ก็จะทาํ ใหความรุส ึกพรามัว ลายตา  ขัดแยง ควรใชส ตี รงขา ม ในอัตราสวน 80% ตอ20% หรอื หากมพี ืน้ ท่เี ทากันทจี่ ําเปน ตอ งใช  ควรนําสีขาว หรือสดี ํา เขามาเสรมิ เพื่อ ตดั เสน ใหแ ยกออก จาก กันหรอื อกี วิธีหนึง่ คอื การลด ความสดของสีตรงขา มใหหมน ลงไป           

  สตี รงขา มมี 6 คไู ดแ ก    สเี หลือง ตรงขา มกบั สมี วง   สีแดง ตรงขามกับ สเี ขียว   สนี ํา้ เงิน ตรงขา มกบั สสี ม    สีเขยี วเหลอื ง ตรงขามกับ สมี วงแดง   สีสม เหลอื ง ตรงขามกบั สมี วงนํ้าเงนิ    สีสม แดง ตรงขา มกับ สเี ขยี วน้าํ เงนิ      พ้นื ฐานในการออกแบบเวบ็ ไซตท ด่ี ี มีเน้อื หาเปนประโยชน ตรงกับทผ่ี ใู ชต องการมกี าร ปรับปรงุ เพิ่มเตมิ เนือ้ หา และพัฒนาเว็บไซตอ ยเู สมอ  ใชเวลาในการดาวนโ หลดนอ ย แสดงผลเรว็ ใชงานทีส่ ะดวก เขา ใจงา ย  โปรแกรมท่ีใชการสรา งเว็บไซต  1. Dreamweaver    2. FrontPage    3. HomeSite    4. HotDog Pro    5. GoLive    6. NetObjects Fusion    7. CoffeeCup 

 

 

หลกั การออกแบบ webpage  1. รูปภาพ (Graphic or Photo) การใชรปู ภาพในเว็บไซตมอี ยู 2 จุดประสงค คอื เพอื่ เพ่มิ ความสวยงามและดงึ ดดู ความสนใจในการเขาชมเพ่อื แสดงขอ มูล และรายบละเอียดตา ง ๆ ของ สนิ คา ทัง้ น้ีรปู ภาพดังกลา วจะมที ัง้ รูปที่เปนภาพจรงิ (Photo) และภาพท่ีวาดขึ้นโดยใชเทคนคิ ตา ง ๆ (Graphic) โดยรูปภาพดังกลา วจะสามารถใชเ ปนจดุ เช่ือมโยงไดอ ีกดวยโดยท่สี ามารถ ทาํ การสรา งจดุ เชื่อมโยงไดห ลายจดุ ในภาพ 1 ภาพ (เรยี กวา Image map) หรอื การแมป็ ภาพ  ​2. แบบฟอรม (Form) ในการสง ขอมลู ผาน Web Site นอกเหนือการเขียน e-mail ยงั สามารถสงขอ มูลในแบบฟอรม ท่ีจัดทําอยูใ น Web Site ไดโดยมีขอดีคอื ทางผูใชจ ะตอบเฉพาะ คําถามทท่ี างผดู แู ล Web Site ตองการทราบเทานนั้ โดยจะประหยดั เวลาทงั้ สองฝายในการ เก็บขอมูลดงั กลา ว ท้งั นี้แบบฟอรมตาง ๆ จะมอี ยูในหลายรูปแบบเชน Check Box, Radio  Button หรอื Scroll Bar ก็ได  3. ภาพยนตรแ ละเสียงประกอบ (Movie and Sound) การเพมิ่ ภาพยนตรแ ละเสียง ประกอบจะทําให Web Site มีความนาสนใจและดึงดดู ใจผเู ขา ชมมากขึ้น นอกจากเพม่ิ ความ สวยงามและความสมจรงิ ของขอ มูลแลว ยังเปนการงายตอ ผใู ชท ่ีจะรบั รูขอมูลขา วสารตา ง ๆ  ดว ยหรอื อาจจะทําการแสดงแฉพาะเสียงประกอบเพียงอยา งเดยี วกไ็ ด เชน เสียงเพลงประกอบ ตลอดเวลาทผ่ี ูใ ชด ูขอมูลอยใู น Web Site  ​4. ตัวนับ (Hit Counter) ใชนบั จาํ นวนผูเขา ชม Web Site (โดยมีพนื้ ฐานมาจากการใช CGI  Script) และทาํ การวดั ประสทิ ธภิ าพของการโฆษณาและประชาสมั พันธ  5.  กรอบ  (Frame)  เ​ พ่อื ความสวยงามและความสะดวกในการใชง าน  ผอู อกแบบสามารถ ทําการแบงจอภาพออกเปน หลายๆสวน ในกรณีท ่ี Web Site มีขนาดใหญ  และม ี Link หลายๆ ชดุ ตอ กันออกไปทาํ ใหการทีจ่ ะกลบั มาท่จี เุ รม่ิ ตนสามารถทาํ ไดโดยงา ย หรอื การท่ตี อ งการขอมลู บางอยางแสดงผลภาพบางอยางอยูตลอดเวลาใน Web Site 

6. CGI Script เ​ ปนการประมวลผลขอ มูลจากผูใชดว ย CGI หรือ Common Gateway  Interface จะเปน ตัวกลาง ทท่ี าํ หนาทีเ่ ชื่อมโยง Web Site กบั ผูใชเ พ่ือใชในการเกบ็ ขอ มลู และ นาํ ไปประมวลผลสงกลับใหกับผใู ชห รอื ใหกบั ผดู ูแล Web Site (Web Master) เพ่อื นําไปใช ประโยชนอ ืน่ ๆ ตอไป เชน การสํารวจความคิดเหน็ ทํา Poll การส่งั ซอื้ สนิ คา ทางอินเตอรเนต  การสมัครสมาชกิ และอ่ืน ๆ (หมายเหตุ: ขอ มลู ท่ปี ระมวลผลแลวสามารถนํากลบั มาเพอ่ื แสดง ใน Web Site ไดในภายหลัง)  ​7. จาวา (Java) เปนภาษาที่สามารถทํางานโดยไมขึ้นกับแพลตฟอรม (หมายความวา Java  สามารถทาํ งานไดแ มในลกั ษณะของโปรแกรมท่ีแตกตา งกัน ไมวาจะทํางานบน Windows NT  หรอื UNIX ก็เหมือนกัน) โดย Java จะนํามาใชสําหรบั การโตตอบกบั ระบบ Multimedia เพอ่ื เพม่ิ ความนา ดงึ ดดู ใจของ Web Site เชน การใสเ สียงเพลง เปน ตน รวมทั้งการใชง านดานความ ปลอดภัย เชนการสง ขอ มูลของบตั รเครดิต เปน ตน นอกจากนีย้ งั ใชเ ปน คําส่ังในการประมวลผล ในลกั ษณะเดียวกันกับ CGI Script อีกดวย            

  สรุป  การออกแบบเวบ็ และโฮมเพจตองอาศัยความเขา ใจเบื้องตน ไดแ ก  1.รูปแบบการเชื่อมโยงท่ีนิยมใชใ นการพฒั นาเว็บ ( Link ) ซึ่งไดแก    - การเชอ่ื โยงในไฟลเดียวกนั     - การเชอื่ โยงระหวา งไฟล HTML และไฟล HTML ดว ยกัน    - การเชอ่ื โยงจากไฟล HTML ไปยงั เวบ็ อน่ื ๆ  2. การจัดทําภาพขอ ความเพอ่ื นาํ เสนอในรปู แบบต้งั แตเบื้อตน จนถงึ ระดบั ท่ีสวยงามเรา ใจ  - ภาพทใี่ ชควรอยใู นตระกลู jpg - gif แตใ นปจ จุบันโปรแกรมท่ัวๆไปมีความสามารถแปลง ไฟลใ หไ ดจ ากหลายสกุล  - การใชขอความควรคํานงึ ถงึ ฟอนต ( Font ) ซ่ีงถาตองการความสวยงาม ขนาดคงที่ และ แนใจวา ผใู ชจ ะเห็นอยางนัน้ แนน อนควรจดั ทําเปน Image Text ( ขอความท่แี ปลงเปน ภาพ )  เสียกอ นที่จะนํามาเสนอบนเวบ็ จะชวยไดม าก  3. การออกแบบไฟลเร่มิ ตนของ Homepage ในชื่อ index.htm หรือ .htm และเก็บไฟล เปน ชุดหมวดหมูเพอื่ เรียกใชงานงายและไมเกดิ ปญหาในการหาไฟลไ มพบ แลว แสดงผลผดิ พลาด  4. การทาํ เฟรม ( Frame ) การจดั ทําเฟรมเปนการคํานงึ ถงึ ผูใ ช จงึ ออกแบบใหเ กดิ การใชงาน ไดส ะดวกย่งิ ขน้ึ คอื     - ลดการคลิกเลือ่ นจอภาพ ( Scrolling ) เพอื่ อา นขอมูลยาวๆ ในหนาจอได    - จัดแบงพน้ื ที่บนจอใหเกิดระเบียบสวยงามนาใชและเปน สัดสว นอิสระจากกนั