สอนวิธีการเขียนเว็บอย่างละเอียด 101...

PROFESSIONAL WEB DESIGNER COURSE

NetDesign :: Internet and Design Institute :: www.NetDesign.ac.th Fortune Branch :: Tel. 02-642-1100 , Major Branch :: Tel. 02-930-1100

1

บทที่ 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 ที่แยกตัวออกมา เครือขายน้ีใชสําหรับเชื่อมตอเครือขายของมหาวิทยาลัย และ

ศูนยวิจัยตาง ๆ เขาดวยกันทําใหเกิดการเพ่ิมปริมาณเครือขาย และการติดตอส่ือสารในรูปแบบตาง ๆ เชน



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 ที่ใหการบริการแบบกระดานขาวอิเล็กทรอนิกส เกิดขึ้น

http://www.hmtmail.com/�

http://www.hmtmail.com/�



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 จะตองสามารถแสดงผลกับขอมูลหลายรูปแบบได

http://www.pantip.com/�



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 ทําให

http://www.w3c.org/�



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

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

สรางขึ้นเพื่อเปนศูนยกลางในการติดตอส่ือสารของคนท้ังโลก ไมวาจะเปนการใหบริการทางดานการคนหาขอมูล

ที่ตองการ (Search Engine), การใหบริการดานอีเมล , การใหบริการพื้นที่สําหรับการสราง Web Site หรือการ

ใหบริการทางดานหองสนทนา (Chat Room)

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

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



7

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

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

ภาพวีดีโอและเสียงตาง ๆ สามารถถูกสงผานระบบอินเทอรเน็ตไปถึงผูเขาชม Web Site ไดอยางงายดาย ดังนั้น

การศึกษาระยะไกล หรือที่เรียกอีกอยางหนึ่งในปจจุบันวา E - Learning จึงเปนส่ิงที่เปนไปไดและกําลัง

แพรหลายในปจจุบัน

ธุรกิจออนไลน (Online Business) นับเปนการปฏิวัติคร้ังสําคัญในการทําการคาของมนุษยชาติเม่ือรูปแบบการคาที่เคยทํากันมาต้ังแต

อดีต ถูกแทนที่ดวยระบบคอมพิวเตอร ซึ่งกอนหนาน้ีไมเคยมีใครคาดคิดมากอนวา การคาขายโดยผานระบบ

คอมพิวเตอรจะทําไดจริงโดยไมจําเปนจะตองมีคนมาเปนพนักงานขาย บริษัทที่เปนผูบุกเบิกการคาผานระบบ

อินเทอรเน็ต และประสบความสําเร็จท่ีคนทั่วโลกรูจักก็คือ Amazon.com นั้นเอง หลังจากที่ Amazon.com

ประสบความสําเร็จสามารถลมยักษใหญของธุรกิจหนังสือ Barnes and Noble ไดสําเร็จ แมวา Barnes and

Noble จะสราง Web Site มารองรับแลวก็ตาม กระแสของ E-commerce ประทุขึ้นทั่วโลก แนวโนมในอนาคต

Online Business จะเปนแนวทางที่เกือบทุกองคกร โดยเฉพาะอยางย่ิงองคกรธุรกิจจําเปนตองนํามาเปนสวน

หนึ่งของ องคกร ไมวาทางใดก็ทางหนึ่ง

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



8

รูปที่ 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 หลาย ๆ

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

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



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

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

ที่เก่ียวของกับการนําเสนอใหเหลือเฉพาะส่ิงที่จําเปนเทานั้น

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

เน่ืองจากผูใชจะรูสึกเหมือนกับวา Web Site นั้นเหมือนสถานที่จริง ถาลักษณะของแตละหนาใน Web เดียวกัน

นั้นแตกตางกันมาก ผูใชจะเกิดความสับสนและไมแนใจวากําลังอยูใน Web เดิมหรือไม ดังนั้นรูปแบบของหนา

