หนังสืออิเล็กทรอนิกส์(วิจัย)

––

คานา หนงั สืออเิ ล็กทรอนกิ ส์(E-book) เรื่อง การใชง้ านAdobe Dreamwever CS5 เล่มน้ไี ด้ถูกสร้างขน้ึ มาเพอื่ประยกุ ต์กับการเรียนการสอนเพอ่ื ให้ผเู้ รียนมคี วามสนใจในเนื้อหาและเรียนร้ไู ดอ้ ย่างมีประสทิ ธภิ าพ ผู้จัดทาหวังเป็นอย่างยง่ิ ว่าหนังสอื อิเลก็ ทรอนกิ ส์(E-book) เลม่ นี้จะเปน็ ประโยชน์ต่อผเู้ รยี นไมม่ ากกน็ ้อยหากมีขอ้ ผิดพลาดประการใดต้องของอภยั มา ณ ทีน่ ี้ นริศรา บญุ เลียง ผูจ้ ดั ทา

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

หน่วยที่ 1ความรู้เบอื้ งต้นเกย่ี วกบั การสร้างเวบ็ ไซต์

โฮมเพจ เวบ็ เพจ และเวบ็ ไซต์ คอื อะไร เว็บเพจ (Web Page) เอกสารที่ประกอบไปด้วยขอ้ มูลท่ีเปน็ อักษร เสียง และภาพตา่ งๆ ท่ีบรรจใุ นแฟ้มเอกสารแตล่ ะหนา้ ของเวลิ ด์ไวดเ์ วบ็ (WWW) ทเ่ี ปิดอ่านจากโปรแกรม Browser โฮมเพจ (Home page) เว็บเพจหน้าแรกของเว็บไซต์ ข้อกาหนดทีเ่ ป็นมาตรฐานต้องมีชอ่ื ไฟล์ว่า index.html หรอื index.htm เว็บไซต์ (Web site) เว็บท่ีประกอบดว้ ยหนา้ โฮมเพจและเวบ็ เพจหลาย ๆ หนา้ มาประกอบกนั ตัวอย่าง เชน่ เวบ็ ไซต์ของโรงเรยี นเทศบาลวัดดอนไกด่ ี คอื www.dkd.ac.thเปน็ ต้น

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

ลักษณะของเว็บไซต์ท่ีดี 1. ความทนั สมัย (Currency) เป็นข้อมูลท่ใี หม่ ทันตอ่ สถานการณ์และไดร้ บั การปรบั ปรงุ แก้ไขตามระยะเวลาอยา่ งเหมาะสม และแสดงวนั ทปี่ รบั ปรงุข้อมูลครง้ั ล่าสดุ 2. เนอื้ หาและข้อมลู (Content and Information) ตอ้ งมีเนื้อหาและขอ้ มลู ท่เี ป็นประโยชน์ เนือ้ หาของเว็บมคี วามถกู ต้อง เป็นไปตามวัตถุประสงค์ในการจัดทาเว็บไซต์ 3. ความน่าเช่ือถือ (Authority) คอื ผู้จดั ทาเวบ็ เปน็ ผ้ทู เี่ ก่ียวข้องโดยตรงกับเน้อื หา หรอื เป็นองคก์ รทรี่ ับผดิ ชอบด้านนัน้ โดยตรง โดยแสดงความรับผดิ ชอบในเว็บอยา่ งชัดเจน แสดงให้เห็นไดจ้ ากส่วนทสี่ งวนลขิ สทิ ธิแ์ ละผ้รู ับผดิ ชอบภายในเว็บ ซ่งึ นิยมแสดงไวด้ า้ นล่างของเว็บไซต์ 4. การเชอ่ื มโยงขอ้ มูล (Navigation) ควรจะแสดงการเชอื่ มโยงไปยังสว่ นตา่ งๆ ในรปู แบบทีเ่ ขา้ ใจงา่ ย และอ่านได้อย่างชดั เจน 5. การปฏบิ ัติจรงิ (Experience) ต้องทาให้ผเู้ ขา้ ชมร้สู ึกว่าไม่เสียเวลาไมไร้ประโยชน์หรือเว็บเพจไม่เป็นไปตามวัตถุประสงค์ 6. ความเปน็ มลั ตมิ ีเดยี (Multimedia) องคป์ ระกอบท่สี าคัญของความเป็น multimedia ภายในเวบ็ ไซด์ คือ เสียง ภาพ กราฟกิ ภาพเคลอ่ื นไหว ควรสอดคลอ้ งกับเน้อื หาภายในเว็บ 7. การให้ข้อมูล (treatment) ควรจะเขา้ ถงึ ได้ง่ายและรวดเร็ว โดยไม่มีความสลบั ซับซ้อน มีการจดั รูปแบบและหมวดหมู่ของข้อมลู อยา่ งเป็นระบบเพอ่ื ให้ง่ายต่อการตรวจสอบและใชง้ านขอ้ มูล 8. การเข้าถงึ ขอ้ มลู (Access) สามารถแสดงผลขอ้ มูลได้อย่างรวดเรว็เมอ่ื ผู้ใชเ้ ขา้ สู่เว็บไซต์

