คอมพวเตอรเพอการออกแบบเวบไซต (Computer for Web Design)

สปดาหท 10

โดย อ.วสทธ ศรพรนพคณ

2

เนอหา• ค ำศพทเกยวกบเวบไซต

• หลกในกำรออกแบบเวบไซต

• องคประกอบของกำรออกแบบเวบไซต

• โครงสรำงเวบไซต

• ขนำดของเวบไซต

• สวนประกอบของเวบเพจ

ค าศพทเกยวกบเวบไซต

4

ค ำศพทเกยวกบเวบไซต• เวบไซต (Web site)

– แหลงขอมลทบรรจอยบนเครอขำยอนเตอรเนต หนงสอหนงเลม

• เวบเพจ (Web page)– หนำทแสดงเอกสำร เนอหำของเวบไซต เอกสำรแตละหนำ

• โฮมเพจ (Home page)– หนำแรกของเวบไชต ปกของหนงสอ

ค ำศพทพนฐำน• Bookmark วธกำรของบรำวเซอรในกำรจดจ ำเวบเพจทตองกำรจะกลบมำใน

ภำยหลง เหมอนกบกำรใสทคนหนงสอไวตรงหนำทตองกำรกลบมำอำนอกในครงตอไป

• Browser โปรแกรมทใชในกำรแสดงเวบเพจหรอเอกสำรประเภท HTML เชน Microsoft Internet Explorer , Google Chrome และ Mozilla Firefox เปนตน

ค ำศพทพนฐำน• Cookie ขอมลบำงอยำงทเวบเชรฟเวอรเกบไวในฮำรดดสกของผ ใช เพอ

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

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

• FTP (File Transfer Protocol) มำตรฐำนในกำรสงผำนขอมลระหวำงคอมพวเตอร เมอผออกแบบไดสรำงเวบเสรจแลว จะตองใชระบบ FTP นในกำรอพโหลดไฟลทงหมดไปเกบบนเวบเชรฟเวอร

ค ำศพทพนฐำน

• Hyperlink / Hypertext Link / Link หรอเรยกกนสน ๆ วำ ลงค คอระบบกำรเชอมโยงขอมล ในเวบเพจ โดยทเมอคลกในสวนทเปนลงคแลวบรำวเซอรจะท ำกำรเปดไฟลหรอเวบเพจทถกอำงถงนนขนมำใหม

• Hypertext Markup Language (HTML) ภำษำมำตรฐำนทใชในกำรสรำงเวบเพจเพอน ำไปแสดงผลในบรำวเซอร ซงอำจจะประกอบดวยตวอกษร , กรำฟก , ลงค และองคประกอบอน ๆ เชน เสยงและวดโอ

• Navigation System ระบบกำรน ำทำงในเวบไซต ซงกคอกลมของลงคทจะท ำหนำทพำผใชไปยงสวนตำง ๆ ภำยในเวบไซต

ค ำศพทพนฐำน

• Cascading Style Sheet (CSS) ขอมลทใชก ำหนดลกษณะขององคประกอบตำง ๆ ในหนำเวบ เชน ตวอกษร , ส , พนหลง , หรอต ำแหนงของกรำฟก ท ำใหผออกแบบสำมำรถก ำหนดรปแบบและสไตลขององคประกอบทกหนำไวในทเดยวกนได

• Common Gateway Interface (CGI) มำตรฐำนในกำรตดตอสอสำรระหวำงบรำวเซอรกบโปรแกรมบนเชรฟเวอร โปรแกรมตำง ๆ ทท ำงำนในเวบไซต เชน Counter , Web Board , Form Submission และ Chat Room ลวนอำศยมำตรฐำนในกำรสอสำรแบบนทงสน

วธกำรสรำงเวบเพจ

วธกำรสรำงเวบเพจ

• สรำงดวยภำษำ HTMLโดยกำรใชโปรแกรมสรำงเอกสำร (Text Editor) โดยทวไป เชน โปรแกรม NotePad โดยกำรใสค ำสง (Tag) ของภำษำ HTML เขำไปโดยตรง วธนผสรำงตองมประสบกำรณและกำรเรยนรภำษำ HTML มำกอน

• สรำงดวยโปรแกรมประยกตเปนกำรสรำงแบบทเรยกวำ WYSIWYG (What-You-See-Is- What-You-Get) เชน Dreamweaver, FrontPage เปนตน

11

โปรแกรมชวยในการสรางเวบ• Macromedia Dreamweaver

• Microsoft FrontPage

• Allaire HomeSite

• CoffeeCup

• GoLive

• HotDog Pro

• HotMetaPro

• NetObjects Fusion

12

Macromedia Dreamweaver

• สำมำรถออกแบบหนำเวบไดอยำงสะดวกโดยอำศยเครองมอตำง ๆ โดยไมจ ำเปนตองรเกยวกบภำษำ HTML

• มหนำจอในกำรแสดงหนำจอกำรออกแบบและหนำจอค ำสง

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

• มเครองมอเพอชวยในกำรดำวนโหลดและอพโหลดไฟลระหวำงเครองเซรฟเวอรกบเครองทใชพฒนำเวบเพจ

13

Microsoft FrontPage

• ลกษณะกำรท ำงำนใกลเคยงกบโปรแกรมอน ๆ ทอยในชด Office• มระบบอ ำนวยควำมสะดวกแบบ Wizard• มระบบในกำรบรหำรจดกำรเวบไซต เชน ระบบรำยงำนเกยวกบหนำเวบเพจทแสดงผลชำ เวบเพจทถกเพมเขำไป ลงคทใชงำนไมได

