10 เคล็ดลับและเทคนิค Dreamweaver ที่เรียบง่าย แต่มีประโยชน์สำหรับผู้เริ่มต้น

Adobe Dreamweaver เป็นเครื่องมือที่ทรงพลังสำหรับนักออกแบบเว็บไซต์ Dreamweaver จัดเตรียมพื้นผิวการออกแบบภาพและโปรแกรมแก้ไขโค้ดเพื่อพัฒนาเว็บไซต์ แม้ว่าจะมีทั้งข้อดีและข้อเสีย แต่ฟีเจอร์ที่หลากหลายช่วยให้คุณสร้างเว็บไซต์ได้อย่างมีประสิทธิภาพ

ต่อไปนี้คือ 10 เคล็ดลับและเทคนิค Dreamweaver ที่เรียบง่ายแต่มีประโยชน์สำหรับผู้เริ่มต้น

1. ลบตัวแบ่งบรรทัด:

ขณะคัดลอกข้อความจากเอกสาร อีเมล หรือไฟล์ Word ไปยัง Dreamweaver คุณจะมีตัวแบ่งบรรทัดที่ส่วนท้ายของย่อหน้าหรือบรรทัด อักขระตัวแบ่งลิงก์ <br> ส่งสัญญาณการสิ้นสุดบรรทัด ดังนั้นข้อความใดๆ ที่ตามมาจะปรากฏในบรรทัดด้านล่าง อักขระเหล่านี้มองไม่เห็นจึงยากที่จะลบออก แม้ว่าโดยทั่วไป Dreamweaver จะไม่เน้นอักขระเหล่านี้ แต่คุณสามารถเปลี่ยนการตั้งค่าในเมนูการตั้งค่าเพื่อให้โปรแกรมแสดงไอคอนสีเหลืองขนาดเล็กซึ่งระบุการขึ้นบรรทัดใหม่ เมื่อมองเห็นตัวแบ่งบรรทัด คุณสามารถลบออกได้อย่างง่ายดาย

2. อย่าลืมกำหนดไซต์:

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

3. เพิ่มขนาดตัวอักษรของรหัสของคุณ:

ด้วยคุณสมบัติของ Dreamweaver ในการปรับขนาดฟอนต์ของคุณ คุณสามารถเพิ่มขนาดโค้ดได้ในไม่กี่ขั้นตอนง่ายๆ ในการเพิ่มขนาดแบบอักษรของคุณก่อนอื่นให้เลือก Dreamweaver > Preferences จากนั้นคลิกประเภท Fonts จากนั้นเลือกขนาดใหม่แล้วคลิกตกลง วิธีนี้จะช่วยให้คุณทำให้โค้ดอ่านได้ง่าย และคุณสามารถทำงานพัฒนาเว็บไซต์ของคุณได้เป็นเวลานานโดยไม่ทำให้ต้องปวดหัว

4. ปิด CSS พื้นหลังชวเลข:

คุณลักษณะหนึ่งของ CSS คือคุณสมบัติพื้นหลัง คุณลักษณะนี้ช่วยให้คุณสามารถเพิ่มสีหรือรูปภาพลงในพื้นหลังของคุณได้ คุณสมบัติชวเลขพื้นหลังของ Dreamweaver ทำให้โค้ด 3 บรรทัดสั้นลงเหลือเพียงบรรทัดเดียวที่กำหนดรูปภาพ สี และคุณสมบัติการทำซ้ำ สิ่งนี้ทำให้การกำหนดคุณสมบัติพื้นหลังง่ายขึ้นอย่างแน่นอน แต่ถ้าคุณปล่อยให้คุณสมบัติหนึ่งอยู่ในเวอร์ชันชวเลข เว็บเบราว์เซอร์จะถือว่า "ไม่มี" ตัวอย่างเช่น ในขณะที่เปลี่ยนพื้นหลังหากคุณระบุเฉพาะคุณสมบัติของรูปภาพ เว็บเบราว์เซอร์จะลบสีที่มีอยู่ออกจากพื้นหลังก่อนหน้า ดังนั้นจึงเป็นการดีกว่าที่จะปิดชวเลขพื้นหลัง CSS เพื่อหลีกเลี่ยงปัญหานี้

5. คัดลอกสไตล์ด้วย CSS Designer:

ด้วย CSS Designer คุณสามารถปรับปรุงสไตล์บนหน้าเว็บของคุณได้ หากคุณต้องการใช้คุณสมบัติเพิ่มเติมของตัวออกแบบ CSS ให้คลิกขวาที่ตัวเลือกใด ๆ เพื่อใช้การดำเนินการคัดลอกหรือทำซ้ำ ตัวเลือกเหล่านี้ช่วยให้คุณคัดลอกสไตล์จากตัวเลือกหนึ่งไปยังอีกตัวเลือกหนึ่งได้ ลักษณะเหล่านี้รวมถึงพื้นหลัง ข้อความ ภาพเคลื่อนไหว หรือเส้นขอบ หากคุณต้องการคัดลอกตัวเลือกทั้งหมด ให้ใช้คำสั่งมาตรฐาน ทำซ้ำหรือทำซ้ำในคำสั่งแบบสอบถามสื่อสำหรับแนวทางที่เป็นเป้าหมาย ทางลัดเหล่านี้จะช่วยคุณประหยัดเวลาได้มาก และยังรักษาสไตล์ที่สม่ำเสมอ

6. ลบแถบนำทาง:

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

