Dreamweaver CS4-webquest

ขน้ั เตรียมตวั กอ่ นสรา้ ง Web pageเราตอ้ งจดั การสร้างโฟลเดอร์ก่อน เพอ่ื ความเปน็ ระเบียบของไฟล์ข้อมลู ชื่อโฟลเดอรต์ ้องเป็นภาษาอังกฤษเท่านนั้ copy ไฟล์รปู ภาพ ไฟล์เพลง ไฟลว์ ดี ีโอ ไปไวใ้ นโฟลเดอร์ก่อน ใชก้ ีไ่ ฟล์ copy ไปตามจานวนท่ีใช้เทา่ นัน้วิธีการสรา้ ง Folder โฟลเดอร์ใหญค่ วรตัง้ ใหค้ ล้องจองกับเรอ่ื งที่เราสรา้ ง เช่นวชิ าภาษาไทย ดงั ตัวอย่าง 1. เข้า My computer 2. เลอื กไดร์ทีต่ อ้ งการ 3. ทาการสรา้ งโฟลเดอร์ คลกิ เมาสข์ วา 4. เลอื กคาสง่ั New 5. เลือกคาสง่ั Folder จะปรากฎ Folder ขึน้ มาให้ทาการตงั้ ชอ่ืดังโครงสร้างโฟลเดอรต์ ่อไปนี้ โฟลเดอร์ html เอาไว้เกบ็ ไฟล์ web page โฟลเดอร์ music เอาไว้เกบ็ ไฟล์ เพลง โฟลเดอร์ mv เอาไวเ้ ก็บไฟล์ วดิ โี อ โฟลเดอร์ picture เอาไว้เก็บไฟล์ รปู ภาพ โฟลเดอร์ test54 เอาไวเ้ กบ็ ไฟล์ ขอ้ สอบส่วนไฟล์ท่ีช่ือวา่ index.html จะเก็บไวใ้ นโฟลเดอร์ใหญ่ ไม่เกบ็ ไวใ้ นโฟลเดอรย์ ่อย เน่ืองจากเป็นไฟลท์ ่เี รยี กใช้ (ไฟล์เมนู) หมายเหตุ 1 โฟลเดอรใ์ หญ่ตอ่ 1 งาน ทาไมตอ้ งสร้างโฟลเดอรใ์ หญแ่ ละโฟลเดอร์ยอ่ ย เพราะวา่ เปน็ การจัดไฟลใ์ ห้เป็นระเบียบเรยี บร้อย ง่ายต่อการเรียกใช้ ทาไมตอ้ งบนั ทึกเปน็ ไฟล์ Index เพราะวา่ เปน็ ช่อื ไฟล์มาตรฐาน เปรยี บเสมอื นเปน็ ไฟลเ์ มนู (หนา้ สารบัญ) 1

ข้ันตอนการออกแบบ ออกแบบโครงสรา้ งและหน้าเว็บเพจ กาหนดว่าเว็บเพจมีออกแบบโครงสรา้ งของเว็บซต์ (เว็บเพจ)กี่หนา้ แต่ละหนา้ จะแสดงข้อมูลอะไรหนา้ แรก หน้าที่ 1(สารบญั ) จะทาอะไรในหน้าน้ี จะแสดงขอ้ มูลอะไรหนา้ นคี้ อื ให้กาหนดหวั ขอ้ เรอ่ื ง ว่าจะมีกี่เร่อื ง ก่ีหนา้เมอื่ กาหนดเสรจ็ แลว้ ใหแ้ ตกยอ่ ยออกไปแตล่ ะหนา้หน้าที่ 2 หนา้ ท่ี 3จะทาอะไรในหน้านี้ จะแสดงขอ้ มูลอะไร จะทาอะไรในหนา้ นี้ จะแสดงข้อมูลอะไรหน้าท่ี 4 หนา้ ท่ี 5 แบบทดสอบ จะแสดงข้อมลู อะไร ผ้จู ัดทา จะแสดงขอ้ มลู อะไร 2

