มารู้จักกับส่วนต่างๆของ Dreamweaver กันนะคะ ก่อนอื่นก็เปิด Dreamweaver ขึ้นมา ก็จะพบหน้าตาคล้ายรูปด้านล่าง ในตัวอย่างนี้ เราใช้ Dreamweaver CS3 ค่ะ ใครใช้เวอร์ชั่นต่างจากนี้ ก็ไม่ต้องตกใจ เพราะหน้าตาคล้ายๆ กัน สามารถทำงาน และใช้งาน ได้เช่นกันค่ะ
ส่วนที่ 1 Menu Bar
เมนูบาร์ เป็นแถบที่รวบรวมเครื่องมือทั้งหมดใน Dreamweaver เอาไว้ ถ้าหาอะไรไม่เจอ ให้หาใน Menu Bar ค่ะ
ส่วนที่ 2 Insert Bar
อินเสริชบาร์ เป็นแถบเครื่องมือ เอาไว้เพิ่ม (insert) เช่น เพิ่มรูป, เพิ่มเส้น, เพิ่มเสียงเพลง, ใส่ปฎิทิน, ใส่ลิงค์, ใส่ตาราง ฯลฯ ถ้าต้องการใส่อะไร ให้มองหาในเครื่องมือนี้ค่ะ ถ้าเป็นแถบเครื่องมือที่ได้ใช้บ่อยๆ
ส่วนที่ 3 พื้นที่ทำงาน (Workspace)
ตรงส่วนนี้เป็นพื้นที่หน้าเว็บไซต์ของเรา สามารถดูผลลัพธ์ได้พร้อมๆกับการสร้างเว็บไปเลย
Code=ดูโค้ด
Split=ดูทั้งโค้ด ทั้งผลลัพธ์
Design=ดูแต่ผลลัพธ์
ในส่วนผลลัพธ์นี้ เป็นการออกแบบหน้าเว็บแบบดูผลลัพธ์จริงไปด้วย แก้ไขในส่วนผลลัพธ์ได้เลยนะคะ ไม่ต้องไปแก้ในโค้ดเลยก็ได้
ส่วนที่ 4 Property Inspector
แถบคุณสมบัติ เอาไว้ปรับแต่งส่วนต่างๆบนหน้าเว็บ เช่น เปลี่ยนสี เปลี่ยนขนาด เปลี่ยนรูปแบบ เป็นแถบเครื่องมือที่ได้ใช้บ่อยๆ
ส่วนที่ 5 Panel Group
แถบเครื่องมืออื่นๆ ค่ะ ตรงนี้ส่วนใหญ่เราจะใช้พาเนล Files และพาเนล CSS กัน ตอนนี้อย่าเพิ่งสนใจมาก
สัญลักษณ์ต่างๆ
|
ถ้าเป็นเครื่องหมายลูกศรีชี้ แสดงว่า ยุบ-ขยายได้ค่ะ ลองคลิกดู ถ้าเป็นรูปจุดๆ แสดงว่า ย้ายแถบเครื่องมือได้ค่ะ คลิกลากไปวางไว้ในตำแหน่งที่ต้องการได้เลย (แนะนำว่าไม่ต้องย้ายค่ะ) |
เวลาที่รู้สึกว่าหน้าต่างที่กำลังดู หรือใช้งานอยู่มีขนาดเล็กไป หรือใหญ่ไป เราก็เอาเม้าส์ไปชี้ตรงขอบค้างไว้ จะเห็นสัญลักษณ์ลูกศร ให้เราสามารถเลื่อนหน้าต่างได้ คล้ายการเลื่อนหน้าต่างวินโดวส์ธรรมดานี่แหละค่ะ |
|
ลองคลิกปุ่มต่างๆ ดู เพื่อทำความคุ้นเคยนะคะ สำหรับการแนะนำเครื่องมือ เราก็ทำความรู้จักโดยรวมเท่านี้ก็พอ ไม่มีอะไรมาก ง่ายๆ อย่าเพิ่งปวดหัว ถึงเครื่องมือจะมีเยอะมาก แต่เราก็ใช้จริงๆ เพียงแค่ไม่กี่อย่าง (เว้นแต่ว่าเราจะเป็นระดับเซียน..ก็อาจจะใช้เครื่องมือแทบจะทุกอย่างที่มีมาให้)
ส่วนรายละเอียดปลีกย่อยนั้น เราจะมาเริ่มหัดใช้ในบทต่างๆกันค่ะ