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