Giáo trình Thiết kế web (Nghề: Tin học ứng dụng - Trung cấp) - Trường Cao đẳng Cộng đồng Đồng Tháp

Chia sẻ: _ _ | Ngày: | Loại File: PDF | Số trang:125

Thêm vào BST

Báo xấu

24
lượt xem 13
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Giáo trình Thiết kế web cung cấp cho người học những kiến thức như: Giới thiệu internet; các bước thiết kế website; HTML; CSS và javasript; đăng ký và quản lý website. Mời các bạn cùng tham khảo!

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Giáo trình Thiết kế web (Nghề: Tin học ứng dụng - Trung cấp) - Trường Cao đẳng Cộng đồng Đồng Tháp

ỦY BAN NHÂN DÂN TỈNH ĐỒNG THÁP TRƢỜNG CAO ĐẲNG CỘNG ĐỒNG ĐỒNG THÁP GIÁO TRÌNH MÔN HỌC: THIẾT KẾ WEB NGÀNH, NGHỀ: TIN HỌC ỨNG DỤNG TRÌNH ĐỘ: TRUNG CẤP (Ban hành kèm theo Quyết định số /QĐ-CĐCĐ ngày tháng năm 20… của Hiệu trƣởng trƣờng Cao đẳng Cộng đồng Đồng Tháp) Đồng Tháp, năm 2018 Trang i
TUYÊN BỐ BẢN QUYỀN Tài liệu này thuộc loại sách giáo trình nên các nguồn thông tin có thể đƣợc phép dùng nguyên bản hoặc trích dùng cho các mục đích về đào tạo và tham khảo. Mọi mục đích khác mang tính lệch lạc hoặc sử dụng với mục đích kinh doanh thiếu lành mạnh sẽ bị nghiêm cấm. Trang ii
LỜI NÓI ĐẦU Các ứng dụng web đã và đang ảnh hƣởng trực tiếp đến các hoạt động và thói quen sinh hoạt hàng ngày của mỗi ngƣời, từ sinh viên, ngƣời nội trợ cho đến giới văn phòng và doanh nhân. Lợi nhuận cao thu đƣợc từ việc kinh doanh các ứng dụng web đã thu hút các công ty phần mềm chuyển hƣớng sang lĩnh vực này. Điều này mở ra nhiều cơ hội việc làm cho những ai thực sự quan tâm và yêu thích lĩnh vực thiết kế web. Bài giảng bao gồm các chƣơng sau:  Chƣơng 1: GIỚI THIỆU INTERNET  Chƣơng 2: CÁC BƢỚC THIẾT KẾ WEBSITE  Chƣơng 3: HTML  Chƣơng 4: CSS VÀ JAVASRIPT  Chƣơng 5: ĐĂNG KÝ VÀ QUẢN LÝ WEBSITE Cuối cùng, xin gửi lời cảm ơn chân thành nhất đến chúng ta bè, đồng nghiệp đã có những ý kiến đóng góp sâu sắc cho bài giảng này. Mọi ý kiến đóng góp xin vui lòng gửi đến địa chỉ mail: pqcuong@dtcc.edu.vn . Xin chân thành cảm ơn! Đồng Tháp, ngày 09 tháng 04 năm 2015 Tác giả Phan Quốc Cƣờng Trang iii
MỤC LỤC LỜI NÓI ĐẦU ..................................................................................................................i MỤC LỤC .......................................................................................................................iv DANH MỤC CÁC HÌNH ...............................................................................................vi Chƣơng 1 .......................................................................................................................... 1 GIỚI THIỆU INTERNET ................................................................................................ 1 1.1 Giới thiệu những khái niệm............................................................................... 1 1.1.1 Khái niệm về Internet ...................................................................................... 1 1.1.2 Khái niệm về World Wide Web ...................................................................... 2 1.2 Thuật ngữ Internet ............................................................................................. 3 1.2.1 Webpage .......................................................................................................... 3 1.2.2 Website ............................................................................................................ 3 1.2.3 Homepage - Trang chủ .................................................................................... 3 1.2.4 Website tĩnh..................................................................................................... 3 1.2.5 Website động ................................................................................................... 3 1.2.6 Tên miền .......................................................................................................... 4 1.2.7 Máy chủ ........................................................................................................... 4 1.2.8 URL ................................................................................................................. 4 1.2.9 Trình duyệt web .............................................................................................. 4 CÂU HỎI ÔN TẬP CHƢƠNG 1..................................................................................... 6 Chƣơng 2 .......................................................................................................................... 7 CÁC BƢỚC THIẾT KẾ WEBSITE ................................................................................ 7 2.1 Mục đích của website cần thiết kế .................................................................... 7 2.2 Chiến lƣợc thiết kế ............................................................................................ 8 2.3 Thiết kế giao diện .............................................................................................. 9 CÂU HỎI ÔN TẬP CHƢƠNG 2................................................................................... 15 Chƣơng 3 ........................................................................................................................ 16 HTML............................................................................................................................. 16 Trang iv
3.1 Giới thiệu HTML ............................................................................................ 16 3.2 Trình soạn thảo HTML.................................................................................... 19 3.3 Các thuộc tính trong HTML (HTML Attributes) ............................................ 22 3.4 HTML Headings.............................................................................................. 25 3.5 HTML Paragraphs ........................................................................................... 26 3.6 Các thẻ định dạng ............................................................................................ 28 3.6.1 HTML Style .................................................................................................. 28 3.6.2 HTML Formatting ......................................................................................... 32 3.7 HTML Comments ........................................................................................... 37 3.8 HTML Links.................................................................................................... 38 3.9 HTML Images ................................................................................................. 41 3.10 HTML Tables .................................................................................................. 43 3.11 HTML Lists ..................................................................................................... 45 3.12 Thẻ ........................................................................................................ 49 3.13 HTML Iframes ................................................................................................ 50 3.14 HTML Forms .................................................................................................. 51 CÂU HỎI ÔN TẬP CHƢƠNG 3................................................................................... 56 Chƣơng 4 ........................................................................................................................ 76 CSS VÀ JAVASCRIPT ................................................................................................. 76 4.1 Giới thiệu CSS ................................................................................................. 76 4.2 Một số đặc tính cơ bản của CSS...................................................................... 79 4.3 Giới thiệu ngôn ngữ JavaScript ....................................................................... 90 CÂU HỎI ÔN TẬP CHƢƠNG 4................................................................................... 95 Chƣơng 5 ...................................................................................................................... 107 ĐĂNG KÝ VÀ QUẢN LÝ WEBSITE ....................................................................... 107 5.1 Đăng ký tên miền (domain) miễn phí ............................................................... 107 5.1.1 Tên miền tiếng việt ....................................................................................... 107 5.1.2 Tên miền miễn phí .TK ................................................................................. 108 Trang v
5.1.3 Tên miền miễn phí uni.me ............................................................................ 109 5.1.4 Tên miền VN.EE ........................................................................................... 110 5.2 Đăng ký host miễn phí ...................................................................................... 111 5.2.1 Đăng ký host miễn phí với freeservers ......................................................... 111 5.2.2 Đăng ký host miễn phí với Hostinger ........................................................... 114 CÂU HỎI ÔN TẬP CHƢƠNG 5................................................................................. 117 TÀI LIỆU THAM KHẢO ............................................................................................ 118 DANH MỤC CÁC HÌNH Trang vi
Hình 1 – Mô hình Internet ................................................................................................ 2 Hình 2 – Bố cục website ................................................................................................ 13 Hình 3 – Độ phân giải màn hình .................................................................................... 14 Hình 4 – Soạn thảo HTML trong Notepad .................................................................... 20 Hình 5 – Đặt tên và chọn kiểu mã hóa cho tập tin HTML trong Notepad..................... 21 Hình 6 – Kết quả hiển thị trên trình duyệt Google Chrome ........................................... 22 Hình 7 – Tra cứu tên miền tiếng Việt .......................................................................... 107 Hình 8 – Tên miền miễn phí .TK ................................................................................. 108 Hình 9 – Đăng ký tên miền .TK ................................................................................... 109 Hình 10 – Trang uni.me ............................................................................................... 109 Hình 11 – Đăng ký tài khoản tại uni.me ...................................................................... 110 Hình 12 – Tên miền VN.EE ......................................................................................... 111 Hình 13 – Website freeservers ..................................................................................... 111 Hình 14 – Chọn gói cƣớc miễn phí .............................................................................. 112 Hình 15 – Đăng ký thông tin trên freeservers .............................................................. 113 Hình 16 – Freeserver cung cấp một số lựa chọn xây dựng website ............................. 113 Hình 17 – Đăng ký tài khoản tại Hostinger ................................................................. 114 Hình 18 – Gói hosting miễn phí ................................................................................... 114 Hình 19 – Chọn gói hosting miễn phí của Hostinger ................................................... 115 Hình 20 – Form đăng ký tên miền trên Hostinger ....................................................... 116 Trang vii
Chƣơng 1 GIỚI THIỆU INTERNET MỤC ĐÍCH Cung cấp những kiến thức tổng quát về Internet, giúp sinh viên hiểu đƣợc các khái niệm và thuật ngữ về Internet. Nhiệm vụ tự học và tài liệu tham khảo của sinh viên trong chƣơng 1 Để đạt đƣợc mục đích đề ra trong chƣơng 1, sinh viên phải thực hiện tốt các yêu cầu sau đây:  Phải đọc trƣớc nội dung Chƣơng 1 trong quyển bài giảng này trƣớc khi lên lớp 1.1 Giới thiệu những khái niệm 1.1.1 Khái niệm về Internet Internet là một tập hợp của các máy tính đƣợc liên kết nối lại với nhau thông qua hệ thống dây cáp mạng và đƣờng điện thoại trên toàn thế giới với mục đích trao đổi, chia sẻ dữ liệu và thông tin. Bất cứ nguời nào trên hệ thống cũng có thể tiếp cận và xem thông tin từ bất cứ một máy tính nào trên hệ thống này hay hệ thống khác. Trƣớc đây mạng Internet đƣợc sử dụng chủ yếu ở các tổ chức chính phủ và trong các trƣờng học. Ngày nay mạng Internet đã đƣợc sử dụng bởi hàng tỷ ngƣời bao gồm cả cá nhân các doanh nghiệp lớn, nhỏ, các trƣờng học và tất nhiên là nhà nƣớc và các tổ chức chính phủ. Phần chủ yếu nhất của mạng Internet là World Wide Web. Mạng Internet là của chung điều đó có nghĩa là không ai thực sự sở hữu nó với tƣ cách cá nhân. Mỗi phần nhỏ của mạng đƣợc quản lý bởi các tổ chức khác nhau nhƣng không ai không một thực thể nào cũng nhƣ không một trung tâm máy tính nào nắm quyền điều khiển mạng. Mỗi phần của mạng đƣợc liên kết với nhau theo một cách thức nhằm tạo nên một mạng toàn cầu. Trang 1
Internet là một mạng toàn cầu bao gồm nhiều mạng LAN (Local Area Network), MAN (Metropolitan Area Network) và WAN (Wide Area Network) trên thế giới kết nối với nhau. Mỗi mạng thành viên này đƣợc kết nối vào Internet thông qua một router. Hình 1 – Mô hình Internet 1.1.2 Khái niệm về World Wide Web Word Wide Web đƣợc gọi tắt là Web - là mạng lƣới nguồn thông tin cho phép mọi ngƣời khai thác thông tin qua một số công cụ hoặc là chƣơng trình hoạt động dƣới các giao thức mạng. World Wide Web là một trong số các dịch vụ của Internet nhằm giúp cho việc trao đổi thông tin trở nên thuận tiện và dễ dàng. Sở dĩ Web trở nên phổ biến vì Web cung cấp cho ngƣời sử dụng khả năng truy cập dễ dàng từ đó ngƣời sử dụng có thể khai thác các thông tin đa dạng trên Internet bao gồm phần, hình ảnh thậm chí cả âm thanh và video nghĩa là những gì mà chúng ta có thể cảm nhận đƣợc, vì thế Web đôi khi còn đƣợc gọi là đa phƣơng tiện của mạng Internet. Thông tin đƣợc biểu diễn bằng “website” mà chúng ta có thể nhìn thấy trên màn hình máy tính. Mọi thông tin đều có thể hiển thị trên website đó, kể cả âm thanh, hình ảnh động, nhƣng vấn đề lý thú nhất của Web nằm ở khía cạnh khác, đó là website mà chúng ta nhìn thấy trên màn hình máy tính có khả năng liên kết với những website khác, dẫn chúng ta đến những nguồn thông tin khác. Trang 2
Khả năng này của Web có đƣợc là nhờ thông qua các “siêu liên kết” (hyperlink), siêu liên kết về bản chất là địa chỉ trỏ tới nguồn thông tin (website) nằm đâu đó trên Internet. Bằng những siêu liên kết này, các website có thể liên kết với nhau thành một mạng chằng chịt, trang này trỏ tới trang khác, cho phép mọi ngƣời chu du trên biển cả thông tin. 1.2 Thuật ngữ Internet 1.2.1 Webpage Webpage là một website, tức một tập tin có đuôi .htm hay .html. Đó là một tập tin viết bằng mã code HTML chứa các siêu liên kết (hyperlink) đến các trang khác. Trên website ngoài thành phần chữ nó còn có thể chứa các thành phần khác nhƣ hình ảnh, nhạc, video... 1.2.2 Website Website là tập hợp những website liên kết với nhau bằng các siêu liên kết. Website đƣợc đƣa vào mạng Internet để hoà cùng các website khác, mọi ngƣời trên khắp thế giới đều có thể truy cập đƣợc vào website để lấy thông tin. 1.2.3 Homepage - Trang chủ Homepage - Trang chủ, là trang đầu tiên xuất hiện khi website đƣợc truy cập. Trang chủ thƣờng chứa các thông tin căn bản nhất của website và các liên kết đến các trang chuyên đề. Trang chủ có thể có các tên nhƣ index.htm, default.htm. 1.2.4 Website tĩnh Web tĩnh là website chỉ đơn thuần mô tả thông tin và thông tin này không thƣờng xuyên đƣợc cập nhật hoặc thay đổi nội dung theo thời gian. 1.2.5 Website động Web động là website có các đƣờng liên kết đến cơ sở dữ liệu Database. Khi chọn một liên kết, một thành phần trong cơ sở dữ liệu sẽ xuất hiện nhƣ thể có một website mới. Trang 3
1.2.6 Tên miền Mục đích chính của tên miền là để cung cấp một hình thức đại diện, hay nói cách khác, dùng những tên dễ nhận biết, thay cho những tài nguyên Internet mà đa số đƣợc đánh địa chỉ bằng số. Cách nhìn trừu tƣợng này cho phép bất kỳ tài nguyên nào (ở đây là website) đều có thể đƣợc di chuyển đến một địa chỉ vật lý khác trong cấu trúc liên kết địa chỉ mạng, có thể là toàn cầu hoặc chỉ cục bộ trong một mạng intranet, mà trên thực tế là đang làm thay đổi địa chỉ IP. Việc dịch từ tên miền sang địa chỉ IP (và ngƣợc lại) do hệ thống DNS trên toàn cầu thực hiện. Với việc cho phép sử dụng địa chỉ dạng chữ cái không trùng nhau thay cho dãy số, tên miền cho phép ngƣời dùng Internet dễ tìm kiếm, liên lạc với các website và bất kỳ dịch vụ liên lạc dựa trên IP nào khác. Tính uyển chuyển của hệ thống tên miền cho phép nhiều địa chỉ IP có thể đƣợc gán vào một tên miền, hoặc nhiều tên miền đều cùng chỉ đến một địa chỉ IP. Điều này có nghĩa là một máy chủ có thể có nhiều vai trò (nhƣ lƣu trữ nhiều website độc lập) hoặc cùng một vai trò có thể đƣợc trải ra trên nhiều máy chủ. 1.2.7 Máy chủ Máy chủ, máy phục vụ hay hệ thống cuối là một máy tính đƣợc nối mạng, có IP tĩnh, có năng lực xử lý cao và trên máy đó ngƣời ta cài đặt các phần mềm để phục vụ cho các máy tính khác (máy trạm) truy cập để yêu cầu cung cấp các dịch vụ và tài nguyên. 1.2.8 URL URL, viết tắt của Uniform Resource Locator, đƣợc dùng để tham chiếu tới tài nguyên trên Internet. URL mang lại khả năng siêu liên kết cho các trang mạng. Các tài nguyên khác nhau đƣợc tham chiếu tới bằng địa chỉ, chính là URL, còn đƣợc gọi là địa chỉ web hay là liên kết mạng (hay ngắn gọn là liên kết). 1.2.9 Trình duyệt web Trình duyệt web là một phần mềm ứng dụng cho phép ngƣời sử dụng xem và tƣơng tác với các phần, hình ảnh, đoạn phim, nhạc, trò chơi và các thông tin khác ở trên một Trang 4
website của một địa chỉ web trên mạng toàn cầu hoặc mạng nội bộ. Phần và hình ảnh trên một website có thể chứa siêu liên kết tới các website khác của cùng một địa chỉ web hoặc địa chỉ web khác. Trình duyệt web cho phép ngƣời sử dụng truy cập các thông tin trên các website một cách nhanh chóng và dễ dàng thông qua các liên kết đó. Trình duyệt web đọc định dạng HTML để hiển thị, do vậy một website có thể hiển thị khác nhau trên các trình duyệt khác nhau. Trang 5
CÂU HỎI ÔN TẬP CHƢƠNG 1 1. Trình bày khái niệm về Internet? 2. Trình bày khái niệm về World Wide Web (www)? 3. Phân biệt Webpage và Website? 4. Tên miền là gì? 5. Phân biệt website tĩnh và website động? Trang 6
Chƣơng 2 CÁC BƢỚC THIẾT KẾ WEBSITE MỤC ĐÍCH Giới thiệu các qui tắc và các bƣớc thiết kế một website, giúp sinh viên hiểu đƣợc qui trình thiết kế một website nhƣ thế nào. Nhiệm vụ tự học và tài liệu tham khảo của sinh viên trong chƣơng 2 Để đạt đƣợc mục đích đề ra trong chƣơng 2, sinh viên phải thực hiện tốt các yêu cầu sau đây:  Xem trƣớc đề cƣơng chi tiết của Chƣơng 2 để biết đƣợc mục đích, nội dung sẽ đƣợc trình bày trong chƣơng này 2.1 Mục đích của website cần thiết kế Việc xác định đƣợc mục đích trƣớc khi tiến hành thiết kế một website đóng vai trò rất quan trọng đối với sự thành công của website đó. Phần bên dƣới sẽ trình bày các bƣớc cho việc xác định mục đích của website cần thiết kế: Bƣớc 1: Nội dung website của chúng ta là gì? Đây là câu hỏi mà chúng ta cần phải dành thời gian suy nghĩ để có thể có đƣợc câu trả lời rất rõ ràng. Bố cục và chức năng của website sẽ dễ thực hiện hơn khi chúng ta hiểu tƣờng tận về nội dung website 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 website Ở bƣớc này chúng ta cần đặt ra những câu hỏi: Ý tƣởng chính trên website của mình là gì? Định dạng phù hợp nào mà chúng ta muốn sử dụng cho nội dung website của mình? Chúng ta có thể tạo ra một website nhƣ thế nào để sẽ thu hút đƣợc ngƣời dùng theo mong đợi của mình? Trang 7
Ý tƣởng chính trên website của mình là gì? Định dạng phù hợp nào mà chúng ta muốn sử dụng cho nội dung website của mình? Chúng ta có thể tạo ra một website nhƣ thế nào để sẽ thu hút đƣợc ngƣời dùng theo mong đợi của mình? 2.2 Chiến lƣợc thiết kế Bất cứ điều gì chúng ta cố gắng để tiến hành thiết kế website thì mục tiêu chính vẫn là có đƣợc lƣợng truy cập cao vào website mà mình xây dựng. Khi thiết kế một website mới dù website đó lớn hay nhỏ thì điều quan trọng nhất là làm sao để mọi ngƣời luôn trở lại với website của mình. 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. Những tiêu chí sau sẽ giúp của chúng ta có đƣợc sự vƣợt trội trong rừng website hiện nay. 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 không phải là hay. 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ả. 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 website mà chúng ta muốn hƣớng đến. Trang 8
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 website của chúng ta. 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 website 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. 2.3 Thiết kế giao diện 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 chúng ta 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. Phần này sẽ giúp chúng ta 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 website thiết kế đẹp mà chúng ta 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ọ. 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 chúng ta đã biết về nó: Bƣớc 1: Tìm nguồn cảm hứng 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ơ văn nó có thể bắt nguồn từ một cảnh quang thiên nhiên. Còn trong thiết kế, nguồn cảm hứng đến từ … những thiết kế khác. Chính vì vậy, không giống nhƣ trong thơ và nhạc việc tìm đƣợc nguồn cảm hứng thƣờng đến Trang 9
một cách ngẫu nhiên và có phần may mắn, trong thiết kế, chúng ta có thể tự mình đi tìm nguồn cảm hứng:  Hãy chụp và lƣu lại màn hình của các website mà chúng ta thích vào một thƣ mục trên máy tính. Các trang gallery thƣờng để hình ảnh thu nhỏ và thƣờng không có mấy tác dụng trong việc giúp chúng ta thấy đƣợc cái đẹp của thiết kế. Việc lƣu lại hình ảnh ở độ phân giải thực không những sẽ đem lại cho chúng ta sự chi tiết mà còn giúp chúng ta xem lại những thiết kế này dễ dàng hơn về sau mà không cần phải mở trình duyệt ra.  Ở bƣớc này, chúng ta không cần phải nghĩ về thiết kế “tƣơng lai” của mình mà hãy cứ việc dạo quanh một vòng và thƣởng thức những thiết kế của ngƣời khác. Tuy nhiên, chúng ta cần xác định rõ website mà mình sẽ thiết kế là thuộc phân mục nào. Có rất nhiều thiết kế đẹp, nhƣng không phải thiết kế nào cũng phù hợp với mục đích của chúng ta. Ví dụ nhƣ phong cách thiết kế của một website doanh nghiệp sẽ không phù hợp với một trang blog cá nhân. Việc xác định rõ ngay từ đầu sẽ giúp chúng ta bỏ qua rất nhanh những thiết kế không phù hợp (những gallery ở trên thƣờng có đến hàng trăm thiết kế, việc ngồi xem hết từng cái là không thể).  Đừng ngồi quá lâu để xem cùng một lúc. Hãy dành thời gian làm việc khác, để hôm sau xem tiếp. Lý do là thƣờng thì một khi xem quá lâu, càng về sau chúng ta sẽ càng cảm thấy mệt mỏi và khi đó dƣờng nhƣ mọi thiết kế đều trở nên có vẻ giống nhƣ nhau - mặc dù nếu chúng ta xem nó ngay từ lúc đầu thì chúng ta lại thấy nó đẹp. Vì vậy, sẽ là lý tƣởng nếu mỗi ngày chúng ta chỉ xem vài ba thiết kế và đó là lý do tại sao chúng ta nên có thói quen sƣu tầm thiết kế đẹp mỗi ngày - để đến lúc cần thì đã có sẵn những thiết kế mà chúng ta thích. Nếu chúng ta 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ì chúng ta nên dừng lại? Khi nào thì chúng ta 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à chúng ta bắt gặp một website quá đẹp mà chúng ta chỉ muốn dừng lại và bắt tay ngay vào việc thiết Trang 10
kế một website tƣơng tự. Nhƣng trừ khi chúng ta muốn sao chép nguyên si thiết kế của họ (mà nhƣ vậy thì đã chẳng gọi là thiết kế), cảm hứng từ một thiết kế nhƣ vậy sẽ không đủ để giúp chúng ta có thể làm nên thiết kế của riêng mình - mặc dù chúng ta có thể chắc chắn là thiết kế đó sẽ đóng vai trò rất quan trọng ảnh hƣởng đến thiết kế của chúng ta. Vậy nên, lời khuyên của là hãy chỉ dừng lại khi:  Chúng ta đã có đƣợc ít nhất 10 - 20 thiết kế mà chúng ta cảm thấy đẹp và phù hợp với website của mình  Có ít nhất một trang thiết kế mà nó khiến chúng ta chỉ muốn sao chép nguyên si của nó về (dù rằng mục đích của chúng ta không phải là nhƣ vậy) Khi đó, chúng ta có thể bắt đầu chuyển sang bƣớc thứ 2: Bƣớc 2: Định 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ảm hứng để quyết định sẽ thiết kế cho riêng mình một website, chúng ta sẽ cần phải định hình ý tƣởng cho website của mình. Hãy ngồi duyệt lại những ảnh chụp website mà chúng ta đã lƣu vào máy trong bƣớc 1, ghi chú xuống một mảnh giấy nhỏ những điểm mà chúng ta thích về một thiết kế mà chúng ta nghĩ rằng mình muốn có trong thiết kế của mình. Điều rất quan trọng là chúng ta hãy để ý đến ý tƣởng chứ không phải chi tiết của thiết kế. Điều đó có nghĩa là chúng ta nên ghi lại ý tƣởng sử dụng mây làm hình ảnh ở đầu trang và cỏ ở cuối trang tạo cảm giác về không gian, nhƣng chúng ta không nên sao chép hình ảnh mà họ sử dụng. Những gì chúng ta cần để ý: cách sử dụng màu sắc, hình thức bố cục, cách sắp xếp nội dung, và thậm chí cách cách mà họ làm viền cho hình ảnh… những gì chúng ta không nên để ý: website đó sử dụng hình ảnh cụ thể gì, màu sắc cụ thể cho tiêu đề của bài viết. Sau bƣớc này, chúng ta 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ề website của mình. Website sẽ có thiết kế đơn giản và sạch sẽ hay là nó sẽ sử dụng nhiều hình ảnh đồ họa? Chúng ta sẽ sử dụng nhiều màu Trang 11
sắc tạo cảm giác tƣơi trẻ hay sẽ chọn tông màu đơn lẻ mà sang trọng? Website sẽ có bố cục 3 cột hay 2 cột? Chúng ta thâm chí sẽ xác định đƣợc những câu hỏi tƣơng đối chi tiết nhƣ liệu mình sẽ sử dụng hình ảnh vector hay sẽ sử dụng ảnh chụp để làm trang trí? Bƣớc 3: Xây dựng khung nội dung Thế nào gọi là xây dựng khung nội dung? Đó là quá trình đi tìm câu trả lời cho câu hỏi - nếu nhìn từ xa, bố cục website của chúng ta sẽ trông nhƣ thế nào?. Thuật ngữ trong thiết kế thƣờng gọi quá trình này là “prototyping” - tức xây dựng mô hình mẫu. Một bức hình có thể thay vạn lời giải thích - đây là cái gọi là “khung nội dung”. Mục đích của việc thiết kế khung giao diện không phải là để tạo ra giao diện - chúng ta đơn giản là tạo một mô hình “thô” của giao diện. Chúng ta không cần quan tâm về màu sắc. Chúng ta cũng không cần quan tâm về những biểu tƣợng cụ thể đƣợc sử dụng là gì. Nói tóm lại, chúng ta không phải quan tâm về những chi tiết nhỏ của thiết kế mà chỉ cần tập trung vào bức tranh tổng thể của website (tƣởng tƣợng nếu chúng ta đứng cách xa màn hình 5 mét và nhìn website của mình sẽ nhƣ thế nào - chắc chắn chúng ta sẽ không thấy cụ thể nội dung mà chỉ thấy bố cục của nó). Có hai bƣớc chính:  Xác định và phân loại nội dung sẽ xuất hiện. Ví dụ nhƣ nếu đó là một trang blog thì thƣờng sẽ có những đối tƣợng chính sau: Tiêu đề, danh sách các phân mục, cột nội dung bài viết, các liên kết chúng ta bè. Tuỳ theo mục đích cụ thể, chúng ta có thể có thêm những đối tƣợng nội dung khác - ví dụ nhƣ những phản hồi gần đây nhất, cột ghi chép nhanh…  Sắp xếp những đối tƣợng nội dung này theo từng khối. Trang 12
Hình 2 – Bố cục website Một trong những quyết định quan trọng nhất mà chúng ta sẽ phải lựa chọn trong bƣớc này chính là về bố cục trình bày thông tin - website sẽ đƣợc chia làm 1 cột, 2 cột hay 3 cột (phổ biến với các trang nội dung). Kinh nghiệm cho thấy rằng dƣờng nhƣ tất cả các thiết kế website nội dung đều bắt đầu từ quyết định lựa chọn số cột để trình bày nội dung và nó sẽ ảnh hƣởng rất nhiều đến những quyết định cụ thể sau đó. Thông thƣờng thì thông tin này sẽ đƣợc hình thành từ hai bƣớc trƣớc đó - nhƣng nếu đã có sẵn ý tƣởng từ trƣớc về bố cục giao diện thì chúng ta vẫn có thể hoàn toàn thực hiện nó trƣớc. Nếu chúng ta chỉ mới bắt đầu viết mà chọn cho mình một giao diện 3 cột sẽ khiến website của chúng ta trở nên trống trải. Trong tình huống đó, có lẽ chúng ta nên thử tìm một thiết kế đơn giản 2 cột trong thời gian tích luỹ nội dung - và đến khi đã có tƣơng đối nhiều những bài viết thì chúng ta có thể chuyển sang giao diện 3 cột. Thực tế là nếu chúng ta thiết kế blog thì nên cực kỳ hạn chế việc sử dụng giao diện 3 cột ngay cả khi đã có nhiều nội dung. Với độ phân giải của màn hình ở Việt Nam phần lớn chỉ giới hạn ở 1024 x 768, chúng ta thƣờng sẽ chỉ có tối đa là 950px bề rộng cho 3 cột. Trong blog, cột nội dung chính Trang 13