บทเรียนท่ี1 (หนวยการเรียนรูท่ี 1)

1. ทําความรูจักเว็บเพจ

เว็บเพจ คือ เอกสารที่ใชในการเผยแพรขอมูล ซ่ึงประกอบดวยขอมูลแบบส่ือประสม

เชนขอความ,ภาพ,ภาพเคล่ือนไหว,เสียงเปนตนโดยการนําเสนอผานทางระบบเครือขายอินเทอรเน็ต

ซ่ึงมีความแตกตางกันไปตามวัตถุประสงคการใชงาน

ตัวอยางหนาเว็บเพจ

2. ประโยชนของเว็บเพจ

ปจจุบันเปนยุคของขอมูลขาวสารที่เรามักไดยินคําวายุค IT หรือ เทคโนโลยีสารสนเทศ มีการพัฒนา

ระบบส่ือสารทําให สารสนเทศ ตาง ๆ สงผานถึงกันไดสะดวกขึ้น มีการนําระบบเทคโนโลยีสารสนเทศและ

การส่ือสาร Information and Communication Technology (ICT ) เขามาใชในชีวิต ประจําวันมากขึ้น

เว็บเพจ สามารถเผยแพรขอมูลในรูปแบบตาง ๆ เชน

1.ขอมูลทางการศึกษา เชน ความรูทางวิชาการตาง ๆ

2.ประชาสัมพันธบริษัทและองคกรตาง ๆ

3.ความบนัเทิง

4.ขาวเหตุการณปจจุบัน

5.การซ้ือ-ขายสินคา และบริการตาง ๆ

6.การดาวนโหลดขอมูล

7.บริการติดตอส่ือสาร เชน การรับสง E-mail

3.เว็บเพจทํางานไดอยางไร

กอนที่จะสรางเว็บเพจตองทําความเขาใจการทํางานและการแสดงผลของเว็บเพจกอน

เพ่ือจะไดวางแผนการสรางเว็บเพจไดอยางถูกตอง

จากภาพจะเห็นวาการทํางานเปนขั้นตอนตาง ๆ ดังนี ้

ขั้นตอนที ่1 ผูใชพิมพตําแหนงเว็บเพจในโปรแกรมบราวเซอร ก็จะมีการรองขอขอมูล

ไฟลเว็บเพจหนานั้นไปยังเครื่องเซิรฟเวอร (Server คือ เครื่องที่เก็บและเผยแพรเว็บเพจ)

ขั้นตอนที่ 2 ฝงเซิรฟเวอรจะทําการคนหาไฟลเว็บเพจตัวที่ถูกรองขอ

ขั้นตอนที ่3 เว็บเซิรฟเวอรสงขอมูลไปยังเครื่องผูใชและแสดงผลบนบราวเซอร

ไฟลเว็บเพจจะเปนไฟลโปรแกรมภาษา HTML ที่เปนตัวกําหนดใหบราวเซอรแสดง

ขอความ และดึงขอมูลภาพ เสียง วิดีโอ ออกมาแสดงใหอยูในรูปแบบและตําแหนง

ตามที่โปรแกรมกําหนด

ตัวอยางเว็บเพจท่ีเปนภาษา HTML

ผลการรันบนเว็บเบราวเซอร

4.คําศัพทพื้นฐานเกี่ยวกับการสรางเว็บเพจ

เซิรฟเวอร (Server) และ ไคลเอนต (Client)

การติดตอส่ือสารบนระบบเครือขายอินเทอรเน็ตที่มีเครื่องคอมพิวเตอรเช่ือมตอเขาดวยกันทั่วโลกนั้น

จะมีการติดตอส่ือสาร 2 แบบ คือ แบบสงขอมูลและรับขอมูล โดยเครื่องคอมพิวเตอรที่ทําหนาที่ในการสง

ขอมูล เรียกวา เครื่องใหบริการ (server) หรือบางทีอาจเรียกวา "เครื่องแมขาย" สวนเครื่องคอมพิวเตอรที ่

