Thiết kế web cơ bản bằng DW MX( Dành cho các bạn chưa biết)

n_u_h_o_n

Member
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)
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.
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.
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ờ,
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.
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.
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+J
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
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
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:
 

n_u_h_o_n

Member
Tiếp..
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.
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ư)
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:[email protected]. Nên nhớ là giữa các ký tự 0 được có khoảng trắng
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)
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.
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ều 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.
+ 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.
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.
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
 

n_u_h_o_n

Member
Giới thiệu về Cascading Style Sheet (CSS):

CSS là 1 là 1 tập hợp các định dạng về nhiều mặt như font, cỡ chữ, màu sắc, vị trí của object… giúp cho bạn có 1 khuôn mẫu trong thiết kế làm cho website của bạn có tính nhất quán.
CSS giúp bạn có thể làm được những chuyện mà HTML đơn thuần 0 làm được.
CSS có thể sử dụng cho nhiều loại đối tượng như table, layout cell, text…
DW còn hỗ trợ 1 loại style sheet khác là HTML style sheet nhưng không mạnh bằng CSS do đó tôi chỉ giới thiệu về CSS.
Để tạo 1 CSS, bạn có thể làm như sau:
+ Menu bar --} Text --} CSS Styles --} New CSS Style.
+ Bấm tổ hợp phím Shift+F11 để mở cửa sổ CSS Style. Sau đó bạn click vào button New CSS Style(ở phía dưới cửa sổ CSS Style).
+ Name: bạn điền vào tên của CSS. Bạn đặt tên sao cho dễ nhớ và gợi tả. VD như CSS tên là Fontstyle dùng để xác định các thuộc tính về font chữ.
+ Type: bạn thấy có 3 radio button để lựa chọn:
Make custom style: Tạo 1 CSS mới.
Redefine HTML tag: Định nghĩa lại 1 HTML tag. Theo tôi thì bạn đừng nên thay đổi các tag HTML.
Use CSS Selector: Tạo CSS giành cho link (hypertext)trong trang web.
Cả 3 lựa chọn đều có cách làm việc như nhau nên tôi chỉ hướng dẫn các bạn tạo custom style .
+ Define in: có 2 sự lựa chọn: Nếu bạn chọn This document only thì CSS tạo ra sẽ chỉ được áp dụng cho trang web(chứ không phải website) bạn đang thiết kế. Lựa chọn còn lại để giành cho bạn tạo 1 CSS riêng biệt và lưu thành 1 file. Do đó bạn có thể sử dụng CSS đó cho nhiều trang khác nhau.

Sau khi chọn Type là Custom Style và Define in New Style Sheet File, bạn click vào OK thì 1 cửa sổ Save As sẽ xuất hiện để bạn nhập vào file name. Theo tôi thì file name nên trùng với CSS name để tránh nhầm lẫn.
Bạn sẽ thấy cửa sổ mới có 2 phần chính như sau:
phần Category bao gồm các Item như Type, Background… và phần còn lại kế bên bao gồm chi tiết của từng nhóm Category được chọn.

