คู่มือ1

1.นางสาวพชราภรณ สอนอา รหส533410080318 2.นางสาวเสาวลกษณ แกวเกต รหส533410080331 3.นายนรนดร กรยาด รหส533410080338 4.นายพฒพล วรรณสมผส รหส533410080339

คมอเลมนจดทาขน เพอใหผทสนใจ เรองการออกแบบเวบไซตไดศกษา ซง

สมาชกในกลมไดรบมอบหมายจากอาจารยปวรศ สารมะโน ใหจดทาคมอเลมนขนมา

หวงวาคมอเลมนจะเปนประโยชนแกผทตองการจะศกษา ถาผดพลาดประการใด

สมาชกในกลมกขออภยไว ณ ทนดวย

คณะผจดทา

สวนประกอบของเวบไซตทด 1

ขอมลหลกทควรมอยในเวบไซต 5

เรองในฉบบ 2





สวนประกอบของเวบไซตทด

ดงรปทเหนดานบนเปนโครงสรางของเวบไซตโดยจะมสวนหลกๆอยดวยกนทงหมด 6 สวนดงน

ตวอยางสวนประกอบของเวบไซต

1.Containing block โดยปกตเราจะเขยน <div> หรอ <table> ตอจาก <body> เพอเอาไวเกบเนอหาทงหมดของเวบไซต

กอน เพอเอาไวเปนกลองในการเกบเนอหาทงหมด โดยกลองของเราจะมขอดอยตรงท สามารถทาใหปรบเปลยนขนาดในการแสดงผลของ

เนอหาได หรอตาแหนงการแสดงผลของเวบไซตไดเชน จดกลาง ชดซาย หรอชดขวา หากนกภาพไมออก ลองเขยนเวบไซตโดยเรมทใสตวหนงสอ

ลงไปกอน จากนนหากตองการจดตวหนงสอเหลานนจะทาไดยากมาก ดงนนทกครงทออกแบบเวบไซตอยางลมทจะสราง containing block

เอาไวใสเนอหาทงหมดกอน เพอความสะดวกของเราเอง 2.Logo เปนสญลกษณทแสดงถงตวตนของเรา ทาใหลกคาหรอ

ผใชงานจดจาเราได ดวยเหตนเองทาใหการออกแบบเวบไซตนนจาเปนตองมโลโก ของเวบไซตเปนอยางยง สวนตาแหนงทควรจะวางโล

โกไวคอตาแหนงทเปนสมวงทงหมดนนเอง จะสงเกตไดวาจะเปนสวนทอยดานบนของเวบไซตทงหมด เพอใหผใชงานจาได และสะดดตา เรอง

ทตองเตอนใหรกนกคอ โลโกของเวบไซตเมอคลกจะนาไปสหนาแรกของเวบไซตเสมอ

3.Navigation เปนสวนทจะนาผเขาชมเวบไซตไปยงสวนตางของเวบไซต โดยสามารถทาใหอยในแนวนอน หรอแนวตงกได หากสงเกต

hellomyweb.com เราจะทาทงแนวตงและแนวนอน โดยแนวนอนจะนาไปสเนอหาหนาอนของเวบไซต สวนแนวตงจะนาไปสเนอหายอยใน

หนานน ตาแหนงทควรจะวาง navigation เอาไวคอสเขยวทงหมด ถาสงเกตดจะพบวาการวางตาแหนงตองพยายามใหอยในสวนดานบนของ

เวบไซต หรอจะพดอกอยางคอสวนทเมอผใชเปดมากตองเจอไดทนท ไมควรวางไวในตาแหนงทผใชจะตองเลอนขนลง ซายขวา

4.Content สวนเนอหาของเวบไซต เปนสวนทสาคญมากทสด หากผใชงานไมสามารถเขาถงไดโดยงายผใชงานจะเปลยนไปชมเวบใหม

ทนท ตาแหนงทควรวางเนอหาไวคอสแดง หรอตาแหนงอนๆทคดวาจะทาใหผหาเจอไดโดยไมลาบาก หากสงเกตดจะพบวาเวบไซตบางเวบไซตม

โฆษณาทมากจนเกนไป ทาใหผใชงานหาเนอหาไมเจอ นนถอเปนการออกแบบทผดพลาด

