pro web design

1

บทท 1ความรทวไปเกยวกบอนเทอรเนตและการออกแบบ Web Site

ถาจะพดถงการสอสารในรปแบบใหม ทสามารถสอสารกนไดอยางรวดเรวและมราคาถกทสด กคงหนไมพนทจะกลาวถง “อนเทอรเนต” ซงไดรบความนยมไปทวโลก ไมเวนแมกระทงประเทศไทย ซงในปจจบนกมการใชงานอนเทอรเนตกนแพรหลายในหนวยงานราชการ องคกรตาง ๆโดยไดรบความสนใจจากกลมผใชทกระดบเพมขนเรอย ๆ โดยเฉพาะนกเรยน นสต นกศกษาทกำลงเปนกลมผใชอนเทอรเนตทใหญทสดสำหรบประเทศไทย และอาจจะพดไดวา อนเทอรเนตนำมาซงการเปลยนแปลงของวงการคอมพวเตอรครงสำคญทสด นบตงแตมการเปดตวเครองพซ การเชอมตอคอมพวเตอรจำนวนมากเขาดวยกนเปนเครอขายอนเทอรเนต กอใหเกดการแลกเปลยนขอมล และการสอสารทเปนประโยชนอยางมหาศาล คนจากทวโลกแทบทกเพศทกวยและทกอาชพ สามารถสอสารกนผานเครอขายอนเทอรเนตไดอยางไมมขอจำกดทางเชอชาต หรอศาสนา อนเทอรเนตจงไดกลายเปนสงคมขนาดใหญทเกดขนในโลกคอมพวเตอรโดยถกขนานนามวา “ ไซเบอรสเปซ (Cyberspace) ” ! อนเทอรเนตกำลงเตบโตขนอยางรวดเรว ปจจบนมผใชอนเทอรเนตทวโลกมากกวา 60 ลานคน และมผสมครเปนสมาชกเพอขอใชบรการอนเทอรเนตมากกวา 1 ลานคนตอเดอน อนเทอรเนตจงกอใหเกดโอกาสและบรการใหมมากมาย เชน สามารถทำธรกรรมผานระบบอนเทอรเนต พบประสนทนากบผอน เผยแพรความร และใหบรการดานขอมลขาวสาร นอกจากนอนเทอรเนตยงเปนสอทนำเสนอความบนเทงในรปแบบของรายการวทย โทรทศน ดนตร ภาพยนตร และเกมส จนมการกลาววาถาธรกจใดไมสนใจโลกไซเบอรสเปซ ธรกจนนกำลงปฏเสธอนาคตของตวเองเสยแลว

ความเปนมาของอนเทอรเนต

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

ประวต ความเปนมาของอนเทอรเน ตเร มตนจากเครอขาย ARPAnet ของหนวยงานชอ Advance Research Projects Agency ซงเปนเครอขายการวจยเพอปองกนของ U.S. Department if Defense ซงเกดในชวงป 1970 มการออกแบบระบบททำใหนกวจยและนกวทยาศาสตรทำการแลกเปลยนขอมลขาวสารระหวางกนและกนไดดขน และทำใหเกดการพฒนาเปนระบบโอนถายขอมล รปแบบใหมทสามารถสอสารได

PROFESSIONAL WEB DESIGNER COURSE

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

2

หลายทางคอ Transmission Control Protocol / Internet protocol (TCP/IP) ซงตอมาคอ มาตรฐานการรบสงขอมลของอนเทอรเนต ! ตอมาจงมการจดตงหนวยงานใหมทชอวา The National Science Foundation (NFS) หรอ NFSNET โดยผเชยวชาญจาก ARPAnet ทแยกตวออกมา เครอขายนใชสำหรบเชอมตอเครอขายของมหาวทยาลย และศนยวจยตาง ๆ เขาดวยกนทำใหเกดการเพมปรมาณเครอขาย และการตดตอสอสารในรปแบบตาง ๆ เชน

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 นน โปรแกรมเมลทมอย



http://www.hmtmail.com






3

จะใชไดกบเครองทรบระบบปฏบตการ UNIX เทานน ซงใชการ input ขอมลและคำสงแบบตวอกษร (Text mode) เชน โปรแกรม PINE ซงตอมามการพฒนาโปรแกรมแบบทเปน Graphic เชน โปรแกรม Eudora ซงเปนโปรแกรมเมลทใชงาย และมความสามารถในการปรบแตงคาตาง ๆ ไดมากมาย แตในปจจบน โปรแกรม Web browser เชน Netscape Navigator และ Internet Explorer ไดรวมโปรแกรมเมลไวในตวอยแลว ซงโปรแกรมเมลทรวมอยใน Browser สวนใหญมความสามารถสงและใชงานงาย

บรการกระดานขาวอเลกทรอนกส (Usenet)

เปนบรการทไดรบความนยมมากพอสมควร เนองจากลกษณะพเศษ คอ การแบงหวขอความสนใจในเรองตาง ๆ ออกเปนเรองยอย ๆ แลวแตวาจะมคนตงขนมา แลวใหมคนทมความสนใจคลายกนเขามาทงขอความตาง ๆ เกยวกบเรองนน ๆ ไว แลวผทเขามาอานคนอน ๆ สามารถเขามาแสดงความคดเหนได บรการนจะเรยกอกชอหนงวา Newsgroup ปจจบนม Web Site ทใหการบรการแบบกระดานขาวอเลกทรอนกส เกดขนมากมายทงของไทยและตางประเทศ สำหรบประเทศไทย 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 แลว ขอความนนจะไปปรากฏบนหนาจอของคนอนๆ ซงเขากสามารถอานได ในขณะ



http://www.pantip.com

http://www.pantip.com

4

เดยวกนกสามารถอานขอความจากคนอน ๆ ไดเชนกน เรยกบรการนอกชอหนงวา Chat Room ปจจบนมโปแกรมอกแบบหนงทไดรบความนยมมากขนเรอย ๆคอ ICQ (I Seek You) ซงเปนอกรปแบบหนงของการพดคยทางอนเทอรเนตเหมอนกน

World Wide Web

เปนบรการทไดรบความนยมมากทสดรองจากการใช E - m a i l เนองจากเปนชองทางการเขาถงขอมลทสะดวกทสดในปจจบน กระแสความนยมของอนเทอรเนตทเกดขนอาจจะเรยกไดวาเปนเพราะ 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 จะตองสามารถแสดงผลกบขอมลหลายรปแบบได3. ตองสามารถใหผใชเขาถงขอมลใน Network ไดงาย

ชวงปลายป 1990 ตนแบบของ www ไดทดลอง Run บนเครอง Next แตยงไมรบความแพรหลายนก

มนาคม 1991 www interface ไดถกใชใน Network โดยการลงทเครอง Server ของ CERN ปลายป 1991 ทาง CERN ไดประกาศระบบไฟลใน Uernet Newsgroup และโปรแกรม WAIS ไดประกาศใชอยางเปนทางการ

ป 1992 CERN ไดพฒนา Web อยางตอเนอง และเรมแพรหลายในหมนกวจย โดยมจำนวน Web server ประมาณ 50 server



5

ป 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 ทำใหเกดสงคราม Browser ขนมาเนองจากนโยบายการแจก Browser ฟรของ Microsoft ทำใหสวนแบงการตลาดของ Netscape ตกลงอยางรวดเรว

ป 1997- ปจจบน มาถงวนนวงการอนเทอรเนตและ Web Site ไดพฒนาขนอยางมากมาย มกระแสหลายอยางทผลก



http://www.w3c.org

http://www.w3c.org

6

ดนใหอนเทอรเนตไดรบความนยมมากขน โปรแกรม Browser กไดรบการพฒนาและมขดความสามารถสงขนอยางมากมาย และ Browser ทไดรบความนยมมากทสดในปจจบนกคอ Internet Explorer ซงพฒนามาถง version 6 แลว ทำใหทกวนนคงไมมใครไมรจกคำวา อนเทอรเนต อกตอไป

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

โดยหลกการแลว WWW ไดถกออกแบบมาใหเปนเอกสารอเลกทรอนกสซงปจจบนถกเรยกยอ ๆ วา Web ซงขดความสามารถของเทคโนโลยWebมความสามารถในการทำหลาย ๆสงมากยงขน จงทำใหการประยกตใชงานตาง ๆ บน WWW เปนไปอยางหลากหลายตงแตการประกาศขาวธรรมดา ๆ ไปจนถงการทำการคาดวยระบบอเลกทรอนกส นเปนเพยงตวอยางทตองการแสดงใหเหนวาเทคโนโลยของWe b ทำอะไรไดบาง เอกสารประชาสมพนธ (Catalog / Brochure)

เอกสารประชาสมพนธ ถอไดวาเปนเอกสารทองคกรประเภทขายตรง ซปเปอรมาเกต หางสรรพสนคา ฯลฯ นำมาเปนเอกสารหลกในการประชาสมพนธทางการตลาดเพอใหลกคาสารมารถเหนสนคาตาง ๆ จงใจทางราคาและใหรายละเอยดคราว ๆ ของสนคา การจดพมพเอกสารเหลานในแตละครง องคกรจะตองเสยคาใชจายจำนวนมาก หากตองการพมพสสทงเลม กจะตองเสยคาใชจายเพมเปน 2 เทาของการพมพแบบขาวดำ การจดทำ Web Site เพอประชาสมพนธเหลานจงเปนวธทสามารถลดคาใชจายขององคกรลงได นอกจากลกคาจะสามารถเขาชม Web Site ไดตลอด 24 ชวโมงแลว องคกรเองกสามารถปรบปรง Web Site ของตนเองไดตลอดเวลาโดยไมจำเปนตองเสยคาใชจายในการพมพเอกสารเหลานนอกครงหนง

หองแสดงสนคา (Showroom)

จะเหนไดวา ธรกจหลายประเภทในปจจบนนเชน ขายรถยนต โทรศพทเคลอนท ของเลน ภาพวาด ฯลฯ ธรกจประเภทนโดยปกตจำเปนตองสรางรานเพอแสดงสนคา ซงสนคาตาง ๆ เหลานนเปนสนคาทมราคาสง หากนำสนคาจรงทกรนมาตงไวใหลกคาชม กจำเปนตองลงทนเปนจำนวนมหาศาล ดวยเทคโนโลยของอนเทอรเนตในปจจบน การจดทำ Web Site จะสามารถทดแทนลกษณะของสำนกงานหรอรานคาท



7

เปนหองแสดงสนคาไดเปนอยางด เนองจากสามารถพฒนา Web Site เปนลกษณะสามมต ซงผชมสามารถจบหรอเคลอนสนคาเหลานแบบเสมอนจรง

ศนยบรการทางอนเทอรเนต (Internet Service Center)

อนเทอรเนตถอไดวาเปนสงคมของผใชคอมพวเตอรทใหญทสดโลก ซงม Web Site จำนวนมากทถกสรางขนเพอเปนศนยกลางในการตดตอสอสารของคนทงโลก ไมวาจะเปนการใหบรการทางดานการคนหาขอมลทตองการ (Search Engine), การใหบรการดานอเมล , การใหบรการพนทสำหรบการสราง Web Site หรอการใหบรการทางดานหองสนทนา (Chat Room)

รปท 1.2 การใหบรการตาง ๆ บน Web Site



รปท 1.1 หองแสดงสนคาของ http://

8

