ข้อใดคือส่วนประกอบของหน้าจอโปรแกรม dreamweaver ที่ใช้สำหรับแสดงข้อมูลเพิ่มเติมเกี่ยวกับงานที่กำลังทำ

เริ่มต้นใช้งานโปรแกรม Dreamweaver 8

ความรู้ทั่วไปเกี่ยวกับ Dreamweaver 8

       แนะนำโปรแกรม Dreamweaver 8

       เมื่อประมาณ 4-5 ปีที่แล้วมีเว็บไซต์เป็นของตนเองถือเป็นเรื่องที่ค่อนข้างยาก เหตุผลหลัก คือ ค่าใช้จ่ายสูงและขั้นตอนการสร้างเว็บเพจยุ่งยากมาก แต่ปัจจุบัน การเป็นเจ้าของเว็บไซต์ทำได้ง่ายมาก บริษัท ห้างร้าน หน่วยงานของรัฐบาล และองค์กรต่างๆ ส่วนใหญ่มีเว็บไซต์ของตนเอง แม้แต่บุคคลธรรมดาจำนวนไม่น้อยก็มีเปิดเว็บไซต์ส่วนตัวกัน
       การสร้างเว็บไซต์ในยุคแรกนิยมใช้ภาษา HTML ซึ่งเป็นซอฟต์แวร์ประยุกต์สำหรับสร้างเว็บเพจ โดยใช้โปรแกรมแท็กซ์ เอดิเตอร์ (Text Editor) ทั่วไป เช่น Notepad, WordPad และโปรแกรมประมวลผลคำ เช่น MS - Word, WordPerfect เป็นต้น แต่ผู้สร้างก็สามารถสร้างเว็บเพจให้สวยงาม สามารถใส่สีตัวอักษร สร้างตาราง ฯลฯ โดยจะต้องเขียนโค้ดทั้งหมดและบันทึกไฟล์ นามสกุล .html แล้วนำไปเปิดด้วยเว็บเบราว์เซอร์ได้
       การเขียนภาษา HTML ด้วย Text Editor นั้นแม้จะไม่ยากนักแต่ถ้าต้องตกแต่งเว็บเพจให้สวยงามมีภาพประกอบและรายละเอียดที่ซับซ้อน ก็ยิ่งต้องเขียนโค้ดมากนับร้อยนับพันบรรทัด ทำให้ช้าและมีโอกาสผิดพลาดได้ง่าย ต่อมาได้มีผู้เล็งเห็นความยากลำบากในการเขียนโค้ดคำสั่งดังกล่าว จึงได้พัฒนาโปรแกรมสำเร็จรูปที่ช่วยในการสร้างเว็บเพจให้ง่ายขึ้นเรียกว่า WYSIWYG editors (What You See Is What You Get Editors) หมายถึง ใช้ภาพกราฟิกแทนการเขียนโค้ดคำสั่ง เมื่อผู้สร้างเว็บวางภาพ ตัวอักษรและวัตถุใดๆลงบนแผ่นสร้างเว็บ โปรแกรมจะทำการเขียนโค้ดคำสั่งภาษา HTML ให้โดยอัตโนมัติ เราจะเห็นตัวอย่างงานที่สร้างเหมือนกับที่แสดงบนเว็บเบราว์เซอร์ จึงช่วยให้การสร้างเว็บเพจง่ายขึ้น รวดเร็วขึ้นและสวยงามมากยิ่งขึ้น
