การสร้างเว็บไซต์

50 3. รักษาและแก้ไขภาพได้เร็วขึ้น การใช้เครื่องมือแก้ไขและแสดงผลได้อย่างรวดเร็ว 4. สนับสนุนการแสดงของ Windows HIDPI เพื่อให้สามารถมองเห็นภาพได้ละเอียด และ แสดงภาพ ที่คมชัด 5. สนับสนุนการออกแบบที่มีประสิทธิภาพ เหมาะสําหรับการออกแบบที่ตอบสนองหลายหน้าจอช่วย ให้สามารถสร้างเค้าโครงหลายขนาดแตกต่างกัน 6. เพิ่มรูปแบบเลเยอร์มากขึ้น รวมทั้งการลดเงา การทําชอบหนา แก้ไขรูปแบบได้ง่ายขึ้น 7. สามารถเรียกดู Glyphs ทั้งหมดที่มีอยู่ในตัวอักษร เพิ่มมุมมองทางเลือกสําหรับ Glyphs ใช้งานง่าย 8. ลดความซับซ้อนของการทําโมเดล 3D ลดความละเอียดของโมเดล 3D เพื่อเพิ่ม ประสิทธิภาพการ ทํางานของ Photoshop และเพื่อขยายการเข้าถึงเนื้อหา 3D ที่มีคุณภาพสูงให้แท็บเล็ตสมาร์ทโฟน และ อุปกรณ์อื่น ๆ 9. ค้นหาภาพที่สมบูรณ์แบบหรือกราฟิกได้อย่างรวดเร็วจาก Adobe Stock Marketplace ช่วยให้ ค้นหา สิทธิ์การใช้งาน และการจัดรูปภาพ และวิดีโอจากภายใน Photoshop CC เลือกจาก 40 ล้าน Assets บันทึกการเลือกไปยัง Creative Cloud Libraries เพื่อใช้งานภาพได้เลย รูปที่ 4.2 Adobe Photoshop CC 2018 4.2.2 โปรแกรม Adobe Animate CC 2018 Adobe Animate CC เป็นหนึ่งในชุดโปรแกรม Adobe Creative Cloud บริษัทอะโดบี พัฒนา Adobe Animate CC ต่อยอดมาจาก Adobe Flash Professional โดยถูกสร้างขึ้นเพื่อ พัฒนาไฟล์ภาพเคลื่อนไหว หรือแอนิเมชันบนเว็บไซต์ที่เรียกกันว่า “Web Animation" และยัง สามารถสร้างการโต้ตอบ (Interactive) กับ ผู้เข้าเยี่ยมชมเว็บไซต์บนเว็บไซต์ต่าง ๆ ได้อีกด้วยซึ่งก็ได้ พัฒนามาจาก Adobe Flash Professional เป็น Adobe Animate CC ให้ออกมาให้ใช้งานกัน

51 พร้อมฟังก์ชันที่ทํางานได้สะดวกสบายมากขึ้น และสามารถนําไฟล์ที่ได้จาก โปรแกรมไปใช้ภายใน โปรแกรมต่าง ๆ ที่เกี่ยวกับการสร้างเว็บไซต์ เช่น Muse หรือ Dreamweaver ได้เช่นกัน คุณสมบัติใหม่ของโปรแกรม Adobe Animate CC 2018 1. การทํางานร่วมกันกับ Libraries การควบคุมให้ได้อย่างเดียว สร้างสรรค์ Creative Cloud Libraries เพื่อให้สามารถนํามาใช้กับสมาชิกในทีม แต่ไม่สามารถเปลี่ยนหรือลบได้ 2. Updated Libraries Panel ค้นหาภาพที่ต้องการได้เร็วขึ้นด้วยการค้นหาใหม่ของ Adobe Stock และไอคอน ทําให้ง่ายที่จะได้รับ Licensed จาก Adobe Stock 3. เครื่องมือ Brushies ที่เพิ่มขึ้น รูปแบบใหม่ของเครื่องมือ Brushes, Vector Brush Smoothing และ Tiling ให้มีวิธีการสร้างผลงานได้มากขึ้น 4. ภาพขนาดย่อสัญลักษณ์กราฟิก รายละเอียดการเคลื่อนไหวของตัวละคร เช่น ปากและมือ การแสดงตัวอย่างภาพได้เร็วขึ้นด้วย ซึ่งสามารถเพิ่มโดยตรงกับเส้นได้ 5. การปรับปรุงตัวเลือกการเผยแพร่เว็บไซต์ Projects ที่สร้างมาจาก HTML5 ในขณะนี้ สนับสนุน HiDPI และ Retina Displays ผู้ลงโฆษณาสามารถสร้างและเผยแพร่โฆษณาจาก HTML5 ที่ขยายเมื่อคลิกหรือเลื่อนเมาส์ 6. Transparent Layers สามารถแก้ไขปัญหาด้วยตนเอง ของการวาดด้านบนของ Layers อื่น ๆ ภายในเคลื่อนไหว 7. แสดงผลงานด้วย Adobe Portfolio แม้ว่าจะปิดเว็บไซต์ก็สามารถเชื่อมโยงไปถึงการสร้าง และ แก้ไขแบบกําหนดเองและ Contact Pages ให้ดีขึ้นเพื่อเชื่อมต่อกับผู้ชม รูปที่ 4.3 Adobe Animate CC 2018

52 4.3 การใช้โปรแกรม Adobe Photoshop CC 2018 ในการออกแบบ เว็บไซต์ ในการออกแบบเว็บไซต์ ในหน่วยนี้จะเริ่มต้นใช้งานโปรแกรม Adobe Photoshop CC 2018 วาดเค้าโครงหน้าเว็บไซต์และ ส่วนประกอบของหน้าเว็บไซต์ซึ่งมีขั้นตอนย่อย ๆ ดังนี้ 4.3.1 การสร้างเอกสารใหม่และการวาดเค้าโครงร่างเว็บไซต์ 1. ดับเบิลคลิกที่ ไอคอนโปรแกรม Adobe Photoshop CC หน้า Desktop 2. จะเข้าสู่โปรแกรม ดังรูป 3. ปรากฏ New Document คลิกที่ Web 4. ใส่ขนาด Width = 1010 Pixels, Height = 300 Pixels, Resolution - 72 Pixels/Inch,Color Mode = RGB, 8 bit 5. เมื่อกําหนดขนาดตามที่ต้องการแล้วคลิก Create

53 6. จะได้หน้าจอ Artboard 1 ขึ้นมา 4.3.2 การออกแบบส่วนหัวเว็บไซต์ 1. คลิก Create New Layer พิมพ์ชื่อ หัวเว็บไซต์ 2. คลิกเครื่องมือ Rectangle Tool 3. เลือกสีที่เครื่องมือ Color Picker เลือกสีที่ต้องการ คลิก OK

54 4. คลิกวาดในส่วนหัวเว็บจะได้ดังรูป 5.คลิกที่ File > Open จะปรากฏหน้าต่าง Open เลือกเปิดภาพที่ต้องการ คลิก Open

