Bài giảng Thiết kế Web: Chương 11 - Từ Thị Xuân Hiền

Chương 11 hướng dẫn tạo bảng và trình bày trang cho rang web. Các nội dung được trình bày trong chương này gồm có: Kẻ bảng, hiệu chỉnh bảng, thuộc tính của bảng, layout Table và layout cell, Một số cách kết hợp layout table và layout cell, thụôc tính của layout table,...và một số nội dung khác. Mời các bạn cùng tham khảo.

Trang 1

B NG VÀ TRÌNH BÀY TRANG Ả

CH ƯƠ NG XI

Trang 2

 Border: đ d y c a đBorder: đ d y c a độ ầộ ầ ủủ ườường vi n b ng.ng vi n b ng.ềề ảả

 Cell Padding: kh ang cách n i dung ô và biên ô.Cell Padding: kh ang cách n i dung ô và biên ô.ỏỏ ộộ

 Cell Spacing: kho ng cách gi a các ô.Cell Spacing: kho ng cách gi a các ô.ảả ữữ

Trang 4

2 HI U CH NH B NGHI U CH NH B NGỆ Ệ Ỉ Ỉ Ả Ả

a) Chèn thêm dòng, c t vào b ng Chèn thêm dòng, c t vào b ng ộ ộ ả ả :

 Đ t d u nháy t i v trí c n chènĐ t d u nháy t i v trí c n chènặ ấặ ấ ạ ịạ ị ầầ

 Modifytable Insert row/Insert column

 C t m i m c đ nh chèn vào bên trái d u nháyC t m i m c đ nh chèn vào bên trái d u nháyộộ ớớ ặặ ịị ấấ

 Dòng m i m c đ nh chèn vào bên trên d u nháyDòng m i m c đ nh chèn vào bên trên d u nháyớớ ặặ ịị ấấ

b) Xoá dòng, c t, b ng Xoá dòng, c t, b ng ộ ộ ả ả

 Ch n dòng, c t, b ng c n xóaCh n dòng, c t, b ng c n xóaọọ ộộ ảả ầầ

 Edit/Cut. (Ctrl +X) ho c nh n deleteEdit/Cut. (Ctrl +X) ho c nh n deleteặặ ấấ

Trang 5

c) N i các ô trong b ng: N i các ô trong b ng: ố ố ả ả

 Ch n các ô c n n i Ch n các ô c n n i ọọ ầầ ốố

 ModifyTable Merge Cells

d) Tách các ô trong b ng Tách các ô trong b ng ả ả :

 Ch n ô c n táchCh n ô c n táchọọ ầầ

 ModifyTable Splits Cell

 Split Cell into Columns: tách ô thành nhi u ô Split Cell into Columns: tách ô thành nhi u ô ềề

Trang 6

4 THU C TÍNH C A B NG:THU C TÍNH C A B NG:Ộ Ộ Ủ Ủ Ả Ả

Ch n tableọ

Ch n tableọ  m Properties inspector. m Properties inspector.ởở

 Rows, Cols : s dòng, s c t.Rows, Cols : s dòng, s c t.ốố ố ộố ộ

 W, H : chi u r ng, chi u cao c a b ng.W, H : chi u r ng, chi u cao c a b ng.ề ộề ộ ềề ủủ ảả

 Cellpad : kho ng cách văn b n đ n ô trong b ng.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.Cellspace : kho ng càch gi a các ô trong b ng.ảả ữữ ảả

 Align : canh l b ng, ph i, trái, gi a.Align : canh l b ng, ph i, trái, gi a.ề ảề ả ảả ữữ

 Border : đ dày nét đBorder : đ dày nét độộ ườường vi n b ng.ng vi n b ng.ềề ảả

 Bg color : màu n n c a b ng.Bg color : màu n n c a b ng.ềề ủủ ảả

 Bg image : nh n n b ng.Bg image : nh n n b ng.ảả ềề ảả

 Brdr color : màu đBrdr color : màu đườường vi n b ng.ng vi n b ng.ềề ảả

Trang 7

– N u trong trang có nhi u n i dung v i nh ng 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

Trang 8

– Layout Table dùng đ b c c trang, không dùng đ 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 ứ ữ ệ ề ủ

Trang 9

 Layout cell:

– Layout cell N m trong Layout table, dùng đ 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 ầ ư ả

– M t layout Table có th ch a nhi u layout 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ỗ ể

Trang 10

2 M t s cách k t h p Layout Table và Layout CellM t s cách k t h p Layout Table và Layout Cellộ ố ộ ố ế ợ ế ợ :

a) V m t Layout Table có kích thV m t Layout Table có kích thẽ ộẽ ộ ướước đ y trang, sau 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ầ ủ ố ụ

b) Ho c v nhi u Layout Table cùng c pHo c v nhi u Layout Table cùng c pặặ ẽẽ ềề ấấ

• Layout Table trên ch a ch a Logo, Banner, Layout Table trên ch a ch a Logo, Banner, ứứ ứứ

Trang 11

