10 mẹo & thủ thuật Dreamweaver hữu ích cho người mới bắt đầu

Một người dùng Dreamweaver chắc chắn sẽ nghĩ rằng đó là một cường quốc. Được đóng gói với vô số tính năng, tùy chọn và có thể gây tranh cãi là một trong những IDE nổi tiếng nhất (Môi trường phát triển tích hợp) trong thị trường ngày nay. Nó có thể không đáp ứng các tiêu chí mà một số nhà phát triển yêu cầu, tuy nhiên, Dreamweaver chắc chắn cung cấp một loạt các công cụ phát triển, hợp tác và mã hóa. Các tùy chọn và công cụ này được ẩn dưới các lớp trình đơn ít trực quan đáng tiếc, đó là lý do tại sao chúng tôi cung cấp hướng dẫn trong bài viết ngày hôm nay.

Chúng tôi sẽ chỉ cho bạn một số chức năng mạnh mẽ nhất của Dreamweaver để hỗ trợ bạn truy cập chúng nhanh chóng, cùng với nhiều thủ thuật hữu ích khác giúp bôi trơn thời gian phát triển của bạn và cải thiện đáng kể chất lượng mã của bạn. Danh sách đầy đủ sau khi nhảy.

1. Chế độ xem động với “Xem trực tiếp”

Chúng tôi đã biết rằng DW cung cấp chế độ xem tĩnh cho các tệp đang mở của chúng tôi, nhưng còn về "quan điểm năng động" của một ứng dụng như WordPress?

Đầu tiên, chúng ta cần phải nói DW sử dụng cài đặt nào để trình bày"quan điểm năng động" chính xác Để làm điều này, chọn Cài đặt yêu cầu HTTP từ Xem> Tùy chọn xem trực tiếp menu, sau đó vào menu ĐƯỢC hoặc là BÀI ĐĂNG tham số bạn cần để xem ứng dụng của bạn một cách chính xác.

Sau đó bằng cách chuyển sang Xem trực tiếp trong DW, nó thay thế cái cũ Chế độ xem thiết kế khung với kết xuất WebKit trực tiếp, hoàn hảo pixel của trang của bạn; hoàn thành với Javascript trực tiếp, thao tác DOM, truy vấn cơ sở dữ liệu, mã phía máy chủ và CSS được hiển thị, thay vì các biểu tượng giữ chỗ bạn thấy trong Chế độ xem thiết kế.

2. "Code Navigator" là Firebird của DW

Tiến lên một bước nữa là tất cả về Mã điều hướng và khi ở trong Xem trực tiếp cửa sổ, nhấp chuột ALT (Nhấp chuột tùy chọn cho Mac) ở bất kỳ đâu trong cửa sổ, ngay lập tức trình bày mã đã hiển thị mục đó. Tương tự như những gì bạn có thể thấy trong Firefox / Fireorms.

3. JavaScript đóng băng

Do tính chất động của Ajax, nhiều lần chúng ta cần tương tác với một trang nơi các mục nhất định không được hiển thị hoặc có sẵn khi tải trang đầu tiên. Đây là những mục được đưa vào trang một thời gian sau khi tải trang. Đây là một ví dụ:

Bạn có thể muốn thay đổi kiểu dáng của một mẹo công cụ được triển khai hoàn toàn bằng JavaScript. Trước ngày hôm nay, bạn phải tìm kiếm một cách có phương pháp thông qua các tập lệnh của bạn để tìm những gì đang được tạo và ở đâu.

Thay vào đó, hãy thử điều này:

Kết xuất trang của bạn trong Xem trực tiếp, sau đó đánh F6 để đóng băng JavaScript bất cứ lúc nào, cho phép bạn nhắm mục tiêu và phân tích mã liên quan đến bất kỳ mục động nào trong trang.

4. Người bạn tốt nhất tiếp theo của Live View - "Mã sống"

Khi đang sử dụng Xem trực tiếp, bạn cũng có thể bật Mã sống. Mã sống sẽ cập nhật mã của bạn khi bạn di chuột, nhấp và tương tác với các thành phần và mục trong Cửa sổ Live View!

5. Hoàn thành JavaScript tự động

Dreamweaver đi kèm với việc hoàn thành mã HTML và CSS thông minh và đầy đủ, nhưng những gì về Javascripts? Nếu bạn mã jQuery hoặc Prototype trong Dreamweaver, thì bạn nên biết có các tiện ích mở rộng API cung cấp hoàn thành mã Javascript. Nó làm giảm việc gõ cần thiết và có thể rất hữu ích cho các lập trình viên nhanh.

Nhấn vào đây để đọc thêm hoặc tải về:

• Phần mở rộng API jQuery cho Dreamweaver
• Phần mở rộng API nguyên mẫu cho Dreamweaver

6. Làm đẹp mã khi đang bay