รับขอมูลหรือ เรียกขอขอมูลจากเครื่องแมขายไปใช งานจะเรียกวา เครื่องรับบริการ (Client)หรือบางทีอาจ

เรียกวา "เครื่องลูกขาย"

เครือขายใยแมงมุม WWW (World Wide Web)

เปนบริการรูปแบบหนึ่งในระบบอินเทอรเน็ต ที่เราทุกคนคุนเคยและใชบริการนี้กันอยูทุกวันในการใช

งานระบบ อินเทอรเน็ต ี่เราเรียกส้ันวา "เว็บ" นั่นเอง โดยการสรางเอกสารในอินเทอรเน็ต จะมีลักษณะ

ที่พิเศษกวาเอกสารทั่วไป ตรงที่สามารถใสจุด เช่ือมโยง (Links) ไปยังเอกสารอ่ืน ไดมากมาย โดย

เอกสารหลายมิติที่กลาวนี้จะถูกเรียกวา Hypertext หรือเอกสาร HTML นั่นเอง เอกสารเหลานี้จะถูก

แสดงดวยโปรแกรมเฉพาะที่เรียกวา เว็บเบราวเซอร (Web Browser) โดยขอความในเอกสารนั้นสามารถ

เช่ือมโยงไปเปดเอกสารอ่ืนขึ้นมาไดอีก การที่เอกสารสามารถเช่ือมโยงกันไดทําใหเกิดการเช่ือมโยง

ระหวางเอกสารในอินเทอรเน็ตที่มีอยูทั่วโลกโยงกันไปมา จนดูราวกับ เปนใยแมงมุม จึงทําใหระบบนี ้

ถูกเรียกวา เครือขายใยแมงมุมทั่วโลก (World Wide Web) หรือ WWW หรือที่นิยมเรียก กันยอ ๆ วา

เว็บ (Web)

เว็บไซต (Web Site) คือ กลุมของเว็บเพจหลาย ๆ หนา โดยมีโฮมเพจเปนเว็บเพจหนาแรก

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

ขอมูลของ บุคคล องคกร หรือหนวยงานตางๆ บนระบบอินเทอรเน็ต

Home Page คือ หนาแรกที่แสดงขอมูลของเว็บไซต หรือ WWW (World Wide Web) เพ่ือเปนการประชาสัมพันธ

หรือ เปนการดึงดูด ใหเขาไปชมขอมูลภายใน ซ่ึงภายในโฮมเพจอาจมีเอกสารขอความอ่ืนๆที่เรียกวา เว็บเพจ

(web page) เช่ือมโยงตอจากโฮมเพจนั้น

ตัวอยางหนาโฮมเพจของเว็บไซต http://www.tapanpitthayaschool.com

เว็บเบราวเซอร (Web Browser)

เว็บเบราวเซอร คือ โปรกรมที่เปนประตูสูโลก World Wide Web ซ่ึงเปนโปรแกรมที่อยูในเครื่องคอมพิวเตอร

ลูกขาย (Client) มีหนาที่ในการสงขอมูล รองขอและนําเสนอขอมูลเว็บ โดยตัวเว็บเบราวเซอรจะเขาใจในภาษา

HTMLที่เปนมาตรฐานของเว็บเบราวเซอรที่ไดรับความนิยมในปจจุบัน ไดแก Netscape Navigator และ

Microsoft Internet Explorer

เว็บเซิรฟเวอร (Web Server)

เปนที่เก็บเว็บเพจ เม่ือใดที่เราตองการเปดดูเว็บเพจ เราตองใชเบราวเซอรดึงขอมูล โดยที่เบราวเซอรจะทํา

ทําการติดตอกับเซิรฟเวอรที่เก็บเว็บไซตนั้น เพ่ือใหมีการโอนยายขอมูลาแสดงที่เครื่องของเรา

ไอพีแอดเดรส (IP Address)

ที่อยูของเว็บไซต โดยระบุเปนตัวเลขเปนชุด ๆโดยมีจุดคั่นแตละชุด เชน 192.168.1.1 แตละเว็บไซตจะมี

