Tét

BÀI 4
TINH 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, ÂM THANH)
NHẮC LẠI BÀI TRƯỚC
Bố cục website với CSS:
Mô hình CSS Box
Làm việc với div và AP div
Xếp chồng và xếp gối các thành phần
Tạo style cho nội dung hộp
Điều chỉnh vị trí
Tổ chức và phác thảo website
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 - 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
MỤC TIÊU BÀI HỌC
Đ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-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
ĐIỀU CHỈNH MÔI TRƯỜNG LÀM VIỆC TRÊN DREAMWEAVER CS4
ĐIỀU CHỈNH MÔI TRƯỜNG LÀM VIỆC TRÊN DREAMWEAVER CS4
Dreamweaver có một vài tùy chọn giúp người dùng tiế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ác thườ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
ĐIỀU CHỈNH MÔI TRƯỜNG LÀM VIỆC TRÊN DREAMWEAVER CS4
Favorites tab: nơi người dùng có thể thêm vào các thà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
ĐIỀU CHỈNH MÔI TRƯỜNG LÀM VIỆC TRÊN DREAMWEAVER CS4
Tag selector – Thanh chọn thẻ: nơi hiển thị chính xác cá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
ĐIỀU CHỈNH MÔI TRƯỜNG LÀM VIỆC TRÊN DREAMWEAVER CS4
Dreamweaver cũng hỗ trợ thêm các tính năng giúp cô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 website
Thước kẻ/lưới/zoom: chế độ hiển thị thước kẻ/lưới/zoom giúp người dùng căn chỉnh chính xác hơ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
ĐIỀU CHỈNH MÔI TRƯỜNG LÀM VIỆC TRÊN DREAMWEAVER 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
LÀM VIỆC VỚI NHỮNG THÀNH PHẦN ĐA PHƯƠNG TIỆN TRÊN WEB
Đ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 nghe
Video: truyền tải nội dung thông qua quá trình nghe và xem
Hì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
ĐA PHƯƠNG TIỆN TRÊN WEB
Nội dung đa phương tiện có thể được chứa trong cá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
Đ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ện
có 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ùng chuột kéo thả file dạng đa phương tiện vào trang web của mình
ĐA PHƯƠNG TIỆN TRÊN WEB
Chèn nội file Flash vào webpage bằng bảng INSERT và bảng ASSETS
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 .swf (banner, intro, …)
Chèn file flash dạng video ( .flv)
Đ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
ĐA PHƯƠNG TIỆN TRÊN WEB
Chèn video dạng Quicktime và Windows 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
16
Nhấn nút Movie để hiển thị toàn bộ file video có trong site, sau đó chỉ việc chọn 1 file, thực hiện nhấn nút Insert để chèn
Đ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ố
Đ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ợp với trình duyệt để mở các tệp tin đa phương tiện
Các plug-in đa phương tiện thông dụng:
Quicktime Player: plug-in dùng để mở các file quicktime
Shockware Flash/Flash Player: plug-in dùng để mở các file flash
Window Media Player: plug-in dùng để mở các file window 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
Đ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ột cách hợp lý sẽ đem lại những hiệu quả sau cho website:
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án
Tối ưu: tận dụng được ưu điểm của từng loại đa phương tiện đối với từng nội dung
Tương tác: nhiều loại đa phương tiện đem lại tính tương tá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
Đ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ường có kích thước lớn, đòi hỏi cấu hình máy cao
Kích thước lớn -> thời gian download lâu
Cấu hình máy cao -> hỗ trợ được số lượng người dù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 hay khô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ương tiệ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
TỔNG KẾT
Dreamweaver cung cấp các tùy chọn giúp người dù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 động
Plug-in đa phương tiện là loại phần mềm tích hợp với trình duyệt để mở các tệp tin đa phương tiện
Việc sử dụng các thành phần đa phương tiện một cá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