โปรแกรมประเภท WYSIWYG editors นี้จึงจัดว่าเป็น HTML ภาคกราฟิกนั่นเอง โดยในปัจจุบันมีโปรแกรมประเภทนี้จำนวนมาก แต่ที่ได้รับความนิยมมาก เช่น ประเภทที่ให้ใช้ฟรี คือ Amaya, Aptana, Composer, Nvu และ OPENBEXI HTML Builder ประเภทที่ต้องเสียค่าใช้จ่าย คือ Microsoft FrontPage, HomeSite, Microsoft Expression Web Designer และ Dreamweaver
      อย่างไรก็ตาม แม้โปรแกรมดังกล่าวจะมีมากมายให้เลือกใช้ แต่ที่ได้รับความนิยมและยอมรับกันทั่วโลกในเวลานี้คือ Macromedia Dreamweaver หรือเรียกสั้นๆว่า Dreamweaver

       โปรแกรม Dreamweaver ได้รับการพัฒนาขึ้นโดยบริษัท Macromedia ใช้ชื่อว่า Macromedia Dreamweaver โดยเริ่มออกจำหน่ายเมื่อเดือน ธันวาคม พ.ศ. 2540 ตามมาด้วย Version 1.2 เมื่อเดือนมีนาคม พ.ศ. 2541 และออกรุ่นต่างๆโดยสรุป คือ
      เดือน ธันวาคม พ.ศ. 2541 ออกรุ่น Dreamweaver 2.0
      เดือน ธันวาคม พ.ศ. 2542 ออกรุ่น Dreamweaver 3.0
      เดือน มิถุนายน พ.ศ. 2543 ออกรุ่น Dreamweaver UltraDev 1.0
      เดือน ธันวาคม พ.ศ. 2543 ออกรุ่น Dreamweaver 4.0 และรุ่น Dreamweaver UltraDev 4.0
      เดือน พฤษภาคม พ.ศ. 2545 ออกรุ่น Dreamweaver MX 6.0
      เดือน กันยายน พ.ศ. 2546 ออกรุ่น Dreamweaver MX 2004
      เดือน กันยายน พ.ศ. 2548 ออกรุ่น Dreamweaver 8
     ปัจจุบัน โปรแกรม Dreamweaver 8 เป็นลิขสิทธิ์ของบริษัท Adobe Systems Incorporated จัดอยู่ใน Studio 8 ซึ่งประกอบด้วยโปรแกรม Dreamweaver 8 , Flash Professional 8 , Fireworks 8 , Contribute 3 และ FlashPaper 2

      จุดเด่นของโปรแกรม Dreamweaver 8 ที่ได้รับการพัฒนาให้ดีจากรุ่นก่อน ดังนี้
       1. ทำงานง่ายขึ้น มีเครื่องมือช่วยการทำงานหลากหลายและใช้งานได้ง่ายขึ้น เช่น Zoom Tool บนแถบสถานะ เพื่อช่วยให้ดูรายละเอียดส่วนที่ต้องการและเครื่องมือ Hand Tool ช่วยเลื่อนหาส่วนต่างๆของเว็บเพจ
       2. เขียนถึงโค้ด HTML ได้ง่าย ขณะที่ทำงานอยู่กับข้อความหรือออบเจ็กต์ใดๆ เมื่อแสดงโค้ด HTML จะเลื่อนไปยังส่วนโค้ดนั้นให้ทันทีจึงสะดวกกับการแก้ไขโค้ด
       3. ใช้งาน CSS ได้สะดวก ปรับแต่ง CSS ได้หลากหลาย และแสดงคุณสมบัติของ CSS ไว้ด้วย
       4. ใช้งานร่วมกับ Flash ได้ง่าย นำเข้าโปรแกรม Flash Video หรือ ไฟล์ .flv เป็นไฟล์แบบ Straem Vedio ผู้ใช้สามารถอ่านและโหลดข้อมูลไปพร้อมกัน การใช้งานร่วมกับ Flash ทำได้ง่ายขึ้น สะดวกขึ้นกว่ารุ่นก่อนๆ

ความต้องการระบบของโปรแกรม

       ก่อนที่จะเริ่มใช้โปรแกรม Dreamweaver สำหรับผู้ที่จะติดตั้งโปรแกรมบนเครื่องคอมพิวเตอร์ไว้ใช้งานเอง ควรจะสำรวจความต้องการระบบที่สามารถใช้งานโปรแกรมได้ ดังนี้
       ระบบที่ต้องการสำหรับ Microsoft Windows
       1. หน่วยประมวลผลกลาง (CPU)               รุ่น Pentium III 800 MHz ขึ้นไป
       2. หน่วยความจำแรม (RAM)                       256 MB แนะนำควรใช้ 512 MB ขึ้นไป
       3. เนื้อที่ว่างของฮาร์ดดิสก์                            อย่างน้อย 500 MB ขึ้นไป
       4. จอภาพ                                                        ควรเป็นล้านสี ความละเอียด 1024 x 768 จุด
       5. ซีดีรอมไดรฟ์                                             มี
       6. ระบบปฏิบัติการ                                       Window 98 หรือสูงกว่า
       7. เว็บเบราว์เซอร์                                        IE 4.0 หรือสูงกว่า Firefox 2.0.0.1
       ระบบที่ต้องการสำหรับเครื่อง Macintosh
       1. เครื่องคอมพิวเตอร์                                   รุ่น Power Macintosh G3 600 MHz ขึ้นไป
       2. หน่วยความจำแรม (RAM)                       128 MB ขึ้นไป
       3. เนื้อที่ว่างของฮาร์ดดิสก์                            อย่างน้อย 500 MB ขึ้นไป
       4. จอภาพ                                                        ควรเป็นล้านสี ความละเอียด 1024 x 768 จุด
       5. ซีดีรอมไดรฟ์                                             มี
       6. ระบบปฏิบัติการ                                       OS x 10.3 หรือ 10.4
       7. เว็บเบราว์เซอร์                                        IE 4.0 หรือสูงกว่า Firefox 2.0.0.1
      เนื่องจากการสร้างเว็บเพจบางชนิดอาจจะใช้มัลติมีเดีย เช่น ภาพเคลื่อนไหว และไฟล์เสียง ซึ่งจะต้องใช้ลำโพง และการ์ดเสียงประกอบด้วย อย่างไรก็ตาม คอมพิวเตอร์รุ่นใหม่ๆ ที่จำหน่ายในปัจจุบันส่วนใหญ่สามารถใช้โปรแกรม Dreamweaver 8 ได้เนื่องจากมีคุณสมบัติค่อนข้างสูงอยู่แล้วและราคาก็ไม่แพงมากนัก