ที่อยูในระบบอินเทอรเน็ต เปนชุดตัวเลข เว็บไซตละ 1 ชุดโดยไมซํ้ากันคลายกับบานเลขที่นั่นเอง

โดนเมนเนม (Domain Name)

ที่อยูของเว็บไซต แตเปนการนําตัวอักษรมาแทนตัวเลข เชน www.moe.go.th เพ่ือใหจดจําไดงายขึ้น เนื่องจาก

ไอพีแอดเดรสนั้น เปนชุดตัวเลข ที่มีความยาวทําใหยากตอการจดจํา จึงไดมีการใช โดเมนเนม (Domain Name)

แทน โดเมนเนมจะไมซํ้ากัน มักจะตั้งช่ือใหสอดคลองกับช่ือบุคคล องคกร หรือหนวยงานผูเปนเจาของเว็บไซต

เพ่ือสะดวกในการ จดจําช่ือ ตัวอยาง เชน เว็บไซตมหาวิทยาลัย abc มีไอพีแอดเดรส เปน

206.217.189.19 เพ่ือใหจดจําช่ือเว็บไซตไดงายขึ้นและสะดวกตอการเขาใชงานเว็บไซตสามารถเปล่ียนเปน

โดเมนเนมคือ www.abc.ac.th แทน เปนตน

ประเภทของโดเมนเนม

โดเมนเนมเปนช่ือของเว็บไซตแบงโดเมนเนมตามลักษะของช่ือออกเปน 2 ประเภท คือ

โดเมนเนม 2 ระดับ และโดเมนเนม 3 ระดับ

โดเมนเนม 2 ระดับ

เชน www.sanook.com หรือ www.hunsa.com

www คือ ประเภทการใหบริการแบบ World Wide Web

สวนท่ี 1 .sanook หรือ hunsa เปนช่ือ หรืออักษรยอของบริษัท หรือหนวยงานเจา

ของเว็บไซต

สวนท่ี 2 .com เปนอักษรยอของประเภทองคกร ซ่ึงที่พบบอยมีดังนี ้

.com เปนบริษัทหรือองคกรพาณิชย เชนบริษัทโซนี่ (www.sony.com)

.edu เปนสถาบันการศึกษา เชน มหาวิทยาลัยฮารวารด (www.harvard.edu)

.gov เปนองคกรของรัฐบาล เชน องคการนาซา (www.nasa.gov)

.mil เปนองคกรทางทหาร เชน กองทัพอากาศสหรัฐอเมริกา (www.af.mil)

.net เปนองคกรที่ทําหนาที่เปนเกตเวยหรือจุดเช่ือมตอเครือขาย หรือใหบริการดาน

อินเทอรเน็ต(www.mci.net)

.org เปนองคกรที่ไมเขาขายองคกรทั้งหมดที่ไดกลาวถึง

.biz เปนบริษัทหรือองคกรทางธุรกิจ

.info ใชในโอกาสโฆษณาสินคา หรือเหตุการณสําคัญ

โดเมนเนม 3 ระดับ

เชน www.su.ac.th , www.moe.go.th หรือ www.school.net.th

www คือ ประเภทการใหบริการแบบ World Wide Web

สวนท่ี 1 su, moe, school เปนช่ือหรือช่ือยอขององคกรตาง ๆ เชน su คือ ช่ือยอ

ของมหาวิทยาลัยศิลปากร

สวนท่ี 2 .ac , .go , .net คํายอในสวนที่ 2 หลังเคร่ืองหมายจุด เปนประเภทของ

องคกร

สวนท่ี 3 .th คํายอในสวนที่ 3 หลังเครื่องหมายจุด เปนที่ตั้งขององคกรนั่น

ตัวยอสวนท่ี 2 ท่ีพบบอย คือ

.co หมายถึง บริษัทหรือองคกรพาณิชย

.ac หมายถึง สถาบันการศึกษา

.go หมายถึง องคกรของรัฐบาล

.or หมายถึง องคกรไมแสวงหาผลกําไร

.net หมายถึง องคกรที่ใหบริการเครือขาย

