Giáo trình Thiết kế Web 2010

THIEÁT KEÁ WEBÁ ÁÁ ÁÁ Á Lưu hành nội bộ 2010 Tài liệu tham khảo Môn Thiết kế Web Trang 2 MỤC LỤC CHƯƠNG 1. KHÁI QUÁT CHUNG VỀ INTERNET................................................................................ 4 CHƯƠNG 2. CÁC BƯỚC THIẾT KẾ WEB ............................................................................................ 7 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 .................................................................................................................. 9 BÀI THỰC HÀNH CHƯƠNG 2 ............................................................................................................. 17 CHƯƠNG 3. 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 3 ............................................................................................................. 33 CHƯƠNG 4. CSS (Cascading Style Sheets) ..................................................................................... 46 4.1 KHÁI NIỆM CSS ......................................................................................................................... 47 4.1.1 CSS là gì?............................................................................................................................ 47 4.1.2 Tại sao CSS?....................................................................................................................... 47 4.1.3 Học CSS cần những gì?...................................................................................................... 47 Tài liệu tham khảo Môn Thiết kế Web Trang 3 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 trong CSS .............................................................................................. 54 4.2.2 Thuộc tính Font trong CSS.................................................................................................. 56 4.2.3 Thuộc tính List trong CSS.................................................................................................... 58 4.2.4 Thuộc tính Text trong CSS .................................................................................................. 59 4.2.5 Thuộc tính Padding trong CSS............................................................................................ 60 4.2.6 Thuộc tính Background trong CSS...................................................................................... 60 4.2.7 Thuộc tính Margin trong CSS .............................................................................................. 61 BÀI THỰC HÀNH CHƯƠNG 4 ............................................................................................................. 62 CHƯƠNG 5. 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 trong html và java script ......................................................................................... 73 BÀI THỰC HÀNH CHƯƠNG 5 ............................................................................................................. 75 CHƯƠNG 6. 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 6 ........................................................................................................... 114 CHƯƠNG 7. ĐĂ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 Trang 4 CHÖÔNG 1 KHÁI QUÁT CHUNG VỀ INTERNET Tóm tắt Mục tiêu Các mục chính Bài tập bắt buộc Bài tập làm thêm Kết thúc bài học này cung cấp học viên kiến thức về mạng Internet - Khái niệm mạng Internet - Các dịch vụ cơ bản : www, ftp, email, Tài liệu tham khảo Môn Thiết kế Web Trang 5 Mạng là một nhóm các máy tính kết nối với nhau. Internet là mạng của các mạng. Giao thức TCP/IP (Transmission Control Protocol/Internet Protocol) cung cấp việc kết nối tất cả các máy tính trên thế giới. Hình 1.1: Internet World Wide Web là một tập con của Internet. Nó bắt đầu như là đề án nghiên cứu cấp quốc gia tại phòng nghiên cứu CERN ở Thụy Sĩ. Ngày nay, nó cung cấp thông tin cho người dùng trên toàn thế giới. WWW hoạt động dựa trên 3 cơ chế để đưa các 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 các giao thức này để truy cập tài nguyên trên Web. HyperText Transfer Protocol(HTTP) là giao thức được WWW sử dụng. o Địa chỉ: WWW tuân theo một cách thức đặt tên thống nhất để truy cập vào các tài nguyên trên Web. URL được sử dụng để nhận dạng các trang và các tài nguyên trên Web. o HTML: Ngôn ngữ đánh dấu siêu văn bản (HTML) được sử dụng để tạo các tài liệu có thể truy cập trên Web. Tài liệu HTML được tạo ra bằng cách sử dụng các thẻ và các phần tử của HTML. File được lưu trên Web server với đuôi .htm hoặc .html. Khi bạn sử dụng trình duyệt để yêu cầu một số thông tin nào đó, Web server sẽ đáp ứng các yêu cầu đó. Nó gửi thông tin được yêu cầu đến trình duyệt dưới dạng các trang web. Trình duyệt định dạng thông tin do máy chủ gửi về và hiển thi chúng. Tài liệu tham khảo Môn Thiết kế Web Trang 6 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 Tài liệu tham khảo Môn Thiết kế Web Trang 7 CHÖÔNG 2 CÁC BƯỚC THIẾT KẾ WEB Tóm tắt Mục tiêu Các mục chính Bài tập bắt buộc Bài tập làm thêm Kết thúc bài học này cung cấp học viên kiến thức về các bước khi thiết kế một Website 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 Dựa vào bài tập trong phần cuối Chương 2. Dựa vào bài tập trong phần cuối Chương 2. Tài liệu tham khảo Môn Thiết kế Web Trang 8 2.1 MỤC TIÊU CỦA WEBSITE CẦN THIẾT KẾ Phác thảo mục tiêu, ý tưởng sẽ giúp bạn sẽ không chỉ học được làm thế nào để tạo một website mà còn tạo ra sự thành công về mặt tài chính trong khi cung cấp nội dung giá trị và đổi mới tới các khách hàng của bạn. Bước 1: Nội dung trang web của bạn là gì? Bạn có thể nghĩ về câu hỏi này quá nhiều tới mức bạn có thể có được câu trả lời rất rõ ràng. Nhưng chức năng và cảm nhận về trang web phải phù hợp với nội dung. Bố cục và chức năng của trang web dễ thực hiện hơn khi bạn hiểu tường tậng về nội dung trang web của mình. Bước 2: Hãy chú trọng vào bố cục và tính thiết thực của trang web Hãy ưu tiên thanh toán cho bất kỳ những gói hosting (lưu trữ website) hoặc các chiến dịch quảng cáo, cũng như có một cái nhìn tổng thể về nội dung trang web sẽ là gì và được thể hiện như thế nào. Điều gì sẽ là ý tưởng chính trên trang web của bạn? Nó sẽ được thảo luận như thế nào? Bạn có thể chọn bổ sung cho chủ đề của mình qua những bài báo, các blog, hoạt ảnh, hình ảnh hoặc là sự kết hợp của tất cả những cái này.Nó có phải là định dạng phù hợp mà bạn muốn sử dụng cho nội dung trang web không? Bạn có thể tạo một website như thế nào để sẽ thu hút được độc giả theo mong đợi của mình? Bước 3: Hãy tìm một dịch vụ hosting có thể cung cấp tất cả tính năng mà bạn cần Từ những điều đã nói ở trên, bạn nên có một danh sách đầy đủ các chức năng bạn cần như: mẫu thư điện tử, khảo sát và bình chọn, thư viện ảnh, thông tin phải đăng nhập, các blog và cả những tính năng khác. Hãy nghiên cứu kỹ các gói hosting và tìm lấy một gói chào hàng cho mọi thứ bạn cần. Nếu bạn không chắc chắn làm thế nào để tạo một website thì hãy tìm kiếm một máy chủ có hệ thống hỗ trợ vững chắc, hoặc nhờ hỗ trợ kỹ thuật chính thức hoặc các diễn đàn tích cực. Bước 4: Đừng để bất cứ ai truy cập vào trang web của bạn khi nó chưa thực sự sẵn sàng Mọi người ghét điều hướng truy cập tới một trang xuất hiện banner “đang triển khai”. Thông thường, một trang đang triển khai thì không bao giờ hoàn tất và nó gần như bị bỏ quên. Bởi hầu hết mọi người không trở lại nhìn khi các trang “đang triển khai” đó nữa dù nó đã được hoàn tất. Bước 5: Hãy đảm bảo trang web của bạn được truy cập nhiều khi nó thực sự sẵn sàng. Bạn không chỉ cần nghĩ xem làm thế nào để thiết kế website tốt nhất, mà còn làm thế nào để tiếp thị được một website tới độc giả theo mong đợi của mình. Hãy hoạch định làm thế nào bạn sẽ sử dụng những cơ hội tiếp thị miễn phí chẳng hạn như các diễn đàn, các liên kết tương hỗ cũng như có được các blogger đến với trang web của bạn. Hãy tạo thêm một kế hoạch nữa cho các chương trình quảng cáo được thanh toán mà chính chúng sẽ giúp duy trì ngân sách cho bạn. Tài liệu tham khảo Môn Thiết kế Web Trang 9 2.2 CHIẾN LƯỢC THIẾT KẾ Bất cứ điều gì bạn đang cố gắng để tiến hành thiết kế website, cho dù nếu là quảng cáo cho công ty hay bán sản phẩm thì mục tiêu chính vẫn là giành được lưu lượng truy cập Khi thiết kế một trang web mới cho công ty, dù website đó lớn hay nhỏ thì điều quan trọng là khiến mọi người luôn trở lại với trang web của bạn. Quan điểm của mỗi người về một website hiệu quả có sự khác nhau. Một số người có thể quan trọng về giao diện web trong khi những người khác lại quan tâm đến sự tiện ích nhiều hơn. Nếu bạn có thể đáp ứng được những tiêu chí sau thì trang web của bạn thật đã có sự vượt trội trong rừng website. Giao diện website Không ai muốn nhìn một website có giao diện kém thu hút nhưng nếu nó quá sặc sỡ thì cũng khiến khách truy cập rời bỏ. Việc tìm thấy một sự hài hoà tốt giữa chúng là chìa khoá để có bản thiết kế website hiệu quả. Màu sắc có thể được sử dụng để thể hiện cảm xúc tình cảm của con người cũng như có thể 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 những lời thông điệp khác nhau tới người dùng. Một bản thiết kế đừng nên quá phức tạp hay khó hiểu và cũng nên phù hợp với loại hình kinh doanh cũng như sản phẩm hoặc dịch vụ mà bạn mời chào. Mục đích trang web Trước khi phát triển một trang web bạn cần phải đặt ra các mục tiêu và hãy tự hỏi bản thân rằng bạn muốn mọi người có được lợi ích như thế nào từ trang web của bạn. Nội dung của website nên luôn được cập nhật. Rất dễ nhận thấy khi website chưa được cập nhật. Điều này có phản ánh không hay về công ty bởi vì trang chủ như là bản tóm tắt chung nội dung website. Bạn cũng cần có một nội dung website phản ánh được mục tiêu chính và những gì bạn đang 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 được sự chú ý của mọi người cũng như giữ họ trên trang web của bạn. Một trong những điều khiến người truy cập hay rời bỏ nhất là tiện ích nghèo nàn. Một trang web cần được đơn giản và dễ sử dụng. Điều hướng nên dễ dàng truy cập tới được mọi trang trên website. Khách truy cập sẽ không bao giờ phải kích chuột nhiều hơn 4 lần để vào một trang cụ thể. Một quy tắc chung của hầu hết các chuyên gia thiết kế web là không nên để khách truy cập nhấp chuột quá 2 lần khi truy cập tới bất kỳ trang nào trên website. Cấu trúc điều hướng phức tạp sẽ nhanh chóng làm mất khách truy cập và họ sẽ rời bỏ nếu họ không thể tìm thấy những điều mà họ đang tìm kiếm. Bạn hãy nhớ đến một điều nữa là các nhà cung cấp dịch vụ của bạn. 2.3 THIẾT KẾ GIAO DIỆN Tài liệu tham khảo Môn Thiết kế Web Trang 10 Bạn đã gặp rất nhiều trang web đẹp và giờ đây bạn muốn thiết kế một trang web riêng cho mình. Bạn cũng có chút khiếu về thẩm mỹ và cũng biết đôi chút về việc thiết kế web, nhưng bạn chưa bao giờ từng tự mình thiết kế ra một trang web hoàn chỉnh Đi tìm cảm hứng và hình thành ý tưởng (phần 1) Bạn đã gặp rất nhiều trang web đẹp và giờ đây bạn muốn thiết kế một trang web riêng cho mình. Bạn cũng có chút khiếu về thẩm mỹ và cũng biết đôi chút về việc thiết kế web, nhưng bạn chưa bao giờ từng tự mình thiết kế ra một trang web hoàn chỉnh. Đã mấy lần bạn ngồi trước máy tính, quyết định sẽ làm cho mình một trang web - để rồi cả mấy tiếng sau vẫn chưa làm được gì? Bạn thật sự chẳng biết phải bắt đầu từ đâu cả Trong mọi việc, bước đầu tiên bao giờ cũng là bước khó nhất. Điều đó càng đúng với nếu bạn chưa có kinh nghiệm và không biết gì nhiều về những việc mà mình sẽ làm. Trong bài viết này sẽ giúp bạn trả lời một một câu hỏi rất hay thường gặp ở những người mới bắt đầu làm thiết kế web là làm thế nào để lấy cảm hứng và ý tưởng của những trang web thiết kế đẹp mà bạn thích để tạo ra thiết kế riêng cho mình mà không rơi vào tình huống sao chép thiết kế của họ? Tuy nhiên, phải nói trước, nếu bạn hi vọng đọc xong bài viết này sẽ giúp bạn thiết kế được một trang web hoàn chỉnh thì tôi e rằng sẽ làm bạn thất vọng. Trong bài viết, tôi sẽ giả định rằng các bạn đã có kiến thức về viết mã cho web cũng như đã sử dụng tương đối thành thạo một phần mềm đồ họa nào đó. Điều bạn cần chỉ là một hướng đi để bắt đầu - và tớ hi vọng từ những kinh nghiệm của mình sẽ giúp cho các bạn có được một hướng đi đúng. Vậy bước đầu tiên sẽ là gì? Bước đầu tiên tuy khó để nghĩ ra, nhưng thường lại là bước dễ nhất và chẳng mấy ngạc nhiên một khi bạn đã biết về nó: Bước 1: Tìm nguồn cảm hứng Quá trình này trong thuật ngữ của dân thiết kế gọi là “get inspired”. Việc có được cảm hứng là một điều rất quan trọng trong những ngành nghệ thuật liên quan đến quá trình sáng tạo. Trong âm nhạc, nguồn cảm hứng có thể là từ một cảm xúc chợt đến trong một buổi chiều; Trong thơ, nó có thể bắt nguồn từ một cảnh quang thiên nhiên. Còn trong thiế