Giáo trình Thiết kế Web - Nguyễn Hữu Tuấn

Hữu Tuấn Email: prohuutuan@yahoo.com - 0912378211  Ngoài ra, ta cũn cú thể chọn hỡnh ảnh để thay cho cỏc kiểu bullet thụng thường. Để thay đổi, ta chọn Format/Bullets and Numbering/Picture bullets, rồi chọn ảnh dựng để làm bullet  Để bỏ định dạng bullets, ta chọn Format/Bullets and Numbering/Plain Bullets. 2.4. Tables  Người ta thường dựng table để: o Hiển thị cỏc thụng tin cú dạng dũng/cột, vớ dụ như bảng thời khúa biểu, thụng tin sản phẩm, .. o Trỡnh bày (layout) cỏc văn bản(text) và cỏc ảnh đồ họa(graphics).  Để tạo một bảng, ta cú thể dựng một trong hai cỏch: 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. Giáo trình thiết kế Web 19 Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com - 0912378211  Để đặ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 : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com - 0912378211 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 : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com - 0912378211  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 : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com - 0912378211 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 : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com - 0912378211 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 : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com - 0912378211 Giáo trình thiết kế Web 25 Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com - 0912378211 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 : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com - 0912378211 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 27 Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com - 0912378211 Giáo trình thiết kế Web 28 Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com - 0912378211 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 : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com - 0912378211 Giáo trình thiết kế Web 30 Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com - 0912378211 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 : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com - 0912378211 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...................................................................................................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.....................................13 VI. CÁC THẺ ĐỊNH DẠNG BẢNG BIỂU .........................................................14 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 Giáo trình thiết kế Web 32 Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com - 0912378211 PHẦN II THIẾT KẾ WEB SỬ DỤNG MS FRONTPAGE.................................................18 Giáo trình thiết kế Web 33