Hướng dẫn thiết kế Website bằng Dream Waver MX

Để giúp ích cho các bạn đang bắt đầu học thiết kế web, mình xin post lên tutorials về học thiết kế web bằng Dream Weaver MX. Vì là tutor dành cho Newbie nên tôi huớng dẫn rất chi tiết và cặn kẽ, tuy nhiên 0 thể tránh khỏi thiếu sót, mong các bạn góp ý. Như các bạn biết thì Dream Weaver là 1 chương trình thiết kế website rất mạnh, hỗ trợ cao cho cả việc thíêt kế lẫn coding nhất là chuong trình Dream Weaver MX mới nhất. Và đây là những buớc cơ bản để thiết kế 1 website.

1.Giới thiệu so luợc về DW MX và vùng làm việc ( work space) của chuong trình này:
Lần đầu tiên khi chạy chương trình này, DW MX sẽ xuất hiện 1 dialog box để bạn chọn kiểu work space. Có 2 sự chọn lựa: 1 là work space mới của DW MX, 2 là work space cũ của DW 4. Theo tôi thì bạn nên dùng work space mới vì thuận tiện và dễ nhìn. Dù sao thì đó cũng là lời khuyên, sự chọn lựa là ở bạn.

2. Giới thiệu về work space của DW MX:
+Insert bar chứa những button (nút nhấn) để thuận tiện trong việc insert nhiều đối tuợng khác nhau vào trang web của bạn nhu:image, table, flash object…Mỗi đối tượng đuợc gắn vào trang web của bạn đúng vào vị trí mong muốn với các thuộc tính khác nhau là nhờ 1 đoạn mã HTML tương ứng cho từng đối tuợng. VD như bạn có thể insert 1 image bằng cách click chuột vào Image icon trên insert bar hoặc bạn có thể sử dụng Insert menu trên thanh Menu để làm việc đó. +Document toolbar chứa các button và pop-up menus giúp bạn có thể chuyển đổi dễ dàng giữa các cửa sổ Code View, Design View hoặc có thể hiển thị cả 2. Nó còn giúp bạn thực hiện các cộng việc thường làm như preview hoặc debug trang web trong trình duyệt. +Document window: Cửa sổ hiển thị những gì bạn đang soạn thảo. +Property inspector: Giúp bạn xem và thay đổi 1 cách dễ dáng các thuôc tính của đoạn văn bản hoặc đối tuợng đuợc chọn. Mỗi đối tượng khác nhau sẽ có các thuộc tính khác nhau. +Tag selector nằm trên thanh trạng thái (status bar) phía duới của Document window sẽ hiển thị tag (thẻ HTML) của object đuợc chọn trong chế độ Design View. + Site panel cho phép bạn kiểm soát các file và thư mục trong website của bạn. Đó là các thành phần cơ bản của work space trong DW MX. Còn các thành phần khác mình sẽ giới thiệu ở các bài sau.

3. Xác định mục tiêu:
Truớc khi thiết kế 1 trang web, bạn phải xác định rằng trang web của bạn làm ra với mục đích gì để có thể xây dựng 1 trang web phù hợp với yêu cầu. 1 trang web thông tin đơn thuần sẽ có cách thiết kế khác với 1 trang web cá nhân.

4. Tạo 1 website trên dĩa cứng của bạn:
Việc đầu tiên phải làm là thiết lập 1 website trên dia cứng của bạn. Điều đó giúp bạn dễ dàng kiểm soát và upload website của bạn sau này. Trên thanh menu bạn chọn Site --} New Site. Sẽ xuất hiện 1 cửa sổ mới với 2 button là Basic và Advanced. Tôi sẽ hướng dẫn bạn Thiết lập website ở trình độ Basic. +Đầu tiên, DW sẽ hỏi bạn muốn đặt tên cho website của bạn là gì. Dĩ nhiên là bạn gõ vào tên website mà bạn muốn. + Tiếp theo DW sẽ hỏi bạn có cần sử dụng công nghệ sever 0. Theo tôi thì bạn nên chọn là 0, vì ban đầu bạn chủ yếu chỉ dùng HTML. +DW sẽ tiếp tục hỏi bạn làm việc như thế nào đối với các file trong website. Bạn nên chọn là: Edit local copies on my machine… +Tiếp theo DW sẽ hỏi bạn kết nối với remote sever bằng cách nào. Bạn nên chọn là None . Vì sau này khi bạn xây dựng xong website sẽ upload lên sau. Sau khi hoàn thành xong các buớc trên, bạn đã sẵn sang để bắt đầu xây dựng trang web đầu tiên. +Để có thể chọn mặc định trang web của bạn có thể hiển thị tiếng Việt, trên thanh Menu bạn chọn Edit --} Preferences hoặc nhấn phím tắt ctrl+U. DW sẽ mở 1 cửa sổ mới, bạn chọn Font. Trong font setting bạn chọn UTF-8.

5. Tạo table:
Đây là 1 bước rất quan trọng, bạn nên chú ý.Có 3 cách để làm việc này: +Chọn Insert --} Table trong thanh menu. +Click vào button table trong Insert bar. +Vẽ table trong layout view( tôi sẽ hướng dẫn sau)Sau khi chọn insert table, 1 cửa sổ mới sẽ xuất hiện:

