ใบเนื้อหา2

ใบเนอื้ หา หนว่ ยที่ 2 การใช้โปรแกรม Adobe Dreamweaver CS5เนือ้ หาสาระการสอน/การเรียนรู้• ดา้ นความรู้(ทฤษฎี) 1. เริ่มตน้ ใชง้ านโปรแกรม Adobe Dreamweaver CS5 การเรียกเปดิ โปรแกรม Adobe Dreamweaver ขึ้นมาใชง้ านมขี ั้นตอนดงั นี้1. คลกิ ป่มุ เลอื ก All Programs > Adobe Dreamweaver CS52. จะเข้าส่หู น้าจอโปรแกรม

2. ส่วนประกอบของหนา้ ตา่ ง Welcome Screen Welcome Screen เปน็ เครื่องมอื สาหรบั ชว่ ยเลอื กข้ันตอนเริ่มต้นในการใช้งานโปรแกรมโดยตัวเลือกจะแบง่ ออกเปน็ กลุม่ ๆ ดงั น้ี 1. Open a Recent Item เปิดไฟลท์ ่ีเคยใช้ โดยคลกิ เลอื กจากรายชอ่ื ทแี่ สดงอยู่ (เรียงลาดับจากที่เคยเปดิ หลังสุดเป็นต้นไป หรือคลิก Open เพ่ือเปิดไฟล์อืน่ ๆ 2. Create New สร้างไฟลใหม่ โดยถ้าคลิก HTML จะเป็นการสร้างเว็บเพจพ้ืนฐาน แต่ถ้าคลิกหัวข้ออน่ื จะเปน็ การสร้างเวบ็ เพจหรือไฟล์ตามชนดิ นน้ั ๆ 3. Top Features (videos) เป็นเส้นทางลัดสาหรับเข้าดูรายละเอียดและเทคนิคในการใช้งานต่าง ๆของโปรแกรมผา่ นทางเวบ็ ไซตข์ อง Adobe 3. สว่ นประกอบของหน้าต่างการใช้งานโปรแกรม Adobe Dreamweaver CS5 หนา้ ตา่ งการใช้งานโปรแกรม Adobe Dreamweaver CS5 จะมีสว่ นประกอบทีส่ าคญั ดังนี้

1. Windows Document คอื ส่วนที่ใช้สาหรับใส่เน้ือหาและจัดองค์ประกอบของเว็บเพจวิธีใช้งานวินโดวส์น้ีจะคล้ายกับท่ีใช้โปรแกรมไมโครซอฟต์เวิร์ด เช่น พิมพ์ข้อความ วางภาพกราฟิก และสร้างตารางข้อมูล โดยเนอ้ื หาตา่ งๆ จะแสดงออกมาคล้ายกบั ทปี่ รากฏบนเบราว์เซอร์ Windows Document มมี ุมมองในการทางาน 6 แบบด้วยกัน ซ่ึงสามารถเลือกได้โดยคลิกปุ่มมุมมองบนทูลบาร์ หรือหากต้องการสลับการทางานระหว่างมุมมอง Code กับมุมมอง Design สามารถเลือกคาส่ัง View >Switch Views 1.1 มุมมองออกแบบ (Design View) จะแสดงเว็บเพจตามลักษณะคล้ายกับท่ีจะปรากฏบนเบราว์เซอร์โดยสามารถแก้ไขและจัดวางเนื้อหาตา่ ง ๆ ลงบนเวบ็ เพจ 1.2 มุมมองโค้ด (Code View) จะแสดงเว็บเพจในรูปของชุดคาสั่งภาษา HTML ท่ีถูกสร้างข้ึนอัตโนมัติโดยโปรแกรม Adobe Dreamweaver หรือเป็นคาสั่งที่ผู้ใช้เพ่ิมเข้าไปเองนอกจากนี้ก็อาจจะมีคาส่ังสไตล์ชีต(CSS) และภาษาสคริปต์ (script) ต่าง ๆ ผู้ใช้สามารถตรวจสอบและแก้ไขคาส่ังได้ตามต้องการ ซึ่งการแก้ไขจะส่งผลกลับไปยังมมุ มองออกแบบโดยอตั โนมตั ิ 1.3 มุมมองโค้ดและออกแบบ (Code and Design View หรือ Split) จะแสดงเว็บเพจท้ังในรูปแบบที่ปรากฏบนเบราว์เซอร์และรูปแบบคาส่ังภาษา HTML พร้อมกัน เพ่ือใช้ในการออกแบบและตรวจสอบแก้ไขคาสั่งไปในขณะเดียวกัน สามารถปรบั ขนาดพนื้ ท่ขี องแต่ละส่วนไดโ้ ดยการคลกิ แล้วลากทเ่ี สน้ แบ่งระหวา่ งทั้ง 2 ส่วนนี้ 1.4 มุมมองแสดงหนา้ เวบ็ เหมือนดบู นเบราว์เซอร์ (Line View) จะแสดงเว็บเพจเหมือนกับการแสดงผลบนหน้าเว็บบนเบราว์เซอร์สามารถแสดงผลของ JavaScript และ Plugin ต่าง ๆ เป็นมุมมองที่เพิ่มข้ึนมาเพื่ออานวยความสะดวกต่อผู้จัดทาเว็บไซต์ในการตรวจเช็กองค์ประกอบและลิงค์ต่าง ๆ ได้อย่างรวดเร็ว ทาให้ประหยัดเวลากว่าการแสดงผลผา่ นทางเวบ็ เบราวเ์ ซอร์โดยตรง 1.5 มุมมองแสดงผลโค้ดหน้าเว็บ (Live Code) จะแสดงผลโค้ดร่วมกับมุมมอง Line View (จะแสดงมุมมอง Live Code ได้ก็ต่อเมื่ออยู่ท่ีมุมมอง Live View เท่านั้น) เป็นมุมมองท่ีเสมือนการใช้คาส่ัง View >

Source จากเบราว์เซอร์ ซง่ึ ใช้ตรวจดโู คด้ ในตาแหน่งตา่ ง ๆ เทา่ นน้ั ไม่สามารถแก้ไขโคด้ ในมุมมองนี้ได้ 1.6 มุมมองแสดงผลหน้าเว็บที่จัดรูปแบบด้วย CSS (Inspect) จะแสดงผลร่วมกับมุมมอง Live Viewซึ่งเป็ นมมุ มองท่ีใช้ตรวจดูการจดั รปู แบบด้วยคาสั่ง CSS ในตาแหน่งที่เมาส์เล่ือนผ่าน โดยสามารถดูได้จากพาเนลCSS Styles เพื่อใหเ้ ลือกใชห้ รอื ยกเลกิ คาสั่งทเ่ี คยกาหนดเอาไว้ในมุมมองนไี้ ด้ 2. ทูลบาร์ (Toolbar) คือ แถบเครื่องมือซึ่งรวบรวมปุ่มคาสั่งที่จาเป็นต้องใช้งานบ่อย ๆเอาไว้ในโปรแกรมAdobe Dreamweaver CS5 มีทูลบาร์อยู่ 5 ชุดด้วยกัน ซึ่งสามารถเปิดใช้หรือปิ ดได้โดยเลือกคาสั่ง View >Toolbars > ช่อื ทูลบาร์ 2.1 ทูลบาร์ Document เครื่องมือนี้ประกอบด้วยปุ่มคาสั่งในการกาหนดมุมมองและการแสดงผลของเว็บเพจ 2.2 ทูลบาร์ Standard ประกอบดว้ ยปุ่มคาส่งั ในการจัดการไฟลเ์ วบ็ เพจ และคาส่ังพื้นฐานในการย้ายคดั ลอก วางเนือ้ หา รวมทัง้ การยกเลกิ และทาซ้าคาส่ังด้วย 3. พาเนล Insert ประกอบด้วยปุ่มคาสั่งท่ีใช้วางออบเจ็คชนิดต่าง ๆ ลงบนเว็บเพจโดยปุ่มเหล่านี้จะแบ่งออกเป็นกลุ่ม ๆ เช่น กลมุ่ Form สาหรับสร้างฟอร์ม เปน็ ต้น 3.1 Common เป็นกลุ่มคาส่ังสาหรับวางออบเจ็คท่ีต้องใช้งานบ่อย ๆ ในการสร้างเว็บเพจ เช่นภาพกราฟกิ ตาราง ไฟลม์ ัลตมิ ีเดยี เปน็ ตน้ 3.2 Layout สาหรับวางออบเจ็คทใี่ ช้จัดโครงสรา้ งของเว็บเพจ เช่น ตาราง เฟรม และเลเยอร์ 3.3 Forms สาหรบั วางออบเจ็คทใ่ี ชส้ รา้ งแบบฟอรม์ เพ่อื รับขอ้ มลู จากผชู้ ม เช่น ฟลิ ด์ชนดิ ต่าง ๆ 3.4 Data สาหรับวางคาสงั่ ทีใ่ ช้จัดการฐานขอ้ มูลและดึงขอ้ มลู จากฐานข้อมลู มาแสดงบนเวบ็ เพจ 3.5 Spry สาหรับวางออบเจ็คท่ีใช้เทคโนโลยีของ Spry แบบต่าง ๆ 3.6 InContextEditing สาหรบั สรา้ งพืน้ ท่ีเทมเพลตอานวยความสะดวกต่อผใู ชในการแกไ้ ขเนื้อหาได้ 3.7 Text สาหรับจัดรูปแบบข้อความภายในเว็บเพจ เช่น หัวเรื่องตัวหนา ตัวเอียง หัวข้อ บุ๊กเล็ตรวมทง้ั แทรกสัญลกั ษณ์พเิ ศษตา่ ง ๆ 3.8 Favorites เป็ นกลุ่มที่สามารถเพิ่มปุ่มคาสั่งจากกลุ่มอื่น ๆ เข้ามาเก็บได้เองเพ่ือความสะดวกในการใช้งาน 4. แถบสถานะ (Status Bar) เป็ นแถบซ่ึงอยู่ด้านล่างของ Windows Document ประกอบด้วย 2 ส่วนคอื ด้านซ้ายเป็น Tag Selector สว่ นดา้ นขวาเปน็ เคร่ืองมือต่าง ๆ 4.1 Select ใช้เลือกออบเจ็คบนเว็บเพจ หลังจากใช้เคร่ืองมืออื่น ๆ แล้วจะต้องกลับมาคลิกเลือกเคร่อื งมอื นี้เสมอ 4.2 Hand ใช้เลื่อนหน้าจอเว็บเพจ โดยเลือกเครื่องมือนี้แล้วไปคลิกลากบน Windows Document(ถ้าดบั เบลิ คลิกเครอ่ื งมอื นี้ เว็บเพจจะขยายมมุ มองจนออบเจ็คทีเ่ ลอื กไว้แสดงเต็มหน้าจอ 4.3 Zoom ใช้คลิกหรือลากเพื่อขยายมุมมองเว็บเพจ หรือกดคีย์ลัด Alt แล้วคลิกเพื่อย่อมุมมอง ถ้าดบั เบิลคลกิ เครอ่ื งมอื นจ้ี ะได้มมุ มองท่ี 100% 5. พาเนล Properties เป็นพาเนลท่ีใช้แสดงคุณสมบัติสาคัญ ๆ ของออบเจ็คที่กาลังเลือกบนเว็บเพจ และใช้กาหนดหรือแก้คุณสมบัติเหล่าน้ันได้ เช่น ขนาด ตาแหน่ง และสี ทั้งท่ีรายละเอียดบนพาเนล Properties จะเปลย่ี นแปลงตลอดเวลาขน้ึ กบั ว่าขณะนัน้ กาลงั เลือกออบเจค็ ใด 6. แถบเมนู (Menu bar) เปน็ สว่ นทใ่ี ชเ้ กบ็ คาสงั่ ต่างๆ ของโปรแกรม โดยมีการแบ่งคาสั่งออกเป็นหมวดหมู่เพือ่ ใหส้ ะดวกตอ่ การเรยี กใช้งาน 4. การสรา้ งเวบ็ ไซต์

ในการสร้าง Dreamweaver Site มขี ้อมูลสาคัญอยู่ 3 สว่ นทีจ่ ะต้องกาหนดคอื - Site เป็ นข้อมูลเกี่ยวกับเว็บไซต์ท่ีสร้างขึ้นภายในเครื่องคอมพิวเตอร์ของตัวเอง เช่น ช่ือเว็บไซต์และโฟลเดอรท์ ี่ใช้เกบ็ ไฟล์ - Remote Server เป็ นข้อมูลเกี่ยวกับเซิร์ฟเวอร์บนอินเทอร์เน็ตท่ีจะนาเว็บไซต์ไปฝากไว้ เช่น ชื่อเซริ ์ฟเวอร์ โฟลเดอรห์ ลกั ทีใ่ ชเ้ ก็บไฟล์ วธิ กี ารอัพโหลด และชื่อผใู้ ช้ รหัสผา่ นทีใ่ ชล้ ็อกอินเพือ่ อัพโหลด - Testing Server เป็นข้อมูลเกี่ยวกับเซิร์ฟเวอร์ที่ใช้สาหรับทดสอบและประมวลผลDynamic page(เว็บทีม่ ีการใช้ Server-side script เช่น ASP หรอื PHP) การสร้างเว็บไซต์ใหม่ 1) เลอื กคาสงั่ Site > New Site 2) คลิกแทบ็ Site 3) ตั้งช่ือเวบ็ ไซต์ 4) คลิกป่มุ Browse 5) จะปรากฏหน้าต่างเพ่ือให้เลือก ตาแหน่งและ โฟลเดอร์หลักท่ีจะใช้เก็บข้อมูลท้ังหมดของ เวบ็ ไซต์ 6) คลกิ ปุ่ม Select 7) คลิกป่มุ Save 8) เวบ็ ไซตท์ ีส่ ร้างใหม่จะถกู เปิดใช้อตั โนมตั ิโดยจะดูไดท้ ่ีพาเนล Files

