คุณไม่จำเป็นต้องใช้ WYSIWYG เท่านั้น
Dreamweaver เป็น โปรแกรมแก้ไขแบบ WYSIWYG ที่ดี แต่ถ้าคุณไม่สนใจเขียนหน้าเว็บในระบบ "สิ่งที่คุณเห็นคือสิ่งที่คุณได้รับ" คุณยังคงสามารถใช้ Dreamweaver ได้ เนื่องจากเป็นโปรแกรมแก้ไขข้อความที่ยอดเยี่ยม แต่มีคุณลักษณะมากมายที่ลื่นโดยทางข้างในตัวแก้ไขโค้ด Dreamweaver เนื่องจากเน้นหลักอยู่ที่ส่วน "มุมมองการออกแบบ" หรือ WYSIWYG editor ของผลิตภัณฑ์
วิธีการเข้าสู่มุมมองโค้ด Dreamweaver
หากคุณไม่เคยใช้ Dreamweaver ในฐานะตัวแก้ไข HTML ก่อนที่คุณจะสังเกตเห็นสามปุ่มที่ด้านบนสุดของหน้าว่า "Code" "Split" และ "Design" Dreamweaver จะเริ่มทำงานตามค่าเริ่มต้นในมุมมอง "Design view" หรือ WYSIWYG แต่ง่ายที่จะเปลี่ยนไปดูและแก้ไขโค้ด HTML เพียงคลิกที่ปุ่ม "รหัส" หรือไปที่เมนูมุมมองและเลือก "รหัส"
หากคุณเพิ่งเรียนรู้วิธีเขียน HTML หรือต้องการทราบว่าการเปลี่ยนแปลงของคุณจะส่งผลต่อเอกสารของคุณอย่างไรคุณสามารถเปิดมุมมองโค้ดและมุมมองการออกแบบได้ในเวลาเดียวกัน ความสวยงามของวิธีนี้คือคุณสามารถแก้ไขได้ทั้งสองหน้าต่างด้วย ดังนั้นคุณจึงสามารถเขียนโค้ดสำหรับแท็กรูปภาพของคุณในรูปแบบ HTML จากนั้นใช้มุมมองการออกแบบเพื่อย้ายไปยังตำแหน่งอื่นในเพจด้วยการลากและวาง
หากต้องการดูทั้งสองแบบพร้อมกัน:
- คลิกที่ปุ่ม "แยก" (ระหว่าง "รหัส" และ "ออกแบบ")
- ในเมนู View ให้เลือก "Code and Design"
เมื่อคุณพอใจในการใช้ Dreamweaver ในการแก้ไขโค้ด HTML ของคุณแล้วคุณสามารถเปลี่ยนค่ากำหนดของคุณเพื่อเปิด Dreamweaver ในมุมมองโค้ดตามค่าเริ่มต้น วิธีที่ง่ายที่สุดคือการบันทึกมุมมองโค้ดเป็นพื้นที่ทำงาน Dreamweaver จะเปิดขึ้นในพื้นที่ทำงานล่าสุดที่คุณใช้อยู่ ถ้าไม่ได้ให้ไปที่เมนู Window แล้วเลือกพื้นที่ทำงานที่คุณต้องการ
ตัวเลือกมุมมองโค้ด
Dreamweaver มีความยืดหยุ่นมากเพราะมีหลายวิธีในการปรับแต่งและทำให้ทำงานได้ตามที่คุณต้องการ ในหน้าต่างตัวเลือกจะมีโค้ดสีการจัดรูปแบบโค้ดคำแนะนำเกี่ยวกับรหัสและตัวเลือกการเขียนโค้ดที่คุณสามารถปรับเปลี่ยนได้ แต่คุณสามารถเปลี่ยนตัวเลือกพิเศษบางอย่างได้ภายในมุมมองโค้ด
เมื่อคุณอยู่ในมุมมองโค้ดแล้วจะมีปุ่ม "ดูตัวเลือก" ในแถบเครื่องมือ นอกจากนี้คุณยังสามารถดูตัวเลือกได้โดยไปที่เมนูมุมมองและเลือก "ตัวเลือกมุมมองโค้ด" ตัวเลือกคือ:
- ตัดคำ - ตัดโค้ด HTML เพื่อให้คุณสามารถดูได้โดยไม่ต้องเลื่อนตามแนวนอน โปรดทราบว่าตัวเลือกนี้ไม่ได้แทรกการรับส่งเงินใด ๆ ในโค้ดของคุณเพียงแค่แสดงโค้ดเพื่อให้สามารถอ่านได้ง่ายขึ้น
- Line Numbers - แสดงหมายเลขบรรทัดด้านข้างของรหัส จะแสดงสัญลักษณ์ห่อบรรทัดสำหรับเส้นที่ตัดยาวกว่าหน้าต่างมุมมอง
- อักขระที่ซ่อนไว้ - แสดงอักขระพิเศษแทนช่องว่างที่จะแสดงบนหน้าเว็บ เช่นเครื่องหมายจุดเว้นช่องว่างเครื่องหมายวีรบุรุษคู่จะแทนที่แต่ละแท็บและเครื่องหมายกระพือหรือเครื่องหมายย่อหน้าจะแทนที่เส้นแบ่งแต่ละบรรทัด
- ไฮไลต์โค้ดไม่ถูกต้อง - ไฮไลต์ HTML ที่ไม่ถูกต้องเป็นสีเหลือง หากคุณเลือกแท็กสีเหลือง Property Inspector จะให้คำแนะนำเกี่ยวกับวิธีการแก้ไข
- การทำ Syntax Coloring - เปิดหรือปิดรหัสสีของรหัสของคุณ คุณเปลี่ยนสีของรหัสสีของคุณในส่วนการระบายสีโค้ดของการกำหนดลักษณะ
- เยื้องอัตโนมัติ - ทำให้โค้ดของคุณเยื้องโดยอัตโนมัติหลังจากที่แคร่ตลับลูกปืนกลับมาถ้าโค้ดด้านบนถูกเยื้อง คุณสามารถเปลี่ยนขนาดของการเยื้องโดยการเปลี่ยนขนาดแท็บในส่วนจัดรูปแบบโค้ดของการกำหนดลักษณะ
การแก้ไขโค้ด HTML ในมุมมองโค้ด Dreamweaver
ง่ายในการแก้ไขโค้ด HTML ในมุมมองโค้ดของ Dreamweaver เพียงแค่เริ่มต้นพิมพ์ HTML ของคุณ แต่ Dreamweaver จะมีฟีเจอร์เพิ่มเติมบางอย่างที่ขยายเกินกว่าตัวแก้ไข HTML ขั้นพื้นฐาน เมื่อคุณเริ่มเขียนแท็ก HTML ให้พิมพ์ <. หากคุณหยุดชั่วคราวหลังจากอักขระดังกล่าว Dreamweaver จะแสดงรายการ แท็ก HTML เหล่านี้เรียกว่าคำแนะนำเกี่ยวกับรหัส ในการ จำกัด การเลือกให้แคบลงให้เริ่มพิมพ์อักขระ - Dreamweaver จะ จำกัด รายการแบบเลื่อนลงให้แคบลงที่แท็กที่เหมาะกับสิ่งที่คุณกำลังพิมพ์
หากคุณยังใหม่กับ HTML คุณสามารถเลื่อนดูรายการแท็ก HTML และเลือกรายการต่างๆเพื่อดูสิ่งที่พวกเขาทำ Dreamweaver จะแจ้งให้คุณทราบเกี่ยวกับแอตทริบิวต์ต่อไปเมื่อคุณพิมพ์แท็กแล้ว ตัวอย่างเช่นหากคุณพิมพ์ "i แท็ก HTML โดยจะมีแท็กอื่น ๆ ที่ขึ้นต้นด้วยฉัน หากคุณพิมพ์ด้วยตัวอักษร "m" ต่อไป Dreamweaver จะแคบลงไปที่แท็ก
แต่คำแนะนำเกี่ยวกับรหัสไม่สิ้นสุดที่แท็ก คุณสามารถใช้คำแนะนำในการใส่รหัส:
หากคำแนะนำเกี่ยวกับรหัสไม่ปรากฏขึ้นคุณสามารถกด Ctrl-spacebar (Windows) หรือ Cmd-spacebar (Macintosh) เพื่อแสดงผลได้ สาเหตุที่พบบ่อยที่สุดที่คำแนะนำเกี่ยวกับโค้ดอาจไม่ปรากฏคือหากคุณเปลี่ยนไปใช้หน้าต่างอื่นก่อนที่จะวางแท็ก เนื่องจาก Dreamweaver กำลังปิดการพิมพ์อักขระ <หากคุณออกจากหน้าต่างและกลับมาคุณจะต้องเปิดคำแนะนำเกี่ยวกับรหัสอีกครั้ง
คุณสามารถปิดเมนูคำแนะนำเกี่ยวกับรหัสโดยกดปุ่ม Escape
เมื่อคุณพิมพ์แท็ก HTML ที่เปิดขึ้นคุณจะต้องปิดแท็ก Dreamweaver ทำแบบนี้ได้อย่างเป็นธรรมชาติ หากคุณพิมพ์ตัวเลือก "ปิดแท็ก" ที่เหมาะสมกับความต้องการของคุณมากที่สุด
หากคุณไม่พร้อมที่จะเปลี่ยนไปใช้แก้ไขหน้าเว็บใน HTML แต่ต้องการดูโค้ดตามที่เขียนไว้คุณควรลองใช้ตัวตรวจสอบโค้ด ซึ่งจะเปิดโค้ด HTML ในหน้าต่างอื่น การทำงานเหมือนกับการดูโค้ดและในความเป็นจริงเป็นหน้าต่างดูโค้ดแบบถอดได้สำหรับเอกสารปัจจุบัน เมื่อต้องการเปิดตัวตรวจสอบรหัสให้ไปที่เมนู Window และเลือก "Code Inspector" หรือกดปุ่ม F10 บนแป้นพิมพ์ของคุณ
Dreamweaver จะจัดรูปแบบโค้ด HTML แต่คุณต้องการให้แสดง ตัวอย่างเช่นถ้าคุณใช้ 3 ช่องว่างในการเยื้อง แต่ไม่เคยเยื้อง IMG แท็กคุณสามารถระบุว่าข้อมูลการจัดรูปแบบในตัวเลือกการเขียนโค้ดใหม่ จากนั้นไปที่เมนูคำสั่งแล้วเลือก "ใช้การจัดรูปแบบแหล่งข้อมูล" นี่เป็นวิธีที่ดีในการรับรหัสที่เขียนโดยคนอื่นในรูปแบบที่คุณคุ้นเคย
คุณลักษณะที่โปรแกรมแก้ไข HTML จำนวนมากไม่ทราบหรือไม่ใช้งานก็คือความสามารถในการยุบโค้ด HTML การดำเนินการนี้จะไม่นำแท็กออกจากเอกสาร แต่เพียงนำแท็กออกจากมุมมองเพื่อไม่ให้แท็กเหล่านี้ไม่รบกวนสิ่งที่คุณกำลังทำอยู่ หากต้องการยุบโค้ดของคุณ:
- เลือกส่วนของรหัสที่คุณต้องการซ่อน
- ในเมนูแก้ไขให้เลือก "ยุบการเลือก" จากเมนูย่อย "ยุบ Code"
วิธีที่ง่ายกว่าคือการเลือกรหัสจากนั้นคลิกที่ไอคอนยุบรหัสที่ปรากฏในรางน้ำ นอกจากนี้คุณยังสามารถคลิกขวาที่รหัสที่เลือกและเลือก "การเลือกยุบ"
หากคุณต้องการซ่อนทุกอย่าง ยกเว้น สิ่งที่เน้นคุณสามารถเลือก "ยุบตัวเลือกภายนอก" ในวิธีการใด ๆ ข้างต้น
หากต้องการขยายรหัสยุบเพียงดับเบิลคลิกที่ ซึ่งจะเปิดโค้ดขึ้นและเลือก จากนั้นคุณสามารถย้ายส่วนที่เลือกหรือลบหรือเพิ่มแท็กเพิ่มเติมรอบ ๆ
คุณสามารถใช้การยุบและขยายคุณลักษณะตลอดเวลาในหน้าเว็บที่คุณไม่ต้องการแก้ไขเทมเพลตภายนอก คุณเพียงแค่เลือกพื้นที่เนื้อหาที่คุณต้องการแก้ไขและยุบด้านนอก จากนั้นเขียน HTML ของคุณ คุณยังสามารถดูหน้าเว็บในมุมมองออกแบบหรือดูตัวอย่างในเบราว์เซอร์ได้ รหัสที่ยุบไม่ได้ถูกนำออกจากเอกสารเพียงแค่ซ่อนจากมุมมอง นอกจากนี้คุณยังสามารถใช้งานได้เมื่อทำงานกับชุดสินค้า เมื่อทำเสร็จแล้วให้ยุบ คุณรู้ว่าคุณทำเสร็จแล้วเมื่อไม่มีโค้ดแสดง