การศกษาระยะทางไกล (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://

9

รปท 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ทดแลวสบสนวนวาย มขอมลมากมายเตมหนาจอ แตหาอะไรไมเจอ แถมยงใชเวลาแสดงผลในแตละหนานานจนไมอยากรอ สง



ธรกจออนไลน http:// ธรกจออนไลน http://

10

เหลานลวนเปนผลมาจากความแตกตางในการออกแบบ Web S i t e นนเอง การออกแบบ Web Site จงมสวนสำคญในการสรางความประทบใจใหกบผใชบรการ และทำใหอยากกลบเขามาใชอกในอนาคต และนอกจากจะตองพฒนา Web ใหดและมประโยชนแลว ยงตองแขงขนกบ Web Site อนทใหบรการเชนเดยวกบ Web ของในปจจบน และยงตองสรางความไดเปรยบเหนอ Web Site ใหมทกำลงจะมาแรงและเกดขนในอนาคตอกดวย ดงนนไมวา Web ของจะมคแขงอยแลวหรอไมในวนน กควรจะออกแบบ Web อยางมคณภาพ เพอดงดดผใชใหอยกบ Web ของไปตลอด

สรางความไดเปรยบเหนอคแขง

สำหรบ W e b ทางธรกจยงจำเปนตองใหความสำคญกบการออกแบบมากขน เนองจากพฤตกรรมการใชจายบน Web นนมลกษณะไมเหมอนกบการซอขายทวไปทคนเคย ลกคาสามารถเขาไปใน Web Site หลาย ๆ แหงพรอมกนเพอเปรยบเทยบหาสนคาแลบรการทดทสดเทาทจะหาได โดยไมตองเกรงใจผขายเหมอนกบในรานจรง และยงไมมขอไดเปรยบเสยเปรยบในเรองทำเลทตง ทกรานคาบน Web จงถอไดวาอยในทเดยวกนโดยไมมความแตกตางของระยะทาง ไมวา Web นนจะอยภายในหรอนอกประเทศผใชกสามารถไปถงไดดวยการกรอกชอของ Web Site ลงไปเทานน คงจะหามกนไมไดถาผใชจะประเมนคาของหนวยงานหรอบรษทตามลกษณะของ Web Site ทไดสมผส และมกจะเปนสงทเกดขนบอยเสยดวย จงเปนชองทางทรานคาขนาดเลกสามารถออกแบบให Web Site มความยงใหญและนาเชอถอไดมากกวารานคาขนาดใหญกเปนได ถามความรและความเขาใจทถกตองเนองจากตนทนในการสราง Web Site นนตำมาก เมอเทยบกบการเปดรานตามศนยการคาตาง ๆ และยงสามารถรองรบลกคาไดจากทกแหงทวโลก โดยทผลประโยชนทไดรบจาก Web Site นนอาจมคามหาศาลเกนกวาทจะคาดคด ดงนน Web Site ของจงไมควรยอมใหมการออกแบบทดนาเชอถอนอยกวาคแขง ซงจะทำใหพลาดโอกาสทางธรกจไปไดอยางนาเสยดาย

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

กอนอนตองขอทำความเขาใจใหตรงกนกอนวา การออกแบบ Web Site นนไมไดหมายถงลกษณะนาตาของ Web Site เพยงอยางเดยว แตเกยวของกบการเรมตนกำหนดเปาหมายของ Web Site , ระบกลมผใช , การจดระบบขอมล , การสรางระบบ Navigation , การออกแบบหนาWeb ,



11

รวมไปถงการใช 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 นนอยมากมาย แตแทบไมมโอกาสเหน Graphic หรอตวอกษรทเคลอนไหวอยตลอดเวลา ซงจะรบกวนสายตาและสรางความรำคาญใหแกผใช ( การใชภาพเคลอนไหว (Animation ) จะดหวอหวาและนาในใจในตอนแรก แตเมอดบอยเขาและ ตลอดเวลาผใชจะเรมรสกรำคาญได ) นอกจากนนยงใชชนดและสของตวอกษรไมมากจนเกนไปจนเกดความสบสน ในสวนตวเนอหากจะใชตวอกษรสดำบนพนสขาวตามปกต และไมมการเปลยนสของ Link ใหลบสนแตอยางใด สรปวาหลกสำคญของความเรยบงายกคอ การสอเนอหาถงผใชโดยจำกดองคประกอบเสรมทเกยวของกบการนำเสนอใหเหลอเฉพาะสงทจำเปนเทานน



12

ความสมำเสมอ (Consistency)

สามารถสรางความสมำเสมอใหกบ Web Site นนได โดยใชรปแบบเดยวกนตลอดทง Web Site เนองจากผใชจะรสกเหมอนกบวา Web Site นนเหมอนสถานทจรง ถาลกษณะของแตละหนาใน Web เดยวกนนนแตกตางกนมาก ผใชจะเกดความสบสนและไมแนใจวากำลงอยใน Web เดมหรอไม ดงนนรปแบบของหนา ระบบ Navigation และโทนสทใชควรมความคลายคลงกนตลอดทง Web Site

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

การออกแบบตองคำนงถงลกษณะขององคกร เนองจากรปแบบของ Web Site สามารถสะทอนถงเอกลกษณและลกษณะขององคกรนนได Web Site ของธนาคารจงไมควรดเหมอนกบสวนสนก การใชชดส ชนดตวอกษร รปภาพ Graphic จะมผลตอรปแบบของ Web Site อยางมาก ผออกแบบจงตองเลอกใชองคประกอบเหลานอยางเหมาะสม

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

เนอหาถอเปนสงทสำคญทสดใน Web Site ดงนนใน Web Site ควรจดเตรยมเนอหาและขอมลทผใชตองการใหถกตองและสมบรณ โดยมการปรบปรงและเพมเตมใหทนตอเหตการณอยเสมอ เนอหาทสำคญทสดคอ เนอหาทสรางขนมาเองและไมซำกบ Web อน ๆ เพราะจะเปนสงทดงดดผใชใหเขามาใน Web Site อยเสมอ ตางจากท Link ไป Web Site



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

13

อน ซงเมอผใชรถงแหลงขอมลจรง ๆ แลวกไมจำเปนตองกลบมาท 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 เปนอยางมาก เชนเดยวกนกบสอประเภทอน ๆ ทตองออกแบบและเรยบเรยงเนอหาอยางรอบคอบ Web ททำขนมาอยางลวก ๆ ไมไดมาตรฐานการออกแบบและ



14

การจดระบบขอมลนน เมอมขอมลเพมมากขนเรอย ๆ กจะเกดปญหาและไมสามารถสรางความนาเชอถอได

ระบบการใชงานทถกตอง (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 หมายถง รปแบบมาตรฐานของรปภาพซงไดรบการรบรองความเปนมาตรฐานของแตละหนวยงานทคดคนวธการบนทกและแสดงภาพเหลานนขนมา รปแบบของรปภาพทสามารถนำมาใชบน



15

Web Page ไดนน มอย 2 ชนด แตเนองดวยทง 2 ชนดนมจดเดนทแตกตางกน และจำเปนตองใชทง 2 ชนดนควบคกนไป ไมสามารถเลอกเฉพาะแบบใดแบบหนงมาใชงานได ซง Graphic ทง 2 ชนดนกคอ GIF และ JPG

GIF (Graphic Interchange Format)

เปนรปแบบของไฟลรปภาพทถกพฒนาโดยบรษท CompuServe ในชวง 1980s และปรบปรงเรอยมาจนถงปจจบน Gif มความแตกตางของสตอจดได 256 ส (8 BIT) ซงใชหลกการในการ Map สตาง ๆ ทมอยในตารางส (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 เปนธรรมชาตมากขน เพราะขอบภาพทเปนรอยหยกจะถกกำจดออกไป เหลอเอาไวแตภาพจรง ๆ เทานน



16

Interlaced และ Non-Interlaced GIF

หากเขาไปสำรวจใน Web Site อน ๆ บอยครง จะพบวาในการแสดงรปภาพของ Web Browserอาจไมเหมอนกนในแตละภาพ เชนการเรมแสดงภาพทละบรรทดจากดานบนสดานลาง ทำอยางนไปเรอย ๆ จนไดภาพทงหมด วธการอานขอมลแบบนนเนองมาจากการบนทกภาพนนใหเปนแบบ Non-Interlaced GIF หรอ Standard GIF หากแต Web Browser มการแสดงภาพขนมาทงหมดในครงเดยว แตภาพยงยงไมชดเจน แลวคอย ๆ มการปรบภาพนนใหชดขนไปเรอย ๆ ในแตละครง จนกระทงเมอหยดการทำงานในการดาวนโหลดขอมลทงหมดแลว รปภาพจงจะชดเจนทงหมด นนคอรปแบบของ Interlaced GIF

การบบอดไฟล JPEG (JPEG File Compression)

การบบอดขอมลของรปแบบนจะใชหลกการทางคณตศาสตรทมประสทธภาพสงมาก ๆ เทคนคในการคำนวณถกเรยกวา Discrete Cosine Transformation ซงสามารถตงระดบของการบบอดขอมลไดตามตองการ แนนอนวาการบบอดขอมลมอตราสวนมากเทาไหร คณภาพในการแสดงผลของภาพนนจะลดลงไปดวย การบบอดขอมลของรปแบบนจะสามารถลดขนาดไฟลจากขนาดจรงไดมากถง 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



17

สราง Web ไดตงแตระดบพนฐานไปจนถงระดบสง สามารถนำขอความตาง ๆ ตลอดจนรปภาพไปวางตรงสวนไหนของหนา Web กไดตามตองการ โดยไมจำเปนตองใส Layer เหมอนในโปรแกรมตวอน ๆ ซงจดเดนในขอนทำให Golive เปนทนยมใชกนมากในตางประเทศ นอกจากนยงมลกเลนทเปน Dynamic Script และ Java Script มากมาย โดยทผใชงานไมจำเปนตองมความรทางดานภาษา HTML หรอ Java Script แตอยางใดหรอผใชท เปนโปรแกรมเมอรกสามารถพฒนาและปรบปรงแกไข script ไดดวยตนเองโดยผานทางหนา HTML Code Editor สำหรบทางดานเทคโนโลยบนโทรศพทมอถอ Golive กไดเตรยมอปกรณทใชสราง WAP สำหรบใชบนโทรศพทมอถอ รวมไปถงเทคโนโลยระบบ I-m o d e ทเปนสดยอดการใชอนเทอรเนตมอถอของประเทศญปน กสามารถสรางโดยโปรแกรม 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 ทโปรแกรมใหมายงนอยเกนไป

3. Microsoft FrontPage

FrontPage เปนโปรแกรมทชวยสราง Web Site ทมเนอหาอยในรปแบบของ โปรแกรม Microsoft Office โดยสามารถเปลยนไฟลเอกสารทเปน Word , PowerPoint ,Excel ใหเปน ไฟล HTML ไดอยางงายดาย ซงเปนทนยมในหมผเรมตนทงหลาย ม Wizard ชวยในการออกแบบ Web Site โดยไมตองยงกบภาษา HTML โปรแกรมนจงเปนเครองมอทชวยผออกแบบระดบตนและระดบกลางสามารถออกแบบ Web Site ไดอยาง



18

สะดวกรวดเรว โปรแกรมตวนมจดเดนในเรองของการบรหารจดการ Web Site โดยมระบบรายงานเกยวกบหนา WebPage ทแสดงผลชา WebPage ทถกเพมเขาไป Link ทใชงานไมได นอกจากนยงสามารถเชอมโยงกบระบบฐานขอมลไดอยางสะดวกอกดวย สวนขอเสยกคอการแทรกคำสงเพมเตมเฉพาะของโปรแกรมเขามาโดยไมจำเปน หรออาจมการเปลยนแปลง Code ของโดยไมรตว

การเลอกใชสสำหรบ Web Site (Designing Web Color)

สสนในหนา WebPage เปนสงทมความสำคญมากในการดงดดความสนใจของผใช เนองจากสงแรกทผใชมองเหนจาก WebPage กคอส ซงเปนสงกำหนดบรรยากาศและความรสกโดยรวมของ We b S i t e สามารถใชสไดกบทกองคประกอบของ WebPage ตงแตตวอกษร , รปภาพ, Link, สพนหลง หรอรปภาพพนหลง การเลอกใชสอยางเหมาะสมจะชวยสอความหมายของเนอหา และเพมความสวยงามใหกบหนา Web นน แตในทางกลบกน สทไมเหมาะสมอาจสรางความยากลำบากในการอานหรอรบกวนสายตาผใชรวมอาจทำใหการสอความหมายไมถกตองกได เรองของสใน Web Site มความซบซอนพอสมควร เรมตงแตการเขาใจถงการแสดงออกของสภายใตสงแวดลอมทตางกนของ Browser , จอมอนเตอร และระบบปฏบตการ ตลอดจนมความเขาใจในทฤษฎส รจกการเลอกใชสทเหมาะสมเพอการสอความหมายอยางสวยงาม ดงนน ความหมายของคอการตดสนใจเลอกใชสใหเหมาะสมกบบคคลและเปาหมายของ Web Site เพอการแสดงผลทตรงกบความประสงคมากทสด การใชชดสทเหมาะสม กลมกลน ไมเพยงแตจะสรางความพงพอใจใหกบผใช แตยงทำใหพวกเขามความรสกรวมไปกบเปาหมายของ Web Site นนดวย ไมวาจะเปนการใหขอมล สรางความบนเทง รวมถงการขายสนคาหรอบรการ

ประโยชนของสใน Web Site

สเปนเครองมออเนกประสงคอยางหนงทมความสำคญมากในการออกแบบ Web Site เนองจากสสามารถสอถงความรสกและอารมณ และชวยสรางความสมพนธระหวางสถานทกบเวลาอกดวย ดงนนสจงเปนปจจยสำคญอยางหนงทจะชวยเสรมสรางความหมายขององคประกอบใหกบ WebPage ไดเปนอยางด

1. สสามารถชกนำสายตาผอานไปยงทกบรเวณใหหนา WebPage ผอานจะมการเชอมโยงความรสกกบบรเวณของสในรปแบบทคาดหวง



19

ไวได การเลอกเฉดสและตำแหนงของสอยางรอบคอบในหนา Web สามารถนำทางใหผอานตดตามเนอหาบรเวณตาง ๆตามทกำหนดไวได วธนจะเปนประโยชนอยางมากเมอตองการใหผอานใหความสนใจกบสวนใดสวนหนงใน Web Site เปนพเศษ เชน ขอมลใหม โปรโมชนพเศษ หรอบรเวณทไมคอยไดรบความสนใจมากอน 2. สชวยเชอมโยงบรเวณทไดรบการออกแบบเขาดวยกน ผอานจะมความรสกวาบรเวณทมสเดยวกนจะมความสำคญเทากน วธการเชอมโยงแบบนชวยจดกลมของขอมลทมความสมพนธอยางไมเดนชดเขาดวยกนได

3. สสามารถนำไปใชในการแบงบรเวณตาง ๆออกจากกน ทำนองเดยวกบการเชอมโยงบรเวณทมสเหมอนกนเขาดวยกน แตในขณะเดยวกนกเปนการแบงแยกบรเวณทมสตางกนออกจากกน

4. สสามารถดงดดความสนใจของผอาน สายตาของผอานมกจะมองไปทสทมลกษณะเดนหรอผดปกตเสมอ การออกแบบ Web Site ดวยการเลอกใชสอยางรอบคอบ ไมเพยงแตกระตนความสนใจของผอานเพยงเทานน แตยงชวยหนวงเหนยวใหพวกเขาอยใน Web Site ไดนานยงขน สวน Web Site ทใชสไมเหมาะสม เสมอนเปนการขบไลผชมไปส Web อนทมการออกแบบทดกวา

5. สสามารถสรางอารมณโดยรวมของ WebPage และกระตน

ความรสกตอบสนองจากผชมได นอกเหนอจากความรสกทไดรบจากสตามหลกจตวทยาแลว ผชมยงอาจมอารมณและความรสกสมพนธกบสบางสหรอบางกลมเปนพเศษ

6. สสามารถชวยสรางระเบยบใหกบขอความตาง ๆ เชนการใชสแยกสวนระหวางหวเรองกบตวเรอง หรอการสรางความแตกตางใหกบขอความบางสวน โดยทใชสแดงสำหรบคำเตอน หรอใชสเทาสำหรบสงทเปนทางเลอก

7. นอกเหนอจากการใชสในการออกแบบแลว สยงสามารถสงเสรมเอกลกษณขององคกรหรอหนวยงาน ๆ นนได ดวยการใชสทเปนเอกลกษณขององคกรมาเปนโทนสหลกของ Web Site

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



20

ออกแบบ แตในทางตรงกนขาม การใชสทมากเกนไปอาจทำใหไปบดบงองคประกอบอน ๆในหนา WebPage ได ดงนนการเลอกใชสใหเหมาะสมและเกดประโยชนจงเปนเรองทสำคญ แมวาการเลอกชดของสมามาใชใน WebPage คอนขางจะขนอยกบความชอบของแตละคน อยางนอยควรมความเขาใจถงหลกการใชสเบองตน ทจะชวยในการเลอกใชสชดใดชดหนงจากชดสพนฐานอน ๆ ได อยางเหมาะสมกบลกษณะของ Web Site อยางไรกตามทฤษฎเหลานจะไมทำใหสามารถเลอกชดสไดในทนททนใด แตอยางนอยกจะชวยนำไปในทศทางทถกตองได

รปแบบชดสพนฐาน (Simple Color Schemes)

1. ชดสรอน (Warm Color Schemes) ชดสรอนประกอบดวยสมวงแกมแดง , แดง, สม เหลอง และเขยว

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

2. ชดสเยน (Cool Color Scheme)ชดสเยนประกอบดวยสมวง , นำเงน, นำเงนออน, ฟา, นำเงนแกม

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

3. ชดสแบบสเดยว (Monochromatic Color Scheme)รปแบบของชดสทงายทสดกคอชดสแบบสเดยวทมคาสบรสทธเพยง

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

4. ชดสแบบสามเสา (Triadic Color Scheme)



21

วธการงาย ๆ อกแบบหนงในการเลอกชดสมาใชกคอ การนกถงสามเหลยมดานเทาลอยอยเหนอวงลอส เชน แดง, เขยว, นำเงน จะเหนวาสทงสามสนมการตดกนอยางรนแรง แตสามารถสรางความสะดดตาไดเปนอยางมาก มชวตชวา เปนประโยชนในการนำเสนอขอมลในรปแบบทชดเจน แนนอน แตในบางครงความสดใสดงกลาวอาจมลกษณะฉดฉาดจนเกนไปจนรบกวนการสอความหมายทแทจรงได

5. ชดสทคลายคลงกน (Analogous Color Scheme)ชดสทมรปแบบงายอกแบหนง กคอชดสทมความคลายคลงกน ซง

ประกอบดวยส 2 หรอ 3 สทอยตดกนในวงลอส เชน แดงแกมมวง, สแดง และสสม เนองจากชดสทมอยในรปแบบนมจำนวนมากมายทำใหสามารถเลอกชดสแบบนมาใชงานไดอยางสะดวก และแมสามารถเพมจำนวนสในชดใหเพมขนเปน 4-5 สได แตกลบมผลทำใหขอบเขตของสมความกวางเกนไป ทำใหสทอยตรงปลายทงสองของชดไมมความสมพนธกน เปนสาเหตททำใหลกษณะการมสคลายคลงกนลดลง

การจดทะเบยนโดเมนเนม (Domain Name)

โดเมนเนม หรอ ชอของ Web Site ถอเปนปจจยทมความสำคญเปนอยางยงในการทำ Web Site ซงสามารถใชโดเมนเนมเปนการบงบอกถงตวเองทอาจจะอยในฐานะผผลต ผขายสนคาหรอใหบรการตาง ๆ หรอบงบอกถงลกษณะของสนคาหรอบรการ ตลอดจนลกษณะของ Web Site นน ๆ กได การจดทะเบยนโดเมนเนมแบงออกเปน 2 ระดบใหญ ๆ ไดแก

1. Top Level Domain NameTop Level Domain Name เปนโดเมนเนมในระดบสากล อยใน

ความควบคมดแลของ www.internic.net ซงโดเมนเนมในระดบนแบงนามสกลออกเปน 6 ประเภท ซงแตละประเภทกจะมลกษณะการใชงานทแตกตางกนไปดงน

.com A Commercial Organization

.net Network Access Providers

.org Usually Nonprofit Organization

.edu An Education Intuition

.gov A Government (US Government Only)

.mil U.S. Military Organization

2. Local Domain Name



http://www.internic.net

http://www.internic.net

22

Local Domain Name เปนโดเมนเนมทองถนทในแตละประเทศกจะมโดเมนเปนของตวเอง สงเกตไดจากโดเมนเนมนนจะลงทายดวยชอยอของประเทศ เชน .co.th กหมายถงประเทศไทย .co.jp หมายถงประเทศญปน เปนตน Local Domain Name ในประเทศไทยจะอยในความดแลของ www.thnic.net ซงจะแบงนามสกลตามลกษณะการใชงานไดดงน

.co.th company

.net.th network

.ac.th Academic

.or.th Organization

.go.th Government

.mi.th Military

.in.th Individual

การตดตอระหวาง Client และ Server การตดตอระหวางขอมลตาง ๆของ www ขนอยกบระบบ Client – Server ซงมสวนประกอบสำคญ 3 สวนคอ

รปท 1.6 สวนประกอบของ การตดตอระหวาง

Client และ Server1. Clients2. Server3. Network



Client

Server Client

ClientServer

Information

http://www.thnic.net

http://www.thnic.net

23

ในสวนของ 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 ได

ศพทเทคนคเกยวกบ Internet ทควรร

Web Site : กลมของ WebPage ในหนวยงานเดยวกนทเชอมโยงกนดวยระบบ Hyper Link ใน Web Site หนง ๆ จะประกอบดวย WebPage หลาย ๆ หนา

Home Page : หนาแรกของ Web Site ทผใชจะไดพบเมอเปดเขาไปใน Web Site หนง ๆ ดวยการพมพท

อยของ Web Site ลงในBrowserWeb Page : เอกสาร HTML ทใชเปนสอในการนำเสนอขอมลบนอน

เทอรเนต ซงจะตองอาศย Browser ในการแสดงผล

HTML : ภาษามาตรฐานทใชในการสราง Web เพอนำไปแสดงผลใน Browser ซงจะประกอบดวย ตวอกษร , Graphic , Link ฯลฯ

URL : ยอมาจาก Universal Resource Locator มาตรฐานในการกำหนดทอยของ Web Site ใน เครอขายอนเทอรเนต อาจเรยกอกอยางหนงวา Internet Address



24

บทท 2Adobe Photoshop 7

โปรแกรม Photoshop เปนโปรแกรมยอดนยมในการจดการงานเกยวกบภาพ เนองจากใชในการสรางภาพ และตกแตงภาพ ไดอยางมประสทธภาพ ไมวาจะเปนงานในดานสงพมพ นตยสาร และงานดานมลตมเดย ซงจากการททกทานทราบวาในงาน Web นน ภาพเปนสงสำคญของงาน Web อยางหนงนอกเหนอจากเนอหา หรอ Content ดงนนโปรแกรม Photoshop จงเปนเครองมอสำคญอยางหนงของการทำงาน Web โดยเฉพาะงานดานออกแบบ และตกแตงภาพของ Web Site ใหมเอกลกษณหรอความความพอใจของผทำ Webนนๆ

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

1. การประมวลภาพแบบ Vector เปนการประผลมวลแบบอาศยหลกการคำนวณทางคณตศาสตร

2. การเกบภาพแสดงผลแบบ Bitmap เปนการประมวลผลแบบอาศยอานคาสในแตละพกCell



25

(Pixel) ซงโปรแกรม Photoshop ใชวธนในการประมวลผล ภาพเปรยบเทยบการแสดงผลแบบ Vectorและ Bitmap

เขาสโปรแกรม Photoshop

ตอจากนจะมาทำความรจกกบโปรแกรม Photoshop แตกอนทจะเรมทำงานใน Photoshop มารจกหนาตาของโปรแกรมกนกอน

ขนตอนการเขาโปรแกรม

1. Click Icon บน Desktop2. Clickปม Start > Program > Adobe PhotoShop

รปท 2.1 การเรยกใชโปรแกรม Photoshopหนาจอแรกของโปรแกรม Photoshop

ประกอบดวย องคประกอบดวยสวนตางๆดงตอไปน1. สญลกษณของ Photoshop 2. แถบเมน (menu bar)3. ปมควบคมการทำงาน4. แถบกำหนดรปแบบของเครองมอทใชงาน (Tool Option Bar ) 5. กลองเครองมอ ( Tool Palette)6. Palette ทรวบรวมคณสมบตของการทำงานตาง เชน Navigator,

Color, Layer, History เปนตน



12

3

4

56

6

26

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

คำสง Menu Bar ทงหมด 9 คำสง ขออธบายโดยสงเขปดงน � File เปนคำสงการทำงานเกยวกบไฟล เชน การเปดไฟล

(open) ปดไฟล (close) การบนทก ไฟล (Save) เปนตน� Edit เปนคำสงเกยวกบการปรบแตงตางๆ เชน การตด ( Cut) คดลอก ( Copy ) ปะ (Paste )

เตมส (Fill) และเปลยนขนาด (Transform ) รวมไปถงคณสมบตตางๆ � Image เปนคำสงทเกยวกบการปรบภาพทงหมด เชน สของภาพ การทำภาพขาวดำ การเพม

ความสวาง เปนตน� Layer เปนเมนทรวบรวมคำสงตางๆเกยวกบ Layer ไว เชนการเรยงลำดบกอนหลงของ Layer และความสมพนธกนระหวางแตละ Layer

� Select เปนแถบคำสงททำงานเกยวกบการจดการพนททเลอก มกใชรวมกบ Tools palette

� Fitter เปนแถบคำสงทเกยวกบการปรบเปลยนภาพ มการใส effect ตางๆ ใหกบภาพ โดยม ฟลเตอรทตดมากบตวโปรแกรมมทงหมด 14 กลม มการทำงานทแตกตางออกไป

� View รวบรวมคำสงในการกำหนดมมมองภาพในรปแบบตางๆ การยอ-ขยาย รวมทงเรอง

Grid, Guide และไมบรรทด� Window รวบรวมคำสงทเกยวกบการจดหนาตางแตละหนาตาง ทปรากฏบนจอรวมถงหนาตาง Palette ดวย

� Help รวบรวมวธการใชงาน และคำแนะนำเกยวกบโปรแกรม



27

หลงจากทแตละทานทราบวาแตละเมนมการทำงานเกยวกบอะไร และกอนทจะทำการเรมใชอปกรณตางๆ ในการทำงานตกแตง หรอสรางรปภาพ มาเรยนร 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 ซงเปลยนแปลงตาม ขนาดและ ResolutionWidth : ความกวาง ซงมหนวย ตางๆ เชน พกCell เซนตเมตร นวHeight : ความสง ซงมหนวย ตางๆ เชน พกCell เซนตเมตร นวResolution : คาความละเอยด (ซงความละเอยดบนหนาจอ = 72 )Mode : ใช Mode RGB Color สำหรบการออกแบบWeb

การกำหนดมมมองใน Photoshop

การกำหนดการมองภาพทงหมดโดยใช Toolbox options เปนการกำหนดมมมอง เพอจะมองเหนภาพทงภาพอยางชดเจน โดยการ Click Mouse ท Palette Tool ซงประกอบดวย 3 รปแบบดงนคอ



28

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ไปเรอย ๆ ภาพกจะขยายขนเรอย ๆ

2.2เมอตองการยอภาพ ใหกดคยบอรดทปม Alt คางไวจะสงเกตเหนวาตวช Mouseเปลยนเปน หลงจากนนเลอกบรเวณทตองการยอภาพ และ Click Mouse จะสงเกตเหนวาภาพบรเวณนนจะถกยอลง

กำหนดมมองของภาพ โดยการใช Hand Tool เลอนดภาพ ในกรณทภาพมขนาดใหญ ไมสามารถมองเหนทกสวนของภาพ

ไดในหนาจอเดยว สามารถเลอนภาพเพอดภาพในทกจดได ภายใน



29

หนาจอเดยวไดโดยไมตองอาศย 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 Palette3. กรอบสเหลยมสแดงสดพนทภาพทแสดงบนหนาตางภาพ4. เมอเลอน Mouseไปทกรอบสแดง จะปรากฏ Click Mouse และลากเสนกรอบสแดงไปยงพนททตองการด ใชงานเหมอนคำสง Hand Tool

5. บอกเปอรเซนตการขยายของภาพในขณะนน สามารถพมพตวเลขกำหนดเปอรเซนตการขยายภาพเองได สงเกตวา กรอบสแดงจะเลกลงเมออตราการขยายสงขนและภาพทแสดงในหนาตางภาพกจะมขนาดใหญขนดวย

6. Click Mouse เพอปรบเปอรเซนตการยอเปน Step7. แถบเลอนเพม-ลด อตราการขยายของภาพ ทางขวาเพม ทางซายลด

8. Click Mouse เพอปรบเปอรเซนตการขยายเปน Step

Selection เลอกพนทเพอการแกไข และตกแตงภาพ ความหมายของการ Selection ใน Photoshop หากตองการปรบแตงภาพ แตไมไดเลอกพนทอยางเจาะจง กหมายความวา กำลงปรบแตงทงภาพ ซงในความเปนจรงแลว



30

ภาพบางภาพตองการปรบแตงเฉพาะบางจดเทานน ดงนนการ 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

รายละเอยดของ Function ตาง ๆ ใน Marquee Options



31

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



32

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

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 : ทำใหขอบเรยบไมมรอบขรขระ



33

� Contiguous : เปนการเลอกบรเวณสทใกลเคยงกนเฉพาะกลมพกCellทได Click Mouse เทานน

3. Click Mouse บนพนททเลอก จะเกดเสนประบนพนททเลอก

การเคลอนยายภาพMove Tool เปนเครองมอในการเคลอนยายภาพหรอพนททตองการทำการเคลอนท วธการ :

1. เลอกพนท (Selection) ทตองการหรอรปภาพทตองการ2. Click Mouse เลอกอปกรณ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 จะเปลยนทไปตามสทดดมา

การวาดและระบายสภาพ



34

รปท 2.11 อปกรณ Brush & Pencil Tool

Brushes

เปนการระบายส ซงบางทอาจตองมการตกแตงภาพ หรอใสส ซงสามารถทำการเลอกรปแบบของพกน และขนาดของพกนไดวธการ : 1. เลอกสทตองการ จากนน Click ทแถบเครองมอ Paint Brush Tool2. Drag Mouse ลากระบายสตามทตองการ (หากตองการลากเปนเสนตรงใหกดปม Shift คางไว )

Option ของ Paintbrush

รปท 2.12 Option Bar ขณะทำงานท Brush Tool1. 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



35

Eraser tool วธการใช :

1. Click ทอปกรณ จากนนไปท Option bar เลอกขนาดและรปแบบของยางลบ

2. Click หรอ Drag Mouse ไปยงจดหรอพนททตองการลบ

Eraser Option

รปท 2.15 Option Bar ขณะทำงานท Eraser ToolBrush : เปนการเลอกกำหนดขนาดหรอลกษณะของยางลบOpacity : เปนการกำหนดความโปรงแสงของภาพEraser to History : เปนการเรยกสวนทลบคนมาBrush Dynamics : เปนการใหคาสใน Background ระบายลงไปแทน

Background Eraser Tool เปนการลบคาสพกCellบน Layer ท Drag Mouse ผาน ใหมลกษณะโปรงแสง วธการใช : เหมอน Eraser ToolHistory 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



36

รปท 2.17 Option Bar ขณะทำงานท Paint Bucket Tool

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

Gradient Tool เปนการไลโทนสจากสหนงไปอกสหนง โดยมใหเลอกอย 5 รปแบบ วธการใช :

1. เลอกพนททตองการ2. เลอกเครองมอ Gradient จากนนเลอกรปแบบทตองการบน

Option bars

รปท 2.18 รปแบบของการเทสในลกษณะ Gradient3. Drag Mouse ตามตำแหนงทตองการ

Option Bar

รปท 2.19 Option Bar ขณะทำงานท Gradient Tool

1. เลอกรปแบบสและการไลส ทตองการ2. Mode : กำหนดคาสพเศษ3. Opacity : กำหนดคาโปรงแสง4. Reverse : การไลโทนสกลบดาน5. Dither : ความกลมกลนของแถบส6. Transparency : เปนการปรบการโปรงแสงและใหแสดงผลตอหนาจอ

การตกแตงภาพดวยเครองมอ ตางๆเหลาน



37

รปท 2.20 อปกรณในสวนของการตกแตงภาพ (Blur, Sharpen & Smudge Tool)

Blur Tool

เปนเครองมอททำใหสวนท Cick เบลอ วธการ :

1. เลอกอปกรณ จากนน Click or Drag Mouse ไปยงบรเวณทตองการทำงาน

2. กำหนดคา Option Bar ซงมคาทนาสนใจดงน

รปท 2.21 Option Bar ขณะทำงานท Blur Tool

- Brush : เลอกรปแบบของอปกรณ ขนาด และความฟง เลอกขนาดแปรง รปแบบแปรง โดยการกดปม ลกศร สามเหลยม

- Strength : เปนการกำหนดคานำหนกและความเขมของอปกรณ

Sharpen Tool ชวยเนนความเขมของภาพ และเพมความคมชดโดยลดจำนวนสในภาพลง วธการใช : เหมอน Blur Tool

รปท 2.22 Option Bar ขณะทำงานท Sharpen ToolSmudge Tool เปนอปกรณใน การเกลยส ทำใหสภาพใหดเรยบเนยน และกลมกลนขน วธการใช : เหมอน Blur Tool

รปท 2.23 Option Bar ขณะทำงานท Smudge Tool

เครองมอการปรบสโทนของภาพ



38

รปท 2.24 อปกรณในสวนของการปรบโทนสภาพ (Dodge, Burn & Sponge Tool)

Dodge Tool เปนเครองมอททำใหภาพสวางขน วธการใช : โดยการ Click ลงบนพนททตองการ การกำหนดคา Option Bar ดงน

1. Brush : เลอกขนาดแปรง รปแบบแปรง โดยการกดปม ลกศร สามเหลยม

2. Range : เปนการเลอกรปแบบการทำงาน � Shadows : เปนการปรบแตงสแบบเงา� Midtones : เปนการปรบแตงสใหดเปนธรรมชาต� Highlights : เปนการปรบแตงสแบบฟงๆ หรอเนนพนททจะทำงาน Highlights

รปท 2.25 Option Bar ขณะทำงานท Dodge ToolBurn Tool ทำใหสของภาพดเขมขน วธการใช : เหมอน dodge tool

รปท 2.26 Option Bar ขณะทำงานท Burn ToolSponge Tool

เปนการปรบคา Saturate ของส ทำใหสมความเขมและจางในระดบตางกน วธการใช : เหมอน Blur Tool

รปท 2.27 Option Bar ขณะทำงานท Sponge Tool

การทำสำเนาภาพ

รปท 2.28 อปกรณทใชในการทำสำเนาภาพ (Clone Stamp & Pattern Stamp Tool)

Clone Stamp Toolเปนเครองมอในการ Copy ภาพ บอลลนอยหลายลกในภาพ ตองการเพมอกสกลก



39

ขนตอนการทำ 1. เปดรปภาพทตองการทำ

รปท 2.29 ภาพตวอยางทใชในอปกรณ Clone Stamp Tool2. Click เลอกอปกรณ3. นำ Mouse ไปวางบนภาพทตองการ Copy จากนนกดปม Alt คางไว แลว Click Mouse บนภาพ ซงถอเปนจดเรมตน

4. นำ Mouse ไปวางยงตำแหนงบนพนทวางทจะทำการ Paste โดยการ Click Mouse คางแลวลาก จะปรากฏรปภาพท Copy ขนมา



40

รปท 2.30 การ Copy ภาพโดยใช อปกรณ Clone stamp Tool

Pattern Stamp Tool เปนเครองมอสำหรบการทำสำเนา Pattern โดยวธคราวๆ คอตองสราง Pattern กอน สราง Pattern

1. ทำ Pattern โดยการใช Marquee Select เลอกบรเวณ Selection ทตองการใหเปนสำเนาของภาพ หรอเลอก File ทตองการทำ Pattern

2. เลอกคำสง Edit -> Define Pattern3. เกดหนาตาง Pattern name ใหพมพชอ แลวกดปม O.k.4. จากนน ไปยงหนาตางทตองการ (อาจจะทำการทำพนท

Selection กได) จากนนใชเครองมอ กเลอก ภาพท Option Bar จากนนกClick Mouse บนภาพ

รปท 2.31 Option Bar ขณะทำงานท Pattern Stamp Tool

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 หรอแบบเจาะใส ซง



41

สามารถพมพอกษรไดทงแนวนอนและแนวตง

การสรางขอความโดยใชเครองมอ 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 Tool5. กำหนดรปแบบตวอกษร ขนาดและสของตวอกษร เมอพมพกความเรยบรอย กดปม Enter หรอClickท Icon และถาไมตองการใหกดปม

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 ทตองการ



42

2. Clickท บน Option toolbar 3. เกดหนาตาง Warp text

รปท 2.36 การทำงานของ Warp Text� Style เลอกลกษณะรปทรงขอความ จากนนกปรบรปทรงตามความตองการ

4. Clickปม O.k.5. Clickท Icon บน option Toolbar

ผแตง อ. ฐตยา วบลยกาญจน

E m a i l : : [email protected]

Layer

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



43

รปท 2.37 เปรยบเทยบลกษณะการทำงานของ Layerการใชงาน Palette Layer

Palette Layer เรยกขนมาใชงาน โดยเลอกแถบเมน Window > Show Layer ใน Palette Layer จะมคำสงทควบคมลกษณะการใชงานของ Layer ทงหมด

รปท 2.38 การเลอก Palette Layer ขนมาใชงาน



44

รปท 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ใหมเกดขน



45

รปท 2.41 การสราง Layer ใหม

การเปลยนชอLayer (Rename Layer)

เมอ New Layer ใหมขนมาควรจะตงชอใหกบ Layer นนเพอความสะดวกในการเลอกทำงาน การตงชอ Layer ใหClick Mouse ขวาทชน layer นน เลอก Layer Propeties

รปท 2.42 การเปลยนชอ Layer



46

รปท 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 ไปวางไวในตำแหนงใหม มผลใหการจดลำดบของภาพทหนางานถกสลบไปดวย



47

รปท 2.45 หนางานกอนการเปลยนลำดบชน Layer

รปท 2.46 หนางานหลงจากการเปลยนลำดบชน Layer แลว

การซอน Layerสำหรบการสรางงาน 1 ชนจะประกอบดวยจำนวน Layer มากมาย

บางครงเพอความสะดวกในการทำงานอาจตองการซอนบาง Layer ไปชวคราว ซงสามารถทำไดโดย� Clickท เปนการปดตาชน Layer นน มผลใหภาพทอยใน Layer นนถกซอนไป

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



48

รปท 2.47 แสดงการซอน Layer

การเชอมโยง Layer

การเชอมโยง Layer เขาดวยกนเรยกวา การ Link Layer เปนการเชอมโยง Layer ตงแต 2 Layer เพอความสะดวกในการเคลอนยายภาพทตองการยายพรอมๆ กน รวมทงการปรบขนาดของภาพทอยคนละ Layerใหมการปรบเปลยนขนาดพรอมๆ กนดวย

วธการ Link Layer� Clickเลอก Layer ใด Layer หนงทตองการจะ Link

� Clickท ซงอยถดจาก ของอก Layer ทตองการเชอมเขาไวดวยกน

จะมสญลกษณ ปรากฏขน� ถานำ Move Tool มาเคลอนยายภาพ ภาพใน 2 Layer จะถกเคลอนยายไปพรอม ๆ กน



49

รปท 2.48 การ Link Layer

วธการยกเลก Link ถาตองการให Layer ท Link เอาไวดวยกนทำงานเปนอสระ

อกครง สามารถทำไดโดย Click Mouse ทชองเดม รปโซจะหายไป

การทำซำLayer

ในกรณทตองการภาพหรอวตถทมลกษณะเหมอนวตถเดมทมอยแลว สามารถใชคำสง Copy Layer โดย

1. Clickเลอกท เลอก Duplicate Layer



50

รปท 2.49 การ Copy Layer แบบท 1

2. Click Mouse ท Layer ทตองการ Copy แลว Drag Mouse ลาก Layer ลงมาวางท ทอยดานลาง Palette

รปท 2.50 การ Copy Layer แบบท 2

การลบ Layer

ภาพหรอวตถทสรางขนมาแลว ถาตองการจะลบออกไป สามารถทำไดหลายวธ



51

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.1Clickเลอก Layer ทตองการ1.2Click เลอก Merge Down 1.3Layer ททำงานอยจะลงมารวมกบ Layer ชนลาง



52

รปท 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 นนมความโปรงแสงมากขน จนสามารถมองทะลลงไปเหนภาพทอยดานลางได



53

รปท 2.53 การปรบคา Opacity

Layer Style

เปนคำสงทใชในการกำหนด Style หรอ Effect ตาง ๆ ใหกบวตถบน Layer นน ๆ สามารถเลอกใชไดโดย Click ทสญลกษณ จะปรากฏหนาตางของ Style ตาง ๆ ใหเลอก ซงมอยหลากหลาย Style ดงน

รปท 2.54 การกำหนด Layer Style

รปท 2.55 ภาพตนฉบบกอนการใส Layer Style� Drop Shadow

เมอเลอกใช Style นจะเปนการสรางเงาใหกบวตถ ซงเงาจะเกดภายนอกวตถ ถาตองการปรบเปลยนลกษณะของเงา สามารถปรบไดท Option ดานขวา



54

รปท 2.56 การปรบคาท Drop Shadow Style

� Inner Shadow เปนการสรางเงาใหกบวตถเชนเดยวกน แตเงาจะเกดภายในวตถ

รปท 2.57 การปรบคาท Inner Shadow Style

� Outer Glowเปนการสรางแสงเรอง ๆ ใหเกดขนรอบ ๆ วตถ การปรบขนาด

หรอการเปลยนสของแสง สามารถปรบเปลยนท Option



55

รปท 2.58 การปรบคาท Outer Glow Style

� Inner Glow เปนการสรางแสงเรองๆ ใหเกดขนภายในวตถ

รปท 2.59 การปรบคาท Inner Glow Style

� Bevel Embossเปนการทำใหวตถมความหนา นน ทำใหดมมตมากขน



56

รปท 2.60 การปรบคาท Bevel Emboss Style

� Satin

รปท 2.61 การปรบคาท Satin Style

� Color Overlayเปนการเปลยนสใหกบวตถ



57

รปท 2.62 การปรบคาท Color Overlay Style

� Gradient Overlay : เปนการใสสแบบไลโทนสใหกบวตถ

รปท 2.63 การปรบคาท Gradient Overlay Style� Pattern Overlay : เปนการใสลวดลายรปแบบ Pattern ใหกบวตถ



58

รปท 2.64 การปรบคาท Pattern Overlay Style� Stroke : เปนการใสเสนขอบใหกบวตถ

รปท 2.65 การปรบคาท Stroke Style

บทท 3การใชงาน Pen Tool ,Menu Image และ Filter

การวาดภาพและเลอกพนทโดยใช Pen Tool

การใช Pen Tool ในการวาดภาพจะประกอบดวยคำสงตาง ๆ โดยภาพทไดจากการใช Pen Tool ในการสรางจะสามารถยอ ขยาย ยด หด และเสนทสรางจะไมสญเสยรายละเอยดของภาพ

- การวาดเสน (Path)ใหเลอกโหมดท Top bar ดานบนเปนโหมดทใชสำหรบการวาด

(Create new work Path) จากนนใช mouse เลอกทไอคอน ทอยใน Toolbox โดย Click ใหเชอมกนทละจด ผลลพธทไดจะปรากฏดงรป



59

รปท 3.1 แสดงการใชอปกรณ Pen Tool

- การเพมและลบรอยตอของเสน Path ดวย Add (Anchor Point Tool)

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

รปท 3.2 การเพมและลดรอยตอของเสน Path

- การเคลอนยายจดรอยตอของเสน Path ดวย Direct Selection Tool



60

เลอกไอคอน จากนนClick Mouse เลอกไปยงตำแหนงทตองการ

รปท 3.3 การเคลอนยายจดรอยตอของเสน Path

- การเปลยน Path ใหเปน Selectionการเปลยน Path ใหเปน Selection โดยเลอกท Palette Path จากนน

เลอกลกศรดานขางแลวเลอก Make Selection หรอ จะเลอกท Menu Path ดานลางโดยตรงโดยทปมเลอกจะเปนลกษณะวงกลม เสนประ



61

รปท 3.4 การทำ Selection จากเสนPathการจดการเกยวกบรปภาพ

การยอและขยายภาพโดยใชคำสง Edit > Transform > Scale หากตองการยอ,ขยายใหเทากนทกดาน สามารถทำไดโดยการ กด

Shift คางไวแลวจงยอหรอขยาย ดงรปท 3.5

รปท 3.5 เมนคำสง Edit >Transform > Scale



62

รปท 3.6 หลงจากขยายเสรจแลวกเลอกเครองหมายดานขวาบนเพอตกลงหรอ ยกเลก

การหมนภาพ โดยใชคำสง Edit > Transform > Rotate

จะทำในลกษณะเดยวกนกบ การยอและขยาย แตจะทำการหมนภาพแทน และยงมคำสงทสามารถใชหมนในลกษณะเปนองศาไดอกดวย ดงรป 3.7

รปท 3.7 การหมนรปภาพโดยใช คำสง Edit >Transform > Rotate

การปรบ Mode ตาง ๆของภาพ



63

ทำการเลอกท Menu Image>Mode เพอทำการเลอก Mode ของภาพทตองการปรบเปลยน ดงรปท 3.7 โดยปกตในงาน Web จะทำการปรบ Mode ของภาพเปนแบบ RGB Color แตถาตองการเปลยน กใหไปเลอกทชอของ Mode รปภาพทตองการเปลยนไดเลย เมอเลอก Mode แลวจะมเครองหมายถก อยดานหนาชอของ Mode ททำการเลอก

รปท 3.8 การปรบรปแบบคาสตางๆ ของภาพการปรบแตงภาพโดยใช Menu Image



64

รปท 3.9 การปรบภาพท Menu Image > Adjustments >… - การปรบ ภาพโดยใช Menu Image > Adjustments > Levels…

ใหทำการเลอกท Menu Image > Adjustments > Levels… แลวจะปรากฏหนาตางสำหรบปรบแตงงานของขนมาดงรปท 3.10

รปท 3.10 หนาตางปรบคาของคำสง Level

- การปรบภาพโดยใช Menu Image > Adjustments > Curves…

ใหทำการเลอกท Menu Image > Adjustments > Curves… แลวจะปรากฏหนาตาง สำหรบปรบแตงงานขนมาดงรปท 3.11



65

รปท 3.11 หนาตางปรบคาของคำสง Curve- การปรบภาพโดยใช 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



66

รปท 3.13 หนาตางปรบคาของคำสง Hue/Saturation

- การปรบภาพใหเปนโทนสแบบขาว/ดำ จะใช Menu Image > Adjustments > Desaturate เมอทำการเลอกท

Desaturate แลวภาพทตองการปรบกจะกลายเปนสขาว/ดำ ทนท

- การกลบคาสของภาพ จะใช Menu Image > Adjustments > Invert ในการกลบคาส ให

ทำการเลอกท Invert แลวภาพททำงานอยกจะทำการกลบคาสทนท

- การปรบคาสของภาพใหทำการเลอกท Menu Image > Adjustments > Variations… กจะ

ปรากฏหนาตาง สำหรบปรบแตงภาพดงรป 3.14

รปท 3.14 หนาตางปรบคาของคำสง Variations

- การทำการสำรองงาน



67

ใหทำการเลอกท 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)

ฟลเตอร เปนคำสงทใชในการตกแตงภาพดวยเทคนคพเศษและ ไดผลลพธออกมาในเวลาทรวดเรว

- การใชงานฟลเตอร



68

การทำงานของฟลเตอรจะประกอบดวยสวนหลกๆคอ สวนทใชแสดงผล และ สวนของการปรบแตง การเลอกใชงานฟลเตอรแตละตวกสามารถClickเลอกไดท Menu > Filter ดงรป

รปท 3.17 การยกตวอยางการใสฟลเตอร Render > Lens Flare

- การใชงานฟลเตอรสรางลกเลนใหกบภาพการใชงานฟลเตอรแบบ Liquify เปนฟลเตอรทใชในการตกแตง

ภาพ เชนเดยวกบฟลเตอรทวไปแตจะแตกตางกนทไมตองตงคาการปรบแตง การเลอกใชงานกสามารถClickเลอกไดท Menu Filter > Liquify

รปท 3.18 การยกตวอยางการใสฟลเตอร จากการปรบแตงของคำสง Liquify



69

ผแตง อ. สรกาญจน นมอนงค Email :: [email protected]

อ. นธสทธ สขแสง Email :: [email protected]

บทท 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



mailto:[email protected]




70

นนแตกตางกนไปตามเปาหมายและลกษณะของ Web Site การออกแบบบางอยางทเหมาะสมกบ Web Site หนงอาจจะไมเหมาะสมกบอก Web กได Web Site บางแหงอาจตองการความสนกสนาน บนเทง ขณะทอก Webหนงตองการความถกตอง นาเชอถอเปนหลก

อาจสรปไดวา การออกแบบทด คอการออกแบบใหเหมาะสมกบเปาหมายและลกษณะของ Web Site โดยคำนงถงความสะดวกในการใชงานของผใชเปนหลก

รปท 4.2 ตวอยาง Web Site ทมรปแบบเปนเอกลกษณและ สมพนธกบผลตภณฑ

การออกแบบของทงสอง Web Site น ( รปท 4.2 ) มจดเดนในเรองของรปแบบทเปนเอกลกษณและสมพนธกบลกษณะของผลตภณฑ มระบบ Navigation ทเขาใจงาย ใชงานงาย แสดงถงความถกตอง นาเชอถอ

รปท 4.3Web nike.com เปนการออกแบบท แสดงถงสนกสนาน นำแอคชนตางๆของคนมาใช แมไมใชภาพเคลอนไหว แตกดไมหยดนง

การออกแบบโครงรางของหนาWeb1. แบงหนาWebออกเปน 3 สวน



71

2. แบงหนาWebออกเปน 2 สวน

3. แบงหนาWebออกเปน 1 สวน

ความสำคญของระบบNavigationการนำทางทดและเขาถงขอมลอยางสะดวกเปนหวใจสำคญของ

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



72

รปท 4.4 ตวอยาง Web Site ทมระบบ Navigation ทด

การออกแบบหนาWeb

แนวคดในการออกแบบหนาWeb- เรยนรจาก Web Site ตาง ๆ เปนวธหนงทจะชวยใหคณมไอเดยในการออกแบบหนาWebของคณ โดยการดรปแบบ และเทคนคจากW e bตางๆซงอาจจะเปนW e bคแขงหรอW e bทอยในกลมเดยวกนกได และนำลกษณะทดของWebนนมาประยกตใช



73

- ประยกตรปแบบจากสงพมพ สามารถนำรปแบบการออกแบบจากสงพมพมาใชเชน ลกษณะโทนส การออกแบบGraphic ตวอกษร มาใชได

คณสามารถออกแบบWebใหมหนาตาคลาย โปสเตอร แมกกาซนหรอแมกระทงหนาจอทว ไดดวยเทคนคการออกแบบตางๆโดยไมจำกด ลองพยายามศกษา และสงเกตเทคนคการออกแบบโดยเฉพาะทางGraphicดไซนจากสอตางๆ ไมวาจะเปนหนงสอ, Magaz ine , โปสเตอร, ทว และทสำคญทสดคอจาก Web Site อนๆดวย

รปท 4.5 ตวอยางการออกแบบ Web Site โดยใชเทคนคจากสอตาง ๆ

การสรางลำดบขนความสำคญขององคประกอบลกษณะขององคประกอบตางๆทควรคำนงถงมดงน

1. ตำแหนงและลำดบขององคประกอบ เพอเนนใหเหนวาอะไรเปนเรองสำคญมาก สำคญรองลงไป หรอสำคญนอยตามลำดบ ขนาดขององคประกอบตางๆในหนาWebจะชวยสอความหมายถงความสำคญของสงหนงไดโดยองคประกอบทมขนาดใหญยอมสามารถดงความสนใจของผใชไดกอน และนำมาจดระเบยบองคประกอบใหเหมาะสม

2. สและความแตกตางของส สทเดนชดเหมาะสำหรบองคประกอบทมความสำคญมาก สวนองคประกอบทใชสเดยวกนยอมสอความหมายถงความสมพนธทใกลชด และความสำคญทเทาเทยมกน การใชสทแตกตางกนจะชวยดงดดความสนใจใหผใชมองเหนและ



74

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

3. ภาพเคลอนไหว ชวยดงดดและสรางความนาสนใจไดเปนอยางด แตตองใชอยางจำกดและระมดระวง เพราะถาใชภาพเคลอนในหนาW e bมากเกนไป จะสรางความรำคาญใหกบผใชและผใชตดสนใจลำบากวาสงไหนสำคญกวากน

การสรางรปแบบ บคลก และสไตลรปแบบของหนาWebนนขนอยกบเนอหาและเปาหมายของ Web Site

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

1. รปแบบ เลอกรปแบบหนา Web ทเหมาะสม ชวยสรางบรรยากาศและความเขาใจของผใชไดเปนอยางด เชน We b เกยวกบภาพยนตร กอาจจะออกแบบหนา Web ใหคลายกบโรงหนงจรงๆ หรอ Webเกยวกบการทองเทยวกออกแบบโดยนำภาพธรรมชาตมาใชตกแตง

2. บคลก Webแตละประเภทมบคลกลกษณะแตกตางกนไป ขนอยกบเนอหาและเปาหมายในการนำเสนอ Webแตละแหงสามารถใหความรสกสนกสนาน, เชยวชาญ, วชาการ, ทนสมย, ลกลบ หรอเปนทางการ เชนถาออกแบบ Web เกยวของกบเทคโนโลย กควรออกแบบใหแสดงถงความทนสมย ไฮเทค เชนเดยวกบเนอหาภายใน Web

3. สไตล หมายถงการจดโครงสรางของหนา รปแบบGraphic, ชนดและการจดตวอกษร, ชดสทใช ไมควรสราง สไตลตามอำเภอใจโดยไมคำนงถงความเหมาะสม สไตลของ Web Site ควรมความสมพนธกบเนอหาภายใน Web อยางมเหตผลไมใชใชเพยงเพอแสดงฝมอวาคณสามารถตกแตงGraphicโดยใชเทคนกแปลกๆได



75

รปท 4.6 ตวอยางการออกแบบ Web site ตามเนอหาและเปาหมายของ Web site

การเลอกใชสในการออกแบบหนาWebสสนในหนา Web ชวยดงดดและสรางความนาสนใจใหกบ Web

Site เปนสงกำหนดบรรยากาศและความรสกโดยรวมของ Web Site สามารถใชสไดกบทกองคประกอบของ WebPage ตงแต ตวอกษร, รปภาพ, Link, สพนหลงและรปภาพพนหลง การเลอกใชสอยางเหมาะสม จะชวยสอความหมายและสรางความสวยงามใหกบ Web นน

ประโยชนของสใน Web Site ในรปแบบตางๆมดงน1. สสามารถชกนำสายตาผอานใหไปยงทกบรเวณในหนา Web การเลอกเฉดสและตำแหนงของสอยางรอบคอบจะเปนประโยชนอยางมากเมอคณตองการใหผอานใหความสนใจกบสวนใดสวนหนงในหนา Web Site เปนพเศษ



76

2. สชวยเชอมโยงบรเวณทไดรบการออกแบบเขาดวยกน เชน ผอานจะมความรสกวาบรเวณทมสเดยวกนเปนเรองเดยวกนหรอมความสำคญเทากน

3. สสามารถนำไปใชในการแบงบรเวณตางๆออกจากกน4. สสามารถใชในการดงดดความสนใจของผอานใหพวกเขาอยใน

Web Site ไดนานยงขน5. สสามารถสรางอารมณโดยรวมของ WebPage กระตนความรสกตอบสนองจากผชมได

6. สชวยสรางระเบยบใหกบขอความตาง ๆ เชนใชสแยกสวนระหวาง หวเรองกบเนอเรอง

การเลอกสในการการออกแบบใหเหมาะสมชวยสงเสรมเอกลกษณขององคกร หรอหนวยงานนนๆได

การจดระบบขอมล Graphic บน Web ServerFile และ 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 สำหรบรปภาพทม สนอย สพนๆไมซบซอน เชน รปโลโก ลายเสน รปการตน และรปตวอกษร



77

รปท 4.7 ตวอยางการ Save งาน เปน File Gifถาตองการทำใหบางบรเวณของรปภาพมลกษณะโปรงใส (Transparent) จะตองเลอกรปแบบการ Save เปน .Gif เปน Graphic ชนดเดยวทมคณสมบตโปรงใสและใชไดกบทกBrowser

รปท 4.8 ตวอยางการ Save File แบบ Gif ทมลกษณะ โปรงใส (Transparent)

โดยทวไปแลว สามารถใช .Gif ไดกบรปภาพทกประเภท โดยเฉพาะ รปGraphic, รปแผนภม และGraphicทประกอบดวยตวอกษร แตสำหรบภาพถายหรอรปทมโทนสตอเนอง มสเยอะ จะเหมาะกบแบบ .JPEG มากกวา ซงจะใหภาพทมคณภาพสงกวาและขนาด File จะเลกกวาอกดวย

การ Save for Web แบบ Gif



78

รปท 4.9

สวน Graphic รปแบบ JPEG ความละเอยดของส 16.7 ลานสเหมะสำหรบการบบอดรปภาพ ประเภท ภาพทมสเยอะ, รปถาย, รปเสมอนจรง

รปท 4.10 ตวอยางรปในลกษณะ ของ JPEG



79

รปท 4.11 ตวอยาง Window optimize แบบ JPEG

การ Crop File คอการตดภาพเปนสวนๆเพอเตรยมเปน File วตถดบ กอนจะนำไป

ประกอบในการจด htmlการ Crop File ภาพ แบบท1 (ภาพทงผนมาตอกน) ใช Grid แบงภาพทออกแบบเปนสวนๆ แลว Crop ภาพเปนชนๆ แลวจงคอยนำมาตอกนในโปรแกรม Golive คลายการตอ จกซอว

การ Crop File ภาพ แบบท 2 (ตดทละสวนและม ภาพ background )ใช Grid แบงภาพ และเลอก Crop เฉพาะบรเวณทมรปภาพอยโดยไมเอา background แลวCrop ภาพเปนชนๆ แลวจงคอยนำมาตอกนในโปรแกรม Golive



80

รปท 4.12 ตวอยางในการ Crop file

รปท 4.13 หลงจากตดไฟลเปนสวนๆแลว

ขนตอนการ Crop File + Save for Web1. เลอกอปกรณ Crop แลวนำมา Crop File ภาพทตองการ



81

2. ปรบขนาดใหพอดกบภาพ (ถาตองการยกเลกกด ESC) กด Enter (ถาตองการยกเลกกด ESC)

3. ไปทเมน File เลอก Save for Web เลอกรปแบบการ save ตามลกษณะของรปภาพ



82

4. Edit Step Backward เพอกลบไปยงรปตนฉบบ กลบไปเลอกอปกรณ

ผแตง อ. วรวลย เกษรศร E m a i l : : [email protected]

บทท 5การสรางงาน HTML ดวยโปรแกรม Adobe Golive 6 อยางม

ประสทธภาพ





83

จากเนอหาในสวนของบทท 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

องคประกอบของโปรแกรม Adobe Golive 6



84

หลงจากทเปดโปรแกรม Adobe Golive 6 ขนมาแลว จะพบหนาจอดงรปท 5.1

รปท 5.1 หนางานหลกของโปรแกรม Adobe Golive 6

จะสงเกตเหนวามหนาตางของเครองมอพนฐานอย 2 กรอบ ซงตอไปนจะเรยกแฟมอปกรณในหนาตางนวา พาเลท (Palette) และสำหรบในบทนจะกลาวถง พาเลท Object, Color และพาเลท Inspector ซงเปนพาเลท ของอปกรณพนฐานในการจดการและควบคมการสรางหนา Web ของ ซงจะมรายละเอยดดงน

- Palette Object

รปท 5.2 อปกรณตางๆ ในพาเลท Object



85

ทพาเลท Object จะแบงสวนการทำงานออกเปน 2 สวน คอ - Tab อปกรณหลก มทงหมด 11 ชด แตจะขอกลาวเพยง 5 ชดแรก

ทใชในการสอนเทานน ดงน 1. Tab Basic เปนชดอปกรณพนฐานทใชในการจดการรปแบบของ Webpage แตละหนา

รปท 5.3 Tab Basic

2. Tab smart เปนชดอปกรณ ในสวนของการตกแตงและเพมลกเลน เทคนค ใหหนา Webpage มสสนมากขน

รปท 5.4 Tab smart

3. Tab forms เปนชดอปกรณในการตกแตงสวนทเปนแบบฟอรม รบคาตางๆ



86

รปท 5.5 Tab forms

4. Tab Head เปนชดอปกรณสำหรบเพม Tag “<>” คำสงตางๆ ทชวงของ Tag Head

รปท 5.6 Tab Head

5. Tab Frames เปนชดอปกรณในการจดการโครงสรางของ Web Site ทสราง ในรปแบบของ Frames

รปท 5.7 Tab Frames



87

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

- Palette Color

รปท 5.8 อปกรณตางๆ ในพาเลท Color

ทพาเลท Color จะแบงสวนการทำงานออกเปน 2 สวนเชนเดยวกนกบ พาเลทอน ๆโดยอปกรณหลกท พาเลทน จะเปนการแยกประเภทการคนหาสทตองการใชในแตละความตองการ และความถนด แบงไดดงน

1. Tab Gray Slider จะเปนการไลเฉดสในสวนของโทนสเทา ใชการเลอกเปนแถบเลอน

รปท 5.9 Tab Grey Slider



88

2. Tab RGB Sliders เปนการไลเฉดสในลกษณะของ R G B Color ใชการเลอกเปนแถบเลอน

รปท 5.10 Tab RGB Sliders3. Tab CMYK Sliders เปนการไลเฉดสในลกษณะของ CMYK

Color ใชการเลอกเปนแถบเลอน

รปท 5.11 Tab CMYK Sliders4. Tab HSB Wheel เปนการเลอกสลกษณะแบบถาดส

รปท 5.12 Tab HSB Wheel



89

5. Tab HSV Picker เปนการเลอกสลกษณะทเลอกโทนสกอน แลวคอยเลอกส จากถาดสตรงกลาง

รปท 5.13 Tab HSV Picker

6. Tab Palettes เปนการเลอกสทจดไวให จะคลายกบการใชงานท Palette Color ของโปรแกรม Adobe Photoshop

รปท 5.14 Tab Palettes7. Tab Web Color list เปนการเลอกสในลกษณะทมการใชงานทบอยทสด และเหมาะสำหรบการทำงานในรปแบบทตองมการกำหนดคาสทแนนอน สทอยในแถบนจะเปนสทใชใน Web Site ไดโดยจะไมมการเพยนของส

รปท 5.15 Tab Web Color List



90

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 จะเปลยนตามลกษณะการทำงานทเกดขน เปนคณสมบตของอปกรณในแตละตว มความสำคญเปนอยางมากกบการทำงาน



91

รปท 5.17 Palette Inspectorเตรยมพรอมทำงานออกแบบหนา Web page

กอนทจะเขาสเนอหาในการสราง Web Page จะขอแนะนำสวนทเปน Main Tab ทตองใชงานตลอด

- หนาตาง Layout (Layout Editor)ใชสำหรบออกแบบหนา Webpage ซงหนา Webpage ทถกสรางขนมานสามารถนำ Object ตางๆ เขาไปรวมทำงานได

รปท 5.18 หนาตาง Layout- หนาตาง Frame (Frame Editor)หนาตาง Frame มหนาทสำหรบออกแบบหนา Web page ทมการจดโครงสรางเปนลกษณะของหนาจอแบบเฟรม

รปท 5.19 หนาตาง Frame



92

- หนาตาง 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



93

แตละหนาตางจะมความสมพนธกน โดยถามการแกไขเกดขน หนาตางอนๆจะมผลกระทบตามไปดวย

ขนตอนการเตรยมเอกสาร .html (Web page)Workshop

หลงจากทไดทำความรจกกบองคประกอบตางๆ ของอปกรณพนฐานในโปรแกรม Adobe Golive 6 กนมาบางแลว เนอหาตอจากนจะเรมเขาสกระบวนการทดลองทำหนา Webpage อยางงาย รวมไปถงการสรางจดเชอมโยง (Link) ใหกบ Webpage แตละหนาอยางมประสทธภาพและไมซบซอน โดยจะแบงขนตอนในการสรางหนา Webpage ออกเปน 4 ขนตอน ดงน

1. การสรางหนา Webpage (เอกสาร .html)2. การพมพ Text 3. การสรางจดเชอมโยง (Link) ใหกบหนา Webpage4. การบนทกงานอยางถกหลกกอนทำการ Upload

Step 1 : การสรางเอกสาร .htmlในขนตอนนจะมาทดลองสรางหนา We b p a g e จากไฟลงาน

ตวอยางอางองทไดเตรยมเอาไว 2 หนา ไดแก - หนา Webpage ทเปนหนา Homepage

รปท 5.22 หนาตวอยางทนำมาเปน Home page



94

- และ หนา Webpage ทเตรยมใชทดสอบทำ Link

รปท 5.23 หนาตวอยางอกหนาหนงนำมาเปน Web page

1. เรมสรางหนา Homepage โดยเปดไฟลเอกสารใหมโดยใชคำสงจากเมน File > New Page

รปท 5.24 สรางเอกสารใหมจากเมน File



95

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



96

รปท 5.26 การกำหนดคาเตรยมทำงานท Inspector Page Properties

3. นำอปกรณ Layout Grid ทอยใน Palettes Basic มาวางทหนา Layout แลวกำหนดคาความกวาง ความสงตามทไดออกแบบเอาไวใน Photoshop ในชอง Width และ Height



97

รปท 5.27 การจดวางอปกรณ และตงคา Layout Grid4. เปด Palettes Tracing Image ในเมน Window > Tracing Image

รปท 5.28 เมน Tracing Image

แลว Browse ภาพทเปนตนแบบใน Photoshop ขนมาเพอเปนไกดในการจด Layout ของตำแหนงภาพแตละรป โดยClickทชอง Source แลวClickทแฟมสเหลองเพอ Browse ภาพทตองการมา จากนนจะมภาพตนแบบปรากฏใหเหนลาง ๆ ทางดานหลงเปนการอำนวยความสะดวกในการจดวางรปภาพลงบน Layout Grid ไดตรงตามตำแหนงทออกแบบเอาไวใน Photoshop



98

รปท 5.29 การตงคาท เมน Tracing Image

Tip & Trick

การปรบคา Opacity ท Palettes ของอปกรณ Tracing Image เปนการกำหนดคาความเขมจางของภาพ Background ซงสามารถปรบคาความเขมของภาพ Background ไดตามตองการ

5. ขนตอนตอมากคอการนำเอารปภาพแตละรปทได Crop มาเปนชนๆ จาก Photoshop มาวางประกอบกนบนพนทงานทปอปกรณ Layout Grid เตรยมเอาไว



99

รปท 5.30 วตถรปภาพทจดเตรยมมาจาก Photoshop โดยใชอปกรณ Image ทอยใน Palettes Basic มาวางแลวClickทแฟมสเหลองเพอ Browse ภาพขนมา โดยในเรมตนวางภาพจากมมบนซายมาทางดานขวา และดานลาง เนองจากภาพท Browse ขนมาจะดนตวจากทางดานซายไปขวาเสมอ



100

รปท 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 เขามาชดกบวตถทอยนอกสด



101

รปท 5.32 Inspector ขณะทำงานทอปกรณ Layout Grid

Tip & Trick

หากตองการปรบขนาดของ Grid ใหมขนาดเทาเดมใหปรบคาท Inspector Clickท Optimize ขนาดของ Grid จะยอลงมาชดกบวตถ แตถาหากมาปรบขนาดของ Grid โดยการพมพคาลงไปในชอง width กบ height ใหมขนาดเทาเดมในบางครงเมอเวลาท preview อาจทำให Layout ของวตถทวางลงไปกระจดกระจายได

ในขนตอนน การออกแบบทจดไวในสวนของรปภาพกเสรจสมบรณ ในสวนตอไปจะเปนเกยวการจดเนอหา ขอความตาง ๆ ของ Web Site



102

รปท 5.33 แสดงผลของการจดเรยงภาพทเสรจแลวผานทาง Browser

Tip & Trick

สรปขนตอนการสรางเอกสาร .html1. เมอเลอกเมนคำสง File > New 2. เตรยมเอกสารกอนจด Layout

.1 เปลยนชอ Title ท Page Properties

.2 เลอกส หรอใสรปภาพท Background

.3 วางอปกรณ Layout Grid ลงบนพนงาน3. เรมจด Layout รปภาพดวยอปกรณ “Image”4. บนทกเอกสารหนาแรก เปนชอ index.html เพอใชเปนหนา

Homepage และคอยบนทกงานเปนระยะๆ ไปตลอด

Step 2 : การพมพตวอกษร จดขอความ



103

นำอปกรณ Layout Textbox มาวางลงทหนางาน แลวพมพขอความทตองการลงไป จดเรยงใหเรยบรอย

รปท 5.34 อปกรณ Layout Textbox



104

รปท 5.35 รปแบบเมอจดขอความเรยบรอยแลว

ในสวนน หากวาตองการพมพภาษาไทย ตองเปลยนใหคามาตรฐานของ Webpage เปนอกษร Unicode กอน (ใน Program Adobe Golive จะใช UTF-8) โดยเขาไปเลอกท Menu File > Document Encoding > Unicode (UTF-8)



105

รปท 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 นน ๆ ทไดกำหนดใชงาน โดยเรมแรกนจะกำหนดการเชอมโยงอยางงายๆ ดงน



106

1.1 เลอกขอความทตองการทำเปน Link โดยการไฮไลทเลอกทตว Text

รปท 5.37 การเลอกพนททำ Link1.2. หลงจากนนใหสงเกตท หนาตาง Palettes Inspector จะพบวา

ลกษณะของคำสงใน Palettes Inspector จะเปลยนไปเปนคำสงของ Text ใหClickทโซ เพอทำให Text เปน Link และในชอง Empty Reference Clickทแฟมสเหลอง Browse หาไฟลงานทตองการให Link ไปหาขนมา



107

รปท 5.38 Clickโซ Link แลวเลอกไฟลทตองการ2. การสรางจดเชอมโยงดวยรปภาพ ( Image Link ) การใชรปภาพสำหรบการสรางจดเชอมโยงเปนอกวธหนงทไดรบ

ความนยมในการนำเสนอWebไซดในปจจบน เนองจากรปภาพสามารถสอความหมายบางอยางไดอยางชดเจนกวาขอความ รวมทงสามารถเพมเตมแตงลกเลนตางๆ ไดอยางมากมาย วธการสรางจดเชอมโยง Webpage ดวยรปภาพนนสามารถทำไดดงน

2.1 Clickเลอกรปภาพทตองการทำเปน Link 2.2 หลงจากนนใหสงเกตท Palettes Inspector จะเปลยนเปน

คำสงของ ImageใหClickเลอกทำงานท Tab Link ใหClickทโซ เพอทำให Text เปน Link และในชอง EmptyReference Clickทแฟมสเหลอง Browse หาไฟลงานทตองการให Link ไปหาขนมา



108

รปท 5.39 การเลอกรปภาพเพอทำ Image Link

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

Map Link เปนการทำ Link ทภาพ โดยสามารถกำหนดพนท Link ในภาพได และภายในภาพเดยวกนนนยงสามารถกำหนดไดหลายๆ พนท Link อกดวย วธการสรางนนมดงน

- Clickเลอกรปภาพทตองการทำเปน Map Link



109

รปท 5.40 เลอกรปทตองการทำ Map Link- กำหนดการทำงานท Palettes Inspector Clickเลอกทำงานท

Tab More Clickเลอกทชองของ Use Map เพอเปนการบอกวาจะใชงานของ Map ในการกำหนดจด Link

รปท 5.41 Tab More ทการทำงานของ Image Map



110

- Cl ickเลอกลกษณะรปแบบของการกำหนดขอบเขตบรเวณของ Map Link

รปท 5.42 Tool bar ในสวนของ Image Map

- ลาก Mouse คลมพนททตองการสราง Link- เมอทำการกำหนดพนทของสวนทจะทำเปน Link แลวใหกลบมาท Inspector Clickเลอกทชอง URL แลว Browse เลอกไฟลงานทตองการ Link ไปหาขนมา

หากตองการสรางพนท Link เพมใหClickเลอกลกษณะการกำหนดรปแบบขอบเขตบรเวณของ Link และทำซำตามขนตอนขางตน



111

รปท 5.43 ลกษณะการทำ Image Map Linkรปแบบของการสรางจดเชอมโยง 1. การสรางจดเชอมโยงภายใน Web Site การสรางจดเชอมโยงภายใน เปนลกษณะของการทำ Link อย

ภายใน Web Site ของเอง ซงการ Link ภายในนนเปนการทำ Link เพอเปด file.html ซงจะตองสรางขอมลเปน file.html ขนมาเกบเอาไวภายใน folder แลวทำการ Link เพอ Browse เอา file.html ทตองการขนมา

2. การสรางการสรางจดเชอมโยงภายนอก หรอการสรางจดเชอมโยงไปหา Web Site อน

ทำไดโดยการ พมพ URL ของ Web Site ทตองการทำการ Link ไปหาทชอง Empty Reference เชน ถาตองการทำ Link ไปหา Web yahoo ให พมพ URL ทชอง Empty Reference ดงน คอ http://www.yahoo.com

3. การสรางจดเชอมโยงเพอสง Emailทำไดโดยการพมพ e-mail address ทตองการลงในชอง Empty

Reference ดงน คอ mailto: ตามดวย e-mail address ทตองการทำ Link สงจดหมายไปหา

4. การสรางจดเชอมโยงเพอการ Downloadสำหรบการทำ Link เพอการ Download นนมหลกการอยวา server

จะรจกไฟลเอกสารเพยง 3 ตวเทานน คอ ไฟลทมนามสกล .html, .jpg และ .gif ดงนนถา Link ไปหาไฟลนามสกลอน เชน ไฟลนามสกล .exe, .zip, ฯลฯ Browser จะขนหนาตางให Download ไฟลโดยอตโนมต

Step 4 ขนตอนสดทายของบทนคอการบนทกงานททำ เกบไวเพอเตรยมทจะนำขนไปใชจรงท server มหลกการทควรทำดงน

1. ควรเกบงานไวลกษณะเดยวกบทตองการจะไปเกบไวใน server ในทนจะขอใชชอ Folder เปน Websample 2. นำงานเอกสารทมนามสกลเปน html บนทกไวใน Folder Websample และพรอมกบสราง Folder Image ขนมาใน Folder นดวย 3. นำภาพทเตรยมไวใชเขาไปเกบไวท folder Image 4. ตงชอ file เอกสารและรปภาพแตละชนดใหถกหลก ดงน

4.1 กฎการตงชอใหกบ File และ Folder เพอใชในงาน Web- หามตงชอ File งานเปนภาษาไทย



http://www.yahoo.com


mailto:[email protected]?subject=email%20subject

mailto:[email protected]?subject=email%20subject

112

- หามใชอกขระพเศษ เชน! @ # $ % & ?- หามใชตวอกษรตวใหญ- หามเวนวรรค หากจำเปนควรใช เครองหมาย “_”

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]





113

อ.ปยะนนท ไกลกลอม Email : [email protected]

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

บางคนอาจจะเคยไดเหนในบาง Web Site จะมรปภาพทเปน Link ซงเปลยนแปลงหนาตาไดเมอนำ Mouse ไปวางเหนอ Link นน เรยกเหตการณนวา Rollover ซงหลกการทำกคอจะมภาพ 2 ภาพขนาดเทากนนำมาสลบกนภาพทงสองจะเปลยนไปเมอใดกขนอยกบเหตการณทจะเกดกบภาพนนโดยจะมอย 2 เหตการณ คอ

� เหตการณปกต เปนเหตการณทจะปรากฏอยตลอดเวลาถงแมวาจะไมใชงานใน Web กตาม และเปนเหตการณทนำ Mouse ออกจากภาพอกดวย

� เหตการณเมอนำ Mouse ไปวางเหนอรปนน จะมการเปลยนแปลงรปภาพเกดขน

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

Tip & Trick



คลก แทบ

Rollover

Normal Over

Main_menu. Main_menu_over.gif



114

เวลาทำการตงชอรปภาพ ถาชอตอนตนเหมอนกนแลวตอทายดวยคำวา _over เวลาทำการ Browse ไฟล แลวมนจะดงรปภาพขณะ over ใหดวย ซงทำใหประหยดเวลาในการ Browse ไดอกดวยการปรบแตงคณสมบต

Name เปนการตงชอรปภาพImage เปนลกษณะเหตการณทเกดขนNormal เปนเหตการณปกต

O v e r เปนเหตการณเมอนำMouseเขาไปวางเหนอรปนนDown เปนเหตการณเมอนำ Mouse ClickลงไปบนรปนนBrows เปนการระบภาพทตองการURL เปนลกษณะเมอตองการทำ LinkAlt Text เปนขอความอธบาย ภาพMessage เปนคำอธบายท status bar

Width ความกวางของรปภาพ Height เปนความสงของรปภาพ

Tip & Trick

โดยปกตแลวการทำ Rollover นยมทำแค 2 เหตการณเทานน คอ Normal และ Over เนองจากวาเวลาทำการ Clickแลวกจะไปยงหนาอนซงไมคอยทจะเปนผล

เทาใดนก อกทงยงเปนการทำใหไฟลขนาดใหญอกดวยเนองจากตองใชรปถง 3 รปในการสลบ

การสรางและการใชงานตาราง

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



115

องคประกอบของตาราง

ลกษณะของตารางจะประกอบไปดวยแนวนอน เรยกวา แถว (Row) และแนวตง เรยกวา สดมภ (Colum) ชองทเกดจากการแบงจากแนวนอนและแนวตง เรยกวา Cell (Cell)

Tip & Trick

เวลานำไปวางครงแรก ตาราง จะมขนาด 3*3 จะตองหาพนทเพอทจะสามารถใหวางตารางได



ลาก Table ไปวางบนหนาตาง

มองตามแนวตงเรยกวา สดมภ

มองตามแนวนอนเรยกวา

พนทแตละชองจะเรยกวา

116

การกำหนดคณสมบต การกำหนดคณสมบตของ ตาราง จะประกอบดวย 3 สวนดงน 1. แทบ Table จะเปน การควบคมคณสมบตทงหมดของตาราง

Column = จำนวน สดมภ

Width = กำหนดความกวางของ ตารางHeight = กำหนดความสงของตารางBorder = กำหนดความหนาของเสนขอบCell Pad = ระยะหางระหวางขอความถงขอบ CellCell Space = ระยะหางระหวางCellColor = การใสสใหกบ ตารางAlign = การจดเรยงรารางCaption = เปนลกษณะคำอธบายBgImage = การใส พนหลงเปนรปภาพImport = การนำขอมลเขามาใสในตารางExport = การนำขอมลออกจากตารางConvert = การแปลงตารางใหเปน Layout Grid



Cell

117

2. แทบ Row เปนการกำหนดคณสมบตของ แถวซงหมายความวา ถาทำการปรบ คณสมบตของ แทบ Row ทก ๆ Cell ในแถวนจะถกผลกระทบทงหมด

Vertical Alignment = การจดเรยงแนวตงHorizontal alignment = การจดเรยงแนวนอนColor = เปนการเปลยนสทงแถวHeight = การปรบความสงของ แถว

Tip & Trick

กรณทไมสามารถปรบคาใน แทบ Row ไดเนองจาก ไมไดเลอกการทำงานในชอง Cell นน ๆ กอน



BorderCell

118

3. แทบ Cell เปนการกำหนดคณสมบตของ Cell ซงกหมายความวาจะถกผลกระทบแค Cell ใด Cell หนงเทานน

Vertical Alignment = การจดเรยงแนวตงHorizontal alignment = การจดเรยงแนวนอนColor = เปนการเปลยนสทงแถวRow Span = เปนการผสาน Cell แนวตง Column Span = เปนการผสาน Cell แนวนอนWidth = กำหนดความกวางของ CellHeight = กำหนดความสงของ Cell

BgImage = การใสพนหลงเปนรปภาพAdd Row/Column = เพมจำนวนแถวและสดมภDelete Row/Column = ลบจำนวนแถวและสดมภ



Row Column

119

การสรางแบบฟอรมเมอตองการขอมลจากผใชงาน 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 จะเปนทเกบอปกรณตาง ๆทใชในการสรางแบบฟอรมทงหมด

120

การปรบแตงคณสมบต

Name ตงชอใหกบแบบฟอรมAction เปนการระบไฟลทใชในการบคาขอมลจากผใชงาน แลวทำการประมวลผลEncode เปนการเขารหสขอมลMethod เปนวธการในการสงขอมลมดงนGet จะปรากฏคาขอมลตอทายปะปนมากบ URLPost จะไมเหนขอมลทสงมากบ URL สวนมากจะใชกบ Form

2. Text Field เปนอปกรณทรบคาขอมลตาง ๆ ท User พมพ มลกษณะเปนชองรบขอมล ขนาดบรรทดเดยว ใชในกรณทตองการรบขอมลแบบสน ๆ บรรทดเดยว เชน ชอ นามสกล ทอย



Form

121


Name เปนการตงชอใหกบอปกรณValue เปนคาขอมลของอปกรณนVisible กำหนดความกวางของ text Field (หนวยเปนตวอกษร)Max เปนการกำหนดจำนวนตวอกษรสงสดทสามารถพมพเขาไปไดIs Password Field เปนการกำหนดใหแสดงผลขอมลแบบ Password

3. Password เปนอปกรณทรบคาขอมลตาง ๆ ท User พมพ มลกษณะเปนชองรบขอมล ขนาดบรรทดเดยวแตเวลาพมพขอความเขาไปแลวจะม เครองหมาย * แทนขอความ ใชในกรณทตองการรบขอมลแบบสน ๆ บรรทดเดยวและเปนความลบ เชน รหสผาน



Text Field

122

การปรบแตงคณสมบตName เปนการตงชอใหกบอปกรณValue เปนคาขอมลของอปกรณนVisible กำหนดความกวางของ อปกรณ password (หนวยเปนตวอกษร)Max เปนการกำหนดจำนวนตวอกษรสงสดทสามารถพมพเขาไปไดIs Password Field เปนการกำหนดใหแสดงผลขอมลแบบ Password

Tip & Trick

4. Text Area เปนอปกรณทรบคาขอมลตาง ๆ ท User พมพ มลกษณะเปนชองรบขอมล ขนาดหลายบรรทด ใชในกรณทตองการบคาขอมลจาก User เปนจำนวนมาก ๆ เชน Comment



Password Object

123

การปรบแตงคณสมบตName เปนการตงชอใหกบอปกรณRow จำนวนแถวทใหแสดงColumns จำนวนตวอกษรทใหแสดงR e a d o n l y เปนการกำหนดคณสมบต ให อ านไดอย างเด ยวเทานนC o n t e n t เปนขอความทจะพมพเขาไปไวกอนได

5. File Browser เปนอปกรณ ทใชในการคนหาไฟล ใชในกรณทตองการนำไฟลจากในเครองสงไปยงทอนอยางเชน การสงแนบไฟลไปทาง อเมล หรอการ อพโหลด



Text area

File Browser Object

124


Name เปนการตงชอใหกบอปกรณVisible กำหนดความกวางของ File Browser (หนวยเปนตวอกษร)

5. Label เปนอปกรณทใชเปนขอความกำกบฟลด ใชในกรณตองการอธบายอปกรณตวอน เชน Text Field , Password

Label



Label Object

125

สวนมากอปกรณตวนไมไดรบความนยมเนองจากไมมผลกบทาง


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

Tip & Trick

6. Radio เปนอปกรณทให User สามารถเลอก ไดแตสามารถเลอกเพยงคำตอบเดยวเทานน ใชในกรณทตองการคำตอบจาก User เพยงคำตอบเดยวเทานน เชน เรองเพศ ศาสนา

Male Female




Radio Object

126

ถาทำการกำหนด Group ไมเปนตวเดยวกน จะสามารถ

Group เปนการกำหนดกลมทจะใหเลอกValue เปนคาขอมลของอปกรณตวนSelected เปนการเลอกอปกรณตวนเอาไวกอน

Tip & Trick

7. Check Box เปนอปกรณทให User ทำการเลอกขอมล โดยท User สามารถเลอกไดกตวกได ใชในกรณ ถามเรองทสามารถตอบไดหลายคำตอบ เชน ความชอบ

Adobe Photoshop Adobe Golive




Check Box Object

127

Name เปนการตงชอใหกบอปกรณValue เปนคาขอมลของอปกรณตวนSelected เปนการเลอกอปกรณตวนเอาไวกอน

Tip & Trick

กรณทมการตงชออปกรณเหมอนกน ขอมลทสงมาจะสงในรปแบบ name = value1,value2 จะม , คนขอมล

8.List Box เปนอปกรณทให User ทำการเลอกขอมล โดยท User สามารถเลอกไดกตวกไดโดยทมขอมลให User ทำการเลอกคอนขางมาก




List Box Object

128

Name เปนการตงชอใหกบอปกรณR o w เปนจำนวนแถวทจะแสดงขอมลMultiple Selection สามารถเลอกตวเลอกไดหลายตวLable เปนรายการทจะโชวใหเลอกValue เปนคาของขอมลท user เลอกNew เปนการเพมจำนวนรายการเขาไปD e l e t e เปนการลบรายการทไมตองการ

Tip & Trick

อปกรณตวนไมคอยไดรบความนยมเนองจากเวลาทจะทำการเลอกหลายตวเลอก จะตองทำการกดปม Ctrl กอนถงสามารถเลอกไดซงบาง User ไมทราบทำให

เหนวาเลอกไดตวเดยวเทานน

9. Popup เปนอปกรณทมลกษณะการทำงานคลายกบ ตว Radio คอสามารถทจะเลอกคำตอบไดแคคำตอบเดยว แตจะประหยดพนทไดเปนจำนวนมากกวา ใชในกรณทตองการคำตอบเพยงคำตอบเดยวแตมตวเลอกใหเลอกมาก เขน ประเทศ อำเภอ หรอจงหวด




Popup

129

Name เปนการตงชอใหกบอปกรณR o w เปนจำนวนแถวทจะแสดงขอมลMultiple Selection สามารถเลอกตวเลอกไดหลายตวLable เปนรายการทจะโชวใหเลอกValue เปนคาของขอมลท user เลอกNew เปนการเพมจำนวนรายการเขาไปD e l e t e เปนการลบรายการทไมตองการ

Tip & Trick

ถาอปกรณ Popup ถก Check ท Multiple Selection จะกลายเปนอปกรณ List Box ทนท ดงนนถาไมตองการให User สามารถเลอกไดหลายคำตอบ หาม Check ท Multiple Selection

10. Hidden เปนอปกรณทใชในการสงขอมลไปยงไฟลทจะประมวลผลแตจะไมปรากฏใหเหนบรเวณหนางาน ใชในกรณทตองการสงขอมลบางอยไปใหไฟลนน ๆ โดยเฉพาะ




Hidden Object

130

Name เปนการตงชอใหกบอปกรณValue เปนคาขอมลของอปกรณตวน

อปกรณประเภทปม (Button) แบงออกเปน 4 ชนดคอ1. Submit2. Reset3. Button4. Image

1. Submit Button เปนป มอกชนดหนงเม อทำการกดแลวจะทำการเร มทำการสงขอมลตรงนไปใหไฟลทระบไวในสวน Action ของ Form เรมรบขอมลและประมวลผล


B u t t o n เปนตวทใชในการกำหนดคณสมบตของปม (Submit)

Name เปนการตงชอใหกบอปกรณLabel เปนขอความทจะแสดงบรเวณปม



Submit Object

131

2. Reset Button เปนปมอกชนดหนงเมอทำการกดแลวจะทำการลบขอมลใหเปนคา ปกตตามททำการเปดหนาแบบฟอรมขนมาครงแรก


Button เปนตวทใชในการกำหนดคณสมบตของปม (Reset)Label เปนขอความทจะแสดงบรเวณปม

3. Button เปนปมอกชนดหนงเมอทำการกดแลว จะไมมอะไรเกดขน โดยสวนมากใชในการเขยนโปรแกรมเปนสวนมาก



Reset Object

Button Object

132


Button เปนตวทใชในการกำหนดคณสมบตของปม (Normal)Name เปนการตงชอใหกบอปกรณLabel เปนขอความทจะแสดงบรเวณปม

4. Image Button เปนปมอกชนดหนงททำหนาทตวเดยวกนกบ ปม Submit แตสามารถทจะใชรปภาพเขามาแทนได ใชในกรณทตองการตกแตงแบบฟอรมใหสวยงามขน




Image Object

133

การปรบคณสมบตใหมาท แทบ 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] เปนคำตอบลงไปในอปกรณ T e x t F i e l d จะไดรบขอมลทประมวลผลเปน [email protected] หมายความวา email คอคำถาม และ [email protected] เปนคำตอบของ User

