Tài liệu thiết kế web

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 I Các thẻ định cấu trúc ti liệu 1.1 HTML Cặp thẻ đợc sử dụng để xác nhận tài liệu tài liệu HTML, tức có sử dụng thẻ HTML để trình bày Toàn nội dung tài liệu đợc đặt cặp thẻ Cú pháp: Toàn nội tài liệu đợc đặt Trình duyệt xem tài liệu không sử dụng thẻ nh tệp tin văn bình thờng 1.2 HEAD Thẻ HEAD đợc dùng để xác định phần mở đầu cho tài liệu Cú pháp: Phần mở đầu (HEADER) tài liệu đợc đặt 1.3 TITLE Cặp thẻ sử dụng phần mở đầu tài liệu, tức phải nằm thẻ phạm vi giới hạn cặp thẻ Cú pháp: Tiêu đề tài liệu 1.4 BODY Thẻ đợc sử dụng để xác định phần nội dung tài liệu - phần thân (body) tài liệu Trong phần thân chứa thông tin định dạng định để đặt ảnh cho tài liệu, màu nền, màu văn siêu liên kết, đặt lề cho trang tài liệu Những thông tin đợc đặt phần tham số thẻ Giáo trình thiết kế Web http://www.ebook.edu.vn Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -0912378211 phần nội dung tài liệu đợc đặt Cú pháp: Trên cú pháp thẻ BODY, nhiên HTML 3.2 có nhiều thuộc tính đợc sử dụng thẻ BODY Sau thuộc tính chính: BACKGROUND= Đặt ảnh làm ảnh (background) cho văn Giá trị tham số (phần sau dấu bằng) URL file ảnh Nếu kích thớc ảnh nhỏ cửa sổ trình duyệt toàn hình cửa sổ trình duyệt đợc lát kín nhiều ảnh BGCOLOR= Đặt mầu cho trang hiển thị Nếu hai tham số BACKGROUND BGCOLOR có giá trị trình duyệt hiển thị mầu trớc, sau tải ảnh lên phía TEXT= Xác định màu chữ văn bản, kể đề mục ALINK=,VLINK=,LINK= Xác định màu sắc cho siêu liên kết văn Tơng ứng, alink (active link) liên kết đợc kích hoạt - tức đợc kích chuột lên; vlink (visited link) liên kết đợc kích hoạt; Nh tài liệu HTML có cấu trúc nh sau: Tiêu đề tài liệu Nội dung tài liệu II Các thẻ định dạng khối 2.1 thẻ P Thẻ đợc sử dụng để định dạng đoạn văn Cú pháp: Nội dung đoạn văn bản Giáo trình thiết kế Web http://www.ebook.edu.vn Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -0912378211 2.2 Các thẻ định dạng đề mục H1/H2/H3/H4/H5/H6 HTML hỗ trợ mức đề mục Chú ý đề mục dẫn định dạng mặt logic, tức trình duyệt thể đề mục dới khuôn dạng thích hợp Có thể trình duyệt font chữ 14 point nhng sang trình duyệt khác font chữ 20 point Đề mục cấp cao giảm dần đến cấp Thông thờng văn đề mục cấp hay cấp thờng có kích thớc nhỏ văn thông thờng Dới thẻ dùng để định dạng văn dạng đề mục: Định dạng đề mục cấp Định dạng đề mục cấp Định dạng đề mục cấp Định dạng đề mục cấp Định dạng đề mục cấp Định dạng đề mục cấp 2.3 Thẻ xuống dòng BR Thẻ thẻ kết thúc tơng ứng (), có tác dụng chuyển sang dòng Lu ý, nội dung văn tài liệu HTML đợc trình duyệt Web thể liên tục, khoảng trắng liền nhau, ký tự tab, ký tự xuống dòng đợc coi nh khoảng trắng Để xuống dòng tài liệu, bạn phải sử dụng thẻ 2.4 Thẻ PRE Để giới hạn đoạn văn đợc định dạng sẵn bạn sử dụng thẻ Văn hai thẻ đợc thể giống hệt nh chúng đợc đánh vào, ví dụ dấu xuống dòng đoạn văn giới hạn thẻ có ý nghĩa chuyển sang dòng (trình duyệt không coi chúng nh dấu cách) Cú pháp: Văn đợc định dạng III Các thẻ định dạng danh sách 3.1 Danh sách thông thờng Cú pháp: Mục thứ Mục thứ hai Giáo trình thiết kế Web http://www.ebook.edu.vn Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -0912378211 Có kiểu danh sách: ` Danh sách không xếp ( hay không đánh số) Danh sách có xếp (hay có đánh số) , 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ố, dùng lẫn với Với thẻ OL ta có cú pháp sau: Muc thu nhat Muc thu hai Muc thu ba đó: 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 =A Các mục đợc xếp theo thứ tự A, B, C =i Các mục đợc 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 Giáo trình thiết kế Web In chữ đậm In chữ nghiêng http://www.ebook.edu.vn Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -0912378211 In chữ gạch chân Đá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 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ẻ ý nghĩa Định dạng số (SuperScript) Đị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 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ữ 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 Giáo trình thiết kế Web http://www.ebook.edu.vn Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -0912378211 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 < < < > > > & & & 4.4 Sử dụng mu 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 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 Giáo trình thiết kế Web http://www.ebook.edu.vn Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -0912378211 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 quân #000080 NAVY #4169E1 ROYALBLUE #7FFFD4 AQUAMARINE 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ở Giáo trình thiết kế Web http://www.ebook.edu.vn Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -0912378211 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 4.5 Chọn kiểu chữ cho văn 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 có quy tắc đặt tên thống cho tất văn Web Quy tắc Dịch vụ Cổng Tên file http://selab.vnuh.edu.vn:8080 /~dir1/dir2/dir3/index.HTML#chapter001 Tên hệ thống Đờng dẫn Các tham số, biến, truy vấn Ví dụ URL đặ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 Giáo trình thiết kế Web http://www.ebook.edu.vn Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -0912378211 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 Đờ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 siêu liên kết TARGET Mở trang Web đợc liên cửa sổ (_blank) Giáo trình thiết kế Web http://www.ebook.edu.vn Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -0912378211 cửa sổ (_self), frame (tên frame) 4.7 Địa tơng đối URL đợc trình bày URL tuyệt đối Ngoài có URL tơng đối hay gọi URL không đầy đủ Địa tơng đối sử dụng khác biệt tơng đối văn thời văn cần tham chiếu tới Các thành phần URL đợc ngăn cách ký tự ngăn cách (ký tự gạch chéo /) Để tạo URL tơng đối, phải sử dụng ký tự ngăn cách URL đầy đủ đợc sử dụng để tạo nên URL đầy đủ Nguyên tắc thành phần bên trái dấu ngăn cách URL đợc giữ nguyên, thành phần bên phải đợc thay thành phần URL tơng đối Chú ý trình duyệt không gửi URL tơng đối, bổ sung vào URL sở xác định trớc thành phần URL tơng đối xác định sau thuộc tính href= Ký tự sau dấu xác định thành phần URL tham gia để tạo nên URL Ví dụ, URL đầy đủ là: http://it-department.vnuh.edu.vn/HTML/index.htm thì: Dấu hai chấm (:) dịch vụ giữ nguyên nhng thay đổi phần lại Ví dụ ://www.fpt.com/ tải trang chủ máy phục vụ www.fpt.com với dịch vụ http Dấu gạch chéo (/) dịch vụ máy phục vụ giữ nguyên nhng toàn đờng dẫn thay đổi Ví dụ /Javascript/index.htm tải file index.htm th mục Javascript máy phục vụ www.it-department.vnuh.edu.vn Không có dấu phân cách có tên file thay đổi Ví dụ index1.htm tải file index1.htm th mục HTML máy phục vụ www.itdepartment.vnuh.edu.vn Dấu thăng (#): dịch vụ, máy phuc vụ, đờng dẫn tên file giữ nguyên, thay đổi vị trí file Do đờng dẫn đợc xem đơn vị độc lập nên sử dụng phơng pháp đờng dẫn tơng đối nh UNIX hay MS-DOS (tức th mục th mục cha th mục tại) URL sở đợc xác định thẻ 4.8 Kết nối mailto Nếu đặt thuộc tính href= thẻ giá trị mailto:address@domain kích hoạt kết nối kích hoạt chức th điện tử trình duyệt Trang WEB đợc WEBMASTER bảo trì Giáo trình thiết kế Web http://www.ebook.edu.vn 10 Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -0912378211 Ngoi ra, ta cũn cú th chn hỡnh nh thay cho cỏc kiu bullet thụng thng thay i, ta chn Format/Bullets and Numbering/Picture bullets, ri chn nh dựng lm bullet b nh dng bullets, ta chn Format/Bullets and Numbering/Plain Bullets 2.4 Tables Ngi ta thng dựng table : o Hin th cỏc thụng tin cú dng dũng/ct, vớ d nh bng thi khúa biu, thụng tin sn phm, o Trỡnh by (layout) cỏc bn(text) v cỏc nh ha(graphics) to mt bng, ta cú th dựng mt hai cỏch: o Chn Table/Insert Table Khi hp hi thoi to bng hin ra, bn phi cung cp cỏc thụng tin chi tit cho vic to bng, vớ d nh s dũng, s ct, kớch thc, o Chn Table/Draw Table Vi chc nng ny, bn s dựng bỳt v to cỏc dũng, ct khụng hin (hide) border ca bng, ta click phi chut lờn table, chn Table Properties/Border/Sizes bng tỏch mt cell hay trn nhiu cell li, ta chn Tabe ri chn Split /Merge Cells thờm hoc xúa cỏc cell, ta chn Table ri chn Insert/Delete Cells 2.5 Mt s hiu ng c bit Chuyn trang (Page transition): Chn Format/Page Transition Hiu ng ch chuyn ng theo chiu ngang (Marquees): Chn Insert/Component/Marquee Sau hp thoi hin ra, bn gừ vo dũng ch cn chuyn ng v t cỏc thuc tớnh khỏc nh mu sc, font ch, Thờm hiu ng font ch cho cỏc hyperlink: Chn Format/Background, check vo Enable hyperlink rollover effects Sau ú bn cú th chn cỏc mu theo ý mun 2.6 Chốn nh Chn chc nng Insert/Picture/From File t thuc tớnh v kớch thc ca nh, click phi chut lờn nh, ri chn Picture Properties to cỏc hotspot hyperlink, ta chn hỡnh v tng ng (hỡnh ch nht, ellipse, ) trờn toolbar pictures Chn vựng trờn nh, ri in thụng tin ca hyperlink vo 2.7 Chốn hyperlink Chn chc nng Insert/Hyperlink Sau hp thoi hin ra, gừ vo hyperlink tng ng Cú dng: o a ch Internet, cú dng: http:// Vớ d: http:// www.yahoo.com o Liờn kt ti mt trang site, cú dng: /th mc/tờn tin Vớ d: /images/shopping.htm o Liờn kt chớnh trang, t bng bookmark nh dng trang Click phi chut lờn trang, chn Page Properties Giáo trình thiết kế Web http://www.ebook.edu.vn 19 Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -0912378211 t mu nn cho trang, chn Background/Colors/Background t nh nn cho trang, chn Background/Formatting/Background picture t cỏc thụng s v mu sc cho hyperlink, chn Background/Colors/Hyperlink t tiờu cho trang chn General/Title Giáo trình thiết kế Web http://www.ebook.edu.vn 20 Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -0912378211 II THC HNH To trang web cho nhúm Khi ng Microsoft Front Page 2000 Son trang web cỏ nhõn ca nhúm t tờn l InfoGroup.htm (vớ d nhúm s ly tờn l InfoGroup1.htm) Cỏc thụng tin chớnh ca cỏc thnh viờn nhúm bao gm: H v tờn, Cụng vic v chc v hin nay, a ch liờn lc, in thoi, Fax, Email, Mobile Phone, Ngoi cỏc nhúm cú th b sung cỏc thụng tin khỏc Upload trang web ó son lờn website Th truy cp trang web ó ti lờn Tham kho cỏc site thụng tin ca Vit Nam http://vnexpress.net/ http://www.vnn.vn/ http://www.vdc.com.vn Tham kho cỏc site bỏn hng ni ting http://shopping.yahoo.com http://www.amazon.com Tham kho cỏc site gii 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 kho cỏc site v lao ng vic lm ti VN http://203.162.5.43/ld2000/ http://www.vietname-business.com/jobnld/ http://www.jobsonline.saigonnet.vn/ To trang web cha cỏc hyperlink dựng truy cp nhanh To trang web t tờn l Links.htm cha cỏc hyperlink ó cp trờn B sung thờm cỏc hyperlink v cỏc phõn loi khỏc m cỏc anh ch ó bit Upload lờn website v kim tra li To trang HomePage To trang web HomePage t tờn l Default.htm gii thiu v nhúm v cỏc cụng vic m nhúm ang trin khai Kt ni hai trang ó to vo HomePage Upload lờn website v kim tra li Chn ch thit k website Website v dch v vic lm Website v dch v nh t (http://www.nhadat.com) Website bỏo in t (http://vnexpress.net ) Giáo trình thiết kế Web http://www.ebook.edu.vn 21 Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -0912378211 Website trng hc Website bỏn hng (ca hng, siờu th o trờn Internet) Website dch v gii trớ nh ECards, in hoa, Cỏc ch khỏc Giáo trình thiết kế Web http://www.ebook.edu.vn 22 Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -0912378211 III NG K WEBSITE MIN PH TRấN INTERNET Vo a ch http://www.freeservers.com ng kớ website phớ vi a ch truy cp cú dng http://.freeservers.com Gừ vo a ch m bn d nh ng kớ ti ụ yourname Sau ú click Go Mn hỡnh tip theo s hin ra, bn chn mc cui cựng 100% Free Hosting Option v click vo SignUp Giáo trình thiết kế Web http://www.ebook.edu.vn 23 Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -0912378211 Sau ú bn hóy in vo cỏc thụng tin liờn quan cn thit nh H tờn, mt khu, email, Cui cựng gừ vo ARTK chc rng bn ó ng ý vi cỏc qui nh ca FreeServers cung cp dch v phớ ny Nu ng kớ thnh cụng, mn hỡnh sau s hin cung cp cho bn mt s la chn xõy dng website ca mỡnh Giáo trình thiết kế Web http://www.ebook.edu.vn 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 http://www.ebook.edu.vn 25 Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -0912378211 IV.THIT K MT S WEBSITE MU Thit k website theo mu sau (http://greetings.yahoo.com) Thit k website theo mu sau (http://www.flowers.com) Giáo trình thiết kế Web http://www.ebook.edu.vn 26 Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -0912378211 Thit k website theo mu sau (http://shopping.yahoo.com) Giáo trình thiết kế Web http://www.ebook.edu.vn 27 Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -0912378211 Thit k website theo mu sau (http://www.is-edu.hcmuns.edu.vn) Giáo trình thiết kế Web http://www.ebook.edu.vn 28 Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -0912378211 Thit k website theo mu sau (http://vnexpress.net) Thit k website theo mu sau (http://www.codeproject.com) Giáo trình thiết kế Web http://www.ebook.edu.vn 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 http://www.ebook.edu.vn 30 Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -0912378211 Thit k website theo mu sau (http://www.bttvn.com ) tham kho cỏch thit k cỏc trang web trờn, hóy: - Ti v mỏy bng cỏch chn chc nng Save ca IE - Dựng MS Front Page m tin ó lu lờn - Chuyn qua li gia cỏc mn hỡnh Normal View v HMTL View bit cỏch thit k Vi mi trang web ó xem hóy chỳ ý cỏc sau: - Cỏch b trớ cỏc bng (table) - Cỏch s dng font ch - Cỏch chốn vo cỏc hỡnh nh trang trớ - Cỏch nh ngha cỏc thuc tớnh nh mu ch, mu nn, - Phn tnh (khụng thay i) mi click vo cỏc hyperlink chuyn qua mt ni dung mi T cỏc trang web trờn, hóy t thit k cỏc trang cho website ca nhúm Giáo trình thiết kế Web http://www.ebook.edu.vn 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 I Các thẻ định cấu trúc ti liệu .1 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 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 4.1 Các thẻ định dạng in ký tự 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 4.5 Chọn kiểu chữ cho văn 4.6 Khái niệm văn siêu liên kết 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 http://www.ebook.edu.vn 32 Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn 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 http://www.ebook.edu.vn 33 [...]... trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -0912378211 3 Thit k website theo mu sau (http://shopping.yahoo.com) Giáo trình thiết kế Web http://www.ebook.edu.vn 27 Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -0912378211 4 Thit k website theo mu sau (http://www.is-edu.hcmuns.edu.vn) Giáo trình thiết kế Web http://www.ebook.edu.vn 28 Giáo trình Thiết kế Web. .. k website Website v dch v vic lm Website v dch v nh t (http://www.nhadat.com) Website bỏo in t (http://vnexpress.net ) Giáo trình thiết kế Web http://www.ebook.edu.vn 21 Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -0912378211 Website trng hc Website bỏn hng (ca hng, siờu th o trờn Internet) Website dch v gii trớ nh ECards, in hoa, Cỏc ch khỏc Giáo trình thiết kế Web. .. http://www.ebook.edu.vn 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 http://www.ebook.edu.vn 25 Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -0912378211 IV.THIT K MT S WEBSITE MU 1 Thit k website theo mu sau (http://greetings.yahoo.com) 2 Thit k website theo mu sau (http://www.flowers.com) Giáo trình thiết kế Web http://www.ebook.edu.vn... -0912378211 5 Thit k website theo mu sau (http://vnexpress.net) 6 Thit k website theo mu sau (http://www.codeproject.com) Giáo trình thiết kế Web http://www.ebook.edu.vn 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 http://www.ebook.edu.vn 30 Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -0912378211 7 Thit k website theo... Văn bản ban đầu Giáo trình thiết kế Web http://www.ebook.edu.vn 17 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 I CC THAO TC C BN 1 Cỏc thao tỏc chớnh khi son tho mt trang web To mi mt trang web: Chn chc nng File/New/Page /Normal Page hay chn icon New trờn Toolbar Lu trang web: Chn chc nng File/Save hay chn icon... 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 http://www.ebook.edu.vn 32 Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -0912378211 7.1 HTML Forms ... thay i) mi khi click vo cỏc hyperlink chuyn qua mt ni dung mi T cỏc trang web trờn, hóy t thit k cỏc trang cho website ca nhúm Giáo trình thiết kế Web http://www.ebook.edu.vn 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 ti liệu .1 1.1 HTML 1 1.2 HEAD 1 1.3 TITLE... Properties Giáo trình thiết kế Web http://www.ebook.edu.vn 19 Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -0912378211 t mu nn cho trang, chn Background/Colors/Background t nh nn cho trang, chn Background/Formatting/Background picture t cỏc thụng s v mu sc cho hyperlink, chn Background/Colors/Hyperlink t tiờu cho trang chn General/Title Giáo trình thiết kế Web http://www.ebook.edu.vn... kéo dài trong bao nhiêu cột Giáo trình thiết kế Web http://www.ebook.edu.vn 15 Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -0912378211 Chỉ định ô sẽ kéo dài trong bao nhiêu hàng ROWSPAN VII FORM 7.1 HTML Forms Các HTML Form có thể có các hộp văn bản, hộp danh sách lựa chọn, nút bấm, nút chọn 7.2 Tạo Form Để tạo ra một form trong tài liệu HTML, chúng ta sử dụng thẻ FORM với... chỉ sẽ gửi dữ liệu tới khi form đợc submit (có thể là địa chỉ tới một chơng trình CGI, một trang ASP ) METHOD Phơng thức gửi dữ liệu NAME Tên của form TARGET Chỉ định cửa sổ sẽ hiển thị kết quả sau khi gửi dữ liệu từ form đến server Đặt các đối tợng điểu khiển (nh hộp văn bản, ô kiểm tra, nút bấm ) vào trang Web Cú pháp thẻ INPUT: ... thiết kế Web http://www.ebook.edu.vn 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 http://www.ebook.edu.vn 30 Giáo trình Thiết kế. .. chn xõy dng website ca mỡnh Giáo trình thiết kế Web http://www.ebook.edu.vn 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 http://www.ebook.edu.vn... đầu Giáo trình thiết kế Web http://www.ebook.edu.vn 17 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 I