ระบบ Navigation และโทนสีที่ใชควรมีความคลายคลึงกันตลอดท้ัง Web Site

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

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

รูปภาพ Graphic จะมีผลตอรูปแบบของ Web Site อยางมาก ผูออกแบบจึงตองเลือกใชองคประกอบเหลานี้

อยางเหมาะสม

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



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 เปนโดเมนเนมในระดับสากล อยูในความควบคุมดูแลของ 4www.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 ในประเทศไทยจะอยูในความดูแลของ 5www.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 สวนคือ

รูปที่ 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 ได

Client

Server Client

ClientServer

Information



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 เปนตน

รูปที่ 2.2 หนาหลักของโปรแกรม Photoshop

คําส่ัง Menu Bar ทั้งหมด 9 คําส่ัง ขออธิบายโดยสังเขปดังนี้

• File เปนคําส่ังการทํางานเก่ียวกับไฟล เชน การเปดไฟล (open) ปดไฟล (close) การบันทึก

ไฟล (Save) เปนตน

• Edit เปนคําส่ังเก่ียวกับการปรับแตงตางๆ เชน การตัด ( Cut) คัดลอก ( Copy ) ปะ (Paste )

เติมสี (Fill) และเปล่ียนขนาด (Transform ) รวมไปถึงคุณสมบัติตางๆ

• Image เปนคําส่ังที่เก่ียวกับการปรับภาพทั้งหมด เชน สีของภาพ การทําภาพขาวดํา การเพิ่ม

ความสวาง เปนตน

1

2

3

4

5 6



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 :: [email protected]



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

ผูแตง อ. สุรกาญจน นิ่มอนงค


อ. นิธิสิทธิ์ สุขแสง


mailto:[email protected]�




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 เพื่อกลับไปยังรูปตนฉบับ กลับไปเลือกอุปกรณ

ผูแตง อ. วีรวัลย เกษรศิริ





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 ดังนี้ คือ

9http://www.yahoo.com

3. การสรางจุดเช่ือมโยงเพื่อสง Email

ทําไดโดยการพิมพ e-mail address ที่ตองการลงในชอง Empty Reference ดังนี้ คือ 10mailto: ตามดวย

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 : [email protected]

อ.ปยะนันท ไกลกลอม

Email : [email protected]





105

บทที่ 6 การสราง Rollover

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

Mouse ไปวางเหนือ Link นั้น เรียกเหตุการณนี้วา Rollover ซึ่งหลักการทําก็คือจะมีภาพ 2 ภาพขนาดเทากัน

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

คือ

เหตุการณปกติ เปนเหตุการณที่จะปรากฏอยูตลอดเวลาถึงแมวาจะไมใชงานใน Web ก็ตาม

และเปนเหตุการณที่นํา Mouse ออกจากภาพอีกดวย

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

การสราง Rollover ใน Golive เม่ือไดทําการเตรียมภาพ 2 ภาพเรียบรอยแลวในโปรแกรม Golive จะมีอุปกรณที่ทําเก่ียวกับเร่ือง

Rollover โดยตรงดังนี้

Tip & Trick

เวลาทําการต้ังช่ือรูปภาพ ถาชื่อตอนตนเหมือนกันแลวตอทายดวยคําวา _over เวลาทําการ Browse ไฟล

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

คล๊ิก แท็บ

Rollover

Normal Over

Main_menu.gif Main_menu_over.gif



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)

Tip & Trick

เวลานําไปวางคร้ังแรก ตาราง จะมีขนาด 3*3 จะตองหาพื้นที่เพื่อที่จะสามารถใหวางตารางได

มองตามแนวตั้งเรียกวา สดมภ (column)

มองตามแนวนอนเรียกวา แถว (Row)

พื้นที่แตละชองจะเรียกวา เซล (Cell)



108

การกําหนดคุณสมบัติ

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

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