การออกแบบขนาดของเว็บเพจใหพ้ อดกี ับหน้าจอ การออกแบบเวบ็ เพจที่ดี จะตอ้ งคานงึ ถึงกลมุ่ ผู้ชมเปน็ ส่วนใหญว่ า่ ใช้จอภาพทมี่ คี วามละเอยี ด (Resolution) ดังนัน้ จึงควรออกแบบเวบ็ เพจใหม้ ีความสัมพันธก์ ับขนาดหน้าจอคอมพิวเตอร์ของกล่มุ ผู้ชมด้วย เนือ่ งจากหนา้ เว็บเพจแตล่ ะขนาดก็จะสามารถใช้งานไดพ้ อดกี ับขนาดหนา้ จอที่แตกตา่ งกนั ไป ซ่งึขนาดความละเอยี ดของหนา้ จอและเวบ็ เพจที่นยิ มใชก้ นั มี 2 ขนาด ไดแ้ ก่ - 1024 x 768 pixels - 1280 x 800 หรอื 1280 x 1024 pixels การเลอื กใช้สใี ห้เหมาะสม การเลือกใชส้ ีนนั้ มีผลอยา่ งมากในแง่ของจิตวทิ ยาและความรู้สกึ เน่ืองจากสีแต่ละสจี ะส่งผลตอ่ อารมณ์และความรู้สึกของผู้ท่เี หน็ ดงั นนั้ เราจึงควรเลอื กใชส้ ีใหเ้ หมาะสมกบั เวบ็ ไซต์ โดยแตล่ ะสีใหค้ วามหมายและความร้สู กึ ท่ีต่างกันดังน้ี - สีฟา้ เป็นสีของท้องฟา้ จงึ ดแู ลว้ รสู้ ึกโปร่งโล่งสบายตา ในบางครงั้ สือ่ ถึงความนุ่มนวล สขุ สบาย - สีน้าเงิน บง่ บอกถงึ ความสงบเงียบ สขุ มุ ความหรูหรา มีราคา มีระดบับางครงั้ สือ่ ถึงความสุภาพ ความม่ันคง หนกั แนน่ จรงิ จงั และความเป็นชายอกีดว้ ย - สเี ขียว เปน็ สีของตน้ ไม้ ใบหญ้า จึงชว่ ยให้รสู้ ึกถงึ ความชุม่ ชื่น ความเยน็สบาย สบายตา - สมี ว่ ง บง่ ออกถงึ อารมณห์ นักแน่น มีเสน่ห์ ลกึ ลับ

- สชี มพู ให้ความรสู้ กึ ออ่ นหวาน นุ่มนวล และยงั ส่ือถงึ ความรัก วัยรุ่นและผู้หญงิ อีกด้วย - สนี า้ ตาล บ่งบอกถึงความสงบ ความเรียบ ความเปน็ ผใู้ หญ่ เกา่ แก่โบราณ - สแี ดง บ่งบอกถงึ ความร้อนแรง รนุ แรง มีพลงั และความตน่ื เต้นสนกุ สนาน นอกจากน้ียงั เปน็ สีมงคลของคนจนี ดว้ ย - สเี หลือง ให้อารมณข์ องความสดใส ปลอดโปร่ง ดึงดูดสายตาไดด้ ี และสามารถมองเห็นไดใ้ นระยะไกล - สสี ม้ ทาใหร้ ู้สึกอบอ่นุ แตบ่ างครั้งอาจทาใหร้ ู้สึกกระตือรือร้น มีชีวิตชวี าดทู นั สมัย สดใส กระฉับกระเฉง มีพลัง - สีเทา บง่ บอกถงึ ความรู้สึกสภุ าพ สขุ มุ สงบ และม่ันคง ขณะเดยี วกันทาให้ร้สู ึกหมุน่ หมอง ไร้ชีวติ ชีวาและโศกเศร้าอกี ด้วย บางครงั้ ส่ือถงึ ความเป็นกลาง - สีขาว สอ่ื ถึงความบริสทุ ธิ์ ความใสสะอาด เรยี บง่าย

หนว่ ยที่ 2ทาความรู้จักโปรแกรมAdobe Dreamweaver

รูจ้ กั กับ Dreamweaver CS5 Adobe Dreamweaver CS5 เป็นโปรแกรมที่ช่วยในการสรา้ งเวบ็ ไซต์และเหมาะสมสาหรับนกั พัฒนาเวบ็ ไซต์มอื ใหม่ โดยสามารถนารูปภาพหรอืขอ้ ความมาประกอบเป็นเว็บเพจ อกี ทงั้ ยังเพ่มิ ลูกเลน่ ต่าง ๆ เช่น เสียงภาพเคล่อื นไหว วีดโิ อ ซงึ่ ไมจ่ าเปน็ ตอ้ งรู้หลักการเขียนโปรแกรมดว้ ยภาษาHTML กส็ ามารถสรา้ งเว็บไซตไ์ ด้ อะโดบี ดรีมวฟี เวอร์ (Adobe Dreamweaver) หรือชื่อเดิมคือแมโครมีเดยี ดรีมวีฟเวอร์ (Macromedia Dreamweaver) เปน็ โปรแกรมแก้ไขHTML พัฒนาโดยบริษทั แมโครมีเดีย (ปจั จุบันควบกจิ การรวมกับบริษทั อะโดบีซิสเต็มส์) ดรมี วีฟเวอรม์ ีทัง้ ในระบบปฏิบัติการแมคอินทอช และไมโครซอฟท์วินโดวส์ ดรีมวฟี เวอร์ยงั สามารถทางานบนระบบปฏิบัติการแบบยนู กิ ซ์ ผ่านโปรแกรมจาลองอยา่ ง WINE ได้ โปรแกรม Dreamweaver มกี ารพฒั นาดงั นี้ - Dreamweaver 1.0 (ธันวาคม ค.ศ. 1997) เป็นเวอรช์ ันแรกสาหรบั ระบบปฏิบัติการ MAC OS - Dreamweaver 1.2 (มีนาคม ค.ศ. 1998) เปน็ เวอรช์ ันแรกสาหรับระบบปฏบิ ตั ิการ Windows - Dreamweaver 2.0 (ธนั วาคม ค.ศ. 1998) - Dreamweaver 3.0 (ธนั วาคม ค.ศ. 1999) - Dreamweaver UltraDev 1.0 (มถิ ุนายน ค.ศ. 2000) - Dreamweaver 4.0 (ธนั วาคม ค.ศ. 2000) - Dreamweaver UltraDev 4.0 (ธนั วาคม ค.ศ. 2000) - Dreamweaver MX (พฤษภาคม ค.ศ. 2002) - Dreamweaver MX 2004 (10 พฤศจกิ ายน ค.ศ. 2003)