5.Footer คอสวนลางสดของหนาเวบไซต สวนใหญจะเกบลงกตางๆเอาไว หรอเปนเนอหาทเกยวกบเวบไซตเชนลขสทธตางๆ ถามวา

จาเปนตองมหรอไม บอกไดวาจาเปนอยางยง footer จะเปนตวบอกผชมวาสวนนคอลางสดของหนาทกาลงแสดงอยแลวนะ ไมมเนอหา

เพมเตมแลว 6.Whitespace พนทวางในเวบไซต คนสวนใหญมกไมเหน

ความสาคญของการเวนพนทวางไวในเวบไซต เรามกจะใสภาพหรอตวหนงสอเขาไปใหมากทสดเพราะคดวาจะทาใหเวบดสวยงามขน หรอ

ใชพนทมมอยใหคมคาทสด หากเราออกแบบโดยไมไดคานงวาตองมพนทวางอยในเวบไซต จะทาใหเวบของเรานนดอดอดทนท การเวน

ชองวางเอาไว ไมวาจะเปนระยะหางระหวางตวอกษร หรอชองวางระหวางภาพ เนอหาตางๆ นอกจากจะทาใหเวบของเราดสบายตาขน

แลว ยงทาใหเราสามารถกาหนดจดทจะใหผใชงานเวบรสกสนใจในจดนนไดอกดวย เชนหากเราเวนชองวางเอาไวตรงกลาง และนาภาพหรอ

ตวหนงสอเลกๆไปวางไว ตรงจดนนจะเปนทสนใจของผใชทนท

ขอมลหลกทควรมอยในเวบไซต

ซงขอมลตอไปน เปนสงทผใชสวนใหญคาดหวงจะไดรบเมอเขาไปชมเวบไซต - ขอมลเกยวกบบรษท องคกร สถานศกษา - รายละเอยดของผลตภณฑ - ขาวความคบหนาและขาวจากสอมวลชน - คาถามยอดนยม - ขอมลในการตดตอ

ขอควรคานงถงในการออกแบบเวบไซต

1. ความเรยบงาย ไดแก มรปแบบทเรยบงาย ไมซบซอน และใช

งานไดสะดวก ไมมกราฟกหรอตวอกษรทเคลอนไหวอยตลอดเวลา ชนดและสของตวอกษรไมมากจนเกนไปทาใหวนวาย

2. ความสมาเสมอ ไดแก ใชรปแบบเดยวกนตลอดทงเวบไซต เชน รปแบบของหนา สไตลของกราฟก ระบบเนวเกชนและโทนส ควรม

ความคลายคลงกนตลอดทงเวบไซต 3. ความเปนเอกลกษณ การออกแบบเวบไซตควรคานงถง

ลกษณะขององคกร เพราะรปแบบของเวบไซตจะสะทอนถงเอกลกษณและลกษณะขององคกรนน ๆ เชน ถาเปนเวบไซตของทาง ราชการ

จะตองดนาเชอถอไมเหมอนสวนสนก ฯลฯ 4. เนอหาทมประโยชน เนอหาเปนสงทสาคญทสดในเวบไซต

ดงนนควรจดเตรยมเนอหาและขอมลทผใชตองการใหถกตอง และสมบรณ มการปรบปรงและเพมเตมใหทนเหตการณอยเสมอ เนอหาไม

ควรซากบเวบไซตอน จงจะดงดดความสนใจ 5. ระบบเนวเกชน ทใชงานงาย ตองออกแบบใหผใชเขาใจงาย

และใชงานสะดวก ใชกราฟกทสอความหมายรวมกบคาอธบายทชดเจน

6. ลกษณะทนาสนใจ หนาตาของเวบไซตจะตองมความสมพนธกบคณภาพขององคประกอบตางๆ เชน คณภาพของกราฟกทจะตองสมบรณ การใชส การใชตวอกษรทอานงาย สบายตา การใชโทนสทเขากนลกษณะหนาตาทนาสนใจนนขนอยกบความชอบของแตละบคคล 7. การใชงานอยางไมจากด ผใชสวนใหญสามารถเขาถงไดมากทสดเลอกใชบราวเซอรชนดใดกไดในการเขาถงเนอหาสามารถแสดงผลไดทกระบบปฏบตการและความละเอยดหนาจอตางๆ กนอยางไมมปญหาเปนลกษณะสาคฐสาหรบผใชทมจานวนมาก 8. คณภาพในการออกแบบ การออกแบบและเรยบเรยงเนอหาอยางรอบคอบ สรางความรสกวาเวบไซตม….คณภาพ ถกตอง และเชอถอได 9. ลงคตางๆ จะตองเชอมโยงไปหนาทมอยจรงและถกตอง ระบบการทางานตางๆ ในเวบไซตจะตองมความแนนอนและทาหนาทไดอยางถก

