Thiết kế Web với DreamWeaver

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

Trang 1

Chuyên đề : Web Design

Trang 2

Web Design

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

Trang 3

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.

Trang 4

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ả.

Trang 5

Giới thiệu

 Màn hình khởi động

Trang 6

Giới thiệu

 Giao diện chính của chương trình

Trang 7

Tiêu đề của trang hiện hành

Thể hiện lỗi khi thiết kế

Quản lý file

Các tùy chọn khi thiết kế

Trang 8

Cửa sổ làm việc

Trang 9

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

Trang 10

 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

Trang 11

 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

Trang 12

 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).

Trang 13

 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

Trang 14

 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ụ

Trang 15

STATUS BAR ( Thanh Trạng Thái )

 Góc dưới bên trái

Trang 16

STATUS BAR ( Thanh Trạng Thái )

Góc dưới bên phải : Công

cụ Select – Hand – Zoom

Trang 19

 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

Trang 21

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

Trang 22

Tạo site cục bộ

 Chọn Create New > Dreamweaver Site

Trang 23

 HT Site Definition xuất hiện , mặc định với Tab Basic , màn hình Editing Files

Trang 25

 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

Trang 26

 Chọn NONE Vì bạn chỉ tạo Site Cục Bộ > Next

Trang 27

 Màn Hình SUMMARY xuất hiện tóm lược quá trình

chọn lựa của bạn Nhấp DONE

Trang 28

Tạo site từ xa

 Định nghĩa site từ xa:

 Site Từ xa hoạt động trên Web Server , là đích của các Files , các Folder Con trong Folder Web ở Ổ Cứng của Bạn.

 Dreamweaver kết nối với Web Server bằng 1 số cách :

 FTP.

 SFTP ( Secure FTP ).

 Kết nối qua 1 giao thức là Web DAV.

 Trước khi kết nối bạn cần biết một số thông tin về Web Server :

 Loại kết nối : FTP – SFTP – Web DAV.

 Địa chỉ FTP – SFTP – Web DAV

 Password

 Đường dẫn của Folder trên Server

Trang 29

Tạo site từ xa

 Menu Site > Manage Sites > Pixel Site > Edit

Trang 31

trang Web này vào đây

 What Folder on the Server do you want to store your files in ? Nhập : Tên folder bạn muốn lưu trang web

 What is your FTP login ? Nhập : username

 What is your FTP password ? Nhập : password.

 Nhấp Nút Test Connection để bảo đảm rằng Dreamweaver có thể kết nối thành công với Web Server của bạn

Trang 32

Tạo site từ xa

Trang 33

Tạo site từ xa

 Next > Chọn mặc định > Next

Trang 34

Tạo site từ xa

 Bảng SUMMARY xuất hiện với thông tin mà bạn đã

nhập cho các Site Cục bộ và Site Từ Xa > Done

Trang 35

Tạo trang web đầu tiên

 Định dạng tổng quát cho trang Web

 C1: menu Modify → Page Properties

o C2: click phải trên màn hình thiết kế → chọn Page Properties

Xuất hiện hộp thoại Page Properties

Trang 36

Định dạng tổng quát cho trang Web:

+ Appearance:

Định dạng Font,

Size, màu chữ cho

toàn trang Web

Định dạng màu nền

hoặc sử dụng hình

ảnh để làm nền

Canh lề trái, trên

Canh lề phải, dưới

Trang 37

Màu liên kết khi active

Trang 38

+ Title/Encoding:

Định dạng kiểu mã hóa

Tiêu đề của trang Web

Trang 39

Định dạng Text trên trang Web:

+ Cách 1: vào menu Text

+ Cách 2: click phải trên màn

hình thiết kế

Trang 40

Trang 41

Trang 42

1.Chọn nhóm font có

font cần bỏ

2.Chọn font cần bỏ

3.Click nút >> để bỏ

Trang 43

+ Size:

Chọn Size trong thanh

công cụ Properties

Các kích thước có thể có của font

Các loại đơn

vị của kích thước font

Trang 44

+ Color:

Hộp thoại màu và thông tin màu được chọn

Mã của màu

Chọn màu mặc định (màu đen)

Chọn Text Color trong

thanh công cụ Properties

Trang 45

+ Các định dạng khác:

Định dạng

in đậm Định dạngin nghiêng Canh trái Canh giữa Canh phải Canh đều

Trang 46

Paragraph:

+ Khi Enter xuống dòng là qua 1 paragraph khác

+ Để xuống dòng mà không qua paragraph khác:

Ấn Shift + Enter

Hoặc:

Thanh công cụ Insert → Text → click nút

Trang 47

Paragraph:

Phân biệt giữa có Paragraph và không có Paragraph

Đây là 3 paragraph

Trang 48

Danh sách: chọn text cần tạo danh sách

+ Sử dụng thanh Properties:

Unordered List (Bullet List) Ordered List(Numbering List)

+ Sử dụng menu Text:

Menu Text → List → Unordered List/Ordered

Trang 49

Danh sách: chọn text cần tạo danh sách

+ Có thể định nghĩa danh sách riêng theo yêu cầu:Menu Text → List → Properties…

Trang 50

Hình ảnh: đặt con trỏ tại vị trí cần chèn

+ Thanh công cụ Insert:

Hộp thoại Select Image Source: chọn đường

dẫn nơi lưu file hình ảnh → chọn hình cần chèn

Trang 51

Hình ảnh: đặt con trỏ tại vị trí cần chèn

+ Menu Insert:

Chọn menu Insert → Image (Ctrl + Alt + I)

Hộp thoại Select Image Source: chọn đường

dẫn nơi lưu file hình ảnh → chọn hình cần chèn

→ click OK

Lưu ý:

Hình ảnh khác thư mục và hình ảnh cùng thư mục trang Web đang thiết kế thì khác nhau

Trang 52

Hình ảnh:

Kết quả:

Trang 53

Hình ảnh:

Thuộc tính:

Chuỗi Tooltip thể hiện trên hình ảnh Canh biên hìnhảnh so với IE

Trang 54

Trang 55

Liên kết:

Tạo liên kết: có 3 cách tạo

+ Thanh công cụ Properties:

+ Click phải mouse:

+ Menu Modify:

Trang 56

Liên kết:

⇒ Xuất hiện hộp thoại Select File:

Trang 57

Liên kết:

Lưu ý:

+ URL (Uniform Resource Locator): là địa chỉ

của một đối tượng thường được gõ vào vùng

Address của các Web Browser

+ Địa chỉ tuyệt đối − Địa chỉ tương đối:

Địa chỉ tuyệt đối: là địa chỉ đầy đủ.

Vd: http://www.hut.edu.vn/forum/index.htm

Trang 58

Liên kết:

Lưu ý:

Địa chỉ nền: là địa chỉ bắt đầu của 1 trang Web.

Vd: http://www.hut.edu.vn/forum/index.htm

Trang 59

Liên kết:

Lưu ý:

Địa chỉ tương đối: là địa chỉ được tính từ địa chỉ

nền

Vd: http://www.hcmuns.edu.vn/forum/index.htm

Trang 60

Trang 61

Trang 62

Trang 63

Liên kết:

Phân loại: có 2 loại liên kết chính

⇒ Có thể kết hợp 2 loại liên kết trên

Trang chứa liên kết Trang khác chứa vị

URL = <địa chỉ trang liên kết>#<vị trí liên kết>

Trang 64

Liên kết:

Các hình thức liên kết:

+ Mở liên kết bằng một cửa sổ mới

+ Mở liên kết trên cùng một cửa sổ

+ Mở liên kết là một địa chỉ mail

Trang 65

Trang 66

Trang 67

Phân vùng liên kết trên một ảnh:

Trang 68

Bảng:

Tạo bảng:

+ Đặt con trỏ ở vị trí cần tạo bảng

+ Vào menu Insert → chọn Table

Hoặc: click nút Table trên tab

Common,

thanh công cụ Insert

Trang 69

Bảng:

Độ dày khung

Độ rộng cột

Trang 70

Bảng:

Chọn bảng:

+ Đặt con trỏ bên trong bảng cần chọn

+ Click phải → chọn Table → Select Table

(Hoặc: vào menu Modify → Table → Select Table)

Trang 71

Trang 72

2) Bảng:

Φ Thuộc tính:

Ngoài ra còn có các thuộc tính khác như:

+ Canh biên cho từng ô

+ Định dạng font/color/background cho ô

+ In đậm, in nghiêng

+ Nối ô (merge cell) và chia ô (split cell)

………

Trang 73

Trang 74

Layout:

Cách thức chung:

+ Tạo thêm, nối hoặc chia nhỏ các hàng và

cột, tùy theo giao diện của yêu cầu thiết kế

+ Chèn thông tin vào các ô ở các vị trí tương ứng trên bảng

+ Tinh chỉnh kích thước các ô và nội dung

⇒ Khó điều chỉnh kích thước theo đúng yêu cầu

Trang 75

Layout:

Chế độ Layout View:

+ Ở chế độ này, bảng giống như bảng ở chế độ

Standard

+ Cell pading , Cell spacing và Border = 0

+ Kích thước các ô/bảng sẽ dễ dàng chỉnh sửa

được yêu cầu của thiết kế.

+ Mỗi ô của bảng sẽ chứa 1 khoảng trắng.

Trang 76

Layout:

Tạo Layout Table:

+ Chọn tab Layout trên thanh công cụ Insert.+ Click nút Layout, chọn công cụ Layout Table

+ Tạo tùy ý trên cửa sổ thiết kế

+ Tạo các ô bên trong Layout Table vừa tạo (sử dụng công cụ Draw Layout Cell)

Trang 77

Layer:

Khái niệm:

+ Layer (lớp) là một vùng có thể đặt bất kỳ vị trí nào trên trang Web

+ Có thể chứa bất kỳ các thành phần khác:

text, hình ảnh, danh sách, … và có thể chứa 1 lớp con

+ Chỉ thiết kế ở chế độ Standard

Trang 78

Layer:

+ Có thể thay đổi kích thước/vị trí của layer.

Trang 79

Layer:

Ví dụ:

Tạo hiệu ứng nổi cho hình/text trên trang Web

Tạo 1 layer chứa text

Copy thành 1 layer mới

Trang 80

Flash:

√ Là một dạng file media, dùng để tạo hiệu ứng sinh động trên trang Web

√ Một số ứng dụng của file Flash:

+ Tạo ảnh và các hiệu ứng chuyển động

+ Tạo những đoạn film nhỏ

+ Các hiệu ứng về âm thanh

+ Tạo các trò chơi

Trang 81

Flash:

Chèn file Flash đã có vào trang Web:

+ Thanh công cụ Insert: tab Common → Flash

+ Menu Insert: chọn Media → Flash

+ Ấn tổ hợp phím: Ctrl + Alt + F

Trang 82

Flash:

√ Cách tạo 1 Flash Text:

→ Flash Text

+ Menu Insert: chọn Media → Flash → Flash

Trang 83

Flash:

√ Cách tạo 1 Flash Text:

Hộp thoại Insert Flash Text:

Trang 84

Flash:

√ Cách tạo 1 Flash Button:

→ Flash Button

+ Menu Insert: chọn Media → Flash

Trang 85

Flash:

√ Cách tạo 1 Flash Button:

Hộp thoại Insert Flash Button:

Trang 86

Rollover Image:

√ Khi di chuyển mouse trên một ảnh thì ảnh

này sẽ biến đổi thành một ảnh khác

√ Thao tác tạo 1 Rollover Image:

+ Thanh công cụ Insert: tab Common → Image

→ Rollover Image

+ Menu Insert: chọn Image Objects → Rollover

Trang 87

Rollover Image:

+ Hộp thoại Insert Rollover Image:

Trang 88

Navigation Bar:

Khái niệm:

+ Trên một trang Web thì chỉ tồn tại duy nhất

một Navigation Bar

+ Là dạng menu gồm nhiều nút thể hiện các

chức năng Khi di chuyển mouse trên nút sẽ có hiệu ứng thay đổi

Trang 89

Navigation Bar:

Thao tác tạo:

+ Thanh công cụ Insert: tab Common → Image

→ Navigation Bar

Trang 90

Navigation Bar:

+ Hộp thoại Insert Navigation Bar:

Trang 91

Lưu ý: hình ảnh có thể bị biến dạng khi thu nhỏ

hoặc phóng to cửa sổ trình duyệt

Trang 92

Trang 93

CSS (Cascade Style Sheet):

Trang 94

√ Text:

Thao tác chung:

+ Tạo mẫu định dạng chung (CSS Style) cho text

 Vào menu Text → CSS Styles → New

 Đặt tên cho mẫu định dạng → click OK

Trang 95

Trang 96

Trang 97

Trang 98

Trang 99

Trang 100

Trang 101

Trang 102

Trang 103

Trang 104

Trang 105

√ Text:

Thao tác chung:

+ Chọn text cần định dạng theo mẫu

+ Chọn định dạng đã được tạo

Trang 106

√ Ngoài ra có thể sử dụng CSS cho các đối tượng khác như: hình ảnh, bảng …

Trang 107

Định dạng
Số trang	107
Dung lượng	4,7 MB

Tiêu đề	Thiết kế Web với DreamWeaver
Trường học	Trường Đại học Bách Khoa Hà Nội
Chuyên ngành	Web Design
Thể loại	Chuyên đề
Thành phố	Hà Nội