- Dreamweaver 8 (13 พฤศจกิ ายน ค.ศ. 2005) - Dreamweaver CS3 (16 เมษายน ค.ศ. 2007) เป็นเวอร์ชันแรกหลงั จากรวมกบั บรษิ ัท อะโดบซี สิ เต็มส์ - Dreamweaver CS4 (23 กนั ยายน ค.ศ. 2008) - Dreamweaver CS5 (20 มิถุนายน ค.ศ. 2010) - Dreamweaver CS6 (23 เมษายน ค.ศ. 2012) คณุ สมบตั ิของเครื่องคอมพิวเตอรก์ ่อนติดตั้งโปรแกรม 1. หนว่ ยประมวลผลกลาง (CPU) ไมน่ อ้ ยกว่า Intel Pentium4 หรอืAMD Athlon 64 2. หน่วยความจา (RAM) ไมน่ อ้ ยกว่า 512 MB (แนะนา 1 GB) 3. เนอื้ ทว่ี า่ ง (Harddisk) ไม่น้อยกว่า 1 GB 4. จอภาพ (Monitor) ความละเอยี ดไมน่ อ้ ยกว่า 1,024 x 768 Pixels 5. ระบบปฏิบตั ิการ (OS) ไมต่ ่ากวา่ ระบบปฏิบัตกิ าร Windows XP 6. ไดร์ฟดีวดี ี-รอม (DVD-ROM drive)

ส่วนประกอบของ Adobe Dreamweaver CS5 ส่วนประกอบของโปรแกรม Adobe Dreamweaver CS5 มีองค์ประกอบดงั น้ี 1. Menu bar เปน็ แถบรวบรวมคาสั่งทง้ั หมดของโปรแกรม - Code สาหรับแสดงการทางานในรูปแบบ HTML นอกจากนย้ี งัสามารถเขียนคาสั่ง HTML หรอื คาสั่งภาษาสครปิ ต์ (Script) อน่ื ๆ ได้ดว้ ย - Split สาหรบั แสดงการทางานแบบ HTML กบั การแสดงพน้ื ท่ีออกแบบ โดยจะแสดงสว่ นของคาสั่ง ไว้ดา้ นบนและแสดงเว็บเพจปกตไิ ว้ด้านล่าง - Design สาหรับแสดงเวบ็ เพจคล้ายกบั ทเี่ ราเห็นในบราวเซอร์เช่น ข้อความ กราฟกิ หรือออปเจก็ ตอ์ ื่นๆ และสามารถแก้ไขเน้ือหาลงเวบ็ เพจได้ - Title สาหรบั แสดงช่อื ของเว็บเพจ ในส่วนของแถบหวั เรื่อง2. Toolbar เป็นแถบรวบรวมคาส่งั ทีใ่ ช้งานบ่อยๆ

3. Document Windows เปน็ พ้นื ทีส่ าหรบั สร้างหนา้ เว็บเพจ และสามารถเลอื กพน้ื ทก่ี ารทางานไดห้ ลายมุมมอง เชน่ - Code View สาหรับแสดงการทางานในรปู แบบ HTMLนอกจากนย้ี ังสามารถเขียนคาส่ัง HTML หรอื คาสั่งภาษาสคริปต์ (Script) อ่นื ๆไดด้ ้วย - Code and Design สาหรบั แสดงการทางานแบบ HTML กับการแสดงพ้ืนที่ออกแบบ โดยดา้ นบนจะแสดงส่วนของคาสัง่ และดา้ นลา่ งแสดงเวบ็ เพจปกติไว้ - Design View สาหรับแสดงเว็บเพจคลา้ ยกับทีเ่ ราเห็นในบราวเซอร์ เชน่ ขอ้ ความ กราฟกิ หรอื ออปเจก็ ตอ์ ่ืนๆ และสามารถแก้ไขเน้อื หาลงเวบ็ เพจได้ 4. Status bar เป็นแถบแสดงสถานะ ซ่ึงประกอบดว้ ย 2 สว่ น คือทางด้านซ้ายเรียกว่า Tag Selector ใชส้ าหรับแสดงคาสั่ง HTML ของส่วนประกอบในเว็บเพจท่เี ลอื กอยู่ และทางดา้ นขวาเป็นสว่ นที่บอกขนาดหน้าจอการแสดงผลและเวลาท่ใี ช้ในการดาวน์โหลดเวบ็ เพจ 5. Properties Inspector เปน็ ส่วนทกี่ าหนดคณุ สมบตั ติ ่าง ๆ ในการปรบั แตง่ องค์ประกอบของหน้าเว็บเพจ