1.การกาหนดวตถประสงคของเวบไซต เวบไซตสวนใหญจะม

การกาหนดวตถประสงคชดเจน ผเขาชมเวบไซตตองการขอเทจจรง เมอเขาชมแลวจะพยายามคนหาขอมลหรอขอเทจจรงทตองการ เวบไซตทม

วตถประสงคทชดเจน จะทาใหผเขาชมยอมรบเวบไซตโดยงาย เชน ขอมลเพอการศกษาจะใหขอมลดานการศกษาอยางชดเจน ผทเขามา

เยยมชมสวนใหญจะเปนนกศกษาหรอผสนในในการศกษาหลากหลายสาขาวชา เปนตน การกาหนดวตถประสงคเวบไซตทชดเจนกอนการ

สรางเวบไซต จะทาใหผสรางเวบไซตมนใจไดวาเวบไซตจะประสบผลสาเรจตรงตามวตถประสงคของเวบไซต

2.การกาหนดกลมเปาหมาย ผทจะออกแบบเวบไซตจะตองคานงถงผทจะเขาชมเวบไซตวาเปนกลมเปาหมายทสาคญ ดงนนกอนท

จะออกแบบเวบไซตจะตองวเคราะหกลมเปาหมายของเวบไซตใหชดเจน วาตองการใหใครมาเยยมชม โดยดวตถประสงคของเวบไซต วาเวบไซต

นนๆมการถายทอดอะไรกบผเยยมชมเวบไซตกจะทราบวากลมเปาหมายของเวบไซตคอกลมใด

ขนตอนการวางแผนเพอการออกแบบเวบไซต

3.การวางแผนดานเนอหา การออกแบบเวบไซตจะตองมการวางแผนใหชดเจนตงแตเรมตน เพราะถาหากมการวางแผนดานเนอหาไม

ด จะทาใหเวบไซตไมเปนระเบยบ สงผลใหผเขาชมเวบไซตเกดความสบสน การวางแผนดานเนอหาควรตอบคาถามดานตางๆใหได การสรางแผนผงของเนอหาจะทาใหเราทราบวา มจานวนเวบเพจทเกยวของปรมาณเทานน หากเปนเวบไซตขนาดใหญ มเวบเพจจานวนมาก ควรม

การจดกลมของเนอหาทงหมดทความสมพนธกนเปนกลมๆ

ตวอยางการสรางแผนผงของเนอหา

4.การวางแผนโครงสรางของเวบไซต ในทนขออธบายตามระบบการจดการเนอหา(Content Management System : CMS) ใน

การสรางและจดการเนอหาของเวบไซตทไดออกแบบไว ประกอบดวย การสรางเนอหา(creation) การปรบปรงเนอหา(updating) การ

กระจายเนอหา(distribution) การตพมพเนอหา(publishing) การคนหาเนอหา(discovery) CMS เปดทางใหผใชงานสามารถตพมพได

หลายลกษณะ เชน ขาว การประกาศ กรณศกษา ประวตบคคล บทความ หนงสอพมพ ขอมลสนคา หนงสอรบรอง ลงคทสาคญ

แหลงขอมลออนไลน 5.การวางแผนการผลตเวบเพจ ควรเขาใจหลกการของเวบไซต

กอนวา เวบไซตเปรยบเสมอนการไหลของขอมล ซงจะทาใหผเขาเยยม

ชมเวบไซตไดรบขอมลอยางเปนลาดบ ขนตอน ถาหากผสรางเวบไซตไม

มการวางแผน เวบไซตกจะเรมตนไมถก ไมรวาจะเรมตนจากตรงไหนด

ทสาคญทสดคอควรออกแบบใหงายทสด และรวดเรวทสดสาหรบ

ผใชงานหรอผเขาเยยมชมเวบไซต

6.การวางแผนระบบเนวเกชน เปนการนาแผนผงโครงสรางเวบไซตจากการวางแผนเวบไซต มาวางแผนระบบเนวเกชน