Trang mã của bạn trông giống như các dòng mã không có tổ chức, lộn xộn? Sử dụng Áp dụng định dạng nguồn tính năng và định dạng lại chính xác theo sở thích của bạn. Để nhanh chóng làm sạch chúng, nhấp vào Định dạng mã nguồn biểu tượng ở dưới cùng của Thanh công cụ mã hóa (Chỉnh sửa> Thanh công cụ> Mã hóa) và chọn Cài đặt định dạng mã để đặt định dạng ưa thích của bạn.

Bạn cũng có thể truy cập tùy chọn định dạng từ Các lệnh> Áp dụng định dạng nguồn hoặc chỉ áp dụng nó cho một khối mã được chọn bằng cách chọn Áp dụng định dạng nguồn cho lựa chọn Tùy chọn.

7. Nhận tiện ích

Chỉ cần nhấp vào Mở rộng biểu tượng Dreamweaver (nó trông giống như một thiết bị) trong Thanh ứng dụng của bạn và chọn Duyệt tìm các tiện ích web. Điều này sẽ đưa bạn đến Adobe Exchange nơi bạn có thể tìm thấy các tiện ích bổ sung từ các nhà cung cấp như Yahoo!, JQuery và nhiều người khác.

8. lật đổ & Dreamweaver

Và vâng, Dreamweaver hỗ trợ Subversion (SVN). Đối với các nhà phát triển sử dụng SVN để duy trì kiểm soát sửa đổi dự án của họ, đây có thể là một tin tốt. Nhà phát triển Dreamweaver Andrew Voltmer thảo luận làm thế nào bạn có thể sử dụng Subversions với Dreamweaver.

9. Không còn kiểu dáng dư thừa

Nhiều người sử dụng Dreamweaver như một cách để cập nhật nội dung một cách trực quan, giống như một trình xử lý văn bản. Trước Dreamweaver CS4, điều này có thể dẫn đến các quy tắc CSS dư thừa như .lớp 1, .lớp 2, vân vân Trong Dreamweaver CS4, chỉ cần chuyển đổi Thanh tra tài sản đến HTML chế độ (nhấp vào biểu tượng HTML ở bên trái của Thanh tra) và bạn sẽ nói lời tạm biệt với tất cả CSS dư thừa đó, chỉ chèn đánh dấu HTML thích hợp.

10. Xác thực mẫu dễ dàng

Bạn muốn xác thực các trường biểu mẫu của mình, nhưng lo lắng rằng bạn sẽ phải xây dựng lại từ đầu? Đừng lo lắng. Chỉ cần chọn một thành phần biểu mẫu hiện có, chẳng hạn như trường văn bản và áp dụng một Tiện ích xác thực Spry từ Chèn> menu Spry. Sau đó kiểm soát các yêu cầu xác thực như ký tự tối thiểu hoặc tối đa trực tiếp từ Thanh tra tài sản.

Tiền thưởng: thêm 3

11. Dễ dàng truy cập các tập tin liên quan

Khi bạn mở tệp HTML hoặc PHP, bây giờ bạn sẽ thấy một hàng tên tệp phụ thuộc, chẳng hạn như CSS, Javascript và thậm chí các tệp được bao gồm cho PHP, ở đầu cửa sổ tài liệu. Bạn có thể dễ dàng chuyển sang các tệp này, thực hiện thay đổi và lưu chúng, tất cả mà không cần mở chúng ra. Khi bạn bấm vào bất kỳ tệp nào trong thanh Tệp liên quan, bạn sẽ thấy nguồn của nó trong dạng xem Mã và trang mẹ trong dạng xem Thiết kế. Hoặc sử dụng Bộ điều hướng mã để truy cập nhanh mã nguồn CSS ảnh hưởng đến lựa chọn hiện tại của bạn.

12. Kiểm tra tính tương thích của trình duyệt

Mở tài liệu bạn muốn kiểm tra tính tương thích; từ cùng một thanh menu nơi truy cập Mã / Chia / Thiết kế được truy cập, nhìn về phía bên phải cho 'Kiểm tra trangnút '.

Nhấp vào nó sẽ mở rộng menu thả xuống, chọn 'Kiểm tra tính tương thích của trình duyệt'. Các Cửa sổ kết quả tương thích trình duyệt sẽ hiển thị ở dưới cùng của cửa sổ với bất kỳ vấn đề nào bạn cần giải quyết.

Lưu ý: Điều này sẽ KHÔNG kiểm tra các phiên bản IE mới trên Mac! Để chọn trình duyệt nào sẽ sử dụng để kiểm tra, chọn Kiểm tra trang > Cài đặt từ thực đơn.

13. Xem trước các trang PHP

Dreamweaver cho phép bạn chạy và xem trước các mã PHP trong phần mềm. Đây là cách để thiết lập nó.

Bắt đầu

