Thiet ke web 2

GIỚI THIỆU Công dụng:  Quản lý toàn bộ website o Các trang web bên trong website o Các tập tin thư viện dùng trong quá trình thiết kế trang web  Xây dựng bố cục  Chèn nội dung văn b

MỤC LỤC

LỜI NÓI ĐẦU ERROR! BOOKMARK NOT DEFINED TÀI LIỆU THAM KHẢO ERROR! BOOKMARK NOT DEFINED.

BÀI 1: GIỚI THIỆU TỔNG QUAN VỀ DREAMWEAVER 3

I GIỚI THIỆU 3

II CÁC THAO TÁC CĂN BẢN TRONG DREAMWEAVER 3

III ĐỊNH DẠNG GIAO DIỆN VÀ VĂN BẢN CHO TRANG WEB 5

BÀI 2: BẢNG (TABLE) 8

I CHÈN BẢNG 8

II HIỆU CHỈNH BẢNG 8

BÀI 3: IMAGE 9

I CHÈN ẢNH VÀO TRANG WEB 9

II XÓA ẢNH KHỎI TRANG WEB 10

III HIỆU CHỈNH KÍCH THƯỚC ẢNH 10

IV HIỆU CHỈNH CÁC THUỘC TÍNH KHÁC CỦA ẢNH TRÊN TRANG WEB THÔNG QUA CỬA SỔ PROPERTIES 10

BÀI 4: FORM 11

I CHÈN FORM MỚI VÀO TRANG WEB 11

II THAY ĐỔI CÁC THUỘC TÍNH CỦA FORM 11

III TEXT FIELD 11

IV TEXTAREA 11

V HIDDEN FIELD 11

VI CHECKBOX 11

VII CHECKBOX GROUP 11

VIII RADIO BUTTON 11

IX RADIO GROUP 11

X LIST/MENU 12

XI JUMP MENU GROUP 12

XII FILE FIELD 12

XIII BUTTON 12

II FLASH TEXT 12

III FLASH BUTTON 13

IV CHÈN ĐỐI TƯỢNG FLASH 13

V HYPERLINK 13

BÀI 1: GIỚI THIỆU TỔNG QUAN VỀ DREAMWEAVER

I GIỚI THIỆU

Công dụng:

 Quản lý toàn bộ website

o Các trang web bên trong website

o Các tập tin thư viện dùng trong quá trình thiết kế trang web

 Xây dựng bố cục

 Chèn nội dung văn bản

 Chèn hình ảnh

 Chèn âm thanh (audio), đoạn phim (video clip)

 Ưu điểm của DreamWeaver: kết quả hiển thị trên trình duyệt gần giống với giao diện

ta thiết kế trên DreamWeaver

Khởi động Adobe DreamWeaver

 Cách 1: Vào Start -> All Programs -> Adobe DreamWeaver CS2

 Cách 2: Click đôi chuột lên biểu tượng Adobe DreamWeaver CS2 trên màn hình desktop

(Từ đây về sau, giáo trình sẽ viết tắt là DreamWeaver cho ngắn gọn)

II CÁC THAO TÁC CĂN BẢN TRONG DREAMWEAVER

Tạo site mới

B1: Vào menu Site -> New Site Xuất hiện hộp thoại Site Definition, Editing Files

B2: Nhập tên site Ví dụ: LTMT1K10 Chọn Next tiếp tục Xuất hiện Editing Files, Part 2

B3: Chọn “No, I do not want to use a server technology, chọn Next Xuất hiện Editing Files, Part 3

B4: Chọn Edit local copies on my machine…, chọn thư mục chứa website Chọn Next tiếp tục Xuất hiện Sharing Files

B5: Chọn None rồi chọn Next tiếp tục Xuất hiện Summary

Chọn Done hoàn tất

Chọn Site đã có để tiếp tục thiết kế cho các trang

Vào menu Site -> Manage Sites Xuất hiện hộp thoại Manage Sites

Chọn site trong danh sách, chọn Done

Thêm thư mục mới vào Site

Click chuột phải lên đối tượng chứa trong cửa sổ Files, chọn New Folder

Xuất hiện thư mục mới, đặt tên cho thư mục