Column = จํานวน สดมภ

Width = กําหนดความกวางของ ตาราง

Height = กําหนดความสูงของตาราง

Border = กําหนดความหนาของเสนขอบ

Cell Pad = ระยะหางระหวางขอความถึงขอบ Cell

Cell Space = ระยะหางระหวางCell

Color = การใสสีใหกับ ตาราง

Align = การจัดเรียงราราง

Caption = เปนลักษณะคําอธิบาย

BgImage = การใส พื้นหลังเปนรูปภาพ

Import = การนําขอมูลเขามาใสในตาราง

Export = การนําขอมูลออกจากตาราง

Convert = การแปลงตารางใหเปน Layout Grid

Border

Cell

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

อุปกรณที่ใชในการทําแบบฟอรม

1. Form เปนอุปกรณที่สําคัญมากถาจะทําแบบฟอรมจะตองนําอุปกรณตัวนี้เขามาใชงานเปนอับดับ

แรกสุด แลวอุปกรณอื่น ๆ จะตองอยูภายใน Form ดวย

คลิ๊ก แท็บ Forms บน Palette Object

แท็บ Forms บนหนาตาง Palette จะเปนที่เก็บอุปกรณตาง ๆ ที่ใชในการสรางแบบฟอรมทั้งหมด

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

กรณี เปน Text Field ธรรมดาจะไมมกีาร check ที่ Is Password Field

การปรับแตงคุณสมบัติ Name เปนการต้ังชื่อใหกับอุปกรณ

Value เปนคาขอมูลของอุปกรณนี้

Visible กําหนดความกวางของ อุปกรณ password

(หนวยเปนตัวอักษร)

Max เปนการกําหนดจํานวนตัวอักษรสูงสุดที่สามารถ

พิมพเขาไปได

Is Password Field เปนการกําหนดใหแสดงผลขอมูล

แบบ Password

Tip & Trick

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

Label Object



117

สวนมากอุปกรณตัวนี้ไมไดรับความนิยมเนื่องจากไมมีผลกบัทาง การเขียนโปรแกรม สวนมากจะใชการพิมพขอความธรรมดาแทน


Reference เปนขอความที่ใหปรากฏ

Tip & Trick

6. Radio เปนอุปกรณที่ให User สามารถเลือก ไดแตสามารถเลือกเพียงคําตอบเดียวเทานั้น ใชในกรณีที่ตองการ

คําตอบจาก User เพียงคําตอบเดียวเทานั้น เชน เร่ืองเพศ ศาสนา

Male Female

Radio Object



118

ถาทําการกําหนด Group ไมเปนตัวเดียวกัน จะสามารถเลือกไดทั้งชายและหญิง ถาตองการใหเลือกได ตัวใดตัวหนึ่งใหทําการตั้ง Group ใหตรงกันดวย


Group เปนการกําหนดกลุมที่จะใหเลือก

Value เปนคาขอมูลของอุปกรณตัวนี้

Selected เปนการเลือกอุปกรณตัวนี้เอาไวกอน

Tip & Trick

7. Check Box เปนอุปกรณที่ให User ทําการเลือกขอมูล โดยที่ User สามารถเลือกไดก่ีตัวก็ได ใชในกรณี ถามเร่ืองท่ี

สามารถตอบไดหลายคําตอบ เชน ความชอบ

Adobe Photoshop

Adobe Golive

Check Box Object



119




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


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


Label เปนขอความที่จะแสดงบริเวณปุม

2. Reset Button เปนปุมอีกชนิดหนึ่งเมื่อทําการกดแลวจะทําการลบขอมูลใหเปนคา ปกติตามที่ทําการเปดหนาแบบฟอรมข้ึนมาคร้ังแรก

Submit Object

Reset Object



124


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


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

Button Object



125


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



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 พิมพ [email protected] เปนคําตอบลงไปในอุปกรณ Text Field จะไดรับขอมูลที่