Nhóm Type:
+ Font: Xác định họ font chữ của style sheet.
+ Size: Xác định cỡ chữ của văn bản. Bạn sẽ thấy có 2 drop down box tại thuộc tính này. Drop down box đầu tiên để bạn lựa chọn/ điền vào 1 giá trị nào đó. Có 2 loại giá trị là giá trị tuyệt đối( VD như 1,2,13…) và giá trị tương đối ( large, small, medium…) , theo tôi thì bạn nên chọn giá trị tương đối vì tuỳ theo độ phân giải của máy người dùng mà web browser sẽ chọn size thích hợp. Drop down box thứ 2 để bạn chọn đơn vị đo. Mặc định là pixels, và bạn cũng nên giữ nguyên giá trị mặc định này.
+ Style: Dạng của chữ. Có 3 giá trị là normal. Italic và Oblique. Giá trị normal là mặc định. Còn Italic và Oblique dùng để làm cho văn bản có dạng chữ nghiêng.
+ Line Height: Chiều cao của dòng văn bản.Có 2 drop down box tương tự như thuộc tính Size.
+ Decoration: Tại thuộc tính này bạn sẽ thấy có các check box để chọn, bạn có thể chọn 1/nhiều hoặc 0 chọn giá trị nào đều được. Underline dùng để gạch dưới văn bản, overline dùng để gạch trên văn bản, linethrough dùng để gạch xuyên qua văn bản, blink dùng để tạo cho văn bản nhấp nháy ( mặc dù có dùng thì văn bản của bạn cũng không nhấp nháy đâu , chắc là chưa được hỗ trợ) và cuối cùng là None.
+ Weight: Độ đậm của nét chữ. Cũng có giá trị tương đối và tuyệt đối.
+ Variant: Chỉ được hỗ trợ trong IE và 0 hỗ trợ trong Nescape Navigator. Có 2 giá trị là normal và small-caps. Giá trị small-caps dùng để định dạng đoạn văn bản có thuộc tính in hoa nhỏ. Bạn sẽ 0 thấy được sự thay đổi trong Document window, khi bấm F12 thì bạn sẽ biết ngay mà )
+ Case: Có 4 giá trị là Capitlalize, Uppercase, Lowercase và none. Thuộc tính Capitalize làm cho Ký tự đầu tiên của mỗi từ được in hoa. Uppercase làm cho cả đoạn văn bản in hoa, Lowercase làm cho cả văn đoạn văn bản in thường. Còn none giữ nguyên những gì mà bạn nhập vào.
+ Color: Màu của chữ.
Nhóm Background:
+ Background Color: màu nền của đối tượng. Thường là 1 table hoặc cả trang web.
+ Backgroung Image: Đường dẫn đến ảnh nền của đối tượng. Tương tự như background image.
+ Repeat: Thuộc tính này xác định cách thức ảnh nền lặp lại trong trang web.Chỉ có giá trị nếu bạn dùng những ảnh nền nhỏ hơn trang web của bạn. Điều này cũng giống như bạn lót gạch cho nền nhà mà sàn nhà chính là trang web còn những viên gạch là ảnh nền . Các giá trị trong thuộc tính repeat:
No repeat: 0 lặp lại. Điều này cũng giống như bạn chỉ lót 1 viên gạch cho cả 1 nền nhà rộng thênh thang vậy.
Repeat: hình nền được lặp lại sao cho che phủ hết toàn trang web.
Repeat-x: Chỉ lặp lại theo chiều ngang.
Repeat-y: Chỉ lặp lại theo chiều dọc.
Attachment, Horizontal Position(HP) và Vertical Position(VP): Chỉ được hỗ trợ trong IE, không hỗ trợ trong Nescape Navigator. 3 thuộc tính này có liên quan đến nhau. Nếu bạn chọn giá trị của thuộc tính Attachment là Fixed thì 2 thuộc tính kia sẽ canh (trái, phải, giữa…) vị trí của hình nền theo Document window. Còn nếu bạn chọn giá trị của thuộc tính Attachment là Scroll thì vị trí của hình nền sẽ được canh theo đối tượng. VD như bạn chọn Attachment là Fixed, HP là center và VP là bottom thì hình nền sẽ được canh giữa theo chiều ngang và canh dưới theo chiều cao trong trang web. 1 VD nữa, tương tự như trên nhưng bạn chọn Attachment là Scroll và CSS này được sử dụng cho table thì hình nền sẽ được canh đối với table chứ 0 phải đối với toàn trang web.
Nhóm Block:
+ Word Spacing: Khoảng cách giữa các từ trong văn bản. Cũng có 2 drop-down box tương tự như thuộc tính Size trong mục Type. Sự thay đổi về word spacing 0 thể hiện trong document window.
+ Letter Spacing: Khoảng cách giữa các ký tự.
+ Vertical Alignment: Chỉ có tác dụng đối với hình ảnh trong trang web. Thuộc tính này giúp canh hình ảnh theo ý muốn.
+ Text align: Xác định văn bản sẽ được bố trí ra sao. VD như bạn sử dụng CSS có text align là left cho 1 table thì văn bản bên trong table đó sẽ được canh trái.
+ Text indent: Xác định khoảng cách thụt đầu dòng đồi với dòng văn bản xuống hàng. Mỗi lần bạn enter xuống hàng thì dòng tiếp theo sẽ cách lề 1 khoảng đúng bằng giá trị bạn xác lập trong thuộc tính text indent.
+ Whitespace: 0 bít để làm gì
+ Display: Xác cách thức đối tượng xuất hiện trong trang web. Có rất nhiều giá trị để bạn thay đổi, nhưng theo tôi bạn bỏ trống hoặc chọn là None. Điều này sẽ giữ nguyên những gì mà bạn thấy trong Window document
Nhóm Box:
+ Width, Height: Xác định chiều rộng và chiều cao của đối tượng. Nên dùng cho table, layout cell hoặc layer.
+ Float: Xác định cách thức cuộn của các đối tượng khác xung quanh đối tượng này( Giống như cách bạn cho văn bản cuộn xung quanh image trong Word vậy)
+Padding: Xác định khoảng cách giữa nội dung(text, image…) của đối tượng với border của nó.
+Margin: Xác định khoảng cách giữa border của đối tượng với đối tượng khác.

Nhóm Border: Xác định các thuộc tính của khung. Tôi không đề cập đến phần này vì nó cũng khá đơn giản.
Nhóm List:
+Type: Bạn có thể chọn các kiểu bullet cho list của bạn tại đây.
+Bullet Image: Nếu các bullet DW cung cấp không làm bạn vừa ý, bạn có thể dùng các image bạn thích để làm bullet. Bạn chọn đường dẫn đến bullet đó tại đây.
+Position: Xác định vị trí của văn bản đối với bullet. Có 2 giá trị, outside dùng để xác định văn bản sẽ lùi đầu dòng và ở bên phải bullet, còn inside xác định văn bản sẽ cuộn bên trái của bullet.

Nhóm Positioning: Chỉ dùng cho layer nên tôi sẽ giới thiệu sau.

Nhóm Extension:
+Pagebreak: Chỉ được hỗ trợ trong IE trên 4.0. Giúp tạo ra 1 pagebreak khi in.
+Cusor: Thay đổi hình dạng con trỏ chuột khi ta di chuyển con trỏ lên đối tượng. Hỗ trợ trong IE 4.0 và Nescape Navigator 6.0 trở lên.
+Filter: Tạo các hiệu ứng đối với Text, VD như shadow, blur… Tính năng này có thể giúp bạn có 1 đoạn Text khá ấn tượng.
 

Tra cứu điểm thi

Phần mềm mới

Quảng cáo

11223344550983550000
Top