เครื่องมือต่างๆในโปรแกรม Dreamweaver

Dreamweaver

    สำหรับ Dreamweaver เป็นโปรแกรมสร้างโฮมเพจแบบเสมือนจริง โดยไม่ต้อง เขียนภาษา HTML เอง หรือที่ศัพท์เทคนิคเรียกว่า "WYSIWYG"

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

หน้าตาของโปรแกรม Dreamweaver และชื่อเรียกเครื่องมือต่างๆ



อธิบายเครื่องมือต่างๆ

    1.Document window

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

    ข้อเสียของ Dreamweaver ยังไม่อยู่บ้างคือ หน้าจอที่แสดงผลเสมือนจริง กับการแสดงผลจริงใน web browser อาจไม่ตรงกัน ขึ้นอยู่กับ web browser ที่เราใช้ด้วย



    2.Insert Bar



    ประกอบด้วยคำสั่งต่างๆ แยกย่อยดังนี้

    1.Common ในแถบนี้จะประกอบด้วยเครื่องมือที่ใช้งานบ่อยๆ เช่น สร้างตาราง , สร้างลิงค์ หรือใส่รูปในเว็บเพจ

    2.Layout ในแถบนี้จะเป็นเครื่องมือที่เกี่ยวกับ การแสดงผลแบบ div , ตาราง และ frame สำหรับใช้สร้างเว็บเพจ แบบ layout

    3.Forms ในแถบนี้ประกอบด้วยคำสั่งที่ใช้ในการสร้าง form เช่น radio , check box เป็นต้น

    4.Data เป็นแถบที่ใส่สำหรับ Dynamic เว็บไซต์ ใช้จัดการกับระบบ data base จะใช้มากในการพัฒนา web application บนเว็บไซต์ เช่นการเขียนระบบ web board , ระบบสมาชิก

    5.Spry เป็นแถบใหม่ของ dreamwerver ที่หลายคนจะต้องชอบ เพราะเป็นเครื่องมือที่รวม javascript กับ HTML , CSS เข้าด้วยกัน ทำให้เว็บไซต์มีความน่าสนใจ และมีความสะดวกในการใช้งานมากขึ้น

    6.Text ในนี้จะเป็นเครื่องมือที่ใช้จัดการกับตัวอักษรทั้งหมด เช่นใส่สัญลักษณ์พิเศษต่างๆ

    7.Favorites แถบอันนี้คุณสามารถเพิ่ม เครื่องมือต่างด้วยตัวเอง โดยการคลิกขวา สำหรับผู้ที่ต้องการเก็บเครื่องมือต่างๆที่ใช้งานบ่อยไว้ในนี้



    3.Property inspector



    property inspector เป็นแถบเครื่องมือที่จะเปลี่ยนแปลงตามวัตถุที่เราเลือกอยู่เช่น ถ้าคลิกที่รูป property inspector ก็จะเป็นคุณสมบัติเกี่ยวกับรูปนั้นเช่น ขนาดรูป , ชื่อรูป , ลิงค์ของรูป ถ้าเลือกที่ตารางอยู่ ก็จะเป็นคุณสมบัติของตาราง เช่น ขนาดตาราง , จำนวนแถวและหลักของตาราง เป็นต้น



    4.docking panels



    เครื่องมือตัวนี้เป็นเครื่องมือที่จะต้องใช้บ่อยมาก เพราะใช้แสดง file ที่อยู่ในเว็บไซต์ , ไฟล์ CSS และใช้แก้ไข CSS รวมถึงเครื่องมือที่ใช้แสดงภาพ และเครื่องมือ ftp เราสามารถปิด/เปิด แถบนี้ได้โดยการคลิกที่รูปลูกศรด้านซ้ายมือของ panels



    5.menu

    เป็นคำสั่งที่เห็นอยู่ทั่วไปในโปรแกรมทั่วไป จะมีคำสั่งที่ใช้ที่เหมือนกับเครื่องมือต่างที่แสดงอยู่ใน Insert bar, Property inspector, panels แต่มีบางคำสั่งที่แสดงเฉพาะใน menu ด้วย



    6.Status bar



    ถือว่าเป็นเครื่องมือที่มีประโยชน์มาก ทางขวาของแถบนี้จะเป็นตัวเลขที่บอกเวลาในการโหลดหน้านี้ ขนานของ document window เครื่องมือย่อ/ขยาย ส่วนทางขวาจะเป็น Tag select ของ HTML จะแสดงคำสั่งของ HTML เราสามารถแก้ไขคำสั่งต่างๆได้จากหน้าต่างนี้



    7.Document Tool bar



    ทางซ้ายมือสุดจะเป็นคำสั่ง ใช้เปลี่ยนการแสดงผลของ document window อันแรกจะแสดงเฉพาะ code อันต่อมาจะแสดงทั้ง code และ หน้าออกแบบ อันสุดท้ายจะแสดงหน้าออกแบบเท่านั้น และยังมือเครื่องมือที่ใช้กำหนด Title <title> </title> ของหน้าเว็บเพจอีกด้วย