ตวอยางการวางแผนระบบเนวเกชน

ขนตอนการพฒนาเวบไซต

กระบวนการพฒนาเวบไซตสามารถจาแนกได3ขนตอน ดงน 1.การเตรยมการและการวางแผนงาน(pre-production) เปรยบเสมอนเขมทศทจะชนาทางหรอบงบอกใหผพฒนาเวบไซตทราบวา ควรจะตองเดนทางไปในทศทางใด 1.1การเตรยมกอนการดาเนนการ ประกอบดวย กาหนด

วตถประสงคและเปาหมายของเวบไซต กาหนดชอเวบไซต และชอยอารแอล กาหนดกลมเปาหมายทจะใหเขาชมเวบไซต และศกษากลมคแขง 1.2การวางแผนการดาเนนการ หลงการเตรยมกอนการดาเนนการ ควรมการวางแผนไวลวงหนา เพอใหการพฒนาเวบไซตม

แนวทางทชดเจน 1.3การรวบรวมและวเคราะหโครงสราง เปนขนตอนทตอจาก

การวางแผนการดาเนนการ เนองจากเนอหาและขอมลเปนสงทเชญชวนใหผอนเขามาเยยมชมเวบไซต

2.การทางานจรงในการออกแบบและพฒนาเวบเพจ(on- pro-duction) แบงไดเปน2สวน คอ 2.1การออกแบบเวบเพจ นบเปนขนตอนในการออกแบบ

รปราง โครงสรางและลกษณะทางดานกราฟกทางหนาเวบเพจ โดย

โปรแกรมทนยมนามาใชในการออกแบบคอ โฟโตชอป หรอ ไฟลเวรก ซง

จะชวยในการสรางเคาโครงของหนาเวบและองคประกอบตางๆ เชน ชอ

เวบไซต โลโก รปไอคอน ภาพเคลอนไหว แบรนเนอรโฆษณา เปนตน

2.2การพฒนาเวบเพจ หลงจากออกแบบโครงรางของเวบเพจและแตละหนาเวบเพจแลว ขนตอนตอไปคอ การดาเนนการสรางเวบเพจ

ซงรวมถงการจดหาองคประกอบทตองนามาใช เชน สอมลตมเดย ภาพกราฟก แบบฟอรมตางๆ และการสรางไฟลรปภาพ/เสยง ทเกยวของ

กบเนอหา ซงตองคานงถงรปแบบของไฟลทนามาใชและสอดคลองกบซอฟตแวรทใชในการพฒนาดวย จากนนนาภาพและเสยงมาเกบไวในได

เรกทอรหรอโฟลเดอรทกาหนดไว แลวนาขอมลทงหมดทรวบรวมไวจากทกลาวมาขางตน มาสรางเปนเวบไซตดวยภาษา HTML หรอเครองมอใน

การสรางเวบเพจอนตามแนวคดทไดออกแบบไวแลว ซงรวมถงการเขยนโปรแกรมสครปตในการใชงานดวย

3.การสรปงานเพอสงมอบ(post- production) ประกอบดวย

3.1การทดสอบและปรบปรงเวบไซต หมายถง การทดสอบเวบเพจทสรางขนแบบออฟไลน โดยยงไมไดมการนาเวบไซตเขาส

อนเทอรเนต แตกสามารถแสดงผลไดเหมอนจรงผานเวบเบราวเซอร เชน ใชโปรแกรมอนเทอรเนตเอกซพลอเรอร ตรวจสอบตวอยางเวบเพจ

หนาตางๆทสรางไว วามความเหมาะสมหรอไม พรอมกบทาการแกไขปรบปรงจนเปนทนาพอใจ

3.2การเผยแพรเวบไซต เมอทดสอบเวบไซตจนสมบรณแลว ขนตอนในการเผยแพรผานเวบไซต คอ การเผยแพรใหคนทวไปไดรจก

หรอเรยกวาการนาเวบไซตขนเซรฟเวอร หรอการอพโหลด ซงเปนการถายโอนเวบเพจและสวนประกอบอน เชน ไฟลภาพ ไฟลเพลงประกอบ

เปนตน ไปฝากไวทโฮสต 3.3การบารงรกษาเ วบไซต เ ปนการปรบปรงเ นอหา

