Giáo trình Thiết kế Web 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 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ẻ này. 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ẻ. phần nội dung tài liệu đợc đặt Cú pháp: Giáo trình thiết kế Web Giáo trình Thiết kế Web 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= BGCOLOR= TEXT= ALINK=,VLINK=,LINK= Đặt ảnh làm ảnh (background) cho văn bả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. Đặ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 trên. Xác định màu chữ văn bản, kể đề mục. Xác định màu sắc cho siêu liên kết văn bả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 bản. Cú pháp: Nội dung đoạn văn bản 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 6. 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: . . . . Giáo trình thiết kế Web Đị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 Giáo trình Thiết kế Web . . Đị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 mới. 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 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ố) < 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ố, dùng lẫn với nhau. Với thẻ OL ta có cú pháp sau: đó: Muc thu nhat Muc thu hai Muc thu ba Giáo trình thiết kế Web Giáo trình Thiết kế Web TYPE =1 =a =A =i =I Các mục đợc xếp theo thứ tự 1, 2, . Các mục đợc xếp theo thứ tự a, b, c . Các mục đợc xếp theo thứ tự A, B, C . Các mục đợc xếp theo thứ tự i, ii, iii . 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 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 một. 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 một. 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 bả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 Giáo trình Thiết kế Web 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ữ tại. 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 CENTER RIGHT Căn lề trái Căn trang Căn lề phải Ngoài ra, sử dụng thẻ CENTER để trang khối văn bả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ể nhất. Ký tự ; đợc sử dụng để tách ký tự từ. Ký tự < > & Mã ASCII < > & Tên chuỗi < > & 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 cây. 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: Giáo trình thiết kế Web Giáo trình Thiết kế Web Màu sắc Đỏ Đỏ sẫm Xanh Xanh nhạt Xanh nớc biển Vàng Vàng nhạt Trắng Đen Xám Nâu Tím Tím nhạt Hồng Da cam Màu đồng phục hải quân Giá trị #FF0000 #8B0000 #00FF00 #90EE90 #0000FF #FFFF00 #FFFFE0 #FFFFFF #000000 #808080 #A52A2A #FF00FF #EE82EE #FFC0CB #FFA500 #000080 #4169E1 #7FFFD4 Tên tiếng Anh RED DARKRED GREEN LIGHTGREEN BLUE YELLOW LIGHTYELLOW WHITE BLACK GRAY BROWN MAGENTA VIOLET PINK ORANGE NAVY ROYALBLUE 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ố LINK ALINK VLINK Giáo trình thiết kế Web ý nghĩa Chỉ định màu văn siêu liên kết Chỉ định màu văn siêu liên kết đang chọn Chỉ định màu văn siêu liên kết mở Giáo trình Thiết kế Web BACKGROUND BGCOLOR TEXT SCROLL TOPMARGIN RIGHTMARGIN LEFTMARGIN Chỉ định địa ảnh dùng làm Chỉ định màu Chỉ định màu văn tài liệu YES/NO - Xác định có hay không cuộn Lề Lề phải 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 đặt tên URL (Universal Resource Locator). 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 Các thành phần URL đợc minh hoạ hình trên. 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 Đờ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 nào. 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 ra. Để tạo siêu văn sử dụng thẻ . Cú pháp: . siêu văn ý nghĩa tham số: HREF NAME TABLEINDEX TITLE TARGET Địa trang Web đợc liên kết, URL đó. Đặt tên cho vị trí đặt thẻ. Thứ tự di chuyển ấn phím Tab Văn hiển thị di chuột siêu liên kết. Mở trang Web đợc liên cửa sổ (_blank) 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 đủ mới. 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 mới. Giáo trình thiết kế Web Giáo trình Thiết kế Web 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ì 4.9. Vẽ đờng thẳng nằm ngang Cú pháp: ý nghĩa tham số: ALIGN COLOR NOSHADE SIZE WIDTH Giáo trình thiết kế Web Căn lề (căn trái, phải, giữa) Đặt màu cho đờng thẳng Không có bóng Độ dày đờng thẳng Chiều dài (tính theo pixel % bề rộng cửa sổ Giáo trình Thiết kế Web trình duyệt). Thẻ giống nh thẻ BR, thẻ kết thúc tơng ứng. V. Các thẻ chèn âm thanh, hình ảnh 5.1. Giới thiệu Liên kết với file đa phơng tiện tơng tự nh liên kết bình thờng. Tuy phải đặt tên cho file đa phơng tiện. Phần mở rộng file phải cho biết kiểu file. Kiểu Image/GIF Phần mở rộng .gif Image/JPEG .jpeg Image/TIFF .tiff Text/HTML .HTML, .htm .eps, .ps PostScript Adobe Acrobat .pdf Video/MPEG .mpeg Video/AVI Video/QuickTi me .avi .mov Sound/AU Sound/MIDI .au .mid Sound/RealA .ram Giáo trình thiết kế Web Mô tả Viết tắt Graphics Interchange Format. Khuôn dạng xuất ngời có nhu cầu trao đổi ảnh nhiều hệ thống khác nhau. Nó đợc sử dụng tất hệ thống hỗ trợ giao diện đồ hoạ. Định dạng GIF định dạng chuẩn cho trình duyệt WEB. Nhợc điểm thể đợc 256 màu. Mở rộng chuẩn GIF89, đợc thêm nhiều chức cho ứng dụng đặc biệt nh làm ảnh suốt - tức ảnh cách làm màu giống với màu trình duyệt. Viết tắt Joint Photographic Expert Group. Là khuôn dạng ảnh khác nhng có thêm khả nén.Ưu điểm bật khuôn dạng lu trữ đợc hàng triệu màu độ nén cao nên kích thớc file ảnh nhỏ thời gian download nhanh hơn. Nó sở cho khuôn dạng MPEG. Tất trình duyệt có khả xem ảnh JPEG. Viết tắt Tagged Image File Format. Đợc Microsoft thiết kế để quét ảnh từ máy quét nh tạo ấn phẩm. Đợc tạo để hiển thị in văn có chất lợng cao. Viết tắt Portable Document Format. Acrobat sử dụng siêu liên kết văn giống nh HTML. Từ phiên 2.0, sản phẩm Acrobat cho phép liên kết nhiều văn bản. Ưu điểm lớn khả WYSISYG. Viết tắt Motion Picture Expert Group, định dạng dành cho loại phim (video). Đây khuôn dạng thông dụng dành cho phim WEB. Là khuôn dnạg phim Microsoft đa ra. Do Apple Computer đa ra, chuẩn video đợc cho có nhiều u điểm MPEG AVI. Mặc dù đợc tích hợp vào nhiều trình duyệt nhng cha phổ biến hai loại định dạng trên. Là khuôn dạng dành cho âm nhạc điện tử thông dụng đợc nhiều trình duyệt hệ thống khác hỗ trợ. File Midi đợc tổng hợp số hoá trực tiếp từ máy tính. Định dạng audio theo dòng. Một bất tiện sử dụng 10 Giáo trình Thiết kế Web NAME=tên > Văn ban đầu Giáo trình thiết kế Web 15 Giáo trình Thiết kế Web 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 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 Save trờn Toolbar. lu trang web di dng mt tờn khỏc chn chc nng File/Save As Xem trc hin th ca trang web ang thit k: Chn chc nng File/Preview in Browser. Lỳc ny ca s trỡnh duyt Internet Explorer (IE) s hin th trang web m chỳng ta ang son tho. Nờn lu trang web trc chn chc nng ny. Ca s mn hỡnh son tho trang web cung cp cỏch hiu (view) khỏc v trang web. o Nu bn chn Normal view, bn cú th biờn trang web di dng WYSIWYG. Vớ d bn cú th gừ bn vo, thay i mu sc, kớch thc ch, b o Nu bn chn HTML view, bn s thy c cỏc mó HTML tng ng vi cỏch trỡnh by ca trang web ca bn. Vớ d, nu Normal view bn chốn vo mt table thỡ HTML view, bn s thy cỏc tag tng ng nh sau:   o Nu bn chn Preview view, tng t vi chc nng Preview in Browser 2. To cỏc thnh phn ca trang web\ 2.1. Thi gian cp nht (Time stamp) Chn Insert/Date and Time. Chn nh dng ngy thỏng v thi gian phự hp vi nhu cu ca bn 2.2. ng k ngang (Horizontal line) Chn Insert/Horizotal line. t cỏc thuc tớnh cho ng k ngang bng cỏch double click chut lờn nú. Sau ú chn cỏc thụng s v Width, Height, Color, Alignment 2.3. List Chn Format/Bullets and Numbering. Sau hp hi thoi xut hin, bn hóy chn cỏc dng bullet v numbering tng ng. thay i cỏc thuc tớnh ca bullet nh mu sc, kiu ch, , ta chn Format/Bullets and Numbering/Style 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 Giáo trình thiết kế Web 16 Giáo trình Thiết kế Web 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 0. 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. 3. nh dng trang Click phi chut lờn trang, chn Page Properties. t mu nn cho trang, chn Background/Colors/Background t nh nn cho trang, chn Background/Formatting/Background picture. Giáo trình thiết kế Web 17 Giáo trình Thiết kế Web 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 18 Giáo trình Thiết kế Web II. THC HNH 1. 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. 2. Tham kho cỏc site thụng tin ca Vit Nam http://vnexpress.net/ http://www.vnn.vn/. http://www.vdc.com.vn 3. Tham kho cỏc site bỏn hng ni ting http://shopping.yahoo.com http://www.amazon.com 4. 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/ 5. 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/ 6. 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. 7. 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. 8. 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 ) Website trng hc. Giáo trình thiết kế Web 19 Giáo trình Thiết kế Web 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 20 Giáo trình Thiết kế Web III. NG K WEBSITE MIN PH TRấN INTERNET 1. Vo a ch http://www.freeservers.com ng kớ website phớ vi a ch truy cp cú dng http://.freeservers.com 2. 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 21 Giáo trình Thiết kế Web 3. 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. 4. 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 22 Giáo trình Thiết kế Web Giáo trình thiết kế Web 23 Giáo trình Thiết kế Web 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 24 Giáo trình Thiết kế Web 3. Thit k website theo mu sau (http://shopping.yahoo.com) Giáo trình thiết kế Web 25 Giáo trình Thiết kế Web 4. Thit k website theo mu sau (http://www.is-edu.hcmuns.edu.vn) Giáo trình thiết kế Web 26 Giáo trình Thiết kế Web 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 27 Giáo trình Thiết kế Web Giáo trình thiết kế Web 28 Giáo trình Thiết kế Web 7. 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 29 Giáo trình Thiết kế Web 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 II. Các thẻ định dạng khối III. Các thẻ định dạng danh sách .3 IV. Các thẻ định dạng ký tự .4 V. Các thẻ chèn âm thanh, hình ảnh .10 VI. Các thẻ định dạng bảng biểu 12 VII. FORM 13 Phần II thiết kế web sử dụng ms frontpage 16 Giáo trình thiết kế Web 30 [...]... tra li 8 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 ) Website trng hc Giáo trình thiết kế Web 19 Giáo trình Thiết kế Web 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 20 Giáo trình Thiết kế Web III NG K WEBSITE MIN PH TRấN INTERNET... xõy dng website ca mỡnh Giáo trình thiết kế Web 22 Giáo trình Thiết kế Web Giáo trình thiết kế Web 23 Giáo trình Thiết kế Web 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 24 Giáo trình Thiết kế Web 3 Thit k website theo mu sau (http://shopping.yahoo.com) Giáo trình thiết kế Web 25 Giáo... thiết kế Web 25 Giáo trình Thiết kế Web 4 Thit k website theo mu sau (http://www.is-edu.hcmuns.edu.vn) Giáo trình thiết kế Web 26 Giáo trình Thiết kế Web 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 27 Giáo trình Thiết kế Web Giáo trình thiết kế Web 28 Giáo trình Thiết kế Web 7 Thit k website theo mu sau (http://www.bttvn.com... kế Web 14 Giáo trình Thiết kế Web NAME=tên > Văn bản ban đầu Giáo trình thiết kế Web 15 Giáo trình Thiết kế Web 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 Save trờn Toolbar lu trang web. .. chn Background/Formatting/Background picture Giáo trình thiết kế Web 17 Giáo trình Thiết kế Web 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 18 Giáo trình Thiết kế Web II THC HNH 1 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 1 s ly tờn... chc nng File/Save As Xem trc hin th ca trang web ang thit k: Chn chc nng File/Preview in Browser Lỳc ny ca s trỡnh duyt Internet Explorer (IE) s hin th trang web m chỳng ta ang son tho Nờn lu trang web trc khi chn chc nng ny Ca s mn hỡnh son tho trang web cung cp 3 cỏch hiu (view) khỏc nhau v 1 trang web o Nu bn chn Normal view, bn cú th biờn tp trang web di dng WYSIWYG Vớ d bn cú th gừ vn bn vo,... http://www.jobsonline.saigonnet.vn/ 6 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 7 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... nh trang trớ - Cỏch nh ngha cỏc thuc tớnh nh mu ch, mu nn, - Phn tnh (khụng 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 29 Giáo trình Thiết kế Web 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 II Các thẻ định dạng khối 2 III Các thẻ định dạng danh... WEBSITE MIN PH TRấN INTERNET 1 Vo a ch http://www.freeservers.com ng kớ website min phớ vi a ch truy cp cú dng http://.freeservers.com 2 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 21 Giáo trình Thiết kế Web 3 Sau ú bn hóy in vo cỏc thụng tin liờn quan cn thit nh H tờn,... cỏc thnh viờn trong 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 ra 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 2 Tham kho cỏc site thụng tin ca Vit Nam http://vnexpress.net/ http://www.vnn.vn/ http://www.vdc.com.vn 3 Tham kho cỏc site bỏn hng ni ting http://shopping.yahoo.com . hàng Giáo trình thiết kế Web 14 Gi¸o tr×nh ThiÕt kÕ Web NAME=tªn > V¨n b¶n ban ®Çu </TEXTAREA> Gi¸o tr×nh thiÕt kÕ Web 15 Gi¸o tr×nh ThiÕt kÕ Web PhÇn II thiÕt kÕ web sö dông ms frontpage. 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 (http://www.nhadat.com). • Website báo điện tử (http://vnexpress.net. tử (http://vnexpress.net ) • Website trường học. Gi¸o tr×nh thiÕt kÕ Web 19 Gi¸o tr×nh ThiÕt kÕ Web • 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,