6. Insert Bar เป็นแถบที่ประกอบดว้ ยปุ่มคาสง่ั ท่ใี ชใ้ นการแทรกออบเจก็ ต์ (องคป์ ระกอบต่างๆ) ลงในเว็บเพจ โดยแบง่ เป็นหมวดหม่ซู ึง่ มีรายละเอียดดังนี้ - Common เปน็ กลุ่มเครอ่ื งมือพนื้ ฐานในการสร้างเว็บเพจ เชน่รูปภาพ กราฟิก ตาราง ไฟล์มเี ดีย เป็นตน้ - Layout เป็นกลุ่มเครอ่ื งมอื ทชี่ ว่ ยในการจดั องค์ประกอบของหนา้เว็บเพจ - Forms เปน็ กลมุ่ เครื่องมือท่ีใชส้ ร้างแบบฟอร์มรับขอ้ มลู จากผชู้ มเชน่ ช่องรบั ขอ้ ความ และฟลิ ด์ชนดิ ตา่ งๆ - Data เป็นกลุ่มเครือ่ งมือทีใ่ ช้สาหรับสร้างหน้าเวบ็ ตดิ ต่อกับฐานขอ้ มูล - Spry เปน็ กลุ่มเครอ่ื งมอื ทใี่ ชใ้ นการจัดการหน้าเว็บเพจ โดยจะชว่ ยในการทางานเพ่ิมเติมหรือแกไ้ ขในส่วนทผี่ ดิ พลาดหรือต้องการปรับเปล่ยี นให้สะดวกข้นึ

- jQuery Mobile เป็นกลมุ่ เครื่องมือท่ีช่วยในการสร้างหน้าเว็บบนมอื ถอื - InConext Editing เป็นกลุม่ เครือ่ งมือท่ชี ว่ ยอานวยความสะดวกให้ผใู้ ช้งานสามารถแก้ไขเว็บเพจได้ - Text เป็นกลุม่ เคร่อื งมือท่ีใช้จัดรปู แบบขอ้ ความในเวบ็ เพจ - Favorite เปน็ กลมุ่ เครอื่ งมือทใ่ี ช้งานบ่อยๆ เพือ่ ความสะดวกในการใชง้ าน - Color Icons แสดงสขี องปมุ่ เครอื่ งมอื - Hide Labels ซอ่ นชือ่ เรียกของปุ่มเคร่ืองมอื7. Panel Group เปน็ กลุม่ หน้าตา่ งพาเนล ซ่งึ ช่วยเพ่ิมความสามารถในการจัดการและออกแบบเว็บเพจ

หน่วยที่ 3การสรา้ งตารางในหน้าเวบ็ เพจ

โครงสรา้ งและสว่ นประกอบของตาราง การสร้างตารางจะช่วยจัดหน้าเว็บเพจใหเ้ ป็นระเบยี บเรยี บรอ้ ยรวมถึงการปรบั แต่งคา่ ตา่ งๆ เชน่ เสน้ ขอบของตาราง สพี ื้นหลงั ข้อความในเซลล์ การรวมหรือแยกเซลล์ เพือ่ ใช้ในการแสดงข้อมลู ซ่ึงตารางประกอบด้วย 1. คอลมั น์ (Column) หรือเซลล์ในแนวต้งั 2. แถว (Row) หรือเซลล์ในแนวนอน 3. เซลล์ (Cell) หรอื ช่องของตาราง

การใสต่ ารางลงในเว็บเพจการสร้างตารางมีหลายวธิ ี ซึง่ มวี ธิ กี ารดงั น้ี วิธที ี่ 1 วธิ ที ่ี 2

1. คลกิ วางเคอรเ์ ซอร์ตรงตาแหนง่ ที่ตอ้ งการ 2. แท็บ Insert ให้เลือก Common 3. คลิกเลือก Table 4. จะปรากฏหนา้ ต่างของ Table โดยแบ่งออกเปน็ 3 กลมุ่ ดงัรูป

กลมุ่ ที่ 1 : Table size (กาหนดรายละเอียดของตาราง) - Rows : จานวนแถว - Columns : จานวนคอลัมน์ - Table width : ความกว้างของตาราง (หน่วยท่ีใช้วดั เป็นเปอรเ์ ซน็ ต์หรอื พิกเซล) - Border thickness : ความหนาของเส้นขอบตาราง - Cell padding : ระยะหา่ งระหว่างขอบเซลล์กับเน้ือหา - Cell spacing : ระยะห่างระหวา่ งเซลล์ในตาราง กลุ่มที่ 2 : Header (เลือกตาแหนง่ ของหวั เร่อื งภายในตาราง) - None : ไมใ่ ช้หวั เรือ่ งในตาราง - Left : กาหนดใหม้ หี ัวเรอ่ื งทางด้านซา้ ย - Top : กาหนดให้มหี ัวเรื่องทางด้านบน - Both : กาหนดใหม้ หี ัวเร่ืองดา้ นซ้ายและดา้ นบน กลุ่มท่ี 3 : Accessibility (กาหนดขอ้ มูลท่ัวไปในตาราง) - Caption : กาหนดหวั ข้อของตาราง - Summary : คาอธบิ ายกากบั ตาราง

5. เมอื่ กาหนดคุณสมบตั ิตา่ ง ๆ เสร็จเรยี บร้อยแลว้ ไดต้ ารางตามทเี่ ราตอ้ งการ การปรับแต่งคุณสมบตั ขิ องตาราง เมอ่ื เราคลกิ เลือกท่ีตาราง เราสามารถปรับแตง่ รายละเอยี ดตา่ ง ๆ ของตารางในส่วนของ Properties Inspector ดังนี้ 1. Table : ชอื่ ของตาราง 2. Rows : จานวนแถว 3. Cols : จานวนคอลัมน์ 4. w : ความกวา้ งของตาราง 5. Direction : เปล่ียนทิศทางของตาราง 6. Cellpad : ระยะหา่ งระหว่างขอบเซลล์กบั เนอื้ หา