ความสาคัญของการออกแบบเวบ็ ไซต์ ปจั จุบนั น้มี เี ว็บไซต์เกดิ ขน้ึ มากมายผู้ใชจ้ งึ มที างเลอื กมากขนึ้ ท่จี ะเขา้ ไปยังเว็บไซตต์ ่าง ๆ ทใ่ี ห้บริการและจะไม่ทนอยกู่ ับเวบ็ ทีส่ บั สน จากประสบการณท์ ่องเว็บทีผ่ ่านมาของคุณความร้สู กึ ได้รบั จากเว็บทม่ี ีความสวยงามและเว็บท่ีมีข้อมลู อย่อู ย่างมากมายดสู บั สนวุ่นวายและเสยีเวลานานในการเขา้ ดูคณุ ต้องการทจ่ี ะมเี วบ็ ของคุณในลกั ษณะใด การออกแบบเวบ็ ไซทม์ ีส่วนสาคญั ในการสรา้ งความประทับใจให้กบั ผู้ใช้บรกิ าร และทาใหอ้ ยากกลับเข้ามาใชอ้ ีกในอนาคต หรอื ดงึ ดูดผูใ้ ช้ใหอ้ ยู่กับเว็บตลอดไปการออกแบบเว็บไซท์นนั้ ไมไ่ ดห้ มายถึงลกั ษณะหน้าตาของเวบ็ ไซทเ์ พียงอยา่ งเดยี ว แตเ่ ก่ยี วขอ้ ง- การกาหนดเปา้ หมายของเวบ็ ไซต์ - ระบุกลุม่ ผู้ใช้- การจดั ระบบขอ้ มูล - การสรา้ งระบบวเิ กชน่ั- การออกแบบหนา้ เวบ็ - การใช้กราฟิก- การเลอื กใชส้ ี และการจดั รูปแบบตัวอกั ษร - ชนดิ และร่นุ ของบราวเซอร์- การคานงึ ถงึ ความแตกต่างของสือ่ กลางในการแสดงผลเว็บไซทด์ ว้ ย- ขนาดของหน้าจอมอมเิ ตอร์ และความละเอียดของสใี นระบบ Plug – in ชนดิ ต่างๆการใชก้ ราฟิกเวบ็ ไซท์ท่ีดสู วยงามหรือมลี กู เล่นมากมายนัน้ อาจจะไมน่ บั เปน็ การออกแบบท่ดี กี ็ได้ ถา้ ความสวยงามหรอื ลูกเล่นเหล่าน้ันไมเ่ หมาะสมกบั ลกั ษณะของเว็บไซท์ การออกแบบของแตล่ ะเวบ็ ไซท์นั้นแตกต่างกนั ไปตามเปา้ หมายและลกั ษณะของเวบ็ ไซท์นน้ั เว็บไซท์บางแหง่ อาจตอ้ งการความสนุกสนาน บนั เทิง ขณะท่เี ว็บอนื่ กลบั ตอ้ งการความถกู ตอ้ ง น่าเช่อื ถอื เป็นหลกัแนวทางในการการออกแบบเพือ่ ความสาเร็จของเว็บไซต์ ความสาเร็จของเว็บไซต์ไมไ่ ดเ้ กิดจากการทมี่ ผี ใู้ ชห้ น้าใหม่เขา้ มาในเวบ็ จานวนมาก แตถ่ า้ เขาเข้ามาแล้วไมย่ ้อนกับมาอกี เลย แม้คุณจะมีการประชาสมั พนั ธ์ที่ดเี พียงใด แต่ถ้าเว็บเป็นมผี ใู้ ชบ้ ริการเป็นกลมุ่ คนทม่ี าใชบ้ ริการประจาอยา่ งต่อเนือ่ งนา่ จะเปน็ สง่ิ ทแ่ี สดงใหเ้ หน็ วา่ เว็บไซต์ของคณุ ประสบความสาเรจ็มากกว่า พ้ืนฐานในการออกแบบเวบ็ ไซตท์ ด่ี ี ตอ้ งคานงึ ความต้องการท่ผี ูใ้ ช้ทุกคนตอ้ งการจากเวบ็ ไซต์- มีเนอื้ หาท่ีเป็นประโยชน์ ตรงกับที่ผูใ้ ชต้ อ้ งการ- มกี ารปรับปรุงเนื้อหา และพัฒนาเวบ็ ไซต์อยูเ่ สมอ - ใช้เวลาในการดาวน์โหลดนอ้ ย แสดงผลเร็ว- การใชง้ านท่สี ะดวก เข้าใจงา่ ย 3