55 6. ใช้เครื่องมือ Move Tool จากแบรูปภาพลงมา ใช้เครื่องมือ Elliptical Marcute Toot ส่วนที่ต้องการ คลิกเครื่องมือ Move Tool เพื่อลากไปยัง Artboardt เสร็จแล้วให้คลิกปุ่ม Close ปิดหน้าจอ รูปภาพที่เปิด 7. คลิกที่ Layer รูปภาพที่ต้องการปรับขนาด คลิกที่เมนูEdit > Free Transform (Ctrl+T/ 7. คลิกที่ Layer รูปภาพที่ต้องการปรับขนาด คลิกที่เมนูEdit > Free Transform (Ctrl+T) จะ ปรากฏช่องสี่เหลี่ยมรอบรูปภาพ ให้คลิกปรับขนาดรูปภาพตามต้องการ

56 8. ทําขั้นตอนที่ 5-8 เพื่อนํารูปภาพที่ 2 มาตกแต่งให้สวยงาม ดังรูป 9. ใส่เส้นให้รูปภาพ คลิก Layer ที่ต้องการใส่เส้นให้รูปภาพ คลิกเครื่องมือ Add a Layer Style> Stroke 10. ปรากฏหน้าต่าง Layer Style เลือกสีเส้นที่ของ Color และก าหนดขนาด Size ตามต้องการ คลิกOK

57 11. คลิกที่ File > Open จะปรากฏหน้าต่าง Open เลือกเปิดภาพที่ต้องการ คลิก Open 12. ใช้เครื่องมือ Move Tool ลากแท็บรูปภาพลงมา ใช้เครื่องมือ Rectangular Marquee Tool คลิกเลือกส่วนที่ต้องการ คลิกเครื่องมือ Move Tool เพื่อลากไปยัง Artboardi เสร็จแล้ว ให้คลิกปุ่ม Close ปิดหน้าจอรูปภาพที่เปิด

58 13. ใช้เครื่องมือ Eraser Tool กําหนดขนาดยางสนที่ 228 เพื่อลบส่วนที่ภาพตัดกันดังรูป 14. ใส่เส้นขอบปรับแต่งให้สวยงาม 4.3.3 การเตรียมพื้นที่สำหรับใส่ข้อความ ข้อความที่ใช้ในส่วนหัวต้องเป็นข้อความที่มองเห็นชัดเจน ไม่กลมกลืนกับภาพ ดังนั้นควรจัดตําแหน่ง การวางข้อความให้เหมาะสมเพื่อเพิ่มความโดดเด่นให้กับชิ้นงาน โดยมีขั้นตอนดังนี้ 1. คลิกเลือกสีพื้น เครื่องมือ Color Picker Paneele Rectangle Tool วาดลงในตําแหน่งที่ต้องการ ใส่ตัวอักษรเพื่อลดความเด่นชัดของภาพ ดังรูป

59 2. ปรับค่า Opacity 60% เพื่อปรับค่าความโปร่งแสงของภาพดังรูป 3. ใช้เครื่องมือ Eraser Tool ตัดขอบของรูปร่าง โปรแกรมจะปรากฏกล่องข้อความให้ทําการแปลง รูปร่างเป็นภาพก่อนจึงจะกระทําการต่อได้ให้คลิก OK 4. จะสามารถลบขอบของรูปร่างได้และได้พื้นที่สําหรับใส่ข้อความในส่วนหัวดังรูป

60 4.4 การบันทึกไฟล์ภาพกราฟิกสำหรับเว็บไซต์ การบันทึกไฟล์ภาพกราฟิกสําหรับเว็บไซต์สามารถทําได้ดังนี้ 1. คลิกที่เมนูFile > Export > Save for Web (Legacy) 2. จะปรากฏหน้าจอ Save for Web ปรับค่า Preset: JPEG Hight คลิก Save 3. จะปรากฏหน้าจอ Save Optimized As ตั้งชื่อ header คลิก Save

61 4. จะปรากฏกล่องข้อความแจ้งเตือนชื่อไฟล์ถูกบันทึกมีผักชนะที่ไม่ใช่ละคืน ชื่อไฟล์เหล่านี้จะเข้า กัน ไม่ได้กับเว็บบราวเซอร์และเซิร์ฟเวอร์บางตัว คลิก OK 5. จะได้ไฟล์ภาพหัวเว็บไซต์เพื่อเตรียมใช้ในขั้นตอนต่อไป ดังรูป

62 4.5 การใช้โปรแกรม Adobe Animate CC 2018 ในการออกแบบเว็บไซต์ ในการออกแบบเว็บไซต์ เมื่อได้สร้างหัวเว็บไซต์เสร็จเรียบร้อยแล้ว ขั้นตอนต่อไปจะใช้โปรแกรม Adobe Arminate ในการสร้าง ภาพเคลื่อนไหวสำหรับเว็บไซต์ซึ่งมีขั้นตอนการสร้าง ดังนี้ 1. เปิดโปรแกรมที่ปุ่ม Start เปิดโปรแกรม Adobe Animate CC 2018 2. Create New nan HTML5 Canvas 3. ให้หน้าจอการทํางานขนาดจอให้เท่ากับเป็นไซต์S : 1010 H: 300 px 4. Import ภาพที่ได้ออกแบบไว้เข้ามา คลิกที่เมนู File > Import > Import to State 5. คลิกเลือกไฟล์ header คลิก Open

63 6. คลิกเครื่องมือสร้างเลเยอร์ใหม่ New Layer ดับเบิลคลิก Layer เพื่อเปลี่ยนชื่อ 7. กด Ctrl ค้าง แล้วเลือก Layer ทั้งสอง คลิกเฟรมที่ 60 คลิกขวา Insert keyfrarie 8. คลิกที่ Layer ตัวอักษร คลิกที่เฟรมที่ 1 9. คลิกเครื่องมือ Text กําหนดรูปแบบตัวอักษรที่ต้องการที่หน้าต่าง Properties พิมพ์ข้อความ

64 10. คลิกเฟรมที่ 20 กดขวา Insert Keyframe ขยายตัวอักษรให้ใหญ่ขึ้นและเปลี่ยนสีตัวอักษร ดัง รูป 11. คลิกเฟรมที่ 40 คลิกขวา Insert Keyframe ลดขนาดตัวอักษรลงและเปลี่ยนสีตัวอักษร ดังรูป 12. กด Ctrl+ Enter เพื่อแสดงผลดังรูป

65 13. แทรก Layer ใหม่ขึ้นมา เปลี่ยนชื่อเป็น effect จะปรากฏ Layer ใหม่ที่ Timeline ให้คลุมเลือก เฟรมที่ 2-60 ขวา Remove Frames ดังรูป 14. คลิกเครื่องมือ Rectangle Tool วาดรูปสี่เหลี่ยม 15. เครื่องมือ เลือกสีที่ต้องการกําหนด Alpha 20% 16. กด Ctrl + G เพื่อจัดกลุ่มที่ Timeline เฟรมที่ 30 คลิกขวา Insert Keyframe จากรูป สี่เหลี่ยม ไปอีกด้าน ดังรูป

66 17. คลิกที่แฟรมที่ 60 คลิกขวา insert Keyframe จากรูปสี่เหลี่ยมกลับไปด้านเดิม ดังรูป 18. คลุมเลือกเฟรมทั้งหมด คลิกขวา Create Classic Tweet 19. จะปรากฏหน้าจอการแปลง Symbol คลิก OK 20. กด Enter เพื่อแสดงผล ดังรูป

67 20. กด Enter เพื่อแสดงผล ดังรูป

68 3.การบันทึกไฟล์ภาพเคลื่อนไหวสําหรับเว็บไซต์การบันทึกไฟล์ภาพเคลื่อนไหวสําหรับเว็บไซต์ มีขั้นตอน ดังนี้ 1. คลิกที่เมนู File>Export Movie 2. ตั้งชื่อไฟล์ headset เลือกตําแหน่งที่เก็บไฟล์ คลิก Save 3.จะได้ไฟล์ภาพเคลื่อนไหวสําหรับเว็บไซต์ ดังรูป

69

70 หน่วยที่ 5 5.1 รู้จักกับโปรแกรม Adobe Dreamweaver CC 2018 5.2 การติดตั้งโปรแกรม Adobe Dreamweaver CC 2018 5.3 ส่วนประกอบต่าง ๆ ของโปรแกรม Adobe Dreamweaver CC 2018 ปัจจุบันเครื่องมือในการสร้างเว็บไซต์มีหลายโปรแกรม และโปรแกรม Adobe Dreamweaver CC 2018 เป็นอีกโปรแกรมหนึ่งที่สะดวกในการสร้างเว็บไซต์ เพราะมีเครื่องมือมากมายที่สนับสนุนการทำงานทำ ให้สามารถสร้างเว็บไซต์ได้อย่างง่ายดาย สำหรับเนื้อหาในหน่วยนี้ประกอบด้วย การทำความรู้จักกับโปรแกรม Adobe Dreamweaver CC 2018 การติดตั้งโปรแกรม Adobe Dreamweaver CC 2018 ส่วนประกอบ ต่าง ๆ ของโปรแกรม Adobe Dreamweaver CC 2018 เพื่อเป็นพื้นฐานในการใช้งานโปรแกรมในการ สร้างเว็บไซต์ในหน่วยต่อไป 1.แสดงความรู้เกี่ยวกับโปรแกรม Adobe Dreamweaver CC 2018 2.แสดงความรู้เกี่ยวกับการติดตั้งโปรแกรม Adobe Dreamweaver CC 2018 3.แสดงความรู้เกี่ยวกับส่วนประกอบต่าง ๆ ของโปรแกรม Adobe Dreamweaver CC 2018 1.อธิบายเกี่ยวกับโปรแกรม Adobe Dreamweaver CC 2018 ได้ 2.ติดตั้งโปรแกรม Adobe Dreamweaver CC 2018 ได้ 3.บอกส่วนประกอบต่าง ๆ ของโปรแกรม Adobe Dreamweaver CC 2018 ได้ การติดตั้งและใช้งาน โปรแกรม Adobe Dreamweaver CC 2018 หัวข้อเรื่อง (Topics) แนวคิดสำคัญ (Main Idea) สมรรถนะย่อย (Element of Competency) จุดประสงค์เชิงพฤติกรรม (Behavioral Objectives)

71 Adobe Dreamweaver CC เป็นหนึ่งในชุดโปรแกรม Adobe Creative Cloud เป็นโปรแกรมที่มี เครื่องมือในการสร้างเว็บไซต์คุณภาพสูง มีหลากหลายเครื่องมือ ช่วยให้สร้างเว็บไซต์ได้สะดวกสบายขึ้น นอกจากนี้ ยังรองรับการเขียนภาษา DHTML หรือที่รู้จักกันในนามของ Dynamic HTML ซึ่งจะช่วยเพิ่ม ลูกเล่นให้กับเว็บเพจ อีกทั้งมีระบบช่วยเติม Source Code ของภาษ1 HTML อย่างอัตโนมัติ และยังสามารถ ช่วยจัดการกำหนดค่าของรูปภาพที่จะนำมาใส่ประกอบในเว็บไซต์ได้อย่างสะดวก โดยการเพิ่มคำและประโยค ให้กับการเขียนเว็บไซแบบอัตโนมัติ โปรแกรมนี้เป็นที่ยมกันมากในหมู่ของเว็บมาสเตอร์ต่าง ๆ ทั้งเมืองไทย และต่างประเทศ รูปที่ 5.1 Adobe โปรแกรม Dreamweaver CC 2018 5.1.1 คุณสมบัติใหม่ของโปรแกรม 1.ชุดงานที่ส่งออกจาก PSDs ทำให้ประหยัดเวลาไต้อย่างรวดเร็ว โดยการแยกภาพเว็บที่ดีที่สุดจาก เอกสาร Adobe Photoshop ในหลายความละเอียดและรูปแบบ ทำงานร่วมกับไฟล์เอกสารจากโปรแกรม Photoshop (*.psd) ได้ โดยโปรแกรมสามารถแยกองค์ประกอบภาพกราฟิกของไฟล์ psd คัดลอกวาง หรือลากวาง (Drag and Drop) ลงบนหน้าจอของโปรแกรม Adobe Dreamweaver ได้ทันทีโดยโปรแกรม จะทำหน้าที่แปลงองค์ประกอบภาพกราฟิกไปเป็นรหัสคำสั่ง ซีเอสเอส ซึ่งจะมีรูปแบบการแสดงผลทั้งตัวอักษร สี เงา และกราฟิกอื่น ๆ จากไฟล์เอกสาร psd 2.สร้างเว็บไซที่ปรับให้พอดีกับขนาดหน้าจอหลายตัวในการเริ่มต้นระบบแบบไดนามิกปรับปรุงเว็บไซต์ เริ่มต้นจาก Scratch การใช้ Templates หรือรวมส่วนประกอบ Bootstrap แสดงผลตัวอย่างการออกแบบใน เวลาจริงโดยการปรับขนาดแบบ Live View ใน Dreamweaver ระบุ media queries Visually และอื่น ๆ 3.การทดสอบและการตรวจสอบเว็บไซต์บนอุปกรณ์หลายคนพร้อมกัน เพียงพิมพ์ URL ที่สั้นลงใน บราวเซอร์โทรศัพท์มือถือเพื่อดูตัวอย่างเว็บไซต์ได้ เนื้อหาสาระ (Content ) (((Content)Z((((Z(Z((Con 5.1tent รู้จักกับโปรแกรม Adobe Dreamweaver CC 2018

72 4. รูปแบบการแก้ไขโค้ดใหม่ การตรวจสอบโค้ดแบบเรียลไทม์กับ Linting และทำให้สมบูรณ์อัตโนมัติ ด้วยการสนับสนุนให้เขียนโค้ดใน Dreamweaver ได้เร็วขึ้น และง่ายกว่าเดิม 5. รองรับ CS53 และ HTML5 ทำให้ผู้สร้างสามารถใช้งานแท็กคำสั่งหรือคุณสมบัติใหม่ที่เป็น มาตรฐานที่ประกาศใช้งานตามมาตรฐานใหม่ของการออกแบบและพัฒนาเว็บไซต์ ทำให้เว็บไซต์ที่ได้มีความ เป็นมาตรฐาน สามารถแสดงผลได้ในทุกอุปกรณ์ ทุกเว็บบราวเซอร์ และสามารถแสดงผลได้ใน ทุกระบบปฏิบัติการ เป็นตัน 6. รองรับการแสดงผลตัวอย่างรหัสคำสั่ง (Hinting) ภาษา PHP รวมไปถึง Ajax และ Javascipt โดยโปรแกรมสมารถแสดงผลคำสั่งขึ้นมาเพื่อให้ผู้สร้างเลือกใช้ในกรณีที่ผู้สร้างพิมพ์คำสั่ง เพื่อให้ผู้สร้างเลือกใช้ งานได้อย่างสะดวก รวดเร็ว และป้องกันข้อผิดพลาดจากการพิมพ์คำสั่งที่ไม่ถูกต้อง 7. สามารถฝังฟอนต์ลงในเว็บไซต์ในรูปแบบของเว็บฟอนต์ (Web Font) ได้ เพื่อให้หน้าเว็บเพจ แสดงผลรูปแบบตัวอักษรตามที่ผู้สร้างต้องการ เพื่อความสวยงามในการนำเสนอ รองรับการฝังฟอนต์ลงในหน้า เว็บไซต์ ทำให้เครื่องผู้ใช้งานสามารถแสดงผลแบบตัวอักษรได้แม้ไม่ได้ติดตั้งฟอนต์ลงไปในเครื่องผู้ใช้งานผู้สร้าง สามารฝังฟอนต์ใต้โดยใช้เว็บไซต์สร้างเว็บฟอนต์ ตัวอย่างการแปลงฟอนต์เพื่อให้ใช้งานได้บนเว็บไซต์ 8. ค้นหาภาพที่สมบูรณ์แบบสำหรับเว็บไซต์ใน Adobe Stock Marketplace. สำรวจไลบรารีที่เคย ขยายตัวของภาพถ่าย หรือภาพประกอบ และดาวน์โหลดได้โดยตรงกับ Creative Cloud 5.1.2 ความต้องการพื้นฐานในการติดตั้งโปรแกรม ตารางที่ 5.1 ความต้องการพื้นฐานในการติดตั้งโปรแกรม ตารางที่ 5.1 (ต่อ) ความต้องการพื้นฐานในการติดตั้งโปรแกรม

73 การดาวน์โหลดโปรแกรม Adobe Dreamweaver CC 2018 สมารถทำได้โดยคลิกที่เว็บไซต์ https://www.adobe.com/sea/products/catalog htm1 เพื่อเลือกโปรแกรมในการดาวน์โหลด์ได้ คลิกเลือกโปรแกรม Dreamweaver สมารถเลือกดาวน์โหลดโดยการซื้อ Buy Now จะได้โปรแกรมที่สามารถ ใช้งานได้ตลอดไป หรือดาวน์โหลดโดยใช้เวอร์ชันทดลอง (Download Tial ใช้ซึ่งโปรแกรมของบริษัท Adobe มีนโยบายไม่ตัดฟีเจอร์ใด ๆ ของโปรแกรมออกเลย แต่มีระยะเวลาการทดลองใช้ 7 วัน โปรแกรมจะนับวัน ตั้งแต่การติดตั้ง หากอยากใช้งานต่อต้องมีค่าใช้จ่ายในการต่ออายุโปรแกรม การติดตั้งโปรแกรม Adobe Dreamweaver CC 2018 มีขั้นตอนการติดตั้งดังนี้ ดาวน์โหลดและติดตั้งโปรแกรม Creative Cloud Apps ซึ่งเป็นโปรแกรมที่ให้บริการในการ ดาวน์โหลดชุดโปรแกรมต่าง ๆ ของบริษัท Adobe ที่เว็บไซต์ https://www.adobe.com/sea/creativecloud/catalog/desktop.html ดังรูป 2.เมื่อดาวน์โหลดไฟล์เสร็จเรียบร้อยแล้วให้ตับเบิลคลิกไฟล์ Creative_Cloud_Set-Up.exe 3. ปรากฎหน้าจอ Creative Cloud Installer ให้คลิก Sign In 5.2 การติดตั้งโปรแกรม Adobe Dreamweaver CC 2018

74 4. ให้ใส่ค่าข้อมูลการลงทะเบียน Adobe ID คลิกปุ่ม Sign up 5. เมื่อกรอกข้อมูลเสร็จเรียบร้อยแล้ว โปรแกรมจะปรากฎหน้าจอ Creative Cloud Installer คลิก ปุ่ม Start Installing 6. โปรแกรมจะทำการติดตั้ง 7.เมื่อติดตั้งเสร็จเรียบร้อยจะแสดงหน้าจอ Creative Cloud แสดงโปรแกรมต่าง ๆของบริษัท Adobe ที่สามารถตาวน์โหลดมาใช้งานได้ ในหน่วยนี้จะใช้เวอร์ชันทดลองใช้ (Try) คลิกโปรแกรม Dream-weaver CC คลิกปุ่ม Try

75 8. รอสักครู่ โปรแกรม Creative Cloud กำลังทำการติดตั้งโปรแกรม Dreamweaver CC 9. เมื่อติดตั้งเสร็จเรียบร้อย คลิกปุ่ม Start Trial 10.เมื่อติดตั้งโปรแกรมเวอร์ชันทดลองใช้แล้ว ที่โปรแกรม Creative Cloud จะเปลี่ยนเป็นปุ่ม Buy Now และจะมีข้อความแจ้งให้ทราบว่า ได้เริ่มใช้โปรแกรม Dreamweaver CC ในรุ่นทดลองใช้ (trial) 7 วัน 11. คลิก DW เข้าสู่โปรแกรมจะแสดงหน้าจอการทดลองใช้งาน คลิกปุ่ม continue trial 12. โปรแกรมจะแสดงหน้าจอการเริ่มทำงาน คลิก Create New เพื่อเริ่มใช้งานโปรแกรม

76 หน้าจอการทำงานของโปรแกรม Adobe Dreamweaver CC 2018 เมื่อเปิดโปรแกรมขึ้นมาจะพบ กับหน้าจอว่าง ๆ ให้คลิกที่เมนู File > New เพื่อสร้างเอกสารใหม่ ดังรูป จะปรากฏหน้าจอของการสร้างเอกสารใหม่ New Document ซึ่งประกอบไปด้วย Document Type คือ ประเภทของเอกสารที่จะสร้าง ได้แก่ เอกสาร HTML, CSS, LESS, SCSS, SASS, JavaScript, JSON,PHP, XML, SVG, HTML template, PHP template และ Framework หรือ Layout คือ โครงสร้างรูปแบบของ เอกสาร ในการสร้างเว็บไซต์แบบพื้นฐานจะใช้ประเภทเอกสารเป็น HTML คลิก Create เพื่อสร้างเอกสารใหม่ HTML 5.3 ส่วนประกอบต่าง ๆ ของโปรแกรม Adobe Dreamweaver CC 2018 2018

77 หน้าจอการทำงานของโปรแกรม Adobe Dreamweaver CC 2018 มีส่วนประกอบต่าง ๆ ดังนี้ 1. แถบเมนูบาร์ (Menu Bar) เป็นแถบชุดคำสั่งที่เก็บรวมรวมคำสั่งต่าง ๆ ที่จำเป็นต่อการใช้งาน โปรแกรม เพื่อให้ง่ายต่อการเข้าถึง และเรียกใช้งาน ประกอบด้วย File, Edit, View, Insert, Tools,Find,Site, Window และ Help 2. แถบเครื่องมือ (Insert Pane!) เป็นแถบที่รวบรวมเครื่องมือในการทำงาน เช่น ข้อความ ภาพเคลื่อนไหวการเชื่อมโยงการแทรก รูปภาพ แทรกตาราง แทรกวันที่ ภาษาสคริปต์ หรือสัญลักษณ์พิเศษ เป็นต้น ประกอบด้วยกลุ่มคำสั่งที่ใช้ทำงานดังนี้ • HTML คือ แถบเครื่องมือที่รวบรวมเครื่องมือต่าง ๆ ในการทำงานของเอกสาร HTIML เช่น แท็ก รูปภาพ ข้อความ ลิงก์ ย่อหน้า คีย์เวิร์ด อีเมล ภาพเคลื่อนไหว วิดีโอ เสียง วันที่เวลา ปลั๊กอิน การจัด ตัวอักษร รูปแบบตัวอักษร เป็นต้น • Form คือ แถบเครื่องมือที่รวบรวมเครื่องมือต่าง ๆ ในการทำงานเกี่ยวกับฟอร์ม เช่น การสร้างฟอร์ม ข้อความ อีเมล การกำหนดรหัสผ่าน รูปแบบฟอร์ม ช่วงข้อมูล วันที่เวลา ปุ่ม และเครื่องมือต่าง ๆ เกี่ยวกับการสร้างฟอร์มเก็บข้อมูล • Templates คือ แถบเครื่องมือที่รวบรวมเครื่องมือต่าง ๆ ในการทำงานเกี่ยวกับการสร้างแม่แบบ เอกสารเว็บไซต์ เช่น สร้างแม่แบบเอกสารเว็บ การกำหนดจุดให้กับแม่แบบเอกสารเว็บ เป็นต้น • Bootstrap Components คือ แถบเครื่องมือที่รวบรวมเครื่องมือต่าง ๆ ช่วยให้สามารถพัฒนา ระบบติดต่อกับผู้ใช้ บน (User Interface) ของเว็บแอปพลิเคชันได้อย่างรวดเร็วและดูสวยงาม เช่น ปุ่ม สี ฟอร์มคอนโทรลต่าง ๆ ตารางไอคอนแถบเมนู (Menu Bar) ดร็อปดาวน์ (Dropdown) ป๊อปอัพ(Popup) เป็นต้น • jQuery Mobile แถบเครื่องมือที่รวบรวมเครื่องมือต่าง ๆ ในการทำงานที่ช่วยให้สามารถสร้าง เว็บไซต์บนมือถือ (Mobile Website) ได้อย่างสะดวกและรวดเร็ว เช่น การสร้างฟอร์มรับข้อมูลในมือ ถือ กล่องรับข้อความ ปุ่ม เมนูรูปแบบต่าง ๆ เป็นต้น

78 • jQuery U คือ แถบเครื่องมือที่รวบรวมเครื่องมือต่าง ๆ ในการทำงานที่ช่วยให้สามารถออกแบบ ส่วนติดต่อกับผู้ใช้ UI (User Interface) การสร้างเว็บไซต์บนมือถือได้อย่างสะดวกและรวดเร็ว เช่น สร้างการแสดงผลแบบพับได้ Spry Accordion การสร้างแท็บจัดกลุ่มข้อมูล การสร้างปุ่ม เมนู รูปแบบต่าง ๆ เป็นต้น • Favorites คือ แถบเครื่องมือที่รวบรวมเครื่องมือต่าง ๆ ที่ใช้งานบ่อย สามารถเพิ่มเครื่องมือต่าง ๆ ด้วยตัวเอง โดยการคลิกขวา 3. มุมมองการทำงานของโปรแกรม มีไว้เพื่อเลือกสัดส่วนการแสดงผลบนหน้าจอการทำงานของ โปรแกรมผู้สร้างสามารถเลือกรูปแบบการแสดงผล เพื่อตรวจสอบการทำงานหรือข้อผิดพลาดจาก การพัฒนา เว็บไซต์ได้ ตามรูปแบบที่ผู้สร้างเองต้องการ มุมมองการใช้งานโปรแกรม มีดังต่อไปนี้ Design คือ มุมมองออกแบบ เป็นส่วนมุมมองที่แสดงผลของการพัฒนาในรูปแบบเสมือนกับที่ แสดงผลบนหน้าจอเว็บบราวเซอร์ ซึ่งจะแสดงตัวอักษร รูปภาพ ตาราง ลิงค์เชื่อมโยง หรือสื่อมัลติมีเดียอื่น ๆ เพื่อให้ผู้สร้างได้ตรวจสอบข้อผิดพลาดก่อนการใช้งาน ตัวอย่างหน้าจอการทำงานในมุมมองออกแบบ ดังรูป มุมมอง Split เป็นส่วนมุมมองที่แสดงผลและแสดงคำสั่งของเว็บเพจที่กำลังพัฒนา ซึ่งมีส่วนทีให้ ผู้ใช้งานเลือกพิมพ์แก้ไขรหัสคำสั่งที่ผู้สร้างต้องการ หรือเลือกแก้ไขเว็บเพจที่ส่วนการแสดงผลของโปรแกรม ก็ได้ ดังรูป

79 มุมมอง code เป็นส่วนมุมมองที่แสดงผลเฉพาะคำสั่งของเว็บเพจที่กำลังพัฒนา ซึ่งจะแสดงผลคำสั่งที่ เป็นภาษา HTML,CSS รวมไปถึง JavaScript หรือภาษาอื่น ๆ เพื่อให้ผู้สร้างได้พิมพ์คำสั่งเพิ่มเติมตาม ที่ต้องการดังรูป มุมมอง Live เป็นการแสดงผลเว็บไซต์ในโปรแกรม Dreamweaver CC 2018 มุมมอง Live สามารถ แสดงผลได้ทั้งมุมมอง Code และมุมมอง Design ซึ่งจะแสดงผลการทำงานเหมือนกับการแสดงผลของเว็บใน โปรแกรมเว็บบราวเซอร์ เพื่อให้ผู้สร้างได้ตรวจสอบข้อผิดพลาดจากการพัฒนาเว็บ ดังรูป 4. พื้นที่การทำงาน (Workspace ) พื้นที่หน้าจอการทำงานของโปรแกรม เพื่อให้ใช้งานได้สะดวก รวดเร็วต่อการเรียกใช้งาน และเหมาะสมกับผู้สร้าง โดยผู้สร้างสามารถสร้างหน้าจอการทำงานได้เอง หรือเลือกรูปแบบการจัดวางเครื่องมือที่โปรแกรมได้จัดไว้ให้ 5. แถบเครื่องมือ File คือ แถบเครื่องมือในการเก็บไฟล์ต่าง ๆ ที่ใช้ประกอบในการสร้างเว็บไซต์ เช่นไฟล์แฟ้มข้อมูลเว็บไซต์ ไฟล์รูปภาพ ไฟล์เอกสาร HTIML เป็นต้น 6. แถบ Properties คือ แถบเครื่องมือแสดงคุณสมบัติต่าง ๆ ให้กับวัตถุ เช่น รูปภาพ ตาราง ที่ผู้ใช้งานเลือก ซึ่งการกำหนดคุณสมบัติต่าง ๆ เมื่อผู้สร้างเลือกวัตถุใดคุณสมบัติจะเปลี่ยนไปตามวัตถุ ที่ผู้ใช้งานกำลังแก้ไข

80

81 หน่วยที่ 6 6.1 การใช้งานโปรแกรม Adobe Dreamweaver CC 2018 6.2 การสร้างไชต์ 6.3 การจัดการโครงร่างเว็บไซต์ด้วยตาราง 6.4 การตั้งค่าการแสดงผลเว็บไซต์ 6.5 การบันทึกเอกสารเว็บไซต์ หลังจากที่ได้ติดตั้งโปรแกรมและรู้จักส่วนประกอบต่าง ๆ ของโปรแกรม Adobe Dreamweaver CC 2018 มาแล้ว ในหน่วยนี้ประกอบด้วย การใช้งานโปรแกรม Adobe Dreamweaver CC 2018 ซึ่งเป็นเครื่องมือที่จะใช้ในการสร้างเว็บไซต์และจ าเป็นต้องมีความรู้ในการบริหารจัดการไฟล์ในโปรแกรม หรือการสร้างเว็บไซต์ให้กับไฟล์ข้อมูลและการจัดการโครงร่างเว็บไซต์ด้วยตาราง การตั้งค่าการแสดงผล เว็บไซต์และ การบันทึกเอกสารเว็บไซต์เพื่อให้สามารถสร้างเว็บไซต์ได้อย่างถูกต้องและมีประสิทธิภาพ 1. แสดงความรู้เกี่ยวกับการใช้งานโปรแกรม Adobe Dreamweaver CC 2018 2. ประยุกต์ใช้โปรแกรม Adobe Dreamweaver CC 2018 สำหรับการสร้างเว็บไซต์ 1. ใช้งานโปรแกรม Adobe Dreamweaver CC 2018 ได้ 2. จัดการโครงร่างเว็บไซต์ด้วยตารางได้ 3. ตั้งค่าการแสดงผลเว็บไซต์ได้ 4. บันทึกเอกสารเว็บไซต์ได้ การสร้างเว็บไซต์ ด้วยโปรแกรมAdobe Dreamweaver cc 2018 หัวข้อเรื่อง (TOPICS) แนวคิดสำคัญ (MAIN IDEA) สมรรถนะย่อย (ELEMENT OF COMPETENCY) จุดประสงค์เชิงพฤติกรรม (BEHAVIOAL OBJECTIVES)

82 การใช้งานโปรแกรม Adobe Dreamweaver CC 2018 ประกอบด้วย การเข้าสู่โปรแกรม การปิด โปรแกรม Adobe Dreamweaver CC 2018 และการสร้างเอกสารใหม่ ซึ่งมีรายละเอียดดังนี้ 6.1.1 การเข้าสู่โปรแกรม Adobe Dreamweaver CC 2018 การเข้าสู่โปรแกรม Adobe Dreamweaver CC 2018 สามารถทำได้ 2 วิธี ดังนี้ 1. การเข้าสู่โปรแกรมให้ไปที่เครื่องมือ Start Menu โดยกดคลิกที่ Start เลือก Adobe Dreamweaver CC 2018 ดังรูป 2. การเข้าสู่โปรแกรมที่ Shortcut หน้า Desktop โดยสามารถดับเบิลคลิกที่ไอคอนรูป โปรแกรม Adobe Dreamweaver CC 2018 ได้เลย 6.1การใช้งานโปรแกรม Adobe Dreamweaver CC 2018 เนื้อหาสาระ (Content)

83 6.1.2 การปิดโปรแกรม Adobe Dreamweaver CC 2018 การปิดโปรแกรมสามารถทำได้ 3 วิธีดังนี้ 1. กดปุ่ม Close ที่หน้าจอด้านขวามือโปรแกรม ดังรูป 2. คลิกที่เมนู File > Exit

84 6.1.3 การสร้างเอกสารใหม่ การสร้างเอกสารใหม่จะทำหลังจากที่ได้เปิดโปรแกรมขึ้นมาแล้ว และเอกสารใหม่ของโปรแกรม Adobe Dreamweaver CC 2018 สามารถสร้างได้หลายประเภท แต่การสร้างเว็บในหน่วยนี้จะสร้างเอกสาร ใหม่ที่เป็นแบบ HTML และใช้รูปแบบ HTML5 หมายถึง ภาษาหลักที่ใช้ในการเขียนเว็บเพจ โดยใช้ Tag ในการกำหนดการแสดงผล HTML5 ถูกพัฒนาชื้นเพื่อเป็นภาษามาร์กอัปสำหรับ WW รุ่นต่อไปของ HTML ถูกพัฒนาขึ้น ในปี 2004 โดยกลุ่ม WHATWG (The Web Hypertext Application Technology Working Group) โดยเรียกชื่อว่า Web Applications 1.0 ซึ่งดราฟต์แรกได้ปรากฏออกมาเมื่อ 22 มกราคม พ.ศ. 2551 มีสิ่งที่เปลี่ยนการเขียนชุดคำสั่งแบบเดิม ๆ ในเวอร์ชันเก่า ทำให้การเขียนชุดคำสั่ง Doctype การกำหนดภาษา การทำหนดชุดตัวอักษรทำได้ง่ายขึ้น วิธีการสร้างเอกสารใหม่มีดังนี้ 1. คลิกที่เมนู File > New หรือกด Ctrl+N เพื่อเปิดเอกสารใหม่ 2. จะปรากฎหน้าจอให้สร้างเอกสารใหม่ (New Document) เลือก Document Type: </>HTML และ Framework: HTML5 คลิกที่ปุ่ม Create 3.จะได้เอกสารใหม่ ดังรูป

85 3. จะได้เอกสารใหม่ ดังรูป สร้างไซต์เป็นขั้นตอนแรกของกสร้างเว็บด้วยโปรแกรม Dreamweaver ซึ่งเป็นการกำหนดให้ โปรแกรมทราบที่อยู่ของไฟล์ต่าง ๆ ของเว็บไชต์ที่สร้างไว้ เครื่องมือต่าง ๆ ของ Dreamweaver จะทำงานโดย อ้างอิงไซต์ที่กำหนด ไฟล์ทั้งหมด ทั้งรูปภาพ ไฟล์เอกสารต่าง ๆ ที่อยู่ในเว็บไซต์ จะถูกรวมอยู่ในโฟลเดอร์เดียว เรียกโฟลเดอร์นั้นว่า Local Root Folder การสร้างไซต์ มีขั้นตอนดังนี้ 1.คลิกที่เมนู Site > New Site 6.2 การสร้างไซต์

86 2.จะปรากฏหน้าต่างการตั้งค่าไซต์ ที่ Site Name ตั้งชื่อที่ต้องการ (การตั้งชื่อไซต์ควรเป็น ภาษาอังกฤษเพราะเครื่องเซิร์ฟเวอร์ส่วนใหญ่ใช้ระบบปฏิบัติการยูนิกซ์ (Unix) หรือลินุกซ์ (Linux) การใส่ชื่อ ภาษาไทยอาจมีปัญหาได้) Local Site Folder: เลือกแหล่งที่เก็บไฟล์โดยคลิกที่ปุ่ม Browse 3.จะปรากฏหน้าจอ Choose Root Folder ให้เลือกโฟลเดอร์ที่ต้องการ คลิกปุ่ม Select Folder 4.จะปรากฏหน้าจอ Site Setup for web คลิกปุ่ม Save 5.จะปรากฏหน้าจอ Site ที่หน้าต่าง File

87 6.หากมีการย้ายเครื่องทำงาน สามารถแก้ไขไซต์โดยการคลิกที่เมนู Site > Manage Sites 7.จะพบไซต์ที่มีในเครื่อง ให้ดับเบิลคลิกไซต์ที่ต้องการแก้ไข 8.จะเข้าสู่หน้าจอการตั้งค่า Site Setup for web ให้ทำการตั้งค่าใหม่ แล้วคลิกปุ่ม Save

88 9.ไซต์ที่สร้างจะถูกแก้ไขเรียบร้อย คลิกปุ่ม Done จัดโครงร่างเว็บไซต์ด้วยตารางช่วยในการแสดงข้อมูลหรือองค์ประกอบต่าง ๆ ของเว็บไซต์แสดงผล ได้ตรงตามตำแหน่งที่ต้องการ ไม่ว่าจะเป็นข้อความ รูปภาพ ปุ่ม เมนู แบบฟอร์ม หรือมัลติมีเดียอื่น ๆ แม้ว่า ในปัจจุบันจะมีเทคนิคใหม่ที่สามารถใช้จัดวางเลย์เอาของเว็บไซต์ได้สะดวกขึ้น แต่การวางโครงร่างเว็บไซต์ ด้วยตารางก็ยังเป็นเครื่องมือที่นิยม เพราะสามารถแสดงผลในโปรแกรมเว็บบราวเซอร์ต่าง ๆ ได้ในตำแหน่ง ที่ถูกต้อง การจัดโครงร่างเว็บไซต์ด้วยตาราง มีขั้นตอนดังนี้ 1. คลิกมุมมอง Design 2. คลิกที่เครื่องมือตารางเพื่อสร้างตารางในการจัดการโครงร่างเว็บไซต์ 3. กำหนดจำนวนแถว Rows : 2 แถว กำหนดจำนวนคอลัมน์ Columns : 4 คอลัมน์ และกำหนด ความกว้างของตาราง Table width : 1010 pixels คลิกปุ่ม OK 6.3 การจัดการโครงร่างเว็บไซต์ด้วยตาราง

89 4.จะได้ตารางที่มีขนาดตามต้องการ 5.ที่แถบ Properties กำหนดตำแหน่งการวางของตารางที่ได้ให้อยู่ในตำแหน่งกึ่งกลางที่ช่อง Align Center 6.เลือกแถวแรกทั้งหมด 7.คลิกขวา Table > Merge Cells หรือคลิกที่แถบ Properties คลิกเครื่องมือ Merges หรือกดคีย์ลัด Ctrl+Alt+M

90 8.แถวที่เลือกจะอยู่รวมกัน 9.ที่แถบ Properties กำหนดความสูงให้กับเซลล์ที่เลือกที่ช่อง H : 300 10.จะได้แถวของตารางเพื่อใช้สำหรับใส่รูปภาพส่วนหัว 11.คลิกคลุมเลือกคอลัมน์ที่ 2,3,4 แถวที่ 2 12.คลิกที่แถบ Properties คลิกเครื่องมือ Merges

91 13.คอลัมน์จะรวมกันเป็นเซลล์เดียวกัน 14.คลิกแถวที่ 2 กด Tab 1 ครั้ง ที่แป้นพิมพ์ จำนวนแถวจะเพิ่มขึ้น 1 แถว 15.คลิกเลือกแถวที่ 2 แถบ Propeties กำหนดความสูงให้กับเซลล์ที่เลือกที่ช่อง H : 300

92 16.เลือกแถวที่ 3 ที่แถบ Propeties คลิกเครื่องมือ Merges 17.จะได้โครงร่างเว็บไซต์ ซึ่งประกอบไปด้วย ส่วนหัว Header Section, ส่วนเมนู Menu Section ส่วนเนื้อหา Body และส่วนท้าย Footer Section ดังรูป

93 การตั้งค่าการแสตงผลเว็บไซต์ สามารถทำได้ที่ CSS และ HTML ซึ่งทั้งสองรูปแบบสามารถตั้งค่าผลของ เว็บไซต์ได้เหมือนกัน ขึ้นอยู่กับผู้สร้างจะเลือกใช้รูปแบบใด ในส่วนนี้จะตั้งค่าการแสดงผลเว็บไซต์โดยใช้ HTMLซึ่ง มีขั้นตอนดังนี้ 1.แถบ Properties คลิกปุ่ม Page Properties 2. จะปรากฎหน้าต่าง Page Properties เลือกแถบ Appearance (HTML) กำหนดคุณสมบัติตาม ต้องการ ดังนี้ - Background image : การกำหนดภาพพื้นหลังของเว็บ - Background : เป็นการกำหนดสีพื้นหลังของเว็บ - Text : เป็นการกำหนดสีของข้อความทั่วไป - Links : เป็นการกำหนดสีของลิงก์ในสภาวะปกติ - Visited links : เป็นการกำหนดสีของลิงก์เมื่อคลิกแล้ว - Active links : เป็นการกำหนดสีของลิงก์ขณะกำลังคลิก - Left margin : กำหนดระยะของเว็บด้านข้ายห่างจากขอบเว็บบราวเซอร์ -Top margin : กำหนดระยะของเว็บด้านบนห่างจากของเว็บบราวเซอร์ -Margin width : กำหนดความกว้างของขอบเว็บด้านซ้ายห่างจากขอบเว็บบราวเซอร์ -Margin height : กำหนดความสูงของเว็บด้านบนห่างจากขอบเว็บบราวเซอร์ 6.4การตั้งค่าการแสดงผลเว็บไซต์

94 3. กำหนดค่าการแสดงผลตามที่ต้องการ 4. คลิก Apply เพื่อให้แสดงผลทันที 5. เสร็จเรียบร้อยคลิก OK การบันทึกเอกสารเว็บ สามารถทำได้ดังนี้ 1. คลิกที่เมนู File > Save หรือกดคีย์ลัด Cirl+s 2. ปรากฏกล่องข้อความการบันทึกข้อมูล ถ้าในกรณีต้องการให้แสดงเป็นหน้าแรกของเว็บไซต์ ให้บันทึกไฟล์ชื่อ Index html เพื่อกำหนดให้หน้าเว็บเพจนี้เป็นหน้าแรกของระบบเว็บไซต์ 6.5 การบันทึกเอกสารเว็บไซต์

95 หลักการตั้งชื่อไฟล์ ในการตั้งชื่อไฟล์เว็บเพจนั้น ต้องตั้งชื่อไฟล์เป็นภาษาอังกฤษเป็นพิมพ์ตัวเล็กทั้งหมด ไม่ควรยาวเกินไป และหากต้องการเว้นวรรค ควรคั่นด้วยเครื่องหมาย (Underscore) เช่น website b, web_ book เป็นต้น นอกจากนั้นไฟล์เว็บเพจควรบันทึกให้เป็นไฟล์ .html หรือ .htm ถ้าเป็นเว็บเพจที่ถูกเขียนด้วยภาษาScipt ก็สามารถใช้นามสกุลตามภาษานั้น ๆ เช่น ภาษา php จะมีนามสกุล .php เป็นต้น 3.คลิกปุ่ม Save เพื่อบันทึกข้อมูล 4.ไฟล์บันทึกแล้วจะแสดงที่แท็บ ดังรูป

96

97 หน่วยที่ 7 7.1 การจัดการไฟล์ภาพกราฟิกในเว็บไซต์ 7.2 การจัดการไฟล์ภาพเคลื่อนไหวในเว็บไซต์ 7.3 การจัดการข้อความในเว็บไซต์ หลังจากที่ได้สร้างโครงร่างเว็บไซต์และตั้งค่าการแสดงผลเว็บไซต์เสร็จเรียบร้อยแล้ว เนื้อหาในหน่วยนี้ จะประกอบไปด้วย การจัดการไฟล์ภาพกราฟิกในเว็บไซต์ การจัดการไฟล์ภาพเคลื่อนไหวในเว็บไซต์ การจัดการข้อความในเว็บไซต์ ซึ่งรูปภาพในหน่วยนี้ได้ออกแบบไว้แล้ว ด้วยโปรแกรม Adobe Photoshop และไฟล์ภาพ เคลื่อนไหวจากหน่วยที่ผ่านมา การแทรกภาพเคลื่อนไหวและจัดการกับข้อความถือเป็นสิ่งที่ จำเป็นต้องเรียนรู้ และทำความเข้าใจเพื่อให้สามารถสร้างเว็บไซต์ได้อย่างถูกต้องและมีประสิทธิภาพมากที่สุด 1. แสดงความรู้เกี่ยวกับการจัดการไฟล์ภาพกราฟิกในเว็บไซต์ 2. แสดงความรู้เกี่ยวกับการจัดการไฟล์ภาพเคลื่อนไหวในเว็บไซต์ 3. แสดงความรู้เกี่ยวกับการจัดการข้อความในเว็บไซต์ 4. ประยุกต์ใช้โปรแกรม Adobe Dreamweaver CC 2018 ในการจัดการไฟล์ภาพกราฟิก ภาพเคลื่อนไหว และข้อความในเว็บไซต์ 1. จัดการไฟล์ภาพกราฟิกในเว็บไซต์ได้ 2. จัดการไฟล์ภาพเคลื่อนไหวในเว็บไซต์ได้ 3. จัดการข้อความในเว็บไซต์ การจัดการไฟล์ภาพกราฟิกภาพเคลื่อนไหว และข้อความใน เว็บไซต์ หัวข้อเรื่อง (TOPICS) แนวคิดสำคัญ(MAIN IDEA) สมรรถนะย่อย (ELEMENT OF COMPETENCY) จุดประสงค์เชิงพฤติกรรม (BEHAVIOAL OBJECTIVES)

98 ภาพกราฟิก คือ ภาพที่ผ่านการตกแต่งด้วยโปรแกรมคอมพิวเตอร์อาจเป็นภาพที่ถูกวาดขึ้นมาใหม่ ทั้งหมด หรือเป็นการนำภาพถ่ายมาทำการรีทัชตัดต่อโดยใช้โปรแกรมกราฟิกมาสร้างสรรค์จนได้ภาพที่สมบูรณ์ ก็ได้เช่น โปรแกรม Paint, Illustrator, Photoshop เป็นต้นการใช้ภาพกราฟิกในการนำเสนอข้อมูลต่าง ๆ การใช้รูปภาพกราฟิกสำหรับเว็บไซต์โดยข้อมูลในรูปแบบของรูปภาพเป็นที่นิยมในปัจจุบันมาก เพราะรูปภาพ ทำให้เว็บไซต์มีความสวยงาม และดึงดูดความสนใจจากผู้ใช้งานโดยทั่วไป ชนิดของรูปภาพที่ปรากฏ บน เครื่องคอมพิวเตอร์สามารถแบ่งออกตามลักษณะการจัดเก็บข้อมูลได้ 2 ชนิดด้วยกัน คือ รูปภาพแบบ เรสเตอร์(Raster) หรือบิตแมป (Bitmap) และรูปภาพแบบเวกเตอร์(Vector) 1. ภาพกราฟิกแบบเรสเตอร์หรือเรียกอีกอย่างหนึ่งว่า แบบบิตแมป เป็นภาพกราฟิกที่เกิดจากการ เรียงตัวของจุดสี่เหลี่ยมเล็ก ๆ หลากหลายสี ที่เรียกว่า พิกเซล ในการสร้างภาพกราฟิกแบบเรสเตอร์จะต้อง กำหนดจำนวนพิกเซลให้กับภาพที่ต้องการสร้างถ้ากำหนดจำนวนพิกเซลน้อย เมื่อขยายภาพให้มีขนาด ใหญ่ขึ้น ทำให้ภาพแตกมองเห็นภาพเป็นจุดสี่เหลี่ยมเล็ก ๆ หรือถ้ากำหนดจำนวนพิกเซลมากก็ทำให้แฟ้มภาพ มีขนาดใหญ่ ใช้เวลาโหลดนาน ดังนั้นการกำหนดจำนวนพิกเซลจึงควรกำหนดให้เหมาะสมกับงานที่จะสร้าง เช่น งานที่มีความละเอียดน้อย หรือภาพสำหรับเว็บไซต์ ควรกำหนดจำนวนพิกเซล ประมาณ 72 ppi (pixel/inch คือจำนวนพิกเซลใน 1 ตารางนิ้ว) แต่ถ้าเป็นงานแบบพิมพ์ เช่น นิตยสาร ปกหนังสือ โปสเตอร์ ขนาดใหญ่จะกำหนดประมาณ 300-350 ppi เป็นต้น ข้อดีของภาพกราฟิกแบบเรสเตอร์คือสามารถปรับแต่ง ตกแต่งภาพได้ง่ายและสวยงามซึ่งโปรแกรม ที่นิยมใช้สร้างภาพกราฟิกแบบเรสเตอร์ คือ Photoshop, Paint เป็นต้น แฟ้มภาพกราฟิกแบบ เรสเตอร์ (บิตแมป) และคุณลักษณะของแฟ้มภาพกราฟิกนามสกุลที่ใช้เก็บแฟ้ม ภาพกราฟิกแบบเรสเตอร์มี หลายนามสกุล เช่น BMP, DIB, JPG, JPEG, GIF, TIFF, TIF, PCX,MSP, PCD, PCT, ,FPX, IMG, MAC, MSP,TGAเป็นต้น ซึ่งลักษณะของแฟ้มภาพจะแตกต่างกันออกไปใช้ สำหรับรูปภาพทั่วไป งานเว็บเพจ และงานที่มีความจำกัดด้านพื้นที่ นิยมใช้ไฟล์นามสกุล JPG, JPEG, GIF เป็นต้น รูปที่ 7.1 ตัวอย่างของภาพแบบเรสเตอร์นามสกุล JPG เมื่อไม่ขยายและขยาย เนื้อหาสาระ (Content) 7.1 การจัดการไฟล์ภาพกราฟิกในเว็บไซต์

99 2. ภาพกราฟิกแบบเวกเตอร์ หรือออบเจกต์โอเรียนเตดกราฟิก (Object-OrientedGraphics) เป็นภาพที่มีลักษณะของการสร้างจากคอมพิวเตอร์ที่มีการสร้างให้แต่ละส่วนของภาพเป็นอิสระ ต่อกันเป็นภาพกราฟิกที่เกิดจากการอ้างอิงความสัมพันธ์ทางคณิตศาสตร์หรือการคำนวณ ซึ่งภาพจะมีความ เป็นอิสระต่อกัน โดยแยกชิ้นส่วนของภาพทั้งหมดออกเป็นเส้นตรง เส้นโค้ง รูปทรง เมื่อมีการขยายภาพความ ละเอียดของภาพ จะไม่ลดลง แฟ้มมีขนาดเล็กกว่าแบบเรสเตอร์ ภาพกราฟิกแบบเวกเตอร์นิยมใช้เพื่อ งานสถาปัตยกรรมตกแต่ง ภายในและการออกแบบต่าง ๆ เช่น การออกแบบรถยนต์ การออกแบบอาคาร การสร้างการ์ตูน โลโก้ เป็นต้น ซึ่งโปรแกรมที่นิยมใช้สร้างภาพแบบเวกเตอร์ คือโปรแกรม Illustrator, CorrelDraw, 3DMaxแต่ อุปกรณ์ ที่ใช้แสดงผลภาพ เช่น จอคอมพิวเตอร์ หรือเครื่องพิมพ์ เป็นการแสดงผลภาพแบบเรสเตอร์ นามสกุล ที่ใช้ เก็บแฟ้มภาพกราฟิกแบบเวกเตอร์มีหลายนามสกุล เช่น EPS, WMF,.CDR, AI, CGM, DRW, PET, DXF, PIC และ PGL เป็นต้น ซึ่งลักษณะของแฟ้มภาพจะแตกต่างกันออกไป เช่น AI, EPS ใช้สำหรับงานที่ต้องการ ความละเอียดของภาพมาก เช่น การสร้างการ์ตูน การสร้างโลโก้ โปรแกรมที่ใช้สร้างคือ Illustrator เป็นต้น รูปที่ 7.2 ตัวอย่างของภาพแบบเวกเตอร์ เมื่อไม่ขยายและขยาย 7.1.1 การแทรกภาพกราฟิกในเว็บไซต์ การแทรกภาพกราฟิกในโปรแกรม Adobe Dreamweaver CC 2018 ข้อพึงระวังในการนำรูปภาพ มาใช้คือ รูปภาพที่นำมาแทรกจะต้องเก็บอยู่ในไซต์ที่ได้อ้างอิงถึง หากรูปภาพ ไม่ได้เก็บอยู่ในไซต์และ มีการอ้างอิงตำแหน่งไปยังตำแหน่งที่ไม่ถูกต้อง เมื่อมีการถ่ายโอนไฟล์ไป ยังเครื่องแม่ข่ายจะทำให้รูปภาพ ไม่แสดง ดังนั้นควรที่จะเก็บรูปภาพไว้ในไซต์ที่ได้สร้างและควร ใช้ชื่อรูปภาพเป็นภาษาอังกฤษเพื่อป้องกัน ปัญหาการแปลภาษา ซึ่งการแทรกรูปภาพในเว็บไซต์มี ขั้นตอนดังนี้ 1.ทีมุมมอง Design คลิกตำแหน่งส่วนหัวที่จะแทรกรูปภาพ 2.คลิก Image