วันอังคารที่ 11 กันยายน พ.ศ. 2555

สร้าง Hyperlink Dreamweave

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

สร้างลิงค์ในเว็บไซต์เดียวกัน

เป็นการสร้างลิงค์หากันในเว็บไซต์เดียวกัน จากเว็บเพจหนึ่งไปอีกเว็บเพจหนี่ง ขั้นตอนการสร้างมีขั้นตอนดังนี้
1.เปิดหน้าเอกสารที่ต้องการสร้างลิงค์ ใน Dreaweaver
2.เลือกตัวอักษร หรือรูปภาพ ที่ต้องการให้เป็นลิงค์ จากนั้นไปที่สัญลักษณ์ตามภาพ

3.จะมีหน้าต่างขึ้นมาดังรูป

3.1 ช่อง Text คือคำที่เราเลือกไว้ให้เป็นลิงค์
3.2 ช่อง link คือ ไฟล์ที่เราต้องการลิงค์ไป โดยการคลิกที่รูป folder สีเหลืองด้านหลัง ไฟล์ที่ลิงค์ไปจะเป็นเว็บเพจ ไฟล์รูป หรือเป็นไฟล์อะไรก็ได้ที่อยู่ใน local root folder
3.3 ช่อง Target มีรายละเอียดดังนี้
1.target='_blank' เป็นคำสั่งให้เปิด link ในหน้าใหม่
2.target='_parent' เป็นคำสั่งให้เปิด link ในหน้าเดิม (ถ้าไม่เลือกจะเป็นค่านี้อัตโนมัติ)
3.target='_self' เป็นคำสั่งให้เปิด link ใน frame ปัจจุบัน (อ่านรายละเอียดในหัวข้อเรื่อง frame)
4.target='_top'เป็นคำสั่งให้เปิด link ทับหน้าเดิมทั้งหมด ซึ่งจะปิด frame ทั้งหมดเช่นเดียวกัน (อ่านรายละเอียดในหัวข้อเรื่อง frame)
4.คลิกโอเคก็จะสร้างลิงค์เรียบร้อย

สร้างลิงค์ในหน้าเดียวกัน

เว็บเพจบางหน้าที่มีเนื้อหาเยอะมากๆ ทำให้ผู้อ่านหาข้อมูลที่ต้องการทราบได้ยาก ดังนั้นเราจึงทำ link ภายในหน้าเอาไว้ เพื่อให้สามารถหาเนื้อหาอ่านได้ง่ายขึ้น ถ้านึกภาพไม่ออกก็ให้เปิด wikipedia.org ดูจะเห็นว่ามี link ภายในเว็บอยู่ในหน้าที่เนื้อหาเยอะมากๆ

1.เปิดหน้าที่เราต้องการให้มีลิงค์ภายในหน้าเดียวกัน
2.เลือกจุดที่ต้องการให้ลิงค์ไป ไม่จำเป็นต้องใช้ตัวหนังสือ หรือภาพ ใช้แค่จุดในเว็บเพจนั้น เช่นลิงค์ไปบรรทัดสุดท้ายของหน้า ก็ให้คลิกเมาส์บริเวณที่ต้องการจะลิงค์ไป
3.ไปที่ Insert > Named Anchor จะมีหน้าต่างขึ้นมากให้ใส่ชื่อของจุดลิงค์ ชื่อที่ใส่จะต้องเป็นชื่อที่ไม่มีการเว้นวรรค เป็นภาษาอังกฤษ ห้ามมีจุดต่างๆ เราจะสร้างจุดลิงค์ภายในหน้ากี่จุดก็ได้แต่ห้ามชื่อซ้ำกัน
4.คลิก OK จะมีสัญลักษณ์

แสดงในจุดที่เราเลือก ถ้าไปดู Code จะเห็นดังนี้ <A NAME=?ชื่อที่ตั้ง?></A>
5.เลือกตัวอักษร หรือรูปภาพ ที่ต้องการจะทำเป็นลิงค์
6.ที่ Property inspector จะเห็นว่ามีสัญลักษณ์

ให้ลากไปยังจุด

ก็จะสร้างลิงค์ได้เรียบร้อย

สร้างลิงค์ไปยังเว็บไซต์อื่น