ตัวยอสวนท่ี 3 คืออักษรยอของประเทศตาง ๆ ท่ีองคกรนั้นตั้งอยู เชน

.th หมายถึง ประเทศไทย

.cn หมายถึง ประเทศจีน

.jp หมายถึง ประเทศญ่ีปุน

.au หมายถึง ประเทศออสเตรเลีย

ตําแหนงอางอิงเว็บเพจ URL (Uniform Resource Locator)

URL คือตําแหนงอางอิงเว็บเพจในระบบอินเทอรเน็ต ซ่ึงมีสวนประกอบดังภาพดานบน

ซ่ึงมีรายละเอียดดังนี ้

Content identifier คือ สวนที่แจงใหเบราวเซอรทราบวาตองจัดการขอมูล

ที่พบอยางไร สําหรับ บริการ WWW จะใช โปรโตรคอลมาตรฐานช่ือ HTTP (Hypertext TRansfer

Protocol)

สวน FTP เปน อีกโปรโตคอลเก่ียวกับ การโอนยายไฟลขอมูล

Host name คือ สวนที่ระบุช่ือเว็บไซต สวนใหญมักถูกเรียกวาโดเมนเนม แตละเว็บไซต

จะมีโดเมนเนมไมซํ้ากัน

สวนระบุตําแหนง คือ ระบุที่เก็บเว็บไซตในเครื่อง

ช่ือไฟลขอมูล คือ สวนสุดทายของ URL จะเปนช่ือไฟลขอมูลเว็บเพจที่เราสรางขึ้น มักมี

นามสกุลเปน .html หรือ .htm หากไมระบุสวนนี้เบราวเซอรจะถือวา ไฟลที่ตองการเรียกดู

คือ index.html

ซ่ึงสวนใหญช่ือนี้จะตั้งใหกับ หนาโฮมเพจเสมอ ดังนั้นจะเห็นไดวา การเขาเว็บไซตตาง ๆ โดย

โปรแกรมเบราวเซอร นั้นตองระบุที่อยู (Address) ของเว็บไซต ซ่ึงสามารถทําได 3 รูปแบบคือ ระบุ เปน

IP Address , Domain Name หรือ URL ก็สามารถทําได อาจกลาว โดยสรุปไดวา IP Address ,

Domain Name หรือ URL ก็คือที่อยูของเว็บไซตนั้นเอง

ช่ือโดเมนจะแบงออกเปนระดับช้ัน โดยอาจจะเปน 2 ระดับ หรือ 3 ระดับ ก็ได โดยแตระดับจะ

ถูกคั่นดวยเครื่องหมายจุด เหมือนกับ IP Address หรือ Internet Address

Thailandsportonline.com ช่ือโดเมน 2 ระดับ

Siamsport.co.th ช่ือโดเมน 3 ระดับ

สวนแรกจะหมายถึงช่ือองคกร สวนที่สองจะเปนสวนขยายบอกประเภทขององคกร เชน เปนองคกรเอกชน หรือ

องคกรของรัฐบาล และสวนที่สามจะเปนสวนขยายบอกประเทศที่เครื่องคอมพิวเตอรนั้นตั้งอยู

Siamsport ช่ือองคกร

co สวนขยายบอกประเภทขององคกร

th สวนขยายบอกประเทศ

5. โปรแกรมออกแบบเว็บเพจ

ในอดีตที่ผานมาการที่จะสรางเว็บเพจสักหนาใหมีความสวยงามดูเปนเรื่องที่ยากและ

ยังตองจดจําคําส่ังตาง ๆ ที่ใชในการเขียนโปรแกรมอยางมากมาทําใหผูใชไมคอยนิยมที่จะศึกษา

และพยายามทําเว็บเพจดวยตนเอง โดยสวนใหญจะไปจางบริษัทตาง ๆ ที่มีโปรแกรมเมอรฝมือดี

เขียนใหแตปจจุบันมีโปรแกรมสําเร็จรูปที่ชวยในการสรางเว็บเพจของตัวเองไดแลว การสราง

เว็บเพจในปจจุบันสามารถทําได 2 วิธี คือ