2. กำหนดเปน Choice ให user เลอกขอมลทเปนคำตอบเทานนไมตองทำการพมพขอมล ไดแก Check box , Radio Button, popup, List Box ใหกำหนดทง name และ value ตวอยางเชน ใชอปกรณ Check Box เปนอปกรณเกบขอมลเกยวกบBrowser ทใชอย โดยม 2 คำตอบใหเลอก คอ

Internet Explorer Name = browser Value = ie

Netscape Navigator Name = browser Value = nn









134

หาก 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 ทเปนหนาทโชวขนมาหลงจากประมวลผลเรยบรอยแลว ผแตง อ. พงศเพชร มทรพย e m a i l : : [email protected]

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



แบบฟอรม

Mail.asp E-mail

Form Programming System Out put

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

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

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

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



135

ในการสราง Web Siteผผลตสามารถใชเครองมอในการจดรปแบบของ Web Site ได หลายชนด เชน Grid หรอ Table แตยงมรปแบบในการสราง Web Site อกหนงชนด ทเปนทนยมใชกนอยางแพรหลาย เครองมอชนดนเรยกวา “เฟรม”

ลกษณะเดนทเหนไดชดจากการสราง Web Site ดวยการใชเฟรมกคอ พนทหนาจอของ Web Site จะมการแบงพนทแยกออกจากกน เปน 2 หรอ 3 สวน โดยลกษณะ ของการแบงพนทแยกออกจากกนทพบเหนบอย ๆ ในการทำ Web Site เชน