1.เปิดหน้าที่ต้องการสร้างลิงค์ขึ้นมา
2.เลือกตัวอักษร หรือรูปภาพที่ต้องการสร้างลิงค์
3.ที่ Property inspector ให้ใส่ชื่อเว็บที่ต้องการลิงค์ไป เช่น ในรูปเลือกภาพเป็นลิงค์
1.ช่องลิงค์ใส่ http://www.hellomyweb.com (ต้องใส่ http:// หน้าเว็บที่ต้องการลิงค์ไปด้วย)
2.จากนั้นที่ช่อง border ให้ใส่ค่า 0 เพื่อไม่ให้มีขอบรูปเมื่อรูปเป็นลิงค์

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

อ้างอิง http://www.hellomyweb.com/index.php/main/content/49

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

จากบทความเรื่องการกำหนด site เราได้กำหนด local root folder ไว้เพื่อเก็บไฟล์ทั้งหมด และกำหนด default images folder สำหรับเก็บไฟล์รูปไว้ด้วย ซึ่งตามที่แนะนำไว้คือ เราจะนิยมสร้าง folder ชื่อ images ไว้ใน local root folder เพื่อเอาไว้เก็บรูป

** หมายเหตุ ** อย่าลืมว่าไฟล์รูปที่นำมาใช้นั้นต้องอยู่ใน local root folder เท่านั้น

การใส่รูปในเว็บเพจนั้นทำได้หลายวิธี ดังนี้

1.ลากรูปลงไปใน document window ได้ทันที โปรแกรมจะทำการ save รูปไว้ใน default images folder ให้เอง
2.ไปที่ file panel ด้านขวามือแล้วลากไฟล์จากใน panel ไปที่ document window ได้เลย

3.คลิกพื้นที่ใน document window ที่คุณต้องการแทรกรูปลงไป จากนั้นไปที่ Insert Bar หา icon ดังรูปด้านล่าง เมื่อคลิกก็จะมีหน้าต่างขึ้นมาให้เลือกรูป แค่นี้ก็สามารถใส่ภาพในเว็บเพจได้แล้ว

ไม่ว่าเราจะแทรกรูปด้วยวิธีไหนก็ตาม จะมีหน้าต่างดังภาพด้านล่าง สำหรับใส่ Alternate Text ซึ่งเอาไว้สำหรับเป็นคำบรรยายภาพ จะแสดงแทนภาพเมื่อภาพที่เรากำหนดโหลดขึ้นมาแสดงไม่ได้ หรือสำหรับ ie จะแสดงเมื่อมีเมาส์ไปอยู่เหนือ ถ้าเราเขียนคำบรรยายไว้ในไฟล์อื่นก็สามารถทำลิงค์ไปหาได้โดยเลือกจากหัวข้อ long description

เครื่องมือที่ใช้ปรับแต่งภาพ

เมื่อเราคลิกที่ภาพ ที่ Property inspector จะปรากฏตัวเลือกที่ใช้ในการปรับแต่งภาพ ดังรูปด้านล่าง จากรูปได้ปรับคุณสมบัติของรูปให้ชิดซ้าย และปรับให้มีช่องว่างระหว่างภาพและตัวหนังสือ เท่ากับ 10 pixel

รายละเอียด Property inspector เมื่อเลือกที่รูป

1.Image Name (Name) กำหนดชื่อให้กับรูป ใช่สำหรับเมื่อเราเขียน script อ้างอิงรูป
2.W (Width) กำหนดความยาวของรูปที่ต้องการให้แสดงผล โดยไม่มีผลกับไฟล์รูปเดิม
3.H (Height) กำหนดความสูงของรูปที่ต้องการให้แสดงผล โดยไม่มีผลกับไฟล์รูปเดิม
4.Src (Source) บอก folder ที่ใช้เก็บไฟล์รูปที่เราเลือก
5.Link (Hyperlink) ใช้กำหนด hyperlink ของรูป
6.Alt (Alternate Text) คำบรรยายรูปจะปรากฏก็ต่อเมื่อรูปไม่แสดงผล และนำเมาส์ไปอยู่เหนือรูป (ie)
7.Edit ประกอบด้วยเครื่องมือเหล่านี้ เครื่องมือของ dreamweaver จะทำการแก้ไขที่ไฟล์รูปโดยตรง

7.1 Fireworks แก้ไขรูปด้วย โปรแกรม Fireworks
7.2 Optimize แก้ไขขนาดไฟล์ของรูป
7.3 Crop ใช้ตัดรูปให้ได้ขนาดที่ต้องการ
7.4 Brightness and Contrast ปรับความสว่างของรูป
7.5 Sharpen ใช้แก้ไขความคมชัดของรูป