1. สรางขึ้นดวยตนเอง โดยการใชคําส่ังตาง ๆ ของภาษา HTML แลวส่ังงานผาน

ทางโปรแกรม Text Editor เชน Notepad

2. สรางจากโปรแกรมสําเร็จรูปทั่วไป โดยใชโปรแกรมตาง ๆ ที่มีความสามารถใน

การสรางเว็บเพจ ซ่ึงปจจุบันมีใหเลือกใชอยางมากมาย เชน FrontPage, Dream weaver หรือแม

แตโปรแกรม Microsoft Office ก็สามารถสรางเว็บเพจได ผูที่ใชโปรแกรมสําเร็จรูปพวกนี้ไมจําเปน

ตองรูคําส่ังตาง ๆ ของภาษา HTML ใหยุงยากเลย เพราะโปรแกรมเหลานี้จะทําการเปล่ียนขอมูล

ตาง ๆ ที่ทําไวใหเปนภาษา HTML โดยอัตโนมัติ ตัวอยางโปรแกรมสําเร็จรูปที่ใชสําหรับสรางเว็บเพจ

ในปจจุบันนี ้ ไดแก

- Microsoft FrontPage 2000, 2003 เปนโปรแกรมของบริษัท

ไมโครซอฟท ซ่ึงจะมีรูปแบบการใชงานที่ผูใชคอมพิวเตอรคุนหนาคุนตามากที่สุด เพราะรูปแบบของ

โปรแกรม จะเหมือนกับพวกโปรแกรมในกลุมของ Microsoft Office ที่เคยใชงานกันมา จนคุนมือแลว

ทําใหผูใชไมตองปรับตัวในการใชงานกันมากนัก ไมวาจะเปนไอคอนหรือคําส่ังตางๆ จะมีหนาตา

เหมือนกับ Microsoft Office แทบทุกอยางผูใชโปรแกรมนี้ไมจําเปนตองมีพ้ืนฐานทางดาน

การเขียน HTML แตอยางใด เพียงแคเคยใชงาน Microsoft Word ก็จะ สามารถ สราง เอกสาร

เว็บเพจดวย โปรแกรม FrontPage ไดเลย ส่ิงที่เห็นที่หนาจอก็คือส่ิงที่จะไปปรากฏบน

เว็บเบราวเซอร นอกจากนั้นยังรองรับการทํางานของจาวาสคริปตและ DHTML หากไมตอง

การสรางเว็บเพจหรือ ออกแบบดวยตนเอง ตัวโปรแกรมยังมีเท็มเพลตชวยสรางแบบสําเร็จรูป ทําให

ผูใชสามารถสรางเว็บเพจไดรวดเร็ว และงายขึ้น

- Macromedia Dreamweaver 4, UlTRa dev, MX, MX 2004 เปนโปรแกรม

จาก คาย Macromedia โปรแกรมนี้ใชงานงายไมแพโปรแกรมแรกและไดรับความนิยมในหมูผูเขียน

เว็บเพจกันอยางมากเนื่องจากเม่ือ พิมพ อะไรในโปรแกรมก็จะสามารถดูตัวอยางแสดงผลลัพธ

บนเว็บเบราวเซอรได ทันทีตลอดเวลา เวลาสราง ใชการลากเครื่องมือที่ตองการมาวางบนพ้ืนที ่

ทํางานผูสรางเว็บเพจไมจําเปนตองมีความรูดานการเขียน HTMLสามารถใชงานได อีกเชนกัน

แตหากมีความรูทาง ดานภาษา HTML ก็จะสามารถปรับแตงโคดตางๆ ไดเชนกัน เครื่องมือ

ตาง ๆ ใชงานงาย สนับสนุน การใชงาน จากคายบริษัทเดียวกัน เชน โปรแกรม Firework หรือ

Flash โปรแกรมสองตัวนี้ใชสําหรับสรางงานกราฟกตาง ๆ ไดอยางมีประสิทธิภาพและนํามา

ใชบนDreamweaver ได ทันที ทําใหไดรับความนิยมจากผูเขียนเว็บเพจที่ชอบดานกราฟก