7. CellSpace : ระยะหา่ งระหว่างเซลลแ์ ต่ละเซลล์ 8. Align : การจัดตาแหนง่ ของตาราง 9. Border : ความหนาของเสน้ ขอบตาราง 106. Class : กาหนดค่า CSS ให้กับตาราง1. การเพ่ิม/ลบ (แถวหรือคอลัมน์) เมือ่ เราสร้างตารางเสร็จเรียบร้อยแลว้ และต้องการทจี่ ะเพิ่ม/ลบ (แถวหรือคอลมั น์) สามารถทาได้ตามข้นั ตอน ดงั น้ี1. คลิกเมาส์วางเคอร์เซอรต์ รงตาแหนง่ ของเซลลท์ ่ตี อ้ งการ 2. คลกิ เมาส์ปุ่มขวา จะปรากฏเมนูยอ่ ย ใหเ้ ลอื ก Table 3. จะปรากฏรายการใหเ้ ลอื ก ดงั น้ี - Insert Row : แทรกแถว

- Insert Column : แทรกคอลัมน์ - Insert Rows or Columns : แทรกแถวหรือแทรกคอลัมน์ - Delete Row : ลบแถว - Delete Column : ลบคอลัมน์ 2. การรวมเซลล์ / การแบ่งเซลล์ หากเราต้องการรวมเซลลห์ ลายๆ เซลลเ์ ข้าด้วยกนั หรือตอ้ งการแบ่งเซลล์ มวี ธิ ีการดงั นี้ 1. เลอื กเซลลท์ ี่ต้องการรวม (ต้องเป็นเซลลท์ ี่ติดกนั ) 2. คลกิ เมาสป์ ุ่มขวา จะปรากฎเมนยู ่อย ให้เลือก Table 3. จะปรากฏรายการให้เลอื ก ดงั นี้ - Merge Cells : แทรกเซลล์ - Split Cell : แบ่งเซลล์

4. เซลลท์ ่ถี กู เลือกจะรวมเซลล์เข้าดว้ ยกนั ดังรปู หมายเหตุ กรณแี บง่ เซลล์ เม่อื คลกิ ที่ Split Cell จะปรากฏหน้าต่าง Split Cell ดังรูป Rows : เลอื กแบ่งเซลล์ออกเปน็ แถว Columns : เลือกแบ่งเซลลอ์ อกเปน็ คอลมั น์ Number of ... : กาหนดจานวนเซลล์ทตี่ อ้ งการจะแบ่ง

การแทรกขอ้ ความและรปู ภาพลงในตาราง 1. คลกิ เซลลท์ ตี่ ้องการจะแทรกข้อความ แลว้ พิมพข์ อ้ ความลงไปเหมอื นโปรแกรม Microsoft Excel 2. คลิกเซลล์ที่ตอ้ งการจะแทรกรูปภาพ 3. คลกิ ท่เี มนู Insert

4. เลือก Image หรอื กดปุ่ม Ctrl + Alt + I จะปรากฏหนา้ ต่างSelect Image Source 5. คลิกทช่ี อ่ ง Look in เพอ่ื เลอื กโฟลเดอรท์ ีเ่ กบ็ รปู ภาพ 6. คลิกเลอื กรปู ภาพ ซง่ึ จะแสดงภาพตัวอย่างดา้ นขวามอื 7. คลกิ ปุม่ OK 8. รูปภาพจะแทรกในเซลล์น้นั ทันที สามารถปรับแตง่ ไดต้ ามตอ้ งการ

หนว่ ยที่ 4การสร้างข้อความ ในเวบ็ เพจ

เริ่มต้นใส่ขอ้ ความ ขอ้ ความนบั วา่ เป็นขอ้ มลู พื้นฐานในการสือ่ สารถงึ ผูเ้ ขา้ ชมเว็บไซต์ การใส่ข้อความบนหน้าเว็บเพจ สามารถกระทาไดเ้ หมือนกับการพมิ พ์ในโปรแกรมMicrosoft Word โดยสามารถพิมพบ์ นหน้าเว็บเพจไดเ้ ลย 1. คลกิ วางเคอร์เซอร์ตรงตาแหน่งท่ตี ้องการพิมพข์ อ้ ความ 2. พมิ พ์ข้อความที่ต้องการ การขนึ้ บรรทัดใหม่ การขนึ้ บรรทดั ใหม่ ใชว้ ิธีกดป่มุ Enter จะเว้นบรรทัดท่วี า่ งก่อนและหลังให้ 1 บรรทดั การขนึ้ บรรทดั ใหมไ่ ม่ต้องเว้นทวี่ า่ ง ถ้าต้องการให้การข้นึ บรรทัดใหมโ่ ดยไมต่ ้องเว้นที่วา่ ง ใหค้ ลิกหนา้ ขอ้ ความหรือบรรทัดทตี่ อ้ งการจะขึน้ บรรทัดใหม่แลว้ กดปมุ่ Shift พรอ้ มกับกดปมุ่ Enter

การตกแต่งและจดั รูปแบบให้ข้อความ เม่ือพมิ พข์ ้อความลงในเว็บเพจแลว้ การเลอื กขอ้ ความ เพ่ือจัดการกบั ข้อความนน้ั ๆ เช่น กาหนดรปู แบบของตวั อักษร การลบ คดั ลอก ย้าย ฯลฯ มีรายละเอยี ดดงั นี้ 1. การเลือกข้อความ - เลอื กข้อความเฉพาะส่วนทีต่ ้องการ 1. คลิกเมาส์วางเคอรเ์ ซอร์หน้าขอ้ ความและลากเมาส์ไปจนถึงคาสดุ ท้าย แล้วปลอ่ ยเมาส์ 2. บรเิ วณเมาสล์ ากผ่านจะมีแถบสีดาขึ้นมา - เลือกขอ้ ความท้งั หมด 1. คลกิ ที่เมนู Edit 2. เลือก Select All หรือ Ctrl + A

