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...
Nội dung trích xuất từ tài liệu:
Xây dựng Website: Thủ thuật với DREAMWEAVER MX Xây dựng Website: Thủ thuật với DREAMWEAVER MXBạn đang gặp khó khăn với Dreamweaver MX ? Hãy vào đây! 01. Tự động xuốngdòng Dreamweaver MX có một vài chế độ mặc định không mấy hấp dẫn khi làmcho 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àylạ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ãytắt chế độ Tự động xuống dòng. 02. Sử dụng chế độ hiển thị thiết kế và mã Ngườisử 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ọnchế độ 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ửatrong chế độ Design (và cũng hiệu quả nếu bạn là người muốn nhanh chóng họchỏ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ảinói rằng Dreamweaver MX có những cải tiến lớn trong việc tạo điều kiện chongười sử dụng thiết kế được những trang web với các công nghệ hiện tại. Tuynhiê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ácthuộc tính của một trường đầu vào (input field). Hãy kích vào ‘A’ ở góc phảitrường Format để thay đổi toàn bộ cửa sổ công cụ, khi đó bạn có thể sử dụng địnhdạ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ápkhá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ànhphầ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 trongcử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ảiviế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ệcsử 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àira, 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 JavaScriptkhá 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 Netscape6.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 quenvới việc tạo ra các tệp khuôn mẫu (template) cơ bản trong phần mềmDreamweaver MX Bước 1. Tạo một trang web như bạn vẫn thường làm. Khi kếtthúc công việc, chọn menu File > Save as Template và đặt tên cho tệp khuôn mẫubạ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ụngkhuô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ùngcủa trang và kích vào menu Insert > Template Objects > Editable Regions. Gántê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ọnmenu File > New > Templates để tạo một trang web dựa trên khuôn mẫu đó. Bước3. 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 doDreamweaver tự động thêm vào) ở đầu trang. 08. Sử dụng các tệp khuôn mẫu lồngCác tệp khuôn mẫu web (web template) hiển nhiên rất hữu ích, tuy nhiên nhiều khichú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ềuphần đặc biệt. Dreamweaver MX khắc phục nhược điểm này bằng cách hỗ trợ bạnsử 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ếtcấ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ởiDreamweaver 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ênthiếu chuyên nghiệp và nực cười. ...