การติดตั้งโปรแกรม

     การติดตั้งโปรแกรม Dreamweaver 8 มีขั้นตอน ดังนี้
      1.
ใส่แผ่นซีดีรอม โปรแกรม Dreamweaver 8 เข้าไปในไดรฟ์ซีดีรอม
      2. โปรแกรมจะเริ่มทำงานโดยอัตโนมัติหรือถ้าเปิดเข้าไปที่ไดรฟ์ซีดีรอม ดับเบิลคลิกที่ไอคอน Setup โปรแกรม
      3. จะได้หน้าต่างข้อตกลงสิทธิการใช้งาน (License Agreement) คลิกเลือก I accept... แล้วคลิกปุ่ม Next
      
4. เลือกไดเรกทอรีที่ต้องการ เช่น C:\Program File ... ถ้าต้องการเปลี่ยนให้คลิกปุ่ม Change... เลือกไดรฟ์และโฟลเดอร์ที่ต้องการ แล้วคลิกปุ่ม Next
    
  5. เลือกชนิดของโปรแกรมที่จะใช้ร่วมกับ Dreamweaver (Default Editor) ถ้าเลือกทั้งหมดคลิกปุ่ม Select All แล้วคลิกปุ่ม Next
      
6. คลิกปุ่ม Install เพื่อติดตั้งโปรแกรม
      7. เริ่มติดตั้งโปรแกรมลงในเครื่องจนเสร็จสมบูรณ์
      8. คลิกปุ่ม Finish

การเปิดใช้งานโปรแกรม

     หลังจากติดตั้งโปรแกรมบนเครื่องคอมพิวเตอร์แล้วสามารถเรียกใช้งานโปรแกรม ดังนี้

เรียกผ่านปุ่ม Start มีวิธีทำ คือ
       1. คลิกที่ปุ่ม Start บนทาสก์บาร์
       2. เลือกคำสั่งย่อย Programs > Macromedia > Macromedia Dreamweaver 8

ข้อใดคือส่วนประกอบของหน้าจอโปรแกรม dreamweaver ที่ใช้สำหรับแสดงข้อมูลเพิ่มเติมเกี่ยวกับงานที่กำลังทำ

       เมื่อเปิดโปรแกรมแล้วจะเข้าสู่หน้าต่างที่เรียกว่า หน้าเริ่มต้น ( Start Page ) เพื่อให้ผู้ใช้เรียกใช้งานได้อย่างรวดเร็ว ซึ่งประกอบด้วยส่วนต่างๆ ดังรูป

