powerpoint-05

การสร้างไซตใ์ หม่ 1. คลิกป่ มุ (Site) แล้วเลอื ก New Site… 2

2. ตงั้ ชื่อไซต์ จากนัน้ กดป่ มุ (Browse to Folder) เพื่อเลือกโฟลเดอร์ เกบ็ งาน 3

3. เขา้ ไปยงั โฟลเดอรท์ ี่ต้องการ 4. หลงั จากเลือกโฟลเดอรเ์ กบ็ งาน เกบ็ งาน จากนัน้ กด Select แล้วคลิก Save 4

5. จะปรากฏช่ือไซต์ และแหล่งท่ีเกบ็ โฟลเดอรง์ านบนพาเนล Files ทนั ที 5

การแก้ไขไซต์ 1. คลิกป่ มุ (Site) แลว้ เลอื ก Manage Sites… 6

2. คลิกเลอื กท่ีไซตท์ ่ีต้องการแก้ไข จากนัน้ คลิก (Edit the currently selected site) เพ่ือแก้ไข Site 7

3. แก้ไขชื่อหรือตาแหน่ง 4. คลิก Done เมอ่ื เสรจ็ สิ้น โฟลเดอรเ์ กบ็ ไฟลง์ าน เม่ือ เสรจ็ แลว้ ให้คลิก Save 8

การสรา้ งเวบ็ เพจใหมด่ ้วย Blank Page Blank Page คือ เวบ็ เพจเปล่าเหมาะกบั กรณีท่ีต้องการออกแบบเลยเ์ อาท์ ทกุ อย่างด้วยตวั เอง การสร้างเวบ็ เพจเปล่ามีวิธีการ ดงั นี้ 1. ไปที่เมนู File>New 9

2. จะปรากฏหน้าต่าง New Doccument ขึน้ มา 2.1 ให้เลือกท่ี Blank Page 2.2 เลือก Page Type เป็น HTML 2.3 เลือก Layout เป็น <none> 2.4 คลิกที่ Create 10

3. จะปรากฏไฟลเ์ วบ็ เพจเปล่าพร้อมใช้งานทนั ที 11

การสรา้ งเวบ็ เพจใหม่ด้วย Page From Sample การสร้างเวบ็ เพจเปล่าด้วยคาสงั่ Page From Sample จะเป็นการกาหนด รปู แบบของเวบ็ เพจทงั้ สีพืน้ รปู แบบตวั อกั ษร ตาราง รวมถึงลิงกต์ ่าง ๆ ใน รปู แบบของ CSS Style Sheet ซ่ึงมีวิธีการสรา้ งและใช้งาน ดงั นี้ 1. ไปท่ีเมนู File>New 12

2. จะปรากฏหน้าต่างนี้ขึน้ มา 2.1 เลือกคาสงั่ Page from Sample 2.2 เลือก Sample Folder เป็น CSS Style Sheet 2.3 เลือก Sample Page ตามต้องการ โดยจะมีภาพตวั อย่างให้ดู 2.4 เมื่อเสรจ็ แล้ว คลิก Create 13

3. จากนัน้ จะปรากฏไฟล์ CSS 4. เลือกโฟลเดอรท์ ี่ต้องการเกบ็ ให้กดป่ มุ Ctrl+S เพ่ือบนั ทึก ไฟล์ และตงั้ ชื่อไฟล์ จากนัน้ เกบ็ ไว้ คลิก Save 14

จากนัน้ จะยงั ไม่เกิดความเปลี่ยนแปลงใด ๆ จนกว่าจะนาไฟล์ CSS ท่ีได้ บนั ทึกไว้มาใช้งานบนเวบ็ เพจที่สร้างไว้ก่อนหน้า ดงั ตวั อย่างต่อไปนี้ 1. จากหน้าที่ปรากฏคือ หน้าเวบ็ เพจดงั้ เดิม ท่ียงั ไม่ได้มีการใช้ CSS ที่ บนั ทึกไว้ ให้คลิกที่พาเนล CSS Styles 15

2. คลิกป่ มุ (Attach 3. จะปรากฏหน้าต่าง Attach Style Sheet) External Style Sheet 3.1 คลิกท่ี Browse 3.2 เลือกไฟล์ CSS ท่ีได้บนั ทึกไว้ 3.3 คลิก OK 16