7. จัดการไฟล์ของคุณ:

ไฟล์ทั้งหมดมีอยู่ในแผงไฟล์เมื่อคุณตั้งค่าไซต์ด้วย Dreamweaver คุณสามารถใช้แผงไฟล์นี้สำหรับฟังก์ชันต่างๆ เช่น เปลี่ยนชื่อ ย้าย และไฮไลต์ชื่อไฟล์ นี่อาจเป็นเรื่องปกติและคุณอาจรู้ทั้งหมดนี้ แต่หน้าเว็บต่างจากไฟล์ปกติ หน้าเว็บมีรูปภาพ ลิงก์ไปยังเว็บเพจอื่นๆ และรูปแบบ CSS จากไฟล์สไตล์ชีตภายนอก การเปลี่ยนชื่อรูปภาพ หน้าเว็บ หรือไฟล์ CSS ตามปกติผ่าน Windows explorer อาจทำให้ลิงก์เสียได้ ในขณะที่ Dreamweaver อนุญาตให้คุณอัปเดตลิงก์โดยอัตโนมัติหากคุณย้ายหรือเปลี่ยนชื่อไฟล์โดยใช้แผงไฟล์ วิธีนี้ไม่มีลิงก์เสีย

8. เลือกใช้ตัวเลือกแท็ก:

ขณะใช้สไตล์คลาส CSS การเพิ่มหรือลบแท็กด้วยความแม่นยำอาจทำได้ยาก สำหรับการเลือกบรรทัดที่แม่นยำ ตัวเลือกแท็กของ Dreamweaver นั้นดีที่สุด ตัวเลือกแท็กจะอยู่ที่ด้านล่างซ้ายของหน้าต่างเอกสาร ตัวเลือกนี้แสดง HTML และแท็กอื่นๆ ทั้งหมดที่อยู่รอบข้อความ คุณสามารถเลือกแท็กเฉพาะได้โดยคลิกแท็กที่มีอยู่ในแถบตัวเลือกแท็ก แท็กที่ไฮไลต์แสดงว่าแท็กถูกเลือก

9. ใช้ตัวอย่าง:

Dreamweaver นำเสนอตัวอย่างที่เป็นบิตหลักของโค้ดที่สามารถประหยัดเวลาได้มาก ข้อมูลโค้ดจะซิงค์ผ่าน Creative Cloud ซึ่งทำให้แน่ใจได้ว่าข้อมูลโค้ดเหล่านี้พร้อมใช้งานในทุกระบบ คุณสามารถกำหนดรายการที่ใช้มากที่สุดเป็นแป้นพิมพ์ลัดได้ หากคุณต้องการแก้ไขแป้นพิมพ์ลัด ให้เปิดการออกแบบแป้นพิมพ์ลัดและทำซ้ำชุดมาตรฐาน จากนั้นเลือกหมวดหมู่ตัวอย่างด้านล่างส่วนคำสั่งเพื่อเลือกรายการโปรดของคุณ จากนั้นคุณจะพบรายการตัวอย่างที่มีอยู่ทั้งหมด รวมถึงตัวอย่างที่คุณสร้างขึ้น ส่วนที่ยากที่สุดคือการหาว่าชุดคีย์บอร์ดใดที่ไม่ได้ใช้ แต่สิ่งนี้สามารถแก้ไขได้โดยใช้ตัวปรับแต่ง

10. เชื่อมต่อ WordPress และ Dreamweaver:

Dreamweaver และ WordPress สร้างทีมที่ยอดเยี่ยม คุณสามารถออกแบบและแก้ไขหน้า WordPress ด้วยชุดเครื่องมือไฟล์ไดนามิกของ Dreamweaver ชุดเครื่องมือนี้ประกอบด้วยตัวกรองแบบกำหนดเอง ไฟล์ที่เกี่ยวข้องแบบไดนามิก และการบอกใบ้รหัสเฉพาะไซต์ ส่วนที่ยากคือการหาวิธีทำงานกับหน้าเว็บไซต์อื่นๆ ด้วย Dreamweaver ก่อนอื่นคุณควรเริ่มต้นด้วยไฟล์ index.php ที่อยู่ในรูทของไซต์ WordPress และนำทางจากที่นั่น คุณสามารถเพิ่มเส้นทางไปยังที่อยู่เว็บได้โดยตรงหรือใช้คุณสมบัติ Dreamweaver เพื่อคลิกลิงก์ หลังจากที่หน้าแสดง CSS และเครื่องมืออื่นๆ ใน Dreamweaver อยู่ในการควบคุมของคุณ

Adobe Dreamweaver เหมาะสำหรับสร้างเว็บไซต์ นอกจากคุณสมบัติพื้นฐานอย่างการเติมโค้ด การยุบโค้ด และการเน้นไวยากรณ์แล้ว ยังมาพร้อมกับคุณสมบัติขั้นสูงบางอย่าง เช่น การวิปัสสนาโค้ดและการตรวจสอบไวยากรณ์แบบเรียลไทม์ เคล็ดลับที่กล่าวถึงเหล่านี้จะช่วยให้คุณสร้างเว็บไซต์ของคุณได้อย่างมีประสิทธิภาพมากขึ้น หากคุณกำลังมองหาเครื่องมือในการสร้างเว็บไซต์โดยไม่ต้องเขียนโค้ดมากนัก ลองดูเครื่องมือสร้างเว็บไซต์เหล่านี้