bÀi 4 tinh chỉnh môi trường làm việc và làm việc với cách thành phần trên web...
DESCRIPTION
Điều chỉnh môi trường làm việc trên Dreamweaver CS4 Là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 thanh Sử dụng panel Assets Làm việc với plug-inTRANSCRIPT
![Page 1: BÀI 4 Tinh chỉnh môi trường làm việc và làm việc với cách thành phần trên web (FLASH, VIDEO, ÂM THANH) - Giáo trình FPT](https://reader033.vdocuments.pub/reader033/viewer/2022052907/558e73981a28abc22a8b45e4/html5/thumbnails/1.jpg)
BÀI 4TINH CHỈNH MÔI TRƯỜNG LÀM VIỆC & LÀM VIỆC VỚI
CÁC THÀNH PHẦN TRÊN WEB (FLASH, VIDEO, ÂMTHANH)
![Page 2: BÀI 4 Tinh chỉnh môi trường làm việc và làm việc với cách thành phần trên web (FLASH, VIDEO, ÂM THANH) - Giáo trình FPT](https://reader033.vdocuments.pub/reader033/viewer/2022052907/558e73981a28abc22a8b45e4/html5/thumbnails/2.jpg)
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 websiteCá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
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 websiteCá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 - 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 2
![Page 3: BÀI 4 Tinh chỉnh môi trường làm việc và làm việc với cách thành phần trên web (FLASH, VIDEO, ÂM THANH) - Giáo trình FPT](https://reader033.vdocuments.pub/reader033/viewer/2022052907/558e73981a28abc22a8b45e4/html5/thumbnails/3.jpg)
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
Đ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
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 3
![Page 4: BÀI 4 Tinh chỉnh môi trường làm việc và làm việc với cách thành phần trên web (FLASH, VIDEO, ÂM THANH) - Giáo trình FPT](https://reader033.vdocuments.pub/reader033/viewer/2022052907/558e73981a28abc22a8b45e4/html5/thumbnails/4.jpg)
ĐIỀU CHỈNH MÔI TRƯỜNG LÀM VIỆC TRÊNDREAMWEAVER CS4
![Page 5: BÀI 4 Tinh chỉnh môi trường làm việc và làm việc với cách thành phần trên web (FLASH, VIDEO, ÂM THANH) - Giáo trình FPT](https://reader033.vdocuments.pub/reader033/viewer/2022052907/558e73981a28abc22a8b45e4/html5/thumbnails/5.jpg)
ĐIỀU CHỈNH MÔI TRƯỜNG LÀM VIỆC TRÊNDREAMWEAVER 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 - 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 5
![Page 6: BÀI 4 Tinh chỉnh môi trường làm việc và làm việc với cách thành phần trên web (FLASH, VIDEO, ÂM THANH) - Giáo trình FPT](https://reader033.vdocuments.pub/reader033/viewer/2022052907/558e73981a28abc22a8b45e4/html5/thumbnails/6.jpg)
ĐIỀU CHỈNH MÔI TRƯỜNG LÀM VIỆC TRÊNDREAMWEAVER 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 - 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 6
![Page 7: BÀI 4 Tinh chỉnh môi trường làm việc và làm việc với cách thành phần trên web (FLASH, VIDEO, ÂM THANH) - Giáo trình FPT](https://reader033.vdocuments.pub/reader033/viewer/2022052907/558e73981a28abc22a8b45e4/html5/thumbnails/7.jpg)
ĐIỀU CHỈNH MÔI TRƯỜNG LÀM VIỆC TRÊNDREAMWEAVER 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 - 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 7
![Page 8: BÀI 4 Tinh chỉnh môi trường làm việc và làm việc với cách thành phần trên web (FLASH, VIDEO, ÂM THANH) - Giáo trình FPT](https://reader033.vdocuments.pub/reader033/viewer/2022052907/558e73981a28abc22a8b45e4/html5/thumbnails/8.jpg)
ĐIỀU CHỈNH MÔI TRƯỜNG LÀM VIỆC TRÊNDREAMWEAVER 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 - 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 8
![Page 9: BÀI 4 Tinh chỉnh môi trường làm việc và làm việc với cách thành phần trên web (FLASH, VIDEO, ÂM THANH) - Giáo trình FPT](https://reader033.vdocuments.pub/reader033/viewer/2022052907/558e73981a28abc22a8b45e4/html5/thumbnails/9.jpg)
ĐIỀU CHỈNH MÔI TRƯỜNG LÀM VIỆC TRÊNDREAMWEAVER CS4
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 9
![Page 10: BÀI 4 Tinh chỉnh môi trường làm việc và làm việc với cách thành phần trên web (FLASH, VIDEO, ÂM THANH) - Giáo trình FPT](https://reader033.vdocuments.pub/reader033/viewer/2022052907/558e73981a28abc22a8b45e4/html5/thumbnails/10.jpg)
LÀM VIỆC VỚI NHỮNG THÀNH PHẦN ĐAPHƯƠNG TIỆN TRÊN WEB
![Page 11: BÀI 4 Tinh chỉnh môi trường làm việc và làm việc với cách thành phần trên web (FLASH, VIDEO, ÂM THANH) - Giáo trình FPT](https://reader033.vdocuments.pub/reader033/viewer/2022052907/558e73981a28abc22a8b45e4/html5/thumbnails/11.jpg)
Đ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 - 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 11
![Page 12: BÀI 4 Tinh chỉnh môi trường làm việc và làm việc với cách thành phần trên web (FLASH, VIDEO, ÂM THANH) - Giáo trình FPT](https://reader033.vdocuments.pub/reader033/viewer/2022052907/558e73981a28abc22a8b45e4/html5/thumbnails/12.jpg)
Đ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 - 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 12
Video/ Animation:• AVI• Mp4• Quicktime• RealVideo• Flash
![Page 13: BÀI 4 Tinh chỉnh môi trường làm việc và làm việc với cách thành phần trên web (FLASH, VIDEO, ÂM THANH) - Giáo trình FPT](https://reader033.vdocuments.pub/reader033/viewer/2022052907/558e73981a28abc22a8b45e4/html5/thumbnails/13.jpg)
Đ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 - 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 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: BÀI 4 Tinh chỉnh môi trường làm việc và làm việc với cách thành phần trên web (FLASH, VIDEO, ÂM THANH) - Giáo trình FPT](https://reader033.vdocuments.pub/reader033/viewer/2022052907/558e73981a28abc22a8b45e4/html5/thumbnails/14.jpg)
Đ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 - 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 14
Chèn file flash dạng video ( .flv)
![Page 15: BÀI 4 Tinh chỉnh môi trường làm việc và làm việc với cách thành phần trên web (FLASH, VIDEO, ÂM THANH) - Giáo trình FPT](https://reader033.vdocuments.pub/reader033/viewer/2022052907/558e73981a28abc22a8b45e4/html5/thumbnails/15.jpg)
ĐA PHƯƠNG TIỆN TRÊN WEB
Chèn nội file Flash dạng video:
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 15
Hộp thoại Insert Flash Video Hộp thoại tùy chọn giao diện xem
![Page 16: BÀI 4 Tinh chỉnh môi trường làm việc và làm việc với cách thành phần trên web (FLASH, VIDEO, ÂM THANH) - Giáo trình FPT](https://reader033.vdocuments.pub/reader033/viewer/2022052907/558e73981a28abc22a8b45e4/html5/thumbnails/16.jpg)
Đ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 - 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 16
![Page 17: BÀI 4 Tinh chỉnh môi trường làm việc và làm việc với cách thành phần trên web (FLASH, VIDEO, ÂM THANH) - Giáo trình FPT](https://reader033.vdocuments.pub/reader033/viewer/2022052907/558e73981a28abc22a8b45e4/html5/thumbnails/17.jpg)
ĐA PHƯƠNG TIỆN TRÊN WEB
Chèn âm thanh:
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 17
Thay đổi tùy chọn tham số
![Page 18: BÀI 4 Tinh chỉnh môi trường làm việc và làm việc với cách thành phần trên web (FLASH, VIDEO, ÂM THANH) - Giáo trình FPT](https://reader033.vdocuments.pub/reader033/viewer/2022052907/558e73981a28abc22a8b45e4/html5/thumbnails/18.jpg)
Đ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 - 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 18
![Page 19: BÀI 4 Tinh chỉnh môi trường làm việc và làm việc với cách thành phần trên web (FLASH, VIDEO, ÂM THANH) - Giáo trình FPT](https://reader033.vdocuments.pub/reader033/viewer/2022052907/558e73981a28abc22a8b45e4/html5/thumbnails/19.jpg)
Đ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 dungsẽ 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 dungsẽ 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 - 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 19
![Page 20: BÀI 4 Tinh chỉnh môi trường làm việc và làm việc với cách thành phần trên web (FLASH, VIDEO, ÂM THANH) - Giáo trình FPT](https://reader033.vdocuments.pub/reader033/viewer/2022052907/558e73981a28abc22a8b45e4/html5/thumbnails/20.jpg)
Đ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 - 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 20
![Page 21: BÀI 4 Tinh chỉnh môi trường làm việc và làm việc với cách thành phần trên web (FLASH, VIDEO, ÂM THANH) - Giáo trình FPT](https://reader033.vdocuments.pub/reader033/viewer/2022052907/558e73981a28abc22a8b45e4/html5/thumbnails/21.jpg)
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 21