1 11

12

2 3

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

โครงสรางของ Web Site Site ทใชเฟรมในการออกแบบจากบททผาน ๆ มาจะทราบวาในการผลต Web Site ขนมาหนง

หนา (ไฟล .html หนงไฟล) จะสามารถนำไปเปดแสดงผลผาน Browser แลวเหนไดหนงหนาเชนกน แตการสราง Web Site ดวยการใชเฟรมนน



www.netdesign.aHotwired.lycos.com

www.k10k.nwww.fritolay.c

136

1

การมองเหนรปแบบของ Web Site ทเปนเฟรม แบบสองสวนนน จำนวนไฟลทใชในการสรางนนจะตองมจำนวนอยางนอย ถง 3 ไฟลดวยกน Adobe Golive Browser

1 1

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 สวน)

แตในการออกแบบ Web Site เฟรมจรงๆ แลวนน ไมไดมการผลตขนมาเพยงแคหนาเดยว แตจะเหนวา ในสวนทเปน หนาเมน นน จะม เมนยอยๆ อยอกหลายเมนเพอทจะทำการคลกเขาไปดเนอหาในสวนอนๆ



1

Web Site

137

ดวย ดงนนการทำ Web Site ดวยเฟรมนนจงไมไดสรางขนมาเพยงแค 3 ไฟล แตจะตองมมากกวานตามจำนวนเมนทตองการ

