การเรียกใช้งานโปรแกรม macromedia dreamweaver สามารถปฏิบัติได้ตามข้อใด

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

รู้จักกับโปรแกรม Macromedia Dreamweaver

     โปรแกรม Macromedia Dreamweaver โปรแกรมสำหรับการสร้างเว็บเพจ บริหารจัดการเว็บไซต์ รวมไปถึงการพัฒนาเว็บแอปพลิเคชัน เนื่องจากตัว Dreamweaver มีความสามารถที่โดดเด่น ดังนี้ สามารถเขียนโปรแกรมสำหรับเว็บได้ทุกรูปแบบ เช่น ASP, ASP.Net, ColdFusion,JSP, PHP, XML, XHTML เมนูคำสั่งและเครื่องมือต่างๆ เรียกใช้งานได้ง่ายและสะดวกมีการปรับปรุงกลไกภายในให้มีประสิทธิภาพสูงขึ้น สามารถสร้างแอปพลิเคชันง่ายๆ โดยไม่จำเป็นต้องเขียนโปรแกรม สร้างเว็บเพจภาษาไทยได้ทันทีโดยไม่ต้องติดต้องโปรแกรมเสริมเพราะ Dreamweaver รองรับตัวอักษรแบบ Unicode

ก่อนการสร้างเวปไซต์ควรมีการกำหนดโครงสร้างสำหรับการทำงานก่อน

      ขั้นแรกควรกำหนดให้ข้อมูลต่างๆ ที่เกี่ยวข้องอยู่ใน โฟลเดอร์ เดียวกัน เพื่อง่ายต่อค้นหาและจัดเก็บ ตัวอย่าง เช่นทำเว็บเพจของหน่วยงานก่อนอื่นเราควรสร้าง โฟลเดอร์ ชื่อของหน่วยงานก่อนอาจเป็นภาษาอังกฤษหรือภาษาไทยก็ได้ แล้วใน โฟลเดอร์ หน่วยงานค่อยสร้าง โฟลเดอร์ ย่อยอีกที อาจประกอบด้วยหลาย โฟลเดอร์ ย่อย เพื่อใช้สำหรับแยกเก็บไฟล์ต่าง ๆ เป็นหมวดหมู่ เช่น ไฟล์รูปภาพ ไฟล์ HTML และ ไฟล์ Multimedia ต่างๆ   แสดงการสร้าง โฟลเดอร์ และ โฟลเดอร์ ย่อยเพื่อใช้เก็บข้อมูลให้เป็นหมวดหมู่

จากตัวอย่าง จะทำการสร้าง โฟลเดอร์ ต่าง ๆ โดยการสร้างโฟลเดอร์หลักสำหรับการทำงานในไดร์ฟ C และทำการสร้างโฟลเดอร์ย่อยต่างๆ

การเข้าสู่โปรแกรม Macromedia Dreamweaver

มี ขั้นตอน คือ คลิกเลือก Start -> Program -> Macromedia -> Macromedia Dreamweaver เมื่อเลือกเข้าสู่โปรแกรมแล้วจะเกิดหน้าต่างสำหรับเลือกรูปแบบเวปไซต์ที่ต้องการสร้างเกิดขึ้น ให้เลือก

Create New >HTML

* ซึ่งนอกจากภาษา HTML ซึ่งเป็นภาษาพื้นฐานในการสร้างเวปไซต์แล้ว โปรแกรมนี้ยังสามารถใช้เขียนภาษาอื่นๆที่เป็นรูปแบบไดนามิกได้อีก เช่น ASP.NET, PHP

รู้จักกับเครื่องมือของโปรแกรม

• แถบคำสั่ง (Menu Bar) เป็นแถบที่ใช้เก็บคำสั่งทั้งหมดของโปรแกรม
• แถบคำเครื่องมือ (Toolbar) รวบรวมปุ่มคำสั่งที่ใช้งานบ่อย
• แถบวัตถุ (Object Palette) เป็นกลุ่มเครื่องมือต่างๆ ที่ใช้ในการควบคุมวัตถุ บนชิ้นงาน เอกสารเว็บ เช่น เส้นกราฟิก (Horizontal Rule), ตาราง, รูปภาพ, เลเยอร์ (Layer)
• แถบแสดงสถานะ (Status Bar) คอยแสดงสถานะการทำงานต่างๆ ของเรา
• แถบควบคุมการทำงาน (Properties Palette) เป็นรายการที่ปรับเปลี่ยนได้ ตามลักษณะการเลือกข้อมูล เช่น หากมีการเลือกที่จะพิมพ์ หรือแก้ไขเนื้อหา รายการก็จะเป็น ส่วนทำงานที่เกี่ยวกับอักษร, การจัดพารากราฟ ถ้าเลือกที่รูปภาพ รายการในแถบนี้ ก็จะเป็นคำสั่งต่างๆ ที่เกี่ยวกับ การควบคุมเรื่องรูปภาพ
• ส่วนของ Panel Group เป็นกลุ่มของแถบเครื่องมือที่สามารถเรียกใช้งานได้อย่างรวดเร็ว เพื่อให้ง่ายในการสร้าง Application บนอินเทอร์เน็ต เช่น การแทรก Code ของ JavaScript และ VBScript ลงในเว็บเพจได้อย่างง่ายๆ โดยสามารถเรียกใช้งานได้จาก Panel Group

