–– สแกนQR Code เพ่อื เรียกดหู นงั สอื อเิ ล็กทรอนกิ ส์
คานา หนงั สืออเิ ล็กทรอนกิ ส์(E-book) เรื่อง การใชง้ าน Adobe Dreamwever CS5 เล่มน้ไี ด้ถูกสร้างขน้ึ มาเพอื่ ประยกุ ตก์ ับการเรียนการสอนเพอ่ื ให้ผเู้ รียนมคี วามสนใจใน เนื้อหาและเรียนร้ไู ดอ้ ย่างมีประสทิ ธภิ าพ ผู้จัดทาหวังเป็นอย่างยง่ิ ว่าหนังสอื อิเลก็ ทรอนกิ ส์ (E-book) เลม่ นจี้ ะเปน็ ประโยชน์ต่อผเู้ รยี นไมม่ ากกน็ ้อย หากมีขอ้ ผิดพลาดประการใดต้องของอภยั มา ณ ทีน่ ี้ นริศรา บญุ เลียง ผูจ้ ดั ทา
สารบัญ หนว่ ยที่ 1 ความรเู้ บื้องตน้ เกี่ยวกับการสรา้ งเวบ็ ไซต์ หนว่ ยที่ 2 ทาความรจู้ กั โปรแกรม Adobe Dreamweaver หนว่ ยที่ 3 การสร้างตารางในหนา้ เว็บเพจ หนว่ ยที่ 4 การสรา้ งข้อความในเว็บเพจ หนว่ ยท่ี 5 การตกแต่งเวบ็ เพจ
หน่วยที่ 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 การสร้างข้อความ ในเวบ็ เพจ
การสรา้ งปุ่ม Button ดว้ ยตวั เอง การออกแบบปุม่ (Button) ต่าง ๆ ดว้ ยโปรแกรม Photoshop แบบท่ีไม่ยาก และท่านสามารถนาไป ดดั แปลง หรือนาไปพฒั นาต่อ เพื่อให้ออกมาในรปู แบบอืน่ ๆ ตามการใช้งาน เริ่มขน้ั ตอนการท้าปุ่ม 1. ทา้ การเปดิ โปรแกรม Adobe Photoshop และทา้ การเลอื กสร้างไฟล์ใหม่ โดยเลือกทเ่ี มนู File --> New 2. ท้าการก้าหนดขนาดของไฟลง์ านทต่ี อ้ งการทา้ ในท่ีนผี้ มกา้ หนดความกวา้ งเปน็ 74px และสงู 18px เลอื ก Background Contents เปน็ Transparent 3. ท้าการเลือกเครื่องมือสร้างสเี่ หล่ยี มขอบโคง้ มล โดยการคลกิ ที่เครือ่ งมือสรา้ งส่ีเหล่ียมค้างไว้ จะมี รูปแบบรูปทรงต่าง ๆ เลื่อนออกมาทางด้านซา้ ยให้เราเลือกครบั 4. ทที่ ลู บาร์ดา้ นบนใหเ้ ราเลอื กตัวเลอื กท่ีสอง จากทางด้านซ้ายมือ และใสค่ า่ ความโค้งมลเปน็ 5px ตามภาพครับ 5. หลงั จากท่เี ลอื กเสรจ็ แลว้ ใหท้ า้ การ Drag Mouse (คลกิ เมาส์คา้ งแลว้ ลาก) ในหนา้ งานท่เี ปิด ขนึ้ มา เพือ่ สร้างรูปทรงสี่เหล่ียม ให้อยูภ่ ายในไฟล์ท่เี ราสร้างข้นึ
หลงั จากน้นั เลอื กที่เมนู Paths ทา้ การเลอื กตวั เลือกท่ี 3 จากซา้ ย เพอื่ ท้าให้เสน้ ของส่ีเหลี่ยมที่เราสรา้ งข้ึน กลายเปน็ เสน้ ประครบั 6. ท้าการเลอื กทเ่ี คร่อื งมี Gradient เพื่อท้าการไล่เฉดสี 7. ท้าการคลิกทแ่ี ถบทูลบาร์ด้านบน 8. จะมีหนา้ ต่างใหมเ่ ปิดข้นึ มา เพื่อให้เราทา้ การเลอื กเฉดสี หากเราต้องการจะใส่สที ่ขี ้างใดข้างหน่ึง ใหเ้ ราท้าการเลือกคลิกทสี่ ่เี หล่ียมดา้ นลา่ งแถบสี ในดา้ นทตี่ อ้ งการเปลี่ยนสี จากน้ันท้าการคลิกสใี นช่องสีเ่ ห ลียมท่ีหัวข้อ Color 9. เลอื กเฉดสีตามทต่ี ้องการ
10. ท้าการคลกิ เมาส์คา้ งและทา้ การลากเมาส์ขน้ึ -ลง เพ่ือสรา้ งจดุ เริ่มตน้ และจุดปลายของเฉดสที ่ี เราเลอื ก 11. หลังจากน้ัน ท้าการเลอื กเมนู Layer Style --> Stroke เพือ่ ท่จี ะทา้ การใส่ขอบให้กับตัวปุ่ม 12. ในทนี่ ้ีผมไดก้ า้ หนด Size เปน็ 1px ครบั Position เลือกเป็น Inside ครบั และทา้ การเลอื กสี ตามต้องการ 13. ทา้ การสรา้ ง Layer ขน้ึ มาใหมค่ รับ ในเมนู Layer ให้เลือกตัวเลือกที่สองจากขวาครบั 14. เลอื ก Layer ท่ี 2 ทา้ การเลอื กทเ่ี มนู Select --> Modify --> Contact 15. ในทนี่ ี้ผมได้ก้าหนดขนาดที่ 2px ครบั
16. ทา้ การเทสีขาวลงไปในเลเยอรท์ ี่ 2 ครบั 17. จากน้นั ท้าการเลอื กท่ีเครื่องมอื Rectangular Marquee ใน Toolbar ดา้ นซ้ายมือ ทา้ Drag Mouse (คลิกเมาส์ค้างแล้วลาก) ครอบในส่วนคร่ึงล่างของงานครับ 18. หลงั จากนัน้ ท้าการ Delete สว่ นที่เราเลือก คลกิ Ctrl+D 19. ใน Layer ท่ี 2 ทเี่ ราได้ทา้ การเทสขี าวลงไปและลบส่วนครง่ึ ลา่ งออกไปแล้วน้นั ให้การเลอื ก Opacity เปน็ 20% หรือตามใจชอบนะครับ 20. จากนั้นเลือกท่ีเครอื่ งมือ T เพ่อื ทา้ การพิมพต์ ัวอักษรครบั โดยจะมีแถบเมนดู ้านบนในการ กา้ หนดลักษณะต่าง ๆ ของตัวอกั ษรครับ 21. ให้ทา้ การเลือกเมนู File --> Save for web เพอื่ ทา้ การเซฟงานออกมาใช้ในหน้าเวบ็ เพจครับ 22. หลงั จากนั้นเราจะได้ปมุ่ สั่งซือ้ ที่สามารถน้าไปใช้บนหน้าเว็บไดแ้ ลว้ ครับ
เริ่มต้นใสข่ อ้ ความ ขอ้ ความนบั วา่ เปน็ ขอ้ มลู พื้นฐานในการสือ่ สารถงึ ผูเ้ ขา้ ชมเว็บไซต์ การใส่ ข้อความบนหนา้ เว็บเพจ สามารถกระทาไดเ้ หมือนกับการพมิ พ์ในโปรแกรม Microsoft Word โดยสามารถพิมพบ์ นหน้าเว็บเพจไดเ้ ลย 1. คลกิ วางเคอร์เซอร์ตรงตาแหน่งท่ตี ้องการพิมพข์ อ้ ความ 2. พิมพ์ข้อความที่ต้องการ การขนึ้ บรรทัดใหม่ การข้ึนบรรทดั ใหม่ ใชว้ ิธีกดป่มุ Enter จะเว้นบรรทัดท่วี า่ งก่อน และหลังให้ 1 บรรทดั การขึน้ บรรทดั ใหม่ไม่ต้องเว้นทวี่ า่ ง ถา้ ต้องการให้การข้นึ บรรทัดใหมโ่ ดยไมต่ ้องเว้นที่วา่ ง ใหค้ ลิก หนา้ ขอ้ ความหรอื บรรทัดทตี่ อ้ งการจะขึน้ บรรทัดใหม่แลว้ กดปมุ่ Shift พรอ้ มกับ กดปมุ่ Enter
การตกแต่งและจดั รูปแบบให้ข้อความ เม่ือพมิ พข์ ้อความลงในเว็บเพจแลว้ การเลอื กขอ้ ความ เพ่ือจัดการกบั ข้อความ นน้ั ๆ เช่น กาหนดรปู แบบของตวั อักษร การลบ คดั ลอก ย้าย ฯลฯ มี รายละเอยี ดดงั นี้ 1. การเลือกข้อความ - เลอื กข้อความเฉพาะส่วนทีต่ ้องการ 1. คลิกเมาส์วางเคอรเ์ ซอร์หน้าขอ้ ความและลากเมาส์ไปจนถึง คาสดุ ท้าย แล้วปลอ่ ยเมาส์ 2. บรเิ วณเมาสล์ ากผ่านจะมีแถบสีดาขึ้นมา - เลือกขอ้ ความท้งั หมด 1. คลกิ ที่เมนู Edit 2. เลือก Select All หรือ Ctrl + A
3. ขอ้ ความทั้งหมดจะถูกเลอื ก โดยเปน็ แถบสีดาคลุมข้อความ หมายเหตุ ถา้ ต้องการยกเลิกการเลือกเอกสาร ทาได้โดยคลกิ พ้ืนท่ีวา่ งบนหน้าเว็บเพจ 2. การตกแตง่ และจัดรูปแบบของขอ้ ความ ขอ้ ความทพ่ี ิมพล์ งในเวบ็ เพจ สามารถจดั รูปแบบของข้อความ เช่น กาหนดรปู แบบตวั อกั ษร ขนาด สี ลักษณะตวั อักษร รวมไปถงึ การจัดตาแหน่ง ของขอ้ ความ เพื่อเพ่มิ ความสวยงามหรอื เน้นความสาคญั มวี ธิ ีการดงั นี้
1. เลอื กข้อความทตี่ อ้ งการตกแต่งหรือจัดรปู แบบของข้อความ 2. เครอ่ื งมอื สาหรบั จดั รูปแบบขอ้ ความใน Properties Inspector ซงึ่ มีให้เลือก 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. นาเนอื้ หาทคี่ ัดลอกวางลงในโปรแกรม Adobe Dreamweaver โดยคลิกเคอรเ์ ซอร์ตรงตาแหนง่ ท่ีต้องการวางข้อความ จากน้นั คลิกทเ่ี มนู Edit เลือก Pate หรอื กดปุ่ม Ctrl + V 3. จะไดเ้ น้ือหาตามทีต่ ้องการ (ทงั้ ข้อความและรูปภาพ)
หน่วยที่ 5 การตกแตง่ เว็บเพจ
การสรา้ งปมุ่ Button ดว้ ยตนเอง 1. เปดิ โปรแกรม Adobe Photoshop พรอ้ มทั้ง ใช้คาสง่ั File --> New 2. ตง้ั ค่าทัง้ หมด ตามรปู Name: Button1 Width:300 Height:200 Background Contents: Transperent
3. ลงมือวาดปุ่ม ด้วยรูปทรง Rounded Rectangle Tool 4. ไปทห่ี น้าต่าง Layer และ click ขวา เขา้ ไปทค่ี าส่ัง Blending Options
5. กดที่ Gradient (กดตรงตาแหนง่ ของแถบสี เพ่ือใช้หน้าตา่ ง Gradient Editor ) 6. ตาแหน่ง หมดุ สี สามารถเลอื กสที ่ีต้องการ โดย ใหส้ หี นง่ึ ไล่โทนสไี ปหาอีก สหี นึง่
เตรยี มภาพทใ่ี ช้ในเว็บเพจ การนาภาพมาแสดงบนหนา้ เว็บ เราจะต้องเตรียมไฟลภ์ าพท่ีจะใช้ กอ่ น โดยความทาความเขา้ ใจความแตกตา่ งระหว่างไฟล์ภาพแตล่ ะชนดิ เพ่อื จะได้นามาใช้ไดอ้ ยา่ งเหมาะสม ไฟล์ท่นี ิยมใช้งานบนเว็บมีดังน้ี ใช้ .JPEG สาหรับหรือวาดภาพท่มี จี านวนสีมากๆ ใช้ .GIF หรอื .PNG-8 สาหรบั ภาพท่ีมีลกั ษณะเปน็ ลายเสน้ หรอื ภาพที่ต้องการสรา้ งเปน็ ภาพโปรง่ ใส เช่น ภาพการ์ตูน และ ภาพเคล่ือนไหว ใช้ .PNG-24 สาหรับภาพถ่ายทต่ี ้องการใหม้ ลี ักษณะโปร่งใส แต่เปน็ ไฟล์ทไี่ ด้หลังการบบี อดั จะมีขนาดใหญก่ ว่าไฟล์ .JPEG และมีคุณภาพ มากกว่าไฟล์ .JPEG จดั เก็บภาพทใ่ี ช้บนหน้าเวบ็ ขอแนะนาใหน้ าไฟลภ์ าพทัง้ หมดทนี่ ามาแสดงบนห้าเว็บมารวมไวท้ ี่ โฟลเดอรเ์ ดยี ว เพอื่ งา่ ยแกก่ ารคน้ หาภาพ และการนาภาพมาใช้ ดงั ตวั อยา่ ง เราจะสรา้ งโฟลเดอร์ images สาหรับจดั เก็บภาพทั้งหมดไว้ใน โฟลเดอร์ Payao ทเี่ ป็นโฟลเดอรเ์ ก็บเว็บไซตข์ องเรา
รจู้ กั กับไฟลภ์ าพกราฟิกชนิดต่างๆ บนเวบ็ มรี ายละเอียดของไฟลภ์ าพกราฟิกชิดต่างๆ ทีแ่ ตกต่างกนั สาหรับการใช้งานบน เวบ็ ไดด้ ังน้ี ฟอร์แมต GIF ถกู พัฒนาโดย CompuServe ในปี 1980 เพือ่ บบี อัดขอ้ มลู ภาพลายเส้น มขี อ้ จากดั การใช้งานอย่ทู ่ี 256 สีเทา่ นั้น (8 บิต) ใชก้ ารบบี อดั แบบสร้างพาเลต (Palette) สีข้นึ มาใหม่ ทาใหไ้ มส่ ูญเสีย คณุ ภาพของภาพ เพราะไม่มีการตัดสีภาพออก แตเ่ ปน็ ลกั ษณะการแทนสี ภาพในแตล่ ะพิกเซลด้วยสีท่ีกาหนดข้ึนใหม่ ฉะนัน้ คุณภาพไฟล์จะไมเ่ สยี แสดงภาพโปร่งใส่ และภาพเคลอ่ื นไหวได้
Search