ขนตอนการทำ Web Site เฟรม ดวยโปรแกรม Adobe Golive 6.0ขนตอนท 1 สรางสวนโครงเฟรม ( สวนท 1 )

1. File > New Page2. เปลยนชอ Title ท Tab Layout

3. เลอกทำงานท Tab Frame Editor (ใชสรางไฟลโครงเฟรมเทานน)

4.กำหนดร ปแบบเฟรมท ตองการ จาก Tab Frame ใน

Palette O b j e c t (ใน บ.ฝ. น จ ะ

เลอกใชแบบท 3)

โดยหลงจากเลอกรปแบบเฟรมทตองการไดแลวใหลาก อปกรณตวนนลงไปวางบนพนงาน(ทไดเลอกทำงานใน Tab Frame Editor แลว) จะไดผลลพธดงรป



138

5. กำหนดชอใหกบเฟรมทง 2 (ใน บ.ฝ. นจะใชชอเฟรมบนเปน Top

และเฟรมลางเปน Under)

โดยการกำหนดชอใหเฟรมบน ใหคลกในพนท เฟรมบน จะทำให Inspector แสดงผลดงรปและใหกำหนดชอเฟรม ลงไปในชอง Name (เฟรมลางกใหทำในลกษณะเดยวกน)

6. กำหนดขนาด ใหกบพนทเฟรม โดย ในการ กำหนดขนาดเฟรมนจะทำการกำหนดใหกบพนทเฟรมบนเทานน สวนพนทเฟรมลางจะถกกำหนดใหเปนพนททเหลออยโดยอตโนมตโดยการกำหนดพนท เฟรมบนใหคล กทำงานในพนท เฟรมบนแลวกำหนดขนาดเฟรมในชอง Height (ใน บ.ฝ. นจะกำหนดใหพนท



139

เฟรมบน เทากบ 120)