ข้อใดคือส่วนประกอบของหน้าจอโปรแกรม dreamweaver ที่ใช้สำหรับแสดงข้อมูลเพิ่มเติมเกี่ยวกับงานที่กำลังทำ

       ปกติผู้เริ่มต้นสร้างเว็บเพจก็จะเลือกใช้ สร้างเว็บเพจใหม่ ( Create New ) ซึ่งมีรูปแบบให้เลือกหลายชนิดที่นิยมใช้ คือ
      HTML   ใช้สำหรับสร้างเว็บเพจธรรมดาทั่วไป ไม่มีฐานข้อมูลหรือสคริปต์ต่างๆ
       ASP   เหมาะสำหรับใช้งานร่วมกับฐานข้อมูล
       PHP   เหมาะสำหรับใช้งานฐานข้อมูลร่วมกับสคริปต์ PHP เช่น MySQL Oracle ฯลฯ
       JavaScript   ใช้สำหรับสร้างสคริปต์ฝั่งผู้รับข้อมูล ( Client ) ส่งมาพร้อมกับ HTML เพื่อให้ผู้ใช้เปิดชมได้
       นอกจากนี้ยังมีรูปแบบอื่นๆอีกหลายรูปแบบ แต่ที่นิยมและเหมาะสำหรับผู้เริ่มต้นสร้างเว็บเพจขอแนะนำให้ใช้ HTML

ส่วนประกอบบนหน้าจอแรกของโปรแกรม

       เมื่อคลิกที่ตัวเลือก HTML แล้วจะได้หน้าต่างแรกของโปรแกรม Dreamweaver 8 ซึ่งมีส่วนประกอบต่างๆ ดังรูป

ข้อใดคือส่วนประกอบของหน้าจอโปรแกรม dreamweaver ที่ใช้สำหรับแสดงข้อมูลเพิ่มเติมเกี่ยวกับงานที่กำลังทำ

เมนูคำสั่ง

       เมนูคำสั่งของ Dreamweaver ประกอบด้วยเมนูหลัก 10 เมนูและเมนูย่อยอีกจำนวนมาก ดังนี้
       1. เมนู File รวบรวมคำสั่งที่ใช้จัดการกับไฟล์หรือแฟ้มข้อมูล
       2. เมนู Edit รวบรวมคำสั่งที่ใช้แก้ไขเอกสาร
       3. เมนู View รวบรวมคำสั่งที่ใช้แสดงมุมมองเอกสารเว็บ

        

       4. เมนู Insert รวบรวมคำสั่งที่ใช้แทรกส่วนประกอบต่างๆบนเว็บ เช่น ภาพ เลเยอร์
       5 . เมนู Modify ใช้สำหรับปรับแต่งเว็บเพจ เช่น ตาราง เฟรมเซต
       6. เมนู Text ใช้สำหรับจัดการข้อความ ตัวอักษร
       7. เมนู Commands จัดการรูปแบบคำสั่ง
       8. เมนู Site จัดการกับเว็บไซต์ หรือ ไซต์งาน
       9. เมนู Windows จัดการกับหน้าต่างที่ทำงานอยู่
       10. เมนู Help ขอความช่วยเหลือจากโปรแกรม

              

        

              

กลุ่มเครื่องมือ

       เป็นกลุ่มเครื่องมือที่ใช้สำหรับสร้างวัตถุต่างๆบนเว็บเพจ คลิกที่ปุ่ม Common จะพบกลุ่มเครื่องมือทั้งหมด ซึ่งมีอยู่ 8 กลุ่ม

ข้อใดคือส่วนประกอบของหน้าจอโปรแกรม dreamweaver ที่ใช้สำหรับแสดงข้อมูลเพิ่มเติมเกี่ยวกับงานที่กำลังทำ

       1. Common เป็นกลุ่มเครื่องมือที่ใช้งานบ่อยๆ เช่น แทรกตาราง แทรกภาพ

ข้อใดคือส่วนประกอบของหน้าจอโปรแกรม dreamweaver ที่ใช้สำหรับแสดงข้อมูลเพิ่มเติมเกี่ยวกับงานที่กำลังทำ

       2. Layout เป็นกลุ่มเครื่องมือที่ใช้งานด้านการวางองค์ประกอบของหน้าเว็บเพจ

ข้อใดคือส่วนประกอบของหน้าจอโปรแกรม dreamweaver ที่ใช้สำหรับแสดงข้อมูลเพิ่มเติมเกี่ยวกับงานที่กำลังทำ

       3. Forms เป็นกลุ่มเครื่องมือที่ใช้จัดการกับฟอร์มที่สร้างขึ้นเพื่อรับข้อมูล

ข้อใดคือส่วนประกอบของหน้าจอโปรแกรม dreamweaver ที่ใช้สำหรับแสดงข้อมูลเพิ่มเติมเกี่ยวกับงานที่กำลังทำ

       4. Text เป็นกลุ่มเครื่องมือที่ใช้สำหรับจัดการกับข้อความ