5. การแก้ไขเว็บไซต์ หลงั จากทสี่ รา้ งเว็บไซตแ์ ลว้ หากตอ้ งการเปลี่ยนชอื่ หรอื รายละเอียดอืน่ ๆ กส็ ามารถทาได้ดงั น้ี 1) เลือกคาสัง่ Site > Manage Sites 2) คลิกช่ือเวบ็ ไซต์ 3) คลิกป่มุ Edit

4) คลกิ แท็บ Site5) แก้ไขขอ้ มูลตา่ ง ๆ ตามตอ้ งการ6) คลิกปมุ่ Save

6. การสร้างโฟลเดอรส์ าหรบั เก็บไฟล์ หลังจากท่ีสร้างเว็บไซต์แล้ว สามารถสร้างโฟลเดอร์ย่อยไว้ภายใต้โฟลเดอร์หลักของเว็บไซต์น้ันเพ่ือใช้จัดเก็บไฟลให้เป็นหมวดหมู่ ไม่ว่าจะเป็นไฟล์ที่สร้างขึ้นในโปรแกรม Adobe Dreamweaver เช่น เว็บเพจ (.htm/.html) ไฟล์สไตล์ชตี (.css) หรอื ไฟลท์ ่นี าเขา้ มาจากโปรแกรมอน่ื เชน่ รูปภาพ ไฟล์เสียง เป็นต้น สามารถทาไดด้ ังนี้ 1) คลิกขวาบนโฟลเดอร์หลกั ของเว็บไซตแ์ ล้วเลอื ก New Folder 2) ตงั้ ช่อื โฟลเดอร์ แล้วกดคีย์ Enter 3) ถ้าต้องการสร้างโฟลเดอร์อื่นอีกก็ทาไดท้ านองเดยี วกัน 7. การสรา้ งเวบ็ เพจใหม่ เม่ือมีเวบ็ ไซตแ์ ลว้ กจ็ ะสามารถสร้างเว็บเพจใหม่เก็บลงไปในเวบ็ โดยทาไดห้ ลายกรณี ดังน้ี