อนิเมช่ันเปนอยางมาก

- NetObjects Fusion 5.0 เปนโปรแกรมที่ผูเขียนไมตองมีความรูดานภาษา HTML

เลย ก็สามารถสรางเว็บเพจไดเพียงคลิก ลาก แลววาง หรือเลือกรูปแบบของเลยเอาตสําเร็จรูปที่

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

ของเว็บไซตทั้งหมดใหเห็นพรอมทั้งตรวจสอบ อัพเดตการเช่ือตอ

ของเว็บเพจตาง ๆ และสวนประกอบอ่ืน ๆ ใหอัตโนมัติ เม่ือสรางเว็บไซตเสร็จแลวโปรแกรม

ยังสรางที่เก็บขอมูลตาง ๆ ใหอัตโนมัติอีกดวย

- Namo เปนโปรแกรมของบริษัท นาโม ประเทศไทย มีเครื่องมือและลูกเลนของจาวา

สคริปต ใหใชเยอะและสามารถใชไดงายคลายกับ Microsoft FrontPage

6.หลักการออกแบบเว็บเพจ

1. ตองอานงายสบายตา ตัวหนังสือที่ใชนั้นตองไมเล็กเกินไปหรือไมใหญเกินไป และควรใชสีที่ตัด

กับพ้ืนหลัง เชน พ้ืนหลังสีขาวไมควรใชตัวอักษรสีเขียวออน,เหลือง หรือสีอ่ืนที่ออนๆ จาง ๆ

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

ไมควรมีขนาดใหญมาก ทําใหไมนาอานและการโหลดขอมูลทําไดชา

3. ขอมูลตองเปนปจจุบัน สวนนี้เปนสําคัญของเว็บ ควรมีการปรับปรุงขอมูล ทุก ๆ 2 - 3 วันตอครั้ง

หรือ 1 อาทิตยครั้ง ผูใชจะไดติดตามความเคล่ือนไหวของขอมูลที่เปนปจจุบัน

4. เนื้อหาถูกตอง อยาปลอยใหมีคําผิดถาขอมูลที่ใชมีคําผิดจะทําใหเว็บเพจขาดความนาเช่ือถือ ดูดอยไปไม

เหมาะที่จะนําไปอางอิง

5. มีขอมูลอางอิงแผนที่หรืออ่ืน ๆควรแสดงใหผูใชเห็นชัดเจนและเปนจริงที่สุดเพ่ือการติดตอ

กลับที่สะดวกหรือเปนไปได โดยแสดงในสวนทายของทุกเว็บเพจ

7. การออกแบบเว็บเพจ

หนาโฮมเพจ

เปนเว็บเพจหนาแรกที่เปนเหมือนหนาสารบัญของหนังสือสําหรับมองเห็นขอมูล ที่อยูดานใน

ตัวอยางหนาเว็บเพจหนาแรก

กรณีท่ี หัวขอสําหรับการลิงคเปนแนวตั้ง

การออกแบบหนาเว็บเพจทําไดหลากหลายรูปแบบ ผูเขียนสามารถศึกษาจากตัวอยางเว็บไซตอ่ืน ๆ

กอนออกแบบ

หนาเว็บเพจ

โดยทั่วไปแลว หนาเว็บเพจจะแบงออกเปนสวนหลัก ๆ ดังนี้คือ

จากตัวอยางเว็บเพจ แตละหนา จะประกอบไปดวยหลัก ๆ คือ

1. สวนหัว (Page HEADer)

อยูตอนบนสุดของหนาเว็บเพจ เปนบริเวณที่สําคัญที่สุด เนื่องจากผูเขาเย่ียมชมเว็บไซตจะมองเห็นกอนบริเวณอ่ืน สวนใหญ

นิยมใชวางโลโก ช่ือเว็บไซต ปายโฆษณา ลิงคสําหรับการติดตอ หรือลิงคที่สําคัญ และระบบนําทาง

2. สวนเนื้อหา (Page BODY)