• สำมำรถเชอมโยงกบระบบฐำนขอมลไดโดยสะดวก• บำงครงอำจมค ำสงเพมเตมเขำมำเกนควำมจ ำเปน หรออำจเปลยนแปลงโคดโดยไมรตว

14

Allaire HomeSite

• ชวยในกำรเขยนโคดภำษำ HTML ดวยคณสมบตทเรยกวำ Tag Insight และ Function Insight ซงจะแสดงแอตตรบวตทเหมำะสมขนมำใหเลอกใชกบแทกทก ำลงเขยน

• เหมำะส ำหรบนกออกแบบเวบทถนดในกำรใชภำษำ HTML

หลกในการออกแบบเวบไซต

ก ำหนดเปำหมำยของเวบไซต

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

ก ำหนดกลมผใชเปำหมำย

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

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

- ขาวและขอมลทนาสนใจ - ความบนเทง

- ของฟร

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

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

- ขอมลเกยวกบบรษท - ค าถามยอดนยม

- รายละเอยดของผลตภณฑ - ขอมลในการตดตอ

- ขาวความคบหนาและขาวจากสอมวลชน

รปแบบของโครงสรางเวบไซต

1. แบบเรยงลาดบ ( Sequence ) เหมำะสำหรบเวบไซตทมจ ำนวนเวบเพจไมมำกนก หรอเวบไซตทมกำรนำเสนอขอมลแบบทละขนตอน

2. แบบระดบชน ( Hierarchy ) เหมำะสำหรบเวบไซททมจำนวนเวบเพจมำกขน เปนรปแบบทเรำจะพบไดทวไป

แบบผสม ( Combination ) เหมำะสำหรบเวบไซททซบซอน เปนกำรนำขอดของรปแบบทง 2 ขำงตนมำผสมกน

องคประกอบของการออกแบบเวบไซต

องคประกอบของกำรออกแบบเวบไซต• ควำมเรยบงำย (Simplicity)

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

• สอสารเนอหาถงผใชโดยมเฉพาะองคประกอบเสรมทจ าเปนเทานน

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

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

องคประกอบของกำรออกแบบเวบไซต

• ความเปนเอกลกษณ (Identity)

• กำรออกแบบตองค ำนงถงลกษณะขององคกร

• รปแบบของเวบไซตสำมำรถสะทอนถงเอกลกษณขององคกร

• เนอหาทมประโยชน (Useful Content)

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

• ควรมกำรปรบปรงและเพมเตมใหทนตอเหตกำรณอยเสมอ

องคประกอบของกำรออกแบบเวบไซต

• ระบบเนวเกชนทใชงานงาย (User-Friendly Naviagtion)

• ระบบเนวเกชนจะตองออกแบบใหผใชเขำใจงำยและใชงำนสะดวก โดยใชกรำฟกทสอควำมหมำยรวมกบค ำอธบำยอยำงชดเจน

• มรปแบบและล ำดบของรำยกำรอยำงสม ำเสมอ

• มลกษณะทนาสนใจ (Visual Appeal)

• ควำมนำในใจของเวบไซตจะมควำมสมพนธกบคณภำพขององคประกอบตำง ๆ เชน คณภำพของกรำฟก กำรใชชนดตวอกษร กำรใชโทนส เปนตน

องคประกอบของกำรออกแบบเวบไซต

• การใชงานอยางไมจ ากด (Compatibility)• ควรออกแบบเวบไซตใหครอบคลมกบผใชสวนใหญมำกทสด

• ไมควรมกำรตดตงโปรแกรมเพมเตม หรอเลอกใชบรำวเซอรชนดใดชนดหนง

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

• คณภาพในการออกแบบ (Design Stability)• ควรใหควำมส ำคญกบกำรออกแบบเวบไซต

• ควรมมำตรฐำนกำรออกแบบและกำรจดระบบขอมล

องคประกอบของกำรออกแบบเวบไซต

• ระบบการใชงานทถกตอง (Functional Stability)• ระบบกำรท ำงำนตำง ๆ ในเวบไซตจะตองมควำมแนนอนและท ำหนำทไดอยำงถกตอง เชน กำรกรอกขอมล กำรเชอมโยง เปนตน

• ควรมกำรตรวจสอบกำรท ำงำนอยเสมอ

โครงสรางของเวบไซต

ขนำดหนำจอคอมพวเตอร

กำรออกแบบหนำเวบเพจขนำดของหนำโฮมเพจ กำรออกแบบหนำโฮมเพจทนยมใชงำนม 3 ขนำด คอ

• 640 x 480 pixels

• 800 x 600 pixels

• 1024 x 768 pixels

Header(ประชาสมพนธ)

Body(ชแจงเนอหาทงหมด)

Footer(จดสนสด)

1. Logo บอกความเปนเอกลกษณของบรษท จดจ าไดงาย นยมไวสวนบนสดของเวบไซต

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

3. Content สวนเนอหำ เปนหวใจหลกของเวบไซต สำมำรถท ำใหผ ใชตดสนใจอำนตอหรอจะออกจำกเวบไซตภำยใน

เวลำไมนำนได ถำผ ใชไมสำมำรถหำขอมลทตวผ ใชสนใจได

4. Footer นยมน ำลงคทเกยวของมำไวท Footer เนอหำทเกยวกบเวบไซตเชนลขสทธตำงๆ

5. White space ชวยให design ดไมอดอดจนเกนไป กำรม White space มควำมส ำคญเทยบเทำกบ กำรม content

THE END

Question & Anser