4. เวบ็ เพจท่ีสรา้ งไว้จะมีรปู แบบสีสนั ตาม CSS ที่ได้สรา้ งไวใ้ นขนั้ ตอนแรก 17

1. คลิกที่ File เลือก Save เมอื่ ต้องการบนั ทึกซา้ ช่ือเดิมหรอื เป็นการบนั ทึกครงั้ แรก Save As เม่อื ต้องการบนั ทึกไฟลเ์ ดิมเป็นช่ือใหม่หรอื เป็นการบนั ทึกครงั้ แรก Save All เมอื่ ต้องการบนั ทึกเวบ็ เพจท่ีเปิ ดอยทู่ งั้ หมดพรอ้ มกนั Save All Related Files เมื่อต้องการบนั ทึกไฟลท์ งั้ หมดท่ีเก่ียวข้อง เช่น ไฟล์ CSS เป็นต้น Save as Template เมือ่ ต้องการบนั ทึกเวบ็ เพจท่ีสรา้ งไว้เป็นเทมเพลต ในครงั้ ถดั ไป 18

2. จะปรากฏหน้าต่างนี้ขึน้ มา ให้เปิ ดไปยงั โฟลเดอรท์ ่ีต้องการบนั ทึก จากนัน้ ตงั้ ช่ือไฟลต์ ามท่ีต้องการ (ในกรณีท่ีเป็นหน้าแรกของเวบ็ ไซต์ ต้องช่ือ index.html เท่านัน้ ) จากนัน้ เลือกประเภทไฟลท์ ่ีบนั ทึกเป็น HTNL Documents แล้วคลิก Save 19

20

หลกั การตงั้ ช่ือเวบ็ เพจ การตงั้ ชื่อเวบ็ เพจนัน้ เป็นส่ิงที่สาคญั เนื่องจากการตงั้ ช่ือที่ไม่ถกู ต้องนัน้ จะ ทาให้เวบ็ เพจมปี ัญหาเม่ืออปั โหลดขนึ้ ไปใช้งานบนอินเทอรเ์ น็ตได้ โดยมีหลกั การตงั้ ชื่อเวบ็ เพจท่ีสาคญั ดงั นี้ 1. ชื่อไฟลค์ วรเป็นภาษาองั กฤษตวั พิมพเ์ ลก็ เท่านัน้ 2. ช่ือไฟลไ์ ม่ควรเว้นช่องว่าง แต่สามารถใช้เครอ่ื งหมาย _ หรือ – ได้ เช่น my_page_1.html หรอื my-page-1.html เป็นต้น 3. ไมค่ วรใช้อกั ขระพิเศษในการตงั้ ชื่อ เช่น @ *! $ % เนื่องจากผิดหลกั การตงั้ ชื่อไฟล์ 4. สาหรบั เวบ็ เพจที่เป็นหน้าแรก ควรตงั้ ช่ือ index หรอื default เท่านัน้ เท่านัน้ ส่วน นามสกลุ เวบ็ เพจสามารถใช้ได้ทงั้ .html และ .htm 21

เมื่อเปิ ดโปรแกรม Dreamweaver จะพบกบั Welcome Screen โดย สามารถเปิ ดไฟลง์ านเก่าได้ผา่ นแทบ็ Open a recent item โดยจะปรากฏรายช่ือ ไฟลท์ ี่เคยใช้งาน ให้คลิกไฟลท์ ี่ต้องการเปิ ดขึน้ มาได้เลย 22

หรอื ในกรณีท่ีไฟลง์ านท่ีต้องการไม่มีอย่บู นรายช่ือ ให้คลิกท่ี Open จะ ปรากฏหน้าต่างขึน้ มาให้เปิ ดโฟลเดอรท์ ี่เกบ็ ไฟลง์ าน เลือกไฟลง์ านที่ต้องการ จากนัน้ คลิกที่ Open อีกครงั้ 23