ภาพประกอบ หรอการปรบปรงเวบไซตใหเปนปจจบน ซงถอเปน

ขนตอนทสาคญ ผ เขาชมเวบมกใชเวลาในการคนหาและเปดผาน

เวบไซตตางๆอยางรวดเรว หากพบวาเวบไซตทผสรางนาเสนอไมไดม

การปรบปรงเปลยนแปลงหรอมขอมลใหมๆเพมขนเลย ผเขาชมเวบก

อาจลดจานวนลงเรอยๆ เรอยๆ จนกลายเปนเวบทไมมคนเขามาชม

หลกในการออกแบบโครงสรางเวบไซต

1. กาหนดวตถประสงค โดยพจารณาวาเปาหมายของการสรางเวบไซตนทาเพออะไร

2. ศกษาคณลกษณะของผทเขามาใชวากลมเปาหมายใดทผสรางตองการสอสาร ขอมลอะไรทพวกเขาตองการโดยขนตอนนควรปฏบตควบคไปกบขนตอนทหนง

3. วางแผนเกยวกบการจดรปแบบโครงสรางเนอหาสาระ การออกแบบเวบไซตตองมการจดโครงสรางหรอจดระเบยบขอมลทชดเจน

4. กาหนดรายละเอยดใหกบโครงสราง ซ งพจารณาจากวตถประสงคทตงไว โดยตงเกณฑในการใช เชน ผใชควรทาอะไรบาง จานวนหนาควรมเทาใด มการเชอมโยง มากนอยเพยงใด

5. หลงจากนน จงทาการสรางเวบไซตแลวนาไปทดลองเพอหา

ขอผดพลาดและทาการแกไขปรบปรง แลวจงนาเขาส เครอขาย

อนเทอรเนตเปนขนสดทาย

ความสาคญของสทมตอการออกแบบเวบไซต

สเปนองคประกอบทมความละเอยดซบซอน และตองอาศยความเชยวชาญในการผสมผสานความแตกตางของส ใหสามารถเขากนไดอยางลงตว โดยสามารถสรปความสาคญในการเลอกใชสเพอการออกแบบเวบ ไดดงน 1.การดงดดความสนใจของผ เ ยยมชม เนองจากสงแรกทมองเหนไดจากเวบคอ ส ซงเปนสงท ชวยกาหนดบรรยากาศ และความรสกโดยรวมของเวบไซต 2.การนาสมาใชกบองคประกอบตางๆของเวบเพจ เนองจากในหนาเวบมขอมลปรมาณมาก ผออกแบบมกใชโทนสในการจดกลมขอมล เชน ตวอกษร รปภาพ ลงค และพนหลง เปนตน เพอความสะดวกตอการเขาใชงานของผเยยมชมเวบไซต 3.การเชอมโยงองคประกอบหนาเวบเขาดวยกน ผออกแบบสามารถใชการไลระดบสหรอโทนส เพอเชอมโยงองคประกอบแตละ

สวนไวดวยกน ใหหนาเวบมรความเปนเอกภาพได

การจดองคประกอบภาพ

หลกการจดองคประกอบของภาพอย 2 หลกดวยกน ไดแก 1. การสรางเอกภาพ สวนวธการสรางเอกภาพนน มหลกอยดวยกน 3 ขอ ไดแก

1.1 สรางความใกลชดใหกบองคประกอบ วธทงายทสดกคอการจดวางองคประกอบใหมความเหมาะสม ลองดรปขางลางนกจะรเองวารปไหนมเอกภาพแลวอนไหนไมมเอกภาพ ซงแตกตางกนแคการจดองคประกอบ

4.การสรางอารมณและความรสก การเลอกใชสแตละส ลวนมผลตอความรสกของผเยยมชมเวบไซต เชน สแดงกระตนใหเกดความสนใจ

อยากร มชวตชวา หรอสดา กระคนใหเกดความนาลกลบ นาคนหา เปนตน

5.การสรางสญลกษณหรอเปนตวแทนขององคกร สวนใหญองคกรขนาดใหญจะมการสรางสญลกษณทเปนตวแทนขององคกร ทงน

อาจอยในรปแบบเครองหมายการคาหรอสสนตางๆ ทผเยยมชมเวบไซตมองเหนแลวทราบทนทวาเปนสญลกษณองคกรใด โดยใชสประจาองคกร

