26
BÀI 4 LÀM VIỆC VỚI ADOBE DREAMWEAVER CS4 – LÀM VIỆC VỚI BẢNG (TABLE) TRÊN WEB

Web1012 slide 4

Embed Size (px)

Citation preview

Page 1: Web1012   slide 4

BÀI 4LÀM VIỆC VỚI ADOBE DREAMWEAVER CS4 – LÀM VIỆC

VỚI BẢNG (TABLE) TRÊN WEB

Page 2: Web1012   slide 4

NHẮC LẠI BÀI TRƯỚC

Bố cục website với CSS:Mô hình CSS BoxLàm việc với div và AP divXếp chồng và xếp gối các thành phầnTạo style cho nội dung hộpĐiều chỉnh vị trí

Tổ chức và phác thảo website

Bố cục website với CSS:Mô hình CSS BoxLàm việc với div và AP divXếp chồng và xếp gối các thành phầnTạo style cho nội dung hộpĐiều chỉnh vị trí

Tổ chức và phác thảo website

Slide 4 - Adobe Dreamweaver CS4 - Bảng trên trang web 2

Page 3: Web1012   slide 4

MỤC TIÊU BÀI HỌC

Điều chỉnh môi trường làm việc trên DreamweaverCS4Làm việc với những thành phần đa phương tiện(multimedia) trên webpage:

Chèn file flash, video, âm thanhSử dụng panel AssetsLàm việc với plug-in

Cách làm việc với bảng (table) trên trang web:Khởi tạo bảng với HTMLĐịnh dạng style cho bảng với CSS/ HTML

Điều chỉnh môi trường làm việc trên DreamweaverCS4Làm việc với những thành phần đa phương tiện(multimedia) trên webpage:

Chèn file flash, video, âm thanhSử dụng panel AssetsLàm việc với plug-in

Cách làm việc với bảng (table) trên trang web:Khởi tạo bảng với HTMLĐịnh dạng style cho bảng với CSS/ HTML

Slide 4 - Adobe Dreamweaver CS4 - Bảng trên trang web 3

Page 4: Web1012   slide 4

ĐIỀU CHỈNH MÔI TRƯỜNG LÀM VIỆC TRÊNDREAMWEAVER CS4

Page 5: Web1012   slide 4

ĐIỀU CHỈNH MÔI TRƯỜNG LÀM VIỆCTRÊN DREAMWEAVER CS4

Dreamweaver có một vài tùy chọn giúp người dùngtiết kiệm được nhiều thời gian thao tác như:

Hệ thống bảng (panel) mềm dẻo, dễ dàngđóng/mở/di chuyển và tự động lưu các thao tácthường dùng

Dreamweaver có một vài tùy chọn giúp người dùngtiết kiệm được nhiều thời gian thao tác như:

Hệ thống bảng (panel) mềm dẻo, dễ dàngđóng/mở/di chuyển và tự động lưu các thao tácthường dùng

Slide 4 - Adobe Dreamweaver CS4 - Bảng trên trang web 5

Page 6: Web1012   slide 4

ĐIỀU CHỈNH MÔI TRƯỜNG LÀM VIỆCTRÊN DREAMWEAVER CS4

Favorites tab: nơi người dùng có thể thêm vào cácthành phần người dùng thường xuyên sử dụng màkhông mất nhiều thời gian tìm kiếm

Slide 4 - Adobe Dreamweaver CS4 - Bảng trên trang web 6

Page 7: Web1012   slide 4

ĐIỀU CHỈNH MÔI TRƯỜNG LÀM VIỆCTRÊN DREAMWEAVER CS4

Tag selector – Thanh chọn thẻ: nơi hiển thị chính xáccác tag tương ứng với một thành phần trên website

Slide 4 - Adobe Dreamweaver CS4 - Bảng trên trang web 7

Page 8: Web1012   slide 4

ĐIỀU CHỈNH MÔI TRƯỜNG LÀM VIỆCTRÊN DREAMWEAVER CS4

Dreamweaver cũng hỗ trợ thêm các tính năng giúpcông việc thiết kế được chính xác hơn như:

Nhiều lựa chọn về kích cỡ màn hình: người dùng cóthể lựa chọn các loại kích cỡ màn hình thông dụng đểkiểm tra giao diện của websiteThước kẻ/lưới/zoom: chế độ hiển thị thướckẻ/lưới/zoom giúp người dùng căn chỉnh chính xáchơn các thành phần giao diện:

• Thước căn: View > Rulers > Show• Lưới: View > Grid > Show Grid

Dreamweaver cũng hỗ trợ thêm các tính năng giúpcông việc thiết kế được chính xác hơn như:

Nhiều lựa chọn về kích cỡ màn hình: người dùng cóthể lựa chọn các loại kích cỡ màn hình thông dụng đểkiểm tra giao diện của websiteThước kẻ/lưới/zoom: chế độ hiển thị thướckẻ/lưới/zoom giúp người dùng căn chỉnh chính xáchơn các thành phần giao diện:

• Thước căn: View > Rulers > Show• Lưới: View > Grid > Show Grid

Slide 4 - Adobe Dreamweaver CS4 - Bảng trên trang web 8

Page 9: Web1012   slide 4

ĐIỀU CHỈNH MÔI TRƯỜNG LÀM VIỆCTRÊN DREAMWEAVER CS4

Slide 4 - Adobe Dreamweaver CS4 - Bảng trên trang web 9

Page 10: Web1012   slide 4

LÀM VIỆC VỚI NHỮNG THÀNH PHẦN ĐA PHƯƠNGTIỆN TRÊN WEB

Page 11: Web1012   slide 4

ĐA PHƯƠNG TIỆN TRÊN WEB

Đa phương tiện (multimedia) là khái niệm dùng đểchỉ tập hợp các thành phần truyền tải nội dung nhưký tự, hình ảnh, âm thanh, video, hình động:

Âm thanh (audio): truyền tải nội dung thông qua quátrình ngheVideo: truyền tải nội dung thông qua quá trình nghevà xemHình động (animation):

• Là tập hợp các chuyển động của hình ảnh và ký tự (cóthể bao gồm âm thanh)

• Có thể coi là một loại video đặc biệt

Đa phương tiện (multimedia) là khái niệm dùng đểchỉ tập hợp các thành phần truyền tải nội dung nhưký tự, hình ảnh, âm thanh, video, hình động:

Âm thanh (audio): truyền tải nội dung thông qua quátrình ngheVideo: truyền tải nội dung thông qua quá trình nghevà xemHình động (animation):

• Là tập hợp các chuyển động của hình ảnh và ký tự (cóthể bao gồm âm thanh)

• Có thể coi là một loại video đặc biệt

Slide 4 - Adobe Dreamweaver CS4 - Bảng trên trang web 11

Page 12: Web1012   slide 4

ĐA PHƯƠNG TIỆN TRÊN WEB

Nội dung đa phương tiện có thể được chứa trongcác tệp tin có định dạng khác nhau:

Hình ảnh:• JPEG, JPG• GIF• PNG• BITMAP, …

Âm thanh:• MIDI• WAV• MP3

Video/ Animation:• AVI• Mp4• Quicktime• RealVideo• Flash

Nội dung đa phương tiện có thể được chứa trongcác tệp tin có định dạng khác nhau:

Hình ảnh:• JPEG, JPG• GIF• PNG• BITMAP, …

Âm thanh:• MIDI• WAV• MP3

Slide 4 - Adobe Dreamweaver CS4 - Bảng trên trang web 12

Video/ Animation:• AVI• Mp4• Quicktime• RealVideo• Flash

Page 13: Web1012   slide 4

ĐA PHƯƠNG TIỆN TRÊN WEB

Bảng Assets:Là bảng hiển thị toàn bộ

thành phần đa phương tiệncó trên webpage

• Hình ảnh• Màu sắc• Flash• Video• …

Bảng Assets:Là bảng hiển thị toàn bộ

thành phần đa phương tiệncó trên webpage

• Hình ảnh• Màu sắc• Flash• Video• …

Slide 4 - Adobe Dreamweaver CS4 - Bảng trên trang web 13