อยูตอนกลางหนา ใชแสดงเนื้อหาภายในเว็บเพจซ่ึงอาจประกอบไปดวยขอความ ภาพกราฟก

ตารางขอมูล และอ่ืน ๆ บางครั้งเมนูหลักหรือเมนูเฉพาะกลุม อาจอยูในสวนนี้ก็ได โดยมักวางไว

ดานซายมือสุด เนื่องจากผูเขาชมจะมองเห็นไดงาย

3. สวนทาย (Page Footer)

อยูดานลางสุดของหนาเว็บเพจ สวนใหญจะนิยมใชวางระบบนําทางภายในเว็บไซตแบบที่

เปนลิงคขอความงาย ๆ นอกจากนี้ก็อาจจะมีช่ือของเจาของเว็บไซต ขอความแสดงลิขสิทธ์ิ

และอีเมลแอดเดรส (E-mail Address) ของผูดูแลเว็บไซต

8.การนําเว็บเพจไปสรางเว็บไซต

หลังจากที่ไดศึกษาการสรางเว็บเพจ และจัดเตรียมขอมูลเพ่ือนํามาสรางเว็บไซต ในขั้นตอนนี้เปนการนํา

ขอมูล ทั้งหมดมาออกแบบเว็บไซต ซ่ึงพอสรุปเปนขั้นตอนไดดังนี้คือ

ขั้นตอนท่ี 1 กําหนดโครงรางของเว็บไซต (Site Map)

โครงสราง( Site STRucture Design ) เปนแผนผังของของการลําดับ เนื้อหาหรือการ

จัดวางตําแหนงเว็บเพจทั้งหมด ซ่ึงจะทําใหเรารูวาทั้งประกอบไปดวยเนื้อหาอะไรบาง และมีเว็บเพจหนาไหนที่เก่ียวของ

เช่ือมโยงถึงกัน ดังนั้นการออกแบบโครงสราง จึงเปนเรื่องสําคัญ เปรียบเสมือนกับการเขียนแบบอาคาร กอนที่จะลงมือ

สราง เพราะจะทําใหเรามองเห็นหนาตาของ

เปนรูปธรรมมากขึ้น สามารถออกแบบระบบเนวิเกช่ันไดเหมาะสม และมีแนวทางการทํางานที่ชัดเจน สําหรับขั้นตอน

ตอๆไป นอกจากนี้โครงสรางที่ดียังชวยใหผูชมไมสับสน และคนหาขอมูลที่ตองการ

ไดอยางรวดเร็วโครงสรางสามารถทําไดหลายแบบ แตแนวคิดหลักๆ ที่นิยมให เราสามารถวางรูปแบบโครงสรางไดหลาย

รูปแบบตามความเหมาะสมเชน

* แบบเรียงลําดับ ( Sequence) เหมาะสําหรับที่มีจํานวนเว็บเพจไมมากนัก หรือที่มีการนําเสนอขอมูล

แบบทีละขั้นตอน ดังภาพที่ 2.4

ภาพที่ 2.4 รูปแบบโครงสรางแบบเรียงลําดับ

* แบบระดับช้ัน (Hierarchy) เหมาะสําหรับที่มีจํานวนเว็บเพจมากขึ้นเปนรูปแบบที่เราสามารถ

พบไดทั่วไป ดังภาพที่ 2.5

ภาพที่ 2.5 รูปแบบโครงสรางแบบระดับช้ัน

*แบบผสม (Combination) เหมาะสําหรับที่ซับซอน เปนการนําขอดีของรูปแบบทั้งสอง

ขางตนมาผสมกัน ดังภาพที่ 2.6

ภาพที่ 2.6 รูปแบบโครงสรางแบบผสม

ผูออกแบบควรเริ่มดวยการกําหนดผังหรือโครงรางของเว็บไซต (Site Map) กอนวา

ประกอบดวยหนาเว็บเพจมากนอยเพียงใด เชนจากรูปเปนตัวอยางเว็บไซตส่ือประกอบ

การเรียนการสอน เรื่อง องคประกอบของคอมพิวเตอร ซ่ึงประกอบดวยเว็บเพจหลัก

