Giao trinh thiet ke web

+ Chia màn hình thành nhiều phần khác nhau, mỗi vùng thể hiện một trang Web khác nhau. Công dụng:. + Giảm được phần trùng lắp trên nhiều trang Web khác nhau.[r]

(1)

MÔN HỌC

MÔN HỌC: : THIẾT KẾ WEBTHIẾT KẾ WEB

THIẾT KẾ WEB BẰNG

MACROMEDIA DREAMWEAVER

(2)

NỘI DUNG

Giới thiệu Macromedia Dreamweaver

Thiết kế Web số công cụ

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 số hiệu ứng

(3)

MỤC TIÊU

Sử dụng phần mềm DreamWeaver để:

Thiết kế trang Web tĩnh

Tạo hiệu ứng trang Web

(4)

1) Tổng quan Dreamweaver:

 Là 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ông cụ thiết kế trang Web

động hiệu

GIỚI THIỆU DREAMWEAVER

(5)

2) Khởi động Dreamweaver:

Chọn Start  Programs  Macromedia 

Dreamweaver

(6)

3) Giao diện Dreamweaver:

(7)

4) Chức thành phần:

 Thanh công cụ Document:

Thiết kế HTML

công cụ Thiết kế công cụ Tiêu đề trang hành Thể lỗi thiết kế

Quản lý file

Xem thử kết trình duyệt

(8)

 Thanh công cụ Insert:

 Common:

(9)

 Thanh công cụ Insert:

Ngồi cịn có nhóm cơng cụ khác:

+ Layout: cách bố trí, xếp thành phần + Forms: biểu mẫu

+ Text: định dạng văn

+ HTML: thẻ HTML

+ Application: ứng dụng Web động + Flash elements: thành phần Flash

(10)

1) Tạo lưu trang Web:

THIẾT KẾ TRANG WEB

Xuất cửa sổ thiết kế

Hoặc chọn menu File  New

 Tạo trang Web: click HTML

(11)

1) Tạo lưu trang Web:

1 Chọn đường dẫn nơi lưu file

2 Đặt tên file phần mở rộng

3.Chọn loại file Sau chọn

 Lưu trang Web: chọn menu File  Save (Ctrl + S)

Xuất hộp

(12)

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

C1: menu Modify  Page Properties(Ctrl+J)

C2: click phải hình thiết kế  chọn Page

Properties

(13)

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

Hộp thoại Page Properties

(14)

(15)

2) Định dạng tổng quát cho trang Web: + Links:

Định dạng Font, size, màu chữ cho liên kết

Màu liên kết sau click

Màu liên kết di chuyển chuột

trên liên kết

(16)

(17)

3) Định dạng Text trang Web: + Cách 1: vào menu Text

+ Cách 2: click phải hình thiết kế

(18)

3) Định dạng Text trang Web: + Font:

Chọn Font công cụ Properties

Liệt kê font có sẳn

(19)

3) Định dạng Text trang Web:

 Thêm Font vào danh sách font:

1.Chọn font cần thêm Nhóm font hành

2.Thêm font vào nhóm font hành

(20)

 Bỏ Font danh sách font:

1.Chọn nhóm font có font cần bỏ

(21)

3) Định dạng Text trang Web: + Size:

Chọn Size trong công cụ Properties

Các kích thước có font

(22)

+ Color:

Hộp thoại màu thông tin màu chọn

Con trỏ chọn màu Mã màu

được chọn Chọn nhiều màu

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

Màu chọn

(23)

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

Định dạng

in đậm in nghiêngĐịnh dạng Canh trái Canh Canh phải Canh

(24)

4) Paragraph:

+ Khi Enter xuống dòng qua 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

(25)

4) Paragraph:

Phân biệt có Paragraph khơng có Paragraph

(26)

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

+ Sử dụng Properties:

Unordered List

(Bullet List) (Numbering List)Ordered List

+ Sử dụng menu Text:

(27)

5) 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…

(28)

6) Hình ảnh: đặt trỏ 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  click OK

(29)

