K ẻ b ản g:
Tùy thuộc vào từng bố cục cụ thể mà quyết định sô dòng, cột của bảng, mỗi dòng có thể có sô ô khác nhau. Thường chúng ta nên chọn dòng có sô ô lớn nhất làm chuẩn khi
kẻ bảng. _
- Insert/Table, hoặc ấn trong nhóm Table. “ Rows: sô dòng cần chèn.
Columns: sô cột cắn chèn.
Width: chiều rộng của bảng theo số điểm pixels hoặc phán trăm Border: độ dầy của đường viền bảng.
Cell Padding: khỏang cách nội dung ô và biên ô. Cell Spacing: khoảng cách giữa các ô.
Insert Table □ Rows: Columns: Width: Cell Padding: Cell Spacing: OK Cancel Border: 1 690 Pixels V 1 Percent 1 Pixels Help H iệ u chỉnh b ả n g 1. Chèn thêm dòng, cộ t vào bảng: ❖ Thêm dòng cuối bảng
■ Định vị con trỏ ở ô cuối cùng trong bảng. ■ Ân phím Tab đ ể thêm dòng.
Cách khác:
■ Ân vào viền bảng, hay ấn thẻ<Table> chọn bảng. ■ Trong properties inspector nhập sô dòng mới. ❖ Chèn thêm cột vào bảng:
■ Trong properties inspector nhập sô cột mới.
2. Xoá dòng, cột, bảng
■ Chọn dòng, cột, bảng
■ Chọn thực dơn EdiƯCut. (Ctrl +X).
3. N ối các ô trong bảng:
■ Chọn các ô cẩn nối
■ Modify->Table-> Merge Cells.
4. Tách các ô trong bảng:
■ Chọn ô cắn tách
■ Modify->Table-> Splits Cell
Split Cell into Columns: tách ô thành nhiểu ô theo cột. Split Cell into Rows: tách ô thành nhiều ô theo dòng.
Number of columns, Rows: xác định sô ô cắn tách theo cột, dòng.
T h u ộ c tính c ủ a bảng:
- Chọn table-> m ở Properties inspector. N hập giá trị mới trong Properties inspector.
▼ P r o p e r t ie s
'i ĩz \ Table Id Rows 2 w 200 pixels V CellPad Align Default V
V Cols 2 1 H pixels V CellSpace Border 1
u >«■ 'V. I® ĩ'« I* Bg color I Bg Image Brdr color I V J ■ Rows: sô dòng. ■ Cols : sô cột.
■ W(width) : chiều rộng theo điểm pixel, theo tỷ lệ màn hình. ■ H (hight) : chiều cao mặc định, tuỳ vào nội dung.
■ Cellpad : khoảng cách văn bản đến ô trong bảng. ■ Cellspace : khoảng càch giữa các ô trong bảng. ■ Align : canh lề bảng, phải, trái, giữa.
■ Border : độ dày nét đường viền bảng. ■ Bg color : màu nền của bảng.
■ Bg image : ảnh nền bảng.
■ Brdr color : màu đường viền bảng.
XI.2. TR ÌN H BÀY TR AN G :
L a y o u t T a b le v à lay o u t cell
Trình bày trang là một công đoạn quan trọng nhất trong thiết kê Web, đòi hỏi tính mỹ thuật và độ chính xác cao. Macromedia Dreamweaver MX 2004 cung cấp các công cụ rất tốt trong việc thiết k ê và trình bày trang đó là Layout Tble và Layout Cell
1. L a y o u t ta b le:
- Layout table là dạng biến th ể của table với các thông sô đi kèm như khung viền Border=0, khoảng cách giữa các ô CellSpace =0, khoảng cách giữa nội dung trong ô và viền ô CellPad=0
- Layout table dùng đ ể phân vùng cho trang, nếu trong trang có nhiều nội dung với những chủ đ ề khác nhau hoặc cắn nhập nội dung với dạng cột báo chí thì dùng layout table đ ể bố cục trang theo chủ đ ề được chuẩn bị trước
- Layout Table dùng đ ể bô cục trang, không dùng đ ể chứa dữ liệu, viền khung của Layout Table có màu xanh lá cây
- Khi thiết kê dạng Layout, cắn phải chuyển sang chê độ Layout view, trong Insert Inspector, chọn tab Layout, chọn Layout mode, hoặc chọn
View-> Table Mode -> Layout Mode
▼ In s e r t Common Layout Standard Expanded
Forms Text HTML
B m
Layout ■Layout Cell
y r
I Lavout Table
2. Layout cell:
Layout cell: Nằm trong Layout table, dùng đ ể chứa d ữ liệu, dữ liệu trong layout cell có th ể là văn bản, hình ảnh, khi thíêt k ê dạng layout cần lưu ý các layout cell phải sát nhau đ ể tránh trường hỢp làm chi trang bị nát
M ột layout Table có thể chứa nhiều layout table con Mổi Layout Table gồm có nhiều dòng, mỗi dòng chứa nhiều Layout Cell, số Layout Cell trên mỗi dòng có thể khác nhau
V í d ụ :
p Macromedia Dreamweaver MX - [Untitled Document (U ntitled-1*)]
j File Edit View Insert Modify Text Commands Site Window Help
▼ Inser Common Lajout I Text Tables Flames Focms I Templates[ Characters Media Head Script Application I
m m Standard View I Layout View m . m
o Mĩ18® Title: Untitled Document otf © c ■£?&> ( } “0
^Layout Table H Layout View A>
---i k--- — --- — ---
____ iị
V
< > I
Layout table bô c ụ c trang Layout cell chứa d ữ liệu
3. M ộ t s ô cách k ế t h ợ p Layout Table và Layout Cell:
- V ẽ m ột Layout Table có kích thước đầy trang, sau đó v ẽ các Layout cell bên trong Layout Table theo đúng kích thước và yêu cầu của bố cục
- V ẽ nhiều Layout Table cùng cấp
o Layout Table trên chứa chứa Logo, Banner, nút ngang. 0 Layout Table ở giữa chứa nội dung văn bẳn, hình ản h ... 0 Layout Table dưới chứa địa chỉ liên lạc, phone...
- Hoặc kết hợp cả 2 cách trên, dùng 2 Layout table ngang cấp: o Layout Table trên chứa Logo, banner, nút ngang...
0 Layout Table dưới chứa 2 Layout table con, một bên trái và một bên ph ải... LƯU ý :
0 Khi v ẽ một Layout Cell bên ngoài Layout Table thì Dreamweaver tự phát sinh một Layout Table chứa Layout Cell đó
o C hê độ Expanded Tables : cho hiển thị khoảng cách từ nội dung trong ô đến đường viển của Table, tiện cho việc hiệu chỉnh độ rộng của ô
MM
F L O W E R S 1
1--- 192 --- --- 1 1--- 2 6 2 » --- 1
Expanded Tables M ode
MB FLO W ER S 1
---132 {¿il) ----> *--- 2 6 2 (289J --- » --- 5 0 0 -- ---
Standard M ode
V í dụ:
1) Thiết k ê trang với một Layout Table chính: - Trong Document Window
- Chọn tab Layout, click nút Layout Table Drag chuột vẽ trong Document Window
- Khung viền Layout Table có 3 handle dùng đ ể thay đổi kích thước của Layout Table, trên khung viển có sô chỉ chiều rộng của Layout Table
- Thiết kê trang với 3 Layout Table ngang cấp:
- Thực hiện giống như trên, khi kẻ Layout Table phải b ắt đầu từ biên trái trang 2) Thiết kê trang với các Layout Table lổng nhau:
Vì Macromedia Dreamweaver MX 2004 không cho phép kẻ các Layout Table phía bên phải, nên b ắt buộc phải kẻ m ột Layout Table lớn canh trái, sau đó mới có thể kẻ lổng bên trong Layout Tabie lớn một Layout Table con.
T h ụ ôc tính c ủ a Layout Table và layout cell:
Có thể hiệu chỉnh kích thước bằng cách drag chuột kóo các handle của khung, nhulig nêu cắn kích thước chính xác thì phải nhập các thông sô trong Properties Inspector của Layout Table
1. H iệ u ch ỉn h th u ộ c tính củ a iayout table:
- Width:
o Fixed: số Pixel xác định chiều rộng
o AutoStretch: tự động kéo dãn ngang theo nội dung văn bản hoặc hình ảnh chèn vào Layout Table
- Height: Xác định sô Pixel chiều cao, nhỏ nhất là 19 Pixel - Bg: màu nén của LayoutTable
- CellPad: khoảng cách từ nội dung đến biên của Layout Table - C.pllSparp: Khoảng rárh giữa các I .ayour r.pll
- Clear Row Height: ĩ» tự động thay đổi chiều cao của các dòng cho vừa khít với nội dung, nêu không có nội dung thì chiều cao của dòng ít n hất là 19 Pixel - Remove All Spacers: Ê*íCó hiệu lực khi chọn AutoStretch (xoá tất cả khoảng
trống thừa)
- Make cells Width Consistent: *0190 các cell trong Layout Table có chiều rộng như nhau.
- Remove Nesting : M xoá Layout Table con trong các Layout Table cha.
!! ▼ P r o p e r t ie s
• » •
Ỉ P
Layout table Width 0 Fixed © Autostretch Height 212 Bg n CellPad 0 CellSpace 0 Ĩ « 5*4 [ 0
2. X oá L ayout Table:
— Chọn viền của khung Layout Table hoặc click thẻ <Table> — Nhấn Delete
3. H iệ u chỉnh th u ộ c tính c ủ a L ayout Cell:
- Chọn layout cell
- MỞ thanh Properties Inspector của Layout Cell
▼ P r o p e r tie s p m t L a y o u t cell • - I
W idth © F i x e d 3 2 0 H eight 9 0 Horz D efau lt V- No w ra p Q
o A u to s tre tc h bqCJ[ V ert Top
- Width:
o Fixed: s ố Pixel xác dịnh chiều rộng
0 AutoStretch: tự động kéo dãn ngang theo nội dung văn bản hoặc hình ảnh chèn vào Layout Cell
- Height: Xác định sô Pixel chiều cao, nhỏ nhất là 19 Pixel - Bg: màu nền của Layout Cell
- Horz: Canh lề cho nội dung trong Layout Cell theo chiều ngang (Left, Center, Right)
- Vert: Canh lề theo cho nội dung trong Layout Cell theo chiều dọc
- No wrap: khi nội dung dài hơn kích thước của Layout Cell, nếu chọn mục này thì văn bản không xuống dòng mà Layout Cell tự dãn ra, nếu không chọn thì văn bản tự xuống dòng khi gặp lề phải của Layout Cell
- Di chuyển m ột Layout Cell:
o Chọn Layout Cell (Ctr]+ Click chuột vào Layout Cell) cẩn di chuyển o Drag chuột kéo đến vị trí mới
- Xoá một Layout Cell
o Chọn Layout Cell cần xoá o Nhấn phím Delete
Các lớ p Layer:
Layer là m ột thành phần mới trong thiết k ê Web, nó có th ể chứa nội dung văn bản, hình ảnh xếp chồng lên nhau, nổi trên trang và chuyển động rất linh hoạt
Layer thường được sử dụng đ ể thiết k ê trang có các hiệu ứng đặc b iệt như chữ rơi, ảnh bay,...
Điểm bất lợi của Layer là không hiển thị trên các trình duyệt cũ như ĨE4.0, Nestcape 4.0, đôi với các trình duyệt mói thì Layer hiển thị m ột cách trung thực
1. C ách t ạ o L a y e r tr ê n tra n g :
Có th ể tạo Layer bằng một trong các cách sau: Cách Ị :
- Chọn Standard Mode
— Click nút Draw Layer, drag chuột v ẽ Layer
▼ Insert Common Layout Forms Tex
p ij | Standard Expanded Layout |
, • ji.Draw Layer [
Untitled-2 1 - 1
Cách 2:
— Chọn menu Insert-^ Layout Objects -> Chọn Layer 2. H iệ u c h ỉn h L ay e r:
- Chọn layer, Layer được chọn sẽ xuất hiện 8 Handle xung quanh, khi đó ta thực hiện các thao tác hiệu chỉnh trên Layer đó
a. Di chuyển Layer:
— Chọn Layer cắn di chuyển
- Drag chuột kéo Layer đến vị trí mới
H oặc nhập giá trị toạ độ trong Properies Inspector
.1 . =ã P r o p e r t ie s Layer ID Layer1 T õ l p x o ạ d ộ cách biên trái l o ạ đ ộ cách biên trên
b. Thay đôi kích thước của Layer:
Chọn Layer cắn hiệu chỉnh kích thước
Click chuột vào m ột trong các Handle, Drag chuột đ ể thay đổi kích thước H oặc nhập thông sô trực tiếp vào Properties Inspector
ĐỘ rộ n g c ủ a Layer
C h iề u cao của Layer
c. Chèn nội dung vào Layer:
— N êu nội dung là văn bản thì nhập trực Liếp vào Layer
— N êu nội dung là hình ảnh thì drag chuột chọn hình trong thư mục Image thả vào Layer (hoặc chọn Insert Image)
d. xếp chồng các Layer:
Khi cắn hiển thị nhiều ảnh trên trang, nhưng không đủ chổ, ta có th ể xếp chổng lên nhau, sau đó cho xuất hiện từng lớp một hoặc cho từng lớp Layer bay ra khỏi màn hình, điều này có thể thực hiện được khi kết hợp Layer, Timeline và Behaviors e. Thứ tự các Layer: H ▼ P r o p e r t ie s t s Layer ID L 119p* w 109p* Layer1 V T ólpx H 77px
Mỗi lớp Layer đều có thuộc tính Z-Index hiển thị thứ tự trước, sau của các lớp Layer, lớp Layer sau sẽ che khuất lớp Layer trước nếu nó có cùng toạ độ, có thể thay đổi trình tự các lớp layer bằng cách:
- Chọn Lớp Layer cắn thay đổi thứ tự
— Trong Properties Inspector, nhập th ứ tự mới trong mục Z-index
Untitled-2.htm*
, ; ị Code I Split Design 1 Title: Layer_anh
Chon ảnh nền
▼ Properties
P ^ - Ị Layer ID L 21px w 114p> Z-Index 3 Ẽg image 1 1Q
£ ã l Layer1 V T j8px H 192px Vis visible V Bg color .
+---T - ---
Ân /hiện Layer ch(?n màu nền
3. Ẩ n h iệ n m ộ t Layer:
Khi không m uốn xem Layer nào thì ẩ n Layer đó b ằ n g m ộ t trong các cách sau: Trong Properties Inspector, tạ i thuộc tính Vis: chọn Hidden. H o ặc m ở Layer Panel:
c.ôr 7. hiển thi rhứ rư
!! ▼ Design * \
CSS Styles I W B S
I~1 Prevent overlaps 1 Name 1 Layer1 3 Layer2 2 Layer3 1 !l ▼ Design *1
CSS Styles 1 T V Site Report5
□ Prevent overlaps 1 Name * 1* 1 <3f- Layer1 «Si' Layer2 « ► Layer3 C ấ m XI 3 2 1 Ểp chổng các L a y e r 1
Clicl hiểu tư ơns nàv đ ể ẩn/hiên
1.2.4. Tim eline Panel:
Timeline Panel là m ột bảng sắp xếp ảnh, lớp Layer theo m ột trình tự xuất hiện trên trục thời gian, nó giúp tạo các hình ảnh động.
ĩỉm p lin p «
I hluHlliH________ v j 14" 1 4 “ 11 -► I Fps
0 5 10 15 20 25 30 35 40 45 50 55 80 65 70 75 80 85
- Trục thời gian là trục hoành
- Trục không gian là trục tung
- Fps: (Frame per Second) tốc độ chạy đắu đọc theo sô khung hình trên giây
1. M ột s ố iưu ý khi sử dụng Timeline:
- Đối tưựng trong Timeline là ảnh và lớp Layer
- Các đối tượng khác muốn sử dụng Timeline thì phải đưa nội dung vào Layer trước, sau đó mới đưa vào Timeline Panel
2. C ách hiệu chỉnh ảnh trong Timeline Panel:
- Chỉ có th ể hiệu chỉnh thuộc tính SRC tên tập tin ảnh mà thôi - Đ ể tạo m ột ảnh chuyển động, cắn chèn ảnh trong lớp Layer