มาใชรวมกบการออกแบบหนาเวบ อยางไรกตาม การเลอกใชสในการออกแบบเวบเพจนน หาก

เลอกใชสไมเหมาะสมอาจสรางความลาบากในการอานหรอรบกวนสายตาผเยยมชม รวมทงอาจทาใหการสอความหมายไมถกตอง การ

เลอกใชสตางๆนน ตองเขาใจถงการแสดงผลของเวบเพจในสภาพแวดลอมทแตกตางกน

1.2 สรางความซากนขององคประกอบ การจดองคประกอบโดยการใชวธการทาซากนไปเรอยๆไมวาจะเปนเสน จด ส หรอรปลกษณะอนๆ จะทาใหผชมรสกวาเปนพวกพองเดยวกน และจะทาใหเกดความเปนเอกภาพขนมาในงานได ตวอยางนหาดไดในหลายๆงาน เชนงานททาเปนเสนพรวๆหลายๆเสน ซากนไปซากนมา 1.3 สรางความตอเนองขององคประกอบ ความตอเนองเราจะสรางมาจากเสน หรอทศทางขององคประกอบทอยภายในงานของเรา ซงจะนาสายตาของผทไดชมงานของเราไปในทศทางทเราไดกาหนด และเกดความตอเนองเพอเลาเรองราวไหลไปภายในงาน ตอเนองเปนเรองเปนราวเดยวกนและเปนลาดบขน และจะทาใหเกดเปนเรองราวขนในใจของผทไดด ในหลกการขอนเราจะสามารถนามาใชในการบงคบสายตาของผทดงานไปจบท สงทเราตองการจะใหความสาคญได ลองหาดตามปายโฆษณา ทเวลาเราดทรปแลวจะไปจบทจดสดทายเปนพวก Logo หรอ สนคา ทตองการจะโฆษณา

2. การสรางจดเดน เนนจดสาคญ จดเดนจะทาใหผชมสามารถ

ทจะจบประเดนในความหมายของงานทเราตองการจะสอได โดยมหลกการสรางจดสนใจได 3 วธดวยกน ไดแก

2.1 การวางจดสนใจในงาน หลกการนถอวาเปนหลกการทสาคญหลกการหนง สงทสาคญกคอเราตองรวาเราตองการทจะเนนอะไร

ในงานของเรา แลวกวางสงทเราใหความสาคญไวในตาแหนงทสาคญ

จากรปหมายเลข 1 คอตาแหนงทสาคญทสดไลมาจนถงหมายเลข

5 คอตาแหนงทมความสาคญนอยทสด

2.2การสรางความแตกตางในงาน การสรางความแตกตางจะเปนตวกาหนดความนาสนใจและความโดดเดนในงานของเราไดด แตกอยาใหมนหลดกรอบไปจะทาใหขาดเอกภาพได นคอขอควรระวงอกขอหนง หลกในการสรางความแตกตาง มงายๆดงน - การสรางขนาดทแตกตาง - ความแตกตางกนทรปรางขององคประกอบ - รปลกษณหรอลกษณทแตกตาง 2.3 การวางแยกองคประกอบใหโดดเดน พดงายๆกคอ วางใหโดด และเดน กวาคนอน

เทคนคการนาสไปใชงาน

เทคนคการเลอกใชสแบบสตรสาเรจจะมอยหลายรปแบบ แตแบบทนยมใหงานกนเปนหลกจะมอย 4 รปแบบ คอ

1.Mono หรอเอกรงค จะเปนการใชสทไปในโทนเดยวกนทงหมด เชน จดเดนเปนสแดง สสวนทเหลอกจะเปนสทใกลเคยงกบสแดง โดยใชวธลดนาหนกความเขมของสแดงลงไป

ตวอยางเวบไซตทใชสMono หรอเอกรงค

http://www.km-web.rmutt.ac.th/?p=112�

2.Complement คอ สทตดกนหรอสตรงกนขาม เปนสทอยตรงขามกนในวงจรส เชน สฟาจะตรงขามกบสสม หรอสแดงจะตรงขามกบสเขยว สามารถนามาใชงานไดหลายอยาง และกสามารถสงผลไดทงดและไมด หากไมรหลกพนฐานในการใชงาน การใชสตรงขามหรอสตดกน ไมควรใชในพนทปรมาณเทากนในงาน ควรใชสใดสหนงจานวน 80% อกฝายหนงตองเปน 20% หรอ 70-30 โดยประมาณ บนพนทของงานโดยรวม จะทาใหความตรงขามกนของพนทนอยกลายเปนจดเดนของภาพ

