ความรเบองตนส าหรบการออกแบบเวบเพจ

นางศรสกล วบลยวงศร

ครผสอน

Introduction to Web Design

ศพทเบองตนทควรร

1. โฮมเพจ (Home Page) คอหนาแรกของเวบไซต จะท าหนาทคลาย

หนาปกหนงสอ ค าน า ค าชแจงและสารบญ ดงนนในหนาโฮมเพจจงประกอบดวย

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

เวบไซต (Web site) พฒนามาจากเอกสารอเลกทรอนกส

ทใชรปแบบการเชอมโยงแบบไฮเปอรลงค

หรอไฮเปอรมเดย (Hyperlink/Hypermedia) ถาเปรยบเวบไซตเปนหนงสอเลมหนง

เวบไซต จะมองคประกอบดงน

2. เวบเพจ (Web Page) คอหนาของเวบ

ทบรรจเนอหาตางๆเหมอนเนอหาของหนงสอ

แตออกแบบเปนลกษณะของเอกสารอเลกทรอนกส

ทสามารถเชอมโยงไปยงหนาเอกสารตางๆทตองการ

โดยใชรปแบบการเชอมโยงแบบไฮเปอรลงคหรอ

ไฮเปอรมเดย (Hyperlink/Hypermedia)

ศพทเบองตนทควรร

3. HTML ยอมาจาก Hypertext Markup Langauge

เปนรปแบบของภาษาทใชส าหรบสราง Web Page

4. URL (ยอารแอล) (Uniform Resource Locator) คอ แหลงทอยของเวบไซตใดๆ

เราสามารถเขาถง website หนงได โดยการพมพ URL

เชน URL ของ โรงเรยนกาญจนาภเษกวทยาลย นครปฐมคอ http://www.kjn.ac.th

5. Web Browser เปนโปรแกรมพเศษทใชส าหรบอานและแสดงขอมลทเปนภาษา HTML

เพอใหผใชเครองคอมพวเตอรสามารถเหนผลลพธของเวบเพจนนๆ ได

โดยปจจบนมโปรแกรมทไดรบความนยม เชน Internet Explorer,Google Chrome, firefox

6. Domain Name (โดเมนเนม) เปนชอทถกตงขนเพอใชในการระบถงเวบไซตใดๆ

(ทไมมการซ ากนกบเวบไซตอนๆ) เชน google.com, sanook.com

ศพทเบองตนทควรร

องคประกอบของการออกแบบเวบเพจ

อยางมประสทธภาพ

ความเรยบงาย

(Simplicity)

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

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

- ใชชนดและสของตวอกษรไมมากจนเกนไป

- ในสวนเนอหา ใชตวอกษรสด าบนพนหลงสขาวตามปกต

ความสม าเสมอ

(Consistency)

- ใชรปแบบเดยวกนตลอดเวบไซต (ถาแตละหนาในเวบ

เดยวกนนนแตกตางกนมาก ผใชอาจเกดความสบสนและ

ไมแนใจวาก าลงอยในเวบเดมหรอไม)

- รปแบบของหนา , สไตลของกราฟก , ระบบเนวเกชน

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

องคประกอบของการออกแบบเวบเพจ

อยางมประสทธภาพ

ความเปนเอกลกษณ

(Identity)

- การออกแบบตองค านงถงลกษณะขององคกร เนองจากรปแบบของเวบไซต

สามารถสะทอนถงเอกลกษณและลกษณะขององคกรนนได

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

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

องคประกอบของการออกแบบเวบเพจ

อยางมประสทธภาพ

เนอหาทมประโยชน

(Useful Content)

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

โดยมการปรบปรงและเพมเตมใหทนตอเหตการณอยเสมอ

- เนอหาทส าคญทสดคอ เนอหาทสรางขนมาเองโดยทมงานและไมซ ากบเวบอน

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

องคประกอบของการออกแบบเวบเพจ

อยางมประสทธภาพ

ระบบเนวเกชนทใชงานงาย

(User-Friendly Navigation)

- ระบบเนวเกชนควรออกแบบใหผใชเขาใจไดงายและใชงานสะดวก

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

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

- ถาใชเนวเกชนแบบกราฟกในสวนบนของหนาแลว อาจเพมเนวเกชนทเปนตวอกษรไวทตอนทาย

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

องคประกอบของการออกแบบเวบเพจ

อยางมประสทธภาพ

มลกษณะทนาสนใจ

(Visual Appeal)