ประมวลผลเปน [email protected] หมายความวา email คือคําถาม และ

[email protected] เปนคําตอบของ 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

ขั้นตอนการทํางานของแบบฟอรมก็คือเม่ือ 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 :: [email protected]

แบบฟอรม Mail.asp E-mail

Form Programming System Out put

http://www.netdesing.ac.th/mail.asp�

http://www.netdesign.ac.th/thanks.html�




128

บทที่ 7 เฟรมและภาพเคลื่อนไหว

ในการสราง Web Siteผูผลิตสามารถใชเคร่ืองมือในการจัดรูปแบบของ Web Site ได หลายชนิด เชน

Grid หรือ Table แตยังมีรูปแบบในการสราง Web Site อีกหนึ่งชนิด ที่เปนที่นิยมใชกันอยางแพรหลาย

เคร่ืองมือชนิดน้ีเรียกวา “เฟรม”

ลักษณะเดนที่เห็นไดชัดจากการสราง Web Site ดวยการใชเฟรมก็คือ พื้นที่หนาจอของ Web Site

จะมีการแบงพื้นที่แยกออกจากกัน เปน 2 หรือ 3 สวน โดยลักษณะ ของการแบงพื้นที่แยกออกจากกันที่พบเห็น

บอย ๆ ในการทํา Web Site

เชน

ตัวอยาง Web Site Site ที่ใชเฟรมในการออกแบบ

1 1 1

1

22 3

www.netdesign.ac.th Hotwired.lycos.com

www.k10k.net www.fritolay.com



129

2

1

Web Site เฟรม

1

2

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

จากบทที่ผาน ๆ มาจะทราบวาในการผลิต Web Site ขึ้นมาหนึ่งหนา (ไฟล .html หนึ่งไฟล) จะ

สามารถนําไปเปดแสดงผลผาน Browser แลวเห็นไดหนึ่งหนาเชนกัน แตการสราง Web Site ดวยการใชเฟรม

นั้น การมองเห็นรูปแบบของ Web Site ที่เปนเฟรม แบบสองสวนนั้น จํานวนไฟลที่ใชในการสรางนั้นจะตองมี

จํานวนอยางนอย ถึง 3 ไฟลดวยกัน

Adobe Golive Browser

1 ไฟล (.html) 1 หนา ( Web Site)

1. โครงเฟรม

2. เมนู

3. เน้ือหา

รวม 3 ไฟล

จะเห็นไดวาการท่ีจะสราง Web Site ที่ใชเฟรมในการออกแบบน้ัน จะมีไฟลหลัก 1 ไฟล ที่ใชเปน

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

หนา Web Site แตอยางใด เรียกไฟล นี้วา “โครงเฟรม” และสวนที่เปน หมายเลข 1 และหมายเลข 2 นั้นก็จะ

หมายถึง สวนของ Web Site ที่จะตองสรางแยกออกมาอีก 2 ไฟล เพื่อที่จะนําไปใสไวในไฟลโครงเฟรม เพื่อให

Web Site เฟรมนี้แสดงผลไดอยางสมบูรณ นั่นก็หมายความวา ในขณะท่ีกําลังดู Web Site ที่เปนเฟรมอยูนั้น

กําลังมองเห็น Web Site พรอมๆ กัน 2 หนา ในหนาจอคอมพิวเตอรนั่นเอง (ในกรณีที่ Web Site นั้นมีการแบง

เฟรมออกเปน 2 สวน)

1

1



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)

ไฟลเหลานี้เปนไฟลที่จะนํามาใชเพื่อการสรางภาพเคล่ือนไหวเทานั้นยังไมใชไฟลที่จะนําไปทํา Web Site

ดังนั้นเม่ือสรางไฟลเหลานี้จากโปรแกรม Photoshop แลว ให save เก็บแยกไวตางหากไมตองนําไปเก็บไว

ในโฟลเดอร image

