ก่อนเรียน
หลังเรียน

ใบงานที่ 1  2

1. โปรแกรม Dreamweaver 8
                Macromedia Dreamweaver 8 เป็นโปรแกรมที่ใช้สำหรับสร้างเว็บเพจ และบริหารเว็บไซต์ที่ได้รับความนิยมสูงสุด ในกลุ่มโปรแกรมประเภทเดียวกัน ในปัจจุบัน
เนื่องจากคุณสมบัติของโปรแกรมที่มีความสะดวกต่อการใช้งาน มีฟังก์ชันที่ทำให้ผู้ใช้สามารถจัดวางข้อความ รูปภาพ ตาราง ฟอร์ม วิดีโอ รวมถึงองค์ประกอบอื่น ๆ
ภายในเว็บเพจได้อย่างสวยงามตามที่ผู้ใช้ต้องการ โดยไม่ต้องใช้ภาษาสคริปต์ที่ยุ่งยากซับซ้อนเหมือนก่อน ด้วยความสามารถและคุณสมบัติของโปรแกรม จึงเหมาะสำหรับนักเรียน

การติดตั้งโปรแกรม
                การติดตั้งโปรแกรม  Dreamweaver 8  มีขั้นตอนดังนี้

• ใส่แผ่นซีดีรอม  โปรแกรม  Dreamweaver 8  เข้าไปในไดร์ฟซีดีรอม
• โปรแกรมจะเริ่มทำงานโดยอัตโนมัติ  หรือถ้าเปิดเข้าไปที่ไดรฟ์ซีดีรอม  ดับเบิลคลิกที่ไอคอน Setup โปรแกรม

•  จะได้หน้าต่างข้อตกลงสิทธิการใช้งาน (License Agreement)  คลิกเลือก  I accept …  แล้วคลิกปุ่ม  Next

• เลือกไดเรกทอรี่ที่ต้องการ  เช่น  C:\Program File … ถ้าต้องการเปลี่ยนให้คลิกปุ่ม  Change …  เลือกไดรฟ์และโฟลเดอร์ที่ต้องการแล้วคลิกปุ่ม  Next

• เลือกชนิดของโปรแกรมที่จะใช้ร่วมกับ  Dreamweaver (Default Editor)  ถ้าเลือกทั้งหมดแล้วคลิกปุ่ม  Select All  แล้วคลิกปุ่ม  Next

• คลิกปุ่ม  Install  เพื่อติดตั้งโปรแกรม

• เริ่มติดตั้งโปรแกรมลงในเครื่องจนเสร็จสมบูรณ์

• คลิกปุ่ม  Finish

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

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

เรียกผ่านไอคอนบนเดสก์ทอป

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

2.  ส่วนต่าง ๆ ของโปรแกรม Dreamweaver 8

• แถบชื่อเรื่อง (Title Bar) แสดงชื่อแฟ้มข้อมูลที่กำลังใช้งานอยู่
• แถบคำสั่ง (Menu Bar) เป็นส่วนที่เก็บคำสั่งต่าง ๆ ที่ใช้งานในโปรแกรม Dreamweaver 8
• แถบเครื่องมือ (Document Tool Bar) เป็นส่วนที่ใช้ในการจัดการกับเว็บเพจ ณ ขณะนั้นเช่นการเปลี่ยนมุมมองในการดูหน้าเว็บเพจ
• แถบแทรก (Insert Bar) เป็นกลุ่มเครื่องมือที่ใช้สร้างองค์ประกอบต่าง ๆ ในเว็บเพจซึ่งประกอบด้วยชุดเครื่องมือ 8 ชุดด้วยกัน
• พื้นที่ออกแบบ (Document Window) เป็นส่วนที่ใช้สำหรับใส่เนื้อหาและจัดองค์ประกอบของเว็บเพจ โดยประกอบด้วยมุมมองการทำงาน 3 รูปแบบด้วยกันคือ
  Design, Code และ Code and Design
• แถบสถานะ (Status Bar) เป็นส่วนที่แสดงสถานะของการใช้งานโปรแกรม ณ ขณะนั้น หน้าต่าง Properties เป็นส่วนของคำสั่งที่ใช้ในการกำหนดคุณสมบัติของ
  องค์ประกอบต่าง ๆ ที่เราต้องการเปลี่ยนแปลงหรือตกแต่ง
• กลุ่มพาเนล (Panel Group) เป็นกลุ่มของแผงควบคุมที่ใช้แทนคำสั่งและติดต่อกับฐานข้อมูล

3.  การเริ่มต้นการสร้างเว็บไซต์และเว็บเพจ
การกำหนดโครงสร้างเว็บไซต์

การเตรียมพื้นที่หรือโฟลเดอร์สำหรับเก็บเว็บไซต์โดยจัดการสร้างโฟลเดอร์เพื่อเก็บข้อมูลหรือเก็บไฟล์ต่างๆ ให้เป็นหมวดหมู่เพื่อง่ายต่อการจัดทำเว็บไซต์ และง่ายต่อการบริหารงานเว็บไซต์ ดังนั้นการจัดการวางแผนจัดเก็บข้อมูลลงในโฟลเดอร์จึงเป็นสิ่งสำคัญ ลักษณะของการจัดเก็บ เช่นโฟล์เดอร์หลักใช้เก็บไฟล์ประเภท .html