สาหรบั ความถี่ในการอพั เดทหรือปรับปรงุ เว็บไซตน์ ้ันจะแตกตา่ งกนั ตามแต่ประเภทของเวบ็ ไซตท์ ่ีเราตอ้ งการจะสร้างขึ้นมา ถ้าเปน็ เวบ็ ไซต์ของหนังส่ือพิมพร์ ายวนั หรอื ขอ้ มูลประชาสมั พันธแ์ บบเรง่ ดว่ นแต่ถา้ เปน็ เว็บไซต์โครงสร้างหน่วยงานตา่ ง ๆ เวบ็ ไซต์สว่ นตวั ผู้ออกแบบจะดาเนนิ การอัพเดทตามความจาเป็นในการนาเสนอขอ้ มูลแตถ่ ้าท่านตอ้ งการให้เวบ็ ไซต์ของทา่ นเปน็ ทน่ี ่าสนใจทา่ นจะตอ้ งมีกลุ่มเปา้ หมายทีช่ ัดเจนในการนาเสนอข้อมูล และมีการคน้ หาข้อมูลท่ีนา่ สนใจมานาเสนออยู่อยา่ งสม่าเสมอคน้ หาเป้าหมายในการสรา้ งเวบ็ ไซต์ • สร้างเวบ็ ทาไม และเพือ่ อะไร • สร้างเว็บไซตใ์ ห้ใคร และใครคอื กลุม่ เปา้ หมาย • หาจดุ เด่นและจดุ ดอ้ ยของเว็บไซตอ์ น่ื ๆ ทม่ี ีเน้อื หาใกล้เคยี ง • กาหนดจดุ เด่นและจดุ ดอ้ ยของเว็บตัวเองหลกั การออกแบบในเวบ็ ไซต์ แบบเรยี งลาดับ (Sequence) เว็บไซตท์ ่ีมจี านวนเว็บเพจไม่มากนกั หรอื ท่ีมีการนาเสนอข้อมลู แบบทีละขน้ั ตอน แบบระดบั ช้นั (Hierarchy) เวบ็ ไซต์ท่มี จี านวนเว็บเพจมากข้นึ พบไดท้ ั่วไป แบบผสม (Combination) เว็บไซต์ทซ่ี ับซอ้ นเปน็ การนาข้อดีของ 2 รูปแบบมาผสมกันขน้ั ตอนการพฒั นาเว็บไซต์ (เว็บเพจ) 1. ออกแบบโครงสร้างของเว็บซต์ (เวบ็ เพจ) ออกแบบโครงสร้างและหนา้ เวบ็ เพจ กาหนดว่าเวบ็ เพจมี กีห่ น้า แต่ละหนา้ จะแสดงข้อมูลอะไร 2. หาขอ้ มลู ท่ใี ช้ประกอบในการทาเวบ็ ไซต์ (เว็บเพจ) 3. ตง้ั ชื่อ Domain Name 4

4. ออกแบบและตกแตง่ เวบ็ เพจแต่ละหน้า 5. สรา้ งเว็บไซตท์ ่ีได้ออกแบบมา 6. Upload เขา้ สู่ Internet 7. Promote เว็บไซต์ (เว็บเพจ) ใหเ้ ป็นทีร่ ้จู ักการออกแบบเว็บไซต์ใหด้ ูดไี ดอ้ ย่างไร 1 สสี ัน (Color) จะทาใหผ้ ู้ชมเวบ็ รบั รูอ้ ารมณ์ของเว็บ และเรื่องราวที่นาเสนอได้ ควรเลอื กสใี ห้เหมาะสมกับเนอ้ื หา แต่ละสใี หค้ วามรสู้ ึกทแ่ี ตกต่างกัน เช่น – สฟี า้ สเี หลือง ใหค้ วามรู้สึกสดใส และอบอุ่น – สีแดงให้ความรสู้ ึกสนุกสนาน รอ้ นแรง – สนี ้าเงนิ ม่ังคง เข้มแขง็ 2. มคี วามเปน็ เอกลักษณ์ จะทาใหผ้ ้ชู มเวบ็ ไซตจ์ ดจาเวบ็ ได้ง่ายขนึ้ โดยอาจใช้โทนสี รูปประกอบTheme ท่คี ลา้ ยๆ กันทกุ หน้า 3. ผู้ชมเว็บไซต์ตอ้ งสามารถเขา้ ถงึ เนอื้ หาทเ่ี ราตงั้ ใจนาเสนอ หรอื สามารถใชง้ านเว็บ ค้นหาข้อมูลท่ีต้องการไดอ้ ยา่ งสะดวกและรวดเร็วตรงตามความตอ้ งการ 4. แสดงผลได้อย่างรวดเร็วระยะเวลาในการแสดงผลต้องไม่นานจนเกนิ ไป ไมท่ าให้ผู้เขา้ ชมเว็บ รอเลอื กใช้ภาพกราฟกิ และภาพ Animation ไดอ้ ย่างเหมาะสมรูปแบบการจัดแบ่งพื้นท่หี น้า Homepage • ไมม่ ีหลักเกณฑ์ตายตวั ขึ้นอยกู่ บั เนอื้ หาและการออกแบบเว็บไซต์ท่ีนิยมมี 3-4 แบบ แบง่ พ้ืนทใี่ ชง้ านออกเปน็ 1 สว่ น 2 ส่วน 3 สว่ น 1234 5 5