7.1 สรา้ งเว็บเพจเปลา่ 1) เลอื กคาสงั่ File > New 2) เลือกกลุ่มเว็บเพจเป็น Blank Page 3) เลือกประเภทของเว็บเพจเป็น HTML 4) เลือกรูปแบบโครงสร้างเว็บเพจเปน็ None (คอื ไมใ่ ชร้ ปู แบบมาตรฐานท่ีโปรแกรมเตรียมไว้ ใหใ้ ชต้ ามคา่ ดฟี อลต)์ 5) คลิก Create 7.2 สรา้ งเว็บเพจจากรูปแบบโครงสร้าง CSS (CSS Layout) 1) เลอื กคาส่งั File > New

2) เลือกกลุ่มเวบ็ เพจเปน็ Blank Page 3) เลือกประเภทของเวบ็ เพจเป็น HTML 4) เลือกรปู แบบโครงสร้างท่ตี อ้ งการ 5) แสดงรูปแบบโครงสร้างทเ่ี ลือก (ใหใชต้ ามคา่ ดฟี อลต์) 6) คลกิ Create 7.3 สร้างเวบ็ เพจใหมจ่ ากไฟลต์ ัวอยา่ ง นอกจากรูปแบบเว็บเพจมาตรฐาน โปรแกรม AdobeDreamweaver ยังได้เตรียมเว็บเพจตัวอย่างที่ถูกออกแบบโครงสรา้ งและสีสันไวแ้ ล้ว ซง่ึ สามารถนา มาใชส้ รา้ งเว็บเพจใหม่ได้ หลังจากนั้นก็เพียงแต่ใส่เน้ือหาแทนท่ีลงไปตามรูปแบบเดมิ ซึง่ วธิ นี ี้จะชว่ ยประหยัดเวลาในการสรา้ งเว็บเพจได้มาก 1) เลอื กคาสงั่ File > New