8.V Space (Vertical Space) กำหนดระยะห่างระหว่างรูปกับวัตถุอื่น ในส่วน บนและล่างของรูป
9.H Space (Horizontal Space) กำหนดระยะห่างระหว่างรูปกับวัตถุอื่น ในส่วน ซ้ายและขวาของรูป
10.Low Src (Low Source) ในกรณีที่รูปของเราไฟล์ใหญ่มากต้องใช้เวลาโหลดนาน เราอาจกำหนดให้มีรูปที่ขนาดเล็กๆ รูปอื่นโหลดขึ้นมาก่อน โดยใช้ตัวเลือกนี้
11.Border (Image Border) ใช้กำหนดขนาดของขอบรูป
12.Align (Alignment) ใช้กำหนดตำแหน่งของรูปเช่น ชิดซ้าย ขวา บน ล่าง
13.Class (CSS Setting) ถ้าเราเขียน CSS เอาไว้ตัวเลือกนี้จะใช้กำหนด CSS ที่เราเขียนไว้
14.Map (Map Name) ใช้กำหนดชื่อให้กับ Map image จะกล่าวถึงในบทอื่น
15.Hot spot tool (Name) เป็นเครื่องมือที่ใช้ร่วมกับ Map Name จะกล่าวถึงในบทอื่น
16.Target (Name) กำหนดตัวเลือกของหน้าที่จะเปิด link จะกล่าวถึงในบทอื่น

หลายคนคงสงสัยว่า การเปลี่ยนขนาดรูปด้วยการกำหนด W,H (width,height) ต่างกับการใช้คำสั่ง Edit อย่างไร คำตอบคือ ถ้าเรากำหนดด้วย W,H จะไม่เปลี่ยนขนาดของรูปจริง แต่จะมีผลต่อการแสดงผลใน browser เท่านั้น ซึ่งในความจริงแล้วเราจะไม่นิยมแก้ไขขนาดของรูปด้วยวิธีนี้ เพราะนอกจากจะมีผลต่อความคมชัดของรูปแล้ว อาจทำให้สัดส่วนของรูปผิดไปได้

อ้างอิง http://www.hellomyweb.com/index.php/main/content/48

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

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

จากหน้าจอจะเห็นว่ามีชนิดไฟล์มากมายที่เราสามารถสร้างได้ แต่ในบทนี้จะขอพูดถึงแค่ HTML เท่านั้น

นอกเหนือจากการใช้หน้าจอเริ่มต้นเมื่อเปิดโปรแกรมเรายังสามารถสร้างเอกสารใหม่ได้ด้วยการไปที่ Menu เลือก File > New Document จะมีหน้าจอให้เลือกดังรูปด้านล่าง เลือก Blank Page > HTML

เลือก Create จะได้เอกสาร HTML ขึ้นมา ให้เรา save ทันทีโดยไปที่ Menu เลือก File > save

การตั้งชื่อให้กับเว็บเพจ
การตั้งชื่อให้กับเว็บเพจนั้นจะต้องตั้งเป็นภาษาอังกฤษเท่านั้น และการตั้งชื่อห้ามมีการเว้นวรรคในชื่อ เราอาจใช้เครื่องหมาย underscore (_) หรือ hyphen (-) แทนการเว้นวรรคได้
หน้าหลักที่จะต้องมีในเว็บไซต์คือหน้า index.html หน้านี้เปรียบเสมือนกับสารบัญของเว็บไซต์ เมื่อเราพิมพ์ชื่อเว็บไซต์ หน้า index.html จะถูกนำมาแสดงเป็นหน้าแรก

เริ่มต้นใส่เนื้อหาให้เว็บเพจ

การใส่เนื้อหานั้นทำได้ง่ายมาก แค่เราคลิกที่ Document window ก็สามารถพิมพ์เนื้อหาลงไปได้เลย ดังตัวอย่างพิมพ์ข้อความว่า ท่องเที่ยววัดพระศรีรัตนศาสดาราม (วัดพระแก้ว) เพื่อเป็นหัวข้อของเว็บเพจอันนี้

การสร้างหัวข้อให้กับเว็บเพจ
จากเนื้อหา HTML เราทราบอยู่แล้วว่าการสร้างหัวข้อให้กับข้อความนั้น เราจะให้คำสั่ง <h1>หัวข้อขนาดใหญ่มาก</h1> , <h2>หัวข้อขนาดเล็กลงมา</h2> การใส่หัวข้อให้กับเว็บเพจนั้น เป็นเรื่องที่สำคัญมาก แต่หลายคนมักละเลยเรื่องนี้ Search Engine หลายแห่ง เช่น Google นั้นจะให้ความสำคัญกับคำที่เป็นหัวข้อของแต่ละเว็บเพจมากโดยเฉพาะอย่างยิ่งหัวข้อที่อยู่ใน <h1>

