รายวิชา คอมพิวเตอร์ (การเขียนเว็บไซต์โดยใช้โปรแกรม Deramweaver MX)

เรื่อง พื้นฐานการสร้างเว็บเพจด้วย Dreamweaver
1. ส่วนประกอบของโปรแกรม Dreamweaver
         เเปิดโปรแกรม DreamweaverMX จะมีหน้าจอที่เข้าใจง่ายต่อการออกแบบและปรับเปลี่ยนได้ตามความถนัดของผู้ใช้ การออกแบบจะอยู่ในส่วนที่เรียกว่าหน้า DOCUMENT เมื่อเรานำมาเปิดที่ Browser ก็จะเห็นเหมือนกับที่เราออกแบบไว้ที่หน้า DOCUMENT ซึ่งเป็นการง่ายต่อการออกแบบ ขั้นตอนการเข้าสู่โปรแกรมทำได้ดังนี้

1. Click mouse ที่ปุ่ม Start
2. เลื่อน mouse เลือกคำสั่ง All Programs>Macromedia
3. Click mouse เลือกคำสั่ง Macromedia Dreamweaver MX เพื่อเรียกใช้งานโปรแกรม ก็จะเข้าสู่
หน้าต่างการทำงานของโปรแกรม ซึ่งองค์ประกอบต่างๆ ของโปรแกรมมีดังต่อไปนี้
 
แท็บ Insert (Insert Bar)

เป็นกลุ่มเครื่องมือที่ใช้สร้างองค์ประกอบต่างๆ ที่จะนำมาสร้างเป็นหน้าเว็บเพจ โดยมีเครื่องมือต่างๆ อยู่ 12 กลุ่ม
1. แท็บ Common
เป็นส่วนที่รวบรวมอ็อบเจ็กต์ต่างๆ ที่เราเรียกใช้งานบ่อย ได้แก่ การแทรกภาพ การแทรกตารางเป็นต้น
2. แท็บ Layout
เป็นส่วนรวมอ็อบเจ็กต์ที่ช่วยในการจัดองค์ประกอบของหน้าเว็บเพจให้ง่ายกว่าเดิม
3. แท็บ Text
รวมอ็อบเจ็กต์การใช้งานตัวอักษรที่อยู่ภายในเว็บเพจ
4. แท็บ Table
เป็นอ็อบเจ็กต์ที่ใช้ในการสร้างตารางให้กับเว็บเพจ
5. แท็บ Frames
ใช้สำหรับแบ่งพื้นที่ในการแสดงผลของหน้าเว็บเพจให้ออกเป็นส่วนย่อย
6. แท็บ Forms
แทรกอ็อบเจ็กต์ที่ใช้ในการสร้างแบบฟอร์มสอบถาม และตัวเลือกต่างๆ
7. แท็บ Templates
กำหนดรูปแบบ หรือที่เราเรียกว่าเทมเพลตให้กับเว็บเพจ หรือเว็บไซต์ของเรา
8. แท็บ Charecters
เป็นกลุ่มอ็อบเจ็กต์ที่ใช้สำหรับแทรกตัวอักษร และสัญลักษณ์พิเศษต่างๆ เช่นสัญลักษณ์เงินเยน
เป็นต้น
9. แท็บ Media
ใช้สำหรับแทรกส่วนที่เป็นไฟล์วีดีโอ ภาพเคลื่อนไหว Flash, Java applet, ActiveX หรือ Plugin ใน
หน้าเว็บ
10. แท็บ Head
เป็นการแทรกคำสั่ง HTML เสริมในหน้าเว็บเพจที่สร้าง อาทิ คำบรรยายเว็บไซต์ คีย์เวิร์ด คำที่ใช้ใน การค้นหาเว็บไซต์โดย Search Engine เป็นต้น
11. แท็บ Script
แทรกภาษาสคริปต์ เช่น Javascript หรือ VBScript เข้าไปในเว็บเพจ
12. แท็บ Application
เป็นแท็บรวมอ็อบเจ็กต์สร้างแอพพลิเคชั่นติดต่อกับฐานข้อมูลผ่านเว็บเซิร์ฟเวอร์
ส่วน Properties inspector
แต่ละอ็อบเจ็กต์ที่เรานำมาสร้างหน้าเว็บจะมีคุณสมบัติที่สามารถปรับแต่งได้ ซึ่งเมื่อใดที่เราคลิกเลือกอ็อบเจ็กต์นี้ส่วนของ Properties ก็จะแสดงค่าต่างๆ ให้เราปรับแต่งได้
หน้าต่างเว็บเพจ (Document Window)
Show Code View เป็นหน้าต่างที่ให้แสดงเฉพาะโค้ด HTML ของหน้าเว็บเพจที่เราทำงานอยู่
Show Code and Design Views เป็นหน้าต่างที่ให้แสดงทั้งโค้ด HTML และหน้าเว็บเพจที่เราทำงาน
Show Design Views ให้แสดงแต่หน้าเว็บเพจปกติไม่ต้องแสดงโค้ด HTML
Live Data View เป็นหน้าต่างที่ดูผลลัพธ์การนำข้อมูลจากฐานข้อมูลมาแสดงบนเว็บเพจ