Thiết kế Web với DreamWeaver

1
Chuyên đề : Web Design
Bộ môn KTMT – Viện CNTT&TT
Trường ĐH Bách Khoa Hà Nội
Web Design
2
Thiết kế Web với DreamWeaver
Bộ môn Kỹ thuật máy tính, Viện Công nghệ thông tin và truyền thông
Đại học Bách Khoa Hà Nội
Nội dung

Giới thiệu về Macromedia Dreamweaver.

Thiết kế Web bằng một số công cụ cơ bản.

Cách tạo liên kết (Hyperlink).

Kỹ thuật thiết kế Frame.

Kỹ thuật Layout.

Sử dụng CSS để tạo một số hiệu ứng trong trang Web.
3
Giới thiệu
1) Tổng quan về Dreamweaver:

Là một phần mềm thiết kế Web chuyên nghiệp.

Tương thích với nhiều đối tượng nhúng (Flash,
Shockwave, Active X, …).


Hỗ trợ các công cụ thiết kế trang Web động rất hiệu
quả.
4
Giới thiệu

Màn hình khởi động
5
Giới thiệu

Giao diện chính của chương trình
6
Giới thiệu
7
Chức năng các thành phần:
√ Thanh công cụ Document:
Thiết kế
bằng
HTML
Thiết kế bằng
HTML và bằng
công cụ
Thiết kế
bằng
công cụ
Tiêu đề
của trang
hiện hành
Thể hiện
lỗi khi
thiết kế

Quản lý file
Xem thử kết quả
bằng trình duyệt
Các
tùy
chọn
khi
thiết
kế
Cửa sổ làm việc
8
Các thanh công cụ cơ bản

COMMON : Tập hợp này chứa các Đối Tượng thường được sử
dụng nhiều nhất như các liên kết với ảnh

LAYOUT : gồm các Tables – Div – Layer – Khung ( Frame ) .
Các Đối tượng này giúp bạn mô tả cách bạn muốn trình bày .
9
Các thanh công cụ cơ bản

FORM : Gồm các thành phần Form như Trường Text ,
Nút và các Radio button, danh sách lựa chọn…

TEXT :Giúp tạo Style cho Text đã nằm trên trang tuy
nhiên tốt hơn nêndùng Property Inspector ở cuối trang
10
Các thanh công cụ cơ bản

HTML : Ít hữu dụng , cho phép bạn chèn các đối tượng như Table

– Khung – Script vốn được thực hiện tốt hơn ở nơi khác

APPLICATION : Giúp cho bạn làm việc với các cơ sở dữ liệu
bên ngoài
11
Các thanh công cụ cơ bản

FLASH ELEMENTS : Chỉ chứa 1 Đối tượng bộ xem ảnh
Flash.Nếu muốn thêm các thành phần Flash như Nút Flash – Text
– Video hãy quay về Common > Nút Media . ( H9+10).
12
Các thanh công cụ cơ bản

FAVORITES : Chỉ là rổng không . Dùng để chỉnh sửa ,
dùng để chứa những gì bạn muốn nó có . Để làm điều
này > Chọn Tập hợp Favorites > Nhấp Phải > Cho phép
bạn chọn lựa để thêm những đối tượng thường được sử
dụng nhiều nhất.
13
Các thanh công cụ cơ bản

Chức năng của từng Nút và nút xổ xuống kế bên : Để
con trỏ lên nút sẽ thấy Text mô tả chức năng của nút đó .
Nhấp nút xổ xuống kế bên ra chức năng phụ.
14
STATUS BAR ( Thanh Trạng Thái )

Góc dưới bên trái
là Bộ Chọn Thẻ
( Tag Selector ):


Nhấp < body > là
chọn toàn bộ nội
dung trang .

Nhấp bất cứ nơi
nào trong một tài
liệu > Sẽ hiện ra
Thẻ hiện hành của
vị trí mà bạn đang
nhấp > Nhấp lên
Thẻ này > Bạn sẽ
có các dữ liệu
của Thẻ đó trong
Properties.
15
STATUS BAR ( Thanh Trạng Thái )
Góc dưới bên phải : Công
cụ Select – Hand – Zoom
– Tỉ lệ % đang hiển thị -
Kích cỡ của cửa sổ đang
hiển thị ( Kế bên có nút xổ
xuống để chọn Size của
cửa sổ có sẵn ) – Ô cuối :
Ước tính thời gian mà
trình duyệt Download
trang này .Nếu không thích
2 Ô cuối cùng này , bạn có
thể thay đổi bằng cách
chọn Edit Sizes từ Menu

bật lên
16
Property Inspector

Căn cứ những gì
được chọn trong
cửa sổ tài liệu ,
các tùy chọn mô
tả sẽ xuất hiện
trong cửa sổ này
17
Các Panel

PANEL : Bên Phải màn
hình là các Panel

Các Panel có khi bị mất ,
chọn Menu Window >
Arrange Panels để chúng
xuất hiện lại . Thường
mặc định hiện hữu là :
Application\
Tag Inspector
CSS
File
18
Site cục bộ và site từ xa

MỘT SỐ ĐỊNH NGHĨA :


Folder gốc cục bộ: là folder chứa trang web bạn thiết kế được lưu
trong 1 folder ở ổ cứng , folder này chứa các Files và Folder con.

Folder gốc cục bộ có tên MY COMPANY , gồm có :

Folder CompanyInfo.

Folder Images .

Folder Products.

Khi mở trang Web : trang index ( nằm trong Folder gốc cục bộ )
sẽ tự động được Load lên.

Các Site Tỉnh : Đó là các Site trong Folder ở Ổ Cứng , sau đó sẽ
Upload lên Web Server
19
Site cục bộ và site từ xa

Các Site Động :
Khi mở Trang
Web amazon.com
và thấy các Trang
chào đón bạn và
đưa ra đề nghị
mang tính cá
nhân .Các Trang
này được tạo và
được phục vụ chỉ
cho bạn , dựa vào

việc lập trình cơ
sở dữ liệu của
amazon
20
Site cục bộ và site từ xa

Việc thiết lập Site cục bộ và Site từ xa có nhiều bước .
Dreamweaver cung cấp hộp thoại này nhằm dẫn dắt các
bạn tiến trình từng bước . Trong hộp thoại này cung cấp
cho bạn 2 chế độ Basic và Advanced .

Chế độ BASIC : Sử dụng nhiều màn Hình ( Witzard ).

Chế Độ Advanced cho phép bạn nhập thông tin trên màn Hình
với 1 số Hạng mục và cung cấp các tùy chọn chi tiết hơn trong
mỗi hạng mục.

Sử dụng hộp thoại Definition để tạo Site Cục Bộ và Site Từ xa
21
Tạo site cục bộ

Chọn Create New > Dreamweaver Site
22
Tạo site cục bộ

HT Site Definition xuất hiện , mặc định với Tab Basic ,
màn hình Editing Files
23
Tạo site cục bộ


Dreamweaver hỏi
bạn có muốn làm
việc với 1 công
nghệ sử dụng
chẳng hạn như
ColdFusion , ASP ,
NET . JSP hoặc
PHP hay không ?
Chọn NO , I do not
want to use a
Server Technology
> Next
24
Tạo site cục bộ

Dreamweaver hỏi bạn
muốn làm việc với
các Files như thế nào
trong suốt quá trình
phát triển . Dùng mặc
định . Dreamweaver
hỏi bạn lưu trử các
Files ở đâu trong máy
tính ? > Nhấp biểu
tượng Browse tìm vị
trí lưu ( Ở đây chọn
Desktop ) >Next
25