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

8. Thiết lập các đặc điểm của văn bản:
Để làm điều đó, bạn vào cửa sổ Page properties bằng cách:+ Trên thanh Menu bar chọn Modify --} Page properties.+ Bấm Ctrl+J1 cửa sổ mới sẽ xuất hiện:
Attached Images

Giải thích các thuộc tính:+ Title: Xác định tên của văn bản sẽ xuất hiện trên Title bar khi trình duyệt mở trang web này.+ Background Image: Đường dẫn đến hình ảnh nền của văn bản. Hình ảnh này sẽ nằm dưới văn bản của bạn.+Background: Xác định background color(màu nền) trang web của bạn.+Text: Màu văn bản của trang web.+Link, active link, visited link: Màu cùa các liên kết trong trang web.+Left Margin, Top Margin: Khoảng cách từ lề văn bản đến biên trái và trên của trình duyệt. Để 0 có khoảng cách, bạn điền vào là 0.+Margin Width, Margin Height: Giá trị này chỉ có tác dụng với trình duyệt Nescape.+ Document Encoding: Xác định bảng mã của văn bản. Để hiển thị được tiếng Việt unicode, bạn chọn UTF-8.+ Tracing Image: Cái này thì tui 0 biết phải giải thích làm sao, nói chung là bạn cũng 0 cần dùng đến thuộc tính này.


9. Chèn Flash object vào trang web:
* Nên nhớ: Bạn cần phải save trang web của bạn trước khi chèn Flash object.Có 3 dạng Flsh object trong DW là Flash text, flash button và đoạn phim flash.a) Chèn Flash Text:Có 2 cách để chèn Flash text:+ Trên Insert bar chọn Media rồi click vào button Flash Text.+ Trên Menu bar chọn Interactive Images --} Flash Text.Sau khi chọn, 1 cửa sổ mới sẽ xuất hiện:
Attached Images

Giải thích các thuộc tính:+ Font, size: font và cỡ chữ của đoạn flash text.+ Color: màu của đoạn flash text ban đầu.+ Rollover color: màu của đoạn flash text khi rollover.+ Text: điền vào đoạn flash text. Nên nhớ: bạn 0 dùng tiếng Việt Unicode được. Bạn chỉ có thể dùng VNI.+ Link: Xác định liên kết đến 1 trang nào đó khi bạn click vào đoạn flash text.+ Target: xác định trang liên kết sẽ xuất hiện ở đâu. Mặc định là cửa sổ hiện hành.+ Bg color: màu nền của đoạn flash text. Bạn nên chọn màu nền sao cho trùng với màu nền của trang web.+ Save as: sau khi làm xong, bạn phải lưu flash text lại dưới dạng 1 file có đuôi *.swf.Bạn hãy thử làm 1 flash text liên kết đến trang DDTH xem.

b) Flash button:DW MX có sẵn rất nhiều Flash button cho bạn lựa chọn. Nếu bạn thấy 0 đủ, có thể download về thêm nhiều button từ website của Macromedia hoặc nhấn vào button Get more Style trong cửa sổ này.Có 2 cách để làm Insert Flash button:+ Trên Insert bar bạn chọn Media và click vào button Flash button.+ Trên Menu bar chọn Insert --} Interactive Images --} Flash button.1 cửa sổ mới sẽ xuất hiện:
Attached Images


Giải thích các thuộc tính:+ Sample: mẫu button cho bạn lựa chọn.+ Style: danh sách các button có sẵn.+ Button text: Bạn điền vào văn bản muốn xuất hiện trong button. Cũng như Flash text thì bạn chỉ có thể dùng được tiếng Việt VNI.+ Font, size, link, target, bg color, save as: coi phần Flash text.Việc insert các file Flash khác cũng khá đơn giản nên tôi sẽ để cho bạn tự tìm hiểu.

10. Các loại liên kết (link):
a)Insert Email link:Dùng để tạo 1 liên kết mà khi ta click vào, chương trình E-mail POP3 mặc định (VD như Outlook Express) sẽ chạy và xuất hiên 1 cửa sổ mới cho bạn nhập vào nôi dung rồi gửi đến đến địa chỉ trong liên kết.Bạn có thể làm việc này bằng 2 cách:+Trên Menu bar chọn Insert --} Email Link.+ Trên Insert bar chọn Common --} Email link(biểu tượng hình lá thư)1 cửa sổ mới sẽ xuất hiện:
Attached Images