Workspace คือ รปู แบบการจดั วางพืน้ ท่ีในการทางาน ที่เลอื กใช้ได้ว่า ต้องการ ให้มีพาเนลใดปรากฏขึน้ มาให้ใช้งานและจดั วางตาแหน่งอยา่ งไรบา้ ง โปรแกรม Dreamweaver จะมี Workspace พืน้ ฐานมาให้ โดยท่ีไมไ่ ด้จากดั เรอ่ื งรปู แบบของพาเนล ท่ีใช้งาน และผใู้ ช้สามารถปรบั แต่งได้ 11 รปู แบบพืน้ ฐานของโปรแกรมมี ดงั นี้ App Developer/App Developer Plus เป็น Workspace ที่เหมาะกบั การ พฒั นาระบบ หรอื การสรา้ งเวบ็ ไซตใ์ นรปู แบบ Dynamic ที่มีการเช่ือมโยงกบั ฐานข้อมลู Business Catalyst เป็น Workspace ท่ีอานวยความสะดวกในการทางาน รว่ มกบั เวบ็ ไซตท์ ี่ให้บริการ Web Hosting ของ Adobe 24

Classic เป็น Workspace แบบเก่า เหมาะสาหรบั ผทู้ ี่ค้นุ เคยกบั Dreamweaver เวอรช์ นั ท่ีตา่ กว่าเวอรช์ นั MX2004 ลงไป ซ่ึงหน้าตาการใช้งานจะไม่ ซบั ซ้อน Coder/Coder Plus เป็น Workspace ที่เหมาะกบั นักเขียนโปรแกรม ซึ่ง Workspace จะแสดงส่วนที่เก่ียวข้องกบั โค้ดเท่านัน้ Designer/Designer Compact เป็น Workspace สาหรบั นักออกแบบเวบ็ โดยเฉพาะ ซึ่งมีเครอ่ื งมือเฉพาะทางที่ครอบคลมุ การทางานอยา่ งครบถว้ น Dual Screen เป็น Workspace ท่ีแต่ละพาเนลจะแยกจากกนั ทงั้ หมด เหมาะกบั การทางานกบั จอภาพขนาดใหญ่ ซึ่งสามารถเลอื กเปิ ด-ปิ ดพาเนลได้ ตามท่ีต้องการ โดยทวั่ ไปใช้ทางานบนหน้าจอสองหน้าจอขึน้ ไป 25

Fluid Layout เป็น Workspace สาหรบั ออกแบบเวบ็ เพจที่ใช้แสดงบน อปุ กรณ์ท่ีขนาดหน้าจอแตกต่างกนั Mobile Application เป็น Workspace ท่ีเหมาะสาหรบั การสร้างเวบ็ ไซต์ บนอปุ กรณ์มือถือหรือแทบ็ เลต็ ซ่ึงสามารถใช้งานร่วมกบั PhoneGab เพื่อทดสอบ การแสดงผลไดด้ ้วย การเลือก Workspace การเลือก Workspace ให้เป็นตามรปู แบบต่าง ๆ ขา้ งต้นตามท่ีต้องการ จากชื่อของ Workspace ที่ใช้อยใู่ นปัจจบุ นั เช่น Workspace แบบ Classic หาก ต้องการเลอื ก Workspace เพ่อื เปล่ียนแบบอ่ืน สามารถทาได้โดยการคลิกที่ป่ มุ ที่แสดงมมุ บนขวามอื ของ Menu Bar ดงั ภาพ 26

จากนัน้ จะปรากฏรายชื่อ Workspace ขึน้ มา ให้เลือกคลิกรปู แบบท่ีต้องการ 27

การปรบั แต่งและสร้าง Workspace 1. คลิกขวาที่พาเนลท่ีไม่ได้ใช้ 2. คลิกเมนู Window จากนัน้ งาน แล้วเลือกคาสงั่ Close คลิกเลือกพาเนลท่ีต้องการ เพ่ือเปิ ดขึน้ มาใช้งาน หรอื Close Tab Group เพื่อ ปิ ดพาเนล 28

3. คลิกค้างที่พาเนลที่ต้องการย้าย จากนัน้ ลากไปปล่อยในบริเวณที่ ต้องการได้ 29

4. คลิกที่ป่ มุ Collaspe to Icons 5. เมื่อปรบั แต่งพาเนลต่าง ๆ เพื่อย่อพาเนลให้เป็ นไอคอน เสรจ็ แล้ว คลิกท่ีชื่อพาเนล ขนาดเลก็ ด้านบน จากนัน้ เลือกคาสงั่ New Workspace 30

6. จะปรากฏหน้าต่างมาให้ตงั้ 7. จะปรากฏ Workspace ที่ ช่ือ Workspace เม่ือตงั้ ชื่อ สร้างขึน้ มาให้เรียกใช้งานได้ แล้วให้กด OK ทุกเม่ือ 31