หมายเหต : ในการกำหนดขนาดพนทเฟรมนน ในการทำงานจรงจะตองกำหนดขนาดเฟรมใหเทากบขนาดงาน Graphic ทไดสรางไวจากโปรแกรม Photoshop เพอจะนำมาใชในการสราง Web Site สำหรบเฟรมบนดวย ซงรายละเอยดในสวนนจะอธบายในหองเรยน

7. กำหนดคณสมบตในการเกด Scroll Bar ใหกบทง 2 เฟรม โดยการกำหนดจะกำหนดใหเฟรมบนมคา Scrolling เปน No สวนเฟรมลาง มคาเปน Auto

8. Save file เกบ ไวกอน ใน บ.ฝ. น จะกำหนด ช อ เ ป น index.html โดยยงไมตองปดไฟล และเลอก Tab ไวท Frame Editor



140

ขนตอนท 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



141

สราง Link ใหกบ Icon Home โดย Link ไปยง ไฟล home.html และกำหนด Target เปน Under เพอใหการ Link ไปยงไฟล home.html ทำใหหนานไปปรากฏทเฟรม Under

สราง 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)



142

2. กำหนด Frame Set เพอทำใหเสนกนระหวางเฟรมหายไปโดยทำการคลกทเสนกนระหวางเฟรมจะทำให Frame Set Inspector ปรากฏขน ดงรป และกำหนดคาตางๆ โดยให Border Size = 0 และ Border Frame = NO

