�ݺ�ߣ

1
ผูสอน นายปยะพงษ พรหมบุตร วิชาออกแบบเว็บไซต ม.3
(ที่มา:การสรางเว็บไซตดวยโปรแกรม Dreamweaver 8 ครูนิคม โรงเรียนเกาะแตวพิทยาสรรค จ.สงขลา)
1. ความรูเบื้องตนเกี่ยวกับอินเทอรเน็ต
อินเทอรเน็ต (Internet) เปนเครือขายคอมพิวเตอรที่ใหญที่สุดในโลก ซึ่งรวมเอาเครือขายยอย
เปนจํานวนมากตอเชื่อมภายใตมาตรฐานเดียวกันจนเปนเครือขายคอมพิวเตอรขนาดใหญ ทําใหทั่วโลก
เชื่อมโยงกัน เปนเครือขายเดียวกันไดในรูปแบบ ของ เวิลด ไวด เว็บ (World Wide Web)
ลักษณะของเวิลด ไวด เว็บ (World Wide Web)
เวิลด ไวด เว็บ (World Wide Web – www) หรือเรียกยอ ๆ วาเว็บ (Web) เปนอินเทอรเน็ต
ชนิดหนึ่ง ที่อยูในรูปแบบของกราฟก (Graphic) และมัลติมีเดีย (Multimedia) ซึ่งประกอบดวยขอความ
(Text) ภาพ (Image) เสียง (Sound) และ ภาพเคลื่อนไหว (Movie) เปนตน ผูใชทั่วไปสามารถเขาไปใน
เว็บไดงายและจะไดรับขอมูลครบถวนปจจุบันถาพูดถึงอินเทอรเน็ต คนทั่วไปจะเขาใจวาหมายถึงเว็บ ทั้งที่
จริงแลวเว็บเปนสวนหนึ่งของอินเทอรเน็ตเทานั้น
เว็บไซต (Website) และเว็บเพจ (Webpage)
เอกสารหรือสวนที่ติดตอกับผูใชในเว็บ เรียกวา เว็บเพจ (Webpage) หมายถึง เอกสารหนึ่งหนา
การใชเว็บก็คือ การเปดอานหรือเปดใชเว็บแตละหนานั่นเอง เว็บเพจอาจสรางขึ้นดวย
ภาษาคอมพิวเตอร เชน HTML, ASP, PHP, JAVA ฯลฯ
เมื่อนําเว็บเพจหลาย ๆ หนามารวมกันและระบุอยูในอินเทอรเน็ต หรือ ยูอารแอล (Uniform
Resource Locator – URL) ใ ห กับ เ ว็บ เ พจ ก ลุม นั้ น จ ะ เ รี ย กว า เ ว็ บ ไ ซ ต ( Web Site)
เมื่อเปดเว็บไซตขึ้นมาจะพบกับหนาแรกของเว็บไซต ซึ่งเรียกวา โฮมเพจ (Homepage) ซึ่งเปน
หนาที่สําคัญที่สุดและเปนหนาที่จะเชื่อมโยงไปยังเว็บเพจและเว็บไซตอื่น ๆ
เว็บเบราวเซอร (Web Browser)
เว็บเบราวเซอร (Web Browser) คือ โปรแกรมที่ใชสําหรับเปดเว็บเพจหรือรับสงขอมูลตามที่
เครื่องลูกขายรองขอเมื่อเราเปดเขาสูอินเทอรเน็ต เว็บเบราวเซอรที่ไดรับความนิยมปจจุบันมีหลาย
โปรแกรม เชน Microsoft Internet Explorer (IE), Google Chrome, Mozilla Firefox และ Opera

2
ภาษา HTML
ภาษา HTML ยอมาจากคําวา Hypertext Markup Language เปนภาษาที่ใชสําหรับสราง
เว็บเพจ โดยจะไดรับการแปลหรือการแสดงผลโดยเว็บเบราวเซอรซึ่งสามารถแสดงไดทั้ง
ขอความ ภาพ และเสียง
โดเมนเนม (Domain Name)
โดเมนเนม (Domain Name) หรือที่เขาใจกันทั่วไป คือ ชื่อเรียกเว็บไซตนั่นเอง การจดทะเบียน
โดเมนเนมจึงเปนการลงทะเบียนชื่อใหกับเว็บไซตของเราในโลกอินเทอรเน็ต โดเมนเนมที่ขอจดทะเบียน
จะตองไมซ้ํากับคนอื่น และควรตั้งใหเกี่ยวของกับเนื้อหาภายในเว็บไซต หรือเกี่ยวของกับสินคาและ
การบริการ ตลอดจนใชคํางาย ๆ ใหจําได เชน sanook.com และ yahoo.comเปนตน
โดเมนที่เปนชื่อยอของประเทศที่นาสนใจ
โดเมนเนมเหลานี้จะใชตอตอนทายสุด เพื่อสะดวกในการอางอิงวาเปนโฮสตหรือเว็บไซตที่อยูใน
ประเทศใด เชน www.ksc.net.th จะเห็นวา ลงทายดวย .th จะเปนโดเมนของประเทศไทย