ข้อใดคือส่วนประกอบของหน้าจอโปรแกรม dreamweaver ที่ใช้สำหรับแสดงข้อมูลเพิ่มเติมเกี่ยวกับงานที่กำลังทำ

       5. HTML เป็นกลุ่มเครื่องมือที่ใช้จัดการกับภาษา HTML บนเว็บเพจ

ข้อใดคือส่วนประกอบของหน้าจอโปรแกรม dreamweaver ที่ใช้สำหรับแสดงข้อมูลเพิ่มเติมเกี่ยวกับงานที่กำลังทำ

       6. Application เป็นกลุ่มเครื่องมือที่ใช้สำหรับจัดการกับแอพพลิเคชันฐานข้อมูล

       7. Flash elements เป็นเครื่องมือที่ใช้สำหรับจัดการกับไฟล์งานที่สร้างด้วย Flash บนเว็บ

       8. Favorites เป็นกลุ่มเครื่องมือที่ให้ผู้ใช้โปรแกรมนำเอาเครื่องมือที่ใช้งานบ่อยๆนอกเหนือจากที่กล่าวมาให้มาสร้างไว้ที่นี่

พาเนล Property Inspector

      พาเนลคุณสมบัติของสิ่งที่เลือกหรือ Property Inspector เป็นพาเนลที่ใช้สำหรับแสดงคุณสมบัติของภาพ ข้อความ หรือวัตถุใดๆบนเว็บเพจ และผู้ใช้สามารถปรับปรุงแก้คุณสมบัติได้จากพาเนลนี้ ดังตัวอย่าง

       จากตัวอย่าง เมื่อคลิกที่ภาพ คุณสมบัติของภาพจะแสดงไว้ที่ Property Inspector เช่น W (กว้าง) 89 H (สูง) 119 และ Image 27k (ความละเอียดของภาพ) เป็นต้น ถ้าคลิกที่ข้อความก็จะแสดงคุณสมบัติแตกต่างกันออกไป

กลุ่มพาเนล

       พาเนลของ Dreamweaver เป็นส่วนที่ใช้ในการควบคุมหรือการตั้งค่าการใช้งานส่วนต่างๆของเว็บเพจ โดยมีหลายพาเนลแต่ละพาเนลมีความสามารถในการจัดเอกสารต่างกัน พาเพลมีดังนี้
       1. พาเนล CSS ใช้สำหรับกำหนดรูปแบบตัวอักษรและลูกเล่นต่างๆ
       2. พาเนล Application ใช้ในการเขียนเว็บไซต์ที่มีการเชื่อมโยงกับฐานข้อมูล
       3. พาเนล Tag ใช้รวบรวมการใช้งาน Tag ของ CSS ทั้งหมด
       4. พาเนล File ใช้แสดงแผนผังเว็บไซต์ว่าประกอบด้วยไฟล์และโฟลเดอร์อะไรบ้าง

1. การซ่อน - แสดงพาเนล
       การเปิด - ปิดพาเนลทำได้โดยใช้เมนู Windows หรือ คลิกที่ปุ่ม

ข้อใดคือส่วนประกอบของหน้าจอโปรแกรม dreamweaver ที่ใช้สำหรับแสดงข้อมูลเพิ่มเติมเกี่ยวกับงานที่กำลังทำ
หน้าชื่อพาเนลนั้นๆ

ข้อใดคือส่วนประกอบของหน้าจอโปรแกรม dreamweaver ที่ใช้สำหรับแสดงข้อมูลเพิ่มเติมเกี่ยวกับงานที่กำลังทำ
                      
ข้อใดคือส่วนประกอบของหน้าจอโปรแกรม dreamweaver ที่ใช้สำหรับแสดงข้อมูลเพิ่มเติมเกี่ยวกับงานที่กำลังทำ

2. การปิดพาเนล
        ทำได้โดยการคลิกปุ่ม

ข้อใดคือส่วนประกอบของหน้าจอโปรแกรม dreamweaver ที่ใช้สำหรับแสดงข้อมูลเพิ่มเติมเกี่ยวกับงานที่กำลังทำ
ด้านขวามือของพาเนลนั้นๆ แล้วเลือกคำสั่งย่อย Close Panel ... เช่น Close CSS Style การปิดพาเนลทั้งหมดคลิกคำสั่ง Close panel group

ข้อใดคือส่วนประกอบของหน้าจอโปรแกรม dreamweaver ที่ใช้สำหรับแสดงข้อมูลเพิ่มเติมเกี่ยวกับงานที่กำลังทำ

