Giáo trình thiết kế web Nguyễn Hữu Tuấn

http:123link.proV8C5 http:123link.proV8C5 http:123link.proV8C5http:123link.proV8C5http:123link.proV8C5http:123link.proV8C5http:123link.proV8C5http:123link.proV8C5http:123link.proV8C5http:123link.proV8C5http:123link.proV8C5http:123link.proV8C5http:123link.proV8C5http:123link.proV8C5

đợc sử dụng để định dạng đoạn văn Cú pháp:

Nội dung đoạn văn bản

• Môc thø nhÊt
• Môc thø hai

Danh sách có xếp (hay có đánh số) < OL>, mục da nh sách đợc xếp thứ tự Danh sách thực đơn Danh sách phân cấp Với nhiều trình duyệt, danh sách phân cấp danh sách thực đơn giống danh sách không đánh số, cã thĨ dïng lÉn víi Víi thỴ OL ta
1. Muc thu nhat
2. Muc thu hai
3. Muc thu ba
có cú pháp sau: đó: TYPE =1 Các mục đợc xếp theo thứ tự 1, 2, =a Các mục đợc xếp theo thứ tự a, b, c Giáo trình thiết kế Web Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -0912378211 =A Các mục đợc xếp theo thứ tự A, B, C =i Các mục đợc s¾p xÕp theo thø tù i, ii, iii =I Các mục đợc xếp theo thứ tự I, II, III Ngoài thuộc tính START= xác định giá trị khởi đầu cho danh sách Thẻ < LI > có thuộc tính TYPE= xác định ký hiệu đầu dòng (bullet) đứng trớc mục danh sách Thuộc tính nhận giá trị : disc (chấm tròn đậm); circle (vòng tròn); square (hình vuông) IV Các thẻ định dạng ký tự 4.1 Các thẻ định dạng in ký tự Sau thẻ đợc sử dụng để quy định thuộc tính nh in nghiêng, in đậm, gạch chân cho ký tự, văn đợc thể trình duyệt In chữ đậm Đánh dấu đoạn văn hai thẻ định nghĩa từ Chúng thờng đợc in nghiêng thể qua kiểu đặc biệt In chữ bị gạch ngang Giáo trình thiết kế Web In chữ nghiêng In chữ gạch chân In chữ lớn bình thờng cách tăng kích thớc font thời lên Việc sử dụng thẻ lồng tạo hiệu ứng chữ tăng dần Tuy nhiên trình duyệt có giới hạn kích thớc font chữ, vợt giới hạn này, thẻ ý nghĩa In chữ nhỏ bình thờng cách giảm kích thớc font thời Việc sử dụng thẻ lồng tạo hiệu ứng chữ giảm dần Tuy nhiên trình duyệt có giới hạn kích thớc font chữ, vợt giới hạn này, thẻ ý Giáo trình Thiết kế Web : prohuutuan@yahoo.com -0912378211 Nguyễn Hữu Tuấn Email: nghĩa Định dạng số (SuperScript) Chọn kiểu chữ hiển thị Trong thẻ đặt hai tham số size= color= xác định cỡ chữ màu sắc đoạn văn nằm hai thẻ Kích thớc tuyệt đối (nhận giá trị từ đến 7) tơng đối (+2,-4 ) so với font chữ Định dạng số dới (SubScript) Định nghĩa kích thớc font chữ đợc sử dụng hết văn Thẻ có tham số size= xác định cỡ chữ Thẻ thẻ kết thúc 4.2 Căn lề văn trang Web Trong trình bày trang Web bạn phải ý đến việc lề văn để trang Web có đợc bố cục đẹp Một số thẻ định dạng nh P, Hn, IMG có tham số ALIGN cho phép bạn lề văn nằm phạm vi giới hạn thẻ Các giá trị cho tham số ALIGN: LEFT Căn lề trái CENTER Căn trang RIGHT Căn lề phải Ngoài ra, sử dụng thẻ CENTER để trang khối văn Cú pháp: Văn đợc trang 4.3 Các ký tự đặc biệt Ký tự & đợc sử dụng để chuỗi ký tự sau đợc xem thực thể Ký tự ; đợc sử dụng để tách ký tự từ Ký tự Mã ASCII Tên chuỗi < > < > < > Giáo trình thiết kế Web Giáo trình Thiết kế Web : Nguyễn prohuutuan@yahoo.com -0912378211 & & Hữu Tuấn Email: & 4.4 Sử dụng màu sắc thiết kế trang Web Một màu đợc tổng hợp từ ba thành phần màu chính, là: Đỏ (Red), Xanh (Green), Xanh nớc biển (Blue) Trong HTML giá trị màu số nguyên dạng hexa (hệ đếm số 16) có định dạng nh sau: #RRGGBB đó: RR - giá trị màu Đỏ GG - giá trị màu Xanh BB - giá trị màu Xanh nớc biển Màu sắc đợc xác định qua thuộc tính bgcolor= hay color= Sau dấu giá trị RGB hay tên tiếng Anh màu Với tên tiếng Anh, ta chØ cã thĨ chØ 16 mµu với giá trị RGB ta tới 256 màu Sau số giá trị màu bản: Màu sắc Giá trị Tên tiếng Anh Đỏ #FF0000 RED Đỏ sẫm #8B0000 DARKRED Xanh #00FF00 GREEN Xanh nh¹t #90EE90 LIGHTGREEN Xanh níc biĨn #0000FF BLUE Vàng #FFFF00 YELLOW Vàng nhạt #FFFFE0 LIGHTYELLOW Trắng #FFFFFF WHITE Đen #000000 BLACK Xám #808080 GRAY Nâu #A52A2A BROWN Tím #FF00FF MAGENTA TÝm nh¹t #EE82EE VIOLET Hång #FFC0CB PINK Da cam #FFA500 ORANGE Màu đồng phục hải Giáo trình thiết kế Web Giáo trình Thiết kế Web : prohuutuan@yahoo.com -0912378211 quân Nguyễn Hữu #000080 NAVY #4169E1 ROYALBLUE #7FFFD4 AQUAMARINE Tn Email: Có ph¸p: phần nội dung tài liệu đợc đặt Sau ý nghĩa tham số thẻ BODY: Các tham số ý nghĩa LINK Chỉ định màu văn siêu liên kết ALINK Chỉ định màu văn siêu liên kết đang chọn VLINK Chỉ định màu văn siêu liên kết mở BACKGROUND Chỉ định địa ảnh dùng làm BGCOLOR Chỉ định màu TEXT Chỉ định màu văn tài liệu SCROLL YES/NO - Xác định có hay không cuộn TOPMARGIN Lề RIGHTMARGIN Lề phải LEFTMARGIN Lề trái Giáo trình thiết kế Web Giáo trình Thiết kế Web : prohuutuan@yahoo.com -0912378211 4.5 Chọn kiểu chữ cho văn Nguyễn Hữu Tuấn Email: Cú pháp: 4.6 Kh¸i niệm văn siêu liên kết Văn siêu liên kết hay gọi siêu văn từ, cụm từ hay câu trang Web đợc dùng để liên kết tới trang Web khác Siêu văn môi trờng chứa liên kết (link) thông tin Do WWW cấu thành từ nhiều hệ thống khác nhau, cần phải Dịch vơ Cỉn g Tªn file http://selab.vnuh.edu.vn:8080 /~dir1/dir2/dir3/index.HTML#chapter001 Tªn hƯ thèng §êng dÉn VÝ dơ vỊ URL C¸c tham sè, biÕn, truy vấn có quy tắc đặt tên thống cho tất văn Web Quy tắc đặt tên URL (Universal Resource Locator) Các thành phần URL đợc minh hoạ hình Dịch vụ: Là thành phần bắt buộc URL Nó xác định cách thức trình duyệt máy khách liên lạc với máy phục vụ nh để nhận liệu Có nhiều dịch vụ nh http, wais, ftp, gopher, telnet Tên hệ thống : Là thành phần bắt buộc URL Có thể tên miền đầy đủ máy phục vụ phần tên đầy đủ trờng hợp xảy văn đợc yêu cầu nằm miền bạn Tuy nhiên nên sử dụng đờng dẫn đầy đủ Cổng : Không thành phần bắt buộc URL Cổng địa socket mạng dành cho giao thức cụ thể Giao thức http ngầm định nối với cổng 8080 Giáo trình thiết kế Web Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -0912378211 Đờng dẫn th mục : Là thành phần bắt buộc URL Phải đờng dẫn tới file yêu cầu kết nối với hệ thống Có thể đờng dẫn URL khác với đờng dẫn thực hệ thống máy phục vụ Tuy nhiên rút gọn đờng dẫn cách đặt biệt danh (alias) Các th mục đờng dẫn cách dấu gạch chéo (/) Tên file : Không thành phần bắt buộc URL Thông thờng máy phục vụ đợc cấu hình cho không tên file trả file ngầm định th mục đợc yêu cầu File thờng có tên index.html, index.htm, default.html hay default.htm Nếu file thờng kết trả danh sách liệt kê file hay th mục th mục đợc yêu cầu Các tham số : Không thành phần bắt buộc URL Nếu URL yêu cầu tìm kiếm sở liệu truy vấn gắn vào URL, đoạn mã đằng sau dấu chấm hỏi (?).URL trả lại thông tin đợc thu thập từ form Trong trờng hợp dấu thăng (#) xuất đoạn mã đăng sau tên vị trí (location) file đợc Để tạo siêu văn sử dụng thẻ Cú pháp: siêu văn ý nghĩa tham số: HREF Địa trang Web đợc liên kết, URL NAME Đặt tên cho vị trí đặt thẻ TABLEINDEX Thứ tự di chuyển ấn phím Tab TITLE Văn hiển thị di chuét trªn siªu liªn kÕt TARGET Më trang Web đợc liên cửa sổ (_blank) cửa sổ (_self), frame (tên frame) Giáo trình thiết kế Web 10 Giáo trình Thiết kế Web : prohuutuan@yahoo.com -0912378211  Ngun H÷u Tn Email: Để 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ị thơng tin có dạng dòng/cột, ví dụ bảng thời khóa biểu, thơng tin sản phẩm, o  Trình bày (layout) văn bản(text) ảnh đồ họa(graphics) Để tạo bảng, ta dùng hai cách: o Chọn Table/Insert Table Khi hộp hội thoại tạo bảng ra, bạn phải cung cấp thơng tin chi tiết cho việc tạo bảng, ví dụ số dòng, số cột, kích thước, o Chọn Table/Draw Table Với chức này, bạn dùng bút vẽ để tạo dòng, cột  Để khơng (hide) border bảng, ta click phải chuột lên table, chọn Table Properties/Border/Sizes  Để tách cell hay trộn nhiều cell lại, ta chọn Tabe chọn Split /Merge Cells  Để thêm xóa cell, ta chọn Table 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 hộp thoại ra, bạn gõ vào dòng chữ cần chuyển động đặt thuộc tính khác màu sắc, font chữ, …  Thêm hiệu ứng font chữ cho hyperlink: Chọn Format/Background, check vào Enable hyperlink rollover effects Sau bạn chọn màu theo ý muốn 2.6 Chèn ảnh  Chọn chức Insert/Picture/From File  Đặt thuộc tính kích thước ảnh, click phải chuột lên ảnh, chọn Picture Properties  Để tạo hotspot hyperlink, ta chọn hình vẽ tương ứng (hình chữ nhật, ellipse, …) toolbar pictures Chọn vùng ảnh, điền thông tin hyperlink vào 2.7 Chèn hyperlink  Chọn chức Insert/Hyperlink  Sau hộp thoại ra, gõ vào hyperlink tương ứng Có dạng: o Địa Internet, có dạng: http://… Ví dụ: http:// www.yahoo.com o Liên kết tới trang site, có dạng: /thư mục/tên tập tin Ví dụ: /images/shopping.htm o Liên kết trang, đặt bookmark Định dạng trang  Click phải chuột lên trang, chọn Page Properties  Để đặt màu cho trang, chọn Background/Colors/Background  Để đăt ảnh cho trang, chọn Background/Formatting/Background picture  Để đặt thông số màu sắc cho hyperlink, chn Background/Colors/Hyperlink Giáo trình thiết kế Web 21 Giáo trình Thiết kế Web : prohuutuan@yahoo.com -0912378211 Nguyễn H÷u TuÊn Email: Để đặt tiêu đề cho trang chọn General/Title Giáo trình thiết kế Web 22 Giáo trình Thiết kÕ Web : prohuutuan@yahoo.com -0912378211 Ngun H÷u Tn Email: II THỰC HÀNH Tạo trang web cho nhóm  Khởi động Microsoft Front Page 2000  Soạn trang web cá nhân nhóm đặt tên InfoGroup.htm (ví dụ nhóm lấy tên InfoGroup1.htm) Các thơng tin thành viên nhóm bao gồm: Họ tên, Công việc chức vụ nay, Địa liên lạc, Điện thoại, Fax, Email, Mobile Phone, Ngoài nhóm bổ sung thơng tin khác  Upload trang web soạn lên website  Thử truy cập trang web tải lên Tham khảo site thông tin Việt Nam  http://vnexpress.net/  http://www.vnn.vn/  http://www.vdc.com.vn Tham khảo site bán hàng tiếng  http://shopping.yahoo.com  http://www.amazon.com Tham khảo site giải trí  http://greetings.yahoo.com  http://www.vnn.vn/ecards/  http://www.fpt.vn/Postcard/main.asp  http://www.geraldstevens.com/  http://www.1800flowers.com/ Tham khảo site lao động việc làm VN  http://203.162.5.43/ld2000/  http://www.vietname-business.com/jobnld/  http://www.jobsonline.saigonnet.vn/ Tạo trang web chứa hyperlink dùng để truy cập nhanh  Tạo trang web đặt tên Links.htm chứa hyperlink đề cập Bổ sung thêm hyperlink phân loại khác mà anh chị biết  Upload lên website kiểm tra lại Tạo trang HomePage  Tạo trang web HomePage đặt tên Default.htm giới thiệu nhóm cơng việc mà nhóm triển khai  Kết nối hai trang tạo vào HomePage  Upload lên website kiểm tra lại Chọn chủ đề để thiết kế website  Website dịch vụ việc làm  Website dịch vụ nhà đất (http://www.nhadat.com) Giáo trình thiết kế Web 23 Giáo trình Thiết kế Web : prohuutuan@yahoo.com -0912378211 NguyÔn  Website báo điện tử (http://vnexpress.net )  Website trường học  Website bán hàng (cửa hàng, siêu thị ảo Internet)  Website dịch vụ giải trí ECards, Điện hoa,  Các ch khỏc Giáo trình thiết kế Web Hữu Tuấn Email: 24 Giáo trình Thiết kế Web : prohuutuan@yahoo.com -0912378211 Ngun H÷u Tn Email: III ĐĂNG KÍ WEBSITE MIỄN PHÍ TRÊN INTERNET Vào địa http://www.freeservers.com để đăng kí website miễn phí với địa truy cập có dạng http://.freeservers.com Gõ vào địa mà bạn dự định đăng kí yourname Sau click Go Màn hình ra, bạn chọn mục cuối 100% Free Hosting Option click vào SignUp Giáo trình thiết kế Web 25 Giáo trình Thiết kế Web : prohuutuan@yahoo.com -0912378211 Ngun H÷u Tn Email: Sau bạn điền vào thơng tin liên quan cần thiết Họ tên, mật khẩu, email, … Cuối gõ vào ARTK để bạn đồng ý với qui định FreeServers cung cấp dịch vụ miễn phí Nếu đăng kí thành cơng, hình sau để cung cấp cho bạn số lựa chọn xây dựng website ca mỡnh Giáo trình thiết kế Web 26 Giáo trình Thiết kế Web : prohuutuan@yahoo.com -0912378211 Giáo trình thiết kế Web Nguyễn Hữu Tuấn Email: 27 Giáo trình Thiết kế Web : prohuutuan@yahoo.com -0912378211 Ngun H÷u Tn Email: IV.THIẾT KẾ MỘT SỐ WEBSITE MẪU Thiết kế website theo mẫu sau (http://greetings.yahoo.com) Thiết kế website theo mẫu sau (http://www.flowers.com) Giáo trình thiết kế Web 28 Giáo trình Thiết kế Web : prohuutuan@yahoo.com -0912378211 Ngun H÷u Tn Email: Thiết k website theo mu sau (http://shopping.yahoo.com) Giáo trình thiết kế Web 29 Giáo trình Thiết kế Web : prohuutuan@yahoo.com -0912378211 Ngun H÷u Tn Email: Thiết kế website theo mẫu sau (http://www.is-edu.hcmuns.edu.vn) Giáo trình thiết kế Web 30 Giáo trình ThiÕt kÕ Web : prohuutuan@yahoo.com -0912378211 Ngun H÷u Tn Email: Thiết kế website theo mẫu sau (http://vnexpress.net) Thiết k website theo mu sau (http://www.codeproject.com) Giáo trình thiết kế Web 31 Giáo trình Thiết kế Web : prohuutuan@yahoo.com -0912378211 Giáo trình thiết kế Web Nguyễn Hữu Tuấn Email: 32 Giáo trình Thiết kế Web : prohuutuan@yahoo.com -0912378211 Nguyễn Hữu TuÊn Email: Thiết kế website theo mẫu sau (http://www.bttvn.com ) Để tham khảo cách thiết kế trang web trên, hãy: - Tải máy cách chọn chức Save IE - Dùng MS Front Page để mở tập tin lưu lên - Chuyển qua lại hình Normal View HMTL View để biết cách thiết kế Với trang web xem ý vấn đề sau: - Cách bố trí bảng (table) - Cách sử dụng font chữ - Cách chèn vào hình ảnh để trang trí - Cách định nghĩa thuộc tính màu chữ, màu nền, - Phần tĩnh (không thay đổi) click vào hyperlink chuyển qua nội dung Từ trang web trên, tự thiết kế cỏc trang cho website ca nhúm Giáo trình thiết kế Web 33 Giáo trình Thiết kế Web : prohuutuan@yahoo.com -0912378211 Nguyễn Hữu Tuấn Email: Phần I Giới thiệu ngôn ngữ Html I C¸c thẻ định cấu trúc tài liệu 1.1 HTML 1.2 HEAD 1.3 TITLE 1.4 BODY II C¸c thẻ định dạng khối 2.1 thỴ P 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 2.4 ThỴ PRE III Các thẻ định dạng danh s¸ch 3.1 Danh sách thông thờng IV Các thẻ định dạng ký tự 4.1 Các thẻ định dạng in ký tù .4 4.2 Căn lề văn trang Web 4.3 Các ký tự đặc biệt 4.4 Sử dụng màu sắc thiết kế trang Web .6 4.5 Chọn kiểu chữ cho văn .8 4.6 Kh¸i niƯm văn siêu liên kết .8 4.7 Địa tơng đối 10 4.8 KÕt nèi mailto 10 4.9 Vẽ đờ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 vào tài liệu HTML .13 5.3 Chèn hình ảnh, đ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 34 Giáo trình Thiết kế Web : Ngun H÷u Tn Email: prohuutuan@yahoo.com -0912378211 7.1 HTML Forms 16 7.2 T¹o Form 16 7.3 Tạo danh sách lùa chän 17 7.4 Tạo hộp soạn thảo văn .17 PhÇn II thiÕt kÕ web sư dơng ms frontpage 18 Giáo trình thiết kÕ Web 35 ... xây dựng website ca mỡnh Giáo trình thiết kế Web 26 Giáo trình Thiết kế Web : prohuutuan@yahoo.com -0912378211 Giáo trình thiết kế Web Nguyễn Hữu Tuấn Email: 27 Giáo trình Thiết kÕ Web : prohuutuan@yahoo.com... IV.THIẾT KẾ MỘT SỐ WEBSITE MẪU Thiết kế website theo mẫu sau (http://greetings.yahoo.com) Thiết kế website theo mẫu sau (http://www.flowers.com) Giáo trình thiết kế Web 28 Giáo trình Thiết kÕ Web. .. Background/Colors/Hyperlink Giáo trình thiết kế Web 21 Giáo trình Thiết kế Web : prohuutuan@yahoo.com -0912378211 Ngun H÷u Tn Email: Để đặt tiêu đề cho trang chn General/Title Giáo trình thiết kế Web 22 Giáo trình