3. ขอ้ ความท้งั หมดจะถูกเลือก โดยเป็นแถบสีดาคลุมข้อความ หมายเหตุ ถา้ ตอ้ งการยกเลกิ การเลือกเอกสาร ทาได้โดยคลกิพ้ืนท่ีวา่ งบนหน้าเว็บเพจ 2. การตกแต่งและจัดรูปแบบของขอ้ ความ ขอ้ ความทพ่ี มิ พ์ลงในเวบ็ เพจ สามารถจัดรูปแบบของข้อความ เช่นกาหนดรปู แบบตวั อกั ษร ขนาด สี ลกั ษณะตวั อักษร รวมไปถงึ การจัดตาแหน่งของขอ้ ความ เพื่อเพ่มิ ความสวยงามหรือเน้นความสาคญั มวี ิธกี ารดงั นี้

1. เลอื กข้อความทตี่ อ้ งการตกแต่งหรือจดั รปู แบบของข้อความ 2. เครอ่ื งมอื สาหรบั จัดรูปแบบขอ้ ความใน PropertiesInspector ซงึ่ มีให้เลือก 2 รูปแบบ คอื แบบ HTML และแบบ CSS ดงั นี้ - จัดรูปแบบด้วย HTML หมายเลข 1 : เปดิ การทางานกบั HTML หมายเลข 2 : Format : เลือกรปู แบบหวั ขอ้ Heading(ขนาดตวั อักษร) ระดับ 1-6 หมายเลข 3 : Class : ดงึ สไตล์ของ CSS มาใช้กับขอ้ ความ หมายเลข 4 : กาหนดลกั ษณะตัวอักษรใหเ้ ป็นตัวหนา หมายเลข 5 : กาหนดลักษณะตัวอักษรใหเ้ ป็นตัวเอยี ง หมายเลข 6 : ใส่ Bullet หรือหัวขอ้ ย่อย หมายเลข 7 : จดั ยอ่ หน้าของขอ้ ความ

- จดั รูปแบบด้วย CSS หมายเลข 1 : เปดิ การทางานกับ CSS หมายเลข 2 : Targeted Rule : สรา้ งหรือกาหนดสไตล์ CSS หมายเลข 3 : Font : เลอื กรูปแบบของตัวอกั ษร หมายเลข 4 : Size : ขนาดของตัวอักษร หมายเลข 5 : สขี องตวั อักษร หมายเลข 6 : กาหนดลักษณะตัวอกั ษรให้เป็นตัวหนา หมายเลข 7 : กาหนดลกั ษณะตวั อักษรใหเ้ ป็นตวั เอียง หมายเลข 8 : จัดตาแหน่งของขอ้ ความ เช่น ชิดซ้าย กง่ึ กลางชิดขวา จัดใหต้ รงกันทงั้ ซา้ ยและขวา

หมายเหตุ หมายเลข 2 : Targeted Rule : สร้างหรอื กาหนดสไตล์ CSS - ถ้าเลือก <New Inline Style> คุณสมบตั ทิ ี่กาหนดจะมีผลต่อขอ้ ความทเี่ ลือกทันที - ถา้ เลอื ก <New CSS Rule> จะเป็นการสร้าง CSS ใหม่ ซง่ึสามารถนาไปใช้ซา้ ได้ มวี ิธกี ารดังน้ี 1. เลอื กข้อความ 2. ช่อง Targeted Rule เลือก <New CSS Rule> 3. ตกแตง่ หรอื จัดรปู แบบตาม หมายเลข 3-8 (กรณนี ้ี สาธิตการกาหนดสขี องตวั อักษร)

4. ช่อง Selector Name ให้พมิ พช์ อ่ื ทีเ่ ราต้องการสรา้ งเปน็ CSS 5. ชอ่ ง Rule Definition เลือก (This document only) เพอื่กาหนดเฉพาะข้อความทีเ่ ลอื กไว้ 6. คลกิ ท่ีปมุ่ OK เพอื่ บันทกึ 7. ผลจากการจดั รูปแบบด้วย CSS

การแทรกสัญลักษณ์พิเศษลงในเวบ็ เพจ การแทรกสัญลักษณพ์ เิ ศษลงในเวบ็ เพจ เชน่ สกลุ เงิน หรือสัญลกั ษณ์แสดงลขิ สทิ ธ์ติ า่ ง ๆ มวี ิธกี ารดังนี้ 1. คลกิ วางเคอรเ์ ซอร์ตรงตาแหน่งทต่ี อ้ งการวางสญั ลักษณ์ 2. คลิกที่เมนู Window แล้วเลอื ก Insert (สังเกตต้องมีเครื่องหมายถกู อยดู่ า้ นหน้า Insert) 3. Insert Panel เลอื ก Text 4. คลิกที่ป่มุ Characters แล้วเลอื กสัญลกั ษณท์ ่ตี อ้ งการ

การน้าเอกสารอื่นมาใชร้ ว่ มกบั Dreamweaver CS6 Adobe Dreamweaver CS6 สามารถนาขอ้ มูลจากโปรแกรมอนื่ ๆเชน่ Microsoft Word , Excel , PowerPoint มีวธิ กี ารดงั นี้ 1. การใช้ Import 1. คลิกวางเคอร์เซอร์ตรงตาแหน่งทีต่ อ้ งการนาเข้าไฟลเ์ อกสาร 2. คลกิ ท่ีเมนู File