ตวอยางเวบไซตทใชสตดกนหรอสตรงกนขาม

3.Triad คอ การเลอกสสามสทระยะหางเทากนเปนสามเหลยมดานเทามาใชงาน

ตวอยางเวบไซตทใชสสามสทระยะหางเทากนเปนสามเหลยมดานเทา

มาใชงาน

4.Analogic หรอสขางเคยงกน การเลอกสใดสหนงขนมาใชงานพรอมกบสทอยตดกนอกขางละส หรอกคอสสามสอยตดกนในวงจรสนนเอง

ตวอยางเวบไซตทใชสใกลเคยงกน

องคประกอบดานขอความ

ขอความ จดเปนองคประกอบหลกสาคญทสดในการออกแบบเวบไซตการออกแบบขอความทด ผออกแบบตองคานงถงองคประกอบยอยหลายดาน เชน รปแบบตวอกษร ขนาดตวอกษร ความหนาแนนตวอกษร สของขอความ และการจดความสมพนธขอความและภาพใหสอดคลองกบองคประกอบอน ๆ เชน ภาพ และกราฟกบนหนาจอ รปแบบและขนาดตวอกษร

มงานวจยเกยวกบขนาดตวอกษรทงภาษาไทยเละภาษองกฤษพบวาผอานตว อกษรตวพมพภาษไทยหรอภาษาตาง ๆ ขนาด 80 ตวอกษรตอบรรทดนอยกวา การอาน ตวอกษรขนาดขนาด 40 ตวอกษรตอบรรทด ในขณะทความเขาใจ จากการอานควรอยระหวาง 19-37 พอยต ในขณะทตวหนงสอปกตมขนาด 12-19 พอยต สวนรปแบบของตวอกษรควรใชตวทอานงายสบายตาหากตวอกษรทไมใชสวนของเนอหาหลก เชน ตวอกษร หวเรองใหญ ตวอกษรประกอบการออกแบบ หรอตวอกษรพเศษอน ๆ ผออกแบบอาจใชตวอกษรรปแบบและขนาดตาง ๆ กนออกไป ๆ ได แตไมควรม ความหนาแนนของตวอกษรมากเกนไป

ความหนาแนนของ ตวอกษร สวนใหญรวมถงความหนาแนนขององคประกอบอนบนจอภาพเขาไปดวย ผลการวจยพบวา ผเรยนชอบจอภาพทมความหนาแนนปานกลางหรอประมาณ 40 % ของพนทหนาจอมากทสด และจะเลอกจอภาพทมความหนาแนนสง หรอประมาณ 50 % ของพนทหนาจอ มากวาจอภาพทมความหนาแนนตา นอกจากนยงพบวาในวชาทมเนอหายาก ผเรยนจะชอบจอภาพ ทมความแนนสง เนองจากจอภาพทมความหนาแนนขององคประกอบตาง ๆ สง จะมขอมลทชวยใหความเขาใจเนอหาและแนวคดหลกตาง ๆ ชดเจนและตอเนองขน

สขอความ เปนองคประกอบหนาจอ ทชวยกระตนความนาสนใจการ สเปนตวกระตนประสาทการรบรทสาคญ การใชสทเหมาะสม จะชวยใหอานงาย และสบายตา ผลงานวจยพบวานกเรยนสวนใหญชอบคอกษรสขาว หรอเหลอง บนพนนาเงน อกษรเขยวบนพนดา และอกษรดาบนพนเหลอง หากใชพนสเทา คสทผเรยนชอบ คอ สฟา สมวง และสดา สทชอบนอยคอ ควรใชพนหลงเปนสเขมมากกวาสออนเปนพนหลง ซงระยะยาวจะชวยลดความลาของสายตา ในการอานจอภาพอนเนองมาจากความจาของสพน

รปแบบของตวอกษรทใชในการทาเวบไซต

ตวอกษรทเราใชงานกนอยในปจจบนจะแบงออกเปน 4 รปแบบ

ใหญ ๆ คอ

