10 Hacks เกี่ยวกับ Dreamweaver – โปรแกรมแก้ไขโค้ดที่ดีที่สุดสำหรับนักพัฒนาเว็บ

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

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

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

1. มุมมองแบบไดนามิกและมุมมองสด:

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

หลังจากนั้น ให้เปลี่ยน Live View ใน Dreamweaver ซึ่งจะแทนที่แผง Design View เป็น WebKit ที่แสดงผลแบบสดและสมบูรณ์แบบของพิกเซลของหน้าเว็บของคุณ จากนั้นใช้ Javascript แบบสด การจัดการ DOM การสืบค้นฐานข้อมูล โค้ดฝั่งเซิร์ฟเวอร์ และ CSS ที่แสดงผล แทนที่จะเป็นไอคอนตัวยึดตำแหน่งจากอินเทอร์เฟซมุมมองการออกแบบ

2. Bootstrap สำหรับเพิ่มการนำทาง:

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

เพื่อให้เห็นภาพคร่าวๆ ต่อไปนี้คือการสาธิตอย่างรวดเร็วเกี่ยวกับวิธีใช้ Bootstrap ในการพัฒนาของคุณ

การเพิ่มการนำทางด้วย Bootstrap เริ่มต้นด้วยกล่องโต้ตอบเอกสารใหม่ของ Dreamweaver เพียงคลิกปุ่ม Bootstrap Framework ในกล่องโต้ตอบเอกสารใหม่ และเลือกช่องทำเครื่องหมายตัวเลือกเค้าโครงล่วงหน้าเพื่อใช้ตัวเลือกการนำทางที่มีคุณลักษณะครบถ้วน เช่น

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

หากคุณพบว่ามันยาก มีทางเลือกอื่น Dreamweaver ให้คุณสร้างแถบนำทางที่กำหนดเองได้ หากคุณต้องการจานสีเข้ม เพียงเพิ่มคลาส .navbar-inverse ลงในแท็ก <nav> ของคุณ คุณสามารถเล่นกับมันได้เช่นกัน หากคุณต้องการแสดงการนำทางเหนือหน้าเสมอ ให้พิมพ์ .navbar-fixe-top หากคุณต้องการแสดงด้านล่าง ให้พิมพ์ .navbar-fixed-bottom คลาส Bootstrap ทั้งหมดนี้เป็นคลาสมาตรฐาน และการบอกใบ้โค้ดของ Dreamweaver ยังรองรับการเข้ารหัสเหล่านี้ด้วย ดังนั้นคุณจึงไม่ต้องคำนึงถึงการเข้ารหัสทั้งหมด คุณเพียงแค่ต้องพิมพ์ .navbar ในการแสดงองค์ประกอบ และคุณจะได้รับรายการป๊อปอัปซึ่งคุณสามารถเลือกตัวเลือกที่ต้องการได้

3. แช่แข็ง JavaScript:

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

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

4. เน้นรหัส:

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

เมื่อคุณเปิดใช้งานตัวเลือกการเน้นสีแล้ว เพียงดับเบิลคลิกที่แท็กใด ๆ และมันจะเน้นอินสแตนซ์ทั้งหมดของแท็กในหน้าปัจจุบัน อย่างไรก็ตาม ควรกำหนดพารามิเตอร์ เครื่องมือนี้เหมาะอย่างยิ่งสำหรับการระบุและไปที่องค์ประกอบที่คล้ายกันอย่างรวดเร็ว เมื่อคุณไฮไลต์องค์ประกอบแล้ว ให้ใช้แป้นพิมพ์ลัด f3 บนพีซี, CMD-G บน Mac) เพื่อข้ามจากองค์ประกอบที่ไฮไลต์หนึ่งไปยังองค์ประกอบถัดไป นอกจากนี้ ตัวแก้ไขกะสามารถย้อนกลับไปยังส่วนก่อนหน้าได้ นอกจากนี้ การเน้นโค้ดยังใช้งานได้กับแอตทริบิวต์และค่าแท็ก HTML เพื่อให้คุณระบุคลาสที่ต้องการได้อย่างง่ายดาย

5. การเติม JavaScript อัตโนมัติ:

Dreamweaver เป็นแพลตฟอร์มที่ยอดเยี่ยมที่มีโค้ด HTML และ CSS ที่สมบูรณ์และชาญฉลาด แม้ว่าบางคนเชื่อว่า JavaScript ไม่สมบูรณ์ ในกรณีของ jQuery หรือ Prototype ใน Dreamweaver คุณควรรู้ว่ามีส่วนขยาย API ที่ให้รหัสการเติม Javascript รหัสเหล่านี้ช่วยเร่งกระบวนการพัฒนาเนื่องจากการใช้รหัสเหล่านี้ไม่จำเป็นต้องพิมพ์สคริปต์ทั้งหมดและสะดวกสำหรับผู้เขียนโค้ดที่รวดเร็ว

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

6. เข้าถึงไฟล์ที่เกี่ยวข้องได้อย่างง่ายดาย:

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

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

7. ตกแต่งรหัสได้ทันที:

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

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

8. การเข้ารหัสที่ไม่มีขุย:

ไม่ว่า Adobe จะจัดเตรียมเครื่องมือและคุณสมบัติอันทรงพลังของ Dreamweaver ให้ Dreamweaver มากเพียงใด ยิ่งคุณทำงานบนเว็บไซต์มากเท่าไร คุณก็ยิ่งต้องทำงานด้านการเขียนโค้ดมากขึ้นเท่านั้น สิ่งนี้สามารถเพิ่มทักษะของคุณ แต่มันจะเปิดประตูของข้อผิดพลาดไม่รู้จบ เพราะการเขียนโค้ดมากเกินไปไม่ใช่งานง่าย Dreamweaver รู้ดี และด้วยเหตุนี้ในเวอร์ชันล่าสุดของ Dreamweaver ซึ่งเป็น Creative Cloud (CC) จึงมีคุณสมบัติที่เรียกว่า Linting support Linting เป็นเครื่องมือตรวจสอบไวยากรณ์การเขียนโปรแกรมพื้นฐานที่พร้อมใช้งานสำหรับ CSS, HTML และ JavaScript ด้วยวิธีนี้ เมื่อใดก็ตามที่ Dreamweaver ระบุปัญหาหรือข้อผิดพลาดใด ๆ ก็จะส่งพลุจำนวนหนึ่งทั้งทั่วไปและเฉพาะเจาะจง

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

9. ตรวจสอบความเข้ากันได้ของเบราว์เซอร์:

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

เมื่อคลิก จะเป็นการเปิดเมนูแบบเลื่อนลง เลือกตรวจสอบความเข้ากันได้ของเบราว์เซอร์ และดูผลลัพธ์ของความเข้ากันได้ของคุณในหน้าต่างแยกต่างหาก

10. การลดขนาดโค้ด:

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