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

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

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

1. มุมมองแบบไดนามิกด้วย “ดูสด”

เรารู้อยู่แล้วว่า DW เสนอมุมมองคงที่ของไฟล์ที่เปิดอยู่ของเรา แต่จะเกี่ยวกับอะไร "มุมมองแบบไดนามิก" ของแอปพลิเคชันเช่น WordPress?

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

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

2. "Code Navigator" คือ DW ของ Firebug

การก้าวไปอีกขั้นเป็นเรื่องของการ รหัสนาวิเกเตอร์ และเมื่อใน ดูสด หน้าต่าง, ALT-click (Command-Option-click for Mac) ที่ใดก็ได้ในหน้าต่าง, แสดงรหัสที่แสดงรายการนั้นทันที คล้ายกับสิ่งที่คุณอาจเห็นใน Firefox / Firebug.

3. การแช่แข็ง JavaScript

เนื่องจากลักษณะแบบไดนามิกของ Ajax หลายครั้งที่เราต้องโต้ตอบกับหน้าเว็บที่รายการบางรายการไม่ได้แสดงผลหรือมีอยู่ในการโหลดหน้าแรก เหล่านี้เป็นรายการที่ถูกฉีดเข้าไปในหน้าบางครั้งหลังจากโหลดหน้า นี่คือตัวอย่าง:

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

ลองทำสิ่งนี้แทน:

แสดงผลหน้าของคุณใน ดูสด, จากนั้นกดปุ่ม F6 เพื่อตรึง JavaScript ได้ตลอดเวลาช่วยให้คุณสามารถกำหนดเป้าหมายและแยกรหัสที่เกี่ยวข้องกับรายการแบบไดนามิกใด ๆ ในหน้า.

4. เพื่อนที่ดีที่สุดคนต่อไปของ Live View - "Live Code"

เมื่อใช้งาน ดูสด, คุณยังสามารถเปิด รหัสสด. รหัสสด จะอัปเดตโค้ดของคุณเมื่อคุณเลื่อนคลิกและโต้ตอบกับองค์ประกอบและรายการใน หน้าต่าง Live View!

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

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

คลิกที่นี่เพื่ออ่านเพิ่มเติมหรือดาวน์โหลด:

• นามสกุล jQuery API สำหรับ Dreamweaver
• Prototype API extension สำหรับ Dreamweaver

6. บรรเจิดรหัสได้ทันที

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

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

7. รับวิดเจ็ต

เพียงคลิก ขยายไอคอน Dreamweaver (ดูเหมือนว่าเป็นอุปกรณ์เสริม) ใน Application Bar ของคุณและเลือก เรียกดูเว็บวิดเจ็ต. สิ่งนี้จะนำคุณไปยัง Adobe Exchange ซึ่งคุณสามารถค้นหาวิดเจ็ตเพิ่มเติมจากผู้ขายเช่น Yahoo !, JQuery และอื่น ๆ อีกมากมาย.

8. การโค่นล้มและ Dreamweaver

และใช่ Dreamweaver รองรับ Subversion (SVN) สำหรับนักพัฒนาที่ใช้ SVN เพื่อรักษาการควบคุมการแก้ไขโครงการอาจเป็นข่าวดี นักพัฒนาดรีมวีฟเวอร์ Andrew หารือ วิธีใช้ Subversions กับ Dreamweaver.

9. ไม่มีรูปแบบที่ซ้ำซ้อนเพิ่มเติม

หลายคนใช้ Dreamweaver เป็นวิธีการอัปเดตเนื้อหาทางสายตาเช่นโปรแกรมประมวลผลคำ ก่อนที่ Dreamweaver CS4 อาจส่งผลให้เกิดกฎ CSS ซ้ำซ้อนเช่น .class1, .class2, และอื่น ๆ ใน Dreamweaver CS4 เพียงสลับของคุณ ผู้ตรวจสอบอสังหาริมทรัพย์ ไปยัง HTML โหมด (คลิกที่ไอคอน HTML ทางด้านซ้ายของสารวัตร) แล้วคุณจะบอกลา CSS ที่ซ้ำซ้อนทั้งหมดโดยแทรกเฉพาะมาร์กอัพ HTML ที่เหมาะสม.

