Giáo trình Thiết kế Web

rình thiết kế Web 
18 
o Chọn Table/Insert Table. Khi hộp hội thoại tạo bảng hiện ra, bạn phải cung cấp cỏc thụng 
tin chi tiết cho việc tạo bảng, vớ dụ như số dũng, số cột, kớch thước, ... 
o Chọn Table/Draw Table. Với chức năng này, bạn sẽ dựng bỳt vẽ để tạo cỏc dũng, cột 
 Để khụng hiện (hide) border của bảng, ta click phải chuột lờn table, chọn Table 
Properties/Border/Sizes bằng 0. 
 Để tỏch một cell hay trộn nhiều cell lại, ta chọn Tabe rồi chọn Split /Merge Cells. 
 Để thờm hoặc xúa cỏc cell, ta chọn Table rồi chọn Insert/Delete Cells. 
2.5. Một số hiệu ứng đặc biệt 
 Chuyển trang (Page transition): Chọn Format/Page Transition… 
 Hiệu ứng chữ chuyển động theo chiều ngang (Marquees): Chọn Insert/Component/Marquee. Sau khi 
hộp thoại hiện ra, bạn gừ vào dũng chữ cần chuyển động và đặt cỏc thuộc tớnh khỏc như màu sắc, 
font chữ, … 
 Thờm hiệu ứng font chữ cho cỏc hyperlink: Chọn Format/Background, check vào Enable hyperlink 
rollover effects. Sau đú bạn cú thể chọn cỏc màu theo ý muốn. 
2.6. Chốn ảnh 
 Chọn chức năng Insert/Picture/From File. 
 Đặt thuộc tớnh và kớch thước của ảnh, click phải chuột lờn ảnh, rồi chọn Picture Properties. 
 Để tạo cỏc hotspot hyperlink, ta chọn hỡnh vẽ tương ứng (hỡnh chữ nhật, ellipse, …) trờn thanh 
toolbar pictures. Chọn vựng trờn ảnh, rồi điền thụng tin của hyperlink vào 
2.7. Chốn hyperlink 
 Chọn chức năng Insert/Hyperlink. 
 Sau khi hộp thoại hiện ra, gừ vào hyperlink tương ứng. Cú 3 dạng: 
o Địa chỉ Internet, cú dạng: http://… Vớ dụ: http:// www.yahoo.com 
o Liờn kết tới một trang trong site, cú dạng: /thư mục/tờn tập tin. Vớ dụ: 
../images/shopping.htm 
o Liờn kết ngay chớnh trong trang, đặt bằng bookmark. 
3. Định dạng trang 
 Click phải chuột lờn trang, chọn Page Properties. 
 Để đặt màu nền cho trang, chọn Background/Colors/Background 
 Để đăt ảnh nền cho trang, chọn Background/Formatting/Background picture. 
 Để đặt cỏc thụng số về màu sắc cho hyperlink, chọn Background/Colors/Hyperlink 
 Để đặt tiờu đề cho trang chọn General/Title. 
II. THỰC HÀNH 
1. Tạo trang web cho nhúm. 
 Khởi động Microsoft Front Page 2000. 
 Soạn trang web cỏ nhõn của nhúm đặt tờn là InfoGroup.htm (vớ dụ nhúm 1 sẽ lấy tờn là 
InfoGroup1.htm). Cỏc thụng tin chớnh của cỏc thành viờn trong nhúm bao gồm: Họ và tờn, Cụng 
việc và chức vụ hiện nay, Địa chỉ liờn lạc, Điện thoại, Fax, Email, Mobile Phone, ... Ngoài ra cỏc 
nhúm cú thể bổ sung cỏc thụng tin khỏc. 
 Upload trang web đó soạn lờn website. 
 Thử truy cập trang web đó tải lờn. 
2. Tham khảo cỏc site thụng tin của Việt Nam 
3. Tham khảo cỏc site bỏn hàng nổi tiếng 
Giáo trình Thiết kế Web 
Giáo trình thiết kế Web 
19 
4. Tham khảo cỏc site giải trớ 
5. Tham khảo cỏc site về lao động việc làm tại VN 
6. Tạo trang web chứa các hyperlink dùng để truy cập nhanh 
 Tạo trang web đặt tờn là Links.htm chứa cỏc hyperlink đó đề cập ở trờn. Bổ sung thờm cỏc 
hyperlink và cỏc phõn loại khỏc mà cỏc anh chị đó biết. 
 Upload lờn website và kiểm tra lại. 
7. Tạo trang HomePage 
 Tạo trang web HomePage đặt tờn là Default.htm giới thiệu về nhúm và cỏc cụng việc mà nhúm 
đang triển khai. 
 Kết nối hai trang đó tạo vào HomePage. 
 Upload lờn website và kiểm tra lại. 
