Xây dựng Website: Thủ thuật với DREAMWEAVER MX

Bạn đang gặp khó khăn với Dreamweaver MX ? Hãy vào đây! 01. Tự động xuống dòng Dreamweaver MX có một vài chế độ mặc định không mấy hấp dẫn khi làm cho các đoạn mã của bạn trở nên lộn xộn hơn. Một trong những "kẻ gây rối" là Tự động xuống dòng (Automatic Wrapping) nằm trong menu Edit > Preferences > Code Format. Khi chế độ này được chọn, các đoạn mã lệnh sẽ tự động tách dòng, tương đương với việc xuất hiện các dấu cách dòng trong văn bản HTML. Mặc dù điều này không ảnh hưởng tới kết quả hiển thị trong trình duyệt web song điều này lại làm cho bạn khó theo dõi và biên tập lại các đoạn mã. Vì vậy, tốt hơn cả là hãy tắt chế độ Tự động xuống dòng. 02. Sử dụng chế độ hiển thị thiết kế và mã Người sử dụng Dreamweaver thường hay chuyển đổi giữa hai chế độ hiển thị là Thiết kế (Design View) và Mã lệnh (Code View). Nếu màn hình của bạn đủ lớn, hãy chọn chế độ Thiết kế và Mã lệnh (Design and Code view). Lựa chọn này giúp bạn dễ dàng quan sát ngay lập tức sự thay đổi xay ra ở chế độ hiển thị Code khi bạn sửa trong chế độ Design (và cũng hiệu quả nếu bạn là người muốn nhanh chóng học hỏi thêm về các thủ thuật viết mã lệnh). 03. Thiết lập một cửa sổ Properties Phải nói rằng Dreamweaver MX có những cải tiến lớn trong việc tạo điều kiện cho người sử dụng thiết kế được những trang web với các công nghệ hiện tại. Tuy nhiên, ở chế độ mặc định, ứng dụng này chỉ giúp bạn tạo ra các đoạn mã chuẩn. Cửa sổ công cụ Properties là một minh chứng, nó cung cấp cho bạn đầy đủ các thuộc tính của một trường đầu vào (input field). Hãy kích vào ‘A’ ở góc phải trường Format để thay đổi toàn bộ cửa sổ công cụ, khi đó bạn có thể sử dụng định dạng CSS. 04. Thêm các lớp CSS Không giống như nhiều ứng dụng khác, Dreamweaver cho phép bạn thực hiện cùng một công việc với nhiều phương pháp khác nhau. Bạn có thể thêm các định dạng CSS và các lớp CSS vào các thành phần của trang. Các định dạng có thể được “kéo và thả" từ các cửa sổ CSS Style. Bạn cũng có thể kích vào một thành phần của trang ở chế độ hiển thị Design và chọn các định dạng thích hợp từ cửa sổ CSS Style hoặc từ menu sổ Styles trong cửa sổ Properties hoặc bằng cách kích chuột phải vào các thành phần thích ứng từ đường dẫn dưới chế độ Design. 05. Tận dụng các đoạn mã chung Nếu bạn phải viết các đoạn mã cho nhiều trang web, bạn sẽ nhận thấy tầm quan trọng của việc sử dụng lặp lại một đoạn mã chung. Cửa sổ Snippets trong Dreamweaver MX có thể giúp bạn và cho phép bạn lưu giữ các đoạn mã giống nhau, bao gồm cả CSS, XHTML và JavaScript, sau đó thêm vào các trang bằng cách "kéo và thả". Ngoài ra, tiện ích này còn có thể dễ dàng tổ chức thành các thư mục rất hữu dụng. 06. Khai thác các đoạn mã có sẵn Dreamweaver MX có chứa nhiều đoạn JavaScript khá hữu ích dưới dạng các tiện ích cài sẵn. Tuy nhiên, ở chế độ mặc định, bạn sẽ không thể sử dụng được chúng khi mở cửa số Behavious bởi Dreamweaver MX ‘khóa’ các ứng dụng này. Trong menu +, tới mục Show Events For, chọn Netscape 6.0 hoặc IE 6.0. Tuy nhiên, hãy nhớ kiểm tra kết quả trên cả hai trình duyệt này. 07. Tạo ra tệp khuôn mẫu trong Dreamweaver Trong phần này bạn sẽ làm quen với việc tạo ra các tệp khuôn mẫu (template) cơ bản trong phần mềm Dreamweaver MX Bước 1. Tạo một trang web như bạn vẫn thường làm. Khi kết thúc công việc, chọn menu File > Save as Template và đặt tên cho tệp khuôn mẫu bạn chọn (đừng sử dụng các dấu cách). Hãy nhớ rằng bạn có thể thay đổi mọi thứ sau đó và Dreamweaver MX có thể tự động cập nhật mọi trang web sử dụng khuôn mẫu này. Bước 2. Đinh nghĩa các vùng có thể chỉnh sửa. Chọn các vùng của trang và kích vào menu Insert > Template Objects > Editable Regions. Gán tên cho vùng chọn (không sử dụng dấu cách). Lưu trang web của bạn và chọn menu File > New > Templates để tạo một trang web dựa trên khuôn mẫu đó. Bước 3. Nội dung đầu trang. Để thêm nội dung vào phần đầu trang web, chẳng hạn các đoạn JavaScript mô tả trang, bạn gõ nội dung vào sau đoạn (phần này do Dreamweaver tự động thêm vào) ở đầu trang. 08. Sử dụng các tệp khuôn mẫu lồng Các tệp khuôn mẫu web (web template) hiển nhiên rất hữu ích, tuy nhiên nhiều khi chúng lại trở nên gò bó, đặc biệt khi trang web của bạn phức tạp hoặc có nhiều phần đặc biệt. Dreamweaver MX khắc phục nhược điểm này bằng cách hỗ trợ bạn sử dụng các tệp khuôn mẫu lồng (nested template). Các tệp khuôn mẫu chung có thể quy định các đặc điểm thống nhất của toàn bộ website, chẳng hạn logo và kết cấu trong khi các tệp khuôn mẫu lồng có thể định dạng cho từng phần riêng biệt, chẳng hạn tiêu đề. 09. Thêm tiêu đề Mặc định, các trang web được tạo ra bởi Dreamweaver không có tiêu đề. Nếu không để ý thay đổi, trang web của bạn sẽ hiển thị trên trình duyệt với tiêu đề "Untitled Document" và làm cho nó trở nên thiếu chuyên nghiệp và nực cười. Để thêm tiêu đề trang, vào menu View > Toolbars > Document. Hãy lưu ý rằng các trang web được tạo từ các tệp khuôn mẫu sẽ hiển thị tiêu đề có thể khác với "Untitled Document". 10. Tận dụng @import Khi sử dụng các tệp khuôn mẫu của Dreamweaver và kết xuất các mẫu định dạng với lệnh @import, bạn sẽ thấy rằng ở chế độ thiết kế (Design), sẽ không hiển thị các trang với định dạng CSS. Ở góc độ nào đó, đây là một tiện ích - bạn sẽ nhìn thấy trang web theo cách mà các trình duyệt cũ hiển thị mà không cần phải mất thời gian mở Netscape 4 để kiểm tra kết quả. Tuy nhiên, nếu bạn muốn muốn kiểm tra ở chế độ hiển thị Design, copy tệp CSS vào thư mục Template. 11. Sử dụng cửa sổ site Cửa sổ công cụ site (Site Panel) của Dreamweaver MX làm cho nhiều tiện ích quản lý thiết kế trang web trở nên dễ dàng tiếp cận. Giả sử bạn muốn thay đổi tiêu đề trang, Dreamweaver MX sẽ tự động cập nhật tới tất cả các trang khác trong site của bạn. Tương tự vậy, các thuộc tính thư mục và kết nối cũng sẽ được cập nhật. Hãy lưu ý rằng các tệp đang mở sẽ không được cập nhật cho tới khi bạn lưu tệp đó. Ngoài ra, trong phiên bản dành cho Macintosh của Dreamweaver MX, cửa sổ này là một cửa sổ độc lập. 12. Kiểm tra các đường link sai Trong nhiều trường hợp, các đường kết nối trong tệp HTML của bạn không hoạt động. Bạn có thể đã gõ sai địa chỉ kết nối do đó Dreamweaver đưa ra một chức năng cài sẵn để khắc phục là công cụ Kiểm tra kết nối (Link Checker). Tới menu File > Check Links (hoặc Site > Check Links Sidewide với Mac) và chương trình sẽ đưa ra một bản thông báo chi tiết về các đường kết nối sai hoặc những tệp kết nối đơn độc (tức là các tệp không kết nối tới bất cứ tệp nào khác). 13. Sử dụng các công cụ bên ngoài Bạn có thể cài Dreamweaver MX nhưng điều đó không có nghĩa là đó là phần mềm duy nhất trong máy tính của bạn. Trên thực tế, có nhiều người bắt đầu công việc thiết kế của mình bằng các phần mềm khác hoặc viết các dòng lệnh từ các phần mềm soạn thảo văn bản. Sau khi hoàn thành, họ đã kiểm tra và sửa lỗi rồi mới đưa vào Dreamweaver, một công cụ thiết kế tuyệt vời, để bổ sung nội dung. Cũng có thể những người khác lại chỉ sử dụng duy nhất Dreamweaver. Đó là quyền của họ và hãy lựa chọn phương pháp nào phù hợp nhất với bạn. 14. Tăng cường chế độ hiển thị mã lệnh Hãy cố gắng tận dụng tối đa khả năng của chế độ hiển thị mã lệnh (Code view). Để làm được điều này, chọn View Options từ thanh công cụ Document và chọn chế độ Word Wrap, Line Numbers, Highlight Invalid HTML, Syntax Coloring và Auto Indent. Khi đó, bạn sẽ cảm thấy dễ dàng hơn nhiều. 15. Sắp xếp lại các cửa sổ Nếu bạn không càm thấy hài lòng với cửa sổ công cụ mặc định của Dreamweaver MX, thì việc thay đổi chế độ hiển thị cũng khá đơn giản. Tới menu sổ ở góc trên cùng bên phải cửa sổ công cụ bạn muốn thay đổi, trỏ vào Group [tên cửa sổ] và chọn một cửa sổ nhóm khác. Bạn cũng có thể sử dụng menu này để đổi tên, phóng đại hoặc đóng cửa sổ nhóm công cụ đó lại. Cuối cùng, bạn thử sử dụng các phím tắt để chuyển đổi giữa các cửa sổ công cụ. Khi đó, công việc của bạn sẽ diễn ra trôi chảy và đơn giản hơn nhiều.