เ ม อ

กำหนดคาทกอยางเสรจเรยบรอยแลวให Save ไฟล index.html อกครงแลวเปดแ ส ด ง ผ ล ผ า น Browser จะ ไ ด ผลลพธเปน Web Site เฟรมดงรป

การสรางภาพเคลอนไหว และ ปายโฆษณาดวยโปรแกรม Animagic Gif

ในการสราง Web Site ใหมความนาสนใจแกผใช วธการหนงทนยมใชคอ การนำเอาภาพเคลอนไหวเขามาใสไวในหนา Web Site ดวย โดย



143

อาจจะอยในรปของ ขอความกระพรบ ภาพการตนเคลอนไหว หรอปายโฆษณา โดยในการสรางภาพเคลอนไหวในบทนจะใชวธการ สรางภาพนงขนมาเปนเฟรม ๆ ใหมลกษณะการเคลอนทอยางตอเนอง และจะนำเอาภาพนงทไดจากการสรางในโปรแกรม Photoshop ไปสรางเปนภาพเคลอนไหวในโปรแกรม 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

รปท 1

รปท 2

144

ทนท แตจะเหนวาทกภาพยงเคลอนทดวยความเรวทเทากนหมดทกเฟรม

4. ทำการปรบอตราการเคลอนทของภาพนง ดวยคำสง Animation > Frame Rate ดงรปท 3 จะทำใหหนาจอเปนดงรปท 4

สำหรบรายละเอยดในการปรบแตงอตราความเรวจะอธบายในหองเรยน5. เมอปรบแตงอตราความเรวไดตามความตองการเรยบรอยแลว การ

Save file เพอใหเปนไฟลภาพเคลอนไหวใหใชคำสง File > Save as และนำไฟลนไป Save เกบไวในโฟลเดอร image เพอเตรยมไวใชทำ Web Site ตอไป

6. นำภาพเคลอนไหวทไดจากโปรแกรม Animagic Gif ไปใชในโปรแกรม Adobe Golive โดยนำเขาไปใชดวยอปกรณ Image และทำการจด Layout เหมอนวธการในบทท 5 ทไดเรยนผานมาแลวนนเอง

ผแตง อ. ชนพพฒน อรามกลEmail :: [email protected]



รปท 3 รปท 4



145

บทท 8DHTML และ Action

DHTMLDHTML หรอ Dynamic HTML คอ ภาษา HTML Version ลาสด ท

สามารถสราง Animation ขนมาในโครงสรางของภาษา HTML และยงอนญาตใหทงผออกแบบ และ ผเขาชม Web Site สามารถเลอนวตถไปมาอยางอสระ รวมทงสงใหซอน หรอ แสดงวตถตามทสงไดอกทงยงสามารถนำวตถตาง ๆมาทบกนเปนชน ๆ ได โดยทไมสามารถทำไดใน HTML Version กอน ๆ แตขอจำกดของ DHTML นนอยตรงทวามนจะสามารถแสดงผลไดบน Browser Version 4 ขนไปเทานน ( IE ver.4+, Netscape ver.4+ )



ลากอปกรณ Floating Box ลงไปวางในหนางานจะมลกษณะดงรป ถ า อ ย า ก จ ะ เ ล อ น Floating Box ให Click ท ขอบคางไวแลวลาก จะเหนวาสามารถเลอนอ ปกรณต วน ไปไหนกไดในหนางาน โดยไม

146



สามารถพมพ 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

147

ความสามารถของ 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 นอยกวา

148

2. สามารถทำ Animation ใหกบ Floating Box แตละตวได

ลองไปท Tab Preview หรอ Show In Browser ( บทท 5 ) เพอทดสอบการทำงานของ Animation



149

สามารถจะปรบการทำงานของ Animation ท Timeline Editor พรอมกบดหนา Layout และผลของ Animation ทหนางานไปดวยกได ใหไปท Menu window > Cascade and Tile > Tile Horizontally จะเปนการแบงหนาตาง Layout กบ Timeline เปน 2 สวน



สามารถเขาไปปรบก า ร ท ำ ง า น ข อ ง Animation ท “Open DHTML timeline

สเหลยมสมวงทเหนจะเรยกวา “ KeyFrame “ ซงจะเกดขนทกครงทม

ถาตองการ Animation ในลกษณะวงเปนเสนตรงใหเลอก KeyFrame ทอยตรงกลางทงหมด แลวกด Delete บน Keyboard ใหเหลอแตเฉพาะ

150

ในหนาตาง Timeline Editor นยงสามารถปรบคาตาง ๆ ของ Animation ไดอกเชน การเพม หรอ ลดความเรว , การสงใหวน loop หรอ ถอยหลงกลบ ฯลฯ

หลงจากทสราง Animation กสามารถมาปรบตำแหนงไดอก

ครงโดย Click ท Key Frame แลวไปดท Inspector สามารถปรบตำแหนงคา Left และ Top ท Key Frame นน ๆ ได

จะเหนไดวา Dynamic HTML มความสามารถในการทำ Animation คอนขางมาก ทำให Web Site ดนาตนตาตนใจและมการตอบโตกบผใชมากขน แตทงนยงตองคำนงถงกลมเปาหมายของดวย วาเปนกลมทรบเทคโนโลย DHTML ของไดหรอเปลาไมอยางนนสงททำไปกจะสญเปลา และทำใหกลมเปาหมายของหนไปใชบรการของ Web Site อน ๆ ซงสงทยงตองคำนงเปนหลกกอนกคอ สงทนำเสนอ , สงทจะเปนประโยชนกบผเขาชม แลวคอยใชเทคโนโลยตาง ๆ มาชวยเตมแตงให Web Site ดนาสนใจมากขน นาจะเปนแนวทางทดกวา

Action หรอ Action Script



Autoplay ปกตจะถกกดไว เมอ Preview Animation

151

โดยปกตแลวคงจะเคยพบเหนการใช Action กบหนา Web

Site ตาง ๆ กนเปนประจำอยแลว อยางเชน อาจจะเปด Web Site หนงขนมาแลวปรากฏวามหนาตาง Browser อกหนาตางหนงเปดขนมาอตโนมต โดยทไมได Click ทไหนเลย หรอวาอาจจะเคย C l i c k ทรปภาพเพอจะดรปภาพรปนนเปนรปใหญปรากฏวาหนาตาง 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 ใหใส # ลงไปแทน



152

เมอทำ 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 ออกจาก LinkDouble Click เกด Action เมอทำการ Double Click



153

Mouse Down เกด Action เมอมการ Click ลงไปท Link ในขณะท pointer วางอยบน LinkMouse Up เกด Action เมอมการปลอยปมท Mouse ในขณะท pointer วางอยบน LinkKey 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 ใหเลอกใชมากมาย โดยถาเลอก

154

2. Action ทสวน Head ของ HTML



ถาตองการใส Action ใหสวนหวของ HTML ใหไปทมมซายบนของหนา Layout จะม ปม “

จากนนใหไปหาอปกรณ

วางอปกรณ Head Action ลงบนสวนหวของ H T M L

155

จะม 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



ส วนถ าต องการจะใช Cction อะไรกบสวนหว กสามารถ Click ทปม

156

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

Action “ Open Window “ เปน Action ทใสใหกบปมหรอ Link เพอตองการใหเวลา Click แลวเปดหนาตาง Browser ขนใหมโดยทสามารถกำหนดขนาดทตองการ รวมทงสามารถเลอกไดดวยวาตองการ Function ตวไหนบางของ Browser

! กอนจะไปทำ Action Open Window จำเปนตองเตรยม Web Site หนาทจะเปดขนมาใหพรอมไวกอน โดยการสราง Web Site ทมขนาดทตองการ ( ชดมมบนซาย ) แลว Save เกบเอาไวก อ น! ! ! ! ! ! ! ! ! ! !! ! ! ! ! ! ! ! ! ! !! ! ! ! ! ! ! ! ! ! !

! ! ! ! ! ! !