6) Hình ảnh: đặt trỏ 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 ý:

(30)

6) Hình ảnh: Kết quả:

(31)

6) Hình ảnh: Thuộc tính:

Chuỗi Tooltip thể

(32)

6) Hình ảnh: Thuộc tính:

Độ dày khung bao

quanh hình ảnh so với textCanh biên

Middle = Absolute Middle Top = TextTop

Baseline (Default)

Bottom = Absolute Bottom

Canh biên so với IE Chuỗi Tooltip thể

hình ảnh Số khoảng

trắng dọc ngang

so với text trang

(33)

7) Liên kết:

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

+ Thanh công cụ Properties:Quét chọn mục cần link

+ Click phải mouse:

+ Menu Modify:

(34)

7) Liên kết:

(35)

7) Liên kết:

Lưu ý:

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

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

các Web Browser

+ Địa tuyệt đối  Địa tương đối:

Địa chỉ tuyệt đối: địa đầy đủ

(36)

7) Liên kết:

Lưu ý:

các Web Browser

Địa chỉ nền: địa bắt đầu trang Web

(37)

7) Liên kết:

Lưu ý:

các Web Browser

Địa chỉ tương đới: địa tính từ địa

(38)

7) Liên kết:

Phân loại: có loại liên kết

+ Liên kết ngoài:

……… ……… Liên kết ……… ……… ……… ……… ……… ……… ………

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

(39)

7) Liên kết:

+ Liên kết trong:

……… ……… Liên kết

……… ……… Vị trí k ………

Liên kết vị trí cần liên kết nằm trang Web

Liên kết

Vị trí cần liên kết (điểm neo)

(40)

7) Liên kết:

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

……… ……… Liên kết ……… ……… ……… ……… Vị trí k ……… ………

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

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

(41)

7) Liên kết:

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

+ Mở liên kết cửa sổ

(42)

7) Liên kết:

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

+ Sử dụng hình ảnh làm liên kết Chọn hình ảnh làm liên kết

(43)

7) Liên kết: Bỏ liên kết:

+ Chọn liên kết

+ Xóa tất có thuộc tính Link

(44)

1) Phân vùng liên kết ảnh: Tạo đồ ảnh(Map)

MỘT SỐ KỸ THUẬT

+ Chọn hình ảnh cần phân vùng liên kết + Chọn loại công cụ dùng để phân vùng

Phân vùng

hình chữ nhật Phân vùnghình elip hình đa giácPhân vùng

(45)

2) Bảng:

Tạo bảng:

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

+ Vào menu Insert  chọn Table

Hoặc: click nút Table tab Common,

thanh công cụ Insert

(46)

2) Bảng:

Tạo bảng: Số dòng Số cột

Độ dày khung

(47)

2) Bảng:

Chọn bảng:

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

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

(48)

2) Bảng:

Thuộc tính: Số cột Số dòng Chiều rộng Chiều cao Canh biên Độ dày khung

Clear Row Heights/Column Widths Convert Table Heights/Widths to Pixels

Convert Table Heights/Widths to Percents Màu Ảnh

(49)

2) Bảng:

 Thuộc tính:

Ngồi cịn có thuộc tính khác như: + Canh biên cho

+ Định dạng font/color/background cho ô + In đậm, in nghiêng

(50)

3) Layout:

Mục đích:

+ Sắp xếp thông tin theo yêu cầu thiết kế + Thao tác dễ dàng thiết kế

 Nên sử dụng công cụ bảng để xếp

(51)

3) Layout:

Cách thức chung:

+ Tạo bảng có số lượng hàng cột phù hợp với

lượng thông tin trang Web (có Border = 0)

+ Tạo thêm, nối chia nhỏ hàng cột, tùy theo giao diện yêu cầu thiết kế

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

+ Tinh chỉnh kích thước nội dung

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

(52)

3) Layout:

Chế độ Layout View:

+ Ở chế độ này, bảng giống bảng chế độ Standard

+ Cell pading, Cell spacing Border =

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

so với bảng chế độ Stadard, giúp đáp ứng