อโดเมน หรอื โดเมนเนม (domain name) คืออะไรโดเมนเนม ความหมายโดยทว่ั ๆ ไป หมายถึง ชอ่ื เว็บไซต์ ชอ่ื บล็อก ซึ่งเป็นช่ือทต่ี ั้งข้ึนเพื่อใหจ้ ดจาและนาไปใช้งานไดง้ ่ายทัง้ ในการเขา้ ชมผ่านบราวเซอรข์ องผใู้ ชท้ ่ัวไป ยังรวมไปถึงผดู้ แู ลระบบโดเมนเนมซสี เทม ท่ีสามารถแก้ไขไอพีแอดเดรสของชือ่ โดเมนเนมน้ันๆ ไดท้ ันทีโดยทผี่ ูใ้ ช้ท่วั ไปไมจ่ าเป็นต้องรบั รู้หรอื จดจาไอพีแอดเดรสทม่ี ีการเปลี่ยนแปลง เครือ่ งคอมพิวเตอรท์ ี่ทาหนา้ ท่เี ผยแพร่เวบ็ ไซต์ จะมีโดนเมนเนมเฉพาะไม่ซ้ากับใคร โดนเมนเนม มีด็อทอยู่หลายประเภทแตท่ น่ี ิยมมากที่สดุ นั้นก็คอื .com เพราะเปน็ ดอ็ ทในยคุ แรกๆ ท่ีเริม่ ใช้กนั และงา่ ยตอ่ การจดจาประเภทของ Domain Name แบง่ ได้เป็น 2 ประเภท1. โดเมน 2 ระดบั ช่ือโดเมน . ประเภทของโดเมน2. โดเมน 3 ระดบั ชอ่ื โดเมน . ประเภทของโดเมน . ประเทศโดนเมนเนม 2 ระดบั จะประกอบดว้ ย www . ชือ่ โดเมน . ประเภทของโดเมนเช่น www.b2ccreation.comประเภทของโดเมน คอื คาย่อขององคก์ ร โดยประเภทขององค์กรทพ่ี บบอ่ ย มดี ังต่อไปนี้ * .com คือ บรษิ ทั หรอื องคก์ รพาณชิ ย์ * .org คือ องคก์ รเอกชนทีไ่ ม่แสวงผลกาไร * .net คือ องค์กรทีเ่ ปน็ เกตเวย์ หรอื จดุ เชือ่ มตอ่ เครอื ข่าย * .edu คือ สถาบนั การศึกษา * .gov คอื องคก์ รของรฐั บาล * .mil คอื องคก์ รทางทหารโดนเมนเนม 3 ระดับ จะประกอบดว้ ย www . ช่ือโดเมน . ประเภทของโดเมน . ประเทศเชน่ www.kmitnb.ac.th,www.nectec.or.th, www.google.co.th 6