2. นําไฟลเหลานี้ไปสรางภาพเคล่ือนไหวในโปรแกรม Animagic Gif โดยใชคําส่ัง File > Insert Frame

เพื่อนําเอาไฟลภาพนิ่งเขาไปใสใน Frame List โดยเรียงตามลําดับดังรูปที่ 1 และเม่ือใสเฟรมภาพน่ิงใน

Frame List เรียบรอยแลวจะไดดังรูปที่ 2

3. ทําการทดสอบภาพเคล่ือนไหวดวยการกดปุม Play บน Tool Bar จะเห็นการเคล่ือนไหวของภาพนิ่ง

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

update1.gif update2.gif update3.gif update4.gif

รูปท่ี 1

รูปท่ี 2



137

4. ทําการปรับอัตราการเคลื่อนท่ีของภาพน่ิง ดวยคําสั่ง Animation > Frame Rate ดังรูปที่ 3 จะทําใหหนาจอเปน

ดังรูปท่ี 4

สําหรับรายละเอยีดในการปรับแตงอัตราความเร็วจะอธิบายในหองเรียน

5. เม่ือปรับแตงอัตราความเร็วไดตามความตองการเรียบรอยแลว การ Save file เพ่ือใหเปนไฟลภาพเคล่ือนไหว

ใหใชคําสั่ง File > Save as และนําไฟลนี้ไป Save เก็บไวในโฟลเดอร image เพ่ือเตรียมไวใชทํา Web Site

ตอไป

6. นําภาพเคลื่อนไหวที่ไดจากโปรแกรม Animagic Gif ไปใชในโปรแกรม Adobe Golive โดยนําเขาไปใชดวย

อุปกรณ Image และทําการจัด Layout เหมือนวิธีการในบทท่ี 5 ที่ไดเรียนผานมาแลวนั่นเอง

ผูแตง อ. ชนพิพัฒน อรามกุล


รูปท่ี 3 รูปท่ี 4




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

สามารถจะปรับการทํางานของ Animation ที่ Timeline Editor พรอมกับดูหนา Layout และผลของ Animation

ที่หนางานไปดวยก็ได ใหไปท่ี Menu window > Cascade and Tile > Tile Horizontally จะเปนการแบง

หนาตาง Layout กับ Timeline เปน 2 สวน

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

เกิดขึ้นทุกคร้ังที่มีการเปลี่ยนแปลงเสนทางในกรณีที่สราง

Animation จากการลากดวยมือจะมี KeyFrame เกิดขึ้น

เยอะเน่ืองจากคงไมสามารถลากเปนเสนตรงไดดวยมือ

ของเราเอง

ถาตองการ Animation ในลักษณะวิ่งเปนเสนตรงใหเลือก KeyFrame ที่อยูตรงกลางทั้งหมด แลวกด Delete

บน Keyboard ใหเหลือแตเฉพาะ KeyFrame เร่ิมตน และ KeyFrame สุดทายเทานั้น ตอนน้ีจะได Animation

ที่วิ่งเปนเสนตรงแลว



143

ในหนาตาง Timeline Editor นี้ยังสามารถปรับคาตาง ๆ ของ Animation ไดอีกเชน การเพ่ิม หรือ ลดความเร็ว ,

การส่ังใหวน loop หรือ ถอยหลังกลับ ฯลฯ

หลังจากที่สราง Animation ก็สามารถมาปรับตําแหนงไดอีกคร้ังโดย Click ที่ Key Frame

แลวไปดูที่ Inspector สามารถปรับตําแหนงคา Left และ Top ที่ Key Frame นั้น ๆ ได

จะเห็นไดวา Dynamic HTML มีความสามารถในการทํา Animation คอนขางมาก ทําให

Web Site ดูนาต่ืนตาต่ืนใจและมีการตอบโตกับผูใชมากขึ้น แตทั้งนี้ยังตองคํานึงถึงกลุมเปาหมายของ

