Pro Webdesign

PROFESSIONAL WEB DESIGNER COURSE
บทที่ 1
ความรูทั่วไปเกี่ยวกับอินเทอรเน็ตและการออกแบบ Web Site
ถาจะพูดถึงการสื่อสารในรูปแบบใหม ที่สามารถสื่อสารกัน ไดอยางรวดเร็วและมีราคาถูกที่สุด ก็คงหนี

ไมพนที่จะกลาวถึง “อิน เทอรเน็ต” ซึ่งไดรับ ความนิยมไปทั่วโลก ไมเวนแมกระทั่งประเทศไทย ซึ่งในปจจุบัน ก็มี
การใชงานอิน เทอรเน็ตกัน แพรหลายในหนวยงานราชการ องคกรตาง ๆ โดยไดรับความสนใจจากกลุมผูใชทุก
ระดับเพิ่มขึ้นเรื่อย ๆ โดยเฉพาะนักเรียน นิสิต นักศึกษาที่กําลังเปนกลุมผูใชอินเทอรเน็ตที่ใหญที่สุดสําหรับ
ประเทศไทย และอาจจะพูดไดวา อินเทอรเน็ตนํามาซึ่งการเปลี่ยนแปลงของวงการคอมพิวเตอรครั้งสําคัญที่สุด
นับตั้งแตมีการเปดตัวเครื่องพีซี การเชื่อมตอคอมพิวเตอรจํานวนมากเขาดวยกันเปนเครือขายอินเทอรเน็ต
กอใหเกิดการแลกเปลี่ยนขอมูล และการสื่อสารที่เปนประโยชนอยางมหาศาล คนจากทั่วโลกแทบทุกเพศทุกวัย
และทุกอาชีพ สามารถสื่อสารกันผานเครือขายอินเทอรเน็ตไดอยางไมมีขอจํากัดทางเชื้อชาติ หรือศาสนา
อิน เทอรเน็ตจึงไดกลายเปนสังคมขนาดใหญที่เกิดขึ้น ในโลกคอมพิวเตอรโดยถูกขนานนามวา “ ไซเบอรสเปซ
(Cyberspace) ”
อิน เทอรเน็ตกําลังเติบโตขึ้นอยางรวดเร็ว ปจจุบ ันมีผูใชอินเทอรเน็ตทั่วโลกมากกวา 60 ลานคน และมี
ผูสมัครเปน สมาชิกเพื่อขอใชบ ริการอินเทอรเน็ตมากกวา 1 ลานคนตอเดือน อิน เทอรเน็ตจึงกอใหเกิดโอกาสและ
บริการใหมมากมาย เชน สามารถทําธุรกรรมผานระบบอิน เทอรเน็ต พบประสนทนากับผูอื่น เผยแพรความรู และ
ใหบริการดานขอมูลขาวสาร นอกจากนี้อิน เทอรเน็ตยังเปนสื่อที่นําเสนอความบัน เทิงในรูปแบบของรายการวิทยุ
โทรทัศน ดนตรี ภาพยนตร และเกมส จนมีการกลาววาถาธุร กิจใดไมสนใจโลกไซเบอรสเปซ ธุรกิจนั้น กําลัง
ปฏิเสธอนาคตของตัวเองเสียแลว
ความเปนมาของอินเทอรเน็ต
อิน เทอรเน็ตคือเครือขายของระบบคอมพิวเตอรขนาดตาง ๆ เชื่อมตอเขาหากันจนเปน ระบบเครือขาย

คอมพิวเตอรที่ใหญที่สุด เปน จํานวนหลายลาน ๆ เครื่องโดยใชโปรโตคอลชนิดพิเศษในการสื่อสารซึ่งอินเทอรเน็ต
ไดมีบริการตาง ๆ หลายอยางซึ่งมีความสามารถตาง ๆ กัน ไป
ประวัติความเปนมาของอินเทอรเน็ตเริ่มตน จากเครือขาย ARPAnet ของหนวยงานชื่อ Advance
Research Projects Agency ซึ่งเปนเครือขายการวิจัยเพื่อปองกันของ U.S. Department if Defense ซึ่งเกิด
ในชวงป 1970 มีการออกแบบระบบที่ท ําใหนักวิจัยและนักวิทยาศาสตรท ําการแลกเปลี่ยนขอมูลขาวสารระหวาง
กัน และกัน ไดดีขึ้น และทําใหเกิดการพัฒนาเปน ระบบโอนถายขอมูล รูป แบบใหมท ี่สามารถสื่อสารไดห ลายทาง
คือ Transmission Control Protocol / Internet protocol (TCP/IP) ซึ่งตอมาคือ มาตรฐานการรับสงขอมูลของ
อิน เทอรเน็ต
ตอมาจึงมีการจัดตั้งหนวยงานใหมที่ชื่อวา The National Science Foundation (NFS) หรือ NFSNET
โดยผูเ ชี่ยวชาญจาก ARPAnet ที่แยกตัวออกมา เครือขายนี้ใชสําหรับเชื่อมตอเครือขายของมหาวิทยาลัย และ
ศูน ยวิจัยตาง ๆ เขาดวยกัน ทําใหเกิดการเพิ่มปริมาณเครือขาย และการติดตอสื่อสารในรูป แบบตาง ๆ เชน
NetDesign :: Internet and Design Institute :: www.NetDesign.ac.th

Fortune Branch :: Tel. 02-642-1100 , Major Branch :: Tel. 02-930-1100
2
E-mail, การโอนถายขอมูล (FTP) และการใชขอมูลรวมกัน และในที่สุดก็เรียกเครือขายนี้วา “ อินเทอรเน็ต
(Internet) ”
สวนประกอบตาง ๆ ของอินเทอรเน็ต (Components of Internet)
ในอินเทอรเน็ตมีบ ริการตาง ๆ ที่มีความแตกตางกัน ตามจุดประสงคการใชงานของผูใช เชน ความ

ตองการในการสื่อสาร ,ความตองการในการหาขอมูล , การนําเสนอสิน คาและบริการผานทางเครือขาย เปน ตน
ดังนั้น จึงจําเปนที่จะตองทําความรูจักกับบริการตาง ๆ ในอินเทอรเน็ตเพื่อที่จะไดใชงานอยางคุมคา ซึ่งใน
เครือขายอินเทอรเน็ตที่เชื่อมกันอยูนั้นประกอบดวยเครื่องคอมพิวเตอรที่ท ําหนาที่เปน Server หรือเรียกอีกแบบ
คือ Host ซึ่งทําหนาที่ตาง ๆ กันในการใหบริการในระบบ ซึ่งสามารถแบงบริการตาง ๆ ของอินเทอรเน็ตเปน
2 สวนดังนี้
1. บริการดานการสื่อสาร (Communication Service)
2. บริการดานการคนหาขอมูล (Information Service)
บริการดานการสื่อสารในอินเทอรเน็ตมีความหลากหลายในแงของวัตถุประสงค การใชงานและ
ความสามารถของโปรแกรมที่ใชในแตละบริการ ซึ่งอาจแบงแยกยอยไดดังนี้
จดหมายอิเล็กทรอนิกส (E-mail)
E-mail ยอมาจาก Electronic Mail E-mail จึงเปนบริการในอิน เทอรเน็ตที่ไดรับความนิยมมากที่สุด