ประเภทขององค์กรทพี่ บบ่อยคอื * .co คือ บริษัท หรือ องค์กรพาณชิ ย์ * .ac คือ สถาบันการศึกษา * .go คอื องค์กรของรฐั บาล * .net คอื องค์กรทใ่ี หบ้ รกิ ารเครอื ขา่ ย * .or คอื องค์กรเอกชนท่ไี มแ่ สวงผลกาไรตัวยอ่ ของประเทศทีต่ งั้ ขององคก์ ร * .th คอื ประเทศไทย * .cn คือ ประเทศจีน * .uk คอื ประเทศอังกฤษ * .jp คอื ประเทศญ่ีปุ่น * .au คอื ประเทศออสเตรเลยี โดนเมนเนม ถือเปน็ ส่งิ สาคัญอนั ดับแรกทีม่ องขา้ มไมไ่ ด้เลยสาหรับเวบ็ ไซตน์ ั้นๆ โดยเฉพาะกบั การโฆษณาบนอนิ เตอร์เนท็ ถา้ ไดช้ ่ือทเ่ี ฉพาะเจาะจง ตรงกบั กลุ่มเป้าหมายทมี่ คี วามสนใจเป็นพื้นฐานเดมิ อยู่แล้วน้นั จะทาให้โดเมนเนม หรอื เว็บไซต์นนั้ ๆ จะไดร้ ับความสนใจและเป็นท่จี ดจาไดง้ า่ ยไมใ่ ชก่ บั ผเู้ ข้าชมหรอืกลมุ่ เป้า หมายทีเ่ ข้ามาชมเวบ็ ไซต์ผา่ นโดมเนมเท่านั้นยังรวมไปถึง Search Engine ชอื่ ดงั ตา่ งๆ เชน่ GoogleYahoo MSN เปน็ ตน้ ทจี่ ะเขา้ มาแวะเวียนเขา้ มาทา index กับเวบ็ เพจหน้าต่างๆ ในเว็บไซต์ของเรา หลังจากจดโดนเมนเนมเปน็ ทเ่ี รียบร้อยแลว้ สิ่งสาคญั ลาดับถัดมานน้ั ก็คือ โฮสตงิ้ (Hosting) หรอื ท่ีเก็บขอ้ มลู เวบ็ ไซต์ของเราน้นั เอง ซง่ึ โฮสต้ิงแต่ละท่ีจะมี DNS หรอื Name Server ทท่ี างผใู้ ห้บรกิ ารโฮสตงิ้จะเปน็ คนกาหนดและแจ้งให้เราทราบเพือ่ เอาไปใสใ่ ห้โดมเมเนมของเราเช่น DNS ของ B2C Creation จะมีชือ่ ว่า NS1.B2CCREATION.COM และ NS2.B2CCREATION.COM ซงึ่ คณุ ไม่ตอ้ งกงั วลในเร่อื งน้เี พราะถา้คุณจด Domain Nameและ ใชบ้ ริการโฮสตงิ้ กบั ผ้ใู หบ้ ริการคนเดยี วกนั จะไมม่ ีปัญหาอะไรเลยหรอื แมว้ า่ จะเปน็ คนละคนกัน เพยี งแค่นา DNS ที่ได้ ไประบุให้กบั โดเมนเนมน้ันตามทไี่ ด้อธบิ ายไปแลว้ 7

1. ดับเบล้ิ คลกิ ทไี่ อคอนโปรแกรม2. ปรากฎหนา้ ตา่ งนีข้ ้นึ มา ให้มองชอ่ งกลาง Create New ให้คลิกท่ี HTML 8

3. ปรากฎหน้าตา่ งการทางาน ดงั นี้ 3.1 พ้นื ท่สี ีขาวนนั้ คอื พืน้ ทีท่ ่ีสรา้ งงาน 3.2 ทางบนเป็นเมนูคาส่ัง 3.3 ทางขาวเป็นแถบเคร่ืองมอื3.4 ด้านล่างนี้กเ็ ปน็ แถบเคร่ืองมอื 9

การสร้างงานในรปู แบบของตารางการสร้างงานให้สร้างตาราง กรอบแรกเสมอ งนั้ เรามาเรยี นรูก้ ารสรา้ งตารางกนั เถอะใหก้ รอกข้อมูลตามตวั อย่าง 1. ไปทไี่ อคอน Table ปรากฎหนา้ ตา่ งนีข้ ้ึนมา Rows แถว Columns คอลัมน์ Table width ความกว้าง Border thickness ขนาดเสน้ 0 = ไม่มเี สน้1- N.. ปรากฎเสน้ หากจานวนเลขมากเทา่ ไรขนาดของเสน้ จะหนา2. เมอื่ กาหนดเสรจ็ แลว้ ให้ คลกิ ปมุ่ OK3. จะปรากฎดงั น้ี เลอื ก Center4. ไปที่ Alingn ด้านล่าง 10

5. ใหน้ าจุดกระพริบไปวางไว้ในตาราง 6. ให้สร้างตารางเพม่ิ ดังตัวอย่างRows 10Columns 2Border 0จากนัน้ คลิกปมุ่ OKหมายเหตุการสร้างตารางซ่อนข้างในแลว้ แต่งานของแต่ละคนแล้วแตจ่ ะออกแบบคยี ์ลดั ^ = คาว่า Ctrl^ M เพม่ิ แถว^ Shift + M ลบแถว^ Alt+M การผสานเซลล์ คือการรวมคอลมั น์, แถว หลายคอลัมน์, แถวใหเ้ ป็น 1 คอลัมน์ , แถว^ S บนั ทึก^ W ปดิ ไฟล์ 11

ตวั อย่าง รวมคอลัมน์ใหค้ ลิกคลุมคอลมั น์ผลลพั ธ์ 12

ตัวอยา่ งแถว เชน่ เราทาหน้าแรก (หน้าเมนู)ใหค้ ลมุ แถวดังนี้ผลลัพธ์จากนน้ั ก็พมิ พช์ ือ่ เรื่อง ตกแตง่ รปู ภาพ ตกแต่งข้อความ สพี น้ื 13