Thêm file (html) mới vào Site

Click chuột phải lên đối tượng chứa trong cửa sổ Files, chọn New File

Xuất hiện file mới, đặt tên cho file (phần mở rộng là html)

Mở một file (html) đã có trong Site để thiết kế

Trong cửa sổ Files, click đôi chuột lên file cần mở

III ĐỊNH DẠNG GIAO DIỆN VÀ VĂN BẢN CHO TRANG WEB

Định dạng tổng thể cho trang web

 B1: Vào menu Modify -> Page Properties (Ctrl-J) Xuất hiện hộp thoại Page Properties

 B2: Category Appearance (CSS)

o Page font: Chọn font chữ mặc định cho trang web

o Size: Chọn kích thước và đơn vị cho mặc định cho ký tự

o Text color: Chọn màu mặc định cho ký tự

o Background color: Chọn màu nền cho trang web

o Background image: Chọn tập tin ảnh làm nền cho trang web

o Repeat: Chọn chế độ lập lại ảnh nền

o Left margin: Canh lề trái

o Right margin: Canh lề phải

o Link font: Chọn font chữ cho văn bản liên kết

o Size: Chọn kích tước chữ cho văn bản liên kết

o Link color: Chọn màu mặc định cho văn bản liên kết

o Rollover link: Chọn màu cho văn bản liên kết khi rê chuột đến

o Visited links: Chọn màu mặc định cho văn bản liên kết đã được click

o Active links: Chọn màu mặc định cho văn bản liên kết hiện tại

o Underline style: Chọn định dạng gạch chân cho văn bản liên kết

o Always underline: định dạng gạch chân

o Nerver underline: không gạch chân

o Show underline only on rollover: chỉ gạch chân khi rê chuột đến văn bản liên kết

o Hide underline on rollerver: không gạch chân cho văn bản liên kết nhưng khi rê chuột đến thì gạch chân

 B4: Category Title/Encoding

o Titlte: Văn bản tiêu đề trang (hiển thị trên thanh tiêu đề của trình duyệt)

o Encoding: Chọn mã hóa văn bản Luôn luôn chọn Unicode (UTF-8)

 B5: Chọn Apply và OK hoàn tất

Định dạng văn bản

B1: Nhập văn bản

B2: Dùng chuột chọn khối văn bản cần định dạng

B3: Vào menu Format

 Align: Canh lề văn bản

o Left: canh trái

o Center: canh giữa

o Right: canh phải

o Justify: canh đều

 List: Định dạng danh sách đề mục

o None: không định dạng đề mục

o Unordered List: định dạng đề mục (không đánh số thứ tự)

o Ordered List: định dạng đánh số thứ tự đề mục

 Font: Chọn font chữ cho văn bản

o Sau khi chọn font, xuất hiện hộp thoại New CSS Rule

BÀI 2: BẢNG (TABLE)

I CHÈN BẢNG

B1: Click chuột tại vị trí cần chèn bảng

B2: Vào menu Insert -> Table Xuất hiện hộp thoại Table

B3: Nhập các thông số cho bảng cần chèn

 Rows: số dòng

 Columns: số cột

 Table width: chiều rộng của bảng

 Border thickness: độ dày đường viền

 Cell padding: khoảng cách giữa đường biên của ô với nội dung trong ô

 Cell spacing: khoảng cách giữa các ô trong bảng

 Header: tùy chọn vị trí tiêu đề

II HIỆU CHỈNH BẢNG

Định dạng cho bảng

 B1: Click chuột tại vị trí bất kỳ bên trong bảng cần hiệu chỉnh

 B2: Vào menu Modify -> Table -> Select table

 B3: Hiệu chỉnh các thông số của bảng trong cửa sổ Properties

 Bg color: chọn màu nền cho bảng

 Bg Image: chọn ảnh làm nền cho bảng

 Brdr color: chọn màu cho đường viền của bảng

Trộn nhiều ô thành 1 ô

 B1: Quét chọn các liên tiếp cần trộn

 B2: Vào menu Modify -> Table -> Merge cells