+Tại text box Text bạn diền vào đoạn văn bản muốn hiển thị.+Tại text box E-Mail bạn điền vào địa chỉ mail liên kết dưới dạng như sau: mailto:name1@name2.com. Nên nhớ là giữa các ký tự 0 được có khoảng trắng. VD như: mailto:thanh_dat13@yahoo.com

b)Insert Hyperlink:Dùng để tạo 1 liên kết đến 1 trang web khác.Bạn có thể làm việc này bằng 2 cách:+ Trên Menu bar chọn Insert --} Hyperlink+ Trên Insert bar chọn common --} Hyperlink (biểu tượng hình dây xích)1 cửa sổ mới sẽ xuất hiện:
Attached Images

Giải thích các thuộc tính:+ Text: Điền vào văn bản muốn hiển thị.+ Link: Điền vào địa chỉ trang web lien kết.+ Target: Xác định trang liên kết sẽ xuất hiện ở đâu (Xem chi tiết ở phần Insert Flash object)+ Tab index: Xác định thứ tự ưu tiên khi bấm phím Tab trên bàn phím. VD như bạn có 3 liên kết A, B và C. A có tab index là 1, B là 2 và C là 3. Trong trình duyệt khi bạn bấm phím Tab thì lần lượt liên kết A, B, C sẽ được chọn.+ Title: Tên của liên kết.+ Access key: Gán phím tắt cho liên kết. Trong trình duyệt khi bạn bấm Alt+phím gán thì liên kết sẽ được chọn.
c)Insert Named Anchor:Dùng để tạo liên kết ẩn bên trong trang web của bạn. Liên kết này 0 thấy được trong trình duyệt và dùng để di chuyển qua lại giữa các phần của trang web, rất thuận tiện nếu trang web của bạn là 1 văn bản dài và có nhiều phần nhỏ.Cách thực hiện:+ Trên Menu bar chọn Insert --} Named Anchor.+ Trên Insert bar chọn Common --} Named Anchor ( biểu tượng hình cái mỏ neo)+ Bấm tổ hợp phím: Ctrl+Alt+A.Sẽ có 1 cửa sổ mới xuất hiện để bạn nhập vào tên của Anchor. Tên này sẽ được sử dụng để liên kết đến vị trí đặt Anchor.Để có thể tạo 1 liên kết đến named anchor, bạn dủng 1 hyperlink như hường dẫn ở trên nhưng tại text box Link bạn nhập vào tên của name anchor dưới dạng: #name of anchor.VD như để link tới anchor có tên start, bạn nhập vào text box Link như sau: #start.

11. Tạo frame trong trang web:
Như các bạn đã biết thì frame được dùng để chia trang web ra thành nhiều ô nhỏ, mỗi ô là 1 trang web riêng. Như vậy trang web dùng frame có thể gọi là 1 tập hợp các trang web mà mỗi frame là 1 trang web con.Có 3 cách để tạo frame: .+Khi tạo 1 văn bản mới, bạn chọn General --} Framesets. Sau đó bạn chọn kiểu framesets thích hợp.+Tại Insert bar chọn Frames rồi chọn kiểu thích hợp.+Trên Menu bar chọn Insert --} Frames rồi bạn cũng chọn lấy 1 kiểu thích hợp.Khi save 1 trang web dùng frame thì mỗi frame được save thành 1 trang riêng biệt và có 1 thêm 1 trang để kết hợp các frame đó lại.Trang kết hợp được save đầu tiên rồi mới lần lượt đến các frame. Như vậy thực tế khi người dùng mở trang web có dùng frame thì thực tế họ đang mở cùng lúc nhiề trang web.

12. Tạo trang template cho website:
Nếu bạn thiết kế 1 website có layout của các trang giống nhau, tôi nghĩ bạn nên dùng trang template cho website của bạn.Để cho đơn giản, bạn hãy thiết kế 1 trang mà bạn dự định sẽ làm trang mẫu cho website của mình. Sau đó trên Menu bar chọn File --} Save as Template hoặc trên Insert bar chọn Templates --} Make template.1 cửa sổ mới sẽ xuất hiện:
Attached Images