ดวย วาเปนกลุมที่รับเทคโนโลยี DHTML ของไดหรือเปลาไมอยางนั้นส่ิงที่ทําไปก็จะสูญเปลา และทํา

ใหกลุมเปาหมายของหันไปใชบริการของ Web Site อื่น ๆ ซึ่งส่ิงที่ยังตองคํานึงเปนหลักกอนก็คือ ส่ิงที่

นําเสนอ , ส่ิงที่จะเปนประโยชนกับผูเขาชม แลวคอยใชเทคโนโลยีตาง ๆ มาชวยเติมแตงให Web Site

ดูนาสนใจมากขึ้น นาจะเปนแนวทางที่ดีกวา

Autoplay ปกติ

จะถูกกดไว เม่ือ

Preview

Animation จะ

เร่ิมเลนอัตโนมัติ

“ Loop “ ถากดที่ปุมน้ีไว

Animation ของเม่ือเลน

จบ จะเร่ิมตนเลนใหมไป

เร่ือยๆ

แผงควบคุมการเลน Animation

ใ น ก รณี ที่ ต อ ง ก า ร ท ด ส อ บ

Animation โดยไมตองไปที่

Preview

ปรับความเร็วของ

Animation มีหนวยเปน FPS(Frame per second )



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

การนํา Action ไปใชงาน

อยางที่ไดทราบไปแลววา Action มี 2 แบบคือที่ Link และ ที่สวนหัวของ HTML และยังเปน Action ชุด

เดียวกันอีกดวย ดังนั้นจึงตองลองใชงานดูวา Action ตัวไหนบางที่เหมาะกับ Action ที่ Link Action ไหนบาง

เหมาะกับการใสที่สวน Head

ตัวอยางของการใส Action ที่ Link

Action “ Open Window “ เปน Action ที่ใสใหกับปุมหรือ Link เพื่อตองการใหเวลา Click แลวเปด

หนาตาง Browser ขึ้นใหมโดยที่สามารถกําหนดขนาดที่ตองการ รวมท้ังสามารถเลือกไดดวยวาตองการ

Function ตัวไหนบางของ Browser

สวนถาตองการจะใช Cction อะไรกับ

สวนหัว ก็สามารถ Click ที่ปุม Action ก็

จะมีชุดของ Action ใหลือกใช ซึ่งเปนชุด

เดียวกับ Action ที่ Link นั่นเอง



149

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

โดยการสราง Web Site ที่มีขนาดที่ตองการ ( ชิดมุมบนซาย ) แลว Save เก็บเอาไวกอน

