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

hai gi¸ trÞ nµy nh­ng ph¶i ph©n c¸ch chóng bëi dÊu phÈy. LOOP = n/INFINITE ChØ ®Þnh sè lÇn ch¬i. NÕu LOOP = INFINITE th× file video sÏ ®­îc ch¬i v« h¹n lÇn. VI. C¸c thÎ ®Þnh d¹ng b¶ng biÓu Sau ®©y lµ c¸c thÎ t¹o b¶ng chÝnh: ... §Þnh nghÜa mét b¶ng ... §Þnh nghÜa mét hµng trong b¶ng ... §Þnh nghÜa mét « trong hµng ... §Þnh nghÜa « chøa tiªu ®Ò cña cét ... Tiªu ®Ò cña b¶ng Có ph¸p: <TABLE ALIGN = LEFT / CENTER / RIGHT BORDER = n BORDERCOLOR = color BORDERCOLORDARK = color BORDERCOLORLIGHT = color BACKGROUND = url BGCOLOR = color CELLSPACING = spacing CELLPADDING = pading > Tiªu ®Ò cña b¶ng biÓu ... §Þnh nghÜa c¸c dßng <TR ALIGN = LEFT/CENTER/RIGHT VALIGN = TOP/MIDDLE/BOTTOM> ... §Þnh nghÜa c¸c « trong dßng <TD ALIGN = LEFT / CENTER / RIGHT VALIGN = TOP / MIDDLE / BOTTOM BORDERCOLOR = color BORDERCOLORDARK = color BORDERCOLORLIGHT = color BACKBROUND = url BGCOLOR = color COLSPAN = n ROWSPAN = n > ... Néi dung cña « ... ... ý nghÜa c¸c tham sè: ALIGN / VALIGN C¨n lÒ cho b¶ng vµ néi dung trong mçi «. BORDER KÝch th­íc ®­êng kÎ chia « trong b¶ng, ®­îc ®o theo pixel. Gi¸ trÞ 0 cã nghÜa lµ kh«ng x¸c ®Þnh lÒ, gi÷a c¸c « trong b¶ng chØ cã mét kho¶ng tr¾ng nhá ®Ó ph©n biÖt. NÕu chØ ®Ó border th× ngÇm ®Þnh border=1. Víi nh÷ng b¶ng cã cÊu tróc phøc t¹p, nªn ®Æt lÒ ®Ó ng­êi xem cã thÓ ph©n biÖt râ c¸c dßng vµ cét. BORDERCOLOR Mµu ®­êng kÎ BORDERCOLORDARK BORDERCOLORLIGHT Mµu phÝa tèi vµ phÝa s¸ng cho ®­êng kÎ næi. BACKGROUND §Þa chØ tíi tÖp ¶nh dïng lµm nÒn cho b¶ng BGCOLOR Mµu nÒn CELLSPACING Kho¶ng c¸ch gi÷a c¸c « trong b¶ng CELLPADDING Kho¶ng c¸ch gi÷a néi dung vµ ®­êng kÎ trong mçi « cña b¶ng. COLSPAN ChØ ®Þnh « sÏ kÐo dµi trong bao nhiªu cét ROWSPAN ChØ ®Þnh « sÏ kÐo dµi trong bao nhiªu 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 ra mét form trong tµi liÖu HTML, chóng ta sö dông thÎ FORM víi có ph¸p nh­ sau: Có ph¸p: <FORM ACTION = ulr METHOD = GET | POST NAME = name TARGET = frame_name | _blank | _self > Trong ®ã ACTION §Þa 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: <INPUT ALIGN = LEFT | CENTER | RIGHT TYPE = BUTTON | CHECKBOX | FILE | IMAGE | PASSWORD | RADIO | RESET | SUBMIT | TEXT VALUE = value > 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 b¶n Có ph¸p: <TEXTAREA COLS=sè cét ROWS=sè hµng NAME=tªn > V¨n b¶n ban ®Çu PhÇn II thiÕt kÕ web sö dông ms frontpage I. CÁC THAO TÁC CƠ BẢN 1. Các thao tác chính khi soạn thảo một trang web Tạo mới một trang web: Chọn chức năng File/New/Page /Normal Page hay chọn icon New trên Toolbar. Lưu trang web: Chọn chức năng File/Save hay chọn icon Save trên Toolbar. Để lưu trang web dưới dạng một tên khác chọn chức năng File/Save As Xem trước hiển thị của trang web đang thiết kế: Chọn chức năng File/Preview in Browser. Lúc này cửa sổ trình duyệt Internet Explorer (IE) sẽ hiển thị trang web mà chúng ta đang soạn thảo. Nên lưu trang web trước khi chọn chức năng này. Cửa sổ màn hình soạn thảo trang web cung cấp 3 cách “hiểu” (view) khác nhau về 1 trang web. Nếu bạn chọn Normal view, bạn có thể biên tập trang web dưới dạng WYSIWYG. Ví dụ bạn có thể gõ văn bản vào, thay đổi màu sắc, kích thước chữ, b Nếu bạn chọn HTML view, bạn sẽ thấy được các mã HTML tương ứng với cách trình bày của trang web của bạn. Ví dụ, nếu trong Normal view bạn chèn vào một table thì trong HTML view, bạn sẽ thấy các tag tương ứng như sau:   Nếu bạn chọn Preview view, tương tự với chức năng Preview in Browser 2. Tạo các thành phần của 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 và thời gian phù hợp với nhu cầu của bạn 2.2. Đường kẻ ngang (Horizontal line) Chọn Insert/Horizotal line. Đặt các thuộc tính cho đường kẻ ngang bằng cách double click chuột lên nó. Sau đó chọn các thông số về Width, Height, Color, Alignment 2.3. List Chọn Format/Bullets and Numbering. Sau khi hộp hội thoại xuất hiện, bạn hãy chọn các dạng bullet và numbering tương ứng. Để thay đổi các thuộc tính của bullet như màu sắc, kiểu chữ, , ta chọn Format/Bullets and Numbering/Style Ngoài ra, ta còn có thể chọn hình ảnh để thay cho các kiểu bullet thông thường. Để thay đổi, ta chọn Format/Bullets and Numbering/Picture bullets, rồi 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 để: Hiển thị các thông tin có dạng dòng/cột, ví dụ như bảng thời khóa biểu, thông tin sản phẩm, .. Trình bày (layout) các văn bản(text) và các ảnh đồ họa(graphics). Để tạo một bảng, ta có thể dùng một trong hai cách: Chọn Table/Insert Table. Khi hộp hội thoại tạo bảng hiện ra, bạn phải cung cấp các thông tin chi tiết cho việc tạo bảng, ví dụ như số dòng, số cột, kích thước, ... Chọn Table/Draw Table. Với chức năng này, bạn sẽ dùng bút vẽ để tạo các dòng, cột Để không hiện (hide) border của bảng, ta click phải chuột lên table, chọn Table Properties/Border/Sizes bằng 0. Để tách một cell hay trộn nhiều cell lại, ta chọn Tabe rồi chọn Split /Merge Cells. Để thêm hoặc xóa các cell, ta chọn Table rồi 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 khi hộp thoại hiện ra, bạn gõ vào dòng chữ cần chuyển động và đặt các thuộc tính khác như màu sắc, font chữ, Thêm hiệu ứng font chữ cho các hyperlink: Chọn Format/Background, check vào Enable hyperlink rollover effects. Sau đó bạn có thể chọn các màu theo ý muốn. 2.6. Chèn ảnh Chọn chức năng Insert/Picture/From File. Đặt thuộc tính và kích thước của ảnh, click phải chuột lên ảnh, rồi chọn Picture Properties. Để tạo các hotspot hyperlink, ta chọn hình vẽ tương ứng (hình chữ nhật, ellipse, ) trên thanh toolbar pictures. Chọn vùng trên ảnh, rồi điền thông tin của hyperlink vào 2.7. Chèn hyperlink Chọn chức năng Insert/Hyperlink. Sau khi hộp thoại hiện ra, gõ vào hyperlink tương ứng. Có 3 dạng: Địa chỉ Internet, có dạng: http:// Ví dụ: http:// www.yahoo.com Liên kết tới một trang trong site, có dạng: /thư mục/tên tập tin. Ví dụ: ../images/shopping.htm Liên kết ngay chính trong trang, đặt bằng bookmark. 3. Định dạng trang Click phải chuột lên trang, chọn Page Properties. Để đặt màu nền cho trang, chọn Background/Colors/Background Để đăt ảnh nền cho trang, chọn Background/Formatting/Background picture. Để đặt các thông số về 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 1. Tạo trang web cho nhóm. Khởi động Microsoft Front Page 2000. Soạn trang web cá nhân của nhóm đặt tên là InfoGroup.htm (ví dụ nhóm 1 sẽ lấy tên là InfoGroup1.htm). Các thông tin chính của các thành viên trong nhóm bao gồm: Họ và tên, Công việc và chức vụ hiện nay, Địa chỉ liên lạc, Điện thoại, Fax, Email, Mobile Phone, ... Ngoài ra các nhóm có thể bổ sung các thông tin khác. Upload trang web đã soạn lên website. Thử truy cập trang web đã tải lên. 2. Tham khảo các site thông tin của Việt Nam 3. Tham khảo các site bán hàng nổi tiếng 4. Tham khảo các site giải trí 5. Tham khảo các site về lao động việc làm tại VN 6. Tạo trang web chứa các hyperlink dùng để truy cập nhanh Tạo trang web đặt tên là Links.htm chứa các hyperlink đã đề cập ở trên. Bổ sung thêm các hyperlink và các phân loại khác mà các anh chị đã biết. Upload lên website và kiểm tra lại. 7. Tạo trang HomePage Tạo trang web HomePage đặt tên là Default.htm giới thiệu về nhóm và các công việc mà nhóm đang triển khai. Kết nối hai trang đã tạo vào 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 ( Website báo điện tử ( ) Website trường học. 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, Điện hoa, ... Các chủ đề khác... III. ĐĂNG KÍ WEBSITE MIỄN PHÍ TRÊN INTERNET 1. Vào địa chỉ để đăng kí website miễn phí với địa chỉ truy cập có dạng 2. Gõ vào địa chỉ mà bạn dự định đăng kí tại ô yourname. Sau đó click Go. Màn hình tiếp theo sẽ hiện ra, bạn chọn mục cuối cùng 100% Free Hosting Option và click vào SignUp 3. Sau đó bạn hãy điền vào các thông tin liên quan cần thiết như Họ tên, mật khẩu, email, Cuối cùng gõ vào ARTK để chắc rằng bạn đã đồng ý với các qui định của FreeServers khi cung cấp dịch vụ miễn phí này. 4. Nếu đăng kí thành công, màn hình sau sẽ hiện ra để cung cấp cho bạn một số lựa chọn khi xây dựng website của mình. IV.THIẾT KẾ MỘT SỐ WEBSITE MẪU 1. Thiết kế website theo mẫu sau ( 2. Thiết kế website theo mẫu sau ( 3. Thiết kế website theo mẫu sau ( 4. Thiết kế website theo mẫu sau ( 5. Thiết kế website theo mẫu sau ( 6. Thiết kế website theo mẫu sau ( 7. Thiết kế website theo mẫu sau ( ) Để tham khảo cách thiết kế các trang web trên, hãy: Tải về máy bằng cách chọn chức năng Save của IE. Dùng MS Front Page để mở tập tin đã lưu lên Chuyển qua lại giữa các màn hình Normal View và HMTL View để biết cách thiết kế Với mỗi trang web đã xem hãy chú ý các vấn đề sau: Cách bố trí các bảng (table) Cách sử dụng font chữ Cách chèn vào các hình ảnh để trang trí Cách định nghĩa các thuộc tính như màu chữ, màu nền, ... Phần tĩnh (không thay đổi) mỗi khi click vào các hyperlink chuyển qua một nội dung mới Từ các trang web trên, hãy tự thiết kế các trang cho website của nhóm.