เราสามารถสร้างหัวข้อใน dreamweaver ได้โดย

1.เลือกที่คำที่ต้องการให้เป็นหัวข้อ
2.ไปที่ Property inspector จะมีคุณสมบัติของตัวอักษรให้เราเลือก ให้เราดูที่ Format จะมีรายการหัวข้อขึ้นมาให้เลือก ดังรูป

เปลี่ยน font และขนาดตัวอักษร
เราสามารถเปลี่ยน font ที่ใช้ในการแสดงตัวอักษรและขนาดของตัวอักษรได้ โดย
1.เลือกตัวอักษรที่ต้องการเปลี่ยน
2.ไปที่ Property inspector เลือก font จะมีรายการแสดงชื่อ font มากมายให้เลือก
3.การปรับขนาดก็ไปที่ size แล้วเลือกขนาดที่เราต้องการได้ทันที

สามารถเปลี่ยน font ในรายการที่แสดงอยู่ได้โดยคลิกที่ท้ายของรายการจะมีหัวข้อ Edit font list สามารถปรับเปลี่ยนรายการได้

** หมายเหตุ ** font ที่ใช้แสดงผลนั้นจะถูกดึงมาจากเครื่องของผู้ที่มาเปิดเว็บของเรา ถ้าเครื่องนั้นไม่มี font ที่เรากำหนดไว้ก็จะไม่แสดงผลตามที่กำหนด ดังนั้นควรกำหนด font ที่มีอยู่ในทุกเครื่อง เช่น

ระบบปฏิบัติการ window จะมี Tahoma
ระบบปฏิบัติการ linux จะมี loma

การขึ้นย่อหน้าใหม่ หรือเริ่มบรรทัดใหม่
ในการขึ้นบรรทัดใหม่ทำได้ดังนี้
1.กด Enter เพื่อทำการขึ้นบรรทัดใหม่ ตัวอักษรที่เราพิมพ์มาทั้งหมดจะอยู่ใน <p> </p> โดยอัตโนมัติ
2.กด shift + enter จะทำการแทรก <br /> ใน code
ในส่วนของการแสดงผล <p> </p> จะทำให้ความห่างของบรรทัดมีมากว่าการใช้คำสั่ง <br>
เครื่องมืออื่นที่เกี่ยวกับตัวอักษร ก็มีการใช้งานเหมือนกับตัวอย่างข้างบนทั้งหมด

อ้างอิง http://www.hellomyweb.com/index.php/main/content/47

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

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

เครื่องมือต่างๆของ Dreamweaver นั้นจะทำงานโดยอ้างอิง site ที่เรากำหนดทั้งหมด ถ้าไม่ได้กำหนด site ก็ทำให้เครื่องมือเหล่านั้นแทบจะหมดความหมายไปเลยทีเดียว
สิ่งแรกที่เราจะต้องเข้าใจในการทำเว็บไซต์คือ ไฟล์ทั้งหมด ทั้งรูปภาพ ไฟล์เอกสารต่างๆ เช่น HTML หรือไฟล์ VDO ที่อยู่ในเว็บไซต์ จะถูกรวมอยู่ใน Folder เดียวเราจะเรียก Folder นั้นว่า local root folder

ขั้นตอนการกำหนด site

1.ไปที่ Menu เลือก Site > New site จะปรากฏหน้าต่างดังรูปข้างล่างขึ้นมา
2.ที่แถบด้านบนสุดเลือก Advanced ถ้าเราเลือกที่แถบ Basic จะเป็นการกำหนดแบบอัตโนมัติซึ่งโปรแกรมจะถามเราไปที่ละขั้นตอน

