Giáo trình Thiết kế Web - Chu Văn Hoành

le 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. 
Giáo trình thiết kế Web 19 
Giáo trình Thiết kế Web : Chu Văn Hoành - Email: chuhoanh.dhxd@gmail.com 
 ã Để đặ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. 
Giáo trình thiết kế Web 20 
Giáo trình Thiết kế Web : Chu Văn Hoành - Email: chuhoanh.dhxd@gmail.com 
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 
 ã  
 ã  
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ử ( ) 
Giáo trình thiết kế Web 21 
Giáo trình Thiết kế Web : Chu Văn Hoành - Email: chuhoanh.dhxd@gmail.com 
 ã 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... 
Giáo trình thiết kế Web 22 
Giáo trình Thiết kế Web : Chu Văn Hoành - Email: chuhoanh.dhxd@gmail.com 
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  
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 
Giáo trình thiết kế Web 23 
Giáo trình Thiết kế Web : Chu Văn Hoành - Email: chuhoanh.dhxd@gmail.com 
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. 
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 24 
Giáo trình Thiết kế Web : Chu Văn Hoành - Email: chuhoanh.dhxd@gmail.com 
Giáo trình thiết kế Web 25 
Giáo trình Thiết kế Web : Chu Văn Hoành - Email: chuhoanh.dhxd@gmail.com 
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 26 
Giáo trình Thiết kế Web : Chu Văn Hoành - Email: chuhoanh.dhxd@gmail.com 
3. Thiết kế website theo mẫu sau ( 
Giáo trình thiết kế Web 27 
Giáo trình Thiết kế Web : Chu Văn Hoành - Email: chuhoanh.dhxd@gmail.com 
4. Thiết kế website theo mẫu sau ( 
Giáo trình thiết kế Web 28 
Giáo trình Thiết kế Web : Chu Văn Hoành - Email: chuhoanh.dhxd@gmail.com 
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 29 
Giáo trình Thiết kế Web : Chu Văn Hoành - Email: chuhoanh.dhxd@gmail.com 
Giáo trình thiết kế Web 30 
Giáo trình Thiết kế Web : Chu Văn Hoành - Email: chuhoanh.dhxd@gmail.com 
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. 
Giáo trình thiết kế Web 31 
Giáo trình Thiết kế Web : Chu Văn Hoành - Email: chuhoanh.dhxd@gmail.com 
 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 
 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................................................................................ 8 
 4.6. Khái niệm văn bản siêu liên kết......................................................................... 8 
 4.7. Địa chỉ tương đối.............................................................................................10 
 4.8. Kết nối mailto..................................................................................................10 
 4.9. Vẽ một đường thẳng nằm ngang......................................................................11 
 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..............................................................13 
 5.3. Chèn một hình ảnh, một đoạn video vào tài liệu HTML...................................13 
 VI. Các thẻ định dạng bảng biểu.........................................................14 
 VII. FORM........................................................................................................16 
Giáo trình thiết kế Web 32 
Giáo trình Thiết kế Web : Chu Văn Hoành - Email: chuhoanh.dhxd@gmail.com 
 7.1. HTML Forms..................................................................................................16 
 7.2. Tạo Form.........................................................................................................16 
 7.3. Tạo một danh sách lựa chọn.............................................................................17 
 7.4. Tạo hộp soạn thảo văn bản...............................................................................17 
 Phần II 
 thiết kế web sử dụng ms frontpage................................................18 
Giáo trình thiết kế Web 33