3. คลกิ ที่ Import แลว้ เลือกประเภทไฟลน์ าเขา้ (กรณนี ี้ เลอื กเปน็ ไฟล์ Word) 4. เลือกโฟลเดอรท์ อี่ ยู่ของไฟล์เอกสาร 5. เลอื กไฟลท์ ต่ี อ้ งการ 6. คลกิ ทป่ี มุ่ Open

7. รายละเอยี ดของไฟล์ทัง้ หมด (ท้งั ข้อความและภาพ) จะถูกนาเขา้ มาในเว็บเพจ ดงั รูป 2. การคดั ลอกขอ้ มูลจากไฟล์เอกสาร

1. เปดิ ไฟลเ์ อกสารทต่ี อ้ งการ แล้วเลือกขอ้ ความหรอื เนือ้ หาท่ีตอ้ งการคัดลอก จากนัน้ ใหค้ ดั ลอก หรือกดปุม่ Ctrl + C 2. นาเนอ้ื หาทคี่ ดั ลอกวางลงในโปรแกรม AdobeDreamweaver โดยคลิกเคอรเ์ ซอรต์ รงตาแหนง่ ท่ีต้องการวางข้อความ จากน้นัคลิกทเ่ี มนู Edit เลอื ก Pate หรือกดป่มุ Ctrl + V 3. จะได้เนื้อหาตามที่ต้องการ (ทัง้ ข้อความและรูปภาพ)

หนว่ ยท่ี 5การตกแตง่ เวบ็ เพจดว้ ยรูปภาพ

เตรยี มภาพทใ่ี ช้ในเว็บเพจการนาภาพมาแสดงบนหนา้ เว็บ เราจะต้องเตรียมไฟลภ์ าพท่ีจะใช้ก่อน โดยความทาความเขา้ ใจความแตกตา่ งระหว่างไฟล์ภาพแตล่ ะชนดิเพื่อจะได้นามาใช้ไดอ้ ยา่ งเหมาะสม ไฟล์ท่นี ิยมใชง้ านบนเว็บมีดังน้ี ใช้ .JPEG สาหรับหรือวาดภาพท่มี จี านวนสีมากๆ ใช้ .GIF หรอื .PNG-8 สาหรบั ภาพท่ีมีลกั ษณะเปน็ ลายเสน้ หรอืภาพที่ต้องการสรา้ งเปน็ ภาพโปรง่ ใส เช่น ภาพการ์ตนู และภาพเคล่ือนไหว ใช้ .PNG-24 สาหรับภาพถ่ายทต่ี ้องการใหม้ ลี ักษณะโปร่งใส แต่เปน็ไฟล์ทไี่ ด้หลังการบบี อดั จะมีขนาดใหญก่ ว่าไฟล์ .JPEG และมีคุณภาพมากกว่าไฟล์ .JPEG จดั เก็บภาพที่ใช้บนหน้าเวบ็ขอแนะนาใหน้ าไฟลภ์ าพทัง้ หมดทนี่ ามาแสดงบนห้าเว็บมารวมไวท้ ี่โฟลเดอรเ์ ดยี ว เพอื่ งา่ ยแกก่ ารคน้ หาภาพ และการนาภาพมาใช้ ดงัตวั อยา่ ง เราจะสรา้ งโฟลเดอร์ images สาหรับจดั เก็บภาพทั้งหมดไว้ในโฟลเดอร์ Payao ทเี่ ป็นโฟลเดอรเ์ ก็บเว็บไซตข์ องเรา

รจู้ กั กับไฟลภ์ าพกราฟิกชนิดต่างๆ บนเวบ็มรี ายละเอียดของไฟลภ์ าพกราฟิกชิดต่างๆ ที่แตกต่างกันสาหรับการใช้งานบนเวบ็ ไดด้ ังน้ีฟอร์แมต GIF  ถกู พัฒนาโดย CompuServe ในปี 1980 เพือ่ บบี อัดขอ้ มลู ภาพลายเส้น  มขี อ้ จากดั การใช้งานอย่ทู ่ี 256 สีเทา่ นั้น (8 บิต)  ใชก้ ารบบี อดั แบบสร้างพาเลต (Palette) สีข้นึ มาใหม่ ทาใหไ้ มส่ ูญเสีย คณุ ภาพของภาพ เพราะไม่มีการตัดสีภาพออก แตเ่ ปน็ ลกั ษณะการแทนสี ภาพในแตล่ ะพิกเซลด้วยสีท่ีกาหนดข้ึนใหม่ ฉะนัน้ คุณภาพไฟล์จะไมเ่ สยี  แสดงภาพโปร่งใส่ และภาพเคลอ่ื นไหวได้