+ Tại drop down box “Site” bạn chọn website của trang template này.+ Tại text box “Save as” bạn điền vào tên của trang template.Tuy nhiên, 1 trang template mặc định của DW thì hoàn toàn 0 thể thay đổi được đối với 1 trang mới được tạo từ trang template. Để có thể thay đổi được, bạn cần phải tạo ra các Editable Region, mà có thể gọi nôm na là vùng sửa đổi. Bạn có thể tạo Editable Region đối với hình ảnh, văn bản, hoặc có thể cả table… Nói chung là mọi thứ. Để tạo Editable Region, bạn làm như sau: Đầu tiên là chọn hình ảnh, văn bản, table… muốn thay đổi sau này, tiếp theo bạn có thể làm như sau:+ Trên thanh Menu bar chọn Insert --} Template Objects –} Editable Regions.+ Trên thanh Insert bar bạn chọn Templates --} Editable Regions.+ Bấm tổ hợp phím Ctrl+Alt+V.1 cửa sổ mới sẽ xuất hiện cho bạn điền vào tên của Editable Region đó.Để có thể tạo 1 trang mới từ trang template, bạn làm như sau:Tại Menu bar bạn chọn New. 1 cửa sổ mới sẽ xuất hiện. Tiếp tục bạn chọn Templates --} trang template cần dùng.

13. Sử dụng Assets và Library.
a)Assets:Trong DW Mx sau khi bạn set up 1 site, DW sẽ tự tạo cho bạn 1 mục là Assets chứa tất cả mọi thứ trong website của bạn như hình ảnh, URL, Flash object… giúp cho bạn dễ dàng quảng lý và sử dụng các đối tượng này. Thông thường đối với work space của DW MX thì cửa sổ Assets được mở tự động nhưng nếu bạn 0 thấy cửa sổ Assets, hãy làm như sau:+ Trên Menu bar chọn Windows --} Assets.+ Bấm phím tắt F11.1 cửa sổ mới sễ xuất hiện ở phía phải màn hình:
Attached Images

Khi click vào các icon Images, Flash, Shock wave…. Thì cửa sổ Assets sẽ hiển thị tất cả các đối tượng cùng loại trong web site của bạn. VD như khi click vào Images, cửa sổ Assets sẽ hiển thị tất cả các hình ảnh của bạn nằm trong thư mục chứa web site.
b) Library:
Cũng nằm trong cửa sổ Assets bạn sẽ thấy 1 icon tên là Library. Library cũng giống như 1 thư viện chứa những thứ bạn hay sử dụng. VD như bạn có 1 banner sử dụng nhiều trong web site, nếu làm thủ công, mỗi trang web bạn phải tự insert banner đó vào, trong khi với Library, bạn chỉ cần kéo-thả là xong. Library có thể chứa các loại đối tượng như Images, Flash, Shock wave, Scripts … nhưng 0 thể chứa Behavior, HTML styles sheet và Cascading styles sheet. Để insert 1 đối tượng vào Library bạn có thể làm theo 2 cách:+ Click vào đối tượng cần insert và trên Menu bar chọn Modify –-} Library --} Add object to library hoặc bấm tổ hợp phím Ctrl+Shift+B.+ Trên cửa sổ Assets chọn Library. Sau đó bạn kéo object và thả vào cửa sổ Library. Để sử dụng object trong Library, bạn chỉ cần kéo object trong cửa sổ Library và thả vào nơi cần insert trong trang web.Các object được insert từ Library sẽ được tô sang để dễ dàng phân biệt.Bạn có thể thay đổi các object được insert từ Library và cập nhật sự thay đổi đó đến các trang sử dụng object trong Library. Bạn có thể làm như sau:+ Tại cửa sổ Library bạn click vào icon Edit (hình cây bút chì và tờ giấy, nằm ở góc dưới bên phải).+ 1 cửa sổ mới sẽ xuất hiện. Cửa sổ đó sẽ chỉ chứa object đó. Nếu object là Images, Flash, Shock wave thì để Edit, bạn click phải vào object đó và chọn chượng trình để Edit. VD như nếu là hình ảnh thì bạn có thể chọn để Edit bằng Fire Work.+ Sau khi Edit, nếu bạn muốn cập nhật đến trang hiện hành thì click phải vào object trong Library và chọn Update current page.