10. การตรวจสอบแบบฟอร์มทำได้ง่าย

ต้องการตรวจสอบความถูกต้องของเขตข้อมูลแบบฟอร์มของคุณ แต่กังวลว่าคุณจะต้องสร้างใหม่จากศูนย์? ไม่ต้องห่วง. เพียงเลือกองค์ประกอบของฟอร์มที่มีอยู่เช่นฟิลด์ข้อความและใช้ เครื่องมือตรวจสอบ Spry จาก แทรก> เมนู Spry. จากนั้นควบคุมข้อกำหนดการตรวจสอบเช่นอักขระขั้นต่ำหรือสูงสุดโดยตรงจาก ผู้ตรวจสอบอสังหาริมทรัพย์.

โบนัส: อีก 3

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

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

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

เปิดเอกสารที่คุณต้องการตรวจสอบความเข้ากันได้; จากแถบเมนูเดียวกันที่เข้าถึงมุมมอง Code / Split / Design ให้มองไปทางขวาสุดของ 'ตรวจสอบหน้าปุ่ม '.

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

หมายเหตุ: นี่จะไม่ตรวจสอบ IE เวอร์ชันใหม่บน Mac! ในการเลือกเบราว์เซอร์ที่จะใช้สำหรับการทดสอบให้เลือก ตรวจสอบหน้า > การตั้งค่า จากเมนู.

13. ดูตัวอย่างหน้า PHP

Dreamweaver ให้คุณเรียกใช้และดูตัวอย่างโค้ด PHP ภายในซอฟต์แวร์ นี่คือวิธีการติดตั้ง.

เริ่มต้นใช้งาน

1. ก่อนอื่นให้เลือก เว็บไซต์ -> ใหม่ไซต์ จากการนำทางด้านบน.
2. คุณจะเห็นทั้ง ขั้นพื้นฐาน และ ข้อกำหนดของไซต์ขั้นสูง แท็บตัวเลือก มาดำเนินการต่อโดยเลือก แท็บข้อกำหนดของไซต์ขั้นสูง.
3. ป้อนชื่อโฟลเดอร์สำหรับเว็บไซต์ในกล่องที่เหมาะสม (สำหรับตัวอย่างนี้เราจะใช้ "myphp" เป็นชื่อโฟลเดอร์).
4. สร้างโฟลเดอร์อื่นที่ชื่อ "images" โดยป้อนชื่อในฟิลด์ 'Default Images Folder'.
5. ภายใต้ ข้อมูลท้องถิ่น, ป้อนค่าต่อไปนี้ในฟิลด์:
   • ชื่อเว็บไซต์: ชื่อของไซต์ เพื่อใช้ใน Dreamweaver เท่านั้น
   • โฟลเดอร์รูทโลคัล: นี่คือชื่อของไซต์ที่คุณจะใช้งานโปรดอย่าลืมตั้งชื่อไซต์ด้วยวิธีที่จะลดความขัดแย้งหรือทำให้ชื่อสับสน.
   • โฟลเดอร์รูปภาพเริ่มต้น: นี่เป็นตัวเลือก แต่ขอแนะนำให้สร้างทันทีเนื่องจากไซต์ส่วนใหญ่จะใช้รูปภาพในระดับหนึ่ง นี่คือที่ DW จะ 'มอง' เพื่อแทรกภาพในเอกสารของคุณในระหว่างขั้นตอนการเข้ารหัส.
   • ลิงก์ที่เกี่ยวข้องกับ: นี่เป็นการกำหนดวิธีจัดการเอกสารที่เชื่อมโยงใน Dreamweaver คุณสามารถเลือกเอกสารหรือรูท ความแตกต่างระหว่างคนทั้งสองคือ:
     • Document Relative - จะแทรกพา ธ ที่สัมพันธ์กับไฟล์ที่คุณใช้งานอยู่และไอเท็มที่กำลังลิงก์อยู่.
     • Root Relative - ใช้ / ซึ่งทำให้เอกสาร / ไฟล์ถูกเชื่อมโยงกับโฟลเดอร์ ROOT.
     • อีกทางเลือกหนึ่งคือการเพิ่มการกำหนดค่าบางอย่างไปยังไฟล์การกำหนดค่าเซิร์ฟเวอร์ เป็นงานขั้นสูงเราจะใช้การเชื่อมโยงกับเอกสารในตอนนี้.
   • ที่อยู่ HTTP: ป้อนโฟลเดอร์รูทของไซต์สำหรับโครงการของคุณ
   • ลิงก์ขนาดเล็ก: Dreamweaver จะตรวจสอบว่ามีไฟล์ใด ๆ ในโครงการที่มีปัญหาเล็ก ๆ น้อย ๆ เมื่ออัปโหลดไปยังเซิร์ฟเวอร์ การแจ้งเตือนจะปรากฏขึ้นเมื่อคุณใช้: ไซต์ -> ตรวจสอบลิงก์ทั่วทั้งไซต์ คุณสามารถปล่อยให้มันตรวจสอบหากคุณต้องการ โดยส่วนตัวฉันจะไม่ทิ้งมันไว้เพราะฉันมักจะตั้งชื่อไฟล์เป็นตัวพิมพ์เล็ก ไม่แนะนำให้ใช้ตัวอักษรตัวพิมพ์ใหญ่.
   • ขุมทรัพย์: ตรวจสอบการเปิดใช้งานแคช.