ทดลองพิมพตัวหนังสือขึ้นมา แลวทํา Link ( ใส # ) เอาไวแลวเรียก Palette Action ขึ้นมา เลือก Event

เปนแบบ Mouse Click

ควรจะออกแบบใหชิดมุมซายบนเน่ืองจาก เวลากําหนดขนาดหนาตางที่จะเปดขึ้นใหม จะคิดคาจากมุมซายบน



150

ลองทดสอบผลดูผาน Browser

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

> Open Window ที่ชอง Link ให Browse

ไปหาหนา Web Site ที่เตรียมไว สวนชอง

Size ใหใสเปนขนาดของ Browser ที่ตองการ

จะเปดขึ้นมา สวนของ Checked Box

ดานลางก็เปน Function ของ 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 อีกดวย

http://www.toyota.com/�



153

ลองมาทํา Action ลักษณะนี้บน Golive กันดู

เตรียมหนา Web Site ลักษณะน้ีขึ้นมา

สําหรับ Action นี้จําเปนตองต้ังชื่อใหกับภาพหลักกอน โดยไป Click ที่รูปภาพ แลวไปดูที่

Inspector ตรง Tab More จะมีชอง Name อยู ใหต้ังชื่อเอาไวตรงน้ี

จากนั้น ใหเลือก Link ตัวแรกกอน แลวไปดูที่ Palette action เลือก Events เปน Mouse

Enterแลวไปเลือก Action ในหัวขอ Image > Set Image URL

Text ธรรมดา ทํา Link เอาไวเพื่อใส Action

วาง Image ลงไปเปนรูปที่จะใหเปนรูปหลัก



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

http://www.distar.net/�



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

ใหลองเลือก Action > Multimedia > Drag Floating Box

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

งาน ใส Image เขาไปขางใน

และ Browse รูปภาพแทนลงไป

จากนั้นใหต้ังชื่อใหกับ Floating

Box ดวย

เสร็จแลวใหใส Head Action

ลงไปที่สวน Head Section

เลือก Exec. เปน “ OnLoad “

ที่ชอง Floating Box ใหเลือก

ชื่อ Floating Box ที่ต้ังชื่อไว



160

พอ Preview แลวจะสามารถ Click คางไวแลวลาก ( Drag ) Floating Box ไปไหนก็ไดในหนางาน

แตถาใส Action > Multimedia > Mouse Follow

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

ที่ชอง Floating Box ก็เลือก

ชื่อ Floating Box ที่ต้ังชื่อไว

เชนเดียวกัน



161

จะเห็นไดวาความสามารถของ DHTML และการทํา Action นั้นมีมากมายและหลากหลาย

ซึ่งนาจะเปนสวนเพิ่มเติมท่ีทําให Web Site ของดูนาสนใจมากขึ้น แตถึงแมวามันจะทําให Web Site

ของดูมีสีสรรคมากขึ้น ก็ไมควรจะใหมันบดบังจุดประสงคในการนําเสนอเนื้อหา สาระสําคัญ ของ

Web Site ดวย เพราะวาการใสเทคนิคพิเศษมากจนเกินไป ก็จะทําให User นั้นหาสาระสําคัญจริงๆ

ของ Web Site ไมเจอ ในที่สุดก็จะไมกลับมาอีก ดังนั้นจึงควรเลือกใชเทคนิคใหเหมาะสมกับงานดวย

จึงจะเรียกไดวาเปนผูที่ออกแบบ Web Site ไดดีเย่ียม ไมใชผูที่สราง Web Site ได เทานั้น

ผูแตง อ. อัศวิน โอกาดา

email :: [email protected]



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) ซึ่งใชกันเปนสากลในการจดโดเมนท่ัว

โลก สําหรับการตรวจสอบวาช่ือโดเมนยังวางอยูหรือไม สามารถเขาไปเช็คไดที่ 22www.internic.net/whois.html

หรือที่ 23www.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) ก็คือชื่อที่อยูหนา @ ที่คุณสามารถจะใชได

([email protected]) ปกติการจะเช็คอีเมลที่ทํางานแบบ 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

ผูแตง อ. รชิษฐ บุษยาสกุล


อ.วรรณวนัช ฤกษลัภนะนนท






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 เว็บไซด คือ

27www.yahoo.com ซึ่งขั้นตอนในการลงทะเบียนเพ่ิมรายช่ือเว็บไซดของเราเขาไปในระบบ



185

ฐานขอมูลของ Search Engine ระบบ Directory นั้นขั้นตอนแรกจะตองทําการเลือกหมวดหมูที่มี

ความเก่ียวของกับเนื้อหาของเว็บไซดของเราเสียกอนที่Category

• เร่ิมตนโดยการเลือกหมวดใหญกอนที่ 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 จากซาย)

รูปที่ 10.2 อุปกรณ Keywords และ Meta Tags


เคร่ืองมือ META tag

เคร่ืองมือ Keywords



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 ของ 28www.sitemeter.com มาติดต้ังในเว็บของเรา

• ขั้นตอนแรก ใหเขาไปที่ 29www.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

สอนวิธีการเขียนเว็บอย่างละเอียด 101...

Documents