– Khi v m t Layout Cell bên ngoài Layout Table 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 đóứ

– Ch đ Expanded Tables : cho hi n th kho ng Ch đ 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 ôệ ệ ệ ỉ ộ ộ ủ

Trang 12

3 Th ôc tính c a Layout Table :Th ôc tính c a Layout Table :ụ ụ ủ ủ

– Drag chu t kéo các handle c a khung thay đ i kích Drag chu t kéo các handle c a khung thay đ i kích ộộ ủủ ổổ

• Fixed: s Pixel xác đ nh chi u r ngFixed: s Pixel xác đ nh chi u r ngốố ịị ề ộề ộ

• AutoStretch: t đ ng kéo dãn ngang theo n i dung AutoStretch: t đ ng kéo dãn ngang theo n i dung ự ộự ộ ộộ

• Height: Xác đ nh chi u cao, nh nh t là 19 PixelHeight: Xác đ nh chi u cao, nh nh t là 19 Pixelịị ềề ỏỏ ấấ

– Bg: màu n nBg: màu n nềề

– CellPad: kho ng cách t n i dung đ n biên CellPad: kho ng cách t n i dung đ n biên ảả ừ ộừ ộ ếế

– CellSpace: Kho ng cách gi a các LayoutCellSpace: Kho ng cách gi a các Layoutảả ữữ Cell

Trang 13

– Clear Row Height: t đ ng thay đ i chi u cao c a 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 nh t là 19 Pixelộ ề ủ ấ

– Remove All Spacers: Có hi u l c khi ch n 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: t o các cell trong Make cells Width Consistent: t o các cell trong ạạ

Layout Table có chi u r ng nh nhau.ề ộ ư

– Remove Nesting : xoá Layout Table con trong các

Layout Table cha

Trang 14

4 Th ôc tính c a Layout Cell : Th ôc tính c a Layout Cell : ụ ụ ủ ủ

 Width: Fixed: S Pixel xác đ nh chi u r ngWidth: Fixed: S Pixel xác đ nh chi u r ngốố ịị ề ộề ộ

 AutoStretch: t đ ng kéo dãn ngang theo n i dung 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à Height: Xác đ nh s Pixel chi u cao, nh nh t là ịị ốố ềề ỏỏ ấấ

19 Pixel

 Bg: màu n n c a Layout CellBg: màu n n c a Layout Cellềề ủủ

 Horz: Canh l cho n i dung trong Layout Cell theo Horz: Canh l cho n i dung trong Layout Cell theo ềề ộộ

 No wrap: khi n i dung dài h n kích thNo wrap: khi n i dung dài h n kích thộộ ơơ ướ ủướ ủc c a 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ố ự

Trang 15

– Layer thLayer thườường đng đượ ử ụượ ử ục s d ng đ thi t k trang có c s d ng đ thi t k trang có ểể ế ếế ế

các hi u ng đ c bi 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 Đ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 IE4.0, Nestcape 4.0ệ ư

Trang 16

c) Hi u ch nh Layer:Hi u ch nh Layer:ệ ệ ỉ ỉ

 Ch n layer, Layer đCh n layer, Layer đọọ ượược ch n s xu t hi n 8 c ch n s xu t hi n 8 ọ ẽọ ẽ ấấ ệệ

Handle xung quanh

Trang 17

 Thay đ i kích th Thay đ i kích th ố ố ướ ủ ướ ủ c c a Layer c c a Layer:

– Ch n Layer c n hi u ch nh kích thCh n Layer c n hi u ch nh kích thọọ ầầ ệệ ỉỉ ướước c

– Click chu t vào m t trong các Handle, Drag Click chu t vào m t trong các Handle, Drag ộộ ộộ

chu t đ thay đ i kích thộ ể ổ ước

– Ho c nh p thông s tr c ti p vào Properties Ho c nh p thông s tr c ti p vào Properties ặặ ậậ ố ựố ự ếế

Inspector

 Chèn n i dung vào Layer: Chèn n i dung vào Layer: ộ ộ

– N u n i dung là văn b n thì nh p tr c ti p vào N u n i dung là văn b n thì nh p tr c ti p vào ếế ộộ ảả ậậ ựự ếế

Layer

– N u n i dung là hình nh thì drag chu t ch n 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)ọ

Trang 18

 X p ch ng các Layer: 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

 Th t các Layer: Th t các Layer: ứ ự ứ ự

M i l p Layer đ u có thu c tính ZIndex hi n ỗ ớ ề ộ ể

th th t c a các l p Layer, l p Layer sau s ị ứ ự ủ ớ ớ ẽ

che khu t l p Layer trấ ớ ước

Trang 19

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 tCh n L p Layer c n thay đ i th tọọ ớớ ầầ ổổ ứ ựứ ự

– Trong Properties Inspector, nh p th t m i trong Trong Properties Inspector, nh p th t m i trong ậậ ứ ự ớứ ự ớ

m c Zindexụ

 Ẩ Ẩ n hi n m t Layer n hi n m t Layer ệ ệ ộ ộ :