Tách 1 ô thành nhiều ô

 B1: Click chuột vào ô cần tách

 B2: Vào menu Modify -> Table -> Split cell Xuất hiện hộp thoại Split cell

 B3: Chọn tùy chọn Split cell into

o Rows: tách ô thành nhiều dòng

o Columns: tách ô thành nhiều cột

o Number of …: số lượng cần tách

Định dạng ô trong bảng

 B1: Click chuột vào ô cần định dạng

 B2: Chọn các tùy chọn định dạng trong vùng Cell của cửa sổ Properties

o Horz: canh lề theo chiều ngang

o Vert: canh lề theo chiều dọc

o W: chiều rộng của ô

o H: chiều cao của ô

o Bg: chọn màu, tập tin ảnh làm nền cho ô

o Brdr: chọn màu cho đường viền của ô

BÀI 3: IMAGE

I CHÈN ẢNH VÀO TRANG WEB

Cách 1: Chèn bằng menu lệnh

 B1: Trên vùng nhìn Design của trang web, click chuột tại vị trí cần chèn ảnh

 B2: Chọn menu Insert -> Image Xuất hiện hộp thoại Select Image Source

 B3: Chọn file ảnh cần chèn, chọn OK

 B4: Xuất hiện hộp thoại Image Tag Accessibility Attributes

o Alternate text: nội dung ngắn, mô tả cho hình ảnh

o Long description: địa chỉ trang web mô tả đầy đủ cho hình ảnh

 B5: Nhập nội dung cho Alternate text và Long description trong hộp thoại Image Tag Accessbility Attributes

 B6: Chọn OK

*Có thể bỏ qua bước B5

Cách 2: Kéo rê ảnh từ cửa sổ Files và trang web

II.XÓA ẢNH KHỎI TRANG WEB

 B1: Trên vùng nhìn Design của trang web, click chuột lên ảnh cần xóa

 B2: Bấm Delete trên bàn phím

III HIỆU CHỈNH KÍCH THƯỚC ẢNH

Thay đổi kích thước (chiều rộng và chiều cao) hiển thị của ảnh trên trang web

 B1: Trên vùng nhìn Design của trang web, chọn ảnh cần thay đổi kích thước

 B2: Di chuyển chuột đến các điểm neo của ảnh, con trỏ chuột sẽ có hình mũi tên 2 chiều

 B3: Click giữ trái và kéo rê chuột để thay đổi kích thước

*Chú ý: trong quá trình kéo rê chuột, nên ấn và giữ phím Ctrl trên bàn phím để ảnh không bị

biến dạng

IV HIỆU CHỈNH CÁC THUỘC TÍNH KHÁC CỦA ẢNH TRÊN TRANG WEB THÔNG QUA CỬA SỔ PROPERTIES

 W: Kích thước chiều rộng hiển thị trên trang web

 H: Kích thước chiều cao hiển thị trên trang web

 Border: Kích thước viền của đường biên ảnh

 V Space: Khoảng cách giữa đường biên (theo chiều dọc) với hình ảnh

 H Space: Khoảng cách giữa đường biên (theo chiều ngang) với hình ảnh

 Src: đường dẫn đến tập tin ảnh

 Link: địa chỉ liên kết đến trang khác khi click chuột lên hình ảnh trên trình duyệt web

 Target: tên đối tượng hiển thị trang web được liên kết khi click chuột lên ảnh (sẽ được biết ở bài sau)

 Low src: đường dẫn đến file ảnh khác nhưng có kích thước (lưu trữ) nhỏ hơn

 Alt: nội dung ngắn, mô tả cho hình ảnh

 Align: cách thức hiển thị hình ảnh trên trang web

 Class: lớp định dạng cho ảnh trên trang web (sẽ được biết đến trong bài CSS)

BÀI 4: FORM

I CHÈN FORM MỚI VÀO TRANG WEB

 B1: Trên vùng nhìn Design của trang web, click chuột tại vị trí cần chèn form

 B2: Chọn menu Insert -> Form -> Form

II THAY ĐỔI CÁC THUỘC TÍNH CỦA FORM

 B1: Click chuột trên đường viền đỏ thể hiện form

 B2: Hiệu chỉnh các thuộc tính của form trên cửa sổ Properties

