GIÁO TRÌNH THIẾT KẾ WEB CƠ BẢN

1.4 BODY ThÎ nµy ®­îc sö dông ®Ó x¸c ®Þnh phÇn néi dung chÝnh cña tµi liÖu phÇn th©n (body) cña tµi liÖu. Trong phÇn th©n cã thÓ chøa c¸c th«ng tin ®Þnh d¹ng nhÊt ®Þnh ®Ó ®Æt ¶nh nÒn cho tµi liÖu, mµu nÒn, mµu v¨n b¶n siªu liªn kÕt, ®Æt lÒ cho trang tµi liÖu... Nh÷ng th«ng tin nµy ®­îc ®Æt ë phÇn tham sè cña thÎ. Có ph¸p:

Giáo trình Thiết kế Web : Vn Mi Email: biomuoi79@yahoo.com 0983795384 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 lµ tµi liƯu HTML, tøc lµ nã 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 phần nội dung tài liệu đợc đặt Giáo trình thiết kế Web Giáo trình Thiết kế Web : Vn Mi Email: biomuoi79@yahoo.com 0983795384 liên kết, đặt lề cho trang tài liệu Những thông tin đợc đặt phần tham số thẻ 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=,LIN K= 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 cđa 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 Giáo trình Thiết kế Web : Vn Mi Email: biomuoi79@yahoo.com 0983795384 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 nh ng 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 đợc định dạng 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: Giáo trình thiết kế Web Giáo trình Thiết kế Web : Đỗ Văn Mười Email: biomuoi79@yahoo.com 0983795384 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ø nhÊt
• 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ố)
, 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
1. Muc thu nhat
2. Muc thu hai
3. Muc thu ba
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 =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) Giáo trình thiết kế Web Giáo tr×nh ThiÕt kÕ Web : Đỗ Văn Mười Email: biomuoi79@yahoo.com 0983795384 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 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 hiƯn 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 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ẻ sÏ kh«ng cã ý 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) Giáo trình thiết kế Web Đị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 Giáo trình Thiết kế Web : Vn Mi Email: biomuoi79@yahoo.com 0983795384 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 ®Ịu 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 < > & < > & < > & 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 Giáo trình thiết kế Web Giáo trình Thiết kế Web : Vn Mi Email: biomuoi79@yahoo.com 0983795384 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 b»ng cã thĨ lµ 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 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ở 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: Giáo trình thiết kế Web Giáo trình ThiÕt kÕ Web : Đỗ Văn Mười Email: biomuoi79@yahoo.com 0983795384 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 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ụ URL Các tham số, biến, truy vấn đặ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 mét giao thø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 Giáo trình thiết kế Web Giáo trình ThiÕt kÕ Web : Đỗ Văn Mười Email: biomuoi79@yahoo.com 0983795384 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 còng cã thĨ 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) 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 Giáo trình thiết kế Web 10 Giáo trình Thiết kế Web : Vn Mi Email: biomuoi79@yahoo.com 0983795384 dấu nháy kép triong văn chứa dấu cách hay ký tự đặc biệt - trờng hợp ngợc lại bỏ dấu nháy kép BORDER = n Đặt kích thớc đờng viền đợc vẽ quanh ảnh (tính theo pixel) SRC = url Địa file ảnh cần chèn vào tài liệu WIDTH/HEIGHT Chỉ định kích thớc ảnh đợc hiển thị HSPACE/VSPACE Chỉ định khoảng trống xung quanh hình ảnh (tính theo pixel) theo bốn phía trên, dới, trái, phải TITLE = title Văn hiển thị chuột trỏ ảnh DYNSRC = url Địa file video START = FILEOPEN/MOUSEOVER Chỉ định file video đợc chơi tài liệu đợc mở hay trỏ chuột vào Có thể kết hợp hai giá trị nhng phải phân cách chúng dấu phẩy LOOP = n/INFINITE Chỉ định số lần chơi Nếu LOOP = INFINITE file video đợc chơi vô hạn lần VI Các thẻ định dạng bảng biểu Sau thẻ tạo bảng chính: Định nghĩa bảng Định nghĩa hàng bảng Định nghĩa ô hàng Định nghĩa ô chứa tiêu đề cột Tiêu đề bảng Cú pháp: Tiêu đề bảng biểu Định nghĩa dòng Định nghĩa ô dòng Néi dung cđa « ý nghĩa tham số: ALIGN / VALIGN Căn lề cho bảng nội dung ô BORDER Kích thớc đờng kẻ chia ô bảng, đợc đo theo pixel Giá trị có nghĩa không xác định lề, ô bảng có khoảng trắng nhỏ để phân biệt Nếu để border ngầm định border=1 Với bảng có cấu trúc phức tạp, nên đặt lề để ngời xem phân biệt rõ dòng cột BORDERCOLOR Màu đờng kẻ BORDERCOLORDARK Màu phía tối phía sáng cho đờng kẻ BORDERCOLORLIGHT BACKGROUND Địa tới tệp ảnh dùng làm cho bảng BGCOLOR Màu CELLSPACING Khoảng cách ô bảng Giáo trình thiết kế Web 16 Giáo tr×nh ThiÕt kÕ Web : Đỗ Văn Mười Email: biomuoi79@yahoo.com 0983795384 CELLPADDING Khoảng cách nội dung đờng kẻ ô bảng COLSPAN Chỉ định ô kéo dài cột ROWSPAN Chỉ định ô kéo dài hàng 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 form tài liệu HTML, sử dụng thẻ FORM víi có ph¸p nh sau: Có ph¸p: Trong ®ã ACTION Địa gửi liệu tới form đợc submit (có thể địa tới chơng trình CGI, trang ASP ) METHOD Phơng thức gửi liệu NAME Tên form TARGET Chỉ định cửa sổ hiển thị kết sau gửi liệu từ form đến server Đặt đố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: Giáo trình thiết kế Web 17 Giáo trình Thiết kế Web : Văn Mười Email: biomuoi79@yahoo.com 0983795384 7.3 T¹o mét danh sách lựa chọn Cú pháp: Tªn mơc chän thø nhÊt Tên mục chọn thứ hai 7.4 Tạo hộp soạn thảo văn Cú pháp: Văn ban đầu Phần II thiết kÕ web sư dơng ms frontpage I CÁC THAO TÁC CƠ BẢN Các thao tác soạn thảo trang web • Tạo trang web: Chọn chức File/New/Page /Normal Page hay chọn icon New Toolbar • Lưu trang web: Chọn chức File/Save hay chọn icon Save Toolbar Để lưu trang web dạng tên khác chọn chức File/Save As… • Xem trước hiển thị trang web thiết kế: Chọn chức File/Preview in Browser Lúc cửa sổ trình duyệt Internet Explorer (IE) hiển thị trang web mà soạn thảo Nên lưu trang web trước chọn chức • Cửa sổ hình soạn thảo trang web cung cấp cách “hiểu” (view) khỏc v trang web Giáo trình thiết kế Web 18 Giáo trình Thiết kế Web : Văn Mười Email: biomuoi79@yahoo.com 0983795384 o Nếu bạn chọn Normal view, bạn biên tập trang web dạng WYSIWYG Ví dụ bạn gõ văn vào, thay đổi màu sắc, kích thước chữ, …b o Nếu bạn chọn HTML view, bạn thấy mã HTML tương ứng với cách trình bày trang web bạn Ví dụ, Normal view bạn chèn vào table HTML view, bạn thấy tag tương ứng sau:   o Nếu bạn chọn Preview view, tương tự với chức Preview in Browser Tạo thành phần trang web\ 2.1 Thời gian cập nhật (Time stamp) • Chọn Insert/Date and Time • Chọn định dạng ngày tháng thời gian phù hợp với nhu cầu bạn 2.2 Đường kẻ ngang (Horizontal line) • Chọn Insert/Horizotal line • Đặt thuộc tính cho đường kẻ ngang cách double click chuột lên Sau chọn thông số Width, Height, Color, Alignment 2.3 List • Chọn Format/Bullets and Numbering • Sau hộp hội thoại xuất hiện, bạn chọn dạng bullet numbering tương ứng • Để thay đổi thuộc tính bullet màu sắc, kiểu chữ, …, ta chọn Format/Bullets and Numbering/Style • Ngồi ra, ta chọn hình ảnh để thay cho kiểu bullet thông thường Để thay đổi, ta chọn Format/Bullets and Numbering/Picture bullets, 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ị 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): Chn Format/Page Transition Giáo trình thiết kế Web 19 Giáo tr×nh ThiÕt kÕ Web : Đỗ Văn Mười Email: biomuoi79@yahoo.com 0983795384 • 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, chọn Background/Colors/Hyperlink • Để đặt tiêu đề cho trang chọn General/Title 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, Ngồ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/ Giáo trình thiết kế Web 20 Giáo trình Thiết kế Web : Đỗ Văn Mười Email: biomuoi79@yahoo.com 0983795384 • 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) • 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 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 ch truy cp cú dng http://.freeservers.com Giáo trình thiết kế Web 21 Giáo trình Thiết kế Web : Vn Mười Email: biomuoi79@yahoo.com 0983795384 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 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í Gi¸o trình thiết kế Web 22 Giáo trình Thiết kế Web : Đỗ Văn Mười Email: biomuoi79@yahoo.com 0983795384 Nếu đăng kí thành cơng, hình sau để cung cấp cho bạn số lựa chọn xây dng website ca mỡnh Giáo trình thiết kế Web 23 Giáo trình Thiết kế Web : Vn Mi Email: biomuoi79@yahoo.com 0983795384 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 mu sau (http://www.flowers.com) Giáo trình thiết kế Web 24 Giáo trình Thiết kế Web : Vn Mi Email: biomuoi79@yahoo.com 0983795384 Thiết kế website theo mẫu sau (http://shopping.yahoo.com) Giáo trình thiết kế Web 25 Giáo trình Thiết kế Web : Đỗ Văn Mười Email: biomuoi79@yahoo.com 0983795384 Thiết 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 : Vn Mười Email: biomuoi79@yahoo.com 0983795384 Thiết kế website theo mẫu sau (http://vnexpress.net) Thiết kế website theo mẫu sau (http://www.codeproject.com) Giáo trình thiết kế Web 27 Giáo trình Thiết kế Web : Đỗ Văn Mười Email: biomuoi79@yahoo.com 0983795384 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ế Giáo trình thiết kế Web 28 Giáo trình Thiết kế Web : Đỗ Văn Mười Email: biomuoi79@yahoo.com 0983795384 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ế trang cho website nhóm Phần I Giới thiệu ngôn ngữ Html I Các thẻ định cấu trúc tài liệu II Các thẻ định dạng khối III Các thẻ định dạng danh sách IV Các thẻ định dạng ký tự V Các thẻ chèn âm thanh, hình ảnh 12 VI Các thẻ định dạng bảng biểu 15 VII FORM 17 PhÇn II thiÕt kÕ web sử dụng ms frontpage .18 Giáo trình thiết kÕ Web 29 ... (http://www.is-edu.hcmuns.edu.vn) Giáo trình thiết kế Web 26 Giáo trình Thiết kế Web : Vn Mi Email: biomuoi79@yahoo.com 0983795384 Thiết kế website theo mẫu sau (http://vnexpress.net) Thiết kế website theo mẫu... 0983795384 Thiết kế website theo mẫu sau (http://shopping.yahoo.com) Gi¸o trình thiết kế Web 25 Giáo trình Thiết kế Web : Đỗ Văn Mười Email: biomuoi79@yahoo.com 0983795384 Thiết kế website theo... Gi¸o trình thiết kế Web 27 Giáo trình Thiết kế Web : Đỗ Văn Mười Email: biomuoi79@yahoo.com 0983795384 Thiết kế website theo mẫu sau (http://www.bttvn.com ) Để tham khảo cách thiết kế trang web