Đang tải... (xem toàn văn)
(NB) Tài liệu tham khảo môn Thiết kế Web gồm có 7 chương, nội dung chính của từng chương gồm: Khái quát chung về internet, các bước thiết kế Web, HTML căn bản, CSS (cascading style sheets), thiết kế web dùng Form và Javascript, thiết kế web sử dụng Dreamweaver, đăng ký và quản lý website. Mời các bạn tham khảo.
THIEÁT KEÁ WEB Lưu hành nội 2010 Tài liệu tham khảo Môn Thiết kế Web 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Ế 2.2 CHIẾN LƯỢC THIẾT KẾ 2.3 THIẾT KẾ GIAO DIỆN 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.1.1 HTML 19 3.1.2 HEAD 19 3.1.3 TITLE 19 3.1.4 BODY 19 3.2 CÁC THẺ ĐỊNH DẠNG KHỐI 20 3.2.1 THẺ P 20 3.2.2 CÁC THẺ ĐỊNH DẠNG ĐỀ MỤC H1/H2/H3/H4/H5/H6 20 3.2.3 THẺ XUỐNG DÒNG BR 21 3.2.4 THẺ PRE 21 3.3 CÁC THẺ ĐỊNH DẠNG DANH SÁCH 21 3.3.1 DANH SÁCH THÔNG THƯỜNG 21 3.4 CÁC THẺ ĐỊNH DẠNG KÝ TỰ 22 3.4.1 CÁC THẺ ĐỊNH DẠNG IN KÝ TỰ 22 3.4.2 CĂN LỀ VĂN BẢN TRONG TRANG WEB 23 3.4.3 CÁC KÝ TỰ ĐẶC BIỆT 24 3.4.4 SỬ DỤNG MÀU SẮC TRONG THIẾT KẾ CÁC TRANG WEB 24 3.4.5 CHỌN KIỂU CHỮ CHO VĂN BẢN 26 3.4.6 KHÁI NIỆM VĂN BẢN SIÊU LIÊN KẾT 26 3.4.7 ĐỊA CHỈ TƯƠNG ĐỐI 27 3.4.8 KẾT NỐI MAILTO 28 3.4.9 VẼ MỘT ĐƯỜNG THẲNG NẰM NGANG 28 3.5 CÁC THẺ CHÈN ÂM THANH, HÌNH ẢNH 29 3.5.1 GIỚI THIỆU 29 3.5.2 ĐƯA ÂM THANH VÀO MỘT TÀI LIỆU HTML 30 3.5.3 CHÈN MỘT HÌNH ẢNH, MỘT ĐOẠN VIDEO VÀO TÀI LIỆU HTML 30 3.6 CÁC THẺ ĐỊNH DẠNG BẢNG BIỂU 31 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 Trang Tài liệu tham khảo Môn Thiết kế Web 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 60 4.2.6 Thuộc tính Background CSS 60 4.2.7 Thuộc tính Margin CSS 61 BÀI THỰC HÀNH CHƯƠNG 62 CHƯƠNG THIẾT KẾ WEB DÙNG FORM VÀ JAVASCRIPT 69 5.1 HTML FORM 70 5.1.1 TẠO FORM 70 5.1.2 TẠO MỘT DANH SÁCH LỰA CHỌN 70 5.1.3 TẠO HỘP SOẠN THẢO VĂN BẢN 71 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 BÀI THỰC HÀNH CHƯƠNG 75 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 97 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 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 Trang Tài liệu tham khảo Môn Thiết kế Web CHƯƠ CHƯƠNG ƯƠNG KHÁI QT 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 để u cầu số thơng tin đó, Web server đáp ứng yêu cầu Nó gửi thơng tin 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 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 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ế Chương thiết kế Website … 2.3 Thiết kế giao diện Trang phần 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 hồ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ù hồ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 tố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 ln 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 hồ tốt chúng chìa khố để 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 vơ vàn 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 khơng phải 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ọ khơng thể 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 Trang Tài liệu tham khảo Môn Thiết kế Web 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 hồn chỉnh Đ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 hồ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 khơng biết 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 hồn chỉnh tơi e làm bạn thất vọng Trong viết, tơi 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 khơng có 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 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 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 Kết thúc học 7.1 Đăng ký Host Dựa vào tập 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 ... 42 Tài liệu tham khảo Môn Thiết kế Web Dùng thẻ HTML để thiết kế trang web sau: 1/ Tourist1.htm 2/ Tourist2.htm Trang 43 Tài liệu tham khảo Môn Thiết kế Web 3/ vinair.htm 4/ oto.htm Trang 44 Tài. .. thiết kế thức bước 2.2 Chiến lược thiết kế Chương thiết kế Website … 2.3 Thiết kế giao diện Trang phần 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... web Alignment.htm (Phối hợp Tag) Trang 34 Tài liệu tham khảo Môn Thiết kế Web 4/ Tạo trang web Emphasis.htm 5/ Trang 35 Tài liệu tham khảo Môn Thiết kế Web 6/ BÀI TẬP (Link) 1/ Tạo tập tin links2.htm