- หนาตาของเวบไซตจะมความสมพนธกบคณภาพขององคประกอบตางๆ เชน

คณภาพของกราฟกทจะตองสมบรณ ไมมจดดางหรอมขอบเปนขนบนไดใหเหน

- การใชชนดตวอกษรทอานงาย สบายตา และการใชโทนสทเขากนอยางสวยงาม เปนตน

องคประกอบของการออกแบบเวบเพจ

อยางมประสทธภาพ

การใชงานอยางไมจ ากด

(Compatibility)

- ควรออกแบบเวบไซตใหผใชสวนใหญเขาถงไดมากทสด โดยไมมการบงคบใหผใชตองตดตง

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

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

องคประกอบของการออกแบบเวบเพจ

อยางมประสทธภาพ

คณภาพในการออกแบบ

(Design Stability)

- ถาอยากใหผใชรสกวาเวบมคณภาพและเชอถอได ควรใหความส าคญกบการออกแบบเวบไซตอยางมาก

- เชนเดยวกบสอประเภทอนทตองออกแบบและเรยบเรยงเนอหาอยางรอบคอบ

- เวบทท าขนอยางลวกๆ ไมมมาตรฐานการออกแบบและการจดระบบขอมลนน เมอมขอมลเพมขนเรอยๆ

กจะเกดปญหาและไมสามารถสรางความนาเชอถอจากผใชได

องคประกอบของการออกแบบเวบเพจ

อยางมประสทธภาพ

ระบบการใชงานทถกตอง

(Functional Stability)

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

ตวอยางเชน ลงคตางๆ ทมอยนนจะตองเชอมโยงไปยงหนาทมปรากฏอยจรงและถกตอง

องคประกอบของการออกแบบเวบเพจ

อยางมประสทธภาพ

ขอควรค านงในการออกแบบเวบเพจ

- มเนอหาทเปนประโยชน ตรงกบทผใชตองการ

- มการปรบปรงเนอหา และพฒนาเวบไซตอยเสมอ

- ใชเวลาในการดาวนโหลดนอย แสดงผลเรว - การใชงานทสะดวก เขาใจงาย

- มรายการสารบญแสดงรายละเอยดของเวบ

- มเนอหากระชบ สนและทนสมย

- สามารถโตตอบกบผใชไดอยางทนทวงท

- มการเชอมโยงขอมลไปยงจดหมาย

ไดตรงตามความตองการมากทสด

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

1. การเตรยมความพรอม

เปนขนตอนทผสรางเวบระดมความคดในกลม ในประเดนตอไปน:-

- สรางเวบท าไม และเพออะไร

- สรางเวบไซตใหใคร และใครคอกลมเปาหมาย

- ศกษาความเปนไปไดของเรองทสนใจท าวานาสนใจเพยงใด มขอมลเพยงพอหรอไม

- เรองทท าตอนนมอยแลวในอนเทอรเนตมากนอยแคไหน

- เวบของเราจะแตกตางจากของทมอยแลวอยางไร

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

2. การวางแผน

(Planning)

เปนขนตอนทผสรางเวบจะตองรวบรวมขอมลทตองการจะน ามาสรางเวบ

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

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

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

3. การออกแบบ

(Design)

เปนขนตอนทน าขอมลและแผนทวางไวไปปฏบต โดยการลงมอปฏบต

โดยจดพมพเนอหา ก าหนดการเชอมโยง

และคณลกษณะอนทตองใชในเวบ

วางรปแบบโครงสรางเวบโดยก าหนดเปนแผนภมเวบไซต (Site Map)

การออกแบบกจะเนนทการจดหนาจอของเวบใหสอดคลองกนและ

ระมดระวงปญหาตางๆ ในการออกแบบ

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

4. การพฒนา

(Development)

เปนขนตอนทตอเนองจากการออกแบบและการสราง โดยเนนไปทการตกแตงและเสรม

เครองมอตางๆ ส าหรบเวบ เชน การก าหนดส ภาพ ชวยใหเวบเราความสนใจ และเพมเตม

เทคนคตาง ๆ ของโปรแกรมสนบสนนการสรางเวบ

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

5. การเผยแพรและการบ ารงรกษา

(Publishing& Maintenance)

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

อนเทอรเนต หรอจะเรยกวา การอบโหลด (Up load) ซงเปนขนตอนทจะตองด าเนนการอยเสมอ

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

ตองปรบปรงเปลยนแปลงเวบเพมเตมใหทนสมยอยเสมอ เรยกวาการอบเดท (Up date)