การกำหนดให้โฟลเดอร์ที่เก็บเวปไซต์ของนั้น ทำงานในรูปแบบเวปไซต์ ควรเลือกให้โปรแกรมชี้ไปยังโฟลเดอร์โดยตรง จะมีผลทำให้มีความสะดวกในการเลือกใช้งานไฟล์ต่างๆ สามารถทำการกำหนดโฟลเดอร์ ได้โดยการเลือกที่เมนู Site > New Site จากนั้นทำการระบุโฟลเดอร์ปลายทาง แล้วกด Save

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)  เพื่อให้ผู้ใช้เรียกใช้งานได้อย่างรวดเร็ว  ซึ่งประกอบด้วยส่วนต่าง ๆ  ดังรูป






วิธีที่ 1 คลิกที่ปุ่ม Start -> Programs -> Macromedia -> Macromedia Dreamweaver 8



วิธีที่ 2



วิธีที่ 3



โปรแกรมถูกเปิดขึ้นมาแล้ว

จะได้หน้าจอโปรแกรมดังภาพ




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

ส่วนประกอบของโปรแกรม Dream 8

หน้าต่างเปิดงาน ส่วนที่ 1) เปิดงานที่เรากำลังทำค้างอยู่โปรแกรมจะแสดงงานที่เราเปิดใช้บ่อยๆ ไว้ด้านบน ส่วนที่ 2) เลือกประเภทงานที่ต้องการสร้างใหม่ ได้แก่ HTML , Coldfusion, PHP ASP ,JavaScrip ฯลฯ  ส่วนที่ 3) เลือกงานตามฟอร์มที่โปรแกรมจัดไว้ให้โดยมีรุปแบบให้เลือกหลายประเภท ส่วนที่ 4) เรียนรู้โปรแกรมทางเว็บไซต์ www.Macromedia.com  ส่วนที่ 5) เรียนรู้โปรแกรมจากโปรแกรมช่วยสอน

หลังจากที่เลือกโปรแกรมเสร็จแล้ว เราจะพบกับหน้าต่างการทำงาน ซึ่งประกอบด้วย

1.Title Bar คือ ส่วนที่แสดงชื่อโปรแกรม และชื่อไฟล์ที่กำลังทำงานอยู่ ซึ่งจะ อยู่บนสุดของหน้าต่างโปรแกรม และกลุ่มของปุ่มทางขวามือซึ่งจะใช้ควบคุมการย่อ/ขยาย/ปิดหน้าต่างที่แสดงอยู่นี้ 2.Menu Bar คือ ส่วนที่รวมคำสั่งการทำงานทั้งหมด แล้วแบ่งย่อยตามประเภทและในคำสั่งหลักมักจะมีเมนูลัดให้กดด้วย  3.Object Palette คือ แถบแสดงปุ่มต่างๆของโปแกรม เราสามารถเลือกประเภทคำสั่งได้ด้วยการคลิกที่ Common จะปรากฏเมนูขึ้นมา  หากเราคลิกปุ่ม Show as Tabs ก็จะเป็นการแสดงเครื่องมือดังนี้


• แถบชื่อเรื่อง (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  จะมีลักษณะของเว็บเพจให้เลือกใช้งาน  ดังนี้

Basic Page Dynamic Page                      Template Page                     Other                                       CSS Style Sheets    Framesets                              Page Design (CSS)            Starter Pages                       Page Design

สำหรับสร้างเว็บเพจใหม่ทั่วไป  เช่น  HTML, XML เป็นต้น สร้างเว็บเพจแบบไดนามิก สนับสนุนเว็บเซิร์ฟเวอร์ ASP,PHP สร้างหน้าแม่แบบสำหรับใช้งานครั้งต่อไป สร้างเว็บเพจจากภาษาอื่น ๆ เช่น VBscript เลือกใช้รูปแบบ CSS เลือกใช้งานเฟรมเซตแบบต่าง ๆ ที่โปรแกรมออกแบบไว้ เลือกรูปแบบ CSS เลือกรูปแบบตามหมวดหมู่ที่โปรแกรมออกแบบไว้ให้ เลือกใช เลือกการออกแบบที่เหมาะสมกับการใช้งาน หรือ ประเภท ธุรกิจของผู้ใช้งาน

• การเปิดใช้เว็บเพจที่ได้สร้างไว้แล้ว  ให้เลือกคำสั่ง  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 >