ตวั อยา่ งหน้าแรก (Home Page)เติมสใี นตาราง 1. คลิกท่ีชอ่ งตารางท่ตี ้องการ 2. ไปท่ีไอคอน Bg เลอื กสีทต่ี อ้ งการตวั อย่างของหน้าผ้จู ัดทาแบบวเิ คราะห์ A 14

การวเิ คราะห์การสร้างงานในรปู แบบตาราง1. สรา้ งตาราง แถว 1 คอลมั น์ 1 กวา้ ง 700 จดั กง่ึ กลาง2. สร้างตารางยอ่ ย แถว 5 คอลมั น์ 2 กวา้ ง 699 จดั ก่ึงกลาง3. บรรทัดท่ี 1 พมิ พห์ น้าแรกไว้มุมขวา4. บรรทดั ที่ 2 จดั คอลมั นผ์ สานเซลล์ นาขอ้ ความมาวาง5. บรรทัดท่ี 3 เมาสค์ ลิกคอลัมนซ์ ้ายนารูปมาวาง เมาส์คลกิ คอลมั น์ขวา นารปู มาวาง6. บรรทัดท่ี 4 เมาสค์ ลิกคอลัมนซ์ ้ายนาขอ้ ความมาวาง เมาสค์ ลกิ คอลมั น์ขวานาข้อความมาวาง7. บรรทัดท่ี 5 จัดคอลัมน์ผสานเซลล์ นารูปมาวาง 15

การกาหนดหนา้ Web page 1. ไปท่ี เมนู Modify > Page Properties… หรือไปทีป่ ่มุ Page Properties.. ดา้ นล่าง 2. ปรากฎหนา้ ตา่ งนข้ี ึ้นมา 3. กาหนดสพี ืน้ หลัง หรอื พื้นหลงั รปู ภาพ คลกิ ปุ่ม Apply ดวู า่ สที เ่ี ราเลือกชอบไม่ ถ้าไมช่ อบก็ เลือกเปลี่ยนสใี หม่ 34. ไปที่ Title/Encoding 5 65. ตั้งช่อื ใหก้ บั Title Web page จะพิมพเ์ ปน็ ภาษาไทยหรอื อังกฤษก็ได้6. ไปท่ี Encoding เลือกเป็น ไทย (Windows) หรอื Unicode (UTF-8) ก็ได้ 16

การจดั รูปแบบการจดั จัดชดิ ซา้ ย กง่ึ กลาง ชิดขวา 1. นาจุดกระพริบไปวางไวท้ ี่ต้องการกอ่ น 2. เมนู Format > Align > เลอื ก Left Center Right ตามต้องการ ดงั รูปดา้ นล่างน้ีการจัดขนาดตัวอักษร1. คลุมดาขอ้ ความทตี่ ้องการก่อนนะ2. ไปท่ีไอคอน คลกิ สามเหลย่ี มเล็ก3. เลอื ก Heading 1-6 จานวนเลขนอ้ ยตวั โต จานวนเลขมากตวั เลก็ 17

การใสส่ ีอกั ษร 1. คลมุ ขอ้ ความที่ต้องการก่อน2. ไปที่โหมด มุมลา่ งซา้ ย3. ไปท่ี Targeted Rule คลกิ สามเหลย่ี มเลก็เลอื กให้เป็น New Inline Style ทกุ ครงั้ ท่ที าการเปลี่ยนสี4. เลอื กสีท่ตี ้องการ 3 4 2การจดั การแบบอกั ษร 1. คลุมขอ้ ความทตี่ อ้ งการกอ่ น2. ไปที่โหมด มมุ ล่างซ้าย3. ไปท่ี Targeted Rule คลกิ สามเหลย่ี มเลก็เลอื กใหเ้ ปน็ New Inline Style ทกุ คร้ัง ที่ทาการเปลยี่ นแบบอักษร4. ไปที่ไอคอนแบบอกั ษร (ใช้แบบอักษร Tahoma) 18