เนื่องจากการใชงานที่งายและความตองการในการติดตอของผูคนในปจจุบันมีสูงมาก ทําใหบริการ E-mail ไดรับ
การตอบรับ จากผูใชในวงกวาง ความสามารถของ E-mail คือการสงขาวสารไปถึงผูรับไดในระยะเวลาอัน สั้นแทบ
จะทันทีห ลังจากมีการสง ทําใหเปนระบบที่รวดเร็วกวาการสื่อสารแบบอื่น อีกทั้งยังประหยัดเงิน ในการใชงาน
มากกวาการสื่อสารแบบเกา เชน FAX เปน ตน ดังนั้นการแพรหลายของ E-mail ฟรี ของ Web Site ตาง เชน
Hotmail (http://www.hotmail.com) , USA net (http://www.usa.net) หรือแมแต E-mail ฟรี ของคนไทยคือ
Thaimail (http://www.thaimail.com) เปน ตน ในสมัยที่ Email ยังไมไดรับการพัฒนาเปนแบบ Graphic นั้น
โปรแกรมเมลท ี่มีอยูจะใชไดกับเครื่องที่รับระบบปฏิบัติการ UNIX เทานั้น ซึ่งใชการ input ขอมูลและคําสั่งแบบ
ตัวอักษร (Text mode) เชน โปรแกรม PINE ซึ่งตอมามีการพัฒนาโปรแกรมแบบที่เปน Graphic เชน โปรแกรม
Eudora ซึ่งเปน โปรแกรมเมลท ี่ใชงาย และมีความสามารถในการปรับแตงคาตาง ๆ ไดมากมาย แตในปจจุบัน
โปรแกรม Web browser เชน Netscape Navigator และ Internet Explorer ไดรวมโปรแกรมเมลไวในตัวอยูแลว
ซึ่งโปรแกรมเมลที่รวมอยูใน Browser สวนใหญมีความสามารถสูงและใชงานงาย
บริการกระดานขาวอิเล็กทรอนิกส (Usenet)
เปนบริการที่ไดรบั ความนิยมมากพอสมควร เนื่องจากลักษณะพิเศษ คือ การแบงหัวขอความสนใจใน

เรื่องตาง ๆ ออกเปน เรื่องยอย ๆ แลวแตวาจะมีคนตั้งขึ้นมา แลวใหมีคนที่มีความสนใจคลายกันเขามาทิ้ง
ขอความตาง ๆ เกี่ยวกับเรื่องนั้น ๆ ไว แลวผูท ี่เขามาอานคนอื่น ๆ สามารถเขามาแสดงความคิดเห็น ได บริการนี้
จะเรียกอีกชื่อหนึ่งวา Newsgroup ปจจุบัน มี Web Site ที่ใหการบริการแบบกระดานขาวอิเล็กทรอนิกส เกิดขึ้น
3
มากมายทั้งของไทยและตางประเทศ สําหรับประเทศไทย Web Site ที่มีชื่อเสียงในการบริการทางดานนี้ดีท ี่สุดก็
คงเปน Web Site พัน ธท ิพย (http://www.pantip.com) ซึ่งไดแบงหัวขอตาง ๆ ไวมากมายสามารถเขาไป
สอบถามปญหาหรือเรื่องราวตาง ๆ ที่ตนเองสนใจไดตลอดเวลา
การโอนถายขอ มูลระหวางเครื่อง (File Transfer Protocol : FTP)
FTP เปนบริการอีกอยางหนึง่ ที่มีความจําเปนมากในระบบอินเทอรเน็ต เนื่องจากเมื่อระบบ World

wide Web มีการขยายตัวของผูใชมากขึ้น ก็ตองมีการโอนถายขอมูลระหวางเครื่องมากขึ้น เชน เมื่อผูตองการ
ออกแบบ Web Site ไดทําการออกแบบเสร็จแลว ตองมีการสงขอมูลทั้งหมดไปที่ Server เพื่อใหผูใช (User)
สามารถเขาไปที่ Web Site เพื่อดูขอมูลได ปจจุบ ันมีโปรแกรมที่สามารถทําใหใชงานในรูปแบบของ FTP ไดงาย
ขึ้น เชน WS_FTP, Cute_FTP เปนตน
การสนทนาผานระบบออนไลน (Internet Relay Chat : IRC)
IRC คือหองสนทนาแบบออนไลน ซึ่งแบงเปนหองยอยใหผูใช log in เขามาเพื่อพูดคุยกันในเรื่องตาง ๆ

ที่ตองการ โดยอาจจะมีการตั้งหัวขอเปนชื่อหองไวกอนก็ได หรือเขามาแลวคอยตั้งประเด็นในการพูดคุยกันก็ได
วิธีการใชคือสามารถพิมพขอความที่ตองการจากเครื่องของ หลังจากเคาะปุม enter แลว ขอความนั้น จะไป
ปรากฏบนหนาจอของคนอื่นๆ ซึ่งเขาก็สามารถอานได ในขณะเดียวกันก็สามารถอานขอความจากคนอื่น ๆ ได
เชน กัน เรียกบริการนี้อีกชื่อหนึ่งวา Chat Room ปจจุบันมีโปแกรมอีกแบบหนึ่งที่ไดรับความนิยมมากขึ้นเรื่อย ๆ
คือ ICQ (I Seek You) ซึ่งเปน อีกรูปแบบหนึ่งของการพูดคุยทางอิน เทอรเน็ตเหมือนกัน
World Wide Web
เปนบริการที่ไดรับความนิยมมากที่สุดรองจากการใช E-mail เนื่องจากเปน ชองทางการเขาถึงขอมูลที่

สะดวกที่สุดในปจจุบัน กระแสความนิยมของอิน เทอรเน็ตที่เกิดขึ้นอาจจะเรียกไดวาเปน เพราะ Web Site เลย
ทีเดียว เนื่องจากปจจุบันมี Web Site เกิดขึ้นใหมท ุกวัน และเปนขอมูลทีก่ ลาวกัน วา ถาเขาไปดู Web Site ละ
หนึ่งนาทีก็ไมสามารถดูขอมูลไดห มดในชวงชีวิตของ นอกจากนี้กระแสความนิยมของ Web Site ทําใหเกิดธุรกิจ
ที่เกี่ยวของตามมาอีกมากมาย เชน E-Commerce, การเจริญเติบโตของตลาดคอมพิวเตอร ฯลฯ
ประวัติของ World Wide Web (Web History)

การพัฒนาระบบ World Wide Web เริ่มตนเมื่อเดือนมกราคม 1989 โดยนักวิจัยจากสถาบัน CERN
(Conseil European Pour La Recherche Nucleaire) ซึ่งเปน หองทดลองใน เจนีวา ประเทศสวิสเซอรแลนด ชื่อ
Tim Berners-Lee ไดนําความคิดเรื่อง Hypertext ของ Vannevar Bush และ Ted Nelson มาใชในจุดประสงคท ี่
จะกระจายขอมูลในองคกร ซึ่งมีห ลัก 3 ประการที่สําคัญคือ
1. การทํางานในหนาของผูใช (User) จะตองสามารถเรียกใชขอมูลจากเครื่องคอมพิวเตอรท ี่
หลากหลายในดานระบบปฏิบัตกิ ารได
2. Interface จะตองสามารถแสดงผลกับขอมูลหลายรูปแบบได

4
3. ตองสามารถใหผูใชเขาถึงขอมูลใน Network ไดงาย
ชวงปลายป 1990 ตน แบบของ www ไดทดลอง Run บนเครื่อง Next แตยังไมรับความแพรหลายนัก
มีนาคม 1991 www interface ไดถูกใชใน Network โดยการลงที่เครือ่ ง Server ของ CERN
ปลายป 1991 ทาง CERN ไดป ระกาศระบบไฟลใน Uernet Newsgroup และ
โปรแกรม WAIS ไดประกาศใชอยางเปนทางการ
ป 1992 CERN ไดพัฒนา Web อยางตอเนื่อง และเริ่มแพรห ลายในหมูน ักวิจัย โดยมีจํานวน

Web server ประมาณ 50 server
ป 1993 เริ่มมีการพัฒนา Graphic Interface Viewer ขึ้นมาเปน ครั้งแรกโดยเรียกวา
Browser โดยนักศึกษาปริญญาตรี มหาวิท ยาลัย Illinois At Urbana Champaign
ชื่อวา มารค แอนเดรสัน โดยโปรแกรมนี้ชื่อวา Mosaic ซึ่งเปนโปรแกรมที่แสดงผล
ของ Web โดยใชระบบ Point-And-Click-Design การเจริญเติบโตของ Web ในป
1993 เติบโตอยางรวดเร็วทําใหมีจํานวน Server เพิ่มขึ้น เปน 500 Server ใน
ปลายป 1993
ป 1994 บริษัท ตาง ๆ เริ่มโดดเขามารวมในการพัฒนา Browser ตาง ๆ โดยมีการเปดตัว

Browser ใหม ๆ หลายบริษัท เชน Netscape Communication Corporation ทํา
ใหในกลางป 1994 มี Web server เพิ่มขึ้นมาเปน 1,500 Server มีการกําหนด
มาตรฐานของ Web โดยตั้งองคกรขึ้น มา เพื่อควบคุมพัฒนากาการของ Web ให
เปน ไปในแนวทางเดียวกันชื่อวา World Wide Web Consortium หรือ W3C
(www.w3c.org)
ป 1995 การเติบโตของ Web ยังคงรวดเร็วและตอเนื่องโดยมีจุดเปลี่ยนแปลงอยบูท ี่

Browser ของ Netscape Communication ซึ่งใชชื่อ วา Netscape Navigation ซึ่ง
มีความสามารถในการแสดงผลของ HTML (Hypertext Mark-up Language) ไดดี
ขึ้น ซึ่งสนับสนุน HTML2 ของ W3C ซึ่งทําให Netscape Navigation คือ Browser
ที่ครองตลาดกวา 90% ในปนั้น และการใช Web ทางการคาก็ไดเริ่มขึ้น อยางจริงจัง
ในปนี้ โดยเริ่มตนธุรกิจที่เกี่ยวกับ Web เชน Search Engine, ISP , Web
Designer เปน ตน
ป 1996 มีการแขงขัน กัน อยางมากในวงการ Internet และ Browser เนื่องจาก Microsoft ได
เปลี่ยนมาประกาศสนับ สนุนการพัฒนาโปรแกรมตาง ๆ เพื่อใชงานรวมกับ
อิน เทอรเน็ตโดยการออกโปรแกรม Browser ใหมชื่อวา Internet Explorer ทําให

5
เกิดสงคราม Browser ขึ้นมาเนื่องจากนโยบายการแจก Browser ฟรีของ
Microsoft ทําใหสวนแบงการตลาดของ Netscape ตกลงอยางรวดเร็ว
ป 1997- ปจจุบัน มาถึงวันนี้วงการอินเทอรเน็ตและ Web Site ไดพัฒนาขึ้น อยางมากมาย มีกระแส
หลายอยางที่ผลักดันใหอิน เทอรเน็ตไดรับความนิยมมากขึ้น โปรแกรม Browser ก็
ไดรับการพัฒนาและมีขีดความสามารถสูงขึ้น อยางมากมาย และ Browser ที่ไดรบั
ความนิยมมากที่สุดในปจจุบันก็คือ Internet Explorer ซึ่งพัฒนามาถึง version 6
แลว ทําใหทุกวันนี้คงไมมีใครไมรูจักคําวา อิน เทอรเน็ต อีกตอไป
Web Site สามารถใชทําอะไรไดบาง
โดยหลักการแลว WWW ไดถูกออกแบบมาใหเปน เอกสารอิเล็กทรอนิกสซึ่งปจจุบัน ถูกเรียกยอ ๆ วา

Web ซึ่งขีดความสามารถของเทคโนโลยีWebมีความสามารถในการทําหลาย ๆ สิ่งมากยิ่งขึ้น จึงทําใหการ
ประยุกตใชงานตาง ๆ บน WWW เปนไปอยางหลากหลายตัง้ แตการประกาศขาวธรรมดา ๆ ไปจนถึงการทํา
การคาดวยระบบอิเล็กทรอนิกส นี่เปน เพียงตัวอยางที่ตองการแสดงใหเห็นวาเทคโนโลยีของWeb ทําอะไรไดบาง
เอกสารประชาสัมพัน ธ (Catalog / Brochure)
เอกสารประชาสัมพัน ธ ถือไดวาเปน เอกสารที่องคกรประเภทขายตรง ซุปเปอรมาเก็ต หางสรรพสินคา

ฯลฯ นํามาเปนเอกสารหลักในการประชาสัมพันธท างการตลาดเพื่อใหลูกคาสารมารถเห็น สิน คาตาง ๆ จูงใจทาง
ราคาและใหรายละเอียดคราว ๆ ของสินคา การจัดพิมพเอกสารเหลานี้ในแตละครั้ง องคกรจะตองเสียคาใชจาย
จํานวนมาก หากตองการพิมพสี่สีทั้งเลม ก็จะตองเสียคาใชจายเพิ่มเปน 2 เทาของการพิมพแบบขาวดํา การ
จัดทํา Web Site เพื่อประชาสัมพันธเหลานี้จึงเปนวิธีที่สามารถลดคาใชจายขององคกรลงได นอกจากลูกคาจะ
สามารถเขาชม Web Site ไดตลอด 24 ชั่วโมงแลว องคกรเองก็สามารถปรับปรุง Web Site ของตนเองได
ตลอดเวลาโดยไมจําเปน ตองเสียคาใชจายในการพิมพเอกสารเหลานั้นอีกครั้งหนึ่ง
หองแสดงสินคา (Showroom)
จะเห็นไดวา ธุรกิจหลายประเภทในปจจุบันนี้เชน ขายรถยนต โทรศัพทเคลื่อนที่ ของเลน ภาพวาด ฯลฯ

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

6
รูปที่ 1.1 หองแสดงสินคาของ http://www.hondacars.com

ศูนยบริการทางอินเทอรเน็ต (Internet Service Center)
อิน เทอรเน็ตถือไดวาเปน สังคมของผูใชคอมพิวเตอรท ี่ใหญท ี่สุดโลก ซึ่งมี Web Site จํานวนมากที่ถูก

สรางขึ้น เพื่อเปนศูนยกลางในการติดตอสื่อสารของคนทั้งโลก ไมวาจะเปนการใหบริการทางดานการคนหาขอมูล
ที่ตองการ (Search Engine), การใหบริการดานอีเมล , การใหบริการพื้นที่สําหรับการสราง Web Site หรือการ
ใหบริการทางดานหองสนทนา (Chat Room)
รูปที่ 1.2 การใหบ ริการตาง ๆ บน Web Site

7
การศึกษาระยะทางไกล (Distance Education)
ดวยเทคโนโลยีของอินเทอรเน็ตที่กอกําเนิดมาจากการศึกษา ในขั้นเริ่มตนของ WWW ความสามารถ

ในตอนนี้คือสามารถทําเปนหนังสืออิเล็กทรอนิกสไดอยูแ ลว โดยสามารถทีทั้งภาพและขอความ แตในปจจุบัน
ภาพวีดีโอและเสียงตาง ๆ สามารถถูกสงผานระบบอิน เทอรเน็ตไปถึงผูเขาชม Web Site ไดอยางงายดาย ดังนั้น
การศึกษาระยะไกล หรือที่เรียกอีกอยางหนึ่งในปจจุบ ันวา E - Learning จึงเปนสิ่งที่เปน ไปไดและกําลัง
แพรหลายในปจจุบ ัน
รูปที่ 1.3 การศึกษาทางไกล http://www.thai2learn.com

ธุรกิจออนไลน (Online Business)
นับเปน การปฏิวัติครั้งสําคัญในการทําการคาของมนุษยชาติเมื่อรูปแบบการคาที่เคยทํากันมาตั้งแต
อดีต ถูกแทนที่ดวยระบบคอมพิวเตอร ซึ่งกอนหนานี้ไมเคยมีใครคาดคิดมากอนวา การคาขายโดยผานระบบ
คอมพิวเตอรจะทําไดจริงโดยไมจําเปนจะตองมีคนมาเปน พนักงานขาย บริษัทที่เปน ผูบ ุกเบิกการคาผานระบบ
อิน เทอรเน็ต และประสบความสําเร็จที่คนทั่วโลกรูจักก็คือ Amazon.com นั้นเอง หลังจากที่ Amazon.com
ประสบความสําเร็จสามารถลมยักษใหญของธุรกิจหนังสือ Barnes and Noble ไดสําเร็จ แมวา Barnes and
Noble จะสราง Web Site มารองรับแลวก็ตาม กระแสของ E-commerce ประทุขึ้นทั่วโลก แนวโนมในอนาคต
Online Business จะเปนแนวทางที่เกือบทุกองคกร โดยเฉพาะอยางยิ่งองคกรธุรกิจจําเปน ตองนํามาเปน สวน
หนึ่งของ องคกร ไมวาทางใดก็ทางหนึ่ง

8
ธุรกิจออนไลน http://www.amazon.com ธุรกิจออนไลน http://www.bn.com

รูปที่ 1.4 ธุรกิจออนไลนบนอิน เทอรเน็ต
ความสําคัญของการออกแบบ Web Site
Web Site เปนสื่อที่อยูในความควบคุมของผูใชโดยสมบูรณ เพราะผูใชมีโอกาสที่จะเลือก Click

หรือไมClick ที่ไดก็ไดตามตองการ และสามารถไปยังทุกหนแหงไดอยางงายดายดวยการใช Mouse Click ไป
ตามLink ตาง ๆ ผูใชจึงมักไมคอยมีความอดทนกับอุปสรรคและปญหาทีเ่ กิดจากการออกแบบที่ผิดพลาด ถาผูใช
ไมสามารถมองเห็นประโยชนจาก Web Site ของ หรือดูแลวไมเขาใจวาจะใชงานอยางไร ก็มักจะเปลี่ยนไปยัง
Web Site อื่น อยางรวดเร็ว ดังนั้นจึงจําเปน ตองออกแบบ Web Site เพื่อใหเกิดประโยชนสูงสุดตอ ผูใช และ
ดึงดูดใหพวกเขาเขามาใชบริการใน Web Site อยูเสมอ
ในปจจุบันนี้ นอกจากจะมี Web Site อยูมากมายแลว ก็ยังมี Web ที่เกิดขึ้นใหมท ุก ๆ วัน ผูใชจึงมี
ทางเลือกมากขึ้นที่จะเขาไปทดลองใชบริการใน Web ตาง ๆ เพื่อนํามาเปรียบเทียบหา Web ที่ถูกใจมากที่สุด
แทนที่จะทนอยูในWebที่ดูแลวสับสน ไมนาพอใจ ผูใชงานอิน เทอรเน็ตทุกคนคงชอบ Web ที่ออกแบบมาอยาง
สวยงามและมีการใชงานที่สะดวกมากกวาWebที่ดูแลวสับ สนวุน วาย มีขอมูลมากมายเต็มหนาจอ แตห าอะไรไม
เจอ แถมยังใชเวลาแสดงผลในแตละหนานานจนไมอยากรอ สิ่งเหลานี้ลวนเปน ผลมาจากความแตกตางในการ
ออกแบบ Web Site นั่น เอง
การออกแบบ Web Site จึงมีสวนสําคัญในการสรางความประทับ ใจใหกับผูใชบ ริการ และทําใหอยาก
กลับเขามาใชอีกในอนาคต และนอกจากจะตอ งพัฒนา Web ใหดีและมีประโยชนแลว ยังตองแขงขัน กับ Web
Site อื่นที่ใหบริการเชน เดียวกับ Web ของในปจจุบ ัน และยังตอ งสรางความไดเปรียบเหนือ Web Site ใหมท ี่
กําลังจะมาแรงและเกิดขึ้นในอนาคตอีกดวย ดังนั้นไมวา Web ของจะมีคูแขงอยูแลวหรือไมในวันนี้ ก็ควรจะ
ออกแบบ Web อยางมีคุณภาพ เพื่อดึงดูดผูใชใหอยูกับ Web ของไปตลอด
สรางความไดเปรีย บเหนือคูแขง
สําหรับ Web ทางธุรกิจยิ่งจําเปน ตองใหความสําคัญกับการออกแบบมากขึ้น เนื่องจากพฤติกรรมการ

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

ตาของ Web Site เพียงอยางเดียว แตเกี่ยวของกับการเริ่มตนกําหนดเปาหมายของ Web Site , ระบุกลุมผูใช ,
การจัดระบบขอมูล , การสรางระบบ Navigation , การออกแบบหนาWeb , รวมไปถึงการใช Graphic , การ
เลือกใชสี การจัดรูปแบบตัวอักษร นอกจากนั้นยังตองคํานึงถึงความแตกตางของสื่อกลางในการแสดงผล Web
Site นั้น ดวย สิ่งเหลานี้ไดแก ชนิดและรุนของ Browser ขนาดของหนาจอมอนิเตอร ความละเอียดของสี รวมไป
ถึง Plug-in ชนิดตาง ๆ ที่ผูใชมีอยู เพื่อใหผูใชเกิดความสะดวกและความพอใจที่จะทองไปใน Web Site นั้น
ดังนั้นทุกสิ่งทุกอยางใน Web Site ที่มองเห็น และมองไมเห็น ลวนเปน ผลมาจากกระบวนการออกแบบ Web Site
ทั้งสิ้น
Web Site ที่ดูสวยงามหรือมีลูกเลนมากมายนั้น อาจจะไมนับ เปน การออกแบบที่ดีก็ได ถาความ
สวยงามและลูกเลนเหลานั้นไมเหมาะสมกับ ลักษณะของ Web Site ดวยเหตุนี้จึงเปนเรื่องยากที่จะระบุวาการ
ออกแบบ Web Site ที่ดีนั้น ควรเปนอยางไร เนื่องจากไมมีหลักเกณฑท ี่แนนอนที่จะใชไดกับทุก Web Site แนว
ทางการออกแบบบางอยางที่เหมาะสมกับ Web Site หนึ่งอาจไมเหมาะกับ อีก Web Site หนึ่งก็ได ทําใหแนวทาง
ในการออกแบบของแตละ Web Site นั้นแตกตางกันไปตามเปาหมายและลักษณะของ Web Site นั้น Web Site
บางแหงอาจตองการความสนุกสนาน บันเทิง ขณะที่ Web อื่นกลับตองการความถูกตอง ความนาเชื่อถือเปน
หลัก ดังนั้น อาจสรุป ไดวาการออกแบบที่ดีคือ การออกแบบใหเหมาะสมกับเปาหมายและลักษณะของ Web Site
โดยคํานึงถึงความสะดวกในการใชงานของผูใชเปนหลัก
องคประกอบของการออกแบบ Web Site อยางมีประสิทธิภาพ
ความเรียบงาย (Simplicity)
ถาลองสํารวจ Web Site ของบริษัท ใหญ ๆ เชน Adobe , Apple , IBM จะพบวาWebของบริษัท
เหลานั้นมีรูปแบบที่เรียบงาย ไมซับ ซอน และใชงานไดอยางสะดวก แมวาจะมีขอมูลใน Web Site นั้นอยู

10
มากมาย แตแทบไมมีโอกาสเห็น Graphic หรือตัวอักษรที่เคลื่อนไหวอยูตลอดเวลา ซึ่งจะรบกวนสายตาและ
สรางความรําคาญใหแกผูใช ( การใชภาพเคลื่อนไหว (Animation ) จะดูหวือหวาและนาในใจในตอนแรก แตเมื่อ
ดูบอยเขาและ ตลอดเวลาผูใชจะเริ่มรูสึกรําคาญได ) นอกจากนั้น ยังใชชนิดและสีของตัวอักษรไมมากจนเกินไป
จนเกิดความสับ สน ในสวนตัวเนื้อหาก็จะใชตัวอักษรสีดําบนพื้นสีขาวตามปกติ และไมมีการเปลี่ยนสีของ Link
ใหลับสนแตอยางใด สรูปวาหลักสําคัญของความเรียบงายก็คือ การสื่อเนื้อหาถึงผูใชโดยจํากัดองคประกอบเสริม
ที่เกี่ยวของกับ การนําเสนอใหเหลือเฉพาะสิ่งที่จําเปนเทานั้น
รูปที่ 1.5 Web Site ของ http://www.ibm.com

ความสม่ําเสมอ (Consistency)
สามารถสรางความสม่ําเสมอใหกับ Web Site นั้นได โดยใชรูปแบบเดียวกันตลอดทั้ง Web Site

เนื่องจากผูใชจะรูสึกเหมือนกับวา Web Site นั้นเหมือนสถานที่จริง ถาลักษณะของแตละหนาใน Web เดียวกัน
นั้นแตกตางกัน มาก ผูใชจะเกิดความสับสนและไมแนใจวากําลังอยูใน Web เดิมหรือไม ดังนั้นรูปแบบของหนา
ระบบ Navigation และโทนสีที่ใชควรมีความคลายคลึงกัน ตลอดทั้ง Web Site
ความเปนเอกลักษณ (Identity)
การออกแบบตองคํานึงถึงลักษณะขององคกร เนื่องจากรูป แบบของ Web Site สามารถสะทอนถึงเอกลักษณ

และลักษณะขององคกรนั้นได Web Site ของธนาคารจึงไมควรดูเหมือนกับ สวนสนุก การใชชุดสี ชนิดตัวอักษร
รูปภาพ Graphic จะมีผลตอรูปแบบของ Web Site อยางมาก ผูออกแบบจึงตองเลือกใชองคป ระกอบเหลานี้
อยางเหมาะสม

11
เนื้อหาที่มีประโยชน (Useful Content)
เนื้อหาถือเปนสิ่งที่สําคัญที่สุดใน Web Site ดังนั้น ใน Web Site ควรจัดเตรียมเนื้อ หาและขอมูลที่ผูใช

ตองการใหถูกตองและสมบูรณ โดยมีการปรับปรุงและเพิ่มเติมใหท ันตอเหตุการณอยูเสมอ เนื้อหาที่สําคัญที่สุด
คือ เนื้อหาที่สรางขึ้นมาเองและไมซ้ํากับ Web อื่น ๆ เพราะจะเปน สิ่งที่ดึงดูดผูใชใหเขามาใน Web Site อยูเสมอ
ตางจากที่ Link ไป Web Site อื่น ซึ่งเมื่อผูใชรูถึงแหลงขอมูลจริง ๆ แลวก็ไมจําเปน ตอ งกลับ มาที่ Link เหลานั้น
อีก
ระบบ Navigationที่ใชงานงาย (User-Friendly-Navigation)
ระบบ Navigation เปน องคประกอบที่สําคัญมากของ Web Site จะออกแบบใหผูใชเขาใจไดงายและ

ใชงานสะดวก โดยใช Graphic ที่สื่อความหมายรวมกับ คําอธิบ ายที่ชัดเจน รวมทั้งมีรูป แบบและลําดับ ของ
รายการที่สม่ําเสมอ เชนวางไวในตําแหนงเดียวกันของทุก ๆ หนา นอกจากนั้นถาใชระบบ Navigation แบบ
Graphic ในสวนของหนาแลว อาจเพิ่มระบบ Navigation ที่เปนตัวอักษรไวตอนทายของหนา เพื่อชวยอํานวย
ความสะดวกกับผูที่สั่งBrowserไมใหแสดงผลรูป Graphic เพือ่ ความสะดวกรวดเร็วในการดู
มีลักษณะที่นาสนใจ (Visual Appeal)
เปน เรื่องที่ยากที่จะตัดสินใจวา ลักษณะหนาตาของ Web Site แหงใดแหงหนึ่งนั้นนาสนใจหรือไม

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

ใหผูใชตองติดตั้งโปรแกรมใด ๆ เพิ่มเติม หรือตองเลือกใช Browser ชนิดใดชนิดหนึ่งจึงจะสามารถเขาถึงเนื้อหา
ได สามารถแสดงผลไดในทุกระบบปฏิบัติการและที่ความละเอียดหนาจอตาง ๆ กันไดอยางไมมีปญหา สิ่ง
เหลานี้จะมีความสําคัญมากขึ้น สําหรับ Webที่มีผูใชบริการจํานวนมาก หรือมีกลุมเปาหมายที่หลากหลาย
คุณภาพการออกแบบ (Design Stability)
ถาอยากใหผูใชรูสึกวา Web ของมีคุณภาพถูกตอง และเชื่อถือได ก็ควรใหความสําคัญกับการออกแบบ

Web Site เปน อยางมาก เชนเดียวกัน กับ สื่อประเภทอื่น ๆ ที่ตองออกแบบและเรียบเรียงเนื้อหาอยางรอบคอบ

12
Web ที่ทําขึ้นมาอยางลวก ๆ ไมไดมาตรฐานการออกแบบและการจัดระบบขอมูลนั้น เมื่อมีขอมูลเพิ่มมากขึ้น
เรื่อย ๆ ก็จะเกิดปญหาและไมสามารถสรางความนาเชื่อถือได
ระบบการใชงานที่ถูกตอ ง (Functional Stability)
ระบบการทํางานตาง ๆ ใน Web Site จะตองมีความแนนอนและทําหนาที่ไดอยางถูกตอง ตัวอยางเชน

ถามีแบบฟอรมใหผูใชกรอกขอมูล ก็ตองแนใจวาฟอรมนั้นสามารถใชงานไดจริง หรืออยางงายที่สุดก็คือ Linkตาง
ๆ ที่มีอยูนั้น ตองเชื่อมโยงไปยังหนาที่มีปรากฏอยูจริงและถูกตองดวย ความรับ ผิดชอบแรกของคือการทําใหระบบ
เหลานั้น ใชงานไดจริงตั้งแตหนาแรกและยังคงตองคอยตรวจเช็คอยูเสมอเพื่อใหแนใจวาสิ่งเหลานั้น ยังทํางานไดดี
โดยเฉพาะหนาที่ Link เชื่อมไปยัง Web อื่นที่อาจมีการเปลี่ยนแปลงไดตลอดเวลา โดยที่ไมรูเรื่อง
โปรแกรมที่นิยมใชในการออกแบบ Web Site
โปรแกรมที่น ิยมใชในการออกแบบหนาWebใหมีความสวยงามนั้น มีอยูมากมายหลายโปรแกรม แต

โปรแกรมที่มีคนนิยมใชงานการออกแบบ Web มากที่สุด ก็คงหนีไมพนโปรแกรม Photoshop ของคาย Abobe
ซึ่งตอนนี้ออกมาถึงเวอรชั่น 7 แลว โปรแกรม Photoshop นั้นเปนโปรแกรมที่รูป แบบที่เรียกวา Raster ซึ่งเปนการ
นําจุดสีหลาย ๆ จุดมารวมตัวกัน จนเกิดเปนภาพขึ้น ซึ่งผลที่ไดก็คือทําใหภาพมีรายละเอียดสวยงาม จึงเหมาะสม
ในการนําโปรแกรมตัวนี้มาทํางานในการตกแตงภาพ สามารถนําไปประยุกตใชท ํางานไดหลายชนิด ไมวาจะเปน
การออกแบบ Graphic สิ่งพิมพ ในการทําปกหนังสือ , โปสเตอร , แผน พับ , ออกแบบปกเทป ปกซีดี ,งาน
Graphic โทรทัศน รวมไปถึงงานออกแบบหนา Web ซึ่ง Photoshop ตั้งแตเวอรชั่น 5.5 เปน ตนมา ก็ไดใสคําสั่ง
และอุป กรณในสวนที่เกีย่ วของกับการออกแบบ Web Site มามากมาย ที่ทําใหน ักออกแบบ Web Site สามารถ
ทํางานไดงายและสะดวกมากขึ้น ซึ่งจะกลาวถึงรายละเอียดในบทที่ 2 ตอไป
นอกจากโปรแกรม Photoshop แลวยังมีอีกหลายโปรแกรมที่สามารถใชในการออกแบบ Web Site ได
และก็เปนที่นิยมกันทั่วไป เชน Macromedia Firework 4 , Adobe Illustrator 10 เปน ตน
รูป แบบของไฟล Graphic บน Web Site
รูป แบบ Graphic หมายถึง รูป แบบมาตรฐานของรูปภาพซึ่งไดรับการรับรองความเปนมาตรฐานของแต

ละหนวยงานที่ คิดคน วิธีการบัน ทึ กและแสดงภาพเหลานั้ น ขึ้น มา รูป แบบของรู ป ภาพที่สามารถนํ ามาใชบ น
Web Page ไดนั้น มีอยู 2 ชนิด แตเ นื่องดวยทั้ง 2 ชนิดนี้มีจุดเดน ที่แตกตางกัน และจําเปน ตอ งใชท ั้ง 2 ชนิดนี้
ควบคูกัน ไป ไมสามารถเลือกเฉพาะแบบใดแบบหนึ่งมาใชงานได ซึ่ง Graphic ทั้ง 2 ชนิดนี้ก็คือ GIF และ JPG
GIF (Graphic Interchange Format)
เปนรูปแบบของไฟลรูปภาพทีถ่ ูกพัฒนาโดยบริษัท CompuServe ในชวง 1980s และปรับปรุงเรื่อยมา

จนถึงปจจุบัน Gif มีความแตกตางของสีตอจุดได 256 สี (8 BIT) ซึ่งใชห ลักการในการ Map สีตาง ๆ ที่มีอยูใน

13
ตารางสี (Palette) ดวยจํานวนสีเพียงเทานี้และใชเทคโนโลยีในการ Map สีตาง ๆ ก็สามารถทําใหแยกแยะความ
แตกตางในสิ่งตาง ๆ บนรูป ภาพไดดีพอสมควร
อยางไรก็ตาม เสนหของการใชรูป ภาพแบบ GIF ก็ยังคงมีอยูมากพอตัวทีเดียว หลังจากที่มีการปรับปรุง
คุณภาพของรูปแบบมาอยางตอเนื่อง จึงทําใหรูปภาพไฟลแบบ Gif มีความสามารถในการทํางานตาง ๆ ไดคือ
การบีบอัดไฟล GIF (GIF File Compression)
มีหลายคนยังเขาใจผิดอยูวา ไฟลรูป ภาพแบบ GIF ไมสามารถที่จะทําการบีบ อัดขอมูลไดเชนเดียวกับ

รูปแบบอื่น ๆ ในปจจุบัน ไฟลรูปภาพ เสียง และวิดีโอ มักจะมีการบีบอัดขอมูลกันทั้งนั้น แลวแตวาจะเลือกวิธีการ
บีบอัดขอมูลแบบใด ขอดีของการบีบ อัดคือทําใหไฟลมีขนาดเล็กลง แตขอเสียคือคุณภาพของภาพเหลานั้น ก็จะ
ลดลงเปนเงาตามตัวไปดวย วิธีการบีบอัดขอมูลของ GIF จะใชหลักการของ Lempel Zev Welch (LZW) ซึ่งเปน
วิธีการบีบอัดขอมูลที่มีประสิท ธิภาพดีที่สุดสําหรับภาพทีมี่ สีซ้ํากันมาก ๆ แตจะไมเหมาะกับภาพที่มีสีหลากหลาย
Transparent Gif
ภาพที่มีลักษณะเปน Transparent หมายถึงภาพที่มีสวนใดสวนหนึ่งจะสามารถมองทะลุไปยัง

เบื้องหลังของภาพนั้น ได (ไมมี Background) รูป ภาพโดยทั่ว ๆ ไปจะไมมีคุณสมบัติเหลานี้อยู รูป แบบของ GIF
นั้นมีอยูห ลายรูปแบบดวยกัน เชน GIF87a และ GIF89a หากตองการจะทําใหภาพเปน Transparent จะตอง
เลือกบันทึกขอมูลใหเปน แบบ GIF89a การทําใหภาพเปน Transparent จะทําใหผูที่ชมภาพรูสึกในการมองภาพ
ในWeb เปนธรรมชาติมากขึ้น เพราะขอบภาพที่เปนรอยหยักจะถูกกําจัดออกไป เหลือเอาไวแตภาพจริง ๆ
เทานั้น
Interlaced และ Non-Interlaced GIF
หากเขาไปสํารวจใน Web Site อื่น ๆ บอยครั้ง จะพบวาในการแสดงรูป ภาพของ Web Browserอาจไม

เหมือนกันในแตละภาพ เชนการเริ่มแสดงภาพทีละบรรทัดจากดานบนสูดานลาง ทําอยางนี้ไปเรื่อย ๆ จนไดภาพ
ทั้งหมด วิธีการอานขอมูลแบบนั้นเนื่องมาจากการบันทึกภาพนั้น ใหเปน แบบ Non-Interlaced GIF หรือ
Standard GIF
หากแต Web Browser มีการแสดงภาพขึ้น มาทั้งหมดในครั้งเดียว แตภาพยังยังไมชัดเจน แลวคอย ๆ มี
การปรับภาพนั้นใหชัดขึ้นไปเรื่อย ๆ ในแตละครั้ง จนกระทั่งเมื่อหยุดการทํางานในการดาวนโหลดขอมูลทั้ง
หมดแลว รูปภาพจึงจะชัดเจนทั้งหมด นั้นคือรูปแบบของ Interlaced GIF
การบีบอัดไฟล JPEG (JPEG File Compression)
การบีบ อัดขอมูลของรูป แบบนี้จะใชหลักการทางคณิตศาสตรที่มีประสิท ธิภาพสูงมาก ๆ เทคนิคในการ

คํานวณถูกเรียกวา Discrete Cosine Transformation ซึ่งสามารถตั้งระดับของการบีบอัดขอมูลไดตามตองการ

14
แนนอนวาการบีบอัดขอมูลมีอัตราสวนมากเทาไหร คุณภาพในการแสดงผลของภาพนั้นจะลดลงไปดวย การบีบ
อัดขอมูลของรูป แบบนี้จะสามารถลดขนาดไฟลจากขนาดจริงไดมากถึง 100 เทา
โปรแกรมชวยในการสราง Web
ในปจจุบันนี้มีโปรแกรมที่ชวยในการสราง Web มากมายใหเลือกใช ทั้งที่เปน Shareware แจกฟรีและ

ที่เปนโปรแกรมสําเร็จรูปราคาแพง ที่ไดยิน กันบอย ๆ ไดแก Coffee Cup , Dreamweaver , FrontPage , Golive ,
HomeSite เปนตน ซึ่งโปรแกรมเหลานีม้ ีป ระโยชนอยางมากที่จะชวยใหพัฒนา Web Site ไดอยางสะดวกรวดเร็ว
โดยที่ไมจําเปนตองรูภาษา HTML เลย
แตในที่นี้จะขอแนะนําโปรแกรมยอดนิยม 3 ตัว เพื่อเปนขอมูลในการเลือกใชใหเหมาะสม
1. Adobe Golive 6.0
โปรแกรม Adobe Golive เปน โปรแกรมที่มาจากคาย Adobe ซึ่งเปนคายเดียวกันกับโปรแกรม

ออกแบบ Graphic ชื่อดังคือ Photoshop ประสิทธิภาพของตัว Golive โดยเฉพาะในเวอรชั่นลาสุดคือ 6.0 นั้นถือ
วาสูงมาก มีเครื่องมือตาง ๆ ที่ใชในการสรางหนา Web ไดอยางครบคRun สราง Web ไดตั้งแตระดับพื้นฐานไป
จนถึงระดับ สูง สามารถนําขอความตาง ๆ ตลอดจนรูปภาพไปวางตรงสวนไหนของหนา Web ก็ไดตามตองการ
โดยไมจําเปนตองใส Layer เหมือนในโปรแกรมตัวอื่น ๆ ซึ่งจุดเดน ในขอนี้ทําให Golive เปนที่นิยมใชกันมากใน
ตางประเทศ นอกจากนี้ยังมีลูกเลนที่เปน Dynamic Script และ Java Script มากมาย โดยที่ผูใชงานไม
จําเปนตองมีความรูท างดานภาษา HTML หรือ Java Script แตอยางใดหรือผูใชที่เปนโปรแกรมเมอรก็สามารถ
พัฒนาและปรับปรุงแกไข script ไดดวยตนเองโดยผานทางหนา HTML Code Editor สําหรับทางดาน
เทคโนโลยีบนโทรศัพทมือถือ Golive ก็ไดเตรียมอุป กรณทใี่ ชสราง WAP สําหรับ ใชบนโทรศัพทมือถือ รวมไปถึง
เทคโนโลยีระบบ I-mode ที่เปน สุดยอดการใชอิน เทอรเน็ตมือถือของประเทศญี่ป ุน ก็สามารถสรางโดยโปรแกรม
Golive ได
2. Macromedia Dreamweaver
Dreamweaver เปน โปรแกรมจากคาย Macromedia เจาของโปรแกรม Flash MX อันลือลั่น และถือวา

เปน คูแขงตลอดกาลของ Abode Golive สําหรับ Dreamweaver นั้น ผูออกแบบสามารถออกแบบหนา Web ได
อยางสะดวกโดยอาศัยเครื่องมือตาง ๆ ในสวนของ Design View ทําใหผูใชออกแบบหนา Web โดยไม
จําเปนตองรูภาษา HTML และถาผูใชตองการแกไข Code ก็สามารถแกไขไดโดยผานทางหนา Code View
นอกเหนือจากนี้ยังมีระบบ Template ที่ท ําใหผูออกแบบสามารถใชโครงสรางของหนา Web เพียงแบบเดียวกัน
กับ เนื้อหาในทุก ๆ หนาของ Web Site ได ซึ่งจะชวยเพิ่มความสะดวกทั้งในขั้น ตอนการปรับปรุงพัฒนาและการ
แกไขอยางมาก แตทางดาน Dynamic Script หรือพวก Action Script ที่โปรแกรมใหมายังนอยเกินไป

15
3. Microsoft FrontPage
FrontPage เปน โปรแกรมที่ชวยสราง Web Site ที่มีเนื้อหาอยูในรูปแบบของ โปรแกรม Microsoft

Office โดยสามารถเปลี่ยนไฟลเอกสารที่เปน Word , PowerPoint ,Excel ใหเปน ไฟล HTML ไดอยางงายดาย
ซึ่งเปนที่นิยมในหมูผูเริ่มตนทั้งหลาย มี Wizard ชวยในการออกแบบ Web Site โดยไมตองยุงกับภาษา HTML
โปรแกรมนี้จึงเปนเครื่องมือที่ชวยผูออกแบบระดับ ตน และระดับกลางสามารถออกแบบ Web Site ไดอยาง
สะดวกรวดเร็ว โปรแกรมตัวนี้มีจุดเดนในเรือ่ งของการบริหารจัดการ Web Site โดยมีระบบรายงานเกี่ยวกับหนา
WebPage ที่แสดงผลชา WebPage ที่ถูกเพิ่มเขาไป Link ที่ใชงานไมได นอกจากนี้ยังสามารถเชื่อมโยงกับระบบ
ฐานขอมูลไดอยางสะดวกอีกดวย สวนขอเสียก็คือการแทรกคําสั่งเพิ่มเติมเฉพาะของโปรแกรมเขามาโดยไม
จําเปน หรืออาจมีการเปลี่ยนแปลง Code ของโดยไมรูตัว
การเลือกใชสีสําหรับ Web Site (Designing Web Color)
สีสันในหนา WebPage เปนสิ่งที่มีความสําคัญมากในการดึงดูดความสนใจของผูใช เนื่องจากสิ่งแรกที่

ผูใชมองเห็นจาก WebPage ก็คือสี ซึ่งเปนสิ่งกําหนดบรรยากาศและความรูสึกโดยรวมของ Web Site สามารถ
ใชสีไดกับ ทุกองคประกอบของ WebPage ตั้งแตตัวอักษร , รูป ภาพ, Link, สีพื้น หลัง หรือรูป ภาพพื้น หลัง การ
เลือกใชสีอยางเหมาะสมจะชวยสื่อความหมายของเนื้อหา และเพิ่มความสวยงามใหกับหนา Web นั้น แตในทาง
กลับ กัน สีที่ไ มเ หมาะสมอาจสรางความยากลํา บากในการอานหรื อรบกวนสายตาผู ใชร วมอาจทําใหการสื่ อ
ความหมายไมถูกตองก็ได
เรื่องของสีใน Web Site มีความซับซอนพอสมควร เริ่มตั้งแตการเขาใจถึงการแสดงออกของสีภายใต
สิ่งแวดลอมที่ตางกันของ Browser , จอมอนิเตอร และระบบปฏิบ ัติการ ตลอดจนมีความเขาใจในทฤษฎีสี รูจัก
การเลือกใชสีท ี่เหมาะสมเพื่อการสื่อความหมายอยางสวยงาม ดังนั้น ความหมายของคือการตัดสิน ใจเลือ กใชสี
ใหเหมาะสมกับบุคคลและเปาหมายของ Web Site เพื่อการแสดงผลที่ตรงกับความประสงคมากที่สุด การใชชุด
สีท ี่เหมาะสม กลมกลืน ไมเพียงแตจะสรางความพึงพอใจใหกับผูใช แตยังทําใหพวกเขามีความรูสึกรวมไปกับ
เปาหมายของ Web Site นั้นดวย ไมวาจะเปนการใหขอมูล สรางความบัน เทิง รวมถึงการขายสิน คาหรือบริการ
ประโยชนของสีใน Web Site
สีเปนเครื่องมืออเนกประสงคอยางหนึ่งที่มีความสําคัญมากในการออกแบบ Web Site เนื่องจากสี

สามารถสื่อถึงความรูสึกและอารมณ และชวยสรางความสัมพันธระหวางสถานที่กับ เวลาอีกดวย ดังนั้นสีจึงเปน
ปจจัยสําคัญอยางหนึ่งที่จะชวยเสริมสรางความหมายขององคป ระกอบใหกับ WebPage ไดเปนอยางดี

16
1. สีส ามารถชักนํ าสายตาผู อานไปยังทุ กบริเ วณใหห นา WebPage ผูอ านจะมีการเชื่อ มโยง
ความรูสึกกับ บริเ วณของสีในรูป แบบที่คาดหวังไวได การเลือ กเฉดสีแ ละตําแหนงของสีอ ยางรอบคอบในหนา
Web สามารถนําทางใหผูอานติดตามเนื้อหาบริเวณตาง ๆ ตามที่กําหนดไวได วิธีน ี้จะเปน ประโยชนอ ยางมาก
เมื่อตองการใหผูอานใหความสนใจกับสวนใดสวนหนึ่งใน Web Site เปนพิเศษ เชน ขอ มูลใหม โปรโมชั่น พิเศษ
หรือบริเวณที่ไมคอยไดรับ ความสนใจมากอน
2. สีชวยเชื่อ มโยงบริเวณที่ไดรับการออกแบบเขาดวยกัน ผูอานจะมีความรูสึกวาบริเวณที่มีสี

เดียวกัน จะมีความสําคัญเทากัน วิธีการเชื่อมโยงแบบนี้ชวยจัดกลุมของขอมูลที่มีความสัมพัน ธอยางไมเดนชัด
เขาดวยกันได
3. สีสามารถนําไปใชในการแบงบริเวณตาง ๆ ออกจากกัน ทํานองเดียวกับ การเชื่อมโยงบริเวณที่

มีสีเหมือนกันเขาดวยกัน แตในขณะเดียวกัน ก็เปนการแบงแยกบริเวณที่มีสีตางกัน ออกจากกัน
4. สีสามารถดึงดูดความสนใจของผูอ าน สายตาของผูอานมักจะมองไปที่สีท ี่มีลักษณะเดนหรือ

ผิดปกติเสมอ การออกแบบ Web Site ดวยการเลือกใชสีอยางรอบคอบ ไมเพียงแตกระตุน ความสนใจของผูอาน
เพียงเทานั้น แตยังชวยหนวงเหนี่ยวใหพวกเขาอยูใน Web Site ไดนานยิ่งขึ้น สวน Web Site ที่ใชสีไมเหมาะสม
เสมือนเปนการขับ ไลผูชมไปสู Web อื่นที่มีการออกแบบที่ดีกวา
5. สีสามารถสรางอารมณโดยรวมของ WebPage และกระตุนความรูสึกตอบสนองจากผูชมได

นอกเหนือจากความรูสึกที่ไดรับจากสีตามหลักจิตวิทยาแลว ผูชมยังอาจมีอารมณและความรูสึกสัมพันธกับสี
บางสีห รือบางกลุมเปนพิเศษ
6. สีสามารถชวยสรางระเบีย บใหกับขอความตาง ๆ เชนการใชสีแยกสวนระหวางหัวเรื่องกับตัว

เรื่อง หรือการสรางความแตกตางใหกับขอความบางสวน โดยที่ใชสีแดงสําหรับคําเตือน หรือใชสีเทาสําหรับ สิ่งที่
เปนทางเลือก
7. นอกเหนือจากการใชสีในการออกแบบแลว สียังสามารถสงเสริมเอกลักษณขององคกรหรือ
หนวยงาน ๆ นั้นได ดวยการใชสีท ี่เปน เอกลักษณขององคกรมาเปน โทนสีหลักของ Web Site
การออกแบบเกี่ยวกับ สีไมใชเรื่องงาย แมวาจะมีกฎเกณฑตาง ๆ ที่จะชวยในการสรางชุดสี ที่มี
ประโยชนมากมาย แตก็มีแนวทางและความเขาใจผิดจํานวนมากที่จะนําไปสูการสรางชุดสีท ี่ใหความรูสึกไม
เหมาะสม ในบางสถานการณอาจใชสีเปน เพียงเครื่องประดับ อยางหนึ่งในการออกแบบ แตในทางตรงกัน ขาม
การใชสีท ี่มากเกิน ไปอาจทําใหไปบดบังองคประกอบอื่น ๆ ในหนา WebPage ได ดังนั้นการเลือกใชสีให
เหมาะสมและเกิดประโยชนจึงเปน เรื่องที่สําคัญ แมวาการเลือกชุดของสีมามาใชใน WebPage คอนขางจะ
ขึ้น อยูกับความชอบของแตละคน อยางนอยควรมีความเขาใจถึงหลักการใชสีเบื้องตน ที่จะชวยในการเลือกใชสี

17
ชุดใดชุดหนึ่งจากชุดสีพื้นฐานอื่น ๆ ได อยางเหมาะสมกับลักษณะของ Web Site อยางไรก็ตามทฤษฎีเหลานี้จะ
ไมท ําใหสามารถเลือกชุดสีไดในทันทีทัน ใด แตอยางนอยก็จะชวยนําไปในทิศทางที่ถูกตองได
รูป แบบชุดสีพื้นฐาน (Simple Color Schemes)
1. ชุดสีรอน (Warm Color Schemes)

ชุดสีรอนประกอบดวยสีมวงแกมแดง , แดง, สม เหลือง และเขียวอมเหลือง สีเหลานี้สรางความรูสึก
อบอุน สบายและความรูสึกตอนรับ แกผูชม ชวยดึงดูดความสนใจไดงาย ในทางจิตวิท ยาสีรอนมีความสัมพัน ธกับ
ความสุข สะดวกสบาย สีตาง ๆ ในชุดสีรอนมีความกลมกลืนอยูในตัวเองขณะที่อาจดูไมน าสนใจบาง เพราะขาด
สีป ระกอบที่ตัดกัน อยางชัดเจน
2. ชุดสีเย็น (Cool Color Scheme)

ชุดสีเย็น ประกอบดวยสีมวง , น้ําเงิน, น้ําเงิน ออน, ฟา, น้ําเงิน แกมเขียว และสีเขียว ตรงกัน ขามกับชุดสี
รอน ชุดสีเย็น จะใหความรูสึกสบาย องคป ระกอบที่ใชชุดสีเย็นเหลานี้จะดูสุภาพเรียบรอย และมีความชํานาญแต
ในทางจิตวิท ยา สีเย็น เหลานี้กลับมีความสัมพันธกับ ความซึมเศราหดหูเสียใจ นอกจากนั้น ชุดสีเย็น มีความ
กลมกลืน โดยธรรมชาติ แตอาจจะดูไมน าสนใจในบางครั้งเพราะขาดความแตกตางของสีที่เดน ชัด เชนเดียวกับ
ชุดสีรอน
3. ชุดสีแบบสีเดีย ว (Monochromatic Color Scheme)
รูปแบบของชุดสีที่งายที่สุดก็คือ ชุดสีแบบสีเดียวที่มีคาสีบริสุทธิ์เพียงสีเดียว ความหลากหลายของชุดสี
นี้เกิดจากการเพิ่มความเขมหรือความออนในระดับ ตาง ๆ ใหกับสีตั้งตน ดังนั้น ชุดสีแบบเดียวกับสีแดงอาจ
ประกอบดวยสีแดงลวน , สีแดงอิฐ, สีสตรอเบอรี,่ สีชมพู ชุดสีแบบนี้คอนขางมีความกลมกลืนเปนหนึ่งเดียวกัน
และมีประสิทธิภาพในการสรางอารมณโดยรวมดวยการใชสีเพียงสีเดียว แตในบางครั้งรูปแบบที่มีสีเดียวนี้อาจดู
ไมมีชีวิตชีวา เพราะขาดความหลากหลายของสี ซึ่งอาจทําใหผูอานขาดความสนใจ
4. ชุดสีแบบสามเสา (Triadic Color Scheme)

วิธีการงาย ๆ อีกแบบหนึ่งในการเลือกชุดสีมาใชก็คือ การนึกถึงสามเหลี่ยมดานเทาลอยอยูเหนือวงลอ
สี เชน แดง, เขียว, น้ําเงิน จะเห็นวาสีทั้งสามสีน ี้มีการตัดกัน อยางรุนแรง แตสามารถสรางความสะดุดตาไดเปน
อยางมาก มีชีวิตชีวา เปนประโยชนในการนําเสนอขอมูลในรูปแบบที่ชัดเจน แนนอน แตในบางครั้งความสดใส
ดังกลาวอาจมีลักษณะฉูดฉาดจนเกินไปจนรบกวนการสื่อความหมายที่แทจริงได
5. ชุดสีที่ค ลายคลึงกัน (Analogous Color Scheme)

ชุดสีท ี่มีรูป แบบงายอีกแบหนึ่ง ก็คือชุดสีที่มีความคลายคลึงกัน ซึ่งประกอบดวยสี 2 หรือ 3 สีที่อยู
ติดกัน ในวงลอสี เชน แดงแกมมวง, สีแดง และสีสม เนื่องจากชุดสีท ี่มีอยูในรูปแบบนี้มีจํานวนมากมายทําให
สามารถเลือกชุดสีแบบนี้มาใชงานไดอยางสะดวก และแมสามารถเพิ่มจํานวนสีในชุดใหเพิ่มขึ้นเปน 4-5 สีได แต

18
กลับมีผลทําใหขอบเขตของสีมีความกวางเกินไป ทําใหสีที่อยูตรงปลายทั้งสองของชุดไมมีความสัมพัน ธกัน เปน
สาเหตุท ี่ทําใหลักษณะการมีสีคลายคลึงกัน ลดลง
การจดทะเบียนโดเมนเนม (Domain Name)
โดเมนเนม หรือ ชื่อของ Web Site ถือเปนปจจัยที่มีความสําคัญเปนอยางยิ่งในการทํา Web Site ซึ่ง

สามารถใชโดเมนเนมเปน การบงบอกถึงตัวเองที่อาจจะอยูในฐานะผูผลิต ผูขายสิน คาหรือใหบริการตาง ๆ หรือ
บงบอกถึงลักษณะของสินคาหรือบริการ ตลอดจนลักษณะของ Web Site นั้น ๆ ก็ได การจดทะเบียนโดเมนเนม
แบงออกเปน 2 ระดับ ใหญ ๆ ไดแก
1. Top Level Domain Name

Top Level Domain Name เปนโดเมนเนมในระดับ สากล อยูในความควบคุมดูแลของ www.internic.net
ซึ่งโดเมนเนมในระดับนี้แบงนามสกุลออกเปน 6 ประเภท ซึ่งแตละประเภทก็จะมีลักษณะการใชงานที่แตกตางกัน
ไปดังนี้
.com A Commercial Organization
.net Network Access Providers
.org Usually Nonprofit Organization
.edu An Education Intuition
.gov A Government (US Government Only)
.mil U.S. Military Organization
2. Local Domain Name

Local Domain Name เปน โดเมนเนมทองถิ่นที่ในแตละประเทศก็จะมีโดเมนเปน ของตัวเอง สังเกตได
จากโดเมนเนมนั้น จะลงทายดวยชื่อยอของประเทศ เชน .co.th ก็หมายถึงประเทศไทย .co.jp หมายถึงประเทศ
ญี่ป ุน เปนตน Local Domain Name ในประเทศไทยจะอยูในความดูแลของ www.thnic.net ซึ่งจะแบง
นามสกุลตามลักษณะการใชงานไดดังนี้
.co.th company
.net.th network
.ac.th Academic
.or.th Organization
.go.th Government
.mi.th Military
.in.th Individual

19
การติดตอระหวาง Client และ Server
การติดตอระหวางขอมูลตาง ๆ ของ www ขึ้น อยูกับระบบ Client – Server ซึ่งมีสวนประกอบสําคัญ
3 สวนคือ
Client
Server Client
Information
Client
Server
รูปที่ 1.6 สวนประกอบของการติดตอระหวาง Client และ Server

1. Clients
2. Server
3. Network
ในสวนของ Client จะมีโปรแกรมที่สวนมากจะทํางานบนเครื่องของผูใช แตยังมีบางสวนที่ติดตอกับ
Server เชน Browser, โปรแกรม FPT เปน ตน Software ในสวนของ Client จะถูกออกแบบมาใหเขากันไดกับ
Hardware ในแตละแบบ เชน PC และ Macintosh จะมีความแตกตางกันทั้งดาน Hardware และ Software แต
โปรแกรมในสวนของ Client เชน Browser ทําหนาที่แสดงผลที่สงมาจากฝง Server โดยที่ไมมีความแตกตางกัน
มากนัก
ในการทํางานของระบบ Client / Server จะเริ่มจากการรองขอขอมูลจากเครื่องผูใชผานเครือขายไปยัง
Server เมื่อ Server ไดรับคํารองขอขอมูลแลวโปรแกรมทางฝง Server มีหนาจัดเตรียมและสงขอมูลผาน
เครือขายกลับ มาเพื่อแสดงผลในฝง Client การทํางานของระบบ Client / Server ที่ผาน Protocol TCP/IP จะไม
ตองกังวลถึงความเขากันไดของ Software และ Hardware ระหวางเครื่อง Client และ Server เชน Browser
ของเครื่อง Macintosh สามารถที่จะติดตอขอขอมูลจาก Server ที่ Run ระบบปฏิบัติการ UNIX หรือ WINDOW
2000 ได

20
ศัพทเทคนิคเกี่ยวกับ Internet ที่ควรรู
Web Site : กลุมของ WebPage ในหนวยงานเดียวกันที่เชื่อมโยงกันดวยระบบ Hyper Link ใน

Web Site หนึ่ง ๆ จะประกอบดวย WebPage หลาย ๆ หนา
Home Page : หนาแรกของ Web Site ที่ผูใชจะไดพบเมื่อเปดเขาไปใน Web Site หนึ่ง ๆ ดวยการพิมพที่
อยูของ Web Site ลงในBrowser
Web Page : เอกสาร HTML ที่ใชเปนสื่อในการนําเสนอขอมูลบนอิน เทอรเน็ต ซึ่งจะตองอาศัย Browser
ในการแสดงผล
HTML : ภาษามาตรฐานที่ใชในการสราง Web เพื่อนําไปแสดงผลใน Browser ซึ่งจะประกอบดวย
ตัวอักษร , Graphic , Link ฯลฯ
URL : ยอมาจาก Universal Resource Locator มาตรฐานในการกําหนดที่อยูของ Web Site ใน
เครือขายอิน เทอรเน็ต อาจเรียกอีกอยางหนึ่งวา Internet Address

21
บทที่ 2
Adobe Photoshop 7
โปรแกรม Photoshop เปนโปรแกรมยอดนิยมในการจัดการงานเกี่ยวกับ ภาพ เนื่องจากใชในการสรางภาพ

และตกแตงภาพ ไดอยางมีป ระสิทธิภาพ ไมวาจะเปนงานในดานสิ่งพิมพ นิตยสาร และงานดานมัลติมีเดีย ซึ่งจาก
การที่ท ุกทานทราบวาในงาน Web นั้น ภาพเปนสิ่งสําคัญของงาน Web อยางหนึ่งนอกเหนือจากเนื้อหา หรือ
Content ดังนั้น โปรแกรม Photoshop จึงเปนเครื่องมือสําคัญอยางหนึ่งของการทํางาน Web โดยเฉพาะงานดาน
ออกแบบ และตกแตงภาพของ Web Site ใหมีเอกลักษณหรือความความพอใจของผูทํา Webนั้นๆ
จากที่กลาวมาในขั้น ตน วาโปรแกรมที่ท ุกทานจะไดเรียนรูและทําความเขาใจนั้น เปน การทํางานเกี่ยวกับ
ภาพดังนั้นมาทําความรูจักกับภาพบนคอมพิวเตอรเสียกอนวาคอมพิวเตอรนั้นมีการประมวลผลอานภาพได แบบ
ใดบางซึง่ หลายๆ ทานคงจะพอทราบกันแลววาการประมวลภาพในคอมพิวเตอรนั้นมีอยู 2 แบบแตกตางกัน คือ
1. การประมวลภาพแบบ Vector เปนการประผลมวลแบบอาศัยหลักการคํานวณทางคณิตศาสตร
2. การเก็บ ภาพแสดงผลแบบ Bitmap เปน การประมวลผลแบบอาศัยอานคาสีในแตละพิกCell
(Pixel) ซึ่งโปรแกรม Photoshop ใชวิธีน ี้ในการประมวลผล ภาพเปรียบเทียบการแสดงผลแบบ
Vectorและ Bitmap
เขาสูโปรแกรม Photoshop
ตอจากนี้จะมาทําความรูจักกับโปรแกรม Photoshop แตกอนที่จะเริ่มทํางานใน Photoshop มารูจัก
หนาตาของโปรแกรมกันกอน
ขั้นตอนการเขาโปรแกรม
1. Click Icon บน Desktop

2. Clickปุม Start > Program > Adobe PhotoShop
รูปที่ 2.1 การเรียกใชโปรแกรม Photoshop

22
หนาจอแรกของโปรแกรม Photoshop
ประกอบดวย องคประกอบดวยสวนตางๆดังตอไปนี้
1. สัญลักษณของ Photoshop
2. แถบเมนู (menu bar)
3. ปุมควบคุมการทํางาน
4. แถบกําหนดรูปแบบของเครื่องมือที่ใชงาน (Tool Option Bar )
5. กลองเครื่องมือ ( Tool Palette)
6. Palette ที่รวบรวมคุณสมบัติของการทํางานตาง เชน Navigator, Color, Layer, History เปนตน
1 3
2
4
6
5
6
รูปที่ 2.2 หนาหลักของโปรแกรม Photoshop
คําสั่ง Menu Bar ทั้งหมด 9 คําสั่ง ขออธิบายโดยสังเขปดังนี้

• File เปนคําสั่งการทํางานเกี่ยวกับไฟล เชน การเปดไฟล (open) ปดไฟล (close) การบันทึก
ไฟล (Save) เปนตน
• Edit เปนคําสั่งเกี่ยวกับการปรับแตงตางๆ เชน การตัด ( Cut) คัดลอก ( Copy ) ปะ (Paste )
เติมสี (Fill) และเปลี่ยนขนาด (Transform ) รวมไปถึงคุณสมบัติตางๆ
• Image เปนคําสั่งที่เกี่ยวกับ การปรับภาพทั้งหมด เชน สีของภาพ การทําภาพขาวดํา การเพิ่ม
ความสวาง เปนตน

23
• Layer เปนเมนูที่รวบรวมคําสัง่ ตางๆเกี่ยวกับ Layer ไว เชนการเรียงลําดับกอนหลังของ Layer

และความสัมพัน ธกันระหวางแตละ Layer
• Select เปนแถบคําสั่งที่ท ํางานเกี่ยวกับการจัดการพื้นที่ท ี่เลือก มักใชรวมกับ Tools palette
• Fitter เปนแถบคําสั่งที่เกี่ยวกับ การปรับ เปลี่ยนภาพ มีการใส effect ตางๆ ใหกับ ภาพ โดยมี
ฟลเตอรท ี่ติดมากับตัวโปรแกรมมีท ั้งหมด 14 กลุม มีการทํางานที่แตกตางออกไป
• View รวบรวมคําสั่งในการกําหนดมุมมองภาพในรูปแบบตางๆ การยอ-ขยาย รวมทั้งเรื่อง
Grid, Guide และไมบรรทัด
• Window รวบรวมคําสั่งที่เกี่ยวกับการจัดหนาตางแตละหนาตาง ที่ปรากฏบนจอรวมถึงหนาตาง
Palette ดวย
• Help รวบรวมวิธีการใชงาน และคําแนะนําเกี่ยวกับ โปรแกรม
หลังจากที่แตละทานทราบวาแตละเมนูมีการทํางานเกี่ยวกับอะไร และกอนที่จะทําการเริ่มใชอุปกรณ
ตางๆ ในการทํางานตกแตง หรือสรางรูปภาพ มาเรียนรู Tip เล็ก ๆ หลักการ Design พื้น ที่หนาจอกันเสียกอน
จากแบบสํารวจในประเทศไทยพบวา คนสวนใหญในปจจุบันนั้น ยังนิยมใชการแสดงผลของจอภาพนั้น
(Resolution) ที่ 800*600 ซึ่ง การออกแบบในหนา Page ตองคํานึงถึงเนื้อที่จริง ๆ ที่ออกแบบไดบน Brower
เสียกอน
ซึ่งขนาดที่กําหนดหนาจอสําหรับ 800 *600 นั้น จะออกแบบไวท ี่ 780*420 เนื่องจากติด Scrollbar และ
Menu bar ของ Browser
การเปด File ใหมขึ้นทํางาน

1. Clickที่เมนู File
2. คําสั่ง New ( Ctrl + N)
3. เกิดหนาตาง NEW
รูปที่ 2.3 หนาตางของคําสั่ง File > New
Name : ชื่อ
Image size : ขนาดของ File ซึ่งเปลี่ยนแปลงตาม ขนาดและ Resolution
Width : ความกวาง ซึ่งมีหนวย ตางๆ เชน พิกCell เซนติเมตร นิ้ว

24
Height : ความสูง ซึ่งมีหนวย ตางๆ เชน พิกCell เซนติเมตร นิ้ว
Resolution : คาความละเอียด (ซึ่งความละเอียดบนหนาจอ = 72 )
Mode : ใช Mode RGB Color สําหรับการออกแบบWeb
การกําหนดมุมมองใน Photoshop
การกําหนดการมองภาพทั้งหมดโดยใช Toolbox options

เปน การกําหนดมุมมอง เพื่อจะมองเห็น ภาพทั้งภาพอยางชัดเจน โดยการ Click Mouse ที่ Palette
Tool ซึ่งประกอบดวย 3 รูป แบบดังนี้คือ
1. Standard Screen Mode เปนหนาจอปกติของ Photoshop จะแสดงภาพทั้งหมดใหเห็นภายใน
กรอบหนาตาง
2. Full Screen Mode with Menu Bar ไมมีกรอบหนาตาง รูปทั้งหมดจะถูกแสดงเต็มหนาจอ แตยัง
เหลือเมนูบ าร
3. Full Screen Mode รูปทั้งหมดถูกเต็มจอ ไมมี กรอบหนาตางไมมีเมนูบาร และพื้นที่ที่เหลือของ
หนาจอจะถูกแทนดวยสีดํา
Tip & Trick
ถาตองการดูรูปอยางเดียวโดยไมมี Toolbar และ Palette ตางๆใหกดที่ ปุม Tab แลวเมนู

Toolbar และ Palette จะหายไป และกดปุม Tab อีกครั้งเมนูตางๆจะกลับมา
การยอ-ขยายภาพ โดยใช Zoom Tool
การยอ-ขยายภาพ จะชวยใหสามารถตกแตงภาพไดงายและมีความละเอียดมากขึ้นสามารถขนานภาพ
และตกแตงภาพไดจนถึงสวนที่ยอยที่สุดของภาพ คือ พิกCellตอพิกCell
Zoom Tool เปนเครื่องมือหนึ่งที่อยูใน Toolbox มีรูป รางเหมือนแวน ขยาย ใชในการยอหรือขยายภาพ
มีขั้นตอนการทํางานดังนี้ คือ
1. Click Mouse ที่ไอคอน ใน Toolbar

2. เมื่อเลือ่ น Mouse เขาไปบริเวณรูปภาพ ตัวชี้ Mouse จะเปลี่ยนไปเปนรูป ในขัน้ ตอนมีวิธีใชท ี่
แตกตางกันดังนี้
2.1 เมื่อตองการขยายภาพ ใหเลือกบริเวณที่ตองการ ขยายแลว Click Mouse ภาพบริเวณนั้นจะ
ขยายออก และเมื่อ Click Mouseไปเรื่อย ๆ ภาพก็จะขยายขึ้น เรื่อย ๆ

25
2.2 เมื่อตองการยอภาพ ใหกดคียบอรดที่ปุม Alt คางไวจะสังเกตเห็นวาตัวชี้ Mouseเปลี่ยนเปน
หลังจากนั้น เลือกบริเวณที่ตองการยอภาพ และ Click Mouse จะสังเกตเห็นวาภาพ
บริเวณนั้น จะถูกยอลง
กําหนดมุมองของภาพ โดยการใช Hand Tool เลื่อนดูภาพ

ในกรณีท ี่ภาพมีขนาดใหญ ไมสามารถมองเห็นทุกสวนของภาพไดในหนาจอเดียว สามารถเลือ่ นภาพ
เพื่อดูภาพในทุกจุดได ภายในหนาจอเดียวไดโดยไมตองอาศัย Scrollbar อีกตอไป ดวยวิธีงาย ๆ คือ
การใช Hand Tool ที่อยู Toolbox.
Navigator Palette ศูน ยรวมการกําหนดมุมมองภาพ
รูปที่ 2.4 Navigator Pallette
จากหัวขอที่ผาน ๆ มาก็ไดเห็น ถึงการกําหนดมุมมองของภาพในรูปแบบตาง ๆ ซึ่งความสัมพันธระหวาง

การใชเครื่องมือเหลานั้นกับภาพที่เห็นถูกรวบรวมไวดวยกันที่ Navigator Palette ดังตอไปนี้คือ
1. สามารถเรียกดู Navigator Palette ไดโดยการ Click Mouse ที่ Window > Show
Navigator หรือถามี Navigator Platte อยูแลวเพียงแต Click Mouse ที่ Tab ที่มีชื่อวา
Navigator
2. สังเกตวา ภาพที่ใชงานอยู ปรากฏใน Navigator Palette
3. กรอบสี่เหลี่ยมสีแดงสดพื้นทีภาพที่แสดงบนหนาตางภาพ
4. เมื่อเลื่อน Mouseไปที่กรอบสีแดง จะปรากฏ Click Mouse และลากเสน กรอบสีแดงไป
ยังพื้นที่ที่ตองการดู ใชงานเหมือนคําสั่ง Hand Tool
5. บอกเปอรเซ็นตการขยายของภาพในขณะนั้น สามารถพิมพตัวเลขกําหนดเปอรเซ็น ตการ
ขยายภาพเองได สังเกตวา กรอบสีแดงจะเล็กลงเมื่ออัตราการขยายสูงขึ้น และภาพที่
แสดงในหนาตางภาพก็จะมีขนาดใหญขึ้นดวย
6. Click Mouse เพื่อปรับ เปอรเซ็น ตการยอเปน Step
7. แถบเลื่อนเพิ่ม-ลด อัตราการขยายของภาพ ทางขวาเพิ่ม ทางซายลด
8. Click Mouse เพื่อปรับ เปอรเซ็น ตการขยายเปน Step

26
Selection เลือกพื้นที่เพื่อการแกไข และตกแตงภาพ
ความหมายของการ Selection
ใน Photoshop หากตองการปรับแตงภาพ แตไมไดเลือกพื้นที่อยางเจาะจง ก็หมายความวา กําลัง
ปรับแตงทั้งภาพ ซึ่งในความเปน จริงแลว ภาพบางภาพตองการปรับ แตงเฉพาะบางจุดเทานั้น ดังนั้นการ
Selection จึงนับวาเปน เรื่องจําเปน
การ Selection โดยใช Marquee Tool

Marquee Tool เปนเครื่องมือที่ท ําใหท ําการ Selection แบบมีรูปแบบตายตัว เชน การเลือกพื้นที่เปน
รูป สี่เหลี่ยม วงกลม ดวยวิธีงาย ๆ เพียงลาก Mouse ผานพื้นที่ภาพเทานั้น Marquee Tool แบงตวามลักษณะ
การใชงานเปน 4 รูป แบบคือ
รูปที่ 2.5 เครื่องมือในสวนของ Marquee Tool
วิธีการใชงาน Marquee Tool

ดังกลาวมาแลวขางตน Marquee Tool มี 4 ลักษณะ ในหัวขอนี้
วิธีการใช :
1. เลือกรูปแบบของ Marquee โดย Click Mouse คางไว จะปรากฏรูปทรงตาง ๆ ของ Marquee
Selection ที่ซอนไว เลื่อน Mouse ไปยังรูปแบบที่ตองการแลวปลอย Mouse แตถารูป แบบที่
ตองการไมถูกซอนอยู ก็สามารถ Click Mouse ที่ไอคอนนั้นไดเลย หรือกดปุม <M> ซึ่งเปน short
cut ของ Marquee Tool ในที่น ี้เลือก Rectangular Marquee Tool
2. เลื่อนตัวชี้ Mouse ไปที่บ ริเวณภาพ ตัวชี้ Mouse จะเปลี่ยนเปน + หลังจากนั้น Click Mouse และ
ลากเพื่อเลือกพื้น ที่ท ี่ตองการ
3. เมื่อไดพื้นที่ที่ตองการแลวปลอย Mouse จะปรากฏบริเวณที่เลือกขึ้น
Marquee Options
สามารถกําหนดคุณลักษณะตาง ๆ ของ Marquee Tool ไดโดย Click Mouse เลือกที่ Option Bar จะ
แสดงขึ้นดังรูป
รูปที่ 2.6 Option Bar ขณะทํางานที่ Marquee Tool

27
รายละเอีย ดของ Function ตาง ๆ ใน Marquee Options
1. Feather เปนการกําหนดความฟุงเบลอของขอบที่เลือก มีคาตั้งแต 1 ถึง 255 เปนการสรางเสนขอบ

Selection ใหมีความฟุงเบลอและลดความละเอียดของขอบที่ Selection ซึ่งจะเห็น การเปลี่ยนแปลงที่
ชัดเจน เมื่อมีการ Cut, Copy, หรือ Move พื้นที่ท ี่เลือกนั้น หากคาของ Feather มาก ความฟุงเบลอจะมาก
ตามดวย
2. Style ของ Marquee Options แบงเปน 3 ประเภท คือ
• Normal เลือกอิสระ ขนาดของพื้นที่เลือกจะเปลี่ยนแปลงไปตามตําแหนงของ Mouse ที่เลื่อนไป
• Constrained Aspect Ration เลือกแบบกําหนดคายืนหยุน ตามอัตราสวนความกวาง ความสูงที่ได
กําหนดไว เชน กําหนดให Width = 1 และ Height = 1 หมายถึงเมื่อลากMouse พื้นที่เลือกไดจะถูก
บังคับ ใหเปน อัตราสวน 1 : 1
• Fixed Size เลือกโดยกําหนดพื้นที่เลือกทั้งกวาง และความสูงอยางเจาะจงแนนอน
การเลือกพื้นที่ใหม การเพิ่ม ตัด ลด และเคลื่อนยายพื้นที่ท ี่เลือ ก

สามารถทําไดโดยใช Option ตาง ๆ ที่อยูใน Tool Option Bar ดังนี้คือ
• ในกรณีที่เลือกพื้นที่ภาพ กด ตัวชี้ Mouseจะเปลี่ยนเปนรูป + หลังจากนั้นให Drag Mouse ให
พื้นที่ท ี่ตองการ
• ในกรณีที่เพิ่มพื้นที่ทเลืี่ อก กด หรือ ปุม Shift คางไว ตัวชี้ Mouse จะเปลี่ยนเปน รูป ++ หลังจากนั้นให
Click Mouse คางไว และลาก Mouseไปบริเวณพื้นที่ที่ตองการเพิ่ม
• ในกรณีที่ลดพื้นที่กด หรือ กดปุม alt คางไว ตัวชี้Mouseจะเปนเปนรูป +- หลังจากนั้นให Click
Mouse คางไว และลาก Mouse ไปบริเวณพื้นที่ที่ตองการลด
การ Selection โดยใช Lasso Tool
รูปที่ 2.7 เครื่องมือในสวนของ Lasso Tool
เปนการ Selection เปน การเลือกพื้นที่การทํางานแบบอิสระ โดยการทํางาน คือ ลาก selection ตาม

พื้นที่ที่ตองการ และจุดสิ้นสุดนั้นตองบรรจบกลับที่จุดเริ่มตน รูปแบบเครื่องมือ Lasso Tool
1. Lasso Tool เปน การเลือกแบบ อิสระ คือเลือกโดยอิสระดวยมือของ
การใช Clickเลือกเครื่องมือ จากนั้น Click Mouse และลากไปตามขอบพื้นที่ท ี่ตองการเลือก และ
จุดสุดทายใหบรรจบที่จุดแรก

28
Lasso Option
Anti –aliased เปน ชวยใหขอบพื้นที่เลือกเรียบ ไมขรุขระ ทําใหงานดูเรียบรอยมากขึ้น
รูปที่ 2.8 Option Bar ขณะทํางานที่ Lasso Tool
2. Polygonal Lasso Tool เปน การเลือกแบบสรางขอบเปนเสนตรงหลายเหลี่ยม

การใช เป น เลือ กพื้ น ที่ แ บบรู ป หลายเหลี่ย ม โดยทํา การClickที่ จุดเริ่ ม ต น จากนั้ น ลากไปยั ง
ตําแหนงที่ตองการ จากนั้นแลวClickตําแหนงถัดไป ซึ่งจะเกิดพื้น ที่ที่เ ลือ กเปน แบบหลายเหลี่ยม
จนกลับ มายังจุกเริ่มตนและClickที่ตําแหนงเดิม จะเกิดเสนประ Selection เกิดขึ้น
3. Magnetic Lasso Tool เปน เครื่องมือที่ทํางานเกาะขอบพื้นทีสี่ ท ี่ใกลเคียง
การใช เลือกเครื่องมือ จากนั้น ClickMouse ที่จุดเริ่มตน จาก Mouse ลากไปบริเวณที่ตองการ
เครื่องมือจะทํางานเลือกพื้นที่ในขอบเองโดยอัตโนมัติ การสิ้นสุดการทํางานโดยกลับไป Click จุด
ที่บรรจบกับจุดเริ่มตน อีกครั้ง
Magic Wand Tool
เปน การเลือกพื้นที่อิงกับคาสีของรูป เปน สําคัญ โดยโปรแกรมจะเลือกเฉพาะคาสีท ี่ใกลเคียงที่ Click

ดังนั้น วิธีน ี้เหมาะสมกับ การเลือกพื้นที่ที่ไมมีสีแตกตางกันหรือเปนสีเดียวจะดีมาก
วิธีการ :
1. เลือกเครื่องมือ Magic Wand Tool
2. กําหนดคาตางบน Option Bar ดังนี้
รูปที่ 2.9 Option Bar ขณะทํางานที่ Lasso Tool

• Tolerance : กําหนดคาสี
• Anti-aliased : ทําใหขอบเรียบไมมีรอบขรุขระ
• Contiguous : เปนการเลือกบริเวณสีที่ใกลเคียงกัน เฉพาะกลุมพิกCellที่ได Click Mouse เทานั้น
3. Click Mouse บนพื้นที่ท ี่เลือก จะเกิดเสนประบนพืน้ ที่ที่เลือก
การเคลื่อนยายภาพ
Move Tool
เปน เครื่องมือในการเคลื่อนยายภาพหรือพื้นที่ที่ตองการทําการเคลื่อนที่
1. เลือกพื้นที่ (Selection) ที่ตองการหรือรูปภาพที่ตองการ
2. Click Mouse เลือกอุปกรณ
29
3. Click Mouse คางลากพื้น ที่ท ี่เลือกหรือภาพที่ตอ งการ ไปวางยังตําแหนงที่ตองการปลอย Mouse
การเลือกสี
สามารถทําได หลายวิธี
1. ใชที่ Color Palette โดยการเลือกสีที่ตองการ จากนั้น สีจะเกิดบนชองสี Foreground
2. ใช Swatches Palette
3. ใช Eyedropper Tool เปนเครื่องมือดูดสี
รูปที่ 2.10 Color Pallette
วิธีการใชงาน
1. Click เลือกเครื่องมือ
2. Click Mouse เพื่อไปดูดสีตามที่ตองการบนงานหรือพื้นที่ตองการ
3. จากนั้น ดูรูป บน Tool Palette จะเปลี่ยนที่ไปตามสีที่ดูดมา
การวาดและระบายสีภาพ
รูปที่ 2.11 อุป กรณ Brush & Pencil Tool
Brushes
เปนการระบายสี ซึ่งบางทีอาจตองมีการตกแตงภาพ หรือใสสี ซึ่งสามารถทําการเลือกรูปแบบของพูกัน
และขนาดของพูกันได
1. เลือกสีท ี่ตองการ จากนั้น Click ที่แถบเครื่องมือ Paint Brush Tool
2. Drag Mouse ลากระบายสีตามที่ตองการ (หากตองการลากเปนเสน ตรงใหกดปุม Shift คางไว )

30
Option ของ Paintbrush
รูปที่ 2.12 Option Bar ขณะทํางานที่ Brush Tool

1. Mode : เปน การกําหนดโหมดพิเศษของสี
2. Opacity : เปนการกําหนดคาโปรงแสงของสี ยิ่งคานอยเทาไหร ยิ่งโปรงแสงมาก
3. Wet Edges : เปน การกําหนดเสนขอบใหดูเหมือนเปยกน้ํา
4. Fade : เปนการกําหนดคาความเลือนของเสน
5. Airbrush Tool เปน เครื่องมือที่ใชพนสี จะมีความฟุงกระจาย มากกวาการระบายดวย Paint
brush
Pencil Tool
การทํางานเหมือน Paint brush แตเสนที่เกิดขึ้นมีความคมชัดและมีขอบที่ชัดเจน
วิธีการ เหมือน Paint brush
รูปที่ 2.13 Option Bar ขณะทํางานที่ Pencil Tool
Eraser tool
เปนเครือ่ งมือที่ใชสําหรับการลบเหมือนชื่อ ซึ่งประกอบดวยคําสั่งยอ ย ๆ อีกคือ
รูปที่ 2.14 อุป กรณ Eraser Tool
Eraser tool
1. Click ที่อุปกรณ จากนั้นไปที่ Option bar เลือกขนาดและรูปแบบของยางลบ
2. Click หรือ Drag Mouse ไปยังจุดหรือพื้นที่ที่ตองการลบ
Eraser Option
รูปที่ 2.15 Option Bar ขณะทํางานที่ Eraser Tool

Brush : เปน การเลือกกําหนดขนาดหรือลักษณะของยางลบ
Opacity : เปน การกําหนดความโปรงแสงของภาพ

31
Eraser to History : เปน การเรียกสวนที่ลบคืนมา
Brush Dynamics : เปน การใหคาสีใน Background ระบายลงไปแทน
Background Eraser Tool

เปนการลบคาสีพิกCellบน Layer ที่ Drag Mouse ผาน ใหมีลักษณะโปรงแสง
วิธีการใช : เหมือน Eraser Tool
History Brush Tool
เปน การลบเฉพาะสวนที่ท ําเพิ่มเติมลงในภาพ แตจะไมมีผลตอภาพเดิม (background) เปนอันขาด
วิธีใช : Click เลือกอุปกรณ จากนั้น Drag Mouse ไปยังบริเวณที่ตองการลบ
เครื่องมือ เกี่ยวกับการเทสี
รูปที่ 2.16 อุป กรณที่เกี่ยวกับการเทสี (Gradient & Paint Bucket Tool)
Paint Bucket Tool

เปน การเทสีลงในภาพหรือพื้นที่ที่เลือก
1. Selection พื้นที่ท ี่ตองการ
2. Click เลือกอุปกรณจากนั้น เลือกสีที่ตองการจะเติม
3. Click บนพื้นที่ที่เลือก ( Alt + Delete เปนเมนูลัด)
Paint Bucket Tool Option bar
รูปที่ 2.17 Option Bar ขณะทํางานที่ Paint Bucket Tool
คําสั่ง Fill เปนการเลือกสีที่จะเติมวาจะเติมสีแบบใด

1. Foreground – สีของ Foreground
2. Pattern - เติมแบบภาพลวดลาย
3. Mode - กําหนดสีแบบพิเศษ
4. Opacity - กําหนดคาโปรงแสง
5. Tolerance - จํากัดขอบเขตในการระบาย
6. Anti-aliased – กําหนดใหขอบของสีที่เทลงไปเรียบ

32
Gradient Tool
เปน การไลโทนสีจากสีห นึ่งไปอีกสีหนึ่ง โดยมีใหเลือกอยู 5 รูปแบบ
1. เลือกพื้นที่ท ี่ตองการ
2. เลือกเครื่องมือ Gradient จากนั้นเลือกรูป แบบที่ตองการบน Option bars
รูปที่ 2.18 รูป แบบของการเทสีในลักษณะ Gradient

3. Drag Mouse ตามตําแหนงที่ตองการ
Option Bar
รูปที่ 2.19 Option Bar ขณะทํางานที่ Gradient Tool
1. เลือกรูปแบบสีและการไลสี ที่ตองการ
2. Mode : กําหนดคาสีพิเศษ
3. Opacity : กําหนดคาโปรงแสง
4. Reverse : การไลโทนสีกลับดาน
5. Dither : ความกลมกลืน ของแถบสี
6. Transparency : เปน การปรับ การโปรงแสงและใหแสดงผลตอหนาจอ
การตกแตงภาพดวยเครื่อ งมือ ตางๆเหลานี้
รูปที่ 2.20 อุปกรณในสวนของการตกแตงภาพ (Blur, Sharpen & Smudge Tool)

Blur Tool
เปน เครื่องมือที่ทําใหสวนที่ Cick เบลอ
1. เลือกอุปกรณ จากนั้น Click or Drag Mouse ไปยังบริเวณที่ตองการทํางาน
2. กําหนดคา Option Bar ซึ่งมีคาที่นาสนใจดังนี้
รูปที่ 2.21 Option Bar ขณะทํางานที่ Blur Tool

33
- Brush : เลือกรูป แบบของอุป กรณ ขนาด และความฟุง เลือกขนาดแปรง รูปแบบแปรง โดย

การกดปุม ลูกศร สามเหลี่ยม
- Strength : เปนการกําหนดคาน้ําหนักและความเขมของอุปกรณ
Sharpen Tool
ชวยเนน ความเขมของภาพ และเพิ่มความคมชัดโดยลดจํานวนสีในภาพลง
วิธีการใช : เหมือน Blur Tool
รูปที่ 2.22 Option Bar ขณะทํางานที่ Sharpen Tool

Smudge Tool
เปน อุป กรณใน การเกลี่ยสี ทําใหสีภาพใหดูเรียบเนียน และกลมกลืน ขึ้น
รูปที่ 2.23 Option Bar ขณะทํางานที่ Smudge Tool
เครื่องมือการปรับสีโทนของภาพ
รูปที่ 2.24 อุปกรณในสวนของการปรับโทนสีภาพ (Dodge, Burn & Sponge Tool)

Dodge Tool
เปน เครื่องมือที่ทําใหภาพสวางขึ้น
วิธีการใช : โดยการ Click ลงบนพื้นที่ที่ตองการ
การกําหนดคา Option Bar ดังนี้
1. Brush : เลือกขนาดแปรง รูปแบบแปรง โดยการกดปุม ลูกศร สามเหลี่ยม
2. Range : เปน การเลือกรูป แบบการทํางาน
• Shadows : เปน การปรับ แตงสีแบบเงา
• Midtones : เปนการปรับแตงสีใหดูเปนธรรมชาติ
• Highlights : เปนการปรับ แตงสีแบบฟุงๆ หรือเนนพื้นที่ที่จะทํางาน Highlights

34
รูปที่ 2.25 Option Bar ขณะทํางานที่ Dodge Tool
Burn Tool
ทําใหสีของภาพดูเขมขึ้น
วิธีการใช : เหมือน dodge tool
รูปที่ 2.26 Option Bar ขณะทํางานที่ Burn Tool

Sponge Tool
เปน การปรับ คา Saturate ของสี ทําใหสีมีความเขมและจางในระดับตางกัน

รูปที่ 2.27 Option Bar ขณะทํางานที่ Sponge Tool
การทําสําเนาภาพ
รูปที่ 2.28 อุปกรณท ี่ใชในการทําสําเนาภาพ (Clone Stamp & Pattern Stamp Tool)
Clone Stamp Tool
เปน เครื่องมือในการ Copy ภาพ บอลลูนอยูห ลายลูกในภาพ ตองการเพิ่มอีกสักลูก
ขั้นตอนการทํา
1. เปดรูปภาพที่ตองการทํา
รูปที่ 2.29 ภาพตัวอยางที่ใชในอุป กรณ Clone Stamp Tool

35
2. Click เลือกอุปกรณ
3. นํา Mouse ไปวางบนภาพที่ตองการ Copy จากนั้น กดปุม Alt คางไว แลว Click Mouse บนภาพ
ซึ่งถือเปนจุดเริ่มตน
4. นํา Mouse ไปวางยังตําแหนงบนพื้นที่วางที่จะทําการ Paste โดยการ Click Mouse คางแลวลาก
จะปรากฏรูปภาพที่ Copy ขึ้นมา
รูปที่ 2.30 การ Copy ภาพโดยใช อุปกรณ Clone stamp Tool
Pattern Stamp Tool

เปน เครื่องมือสําหรับการทําสําเนา Pattern โดยวิธีคราวๆ คือ ตองสราง Pattern กอน
สราง Pattern
1. ทํา Pattern โดยการใช Marquee Select เลือกบริเวณ Selection ที่ตองการใหเปนสําเนาของ
ภาพ หรือเลือก File ที่ตองการทํา Pattern
2. เลือกคําสั่ง Edit -> Define Pattern
3. เกิดหนาตาง Pattern name ใหพิมพชอื่ แลวกดปุม O.k.
4. จากนั้น ไปยังหนาตางที่ตองการ (อาจจะทําการทําพื้นที่ Selection ก็ได) จากนั้น ใชเครื่องมือ
ก็เลือก ภาพที่ Option Bar จากนั้นก็Click Mouse บนภาพ
รูปที่ 2.31 Option Bar ขณะทํางานที่ Pattern Stamp Tool

36
Healing Brush Tool
รูปที่ 2.32 อุปกรณ Healing Brush & Patch Tool
เปน เครื่องมือเหมือน Clone stamp แตที่ชวยปรับ คาสีที่ กับ background หรือบน Layer กอนหนากลมกลืน กัน
วิธีการ : เหมือน Clone Stamp Tool
รูปที่ 2.33 Option Bar ขณะทํางานที่ Healing Brush Tool
การสรางตัวอักษรลงในภาพ
รูปที่ 2.34 อุป กรณที่เกี่ยวกับ การสรางตัวอักษร (Type Tool)

การสรางตัวอักษรใน Photoshop มีอยูดวยกัน 2 แบบ คือ แบบตัวอักษรและแบบ Selection หรือแบบเจาะใส ซึ่ง
สามารถพิมพอักษรไดท ั้งแนวนอนและแนวตั้ง
การสรางขอความโดยใชเครื่องมือ Type Tool

1. Click เลือกอุป กรณ บน tool box
2. Click เลือกอุป กรณ บน Option bar เพื่อพิมพตัวอักษร ( ถาเลือก จะเปน Selection )
3. Click เลือกอุป กรณ บน Option bar เพื่อพิมพตัวอักษรเปน แนวนอน (ถาเลือก จะเปน
แนวตั้ง)
4. Click Mouse ลงบนพื้นที่ที่ตองการพิมพ จากนั้นปรับคาทีOption
่ bar
รูปที่ 2.35 Option Bar ขณะทํางานที่ Type Tool

5. กําหนดรูปแบบตัวอักษร ขนาดและสีของตัวอักษร เมื่อพิมพก็ความเรียบรอย กดปุม Enter หรือ
Clickที่ Icon และถาไมตองการใหกดปุม

37
Tip & Trick
การพิมพขอความแบบ Selection ก็ใชขั้นตอนการทํางานเหมือนกันกับการพิมพอักษรธรรมดา
การแกไขขอความ
1. ทําการปาดดํา หรือ Highlight ขอความ
2. เลือกคําสั่ง Type tool บน Toolbar จากนั้น ก็แกไขบน Option Bar หรือClickเลือก ตรงปุม
Palette จะปรากฏ Character Palette ออกมา
3. พิมพขอความที่ตองการแกไข เมื่อพิมพก็ความเรียบรอย กดปุม Enter หรือ Clickที่ Icon
และถาไมตองการใหกดปุม
การใสขอ ความในแนวตางๆดวยคําสั่ง Create Warped Text บน Option Bar
1. Clickเลือกขอความที่ตองการหรือ Layer ที่ตองการ

2. Clickที่ บน Option toolbar
3. เกิดหนาตาง Warp text
รูปที่ 2.36 การทํางานของ Warp Text

• Style เลือกลักษณะรูปทรงขอความ จากนั้นก็ปรับรูปทรงตามความตองการ
4. Clickปุม O.k.
5. Clickที่ Icon บน option Toolbar
ผูแตง อ. ฐิติยา วิบ ูลยกาญจน

Email :: soam@netdesign.ac.th

38
Layer
ลักษณะการทํางานที่โดดเดนของโปรแกรม Photoshop คือมีการทํางานแบบแบงเปนชั้น โดยแยกสวน

ตางๆ ของภาพใหอยูคนละชั้น กัน ชั้น งานนี้เรียกวา layer บริเวณของ Layer ที่ไมมีภาพจะสามารถมองทะลุเห็น
Layer ดานลาง เปรียบเหมือนมีแผนใสหลายๆ แผน แตละแผนมีรูปอยูในตําแหนงตางๆ กัน แลวเอามาซอนทับ
กัน ทําใหเห็น เปน ภาพที่สมบูรณ การแยกทํางานเปนชั้น ๆ นี้ท ําใหสามารถเลือกทํางาน และเปลี่ยนแปลงแกไข
ในแตละ Layer ได โดยไมสงผลกระทบตอ Layer อื่น ๆ
รูปที่ 2.37 เปรียบเทียบลักษณะการทํางานของ Layer

การใชงาน Palette Layer
Palette Layer เรียกขึ้นมาใชงาน โดยเลือกแถบเมนู Window > Show Layer ใน Palette Layer จะมี
คําสั่งที่ควบคุมลักษณะการใชงานของ Layer ทั้งหมด
รูปที่ 2.38 การเลือก Palette Layer ขึ้นมาใชงาน

39
รูปที่ 2.39 Palette Layer
ตัวอยางการทํางานเปน Layer
เมื่อใชคําสั่ง File > New ที่ Palette Layer จะมีชั้น Layer 1 ชั้น คือชั้น Background ซึ่งจะไมน ิยม
สรางวัตถุที่ชั้นนี้ และชั้น Background นี้จะไมสามารถเคลื่อนยายสลับตําแหนงกับLayerอื่นได
รูปที่ 2.40 Layer ชั้น Background จะถูกสรางอัตโนมัติ เมื่อสรางงานใหม
การสรางLayerใหม (New Layer)
กอนที่จะสรางภาพหรือวัตถุ ควรจะเตรียมชั้นงานขึ้นมาใหม โดยClickที่ มุมขวาบนของ Palette

Layer เลือก New Layer หรือ click ที่ ดานลางจะมีชั้น Layerใหมเกิดขึ้น

40
รูปที่ 2.41 การสราง Layer ใหม
การเปลี่ยนชื่อLayer (Rename Layer)
เมื่อ New Layer ใหมขึ้นมาควรจะตั้งชื่อใหกับ Layer นั้นเพื่อความสะดวกในการเลือกทํางาน การตั้ง

ชื่อ Layer ใหClick Mouse ขวาที่ชั้น layer นั้น เลือก Layer Propeties
รูปที่ 2.42 การเปลี่ยนชื่อ Layer

41
รูปที่ 2.43 หนาตาง Layer Property สําหรับ เปลี่ยนชื่อ
การเลือก Layer มาทํางาน
การทํางานซึ่งประกอบดวย Layer หลายชั้น สามารถเลือกทํางานไดทีละ Layer เทานั้น Layer ที่กําลัง

ทํางานอยู สังเกตไดจากที่ชั้น ของ Layer นั้นจะมีแถบสีน้ําเงินปรากฏขึ้นมา ถาตองการเปลี่ยนไปทํางานที่ Layer
อื่น ก็ให Click เลือกที่ชั้น Layer นั้นๆ ไดเลย
รูปที่ 2.44 การเลือก Layer ที่ตองการทํางาน
การเปลี่ยนลําดับชั้นของ Layer
ตําแหนงการเรียงของชั้น Layer ที่ Palette Layer เรียงจากชั้น ลางขึ้นบน ซึ่งมีความสัมพัน ธกับ

ตําแหนงของวัตถุที่อยูบน Layer นั้น Layer ใดอยูชั้นบนสุด ภาพใน Layer นั้น ก็จะปรากฏอยูดานหนาสุดดวย
สามารถปรับเปลี่ยนลําดับชั้น Layer ได โดย Click เลือก Layer ที่ตองการเปลี่ยนตําแหนง แลว Drag Mouse
ลาก Layer ไปวางไวในตําแหนงใหม มีผลใหการจัดลําดับของภาพที่หนางานถูกสลับไปดวย
รูปที่ 2.45 หนางานกอนการเปลี่ยนลําดับชั้น Layer

42
รูปที่ 2.46 หนางานหลังจากการเปลี่ยนลําดับ ชั้น Layer แลว
การซอน Layer
สําหรับ การสรางงาน 1 ชิ้น จะประกอบดวยจํานวน Layer มากมาย บางครั้งเพื่อความสะดวกในการ
ทํางานอาจตองการซอนบาง Layer ไปชั่วคราว ซึ่งสามารถทําไดโดย
• Clickที่ เปน การปดตาชั้น Layer นั้น มีผลใหภาพที่อยูใน Layer นั้นถูกซอนไป
• ถาหากตองการใหชั้น Layer ที่ถูกซอนไปกลับมาแสดงผลในหนางาน ให Click ที่ชองเดิมจะมีดวงตาปรากฏ
ขึ้นมาอีกครั้ง
รูปที่ 2.47 แสดงการซอน Layer

43
การเชื่อมโยง Layer
การเชื่อมโยง Layer เขาดวยกันเรียกวา การ Link Layer เปนการเชื่อมโยง Layer ตั้งแต 2 Layer เพื่อ
ความสะดวกในการเคลื่อนยายภาพที่ตองการยายพรอมๆ กัน รวมทั้งการปรับขนาดของภาพที่อยูคนละ Layer
ใหมีการปรับ เปลี่ยนขนาดพรอมๆ กันดวย
วิธีการ Link Layer

• Clickเลือก Layer ใด Layer หนึ่งที่ตองการจะ Link
• Clickที่ ซึ่งอยูถัดจาก ของอีก Layer ที่ตองการเชื่อมเขาไวดวยกัน จะมีสัญลักษณ ปรากฏขึ้น
• ถานํา Move Tool มาเคลื่อนยายภาพ ภาพใน 2 Layer จะถูกเคลื่อนยายไปพรอม ๆ กัน
รูปที่ 2.48 การ Link Layer
วิธีการยกเลิก Link
ถาตองการให Layer ที่ Link เอาไวดวยกันทํางานเปนอิสระอีกครั้ง สามารถทําไดโดย Click
Mouse ที่ชองเดิม รูป โซจะหายไป

44
การทําซ้ําLayer
ในกรณีที่ตองการภาพหรือวัตถุที่มีลักษณะเหมือนวัตถุเดิมที่มีอยูแลว สามารถใชคําสั่ง Copy Layer โดย

1. Clickเลือกที่ เลือก Duplicate Layer
รูปที่ 2.49 การ Copy Layer แบบที่ 1
2. Click Mouse ที่ Layer ที่ตองการ Copy แลว Drag Mouse ลาก Layer ลงมาวางที่ ที่อยู
ดานลาง Palette
รูปที่ 2.50 การ Copy Layer แบบที่ 2

45
การลบ Layer
ภาพหรือวัตถุท ี่สรางขึ้นมาแลว ถาตองการจะลบออกไป สามารถทําไดหลายวิธี

1. Clickเลือกที่ชั้น Layer ที่ตองการลบ แลวClick เลือก Delete Layer
2. Clickเลือกที่ชั้น Layer นั้น แลว Drag Mouse ลาก Layer ลงมาที่ (รูป)
ภาพที่อยูบน Layer นั้นก็จะหายไป
รูปที่ 2.51 การลบ Layer
การรวมLayer
การมี Layer จํานวนมากเกิน ความจําเปน จะทําใหขนาดของไฟลเพิม่ มากดวย ซึ่งอาจทําใหใหเครื่อง

ทํางานชาลง ในการทํางานนั้นถามีการเปลี่ยนแปลงแกไขภาพจนเปนที่พอใจแลว อาจจะรวมบาง Layer เขาไว
ดวยกัน เพื่อลดจํานวน Layer ลง (มีผลใหขนาดไฟลลดลงดวย)
การรวม Layer มีลักษณะการรวมอยูห ลายรูปแบบ

1. Merge Down เปนการรวม Layer 2 Layer เขาดวยกัน โดยเมื่อใชคําสั่งนี้ Layer ที่ทํางานอยูจะ
ลงมารวมกับ Layer ชั้นลางที่อยูติดกันกลายเปน Layer เดียว
• วิธีการ
1.1 Clickเลือก Layer ที่ตองการ
1.2 Click เลือก Merge Down
1.3 Layer ที่ท ํางานอยูจะลงมารวมกับ Layer ชั้นลาง

46
รูปที่ 2.52 การรวม Layer ลักษณะ “Merge Down”
2. Merge Link เปนการรวม Layer ทุก Layer ที่ Link ไวดวยกัน ใหรวมเปน Layer เดียว
3. Marge Visible เปน คําสั่งที่ใชรวม Layer ที่มองเห็นอยู (Layer ที่เปดตาไว) ทั้งหมดรวมเปน
Layerเดียว ถา Layer ไหนโดยซอนอยูก็จะไมถูกรวม
4. Flatten Image เปน คําสั่งที่ใชรวม Layer ทุก Layer ใหกลายเปนชั้น Layer Background
การใชคําสั่งรวม Layer นั้น ไมสามารถแยกแตละ Layer ออกจากกัน ไดอีก กอ นที่จะเลือกใชคําสั่งใด
ในการรวม Layer จึงควรพิจารณาใหดีกอน
คา Opacity
คือ คาความทึบ แสงของภาพ สามารถเลือกปรับไดตั้งแต 0 – 100 % การปรับ คา Opacity ใหต่ํา ๆ มี
ผลใหภาพที่อยูใน Layer นั้นมีความโปรงแสงมากขึ้น จนสามารถมองทะลุลงไปเห็น ภาพที่อยูดานลางได
รูปที่ 2.53 การปรับคา Opacity

47
Layer Style
เปน คําสั่งที่ใชในการกําหนด Style หรือ Effect ตาง ๆ ใหกับวัตถุบน Layer นั้น ๆ สามารถเลือกใชได
โดย Click ที่สัญลักษณ จะปรากฏหนาตางของ Style ตาง ๆ ใหเลือก ซึ่งมีอยูหลากหลาย Style ดังนี้
รูปที่ 2.54 การกําหนด Layer Style
รูปที่ 2.55 ภาพตนฉบับ กอนการใส Layer Style

• Drop Shadow
เมื่อเลือกใช Style นี้จะเปนการสรางเงาใหกับวัตถุ ซึ่งเงาจะเกิดภายนอกวัตถุ ถาตองการปรับเปลี่ยน
ลักษณะของเงา สามารถปรับไดที่ Option ดานขวา
รูปที่ 2.56 การปรับคาที่ Drop Shadow Style

48
• Inner Shadow
เปน การสรางเงาใหกับ วัตถุเชนเดียวกัน แตเงาจะเกิดภายในวัตถุ
รูปที่ 2.57 การปรับคาที่ Inner Shadow Style
• Outer Glow
เปน การสรางแสงเรือง ๆ ใหเกิดขึ้นรอบ ๆ วัตถุ การปรับขนาด หรือการเปลี่ยนสีของแสง สามารถ
ปรับเปลี่ยนที่ Option
รูปที่ 2.58 การปรับ คาที่ Outer Glow Style

49
• Inner Glow
เปน การสรางแสงเรืองๆ ใหเกิดขึ้นภายในวัตถุ
รูปที่ 2.59 การปรับคาที่ Inner Glow Style
• Bevel Emboss
เปน การทําใหวัตถุมีความหนา นูน ทําใหดูมีมิติมากขึ้น
รูปที่ 2.60 การปรับคาที่ Bevel Emboss Style

50
• Satin
รูปที่ 2.61 การปรับคาที่ Satin Style
• Color Overlay
เปน การเปลี่ยนสีใหกับ วัตถุ
รูปที่ 2.62 การปรับคาที่ Color Overlay Style

51
• Gradient Overlay : เปน การใสสีแบบไลโทนสีใหกับ วัตถุ
รูปที่ 2.63 การปรับ คาที่ Gradient Overlay Style

• Pattern Overlay : เปน การใสลวดลายรูปแบบ Pattern ใหกับ วัตถุ
รูปที่ 2.64 การปรับ คาที่ Pattern Overlay Style

• Stroke : เปนการใสเสนขอบใหกับ วัตถุ
รูปที่ 2.65 การปรับคาที่ Stroke Style

52
บทที่ 3
การใชงาน Pen Tool ,Menu Image และ Filter
การวาดภาพและเลือกพื้นที่โดยใช Pen Tool
การใช Pen Tool ในการวาดภาพจะประกอบดวยคําสั่งตาง ๆ โดยภาพที่ไดจากการใช Pen Tool ใน

การสรางจะสามารถยอ ขยาย ยืด หด และเสน ที่สรางจะไมสูญเสียรายละเอียดของภาพ
- การวาดเสน (Path)
ใหเลือกโหมดที่ Top bar ดานบนเปนโหมดที่ใชสําหรับ การวาด (Create new work Path) จากนั้นใช
mouse เลือกที่ไอคอน ที่อยูใน Toolbox โดย Click ใหเชื่อมกันทีละจุด ผลลัพธท ี่ไดจะปรากฏดังรูป
รูปที่ 3.1 แสดงการใชอุปกรณ Pen Tool
- การเพิ่มและลบรอยตอของเสน Path ดวย Add (Anchor Point Tool)การเพิ่มรอยตอของเสนโดยการ

เลือกไอคอน แลวClickเพิ่มไปยังเสน เดิมก็จะเปนการเพิ่มจุดรอยตอและหากตองการลบก็ท ําใน
ลักษณะเดียวกันแตเปลี่ยนจากไอคอน เปนไอคอน ดังรูป

53
รูปที่ 3.2 การเพิ่มและลดรอยตอของเสน Path
- การเคลื่อนยายจุดรอยตอของเสน Path ดวย Direct Selection Tool
เลือกไอคอน จากนั้นClick Mouse เลือกไปยังตําแหนงที่ตองการ
รูปที่ 3.3 การเคลื่อนยายจุดรอยตอของเสน Path

54
- การเปลี่ยน Path ใหเปน Selection
การเปลี่ยน Path ใหเปน Selection โดยเลือกที่ Palette Path จากนั้น เลือกลูกศรดานขางแลวเลือก
Make Selection หรือ จะเลือกที่ Menu Path ดานลางโดยตรงโดยที่ปุมเลือกจะเปน ลักษณะวงกลม เสนประ
รูปที่ 3.4 การทํา Selection จากเสนPath

การจัดการเกี่ยวกับรูปภาพ
การยอและขยายภาพโดยใชคําสั่ง Edit > Transform > Scale
หากตองการยอ,ขยายใหเทากันทุกดาน สามารถทําไดโดยการ กด Shift คางไวแลวจึงยอหรือขยาย ดังรูปที่ 3.5
รูปที่ 3.5 เมนูคําสั่ง Edit >Transform > Scale

55
รูปที่ 3.6 หลังจากขยายเสร็จแลวก็เลือ กเครื่องหมายดานขวาบนเพื่อตกลงหรือ ยกเลิก
การหมุนภาพ โดยใชค ําสั่ง Edit > Transform > Rotate
จะทําในลักษณะเดียวกันกับ การยอและขยาย แตจะทําการหมุนภาพแทน และยังมีคําสั่งที่สามารถใช

หมุนในลักษณะเปน องศาไดอีกดวย ดังรูป 3.7
รูปที่ 3.7 การหมุน รูปภาพโดยใช คําสั่ง Edit >Transform > Rotate
การปรับ Mode ตางๆ ของภาพ

56
ทําการเลือกที่ Menu Image>Mode เพื่อทําการเลือก Mode ของภาพที่ตองการปรับเปลี่ยน ดังรูปที่
3.7 โดยปกติในงาน Web จะทําการปรับ Mode ของภาพเปน แบบ RGB Color แตถาตองการเปลี่ยน ก็ใหไป
เลือกที่ชื่อของ Mode รูปภาพที่ตองการเปลี่ยนไดเลย เมื่อเลือก Mode แลวจะมีเครื่องหมายถูก อยูดานหนาชื่อ
ของ Mode ที่ท ําการเลือก
รูปที่ 3.8 การปรับรูปแบบคาสีตางๆ ของภาพ

การปรับแตงภาพโดยใช Menu Image
รูปที่ 3.9 การปรับภาพที่ Menu Image > Adjustments >…

57
- การปรับ ภาพโดยใช Menu Image > Adjustments > Levels…
ใหท ําการเลือกที่ Menu Image > Adjustments > Levels… แลวจะปรากฏหนาตางสําหรับปรับ แตง
งานของขึ้นมาดังรูปที่ 3.10
รูปที่ 3.10 หนาตางปรับคาของคําสั่ง Level

- การปรับภาพโดยใช Menu Image > Adjustments > Curves…
ใหท ําการเลือกที่ Menu Image > Adjustments > Curves… แลวจะปรากฏหนาตาง สําหรับปรับ แตง
งานขึ้น มาดังรูปที่ 3.11
รูปที่ 3.11 หนาตางปรับ คาของคําสั่ง Curve

58
- การปรับภาพโดยใช Menu Image > Adjustments > Color Balance...
ใหทําการเลือกที่ Menu Image Adjust Color Balance แลวจะปรากฏหนาตาง สําหรับปรับ แตงงานขึ้นมา

ดังรูปที่ 3.12
รูปที่ 3.12 หนาตางปรับคาของคําสั่ง Color Balance
- การปรับภาพโดยใช Menu Image > Adjustments > Hue/Saturation…
ใหทําการเลือกที่ Menu Image Adjust Hue/Saturation แลวจะปรากฏหนาตาง สําหรับ ปรับแตงงานขึ้น มา

ดังรูปที่ 3.13
รูปที่ 3.13 หนาตางปรับคาของคําสั่ง Hue/Saturation

59
- การปรับภาพใหเปนโทนสีแบบขาว/ดํา
จะใช Menu Image > Adjustments > Desaturate เมื่อทําการเลือกที่ Desaturate แลวภาพที่
ตองการปรับ ก็จะกลายเปน สีขาว/ดํา ทันที
- การกลับคาสีของภาพ
จะใช Menu Image > Adjustments > Invert ในการกลับ คาสี ใหท ําการเลือกที่ Invert แลวภาพที่
ทํางานอยูก็จะทําการกลับคาสีท ันที
- การปรับคาสีของภาพ
ใหท ําการเลือกที่ Menu Image > Adjustments > Variations… ก็จะปรากฏหนาตาง สําหรับปรับแตง
ภาพดังรูป 3.14
รูปที่ 3.14 หนาตางปรับ คาของคําสั่ง Variations
- การทําการสํารองงาน
60
ใหท ําการเลือกที่ Menu Image > Duplicate… แลว โปรแกรม Photoshop ก็จะทําเปดงานที่
เหมือนกับงานที่กําลังทํางานอยูขึ้นมาอีกหนึ่งหนาตาง
- การทําการปรับ / ลด ขนาดของภาพ
ใหทําการเลือกที่ Menu Image > Image Size… ก็จะปรากฏหนาตางสําหรับปรับแตงภาพดังรูปที่ 3.15
รูปที่ 3.15 หนาตางปรับคาของคําสั่ง Image Size

- การเพิ่มพื้นที่ back groundใหกับ งาน
ใหทําการเลือกที่ Menu Image > Canvas size…ก็จะปรากฏหนาตางสําหรับปรับแตงภาพดังรูปที่ 3.16
รูปที่ 3.16 หนาตางปรับคาของคําสั่ง Canvas Size

ฟลเตอร (Filter)
ฟลเตอร เปนคําสั่งที่ใชในการตกแตงภาพดวยเทคนิคพิเศษและ ไดผลลัพธออกมาในเวลาที่รวดเร็ว
- การใชงานฟลเตอร
การทํางานของฟลเตอรจะประกอบดวยสวนหลักๆคือ สวนที่ใชแสดงผล และ สวนของการปรับแตง การ
เลือกใชงานฟลเตอรแตละตัวก็สามารถClickเลือกไดที่ Menu > Filter ดังรูป

61
รูปที่ 3.17 การยกตัวอยางการใสฟลเตอร Render > Lens Flare
- การใชงานฟลเตอรสรางลูกเลนใหกับภาพ
การใชงานฟลเตอรแบบ Liquify เปน ฟลเตอรท ี่ใชในการตกแตงภาพ เชนเดียวกับฟลเตอรทั่วไปแตจะ
แตกตางกัน ที่ไมตองตั้งคาการปรับ แตง การเลือกใชงานก็สามารถClickเลือกไดท ี่ Menu Filter > Liquify
รูปที่ 3.18 การยกตัวอยางการใสฟลเตอร จากการปรับ แตงของคําสั่ง Liquify
ผูแตง อ. สุรกาญจน นิ่มอนงค

Email :: Webmaster@insidepattaya.com
อ. นิธิสิทธิ์ สุขแสง
Email :: pop_ta@netdesign.ac.th

62
บทที่ 4
ความสําคัญของการออกแบบ Web Site
Web Site เปน สื่อที่อยูในความควบคุมของผูใชโดยสมบูรณ เพราะผูใชมีโอกาสเลือ กคลิกและไมเลือก

คลิกที่ใดก็ไดตามตองการ ผูใชจึงมักไมคอยมีความอดทนกับ อุป สรรคและปญหาที่เกิดจากการออกแบบที่
ผิดพลาด ทุกคนชอบ Web ที่ออกแบบมาอยางสวยงามและมีการใชงานที่สะดวกมากกวา Web ที่ดูสับ สน
วุน วายมีขอมูลมากมายเต็มหนาจอแตห าอะไรไมเจอหรือใชเวลาแสดงผลแตละหนานานจนไมอยากรอ ถาเขาไม
สามารถมองเห็นประโยชนจาก Web Site ของคุณ หรือดูแลวไมเขาใจวาจะใชงานอยางไร ก็มักจะเปลี่ยนไปยัง
Web Siteอื่น ไดอยางรวดเร็ว ดังนั้นคุณควรจะออกแบบ Web Site เพื่อใหเกิดประโยชนสูงสุดตอผูใชและดึงดูด
ใหพวกเขาเขามาใชบริการใน Web Site อยูเสมอ
รูปที่ 4.1 ตัวอยางการออกแบบ Web Site ที่นาสนใจ
การออกแบบ Web Site ที่ดี

การออกแบบ Web Site นั้นไมไดหมายถึงลักษณะหนาตาของ Web Site เพียงอยางเดียวแตเกี่ยวของ
ตั้งแตการเริ่มตนกําหนดเปาหมายของ Web Site, กลุมเปาหมาย, การจัดระบบขอมูล, การสรางระบบ
Navigation, การออกแบบหนาWeb, รวมไปถึงการใช Graphic, การเลือกใชสี, การจัดรูปแบบตัวอักษร
Web Site ที่ดูสวยงามหรือมีลูกเลนมากมายนั้น อาจจะไมนับ เปนการออกแบบที่ดีก็ได ถาความ
สวยงามและลูกเลนเหลานั้น ไมเหมาะสมกับ ลักษณะของ Web Site แนวทางในการออกแบบของแตละ Web
Site นั้น แตกตางกัน ไปตามเปาหมายและลักษณะของ Web Site การออกแบบบางอยางที่เหมาะสมกับ Web
Site หนึ่งอาจจะไมเหมาะสมกับ อีก Web ก็ได Web Site บางแหงอาจตองการความสนุกสนาน บันเทิง ขณะที่
อีก Webหนึ่งตองการความถูกตอง นาเชื่อถือเปนหลัก
อาจสรุป ไดวา การออกแบบที่ดี คือการออกแบบใหเหมาะสมกับเปาหมายและลักษณะของ Web Site
โดยคํานึงถึงความสะดวกในการใชงานของผูใชเปนหลัก

63
รูปที่ 4.2 ตัวอยาง Web Site ที่มีรูป แบบเปน เอกลักษณและ สัมพัน ธกับ ผลิตภัณฑ
การออกแบบของทั้งสอง Web Site นี้ ( รูปที่ 4.2 ) มีจุดเดน ในเรื่องของรูป แบบที่เปนเอกลักษณและสัมพัน ธกับ
ลักษณะของผลิตภัณฑ มีระบบ Navigation ที่เขาใจงาย ใชงานงาย แสดงถึงความถูกตอง นาเชื่อถือ
รูปที่ 4.3
Web nike.com เปนการออกแบบที่ แสดงถึงสนุกสนาน นําแอ็คชั่นตางๆของคนมาใช แมไมใชภาพเคลื่อนไหว
แตก็ดูไมห ยุดนิ่ง
การออกแบบโครงรางของหนาWeb
1. แบงหนาWebออกเปน 3 สวน

64
ความสําคัญของระบบNavigation
การนําทางที่ดีและเขาถึงขอมูลอยางสะดวกเปนหัวใจสําคัญของระบบ Navigation การมีเนื้อหาใน
Web ที่ดีจะเปน สิ่งดึงดูดใหผูใชบริการอยางสม่ําเสมอแตเนื่อหานั้นไมมีป ระโยชนเลยถาผูใชน ั้นคนหาสิ่งที่
ตองการไมพบ ดังนั้นการออกแบบโครงสรางขอมูลที่ดีชวยใหผูใชเขาถึงขอมูลไดงายขึ้น และชวยใหผูใชสามารถ
พึง่ พาระบบ Navigation ในการนําทางไปถึงที่หมายได

65
รูปที่ 4.4 ตัวอยาง Web Site ที่มีระบบ Navigation ที่ดี
การออกแบบหนาWeb
แนวคิดในการออกแบบหนาWeb
- เรียนรูจาก Web Site ตางๆ เปนวิธีหนึ่งที่จะชวยใหคุณมีไอเดียในการออกแบบหนาWebของคุณ โดย
การดูรูป แบบ และเทคนิคจากWebตางๆซึ่งอาจจะเปนWebคูแขงหรือWebที่อยูในกลุมเดียวกันก็ได
และนําลักษณะที่ดีของWebนั้นมาประยุกตใช
- ประยุกตรูป แบบจากสิ่งพิมพ สามารถนํารูปแบบการออกแบบจากสิ่งพิมพมาใชเชน ลักษณะโทนสี การ
ออกแบบGraphic ตัวอักษร มาใชได

66
คุณสามารถออกแบบWebใหมีหนาตาคลาย โปสเตอร แมกกาซีนหรือแมกระทั้งหนาจอทีวี ไดดวยเทคนิคการ

ออกแบบตางๆโดยไมจํากัด ลองพยายามศึกษา และสังเกตเทคนิคการออกแบบโดยเฉพาะทางGraphicดีไซน
จากสื่อ ตางๆ ไมวาจะเปนหนังสือ, Magazine, โปสเตอร, ทีวี และทีส่ ําคัญที่สุดคือจาก Web Site อื่นๆดวย
รูปที่ 4.5 ตัวอยางการออกแบบ Web Site โดยใชเทคนิคจากสื่อตาง ๆ
การสรางลําดับขั้นความสําคัญขององคประกอบ
ลักษณะขององคประกอบตางๆที่ควรคํานึงถึงมีดังนี้
1. ตําแหนงและลําดับ ขององคประกอบ เพื่อเนน ใหเห็นวาอะไรเปน เรื่องสําคัญมาก สําคัญรองลงไป หรือ
สําคัญนอยตามลําดับ ขนาดขององคประกอบตางๆในหนาWebจะชวยสื่อความหมายถึงความสําคัญ
ของสิ่งหนึ่งไดโดยองคป ระกอบที่มีขนาดใหญยอมสามารถดึงความสนใจของผูใชไดกอน และนํามาจัด
ระเบียบองคประกอบใหเหมาะสม
2. สีและความแตกตางของสี สีท ี่เดน ชัดเหมาะสําหรับองคประกอบที่มีความสําคัญมาก สวน
องคประกอบที่ใชสีเดียวกันยอมสื่อความหมายถึงความสัมพันธท ี่ใกลชิด และความสําคัญที่เทาเทียม
กัน การใชสีที่แตกตางกันจะชวยดึงดูดความสนใจใหผูใชมองเห็น และตอบสนองอยางรวดเร็ว แตการใช
สีท ี่หลากหลายเกิน ไปโดยไมมีความหมาย กลับ จะสรางความสับสนใหกับ ผูใชมากกวา
3. ภาพเคลื่อนไหว ชวยดึงดูดและสรางความนาสนใจไดเปนอยางดี แตตองใชอ ยางจํากัดและระมัดระวัง
เพราะถาใชภาพเคลื่อนในหนาWebมากเกิน ไป จะสรางความรําคาญใหกับผูใชและผูใชตัดสินใจ
ลําบากวาสิ่งไหนสําคัญกวากัน
67
การสรางรูปแบบ บุคลิก และสไตล

รูปแบบของหนาWebนั้นขึ้นอยูกับ เนื้อหาและเปาหมายของ Web Site วาตองการใหความรู ขอมูล ขาวสาร
โฆษณาหรือขายสินคา การออกแบบที่ดีควรจะประกอบดวยรูปแบบ บุคลิก และสไตลท ี่สอดคลองกับเนื้อหา
ชวยสรางความชัดเจนในการสื่อสาร
1. รูปแบบ เลือกรูปแบบหนา Web ที่เหมาะสม ชวยสรางบรรยากาศและความเขาใจของผูใชไดเปน อยาง
ดี เชน Web เกี่ยวกับ ภาพยนตร ก็อาจจะออกแบบหนา Web ใหคลายกับ โรงหนังจริงๆ หรือ Web
เกี่ยวกับ การทองเที่ยวก็ออกแบบโดยนําภาพธรรมชาติมาใชตกแตง
2. บุคลิก Webแตละประเภทมีบุคลิกลักษณะแตกตางกันไป ขึ้น อยูกับเนื้อหาและเปาหมายในการ
นําเสนอ Webแตละแหงสามารถใหความรูสึกสนุกสนาน, เชี่ยวชาญ, วิชาการ, ทัน สมัย, ลึกลับ หรือ
เปนทางการ เชนถาออกแบบ Web เกี่ยวของกับ เทคโนโลยี ก็ควรออกแบบใหแสดงถึงความทันสมัย
ไฮเทค เชนเดียวกับ เนื้อหาภายใน Web
3. สไตล หมายถึงการจัดโครงสรางของหนา รูปแบบGraphic, ชนิดและการจัดตัวอักษร, ชุดสีท ี่ใช ไมควร
สราง สไตลตามอําเภอใจโดยไมคํานึงถึงความเหมาะสม สไตลของ Web Site ควรมีความสัมพัน ธกับ
เนื้อหาภายใน Web อยางมีเหตุผลไมใชใชเพียงเพื่อแสดงฝมือวาคุณสามารถตกแตงGraphicโดยใช
เทคนิกแปลกๆได

68
รูปที่ 4.6 ตัวอยางการออกแบบ Web site ตามเนื้อหาและเปาหมายของ Web site
การเลือกใชสีในการออกแบบหนาWeb
สีสันในหนา Web ชวยดึงดูดและสรางความนาสนใจใหกบั Web Site เปน สิ่งกําหนดบรรยากาศและ
ความรูสึกโดยรวมของ Web Site สามารถใชสีไดกับทุกองคประกอบของ WebPage ตั้งแต ตัวอักษร, รูปภาพ,
Link, สีพื้นหลังและรูปภาพพื้นหลัง การเลือกใชสีอยางเหมาะสม จะชวยสื่อความหมายและสรางความสวยงาม
ใหกับ Web นั้น
ประโยชนของสีใน Web Site ในรูปแบบตางๆมีดังนี้

1. สีสามารถชักนําสายตาผูอานใหไปยังทุกบริเวณในหนา Web การเลือกเฉดสีและตําแหนงของสีอยาง
รอบคอบจะเปนประโยชนอยางมากเมื่อคุณตองการใหผูอานใหความสนใจกับ สวนใดสวนหนึ่งในหนา
Web Site เปน พิเศษ
2. สีชวยเชื่อมโยงบริเวณที่ไดรับ การออกแบบเขาดวยกัน เชน ผูอานจะมีความรูสึกวาบริเวณที่มีสีเดียวกัน
เปน เรื่องเดียวกันหรือมีความสําคัญเทากัน
3. สีสามารถนําไปใชในการแบงบริเวณตางๆออกจากกัน
4. สีสามารถใชในการดึงดูดความสนใจของผูอานใหพวกเขาอยูใน Web Site ไดน านยิ่งขึ้น
5. สีสามารถสรางอารมณโดยรวมของ WebPage กระตุน ความรูสึกตอบสนองจากผูชมได
6. สีชวยสรางระเบียบใหกับขอความตางๆ เชนใชสีแยกสวนระหวาง หัวเรื่องกับเนื้อเรื่อง
69
การเลือกสีในการการออกแบบใหเหมาะสมชวยสงเสริมเอกลักษณขององคกร หรือหนวยงานนั้นๆได
การจัดระบบขอมูล Graphic บน Web Server

File และ Folder
- File งาน นามสกุลหลักๆที่ใชในการทํา Web Site คือ .html, .gif, .jpg
การตั้งชื่อ File
1.หามใชภาษไทย
2.ควรใชตัวอักษรเปน ตัวพิมพเล็กในการตั้งชื่อทั้งหมด
3.หามเวน วรรค
4.หามใชอักขระพิเศษ เชน , / - %
การแบง Folder
การ Crop File การตัดภาพใน โปรแกรม Photoshop เพื่อ

1.ชวยใหการโหลด File รูปภาพ เร็วขึ้น
2.สามารถทํา Image Link ได
3.แบงลักษณะรูปภาพ . gif , .jpg เพื่อใหได file ภาพมีคุณภาพและขนาด file เล็กที่สุด
Graphic รูปแบบ Gif มีสีสูงสุด 256 สี

การเลือก Save for Web เปน file Gif ใชลดขนาด Graphic สําหรับรูป ภาพที่มี สีนอย สีพื้นๆไมซับซอน เชน
รูป โลโก ลายเสน รูป การตูน และรูปตัวอักษร
รูปที่ 4.7 ตัวอยางการ Save งาน เปน File Gif

70
ถาตองการทําใหบางบริเวณของรูปภาพมีลักษณะโปรงใส (Transparent) จะตองเลือกรูปแบบการ Save
เปน .Gif เปน Graphic ชนิดเดียวที่มีคุณสมบัติโปรงใสและใชไดกับทุกBrowser
รูปที่ 4.8 ตัวอยางการ Save File แบบ Gif ที่มีลักษณะ โปรงใส (Transparent)
โดยทั่วไปแลว สามารถใช .Gif ไดกับรูปภาพทุกประเภท โดยเฉพาะ รูปGraphic, รูปแผนภูมิ และGraphicที่
ประกอบดวยตัวอักษร แตสําหรับ ภาพถายหรือรูปที่มีโทนสีตอเนื่อง มีสีเยอะ จะเหมาะกับแบบ .JPEG มากกวา
ซึ่งจะใหภาพที่มีคุณภาพสูงกวาและขนาด File จะเล็กกวาอีกดวย
การ Save for Web แบบ Gif

71
สวน Graphic รูปแบบ JPEG ความละเอียดของสี 16.7 ลานสี

เหมะสําหรับ การบีบอัดรูปภาพ ประเภท ภาพที่มีสีเยอะ, รูป ถาย, รูปเสมือนจริง

72
รูปที่ 4.10 ตัวอยางรูปในลักษณะ ของ JPEG
รูปที่ 4.11 ตัวอยาง Window optimize แบบ JPEG
การ Crop File

คือการตัดภาพเปน สวนๆเพื่อเตรียมเปน File วัตถุดิบ กอนจะนําไปประกอบในการจัด html
การ Crop File ภาพ แบบที1่ (ภาพทั้งผืนมาตอกัน) ใช Grid แบงภาพที่ออกแบบเปนสวนๆ แลว Crop ภาพ
เปน ชิ้น ๆ แลวจึงคอยนํามาตอกันในโปรแกรม Golive คลายการตอ จิ๊กซอว

73
การ Crop File ภาพ แบบที่ 2 (ตัดทีละสวนและมี ภาพ background )
ใช Grid แบงภาพ และเลือก Crop เฉพาะบริเวณที่มีรูปภาพอยูโดยไมเอา background
แลวCrop ภาพเปน ชิ้น ๆ แลวจึงคอยนํามาตอกันในโปรแกรม Golive
รูปที่ 4.12 ตัวอยางในการ Crop file
รูปที่ 4.13 หลังจากตัดไฟลเปนสวนๆแลว

74
ขั้นตอนการ Crop File + Save for Web
1. เลือกอุปกรณ Crop แลวนํามา Crop File ภาพที่ตองการ
2. ปรับขนาดใหพอดีกับ ภาพ (ถาตองการยกเลิกกด ESC)

กด Enter (ถาตองการยกเลิกกด ESC)

75
3. ไปที่เมนู File เลือก Save for Web เลือกรูปแบบการ save ตามลักษณะของรูปภาพ
4. Edit Step Backward เพื่อกลับไปยังรูปตนฉบับ กลับไปเลือกอุป กรณ
ผูแตง อ. วีรวัลย เกษรศิริ

Email :: aom@netdesign.ac.th

76
บทที่ 5
การสรางงาน HTML ดวยโปรแกรม Adobe Golive 6 อยางมีประสิทธิภาพ
จากเนื้อหาในสวนของบทที่ 1 – 4 ที่ผานมาเปนการอธิบายถึงการออกแบบหนาตาของ WebPage

ดวยโปรแกรม Adobe Photoshop เพื่อเตรียมวัตถุ และรูป ภาพ ในการจัดหนา Homepage และ WebPage
และในบทนี้จะนําวัตถุ และรูป ภาพดังกลาวมาจัดเรียงอยางมีประสิทธิภาพ เปน ขั้นตอน และถูกหลักในการสราง
Web Site โดยใชโปรแกรม Adobe Golive 6
โปรแกรม Adobe Golive 6 เปน โปรแกรมประเภท Web Editor ที่มีประสิทธิภาพสูง และมี
ความสามารถที่โดดเดนกวา โปรแกรม Web Editor อื่น ๆ ดวยอุปกรณ Layout Grid ที่ชวยเพิ่มอิสระในการ
ออกแบบ Web Site อยางที่ Web Editor ตระกูลอื่น ไมมี และการจัดการภาษา Dynamic HTML (DHTML)
อยางงายดาย ดวย Timeline Editor และ Action ที่มีใหเลือกอยางมากมาย เพื่อใหเหมาะกับการตกแตงหนา
WebPage ของเปรียบเสมือน Webmaster มืออาชีพเลยทีเดียว
ในบทนี้จะไดทราบถึงวิธีการใชงานโปรแกรม Adobe Golive 6 เพียงแคความสามารถของอุปกรณไมกี่
ตัวที่จะกลาวถึงในบทนี้ ก็สามารถทําใหสราง Web Site ไดแลว
เนื้อหาของบทนี้ สามารถแบงออกเปนหัวขอหลักดังนี้
1. องคประกอบของโปรแกรม Adobe Golive 6
- Tab อุปกรณพื้นฐาน
2. Main Tab
- Layout
- Frames
- Source
- Outline
- Preview
3. การสรางเอกสาร .html
- ขั้น ตอนและเทคนิคในการสราง Webpage

77
องคประกอบของโปรแกรม Adobe Golive 6
หลังจากที่เปดโปรแกรม Adobe Golive 6 ขึ้นมาแลว จะพบหนาจอดังรูปที่ 5.1
รูปที่ 5.1 หนางานหลักของโปรแกรม Adobe Golive 6
จะสังเกตเห็นวามีหนาตางของเครื่องมือพื้น ฐานอยู 2 กรอบ ซึ่งตอไปนี้จะเรียกแฟมอุป กรณในหนาตาง

นี้วา พาเลท (Palette) และสําหรับในบทนี้จะกลาวถึง พาเลท Object, Color และพาเลท Inspector ซึ่งเปนพา
เลท ของอุปกรณพื้น ฐานในการจัดการและควบคุมการสรางหนา Web ของ ซึ่งจะมีรายละเอียดดังนี้
- Palette Object
รูปที่ 5.2 อุปกรณตางๆ ในพาเลท Object

78
ที่พาเลท Object จะแบงสวนการทํางานออกเปน 2 สวน คือ
- Tab อุปกรณหลัก มีทั้งหมด 11 ชุด แตจะขอกลาวเพียง 5 ชุดแรกที่ใชในการสอนเทานั้น ดังนี้
1. Tab Basic เปน ชุดอุปกรณพื้นฐานที่ใชในการจัดการรูปแบบของ Webpage แตละ
หนา
รูปที่ 5.3 Tab Basic
2. Tab smart เปน ชุดอุปกรณ ในสวนของการตกแตงและเพิ่มลูกเลน เทคนิค ใหหนา

Webpage มีสีสันมากขึ้น
รูปที่ 5.4 Tab smart

79
3. Tab forms เปน ชุดอุปกรณในการตกแตงสวนที่เปนแบบฟอรม รับ คาตางๆ
รูปที่ 5.5 Tab forms
4. Tab Head เปน ชุดอุปกรณสําหรับ เพิ่ม Tag “<>” คําสั่งตางๆ ที่ชวงของ Tag Head
รูปที่ 5.6 Tab Head
5. Tab Frames เปน ชุดอุปกรณในการจัดการโครงสรางของ Web Site ที่สราง ใน

รูปแบบของ Frames
รูปที่ 5.7 Tab Frames

80
- Tab อุปกรณยอย จะเปลี่ยนแปลงไปตาม Tab อุปกรณหลัก โดยจะมีอุปกรณที่ใชงานจําแนกเปน
หมวดหมู ตาม Tab อุปกรณห ลัก โดยจะขออธิบ ายที่สวนเนื้อหาของแตละชวงของการทํางานเพื่อใหเขาใจงาย
มากขึ้น
- Palette Color
รูปที่ 5.8 อุป กรณตางๆ ในพาเลท Color
ที่พาเลท Color จะแบงสวนการทํางานออกเปน 2 สวนเชน เดียวกันกับ พาเลทอื่น ๆ โดยอุปกรณหลักที่

พาเลทนี้ จะเปน การแยกประเภทการคนหาสีท ี่ตองการใชในแตละความตองการ และความถนัด แบงไดดังนี้
1. Tab Gray Slider จะเปนการไลเฉดสีในสวนของโทนสีเทา ใชการเลือกเปน แถบเลื่อน
รูปที่ 5.9 Tab Grey Slider

81
2. Tab RGB Sliders เปน การไลเฉดสีในลักษณะของ RGB Color ใชการเลือกเปน แถบเลื่อน
รูปที่ 5.10 Tab RGB Sliders

3. Tab CMYK Sliders เปนการไลเฉดสีในลักษณะของ CMYK Color ใชการเลือกเปนแถบเลื่อน
รูปที่ 5.11 Tab CMYK Sliders

4. Tab HSB Wheel เปน การเลือกสีลักษณะแบบถาดสี
รูปที่ 5.12 Tab HSB Wheel

82
5. Tab HSV Picker เปน การเลือกสีลักษณะที่เลือกโทนสีกอน แลวคอยเลือกสี จากถาดสีตรง
กลาง
รูปที่ 5.13 Tab HSV Picker
6. Tab Palettes เปนการเลือกสีที่จัดไวให จะคลายกับการใชงานที่ Palette Color ของโปรแกรม

Adobe Photoshop
รูปที่ 5.14 Tab Palettes

7. Tab Web Color list เปน การเลือกสีในลักษณะที่มีการใชงานที่บ อยที่สุด และเหมาะ
สําหรับการทํางานในรูปแบบที่ตองมีการกําหนดคาสีที่แนน อน สีท ี่อยูในแถบนี้จะเปนสีที่ใชใน
Web Site ไดโดยจะไมมีการเพี้ยนของสี
รูปที่ 5.15 Tab Web Color List

83
8. Tab Web Name List คลายกับ Tab Web Color List แตจะแสดงสีเปนชื่อที่ใชเรียกในWeb
Site
รูปที่ 5.16 Tab Web Name List
9. Tab Site Color list ในสวนของแถบนี้ จะไมนํามาใชในการเรียน จึงไมขอกลาวถึง
- Palette Inspector
ในสวนของ พาเลทนี้ มีหนาที่ในการกําหนดลักษณะสภาวะการทํางานตางๆ ที่เกิดขึน้ จากการสราง

Web page ปุม Tab จะเปลี่ยนตามลักษณะการทํางานที่เกิดขึ้น เปนคุณสมบัติของอุปกรณในแตละตัว มี
ความสําคัญเปนอยางมากกับ การทํางาน
รูปที่ 5.17 Palette Inspector

84
เตรียมพรอมทํางานออกแบบหนา Web page
กอนที่จะเขาสูเนื้อหาในการสราง Web Page จะขอแนะนําสวนที่เปน Main Tab ที่ตองใชงานตลอด
- หนาตาง Layout (Layout Editor)

ใชสําหรับออกแบบหนา Webpage ซึ่งหนา Webpage ที่ถูกสรางขึ้นมานี้สามารถนํา Object ตางๆ
เขาไปรวมทํางานได
รูปที่ 5.18 หนาตาง Layout

- หนาตาง Frame (Frame Editor)
หนาตาง Frame มีหนาที่สําหรับออกแบบหนา Web page ที่มีการจัดโครงสรางเปนลักษณะของ
หนาจอแบบเฟรม
รูปที่ 5.19 หนาตาง Frame

85
- หนาตาง Source (Source Code Editor)
หนาตาง Source มีหนาที่แสดงผลการทํางาน ออกมาในลักษณะโคด คําสั่งภาษา HTMLที่ถูกสรางขึ้น มา
รูปที่ 5.20 หนาตาง Source
- หนาตาง Outline (Outline Editor)

หนาตาง Outline จะแสดงโครงสรางของโคดภาษา HTML ทําใหดูงายมากขึ้น โดยสามารถ เพิ่มเติม
ลบ หรือแกไขโคดภาษา HTML ได
รูปที่ 5.21 หนาตาง Outline

- หนาตาง Preview (Layout Preview)
หนาตาง Preview จะแสดงผลลัพธ ที่เกิดขึ้น จากการสราง Webpage ซึ่งเปรียบเสมือนกับ การ
แสดงผลบนโปรแกรม Browser
Tip & Trick
แตละหนาตางจะมีความสัมพันธกัน โดยถามีการแกไขเกิดขึ้น หนาตางอื่นๆจะมีผลกระทบตามไปดวย

86
ขั้นตอนการเตรียมเอกสาร .html (Web page)
Workshop
หลังจากที่ไดทําความรูจักกับ องคประกอบตางๆ ของอุปกรณพื้นฐานในโปรแกรม Adobe Golive 6 กัน
มาบางแลว เนื้อหาตอจากนี้จะเริ่มเขาสูกระบวนการทดลองทําหนา Webpage อยางงาย รวมไปถึงการสรางจุด
เชื่อมโยง (Link) ใหกับ Webpage แตละหนาอยางมีประสิท ธิภาพและไมซับซอน โดยจะแบงขั้น ตอนในการสราง
หนา Webpage ออกเปน 4 ขั้น ตอน ดังนี้
1. การสรางหนา Webpage (เอกสาร .html)
2. การพิมพ Text
3. การสรางจุดเชื่อมโยง (Link) ใหกับหนา Webpage
4. การบันทึกงานอยางถูกหลักกอนทําการ Upload
Step 1 : การสรางเอกสาร .html

ในขัน้ ตอนนี้จะมาทดลองสรางหนา Webpage จากไฟลงานตัวอยางอางอิงที่ไดเตรียมเอาไว 2 หนา
ไดแก
- หนา Webpage ที่เปนหนา Homepage
รูปที่ 5.22 หนาตัวอยางที่น ํามาเปน Home page

87
- และ หนา Webpage ที่เตรีย มใชทดสอบทํา Link
รูปที่ 5.23 หนาตัวอยางอีกหนาหนึ่งนํามาเปน Web page
1. เริ่มสรางหนา Homepage โดยเปดไฟลเอกสารใหมโดยใชคําสั่งจากเมนู File > New Page
รูปที่ 5.24 สรางเอกสารใหมจากเมนู File

88
2. เริ่มตนทํางานในแท็บ Layout ในสวนของ Page Properties Click เลือกที่สัญลักษณรูปกระดาษพับมุม
สีมวง
รูปที่ 5.25 การเลือกทํางานที่ Page Properties
หลังจากนั้นใหสังเกตที่ Palettes Inspector ทําการเปลี่ยนชื่อ Title กําหนด Background ของหนา Webpage

วาตองการใหเปน Background Colors หรือ Background Image และทําการกําหนดคาชิดขอบของวัตถุให
พอดีกับหนาตาง Layout ในสวนของคา Margin Width = 0 และคา Margin Height = 0

89
รูปที่ 5.26 การกําหนดคาเตรียมทํางานที่ Inspector Page Properties
3. นําอุปกรณ Layout Grid ที่อยูใน Palettes Basic มาวางที่หนา Layout แลวกําหนดคาความกวาง ความสูง
ตามที่ไดออกแบบเอาไวใน Photoshop ในชอง Width และ Height
รูปที่ 5.27 การจัดวางอุป กรณ และตั้งคา Layout Grid

90
4. เปด Palettes Tracing Image ในเมนู Window > Tracing Image
รูปที่ 5.28 เมนู Tracing Image
แลว Browse ภาพที่เปน ตน แบบใน Photoshop ขึ้นมาเพื่อเปนไกดในการจัด Layout ของตําแหนงภาพแตละรูป

โดยClickที่ชอง Source แลวClickที่แฟมสีเหลืองเพื่อ Browse ภาพที่ตองการมา จากนั้น จะมีภาพตนแบบ
ปรากฏใหเห็น ลางๆ ทางดานหลังเปนการอํานวยความสะดวกในการจัดวางรูป ภาพลงบน Layout Grid ไดตรง
ตามตําแหนงที่ออกแบบเอาไวใน Photoshop

91
รูปที่ 5.29 การตั้งคาที่ เมนู Tracing Image
Tip & Trick
การปรับ คา Opacity ที่ Palettes ของอุปกรณ Tracing Image เปนการกําหนดคาความเขมจางของ

ภาพ Background ซึ่งสามารถปรับ คาความเขมของภาพ Background ไดตามตองการ
5. ขั้นตอนตอมาก็คือการนําเอารูปภาพแตละรูปที่ได Crop มาเปนชิ้น ๆ จาก Photoshop มาวางประกอบกัน

บนพื้นที่งานที่ปูอุปกรณ Layout Grid เตรียมเอาไว

92
รูปที่ 5.30 วัตถุรูปภาพที่จัดเตรียมมาจาก Photoshop
โดยใชอุป กรณ Image ที่อยูใน Palettes Basic มาวางแลวClickที่แฟมสีเหลืองเพื่อ Browse ภาพขึ้นมา โดยใน
เริ่มตนวางภาพจากมุมบนซายมาทางดานขวา และดานลาง เนื่องจากภาพที่ Browse ขึ้นมาจะดันตัวจากทาง
ดานซายไปขวาเสมอ

93
รูปที่ 5.31 อุปกรณ Image ,Inspector ของ Image
Tip & Trick
การนําวัตถุมาจัดวางลงบน Layout Grid แลวไมสามารถจัดใหวัตถุแตละชิ้น ติดกันได

เนื่องมาจากวัตถุตัวนั้นถูกคําสั่งให Snap ติดอยูกับ Layout Grid หากตองการให การจัดวางวัตถุบน
Layout Grid เปนอิสระ ใหมาปรับคา Snap ที่ Inspector โดยการClickเครื่องหมายถูกที่ชอง Snap
ออกทั้งหมด สวนคําสั่ง visible หาก Click เครื่องหมายถูกออกจะเปน การซอนเสน Grid
หลังจากที่จัดเรียงรูปเสร็จแลว อาจมีความคลาดเคลื่อนของอุป กรณ Layout Grid เนื่องจากการวาง

Image ไมตรงจุดในตอนแรก ทําให Layout Grid ถูกดันออกไป ใหเลือกที่อุปกรณ Layout Grid แลวสังเกตที่
แถบ Inspector ถาขนาดของ Layout Grid ไมตรงกับที่ตั้งไวตอนแรก ใหClickเลือกที่ปุม Optimize จะเปนการ
ลดขนาด Layout Grid เขามาชิดกับวัตถุท ี่อยูนอกสุด

94
รูปที่ 5.32 Inspector ขณะทํางานที่อุปกรณ Layout Grid
Tip & Trick
หากตองการปรับ ขนาดของ Grid ใหมีขนาดเทาเดิมใหปรับคาที่ Inspector Clickที่ Optimize ขนาดของ

Grid จะยอลงมาชิดกับ วัตถุ แตถาหากมาปรับ ขนาดของ Grid โดยการพิมพคาลงไปในชอง width กับ
height ใหมีขนาดเทาเดิมในบางครั้งเมื่อเวลาที่ preview อาจทําให Layout ของวัตถุท ี่วางลงไปกระจัด
กระจายได
ในขั้นตอนนี้ การออกแบบที่จัดไวในสวนของรูปภาพก็เสร็จสมบูรณ ในสวนตอไปจะเปน เกี่ยวการจัด

เนื้อหา ขอความตางๆ ของ Web Site

95
รูปที่ 5.33 แสดงผลของการจัดเรียงภาพที่เสร็จแลวผานทาง Browser
Tip & Trick
สรุปขั้น ตอนการสรางเอกสาร .html

1. เมื่อเลือกเมนูคําสั่ง File > New
2. เตรียมเอกสารกอนจัด Layout
2.1 เปลี่ยนชื่อ Title ที่ Page Properties
2.2 เลือกสี หรือใสรูป ภาพที่ Background
2.3 วางอุปกรณ Layout Grid ลงบนพื้นงาน
3. เริ่มจัด Layout รูปภาพดวยอุป กรณ “Image”
4. บันทึกเอกสารหนาแรก เปนชื่อ index.html เพื่อใชเปนหนา Homepage และคอยบันทึกงานเปน
ระยะๆ ไปตลอด

96
Step 2 : การพิมพตัวอักษร จัดขอความ
นําอุป กรณ Layout Textbox มาวางลงที่หนางาน แลวพิมพขอความที่ตองการลงไป จัดเรียงใหเรียบรอย
รูปที่ 5.34 อุป กรณ Layout Textbox

97
รูปที่ 5.35 รูปแบบเมื่อจัดขอความเรียบรอยแลว
ในสวนนี้ หากวาตองการพิมพภาษาไทย ตองเปลี่ยนใหคามาตรฐานของ Webpage เปนอักษร

Unicode กอน (ใน Program Adobe Golive จะใช UTF-8) โดยเขาไปเลือกที่ Menu File > Document
Encoding > Unicode (UTF-8)

98
รูปที่ 5.36 การเลือกคาตัวอักษรเปน UTF-8
Step 3 : การสรางจุดเชื่อมโยง (Link)

หลังจากที่ไดทําการจัดรูป แบบหนา Layout ของ Webpage และพิมพขอความโดยใชอุปกรณ Layout
Text Box ไปแลว จําเปนที่จะตองใหหนา Webpage แตละหนานั้นมีความสัมพันธเชื่อมโยงถึงกันได โดยอาศัย
หนา Homepage เปนตัวหลักในการเรียกใชงาน ในขั้น ตอนนี้จะเปนการสรางจุดเชื่อมโยง หรือที่เรียกวา
Hyperlink ใหหนากับหนา Webpage แตละหนาใหมีความเหมาะสมกับเนื้อหาที่ตองการนําเสนอ โดยโปรแกรม
Adobe Golive สามารถสรางจุดเชื่อมโยงไดหลายๆ จุด และหลายลักษณะในการสรางจุดเชื่อมโยง ซึ่งในขัน้ ตอน
นี้จะขอยกตัวอยางการสรางจุดเชื่อมโยง หรือการทํา Link ที่มีลักษณะเปน 2 รูป แบบเพื่อเปน พื้น ฐานในการทํา
ความเขาใจลักษณะการสรางจุดเชื่อมโยงไวดังนี้ คือ
1. การสรางจุดเชื่อมโยงดวยขอ ความ ( Text Link )
การสรางจุดเชื่อมโยงดวย Adobe Golive นั้น จะกําหนดผานทางหนาตาง Inspector ซึ่งจะทํางาน
รวมกับ Icon นั้นๆ ที่ไดกําหนดใชงาน โดยเริ่มแรกนี้จะกําหนดการเชื่อมโยงอยางงายๆ ดังนี้
1.1 เลือกขอความที่ตองการทําเปน Link โดยการไฮไลทเลือกที่ตัว Text

99
รูปที่ 5.37 การเลือกพื้นที่ทํา Link

1.2. หลังจากนั้นใหสังเกตที่ หนาตาง Palettes Inspector จะพบวาลักษณะของคําสั่งใน Palettes
Inspector จะเปลี่ยนไปเปน คําสั่งของ Text ใหClickที่โซ เพื่อทําให Text เปน Link และในชอง Empty
Reference Clickที่แฟมสีเหลือง Browse หาไฟลงานที่ตองการให Link ไปหาขึ้นมา
รูปที่ 5.38 Clickโซ Link แลวเลือ กไฟลที่ตองการ

100
2. การสรางจุดเชื่อมโยงดวยรูป ภาพ ( Image Link )
การใชรูปภาพสําหรับ การสรางจุดเชื่อมโยงเปนอีกวิธีหนึ่งที่ไดรับ ความนิยมในการนําเสนอWebไซดใน
ปจจุบ ัน เนื่องจากรูปภาพสามารถสื่อความหมายบางอยางไดอยางชัดเจนกวาขอความ รวมทั้งสามารถเพิ่มเติม
แตงลูกเลนตางๆ ไดอยางมากมาย วิธีการสรางจุดเชื่อมโยง Webpage ดวยรูปภาพนั้น สามารถทําไดดังนี้
2.1 Clickเลือกรูปภาพที่ตองการทําเปน Link
2.2 หลังจากนั้น ใหสังเกตที่ Palettes Inspector จะเปลี่ยนเปนคําสั่งของ Image
ใหClickเลือกทํางานที่ Tab Link ใหClickที่โซ เพื่อทําให Text เปน Link และในชอง EmptyReference Clickที่
แฟมสีเหลือง Browse หาไฟลงานที่ตองการให Link ไปหาขึ้นมา
รูปที่ 5.39 การเลือกรูปภาพเพื่อทํา Image Link
สําหรับ การทํา Image Link นั้น รูปภาพหนึ่งรูปสามารถ Link ไปไดเพียงหนึ่งแหงเทานั้น แตถาหากวา

ตองการใหรูป ภาพหนึ่งรูป สามารถทํา Link ไปไดห ลายแหงจะตองสรางจุดเชื่อมโยงแบบ Map Link ซึ่งลักษณะ
ของรูปภาพที่เหมาะสมในการทําจุดเชื่อมโยงแบบ Map Link ไดแก รูปภาพแผนที่ซึ่งแบงเปนภาคตางๆ เปน ตน
Map Link เปนการทํา Link ที่ภาพ โดยสามารถกําหนดพื้นที่ Link ในภาพได และภายในภาพเดียวกัน

นั้นยังสามารถกําหนดไดหลายๆ พื้นที่ Link อีกดวย วิธีการสรางนั้นมีดังนี้

101
- Clickเลือกรูป ภาพที่ตองการทําเปน Map Link
รูปที่ 5.40 เลือกรูป ที่ตองการทํา Map Link

- กําหนดการทํางานที่ Palettes Inspector Clickเลือกทํางานที่ Tab More Clickเลือกที่ชอง
ของ Use Map เพื่อเปน การบอกวาจะใชงานของ Map ในการกําหนดจุด Link
รูปที่ 5.41 Tab More ที่การทํางานของ Image Map

102
- Clickเลือกลักษณะรูปแบบของการกําหนดขอบเขตบริเวณของ Map Link
รูปที่ 5.42 Tool bar ในสวนของ Image Map
- ลาก Mouse คลุมพื้น ที่ท ี่ตองการสราง Link

- เมื่อทําการกําหนดพื้นที่ของสวนที่จะทําเปน Link แลวใหกลับ มาที่ Inspector Clickเลือกที่
ชอง URL แลว Browse เลือกไฟลงานที่ตองการ Link ไปหาขึ้นมา
หากตองการสรางพื้น ที่ Link เพิ่มใหClickเลือกลักษณะการกําหนดรูปแบบขอบเขตบริเวณของ Link

และทําซ้ําตามขั้นตอนขางตน
รูปที่ 5.43 ลักษณะการทํา Image Map Link

103
รูป แบบของการสรางจุดเชื่อมโยง
1. การสรางจุดเชื่อมโยงภายใน Web Site
การสรางจุดเชื่อมโยงภายใน เปน ลักษณะของการทํา Link อยูภายใน Web Site ของเอง ซึ่งการ Link
ภายในนั้นเปนการทํา Link เพื่อเปด file.html ซึ่งจะตองสรางขอมูลเปน file.html ขึ้นมาเก็บเอาไวภายใน folder
แลวทําการ Link เพื่อ Browse เอา file.html ที่ตองการขึ้นมา
2. การสรางการสรางจุดเชื่อมโยงภายนอก หรือการสรางจุดเชื่อมโยงไปหา Web Site อื่น

ทําไดโดยการ พิมพ URL ของ Web Site ที่ตองการทําการ Link ไปหาที่ชอง Empty Reference เชน
ถาตองการทํา Link ไปหา Web yahoo ให พิมพ URL ที่ชอง Empty Reference ดังนี้ คือ
http://www.yahoo.com
3. การสรางจุดเชื่อมโยงเพื่อ สง Email

ทําไดโดยการพิมพ e-mail address ที่ตองการลงในชอง Empty Reference ดังนี้ คือ mailto: ตามดวย
e-mail address ที่ตองการทํา Link สงจดหมายไปหา
4. การสรางจุดเชื่อมโยงเพื่อ การ Download

สําหรับ การทํา Link เพื่อการ Download นั้น มีห ลักการอยูวา server จะรูจักไฟลเอกสารเพียง 3 ตัว
เทานั้น คือ ไฟลท ี่มีน ามสกุล .html, .jpg และ .gif ดังนั้นถา Link ไปหาไฟลนามสกุลอื่น เชน ไฟล
นามสกุล .exe, .zip, ฯลฯ Browser จะขึ้นหนาตางให Download ไฟลโดยอัตโนมัติ
Step 4
ขั้น ตอนสุดทายของบทนี้คือการบันทึกงานที่ท ํา เก็บ ไวเพื่อเตรียมที่จะนําขึ้นไปใชจริงที่ server มี
หลักการที่ควรทําดังนี้
1. ควรเก็บงานไวลักษณะเดียวกับ ที่ตองการจะไปเก็บไวใน server ในที่น ี้จะขอใชชื่อ Folder เปน

Websample
2. นํางานเอกสารที่มีนามสกุลเปน html บันทึกไวใน Folder Websample และพรอมกับ สราง Folder
Image ขึ้นมาใน Folder นี้ดวย
3. นําภาพที่เตรียมไวใชเขาไปเก็บไวท ี่ folder Image
4. ตั้งชื่อ file เอกสารและรูป ภาพแตละชนิดใหถูกหลัก ดังนี้
4.1 กฎการตั้งชื่อใหกับ File และ Folder เพื่อใชในงาน Web
- หามตั้งชื่อ File งานเปนภาษาไทย
- หามใชอักขระพิเศษ เชน! @ # $ % & ?
- หามใชตัวอักษรตัวใหญ
- หามเวนวรรค หากจําเปน ควรใช เครื่องหมาย “_”
104
4.2 กฎการตั้งชื่อใหกับหนาแรกของ Web Site
หนาแรกของ Web Site เรียกวา “Homepage” กฎการตั้งชื่อใหกับหนา Homepage จะตองตั้งชื่อวา
index.html เทานั้น เนื่องจาก เมื่อทําการ Unload ไฟลงานทั้งหมดของขึ้น server แลวเมื่อ User พิมพ URL ของ
server จะคนหาไฟลงานที่ชื่อวา index.html ขึ้นมาแสดงผลเปนหนาแรก
รูปที่ 5.44 ลักษณะการตั้งชื่อ และการจัดเก็บ Folder เพื่อเตรียมนําไปใชจริงบนอินเทอรเน็ต
Summary
หลังจากที่ไดเรียนจบบทนี้แลว จะทําใหสามารถสราง Webpage ไดอยางนอย 1 หนา ดังนั้น
หมายความวาเพียงเทานี้ก็จะทํา Web Site ไดแลว แตอาจจะดูเรียบงายไป ในบทที่จะเรียนตอๆไป จะเปนการ
จัดการ ตกแตงให Web Site ของมีประสิทธิภาพ สวยงาม และดึงดูดใจผูที่เขามาใชบ ริการ Web Site ของ
ดวยอุป กรณอีกหลายๆอยางที่งายดายและ ไมซับซอน โดยอาศัยความสามารถของ โปรแกรม Adobe Golive 6
ผูแตง อ.ปรกฤษฎิ์ สายหัสดี

Email : prite@netdesign.ac.th
อ.ปยะนันท ไกลกลอม
Email : poo@netdesign.ac.th

105
บทที่ 6
การสราง Rollover
บางคนอาจจะเคยไดเห็นในบาง Web Site จะมีรูป ภาพที่เปน Link ซึ่งเปลี่ยนแปลงหนาตาไดเ มื่อ นํา

Mouse ไปวางเหนือ Link นั้น เรียกเหตุการณน ี้วา Rollover ซึ่งหลักการทําก็คือจะมีภาพ 2 ภาพขนาดเทากัน
นํามาสลับ กัน ภาพทั้งสองจะเปลี่ยนไปเมื่อใดก็ขึ้น อยูกับเหตุการณท ี่จะเกิดกับ ภาพนั้น โดยจะมีอ ยู 2 เหตุการณ
คือ
q เหตุการณปกติ เป น เหตุการณท ี่จะปรากฏอยูตลอดเวลาถึงแมวาจะไมใชงานใน Web ก็ตาม
และเปน เหตุการณท ี่นํา Mouse ออกจากภาพอีกดวย

q เหตุการณเมื่อนํา Mouse ไปวางเหนือรู ปนั้ น จะมีการเปลี่ยนแปลงรูปภาพเกิดขึ้น
การสราง Rollover ใน Golive

เมื่อไดทําการเตรียมภาพ 2 ภาพเรียบรอยแลวในโปรแกรม Golive จะมีอุปกรณที่ท ําเกี่ยวกับเรื่อง
Rollover โดยตรงดังนี้
คลิ๊ก แท็บ
Smart
Rollover
Normal Over
Main_menu.gif Main_menu_over.gif
Tip & Trick
เวลาทําการตั้งชื่อรูปภาพ ถาชื่อตอนตนเหมือนกันแลวตอทายดวยคําวา _over เวลาทําการ Browse ไฟล

แลวมันจะดึงรูปภาพขณะ over ใหดวย ซึ่งทําใหประหยัดเวลาในการ Browse ไดอีกดวย
การปรับแตงคุณสมบัติ

106
Name เปนการตั้งชื่อรูป ภาพ
Image เปนลักษณะเหตุการณที่เกิดขึ้น
Normal เปนเหตุการณปกติ
Over เปนเหตุการณเมื่อนําMouseเขาไปวางเหนือรูปนั้น
Down เปนเหตุการณเมื่อนํา Mouse Clickลงไปบนรูปนั้น
Brows เปนการระบุภาพที่ตองการ
URL เปน ลักษณะเมื่อตองการทํา Link
Alt Text เปนขอความอธิบาย ภาพ
Message เปนคําอธิบายที่ status bar
Width ความกวางของรูปภาพ
Height เปน ความสูงของรูปภาพ
Tip & Trick
โดยปกติแลวการทํา Rollover นิยมทําแค 2 เหตุการณเทานั้น คือ Normal และ Over เนื่องจากวา

เวลาทําการ Clickแลวก็จะไปยังหนาอื่น ซึ่งไมคอยที่จะเปน ผลเทาใดนัก อีกทั้งยังเปนการทําใหไฟล
ขนาดใหญอีกดวยเนื่องจากตองใชรูปถึง 3 รูปในการสลับ
การสรางและการใชงานตาราง
ตาราง เปนการแบงกรอบใสขอมูลเปนแนวนอนและแนวตั้ง ซึ่งเปน เครื่องมือที่สําคัญอีกตัวหนึ่งที่ใชใน

การทํา WebPage โดยการนําตารางมาใชเพื่อที่จะเปนการจัดเรียงขอมูลใหเปนระเบียบเรียบรอยและสวยงาม
ลาก Table ไปวางบนหนาตาง

107
องคประกอบของตาราง
ลักษณะของตารางจะประกอบไปดวยแนวนอน เรียกวา แถว (Row) และแนวตั้ง เรียกวา สดมภ

(Colum) ชองทีเกิดจากการแบงจากแนวนอนและแนวตั้ง เรียกวา Cell (Cell)
มองตามแนวตั้งเรียกวา สดมภ (column)
มองตามแนวนอนเรียกวา แถว (Row)
พื้นที่แตละชองจะเรียกวา เซล (Cell)
Tip & Trick
เวลานําไปวางครั้งแรก ตาราง จะมีขนาด 3*3 จะตองหาพื้นที่เพื่อทีจ่ ะสามารถใหวางตารางได

108
การกําหนดคุณสมบัติ
การกําหนดคุณสมบัติของ ตาราง จะประกอบดวย 3 สวนดังนี้

1. แท็บ Table จะเปน การควบคุมคุณสมบัติทั้งหมดของตาราง
Column = จํานวน สดมภ

Width = กําหนดความกวางของ ตาราง
Height = กําหนดความสูงของตาราง
Border = กําหนดความหนาของเสนขอบ
Cell Pad = ระยะหางระหวางขอความถึงขอบ Cell
Cell Space = ระยะหางระหวางCell
Color = การใสสีใหกับ ตาราง
Align = การจัดเรียงราราง
Caption = เปนลักษณะคําอธิบ าย
BgImage = การใส พื้นหลังเปนรูป ภาพ
Import = การนําขอมูลเขามาใสในตาราง
Export = การนําขอมูลออกจากตาราง
Convert = การแปลงตารางใหเปน Layout Grid
Cell
Border
Cell

109
2. แท็บ Row เปนการกําหนดคุณสมบัติของ แถวซึง่ หมายความวา ถาทําการปรับ คุณสมบัติของ แท็บ
Row ทุก ๆ Cell ในแถวนี้จะถูกผลกระทบทั้งหมด
Vertical Alignment = การจัดเรียงแนวตั้ง

Horizontal alignment = การจัดเรียงแนวนอน
Color = เปนการเปลี่ยนสีทั้งแถว
Height = การปรับความสูงของ แถว
Tip & Trick
กรณีที่ไมสามารถปรับคาใน แทบ Row ไดเนื่องจาก ไมไดเลือกการทํางานในชอง Cell นั้น ๆ กอน

110
3. แท็บ Cell เปนการกําหนดคุณสมบัติของ Cell ซึ่งก็หมายความวาจะถูกผลกระทบแค Cell ใด Cell หนึ่งเทานั้น
Vertical Alignment = การจัดเรียงแนวตั้ง

Horizontal alignment = การจัดเรียงแนวนอน
Color = เปนการเปลี่ยนสีทั้งแถว
Row Span = เปนการผสาน Cell แนวตั้ง
Column Span = เปน การผสาน Cell แนวนอน
Width = กําหนดความกวางของ Cell
Height = กําหนดความสูงของ Cell
BgImage = การใสพื้นหลังเปนรูปภาพ
Add Row/Column = เพิ่มจํานวนแถวและสดมภ
Delete Row/Column = ลบจํานวนแถวและสดมภ
Row Column

111
การสรางแบบฟอรม
เมื่อตองการขอมูลจากผูใชงาน WebPage การสรางแบบฟอรม จึงมีบทบาทสําคัญในการรับคาขอมูล
ของผูใ ชงาน และ สวนมากนํามาประยุกตใชกับ งานที่มีลักษณะการตอบโต กับ ผูใชงาน เชน การทําระบบ
สมาชิก (Membership) กระดานขาว (Web board) หรือ สมุดเยี่ยมชม (Guestbook) ซึ่งการที่แบบฟอรมจะ
ทํางานไดนั้น จะตองอาศัยการเขียนโปรแกรมเขามารับ คาขอมูลที่ผูใชกรอกแลวนําขอมูลเหลานั้น ไปทําการ
ประมวลผลอีกครั้งหนึ่งดังนั้น การใชงานแบบฟอรมไดจะตองมีการเขียนโปรแกรมควบคูไปดวย ยกตัวอยางเชน
ASP (Active Server Pages), PHP (Personal Home Pages), JSP (Java Servlet Pages) Perl , CGI
(Common Gateway Interface) ภาษาโปรแกรมเหลานี้เปน ภาษาที่ใชในงานWebโดยมีการรับ คาขอมูลแลวทํา
การประมวลผลขอมูลอีกทีหนึ่ง ผลที่ไดอาจจะเก็บขอมูลเขาใน ระบบฐานขอมูล(Database) ก็ได
การสรางแบบฟอรมจาก Adobe Golive
คลิ๊ก แท็บ Forms บน Palette Object
แท็บ Forms บนหนาตาง Palette จะเปนที่

เก็บอุปกรณตาง ๆ ที่ใชในการสรางแบบฟอรม
ทั้งหมด
อุปกรณท ี่ใชในการทําแบบฟอรม
1. Form เปน อุป กรณท ี่สําคัญมากถาจะทําแบบฟอรมจะตองนําอุปกรณตัวนี้เขามาใชงานเปน อับ ดับ
แรกสุด แลวอุป กรณอื่น ๆ จะตองอยูภายใน Form ดวย
Form Object

112
Name ตั้งชื่อใหกับแบบฟอรม
Action เปนการระบุไฟลที่ใชในการับคาขอมูลจากผูใชงาน
แลวทําการประมวลผล
Encode เปน การเขารหัสขอมูล
Method เปน วิธีการในการสงขอมูลมีดังนี้
Get จะปรากฏคาขอมูลตอทายปะปนมากับ URL
Post จะไมเห็นขอมูลที่สงมากับ URL สวนมากจะใชกับ Form
2. Text Field
เปน อุป กรณท ี่รับคาขอมูลตาง ๆ ที่ User พิมพ มีลักษณะเปน ชองรับขอมูล ขนาดบรรทัดเดียว ใชใน
กรณีที่ตองการรับขอมูลแบบสั้น ๆ บรรทัดเดียว เชน ชื่อ นามสกุล ที่อยู
Text Field Object

113
Name เปน การตั้งชื่อใหกับ อุป กรณ

Value เปนคาขอมูลของอุปกรณนี้
Visible กําหนดความกวางของ text Field (หนวยเปน
ตัวอักษร)
Max เปนการกําหนดจํานวนตัวอักษรสูงสุดที่สามารถ
พิมพเขาไปได
Is Password Field เปน การกําหนดใหแสดงผลขอมูล
แบบ Password
3. Password
เปน อุป กรณท ี่รับคาขอมูลตาง ๆ ที่ User พิมพ มีลักษณะเปน ชองรับขอมูล ขนาดบรรทัดเดียวแตเวลา
พิมพขอความเขาไปแลวจะมี เครื่องหมาย * แทนขอความ ใชในกรณีที่ตองการรับ ขอมูลแบบสั้น ๆ บรรทัดเดียว
และเปน ความลับ เชน รหัสผาน
Password Object

114
Name เปน การตั้งชื่อใหกับอุปกรณ
Value เปนคาขอมูลของอุปกรณน ี้
Visible กําหนดความกวางของ อุป กรณ password
(หนวยเปน ตัวอักษร)
Max เปน การกําหนดจํานวนตัวอักษรสูงสุดที่สามารถ
พิมพเขาไปได
Is Password Field เปน การกําหนดใหแสดงผลขอมูล
แบบ Password
Tip & Trick
กรณี เปน Text Field ธรรมดาจะไมมีการ check ที่ Is Password Field
4. Text Area
เปน อุป กรณท ี่รับคาขอมูลตาง ๆ ที่ User พิมพ มีลักษณะเปน ชองรับขอมูล ขนาดหลายบรรทัด ใชใน
กรณีที่ตองการับคาขอมูลจาก User เปนจํานวนมาก ๆ เชน Comment
Text area Object
การปรับ แตงคุณสมบัติ

115
Row จํานวนแถวที่ใหแสดง
Columns จํานวนตัวอักษรที่ใหแสดง
Readonly เปนการกําหนดคุณสมบัติใหอานไดอยาง
เดียวเทานั้น
Content เปน ขอความที่จะพิมพเขาไปไวกอนได
5. File Browser
เปน อุป กรณ ที่ใชในการคนหาไฟล ใชในกรณีท ี่ตองการนําไฟลจากในเครื่องสงไปยังที่อื่นอยางเชน
การสงแนบไฟลไปทาง อีเมล หรือการ อัพโหลด
File Browser Object

116

Visible กําหนดความกวางของ File Browser (หนวย
เปนตัวอักษร)
5. Label
เปน อุป กรณท ี่ใชเปน ขอความกํากับฟลด ใชในกรณีตองการอธิบ ายอุปกรณตัวอื่น เชน Text Field ,
Password
Label Object
Label

117
Reference เปนขอความที่ใหป รากฏ
Tip & Trick
สวนมากอุปกรณตัวนี้ไมไดรับความนิย มเนื่องจากไมมีผลกับทาง การเขียนโปรแกรม

สวนมากจะใชการพิมพขอความธรรมดาแทน
6. Radio
เปน อุป กรณท ี่ให User สามารถเลือก ไดแตสามารถเลือกเพียงคําตอบเดียวเทานั้น ใชในกรณีที่ตองการ
คําตอบจาก User เพียงคําตอบเดียวเทานั้น เชน เรื่องเพศ ศาสนา
Radio Object
Male Female

118
Group เปนการกําหนดกลุมที่จะใหเลือก
Value เปนคาขอมูลของอุปกรณตัวนี้
Selected เปน การเลือกอุปกรณตัวนี้เอาไวกอน
Tip & Trick
ถาทําการกําหนด Group ไมเปนตัวเดียวกัน จะสามารถเลือกไดทั้งชายและหญิง

ถาตองการใหเลือกได ตัวใดตัวหนึ่งใหทําการตั้ง Group ใหตรงกันดวย
7. Check Box
เปน อุป กรณท ี่ให User ทําการเลือกขอมูล โดยที่ User สามารถเลือกไดกี่ตัวก็ได ใชในกรณี ถามเรื่องที่
สามารถตอบไดหลายคําตอบ เชน ความชอบ
Adobe Photoshop
Adobe Golive
Check Box Object

119
Name เปนการตั้งชื่อใหกับ อุป กรณ

Selected เปน การเลือกอุปกรณตัวนี้เอาไวกอน
Tip & Trick
กรณีที่มีการตั้งชื่ออุปกรณเ หมือนกัน ขอมูลที่สงมาจะสงในรูปแบบ name = value1,value2 จะมี , คั่นขอมูล
8.List Box
เปน อุป กรณท ี่ให User ทําการเลือกขอมูล โดยที่ User สามารถเลือกไดกี่ตัวก็ไดโดยที่มีขอมูลให User
ทําการเลือกคอนขางมาก
List Box Object

120

Row เปนจํานวนแถวที่จะแสดงขอมูล
Multiple Selection สามารถเลือกตัวเลือกไดหลายตัว
Lable เปนรายการทีจะโชวใหเลือก
Value เปนคาของขอมูลที่ user เลือก
New เปน การเพิ่มจํานวนรายการเขาไป
Delete เปนการลบรายการที่ไมตองการ
Tip & Trick
อุป กรณตัวนี้ไมคอยไดรับความนิยมเนื่องจากเวลาที่จะทําการเลือกหลายตัวเลือก จะตองทําการ

กดปุม Ctrl กอนถึงสามารถเลือกไดซึ่งบาง User ไมทราบทําใหเห็น วาเลือกไดตัวเดียวเทานั้น
9. Popup
เปน อุป กรณท ี่มีลักษณะการทํางานคลายกับ ตัว Radio คือสามารถที่จะเลือกคําตอบไดแคคําตอบ
เดียว แตจะประหยัดพื้นที่ไดเปน จํานวนมากกวา ใชในกรณีที่ตองการคําตอบเพียงคําตอบเดียวแตมีตัวเลือกให
เลือกมาก เขน ประเทศ อําเภอ หรือจังหวัด
Popup Object

121

Row เปนจํานวนแถวที่จะแสดงขอมูล
Multiple Selection สามารถเลือกตัวเลือกไดหลายตัว
Lable เปนรายการทีจะโชวใหเลือก
Value เปนคาของขอมูลที่ user เลือก
New เปนการเพิ่มจํานวนรายการเขาไป
Delete เปนการลบรายการที่ไมตองการ
Tip & Trick
ถาอุปกรณ Popup ถูก Check ที่ Multiple Selection จะกลายเปน อุป กรณ List Box ทันที ดังนั้น ถาไม
ตองการให User สามารถเลือกไดหลายคําตอบ หาม Check ที่ Multiple Selection
10. Hidden
เปน อุป กรณท ี่ใชในการสงขอมูลไปยังไฟลท ี่จะประมวลผลแตจะไมปรากฏใหเห็นบริเวณหนางาน ใชใน
กรณีที่ตองการสงขอมูลบางอยูไปใหไฟลน ั้น ๆ โดยเฉพาะ
Hidden Object

122

อุปกรณป ระเภทปุม (Button) แบงออกเปน 4 ชนิดคือ

1. Submit
2. Reset
3. Button
4. Image
1. Submit Button
เปนปุมอีกชนิดหนึ่งเมื่อทําการกดแลวจะทําการเริ่มทําการสงขอมูลตรงนี้ไปใหไฟลทีระบุไวในสวน
Action ของ Form เริ่มรับ ขอมูลและประมวลผล

123
Submit Object
Button เปนตัวที่ใชในการกําหนดคุณสมบัติของปุม (Submit)

Name เปนการตั้งชื่อใหกับ อุปกรณ
Label เปนขอความที่จะแสดงบริเวณปุม
2. Reset Button
เปนปุมอีกชนิดหนึ่งเมื่อทําการกดแลวจะทําการลบขอมูลใหเปนคา ปกติตามที่ทําการเปดหนาแบบฟอรมขึ้นมาครั้งแรก
Reset Object

124
Button เปนตัวที่ใชในการกําหนดคุณสมบัติของปุม (Reset)

3. Button
เปนปุมอีกชนิดหนึ่งเมื่อทําการกดแลว จะไมมีอะไรเกิดขึ้น โดยสวนมากใชในการเขียนโปรแกรมเปนสวนมาก
Button Object

125
Button เปนตัวที่ใชในการกําหนดคุณสมบัติของปุม (Normal)

Name เปนการตั้งชื่อใหกับ อุปกรณ
4. Image Button
เปนปุมอีกชนิดหนึ่งที่ทําหนาที่ตัวเดียวกันกับ ปุม Submit แตสามารถที่จะใชรูปภาพเขามาแทนได ใช
ในกรณีท ี่ตองการตกแตงแบบฟอรมใหสวยงามขึ้น
Image Object

126
การปรับคุณสมบัติใหมาที่ แท็บ More แลวใหท ําการ

check Is Form ใหเรียบรอย เทานี้ภาพนี้ก็มี
คุณสมบัติเปน อุปกรณในการกดแทน submit button
การใชงานอุปกรณเก็บขอมูลของแบบฟอรม
ขอมูลที่จะประมวลผลจากแบบฟอรม มิไดมาจากขอความที่พิมพลงไปหนางาน ใน Layout แตไดมา
จากการอุปกรณแตละตัวที่วางลงไปในหนางาน โดยที่
Name หรือ Group หมายถึง ขอความที่เปน คําถาม
Value หมายถึง ขอความที่เปนคําตอบ
การเก็บขอมูลนั้น จะแบงออกเปน สองประเภท คือ
1. ให User พิมพขอมูลที่เปน คําตอบเอง ไดแก Text Field, Text Area และ Password ในการกําหนด
ขอมูลที่จะสงไปประมวลผลนั้น ใหกําหนดแตเพียง Name ไมตองกําหนด Value เพราะ User จะเปนผูกําหนด
คําตอบเอง ตัวอยาง ใชอุปกรณ Text Field เก็บขอมูล
กําหนดใน Inspector
Name คือ email
เมื่อ User พิมพ contact@netdesign.ac.th เปน คําตอบลงไปในอุปกรณ Text Field จะไดรับ ขอมูลที่
ประมวลผลเปน email=contact@netdesign.ac.th หมายความวา email คือคําถาม และ
contact@netdesign.ac.th เปน คําตอบของ User
2. กําหนดเปน Choice ให user เลือกขอมูลที่เปน คําตอบเทานั้นไมตองทําการพิมพขอมูล ไดแก

Check box , Radio Button, popup, List Box ใหกําหนดทั้ง name และ value ตัวอยางเชน ใชอุปกรณ
Check Box เปน อุป กรณเก็บ ขอมูลเกี่ยวกับBrowser ที่ใชอยู โดยมี 2 คําตอบใหเลือก คือ

127
Internet Explorer
Name = browser
Value = ie
Netscape Navigator
Name = browser
Value = nn
หาก User เลือก ทั้ง 2 ตัว ขอมูลที่สงมา ก็จะ เปน Browser = ie , nn
ขั้นตอนการทํางานของ Form Mail
Form Programming System Out put
แบบฟอรม Mail.asp E-mail
ขั้น ตอนการทํางานของแบบฟอรมก็คือเมื่อ User ทําการกรอกขอมูลใน Web เรียบรอยแลวก็จะทําการ

กดปุม Submit ดังนั้น ขอมูลก็จะถูกสงไปให ไฟล ที่จะทําการรับคาขอมูลที่ ที่ User กรอกมา เพื่อทําการ
ประมวลผล ซึ่งเปนไฟลที่จะตองมี ระบบที่มีการเขียนโปรแกรมดวยภาษาโปรแกรมชนิดใดชนิดหนึ่งเขามาชวย
เชน ASP , PHP ,JSP , Perl ,CGI เมื่อทําการรับคาขอมูลเรียบรอยแลวก็จะเริ่มทําการประมวลผลเสร็จเรียบรอย
ผลที่ไดก็จะขึ้นอยูกับวาตองการใหทําอะไรกับขอมูลนั้น คือจะมีอีเมลสงไปยังผุเปนเจาของ Web Site นั้น ๆ
ตัวอยางการทดลองสงแบบฟอรม
การที่แบบฟอรมจะทํางานไดสมบูรณน ั้นจะตองมีการประมวลผลจากโปรแกรมที่ไดเขียนขึ้น ซึ่งจะมี
ตัวอยางใหท ดลองสงขอมูล โดยผานไปยังไฟลซึ่งทางโปรแกรมเมอรของ Netdesign ไดทําการเตรียมไว จะตอง
กําหนดคาดังนี้
Action http://www.netdesign.ac.th/mail.asp
1
Name = mailto
Value = (email address ของแตละคน)
2
Name = subject
Value = เปนหัวเรือ่ งของ email ที่จะสงไป
3
Name = Web
Value = http://www.netdesign.ac.th/thanks.html (หรือ URL ของ Web page ที่เปนหนาที่โชว
ขึ้นมาหลังจากประมวลผลเรียบรอยแลว
ผูแตง อ. พงศเพชร มีทรัพย
email :: oaun@netdesign.ac.th

128
บทที่ 7
เฟรมและภาพเคลื่อนไหว
ในการสราง Web Siteผูผลิตสามารถใชเครื่องมือในการจัดรูปแบบของ Web Site ได หลายชนิด เชน

Grid หรือ Table แตยังมีรูป แบบในการสราง Web Site อีกหนึ่งชนิด ที่เปน ที่น ิยมใชกัน อยา งแพรห ลาย
เครื่องมือชนิดนี้เรียกวา “เฟรม”
ลักษณะเดนที่เห็น ไดชัดจากการสราง Web Site ดวยการใชเฟรมก็คือ พื้นที่หนาจอของ Web Site

จะมีการแบงพื้นที่แยกออกจากกัน เปน 2 หรือ 3 สวน โดยลักษณะ ของการแบงพื้นที่แยกออกจากกันที่พบเห็น
บอย ๆ ในการทํา Web Site
เชน
1 1 1
1 2
2 3
2
ตัวอยาง Web Site Site ที่ใชเฟรมในการออกแบบ
www.netdesign.ac.th Hotwired.lycos.com
www.k10k.net www.fritolay.com

129
โครงสรางของ Web Site Site ที่ใชเฟรมในการออกแบบ

จากบทที่ผาน ๆ มาจะทราบวาในการผลิต Web Site ขึ้น มาหนึ่งหนา (ไฟล .html หนึ่งไฟล) จะ
สามารถนําไปเปดแสดงผลผาน Browser แลวเห็น ไดหนึ่งหนาเชน กัน แตการสราง Web Site ดวยการใชเฟรม
นั้น การมองเห็นรูปแบบของ Web Site ที่เปนเฟรม แบบสองสวนนั้น จํานวนไฟลท ี่ใชในการสรางนั้น จะตองมี
จํานวนอยางนอย ถึง 3 ไฟลดวยกัน
Adobe Golive Browser
1 1
1 ไฟล (.html) 1 หนา ( Web Site)
1. โครงเฟรม
2. เมนู 1
1
2
3. เนื้อหา
Web Site เฟรม
2
1 หนา
รวม 3 ไฟล
จะเห็นไดวาการที่จะสราง Web Site ที่ใชเฟรมในการออกแบบนั้น จะมีไฟลหลัก 1 ไฟล ที่ใชเปน

ตัวกําหนดโครงสรางหรือกําหนดรูปแบบของเฟรมที่ตองการจะใช โดยที่ไฟลนี้จะเปน ไฟลที่ไมมีเนื้อหาปรากฏใน
หนา Web Site แตอยางใด เรียกไฟล นี้วา “โครงเฟรม” และสวนที่เปน หมายเลข 1 และหมายเลข 2 นั้น ก็จะ
หมายถึง สวนของ Web Site ที่จะตองสรางแยกออกมาอีก 2 ไฟล เพื่อที่จะนําไปใสไวในไฟลโครงเฟรม เพื่อให
Web Site เฟรมนี้แสดงผลไดอยางสมบูรณ นั่น ก็หมายความวา ในขณะที่กําลังดู Web Site ที่เปนเฟรมอยูนั้น
กําลังมองเห็น Web Site พรอมๆ กัน 2 หนา ในหนาจอคอมพิวเตอรน ั่นเอง (ในกรณีที่ Web Site นั้นมีการแบง
เฟรมออกเปน 2 สวน)

130
แตในการออกแบบ Web Site เฟรมจริงๆ แลวนั้น ไมไดมีการผลิตขึ้นมาเพียงแคหนาเดียว แตจะเห็นวา

ในสวนที่เปน หนาเมนู นั้น จะมี เมนูยอยๆ อยูอีกหลายเมนูเพื่อที่จะทําการคลิ๊กเขาไปดูเนื้อหาในสวนอื่น ๆ ดวย
ดังนั้น การทํา Web Site ดวยเฟรมนั้นจึงไมไดสรางขึ้นมาเพียงแค 3 ไฟล แตจะตองมีมากกวานี้ตามจํานวนเมนูที่
ตองการ
ขั้นตอนการทํา Web Site เฟรม ดวยโปรแกรม Adobe Golive 6.0

ขั้นตอนที่ 1 สรางสวนโครงเฟรม ( สวนที่ 1 )
1. File > New Page
2. เปลี่ยนชื่อ Title ที่ Tab Layout
3. เลือกทํางานที่ Tab Frame Editor (ใชสรางไฟลโครงเฟรมเทานั้น)
4. กําหนดรูป แบบเฟรมที่ตองการ
จาก Tab Frame ใน Palette
Object (ใน บ.ฝ. นี้จะเลือก
ใชแบบที่ 3)
โดยหลังจากเลือกรูปแบบเฟรมที่ตองการไดแลวใหลาก อุปกรณตัวนั้นลงไปวางบนพื้น งาน

(ที่ไดเลือกทํางานใน Tab Frame Editor แลว) จะไดผลลัพธดังรูป

131
5. กําหนดชื่อใหกับเฟรมทั้ง 2 (ใน บ.ฝ. นี้จะใชชื่อเฟรมบนเปน Top และเฟรมลางเปน Under)
โดยการกําหนดชื่อใหเฟรมบน ใหคลิ๊กในพื้นที่ เฟรมบน จะทําให Inspector แสดงผลดังรูป

และใหกําหนดชื่อเฟรม ลงไปในชอง Name (เฟรมลางก็ใหท ําในลักษณะเดียวกัน)
6. กําหนดขนาดใหกับพื้นที่เฟรม โดยในการกําหนดขนาดเฟรมนี้จะทําการกําหนดใหกับ พื้น ที่เฟรมบน

เทานั้น สวนพื้นที่เฟรมลางจะถูกกําหนดใหเปน พื้น ที่ท ี่เหลืออยูโดยอัตโนมัติโดยการกําหนดพื้น ที่เฟรม
บนใหคลิ๊กทํางานในพื้นที่เฟรมบนแลวกําหนดขนาดเฟรมในชอง Height (ใน บ.ฝ. นี้จะกําหนดใหพื้นที่
เฟรมบน เทากับ 120)

132
หมายเหตุ : ในการกําหนดขนาดพื้นที่เฟรมนั้น ในการทํางานจริงจะตองกําหนดขนาดเฟรมใหเทากับขนาด

งาน Graphic ที่ไดสรางไวจากโปรแกรม Photoshop เพื่อจะนํามาใชในการสราง Web Site สําหรับเฟรมบน
ดวย ซึ่งรายละเอียดในสวนนี้จะอธิบ ายในหองเรียน
7. กําหนดคุณสมบัติในการเกิด Scroll Bar ใหกับทั้ง 2 เฟรม โดยการกําหนดจะกําหนดใหเฟรมบนมีคา

Scrolling เปน No สวนเฟรมลาง มีคาเปน Auto
8. Save file เก็บไวกอน ใน บ.ฝ. นี้ จะกําหนดชื่อเปน index.html โดยยังไมตองปดไฟล และเลือก Tab
ไวท ี่ Frame Editor

133
ขั้นตอนที่ 2 สรางสวนเนื้อหา
หมายถึง การสราง Web Site ในสวนที่เปน เนื้อหาของในแตละเมนูทสี่ รางไว (ใน บ.ฝ. นี้จะมีไฟลสวนนี้
อยู 3 ไฟล ไดแก home.html , product.html , contact.html จาก c:\sample\sample_Frame) โดยไฟลท ี่
เปนสวนเนื้อหาเหลานี้จะทําการสรางจาก Tab Layout ตามวิธีการสราง Web Site แบบปกติ ตามบทที่ 5
ในการเรียนจะนําไฟลตัวอยางที่เตรียมไวใหมาใชในการเรียนเลย
ขั้นตอนที่ 3 สรางสวนเมนู
1. สราง Web Site หนาเมนู ที่ Tab Layout เหมือนการสราง Web Site แบบปกติตามบทที่ 5
เพียงแตขนาดความสูงของ Grid จะสูงเทากับขนาดของเฟรมบนที่กําหนดไวในไฟลโครงเฟรม
เทานั้น (ใน บ.ฝ. นี้จะกําหนดใหสูงเทากับ 120 pixels และกวาง 800 pixels ) และใหมี 3 เมนู
ไดแก Home Product และ Contact โดยอยาลืมปรับ Grid ใหชิดขอบดวย
2.
3. สราง Link และกําหนด Target

สราง Link ใหกับ Icon Home โดย Link ไปยัง ไฟล home.html และกําหนด Target เปน Under
เพื่อใหการ Link ไปยังไฟล home.html ทําใหหนานี้ไปปรากฏที่เฟรม Under

134
สราง Link ใหกับ Icon Product โดย Link ไปยังไฟล Product.html และสราง Link ใหกับ Icon
Contact โดย Link ไปยังไฟล Contact.html และกําหนด Target เปน Under เชนเดียวกับการ Link ของไฟล
home.html
ขั้นตอนที่ 4 สรางสวนโครงเฟรม ( สวนที่ 2 )
1. กลับมาสรางสวนโครงเฟรมตอเพื่อที่จะนําไฟล สวนเมนูและสวนเนื้อหา มากําหนดใหกับพื้นที่เฟรมบน

และเฟรมลาง โดยให Browse ไฟล Menu.html ใสเฟรม Top และ Browse ไฟล Home.html ใสเฟรม
ลาง (เฟรมลางจะกําหนดเฉพาะไฟลที่จะใหป รากฏพรอมกับการเปดแสดงผล Web Site เฟรมหนาแรก
ซึ่งใน บ.ฝ. นี้กําหนดใหเปนไฟล Home.html)

135
2. กําหนด Frame Set เพื่อทําใหเสนกั้นระหวางเฟรมหายไปโดยทําการคลิ๊กที่เสนกั้นระหวางเฟรมจะทํา
ให Frame Set Inspector ปรากฏขึ้น ดังรูป และกําหนดคาตางๆ โดยให Border Size = 0 และ
Border Frame = NO
เมื่อกําหนดคาทุกอยางเสร็จเรียบรอยแลวให Save ไฟล index.html อีกครั้งแลวเปดแสดงผลผาน

Browser จะไดผลลัพธเปน Web Site เฟรมดังรูป
การสรางภาพเคลื่อนไหว และ ปายโฆษณาดวยโปรแกรม Animagic Gif
ในการสราง Web Site ใหมีความนาสนใจแกผูใช วิธีการหนึ่งที่นิยมใชคือ การนําเอาภาพเคลื่อนไหว

เขามาใสไวในหนา Web Site ดวย โดยอาจจะอยูในรูป ของ ขอความกระพริบ ภาพการตูน เคลื่อนไหว หรือปาย
โฆษณา
โดยในการสรางภาพเคลื่อนไหวในบทนี้จะใชวิธีการ สรางภาพนิ่งขึ้นมาเปน เฟรม ๆ ใหมีลักษณะการ
เคลื่อนที่อยางตอเนื่อง และจะนําเอาภาพนิ่งที่ไดจากการสรางในโปรแกรม Photoshop ไปสรางเปน

136
ภาพเคลื่อนไหวในโปรแกรม Animagic Gif หลังจากนั้นจึงคอยนําเอาไฟลภาพเคลื่อนไหวที่ไดจากโปรแกรม
Animagic Gif ไปใชสราง Web Site ในโปรแกรม Adobe Golive ตอไป
ขั้นตอนการสรางภาพเคลื่อนไหว โดยสรุป
1. สรางภาพนิ่งเปน เฟรมๆ จากโปรแกรม Photoshop จนไดจํานวนเฟรมตามตองการ
(ใน บ.ฝ. นี้จะนําไฟลตัวอยางมาจาก c:\sample\sample_Animation)
update1.gif update2.gif update3.gif update4.gif

ไฟลเหลานี้เปน ไฟลที่จะนํามาใชเพือ่ การสรางภาพเคลื่อนไหวเทานั้นยังไมใชไฟลที่จะนําไปทํา Web Site
ดังนั้นเมื่อสรางไฟลเหลานี้จากโปรแกรม Photoshop แลว ให save เก็บแยกไวตางหากไมตองนําไปเก็บ ไว
ในโฟลเดอร image
2. นําไฟลเหลานี้ไปสรางภาพเคลื่อนไหวในโปรแกรม Animagic Gif โดยใชคําสั่ง File > Insert Frame
เพื่อนําเอาไฟลภาพนิ่งเขาไปใสใน Frame List โดยเรียงตามลําดับดังรูปที่ 1 และเมื่อใสเฟรมภาพนิ่งใน
Frame List เรียบรอยแลวจะไดดังรูปที่ 2
รูปที่ 2
รูปที่ 1
3. ทําการทดสอบภาพเคลื่อนไหวดวยการกดปุม Play บน Tool Bar จะเห็นการเคลื่อนไหวของภาพนิ่ง

แบบตอเนื่องทันที แตจะเห็นวาทุกภาพยังเคลื่อนที่ดวยความเร็วที่เทากันหมดทุกเฟรม

137
4. ทําการปรับอัตราการเคลื่อนที่ของภาพนิ่ง ดวยคําสั่ง Animation > Frame Rate ดังรูปที่ 3 จะทําใหหนาจอเปน
ดังรูปที่ 4
รูปที่ 3 รูปที่ 4
สําหรับรายละเอียดในการปรับแตงอัตราความเร็วจะอธิบายในหองเรียน
5. เมื่อปรับแตงอัตราความเร็วไดตามความตองการเรียบรอยแลว การ Save file เพื่อใหเปนไฟลภาพเคลื่อนไหว
ใหใชคําสั่ง File > Save as และนําไฟลนี้ไป Save เก็บไวในโฟลเดอร image เพื่อเตรียมไวใชทํา Web Site
ตอไป
6. นําภาพเคลื่อนไหวที่ไดจากโปรแกรม Animagic Gif ไปใชในโปรแกรม Adobe Golive โดยนําเขาไปใชดวย
อุปกรณ Image และทําการจัด Layout เหมือนวิธีการในบทที่ 5 ที่ไดเรียนผานมาแลวนั่นเอง
ผูแตง อ. ชนพิพัฒน อรามกุล

Email :: unn@netdesign.ac.th

138
บทที่ 8
DHTML และ Action
DHTML
DHTML หรือ Dynamic HTML คือ ภาษา HTML Version ลาสุด ที่สามารถสราง Animation ขึ้นมา
ในโครงสรางของภาษา HTML และยังอนุญาตใหท ั้งผูออกแบบ และ ผูเขาชม Web Site สามารถเลื่อนวัตถุไปมา
อยางอิสระ รวมทั้งสั่งใหซอน หรือ แสดงวัตถุตามที่สั่งไดอีกทั้งยังสามารถนําวัตถุตาง ๆมาทับกัน เปน ชั้น ๆ ได
โดยที่ไมสามารถทําไดใน HTML Version กอนๆ แตขอจํากัดของ DHTML นั้น อยูตรงที่วามันจะสามารถแสดง
ผลไดบ น Browser Version 4 ขึ้น ไปเทานั้น ( IE ver.4+, Netscape ver.4+ )
DHTML กับ Adobe Golive6

ใน Adobe Golive 6 นั้น มีอุป กรณท ี่เอาไวทํางาน
เกี่ ย วกั บ DHTML โ ดยตรงที่ ชื่ อ ว า “Floating
Box“ นั่นหมายความว า ถามี การใช อุป กรณตั วนี้ ที่
งานหนานี้แสดงวา Web Page หนานี้จ ะกลายเปน
DHTMLทันที
ลากอุป กรณ Floating Box ลงไปวาง

ในหนางานจะมีลักษณะดังรูป ถา
อยากจะเลื่อน Floating Box ให Click
ที่ขอบคางไวแลวลาก จะเห็นวา
สามารถเลื่อนอุป กรณตัวนี้ไปไหนก็
ไดในหนางาน โดยไมตองพึ่ง Layout
Grid ( * บทที่ 5 )

139
สามารถพิมพ Text ลงไปดานใน หรือจะใสรูปภาพก็ได

ถารูปที่ใสน ั้นใหญกวา Floating Box มันจะขยายเอง
อัตโนมัติ
ถาตองการกําหนดคุณสมบัติของ Floating Box

ให Click ที่ขอบของ Floating Box แลวไปดูท ี่ Inspector
จะสามารถปรับคาตางๆ รวมถึงการทํา Animation ใหกับ
Floating Box ดวย คา Left กับ Top เปนตําแหนงของ
Floating Box ตัวนี้ท ี่หนางาน สวนคา Width กับ Height
เปนขนาดของ Floating Box ตัวนี้ และสามารถจะใส
Background Color และ Background Image ของ
Floatig Boxไดที่ชอง Color และ BG Image

140
ความสามารถของ Floating Box และการนําไปใชประโยชน

1. สามารถนํา Floating Box หลาย ๆ ตัวมาซอนทับ กัน ได
ถาใส Image ลงไปใน Floating Box
( 1 ภาพ ใส Floating Box 1 อัน ) จะเห็นไดวาสามารถ
นํารูปภาพทั้งสองมาวางทับ กันได โดยใชวิธีการ Click
ที่ขอบ Floating Box แลวลากมาทับกัน
และในกรณีที่มี Floating- Box ซอนทับ กัน

หลายๆ ตัว ก็สามารถสลับตําแหนงบนลางใหกับ
มัน ได โดยใชคา Z-Index ในการเปรียบเทียบคา
กัน ถา Floating Box ไหนที่คา Z-Index
มากกวาก็จะอยูทับ Floating Box ที่มีคา Z-
Index นอยกวา

141
2. สามารถทํา Animation ใหกับ Floating Box แตละตัวได
ลองไปที่ Tab Preview หรือ Show In Browser ( บทที่ 5 ) เพื่อทดสอบการทํางานของ Animation
สามารถเขาไปปรับ การทํางานของ
Animation ที่ “Open DHTML
timeline editor “ ซึ่งเปน Icon มุม
บนขวา ดังรูป

142
สี่เ หลี่ยมสีม วงที่เ ห็ นจะเรีย กวา “ KeyFrame “ ซึ่ ง จะ

เกิดขึ้นทุกครั้งที่มีการเปลี่ยนแปลงเสน ทางในกรณีท ี่ส ราง
Animation จากการลากดว ยมือ จะมี KeyFrame เกิดขึ้ น
เยอะเนื่องจากคงไมสามารถลากเปนเสนตรงไดดวยมือของ
เราเอง
ถาตองการ Animation ในลักษณะวิ่งเปนเสนตรงใหเลือก KeyFrame ที่อยูตรงกลางทั้งหมด แลวกด Delete บน

Keyboard ใหเหลือแตเฉพาะ KeyFrame เริ่มตน และ KeyFrame สุดทายเทานั้น ตอนนี้จ ะได Animation ที่วิ่ง
เปนเสนตรงแลว
สามารถจะปรับการทํางานของ Animation ที่ Timeline Editor พรอมกับดูหนา Layout และผลของ Animation

ที่หนางานไปดวยก็ได ใหไปที่ Menu window > Cascade and Tile > Tile Horizontally จะเปนการแบง
หนาตาง Layout กับ Timeline เปน 2 สวน

143
ในหนาตาง Timeline Editor นี้ยังสามารถปรับคาตาง ๆ ของ Animation ไดอีกเชน การเพิ่ม หรือ ลดความเร็ว ,
การสั่งใหวน loop หรือ ถอยหลังกลับ ฯลฯ
Autoplay ปกติ
จะถูกกดไว เมื่อ
Preview
Animation จะ
เริ่มเลนอัตโนมัติ
“ Loop “ ถากดที่ปุมนี้ไว แผงควบคุ มการเล น Animation ปรับความเร็วของ

Animation ของเมื่ อเล น ใ น ก ร ณี ที่ ต อ ง ก า ร ท ด ส อ บ Animation มีหนวยเปน
จบ จะเริ่มตนเลนใหมไป Animation โดยไม ต อ งไปที่ FPS(Frame per second )
เรื่อยๆ Preview
หลังจากที่สราง Animation ก็สามารถมาปรับตําแหนงไดอีกครั้งโดย Click ที่ Key Frame

แลวไปดูที่ Inspector สามารถปรับตําแหนงคา Left และ Top ที่ Key Frame นั้น ๆ ได
จะเห็นไดวา Dynamic HTML มีความสามารถในการทํา Animation คอนขางมาก ทําให

Web Site ดูน าตื่น ตาตื่น ใจและมีการตอบโตกับ ผูใชมากขึ้น แตท ั้งนี้ยังตองคํานึงถึงกลุมเปาหมายของ
ดวย วาเปนกลุมที่รับ เทคโนโลยี DHTML ของไดหรือเปลาไมอยางนั้นสิ่งที่ท ําไปก็จะสูญเปลา และทํา
ใหกลุมเปาหมายของหัน ไปใชบริการของ Web Site อื่น ๆ ซึ่งสิ่งที่ยังตองคํานึงเปนหลักกอนก็คือ สิ่งที่
นําเสนอ , สิ่งที่จะเปนประโยชนกับ ผูเขาชม แลวคอยใชเทคโนโลยีตาง ๆ มาชวยเติมแตงให Web Site
ดูน าสนใจมากขึ้น นาจะเปนแนวทางที่ดีกวา

144
Action หรือ Action Script
โดยปกติแ ลวคงจะเคยพบเห็น การใช Action กับ หนา Web Site ตาง ๆ กัน เปน ประจําอยู
แลว อยางเชน อาจจะเปด Web Site หนึ่งขึ้น มาแลวปรากฏวามีห นาตาง Browser อีกหนาตางหนึ่ง
เปดขึ้น มาอัตโนมัติ โดยที่ไมได Click ที่ไหนเลย หรือวาอาจจะเคย Click ที่รูป ภาพเพื่อจะดูรูป ภาพรูป
นั้น เปน รู ป ใหญ ป รากฏว าหน า ต าง Browser ที่เ ป ดขึ้น มานั้ น มีรู ป ภาพรู ป ใหญ ขึ้น มาแต ห นา ต า ง
Browser นั้นพอดีกับ รูปภาพ และอาจจะอยูตรงกึ่งกลางหนาจอดวย ซึ่งการกระทําลักษณะแบบนี้ใน
ภาษา HTML ธรรมดาไมสามารถจะทํา ได จึ งตอ งมี การเขียนโปรแกรมเพิ่ม เติม เขามา ซึ่งถาผูใช มี
ความสามารถในการเขียนโปรแกรมเหลานั้น ก็สามารถจะทําใหห นา Web Site ดูมีสีสรรคมากขึ้น
นั่นเอง รวมทั้งยังสามารถทําใหผูใชเกิดความสะดวกมากขึน้ อีกดวย
Action กับ Adobe Golive 6
เนื่องจาก Golive เปน โปรแกรมที่ชวยให Designer ทํางานไดงายขึ้นโดยไมตองยุงกับสวน

ของการเขียนโปรแกรมมากนัก มัน จึงมีเพิ่มความสามารถในการที่จะทําใหสามารถทํา Action ตางๆ
มากมายโดยที่ไมตองมีความรูดานการเขียนโปรแกรมเลยก็ได โดย Golive ไดเตรียมชุดคําสั่งการทํา
Action เอาไวมากมายใหเอาไปใชไดทันที เปนชุดคําสั่งที่สามารถเขาใจไดอยางงายดาย และมีการ
อธิบายไวชัดเจน
Action แบงเปน 2 ชนิด
1. Action ที่ Link ( Text Link , Image Link )

จะเกิด Action ก็ตอเมื่อมีการกระทํากับ Link นั้นๆ อยางเชน กดที่ป ุมปุมหนึ่งแลวมีการใส
Action สั่งใหเปลี่ยนสี Background แบบนี้จะเรียกวา Action ที่ Link สามารถใส Action ใหกับ
รูปภาพ หรือ Text ก็ไดแต รูปภาพ หรือ Text นั้น ๆ จําเปนจะตองทํา Link ไวกอน ไมอยางนั้น แลวจะไม
สามารถกดลงไปที่ตัวรูป หรือ Text เพื่อจะทํา Action ใหมันได แตทั้งนี้จะทํา Link ไปที่ไหน ถาทํา Link
ไปที่หนา Web Site อื่นๆ ก็จะไมเห็น Action ที่ใสลงไป เพราะวามีการเปลี่ยนหนาไปเรียบรอยแลว
ดังนั้น จึงตองรูจักการทํา Link หลอกเอาไว โดยใหทํา Link แบบปกติแตแทนที่จะ Link ไปหนา Web
Site ใหใส # ลงไปแทน

145
เมื่อทํา Link เรียบรอยแลวใหไปที่ menu window > Actions เปด palette Actions ขึ้นมาซึ่งตอนนี้จะ
มีคําสั่งใหเลือกใช ( ถาไมไดทํา Link คําสั่งเหลานี้จะไมขึ้น )
Event – เหตุการณ หรือ สถานะของการเกิด Action

การทํา Action กับ Link นั้น จําเปนจะตองกําหนดเหตุการณของ Action กอน เชน ถาใส Action
เปลี่ยนสี Background ตองกําหนดเหตุการณกอนวาจะให Click ที่ Link แลวเปลี่ยนสี Background หรือ
อยากจะให Double Click แลวถึงเปลี่ยนสี Background หรืออาจจะแคแตะที่ Link เทานั้นแลวสามารถเปลี่ยนสี
Background ได โดยที่สามารถกําหนดแบบไหนก็ได ซึ่งก็ควรจะเลือกใชใหเหมาะสมกับงานดวย
ชนิดของ Events
Mouse Click เกิด Action เมื่อ Click ที่ Link
Mouse Enter เกิด Action เมื่อแตะที่ Link
Mouse Exit เกิด Action เมือ่ ลาก Mouse ออกจาก Link
Double Click เกิด Action เมื่อทําการ Double Click

146
Mouse Down เกิด Action เมื่อมีการ Click ลงไปที่ Link ในขณะที่ pointer วางอยูบน Link
Mouse Up เกิด Action เมื่อมีการปลอยปุมที่ Mouse ในขณะที่ pointer วางอยูบน Link
Key Down และ Key Press เกิด Action เมื่อมีการ Click ลงไปที่ Link แลวกดปุมที่ Keyboard
Key Up เกิด Action เมื่อมีการ Click ลงไปที่ Link แลวปลอยปุมที่ Keyboard
เมื่อเลือก Events หรือเหตุการณเรียบรอย แลวใหกดที่

New Item เพื่อบอกวาตองการเลือก Events นั้นๆ โดย
ที่สามารถจะใส Events ลงไปกี่ตัวก็ได และถาจะลบ
Events ตัวไหนออก ก็ใหเลือก Events แลวกดที่ Icon
รูปถังขยะก็จะสามารถลบ Events นั้น ๆ ออกได
จากนั้น ใหไปกดที่ Icon Actions ก็จ ะมีชุดของ

Action ใหเลือกใชมากมาย โดยถาเลือ ก Action
ตัวไหนก็เทากับ วามีการทํา Action กับ Link นั้น
เรียบรอยแลว

147
2. Action ที่สวน Head ของ HTML
ถ า ตอ งการใส Action ให ส วนหั ว

ของ HTML ใหไปที่มุมซายบนของ
หน า Layout จะมี ปุ ม “ Toggle
Head Section “ ใหกดเพื่อ จะเปด
การทํางานสวนหัวของ HTML ลงมา
จากนั้นใหไปหาอุป กรณ Head Action

ที่ Tab Smart ใน Palette Object
วางอุป กรณ Head Action ลง

บนสวนหั วของ HTML แล ว
ไปดูท ี่ Inspector จะสามารถ
เลือก Action มาใสได

148
จะมี Exec ใหเลือ ก 4 แบบ

- On Load มีความหมายวา Action จะเกิดขึ้น ทันทีท ี่มีการ Load หนา Web Site หนานี้
- On Unload มีความหมายวา Action จะเกิดขึ้น ก็ตอเมื่อมีการปดหนา Web Site หนานี้
- On Parse มีความหมายวา Action จะเกิดขึ้น เมื่อ Browser มีการอาน Source Code ที่สวนนี้
- On Call มีความหมายวา Action จะเกิดขึ้นเมื่อมีการเรียกใช Call Action
สวนถาตอ งการจะใช Cction อะไรกั บ

สวนหัว ก็สามารถ Click ที่ปุม Action ก็
จะมีชุดของ Action ใหลือกใช ซึ่งเปนชุด
เดียวกับ Action ที่ Link นั่นเอง
การนํา Action ไปใชงาน

อยางที่ไดทราบไปแลววา Action มี 2 แบบคือที่ Link และ ที่สวนหัวของ HTML และยังเปน Action ชุด
เดียวกัน อีกดวย ดังนั้นจึงตองลองใชงานดูวา Action ตัวไหนบางที่เหมาะกับ Action ที่ Link Action ไหนบาง
เหมาะกับการใสท ี่สวน Head
ตัวอยางของการใส Action ที่ Link

Action “ Open Window “ เปน Action ที่ใสใหกับปุมหรือ Link เพื่อตองการใหเวลา Click แลวเปด
หนาตาง Browser ขึ้นใหมโดยทีส่ ามารถกําหนดขนาดที่ตองการ รวมทั้งสามารถเลือกไดดวยวาตองการ
Function ตัวไหนบางของ Browser

149
กอนจะไปทํา Action Open Window จําเปนตองเตรียม Web Site หนาที่จะเปดขึ้นมาใหพรอมไวกอน

โดยการสราง Web Site ที่มีขนาดที่ตองการ ( ชิดมุมบนซาย ) แลว Save เก็บเอาไวกอน
ควรจะออกแบบใหชิดมุมซายบนเนื่องจาก เวลา
กําหนดขนาดหนาตางที่จะเปดขึ้น ใหม จะคิดคา
จากมุมซายบน
ทดลองพิมพตัวหนังสือขึ้นมา แลวทํา Link ( ใส # ) เอาไวแลวเรียก Palette Action ขึ้นมา เลือก Event
เปน แบบ Mouse Click

150
จากนั้ น ให Click ที่ ปุ ม Action แล ว เลื อ ก

Link > Open Window ที่ ชอง Link ให
Browse ไปหาหนา Web Site ที่เ ตรียมไว
สวนชอง Size ใหใสเ ปนขนาดของ Browser
ที่ ต อ งการจะเป ดขึ้ น มา ส ว นของ Checked
Box ดานลางก็เ ปน Function ของ Browser
ถาไมตองการก็เอาเครื่องหมายถูกออกใหห มด
ลองทดสอบผลดูผาน Browser
พอ Click ลงไปที่ Link ก็สามารถเปด Browser ขนาดที่กําหนดได

151
ใหลองใช Action เดียวกันนี้กับ สวนหัวของ html บางเพื่อใหเห็น ความแตกตาง
กดที่ป ุม Toggle Head Section ( มุมซายบน )

เพื่อจะใส Action ที่สวนหัว
วางอุป กรณ Head Action จาก Object

Palette ในหัวขอ Smart ลงใน Headsection
ดังรูป จากนั้นไปดูที่ Inspector เลือก Exec.
ใหเปน Onload
จากนั้ น ให เ ลื อ ก Action > Open

Window เหมื อ นตั ว อย า งแรก ตั้ ง ค า
ลักษณะเดียวกัน

152
ลอง Preview หรือ Show In browser เพื่อทดสอบ
จะเห็นวาไมตอง Click Link ก็มี Browser เปดขึ้นมาอัตโนมัติ เพราะวาสั่ง Action ไวเปน

Onload นั่นก็คือถามีการ Load หนานี้ก็จะสั่ง Open Window ทันที ยกตัวอยาง Action ที่นาสนใจ
จาก Web Site ของ TOYOTA ( www.toyota.com ) Action “ Set image URL”
ที่ห นา แรกของ TOYOTA นั้น มีก ารใส

Menu ของรูปรถรุนตางเอาไว โดยถาเอา
Cursor แตะลงไปที่ชื่อรถรุน ไหน ก็จะมี
รถรุ น นั้ น ปรากฎอยู ต รงกลาง และถ า
ไมไดเลือกแตะที่ไหน ตรงกลางก็จะกลับ
เปน Logo ของ TOYOTA อีกดวย

153
ลองมาทํา Action ลักษณะนี้บน Golive กันดู
เตรียมหนา Web Site ลักษณะนี้ขึ้น มา
Text ธรรมดา ทํา

วาง Image ลงไปเปน Link เอาไวเพื่อใส
รูปที่จะใหเปนรูปหลัก Action
สําหรับ Action นี้จําเปนตอ งตั้งชื่อใหกับ ภาพหลักกอ น โดยไป Click ที่รูป ภาพ แลวไปดูที่
Inspector ตรง Tab More จะมีชอง Name อยู ใหตั้งชื่อเอาไวตรงนี้
จากนั้น ใหเลือก Link ตัวแรกกอน แลวไปดูที่ Palette action เลือก Events เปน Mouse
Enterแลวไปเลือก Action ในหัวขอ Image > Set Image URL

154
ที่ชอง Image ใหเลือกรูปหลักไว สวนตรง

ช อ ง Link ให Browse ไปหาภาพที่
ต อ งการจะให แ ทนลงไปที่ รู ป หลั ก เมื่ อ
แตะที่ Link นี้

155
เมื่อเสร็จแลวใหใส Action ลักษณะเดียวกันนี้กับปุมที่เหลือ แคเปลี่ยนภาพที่ Link ไปหาเทา
กอนที่จะแตะที่ Link นั้น รูป ตรงกลางจะเปน รูปหลักของกอนนั้น แลงลองไป Preview เพื่อทดสอบดู
แตพอแตะที่ Link แลวตอนนี้รูป ตรงกลางจะเปลี่ยนไปเปนรูปที่ตองการและพอเลื่อน Cursor ออกจาก

ตัว Link รูป ตรงกลางจะตองกลับมาเปน ภาพหลักดวย

156
Action กับ DHTML
การทํา Action นั้นไมไดเกี่ยวของกับ Dynamic HTML โดยตรง เพียงแตวามี Action บางตัว

ที่จะตองทํางานควบคูกับ Floating Box ทําให Action เหลานั้นเปน Action ที่จะตอง Support
เทคโนโลยี DHTML ไปโดยปริยายนั่นเอง ในชวงนี้จะยกตัวอยางการใช Action กับ DHTML ใหลองทํา
กัน ดู
Action “ Show / Hide “ ( Floating Box )
Action นี้เปน คําสั่งที่ทําใหสามารถซอน หรือ แสดง Floating Box ตามที่ตองการได ลองดู
ตัวอยางการใชงานจาก Web Site ของ Distar ( www.distar.net )
ที่หนาแรกของ Distar.net มีการสราง menu เปนลักษณะ Javascript Rollover ( บทที่ 6 ) คือตอน

แรกเปนรูปภาพ พอ Cursor แตะก็จะเปลี่ยนเปนรูป วงกลม แตท ี่นาสังเกตคือ เมื่แตะที่ป ุมแลวปรากฎวามี
ขอความแสดงขึ้นมาทางดานบน เปนลักษณะอธิบายวา Link นี้จะพา User ไปที่ไหน ไปเจออะไรบาง ซึ่ง
ลักษณะการทํา Action อันนี้ก็คือ Action ที่เรียกวา Show Hide นั่นเอง
ลองเตรียมหนา Web Site ลักษณะดังรูปเพื่อลองทํา Action นี้ดู
ทํา Link ( ใส # ) เตรียมเอาไว เพื่อทําการใส Action

157
จากนั้น ใหวาง Floating Box ลงมา 3 กลอง แลวใสรูป ภาพลงไปกลองละรูป
ตั้งชื่อใหกับ Floating Box ดวย โดยให Click ที่ขอบของ Floating Box แตละตัวแลว
ไปตั้งชื่อตรงชอง Name ของ Inspector
จากนั้น ใหเลือกที่ Link ตัวแรกกอน ไปที่ Palette Action เลือก Events เปน Mouse Enter
แลวไปเลือก Action หัวขอ Multimedia > ShowHide
ที่ชอง Mode ใหเลือกเปน Show เนื่องจากตองการแตะ ( Mouse Enter )แลว แสดง

Floating Box ที่ใสรูปภาพของไว ที่ชอง Floating Box ใหเลือกชื่อ Floating Box ที่ตองการ
จะใหแสดงตอนที่แตะลงไปที่ Link
ตอนนี้เมื่อแตะแลวสามารถแสดง Floating Box ได แตวาเมื่อเอา Cursor ออก
จะตองซอน Floating Box ตัวนี้ไปดวย ดังนั้นเลือก Events เปน Mouse Exit แลวใส
Action > Multimedia > Show Hide อีกครั้ง

158
คราวนี้ใหเลือก Mode เปน Hide บาง สวน Floating Box ก็เลือกตัวเดิม ลองใส Action ให
Link ตัวอื่นในลักษณะเดียวกันดวย เมื่อใสครบแลวลอง prreview เพื่อทดสอบดู
เมื่อยังไมไดแตะจะมองไมเห็นภาพที่อยูใน Floating Box
เมื่อแตะที่ Link ที่ใส Action แลวจึงจะแสดง Floating Box ใหเห็น
DHTML กับ Head Action
มี Action หลาย ๆ ตัวที่สามารถทํากับ FloatingBox และเปน Action ที่สวน head ของ HTML ในบทนี้
จะยกตัวอยางใหดู 2 Action เพื่อใหสามารถไปประยุกตใชกันดู Action “ Drag Floating Box “ และ “ Mouse
Follow “ Action Drag Floating Box นั้น อนุญาติให User สามารถที่จะ Click ลากวัตถุท ี่วางอยูใน Floating
Box ของอยางอิสระ สวน Action Mouse Follow นั้นทําใหวัตถุทอี่ ยูใน Floating Box ที่กําหนดไวนั้น เคลื่อนที่
ตาม Mouse ของ User ไดตลอดเวลา ซึ่ง Action ทั้ง 2 ตัวนี้ก็เปน Head Action ทั้งคู เนื่องจากวาเปน การสั่ง
Action ตั้งแตเริ่มงานนี้ท ันที

159
วาง Floating Box ลงไปที่หนา

งาน ใส Image เขาไปขางใน
และ Browse รูป ภาพแทนลงไป
จากนั้น ใหตั้งชื่อใหกับ Floating
Box ดวย
เสร็จ แลวใหใส Head Action

ลงไปที่ ส ว น Head Section
เลือก Exec. เปน “ OnLoad “
ใหลองเลือก Action > Multimedia > Drag Floating Box
ที่ชอง Floating Box ให

เลือกชื่อ Floating Box ที่ตั้ง
ชื่อไว

160
พอ Preview แลวจะสามารถ Click คางไวแลวลาก ( Drag ) Floating Box ไปไหนก็ไดในหนางาน
แตถาใส Action > Multimedia > Mouse Follow
ที่ชอง Floating Box ก็เลือก

ชื่อ Floating Box ที่ตั้งชื่อไว
เชน เดียวกัน
พอไป Preview แลวจะเห็น วา Floating Box ตัวที่กําหนดจะติดไปกับ Cursor

161
จะเห็นไดวาความสามารถของ DHTML และการทํา Action นั้น มีมากมายและหลากหลาย
ซึ่งนาจะเปน สวนเพิ่มเติมที่ทําให Web Site ของดูนาสนใจมากขึ้น แตถึงแมวามันจะทําให Web Site
ของดู มีสีสรรคม ากขึ้ น ก็ ไมควรจะใหมัน บดบั งจุด ประสงคใ นการนําเสนอเนื้อ หา สาระสําคัญ ของ
Web Site ดวย เพราะวาการใสเทคนิคพิเศษมากจนเกิน ไป ก็จะทําให User นั้น หาสาระสําคัญจริงๆ
ของ Web Site ไมเจอ ในที่สุดก็จะไมกลับ มาอีก ดังนั้น จึงควรเลือกใชเทคนิคใหเหมาะสมกับ งานดวย
จึงจะเรียกไดวาเปนผูที่ออกแบบ Web Site ไดดีเยี่ยม ไมใชผูท ี่สราง Web Site ได เทานั้น
ผูแตง อ. อัศวิน โอกาดา

email :: okada@netdesign.ac.th

162
บทที่ 9
Domain Name, Web Site Hosting, การตรวจสอบขอ ผิดพลาดภายในหนา Web Site และการ Upload
เมื่อทําหนา Web Site เสร็จเรียบรอยแลว การที่จะเอาหนา Web Site แตละหนาของขึ้นออนไลนใน

ระบบอินเทอรเน็ต เพื่อใหผูคนสามารถเขามาเปดชมไดนั้น จะตองมีสวนประกอบที่สําคัญ 2 สวน ก็คือ
1. Domain Name และ 2. Hosting
Domain Name หรือ “ชื่อโดเมน” เปรียบเสมือนบานเลขที่บอกตําแหนง เพื่อใหคนที่จะมาเยี่ยมชม
สามารถเขามาไดอยางถูกตอง สวน Hosting เปรียบเสมือนเนื้อที่ของบาน
Domain Name
ชื่อโดเมนเกิดขึ้นมาจากที่ตอนแรกเริ่มระบบอินเทอรเน็ต การแยกแยะเครื่องคอมพิวเตอรที่อยูภายใน
เครือขายหรือโฮสต (Host) แตละเครื่องออกจากกันนั้น จะใชการอางอิงดวยตัวเลขไอพี (IP : Internet Protocol)
ซึ่งเปนตัวเลขชุดขนาด 32 บิต โดยจะแบงออกเปน 4 กลุม กลุมละ 8 บิต หรือเปน ตัวเลขไดตั้งแต 0-255 โดยคั่น
ระหวางชุดดวยจุด เชน 213.55.170.10 โดยที่เครื่องคอมพิวเตอรห รือโฮสต จะมีไอพีประจําของแตละเครื่อง โดย
ที่ไมซ้ํากันเลย (ปจจุบัน ตัวเลขไอพีแบบ 32 บิตนั้น อางอิงเครื่องคอมพิวเตอรห รือโฮสตไดประมาณ 4.3 พัน ลาน
เครื่อง ซึ่งจํานวน ดังกลาวคอนขางจํากัดเมื่อเทียบกับ การใชงานปจจุบัน ดังนั้นจึงมีแนวคิดที่จะขยายการใช
งานเลยไอพีไปสูมาตรฐานใหมท ี่เรียกวา Ipv6 แทน Ipv4 ที่ใชอยูเดิม โดยจะอางอิงดวยชุดตัวเลขขนาด 128 บิต
ซึ่งในปจจุบ ันไดเริ่มมีการติดตั้งระบบเพื่อรองรับมาตรฐานใหมน ี้บน Root Server ทั่วโลกแลว คาดวาจะสามารถ
เปลี่ยนมาใชงานไดในอนาคตอันใกลน)ี้ แตเนื่องจากเลขไอพีเปนชุดตัวเลขที่ยากแกการจดจํา จึงไดมีการนําเอา
ชื่อโดเมนมาใช เพื่อใหงายตอการจัดการและการจดจํา เชน yahoo.com, hotmail.com, netdesign.ac.th แต
โดยสวนมากผูใชสวนใหญยังเขาใจผิดอยู โดยมักหมายรวมเอาชื่อของโฮสต (ซึ่งสวนใหญนิยมตั้งเปน www) เขา
ไวเปน สวนหนึ่งของชื่อโดเมนดวย เชน www.yahoo.com ซึ่งโดยความเปนจริงแลว www.yahoo.com เปน เพียง
การอางอิงถึงโฮสตชื่อ www ที่อยูภายใตโดเมน yahoo.com เทานั้น สําหรับ ชื่อโดเมนจะตองทําการลงทะเบียน
กอนการใชงาน เพื่อเอาชื่อที่ไดมาจับคูกับ ตัวเลขไอพี เวลาใชงานจะไดไมตองจําเลขไอพี แตใชจําชื่อโดเมนแทน
การจดโดเมนจะใชห ลักการ “จดกอนไดกอน” (First-come, First-served) ซึ่งใชกัน เปน สากลในการจดโดเมนทั่ว
โลก สําหรับ การตรวจสอบวาชื่อโดเมนยังวางอยูหรือไม สามารถเขาไปเช็คไดที่ www.internic.net/whois.html
หรือที่ www.checkdomain.com
การแบงประเภทของชื่อโดเมน สามารถทําได 2 ลักษณะใหญ ๆ คือ

1. แบงตามรูปแบบในเชิงเทคนิค
ในเชิงเทคนิคนั้น มีการแยกยอยชื่อโดเมนออกเปนหลายระดับ ขึ้น โดยชื่อโดเมนระดับบนสุดจะถูก
เรียกวา Top-Level Domain Name หรือ TLD ซึ่งจะอยูตําแหนงขวามือสุดของชื่อ
เชน .com, .net, .org , .th, .uk สวนชื่อที่ถัดจาก TLD มาทางซายมือ เรียกวา Second-Level
Domain Name หรือ SLD เชน yahoo.com, hotmail.com สวนตําแหนงที่ถัดจาก SLD มา
ทางซายมืออีกที เรียกวา Third-Level Domain Name เชน netdesign.ac.th, nector.or.th ซึ่งใน
แบงยอยนี้สามารถแบงไปไดเรื่อย แตโดยปกติมักนิยมแบงไมเกิน 4 ระดับ
163
2. แบงตามลักษณะการใชงานและขอบเขตทางภูมิศ าสตร
แนวทางการจัดแบงลักษณะและประเภทของชื่อโดเมนอีกแนวทางหนึ่ง คือ การจัดแบงตาม
ลักษณะการใชงาน ซึ่งปรากฏใหเห็นในการจัดแบงชื่อโดเมนประเภทที่เรียกวา ชื่อโดเมนสากล
หรือ gTLD (generic Top-Level Domain Name) และการจัดแบงตามขอบเขตทางภูมิศาสตร ซึ่ง
ปรากฏใหเห็นในการจัดแบงชื่อโดเมนประเภทที่เรียกวา ชื่อโดเมนประจําสัญชาติ หรือ ccTLD
(country code Top-Level Domain Name)
กลุมของชื่อโดเมนประเภท gTLD
กลุมที่เปดกวางใหบุคคลหรือหนวยงานทั่วโลกจดไดโดยอิสระ
.com (Commercial) กําหนดใหใชสําหรับ กลุมธุรกิจการคาทั่วไป เชน บริษัทตางๆ
.net (Networking) กําหนดใหใชสําหรับกลุมผูดูแลระบบเครือขายคอมพิวเตอร หนวยงานรับจด
ทะเบียนชื่อโดเมนและกลุมใหบริการดานเครือขายอื่น ๆ
.org (Organization) กําหนดใหใชสําหรับกลุมองคการ ซึ่งไมสามารถจัดลงไวในกลุมอื่น ๆ ปจจุบัน
สวนใหญถูกใชสําหรับองคการที่ไมแสวงหาผลกําไร (Non-Profit Organization)
กลุมที่เปดใหกับหนวยงานหรือองคกรเฉพาะดาน
.gov (Government) สําหรับหนวยงานตางๆ ที่อยูภายใตการกํากับ ดูแลของรัฐบาลกลางสหรัฐ
.edu (Education) กําหนดใหใชสําหรับกลุมสถาบันการศึกษาของสหรัฐอเมริกาเทานั้น โดยจํากัดให
เฉพาะมหาวิทยาลัยและวิทยาลัย ที่มีห ลักสูตรการศึกษา 4 ป
.mil (Military) สงวนไวสําหรับหนวยงานทางทหารของสหรัฐอเมริกาเทานั้น
.int (International) สําหรับองคกรหรือหนวยงานที่จัดตั้งขึ้น เพื่อดําเนินงานระหวางประเทศ
กลุมของชื่อโดเมนในประเภท ccTLD
ในสวนของการจัดแบงประเภทตามขอบเขตทางภูมิศาสตร จะเปนการกําหนดรหัสประเทศ โดยปจจุบัน
ยึดตามองคการสหประชาชาติ รหัสดังกลาวจะมีลักษณะเปนตัวอักขระ 2 ตัว ซึ่งเปนชื่อยอหรือใกลเคียงกับชื่อยอ
ของประเทศนั้น ๆ สําหรับบทบาทการควบคุมกํากับ ชื่อโดเมนกลุม ccTLD จะขึ้น กับ องคกรที่ดูแลระบบขอมูลชื่อ
โดเมนประจําสัญชาตินั้น ๆ เปนหลัก ซึ่งหนวยงานดังกลาวสวนใหญมักเปนหนวยงานเอกชนที่เปน ผูบ ุกเบิก
เครือขายอินเทอรเน็ตในประเทศนั้น ๆ มาแตตน เชน ในกรณีของประเทศไทย จะมี THNIC (Thailand Network
Information Center) ซึ่งเปนหนวยงานภายใตการสนับสนุน ของสถาบัน เทคโนโลยีแหงเอเชีย (AIT) เปนผูดูแล
ระบบขอมูลชื่อโดเมน .th และใหบริการรับจดชื่อโดเมน .th ทั้งหมด
ในแตละประเทศ การจัดแบงลักษณะการใชงานของชื่อโดเมนจะอยูภายใตการดูแลขององคกรของ
ประเทศนั้น ๆ สําหรับในกรณีของประเทศไทย THNIC มีการจําแนกชื่อโดเมนในระดับ SLD ออกเปน 7 ประเภท
คือ
.co.th สําหรับองคกรธุรกิจที่จดทะเบียนในประเทศไทย ในอดีตจํากัดใหจดไดเพียง 1 ชื่อตอ 1 บริษัท
หรือหางหุน สวนเทานั้น โดยชื่อที่จดจะตองเปนชื่อ/ชื่อยอ /หรือสวนหนึ่งสวนใดของชื่อบริษัทเทานั้น ตอมาเมื่อ

164
วันที่ 31 สิงหาคม 2543 จึงไดขยายใหสามารถจดชื่อไดห ลายชื่อ โดยสามารถอางอิงจากเครื่องหมายการคาที่จด
ทะเบียนได
.net.th สําหรับหนวยงานไทยที่ใหบริการอินเทอรเน็ตหรือเครือขาย
.or.th สําหรับองคการในประเทศไทยที่ไมแสวงหาผลกําไร
.ac.th สําหรับสถาบันการศึกษาของไทย
.go.th สําหรับหนวยงานราชการไทย
.mi.th สําหรับหนวยงานทางทหารของกองทัพไทย
.in.th สําหรับ องคกรหรือบุคคลทั่วไป
สําหรับ ชื่อโดเมน .in.th นัน้ ทาง THNIC เพิ่งจะเปดใหจดและใชงานเมื่อเดือนมีนาคม 2542 ที่ผานมา
เพื่ออํานวยความสะดวกแกบ ุคคลหรือองคกรทั่วไปใหสามารถจดชื่อ .th ของประเทศไทยได โดยไมตองแสดง
หลักฐานใด ๆ ในการขอจด ตางจากชื่อโดเมน 6 ประเภทแรกที่ไดมีการเปดใหบริการมาตั้งแตตน ซึ่งผูขอจด
จําเปนตองยื่นหลักฐานเพื่อแสดงสิทธิ์ตามกฎหมายที่มีตอชื่อนั้น ๆ เชน เอกสารรับรองการจัดตั้งบริษัท หนังสือ
สําคัญแสดงการจดทะเบียนเครื่องหมายการคา หรือ อื่น ๆ ซึ่งจะตองสามารถแสดงใหเห็นไดวาชื่อที่ขอจด มี
ความเกี่ยวของกับ กิจการของผูขอจดใหกับทาง THNIC กอน จึงจะสามารถจดและใชงานชื่อนั้น ๆ ได
ประวัติความเปนมาของชื่อโดเมน
การนําชื่อโดเมนมาใชงานอยางจริงจังเริ่มตนในชวงเดือนพฤศจิกายน ค.ศ.1983 ในตอนตน ชื่อโดเมน
ประเภท .arpa, .com, .org, .edu และ .gov จะถูกกําหนดใหอยูภายใตการดูแลของ DARPA (The Defense
Advanced Research Project Agency) สวน .mil จะอยูภายใตการดูแลของ DDN (The Defense Data
Network) แตในทายที่สุด SRI ก็เปนผูเขามาดูแลชื่อโดเมนทั้งหมด ในฐานะของตัวแทนของทั้ง 2 หนวยงาน
ภายใตชื่อ SRI-NIC หรือ The NIC ตอมาเมื่อวันที่ 1 ตุลาคม ค.ศ.1991 หนาที่ในการดูแลการจดทะเบียนก็ไดถูก
โอนกลับมาอยูภายใตการดูแ ลของกระทรวงกลาโหมอีกครั้ง โดย DISA (Defense Information System Agency)
ไดมอบหมายให GSI (government Systems Inc.) เขามาทําหนาที่แทน SRI-NIC โดยในขณะนั้นมีโฮสต
ประมาณ 6 แสนเครื่อง และตอมาในวันที่ 1 มกราคม ค.ศ.1993 สถาบันวิทยาศาสตรแหงชาติ (NSF : National
Science Foundation) ก็ไดเปด Web SiteInterNIC เพื่อใหบริการขอมูลเกี่ยวกับอินเทอรเน็ต รวมทั้งการ
บริการจดชื่อ
โดเมนภายใตขอตกลงรวมกับเอกชน 3 ราย ชื่อ AT&T ในสวนระบบฐานขอมูล, General Atomics/CERFnet ใน
สวนของการบริการขอมูลขาวสารตางๆ และ Network Solutions Inc. (NSI) ในสวนของการใหบริการจด
ทะเบียนชื่อโดเมนประเภทกลุม .com, .net, .org และ .edu เปน เวลา 5 ป ซึ่งตอมาไดรับ การขยายสัญญาไปอีก
จนถึง 30 กันยายน ค.ศ.2000
แตเดิมนั้นคาใชจายในสวนของการดูและรักษาชื่อโดเมนไดรับเงินทุนสนับ สนุนจาก NSF แตตอมา
จํานวนผูใชอินเทอรเน็ตไดเพิ่มจํานวนขึ้นอยางมาก ดังนั้นในวันที่ 13 กันยายน ค.ศ.1995 NSI จึงไดรับอนุญาต
ใหเก็บคาบริการจดชื่อโดเมน 100 ดอลลาร สําหรับการจดและรักษาชื่อใน 2 ปแรก และปตอไปปละ 50 ดอลลาร
โดยมีขอตกลงวา 30% ของรายได จะตองถูกสงเขากองทุน Intellectual Infrastructure Fund (IIF) เพื่อนํามาใช
ในการปรับปรุงและพัฒนาเครือขาย ตอมากองทุนดังกลาวไดถูกยุบไป NSI จึงไดป รับลดคาบริการลงมาเหลือ 70

165
ดอลลาร ตอ 2 ปแรกและ 30 ดอลลารสําหรับปตอ ๆ ไป โดยในชวงนั้น NSI เปน เพียงหนวยงานเดียวที่มีสิท ธิ
ผูกขาดในการใหบริการรับจดทะเบียนชือ่ โดเมนในกลุม .com, .org, .net และ .edu
สิท ธิผูกขาดที่ NSI ไดรับ เปนปจจัยสําคัญอัน หนึ่ง ที่ทําใหเกิดกระแสตอตานในรูป แบบของการเสนอ
ทางเลือกอื่น ในลักษณะของกลุมโดเมนอื่น ทําให IANA (The Internet Assigned Number Authority) ซึ่งมี
หนาที่ในการดูแลการออกชื่อโดเมนในขณะนั้น มีความตื่น ตัวที่จะแกป ญหา ตอมาเพื่อแกไขปญหาดังกลาว
กระทรวงพาณิชยสหรัฐฯ และ NTIA (National Telecommunications and Information Administration) ได
ถายโอนหนาที่ความรับผิดชอบทั้งในสวนของการจัดสรรชื่อโดเมน เลขไอพี และการออกมาตรฐานโพรโตคอลที่
ใชในการรับสงขอมูลบนเครือขายที่ IANA เปนผูดูแลอยูภายใตสัญญารวมกับ รัฐบาลสหรัฐฯ ไปสูองคการกลาง
สากลที่ไมแสวงหาผลกําไรในชื่อ The Internet Corporation for Assinged Names and Nubmers หรือ
ICANN หลังจากที่ ICANN กอตั้งขึ้นมา ก็ไดมีการพิจารณาใหมีบริษัทรับ จดโดเมนเพิ่มเติมขึ้นมา จากเดิมที่มีแต
NSI ผูกขาดอยูเพียงเจาเดียว ทําใหในปจจุบัน สามารถจดโดเมนกับบริษัท ใดก็ได สําหรับคาใชจายขึ้น อยูกับ
บริษัทที่จด สวนใหญจะอยูระหวาง 15-35 ดอลลาร
สําหรับ ในป ค.ศ.2000 ที่ผานมา ICANN ไดมีการพิจาณาออกชื่อโดเมนใหมกลุม gTLD อีก 7 ประเภท คือ
.aero อุตสาหกรรมเกี่ยวกับ การบิน
.biz (Businesses) เกี่ยวกับธุรกิจ
.coop (Cooperatives) สหกรณ
.info ขอมูลทั่วๆ ไป
.museum เกี่ยวกับ พิพิธภัณฑ
.name สําหรับสวนบุคคล
.pro (Professional) สําหรับ วิชาชีพเฉพาะ เชน ทนายความ, นักบัญชี, นายแพทย ฯลฯ
Web Site Hosting

Web Site Hosting คือ เครื่องคอมพิวเตอรท ี่เชื่อมตอกับระบบอิน เทอรเน็ตตลอดเวลา ซึ่งเมื่อทํา
Web Site เสร็จเรียบรอยแลว จะตอง Upload ไฟลทั้งหมดไปไวท ี่ Web Site Hosting เพื่อใหผูคนสามารถเขา
ชมไดตลอดเวลา Web Site Hosting จะจัดตั้งเองก็ได แตไมเปนที่นิยมทํากัน เพราะจะเสียคาใชจายคอนขาง
สูง เนื่องดวย Web Site Hosting จะตองเปดตลอดเวลา และคูสายอินเทอรเน็ตที่เชื่อมตอมายังตัว Hosting
จะตองเปนคูสายความเร็วสูงที่เรียกวา lease line ซึ่งคาใชจายจะสูงมาก อยูท ี่ระดับแสนบาทขึ้นไปตอเดือน

166
ปจจุบ ันจึงนิยมใชบริการ Web Site Hosting กับบริษัทที่เปดใหเชา ซึ่งคาใชจายจะถูกกวาและสะดวกในการ
ดูแล สําหรับ Web Site Hosting สวนใหญจะแบงออกเปน 2 ประเภทใหญ ๆ ตามลักษณะของระบบปฏิบ ัติการ
(OS : Operating System) คือ
1. Web Site Hosting ที่ใชระบบ Windows NT หรือ Windows 2000
2. Web Site Hosting ที่ใชระบบ Unix หรือ Linux
เวลาจะเลือ กใชบ ริการ Web Site Hosting สวนมากแตละบริษัท ก็จะมีใหเลือกหลากหลายรูปแบบ
สวนประกอบหลัก ๆ ที่เปนปจจัยตอดานราคาคือ
1. ปริมาณพื้นที่เก็บ ขอมูล (Disk Space) ขึ้น อยูจํานวนขอมูลภายใน Web Site วามากหรือ
นอย สวนมากนิยมใชหนวยเปน Megabyte (MB)
2. จํานวนรายชื่ออีเมล (POP3 E-Mail Address) ก็คือชื่อที่อยูหนา @ ที่คุณสามารถจะใชได
(yourname@yourdomain.com) ปกติการจะเช็คอีเมลท ี่ทํางานแบบ POP3 จะตองเช็ค
ผานโปรแกรมรับสงอีเมล เชน Outlook Express จะไมสามารถเขาไปเช็คภายใน Web
Siteได ถาตองการใหเช็คภายใน Web Siteได จะตองหา Web Site Hosting ที่
สนับสนุน การทํางานที่เรียกวา Web Site Base E-Mail ดวย
3. ปริมาณการรับ สงขอมูล (Data Transfer) เปนการกําหนดปริมาณการเรียกใชขอมูลผาน
Web Site โดยปกติ Web Site Hosting ที่มีราคาต่ํา จะกําหนดใหปริมาณรับ สงขอมูล
นอยกวา Web Site Hostng ที่มีราคาสูงกวา เพื่อปองกันการเชา Web Site Hosting
ราคาถูก โดยที่มีคนเขามาชมเยอะ จะทําให Web Site อื่น ๆ ที่อยูภายใน Web Site
Hosting เดียวกัน โหลดขอมูลไดชา
สําหรับปจจัย 3 ขอนี้ เปนปจจัยใหญ ที่มีผลตอดานราคาของ Web Site Hosting สวนปจจัยดานอื่นๆ
ก็จะตองพิจารณาใหเหมาะสมกับการใชงาน แตสวนมากรายละเอียดปลีกยอยของแตละบริษัท มักจะ
ใกลเคียงกัน

167
การตรวจสอบและแกไขความผิดพลาดบนเอกสาร Web Site (Check and Fix Bugs)
กอนขั้นตอนการ Upload ควรมีการตรวจสอบภาพรวมของเอกสาร Web Site ที่เตรียมไวใหถูกตองเรียบรอยกอน
ทั้งนี้เพื่อเปน การปองกันปญหา Linkผิดพลาดหรือรูปภาพไมแสดงผล ซึ่งขั้น ตอนการตรวจสอบความผิดพลาดนี้
สามารถกระทําไดบนโปรแกรม Adobe Golive
วิธีการตรวจสอบและแกไขความผิดพลาดบนเอกสาร Web Site (How to Check and Fix Bugs)

1. ใชคําสั่ง File > New Site
2. ที่หนาตางใหม เลือก Single User แลวกดปุม Next

168
3. เลือก Options for Local Sites เปน Import from Folder แลวกดปุม Next
4. เลือกโฟลเดอรห ลักที่เก็บ เอกสาร Web Site ที่ปุม Browse ทางดานบน จะปรากฏไฟล index.html ขึ้นมาที่
ชองดานลางอัตโนมัติ

169
5. กดปุม Browse เพื่อ save ไฟลเอกสาร .site ซึ่งก็คือไฟลหลักของทั้งSiteงาน

170
6. จบขั้น ตอนโดยการกดปุม Finish
7. จากนั้น ไฟล .site ที่ save ไว จะถูกเปดขึ้น มา โดยที่ชอง Status จะแสดงสถานะของไฟลงาน ซึ่งที่สถานะ
ปกติจะเปนเครื่องหมายถูก หากพบจุดผิดพลาดภายในไฟลงาน จะปรากฏ icon รูปแมลง (Bug) สามารถแกไข
Bug ไดโดยการ Double Click เปดไฟลงานนั้นๆ ขึ้นมาแกไขไดท ันที

171
8. Clickที่ icon รูปแมลงบน Toolbar เพื่อคนหาจุดผิดพลาด ซึ่งสามารถสังเกตเห็นไดงายๆ จากสีแดงที่ป รากฏ
ดังตัวอยาง เกิดความผิดพลาดคือ รูปภาพไมแสดงผลเนื่องจากไมพบไฟลที่ชื่อ mount.jpg
9. แกไขไดงายๆ โดยการ Browse ไฟลใหม ซึ่งจากตัวอยางเกิดจากชื่อไฟลถูกเปลี่ยนแปลง

172
10. Save อีกครั้งเพื่อ Update Status
11. ที่ไฟล .site จะพบวาสภานะของไฟลงานไดรับการแกไขเปนปกติ
การตรวจสอบและแกไขขอผิดพลาดบนเอกสาร Web Site เปน ขั้นตอนที่ควรกระทํากอนการ Upload

ไฟลงานจริง
ทั้งนี้เพื่อปองกัน ขอผิดพลาดซึ่งอาจเกิดขึ้น บน Web Site Site ในภายหลัง นอกจากนี้ ไฟล .site ยังอํานวยความ
สะดวกอยางมากตอ การจัดระบบของ Web Site Site โดยรวม อาทิ การเปลี่ยนชื่อไฟล การโยกยายตําแหนง
ของไฟลงาน โดยไมมีผลกระทบกับ การแสดงผลจริง เนื่องจากจะมีการ Update ใหสอดคลองสัมพันธกันทั้ง
ระบบ

173
Upload
ความหมาย
“Upload” คือ การถายโอนชุดขอมูลสําเนาจากเครื่องคอมพิวเตอรไปยังเครื่องแมขาย (Server) มักจะ
ไดยินคูกับ คําวา “Download” ซึ่งมีความหมายในทางกลับกัน คือ การถายโอนชุดขอมูลสําเนาจากเครื่องแมขาย
ลงมายังเครื่องคอมพิวเตอร
ประโยชน
เพื่อนําเอกสาร Web Site เขาสูระบบอินเทอรเน็ต เอื้อประโยชนใหบ ุคคลทั่วไปสามารถเขาถึง Web
Site Site ที่จัดทําไวได
ประเภทของการ Upload
หลังจากเตรียมและตรวจสอบขอผิดพลาดของไฟลงานเรียบรอยแลว จะทําการ Upload ขอมูลขึ้น ไปยัง
Server โดยการ Upload นั้น มีอยู 2 ประเภทหลักๆ อัน ไดแก
1. การ Upload ผานระบบ FTP (File Transfer Protocol)
2. การ Upload ผานระบบ HTTP (Hyper Text Transfer Protocol)
วิธีการ Upload ผานระบบ FTP ดวยโปรแกรม WS_FTP Pro

1. New Site ขึ้นมาใหม โดยการกดที่ปุม New Site

174
2. ทีห่ นาตางใหม ตั้งชื่อ Site ตามตองการ พรอมทั้งกรอก Host Name ซึ่งในที่น ี้เปน การ Upload ขึ้นไปที่พื้นที่
ของ Web Site โรงเรียน จึงกรอกเปน ftp.netdesign.ac.th (รูปแบบคือ ftp. ตามดวยชื่อ Web Site Site )
จากนั้น กดปุม Finish

175
3. กรอก User ID และ Password ที่ไดรับ จากทางโรงเรียนใหถูกตอง แลวกด Connect
4. เมื่อ Connect ไดแลว จะมีขอความ "Transfer Complete" ขึ้นมาที่สวน Status หนาตางจะแบงเปน 2 ฝง
ทางซายคือ Directory ภายในเครื่องของ(Local System) สวนทางขวา คือ Directory บน Server(Remote Site)
วิธีการ Upload คือ Double Click เขาไปในโฟลเดอรที่เก็บ ขอมูลของ Web Site Site ไวในเครื่องทางดานซาย
ดังภาพ

176

177
5. เมื่อเขาถึงโฟลเดอรท ี่ตองการแลว สามารถเริ่มตน Upload ไดโดยClickเลือกที่ชื่อไฟลห รือโฟลเดอรที่ตองการ

แลวกดปุม --> เพื่อ Upload โดยสามารถเลือก Upload ไดห ลายๆ ไฟลพรอมกัน

178
6. เมื่อเสร็จสิ้นการ Upload จะพบวารายชื่อไฟลและโฟลเดอรจะถูกทําสําเนาและถายโอนมาที่ Remote Site

179
7. กดปุม Close ดานลาง หลังจากใชงานเสร็จเรียบรอยแลว จากนั้นสามารถปดโปรแกรม โดยกดที่ปุม Exit

180
วิธีการ Upload ผานระบบ HTTP ( Web Site -Based)
1. เขาไปที่หนาแรกของ Web Site โรงเรียน เพื่อ log-in เขาสูหนา Upload

2. เริ่มตนจากการ Browse เลือกไฟลเอกสาร Web Site (.html) กอน
3. เมื่อเลือกไฟลไดตามตองการแลว กดปุม Upload ดานลาง
4. เมื่อ Upload เรียบรอย รายชื่อไฟลจะปรากฏที่ดานบน

181
5. การ Upload รูปภาพ จะตองสรางโฟลเดอรภาพขึ้นมาใหมกอน โดยกรอกชื่อโฟลเดอรภาพ(ตามที่ตั้งไวบน
เครื่อง) แลวกดปุม “สราง Folder”
6. Clickเขาไปที่ Folder ภาพ(image) เพื่อ Upload ไฟลภาพดานใน
7. Browse ไฟลภาพและ Upload ในลักษณะเดียวกันกับไฟลเอกสาร .html ในขั้นตอนที่ 2 และ 3

182
8. รายชื่อไฟลภาพจะปรากฏที่ดานบน หากตองการออกจากโฟลเดอรภาพ Clickที่ “ออกจาก Folder”
9. ออกจากระบบหนา Upload โดยการClickที่ Log Off
หลังจากทําการ Upload ไฟลงานทั้งหมดเสร็จเรียบรอยแลว สามารถเขาไปชมผลงาน Web Site Site

ไดท ี่ http://www.netdesign.ac.th/member/รหัสนักเรียน ทั้งนี้ สามารถจะ Update หนา Web Site เพิ่มเติมได
อีกตามความตองการ โดยวิธีการ Upload ไฟลงานที่แกไขเพิ่มเติมแลวขึ้น ไปทับไฟลเดิมบน Server
ผูแตง อ. รชิษฐ บุษยาสกุล

Email :: tum@spaze.net
อ.วรรณวนัช ฤกษลัภนะนนท
Email :: yok@spaze.net

183
บทที่ 10
เทคนิคการประชาสัมพันธ Web และตรวจสอบผูเยี่ยมชม Web
• การประชาสัมพันธ Web ผาน Search Engine
• การนับ จํานวนและตรวจสอบสถิติผูเขาชม Web (Counter and Statistics)
• Cascading Style Sheet
Search Engine
Search Engine คืออะไร
Search Engine สามารถแบงออกเปน 2 ระบบดวยกัน คือ

1. Search Engine ระบบ Directory
Search Engine ระบบนี้จะจัดแบงรายชื่อ Web Site ตางๆ ไวแยกตามหมวดหมู การคนหารายชื่อ
Web Site User จะตองเลือกเขาไปตามหมวดหมูหลักกอน แลวจึงเลือกหมวดหมูยอยๆ ใน
หมวดหมูห ลักอีกที ตัวอยางการคนหาเชน ตองการคนหารายชื่อของโรงเรียนสอนภาษาที่ซิดนีย
ออสเตรเลีย
2. Search Engine ระบบ Robot

Search Engine ระบบนี้จะคนหารายชือ่ Web Site โดยการใชโปรแกรมอัตโนมัติท ี่เรียกวา
“Spider” หรือ “Robot” เขามาเก็บ ขอมูลตาม Source ของเว็บตางๆ
วิธีการคนหาขอมูลของ Web Site ใน Search Engine

เราสามารถคนหา Web Site ที่เราตองการไดดวยการกรอก Keyword ที่เกี่ยวของแลวทําการคนหา
(search)
ตัวอยางเชน หากเราตองการคนหาขอมูลเกี่ยวกับ การเรียนภาษาที่ Sydney

184
รูปที่ 10.1 วิธีการคน หาขอมูลของ Web Site ใน Search Engine
วิธีการลงทะเบียนเพิ่มรายชื่อ Web Site ใน Search Engine

กระบวนการขั้นสุดทาย (Post-Production) ในการผลิต Web Site ก็คือ ขั้นตอนของการประชาสัมพัน ธ
Web Site ของเราใหเปนที่รูจัก สําหรับ การประชาสัมพันธ Web Site มีวิธีการหลากหลายรูปแบบซึ่งในบทนี้จะ
ขอแนะนําวิธีการประชาสัมพันธ Web Site โดยผานระบบ Search Engine ซึ่งเปนอีกวิธีการหนึ่งที่จะทําให User
สามารถคน หา Web Site ของเราได
วิธีท ี่จะทําให User เขาไปคนหารายชื่อ Web Site ใน Search Engine แลวปรากฏรายชื่อ Web Site
ของเราขึ้นมาไดนั้น สิ่งที่เราจะตองทํา ไดแก
1. เตรียม Keyword, Title และ Description ที่เหมาะสมซึ่งอาจเปนคําที่เกี่ยวของกับ Web Site ของเรา
โดยวิธีการเพิม่ Keyword, Title และ Description นั้นจะตองกลับไปเตรียมที่โปรแกรม Adobe Golive
ในสวนของ Toggle Head Section และนําเอาอุปกรณใน Palettes Object สวนของ Tab Head มา
วาง 2 ตัว ไดแก
• อุป กรณ Keyword เพื่อพิมพ Keyword ลงไปซึ่งสามารถใส Keyword ไดมากเทาทีต่ องการ
• อุป กรณ Meta วางลงไปในสวนของ Toggle Head Section เพื่อพิมพคําอธิบายเกี่ยวกับ
Web Site ซึ่งควรพิมพคําอธิบายที่กระชับ และไมควรยาวจนเกินไปนัก
2. เขาไปที่เว็บ ของ Search Engine เพื่อทําการลงทะเบียนเพิ่มรายชื่อ Web Site ของเราเขาไปเก็บเอาไว
ในระบบฐานขอมูลของตัว Search Engine ซึ่งขั้น ตอนการลงทะเบียนเพิ่มรายชื่อใน Search Engine มี
ดังนี้
2.1 Search Engine ระบบ Directory
Search Engine ระบบ Directory ในปจจุบันที่ไดรับความนิยมมีอยูเพียง 1 เว็บไซด คือ
www.yahoo.com ซึ่งขั้นตอนในการลงทะเบียนเพิ่มรายชื่อเว็บ ไซดของเราเขาไปในระบบ

185
ฐานขอมูลของ Search Engine ระบบ Directory นั้นขั้นตอนแรกจะตองทําการเลือกหมวดหมูที่มี
ความเกี่ยวของกับเนื้อหาของเว็บไซดของเราเสียกอนทีC่ ategory
• เริ่มตน โดยการเลือกหมวดใหญกอนที่ Web Site Directory แลวคอยเลือกเขาไปใน
หมวดยอยๆ ของ Category
• เมื่อเลือกหมวดที่ตองการเพิ่มรายชื่อ Web Site ไดตรงตามความตองการแลวให
ลงทะเบียนเพิ่มรายชื่อ Web Site ของเราเขาไปโดย Click ที่ Suggest a site
• จะมีรูปแบบการลงทะเบียนเพิ่มรายชื่อ Web Site ใหเราเลือก 2 รูปแบบดวยกัน คือ
แบบ Express และ แบบ Standard ถาเลือกแบบ Express จะเปนการเพิ่มรายชื่อ Web
Site ที่ตองเสียคาใชจาย สวนแบบ Standard สามารถลงทะเบียนเพิ่มรายชื่อ Web Site
ไดฟรีแตไมรับรองวาจะนํารายชื่อ Web Site ของเราเขาระบบฐานขอมูลเมื่อไหร
• เมื่อเลือกรูปแบบการลงทะเบียนเพิ่มรายชื่อ Web Site ไดแลว หลังจากนั้น ใหเขาไป
กรอกรายละเอียดตามขั้นตอนของระบบตอไป
2.2 Search Engine ระบบ Robot

ตัวอยางรายชื่อของ Search Engine ระบบ Robot ที่ไดรับความนิยมจากผูใช ไดแก เปน ตน
หลังจากที่เตรียม Keyword และ Description ที่แท็บ Toggle Head Section เรียบรอยและทํา
การ Upload ไฟลงานขึ้น ไปบน Server แลว
Tip & Trick
ตัวอยางรายชื่อของ Search Engine ระบบ Robot ที่ไดรับความนิยมจากผูใช ไดแก google.com,

altavista.com, amazon.com, metacrowler.com, hotbot.com, go.com, lycos.com, sanook.com,
siamguru.com, infoseek.com, thaifind.com
1.การเขีย นคําสั่ง META tags

<META> tags คือ คําสั่งในภาษา html เพื่อ ชวยในการคน หา และจัดลําดับ ความสําคัญของ Web Site โดย
Search Engine ทั้งหมดจะคน หาใน META tags ภายใน Web Site ของทาน ตัวอยางสําหรับ การเขียนคําสั่ง
<META> tags จะมีลักษณะดังตอไปนี้
<html>
<head>
<title>NetDesign : Spin Your Way to Success</title>
<meta name="keywords" content = "webdesign training,webdesign school,e-commerce, web
design, web graphic, webdesigner, webcontest, netdesign, netdesigncenter, designcenter,
thaidesign, thai designer, thaiwebmaster, webmaster ">
<meta name="description" content = " NetDesign (Under the Pratonage of Ministry of Education)">
</head>
186
Tip & Trick
META tags จะตอ งถูกใสในระหวางคําสั่ง <HEAD></HEAD> ซึ่งเปน สวนบนสุดของเอกสาร html

เทานั้น
Meta Tag “description” คือ คําอธิบ ายหรือ รายละเอียดโดยยอเกี่ยวกับ Web Site ของทาน ควรจะ
เปน ขอความภาษาอังกฤษ หรือ ตัวเลข ที่มีความยาวไมเกิน 1 บรรทัด หรือ ประมาณ 1-80 ตัวอักษร
Meta Tag “keywords” คือ คําจํากัดความสั้นๆ ที่ทานคิดวาผูที่จะเขามาเยี่ยมชม Web Site ของทาน
จะสามารถหา Web Site ของทานเจอ เชน web site เกี่ยวกับ ดอกไม ผูท ี่ตอ งการจะคน หา web site เหลานี้ก็
มักจะพิมพคําวา “ flower “ ชองคน หาของ search engine ดังนั้น ทานจะตองคาดเดาวา ผูที่จะเขามาเยี่ยมชม
web site ของทานจะใชคําจํากัดความคําใดเปน ขอความหลักในการคนหา การพิมพคําจํากัดความเหลานี้ ทาน
จะตองแยกคําจํากัดความแตละคําโดยการใชเรื่องหมายลูกน้ํา ( , ) ตามที่เห็นดังตัวอยางขางบน ควรมีความยาว
ไมเกิน 255 ตัวอักษร)
Tip & Trick
ขอควรระวัง : อยาใช META tags “ keyword ” คําเดีย วกันซ้ําเกิน 5 ครั้งใน 1 หนา

Search Engine บางแหง Lycos จะแบน Web Site ของทัน ที เมื่อ ตรวจสอบพบวา Web Pageนั้น มี
ขอความซ้ําคําเดิมๆเพื่อปรับการจัดอัน ดับ หรือตําแหนง ( Search Ranking )
2. Page Title
“Title” คือ หัวเรื่องของ Web Site สามารถใชถอยคําที่กระชับ ไดใจความ และสามารถดึงความสนใจ
ของผูเยี่ยมชม Web Site เพราะเมื่อ รายชื่อ Web Site ของไปปรากฏอยูในสารบัญ ของ Search Engine Title ที่
เขียนไดน าสนใจจะสามารถทําใหผูคนหาเลือกที่จะ Click เพื่อเขาชม Web Site นั้นๆ ไดมากกวา Web Site บาง
แหงเชน Infoseek จะใช title ของเปน สิ่งเริ่ม แรกสําหรับ กระบวนการคน หา เพราะฉะนั้น ควรตั้งชื่อ Title โดย
พยายามคิดเกี่ยวกับ สิ่งซึ่งจะทําใหผูเขาชม Web Site สามารถหา Web Site ของเจอโดยงาย
3.เนื้อหาของหนาเว็บ (Text Content)

Text Content คือ ขอความที่เปน ตัวพิมพซึ่งปรากฏอยูในหนา Web นั้น ๆ Search engine บางตัวเชน
Excite จะไมอาน META tag แตจะคน หาขอความภายในเนื้อ หาของ Web Site ถาใชตัวหนังสือ แบบรูป ภาพ
(Graphic Text) ก็จะไมไดรับ การจัดอันดับจาก Search Engine
การใส META tag ดวยโปรแกรม Adobe Golive 6

โปรแกรม Adobe Golive 6 สามารถชวยอํานวยความสะดวกในการเขียนคําสั่ง Meta Tags โดยผูออกแบบไมมี
ความจําเปน ตองไปยุงเกี่ยวกับ Source code โดยมีขั้น ตอนการทํางานดังนี้
187
1.อุป กรณที่ใชในการใส Meta Tags ใหห นา Web Page อยูใน Palette Object ในกลุม เครื่อ งมือ
Head มีอยูดวยกัน 2 ตัวคือ อุปกรณ keywords (ตัวที่ 3 จากซาย) และ อุปกรณ Meta tags (ตัวที่ 5 จากซาย)
เครื่องมือ META tag
เครื่องมือ Keywords
รูปที่ 10.2 อุปกรณ Keywords และ Meta Tags

188
2. เปดหนาเอกสารที่ตองการจะใส Meta Tags ซึ่งโดยมากจะนิยมใส Tags นี้ในหนา Home Page
(Index.html) เนื่องจากเปนหนาแรกที่ตองการใหผูเยี่ยมชมคนพบ และ Click บริเวณ ลูกศรหัวมุมบน
ดานซาย
( Toggle Head Selection ) เพื่อ เปดสวนของ Head และจับ อุป กรณ Keywords (รูป กุญแจ) และ อุป กรณ
Meta ไปวางในชองวางดังกลาว
3. Click เลือ กที่ อุป กรณ Keywords ที่ใสลงไปใน Toggle Head Selection และไปเลือ กที่ Palette
Inspector เพื่อระบุขอ ความที่เ ปน คําจํากัดความสั้น ๆของ Web Site ของ โดยกรอกขอความลงไปในชองดาน
ลางสุด และ กด Enter เพื่อใสขอความถัดไป ควรใสขอความไมเกิน 25 คํา เพราะ search engine บางแหงเชน
yahoo จะไมรับขอความที่มีความยาวมากเกิน ไป
4. Click เลือกที่ อุปกรณ Meta Selection และไปเลือกที่ Palette Inspector เพื่อระบุขอความที่เปนคําจํากัดโดย

ยอ ของ Web Site และใหพิมพบ ริเ วณชองตรงกลางวา Description เพื่อ บงบอกให Search Engine ทราบถึง
ลักษณะของ Meta Tags ตัวนี้วาเปน Tag ประเภทคําอธิบาย

189
5. โปรแกรม Adobe Golive จะทําการแปลงคําสั่งใหกลายเปน Meta Tags Source Code ใหอัตโนมัติ จะตอ ง
Upload หนาเอกสาร.html นี้ขึ้น ไปบน Server อีกครั้งหลังจากไดแ กไขคําสั่ง Meta Tags นี้แ ลว เพื่อให Search
Engine ไดเขามาคนหาตอไป
การทํางานของ Search Engine :

Altavista.com จะคนหาสําหรับ Page Title และ Description ใน <META> เพื่อใหตรงกับ การคน หาคียเ วิรด
ประมาณ 1 เดือนหลังจากการ Submit ของ ,มันจะยอนกลับ มาเยี่ยมชม Web Site ของเพื่อหาหนาอื่นๆที่ถูกเพิ่ม
เขาไป Altavista จะใชระยะเวลาในการดําเนิน การ 1-3 วัน
Excite.com จะคน หาจากคํา ( Text Content ) ในหนาเว็บ ของ ทําใหแนใจวาหนาของมีคียเวิรดซึ่งผูเขาชม

Web Site จะใชคน หาสําหรับเว็บ ของ Excite จะตาม link บนหนาเว็บ เพื่อจะหาหนาอื่น ๆ เพื่อเก็บลงฐานขอ มูล
ตอไป Excite จะใชระยะเวลาในการดําเนิน การ 4-6 สัปดาห
HotBot.com จะทําการคนหา Web Page แตละหนาซึ่งมีคียเวิรดใน <META> จะถูกจัดอันดับใหสูงกวาหนาซึ่ง

ไมมี <META>มัน จะคน หาทั้งใน META tags และ page title เพื่อ ทําใหแ นใจวาคียเวิรดมีอ ยูในทั้ง2ที่ คํา
ธรรมดาบางคําเช น ”the”, “web”,” A” หรื อแมแ ต “HTML” จะถู กยกเวน ในการคน หา ถาหนา ของมีคํา
เฉพาะเจาะจงจะไดถูกจัดอันดับสูงขึ้น จะใชระยะเวลาในการดําเนินการ 4-6 สัป ดาห Hotbot จะใชร ะยะเวลาใน
การดําเนินการ 3-5 สัปดาห
Infoseek .com จะคนหาหา Page Titles ที่ตรงกับ คียเวิรด Infoseek จะทําการจัดเก็บขอมูล Web Site เพื่อการ
คน หาลงฐานขอมูลโดยตรงทันทีที่มีการแจงชื่อไปยัง Infoseek สามารถ Update Record ไดบ อยมากกวา 1ครั้ง
ใน 24 ชั่วโมง
Yahoo.com จะเก็บเว็บของในหมวดหมู รายชื่อของ Web Site อาจจะถูกจัดเก็บ ไดม ากกวา 1 หมวดหมู ขึ้น อยู
กับ เนื้อ หาของวามีความสัม พัน ธกับ หมวดหมูใดบาง ขั้น ตอนการหาจะตรงกับ Page Title และ description
อาจจะจําเปน ตอง Submit Web Site ของบอยครั้งกอนจะไดรับการจัดเขาไปอยูใน List Yahoo จะใชระยะเวลา
ในการดําเนิน การ 4-6 สัป ดาห
190
Counter and Statistics
ขั้น ตอนหลังจากการผลิต Web Site นอกจากการประชาสัมพัน ธ Web Site ใหเปนที่รูจักแลว จําเปน
อยางยิ่งที่จะตองมีการเก็บขอมูลของผูท ี่เขามาเยี่ยมชม Web Site ของเรา เนื่องจากขอมูลหรือการเก็บสถิติ
เหลานี้จะเปนประโยชนอยางยิง่ ตอผูท ี่มีหนาที่ออกแบบ Web Site เพื่อใชเปน ขอมูลพื้นฐานในการวิเคราะหและ
ประเมิน ผล ปรับปรุง Web Site ใหมีประสิทธิภาพตรงกับความตองการของ User ใหมากที่สุด ตัวอยางรายชื่อ
Web Site ที่ใหบริการ Free Counter ไดแก
Thecounter.com, sitemeter.com, cybercounter.net, freewebcounter.net, truehits.net
วิธีการนํา Counter มาติดตั้งใน Web Site

ในที่นี้ขอยกตัวอยางการนํา Counter ของ www.sitemeter.com มาติดตั้งในเว็บ ของเรา
• ขั้น ตอนแรก ใหเขาไปที่ www.sitemeter.com เลือกไปที่หนา Site Meter > Home หาคําวา Site up
for a free Site Meter Click เลือก Site up
• ใหท ําตามขั้น ตอนที่กําหนดมาให รวมถึงการกรอกรายละเอียดตางๆ ที่เกี่ยวของกับ Web Site ของเรา
เชน URL, Site Name, Code Name, Email เปนตน
• เมื่อทําตามขั้นตอนจนมาถึงหนาที่แสดงขอมูลของเรา ใหตรวจสอบดูวาถูกตองหรือไม ถามีขอมูลสวน
ไหนผิดพลาดใหยอนกลับไปแกไขขอมูลใหถูกตองกอน และเมื่อตรวจสอบแลวขอมูลทุกอยางถูกตองก็
ให Click ปุม Next เพื่อเปนการยืน ยัน
• เมื่อปรากฏหนา “The signup for your Site Meter counter is complete !” ก็เปน อัน เสร็จขั้น ตอน
ของการสมัครขอใช Free Counter ตอจากนั้นให Click ที่ปุม Manager ที่เมนูบ ารดานบน เลือก Pass
Word เพื่อทําการเปลี่ยนแปลง Pass Word
• ขั้น ตอนตอมาในสวนของ Manager ใหเลือกที่ HTML Code เลือกโปรแกรมที่ใชสราง Web Site
(Adobe Golive) เมื่อปรากฏหนา Adobe’ Golive Installation Instructions ขึ้นมาจะมี HTML Code
ใหเลือกใช 2 แบบดวยกัน คือ JavaScipt HTML กับ Regular HTML สามารถเลือกใชแบบใดแบบ
หนึ่งก็ได โดยทําการ Click เลือกที่ HTML Code ทั้งหมดแลว Copy เพื่อนํามาวางในโปรแกรม Golive
Cascading Style Sheet

Cascading Style Sheet (CSS) คือ กลุมคําสั่งที่ถูกนํามาชวยเสริมสมบัติของ HTML เพื่อใหเรา
สามารถจัดรูปแบบขอความและจัดองคป ระกอบหรือจะทําการตกแตงเว็บ เพจไดอยางมีประสิทธิภาพมากขึ้น
เชน เราสามารถใชคําสั่ง CSS เพื่อกําหนดสมบัติของ จุดเชื่อมโยง ใหมีเสน ใต แลวมีการกระพริบไดเมื่อนํา
Mouse เขามาแตะบริเวณ จุดเชื่อมโยงนั้น ๆ หรือจะทําการตกแตงแบบฟอรมใหมีสีสัน หรือจะใหมี การใสสีท ี่
แถบเลื่อน (Scrollbar) เปนตน
Style Sheet เปน อุป กรณที่ใชในการตกแตงแตจะทําการตกแตงไดน ั้นจะตองมีการระบุวาจะนําสมบัติท ี่
ไดท ีการตกแตงนั้น ๆ ใสเขาไปกับ ตัวไหนในหนางานก็จะตองตั้งชื่อใหสอดคลองกับ Tag ในภาษา HTML ดวย
อยางเชน

191
การกําหนดคาของตัวอักษรที่เปน Link (Text Link)
ตัว “a” ในภาษา HTMLจะหมายถึง การทํา Link ซึ่งจะเขียนเปน <a href = “___” >ขอความที่จะใหเปน
Link </a> ดังนั้นหากตองการกําหนดสีใหกับ Text Link หรือไมตองการให Text Link มีเสน ใต สามารถกําหนด
ไดดวยคําสั่ง CSS ซึ่งทําไดโดย
• เปดไฟลงานหนาที่ตองการขึ้น มา เลือกทํางานที่แท็บ Layout
• Click ที่ไอคอน (รูปขั้นบันได) Open CSS Editor จะเปดหนาตางในสวนของคําสั่ง CSS ขึ้นมา
• Click Mouse ขวา เลือกคําสั่ง New Style > a
• กําหนดคาตาง ๆ ที่ Inspector ในสวนของ Font ไดตามตองการ
และถาตองการทําให Text Link เมื่อ Mouse Over แลวเปลี่ยนสี หรือมีเสนใตสามารถกําหนดไดโดย
• Click ที่ไอคอน (รูปขั้นบันได) Open CSS Editor จะเปดหนาตางในสวนของคําสั่ง CSS ขึ้นมา
• Click Mouse ขวา เลือกคําสั่ง New Style > a:hover
• กําหนดคาตาง ๆ ที่ Inspector ในสวนของ Font ไดตามตองการ
การกําหนดขนาดตัวอักษรไมใหมีการขยาย (Fix Font)

จะตองมีการ New Class Style เพื่อทําการสราง Class ขึ้นมากอน ซึ่ง Class จะตองมีจุดนําหนาเสมอ
แลวทําการปรับแตงสมบัติ โดยกําหนด size ,font ที่ตองการเสร็จแลว เวลาเรียกใชงาน จะตองใชงาน Palette
CSS ดวยโดยทําการปาดดํา (highlight) ที่ตัวหนังสือแลวก็ท ําการ Span เขาไปขอความนั้น ๆ ก็จะถูกไมสามารถ
เปลี่ยนแปลงขนาดได
การกําหนดสีใหกับ Scrollbar
New Style > body
Scrollbar-arrow-color
Scrollbar-base-color
Scrollbar-track-color


Pro Webdesign

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Pro Webdesign

Uploaded by

Copyright:

Available Formats

PROFESSIONAL WEB DESIGNER COURSE

ถาจะพูดถึงการสื่อสารในรูปแบบใหม ที่สามารถสื่อสารกัน ไดอยางรวดเร็วและมีราคาถูกที่สุด ก็คงหนี

อิน เทอรเน็ตคือเครือขายของระบบคอมพิวเตอรขนาดตาง ๆ เชื่อมตอเขาหากันจนเปน ระบบเครือขาย

NetDesign :: Internet and Design Institute :: www.NetDesign.ac.th

ในอินเทอรเน็ตมีบ ริการตาง ๆ ที่มีความแตกตางกัน ตามจุดประสงคการใชงานของผูใช เชน ความ

E-mail ยอมาจาก Electronic Mail E-mail จึงเปนบริการในอิน เทอรเน็ตที่ไดรับความนิยมมากที่สุด

เปนบริการที่ไดรบั ความนิยมมากพอสมควร เนื่องจากลักษณะพิเศษ คือ การแบงหัวขอความสนใจใน

การโอนถายขอ มูลระหวางเครื่อง (File Transfer Protocol : FTP)

FTP เปนบริการอีกอยางหนึง่ ที่มีความจําเปนมากในระบบอินเทอรเน็ต เนื่องจากเมื่อระบบ World

การสนทนาผานระบบออนไลน (Internet Relay Chat : IRC)

IRC คือหองสนทนาแบบออนไลน ซึ่งแบงเปนหองยอยใหผูใช log in เขามาเพื่อพูดคุยกันในเรื่องตาง ๆ

World Wide Web

เปนบริการที่ไดรับความนิยมมากที่สุดรองจากการใช E-mail เนื่องจากเปน ชองทางการเขาถึงขอมูลที่

ประวัติของ World Wide Web (Web History)

NetDesign :: Internet and Design Institute :: www.NetDesign.ac.th

ป 1992 CERN ไดพัฒนา Web อยางตอเนื่อง และเริ่มแพรห ลายในหมูน ักวิจัย โดยมีจํานวน

ป 1994 บริษัท ตาง ๆ เริ่มโดดเขามารวมในการพัฒนา Browser ตาง ๆ โดยมีการเปดตัว

ป 1995 การเติบโตของ Web ยังคงรวดเร็วและตอเนื่องโดยมีจุดเปลี่ยนแปลงอยบูท ี่

NetDesign :: Internet and Design Institute :: www.NetDesign.ac.th

Web Site สามารถใชทําอะไรไดบาง

โดยหลักการแลว WWW ไดถูกออกแบบมาใหเปน เอกสารอิเล็กทรอนิกสซึ่งปจจุบัน ถูกเรียกยอ ๆ วา

เอกสารประชาสัมพัน ธ (Catalog / Brochure)

เอกสารประชาสัมพัน ธ ถือไดวาเปน เอกสารที่องคกรประเภทขายตรง ซุปเปอรมาเก็ต หางสรรพสินคา

จะเห็นไดวา ธุรกิจหลายประเภทในปจจุบันนี้เชน ขายรถยนต โทรศัพทเคลื่อนที่ ของเลน ภาพวาด ฯลฯ

NetDesign :: Internet and Design Institute :: www.NetDesign.ac.th

รูปที่ 1.1 หองแสดงสินคาของ http://www.hondacars.com

อิน เทอรเน็ตถือไดวาเปน สังคมของผูใชคอมพิวเตอรท ี่ใหญท ี่สุดโลก ซึ่งมี Web Site จํานวนมากที่ถูก

รูปที่ 1.2 การใหบ ริการตาง ๆ บน Web Site

NetDesign :: Internet and Design Institute :: www.NetDesign.ac.th

ดวยเทคโนโลยีของอินเทอรเน็ตที่กอกําเนิดมาจากการศึกษา ในขั้นเริ่มตนของ WWW ความสามารถ

รูปที่ 1.3 การศึกษาทางไกล http://www.thai2learn.com

NetDesign :: Internet and Design Institute :: www.NetDesign.ac.th

ธุรกิจออนไลน http://www.amazon.com ธุรกิจออนไลน http://www.bn.com

ความสําคัญของการออกแบบ Web Site

Web Site เปนสื่อที่อยูในความควบคุมของผูใชโดยสมบูรณ เพราะผูใชมีโอกาสที่จะเลือก Click

สําหรับ Web ทางธุรกิจยิ่งจําเปน ตองใหความสําคัญกับการออกแบบมากขึ้น เนื่องจากพฤติกรรมการ

การออกแบบ Web Site ที่ดี

กอนอื่นตองขอทําความเขาใจใหตรงกันกอนวา การออกแบบ Web Site นั้นไมไดห มายถึงลักษณะนา

องคประกอบของการออกแบบ Web Site อยางมีประสิทธิภาพ

NetDesign :: Internet and Design Institute :: www.NetDesign.ac.th

รูปที่ 1.5 Web Site ของ http://www.ibm.com

สามารถสรางความสม่ําเสมอใหกับ Web Site นั้นได โดยใชรูปแบบเดียวกันตลอดทั้ง Web Site

การออกแบบตองคํานึงถึงลักษณะขององคกร เนื่องจากรูป แบบของ Web Site สามารถสะทอนถึงเอกลักษณ

NetDesign :: Internet and Design Institute :: www.NetDesign.ac.th

เนื้อหาถือเปนสิ่งที่สําคัญที่สุดใน Web Site ดังนั้น ใน Web Site ควรจัดเตรียมเนื้อ หาและขอมูลที่ผูใช

ระบบ Navigationที่ใชงานงาย (User-Friendly-Navigation)

ระบบ Navigation เปน องคประกอบที่สําคัญมากของ Web Site จะออกแบบใหผูใชเขาใจไดงายและ

มีลักษณะที่นาสนใจ (Visual Appeal)

เปน เรื่องที่ยากที่จะตัดสินใจวา ลักษณะหนาตาของ Web Site แหงใดแหงหนึ่งนั้นนาสนใจหรือไม

การใชงานไดอ ยางไมจํากัด (Compatible)

ในการออกแบบ Web Site นั้น จะตองออกแบบใหคนสวนใหญเขาถึงไดมากที่สุด โดยไมมีการบังคับ

คุณภาพการออกแบบ (Design Stability)

ถาอยากใหผูใชรูสึกวา Web ของมีคุณภาพถูกตอง และเชื่อถือได ก็ควรใหความสําคัญกับการออกแบบ

NetDesign :: Internet and Design Institute :: www.NetDesign.ac.th

ระบบการใชงานที่ถูกตอ ง (Functional Stability)

ระบบการทํางานตาง ๆ ใน Web Site จะตองมีความแนนอนและทําหนาที่ไดอยางถูกตอง ตัวอยางเชน

โปรแกรมที่นิยมใชในการออกแบบ Web Site

โปรแกรมที่น ิยมใชในการออกแบบหนาWebใหมีความสวยงามนั้น มีอยูมากมายหลายโปรแกรม แต

รูป แบบของไฟล Graphic บน Web Site

รูป แบบ Graphic หมายถึง รูป แบบมาตรฐานของรูปภาพซึ่งไดรับการรับรองความเปนมาตรฐานของแต

GIF (Graphic Interchange Format)

เปนรูปแบบของไฟลรูปภาพทีถ่ ูกพัฒนาโดยบริษัท CompuServe ในชวง 1980s และปรับปรุงเรื่อยมา

NetDesign :: Internet and Design Institute :: www.NetDesign.ac.th

การบีบอัดไฟล GIF (GIF File Compression)