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.