• โฟล์เดอร์รูปภาพ
• โฟล์เดอร์เสียง
• โฟล์เดอร์ภาพเคลื่อนไหว

อีกทั้งยังสามารถสร้างโฟลเดอร์ย่อย (Sub folder)
ลงในโฟลเดอร์ต่าง ๆ ได้อีกด้วย

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

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

• จะเข้าสู่หน้าต่าง  Site Definition เพื่อกำหนดชื่อไซต์พิมพ์ชื่อไซต์ที่ต้องการ เช่น  Com-learning2u.com  แล้วคลิกปุ่ม  Next

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

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

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

• จะได้รายละเอียดที่เราตั้งค่าไว้ทั้งหมด  คลิกปุ่ม  Done

• โฟล์เดอร์ที่สร้างจะปรากฏอยู่ที่พาเนลไฟล์

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

                หลังจากได้สร้างไซต์งานไว้แล้ว  ขั้นตอนต่อไปคือการสร้างโฟลเดอร์ย่อย  และไฟล์งานตามที่ได้วางแผนไว้  ซึ่งมีวิธีการสร้าง  ดังนี้

• คลิกขวาที่ไซต์  ในพาเนลไฟล์  จะได้เมนูลัด  และเลือกคำสั่ง  New Folder

• จะปรากฏโฟลเดอร์ใหม่ชื่อ Untitled  ให้พิมพ์เปลี่ยนชื่อโฟลเดอร์ใหม่  เช่น  Images

• สร้างโฟลเดอร์ต่าง ๆ  ตามที่ต้องการ  ส่วนการสร้างไฟล์งานให้เลือกคำสั่ง  New File  จะได้ไฟล์งานชื่อ  Untitled  ให้เปลี่ยนชื่อใหม่  เช่น  index.html

• การแก้ไขไฟล์และโฟลเดอร์ให้คลิกขวาที่ไฟล์หรือโฟลเดอร์ที่ต้องการ  แล้วเลือกคำสั่ง  Edit  จะมีคำสั่งย่อยให้เลือก  เช่น  Copy Delete  ฯลฯ

• เมื่อสร้างโฟลเดอร์และไฟล์ต่าง ๆ ในไซต์งานของเราครบแล้ว  ถ้าเปิดดูโฟลเดอร์จะพบรายการที่ได้สร้างไว้ 

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

• เลือกคำสั่ง  File >> New  จะได้หน้าต่าง  New Document

• คลิกเลือกแท็บ  General  แล้วเลือก  Category  เป็น  Basic Page
• คลิกปุ่ม  Create

• ในตัวเลือก  Category  จะมีลักษณะของเว็บเพจให้เลือกใช้งาน  ดังนี้

• การเปิดใช้เว็บเพจที่ได้สร้างไว้แล้ว  ให้เลือกคำสั่ง  File >> Open   แล้วเลือกไฟล์ที่ต้องการ

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

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

การใส่หัวเรื่องทำได้  ดังนี้

• คลิกที่ช่อง  Title  บน  Toolbar  แล้วพิมพ์ชื่อเรื่องที่ต้องการ

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

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

4.  การบันทึกเว็บเพจ
                การบันทึกเว็บเพจทั้งเว็บเพจที่สร้างใหม่และเว็บเพจที่เปิดขึ้นมาใช้งาน  มีวิธีการดังนี้
การบันทึกไฟล์ใหม่

• คลิกคำสั่ง  File >> Save As
• จะได้หน้าต่าง  Save As  เลือกโฟลเดอร์และพิมพ์ชื่อไฟล์

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

5. การทดสอบกับเว็บเบราเซอร์

เว็บเพจที่สร้างและบันทึกไว้แล้ว  สามารถทดสอบเพื่อดูผลงานกับเว็บเบราเซอร์แบบออฟไลน์ (Offline)  ได้  โดยปกติ  Dreamweaver 8  จะเลือกเว็บเบราเซอร์ให้เองโดยอัตโนมัติ  ส่วนใหญ่ก็จะแป้น  Internet  Explorer    แต่มีบางคนที่ใช้  Firefox    ทั้งนี้  การแสดงผลอาจจะไม่ตรงกันเสียทีเดียว
                การทดสอบกับเว็บเบราเซอร์  ทำได้ดังนี้

• กดแป้น  < F12 >  บนคีย์บอร์ด
• หรือดับเบิลคลิกที่ไฟล์  .html  นั้น ๆ
• หรือ เลือกคำสั่ง  File >> Preview in Browser >> iexplorer.exe (หรือ  Firefox.exe)
• จะได้เว็บเพจดังตัวอย่าง

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

การออกจากโปรแกรมทำได้  4  วิธี  ดังนี้
วิธีที่ 1  คลิกเมาส์ที่ปุ่ม  Close  ที่  Control Box
วิธีที่ 2  คลิกที่ปุ่ม  บน Title Bar  แล้วเลือกคำสั่ง  Close
วิธีที่ 3  คลิกที่คำสั่ง  File  >> Exit
วิธีที่ 4  ใช้แป้นพิมพ์  < Ctrl > + < Q >