o Action: địa chỉ trang web sẽ nhận các dữ liệu trên form

o Method: phương thức gửi dữ liệu

o Target: đối tượng cửa sổ (hoặc frame) hiển thị kết quả

III TEXT FIELD

 B1: Click chuột lên vị trí cần chèn Text Field trong form

 B2: Vào menu Insert -> Form -> Text Field Xuất hiện hộp thoại Input Tag Accessibility Attributes

 B3: Nhập các thông tin tùy chọn cho Text Field

IV TEXTAREA

 B1: Click chuột tại vị trí cần chèn Textarea

 B2: Vào menu Insert -> Form -> Textarea

 B3: Nhập các thông tin tùy chọn cho Textarea

V HIDDEN FIELD

 B1: Click chuột tại vị trí cần chèn Hidden Field

 B2: Vào menu Insert -> Form -> Hidden Field

VI CHECKBOX

 B1: Click chuột tại vị trí cần chèn Checkbox

 B2: Vào menu Insert -> Form -> Checkbox

 B3: Nhập các thông tin tùy chọn cho Checkbox

VII CHECKBOX GROUP

 B1: Click chuột tại vị trí cần chèn Checkbox Group

 B2: Vào menu Insert -> Form -> Checkbox Group

 B3: Nhập các thông tin tùy chọn cho Checkbox Group

VIII RADIO BUTTON

 B1: Click chuột tại vị trí cần chèn Radio Button

 B2: Vào menu Insert -> Form -> Radio Button

 B3: Nhập các thông tin tùy chọn cho Radio Button

IX RADIO GROUP

 B1: Click chuột tại vị trí cần chèn Radio Group

X LIST/MENU

 B1: Click chuột tại vị trí cần chèn List/Menu

 B2: Vào menu Insert -> Form -> List/Menu

 B3: Nhập các thông tin tùy chọn cho List/Menu

 B4: Nhập các mục chọn trong List/Menu

XI JUMP MENU GROUP

 B1: Click chuột tại vị trí cần chèn Jump Menu

 B2: Vào menu Insert -> Form -> Jump Menu

 B3: Nhập các thông tin tùy chọn cho Jump Menu

XII FILE FIELD

 B1: Click chuột tại vị trí cần chèn File Field

 B2: Vào menu Insert -> Form -> File Field

 B3: Nhập các thông tin tùy chọn cho File Field

XIII BUTTON

 B1: Click chuột tại vị trí cần chèn Button

 B2: Vào menu Insert -> Form -> Button

 B3: Nhập các thông tin tùy chọn cho Button

BÀI 5: HIỆU ỨNG HÌNH ẢNH

I ROLLOVER IMAGE

Tạo hiệu ứng đổi ảnh khi rê chuột lên ảnh

 B1: Trên vùng nhìn Design của trang web, click chuột tại vị trí cần chèn form

 B2: Chọn menu Insert -> Image Objects -> Rollover Image Xuất hiện hộp thoại Insert Rollover Image

 B3: Nhập các thông tin cho Rollover Image

o Image name: tên của rollover image Tên của các rollover image phải khác nhau

o Original image: đường dẫn hình ảnh hiển thị đầu tiên

o Rollover image: đường dẫn hình ảnh sẽ được hiển thị khi rê chuột lên ảnh

o Preload rollover image: các ảnh sẽ được nạp xong rồi mới hiển thị

o Alternate text: nội dung ngắn mô tả cho ảnh

o When clicked, go to URL: địa chỉ trang web sẽ được liên kết điến khi click chuột lên ảnh

II FLASH TEXT

Tạo nội dung ngắn có hiệu ứng flash đổi màu đơn giãn

 B1:Trên vùng nhìn Design của trang web, click chuột tại vị trí cần chèn Flash Text

 B3: Nhập các thông tin cho Flash Text

o Font, size: chọn font và kích thước chữ

o Text: nội dung văn bản ngắn

o Color: màu sắc hiển thị văn bản

o Rollover color: màu sắc của văn bản sẽ được thay đổi khi rê chuột lên Flash Text

o URL: địa chỉ trang web được liên kết đến khi click chuột lên Flash Text

