ใช้ Dreamweaver เพื่อแก้ไขแท็กหน้าเว็บอย่างรวดเร็ว
ผู้เขียน：Eve Cole
เวลาอัปเดต：2009-06-01 01:02:43
ฉันสงสัยว่าคุณมีนิสัยในการเขียนโค้ดด้วยมือหรือไม่ ตัวอย่างเช่น หากคุณต้องการแทรกโค้ด CSS หรือโค้ด Javascript ลงในเซลล์ คุณจะดำเนินการได้อย่างรวดเร็วและสะดวกได้อย่างไร?
แม้ว่า Dreamweaver จะให้มุมมองโค้ดแก่เรา แต่เรายังคงต้องหามันด้วยตนเองและสลับไปมา แม้ว่าคุณจะสามารถใช้มุมมองโค้ดและมุมมองการแก้ไขเพื่ออยู่ร่วมกันได้ แต่จะใช้พื้นที่หน้าจอถึงครึ่งหนึ่ง ซึ่งทำให้พื้นที่แก้ไขที่มีขนาดเล็กอยู่แล้วแออัดมากขึ้น มีวิธีที่ดีกว่านี้ไหม? คำตอบคือใช่
ลองใช้ Dreamweaver 8 เป็นตัวอย่าง โดยสมมติว่าเค้าโครงแผง Dreamweaver ของทุกคนเป็นเค้าโครงเริ่มต้น ตรวจสอบว่ามีป้ายกำกับเล็กๆ เรียงกันอยู่เหนือแผงคุณสมบัติหรือไม่ (หากคุณไม่ได้ใช้ MX แท็กจะอยู่ในแถบสถานะ) ตัวอย่างเช่น หากคุณสร้างเอกสาร HTML เปล่าใหม่ แท็กขนาดเล็กด้านบนควรเป็น <body> โปรดดูภาพด้านล่าง:
สถานที่ที่มีกรอบสีแดงในภาพคือตัวเอกของเราในวันนี้ มาดูที่ "wrap tags" กันก่อน พิมพ์คำสองสามคำบนหน้า เลือกคำเหล่านั้น เลือก "Wrap Tags" ในเมนูคลิกขวา ป้อน "<strong>" (ไม่รวมเครื่องหมายคำพูด) ในกล่องโต้ตอบ Wrap Tags ที่ปรากฏขึ้น จากนั้นกด Enter ข้อความที่เลือกไว้ก่อนหน้านี้มีตัวหนาหรือไม่ ไปที่ซอร์สโค้ดและดูข้อความที่เลือกล้อมรอบด้วยแท็ก <strong> หรือไม่ คุณสามารถลองเพิ่มแท็กอื่นๆ เช่น: <a>, <p> คุณยังสามารถป้อนแอตทริบิวต์ได้โดยตรงที่นี่ ตัวอย่างเช่น: <p style="color:#CC0000"> นี่เป็นเพียงคำอธิบายทั่วไป หากคุณมีคำถามใดๆ โปรดตรวจสอบความช่วยเหลือของ Dreamweaver
เรามาพูดถึงวิธีใช้ตัวเลือกแท็กกัน
เมื่อเราเลื่อนเคอร์เซอร์ไปที่ข้อความตัวหนา เราจะพบว่ามี <strong> เพิ่มเติมอยู่หลัง <body> ซึ่งหมายความว่ามีแท็ก <strong> อยู่นอกข้อความที่มีเคอร์เซอร์อยู่ และมีแท็ก <body> อยู่นอกแท็ก <strong> ต่อไป เรามาเพิ่มตารางอื่น เลื่อนเคอร์เซอร์ไปที่ตาราง และดูโครงสร้างของแท็ก ผมเชื่อว่าเพื่อนๆ ที่มีพื้นฐาน HTML บ้างน่าจะเข้าใจได้ง่ายครับ
สมมติว่าตอนนี้เราต้องการแทรกตารางและใช้ CSS เพื่อย้ายตารางลง 10 พิกเซล ขั้นแรกให้แทรกตาราง จากนั้นเลื่อนเคอร์เซอร์ไปที่ตาราง ในขณะนี้ คุณควรเห็นคำว่า <body><table><tr><td> บนตัวเลือกแท็ก จากนั้นคลิกขวาที่ป้ายกำกับตารางแล้วคุณจะเห็นสี่ตัวเลือก ลบแท็ก แก้ไขแท็ก ตั้งค่าคลาส และตั้งค่า ID
ลบแท็ก: ลบแท็ก (มีแท็กพิเศษบางแท็กที่ไม่สามารถลบได้ เช่น <table>, <tr>, <td>, <body>...)
แก้ไขแท็ก: แนบแอตทริบิวต์ให้กับแท็ก แก้ไขแอตทริบิวต์ ฯลฯ
กำหนดคลาส: แนบคลาสเข้ากับแท็กนี้ (เช่น หมวดหมู่ของ CSS)
ตั้ง ID: แนบ ID เข้ากับแท็กนี้ (เช่น รหัส CSS)
ที่นี่ เราเลือกที่จะแก้ไขแท็ก จากนั้นเพิ่มแอตทริบิวต์ style="margin-top:10px" ต่อท้าย ซึ่งเป็นวิธีเดียวกับวิธีเขียนซอร์สโค้ดปกติ จากนั้นกด Enter การแก้ไขเสร็จสมบูรณ์ หากคุณไม่เห็นเอฟเฟกต์ใน Dreamweaver โปรดใช้เบราว์เซอร์เพื่อดูตัวอย่าง
มีอีกวิธีหนึ่งที่คุณอาจชอบ เลือกหน้าต่าง → ตัวตรวจสอบแท็ก เมื่อคุณเลือกแท็ก คุณลักษณะทั้งหมดของแท็กที่เลือกในปัจจุบันจะแสดงที่นี่ คุณสามารถแก้ไขได้อย่างรวดเร็วที่นี่ คุณลักษณะที่ป้อนที่นี่ไม่จำเป็นต้องใส่เครื่องหมายคำพูด กด Enter หลังจากแก้ไขเพื่อยืนยัน
ที่นี่เราบอกวิธีการให้คุณเท่านั้นและหวังว่าทุกคนจะได้รับประโยชน์จากมัน