การใส่รปู ภาพ (ภาพน่งิ และภาพเคลือ่ นไหว)1. นาจุดกระพริบไปวางไวท้ ตี่ อ้ งการจะวางรูปภาพก่อน2. ไปท่ไี อคอน คลิกสามเหลย่ี นเลก็ ๆ เลือกรปู ต้นไม้ Images3. ไปท่ไี ดร์ โฟลเดอร์ ท่เี ราเก็บรปู ไว้4. คลิกปุ่ม OK5. คลกิ ปุ่ม OKการใสร่ ปู ภาพเมอื่ นาเมาสไ์ ปช้เี ปลยี่ นรูป (ภาพน่งิ และภาพเคลื่อนไหว)1. นาจุดกระพริบไปวางไวท้ ีต่ ้องการจะวางรปู ภาพก่อน2. ไปที่ไอคอน คลิกสามเหลย่ี นเล็กๆ เลือกรปู ลูกศร Rollover3. ปรากฎหน้าตา่ งนี้ข้ึนมา3.1 คลกิ ปุ่ม Browse ปมุ่ ที่ 1 เลือกไดร์ โฟลเดอร์ ทีเ่ ราเกบ็ รปู ไว้3.2 คลิกปุม่ Browse ปมุ่ ท่ี 2 เลอื กไดร์ โฟลเดอร์ ท่ีเราเก็บรปู ไว้4. คลกิ ปุ่ม OK 1 2การบันทกึ พรอ้ มต้ังชอื่ 1. เมนู File > Save As.. เลอื กไดร์ เลือกโฟลเดอร์ใหญ่ เข้าโฟลเดอรย์ ่อย (html) 2. ต้งั ช่ือให้ web pageการบันทึก (ทมี่ ีชอื่ งานแลว้ ) 1. เมนู File > Saveหมายเหตุ สงั เกตแถบแสดงชือ่ ไฟล์ หากมีเครอื่ งดอกจนั อย่ขู า้ งหลัง คือยังไมไ่ ดบ้ นั ทกึ 19

การสร้างเอกสารใหม่ 1. ไปที่เมนู File > New หรอื Ctrl + N 2. ปรากฎหน้าตา่ งนี้ขน้ึ มา คลิกปมุ่ Createการเปิดไฟล์ 1. ไปท่เี มนู File > Open หรือ Ctrl + O 2. ไปท่ีไดรท์ ่ตี ้องการ 3. ไปทีโ่ ฟลเดอรข์ องเรา 4. ไปที่ไฟล์ทต่ี ้องการ5. คลกิ ปมุ่ Open หรือ ดบั เบล้ิ คลิกทีไ่ ฟล์ 20

ดาเนนิ การสร้างงาน Web page ดงั ตวั อย่างต่อไปนี้หน้าที่ 1หน้าท่ี 2หน้าท่ี 3 21

หนา้ ที่ 4หน้าท่ี 5 22

หน้าท่ี 6 ออกแบบหนา้ แรก (Home Page)ขั้นตอนน้ีก็เสรจ็ ของการสรา้ ง web page แล้วค่ะ เรากไ็ ดไ้ ฟลง์ าน 5 ไฟล์ korn1 คือ เรอื่ งกลอน nhom คอื เรื่องผู้จดั ทา page 1 คือ นทิ านเรื่อง ลากบั จกั๊ จ่ัน page 1 คอื นทิ านเรื่อง เดก็ เลี้ยงแกะ page 1 คือ นิทานเรอื่ ง หนูกับแมวการลงิ ค์ (การเช่ือมโยง) 1. คลุมข้อความท่จี ะทาการลิงค์ 2. ไปท่ีปมุ่ Browse for File 3. ไปท่ไี ดร์ > โฟลเดอร์ > คลิกไฟลท์ ่ีต้องการลิงค์ (เชอ่ื มโยง) 23

ตัวอย่างการลงิ ค์ หนา้ หลัก (Home Page) ไปยังหนา้ Web page แตล่ ะหนา้ 1. เปิดไฟล์งานท่ชี อ่ื index.html ขน้ึ มา 2. ทาการลงิ คไ์ ปยงั ไฟล์ web page แต่ละหนา้ตวั อยา่ งการลงิ ค์ หนา้ Web page ไปยงั หน้าหลกั 1. เปดิ ไฟลห์ น้า web page ทุกหน้าที่เราสรา้ งไว้ 2. ทาการลิงค์ไปยังไฟล์ Home page คอื ไฟล์ index.htmlจบการสร้าง web pageขอให้ทุกคนโชคดคี ะ่ 24

Program webquestขน้ั ตอนสร้างข้อสอบ 1. พมิ พ์หวั ขอ้ สอบ 2. เลือกชนดิ คาถาม ปรนัย 4 ตวั เลือก หรอื เตมิ คาตอบ 3. เลือกแสดงระดบั คะแนน 4. เลอื กแสดงเฉลยและคาอธิบาย 5. เลอื กสีพนื้ หลงั 6. ระบุจานวนข้อ สรา้ งข้อสอบ 10 ขอ้ กไ็ ม่ต้องเลือก 7. กาหนดระดับคะแนน สร้างข้อสอบ 10 ขอ้ กไ็ มต่ อ้ งกาหนดระดบั คะแนน 8. ต้ังช่อื ไฟลข์ อ้ สอบ เป็น web page ในชอ่ งของ แฟม้ HTML (แบบทดสอบ Online) หา้ มลบ ดอส html อกก (.html) 25