yêu cầu thiết kế

+ Mỗi ô bảng chứa khoảng trắng

(53)

3) Layout:

Tạo Layout Table:

+ Chọn tab Layout công cụ Insert

+ Click nút Layout, chọn công cụ Layout Table

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

+ Tạo ô bên Layout Table vừa tạo

(54)

3) Layer:

Khái niệm:

+ Layer (lớp) vùng đặt vị trí trang Web

+ Có thể chứa thành phần khác: text,

hình ảnh, danh sách, … chứa lớp

(55)

3) Layer:

Thao tác:

+ Thanh Insert  chọn tab Layout  Standard

+ Chọn cơng cụ Draw Layer  drag vị trí cần tạo

(Hoặc vào menu Insert  Layout Objects  Layer)

(56)

3) Layer:

Ví dụ:

Tạo hiệu ứng cho hình/text trang Web

Tạo layer chứa text

Copy thành layer

(57)

4) Flash:

 Là dạng file media, dùng để tạo hiệu ứng sinh

động trang Web

 Một số ứng dụng file Flash:

+ Tạo ảnh hiệu ứng chuyển động + Tạo đoạn film nhỏ

(58)

4) Flash:

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

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

+ Menu Insert: chọn Media  Flash

(59)

4) Flash:

 Cách tạo Flash Text:

 Flash Text

(60)

4) Flash:

 Cách tạo Flash Text:

(61)

4) Flash:

 Cách tạo Flash Button:

 Flash Button

+ Menu Insert: chọn Media  Flash

(62)

4) Flash:

 Cách tạo Flash Button:

(63)

5) Rollover Image:

 Khi di chuyển mouse ảnh ảnh

biến đổi thành ảnh khác

 Thao tác tạo Rollover Image:

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

 Rollover Image

+ Menu Insert: chọn Image Objects  Rollover

(64)

5) Rollover Image:

(65)

6) Navigation Bar:

Khái niệm:

+ Trên trang Web tồn nhất

Navigation Bar

(66)

Thao tác tạo:

+ Menu Insert: chọn Image Objects 

Navigation Bar

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

(67)

(68)

7) Frame:

+ Chia hình thành nhiều phần khác nhau, vùng thể trang Web khác Công dụng:

+ Giảm phần trùng lắp nhiều trang Web khác

Lưu ý: hình ảnh bị biến dạng thu nhỏ

(69)

7) Frame:

+ Thanh công cụ Insert: tab Layout  Frames

 chọn kiểu Frame

Thao tác tạo:

+ Menu Insert: chọn HTML  Frames  chọn kiểu

(70)

8) CSS (Cascade Style Sheet):

 Text:

Thao tác chung:

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

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

Công dụng:

(71)

 Text:

Thao tác chung:

 Vào menu Text  CSS Styles  New

(72)

 Text:

Thao tác chung:

 Đặt tên file

CSS lưu Windows

 Click nút Save

(73)

 Text:

Thao tác chung:

 Xuất hộp

thoại cho phép

(74)

 Text:

Thao tác chung:

(75)

 Text:

Thao tác chung:

(76)

 Text:

Thao tác chung:

(77)

 Text:

Thao tác chung:

(78)

 Text:

Thao tác chung:

(79)

 Text:

Thao tác chung:

(80)

 Text:

Thao tác chung:

(81)

 Text:

Thao tác chung:

(82)

 Text:

Thao tác chung:

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

(83)

 Ngồi sử dụng CSS cho đối tượng

(84)

9) Form:

+ Các thành phần Form:

• Label, Text Field, Text Area, Password Field

• Check Box, Radio Button, Radio Group

Công dụng:

+ Giúp người dùng giao tiếp với WebServer thành phần Form

• List/Menu

• Button, Image Field

(85)

9) Form:

Thao tác tạo:

+ Thanh công cụ Insert: tab Forms  Form

+ Menu Insert: chọn Form  Form

+ Sau chèn thành phần vào Form (tùy theo yêu cầu công việc) cách sử dụng công

cụ công cụ Insert – tab Forms/menu