จํานวน 3 หนา จึงกําหนดเปนโครงรางของเว็บไซต ดังภาพที่ 2.7

ภาพที่ 2.7 แสดงการออกแบบโครงรางของเว็บไซต

ขั้นตอนท่ี 2 กําหนดการเช่ือมโยงระหวางเว็บเพจ

การเช่ือมโยงระหวางเว็บเพจ ถือเปนขั้นตอนที่สําคัญเพราะทําใหผูเขาชมเว็บไซตของเราสะดวกในการเลือกดูขอมูล

ภายใน

เว็บไซตของเราไดสะดวก จากตัวอยางในรูปที่ 1.4 จะเหน็วาหนาเว็บเพจ index.htm

มีการเช่ือมโยงไป 3 หนาเว็บเพจ คือ แฟม hardware.htm แฟม software.htm และ

แฟมขอมูล people.htm และหนาเว็บเพจทั้ง 4 หนานี้ ก็มีการเช่ือมโยงไปมาหากันได

ทั้งหมด ดังภาพที ่2.8

ภาพที่ 2.8 ออกแบบการเช่ือมโยงระหวางเว็บเพจ

ขั้นตอนท่ี 3 ออกแบบเว็บเพจแตละหนา

ในขั้นตอนนี้เปนการออกแบบเคาโครง หนาตา และลักษณะทางดาน กราฟกของ

หนาเว็บเพจแตละหนา โดยอาจออกแบบคราว ๆ ในกระดาษ จากนั้นใชโปรแกรมตกแตงภาพ

เชน Adobe Photoshop หรือ Macromedia Fireworks เพ่ือออกแบบรูปภาพกราฟกตาง ๆ

ที่จะนํามาใชบนหนาเว็บเพจ

ขั้นตอนท่ี 4 ลงทะเบียนขอพื้นท่ีเว็บไซตไซตฟร ี

เปนการเผยแพรเว็บไซตที่สรางเสร็จแลวเขาสูระบบเครือขายอินเทอรเน็ต เพ่ือใหบุคคลอ่ืน ๆ สามารถเขาชม

เว็บไซตของเราได วิธีการก็คือนําเว็บไซตที่เราสรางขึ้นไปไวบนพ้ืนที ่ ที่ให

บริการ (Web Hosting) ซ่ึงมีพ้ืนที่ ที่ใหบริการฟรี และแบบที่ตองเสียคาบริการ

ขั้นตอนท่ี 5 การอัพโหลดเว็บไซต

หลังจากสรางเว็บไซตและลงทะเบียนขอพ้ืนที่สําหรับฝากเว็บไซตแลว ใหใชโปรแกรมสําหรับ

อัปโหลด (Upload) เชนโปรแกรม CuteFTP เพ่ือใหคนทั่วโลกสามารถเขาชมเว็บไซต

ของเราผานทางระบบเครือขายอินเทอรเน็ตได

สรุปสาระประจําบทเรียน

เว็บเพจ เปนเอกสารที่ใชในการเผยแพรขอมูลขาวสาร ซ่ึงประกอบไปดวยขอความ ภาพ เสียง และภาพยนตรผานเครือขายอินเทอรเน็ต

เราสามารถเขียนเว็บเพจภาษา HTML ดวยโปรแกรม Text Editor ทั่วไป เชน Notepad ซ่ึงไดติดตั้งมาพรอมกับ Microsoft Windows

อยูแลว การสรางเว็บไซตมีขั้นตอน 6 ขั้นตอน ดังนี ้

1.กําหนดโครงรางเว็บไซต

2.กําหนดการเช่ือมโยงระหวางเว็บเพจ

3.ออกแบบเว็บเพจแตและหนา

4.สรางเว็บเพจแตละหนา

5. ลงทะเบียนขอพ้ืนที่เว็บไซต

6.อัพโหลดเว็บไซต

กิจกรรมประจําหนวย

ใบงานที่ 1 ใบงานที่ 2

ตัวอยางที่ 2

แบบทดสอบยอยที่ 1