tai lieu thiet ke web

THIẾT KẾ WEB ThS Thái Kim Phụng Lưu hành nội 2010 MỤC LỤC CHƯƠNG KHÁI QUÁT CHUNG VỀ INTERNET CHƯƠNG CÁC BƯỚC THIẾT KẾ WEB 2.1 MỤC TIÊU CỦA WEBSITE CẦN THIẾT KẾ .8 2.2 CHIẾN LƯỢC THIẾT KẾ .9 2.3 THIẾT KẾ GIAO DIỆN 17 BÀI THỰC HÀNH CHƯƠNG 17 CHƯƠNG HTML CĂN BẢN 18 3.1 CÁC THẺ ĐỊNH DẠNG CẤU TRÚC DỮ LIỆU 19 3.2 CÁC THẺ ĐỊNH DẠNG KHỐI 20 3.3 CÁC THẺ ĐỊNH DẠNG DANH SÁCH 21 3.4 CÁC THẺ ĐỊNH DẠNG KÝ TỰ 22 3.5 CÁC THẺ CHÈN ÂM THANH, HÌNH ẢNH 29 3.6 CÁC THẺ ĐỊNH DẠNG BẢNG BIỂU .31 33 BÀI THỰC HÀNH CHƯƠNG 33 CHƯƠNG CSS (Cascading Style Sheets) 46 4.1 KHÁI NIỆM CSS 47 4.1.1 CSS gì? .47 4.1.2 Tại CSS? 47 4.1.3 Học CSS cần gì? 47 4.1.4 Cú pháp CSS 48 4.1.5 Đơn vị CSS 49 4.1.6 Vị trí đặt CSS 50 4.1.7 Sự ưu tiên .52 4.2 MỘT SỐ ĐẶC TÍNH CƠ BẢN VỀ CSS .54 4.2.1 Thuộc tính Border CSS 54 4.2.2 Thuộc tính Font CSS 56 4.2.3 Thuộc tính List CSS .58 4.2.4 Thuộc tính Text CSS 59 4.2.5 Thuộc tính Padding CSS .59 4.2.6 Thuộc tính Background CSS 60 4.2.7 Thuộc tính Margin CSS 61 61 BÀI THỰC HÀNH CHƯƠNG 61 CHƯƠNG THIẾT KẾ WEB DÙNG FORM VÀ JAVASCRIPT 69 5.1 HTML FORM .70 5.2 CĂN BẢN VỀ NGÔN NGỮ JAVASCRIPT .71 5.2.1 Tổng quan Java Script 71 5.2.2 Sự kiện html java script 73 74 BÀI THỰC HÀNH CHƯƠNG 74 CHƯƠNG THIẾT KẾ WEB SỬ DỤNG DREAMWEAVER .95 6.1 ĐỊNH DẠNG WEBPAGE 96 6.2 TABLE 97 6.3 FORM 99 6.4 LAYER .102 6.5 FLASH BUTTON, FLASH TEXT, ROLLOVER IMAGES, JUMP MENU 104 6.6 BỔ SUNG MULTIMEDIA CHO TRANG WEB (ÂM THANH, PHIM ẢNH) 107 6.7 FRAMESET 109 6.8 CASCADE STYLE SHEET- TEMPLATE 111 .114 BÀI THỰC HÀNH CHƯƠNG .114 CHƯƠNG ĐĂNG KÝ VÀ QUẢN LÝ WEBSITE 126 7.1 ĐĂNG KÝ HOST .127 7.2 THIẾT KẾ MỘT SỐ WEBSITE MẪU 128 Tài liệu tham khảo Môn Thiết kế Web CHƯƠNG KHÁI QUÁT CHUNG VỀ INTERNET Tóm tắt Mục tiêu Các mục Kết thúc học - Khái niệm mạng Internet cung cấp học viên kiến - Các dịch vụ : www, ftp, thức mạng Internet … email,… Trang Bài tập bắt buộc Bài tập làm thêm Tài liệu tham khảo Môn Thiết kế Web Mạng nhóm máy tính kết nối với Internet mạng mạng Giao thức TCP/IP (Transmission Control Protocol/Internet Protocol) cung cấp việc kết nối tất máy tính giới Hình 1.1: Internet World Wide Web tập Internet Nó bắt đầu đề án nghiên cứu cấp quốc gia phòng nghiên cứu CERN Thụy Sĩ Ngày nay, cung cấp thông tin cho người dùng toàn giới WWW hoạt động dựa chế để đưa tài nguyên có giá trị đến với người dùng Đó là: o Giao thức: Người dùng tuân theo giao thức để truy cập tài nguyên Web HyperText Transfer Protocol(HTTP) giao thức WWW sử dụng o Địa chỉ: WWW tuân theo cách thức đặt tên thống để truy cập vào tài nguyên Web URL sử dụng để nhận dạng trang tài nguyên Web o HTML: Ngôn ngữ đánh dấu siêu văn (HTML) sử dụng để tạo tài liệu truy cập Web Tài liệu HTML tạo cách sử dụng thẻ phần tử HTML File lưu Web server với đuôi htm html Khi bạn sử dụng trình duyệt để yêu cầu số thông tin đó, Web server đáp ứng yêu cầu Nó gửi thông tin yêu cầu đến trình duyệt dạng trang web Trình duyệt định dạng thông tin máy chủ gửi hiển thi chúng Trang Tài liệu tham khảo Môn Thiết kế Web Hình 1.2: Trình duyệt yêu cầu đến máy chủ Hình 1.3: Một số trình duyệt phổ dụng Trang Tài liệu tham khảo Môn Thiết kế Web CHƯƠNG CÁC BƯỚC THIẾT KẾ WEB Tóm tắt Mục tiêu Các mục Bài tập bắt buộc Bài tập làm thêm Kết thúc học 2.1 Mục tiêu website Dựa vào tập cung cấp học viên kiến cần thiết kế thức bước 2.2 Chiến lược thiết kế thiết kế Website … 2.3 Thiết kế giao diện Trang phần Chương Dựa vào tập cuối phần Chương cuối Tài liệu tham khảo Môn Thiết kế Web 2.1 MỤC TIÊU CỦA WEBSITE CẦN THIẾT KẾ Phác thảo mục tiêu, ý tưởng giúp bạn không học làm để tạo website mà tạo thành công mặt tài cung cấp nội dung giá trị đổi tới khách hàng bạn Bước 1: Nội dung trang web bạn gì? Bạn nghĩ câu hỏi nhiều tới mức bạn có câu trả lời rõ ràng Nhưng chức cảm nhận trang web phải phù hợp với nội dung Bố cục chức trang web dễ thực bạn hiểu tường tậng nội dung trang web Bước 2: Hãy trọng vào bố cục tính thiết thực trang web Hãy ưu tiên toán cho gói hosting (lưu trữ website) chiến dịch quảng cáo, có nhìn tổng thể nội dung trang web thể Điều ý tưởng trang web bạn? Nó thảo luận nào? Bạn chọn bổ sung cho chủ đề qua báo, blog, hoạt ảnh, hình ảnh kết hợp tất này.Nó có phải định dạng phù hợp mà bạn muốn sử dụng cho nội dung trang web không? Bạn tạo website để thu hút độc giả theo mong đợi mình? Bước 3: Hãy tìm dịch vụ hosting cung cấp tất tính mà bạn cần Từ điều nói trên, bạn nên có danh sách đầy đủ chức bạn cần như: mẫu thư điện tử, khảo sát bình chọn, thư viện ảnh, thông tin phải đăng nhập, blog tính khác Hãy nghiên cứu kỹ gói hosting tìm lấy gói chào hàng cho thứ bạn cần Nếu bạn không chắn làm để tạo website tìm kiếm máy chủ có hệ thống hỗ trợ vững chắc, nhờ hỗ trợ kỹ thuật thức diễn đàn tích cực Bước 4: Đừng để truy cập vào trang web bạn chưa thực sẵn sàng Mọi người ghét điều hướng truy cập tới trang xuất banner “đang triển khai” Thông thường, trang triển khai không hoàn tất gần bị bỏ quên Bởi hầu hết người không trở lại nhìn trang “đang triển khai” dù hoàn tất Bước 5: Hãy đảm bảo trang web bạn truy cập nhiều thực sẵn sàng Bạn không cần nghĩ xem làm để thiết kế website tốt nhất, mà làm để tiếp thị website tới độc giả theo mong đợi Hãy hoạch định làm bạn sử dụng hội tiếp thị miễn phí chẳng hạn diễn đàn, liên kết tương hỗ có blogger đến với trang web bạn Hãy tạo thêm kế hoạch cho chương trình quảng cáo toán mà chúng giúp trì ngân sách cho bạn Trang Tài liệu tham khảo Môn Thiết kế Web 2.2 CHIẾN LƯỢC THIẾT KẾ Bất điều bạn cố gắng để tiến hành thiết kế website, cho dù quảng cáo cho công ty hay bán sản phẩm mục tiêu giành lưu lượng truy cập Khi thiết kế trang web cho công ty, dù website lớn hay nhỏ điều quan trọng khiến người trở lại với trang web bạn Quan điểm người website hiệu có khác Một số người quan trọng giao diện web người khác lại quan tâm đến tiện ích nhiều Nếu bạn đáp ứng tiêu chí sau trang web bạn thật có vượt trội rừng website Giao diện website Không muốn nhìn website có giao diện thu hút sặc sỡ khiến khách truy cập rời bỏ Việc tìm thấy hài hoà tốt chúng chìa khoá để có thiết kế website hiệu Màu sắc sử dụng để thể cảm xúc tình cảm người khuyến khích họ mua hàng Các nhà thiết kế web chuyên nghiệp sử dụng tâm lý màu nhằm truyền tải lời thông điệp khác tới người dùng Một thiết kế đừng nên phức tạp hay khó hiểu nên phù hợp với loại hình kinh doanh sản phẩm dịch vụ mà bạn mời chào Mục đích trang web Trước phát triển trang web bạn cần phải đặt mục tiêu tự hỏi thân bạn muốn người có lợi ích từ trang web bạn Nội dung website nên cập nhật Rất dễ nhận thấy website chưa cập nhật Điều có phản ánh không hay công ty trang chủ tóm tắt chung nội dung website Bạn cần có nội dung website phản ánh mục tiêu bạn cố gắng làm Tính tiện ích Internet cung cấp thông tin nên khó giành ý người giữ họ trang web bạn Một điều khiến người truy cập hay rời bỏ tiện ích nghèo nàn Một trang web cần đơn giản dễ sử dụng Điều hướng nên dễ dàng truy cập tới trang website Khách truy cập kích chuột nhiều lần để vào trang cụ thể Một quy tắc chung hầu hết chuyên gia thiết kế web không nên để khách truy cập nhấp chuột lần truy cập tới trang website Cấu trúc điều hướng phức tạp nhanh chóng làm khách truy cập họ rời bỏ họ tìm thấy điều mà họ tìm kiếm Bạn nhớ đến điều nhà cung cấp dịch vụ bạn 2.3 THIẾT KẾ GIAO DIỆN Bạn gặp nhiều trang web đẹp bạn muốn thiết kế trang web riêng cho Bạn có chút khiếu thẩm mỹ biết đôi chút việc thiết kế web, bạn chưa tự thiết kế trang web hoàn chỉnh Trang Tài liệu tham khảo Môn Thiết kế Web Đi tìm cảm hứng hình thành ý tưởng (phần 1) Bạn gặp nhiều trang web đẹp bạn muốn thiết kế trang web riêng cho Bạn có chút khiếu thẩm mỹ biết đôi chút việc thiết kế web, bạn chưa tự thiết kế trang web hoàn chỉnh Đã lần bạn ngồi trước máy tính, định làm cho trang web - để tiếng sau chưa làm gì? Bạn thật chẳng biết phải đâu cả… Trong việc, bước bước khó Điều với bạn chưa có kinh nghiệm nhiều việc mà làm Trong viết giúp bạn trả lời một câu hỏi hay thường gặp người bắt đầu làm thiết kế web làm để lấy cảm hứng ý tưởng trang web thiết kế đẹp mà bạn thích để tạo thiết kế riêng cho mà không rơi vào tình chép thiết kế họ? Tuy nhiên, phải nói trước, bạn hi vọng đọc xong viết giúp bạn thiết kế trang web hoàn chỉnh e làm bạn thất vọng Trong viết, giả định bạn có kiến thức viết mã cho web sử dụng tương đối thành thạo phần mềm đồ họa Điều bạn cần hướng để bắt đầu - tớ hi vọng từ kinh nghiệm giúp cho bạn có hướng Vậy bước gì? Bước khó để nghĩ ra, thường lại bước dễ chẳng ngạc nhiên bạn biết nó: Bước 1: Tìm nguồn cảm hứng Quá trình thuật ngữ dân thiết kế gọi “get inspired” Việc có cảm hứng điều quan trọng ngành nghệ thuật liên quan đến trình sáng tạo Trong âm nhạc, nguồn cảm hứng từ cảm xúc đến buổi chiều; Trong thơ, bắt nguồn từ cảnh quang thiên nhiên Còn thiết kế, nguồn cảm hứng đến từ … thiết kế khác Chính vậy, không giống thơ nhạc việc tìm nguồn cảm hứng thường đến cách ngẫu nhiên có phần may mắn, thiết kế, bạn tự tìm nguồn cảm hứng Hãy vào trang sưu tầm giới thiệu thiết kế đẹp CSSBeauty, CSS Vault, Design Shake bạn thấy có nhiều thiết kế đẹp từ khắp nơi giới Một vài điều đáng ý: • Hãy chụp lưu lại hình trang web mà bạn thích vào thư mục máy tính Các trang gallery thường để hình ảnh thu nhỏ thường tác dụng việc giúp bạn thấy đẹp thiết kế Việc lưu lại hình ảnh độ phân giải thực đem lại cho bạn chi tiết mà giúp bạn xem lại thiết kế dễ dàng sau mà không cần phải mở trình duyệt • Ở bước này, bạn không cần phải nghĩ thiết kế “tương lai” mà việc dạo quanh vòng thưởng thức thiết kế người khác Tuy nhiên, bạn cần xác định rõ trang web mà thiết kế thuộc phân mục Có nhiều thiết kế đẹp, thiết kế phù hợp với mục đích bạn Ví dụ phong cách thiết kế trang web doanh nghiệp không phù hợp với trang blog cá nhân Việc xác định rõ từ đầu giúp bạn bỏ qua nhanh Trang 10 Tài liệu tham khảo Môn Thiết kế Web Làm việc với bảng (table) Tạo bảng: Vào menu Insert -> Table Hình ảnh Dreamweaver Chèn hình ảnh: vào menu Insert ->Image Trang 117 Tài liệu tham khảo Môn Thiết kế Web Chú thích: 01: độ cao, rộng hình(V,H) 02: đường dẫn hình 03: ghi hình 04: phục hồi kích cỡ hình 05: chế độ canh hình 06: đường viền hình 07: chế độ canh chữ so với hình 08: sử dụng hình ảnh làm bảng đồ link 09: khoảng cách bề cao so với chữ 10: khoảng cách bề ngang so với chữ 11: dùng hình làm liên kết Thuộc tính trang ( thuộc tính thẻ body) Trang 118 Tài liệu tham khảo Môn Thiết kế Web Dùng Dreamweaver thiết kế website sau Bài 1: Bài 2: Trang 119 Tài liệu tham khảo Môn Thiết kế Web Bài 3: Bài 4: a) Tạo tập tin HTML hình 4.1 hình 4.2 sau Hình 4.1 Hình 4.2 b) Tạo điểm hotspot tập tin hình world.gif vị trí xung quanh khu vực nước Ấn Độ tập tin World.htm Liên kết hotspot đến tập tin India.htm chứa đồ chi tiết nước Ấn Độ Hướng dẫn Trang 120 Tài liệu tham khảo Môn Thiết kế Web A) World.htm: Chọn Insert | Image nhấn nút Insert Image Objects Panel Hộp thoại sau xuất Chọn hình “world.gif” nhấn Select Hình chèn vào tài liệu Để lưu file, ta nhấn File | Save gõ “World.htm” mục file name Lặp lại bước để tạo tập tin “India.htm” chèn hình “India.gif” vào B) Chọn hình World.gif Trong Property Inspector, bạn nhìn thấy mục Map Trong mục Map, đặc tả tên cho Hotspot Chọn công cụ ‘Polygon Hotspot Tool’ vẽ hotspot India hình sau Khi cho hotspot ảnh, Property Inspector thay đổi hình Trang 121 Tài liệu tham khảo Môn Thiết kế Web Cho hotspot liên kết đến tập tin India.htm click vào biểu tượng folder chọn vị trí chứa tập tin sau gõ INDIA vào hộp Alt dùng để thích bạn di chuyển khu vực đồ nước Ấn Độ chữ INDIA Bài 5: Bài 6: Trang 122 Tài liệu tham khảo Môn Thiết kế Web Bài 7: Bài 8: Trang 123 Tài liệu tham khảo Môn Thiết kế Web Bài 9: Trang Gioithieu.htm Trang 124 Tài liệu tham khảo Môn Thiết kế Web Trang LienHe.htm Bài 10: Trang 125 Tài liệu tham khảo Môn Thiết kế Web CHƯƠNG ĐĂNG KÝ VÀ QUẢN LÝ WEBSITE Tóm tắt Mục tiêu Các mục Bài tập bắt buộc Bài tập làm thêm Dựa vào tập Kết thúc học 7.1 Đăng ký Host Dựa vào tập cung cấp học viên biết 7.2 Thiết kế Website mẫu phần cuối phần cuối cách đăng ký host đưa Chương Website lên mạng Internet… Trang 126 Chương Tài liệu tham khảo Môn Thiết kế Web 7.1 ĐĂNG KÝ HOST Vào địa http://www.freeservers.com để đăng kí website miễn phí với địa truy cập có dạng http://.freeservers.com 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í Trang 127 Tài liệu tham khảo Môn Thiết kế Web Nếu đăng kí thành công, hình sau để cung cấp cho bạn số lựa chọn xây dựng website 7.2 THIẾT KẾ MỘT SỐ WEBSITE MẪU Thiết kế website theo mẫu sau (http://greetings.yahoo.com) Trang 128 Tài liệu tham khảo Môn Thiết kế Web Thiết kế website theo mẫu sau (http://www.flowers.com) Thiết kế website theo mẫu sau (http://shopping.yahoo.com) Trang 129 Tài liệu tham khảo Môn Thiết kế Web Thiết kế website theo mẫu sau (http://www.is-edu.hcmuns.edu.vn) Trang 130 Tài liệu tham khảo Môn Thiết kế Web Thiết kế website theo mẫu sau (http://www.bttvn.com ) 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 Trang 131 [...]... BÀI TẬP 1 Trang 33 Tài liệu tham khảo Môn Thiết kế Web 1/ Tạo trang web Headings.htm (sử dụng Tag Hn, từ Heading1 đến Heading6) 2/ Tạo trang web HeadingCenter.htm (Phối hợp các Tag) 3/ Tạo trang web Alignment.htm (Phối hợp các Tag) 4/ Tạo trang web Emphasis.htm Trang 34 Tài liệu tham khảo Môn Thiết kế Web 5/ 6/ Trang 35 Tài liệu tham khảo Môn Thiết kế Web BÀI TẬP 2 (Link) 1/ Tạo tập tin links2.htm :... diện tích trang web thành 2 nữa - một để liệt kê những bài viết chính và bên kia để hiển thị danh sách các bài nổi bật và danh sách phân mục Những gì bạn không nên chép lại: hình ảnh bông hoa họ sử dụng trong hầu như tất cả các thành phần trên trang web Sau bước này, bạn sẽ có một ý tưởng tương đối rõ ràng (ít ra là không mơ hồ không xác định như trước) về trang web của mình Trang web sẽ có thiết kế... hướng thiết kế giao diện người dùng (web hay ứng dụng phần mềm) thì có lẽ đây là một quá trình bắt buộc dù bạn có muốn hay không hãy thực hành với những thiết kế nhỏ và đơn giản để tích luỹ kinh nghiệm cho mình BÀI THỰC HÀNH CHƯƠNG 2 1 Hãy thiết kế khung mẫu cho những website trong đồ án 2 Hãy thiết kế khung mẫu cho website thương mại 3 Hãy thiết kế khung mẫu cho website giải trí 4 Hãy thiết kế khung... Trang WEB này được WEBMASTER bảo trì 3.4.9 VẼ MỘT ĐƯỜNG THẲNG NẰM NGANG Cú pháp: Ý nghĩa các tham số: ALIGN Căn lề (căn trái, căn phải, căn giữa) COLOR Đặt màu cho đường thẳng NOSHADE Không có bóng SIZE Độ dày của đường thẳng Trang 28 Tài liệu tham khảo Môn Thiết kế Web. .. cho hình ảnh,… Những gì bạn không nên để ý: trang web đó sử dụng hình ảnh cụ thể gì, màu sắc cụ thể cho tiêu đề của bài viết,… Trang 12 Tài liệu tham khảo Môn Thiết kế Web Bạn thấy gì từ một trong những thiết kế ban đầu của trang web All Women’s Talk? Một vài điểm cần ghi lại: cách sử dụng màu đơn và cách họ chọn màu thể hiện nội dung nữ tính của trang web Bạn cũng có thể ghi lại cách mà họ đặt chủ đề... mà bạn thích Nếu bạn xác định mình sẽ đi theo nghề thiết kế web, đó là một thói quen nên học Vậy khi nào thì bạn nên dừng lại? Khi nào thì bạn biết rằng mình đã tìm được nguồn cảm hứng? Rất khó để trả lời được câu hỏi này Sẽ có những lúc mà bạn bắt gặp một trang web quá đẹp mà bạn chỉ muốn dừng lại và bắt tay ngay vào việc thiết kế một trang web tương tự Nhưng trừ khi bạn muốn sao chép nguyên xi thiết... hoặc thể hiện qua một kiểu đặc biệt nào đó In chữ bị gạch ngang In chữ lớn hơn bình thường bằng cách tăng kích thước font hiện thời lên một Việc sử dụng các thẻ lồng nhau tạo ra hiệu ứng chữ tăng dần Tuy nhiên đối với mỗi trình duyệt có Trang 22 Tài liệu tham khảo Môn Thiết kế Web giới hạn về kích thước đối với mỗi font chữ, vượt quá giới hạn này, các thẻ... giữa hai thẻ Kích thước có thể là tuyệt đối (nhận giá trị từ 1 đến 7) hoặc tương đối (+2,-4 ) so với font chữ hiện tại 3.4.2 CĂN LỀ VĂN BẢN TRONG TRANG WEB Trong trình bày trang Web của mình các bạn luôn phải chú ý đến việc căn lề các văn bản để trang Web có được một bố cục đẹp Một số các thẻ định dạng như P, Hn, IMG đều có tham số ALIGN cho phép bạn căn lề các văn bản nằm trong phạm vi giới hạn bởi... phải LEFTMARGIN Lề trái Trang 25 Tài liệu tham khảo Môn Thiết kế Web 3.4.5 CHỌN KIỂU CHỮ CHO VĂN BẢN Cú pháp: 3.4.6 KHÁI NIỆM VĂN BẢN SIÊU LIÊN KẾT Văn bản siêu liên kết hay còn gọi là siêu văn bản là một từ, một cụm từ hay một câu trên trang Web được dùng để liên kết tới một trang Web khác Siêu văn bản là môi trường trong đó chứa các liên kết (link)... hình ý tưởng Sau khi đã chọn được khoảng 10-20 thiết kế trong bước 1 và bước đầu có cái “cảm hứng” để quyết định sẽ thiết kế cho riêng mình một trang web, bạn sẽ cần phải định hình ý tưởng cho trang web của mình Hãy ngồi duyệt lại những ảnh chụp trang web mà bạn đã lưu vào máy trong bước 1: • Cách tốt nhất trong quá trình này là dùng tính năng Slideshow của phần mềm quản lý ảnh (ví dụ như Picasa) vì