ตวั อย่างขอ้ สอบแบบเตมิ ตอบ (ไมค่ วรตั้งคาถามแบบตอบอธิบาย) 9. คลิกแถบแก้ไขแบบทดสอบ ปรากฎหน้าต่างนี้ขน้ึ มา10. พมิ พ์คาถาม ตัวเลอื ก อย่าลืมคลกิ ข้อท่ีเฉลย11. พมิ พ์คาอธิบายคาตอบ (ข้อทถี่ กู )12. คลิกลูกศรลา่ งขวา เพ่ือทาขอ้ สอบขอ้ ตอ่ ไป13. หากมีรปู ภาพให้พิมพ์ชื่อรูปภาพลงไปในช่อง แฟ้มภาพ gif,jpg อยา่ ลืมใส่นามสกลุ รูป ดงั ตัวอย่าง 26

14. เมอ่ื พมิ พข์ อ้ สอบได้ 10 ขอ้ แลว้ ใหก้ ลับไปท่แี ถบ คา่ เรมิ่ ต้น15. ทาการบนั ทึกไฟล์เปน็ ไฟลข์ อง WebQuest ไปท่ี แฟ้มขอ้ มูล>บันทึกเปน็ > เลอื กไดร>์ โฟลเดอร์ของเรา >โฟลเดอร์ test > ตง้ั ชือ่ ไฟล์16. คลิกป่มุ สร้างแบบทดสอบ HTML ปรากฎหน้าต่างนี้ขนึ้ มา คลิกปมุ่ OK17. คลิกปุ่ม Browser เพอ่ื ดขู อ้ สอบปรากฎหน้า web page ขึน้ 27

18. วิธีแกไ้ ขข้อความลงิ ค์ web site น้ี แล้วเปลี่ยนเปน็ http://www.varee.ac.th19. เปดิ โปรแกรม Dreamweaver CS420. เปดิ ไฟล์ test1-54.html ไปที่ file > Open > เลอื กไดร์ >เลือกโฟลเดอรข์ องเรา > เลือกโฟลเดอร์test > เลอื กไฟล์ข้อสอบที่ต้องการ (.html) สงั เกตไฟล์จะมีสัญลกั ษณ์21. ปรากฎขอ้ สอบ22. คลกิ ไอคอน Code เพ่อื สลบั ไปยงั หน้าตา่ งการเขยี น Code23. เลอ่ื น scrollbar เมาส์คลิกทบ่ี รรทดั ท่ี 124. กดคีย์ลัด Ctrl + F 28

25. ปรากฎหน้าตา่ งน้ี26. ให้พมิ พ์คาวา่ http://www.kr.ac.th ในช่อง Find:27. ใหพ้ มิ พ์คาวา่ http://www.varee.ac.th ในช่อง Replace28. คลกิ ปมุ่ Find Next เพอื่ ทาการคน้ หา เม่อื พบ http://www.kr.ac.th แล้ว29. ใหค้ ลิกปมุ่ Replace All30. คลิกไอคอน เพือ่ สลับกลบั มายังหน้าตา่ ง ออกแบบ31. ทาการบนั ทกึหมายเหตุ หากไมม่ ีโปรแกรม Dreamweaver CS4 ใหใ้ ช้โปรแกรม Notepad 1. เปิดโปรแกรม Notepad 2. เปดิ ไฟลท์ ต่ี ้องการ 3. ไปที่เมนู Edit > Find หรือ Ctrl + F (ทาการคน้ หา) 4. พมิ พ์ www.kr.ac.th แล้วกดป่มุ find Next (สงั เกตจะพบ 2 จดุ ) 5. เมื่อค้นหาขอ้ ความดงั กลา่ วพบแลว้ ให้ทาการลบข้อความน้ีท้ิง ทง้ั 2 จุดตาราและเอกสารประกอบการเรยี นพันจันทร์ ธนวเสถยี รและปยิ ะ นาคสงค์, ออกแบบ สรา้ ง Website Step by Step, สานกั พมิ พ์ Digital Life.ธวัชชัย ศรีสเุ ทพ,คัมภีร์ Web design.อ.มัลลกิ า ธนาบูรณ์, เครอื่ งมอื สาหรับการออกแบบเว็บ. 29