หน้าต่างต่อไปที่จะลืมไม่ได้คือ Perference การเปิดหน้าต่างนี้ทำได้โดยคลิกที่ Edit >Preferences เป็นหน้าต่างที่ใช้ในการปรับระบบต่างๆของ Dreamweaver ให้ตรงกับความต้องการของเรา



เกี่ยวกับบทความนี้

  • ระดับความยาก : พื้นฐาน
  • คะแนนของบทความนี้ : 12
  • สร้างเมื่อ : 16-05-2010
  • จำนวนครั้งที่เปิด : 218,087
  • เนื้อหาที่เกี่ยวข้อง :
      -

คะแนนความน่าสนใจ

154211

คลิกที่ โดนใจ! เพื่อโหวตให้กับบทความนี้หากคิดว่าน่าสนใจ

บทความอื่นๆในหมวดลองทำเว็บไซต์ แบบง่ายๆ (10 เรื่อง)

แนะนำ Dreamweaver

แนะนำ Dreamweaver

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

สร้างเมื่อ : 16-05-2010 9:40 | จำนวนครั้งที่เปิด : 64,470


เตรียมความพร้อมปรับแต่ง Dreamweaver ใช้งานภาษาไทยได้

เตรียมความพร้อมปรับแต่ง Dreamweaver ใช้งานภาษาไทยได้

ในบทความนี้จะเป็นเนื้อหาการปรับให้ Dreamweaver ทำงานกับภาษาไทยได้

สร้างเมื่อ : 16-05-2010 9:40 | จำนวนครั้งที่เปิด : 57,244


เครื่องมือต่างๆในโปรแกรม Dreamweaver

เครื่องมือต่างๆในโปรแกรม Dreamweaver

บทความนี้เกี่ยวกับตำแหน่งและ ชื่อเรียกเครื่องมือต่างๆ ของ Dreamweaver

สร้างเมื่อ : 16-05-2010 9:24 | จำนวนครั้งที่เปิด : 218,087


กำหนด Site ขั้นตอนสำคัญที่สุดของการทำเว็บด้วย Dreamweaver

กำหนด Site ขั้นตอนสำคัญที่สุดของการทำเว็บด้วย Dreamweaver

การกำหนด site เป็นขั้นตอนที่สำคัญมากในการทำเว็บด้วย dreamweaver เราแทบจะทำงานไม่ได้เลยถ้าไม่กำหนด site ให้กับ dreamweaver ก่อน

สร้างเมื่อ : 16-05-2010 9:40 | จำนวนครั้งที่เปิด : 113,062


ใส่ข้อความในเว็บเพจด้วย Dreamweaver

ใส่ข้อความในเว็บเพจด้วย Dreamweaver

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

สร้างเมื่อ : 16-05-2010 9:52 | จำนวนครั้งที่เปิด : 57,884


ใส่รูปภาพในเว็บเพจ (พื้นฐาน)

ใส่รูปภาพในเว็บเพจ (พื้นฐาน)

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

สร้างเมื่อ : 16-05-2010 9:36 | จำนวนครั้งที่เปิด : 50,384


สร้าง Hyperlink

สร้าง Hyperlink

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

สร้างเมื่อ : 16-05-2010 8:48 | จำนวนครั้งที่เปิด : 42,446


ปรับแต่งเว็บเพจด้วย Page Properties

ปรับแต่งเว็บเพจด้วย Page Properties

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

สร้างเมื่อ : 16-05-2010 8:49 | จำนวนครั้งที่เปิด : 37,251


Adding Meta Tags สำหรับการค้นหาของ Search Engine

Adding Meta Tags สำหรับการค้นหาของ Search Engine

meta tags เป็นคำที่ใช้ในการอธิบายเว็บไซต์ของเราให้กับ Search Engine (เช่น google.com) ต่างๆ ว่าเว็บไซต์ของเราเกี่ยวข้องกับอะไรบ้าง

สร้างเมื่อ : 16-05-2010 8:50 | จำนวนครั้งที่เปิด : 23,523


แสดงผลเว็บเพจของคุณใน browser

แสดงผลเว็บเพจของคุณใน browser

ถึงแม้ว่า Dreamweaver จะแสดงผลเสมือนจริง แต่ก็ยังไม่ถูกต้องเสมอไป สุดท้ายเราก็ต้องดูผ่าน browser อยู่ดีว่าเว็บเพจที่เราเขียนนั้นเป็นอย่างไร

สร้างเมื่อ : 16-05-2010 8:50 | จำนวนครั้งที่เปิด : 36,283