8. Chọn chủ đề để thiết kế website 
 Website về dịch vụ việc làm. 
 Website về dịch vụ nhà đất ( 
 Website bỏo điện tử ( ) 
 Website trường học. 
 Website bỏn hàng (cửa hàng, siờu thị ảo trờn Internet) 
 Website dịch vụ giải trớ như ECards, Điện hoa, ... 
 Cỏc chủ đề khỏc... 
III. ĐĂNG KÍ WEBSITE MIỄN PHÍ TRÊN INTERNET 
 1. Vào địa chỉ  để đăng kớ website miễn phớ với địa chỉ truy cập cú dạng 
Giáo trình Thiết kế Web 
Giáo trình thiết kế Web 
20 
2. Gừ vào địa chỉ mà bạn dự định đăng kớ tại ụ yourname. Sau đú click Go. Màn hỡnh tiếp theo sẽ hiện ra, 
bạn chọn mục cuối cựng 100% Free Hosting Option và click vào SignUp 
3. Sau đú bạn hóy điền vào cỏc thụng tin liờn quan cần thiết như Họ tờn, mật khẩu, email, … Cuối cựng gừ 
vào ARTK để chắc rằng bạn đó đồng ý với cỏc qui định của FreeServers khi cung cấp dịch vụ miễn phớ này. 
Giáo trình Thiết kế Web 
Giáo trình thiết kế Web 
21 
4. Nếu đăng kớ thành cụng, màn hỡnh sau sẽ hiện ra để cung cấp cho bạn một số lựa chọn khi xõy dựng 
website của mỡnh. 
Giáo trình Thiết kế Web 
Giáo trình thiết kế Web 
22 
IV.THIẾT KẾ MỘT SỐ WEBSITE MẪU 
1. Thiết kế website theo mẫu sau ( 
2. Thiết kế website theo mẫu sau ( 
Giáo trình Thiết kế Web 
Giáo trình thiết kế Web 
23 
3. Thiết kế website theo mẫu sau ( 
4. Thiết kế website theo mẫu sau ( 
Giáo trình Thiết kế Web 
Giáo trình thiết kế Web 
24 
Giáo trình Thiết kế Web 
Giáo trình thiết kế Web 
25 
5. Thiết kế website theo mẫu sau ( 
6. Thiết kế website theo mẫu sau ( 
Giáo trình Thiết kế Web 
Giáo trình thiết kế Web 
26 
7. Thiết kế website theo mẫu sau ( ) 
Để tham khảo cỏch thiết kế cỏc trang web trờn, hóy: 
- Tải về mỏy bằng cỏch chọn chức năng Save của IE. 
- Dựng MS Front Page để mở tập tin đó lưu lờn 
- Chuyển qua lại giữa cỏc màn hỡnh Normal View và HMTL View để biết cỏch thiết kế 
Với mỗi trang web đó xem hóy chỳ ý cỏc vấn đề sau: 
- Cỏch bố trớ cỏc bảng (table) 
- Cỏch sử dụng font chữ 
- Cỏch chốn vào cỏc hỡnh ảnh để trang trớ 
- Cỏch định nghĩa cỏc thuộc tớnh như màu chữ, màu nền, ... 
- Phần tĩnh (khụng thay đổi) mỗi khi click vào cỏc hyperlink chuyển qua một nội dung mới 
Từ cỏc trang web trờn, hóy tự thiết kế cỏc trang cho website của nhúm. 
PHẦN I GIỚI THIỆU 
NGÔN NGỮ HTML ...................................................................................................................1 
I. CÁC THẺ ĐỊNH CẤU TRÚC TÀI LIỆU ..............................................................................1 
Giáo trình Thiết kế Web 
Giáo trình thiết kế Web 
27 
1.1 HTML .................................................................................................................................1 
1.2 HEAD .................................................................................................................................1 
1.3 TITLE .................................................................................................................................1 
1.4 BODY .................................................................................................................................1 
II. CÁC THẺ ĐỊNH DẠNG KHỐI ............................................................................................2 
2.1. thẻ P ...................................................................................................................................2 
2.2. Các thẻ định dạng đề mục H1/H2/H3/H4/H5/H6 ..............................................................3 
2.3 Thẻ xuống dòng BR ............................................................................................................3 
2.4 Thẻ PRE ..............................................................................................................................3 
III. CÁC THẺ ĐỊNH DẠNG DANH SÁCH ..............................................................................3 
3.1. Danh sách thông thường ....................................................................................................3 
IV. CÁC THẺ ĐỊNH DẠNG KÝ TỰ .........................................................................................4 
4.1. Các thẻ định dạng in ký tự .................................................................................................4 
4.2. Căn lề văn bản trong trang Web .........................................................................................5 
4.3. Các ký tự đặc biệt...............................................................................................................6 
4.4. Sử dụng màu sắc trong thiết kế các trang Web ..................................................................6 
4.5. Chọn kiểu chữ cho văn bản ................................................................................................7 
4.6. Khái niệm văn bản siêu liên kết .........................................................................................8 
4.7. Địa chỉ tương đối ...............................................................................................................9 
4.8. Kết nối mailto ..................................................................................................................10 
4.9. Vẽ một đường thẳng nằm ngang ......................................................................................10 
V. CÁC THẺ CHÈN ÂM THANH, HÌNH ẢNH ....................................................................11 
5.1. Giới thiệu .........................................................................................................................11 
5.2. Đưa âm thanh vào một tài liệu HTML .............................................................................12 
5.3. Chèn một hình ảnh, một đoạn video vào tài liệu HTML .................................................12 
VI. CÁC THẺ ĐỊNH DẠNG BẢNG BIỂU .............................................................................13 
VII. FORM .................................................................................................................................15 
7.1. HTML Forms ...................................................................................................................15 
7.2. Tạo Form ..........................................................................................................................15 
7.3. Tạo một danh sách lựa chọn ............................................................................................16 
7.4. Tạo hộp soạn thảo văn bản ...............................................................................................16 
PHẦN II THIẾT KẾ WEB 
SỬ DỤNG MS FRONTPAGE ..................................................................................................17