ฟอร์แมต JPEG  ถกู พัฒนาโดย Joint Photographic Experts Group เพ่ือจุดประสงค์ใน การบีบอัดขอ้ มูลทางไฟล์รปู ภาพ มีจุดเด่นคอื หลังการบบี อัด ยังสามารถใช้ สไี ดถ้ ึง 16.7 ล้านสี ในขณะท่ี GIF .ใชไ้ ด้แคเ่ พยี ง 256 สเี ท่านนั้  ไม่จาเป็นตอ้ งกาหนดพาเลตสเี พือ่ การใช้งาน เพราะรองรับขอ้ มลู สไี ดม้ าก ถงึ 16.7 ล้านสีอยู่แลว้  ลกั ษณะการบีบอัด เป็นการลบข้อมลู ส่วนทซ่ี า้ ซ้อนกนั มากที่สดุ ออกจาก ภาพ ยงิ่ มกี ารบบี อัดขอ้ มูลมากขึน้ เท่าไหร่ คุณภาพกจ็ ะสูญเสียมาก เท่าน้ันฟอร์แมต PNG  ถูกพัฒนาโดย Thomas Boutell และ Tom Lane วัตถุประสงค์ เพ่ือการ ทางานขา้ มระบบ  บบี อดั ข้อมูลได้ดีกว่า GIF 20-30 เปอร์เซ็นต์  สามารถเลือกการจดั การจัดเกบ็ ข้อมูลได้ท้งั แบบ 8 บิต ,24 บิต, และ 32 บิต ต่างกับ GIF  แสดงผลไดเ้ ร็วกวา่ แบบ GIF เพราะภาพใน GIF จะเร่มิ จะแสดงผลเม่อื ดาวนโ์ หลดขอ้ มูลมาได้ 1 ใน 18 สว่ น ขณะท่ี PNG เรม่ิ แสดงผลเมือ่ ข้อมูล ถกู โหลดเข้ามา 1 ใน 64 ส่วน  ใช้กับภาพโปรง่ ใสได้

หน่วยที่ 6การตกแต่งและเพิ่มลกู เล่น ในเว็บเพจ

การเพ่ิมลกู เลนลงในเว็บเพจ ลักษณะของมัลตมิ ีเดยี การใส่ลกู เล่นให้กับหนา้ เว็บเพจ เป็นสิ่งทช่ี ว่ ยเพิม่ ความน่าสนใจ เป็นจดุ ดึงดูดและความตนื่ ตาตน่ื ใจใหก้ ับผเู้ ขา้ ชมเวบ็ ไซต์การใช้มัลติมเี ดยี ต้องใชเ้ ทคโนโลยีสาคัญ ไดแ้ ก่ Flash, Java, Java applet,Shockwave, Plug in และActiveX Control เปน็ ตน้ 1. Flash เป็นไฟล์ภาพเคล่ือนไหวท่ีเกดิ จากโปรแกรม Macromedia Flash ขนาดไฟลค์ ่อนขา้ งเล็กเพราะเป็นภาพ แบบ Vector-Based ใช้ลายเส้นสรา้ งภาพ มีนามสกลุ ไฟลแ์ บบ .swf โดยผูใ้ ช้ ตอ้ งตดิ ตง้ั โปรแกรม Flash Player กับเว็บเบราวเซอรก์ ่อนจงึ จะใชง้ านได้ 2. Shockwave เกิดจากการแปลงไฟลจ์ ากโปรแกรม Macromedia Director และ Authorware เพื่อให้ไฟลม์ ขี นาด เล็กลงเหมาะกับการแสดงบนเวบ็ เพจ โดยโปรแกรม Director เหมาะกับการ สรา้ งเกม และงานมัลติมีเดียพรีเซนเตชนั สว่ นโปรแกรม Authorware เหมาะสาหรับสร้างงานมลั ติมเี ดยี ช่วยสอน หรือ CAI (Computer Aids Instruction) 3. Java เป็นภาษาคอมพิวเตอร์ที่ใช้เขียนโปรแกรมขนาดเล็กเพ่ือทางาน รว่ มกบั เวบ็ เพจ

4. Java Script เปน็ คาสั่งภาษา Java ขนาดสัน้ เหมาะสาหรับสร้างลกู เลน่ ให้เว็บเพจ เช่น สร้างฟอร์มตดิ ต่อกบั ผ้ใู ช้งาน นามาสร้างเวบ็ เพจได้นอกเหนือจากภาษา HTML Java Applet เป็นโปรแกรมขนาดเล็กสร้างเกมทีส่ รา้ งดว้ ยภาษา Java ทาหน้าทเ่ี ฉพาะเจาะจง เช่น เกม ภาพเคลอ่ื นไหวเป็นต้น 5. ActiveX เป็นโปรแกรมขนาดเลก็ ซึง่ เรียกว่า \"คอนโทรล (Control)\"ทาหน้าทเี่ ฉพาะตามทเี่ ขยี นในโปรแกรมไว้ ถูกเรียกใช้โดยดาวนโ์ หลดจากเวบ็ เซริ ์ฟเวอร์มาทางานบนเครื่องอตั โนมัติ เชน่ การแสดงภาพ 3 มติ ิการหมุนภาพแบบ 360 องศา 6. Plugin เป็นโปรแกรมเสรมิ ท่ที างานร่วมกบั เว็บเบราวเ์ ซอร์ การเลน่ ไฟล์ .SWF

1. คลิกเมาส์วางเคอรเ์ ซอร์ตรงตาแหนง่ ทต่ี ้องการ 2. คลกิ ทเ่ี มนู Insert ให้เลอื ก Media แลว้ เลอื ก SWF หรือกดป่มุCtrl + Alt + F 3. จะปรากฏหน้าต่าง Select SWF ใหเ้ ลอื กโฟลเดอร์ทเี่ กบ็ ไฟล์ 4. เลือกไฟล์ทีต่ อ้ งการ 5. คลกิ ทปี่ มุ่ OK

6. ต้งั ชอื่ หัวเรื่อง (ไมใ่ สก่ ไ็ ด้) แล้วกดปมุ่ OK 7. ไฟล์ SWF จะแทรกในหน้าเว็บเพจ สามารถทดลองเลน่ ไฟล์ SWFโดยกดปุม่ Play

การเล่นไฟล์ .FLV1. คลิกเมาส์วางเคอร์เซอรต์ รงตาแหน่งทตี่ ้องการ2. คลิกท่เี มนู Insert ให้เลอื ก Media แลว้ เลอื ก FLV