50 • การใช้โปรแกรม Adobe Dreamweaver CS6 ตัวเลือกสำหรบั สรา้ งเวบ็ เพจประกอบดว้ ย 6 กลมุ่ คอื Blank Page สร้างเว็บเพจหน้าเปล่าหรือหน้าว่าง โดยสามารถเลือกเว็บเพจย่อย ชนิดต่างๆ ได้หลายแบบ เช่น HTML, HTML Template, และ Library item เป็นต้น และยังสามารถเลือกเลย์เอาท์ย่อยๆ ของ ตัวเลอื กแตล่ ะแบบได้อกี หลายลกั ษณะ Blank Template สร้างหน้าเทมเพลตหรือหน้าเว็บแม่แบบว่างเปล่าที่สามารถนำไป ใช้เป็นต้นแบบสำหรับสร้างเว็บเพจ โดยจะเป็นหน้าว่างๆ ให ้ ออกแบบเอง ซ่ึงมีเทมเพลตย่อยให้เลือกหลายแบบ เช่น HTML Template, PHP Template เปน็ ต้น Fluid Grid Layout เปน็ ตวั เลอื กสำหรบั ออกแบบเวบ็ ไซตใ์ หห้ นา้ จอสามารถเปลย่ี นแปลง ขนาดได้ตามอุปกรณ์ที่ใช้งาน คือ โทรศัพท์มือถือ แท็บเล็ต และ เดสกท์ ็อป Page from Template สรา้ งหนา้ เวบ็ เพจจากแม่แบบหรอื เทมเพลต Page from Sample สร้างหน้าเว็บเพจโดยใชต้ วั อยา่ งตามทีโ่ ปรแกรมออกแบบไว้ให้ Other สรา้ งหน้าเวบ็ เพจแบบอ่นื ๆ เช่น Actionscript comunication, Java และ VBScript เปน็ ต้น 3. คลิกเลือกรูปแบบเว็บเพจที่ต้องการ เช่น Bank Page (หน้าว่าง) เลือกชนิด เว็บเพจเป็นแบบ HTML เลือกแบบเลย์เอาท์ เป็น none แล้วคลิกปุ่ม Create จะได้หน้า เวบ็ เพจเป็นเอกสารใหม่ โดยปกตจิ ะช่อื Untitled 3.5 การใสห่ วั เรอ่ื ง (Title) หรอื แถบชือ่ เรอื่ งให้กับเวบ็ เพจ โดยปกติเมื่อเปิดไฟล์เอกสารใหม่ โปรแกรมจะตั้งชื่อหัวเร่ืองเว็บเพจให้อัตโนมัติ คือ Untitled Document หมายถึง เอกสารไม่มีหัวเร่ืองหรือไม่มีช่ือ ซ่ึงช่ือดังกล่าวจะแสดงผล เวลานำไปเปิดใช้งานกับเว็บ เบราว์เซอร์ ดังน้ัน ผู้สร้างเว็บควรเปล่ียนหัวเร่ืองของหน้า เวบ็ เพจใหม่โดยตัง้ ชือ่ ให้เกีย่ วข้องหรอื เก่ยี วเนื่องกับเนอ้ื หาของแต่ละหน้า มวี ิธที ำดงั นี ้
หน่วยท่ี 2 ความรูท้ วั่ ไปเก่ยี วกับโปรแกรม Dreamweaver CS6 • 51 1. คลกิ ระบายหรือดับเบลิ คลกิ ตรงชอ่ งท่มี คี ำวา่ Untitled Document 2. พมิ พท์ ับข้อความดังกล่าว เชน่ หนา้ แรก หรือ Home 3. อีกวธิ หี น่งึ ให้คลกิ ที่ป่มุ Page Properties ที่ Properties Inspector 4. จะไดห้ น้าตา่ ง Page Properties คลกิ ทค่ี ำสัง่ Title/Encoding 5. ทช่ี อ่ ง Title พิมพห์ รอื แก้ไขชอ่ื หวั เรื่องตามทีต่ ้องการ เสร็จแล้วคลิกป่มุ OK
52 • การใชโ้ ปรแกรม Adobe Dreamweaver CS6 6. เมอื่ แสดงผลด้วยเว็บเบราวเ์ ซอร์กจ็ ะไดช้ ือ่ เวบ็ เพจ Home ตามท่สี ร้างไว้ 4. การบันทกึ และเปิดเว็บเพจ การบนั ทกึ เว็บเพจควรทำเปน็ ระยะๆ ตัง้ แตเ่ ริ่มสรา้ งเอกสาร เพอ่ื จะได้มไี ฟล์งานเก็บ เอาไว้ในหน่วยความจำ ท้ังนี้หากมีความผิดพลาดบางประการเกิดขึ้นอย่างกระทันหัน เช่น คอมพิวเตอร์เสีย ไฟฟ้าดับ ฯลฯ จะได้มีไฟล์เอกสารบางส่วนไว้แก้ไขหรือสร้างงานต่อได้ การบันทึกไฟลม์ ีวิธที ำดงั นี ้ 1. คลกิ ท่ีคำสง่ั File > Save as หรือแป้นพิมพ์ Ctrl + Shift + S 2. จะไดห้ นา้ ต่าง Save as เพือ่ ใหเ้ ลอื กโฟลเดอรแ์ ละพมิ พช์ ื่อไฟล ์
หนว่ ยที่ 2 ความรู้ท่วั ไปเกี่ยวกับโปรแกรม Dreamweaver CS6 • 53 3. ที่ช่อง File name ใหพ้ ิมพ์ชื่อไฟล์ เชน่ Sample webpage 4. หลงั จากน้นั คลกิ ปมุ่ Save ชอ่ื ไฟล์ทต่ี ง้ั ไวจ้ ะปรากฏขนึ้ ตรงแถบชอ่ื 5. ในการบนั ทกึ เอกสารมคี ำส่ังอื่นๆ อกี คือ - คำสง่ั Save all หมายถึง บันทกึ ไฟล์ทั้งหมดท่ีเปิดใชง้ านหรือแก้ไขอย่ใู นขณะนั้น - คำสั่ง Save all Related Files หมายถึง บนั ทกึ ไฟล์ท่เี กย่ี วข้องท้งั หมด - คำส่งั Save as Template... หมายถงึ บนั ทึกเป็นแมแ่ บบ 6. การเปิดไฟล์เอกสารหรอื ไฟลเ์ วบ็ เพจที่บันทกึ ไว้แล้วให้ใชค้ ำสงั่ File > Open
54 • การใชโ้ ปรแกรม Adobe Dreamweaver CS6 7. ดบั เบลิ คลิกไฟลท์ ตี่ อ้ งการ หรอื เลือกไฟลแ์ ลว้ คลิกปุ่ม Open 5. การทดสอบเว็บเพจกบั เวบ็ เบราว์เซอร ์ เว็บเพจทสี่ รา้ งและบนั ทกึ ไวแ้ ล้วสามารถทดสอบการแสดงผลผา่ นเว็บเบราวเ์ ซอรโ์ ดย ยังไม่ต่อเช่ือมกับอินเทอร์เน็ตเป็นการใช้งานแบบออฟไลน์ (offline) เพื่อดูตัวอย่างเว็บเพจ ก่อนที่จะนำไปใช้จรงิ โดยปกติ Dreamweaver CS6 จะเลือกเบราว์เซอรใ์ ห้เองโดยอตั โนมตั ิ ซ่ึงจะเป็นโปรแกรม Internet Explorer (IE) แต่ก็มีบางคนอาจใช้โปรแกรม Firefox หรือ Chrome ซ่งึ กส็ ามารถใชง้ านได้ดเี ช่นเดียวกนั (ควรทดสอบกบั เบราวเ์ ซอรห์ ลายๆ ตวั เพ่ือ จะไดท้ ราบวา่ การแสดงผลบนเบราว์เซอรแ์ ตล่ ะตวั มปี ัญหาอย่างไรหรอื ไม่) การทดสอบกับเว็บเบราวเ์ ซอร์ มีวธิ ที ำดงั นี้ 1. กดแปน้ F12 บนคยี ์บอร์ด 2. หรอื ดบั เบลิ คลิกท่ีไฟล์ .html 3. หรอื ใช้คำสั่ง File > Preview in Browser > Firefox (หรอื เบราว์เซอรอ์ ื่นๆ ท่ีตดิ ต้งั ไว้)
หนว่ ยท่ี 2 ความรูท้ วั่ ไปเก่ยี วกบั โปรแกรม Dreamweaver CS6 • 55 4. หากโปรแกรมมีข้อความเตือนใหบ้ นั ทกึ ไฟล์ ให้คลิก Save จะได้หนา้ เวบ็ เพจตาม ที่ได้สร้างไว้ การทดสอบเว็บเพจเพ่ือตรวจสอบการแสดงผลนี้ ผู้ใช้งานควรตรวจสอบบ่อยๆ ขณะ สร้างเวบ็ เพจเพอ่ื จะไดป้ รบั ปรงุ หรือแก้ไขให้เรียบร้อยก่อนนำออกเผยแพร่ 6. การปิดเอกสารและออกจากโปรแกรม การปิดเอกสารและออกจากโปรแกรม มวี ธิ ที ำดังนี้ 6.1 การปดิ เอกสาร การปิดเอกสารท่ีไดส้ รา้ งไวห้ รอื ทเ่ี รยี กวา่ เวบ็ เพจทำได้โดยคลกิ ที่ปุ่ม close ท่แี ถบชอ่ื หรือ คลิกท่ีคำส่ัง File > Close หากต้องการปิดเอกสารทั้งหมดท่ีเปิดใช้งานอยู่ให้ คลกิ คำสัง่ File > Close all
56 • การใช้โปรแกรม Adobe Dreamweaver CS6 6.2 การออกจากโปรแกรม การออกจากโปรแกรมมีใหเ้ ลอื กหลายวิธี ดงั น ้ี วิธีที่ 1 คลิกเมาส์ที่ปุ่ม Close ( ) ท่ีคอนโทรลบ็อกซ์บริเวณมุมบนด้านขวาของ หน้าตา่ งโปรแกรม วธิ ที ี่ 2 คลกิ ที่ไอคอนโปรแกรมที่มมุ บนซ้ายมือของหนา้ ตา่ งโปรแกรม แล้วเลอื กคำสง่ั Close วิธีท่ี 3 คลิกทีค่ ำสง่ั File > Exit วธิ ที ่ี 4 ใช้แปน้ พิมพ์ Alt + F4 หรือ Ctrl + Q
หน่วยท่ี 2 ความร้ทู ัว่ ไปเกยี่ วกบั โปรแกรม Dreamweaver CS6 • 57 กิจกรรมที่ 2.1 คำช้ีแจง ผ้เู รียนปฏบิ ัตกิ ิจกรรมดังตอ่ ไปน ้ี 1. ใหผ้ ูเ้ รียนคน้ คว้าเพ่มิ เติมเก่ยี วกับโปรแกรมที่ใช้สร้างเวบ็ เพจว่ามีโปรแกรมใดบา้ ง 2. ฝึกตดิ ต้ังโปรแกรม Dreamweaver CS6 3. ผเู้ รียนฝึกออกแบบเว็บไซต์และสร้างไซต์งานสว่ นตัวคนละ 1 ชิ้นงาน กจิ กรรมที่ 2.2 คำชแี้ จง ผ้เู รยี นปฏบิ ัติกิจกรรมดงั ตอ่ ไปน ้ี 1. เมนู File ประกอบดว้ ยคำส่ังยอ่ ย คอื ........................................................................................................................................ ........................................................................................................................................ ........................................................................................................................................ 2. เมนู Edit ประกอบด้วยคำสง่ั ยอ่ ย คอื ........................................................................................................................................ ........................................................................................................................................ ........................................................................................................................................ 3. เมนู Insert ประกอบดว้ ยคำสัง่ ยอ่ ย คอื ........................................................................................................................................ ........................................................................................................................................ ........................................................................................................................................ ........................................................................................................................................ 4. เมนู Modify ประกอบดว้ ยคำส่ังย่อย คือ ........................................................................................................................................ ........................................................................................................................................ ........................................................................................................................................ ........................................................................................................................................ 5. เมนู Format ประกอบด้วยคำสงั่ ย่อย คอื ........................................................................................................................................ ........................................................................................................................................ ........................................................................................................................................ ........................................................................................................................................
58 • การใช้โปรแกรม Adobe Dreamweaver CS6 การวดั และประเมินผลการเรียนรู้ หนว่ ยที่ 2 ตอนที่ 1 แบบปรนยั คำช้แี จง เลือกคำตอบทีถ่ กู ต้องทสี่ ดุ เพียงคำตอบเดยี ว 1. ข้อใดต่อไปน้ี ไม่ใช่ โปรแกรมท่ีจะนำ 6. ไฟล์ที่บันทึกไว้ในโปรแกรม Dream- มาสร้างเวบ็ เพจ weaver จะเป็นไฟลช์ นิดใด ก. Amaya ก. bmp ข. Web Designer ข. phd ค. html ค. Microsoft Access ง. gif ง. Microsoft Expression 2. ถ้าต้องการดูมุมมองของเอกสารเว็บ 7. การทดสอบกบั เวบ็ เบราวเ์ ซอรต์ อ้ งกด จะต้องใช้เมนูคำส่งั ใด แปน้ ใด ก. F10 ก. เมนู File ข. F11 ข. เมนู View ค. F12 ค. เมนู Format ง. F13 ง. เมนู Site 8. ข้อใด ไม่ใช่ การออกจากโปรแกรม 3. กลมุ่ เครอื่ งมอื ทใี่ ชง้ านบอ่ ยๆ คอื กลมุ่ ใด Dreamweaver ก. Common ก. Close ข. Forms ข. คลกิ ท่ปี ุ่ม แลว้ คลิกคำส่ัง Close ค. Layout ค. คลกิ ท่คี ำสั่ง File>Exit ง. Text ง. ใช้แป้นพิมพ์ <Ctrl> + < W > 4. ถ้าต้องแก้คุณสมบัติของสิ่งท่ีเลือกจะ 9. ขอ้ ใดเป็นการบนั ทกึ ไฟลท์ ้งั หมด ใช้พาเนลใด ก. Save All ก. CSS ข. Save to Remote Server ข. Application ค. Save to Upload Server ค. Tag ง. Save as Upload Server ง. Property Inspector 10. Show Code View หมายถึงขอ้ ใด 5. ถ้าต้องการดูแผนผังเว็บไซต์จะดูท่ ี ก. แสดงมมุ มองโค้ด HTML ทัง้ เอกสาร พาเนลใด ข. แสดงทั้งโคด้ HTML และงานบนหน้า ก. File ข. Tag เอกสาร ค. แสดงเฉพาะหน้าเอกสารที่ไม่มีโค้ด ค. CSS HTML ง. Application ง. ไม่มขี อ้ ถูก
หนว่ ยท่ี 2 ความรทู้ ว่ั ไปเกี่ยวกับโปรแกรม Dreamweaver CS6 • 59 ตอนที่ 2 แบบอตั นยั คำชแ้ี จง ตอบคำถามตอ่ ไปน้ใี ห้ถูกตอ้ ง 1. โปรแกรมสรา้ งเวบ็ เพจประเภท WYSIWYG editors หมายถงึ อะไร ........................................................................................................................................ ........................................................................................................................................ 2. โปรแกรม Adobe Dreamweaver CS6 เปล่ียนแปลงจากรนุ่ ก่อนๆ อยา่ งไร ........................................................................................................................................ ........................................................................................................................................ 3. ระบบที่โปรแกรม Dreamweaver CS6 ตอ้ งการ (สำหรบั Windows) มีอะไรบ้าง ........................................................................................................................................ ........................................................................................................................................ ........................................................................................................................................ 4. การสร้างไซตใ์ หม่ มวี ิธที ำอยา่ งไร ........................................................................................................................................ ........................................................................................................................................ ........................................................................................................................................ 5. การตั้งชื่อเพจมีขน้ั ตอนอยา่ งไร ........................................................................................................................................ ........................................................................................................................................ ........................................................................................................................................ 6. การเปลีย่ นชอ่ื โฟลเดอรม์ ีขั้นตอนอยา่ งไร ........................................................................................................................................ ........................................................................................................................................ ........................................................................................................................................ 7. การบนั ทึกเวบ็ เพจมขี น้ั ตอนอย่างไร ........................................................................................................................................ ........................................................................................................................................ ........................................................................................................................................ 8. การปดิ เอกสารและออกจากโปรแกรมมีวิธีทำอยา่ งไร ........................................................................................................................................ ........................................................................................................................................ ........................................................................................................................................
Search
