BỘ LAO ĐỘNG-THƯƠNG BINH CỘNG HÒA XÃ HỘI CHỦ …thuvien.brtvc.edu.vn/Documents/cntt/Thiet_ke_Web_1.pdf · CÁC THAO TÁC CĂN BẢN TRONG DREAMWEAVER ... TÀI LIỆU

MỤC LỤC

NỘI DUNG TRANG

LỜI NÓI ĐẦU ................................................................................................................................ 3

TÀI LIỆU THAM KHẢO ............................................................................................................. 4

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

I. GIỚI THIỆU .............................................................................................................................. 5

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

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

BÀI 2: BẢNG (TABLE) ............................................................................................................... 11

I. CHÈN BẢNG .......................................................................................................................... 11

II. HIỆU CHỈNH BẢNG ............................................................................................................ 11

BÀI 3: IMAGE ............................................................................................................................. 13

I. CHÈN ẢNH VÀO TRANG WEB .......................................................................................... 13

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

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

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

BÀI 4: FORM ............................................................................................................................... 15

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

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

III TEXT FIELD ......................................................................................................................... 15

IV. TEXTAREA ......................................................................................................................... 15

V. HIDDEN FIELD .................................................................................................................... 15

VI. CHECKBOX ........................................................................................................................ 15

VII. CHECKBOX GROUP ........................................................................................................ 15

VIII. RADIO BUTTON .............................................................................................................. 15

IX. RADIO GROUP ................................................................................................................... 15

X. LIST/MENU .......................................................................................................................... 16

XI. JUMP MENU GROUP ......................................................................................................... 16

XII. FILE FIELD ........................................................................................................................ 16

XIII. BUTTON ........................................................................................................................... 16

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

I. ROLLOVER IMAGE .............................................................................................................. 17

Giáo trình Thiết kế web Trang 1

II. FLASH TEXT ........................................................................................................................ 17

III. FLASH BUTTON ................................................................................................................. 17

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

V. HYPERLINK ......................................................................................................................... 18


LỜI NÓI ĐẦU

Giáo trình “Thiết kế web” được biên soạn dành cho học sinh trung cấp nghề và sinh viên cao

đẳng nghề với mục tiêu cung cấp cho các em các kiến thức và kỹ năng làm việc trên phần mềm

Adobe DreamWeaver CS2.- Một phần mềm hỗ trợ thiết kế và quản lý trang web chuyên nghiệp

được sử dụng rộng rãi hiện nay. Phần mềm Adobe DreamWeaver có nhiều phiên bản (hiện nay

đã có phiên bản CS5). Trong giáo trình này, tác giả trình bày nội dung dựa trên Adobe

DreamWeaver CS2.

Giáo trình được biên soạn một cách ngắn gọn, hướng dẫn các bước thực hiện rõ ràng và dễ hiểu

giúp cho các em thực hành và hình thành kỹ năng nhanh chóng.

Trong quá trình biên soạn, chắc chắn giáo trình còn nhiều thiếu sót. Tác giả rất mong nhận được

ý kiến đóng góp của quý thầy/cô và các em học sinh, sinh viên.

TÁC GIẢ

Phan Hữu Phước


TÀI LIỆU THAM KHẢO


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 Top margin: Canh lề trên o Bottom margin: Canh lề dưới

• B3: Category Link (CSS) 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


o Chọn lớp định dạng (Class) o Chọn tên lớp định dạng hoặc nhập tên mới o Chọn OK

• Style: Chọn định dạng o Bold: chữ đậm o Italic: chữ nghiêng o Underline: chữ gạch chân

• Color: Chọn màu cho văn bản


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 • B2: Vào menu Insert -> Form -> Radio Group • B3: Nhập các thông tin tùy chọn cho 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. • B2: Chọn menu Insert -> Objects -> Flash Text. Xuất hiện cửa sổ Insert 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: đường dẫn tuyệt đối Ví dụ: http://www.hcmus.edu.vn

* Tạo liên kết gửi email: Link: mailto://địa chỉ email Ví dụ: mailto://[email protected]


http://www.hcmus.edu.vn/