Vùng hiển thị các file. Tại đây có thể dùngchuột kéo thả file dạng đa phương tiện vàotrang web của mình

Page 14: Web1012   slide 4

ĐA PHƯƠNG TIỆN TRÊN WEB

Chèn nội file Flash vào webpage bằng bảng INSERTvà bảng ASSETS

Chèn file flash dạng .swf (banner, intro, …)

Slide 4 - Adobe Dreamweaver CS4 - Bảng trên trang web 14

Chèn file flash dạng video ( .flv)

Page 15: Web1012   slide 4

ĐA PHƯƠNG TIỆN TRÊN WEB

Chèn nội file Flash dạng video:

Slide 4 - Adobe Dreamweaver CS4 - Bảng trên trang web 15

Hộp thoại Insert Flash Video Hộp thoại tùy chọn giao diện xem

Page 16: Web1012   slide 4

ĐA PHƯƠNG TIỆN TRÊN WEB

Chèn video dạng Quicktime và Windows Media

Nhấn nút Movie để hiển thị toàn bộ filevideo có trong site, sau đó chỉ việc chọn 1

file, thực hiện nhấn nút Insert để chèn

Slide 4 - Adobe Dreamweaver CS4 - Bảng trên trang web 16

Page 17: Web1012   slide 4

ĐA PHƯƠNG TIỆN TRÊN WEB

Chèn âm thanh:

Slide 4 - Adobe Dreamweaver CS4 - Bảng trên trang web 17

Thay đổi tùy chọn tham số

Page 18: Web1012   slide 4

ĐA PHƯƠNG TIỆN TRÊN WEB

Plug-in đa phương tiện là loại phần mềm tích hợpvới trình duyệt để mở các tệp tin đa phương tiệnCác plug-in đa phương tiện thông dụng:

Quicktime Player: plug-in dùng để mở các filequicktimeShockware Flash/Flash Player: plug-in dùng để mởcác file flashWindow Media Player: plug-in dùng để mở các filewindow media

Plug-in đa phương tiện là loại phần mềm tích hợpvới trình duyệt để mở các tệp tin đa phương tiệnCác plug-in đa phương tiện thông dụng:

Quicktime Player: plug-in dùng để mở các filequicktimeShockware Flash/Flash Player: plug-in dùng để mởcác file flashWindow Media Player: plug-in dùng để mở các filewindow media

Slide 4 - Adobe Dreamweaver CS4 - Bảng trên trang web 18

Page 19: Web1012   slide 4

ĐA PHƯƠNG TIỆN TRÊN WEB

Việc sử dụng các thành phần đa phương tiện mộtcách hợp lý sẽ đem lại những hiệu quả sau chowebsite:

Sinh động: sử dụng nhiều hình thức truyền tải nội dung sẽkhiến người duyệt web không bị nhàm chánTối ưu: tận dụng được ưu điểm của từng loại đa phươngtiện đối với từng nội dungTương tác: nhiều loại đa phương tiện đem lại tính tươngtác cho trang web( ví dụ: hình động, …)

Việc sử dụng các thành phần đa phương tiện mộtcách hợp lý sẽ đem lại những hiệu quả sau chowebsite:

Sinh động: sử dụng nhiều hình thức truyền tải nội dung sẽkhiến người duyệt web không bị nhàm chánTối ưu: tận dụng được ưu điểm của từng loại đa phươngtiện đối với từng nội dungTương tác: nhiều loại đa phương tiện đem lại tính tươngtác cho trang web( ví dụ: hình động, …)

Slide 4 - Adobe Dreamweaver CS4 - Bảng trên trang web 19

Page 20: Web1012   slide 4

ĐA PHƯƠNG TIỆN TRÊN WEB

Cân bằng giữa chất lượng và số lượng:Các tệp tin đa phương tiện có chất lượng cao thườngcó kích thước lớn, đòi hỏi cấu hình máy caoKích thước lớn -> thời gian download lâuCấu hình máy cao -> hỗ trợ được số lượng ngườidùng ít hơn

Lựa chọn định dạng đa phương tiện:Định dạng có được hỗ trợ bởi nhiều trình duyệt haykhông?Plug-in đi kèm là gì?