– Khi không mu n xem Layer nào thì n Layer đó Khi không mu n xem Layer nào thì n Layer đó ốố ẩẩ

Trang 20

6 TIMELINE PANEL:

– Timeline Panel là m t b ng s p x p nh, l p 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 Timeline Panel: WindowM Timeline Panel: Windowởở  Others Timeline

• Tr c hoành là tr c th i gianTr c hoành là tr c th i gianụụ ụụ ờờ

• Tr c tung là tr c không gianTr c tung là tr c không gianụụ ụụ

• Fps: (Frame per Second) t c đ ch y đ u đ c Fps: (Frame per Second) t c đ ch y đ u đ c ốố ộộ ạạ ầầ ọọ

theo s khung hình trên giâyố

Trang 21

I TEMPLATE

1 Gi i thi u:Gi i thi u:ớ ớ ệ ệ

Template là d ng trang m u đạ ẫ ược thi t k trế ế ước

ch a các thành ph n dùng chung ứ ầ

Template gi quan h gi a các thành ph n trong ữ ệ ữ ầ

m t m u trang độ ẫ ược thi t k , b c c s n. Ta có ế ế ố ụ ẵ

th căn c vào m t m u template đ t o nhanh ể ứ ộ ẫ ể ạ

nhi u trang có cùng m t b c c thi t k ề ộ ố ụ ế ế

Thao tác v i template, ta c n phân bi t rõ gi a ớ ầ ệ ữ

trang m u ẫ

trang m u ẫ và trang s d ng template trang s d ng template ử ụ ử ụ

Trang 22

 Trang m u template m u template ẫ ẫ

Là t p tin ki u .dwt v i ph n thi t k chu n cho ậ ể ớ ầ ế ế ẩ

m t b c c dùng chung, trong trang có 2 lo i vùng: ộ ố ụ ạ

vùng được khoá và vùng không khoá

 Trang s d ng template Trang s d ng template ử ụ ử ụ :

Là t p tin ki u .htm nh ng có b c c gi ng nh ậ ể ư ố ụ ố ư

trang m u template, ta ch đẫ ỉ ược phép hi u ch nh, ệ ỉ

nh p n i dung m i cho các vùng không khoá. Khi ậ ộ ớ

có s thay đ i trong trang m u template thì các ự ổ ẫ

vùng khoá c a các trang s d ng template cũng s ủ ử ụ ẽ

t đ ng c p nh t theo.ự ộ ậ ậ

Trang 23

2 T o trang template:T o trang template:ạ ạ

 T o m i m t trang HTML template nh m t T o m i m t trang HTML template nh m t ạạ ớớ ộộ ư ộư ộ

trang bình thường k Layout table, Layout cell ẻ

phù h p, nh p n i dung, chèn hình, trang trí cho ợ ậ ộ

các vùng dùng chung

 L u trang m u template: File L u trang m u template: File ưư ẫẫ  Save as template

 Khi l u trang dKhi l u trang dưư ướ ạướ ại d ng template (.dwt) m c i d ng template (.dwt) m c ặặ

đ nh t t c các vùng c a trang template đ u b ị ấ ả ủ ề ị

khóa, do đó ph i m khóa cho các vùng không ả ở

Trang 24

 Ch n Creat template cu i ph i h p tho i.Ch n Creat template cu i ph i h p tho i.ọọ ởở ốố ả ộả ộ ạạ

3 T o trang theo m u template:T o trang theo m u template:ạ ạ ẫ ẫ

 Ch n File/New…Ch n File/New…ọọ

 Trong h p tho i New Document, ch n tab Trong h p tho i New Document, ch n tab ộộ ạạ ọọ

template

 Ch n m u template đã t o s nCh n m u template đã t o s nọọ ẫẫ ạ ẳạ ẳ  create

 Nh ng vùng dùng chung s b khóa, khi thi t k Nh ng vùng dùng chung s b khóa, khi thi t k ữữ ẽ ịẽ ị ế ếế ế

người dùng ch có th thay đ i n i dung trong ỉ ể ổ ộ

ph n đã đầ ược m khóaở

Trang 25

4 Hi u ch nh templateHi u ch nh templateệ ệ ỉ ỉ

– M template c n hi u ch nh:M template c n hi u ch nh:ởở ầầ ệệ ỉỉ

 Xoá m t template:Xoá m t template:ộộ

– Trong Asset panel, ch n nhóm template.Trong Asset panel, ch n nhóm template.ọọ

– Ch n template c n xóaCh n template c n xóaọọ ầầ

– Nh n delete .Nh n delete .ấấ

Trang 26

Khi xoá m t template s nh hộ ẽ ả ưởng đ n t t c các ế ấ ả

trang có s d ng template. N u th c s mu n xoá, ử ụ ế ự ự ố

trước tiên nên m các trang s d ng template r i ở ử ụ ồ

Sau khi t o đạ ược các trang m u template, áp d ng m t ẫ ụ ộ

Định dạng
Số trang	27
Dung lượng	691,63 KB