2) เลือกกลมุ่ เวบ็ เพจเป็น page from Sample 3) เลือกชนิดของเวบ็ เพจตวั อยา่ ง 4) เลือกเวบ็ เพจตัวอยา่ งที่ต้องการ 5) แสดงภาพของเวบ็ เพจตัวอยา่ งที่เลอื ก 6) คลิก Create8. การเปิดเว็บเพจเดิม การเปดิ ไฟลเ์ วบ็ เพจทสี่ รา้ งไวแ้ ลว้ ขน้ึ มาแก้ไขสามารถทาไดห้ ลายวธิ ี เชน่ กรณีใชค้ าสั่งจากเมนดู ังน้ี 1) เลอื กคาส่ัง File > Open 2) เปดิ เขา้ ไปยังโฟลเดอร์หลักที่จัดเกบ็ เว็บไซต์และโฟลเดอร์ย่อยทีเ่ ก็บไฟล์

3) คลกิ เลอื กไฟลเ์ วบ็ เพจ 4) คลิก Open9. การบันทกึ เวบ็ เพจ หลังจากที่สร้างหรอื แก้ไขเว็บเพจแลว้ จะตอ้ งส่งั บันทึกเวบ็ เพจนั้นดว้ ย 1) เลอื กคาสัง่ File > Save 2) เปิดเขา้ ไปยงั โฟลเดอรห์ ลักทจ่ี ดั เก็บเวบ็ ไซตแ์ ละโฟลเดอร์ยอ่ ยที่จะใช้เกบ็ ไฟล์ 3) ตง้ั ชื่อไฟล์ 4) คลิก Save