Lựa chọn kích thước và độ phân giải của đa phươngtiện

Cân bằng giữa chất lượng và số lượng:Các tệp tin đa phương tiện có chất lượng cao thườngcó kích thước lớn, đòi hỏi cấu hình máy caoKích thước lớn -> thời gian download lâuCấu hình máy cao -> hỗ trợ được số lượng ngườidùng ít hơn

Lựa chọn định dạng đa phương tiện:Định dạng có được hỗ trợ bởi nhiều trình duyệt haykhông?Plug-in đi kèm là gì?

Lựa chọn kích thước và độ phân giải của đa phươngtiện

Slide 4 - Adobe Dreamweaver CS4 - Bảng trên trang web 20

Page 21: Web1012   slide 4

LÀM VIỆC VỚI BẢNG TRÊN TRANG WEB

Page 22: Web1012   slide 4

BẢNG TRÊN WEB

Bảng được sử dụng:Hiển thị dữ liệu theo dạng bảngTạo bố cục (layout) cho trang web, trong thời kỳ đầucủa việc thiết kế web. Tuy nhiên với sự phát triển củaCSS hiện nay, cách này đã ít được áp dụng

Slide 4 - Adobe Dreamweaver CS4 - Bảng trên trang web 22

Page 23: Web1012   slide 4

BẢNG TRÊN WEB

Khởi tạo bảng: Insert > Table hoặc sử dụng bảngINSERT > Layout > Table

Hộp thoại Table, tùy chọn được cácthành phần:Dòng (Rows)ColumnsChiều dàiBoderCell padding: xác định không gian,pixel giữa các ngănCell spacing: xác định không gian,trong pixels, giữa các ngăn.

Slide 4 - Adobe Dreamweaver CS4 - Bảng trên trang web 23

Hộp thoại Table, tùy chọn được cácthành phần:Dòng (Rows)ColumnsChiều dàiBoderCell padding: xác định không gian,pixel giữa các ngănCell spacing: xác định không gian,trong pixels, giữa các ngăn.

Page 24: Web1012   slide 4

BẢNG TRÊN WEB

Định dạng style cho bảng với CSS/ HTML:Lựa chọn bảng vừa tạoTrên bảng CSS STYLES, chuột phải chọn New …

Slide 4 - Adobe Dreamweaver CS4 - Bảng trên trang web 24

Page 25: Web1012   slide 4

BẢNG TRÊN WEB

Sau khi sử dụng CSS để định dạng, sử dụng bảngPROPERTIES để áp dụng class vừa khai báo cho bảngđã tạo

Slide 4 - Adobe Dreamweaver CS4 - Bảng trên trang web 25

Page 26: Web1012   slide 4

TỔNG KẾT

Dreamweaver cung cấp các tùy chọn giúp ngườidùng tiết kiệm được nhiều thời gian thao tác và hỗtrợ tính chính xác cho công việc thiết kếĐa phương tiện (multimedia) là khái niệm dùng đểchỉ tập hợp các thành phần truyền tải nội dung nhưký tự, hình ảnh, âm thanh, video, hình độngPlug-in đa phương tiện là loại phần mềm tích hợpvới trình duyệt để mở các tệp tin đa phương tiệnViệc sử dụng các thành phần đa phương tiện mộtcách hợp lý sẽ đem lại tính sinh động, tính tối ưu vàtính tương tác cho website

Dreamweaver cung cấp các tùy chọn giúp ngườidùng tiết kiệm được nhiều thời gian thao tác và hỗtrợ tính chính xác cho công việc thiết kếĐa phương tiện (multimedia) là khái niệm dùng đểchỉ tập hợp các thành phần truyền tải nội dung nhưký tự, hình ảnh, âm thanh, video, hình độngPlug-in đa phương tiện là loại phần mềm tích hợpvới trình duyệt để mở các tệp tin đa phương tiệnViệc sử dụng các thành phần đa phương tiện mộtcách hợp lý sẽ đem lại tính sinh động, tính tối ưu vàtính tương tác cho website

Slide 4 - Tinh chỉnh môi trường làm việc & Làm việc với những thành phần trên web 26