Bạn thay đổi các thông số lại nhu sau: +Điền vào 1 trong text box Row để tạo ra table có 1 hàng. +Diền vào 1 trong text box Columns để tạo ra table có 1 cột. +Trong cửa sổ pop-up kế bên text box Width, bạn chọn Pixels. Điều này sẽ làm cho table của bạn có độ dài chính xác mà 0 phụ thuộc vào độ phân giải của màn hình tính theo pixel. +Điền vào 600 trong text box Width để tạo ra 1 table bề dài là 600 pixels. +Điền vào 1 trong text box Border để tạo ra table có đuờng viền bề dày bằng 1 pixel. +Click OK. Và đây là table bạn tạo ra:
Bạn có thể dễ dàng thay đổi kích cỡ cũng như các thuộc tính khác của table bằng properties inspector. Bạn còn có thể chia nhỏ hoặc gộp lại các ô trong table bằng Properties Inspector. +Còn 1 cách khác để tạo table theo ý muốn trong DW là vẽ table trực tiếp trong Layout View. Bạn có thể chuyển qua layout view bằng cách chọn trong Insert Bar hoặc chọn View --} Table View --} Layout View. 1 cách nhanh chóng hơn là dùng short cut. Short cut của Layout View là Ctrl+F6 còn Short cut của Standard View là Ctrl+Shift+F6. Bạn còn có thể tạo ra table con bên trong table mẹ. Bạn hãy tự tạo 1 table có dạng như sau: bề ngang: 100%, bề cao: 400 pixels. Nhớ Save lại trang web của bạn trước khi tiếp tục.

6. Định vị đối tượng bằng Layout Cell:
Layout cell dung để bố trí các thành phần của trang web 1 cách hợp lý và tuỳ theo ý thích. Đây cũng là 1 phần rất quan trọng nếu bạn muốn có 1 trang web đẹp mắt. Bạn phải vẽ layout cell bên trong 1 table. 1 Table có thể chứa nhiều layout cell. Layout cell chỉ có thể đuợc vẽ trong chế độ Layout View.
Để vẽ layout cell, bạn click chuột vào nút có màu xanh dương và bắt đầu vẽ trên Document window. Bạn cũng có thể thay đổi dễ dàng thuộc tính của layout cell trong cửa sổ properties inspector. Nên nhớ: Bạn còn có thể tạo table bên trong layout cell. Bạn hãy tạo ra 1 trang web như sau: ( 0 cần chính xác từng chi tiết)

7. Chèn hinh ảnh vào trang web:
Đây là 1 phần cũng 0 kém phần quan trọng. 1 trang web đẹp 0 thể thiếu hình ảnh và DW hỗ trợ rất tốt cho việc chèn vào cũng như định vị các hình ảnh trong trang web.Để chèn hình ảnh vào trang web, bạn có thể làm như sau: +Trên Insert bar chọn button Common, rồi chọn button Image. +Chọn Insert --} Image trên menu. +Bấm phím tắt Ctrl+Alt+I.Bạn cũng có thể thay đổi thuộc tính của hình ảnh 1 cách dễ dàng. Tôi sẽ giới thiệu cho bạn các thuộc tính đơn giản trong cửa sổ properties inspector:
+Src: nguồn của hình ảnh, đó chính là đường dẫn đến hình ảnh đó. +Link: liên kết đến hình ảnh. Khi bạn kích hoạt hình ảnh (click chuột, roll over…, mặc định là click chuột) thì trang liên kết sẽ được chạy. +Alt: Đoạn văn bản sẽ được hiển thị tại vị trí của hình ảnh nếu như vì lý do nào đó mà hình ảnh này 0 được tải xuống khi mở trang web của bạn. +Target: Xác định trang liên kết sẽ được mở ra ở đâu. 2 chọn lựa thường gặp là cửa sổ mới ( _blank) hoặc tại cửa sổ hiện hành ( _seft) +Border: bề dày của đường viền bao quanh hình ảnh tính theo pixel. +Align: Nếu ai xài win word chắc sẽ hiểu, tui 0 biết dịch nó ra sao bây giờ,

7. Tạo hiệu ứng rollover:
+Dream Weaver hỗ trợ việc tạo hiệu ứng roll over ngay trong nó mà 0 cần đến 1 chương trình đồ hoạ nào.+Bạn có thể chọn tạo hiệu ứng roll over bằng cách: Tên Insert bar chọn Common, rồi chọn Rollover Image. +Sau khi chọn, 1 cửa sổ mới sẽ xuất hiện:
Tại text box Original Image bạn điền vào đường dẫn đến hình ảnh ban đầu. Tại text box Rollover Image bạn điền vào đường dẫn đến hình ảnh rollover. Tại text box Alternate Text bạn có thể điền vào đoạn văn bản thay thế trong truờng hợp Rollover Image của bạn 0 tải về đuợc. Text box duới cùng để gõ vào liên kết đến 1 trang nào đó khi bạn click vào Rollover Image. Nên nhớ: Original Image và Rollover Image phải cùng kích cỡ. Nếu 0, DW sẽ tự động điều chỉnh và có thể gây ra sự thu nhỏ hoặc phóng to 0 mong muốn. Tôi có kèm theo 2 hình ảnh để các bạn làm thử hiệu ứng Rollover Image.
Đó là những bước cơ bản để thiết kế 1 website. Tôi sẽ post tiếp nếu các bạn thấy hữu ích.