การปรับมุมมองการทำงาน

      โปรแกรม Dreamweaver 8 มีมุมมองการทำงาน 3 แบบ คือ
       1. Show Code View (

ข้อใดคือส่วนประกอบของหน้าจอโปรแกรม dreamweaver ที่ใช้สำหรับแสดงข้อมูลเพิ่มเติมเกี่ยวกับงานที่กำลังทำ
) แสดงมุมมองโค้ด HTML ทั้งเอกสาร เหมาะสำหรับเขียนโค้ดเพิ่มเติมในตำแหน่งที่ต้องการ

ข้อใดคือส่วนประกอบของหน้าจอโปรแกรม dreamweaver ที่ใช้สำหรับแสดงข้อมูลเพิ่มเติมเกี่ยวกับงานที่กำลังทำ

       2. Show Code and Design View (

ข้อใดคือส่วนประกอบของหน้าจอโปรแกรม dreamweaver ที่ใช้สำหรับแสดงข้อมูลเพิ่มเติมเกี่ยวกับงานที่กำลังทำ
) แสดงทั้งโค้ด HTML และงานบนหน้าเอกสาร แบ่งเป็นสองส่วนในหน้าเดียวกัน

ข้อใดคือส่วนประกอบของหน้าจอโปรแกรม dreamweaver ที่ใช้สำหรับแสดงข้อมูลเพิ่มเติมเกี่ยวกับงานที่กำลังทำ

       3. Show Design View (

ข้อใดคือส่วนประกอบของหน้าจอโปรแกรม dreamweaver ที่ใช้สำหรับแสดงข้อมูลเพิ่มเติมเกี่ยวกับงานที่กำลังทำ
) แสดงเฉพาะหน้าเอกสารไม่มีโค้ด HTML

ข้อใดคือส่วนประกอบของหน้าจอโปรแกรม dreamweaver ที่ใช้สำหรับแสดงข้อมูลเพิ่มเติมเกี่ยวกับงานที่กำลังทำ

การเริ่มต้นสร้างเว็บไซต์และเว็บเพจ

การกำหนดโครงร่างเว็บไซต์

       การสร้างเว็บไซต์ควรนำแผนงานและเค้าโครงของเว็บไซต์ที่ได้ออกแบบไว้มาเป็นแนวทางในการสร้าง โดยปกติถ้าสังเกตเว็บไซต์ทั่วไปสิ่งที่ควรมี คือ หน้าแรก (Home)  หน้าข้อมูลทั่วไปของบริษัทหรือผู้จัดทำ (About) และหน้าการติดต่อกับบริษัท (Contact) นอกนั้นก็อาจจะแตกต่างกันไปแล้วแต่ประเภทของกิจการ เช่น ถ้าเป็นการขายสินค้าก็จะมีหมวดสินค้า (Product)  สินค้าใหม่ (New Product) เป็นต้น
                ผู้ออกแบบเว็บไซต์อาจจะเขียนแผนผังเว็บไซต์ไว้ก่อน ดังตัวอย่าง เว็บไซต์ขายเฟอร์นิเจอร์ไม้ มีแผนผัง ดังนี้

การสร้างไซต์ (Site) งาน

       

หลังจากได้กำหนดรายละเอียดบนกระดาษแล้ว ขั้นต่อไปก็จะต้องจัดเตรียม ไซต์ (Site) บนคอมพิวเตอร์ด้วย Dreamweaver ซึ่งมีวิธีการดังนี้

หมายเหตุ : การเตรียมไซต์ (Site) ในที่นี้หมายถึง Local Site ซึ่งเป็นที่เก็บไฟล์ในฮาร์ดดิสก์ของเรา เพื่อรอส่งไปยังรีโมทไซต์ (เครื่องเซิร์ฟเวอร์)

       1. คลิกที่เมนู Site แล้วเลือกคำสั่ง New Site...


     

ข้อใดคือส่วนประกอบของหน้าจอโปรแกรม dreamweaver ที่ใช้สำหรับแสดงข้อมูลเพิ่มเติมเกี่ยวกับงานที่กำลังทำ
      
          

       2. จะเข้าสู่หน้าต่าง Site Definition เพื่อกำหนดชื่อให้กับโฟลเดอร์

      3. พิมพ์ชื่อใหม่ที่ต้องการ เช่น ThaiWood แล้วคลิกปุ่ม Next

       4. เลือก  ไม่ต้องติดต่อไปยังเซิร์ฟเวอร์ในขณะนี้ ( No,I do ...) แล้วคลิกปุ่ม Next