1. Đầu tiên, chọn Trang web -> Trang web mới từ điều hướng hàng đầu.
2. Bạn sẽ thấy cả Căn bản và Định nghĩa trang web nâng cao các tab tùy chọn. Hãy tiếp tục bằng cách chọn Tab Định nghĩa trang nâng cao.
3. Nhập tên thư mục cho trang web vào ô thích hợp (ví dụ này chúng tôi sẽ sử dụng "myphp" làm tên thư mục).
4. Tạo một thư mục khác có tên "hình ảnh" bằng cách nhập tên của nó vào trường 'Thư mục hình ảnh mặc định'.
5. Ở dưới cái Thông tin địa phương, nhập các giá trị sau vào các trường:
   • Tên trang web: tên của trang web. Chỉ được sử dụng trong Dreamweaver
   • Thư mục gốc cục bộ: Đây là tên của trang web bạn sẽ làm việc. Hãy nhớ đặt tên cho các trang web theo cách để giảm thiểu xung đột hoặc tên khó hiểu.
   • Thư mục hình ảnh mặc định: Đây là tùy chọn, nhưng bạn nên tạo ngay bây giờ vì hầu hết các trang web sẽ sử dụng hình ảnh ở một mức độ nào đó. Đây là nơi DW sẽ 'nhìn' để chèn hình ảnh vào tài liệu của bạn trong giai đoạn mã hóa.
   • Liên kết liên quan đến: Điều này xác định cách liên kết tài liệu trong Dreamweaver sẽ được xử lý. Bạn có thể chọn Tài liệu hoặc Root. Sự khác biệt giữa hai là:
     • Document Relative - Sẽ chèn một đường dẫn liên quan đến tệp bạn đang làm việc và mục được liên kết đến.
     • Root Relative - Sử dụng / khiến tài liệu / tệp được liên kết liên quan đến thư mục ROOT.
     • Một cách khác là thêm một số cấu hình vào các tệp cấu hình máy chủ. Là một nhiệm vụ nâng cao hơn, bây giờ chúng ta sẽ sử dụng Tài liệu liên quan.
   • Địa chỉ HTTP: nhập thư mục gốc của trang web cho dự án của bạn
   • Liên kết phân biệt chữ hoa chữ thường: Dreamweaver sẽ kiểm tra xem có bất kỳ tệp nào trong dự án có thể có sự cố phân biệt chữ hoa chữ thường khi tải lên máy chủ không. Thông báo sẽ được hiển thị khi bạn sử dụng: Trang web -> Kiểm tra Liên kết Sitewide. Bạn có thể để nó kiểm tra nếu bạn muốn. Cá nhân tôi không để nó được kiểm tra vì tôi luôn đặt tên các tập tin bằng chữ thường. Thư viết hoa không được khuyến khích.
   • Bộ nhớ cache: Kiểm tra kích hoạt bộ đệm.
6. bên trong Thông tin từ xa trang, thiết lập FTP của bạn hoặc quyền truy cập khác vào máy chủ từ xa hoặc để lại Quyền truy cập vào Không.
7. bên trong Máy chủ thử nghiệm Trang chọn tùy chọn liên quan đến loại / hệ thống tệp bạn sẽ kiểm tra.
8. Kiểm soát phiên bản sẽ không được sử dụng cho ví dụ này vì vậy bạn có thể để trống trừ khi quen với nó.
9. Che giấu cho phép bạn đặt các tệp .sheet, .fla và các tệp nguồn khác trong thư mục trang web của bạn và DW sẽ bỏ qua chúng khi tải lên / cập nhật trang web của bạn.
10. Ghi chú thiết kế là lý tưởng cho một nhóm thiết kế web vì nó lưu ý đến những thay đổi được thực hiện đối với các tệp. Nó được kiểm tra theo mặc định và tốt cho chúng tôi sử dụng theo cách này.
11. Rời khỏi Cột xem tệp, Góp phần, và Mẫu như mặc định.
12. Các Spry trang chỉ cần trỏ đến thư mục tài sản Spry được tự động đưa vào Dreamweaver. Không cần phải thay đổi điều này. Khi mọi cài đặt kết thúc, nhấp vào được.

Xem trước PHP trong Dreamweaver

Bây giờ hãy mở một tệp PHP và thực hiện các thay đổi cần thiết cho nó. Để xem tập tin này trong Dreamweaver đơn giản nhấn F12 và kết quả sẽ hiển thị trong trình duyệt mặc định của bạn. Bạn có thể thay đổi trình duyệt nào được sử dụng trong Chỉnh sửa -> Sở thích -> Xem trước trong Trình duyệt. Điều này cho phép thời gian chỉnh sửa để xem trước nhanh hơn, loại bỏ nhu cầu nhập URL dài vào thanh trình duyệt của bạn hoặc sử dụng phần mềm máy chủ khác để hiển thị các tệp PHP, tất cả đều tiết kiệm thời gian!

Đó là tất cả. Chúc mừng Dreamweaver'ing :-)

Ghi chú của biên tập viên: Bài này được viết bởi Jesse Matlock cho Hongkiat.com. Trong 6 năm qua, Jesse đã đắm mình trong thiết kế giao diện người dùng, phát triển ứng dụng và xu hướng web. Ông là người sáng lập và lãnh đạo thiết kế cho một nhóm phát triển nhỏ, mặc dù rất tài năng, tập trung vào phát triển ứng dụng bespoke.