3.แถบ Category ทางซ้ายมือให้เลือก Local Info
4.ช่อง Site name จะใส่ชื่ออะไรลงไปก็ได้ เป็นแค่ชื่ออ้างอิงที่ใช้ในโปรแกรมเท่านั้น เพราะผู้ใช้งาน Dreamweaver อาจทำเว็บไซต์มากกว่า 1 จึงต้องตั้งชื่ออ้างอิงเอาไว้
5.ช่อง Local root folder ให้เราคลิกที่รูป folder สีเหลืองเพื่อเลือก folder ที่ใช้ในการเก็บไฟล์ทั้งหมดของเว็บไซต์ เราจะสร้าง folder นี้ไว้ที่ใดก็ได้ ถ้าคุณมีเว็บไซต์ที่ทำเสร็จแล้วต้องการจะแก้ไขก็ให้เลือก folder ที่เก็บไฟล์ของเว็บนั้นได้เลย
6.ช่อง Default image folder ให้เราระบุสถานที่เก็บไฟล์รูปภาพของเว็บไซต์ แนะนำว่าให้เราสร้าง folder ชื่อ image เอาไว้ใน Local root folder เพื่อเก็บไฟล์รูปทั้งหมดไว้ในนั้น
7.Links Relative to ให้เราเลือก Document เป็นการกำหนดการเขียน link ในเว็บไซต์ของเรา ส่วนการกำหนดแบบ site root จะนิยมใช้เมื่อทำงานกันหลายคนจะใช้วิธีการเขียนลิงค์โดยอ้างอิง root folder
8.Http address เป็นชื่อเว็บไซต์ของเรา เราอาจปล่อยช่องนี้ว่างไว้ก็ได้ถ้ายังไม่มีชื่อเว็บ (url)
9.Case-Sensitive Link ให้เลือกช่องนี้ด้วย เพื่อกำหนดให้การเขียน link เขียนแบบ case sensitive คือคำนึงถึงตัวพิมพ์ใหญ่ หรือพิมพ์เล็กในภาษาอังกฤษด้วย
10.Enable Cache ให้เลือกช่องนี้ เพื่อกำหนดให้ dreamweaver สร้างหน่วยความจำเอาไว้จำทำให้เราสามารถทำงานได้เร็วขึ้น
11.คลิก ok แค่นี้การกำหนด site ของเราก็เสร็จเรียบร้อย ให้เราไปเปิดดูที่ panel ทางขวามือ ในหัวข้อ file จะเห็นรายละเอียดของไฟล์ต่างๆที่เราสร้างไว้ ดังรูปด้านล่าง ในรูปตั้งชื่อเว็บว่า ex1 และกำหนด Local root folder ชื่อ ex และ save ไว้ที่ C: และสร้าง folder ชื่อ images เพื่อใช้ในการเก็บไฟล์รูป

ถ้าเราต้องการแก้ไข site ก็ให้เลือกที่ site > manage site ก็จะทำการแก้ไขการกำหนดค่าของ site ได้
อ้างอิง http://www.hellomyweb.com/index.php/main/content/46

เครื่องมือต่างๆในโปรแกรม 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 ให้ตรงกับความต้องการของเรา

อ้างอิง http://www.hellomyweb.com/index.php/main/content/45

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

ปรับแต่ง Dreamweaver ให้ทำงานกับภาษาไทยได้

1.ปรับแต่งระบบ dreamweaver ให้ทำงานกับภาษาไทยได้ เมื่อเปิดโปรแกรม Dreamweaver ขึ้นมาแล้ว เริ่มแรกเข้าไปที่ Edit > Preference

จากนั้นจะมีหน้าจอดังรูปด้านล่างให้ท่านเลือกที่เมนูทางด้านซ้ายมือในหัวข้อ Fonts และเปลี่ยนตามรูป

การเปลี่ยน font
อาจเปลี่ยนตามที่ผู้ใช้ต้องการก็ได้แต่ ต้องเป็น font ที่สามารถใช้กับภาษาไทยได้โดยมีรายละเอียดดังนี้
Proportional font เป็นตัวอักษรที่ใช้แสดงผลในหน้าแสดงผล (Design)
Fixed font เป็นตัวอักษรที่ใช้แสดงผลในหน้าแสดงผล เหมือนกัน เพียงแต่ว่าจะแสดงตัวอักษรที่อยู่ใน pre tag, code tag และ tt tag
Code view เป็นตัวอักษรที่แสดงผลในหน้า code ซึ่งเราจะใช้บ่อยมากๆควรปรับให้ตัวใหญ่เพื่อความสะดวกในการอ่าน code

จากนั้นเลือก New Document จากเมนูทางซ้ายมีจะเป็นดังรูป

การเปลี่ยน head ของเอกสารใหม่
เมื่อเราเลือกที่ new document แล้วจะปรากฏหน้าตาดังภาพด้านล่าง ซึ่งให้เราเลือกที่ Default document เป็น HTML และเปลี่ยน Default encoding เป็น utf-8
เสร็จแล้วก็ให้ไปที่ default document อีกทีเลือก CSS และเปลี่ยน Default encoding เป็น utf-8 อีกเช่นเดียวกัน

อ้างอิงhttp://www.hellomyweb.com/index.php/main/content/35