3
ความหมายของซับโดเมน
ซับโดเมนจะเปนสวนที่อยูถัดจากโดเมน เปนโดเมนยอยที่เจาะจงลงไปวาเปนหนวยงานหรือ
องคกรในดานใด เชน www.ksc.net.th ซับโดเมน คือ net จะเปนองคกรที่ใหบริการดานเครือขายหรือ
เน็ตเวิรค
2. หลักการออกแบบเว็บไซต
หลักการออกแบบเว็บไซตสามารถแบงออกเปนขั้นตอนตาง ๆ เพื่อใหเหมาะสมกับผูเริ่มตนใชเปน
แนวทางในการสรางและพัฒนาเว็บไซต
การวางแผน

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

5
เมื่อไดขอมูลตาง ๆ เชน กําหนดเนื้อหาและจุดประสงคของเว็บไซต การกําหนดกลุม เปาหมาย
การเตรียมขอมูล การเตรียมสิ่งตาง ๆ ที่จําเปนจากขั้นแรกเรียบรอยแลว ในขั้นตอนนี้ เราจะจัดระบบเพื่อ
ใชเปนกรอบสําหรับการออกแบบและดําเนินการในขั้นตอนตอไป ซึ่งมีรายละเอียด ดังนี้
 โครงสรางและสารบัญของเว็บไซต
 การใชระบบนําผูเขาชมไปยังสวนตาง ๆ ภายในเว็บไซตหรือที่เราเรียกวาระบบนําทาง
(Navigation)
 องคประกอบที่ตองนํามาใช เชน สื่อมัลติมีเดีย ภาพกราฟก แบบฟอรมตาง ๆ
 การกําหนดรูปแบบและลักษณะของเว็บเพจ
 การกําหนดฐานขอมูล ภาษาสคริปตหรือแอปพลิเคชันที่นํามาใชในเว็บไซต
 การบริการเสริมตาง ๆ
 การออกแบบเว็บไซต
นับเปนขั้นตอนในการออกแบบรูปราง โครงสรางและลักษณะทางดานกราฟกของหนาเว็บเพจ
โดย โปรแกรมที่เหมาะสมในการออกแบบคือ Photoshop หรือ Fireworks ซึ่งจะชวยในการสรางเคา
โครงของหนาเว็บและองคประกอบตาง ๆ เชน ชื่อเว็บไซต โลโก รูปไอคอน ปุมไอคอน ภาพเคลื่อนไหว
แบนเนอรโฆษณา เปนตน
ในการออกแบบเว็บไซตนั้นยังตองคํานึงถึงสีสัน และรูปแบบของสวนประกอบตาง ๆ ที่ไมใช
ภาพกราฟก เชน ขนาดของตัวอักษร สีของขอความ สีพื้น ลวดลายของเสนกรอบเพื่อความสวยงาม
และ ดึงดูดความสนใจผูเยี่ยมชมดวย

6
สวนประกอบของหนาเว็บเพจ
เราสามารถจําแนกสวนประกอบของหนาเว็บเพจ เปน 3 สวน ดังนี้
1. สวนหัว (Page Header) นาจะอยูบริเวณบนสุดของหนาเว็บเพจ เปนสวนที่แสดงชื่อ
เว็บไซต โลโก แบนเนอร โฆษณาเชื่อมโยงสําหรับขามไปยังหนาเว็บอื่น
2. สวนเนื้อหา (Page Body) จะอยูบริเวณตอนกลางของหนาเว็บเพจ ซึ่งเปนสวนที่แสดงเนื้อหา
ภายในหนาเว็บเพจนั้น โดยประกอบดวยขอความ ขอมูล ภาพเคลื่อนไหว เปนตน

7
3. สวนทาย (Page Footer) จะอยูบริเวณดานลางสุดของหนาเว็บเพจ สวนมากใชสําหรับ
เชื่อมโยงขอความสั้น ๆ เขาใจงาย หรือจะมีชื่อเจาของเว็บไซต อีเมลแอดเดรส (E-mail Address) ของ
ผูดูแลเว็บไซตสําหรับติดตอกับทางเว็บไซต
แนวคิดในการออกแบบ
 ดูจากเว็บไซตอื่นเพื่อเปนตัวอยาง การดูจากเว็บไซตอื่นบนอินเทอรเน็ตเพื่อศึกษาเปนตัวอยางนั้น
นับเปนวิธีการที่งายที่สุด แตก็ควรนําไปประยุกตใชใหเหมาะสมกับเนื้อหาและกลุมเปาหมายของ
เราดวย
 ศึกษาจากสื่อสิ่งพิมพในรูปแบบตาง ๆ สื่อสิ่งพิมพในที่นี้ ไดแก แมกกาซีน โปสเตอร
โฆษณา โบรชัวร หรือหนังสือบางเลมที่มีรูปแบบและจุดดึงดูดความสนใจ สามารถนํามา
ประยุกตใชในเว็บ

�ݺ�ߣ

Dream8

Recommended

More Related Content

What's hot (14)

Viewers also liked (20)

Similar to Dream8 (20)

Dream8