6. ใน ข้อมูลระยะไกล หน้าตั้งค่า FTP ของคุณหรือการเข้าถึงอื่น ๆ ไปยังเซิร์ฟเวอร์ระยะไกลหรือออกจากการเข้าถึงเป็นไม่มี.
7. ใน เซิร์ฟเวอร์ทดสอบ หน้าเลือกตัวเลือกที่เกี่ยวข้องกับประเภทไฟล์ / ระบบที่คุณจะทำการทดสอบ.
8. การควบคุมเวอร์ชัน จะไม่ถูกใช้สำหรับตัวอย่างนี้ดังนั้นคุณอาจเว้นว่างไว้เว้นแต่จะคุ้นเคยกับมัน.
9. การปิดบัง ช่วยให้คุณวาง. psd, .fla และไฟล์ต้นฉบับอื่น ๆ ในโฟลเดอร์ไซต์ของคุณและ DW จะไม่สนใจไฟล์เหล่านั้นเมื่ออัปโหลด / อัปเดตไซต์ของคุณ.
10. หมายเหตุการออกแบบ เหมาะอย่างยิ่งสำหรับทีมงานออกแบบเว็บเนื่องจากยังคงทราบถึงการเปลี่ยนแปลงที่เกิดขึ้นกับไฟล์ มันถูกตรวจสอบโดยค่าเริ่มต้นและใช้ได้สำหรับเราที่จะใช้วิธีนี้.
11. ออกจาก คอลัมน์มุมมองไฟล์, สนับสนุน, และ แม่แบบ เป็นค่าเริ่มต้น.
12. กระฉับกระเฉง หน้าเพียงชี้ไปที่โฟลเดอร์ทรัพย์สิน Spry ซึ่งรวมอยู่ใน Dreamweaver โดยอัตโนมัติ ไม่จำเป็นต้องเปลี่ยนสิ่งนี้ เมื่อการตั้งค่าทุกอย่างเสร็จสิ้นให้คลิก ตกลง.

ดูตัวอย่าง PHP ใน Dreamweaver

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

นั่นคือทั้งหมดที่ Happy Dreamweaver'ing :-)

หมายเหตุจากบรรณาธิการ: โพสต์นี้เขียนโดย Jesse Matlock สำหรับ Hongkiat.com ในช่วง 6 ปีที่ผ่านมา Jesse ได้ทุ่มเทอย่างเต็มที่ในการออกแบบ UI การพัฒนาแอพและแนวโน้มของเว็บ เขาเป็นผู้ก่อตั้งและเป็นผู้นำการออกแบบให้กับทีมพัฒนาขนาดเล็ก แต่มีความสามารถเป็นอย่างมากซึ่งมุ่งเน้นที่การพัฒนาแอพตามความต้องการ.