ข้อใดคือส่วนประกอบของหน้าจอโปรแกรม dreamweaver ที่ใช้สำหรับแสดงข้อมูลเพิ่มเติมเกี่ยวกับงานที่กำลังทำ

       5. กำหนดวิธีแก้ไขงานและโฟลเดอร์ที่เก็บเว็บไซต์ แล้วคลิกปุ่ม Next

ข้อใดคือส่วนประกอบของหน้าจอโปรแกรม dreamweaver ที่ใช้สำหรับแสดงข้อมูลเพิ่มเติมเกี่ยวกับงานที่กำลังทำ

       6. เลือกรูปแบบการเชื่อมต่อกับเว็บเซิร์ฟเวอร์เป็น None แล้วคลิกปุ่ม Next

ข้อใดคือส่วนประกอบของหน้าจอโปรแกรม dreamweaver ที่ใช้สำหรับแสดงข้อมูลเพิ่มเติมเกี่ยวกับงานที่กำลังทำ

       7. จะได้รายละเอียดที่เราตั้งค่าไว้ทั้งหมด คลิกปุ่ม Done โฟลเดอร์ที่สร้างจะปรากฏอยู่ที่พาเนล File

ข้อใดคือส่วนประกอบของหน้าจอโปรแกรม dreamweaver ที่ใช้สำหรับแสดงข้อมูลเพิ่มเติมเกี่ยวกับงานที่กำลังทำ

ข้อใดคือส่วนประกอบของหน้าจอโปรแกรม dreamweaver ที่ใช้สำหรับแสดงข้อมูลเพิ่มเติมเกี่ยวกับงานที่กำลังทำ

การสร้างไฟล์และโฟลเดอร์ใหม

       หลังจากได้สร้างไซต์งานไว้แล้ว ขั้นตอนต่อไปคือการสร้างโฟลเดอร์ย่อยและไฟล์งานตามที่ได้วางแผนไว้ มีวิธีการสร้าง ดังนี้
       1. คลิกขวาที่ไซต์ในพาเนล File จะได้เมนูลัด
       2. เลือกคำสั่ง New Folder
       3. จะปรากฏโฟลเดอร์ใหม่ชื่อ Untitled ให้พิมพ์เปลี่ยนชื่อโฟลเดอร์ใหม่ เช่น Images
       4. สร้างโฟลเดอร์ต่างๆตามที่ต้องการ ส่วนการสร้างไฟล์งานให้เลือกคำสั่ง New File จะได้ไฟล์งานชื่อ Untitled ให้เปลี่ยนชื่อใหม่ เช่น Index.html

หมายเหตุ : การเพิ่มโฟลเดอร์และไฟล์งาน ควรระวัง ถ้าคลิกที่โฟลเดอร์ใด ไฟล์งานจะไปอยู่ในโฟลเดอร์นั้น ไฟล์ Index.html จะต้องอยู่ที่ไซต์หลัก ไม่ควรอยู่ในโฟลเดอร์ย่อยอื่นๆ

       5. การแก้ไขไฟล์และโฟลเดอร์ให้คลิกขวาที่ไฟล์หรือโฟลเดอร์ที่ต้องการ แล้วเลือกคำสั่ง Edit จะมีคำสั่งย่อยให้เลือก เช่น Copy Delete ฯลฯ
       6. เมื่อสร้างโฟลเดอร์และไฟล์ต่างๆในไซต์งานของเราครบแล้ว ถ้าเปิดดูโฟลเดอร์จะพบรายการที่ได้สร้างไว้

การสร้างหน้าเว็บเพจใหม

       เมื่อเปิดโปรแกรมแล้วจะเข้าสู่หน้าสำหรับสร้างเว็บเพจมีชื่อว่า Untitled – 1 โดยอัตโนมัติ เราสามารถสร้างเว็บเพจได้ทันที อย่างไรก็ตาม หากต้องการสร้างหน้าเว็บเพจใหม่ก็ทำได้ดังนี้
       1. เลือกคำสั่ง File > New จะได้หน้าต่าง New Document

