Giao trinh tu hoc thiet ke web hieu qua

Giao trinh huong dan thiet ke web mot cach don gian, de hieu va rut gon

đợ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ố)
, 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: đó:
1. Muc thu nhat
2. Muc thu hai
3. Muc thu ba
Giáo trình thiết kế Web Giáo trình Thiết kế Web : Ngun H÷u Tn Email: prohuutuan@yahoo.com -0912378211 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 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 Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -0912378211 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 ®Ị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 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 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ù mé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 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ể 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 : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -0912378211 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 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 Giáo trình Thiết kế Web : Nguyễn H÷u TuÊn Email: prohuutuan@yahoo.com -0912378211 VLINK BACKGROUND BGCOLOR TEXT SCROLL TOPMARGIN RIGHTMARGIN LEFTMARGIN Chỉ định màu văn siêu liên kết đà mở 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ơ vỊ URL 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 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 c¸c 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 đủ 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 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 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 cđa 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 c¸c 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ổ trình duyệt) Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com -0912378211 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 cđa file ph¶i cho biÕt kiĨu cđa file KiĨu Image/GIF PhÇn më réng gif Image/JPEG jpeg Image/TIFF tiff Text/HTML HTML, ht m eps, ps PostScript Adobe Acrobat pdf Video/MPEG mpeg Video/AVI Video/ QuickTime avi mov Sound/AU Sound/MIDI au mid Sound/ RealAudio 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 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 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 Ư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 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 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 định dạng khác file âm thờng có kích thớc lớn - thời gian tải xuống lâu, Trái lại audio 10 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 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 trang web 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  Ngoài ra, ta cịn 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 Giáo trình thiết kế Web 16 Giáo trình Thiết kế Web : Ngun H÷u Tn Email: prohuutuan@yahoo.com -0912378211  Để 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 Giáo trình thiết kế Web 17 Giáo trình Thiết kÕ Web : Ngun H÷u Tn Email: prohuutuan@yahoo.com -0912378211  Để đặt thông số 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 18 Giáo trình Thiết kÕ Web : Ngun H÷u Tn Email: prohuutuan@yahoo.com -0912378211 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)  Website báo điện tử (http://vnexpress.net )  Website trường hc Giáo trình thiết kế Web 19 Giáo trình Thiết kÕ Web : Ngun H÷u Tn Email: prohuutuan@yahoo.com -0912378211  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 20 ... thiết kế Web 14 Giáo trình Thiết kÕ Web : Ngun H÷u Tn Email: prohuutuan@yahoo.com -0912378211 > Văn ban đầu Giáo trình thiết kế Web 15 Giáo trình Thiết kế Web : Nguyễn Hữu Tu? ??n Email:...  Website dịch 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 : Ngun H÷u Tn Email: prohuutuan@yahoo.com... trình Thiết kế Web : Nguyễn Hữu Tu? ??n Email: prohuutuan@yahoo.com -0912378211 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