การรเี ซต Workspace ในกรณีท่ีได้ทาการจดั ตาแหน่งพาเนล ใน Workspace หน่ึง ๆ แล้ว ไม่ต้องการสามารถรีเซตกลบั ไปใช้การจดั เรียงแบบดงั้ เดิมของ Workspace ได้ โดยการคลิกที่ช่ือ Workspace ด้านบน จากนัน้ เลือกที่ Reset ‘ช่ือ Worksapce’ (ในกรณีนี้เป็น Designer) 32

การลบ Workspace 1. คลิกที่ช่ือพาเนลด้านบน จากนัน้ 2. จะปรากฏหน้าต่างนี้ขึน้ มา ให้ เลือกที่ Manage Workspaces เลือก Workspace ที่ต้องการลบ จากนัน้ ให้กด Delete 33

3. จะปรากฏหน้าต่างมาให้ยืนยนั 4. จะเหน็ ได้ว่า My Workspace จะ ในกรณีที่ไม่ต้องการลบให้กด ถกู ลบออก หลงั จากนัน้ ให้กด No ในท่ีนี้ต้องการลบให้กด Yes OK 34

มมุ มอง Design Design เป็นมมุ มองแสดงการทางานเสมือนจริง สามารถจดั การกบั ภาพ ข้อความ การเชื่อมโยงได้อย่างอิสระ 35

มมุ มอง Code Code เป็นมมุ มองท่ีใช้ในการทางานกบั โค้ดโดยตรง ทงั้ HTML, CSS หรอื สคริปตอ์ ื่น ๆ ที่เขียนเพ่ิมเติมเข้าไป โดยเป็นมมุ มองท่ีเหมาะกบั ผทู้ ี่มีความ เข้าใจกบั โครงสร้างภาษา การแก้ไขโค้ดในมมุ มองนี้ จะส่งผลไปถึงหน้าตาของ เวบ็ เพจในมมุ มอง Design ด้วย 36

มมุ มอง Split Split เป็นมมุ มองที่แยกหน้าต่างเป็นสองส่วน ได้แก่ โค้ด และหน้าเวบ็ เพจ เมื่อต้องการปรบั ปรงุ โค้ดในส่วนใดของเวบ็ เพจสามารถคลิกที่ส่วนนัน้ ๆ โปรแกรมจะแสดงโค้ดให้แก้ไขได้ทนั ที 37

มมุ มอง Live Live เป็นมมุ มองแสดงเวบ็ เพจเสมือนจริงท่ีใช้การตรวจสอบมลั ติมีเดีย รวมถึงการเชื่อมโยงในเวบ็ เพจได้ทนั ทีโดยไม่จาเป็นต้องบนั ทึกออกมาทดสอบ ในเวบ็ เบราวเ์ ซอร์ 38

มมุ มอง Live Code Live Code เป็นส่วนการแสดงผลร่วมกบั มมุ มอง Live ซ่ึงจะเพิ่มส่วน การแสดงโค้ดขึน้ มา โดยใช้ตรวจสอบโค้ดในส่วนของเวบ็ เพจได้ แต่ไม่สามารถ แก้ไขได้ 39

มมุ มอง Inspect Inspect เป็นมมุ มองที่มีลกั ษณะคล้ายกบั มมุ มอง Live Code เพียงแต่ สามารถแก้ไขโค้ดได้โดยการคลิกบนส่วนต่าง ๆ ของเวบ็ เพจ จะปรากฏพาเนล CSS ขึน้ มาให้แก้ไขในส่วนนัน้ ได้ทนั ที 40

มมุ มอง Multiscreen Multiscreen เป็นมมุ มองการตรวจสอบเวบ็ เพจท่ีออกแบบเสรจ็ แล้ว บนหน้าจอ เช่น โทรศพั ทม์ ือถือ แทบ็ เลต็ หรือจอภาพว่าเหมาะสมหรือไม่ 41

การเลือกมมุ มองการทางาน การเลือกมมุ มองการทางานใน Dreamweaver CS6 นัน้ สามารถทาได้ โดยการเลือกที่ป่ มุ ต่าง ๆ ตามมมุ มองการทางานท่ีต้องการ 42