1.Font แบบ Serif จะดเปนระเบยบ เปนทางการ เหมาะจะใชในงานทเปนทางการ และตองการความนาเชอถอมากๆ

Font แบบ San Serif จะอานงาย ดทนสมยมากกวาแบบอน ๆ เหมาะจะใชในงานทตองการ ความทนสมยออกแนวไมเปนทางการมากนก

ตวอยางFont แบบ Serif

ตวอยางFont แบบ San Serif

http://www.km-web.rmutt.ac.th/?p=315�

3..Font แบบ Antique จะเหมาะกบงานทตองการแสดงความชดเจนของยคสมย หรอตองการอามรณยอยยคนดหนอย

4.Font แบบ Script เหมาะกงานทไมเปนทางการ ตองการความเปนกนเองและดสนกสนานมากกวาแบบอนๆ หรอในบางกรณ Font แบบนจะใชในงานทตองการขอความทดเหมอนเปนลายมอเขยน

ตวอยางFont แบบ Antique

ตวอยางFont แบบ Script

วธเลอก Font ไปใชในงานออกแบบ

การเลอก Font ไปใชในงานออกแบบมขอควรคานงงาย ๆ อย 2 ขอคอ

1. ความหมายตองเขากน หมายความวา ความหมายของคาและ Font ทเลอกใชควรจะไปดวยกนได เชน คาวานารกกควรจะใช Font ทดนารกไปดวย ไมควรใช Font ทดเปนทางการดงภาพตวอยาง

ตวอยางfont

2. อารมณของฟอนต และอารมณของงานตองไปในทศทางเดยวกน เชน งานทตองการความนาเชอถอกจะเลอกใช Font แบบ Ser-if ทดหนกแนน นาเชอถอ สวนงานทตองการความฉดฉาดอยางโปสเตอรลดราคากควรจะเลอกใช Font ทเปนกนเองไมเปนทางการมากนกอยาง Font ในกลม Script เปนตน

ตวอยางอารมณของฟอนต และอารมณของงานทเปนไปในทศทางเดยวกน

การวางตาแหนงตวอกษร

มขอควรคานงถงไวใหอย 3 ขอคอ 1.ธรรมชาตการอานของคนไทยจะอานจากซายไปขวา และบนลงลาง โดยมรศมการกวาดสายตาตามลาดบ ดงนนถาอยากใหอานงาย ควรจะวางเรยงลาดบใหดดวย ไมเชนนนจะเปนการอานขามไปขามมาทาใหเสยความหมายของขอความไป

2.จดเดนควรจะมเพยงจดเดยว หรอพดงาย ๆ กคอ มตวอกษรตวใหญๆ อยเพยงชดเดยว จงจะเปนจดเดนทมองเหนไดงาย ไมสบสน สวนจดอน ๆ ขนาดควรจะเลกลงมาตามลาดบความสาคญ

3.ไมควรใช Font หลากหลายรปแบบเกนไป จะทาใหกลายเปนงานทอานยากและชวนปวดศรษะมากกวาชวนอาน ถาจาเปนจรง ๆ แนะนาใหใช Font เดมแตไมตกแตงพวกขนาด, ความหนาหรอกาหนดใหเอยงบาง เพอเพมความนาสนใจไมใหงานดนาเบอแบบนจะดกวา

บรรณานกรม

โซนซา. (2549). ประเภทของเวบไซต. คนเมอ 24 กรกฏาคม

2556. จาก http://www.zoneza.com

วชาการพฒนางานบนเวบ. (2551). การออกแบบโครงสรางเวบไซต.

คนเมอ 24 กรกฏาคม 2556. จาก http://sites.google.com

/site/class0223/webdesign.

วทยาลยสารพดชางพระนคร. (2549). โครงสรางเวบไซต. คนเมอ 24

กรกฏาคม 2556. จาก http://202.29.42.235/~eleaning/

index. php?option=com_content&view.

สาวตร ลมงาม. (2554). แนวทางการพฒนาเวบไซต. คนเมอ 24 กรกฏาคม 2556. จาก http://www.cybered.co.th/ warnuts/wbi/index3.htm . Hellomyweb. (2554). สวนประกอบของเวบไซตทด. คนเมอ 24 กรกฏาคม 2556. จาก http://www.hellomyweb.com / index.php/main/content/134 .

คู่มือ1

Documents

hellomyweb

production

http

www