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

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. . 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ó. 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