ข้อใดคือส่วนประกอบของหน้าจอโปรแกรม dreamweaver ที่ใช้สำหรับแสดงข้อมูลเพิ่มเติมเกี่ยวกับงานที่กำลังทำ

      

     2. คลิกเลือกแท็บ General แล้วเลือก Category เป็น Basic Page
       3. คลิกปุ่ม Create
       4. ในตัวเลือก Category จะมีลักษณะของเว็บเพจให้เลือกใช้งาน ดังนี้ 
       5. การเปิดใช้เว็บเพจที่ได้สร้างไว้แล้ว ให้เลือกคำสั่ง File > Open แล้วเลือกไฟล์ที่ต้องการ

การใส่หัวเรื่องหรือแถบชื่อเรื่อง

       เป็นส่วนที่ปรากฏอยู่บนแถบชื่อของเว็บเพจหน้านั้นๆ เพื่อบอกให้ผู้อ่านทราบว่ากำลังเปิดดูเว็บเพจหน้าอะไร การใส่หัวเรื่องทำได้ดังนี้
       1. คลิกที่ช่อง Title : บน Toolbar แล้วพิมพ์ชื่อเรื่องที่ต้องการ


      

       2. หรือคลิกเลือกปุ่ม Page Properties จะได้หน้าต่าง Page Properties แล้วคลิกที่ตัวเลือก Title/Encoding จะได้ตัวเลือกดังรูป


     

       3. พิมพ์ข้อความแถบชื่อเรื่องในช่อง Title : แล้วคลิก OK
       4. จะได้แถบชื่อเรื่องตามต้องการ

การบันทึกเว็บเพจ

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

ข้อใดคือส่วนประกอบของหน้าจอโปรแกรม dreamweaver ที่ใช้สำหรับแสดงข้อมูลเพิ่มเติมเกี่ยวกับงานที่กำลังทำ


       3. คลิกปุ่ม Save
       4. คำสั่ง Save All หมายถึง บันทึกไฟล์ทั้งหมดที่เปิดใช้งานหรือแก้ไข
       5. คำสั่ง Save to Remote Server หมายถึง บันทึกเว็บเพจและอัพโหลดไปสู่เซิร์ฟเวอร์
       6. คำสั่ง Save as Templet หมายถึง บันทึกเป็นแม่แบบสำหรับใช้งาน
       ไฟล์ที่บันทึกไว้จะเป็นชนิด .html สามารถเปิดใช้งานกับเบราว์เซอร์ทั่วไปได้

การทดสอบเว็บเพจกับเว็บเบราว์เซอร์

      เว็บเพจที่สร้างและบันทึกไว้แล้ว สามารถทดสอบเพื่อดูผลงานกับเว็บเบราว์เซอร์แบบออฟไลน์ได้ โดยปกติ Dreamweaver 8 จะเลือกเว็บเบราว์เซอร์ให้เองโดยอัตโนมัติ ส่วนใหญ่ก็จะเป็น Internet Explorer แต่ก็มีบางคนที่ใช้ Firefox ทั้งนี้ การแสดงผลอาจจะไม่ตรงกันเสียทีเดียว
การทดสอบกับเว็บเบราว์เซอร์ มีวิธีทำ ดังนี้
      1. กดแป้น < F12 > บนคีย์บอร์ด
      2. หรือดับเบิลคลิกที่ไฟล์ .html นั้นๆ
      3. หรือเลือกคำสั่ง File > Preview in Browser > firefox.exe


      

       4. จะได้เว็บเพจ


      

      ระหว่างที่สร้างเว็บเพจควรจะบันทึกไฟล์บ่อยๆจะได้ตรวจดูความเรียบร้อยและปรับแก้ไขให้เหมาะสมก่อนที่จะนำเสนอบนอินเทอร์เน็ต

การออกจากโปรแกรม

      การออกจากโปรแกรมทำได้ 4 วิธี ดังนี้
      วิธีที่ 1 คลิกเมาส์ที่ปุ่ม Close ที่ Control Box

      วิธีที่ 2 คลิกที่ปุ่ม บน Titlebar แล้วคลิกคำสั่ง Close

 

ข้อใดคือส่วนประกอบของหน้าจอโปรแกรม dreamweaver ที่ใช้สำหรับแสดงข้อมูลเพิ่มเติมเกี่ยวกับงานที่กำลังทำ
 

   วิธีที่ 3 คลิกที่คำสั่ง File > Exit

ข้อใดคือส่วนประกอบของหน้าจอโปรแกรม dreamweaver ที่ใช้สำหรับแสดงข้อมูลเพิ่มเติมเกี่ยวกับงานที่กำลังทำ

      วิธีที่ 4 ใช้แป้นพิมพ์ < Ctrl > + < Q >