o Path: đường dẫn tập tin để lưu kết quả

III FLASH BUTTON

Tạo nút nhấn có hiệu ứng flash đơn giãn theo mẫu của DreamWeaver

 B1:Trên vùng nhìn Design của trang web, click chuột tại vị trí cần chèn Flash Button

 B2:Vào menu Insert -> Objects -> Flash Button Xuất hiện hộp thoại Insert Flash Button

 B3:Nhập các thông tin cho Flash Button

o Font, size: chọn font và kích thước chữ

o Style: chọn mẫu nút nhấn

o Text: nội dung văn bản ngắn trên nút

o URL: địa chỉ trang web được liên kết đến khi click chuột trên Flash Button

o Path: đường dẫn tập tin để lưu kết quả

IV CHÈN ĐỐI TƯỢNG FLASH

 B1: Trên vùng nhìn Design của trang web, click chuột tại vị trí cần chèn đối tượng Flash

 B2: Kéo rê đối tượng flash (tập tin swf) vào vị trí cần chèn

V HYPERLINK

Tạo liên kết đến trang web khác, liên kết gửi email hoặc nhảy đến vị trí khác trong trang

 B1: Quét khối hoặc chọn hình ảnh cần tạo liên kết

 B2: Vào menu Insert -> Hyperlink Xuất hiện hộp thoại Hyperlink

 B3: Nhập các thông tin cho liên kết muốn tạo

o Link: đường dẫn đến trang trong site hoặc trang web bên ngoài cần liên kết đến

o Target: đối tượng đích sẽ hiển thị nội dung trang được liên kết

o Title: tiêu đề mô tả cho liên kết

* Tạo liên kết đến một trang cùng site với trang hiện tại:

 Link: đường dẫn tương đối đến trang

 Ví dụ: gioithieu.html

* Tạo liên kết đến trang ngoài site

 Link: mailto://địa chỉ email

 Ví dụ: mailto://tailieu@gmail.com

VI TEMPLATE

1 Cách tạo Template

Hình 20 Tạo template cho Website

Trong việc thiết kế web, bạn sẽ thiết kế một trang chủ và hệ thống gồm rất nhiều trang con

Để trang chủ và các trang con đều có cấu trúc nhất quán với nhau, bạn phải tạo một trang gọi

là template Khi đó muốn thay đổi nội dung cho toàn bộ Website, bạn chỉ cần đơn giản thay

đổi nội dung ở trang template và cập nhật lại cho toàn bộ Website với những thao tác thật

đơn giản

Tập tin template tạo ra sẽ có phần đuôi là dwt và nó sẽ mặc định đặt trong Templates folder

Để tạo một template, bạn tiến hành như sau:

Khởi động Dreamweaver Vào menu File, chọn New Ở Page Type > chọn HTML template sau đó bấm vào nút Create để mở một trang mới lên (hình 20)

Tiếp theo, bạn khai báo các thông tin về website mới bằng cách vào Site, chọn Manage Sites, sau đó chọn New trong cửa sổ tiếp theo để khai báo

Tối thiểu cần khai báo một số thông tin sau (hình 21)

- Site name: tên Website

- Local root folder: thư mục gốc trên máy

- Default images folder: thư mục mặc định dành cho hình ảnh

Hình 21 Chọn thư mục lưu trữ Website

Sau khi khai báo xong chọn Save và bắt đầu tạo template Khi xác định thành phần nào trong

web là không thay đổi, bạn sẽ tạo trang web với những thành phần đó, sau đó chọn File > Save as Template

Ngoài ra, bạn cũng có thể tạo ra một template từ một trang web đã thiết kế trước đó bằng

cách mở trang web đó lên bằng Dreamweaver, tiến hành khai báo Site mới cho trang web đó

và chọn File > Save as template Sau đó đặt tên cho template vừa tạo

Tiếp theo, bạn xác định các vùng có thể thay đổi được như sau:

- Chọn vùng có thể thay đổi được bằng cách bấm chuột vào bảng của vùng đó (vùng được chọn sẽ có viền màu đen đậm bao quanh)

- Chọn Insert > Tenplate > Editable Region (hình 22)