ทดลองพมพตวหนงสอขนมา แลวทำ Link ( ใส # ) เอาไวแลวเรยก Palette Action ขนมา เลอก Event เปนแบบ Mouse Click



ควรจะออกแบบใหชดมมซายบนเนองจาก เวลากำหนด

157

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



จากนนให Click ทปม Action

158

ใหลองใช Action เดยวกนนกบสวนหวของ html บางเพอใหเหนความแตกตาง

ลอง Preview หรอ Show In browser เพอทดสอบจะเหนวาไมตอง Click Link กม Browser เปดขนมา

อตโนมต เพราะวาสง Action ไวเปน Onload นนกคอถามการ



กดทปม Toggle Head Section

วางอปกรณ Head Action

จากนน ใหเลอก Action > Open Window เหมอนตวอยางแรก ตงคา

159

Load หนานกจะสง Open Window ทนท ยกตวอยาง Action ทนาสนใจ จาก Web Site ของ TOYOTA ( www.toyota.com ) Action “ Set image URL”

ลองมาทำ Action ลกษณะนบน Golive กนดเตรยมหนา Web Site ลกษณะนขนมา



ทหนาแรกของ TOYOTA นนมการใส Menu ของรปรถรนตางเอาไว โดยถาเอา Cursor แตะลงไปทชอรถรนไหน กจะมรถรนน นปรากฎอย ตรงกลาง

Text ธรรมดา ทำ Link เอาไววาง Image ลง

ไปเปนรปทจะ

http://www.toyota.com

http://www.toyota.com

160



161

เมอเสรจแลวใหใส Action ลกษณะเดยวกนนกบปมทเหลอ แคเปลยนภาพท Link ไปหาเทากอนทจะแตะท Link นน รปตรงกลางจะเปนรปหลกของกอนนน แลงลองไป Preview เพอทดสอบด



162

แตพอแตะท Link แลวตอนนรปตรงกลางจะเปลยนไปเปนรปทตองการและพอเลอน Cursor ออกจากตว Link รปตรงกลางจะตองกลบมาเปนภาพหลกดวย

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 ไป



http://www.distar.net

http://www.distar.net

163

ทไหน ไปเจออะไรบาง ซงลกษณะการทำ Action อนนกคอ Action ทเรยกวา Show Hide นนเอง

ลองเตรยมหนา Web Site ลกษณะดงรปเพอลองทำ Action นด

จากนนใหวาง 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 ทใสรปภาพของไว



164

ทชอง Floating Box ใหเลอกชอ Floating Box ทตองการจะ

ใหแสดงตอนทแตะลงไปท Link ตอนนเมอแตะแลวสามารถแสดง Floating Box ได แต

วาเมอเอา Cursor ออกจะตองซอน Floating Box ตวนไปดวย ดงนนเลอก Events เปน Mouse Exit แลวใส Action > Multimedia > Show Hide อกครงคราวนใหเลอก Mode เปน Hide บาง สวน Floating Box กเลอกตวเดม ลองใส Action ให Link ตวอนในลกษณะเดยวกนดวย เมอใสครบแลวลอง prreview เพอทดสอบด

เมอยงไมไดแตะจะมองไมเหนภาพทอยใน Floating Box



165

เมอแตะท 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 ตงแตเรมงานนทนท

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



วาง Floating Box ลงไปทหนางาน ใส Image เขาไปขางใน และ Browse รปภาพแทนลงไป จากนนใหตงชอใหกบ Floating Box ดวย

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

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

พอไป Preview แลวจะเหนวา Floating Box ตวทกำหนดจะตดไป

กบ Cursor

จะเหนไดวาความสามารถของ DHTML และการทำ Action นนมมากมายและหลากหลาย ซงนาจะเปนสวนเพมเตมททำให



เ สร จ แล ว ให ใ ส Head Action ลงไป

ทชอง Floating Box ใหเลอกชอ

167

Web Site ของดนาสนใจมากขน แตถงแมวามนจะทำให Web Siteของดมสสรรคมากขน กไมควรจะใหมนบดบงจดประสงคใน

การนำเสนอเนอหา สาระสำคญ ของ Web Site ดวย เพราะวาการใสเทคนคพเศษมากจนเกนไป กจะทำให User นนหาสาระสำคญจรงๆของ Web Site ไมเจอ ในทสดกจะไมกลบมาอก ดงนนจงควร

เลอกใชเทคนคใหเหมาะสมกบงานดวย จงจะเรยกไดวาเปนผทออกแบบ Web Site ไดดเยยม ไมใชผทสราง Web Site ได เทานน

ผแตง อ. อศวน โอกาดา email :: [email protected]



ทชอง Floating Box กเลอกชอ Floating Box ทตงชอไวเชนเดยวกน

168

บทท 9Domain Name, Web Site Hosting, การตรวจสอบขอผดพลาดภายใน

หนา Web Site และการ Upload

เมอทำหนา Web Site เสรจเรยบรอยแลว การทจะเอาหนา Web S i t e แตละหนาของขนออนไลนในระบบอนเทอรเนต เพอใหผคนสามารถเขามาเปดชมไดนน จะตองมสวนประกอบทสำคญ 2 สวน กคอ 1. Domain Name และ 2. Hosting Domain Name หรอ “ชอโดเมน” เปรยบเสมอนบานเลขทบอกตำแหนง เพอใหคนทจะมาเยยมชมสามารถเขามาไดอยางถกตอง สวน Hosting เปรยบเสมอนเนอทของบาน

Domain Name ชอโดเมนเกดขนมาจากทตอนแรกเรมระบบอนเทอรเนต การแยกแยะเครองคอมพวเตอรทอยภายในเครอขายหรอโฮสต (Host) แตละเครองออกจากกนนน จะใชการอางองดวยตวเลขไอพ (IP : Internet Protocol) ซงเปนตวเลขชดขนาด 32 บต โดยจะแบงออกเปน 4 กลม กลมละ 8 บต หรอเปนตวเลขไดตงแต 0-255 โดยคนระหวางชดดวยจด เชน



169

213.55.170.10 โดยทเครองคอมพวเตอรหรอโฮสต จะมไอพประจำของแตละเครอง โดยทไมซำกนเลย (ปจจบนตวเลขไอพแบบ 32 บตนน อางองเครองคอมพวเตอรหรอโฮสตไดประมาณ 4.3 พนลานเครอง ซงจำนวน ดงกลาวคอนขางจำกดเมอเทยบกบการใชงานปจจบน ดงนนจงมแนวคดทจะขยายการใชงานเลยไอพไปสมาตรฐานใหมทเรยกวา Ipv6 แทน Ipv4 ทใชอยเดม โดยจะอางองดวยชดตวเลขขนาด 128 บต ซงในปจจบนไดเรมมการตดตงระบบเพอรองรบมาตรฐานใหมนบน Root Server ทวโลกแลว คาดวาจะสามารถเปลยนมาใชงานไดในอนาคตอนใกลน) แตเนองจากเลขไอพเปนชดตวเลขทยากแกการจดจำ จงไดมการนำเอาชอโดเมนมาใช เพอใหงายตอการจดการและการจดจำ เชน yahoo.com, hotmail.com, netdesign.ac.th แตโดยสวนมากผใชสวนใหญยงเขาใจผดอย โดยมกหมายรวมเอาชอของโฮสต (ซงสวนใหญนยมตงเปน www) เขาไวเปนสวนหนงของชอโดเมนดวย เชน www.yahoo.com ซงโดยความเปนจรงแลว www.yahoo.com เปนเพยงการอางองถงโฮสตชอ www ทอยภายใตโดเมน yahoo.com เทานน สำหรบชอโดเมนจะตองทำการลงทะเบยนกอนการใชงาน เพอเอาชอทไดมาจบคกบตวเลขไอพ เวลาใชงานจะไดไมตองจำเลขไอพ แตใชจำชอโดเมนแทน การจดโดเมนจะใชหลกการ “จดกอนไดกอน” (First-come, First-served) ซงใชกนเปนสากลในการจดโดเมนทวโลก สำหรบการตรวจสอบวาชอโดเมนยงวางอยหรอไม สามารถเขาไปเชคไดท www.internic.net/whois.html หรอท www.checkdomain.com

การแบงประเภทของชอโดเมน สามารถทำได 2 ลกษณะใหญ ๆ คอ

1. แบงตามรปแบบในเชงเทคนคในเชงเทคนคนน มการแยกยอยชอโดเมนออกเปนหลายระดบขน โดยชอโดเมนระดบบนสดจะถกเรยกวา Top-Level Domain N a m e หรอ T L D ซงจะอยตำแหนงขวามอสดของชอ เชน .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 ระดบ

2. แบงตามลกษณะการใชงานและขอบเขตทางภมศาสตรแนวทางการจดแบงลกษณะและประเภทของช อโดเมนอกแนวทางหนง คอ การจดแบงตามลกษณะการใชงาน ซงปรากฏใหเหนในการจดแบงชอโดเมนประเภททเรยกวา ชอโดเมน



http://www.internic.net/whois.html

http://www.internic.net/whois.html

http://www.checkdomain.com

http://www.checkdomain.com

170

สากล หรอ 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 ป . m i l ( M i l i t a r y ) สงวนไวสำหรบหนวยงานทางทหารของสหรฐอเมรกาเทานน .int (International) สำหรบองคกรหรอหนวยงานทจดตงขน เพอดำเนนงานระหวางประเทศ

กลมของชอโดเมนในประเภท ccTLD ในสวนของการจดแบงประเภทตามขอบเขตทางภมศาสตร จะเปนการกำหนดรหสประเทศ โดยปจจบนยดตามองคการสหประชาชาต รหสดงกลาวจะมลกษณะเปนตวอกขระ 2 ตว ซงเปนชอยอหรอใกลเคยงกบชอยอของประเทศนน ๆ สำหรบบทบาทการควบคมกำกบชอโดเมนกลม ccTLD จะขนกบองคกรทดแลระบบขอมลชอโดเมนประจำสญชาตนน ๆ เปนหลก ซงหนวยงานดงกลาวสวนใหญมกเปนหนวยงานเอกชนทเปนผบกเบกเครอขายอนเทอรเนตในประเทศนน ๆ มาแตตน เชนในกรณของประเทศไทย จะม THNIC (Thailand Network Information Center) ซงเปนหนวยงานภายใตการสนบสนนของสถาบนเทคโนโลยแหงเอเชย (AIT) เปนผดแลระบบขอมลชอโดเมน .th และใหบรการรบจดชอโดเมน .th ทงหมด



171

ในแตละประเทศ การจดแบงลกษณะการใชงานของชอโดเมนจะอยภายใตการดแลขององคกรของประเทศนน ๆ สำหรบในกรณของประเทศไทย THNIC มการจำแนกชอโดเมนในระดบ SLD ออกเปน 7 ประเภท คอ .co.th สำหรบองคกรธรกจทจดทะเบยนในประเทศไทย ในอดตจำกดใหจดไดเพยง 1 ชอตอ 1 บรษทหรอหางหนสวนเทานน โดยชอทจดจะตองเปนชอ/ชอยอ/หรอสวนหนงสวนใดของชอบรษทเทานน ตอมาเมอวนท 31 สงหาคม 2543 จงไดขยายใหสามารถจดชอไดหลายชอ โดยสามารถอางองจากเครองหมายการคาทจดทะเบยนได .net.th สำหรบหนวยงานไทยทใหบรการอนเทอรเนตหรอเครอขาย .or.th สำหรบองคการในประเทศไทยทไมแสวงหาผลกำไร .ac.th สำหรบสถาบนการศกษาของไทย .go.th สำหรบหนวยงานราชการไทย .mi.th สำหรบหนวยงานทางทหารของกองทพไทย .in.th สำหรบองคกรหรอบคคลทวไป สำหรบชอโดเมน .in.th นน ทาง THNIC เพงจะเปดใหจดและใชงานเมอเดอนมนาคม 2542 ทผานมา เพออำนวยความสะดวกแกบคคลหรอองคกรทวไปใหสามารถจดชอ .th ของประเทศไทยได โดยไมตองแสดงหลกฐานใด ๆ ในการขอจด ตางจากชอโดเมน 6 ประเภทแรกทไดมการเปดใหบรการมาตงแตตน ซงผขอจดจำเปนตองยนหลกฐานเพอแสดงสทธตามกฎหมายทมตอชอนน ๆ เชน เอกสารรบรองการจดตงบรษท หนงสอสำคญแสดงการจดทะเบยนเครองหมายการคา หรอ อน ๆ ซงจะตองสามารถแสดงใหเหนไดวาชอทขอจด มความเกยวของกบกจการของผขอจดใหกบทาง THNIC กอน จงจะสามารถจดและใชงานชอนน ๆ ได

ประวตความเปนมาของชอโดเมน การนำช อโดเมนมาใชงานอยางจรงจงเร มตนในชวงเดอนพฤศจกายน ค .ศ . 1 9 8 3 ในตอนตน ชอโดเมนประเภท .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



172

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 ดอลลาร ตอ 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 ดอลลาร



173

สำหรบในป ค.ศ.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 ซงคาใชจายจะสงมาก อยทระดบแสนบาทขนไปตอเดอน ปจจบนจงนยมใชบรการ Web Site Hosting กบบรษททเปดใหเชา ซงคาใชจายจะถกกวาและสะดวกในการดแล สำหรบ Web Site Hosting สวนใหญจะแบงออกเปน 2 ประเภทใหญ ๆ ตามลกษณะของระบบปฏบตการ (OS : Operating System) คอ

1. Web Site Hosting ทใชระบบ Windows NT หรอ Windows 20002. Web Site Hosting ทใชระบบ Unix หรอ Linuxเวลาจะเลอกใชบรการ Web Site Hosting สวนมากแตละบรษทก

จะมใหเลอกหลากหลายรปแบบ สวนประกอบหลก ๆ ทเปนปจจยตอดานราคาคอ



174

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 สวนปจจยดานอนๆ กจะตองพจารณาใหเหมาะสมกบการใชงาน แตสวนมากรายละเอยดปลกยอยของแตละบรษท มกจะใกลเคยงกน

การตรวจสอบและแกไขความผดพลาดบนเอกสาร Web Site (Check and Fix Bugs)กอนขนตอนการ Upload ควรมการตรวจสอบภาพรวมของเอกสาร Web Site ทเตรยมไวใหถกตองเรยบรอยกอน ทงนเพอเปนการปองกนปญหา





175

Linkผดพลาดหรอรปภาพไมแสดงผล ซงขนตอนการตรวจสอบความผดพลาดน สามารถกระทำไดบนโปรแกรม Adobe Golive

วธการตรวจสอบและแกไขความผดพลาดบนเอกสาร Web Site (How to Check and Fix Bugs)1. ใชคำสง File > New Site

2. ทหนาตางใหม เลอก Single User แลวกดปม Next



176

3. เลอก Options for Local Sites เปน Import from Folder แลวกดปม Next

4. เลอกโฟลเดอรหลกทเกบเอกสาร Web Site ทปม Browse ทางดานบน จะปรากฏไฟล index.html ขนมาทชองดานลางอตโนมต



177

5. กดปม Browse เพอ save ไฟลเอกสาร .site ซงกคอไฟลหลกของทงSiteงาน



178

6. จบขนตอนโดยการกดปม Finish

7. จากนน ไฟล .site ท save ไว จะถกเปดขนมา โดยทชอง Status จะแสดงสถานะของไฟลงาน ซงทสถานะปกตจะเปนเครองหมายถก หากพบจดผดพลาดภายในไฟลงาน จะปรากฏ icon รปแมลง (Bug) สามารถแกไข Bug ไดโดยการ Double Click เปดไฟลงานนนๆ ขนมาแกไขไดทนท



179

8. Clickท icon รปแมลงบน Toolbar เพอคนหาจดผดพลาด ซงสามารถสงเกตเหนไดงาย ๆจากสแดงทปรากฏ ดงตวอยาง เกดความผดพลาดคอ รปภาพไมแสดงผลเนองจากไมพบไฟลทชอ mount.jpg

9. แกไขไดงายๆ โดยการ Browse ไฟลใหม ซงจากตวอยางเกดจากชอไฟลถกเปลยนแปลง

10. Save อกครงเพอ Update Status



180

11. ทไฟล .site จะพบวาสภานะของไฟลงานไดรบการแกไขเปนปกต

การตรวจสอบและแกไขขอผดพลาดบนเอกสาร Web Site เปนขนตอนทควรกระทำกอนการ Upload ไฟลงานจรงทงนเพอปองกนขอผดพลาดซงอาจเกดขนบน Web Site Site ในภายหลง นอกจากน ไฟล .site ยงอำนวยความสะดวกอยางมากตอการจดระบบของ Web Site Site โดยรวม อาท การเปลยนชอไฟล การโยกยายตำแหนงของไฟลงาน โดยไมมผลกระทบกบการแสดงผลจรง เนองจากจะมการ Update ใหสอดคลองสมพนธกนทงระบบ



181

Uploadความหมาย

“ U p l o a d ” คอ การถายโอนชดขอมลสำเนาจากเครองคอมพวเตอรไปยงเครองแมขาย ( S e r v e r ) มกจะไดยนคกบคำวา “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 Pro1. New Site ขนมาใหม โดยการกดทปม New Site



182

2. ทหนาตางใหม ตงชอ Site ตามตองการ พรอมทงกรอก Host Name ซงในทนเปนการ Upload ขนไปทพนทของ Web Site โรงเรยน จงกรอกเปน ftp.netdesign.ac.th (รปแบบคอ ftp. ตามดวยชอ Web Site Site ) จากนนกดปม Finish



183

3. กรอก User ID และ Password ทไดรบจากทางโรงเรยนใหถกตอง แลวกด Connect

4. เมอ Connect ไดแลว จะมขอความ "Transfer Complete" ขนมาทสวน Status หนาตางจะแบงเปน 2 ฝง ทางซายคอ Directory ภายในเครองของ(Local System) สวนทางขวา คอ Directory บน Server(Remote Site) วธการ Upload คอ Double Click เขาไปในโฟลเดอรทเกบขอมลของ Web Site Site ไวในเครองทางดานซาย ดงภาพ



184 PROFESSIONAL WEB DESIGNER COURSE


185

5. เมอเขาถงโฟลเดอรทตองการแลว สามารถเรมตน Upload ไดโดยClickเลอกทชอไฟลหรอโฟลเดอรทตองการ แลวกดปม --> เพอ Upload โดยสามารถเลอก Upload ไดหลายๆ ไฟลพรอมกน



186

6. เมอเสรจสนการ Upload จะพบวารายชอไฟลและโฟลเดอรจะถกทำสำเนาและถายโอนมาท Remote Site



187

7. กดปม Close ดานลาง หลงจากใชงานเสรจเรยบรอยแลว จากนนสามารถปดโปรแกรม โดยกดทปม Exit



188

วธการ Upload ผานระบบ HTTP ( Web Site -Based)

1. เขาไปทหนาแรกของ Web Site โรงเรยน เพอ log-in เขาสหนา Upload 2. เรมตนจากการ Browse เลอกไฟลเอกสาร Web Site (.html) กอน

3. เมอเลอกไฟลไดตามตองการแลว กดปม Upload ดานลาง

4. เมอ Upload เรยบรอย รายชอไฟลจะปรากฏทดานบน



189

5. การ Upload รปภาพ จะตองสรางโฟลเดอรภาพขนมาใหมกอน โดยกรอกชอโฟลเดอรภาพ(ตามทตงไวบนเครอง) แลวกดปม “สราง Folder”

6. Clickเขาไปท Folder ภาพ(image) เพอ Upload ไฟลภาพดานใน

7. Browse ไฟลภาพและ Upload ในลกษณะเดยวกนกบไฟลเอกสาร .html ในขนตอนท 2 และ 3



190

8. รายชอไฟลภาพจะปรากฏทดานบน หากตองการออกจากโฟลเดอรภาพ Clickท “ออกจาก Folder”

9. ออกจากระบบหนา Upload โดยการClickท Log Off

หลงจากทำการ U p l o a d ไฟลงานทงหมดเสรจเรยบรอยแลว สามารถเขาไปชมผลงาน Web Site Site ไดท http://www.netdesign.ac.th/member/รหสนกเรยน ทงน สามารถจะ Update หนา Web Site เพมเตมไดอกตามความตองการ โดยวธการ Upload ไฟลงานทแกไขเพมเตมแลวขนไปทบไฟลเดมบน Server

ผแตง อ. รชษฐ บษยาสกล Email :: [email protected] อ.วรรณวนช ฤกษลภนะนนท Email :: [email protected]







191

บทท 10เทคนคการประชาสมพนธ Web และตรวจสอบผเยยมชม Web

� การประชาสมพนธ Web ผาน Search Engine � การนบจำนวนและตรวจสอบสถตผเขาชม Web (Counter and

Statistics)� Cascading Style Sheet

Search EngineSearch Engine คออะไร Search Engine สามารถแบงออกเปน 2 ระบบดวยกน คอ

1. Search Engine ระบบ DirectorySearch 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



192

รปท 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 ของเราเขาไปเกบเอาไวในระบบฐานขอมลของตว



193

Search Engine ซงขนตอนการลงทะเบยนเพมรายชอใน Search Engine มดงน

2.1Search Engine ระบบ DirectorySearch Engine ระบบ Directory ในปจจบนทไดรบความนยมมอยเพยง 1 เวบไซด คอ www.yahoo.com ซงขนตอนในการลงทะเบยนเพมรายชอเวบไซดของเราเขาไปในระบบฐานขอมลของ Search Engine ระบบ Directory นนขนตอนแรกจะตองทำการเลอกหมวดหมทมความเกยวของกบเนอหาของเวบไซดของเราเสยกอนทCategory

� เรมตนโดยการเลอกหมวดใหญกอนท We b S i t e 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.2Search 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





194

<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>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 )



195

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 โดยมขนตอนการทำงานดงน 1.อปกรณทใชในการใส Meta Tags ใหหนา Web Page อยใน Palette Object ในกลมเครองมอ Head มอยดวยกน 2 ตวคอ อปกรณ keywords (ตวท 3 จากซาย) และ อปกรณ Meta tags (ตวท 5 จากซาย)

รปท 10.2 อปกรณ Keywords และ Meta Tags



เครองมอ

เครองมอ

196

รปท 10.3 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 จะไมรบขอความทมความยาวมากเกนไป



197

4. Click เลอกท อปกรณ Meta Selection และไปเลอกท Palette Inspector เพอระบขอความทเปนคำจำกดโดยยอของ Web Site และใหพมพบรเวณชองตรงกลางวา Description เพอบงบอกให Search Engine ทราบถงลกษณะของ Meta Tags ตวนวาเปน Tag ประเภทคำอธบาย

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 สปดาห



198

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 สปดาหCounter and Statistics

ขนตอนหลงจากการผลต Web Site นอกจากการประชาสมพนธ Web Site ใหเปนทรจกแลว จำเปนอยางยงทจะตองมการเกบขอมลของผทเขามาเยยมชม Web Site ของเรา เนองจากขอมลหรอการเกบสถตเหลานจะเปนประโยชนอยางยงตอผทมหนาทออกแบบ Web Site เพอใชเปนขอมลพนฐานในการวเคราะหและประเมนผล ปรบปรง Web Site ใหมประสทธภาพตรงกบความตองการของ User ใหมากทสด ตวอยางรายชอ Web Site ทใหบรการ Free Counter ไดแกThecounter.com, sitemeter.com, cybercounter.net, freewebcounter.net, truehits.net

วธการนำ Counter มาตดตงใน Web Site ในทนขอยกตวอยางการนำ Counter ของ www.sitemeter.com มาตดตงในเวบของเรา

� ขนตอนแรก ใหเขาไปท www.sitemeter.com เลอกไปทหนา Site Meter > Home หาคำวา Site up for a free Site Meter Click เลอก Site up

� ใหทำตามขนตอนทกำหนดมาให รวมถงการกรอกรายละเอยดตางๆ ทเกยวของกบ Web Site ของเรา เชน URL, Site Name, Code Name, Email เปนตน

� เมอทำตามขนตอนจนมาถงหนาทแสดงขอมลของเรา ใหตรวจสอบดวาถกตองหรอไม ถามขอมลสวนไหนผดพลาดใหยอนกลบไปแกไขขอมลใหถกตองกอน และเมอตรวจสอบแลวขอมลทกอยางถกตองกให Click ปม Next เพอเปนการยนยน

� เมอปรากฏหนา “The signup for your Site Meter counter is complete !” กเปนอนเสรจขนตอนของการสมครขอใช Free Counter ตอจากนนให Click ทปม Manager ทเมนบารดานบน เลอก Pass Word เพอทำการเปลยนแปลง Pass Word



http://www.sitemeter.com




199

� ขนตอนตอมาในสวนของ 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 ดวย อยางเชน

การกำหนดคาของตวอกษรทเปน 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)



200

จะตองมการ New Class Style เพอทำการสราง Class ขนมากอน ซง Class จะตองมจดนำหนาเสมอ แลวทำการปรบแตงสมบต โดยกำหนด size ,font ทตองการเสรจแลว เวลาเรยกใชงาน จะตองใชงาน Palette CSS ดวยโดยทำการปาดดำ (highlight) ทตวหนงสอแลวกทำการ Span เขาไปขอความนน ๆ กจะถกไมสามารถเปลยนแปลงขนาดได

การกำหนดสใหกบ ScrollbarNew Style > body Scrollbar-arrow-color Scrollbar-base-color Scrollbar-track-color



pro web design

Documents