<p>This is a sample of <a href=“http://www.ctu.edu.vn\">HTML</a> in one paragraph.</p> <p>This is a second paragraph.</p> </body> </html> Chúng ta sẽ lần lượt được xem xét từng loại tag. <html>...</html> đánh dấu sụ mở đầu và kết thúc của một tài liệu HTML. Tất cả các tài liệu HTML đều phải bắt đầu và kết thúc bằng cặp thẻ này nếu không trình duyệt Web không thể nào nhận dạng đây là một tài liệu HTML. <head>...</head> định nghĩa phần đầu của tài liệu chứa những thông tin về tài liệu (đôi khi còn được gọi là 'metadata' (siêu dữ liệu)). Những dữ liệu này sẽ không được hiển thị trên cửa sổ chính của trình duyệt. Phần ‘header’ cho biết những dữ liệu về tài liệu mà các search engines có thể tìm thấy và kiểm tra, vì vậy đây là những dữ liệu rất quan trọng đối với các website. <title>...</title> tựa đề tài liệu, nằm ở phần đầu của tài liệu. Trình duyệt sẽ hiển thị title trên thanh tiêu đề của trình duyệt (thanh trên cùng màn hình máy tính), hoặc trong danh sách các site đã từng được truy cập. Một số search engines có thể sử dụng thông tin này để lập chỉ mục cho một tài liệu tìm được. Tựa đề thường sẽ miêu tả các nội dung bao trùm trong một tài liệu vì các search engine sẽ sử dụng dữ liệu trong phần tiêu đề này để xác định chủ đề hay một trang. <body>...</body> định nghĩa phần thân (body) của một tài liệu và sẽ được hiển thị trên của sổ chính của browser. Phần body bao gồm những thông tin bạn muốn hiển thị đến người sử dụng cuối cùng. Trang 49
<h1>...</h1> định nghĩa đầu đề (header), ký hiệu này cho biết header cấp độ 1, sẽ hiện thị header trên màn hình với kích cỡ font chữ rất lớn. HTML có 6 loại thẻ cấp độ tựa đề từ h1 đến h6 - hiển thị font chữ nhỏ nhất. <a href=\"URL\">...</a> định nghĩa một tham chiếu siêu văn bản (hypertext reference) đến một địa chỉ URL, còn được gọi là ‘anchor'. Địa chỉ URL có thể là địa chỉ ‘tuyệt đối’, có thể liên kết đến bất kỳ site nào trên Internet, ví dụ: http://www.ctu.edu.vn/ hay là một địa chỉ ‘tương đối’, có thể liên kết đến một file trong cùng hệ thống, còn được gọi là tài liệu liên kết (linking document). Ví dụ, tag <a href=\"another.htm\"> định nghĩa liên kết đến một file có tên là another.htm trong cùng thư mục với file hiện hành. Văn bản nằm giữa cặp tag <a href=\"URL\"> và </a> sẽ được hiển thị như là một liên kết siêu văn bản (hyperlink) đến một địa chỉ xác định. <p> định nghĩa ngắt đoạn, cho biết đoạn chữ nào trong tài liệu tạo thành một đoạn. Chính xác là đặt một tag <p> ở đầu một đoạn và thẻ </p> cuối đoạn, tuy nhiên chúng ta có thể chỉ dùng thẻ <p> để báo hiệu hết một đoạn, và đây là một trong những trường hợp ngoại lệ không theo quy tắc thẻ mở và thẻ đóng chúng ta đã đề cập phần trước. Tham khảo 1. World Wide Web Consortium: http://www.w3.org/ Bài tập hướng dẫn Chuẩn bị một (hoặc nhiều hơn) tập tin HTML và lưu trên máy tính cá nhân. Sử dụng nhiều trình duyệt khác nhau như: Mozilla Firefox và Internet Explorer để kiểm tra kết quả công việc. Trang 50
Làm bài tập trên xem như bạn đã hoàn thành 2 bước đầu tiên trong việc tạo một Web page riêng. Soạn thảo HTML Bất kỳ trình soạn thảo hay bộ xử lý văn bản nào có thể save văn bản thuần túy (plain text) (ASCII) cũng có thể tạo các mã HTML. Có 2 cách soạn thảo HTML: Sử dụng trình soạn thảo văn bản cơ sở, như NotePad accessory có sẵn khi cài đặt Windows hay ứng dụng SimpleText đi kèm với hệ Macintosh. Điều này có nghĩa là bạn sẽ phải tự nhập bằng tay tất cả các đoạn mã HTML. Bạn cũng có thể nhờ đến gói xử lý văn bản (word-processing package) để tạo ra các tập tin HTML, trong trường hợp này bạn cần phải save tập tin dưới dạng văn bản (text). Sử dụng trình soạn thảo HTML chuyên dụng như: Microsoft FrontPage, Adobe PageMill, hay Macromedia Dreamweaver. Sủ dụng những trình soạn thảo này, bạn chỉ cần thực hiện thao tác chèn các mã HTML bằng cách nhấp chuột vào các nút lệnh, v.v. Bạn thực hành bài tập dưới đây sử dụng trình soạn thảo văn bản cơ sở (Windows Notepad hoặc Macintosh SimpleText). Tạo (các) tập tin HTML 1. Mở ứng dụng trình soạn thảo văn bản cơ sở (Notepad hoặc SimpleText). 2. Nhập vào mẫu cấu trúc HTML cơ sở: <html> <head> <title> </title> </head> Trang 51
<body> </body> </html> Các đoạn mã HTML có thể nhập chữ hoa hoặc thường. Nhập tag cơ bản <html> cho biết đây là một tập tin HTML, xác định phần ‘header’ - gồm những thông tin về tài liệu sẽ không được hiển thị- và phần ‘body’ – toàn bộ thông tin bạn muốn hiển thị trên màn hình. 3. Nếu bạn sử dụng Windows, Chọn File/Save As..., chọn ‘Save as type' là All Files, đặt tên cho tập tin: index.htm và lưu vào một folder. Nếu bạn sử dụng Windows, lưu ý là bạn có thể sẽ không tìm thấy phần mở rộng 3 ký tự (.htm) trong danh mục các tập tin. Windows thường chỉ hiển thị phần chính trong tên file và một biểu tượng (icon) phần mở rộng ( ví dụ: nếu trình duyệt mặc định của bạn là IE thì tập tin sẽ là IE file). Tuy nhiên, phần mở rộng là một phần trong tên tập tin vì vậy bạn cần phải biết phần mở rộng này khi bạn muốn thiết lập đường link đến một tập tin (chúng ta sẽ thực hiện thao tác này ở những bước kế tiếp trong bài tập hướng dẫn này). Từ bước này, bạn cần phải thường xuyên save tập tin. 4. Nhập tựa đề tài liệu vào giữa cặp tag <title></title>, ví dụ: <title>Mai's Home Page</title> Mặc dù phần này sẽ không được hiển thị trong tài liệu HTML, nhưng sẽ được các chương trình trình duyệt sử dụng để tham chiếu đến trang. 5. Chọn văn bản làm title, sử dụng lệnh copy và paste để chép và dán title vào phần body của trang HTML. Ví dụ: <html> Trang 52
<head> <title>Mai's Home Page</title> </head> <body> Mai's Home Page 6. Nhập các tag header. <body> <h1>Mai's Home Page</h1> 7. Chèn thêm một dòng dưới header, và nhập một số thông tin về bản thân. Ví dụ: <body> <h1>Mai's Home Page (Home Page của Mai)</h1> Mai is a library studies student at Can Tho University. (Mai là một SV ngành thông tin thư viện trường Đại học Cần Thơ.) Thêm tag kết thúc đoạn: đặt con trỏ vào cuối đoạn bạn vừa nhập, và đánh vào <p>. 8. Thiết lập các liên kết siêu văn bản (hyperlink): đặt một đường link từ tên trường đại học Cần Thơ đến homepage của trường ĐHCT. Đặt con trỏ ngay trước 'library studies’ và nhập vào: <a href=“http://www.ctu.edu.vn\"> Và nhập tag đóng </a> ngay sau từ 'studies'. Tổng kết những thao tác chúng ta thực hiện: <h1>Mai's Home Page</h1> Mai is a <a href=“http://www.ctu.edu.vn\"> library studies</a> student at Can Tho University.<p> Trang 53
9. Save tập tin. 10. Bây giờ hãy kiểm tra homepage bạn vừa tạo. Khởi động trình duyệt nào bạn thích (e.g. Firefox, Netscape, hay Internet Explorer). 11. Trong browser menu, chọn File/Open File. (một sểttình duyệt có thể sử dụng những lệnh khác biệt một chút.) Tìm tập tin của bạn (Vd: \\users\\index.htm) và click OK hoặc Open. Trình duyệt tiến hành dịch tập tin HTML bạn vừa tạo, và đường link đến MLIS (Mai: SV ngành TT-TV) home page sẽ được khởi động (tất nhiên với điều kiện là máy tính của bạn phải có kết nối Internet). Trang 54
Câu hỏi ôn tập Trả lời tất cả những câu hỏi trọng tâm dưới đây để kiểm tra xem bạn hiểu bài đến mức độ nào. Chuẩn bị thảo luận tại lớp. 1. Bộ các chuẩn HTML chưa được phân loại có thể gây ra sự nhầm lẫn. Hãy cho biết chúng có thể gây ra sự nhầm lẫn gì cho những người soạn thảo HTML cho trang web của tổ chức họ? 2. Cho biết điểm khác biệt giữa phần <head> và phần <body> của tài liệu HTML? Trang 55
CHƯƠNG 6: THỰC HÀNH SOẠN THẢO HTML 1. Tóm tắt chương Ở chương này, sinh viên sẽ được thực hành thực tế với việc dung ngôn ngữ thiết kế web HTML để soạn thảo nội dung website. Chương này sẽ mang đến 1 số kiến thức và trải nghiệm cho sinh viên như sau: Soạn thảo HTML để liên kết đến các tài liệu khác trên Web site. Thêm hình ảnh vào các trang web. Sử dụng công cụ soạn thảo HTML, hiểu và sử dụng 1 số thẻ tag HTML Thay đổi màu sắc của font, các đường link, background của trang web. 2. Phát triển trang chủ Bây giờ, trở về trình soạn thảo văn bản (text editor) để thêm một số đoạn văn bản và đường link vào trang. Tạo thêm một tài liệu khác và thiết lập đường link đến homepage của bạn. Trong trình soạn thảo văn bản, mở tập tin index.htm, và nhập vào một đoạn mới: These are a few of my <a href=\"things.htm\"> favourite things</a>.<p> Đây là một ‘anchor’ tham chiếu đến một tài liệu trong cùng hệ thống nên không cần phải nhập địa chỉ http vào đường link. Kế tiếp, bạn sẽ tạo một đường link từ “favourite things\" đến một tài liệu khác bạn sẽ tạo với tên là things.htm, trong đó liệt kê một số site trên Internet bạn yêu thích. Bây giờ, tạo một tập tin HTML mới và lưu với tên things.htm, (cũng tương tự như khi bạn tạo tập tin index.htm file). Nhớ chọn loại file lưu 'Save as type' là All Files nếu bạn đang sử dụng Windows. Đặt title, header cho tài liệu My Favourite Things Dưới đây là danh sách một vài \"favourite things\" tiêu biểu (website được yêu thích). Bạn có thể liệt kê thêm một số site trên Internet mà bạn yêu thích. Lưu ý: liệt kê mỗi site một dòng. Trang 56
Tạo đường link đến địa chỉ URL của những site bạn liệt kê (kiểm tra xem có thể copy và paste địa chỉ URL từ browser của bạn hay không). Dưới đây là một danh sách một số website mẫu: <a href=\"http://www.lordoftherings.net\">Official Lord of the Rings: Return of the King Site</a> <a href=\"http://www.nasm.si.edu/\">Smithsonian National Air and Space Museum Homepage</a> <a href=\"http://www.fathertedonline.ukf.net/\">Father Ted Online</a> <a href= \"http://stylenetwork.com/Shows/Nigella/Recipes/index.html\"> Nigella Bites - Recipe Index</a> Chèn cặp thẻ <ul>...</ul> để định nghĩa danh sách không có trật tự (unordered list: danh sách đánh dấu tròn chứ không theo số thứ tự), và đánh dấu <li> và </li> ở mỗi dòng, cho từng yếu tố của danh sách: <ul> <li><a href=\"http://www.lordoftherings.net\">Official Lord of the Rings: Return of the King Site</a> </li> <li><a href=\"http://www.nasm.si.edu/\">Smithsonian National Air and Space Museum Homepage</a> </li> <li><a href=\"http://www.fathertedonline.ukf.net/\">Father Ted Online</a> </li> <li><a href= \"http://stylenetwork.com/Shows/Nigella/Recipes/index.html\"> Nigella Bites - Recipe Index</a> </li> </ul> Tạo một đường link trong tập tin “things.htm” để có thể trở về homepage chính. Đặt đường link này ngay sau dòng cuối cùng trong danh sách các website yêu thích: Return to Mai's <a href=\"index.htm\">Home Page.</a> Trang 57
Bây giờ save 2 tập tin things.htm và index.htm, và tiến hành kiểm tra (tương tự Bước 10 đã được hướng dẫn trong module 4) xem các đường link giữa 2 tài liệu có hoạt động không. Đồng thời, kiểm tra cách hiển thị danh sách các website yêu thích: có thụt lùi đầu dòng và sử dụng bullet hay không? Nếu các đường link không hoạt động, bạn hãy kiểm tra lại các mã, và chắc chắn rằng bạn đã nhập chính xác tên các tập tin. Lưu ý: khi đặt tên tập tin, KHÔNG sử dụng khoảng trắng hay dấu (Vd: \"mypage.htm\" chứ KHÔNG NÊN đặt tên: \"my page.htm\" hay \"my-page?.htm\", các đường link sẽ không hoạt động vì trong quá trình truyền đến Blackboard hay một Web server nào đó, những khoảng trắng này có thể bị thay thế bằng những ký tự khác.) 3. Cài đặt hình ảnh Hầu hết mọi người đều thích Web site có hình ảnh. Sử dụng những hình ảnh có liên quan đến chủ đề trang web sẽ càng làm tăng sự hứng thú của người sử dụng. Mặc khác, chúng ta cũng cần phải cẩn thận với những hình ảnh không liên quan vì chúng có thể làm mọi người nghĩ sai lệch về mục đích của site. Để cài đặt hình ảnh, chúng ta sử dụng thẻ hình ảnh <img>. File hình ảnh cũng có tên, và tên file sẽ được chèn vào sau lệnh “src”. Nếu bạn muốn chèn ảnh chụp thư viện của bạn có tên file là library.jpg, với câu lệnh dưới đây bạn muốn hiển thị hình này với size nhỏ nhất: <img src=”library.jpg”> Vì vậy, bạn có thể chèn thêm vào kích cỡ hiển thị hình ảnh bạn mong muốn, ví dụ: <img src=”library.jpg” width=”200” height=”150”> Nếu bạn muốn ngay cả những người khiếm thị cũng có thể biết những hình ảnh này, bạn thêm vào đoạn miêu tả ngắn gọn về hình ảnh sau lệnh “alt”. <img src=”library.jpg” width=”200” height=”150” alt=”The Can Tho library from the south”> Có rất nhiều định dạng file hình ảnh, tuy nhiên định dạng thông dụng nhất cho các Web site là .jpeg và gif. Trang 58
Bạn có thể thêm vào 1 hoặc 2 hình ảnh vào tài liệu HTML. Ở giai đoạn này, chúng ta không cần quan tâm đến nội dung hình ảnh. 4. Sử dụng màu sắc HTML sử dụng các con số gồm 6 chữ số trong hệ thập lục phân để định nghĩa màu sắc. Các con số này được cấu tạo từ 3 nhóm số thập lục phân (hệ số sử dụng cơ số 16): trong đó nhóm đầu tiên quy định màu đỏ, nhóm hai là màu lục, và nhóm thứ ba là màu lam. Vì vậy, các con số gồm 6 chữ số trong bảng thập lục phân được gọi là một bộ ba đỏ-lục-lam (RGB triplet). 00 có giá trị sắc độ thấp nhất, và FF có giá trị sắc độ cao nhất. Ví dụ, màu đỏ được biểu thị bằng số thập lục phân ff0000, xanh lơ: 0000ff, màu xanh lục: 00ff00, và màu tía: 990099. <body text=?> thiết lập màu font chữ <body link=?> thiết lập màu các đường link <body vlink=?> thiết lập màu các đường link kế tiếp <body alink=?> thiết lập màu các đường link đã được click vào <font color=?> thay đổi màu font chữ </font> trở về màu font chữ mặc định Có 2 cách thức định màu văn bản trên Web. Thứ nhất: định màu cho toàn bộ tài liệu — được chỉ rõ trong thẻ body; Thứ hai: thiết lập và thay đổi màu sắc trong suốt tài liệu - sử dụng thẻ font chữ. Mặc dù không linh động như thẻ font chữ nhưng thẻ body dễ sử dụng và được nhiều browser hổ trợ hơn. Bạn hãy thử thực hành: thêm các mã quy định màu sắc gồm 6 chữ số thập lục phân sau mỗi lệnh. Đôi khi mã màu sắc bạn chọn không được hiển thị trên màn hình, nhưng không sao, đây chỉ là giai đoạn thực nghiệm. Có rất nhiều tài liệu hướng dẫn sử dụng các mã thập lục phân để quy định màu trên web, hãy tìm và bạn sẽ bắt gặp một web site cung cấp thông tin hướng dẫn hữu ích. <body bgcolor=?> cài đặt màu background Câu lệnh dưới đây sẽ cho background màu trắng: <body bgcolor=#ffffff> Trang 59
Lưu ý: tránh chọn màu background gần giống màu font chữ sẽ rất khó đọc được phần văn bản. Bạn cũng cần đối chiếu màu đường link với màu background. Bài đọc này đưa ra những ý tưởng nâng cao ‘hiệu suất’ của một Web site, chủ yếu giới thiệu cách nâng cao tốc tộ download website. Bài đọc cũng đề cập đến vấn đề “đường link bị hỏng” và khả năng tương thích (portablity) của site với nhiều nền (platforms) và trình duyệt (browser) khác nhau. Web site NetMechanic được giới thiệu là nơi kiểm tra những những cú pháp không đúng và các đường link bị hỏng: http://www.netmechanic.com/ Bài báo cũng cho biết: hình ảnh chỉ nên khoảng 72 dpi (dots per inch). Hình ảnh với độ phân giải cao hơn sẽ (a) lãng phí thời gian, và (b) mất nhiều thời gian download hơn so với hình ảnh có độ phân giải thấp hơn. Bạn có thể giảm độ phân giải của hình ảnh bằng một phần mềm đơn giản có sẵn trên máy tính. Bài tập và câu hỏi trọng tâm Bài tập thực hành Sinh viên tự thhiết kế một trang web tỉnh, với nội dung chủ yếu là giới thiệu các dịch vụ có ở 1 thư viện. Trong bải tập này sinh viên phải hoàn thành một số vấn đề sau: - Dùng thẻ HTML mô tả website - Định dạng đày đủ về font chử, kich cở, table.. bằng thẻ HTML - Đưa nội dung vào và format <P> canh chỉnh lề. Trang 60
CHƯƠNG 7: THỰC HÀNH THIẾT KẾ SITE 1. Tóm tắt chương Chương 7 sẽ là chương chủ yếu là thực hành thiết kế site thực sự thong qua việc sử dụng công cụ tạo web như Dreamweaver CS4, công cụ phát triển chính của web. Các bước cài đặt phần mềm nội dung bài học không đề cập, sinh viên tự tìm hiểu, chỉ hướng dẫn sinh viên sử dụng công cụ để có thể thiết kế web mẫu. qua chương này sinh viên sẽ nắm bắt được 1 số kiến thức sau: - Phát thảo toàn bộ quá trình phác thảo, thiết kế một Web site và xác định những giai đoạn chính. - Trình bày và giải thích những phương pháp chọn nội dung tạo nên sự thành công của một site. - Thảo luận hiệu ứng hình ảnh, đa phương tiện (multimedia), và hoạt hình (animation) có thể chèn vào site. - Sử dụng công cụ tạo web cơ bản Dreamweaver để tạo một trang Web. 2. Thiết Kế Site 2.1. Mục đích tạo Site Trong nội dung bài học này chúng ta sẽ có dịp cũng cố lại một số nội dung kiến thức đã được học trong 3 chương 1, 2 và 3 vì đây là những kiến thức rất quan trọng. Khi làm việc trên một website, người thiết kế phải luôn xác định được mục đích tạo ra site. Nếu bạn không hiểu ý nghĩa của site, hãy đọc chapter 3 trong sách giáo trình. Bài viết 1. Xác định và viết ra mục đích và mục tiêu của Web site chính của bạn. Mục đích của Web site cần phải được trình bày rõ ở ‘home page’ (trang chủ). Nếu không thấy được mục đích của một Web site, người truy cập có thể sẽ không có hứng thú đề khám phá web site bạn tạo. 2.2. Xây Dựng Nội Dung của Web site Ở module sau, bạn sẽ được tìm hiểu chi tiết hơn về hình ảnh, còn trong phạm vi bài học này, chỉ xem xét hình ảnh sẽ hổ trợ site như thế nào. Nếu tạo một site cho thư viện, bạn nên đưa vào site ảnh chụp tòa nhà thư viện - tất nhiên với điều kiện là ảnh này phải đẹp Trang 61
và bắt mắt. Một số hình ảnh về các thiết bị máy tính được trang bị trong thư viện có thể sẽ thu hút những sinh viên quan tâm đến công nghệ thông tin. Tuy nhiên, để tìm được những bức ảnh hữu ích về thư viện không phải dễ. Bạn cũng có thể cân nhắc đưa vào Web site ảnh ‘chân dung’ (dạng hình thẻ dán trên passport) của ban lãnh đạo thư viện để ‘khách hàng’ có thể biết mặt họ. Bây giờ bạn hãy tiến hành thu thập một số hình ảnh để đưa lên site. Trong trường hợp những bức ảnh bạn tìm thấy đều đã được đăng ký bản quyền, bạn có thể tự chụp một số bức ảnh theo ý muốn với một máy ảnh kỹ thuật số, nhưng bạn nên lưu ý một điều là nên tuyển chọn ra những bức ảnh có chất lượng. Đối với một Web site thư viện, chúng ta không cần tận dụng nhiều hiệu ứng multimedia và hoạt hình (animation). Thường hoạt hình chỉ càng làm mất thêm thời gian download trang! Trong sách giáo trình có đề cập đến các chương trình hổ trợ ‘plug-in’ (chương trình nhỏ bổ sung thêm tính năng cho một trình duyệt). Có những lúc bạn muốn sử dụng một ứng dụng không theo chuẩn trên trình duyệt như Firefox hay Explorer. Để có thể sử dụng ứng dụng, người dùng cuối cùng phải download về máy một ‘add-in’ (chương trình bổ sung được thiết kế để cùng hoạt động và mở rộng các khả năng của một ứng dụng) và vận hành bằng trình duyệt. Theo chỉ dẫn trong sách giáo trình, để download các add-in về máy, bạn chỉ cần cung cấp một đường liên kết tới web site. Ví dụ thường gặp là đối với các site có nhiều tài liệu dạng PDF, thường sẽ có một đường liên kết đến site download để tải về chương trình Adobe Reader (dùng để đọc và hiển thị tài liệu dạng PDF). 2.3. Thư mục (Directory) Sau khi đã có ý tưởng về các phần tử nội dung của site bạn cần lên kế hoạch về nơi lưu trữ tất cả các tập tin (vị trí thư mục). Cuối cùng (nếu bạn vẫn chưa định vị thư mục) bạn sẽ upload tất cả các tập tin (HTML, hình ảnh…) lên một site từ xa miễn sao từ đây các site khác có thể truy cập trực tuyến đến site của bạn. Đối với những site nhỏ, bạn có thể lưu tất cả các tập tin trong một thư mục duy nhất. Tên tập tin trong thư mục sẽ là phần cuối của địa chỉ URL miễn là bạn có đưa vào tập tin tên index.html hay index.htm. Đối với những site lớn và phức tạp hơn, bạn nên tạo nhiều thư mục khác nhau để có thể dễ quản lý. Ví dụ, lưu tất cả file hình ảnh vào một thư mục riêng - đặt tên là ‘hình ảnh’ Trang 62
(hay ‘image’). Như vậy thư mục sẽ phải được đưa vào tất cả các liên kết điểm neo (anchor links) để tìm hình ảnh. Trường hợp bạn lưu tất cả tập tin trong một thư mục duy nhất, bạn có thể sử dụng câu lệnh sau để liên kết đến một tập tin hình ảnh có tên library.jpg: <img src=”library.jpg”> Trường hợp bạn tổ chức tất cả hình ảnh vào một tập tin riêng tên ‘hình ảnh’ (‘image’), bạn cần phải thêm tên thư mục vào câu lệnh <img src=”images/library.jpg”> 2.4. Chức Năng Tìm kiếm Thêm chức năng tìm kiếm là một thao tác rất khó và phức tạp và trong học phần này chúng ta không đề cập đến. Tuy nhiên, bạn có thể sử dụng công cụ tìm kiếm Google nếu bạn muốn cài đặt chức năng tìm kiếm cho site không vì mục đích lợi nhuận. Vào Google Web site: http://www.google.co.nz/options/index.html và tìm thanh công cụ ‘Toolbar’ Hãy thảo luận về các phần tử nội dung site sau và cho biết giá trị của mỗi phần tử đối với Web site: văn bản (text), hình ảnh (photograph), hoạt hình (animation), video, audio, và multimedia. 3. Sử dụng Dreamweaver để tạo Web site Trước tiến, cũng xin nói sơ lược 1 chút về tính năng mà công cụ Dreamweaver CS4 mang lại sự vượt trội so với các công cụ khác như sau: Trang 63
Xem trực tiếp Design your web pages under real-world browser conditions with the new Live View in Adobe® Dreamweaver® CS4 — while still retaining direct access to the code. Changes to the code are instantly reflected in the rendered display. Gợi ý mã nguồn cho Ajax và JavaScript frameworks Viết mã JavaScript hiệu quả hơn với hỗ trợ cải tiến cho các đối tượng nhân JavaScript cùng các kiểu dữ liệu thô. Mở rộng chức năng viết mã của Dreamweaver CS4 bằng cách tích hợp các JavaScript framework phổ biến, bao gồm jQuery, Prototype, và Spry. Trình định hướng tập tin và mã liên quan Nhấn vào bất kì tập tin hiển thị trong thanh Related Files để xem cả mã nguồn ở chế độ xem mã Code cùng trang mẹ trong chế độ thiết kế Design view. Tính năng định hướng mã mới này hiển thị cho bạn mã nguồn CSS tác động đến lựa chọn hiện thời cũng như cho phép bạn truy xuất mã này nhanh chóng. Chức năng biên tập theo ngữ cảnh Adobe InContext Editing Thiết kế các trang trong Dreamweaver để người dùng cuối có thể chỉnh sửa trang web của mình mà không cần đến sự trợ giúp từ bạn hay các phần mềm khác thông qua dịch vụ chỉnh sửa theo ngữ cảnh trực tuyến InContext Editing. Là một nhà thiết kế Dreamweaver, bạn có thể giới hạn thay đổi cho một số vùng nhất định trong trang, các vùng tách biệt hay thậm chí các tùy chọn định dạng nữa. Thực hành CSS tốt nhất Thực hành CSS mà không phải viết bất kì đòng mã nào. Tạo các qui ước CSS mới trong bảng thuộc tính Properties, và xem các giải thích rõ ràng và đơn giản về tác dụng của mỗi thuộc tính trên phần định dạng. Riêng đối với phần CSS định dạng, sinh viên sẽ được học kỹ ở chương 9 (sử dụng CSS và font nghệ thuật vào cho web) Giao diện người dùng mới Làm việc nhanh hơn và thông minh hơn qua các thành phần Adobe Creative Suite® 4 với một thiết kế giao diện người dùng chia sẻ. Chuyển đổi qua lại nhanh chóng giữa các môi trường làm việc với trình chuyển đổi không gian làm việc. Các tập dữ liệu HTML Tích hợp sức mạnh của dữ liệu động vào trang web mà không phải trải qua quá trình tìm Trang 64
hiểu và làm chủ các cơ sở dữ liệu hay viết mã XML. Các tập dữ liệu Spry Data Sets nhận diện nội dung trong một bảng HTML đơn giản dưới dạng một nguồn dữ liệu tương tác. Các đối tượng thông minh Adobe Photoshop Chèn bất kì tài liệu Adobe Photoshop® PSD nào vào Dreamweaver để tạo một ảnh đối tượng thông minh gắn kết chặt chẽ với tập tin nguồn. Tạo thay đổi trên ảnh nguồn, và cập nhật ảnh trong Dreamweaver mà không phải mở Photoshop. Tích hợp với Subversion Cập nhật trang web và thực hiện các thay đổi trực tiếp từ trong Dreamweaver. Dreamweaver CS4 tích hợp với phần mềm Subversion®, một hệ thống kiểm soát phiên bản nguồn mở, để mang lại cho bạn trải nghiệm kiểm tra tự động hơn Hỗ trợ xử lý Adobe AIR Tạo HTML và JavaScript dựa trên các ứng dụng Adobe AIR™ trực tiếp từ trong Dreamweaver. Xem trước các ứng dụng AIR mà không phải rời Dreamweaver. Chuẩn bị sẵn sàng ứng dụng Adobe AIR của bạn để triển khai với các tính năng đóng gói và kí mã AIR. Sử dụng công cụ Quản lý site Dreamweaver Để Dreamweaver có thể kiểm soát tất cả các liên kết giữa các trang Web và các file phụ thuộc, cần phải xác định một folder (thư mục) trên đĩa cứng làm folder gốc cục bộ (local root folder) và save tất cả tập tin sẽ đưa lên site vào folder này. Folder gốc cục bộ phải chứa tất cả các loại tập tin bạn dự định đưa vào site: tập tin HTML, tập tin hình ảnh, Cascading Style Sheets (sẽ được mô tả chi tiết trong module kế tiếp), Templates và các tập tin phụ thuộc khác. Để có thể quản lý site hiệu quả hơn, bạn hãy tạo thêm các folder con (subfolder) để lưu các loại tập tin kể trên. Bạn không cần phải tạo Template và các folder Library, Dreamweaver sẽ tự động tạo cho bạn khi một template hay một tập tin về thư viện (library file) được tạo và save lại. Dreamweaver tạo các Templates và folder Library ngay trong folder gốc cục bộ, nơi giữ cho template và các tập tin về thư viện hoạt động đúng cách. Tên tập tin và folder chỉ nên có một từ, viết thường, gồm các ký tự chữ và số và nên bắt đầu bằng một chữ cái. Ký tự đặc biệt duy nhất được chấp nhận đặt tên file và folder là ký tự gạch dưới (_). Trang 65
Sau khi đã xác định site, Dreamweaver sẽ tiếp tục tạo các trang trong site và save vào folder gốc cục bộ. Sau đó, tất cả các nội dung lưu trong folder gốc cục bộ được upload lên Web server. Folder gốc cục bộ và folder trên server cần phải có cùng cấu trúc. Khi upload site, Dreamweaver tự động sao chép cấu trúc file của folder gốc cục bộ vào server. Lưu ý, không nên chọn folder chứa ứng dụng Dreamweaver làm folder gốc cục bộ vì nó còn chứa các file chương trình khác. Của sổ chương trình quản lý site gồm các công cụ sau: Connect/Disconnect (đi kèm với FTP) kết nối đến hay ngưng kết nối từ một site từ xa. Mặc định, Dreamweaver chọn tự động ngưng kết nối từ một site từ xa nếu site này không hoạt động trên 30 phút (chỉ đối với giao thức FTP). Refresh làm mới các danh sách thư mục cục bộ và thư mục từ xa. Click vào nút này để làm mới các danh sách thư mục nếu bạn đã không chọn chế độ Refresh Local File List Automatically hay Refresh Remote File List Automatically trong hộp thoại Site Definition. Ví dụ, nếu bạn lắp đặt một ổ đĩa (drive) chứa một site từ xa sau khi đã mở cửa sổ Site, để hiển thị danh sách thư mục site từ xa, bạn click vào nút Refresh. Get File(s) copy những file được chọn từ site từ xa vào site cục bộ của bạn (nếu site của bạn đã có bản copy của tập tin, bạn cứ ghi chồng lên). Put File(s) copy những tập tin được chọn từ site cục bộ đến site từ xa. Tạo một Trang mới Có 4 cách tạo một trang mới bằng Dreamweaver: 1) Tại trình đơn (menu) File, chọn New. 2) Sử dụng bàn phím, nhập vào Command N (đối với máy tính Mac sử dụng hệ điều hành có giao diện đồ hoạ mô phỏng theo một hình ảnh quen thuộc là Bàn Làm Việc (Desktop ) hoặc Control N (đối với máy tính PC) 3) Trong menu File, chọn New from Template... (Lưu ý: chỉ hoạt động khi bạn xác định đúng template trong Dreamweaver) 4) Mở một trang đã có sẵn và save lại lần nữa với một tên mới (File > Save As...) Trang 66
LƯU Ý: Khi Dreamweaver tạo một trang , mặc định tag đầu tiên là <html>. Chúng ta nên đổi thành <!DOCTYPE HTML 3.2 lang=\"EN\"> nếu bạn muốn sử dụng tiếng Anh. Tìm mã ngôn ngữ thích hợp cho tiếng Việt. Tag này thông báo cho trình duyệt biết trang được mã hoá bằng ngôn ngữ HTML phiên bản 3.2 và ngôn ngữ mặc định (native language) là Anh ngữ. Làm Việc Với Hình Ảnh Khi bạn chèn một hình ảnh vào một tài liệu Dreamweaver, Dreamweaver sẽ tự động tạo tham chiếu đến file trong mã nguồn HTML. Để đảm bảo tính chính xác của tham chiếu này, hình ảnh bắt buộc phải nằm trong site hiện hành. Nếu không có hình ảnh trên site hiện hành, Dreamweaver sẽ hỏi bạn có muốn copy file vào folder gốc hay không. Để chèn hình: 1. Thực hiện một trong các thao tác dưới đây: o Định vị điểm chèn ngay nơi bạn muốn hiển thị hình ảnh trong của sổ Document, chọn Insert > Image hoặc click vào nút Insert Image trong Common category trong Objects Palette. o Đặt con trỏ tại điểm chèn nơi bạn muốn hình ảnh sẽ hiển thị, nhấn Control+Alt+I (trong Windows) hoặc Command+Option+I (trong Macintosh). o Drag (Kéo) nút Insert Image từ Objects Palette đến vị trí mong muốn trong cửa sổ Document. o Drag một hình ảnh từ Assets panel đến vị trí mong muốn trên cửa sổ Document; sau đó chuyển qua Bước 3. o Drag một hình ảnh từ Site Window đến vị trí mong muốn trên cửa sổ o Drag một hình ảnh từ desktop đến vị trí mong muốn trên của sổ Document; sau đó chuyển đến Bước 3. 2. Khi xuất hiện hộp thoại, click Browse để chọn một file, hoặc nhập vào đường dẫn (path) đến file hình ảnh. Nếu bạn đang làm việc trên một tài liệu chưa được save, Dreamweaver sẽ tạo một file:// tham chiếu đến file hình ảnh. Đến khi bạn save tài liệu vào nơi nào đó trên site, Dreamweaver sẽ tự động chuyển đổi tham chiếu thành đường dẫn tương đối đến tài liệu. 3. Thiết lập các đặc tính hình ảnh trong Property Inspector. Trang 67
Thiết Lập các Đặc Tính cho Trang Tựa đề trang (title), hình và màu nền, màu văn bản và các liên kết, và lề trang (margin) là những đặc tính cơ bản của bất kỳ tài liệu HTML nào. Tựa đề trang cho biết tên của trang. Ảnh và màu nền tạo nên ‘diện mạo’ của tài liệu. Màu văn bản và màu các liên kết giúp người truy cập site phân biệt giữa văn bản thông thường với siêu văn bản và biết được những liên kết đã ghé qua (visited site) và những liên kết chưa ghé qua. Tựa Đề Trang Tựa đề trang HTML giúp người truy cập site theo dõi trang khi họ duyệt trang. Tựa đề trang còn giúp nhận diện trang trong danh sách History và Bookmark ở trình duyệt của người duyệt. Nếu bạn không đặt tựa đề cho trang, trang này sẽ xuất hiện trên cửa sổ trình duyệt, trong các danh sách bookmark và history với tên Untitled Document. Lưu ý là đặt tựa đề cho trang không giống như đặt tên tập tin cho tài liệu (bằng cách save lại). Để định vị tất cả các tài liệu khuyết tựa đề (untitled document) trong site, bạn dùng lệnh Site > Reports. Để thay đổi hoặc chèn tựa đề trang: 1. Thực hiện một trong các cách dưới đây: o Chọn Modify > Page Properties. o Click vào bất kỳ khoảng trắng nào trên trang để cho biết là bạn không chọn đối tượng nào. Sau đó, chọn Page Properties trong trình đơn ngữ cảnh (context menu) bằng cách click chuột phải (trong Windows) hoặc Control- clicking (trong Macintosh) vào Design view trên cửa sổ Document. o Chọn View > Head Content, click vào nút Title khi nút này xuất hiện. Tiếp đó, sử dụng Property Inspector. o Chọn View > Toolbar. 2. Nhập tựa đề trang vào text box Title. 3. Click OK nếu bạn đang soạn thảo tựa đề trong hộp thoại Page Properties . Tựa đề xuất hiện trên thanh tiêu đề của của sổ Document (và trên thanh công cụ, nếu bạn có hiển thị thanh công cụ trên màn hình). Tên file của trang và folder chứa file sẽ được save lại và hiển thị trong cặp ngoặc đơn cạnh bên tựa đề trên thanh tiêu đề. Dấu hoa thị cho biết tài liệu có những thay đổi chưa được save lại. Ảnh Nền (Background Image) hay Màu trang Trang 68
Để định nghĩa một hình ảnh hay màu nền của trang, chúng ta sử dụng hộp thoại Page Properties. Nếu bạn sử dụng đồng thời ảnh nền và màu nền, thì màu sẽ được hiển thị còn ảnh nền phải đợi download về và sau đó ảnh được hiển thị chồng lên màu nền. Nếu ảnh nền có chứa các pixel trong suốt thì màu nền sẽ được hiển thị xuyên qua ảnh. Để định nghĩa ảnh nền, màu nền: Chọn Modify > Page Properties, hoặc chọn Page Properties trong trình đơn ngữ cảnh trong Design view của cửa sổ Document. Để thiết lập ảnh nền, thực hiện một trong những thao tác sau: o click nút Browse, tìm và chọn ảnh bạn muốn làm ảnh nền o nhập đường dẫn đến ảnh background vào hộp Background Image. Nếu kích cỡ ảnh nền nhỏ thì Dreamweaver sẽ tự động xếp những ảnh nền này liền kề nhau (dạng ngói tile) để lắp đầy màn hình của sổ. Để thiết lập màu nền, click vào hộp màu Background color và chọn một màu bạn muốn trong số các màu có sẵn. Màu Văn Bản (text), Màu Các Liên Kết và Màu các Liên Kết đã Ghé Qua Xác định màu mặc định cho văn bản thường, các liên kết, và những liên kết đã ghé qua (visited link) trong hộp thoại Page Properties, hoặc chọn một phương thức màu có sẵn (preset color scheme) để định nghĩa màu nền và màu văn bản cho trang. Để định nghĩa màu mặc định cho văn bản, thực hiện một trong những thao tác sau: Chọn Modify > Page Properties, sau đó chọn màu cho Text Color (màu văn bản), Link Color (màu liên kết), Visited Link (màu các liên kết đã ghé qua), và Active Link (màu liên kết hoạt động - tức liên kết đang được nhấp) từ các tùy chọn. Chọn Commands > Set Color Scheme, sau đó chọn màu nền và màu cho văn bản và các liên kết. Hộp mẫu (sample box) cho bạn biết phương thức màu bạn chọn được hiển thị trên trình duyệt như thế nào . Trang 69
Lưu ý: Trường hợp bạn kết hợp màu nền và màu văn bản với độ tương phản thấp thì những người mù màu khó có thể nhìn thấy được. Vì vậy, đối với đối tượng người xem này, tốt nhất bạn nên cho hiển thị hoặc in trang dưới chế độ dải màu sáng (gray-scale). Màu của các Liên kết Hoạt Động (liên kết đang được nhấp) Màu của liên kết hoạt động là màu thay đổi của một liên kết khi nó được nhấp chọn. Rất nhiều trình duyệt không sử dụng màu liên kết hoạt động, đây là những trình duyệt khuyết (handicap browser). Vì vậy, chúng ta không nên thiết lập màu liên kết hoạt động. Lưu ý: Nếu bạn quyết định sẽ cài đặt màu cho liên kết được chấp chọn, nên nhớ rằng màu này sẽ không được hiển thị theo ý muốn trong một số trình duyệt Web khi chúng không có màu bạn chỉ định. Lề Trang (Margin) Left Margin (Lề trái) và Top Margin (Lề trên) dùng để định kích cỡ lề của trang trong tag body đối với trình duyệt Microsoft Internet Explorer. Netscape Navigator không bao hàm những giá trị này thay vào đó là Margin Width (chiều rộng của lề) và Margin Height (chiều cao của lề). Margin Width và Margin Height dùng để định kích cỡ các lề của trang trong tag body đối với trình duyệt Netscape Navigator. Trình duyệt Internet Explorer không sử dụng những giá trị này mà sử dụng Left Margin và Top Margin. Để có được kết quả trình duyệt chéo tốt nhất, bạn nên cung cấp giá trị lề trang của cả hai trình duyệt trên không nên chỉ cung cấp giá trị lề trang của một trình duyệt riêng lẻ. Tức là nhập vào cả 4 giá trị lề trang thay vì chỉ 2 giá trị. Nếu bạn không muốn hiển thị lề trang (trong cả trình duyệt Microsoft Internet Explorer và Netscape Navigator), chỉ cần cài đặt cả 4 giá trị ở mức 0. thì Dreamweaver sẽ không hiển thị lề trang trong cửa sổ Document. Định dạng văn bản Định dạng văn bản trong Dreamweaver cũng giống như sử dụng chương trình xử lý văn bản (word processor). Muốn thay đổi font chữ, cỡ chữ, màu, và canh lề văn bản: chọn đoạn văn bản cần điều chỉnh, sử dụng menu Text hoặc Property Inspector. Bạn cũng có thể kết hợp một số tag HTML chuẩn để thiết lập nên một kiểu định dạng (style) riêng, gọi là kiểu HTML (HTML style). Trang 70
Ví dụ, bạn có thể tự tay tạo nên định dạng HTML bằng cách kết hợp các tag và thuộc tính, sau đó save định dạng này dưới dạng một HTML style, nó sẽ được lưu trong panel HTML Styles. Bất cứ lúc nào bạn muốn định dạng theo style tương tự, bạn chỉ cần chọn style đã được save trong panel HTML Styles. Các HTML style được hầu hết các trình duyệt web hổ trợ vì thế giúp bạn tiết kiệm thời gian định dạng văn bản một cách thủ công. Một loại style khác là CSS (CSS viết tắt từ Cascading Style Sheet (bảng kiểu chồng lớp), giúp bạn định dạng trang và văn bản một cách thuận lợi nhờ có tính năng cập nhật tự động. Bạn có thể lưu trữ các CSS style trực tiếp trong tài liệu hoặc trong một bảng style ngoài (external style sheet) để tăng cường tính năng và tính linh động. Khi bạn gán một bảng style ngoài cho một số trang web, tự động tất cả các trang đều tiến hành những điều chỉnh theo bảng style ngoài này. Các bảng style CSS có sẵn trong panel CSS Style. Định dạng HTML được thiết lập một cách thủ công và các style HTML đều phải sử dụng đến các thẻ HTML chuẩn (như b, font và code) được hổ trợ bởi hầu hết các trình duyệt Web. Các style CSS được dùng để định dạng tất cả các văn bản trong cùng một lớp (class) (các thành phần HTML được tổ chức thành các hạng mục được gọi là lớp) hoặc định nghĩa lại định dạng của một thẻ nào (ví dụ như h1, h2, p, hoặc li). CSS chỉ được những trình duyệt sau hổ trợ: Netscape Navigator 4.0 và những phiên bản sau, và Microsoft Internet Explorer 4.0 và những phiên bản sau. Style CSS cũng không được các trình duyệt khuyết hổ trợ.(CSS Style is not handicap browser friendly) Thêm Văn Bản Để thêm văn bản vào tài liệu, bạn thực hiện một trong những thao tác sau: 1. Di chuyển con trỏ đến vị trí bạn muốn bố trí văn bản, và nhập văn bản trực tiếp trên cửa sổ Document. 2. Sử dụng thao tác copy và dán để copy văn bản từ một ứng dụng khác vào Dreamweaver, định vị điểm chèn tại Design view của của sổ Document, và chọn Edit > Paste. (Chú ý: Dreamweaver không giữ lại định dạng văn bản của một ứng dụng khác nhưng vẫn giữ ngắt dòng.) Thiết lập, Thay đổi Style Văn bản: 1. Chọn đoạn văn bản. Nếu bạn không chọn đoạn văn bản, thì những thay đổi bạn ấn định sẽ được hiểu là áp dụng cho đoạn văn bản kế tiếp. 2. Chọn một trong những cách sau: Trang 71
o Để đổi font chữ, chọn một phối hợp font (font combination) trong Property Inspector hoặc trong menu con (submenu) Text > Font. o Để đổi kiểu font (font style), trong Property Inspector click chọn Bold hoặc Italic, hoặc chọn một kiểu font chữ (Bold (in đậm), Italic (in nghiêng), Underline (gạch dưới), v.v.) trong menu con Text > Style. o Để đổi kích cỡ font chữ, chọn kích cỡ bạn muốn (từ 1 đến 7) trong Property Inspector hoặc trong menu con Text > Size. o Để tăng hoặc giảm kích cỡ một đoạn văn bản nào đó, chọn đoạn văn bản, chọn một kích cỡ tương đối (+ hoặc -1 đến + 4 hoặc -3) trong Property Inspector hoặc trong menu con Text > Size. Để đổi màu văn bản 1. Chọn văn bản cần đổi màu. 2. Chọn một trong số các tùy chọn dưới đây: o Chọn một màu trong bảng màu an toàn cho trình duyệt (browser-safe colors) bằng cách click vào bảng color picker trong Property Inspector. o Chọn Text > Color, xuất hiện hộp thoại system color picker. Chọn một màu, click OK. o Nhập trực tiếp tên màu, tức số hex (thập lục phân) định nghĩa màu, vào trường Property Inspector. o Để định nghĩa màu văn bản mặc định, dùng lệnh Modify > Page Properties. Để trả văn bản về màu mặc định 1. Tại Property Inspector, click vào hộp màu sắc (color box) để mở bảng màu an toàn cho trình duyệt. 2. Click vào nút Strike-through (nút vuông màu trắng có một đường đỏ gạch ngang, nằm ở góc phải phía trên) hoặc highlight và xoá (delete) mã HTML định nghĩa màu. Một số phím tắt (short-cuts) định dạng văn bản Trang 72
Tùy chọn định dạng Keystroke trên máy Mac Keystroke trên PC Bold (In đậm) Italic (Chữ nghiêng) Command B Control B Indent (Thụt lùi) Outdent Command I Control I Command Option ] Control Alt ] Command Option [ Control Alt [ Kiểm tra Thành Quả Xem trang web trên Trình Duyệt Bạn cần phải kiểm tra lại quá trình thiết kế và tạo Web bằng cách xem thử các trang đã tạo trên trình duyệt. Qua đó, bạn có thể kịp thời phát hiện ra những sai sót để tránh lặp lại trong những lần sau. Bạn có thể xem các tài liệu trong trình duyệt bạn muốn sử dụng để hiển thị các trang (target browser) bất cứ lúc nào mà không cần phải save tài liệu trước. Tất cả các chức năng liên quan đến trình duyệt đều hoạt động như: hoạt động của JavaScript, các liên kết tuyệt đối và tương đối đến tài liệu, ActiveX control (một công nghệ hướng đối tượng của Microsoft cho phép các ứng dụng có thể liên kết thực hiện công việc với các ứng dụng khác), và các Netscape plugin, miễn là bạn đã cài đặt các plug-in hoặc ActiveX theo yêu cầu. Nội dung được liên kết với đường dẫn tương đối đến thư mục gốc (root-relative path) sẽ không được hiển thị khi bạn xem tài liệu trên trình duyệt cục bộ, bởi vì cả trình duyệt cũng như server không thể nhận ra các gốc (root) của site. Để xem nội dung được liên kết với các đường dẫn tương đối đến thư mục gốc, bạn phải đưa file vào một server từ xa và xem file trên server này. Có đến 20 trình duyệt trong mục Preview trong menu Browser cho bạn lựa chọn để xem kết quả. Dưới đây là một số trình duyệt bạn nên chọn: IE 3.0 hoặc 4.0; Netscape 3.0 và 4.0, hay ít nhất là những trình duyệt chỉ hiện thị văn bản như Lynx. Để xem tài liệu trong trình duyệt, thực hiện một trong những thao tác sau: Chọn File > Preview in Browser, sau đó lựa chọn một trình duyệt để hiển thị tài liệu trong danh sách. Trang 73
(LƯU Ý: Nếu bạn vẫn chưa chọn được một trình duyệt, chọn Edit > Preferences > Preview in Browser để chọn một trình duyệt bạn muốn) Nhấn phím F12 để hiển thị tài liệu hiện hành trong trình duyệt chính (primary browser). Nhấn tổ hợp phím Control+F12 (đối với Windows) hoặc Command+F12 (đối với Macintosh) để hiển thị tài liệu hiện hành trong trình duyệt thứ cấp (secondary browser). Để thay đổi hay ấn định trình duyệt thứ cấp: 1. Chọn File > Preview in Browser > Edit Browser List or Edit > Preferences và chọn tab Preview in Browser. 2. Thiết lập chế độ xem theo ý muốn (previewing preferences). Kiểm tra tính tương thích của trình duyệt Dreamweaver cho phép bạn xây dựng nên các trang Web gồm các phần tử được hổ trợ bởi tất cả các trình duyệt (ví dụ: hình ảnh và đoạn văn bản), bên cạnh đó có những phần tử chỉ được một số trình duyệt mới hổ trợ (ví dụ: các style và các layer (lớp: một tờ trên màn hình, trên đó, bạn có thể đặt vào văn bản, các đồ hình sao cho chúng độc lập với bất kỳ văn bản hoặc đồ hình nào trên các tờ khác, lớp này có thể là đục hoặc trong suốt). Tính năng Check Target Browsers kiểm tra ngôn ngữ HTML trong các tài liệu xem có bất kỳ tag hay thuộc tính nào bạn đánh dấu vào tài liệu mà không được trình duyệt đích (target browser) – trình duyệt bạn muốn sử dụng để hiển thị các trang – hổ trợ. Việc kiểm tra này không gây bất cứ thay đổi gì đối với tài liệu. Tính năng Check Target Browsers dựa trên các file văn bản lược tả trình duyệt (browser profiles) để xác định tag nào được trình duyệt nào hổ trợ. Dreamweaver còn có sẵn các file lược tả về phiên bản Netscape Navigator 2.0, 3.0, và 4.0, và về phiên bản Microsoft Internet Explorer 2.0, 3.0, 4.0, và 5.0. Bạn có thể chạy tính năng kiểm tra target browser đối với một tài liệu, một thư mục (directory), hay toàn bộ site. Lưu ý loại kiểm tra này không bao gồm kiểm tra các kịch bản (script) của site. Để khởi chạy tính năng kiểm tra trình duyệt mục tiêu: 1. Chọn một trong số các tuỳ chọn dưới đây : Trang 74
o Để kiểm tra tài liệu hiện hành, hãy save file lại. Chỉ bản save cuối cùng của file mới được kiểm tra và tất nhiên không thể kiểm tra bất kỳ thay đổi nào chưa được save. Để kiểm tra thư mục hay site, chọn Window > Site Files để mở cửa sổ Site FTP; sau đó chọn một folder trong thư mục cục bộ (local directory). Tất cả các tập tin HTML trong folder này cũng như các folder được lưu trữ trong trong folder này đều sẽ được kiểm tra. Lưu ý: kiểm tra target browser chỉ có thể chỉ tiến hành đối với các tập tin cục bộ. 2. Chọn File > Check Target Browsers. Nếu bạn vẫn chưa chọn trình duyệt chính, đến đây bạn sẽ được yêu cầu chọn. 3. Chọn target browser bạn muốn sử dụng để chạy thử site của bạn trong danh sách các trình duyệt được hiển thị 4. Click vào Do Check, báo cáo về target browser (target browser report) sẽ được mở trong trình duyệt chính (lúc này trình duyệt chính sẽ được khởi động nếu bạn vẫn chưa mở). 5. Nếu bạn muốn save report để sử dụng trong tương lai, từ trình duyệt chọn File > Save. Lưu ý: Vì target browser report chỉ là file tạm thời nên nếu bạn không save lại trước khi chuyển đến duyệt một site khác thì nó sẽ bị mất đi. Kiểm tra các đường link Sửa lại những liên kết bị hỏng (những liên kết đến đường dẫn không còn giá trị) trên một site lớn là một công việc mất nhiều thời gian và công sức. Vì những site lớn thường chứa nhiều liên kết đến các tài liệu bên trong và bên ngoài, thêm vào đó các liên kết này lại thường hay thay đổi. Các file ‘mồ côi’ (orphaned file) (các file vẫn tồn tại trên site nhưng không được liên kết đến bất kỳ file nào trong site) cũng là một vấn đề vì chúng chiếm chỗ trong đĩa và gây nhầm lẫn cho những thành viên khác cùng làm việc trên site. Bạn có thể sử dụng tính năng Check Links để tìm kiếm những liên kết bị hỏng (không hoạt động) và những tập tin không được tham chiếu đến trong một file đang được mở, một phần của site cục bộ hay toàn bộ site cục bộ. Dreamweaver chỉ có thể kiểm tra các liên kết đến các tài liệu trong site. Dreamweaver soạn nên một danh sách các liên kết bên ngoài đặt trong một (hoặc nhiều) tài liệu được chọn nhưng không kiểm tra chúng. Khi Dreamweaver hoàn thành kiểm tra các liên kết trong một file, nó mở hộp thoại Link Checker, trong đó hiển thị danh sách các liên kết hỏng, các liên kết bên ngoài ( những liên kết nằm ngoài site vượt tầm kiểm soát của Dreamweaver), và các tập tin “mồ côi”. Trang 75
Để kiểm tra các liên kết trong một tài liệu hiện hành: 1. Save tập tin vào một nơi thuận tiện trong site cục bộ. 2. Chọn File > Check Links. Để kiểm tra các liên kết trong một phần của site cục bộ: 1. Chọn Window > Site Files để mở cửa sổ Site Manager. 2. Chọn một site trong trình đơn bật lên (pop-up menu) Sites. 3. Trong màn hình Local folder, highlight các tập tin hay folder cần kiểm tra. 4. Vận hành kiểm tra bằng một trong 2 cách dưới đây: o Right-click (đối với Windows) hoặc Control-click (đối với Macintosh) vào một trong những file đã chọn và chọn Check Links > Selected o Chọn File > Check Links. 5. Chọn một loại báo cáo liên kết (link report) trong trình đơn bật lên Show, gồm 3 lựa chọn: Broken Links (liên kết hỏng), External Links (liên kết ngoài), và Orphaned Files (các tập tin mồ côi). Lưu ý: chỉ có thể kiểm tra để phát hiện ra các Orphaned Files khi bạn tiến hành kiểm tra tất cả liên kết trong toàn bộ site. 6. Một danh sách các file tương thích với loại báo cáo bạn chọn xuất hiện trong hộp thoại Link Checker. Để kiểm tra các liên kết trong toàn bộ site: 1. Chọn Site > Check Links Sitewide. Xuất hiện hộp thoại Link Checker. 2. Chọn một loại báo cáo liên kết trong trình đơn bật lên Show gồm báo cáo về: Broken Links, External Links, và Orphaned Files. 3. Một danh sách các file tương thích với loại báo cáo bạn chọn sẽ xuất hiện trong hộp thoại Link Checker. Lưu ý: Nếu chọn loại báo cáo về Orphaned Files, bạn có thể trực tiếp xoá các file mồ côi trong hộp thoại Link Checker bằng cách click chọn một file trong danh sách và nhấn phím Delete. Kiểm tra lỗi chính tả Sử dụng lệnh Check Spelling trong trình đơn Text để kiểm tra chính tả trong tài liệu hiện hành. Lệnh Check Spelling không tiến hành kiểm tra các tag và các giá trị thuộc tính HTML. Mặc định, việc kiểm tra chính tả dựa trên chính tả trong từ điển cách viết U.S. English. Để thay đổi từ điển, chọn Edit > Preferences > General và lựa chọn một từ Trang 76
điển khác trong trình đơn bật lên. Bạn có thể download từ điển cho các ngôn ngữ khác từ Dreamweaver Support Center (Trung tâm Hổ trợ Dreamweaver). Bài tập Vậy là bạn bạn đã có thể tạo ra một (hay nhiều) trang mới với công cụ Dreamweaver, cũng giống như hay thậm chí có chất lượng hơn các trang bạn tạo bằng ngôn ngữ HTML thô dưới dạng văn bản. Trong tiết học tuần này, bạn sẽ thực hành sử dụng Dreamweaver để cải thiện những thành quả bạn có được. Câu hỏi thảo luận và bìa tập cuối chương Trong các tiết học trong tuần này, bạn sẽ được hỏi một số câu hỏi. Bạn hãy suy nghĩ về những câu hỏi này và cùng thảo luận với bạn học và giáo viên giảng dạy. Dưới đây là một số câu hỏi ôn tập dựa trên những ghi chú và nội dung tài liệu các bạn đã đọc. Những câu hỏi dưới đây nhằm ôn lại những kiến thức đã học trong tuần, có thể được thảo luận trong lớp và đặt ra trong bài kiểm tra. 1. Thảo luận về các phần tử trong nội dung trang web sau đây và xác định một cách chèn từng phần tử vào một Web site: văn bản (text), ảnh chụp (photograph), hoạt hình (animations), video, audio, và đa phương tiện (multimedia). Bài tập thực hành 1. Bây giờ bạn đã có thể tạo ra một (hay nhiều) trang mới với Dreamweaver, cũng giống như hay có thể nói có chất lượng hơn các trang bạn tạo bằng ngôn ngữ HTML thô dưới dạng văn bản. Trong tiết học tuần này, bạn sẽ thực hành sử dụng Dreamweaver để cải thiện những thành quả bạn có được. Bài viết 1. Xác định và viết ra mục đích và những mục tiêu của Web site chính mà bạn tạo ra. Trang 77
CHƯƠNG 8: THIẾT KẾ GIAO DIỆN VÀ ĐIỀU HƯỜNG 1. Tóm tắt chương Chương 8 sẽ tập trung vào các phần bào gồm trình bày trang web (web page layout) để hiển thị nội dung theo phương thức phù hợp nhất là rất quan trọng. Có nhiều cách để kiểm soát cách dàn trang, trong đó cách phổ biến nhất hiện nay là bảng (table) và khung (frame). Sau khi kết thúc chương này sinh viên sẽ có khả năng: Tạo bảng trong trang web Nêu lên những thuận lợi và bất lợi khi sử dụng khung (frame) trong trang web Tạo khung cho trang web 2. Cách dàn trang web thư viện – Web Layout Rõ ràng là dàn trang (page layout) ảnh hưởng đến việc sử dụng website, và dàn trang sao cho thể hiện nội dung phù hợp nhất cũng có tầm quan trọng tương đương. Trước đây, HTML cho phép tác giả web kiểm soát trang web. Và khi trình duyệt (browser) và HTML phát triển, càng ngày càng có nhiều cách kiểm soát cách dàn trang hơn. Hiện nay hai cách dàn trang được sử dụng rộng rãi nhất là bảng và khung. 3. Bảng là công cụ thiết kế web Từ khi bảng ra đời, người thiết kế web ngày càng trở nên lệ thuộc vào loại công cụ này. Tất cả các trình duyệt có thể hiển thị bảng mặc dù cách hiển thị khá khác nhau. Điều này có nghĩa là bảng có thể dùng để tạo hiệu ứng theo ý muốn mà không phải lo lắng rằng một số trình duyệt phổ biến có thể trình bày các hiệu ứng này không hợp lý. Có thể xem bảng gần giống như bảng tính biểu đồ (spreadsheets of charts). Thẻ HTML dùng để xác định hàng (row), cột (column) và ô (cell) trong bảng. Các yếu tố này sẽ tự điều chỉnh để phù hợp với nội dung, hoặc có thể điều chỉnh trước kích cỡ. Các đặc điểm khác của bảng như khoảng cách giữa đường viền và nội dung, khoảng trắng xung quanh ô và chiều rộng của đường viền, tất cả cũng đều được điều chỉnh. Mặc dù chức năng gốc của bảng chủ yếu là để hiển thị dữ liệu dạng bảng, nhưng bảng ngay lập tức trở nên phổ biến với tính năng thiết kế. Bảng thật sự có ích với chức năng trình bày dữ liệu và biểu đồ, nhưng bảng cũng có nhiều ứng dụng quan trọng khác như: Trang 78
Điều khiển chiều rộng của trang. Tạo cột văn bản và phân chia các khối thành văn bản Canh lề hình ảnh kèm văn bản và canh lề nhiều hình ảnh khác nhau. 4. Điều khiển chiều rộng của trang Tại sao điều khiển chiều rộng trang lại quan trọng? Kích cỡ màn hình và trình duyệt thay đổi tùy theo máy tính, nó khiến cho việc ước đoán cách thiết kế trang web sao cho phù hợp với tất cả các chiều rộng có thể của trình duyệt người dùng trở nên khó khăn hơn. Nhìn chung, cửa sổ trình duyệt trên Windows sẽ rộng hơn trên màn hình Macintosh, nên các hình ảnh trên máy có cửa sổ Windows sẽ đẹp hơn. Trái lại, văn bản được canh lề chuẩn trên Macintosh sẽ có khuynh hướng kéo giãn vượt ra khỏi màn hình. Bạn sẽ muốn hiển thị trang web thư viện của mình trên nhiều máy tính càng giống nhau càng tốt mặc dù màn hình máy tính vẫn còn nhiều khác biệt. Bạn có thể sử dụng bảng để kiểm soát những điểm không nhất quán này bằng cách xác định chiều rộng của nội dung trên trang web. Để thực hiện việc này, bạn có thể lập bảng có chiều rộng cố định và đưa nội dung vào đó, bảng ở đây về cơ bản giống như một “container”. Có thể giới hạn tuyệt đối chiều rộng của bảng bằng cách định rõ số pixel bạn muốn, hoặc giới hạn tương đối bằng chỉ số phần trăm, nhờ đó bảng hay cột sẽ tự điều chỉnh để vừa với màn hình khi điều chỉnh lại kích cỡ cửa sổ trình duyệt. Thông thường, cửa sổ trình duyệt mặc định trên màn hình Macintosh và màn hình 14” có chiều rộng khoảng từ 475 - 600 pixel, trong khi màn hình PC lớn hơn có thể mở rộng cửa sổ trình duyệt ra rộng hơn rất nhiều. Thiết kế bảng có chiều rộng nhỏ (khoảng 475- 600 pixel) sẽ đảm bảo chiều rộng của trang trông bắt mắt khi hiển thị trên tất cả màn hình máy tính (với kích cỡ thực). Điều này thực sự hữu dụng nếu bạn sử dụng hình ảnh làm tiêu đề và bạn muốn dàn hàng văn bản với chiều rộng giống như tiêu đề để nhìn cân xứng hơn. Để làm được điều này, bạn có thể đưa nội dung vào bảng có chiều rộng cố định. Điều này giúp đảm bảo rằng thậm chí nếu đã điều chỉnh cửa sổ trình duyệt thì chiều rộng của nội dung vẫn không thay đổi. Thiết kế với bảng điều chỉnh bằng tỉ lệ phần trăm sẽ tạo ra những trang gần giống nhau, dù cho kích cỡ màn hình là bao nhiêu đi nữa. Ví dụ, bảng có chiều rộng 80% sẽ luôn giãn rộng ra hay co lại để chiều rộng đạt đến 80%. Bạn cần phải xem xét cách trình bày trang khi in ra, hãy luôn ghi nhớ vùng trang có thể in được khi bạn cài đặt chiều rộng của bảng. Trang 79
Nhìn chung, nếu bạn muốn trang vừa với trang giấy có chiều rộng 8 ½ “x 11”, thì chiều rộng tối đa của bảng bao quanh không nên lớn hơn 535 pixel. 5. Tạo cột và đưa văn bản vào Trước khi sử dụng bảng, văn bản sẽ chạy thẳng một hàng từ lề trái sang lề phải trang web. Có thể đánh số hay gạch đầu dòng các danh sách dữ liệu dài, nhưng thực sự không phân chia được thành khối văn bản để dễ dàng phân biệt khi đọc. Thẻ đoạn <p> là cách duy nhất để tạo khoảng trắng ngang giữa các khối văn bản. Bảng có thể giúp dàn trang web linh hoạt hơn bằng cách cho phép bạn đưa văn bản vào trang và giữ nó cố định. Khối văn bản và các yếu tố khác có thể đặt vào những vùng định rõ trên trang. Cũng có thể dùng bảng để tạo cột theo kiểu báo chí, nghĩa là chia văn bản ra để dễ đọc hơn. Kỹ thuật này giúp trình bày một khối lượng lớn những thông tin dạng văn bản hiệu quả hơn. Cần ghi nhớ rằng nếu khách hàng thường xuyên (nằm trong nhóm đối tượng hướng đến) đang sử dụng phần mềm giúp đọc văn bản trên màn hình (screen reader), thì họ sẽ không thể nào đọc được văn bản ở dạng cột. Phần mềm này đọc văn bản từ trái qua phải, chứ không đọc từ trên xuống dưới. Do đó, sẽ không đọc được văn bản theo đúng trình tự. Nếu bạn sử dụng bảng để tạo cột văn bản và tin rằng phần mềm screen reader có thể dùng để truy cập thông tin trong trang, thì bạn hãy cung cấp cho người dùng có nhu cầu các file được định dạng tùy theo ý muốn. Cột văn bản có thể dùng để tạo thanh công cụ văn bản dọc theo hay bên ở trên cùng hay ở dưới trang. Ngoài ra, có thể dùng bảng để để tạo lề từ phải qua trái của trang web, đây cũng là điều mà trước đây khó thực hiện được. Canh lề hình ảnh kèm văn bản hoặc canh lề nhiều hình ảnh khác nhau Trước khi sử dụng bảng, rất khó để làm văn bản bao quanh hình ảnh hợp lý và ở đúng vị trí khi điều chỉnh lại kích cỡ cửa sổ trình duyệt, hoặc khi xem trên nhiều màn hình khác nhau. Bây giờ bạn có thể sử dụng ô của bảng để dễ dàng đặt hình ảnh cạnh văn bản, có thể đặt văn bản ở bên trên, bên dưới, bên trái hay bên phải hình ảnh bằng cách chọn ô kế bên. Ngoài ra, nếu muốn sử dụng văn bản ấy, bảng có chức năng chú thích built-on. Phần chú thích tạo tiêu đề in đậm, có thể đặt tiêu đề này ở trên hay ở dưới ô hình ảnh, tùy thuộc vào nhu cầu thiết kế. Có thể áp dụng phương pháp trên đối với những trang chứa nhiều hình ảnh. Thay vì canh lề theo chiều trình duyệt hiển thị hình ảnh, thì có thể đặt hình ảnh trong ô trên trang và nó sẽ ở cố định ở đấy. Hình ảnh trong ô của bảng có lề ở mức 0 sẽ không thấy khoảng trắng Trang 80
nào giữa các hình này. Khi dùng để phân chia nhiều hình ảnh lớn thành nhỏ, kỹ thuật này có thể giúp tải trang web nhanh hơn. 6. Một số thủ thuật sử dụng bảng Sử dụng bảng vì mục đích thiết kế thì cần phải thử nghiệm và thực hành. Một số kỹ thuật có thể hữu ích cho bạn như: Điều chỉnh chiều rộng đường viền để có nhiều hiệu ứng khác nhau. Đường viền ở mức 0 thì không thể thấy được. Sử dụng đường viền vô hình có thể là một trong những phương pháp phổ biến nhất trên web. Kỹ thuật này cho phép đặt văn bản hay hình ảnh vào bất kỳ vị trí nào trên trang mà không cần hiển thị đường phân chia, hoặc có thể điều chỉnh đường viền bảng để hiển thị các hàng dày hơn để tạo nhiều hiệu ứng lưới (grid effect) khác nhau. Đối với những trang đòi hỏi bảng lớn, thì chúng ta cần sử dụng nhiều bảng nhỏ để giúp tải trang web nhanh hơn. Bảng lớn chứa nhiều nội dung khiến tải trang web lâu hơn. Có thể sử dụng màu trong từng ô và cột để tạo thêm sự khác biệt cho trang. Điểm này đặc biệt có ích cho dữ liệu dạng bảng, các hàng có màu xen kẽ lẫn nhau có thể giúp người dùng xem nội dung một cách rõ ràng. Cũng có thể thêm màu vào đường viền bảng. Để tạo bảng dễ dàng hơn, hãy tạo bảng theo từng hàng một. Nếu bạn định thiết kế trong giới hạn hàng, cột và ô, thì sẽ dễ dàng nhìn thấy kết quả hơn. Đối với những bảng phức tạp thì bạn nên phác họa trước khi bắt đầu gắn thẻ (tagging) và xem xét bản phác thảo khi tạo tài liệu, nó sẽ giúp ta theo dõi nhiều cấp độ thẻ HTML dùng để tạo hàng, cột và ô. Mỗi lần kết thúc một hàng, bạn nên sử dụng thẻ ngắt dòng <br>. Nó cho phép những trình duyệt không hiển thị bảng trình bày nội dung trên từng hàng một. Mặc dù người sử dụng các trình duyệt này sẽ không thể thấy cách trình bày bảng thật sự, nhưng điều này sẽ cung cấp cho người dùng từng thông tin cụ thể, dễ sử dụng và dễ hiểu hơn. Nếu bạn đã sử dụng bảng trong tài liệu bạn muốn in, thì bạn hãy in thử trước để kiểm tra định dạng. Đôi khi không thể in ra những cột văn bản dài theo đúng trật tự của nó. Những cột dài hơn một trang sẽ khiến người đọc phải đọc qua hết tất cả những trang tiếp theo, Trang 81
sau đó phải quay trở về trang đầu tiên. Và nếu bảng quá rộng thì khi in nội dung có thể vượt ra ngoài lề trang. Câu hỏi tại lớp: Bạn hãy xem xét một số website thư viện. Các website này có sử dụng bảng hay không? Nếu có thì sử dụng như thế nào? Chỉ đơn giản là để nhập dữ liệu, hay để điều chỉnh cách dàn trang? 7. Khung là công cụ thiết kế web - Framset Cũng tương tự như bảng, khung có thể tăng thêm nhiều tùy chọn để điều chỉnh cách dàn trang. Tất cả các trình duyệt hiện đại đều hỗ trợ khung. Khung giúp hiển thị nhiều tài liệu dạng HTML trong một cửa sổ trình duyệt. Khung còn có thể giúp khởi chạy nhiều cửa sổ trình duyệt và kiểm soát nội dung trong từng cửa sổ thông qua các siêu liên kết (hyperlinks) ở các cửa sổ khác. Người thiết kế trang web điều chỉnh kích cỡ, số lượng và đích đến của mỗi tài liệu được định khung trên màn hình. Trang web chính có cấu trúc như một tập khung (frameset) thường hiển thị tài liệu dạng HTML khác nhau. Đặc biệt là sẽ có một vùng định khung chính cần tập trung chú ý. Cần lưu ý rằng không phải tất cả các trang web đều có thể trình bày theo dạng khung, khi sử dụng khung cần cân nhắc và chọn lựa cẩn thận. Thiết kế khung có thể phức tạp hơn bảng rất nhiều, và khung chỉ phù hợp trong một số trường hợp. Những trường hợp này bao gồm: Các phần tử thông tin bất biến (Constant informational elements) Các tùy chọn định vị (Navigational choices) Bảng chỉ mục 8. Trình bày các phần tử thông tin bất biến (Constant Informational Elements) Có thể thay đổi cửa sổ khung này mà không ảnh hưởng đến cửa sổ khác, do đó một số phần tử thông tin có thể hiển thị trên màn hình người dùng mà không bị redrawn khi chọn đường dẫn (link). Các phần tử như bản quyền, logo, hay thông tin liên hệ có thể đặt cố định ở dạng tĩnh, mỗi khung trở thành một phần nhất quán của mỗi trang. Có thể tiết kiệm thời gian chọn Trang 82
lựa siêu liên kết (hyperlink) vì các phần tử chi tiết này không cần phải tải từ máy chủ mỗi khi truy xuất trang mới. 9. Trình bày các tùy chọn định vị (Navigational Choices) Trên website có khung, các siêu liên kết trong một khung có thể dùng để cập nhật nội dung của các khung kề bên, cung cấp một giao diện định vị theo ý muốn (nếu dàn trang và hoạch định cẩn thận). Khung sẽ đặc biệt có ích nếu có các tùy chọn định vị và định hướng, những sự chọn lựa này thay đổi theo từng trang trong một website. Ví dụ, có thể đưa bảng chỉ mục (table of content) hay thanh công cụ (toolbar) trong khung kế bên cửa sổ nội dung chính. Những sự chọn lựa này có thể thay đổi khi ngữ cảnh của tài liệu chính thay đổi. 10. Trình bày bảng chỉ mục Có thể dùng bảng để tạo bảng chỉ mục hay mục lục cho website của bạn. Bằng cách thường xuyên đưa bảng nhắc nhở, người dùng sẽ luôn biết được những thông tin mới nào trang web bạn vừa thu thập được. 11. Một số thủ thuật sử dụng khung Bạn nên chú ý các vấn đề có thể phát sinh khi sử dụng các trang có khung. Nếu không cẩn thận khi thiết lập các siêu liên kết trong tài liệu HTML có khung, thì các trang trong website sẽ không bao giờ tuân theo phương thức định hướng chung như người dùng muốn. Điều này có thể dẫn đến sự hỗn độn. Bạn hãy kiểm tra lại trang web có khung để đảm bảo rằng các nút “back” (quay lại), “forward” (kế tiếp) và “reload” (tải lại) của trình duyệt hoạt động theo ý muốn người sử dụng. In trang có khung cũng không dễ dàng như trang không có khung vì trình duyệt xử lý theo cách khác. Một số phiên bản trình duyệt sẽ in toàn bộ những gì hiển thị trên màn hình; một số phiên bản khác chỉ in khung chính. Thông thường, nếu người dùng vô tình chọn hay nhấp chuột vào khung thì họ chỉ in ra được mỗi tài liệu HTML ấy. Tải trang có khung có thể tốn nhiều thời gian. Nếu trong trang có nhiều cửa sổ và mỗi trang chứa một tài liệu HTML riêng, thì đương nhiên sẽ mất nhiều thời gian hơn để tải toàn bộ trang. Phải luôn ghi nhớ điểm này trong trường hợp người dùng kết nối mạng thông qua một thiết bị kết nối chậm (như modem). Nếu luôn ghi nhớ những điều cảnh báo trên thì bạn sẽ nhận thấy khung có thể là một giải pháp thiết kế web hiệu quả. Dưới đây là một số thủ thuật hữu ích cho bạn khi sử dụng khung: Trang 83
- Nếu bạn cho rằng sử dụng khung chỉ để dàn trang, thì thay vào đó bạn hãy dùng bảng. Vì bảng dễ sử dụng hơn. Nếu bạn không chắc chắn sẽ dùng bảng hay khung, thì hãy dành chút thời gian để thử dùng từng loại và tìm ra những điểm thuận lợi và bất lợi của mỗi phương pháp là gì. - Trong trường hợp người sử dụng dùng các phiên bản trình duyệt cũ (trình duyệt văn bản thô text-only) thì bạn hãy thêm vào tùy chọn “noframes” (không có khung). Đặt các thẻ <noframes>…</noframes> xung quanh các tài liệu HTML chuẩn, người dùng mới có thể xem được nội dung trang web mặc dù dàn trang không có khung. - Ví dụ, nếu tài liệu HTML phải nhường không gian cho những tài liệu có khung khác trong trang web thì bạn đừng đặt tiêu đề lớn trong trang đó. Làm vậy sẽ khiến cho trang web nhìn có vẻ chật chội. - Bạn hãy cẩn thận ước lượng kích thước của mỗi vùng có khung. Phải chú ý thanh cuốn (scrollbar) sẽ hiện ra nếu bạn ước lượng sai kích thước khung và không nhất quán với kích thước của nội dung. Nếu thanh cuốn xuất hiện trong cửa sổ có khung nhỏ thì có thể thanh cuốn sẽ che mất khung. Khi xảy ra vấn đề này, có một loại thẻ dùng để ngăn thanh cuốn xuất hiện. Nhưng nếu bạn sử dụng, người dùng sẽ không thể xem tất cả những thông tin trong trang đó. - Bạn nên cẩn thận lập kế hoạch khi kết hợp các khung lại với nhau. Quy tắc chung là không liên kết với website bên ngoài bằng cách hiển thị nó trong một cửa sổ của trang có khung. Nó sẽ dẫn đến một vòng tròn đường dẫn trong một cửa sổ nhỏ trong đó nội dung sẽ bị thu nhỏ lại một cách vô ích. - Bạn có thể thiết lập khung để mở cửa sổ mới để xem đồng thời các trang và giúp quay lại màn hình ban đầu dễ dàng hơn. Tuy nhiên, không nên quá lạm dụng phương pháp này vì mở quá nhiều cửa sổ trình duyệt có thể gây lẫn lộn. Nó chỉ có hiệu quả khi bạn muốn cho người dùng biết họ đang ở cửa sổ nào. Trên màn hình nhỏ thì cửa sổ mới sẽ che khuất cửa sổ đầu tiên, và nhiều người có thể không thấy cửa sổ thứ hai đã mở ra. Bạn nên sử dụng tiết kiệm khung và chỉ dùng khi nào chắc chắn rằng nó thật sự phù hợp với nhu cầu người dùng. Do khung quá phức tạp nên cần phải vẽ phác thảo bản thiết kế và suy nghĩ cẩn thận trước khi bắt đầu. Ngoài ra, cũng cần phải tham khảo khi tạo khung. Trang 84
12. Định vị Nếu bạn sử dụng các tùy chọn dàn trang nâng cao như bảng và khung, thì người dùng sẽ thấy định vị rất phức tạp. Nguy cơ này càng tăng cao nếu kích cỡ trang web tăng. Khi website lớn mạnh thì bạn phải có trách nhiệm đưa ra những phần tử thông tin bất biến consistent navigational elements để cung cấp người dùng thông tin tổ chức của website. Điều quan trọng là bạn cần phải làm cho việc định vị dễ dàng hơn để người dùng có được một ngữ cảnh. Các webpage cần thể hiện mối liên hệ giữa các trang. Mặc dù bạn cho rằng có thể hiểu được mối quan hệ giữa các webpage bằng trực giác, nhưng chỉ có bạn mới có thể thực hiện được vì bạn chính là người tạo ra nó. Cấu trúc website có thể chẳng hiển thị rõ ràng cho người truy cập thấy. Nhưng bạn đừng cho rằng người dùng có thể đoán được cấu trúc ấy, cách giải quyết duy nhất là hãy trình bày thật rõ ràng. Nếu bạn đang hoạch định cách định vị trên website thì bạn nên nhớ rằng không chỉ lập kế hoạch định vị giữa các trang mà còn định vị giữa các vùng nội dung trên trang dài. Nhiều người dùng vẫn sử dụng máy tính nhỏ, nên nhiều webpage không vừa với màn hình đó, và người dùng phải sử dụng thanh cuộn để xem hết trang. Nếu trang web dài và màn hình quá nhỏ thì bạn phải đưa ra một số dấu hiệu cho thấy còn thông tin bên dưới. Ví dụ, các đường link trên đầu trang có thể dùng để kết nối thông tin ở cuối trang. 13. Phương tiện hỗ trợ định vị Tùy vào thiết kế trang, có thể bổ sung vào một số phương tiện hỗ trợ người dùng định vị trên website. Cần ghi nhớ rằng mỗi người có một kiểu định vị riêng và có thể ưa chuộng cách này hơn cách kia tùy theo loại thông tin họ trang truy cập. Ví dụ, một số người thích thực hiện tìm kiếm, số khác lại thích duyệt web. Họ có thể sử dụng công cụ tra cứu để tìm một tài liệu cụ thể, nhưng cũng có thể duyệt web nếu muốn xem lướt qua những gì có trong website. Nhưng dù cho người dùng thực hiện tìm kiếm hay duyệt web thì bạn cần phải đảm bảo họ biết cách quay trở lại điểm ban đầu. Bạn có thể sử dụng một số phương tiện hỗ trợ như thanh công cụ (toolbar), menu con (pop-up menu), bảng chỉ mục và các chức năng tìm kiếm. Thanh công cụ. Thanh công cụ đưa ra nhiều tùy chọn định vị và được sử dụng rộng rãi trên Web. Thanh công cụ có thể đơn giản chỉ là một danh sách các tùy chọn văn bản, hoặc có thể có thêm nhiều hình ảnh. Thanh công cụ đồ họa thường được đưa vào thiết kế webpage để nâng cao hình thức website cũng như đưa ra nhiều tùy chọn định vị. Nếu sử dụng thanh công cụ đồ họa thì bạn cần đảm bảo hình thức của nó trông giống như bảng Trang 85
trợ giúp định vị, chứ không chỉ đơn giản là một bản thiết kế. Bạn cũng sẽ muốn đưa vào văn bản có hình ảnh kèm theo. Những hình ảnh (được dùng trong văn bản nhằm đơn giản hóa các chỉ dẫn) thường bị hiểu sai lệch. Nên nhớ rằng hình ảnh nhỏ có ít màu giúp tải về rất nhanh. Như chúng ta thấy, có thể đặt thanh công cụ vào bảng hay vào khung để giữ cố định trên trang. Trong mỗi website, người dùng thường có khuynh hướng tìm một số tùy chọn định vị cố định. Yêu cầu tối thiểu là trong mỗi trang phải có một đường dẫn đến trang chính . Tuy nhiên, nếu đưa vào trang một thanh công cụ thì nên đưa vào các tùy chọn phổ biến dưới đây: Mục lục (Index) Trang chủ (Home) Trợ giúp (Help) Sơ đồ web (Site map) E-mail Tìm kiếm (Search) Menu con (Pop-up Menu). Cũng có thể sử dụng các biểu mẫu (form) để giúp người dùng xem sơ lược qua website. Ví dụ, có thể dùng menu con để liệt kê ngắn gọn các phần nội dung. Biểu mẫu này có 2 chức năng chính: (1) cho phép người dùng xem danh sách các phần khác nhau trong website và (2) giúp người dùng chuyển tiếp sang trang đã chọn. Phải đảm bảo luôn có tùy chọn “mục lục” hay “trang chủ” trong các biểu mẫu này để người truy cập có thể dễ dàng quay trở lại trang đầu tiên. Bảng chỉ mục. Bảng chỉ mục có thể hỗ trợ người dùng xem danh sách thông tin trong website. Bảng chỉ mục có thể chi tiết hay tổng quát tùy theo người thiết kế, nhưng thông thường mục lục tổng quát thì hiệu quả hơn. Bảng chỉ mục không cần cập nhật nhiều mà vẫn cung cấp nội dung hữu ích. Biểu mẫu tìm kiếm. Nếu ở thư viện bạn có người có khả năng tạo tính năng tìm kiếm thì hãy bổ sung chức năng này vào website. Người dùng thường có nhu cầu tìm thông tin cụ thể hơn trong các website lớn để làm bài tập hay nghiên cứu. Do đó, có thể bạn sẽ đưa biểu mẫu tìm kiếm vào trang đầu tiên hoặc cung cấp chức năng tìm kiếm các phần cụ thể trong website. Khi thực hiện, phải đảm bảo kèm theo một số hướng dẫn và file trợ giúp để người dùng có thể sử dụng hiệu quả. Nếu website quá phức tạp, hãy thiết kế thêm một Trang 86
trang “Các thủ thuật định vị” kết hợp với phần trợ giúp tìm kiếm cũng như những lời gợi ý hay mách nước khác. Theo đúng lý tưởng thì bạn sẽ muốn đưa vào phần hỗ trợ định vị đa cấp độ nhằm phục vụ cho tất cả mọi đối tượng người dùng, từ người mới sử dụng cho đến người có nhiều kinh nghiệm. Để thực hiện được điều này, chúng ta có thể dùng nhiều phương tiện hỗ trợ, như kết hợp thanh công cụ, tùy chọn tìm kiếm và bảng chỉ mục với nhau. Một cách khác là kết hợp chặt chẽ cách tổ chức website với cách dàn trang và thiết kế trang đầu tiên, cách này giúp cho cấu trúc và tổ chức website được rõ ràng ngày từ đầu. 14. Định vị nhất quán Để đảm bảo tất cả các trang web thư viện sẽ không ngừng cung cấp định vị nhất quán thì cần phải đưa ra một số hướng dẫn cho một lượng thông tin tối thiểu phải có trong trang web khi có nhiều cán bộ thư viện tạo ra và cập nhật các thông tin này. Các hướng dẫn nên đề cập đến các vấn đề sau: Đưa ra thông tin chuẩn trong các nhan đề tài liệu. Bạn có thể đề nghị tạo ra các nhan đề tài liệu dưới dạng nào đó. Nhan đề tài liệu sẽ xuất hiện ở trên cùng cửa sổ trình duyệt và cũng xuất hiện trong phần “bookmark” (đánh dấu trang web) và “browser history” (lịch sử trình duyệt). Ví dụ như đưa vào tên thư viện trong tất cả các webpage giúp người dùng ghi nhớ các tài nguyên này khi họ thoát khỏi các trang này để truy cập các tài nguyên bên ngoài. Đưa vào tên người tạo và duy trì trang web. Đưa vào tên và chức danh người tạo ra trang web cho người dùng thấy được độ tin cậy của thông tin và đồng thời giúp họ cá thể hóa trang web. Đưa vào địa chỉ email của những người có thể liên hệ khi có thắc mắc hoặc nhận xét. Cung cấp địa chỉ email giúp người dùng gửi câu hỏi và lời phê bình, nhận xét. Đưa vào ngày cập nhật mới nhất của trang web. Người dùng cần biết thông tin trang web có hiện hành và cập nhật hay không. Các yếu tố trên là một phần thiết yếu để có được một trang web thiết kế tốt và giúp người dùng có thể tin cậy vào trang web hơn. Để đạt được mục đích này, nhiều thư viện đã và đang tạo ra và thiết lập những hướng dẫn chi tiết nhằm giúp cho đội ngũ cán bộ đảm bảo tính nhất quán khi thiết kế website. Câu hỏi: Trang 87
Xem qua một số trang web. Bạn hãy tìm trang sử dụng khung, nó sẽ không mất nhiều thời gian. Hãy quyết định xem mình có thích dùng khung hay không. Bạn hãy nghĩ xem người thiết kế web có thể thu hoạch kết quả tương tự theo cách nào nữa không? Bài tập Bạn nên chuẩn bị tối thiểu một trang web. Đầu tiên, thêm vào 1 bảng dữ liệu, sau đó sử dụng định dạng bảng để chỉnh dàn trang, chẳng hạn như thu nhỏ chiều rộng. Sau đó thêm khung vào trang. Câu hỏi thảo luận Thông qua bài này, sẽ có một số câu hỏi ôn tập dành cho bạn. Hi vọng bạn đã suy nghĩ và thảo luận với các bạn cùng lớp và giáo viên. Bây giờ chúng ta hãy trả lời dựa trên những ghi chép và tài liệu đã đọc. Những câu hỏi dưới đây sẽ giúp chúng ta ôn lại bài tuần này, các câu hỏi thảo luận trong lớp có thể xuất hiện trong bài thi. 1. Bạn hãy xem xét một số website thư viện. Các website này có sử dụng bảng hay không? Nếu có thì sử dụng như thế nào? Chỉ đơn giản là để nhập dữ liệu, hay để điều chỉnh cách dàn trang? 2. Xem qua một số trang web. Bạn hãy tìm trang sử dụng khung, nó sẽ không mất nhiều thời gian. Hãy quyết định xem mình có thích dùng khung hay không. Bạn hãy nghĩ xem người thiết kế web có thể thu hoạch kết quả tương tự theo cách nào nữa không? Bài tập thực hành Bạn nên chuẩn bị tối thiểu một trang web. Đầu tiên, thêm vào 1 bảng dữ liệu, sau đó sử dụng định dạng bảng để chỉnh dàn trang, chẳng hạn như thu nhỏ chiều rộng. Sau đó thêm khung vào trang. Trang 88
CHƯƠNG 9: ÁP DỤNG TYPOGRAPHY TRONG THIẾT KẾ 1. Tóm tắt chương Trong thiết kế web, áp dụng kỹ thuật Typography cho tới lúc này rất trở thành rất quan trọng cho thiết kế webstie. Bởi vậy việc sử dụng typography cho trang web luôn luôn là bước bạn phải quan tâm khi thiết kế. Bạn cần có một font chữ đủ mạnh, hiệu quả, và truyền tải đúng thông điệp cần thiết. Qua chương này, sinh viên sẽ nắm bắt được làm quen với 1 số khái niêm và kỹ năng cơ sở dữ liệu bản việc ứng dụng Typography vào trong thiết kế: Typography là nghệ thuật và kỹ thuật sử dụng kết hợp các phông chữ (font), cỡ chữ (size), đhộìndhàảindhò,nsgả,ngpiãhnẩmcávchiếdt òthnẩgmvàmkỹh.oảng cách giữa các ký tự để tạo nên những Định nghĩa và phân biệt những đặc trưng của một type (một loại chữ). tGyipảoigthraícphhyvàvàứongtradnụgngWheibệuđqãutạảon.hững nguyên tắc cơ bản của nghệ thuật Trình bày và giải thích những biến số làm hạn chế khả năng kiểm soát type trên Web. Skiửểudụcnhgữ.những kỹ thuật cơ bản để khắc phục những hạn chế trong việc kiểm soát 2. Giới thiệu Typography Những người làm typography thường là những thợ xếp chữ (ngành in), nghệ sĩ đồ hoạ, giám đốc nghệ thuật và nhân viên văn phòng. Mãi đến Thời Đại Kỹ Thuật Số, typography mới trở thành một nghề chuyên dụng. Kỹ thuật số đưa nghệ thuật typography vào những thế hệ trình thiết kế trực quan mới và đến với cả người dùng thông thường. Hiện nay, ngành typopraphy cũng như những nghiên cứu về typography mang nghĩa rất rộng, bao trùm tất cả các khía cạnh về thiết kế và ứng dụng chữ như: thiết kế typesetting (xếp chữ) và typeface (kiểu chữ phân biệt với trọng lượng (như nét đậm), dáng (như in nghiêng) và kích cỡ của nó); chữ viết tay và nghệ thuật viết chữ đẹp hay thư pháp (calligraphy); nghệ thuật graffito (vẽ trên tường); chữ khắc, trạm và ghi chữ trên các kiến trúc; thiết kế poster và thiết kế chữ cỡ lớn như trên các signage (bảng báo, bảng hiệu, hộp đèn) và trên các billboard (bảng quảng cáo); những phương tiện truyền thông trong kinh doanh và vật quảng cáo; quảng cáo; wordmark (kiểu dáng tên của một công ty hay một sản phẩm) và mẫu logo (logotype: bao gồm các kiểu chữ có thể đọc được thành tên, kiểu chữ kết hợp với các yếu tố hình ảnh tượng trưng hay trừu tượng, hoặc đôi khi, Trang 89
chỉ gồm những yếu tố hình ảnh mà không có chữ đi kèm); quần áo trên thị trường; bảng đồng hồ chỉ dẫn trên xe cộ; nghệ thuật và kỹ thuật trình bày chữ động trong phim điện ảnh hay trên truyền hình; và là một bộ phận trong ngành thiết kế công nghiệp, ví dụ như chữ trên các dụng cụ trong gia đình, trên bút, và đồng hồ đeo tay. Từ khi kỹ thuật số ra đời, phạm vi ứng dụng của typography ngày càng được mở rộng: xuất hiện trên các trang Web, màn hình LCD của điện thoại di động, và máy chơi điện tử cầm tay. Ngày nay type đã trở nên phổ biến đến nỗi giới typographer đã tuyên bố \"Type có mặt khắp nơi\". Nhìn chung, typography tuân thủ 4 quy tắc: có sự lặp đi lặp lại, sử dụng sự tương phản, sử dụng hiệu ứng gần kề (proximity), và canh chỉnh (alignment). Bài tập 1. Tạo một Web page đơn giản gồm: o Một dòng tiêu đề chính: phông sans serif, size lớn o Một vài câu (đoạn) văn bản trong phần body: phông serif, size 12 o Nhập 2 phụ đề vào phần văn bản với phông sans-serif, size lớn hơn văn bản trong body và nhỏ hơn tiêu đề chính. o Chèn vào một ảnh có kèm dòng chú thích bên dưới. Lưu ý: trong web page vừa tạo không có nhiều hơn 3 loại phông, tốt nhất là 2. Save trang. Mở trình duyệt Web để hiển thị trang. Bây giờ trở về trang gốc và thực hành thay đổi phông chữ sao cho trên trang tồn tại 6 phông chữ khác nhau. Save file lại với một tên mới và cho hiển thị trên trình duyệt Web. Nếu thấy khó đọc, hãy thử giảm độ dài các dòng văn bản và cho hiển thị lại lần nữa có thể sẽ dễ đọc hơn. Bạn hãy đối chiếu 2 trang. Chắc hẳn bạn nhận thấy trang với ít phông chữ hơn dễ đọc hơn. Sỡ dĩ trang thứ 2 khó đọc hơn vì tồn tại quá nhiều phông chữ trong cùng một trang làm phân tán sự tập trung và giảm khả năng hiểu của người xem. 3. Kiểm soát typography Vấn đề kiểm soát type hiển thị trên màn hình người dùng cuối cùng đã được thảo luận trong những module trước và chúng ta biết là không thể kiểm soát văn bản viết bằng ngôn ngữ HTML trên màn hình của người dùng cuối cùng. Chúng ta có thể nhập các lệnh vào phần ngôn ngữ HTML như sau (đã được chỉ dẫn trong sách giáo trình): Trang 90
<FONT FACE=”Arial, Helvetica”>Text here</FONT> Câu lệnh trên yêu cầu hiển thị chữ trong Text here với phông Arial nếu trình duyệt web có hổ trợ phông này, nếu không thì sử dụng phông Helvetica. Bạn hãy thực hành và xem kết quả. Về vấn đề này, một số tác giả cho rằng nên cho phép nguời dùng cuối cùng tự chọn lại phông họ muốn khi xem (xem Reading 1 của Crawford). Để thực sự kiểm soát được ‘hình dạng’ của văn bản trên màn hình, một số nhà thiết kế lưu văn bản vào một file đồ hoạ, định dạng GIF chẳng hạn, và đưa lên web page như hình ảnh. Như vậy hình dạng văn bản sẽ không bị thay đổi khi hiển thị trên cửa sổ trình duyệt của người dùng cuối cùng. 4. Text Typography (Typography văn bản) Nghệ thuật typography truyền thống làm nhiệm vụ sắp xếp bố cục văn bản (text) cho mạch lạc, dễ đọc, dễ nhìn. Tuy nhiên, người đọc lại thường không biết về việc sắp xếp văn bản này. Cách thức sắp xếp văn bản dù là đơn giản nhất, không có điểm gì đặc biệt và ít gây chú ý cho người đọc, cũng đều nhằm mục đích tạo nên sự rõ ràng và dễ hiểu cho toàn bộ văn bản. Lựa chọn phông chữ là phần quan trọng nhất trong typography văn bản. Tiểu thuyết dạng văn xuôi, tác phẩm về những con người và sự kiện có thật, các bài xã luận, bài viết về lĩnh vực giáo dục, tôn giáo, khoa học, tâm linh hay quảng cáo, tất cả đều có những yêu cầu và đặc điểm riêng. Đối với tài liệu lịch sử, việc lựa chọn typeface cho văn bản phải phù hợp với bố cục sắp xếp của thể loại lịch sử được xây dựng qua một quá trình lâu dài. Phông gô-tíc (gothic) thường được sử dụng để liên hệ đến Châu Âu cách đây 2 hoặc 3 thế kỷ (cụ thể phông Copperplate Gothic). Chúng ta cũng cần phân biệt biệt giữa các phông serif (chữ gạch chân) và sans- serif (chữ không chân). Mỗi ký tự trong bộ ký tự của một phông serif được “trang điểm” thêm một số chi tiết khi in ấn ra. Ngược lại, ký tự trong các phông sans-serif là ký tự trơn, không có thêm chi tiết trang trí nào. Phông serif tiêu biểu là Times new Roman, và sans- serif là Helvetica. Các nghiên cứu cho thấy mặc dù những khác biệt về hình dạng chữ, khi hiển thị trên web mức độ dễ đọc của 2 loại phông là như nhau. Sách hiện nay thường dùng các phông “text roman” hay “book roman\" seriff siêu hiện đại với những chi tiết trang trí phản ánh nghệ thuật thiết kế hiện đại. Với những yêu cầu mang tính chuyên biệt hơn, báo và tạp chí sử dụng các phông text roman với các ký tự nhỏ, gọn, mang tính linh động cao, dễ đọc và cho phép tận dụng hiệu quả diện tích Trang 91
trang. Các phông sans serif văn bản được dùng cho các đoạn giới thiệu (mở đầu), văn bản phụ và những bài báo ngắn. Khuynh hướng hiện nay là sử dụng kết hợp kiểu sans serif cho các tiêu đề và một phông seriff high-performance cùng kiểu cho phần văn bản của bài. Trong bài viết trên, tác giả giải thích một số điểm về nghệ thuật typography trên web như: typeface mặc định (default typeface) trên Internet Explorer là Times New Roman, vì vậy nếu bạn muốn sử dụng typeface khác bạn phải biết rõ cách tiến hành thay đổi setting. Một số phần mềm tạo Web page lại quy định phông mặc định là Arial, vì vậy khi bạn sử dụng những phần mềm này để thiết kế Web page tất nhiên sẽ phải sử dụng phông Arial. Điều Crawford muốn nhấn mạnh là chúng ta áp đặt phông Arial cho người dùng cuối cùng với mục đích gì? Nếu không có lý do hợp lý và thuyết phục thì web page phải cho phép người dùng cuối cùng tuỳ ý thiết lập phông thuộc phông type mà họ thích. Câu hỏi trên lớp: Thử truy cập một số Web site khác nhau. Các site này sử dụng phông chữ gì? Đây có phải là phông mặc định? Người truy cập có được phép thay đổi phông của những web site này hay không? Sau khi đã quan sát các site, bạn hãy cho biết những phông chữ nào bạn thấy thích đọc trên web. Tại sao? Thảo luận với giáo viên và các bạn cùng lớp. 5. Tính dễ đọc (Readability) và Tính rõ ràng (Legibility) Tính dễ đọc: chỉ mức độ dễ dàng, thoải mái khi đọc một văn bản có sắp xếp. Các nghiên cứu về độ khó đọc cho thấy khả năng đọc của con người phụ thuộc vào việc nhận diện các mẫu ký tự, do khả năng nhận thức bậc cao về hình dạng của não người đảm nhiệm. Nghiên cứu cho thấy chữ thường (lower case) sẽ dễ đọc hơn vì mỗi ký tự thường có cấu trúc và hình dạng riêng, phân biệt với nhau với những chi tiết mở rộng nổi bật ( ví dụ: phần trồi lên (ascenders) - đối với những chữ in thường như b, d, f, h, k, l và t có một phần trồi lên vượt chiều cao của chữ x và chiều cao của phần trồi này thay đổi theo các kiểu chữ khác nhau; phần thấp của ký tự (descender) - phần của các chữ thường, treo bên dưới đường cơ sở, có năm chữ cái có phần thấp, đó là g, j, p và y; và những đường nét nhô ra khác). Người đọc nhận diện ra những phần phía trên của ký tự nhanh hơn những phần bên dưới ký tự. Ngược lại, qua những kiểm tra đọc các văn bản dài toàn mẫu tự in hoa (upper case) cho thấy văn bản toàn chữ in hoa khó đọc hơn vì các ký tự đồng nhất về chiều cao chữ và ít khác biệt về cấu trúc gây khó đọc và dẫn đến giảm tốc độ đọc và hiểu. Trang 92
Tuy nhiên, kết luận này lại hoàn toàn trái ngược với quan điểm của nhiều người tạo web site – lạm dụng chữ in hoa gây khó khăn khi đọc. Mức độ dễ đọc còn phụ thuộc vào khoảng cách giữa các ký tự (letterspacing), giữa các chữ và giữa các dòng. Ở đây, muốn nói đến mức độ dày – thưa của chữ trình bày trong văn bản. Trên web những dòng ngắn được ưa chuộng hơn, chắc hẳn bạn cũng không thích đọc những dòng dày đặc chữ trãi dài sang lề phải của màn hình mà phải drag thanh ngang sang phải mới có thể đọc được. Ngoài ra, khoảng cách giữa các dòng rộng rãi cũng sẽ giúp dễ đọc hơn vì chúng ta dễ dàng phân biệt dòng này với dòng khác. Tuy nhiên, đối với tài liệu in ấn thì ngược lại và tất nhiên có lý do chính đáng để thu hẹp khoảng cách giữa các dòng: nhằm tận dụng diện tích trang và tiết kiệm số lượng giấy in. Còn trên web điều này không cần thiết, chúng ta có thể giãn dòng để tăng tính rõ ràng và dễ đọc cho văn bản mà không cần phải lo sợ về chi phí. Tính rõ ràng: được đo lường bằng tốc độ và mức độ dễ dàng nhận diện ra các dạng ký tự và chữ. Điều này phụ thuộc vào thiết kế của từng ký tự và chúng được hiển thị rõ ràng đến mức độ nào. Việc lựa chọn màu sắc và độ tương phản giữa các màu cũng ảnh hưởng đến tính rõ ràng của văn bản. 6. Phông máy tính (Computer font) Một computer font: là một file dữ liệu điện tử gồm một bộ glyph (hình chữ: hình dạng của từng ký tự: chữ, số, ký hiệu), bộ ký tự, hay bộ ký hiệu (ví dụ như ‘dingbats’ - các ký tự trang trí như các bullet, dấu sao, bàn tay trỏ, cái kéo, và bông hoa). Thuật ngữ “phông” (font) đã từng được dùng để chỉ những typeface có thể chuyển đổi qua lại nhờ vào các bộ phận máy móc như ‘typeball’ (lớn hơn quả bóng golf, trên bề mặt có chạm các ký tự) hay ‘daisy wheel’ (trong ngành in: là bánh nhỏ có các mẫu tự bao quanh đường chu vi), tuy nhiên ngày nay hầu hết phông đã được đưa vào máy tính. Có 3 loại định dạng dữ liệu file computer font cơ bản: Phông Bitmap (phông ánh xạ bit): ‘diện mạo’ và kích cỡ của mỗi glyph được tạo thành Trang 93
từ một chuỗi các dot (chấm) hoặc pixel (phần tử ảnh) theo mẫu. Các phông Bitmap đơn thuần là tập hợp các ảnh mành quét tạo nên các ký tự. Đối với mỗi biến thể của phông, sẽ có một tập hợp hoàn chỉnh các ảnh tạo nên glyph, mỗi ký tự trong một bộ chữ được tạo nên từ một ảnh riêng. Ví dụ, nếu một phông có 3 size, kết hợp in đậm và in nghiêng, thì sẽ phải sử dụng 12 tập hợp ảnh hoàn chỉnh. Một số hệ thống sử dụng phông bitmap có thể tạo ra những biến thể phông bằng phương pháp thuật toán. Ví dụ, máy tính Apple Macintosh nguyên thuỷ có thể tạo ra chữ in đậm bằng cách mở rộng các stroke (nét (chữ) dọc và dạng nghiêng của loại chữ không chân (oblique) bằng cách xén bớt ảnh. Ngoài ra, còn có thể điều chỉnh thang tỉ lệ ảnh và thuật toán dùng để thay đổi tỉ lệ này có thể làm thay đổi chất lượng ảnh ví dụ từ dạng hình khối sang dạng cao ( Scale2x và hq3x). Phông Outline (phông chữ hình bao, phông chữ viền): sử dụng những đường cong Bézier, những chỉ lệnh vẽ và những công thức toán học để mô tả mỗi glyph - vẽ nên một hình bao (outline) có thể dễ dàng thay đổi tỉ lệ. Các phông outline là tập hợp các ảnh vector (các đường có hướng sắp xếp tạo nên hình ảnh) của các glyph. Những phông vectơ đầu tiên được thiết kế dùng với màn hình vector (vector monitor) và máy vẽ vector (vector plotter) với những phông riêng, thường là những nét đơn mảnh thay vì những glyph có viền bao đậm. Sự ra đời của kỹ thuật chế bản điện tử (desktop publishing) đòi hỏi phải thiết lập nên chuẩn chung thống nhất giao diện người-máy bằng đồ hoạ (GUI: Graphical User Interface) của máy Macintosh nguyên thuỷ với các máy in laser. Thuật ngữ dùng để nói về công nghệ hợp nhất này là WYSIWYG (what-you-see-is-ưhat-you- get) và chuẩn chung là Adobe PostScript. Phông Stroke (Phông nét chữ) sử dụng tập hợp các đường thẳng và những thông tin phụ để mô tả ‘hình dạng’ của glyph gồm: size và hình dáng cụ thể của các đường nét tạp nên glyph. Outline của glyph được định hình bằng các đỉnh của từng nét và lược tả về nét tạo nên hình chữ. Ưu điểm của phông này so với phông outline là cần ít đỉnh định nghĩa một glyph hơn, cho phép tạo ra một phông khác với trọng lượng (weight), độ rộng của glyph hoặc những nét gạch chân (serif) với những quy luật đường nét khác, và những kích cỡ phù hợp mà không cần tăng thêm số lượng đỉnh. Về phía những nhà thiết kế phông có thể chỉnh sửa glyph dễ dàng và hạn chế lỗi hơn so với sử dụng phông outline. Hệ thống sử dụng phông stroke còn cho phép co dãn glyph mà không làm thay đổi độ dày của các nét trong glyph gốc. Ở Đông Á, các thiết bị nhúng (để có thể trình bày hệ thống ký tự của các nước trong Trang 94
khu vực này) rất thông dụng, công nghệ này không chỉ giới hạn ở dạng chữ viết ghi ý (như chữ Hán). Các nhà thiết kế phông thương mại như Agfa Monotype (iType), Type Solutions, Inc. (thuộc Bitstream Inc.) (Font Fusion (FFS), btX2), Fontworks (Gaiji Master), đã phát triển nên nhiều kiểu và công cụ phông stroke khác nhau. Mặc dù Monotype và Bitstream đã tuyên bố sử dụng phông stroke cho hệ thống ký tự ở khu vực Đông Á sẽ tiết kiệm tối đa diện tích nhưng thật sự việc tiết kiệm diện tích này là nhờ vào các glyph tổng hợp do công nghệ phông TrueType mang lại. 7. So sánh các loại computer font Phông Bitmap: sử dụng dễ dàng và nhanh chóng, tuy nhiên không linh động vì mỗi kích cỡ và ‘diện mạo’ phải sử dụng một phông riêng. Còn đối với phông stroke và outline, chúng ta có thể dễ dàng thay đổi cỡ chữ của một phông mà không cần phải chuyển sang một phông khác bằng cách thay đổi số đo các thành phần khác nhau của glyph, tuy nhiên để sử dụng được lại rất phức tạp đòi hỏi phải bổ sung thêm các mã máy tính để định nghĩa.Ví dụ, ký tự \"A\" gồm 3 phần tử: 2 đường thẳng bên ngoài và một đường ngang nằm giữa 2 đường thẳng và cần thêm nhiều phần tử (nét) nữa nếu thiết kế theo phông serif. Khi so sánh phông Bitmap với phông outline, cần phân biệt 2 loại định dạng file ảnh khác nhau. Định dạng ảnh Bitmap (như Windows Bitmap (.bmp), Portable Network Graphics (.png), Joint Photographic Experts Group (.jpg or .jpeg) và Tagged Image Format (.tif or .tiff)) lưu trữ dữ liệu ảnh dưới dạng khung lưới pixel, đôi khi dưới dạng nén. Còn định dạng ảnh outline và phông stroke (như Windows Metafile (.wmf) and Scalable Vector Graphics (.svg)) lưu trữ các chỉ lệnh vẽ nên ảnh chứ không lưu ảnh. Có thể nhanh chóng thay đổi kích cỡ của ảnh ánh xạ bit nhưng sẽ gây méo mó. Ngược lại, định dạng ảnh dạng outline và stroke có thể dễ dàng thay đổi cỡ chữ mà không gây méo mó nhưng phải mất thòi gian hơn vì mỗi lần hiển thị phải sắp xếp lại các pixel từ đầu. Xem lại các Web page đã tạo. Hãy thay đổi type của những web page này. Thử sử dụng nhiều kiểu phông (font type) khác nhau. Sau đó, điều chỉnh các phông cùng loại cho giống nhau. Dùng phông serif cho các tiêu đề và san-serif cho văn bản. Đừng quên giảm độ dài của các dòng. Câu hỏi và bài tập thảo luận chương Trang 95
Có một số câu hỏi về nội dung bài học và các vấn đề có liên quan trong tuần. Bạn hãy suy nghĩ về những câu hỏi này và cùng thảo luận với giáo viên và bạn học cùng lớp. Dưới đây là một số câu hỏi ôn tập dựa trên những ghi chú và tài liệu các bạn đã đọc nhằm ôn lại những gì đã học, cùng thảo luận ý kiến tại lớp và có thể được đặt ra trong bài kiểm tra. 1. Thử truy cập một số Web site khác nhau. Các site này sử dụng phông chữ gì? Đây có phải là phông mặc định, hay người truy cập có được phép thay đổi phông của những site này hay không? Sau khi đã quan sát các site, bạn hãy cho biết phông chữ trên web nào bạn thích đọc và giải thích lý do. Thảo luận với giáo viên và các bạn cùng lớp. Bài tập thực hành Tạo một Web page đơn giản gồm: - Một tiêu đề: phông sans serif, cỡ chữ lớn - Một vài câu (đoạn) văn bản trong phần body: phông serif, size 12 - Nhập 2 phụ đề vào phần văn bản với phông sans-serif font, size lớn hơn văn bản trong body và nhỏ hơn tiêu đề chính. - Chèn vào một ảnh có kèm dòng chú thích bên dưới. Lưu ý: sau khi hoàn thành bài tập, bạn nên kiểm tra để bảo đảm rằng web page của mình không có quá 3 loại phông - tốt nhất chỉ nên dùng 2. Save trang. Sau đó cho hiển thị trên trình duyệt web. Bây giờ trở về trang gốc và thực hành thay đổi phông chữ sao cho trên trang tồn tại 6 phông chữ khác nhau. Save file lại với một tên mới và cho hiển thị trên trình duyệt Web. Nếu trang đầu tiên vẫn thấy khó đọc, hãy thử rút ngắn độ dài dòng văn bản và cho hiển thị lại lần nữa có thể sẽ dễ đọc hơn. Bạn hãy đối chiếu 2 trang. Bạn chắc hẳn nhận thấy trang với ít phông chữ hơn dễ đọc hơn và trang với nhiều phông chữ sẽ rất khó đọc vì nhiều phông khác nhau đã làm phân tán sự tập trung và giảm khả năng hiểu của người xem. 2. Xem lại các Web page đã tạo. Hãy thay đổi kiểu chữ của những web page này, thử sử dụng nhiều loại phông khác nhau, và các phông khác nhau của cùng một loại Trang 96
phông. Dùng phông serif cho các tiêu đề và san-serif cho văn bản. Đừng quên giảm độ dài của các dòng. Tài liệu tham khảo thêm cho chương Bringhurst, Robert (2002). The Elements of Typographic Style (phiên bản 2.5). Vancouver: Hartley & Marks. ISBN 0-88179-133-4. Thường được đề cập ngắn gọn là “Bringhurst\", Elements được đánh giá là tài liệu đáng tin cậy về cách tạo kiểu chữ Latinh. Lexique des règles typographiques en usage à l'Imprimerie nationale, Imprimerie nationale, 2002, ISBN 2-7433-0482-0, dùng cho nghệ thuật tạo kiểu chữ Pháp. 40 mẫu ví dụ tuyệt với cho Typography http://idesign.vn/content/an-tuong/design-web/40-vi-du-tuyet-voi-c-a-web-typography/ Trang 97
CHƯƠNG 10: SỬ DỤNG CSS TRONG THIẾT KẾ 1. Tóm tắt chương Chương này sẽ tập trung vào các vần đề như: giới thiệu định dạng CSS, các cú pháp cơ sở dữ liệu bản cho CSS, áp dụng CSS vào tài liệu HTML, và thiết kế cơ sở dữ liệu bản khi sử dụng css cho định dạng trang web 2. Giới thiệu về CSS CSS là chữ viết tắt của Cascading Style Sheets, nó chỉ đơn thuần là một dạng file text với phần tên mở rộng là .css. Trong Style Sheet này chứa những câu lệnh CSS. Mỗi một lệnh của CSS sẽ định dạng một phần nhất định của HTML ví dụ như: font của chữ, đường viền, màu nền, căn chỉnh hình ảnh v.v.. Trước đây khi chưa có CSS, những người thiết kế web phải trộn lẫn giữa các thành phần trình bày và nội dung với nhau. Nhưng với sự xuất hiện của CSS, người ta có thể tách rời hoàn toàn phần trình bày và nội dung. Giúp cho phần code của trang web cũng gọn hơn và quan trọng hơn cả là dễ chỉnh sửa hơn. Trước khi bắt đầu tìm hiểu thêm về CSS, sinh viên cần tìm hiểu các tiện ích và nét tuyệt với của CSS mang lại trong việc thiết kế web. Ví dụ nếu làm việc với HTML và chúng ta muốn font chữ của toàn bộ trang web là Arial. Chúng ta sẽ phải làm đi làm lại như thế cho tất cả các file .html mà chúng ta có. Nhưng nếu chúng ta sử dụng CSS, thì chúng ta chỉ cần làm một lần và tất cà các trang khác sẽ tự động được thay đổi. 3. Một số đặc điểm của Cascading Style Sheets: - CSS quy định cách hiển thị của các thẻ HTML bằng cách quy định các thuộc tính của các thẻ đó (font chữ, màu sắc). Để cho thuận tiện bạn có thể đặt toàn bộ các thuộc tính của thẻ vào trong một file riêng có phần mở rộng là \".css\" - CSS nó phá vỡ giới hạn trong thiết kế Web, bởi chỉ cần một file CSS có thể cho phép bạn quản lí định dạng và layout trên nhiều trang khác nhau. Các nhà phát triển Web có thể định nghĩa sẵn thuộc tính của một số thẻ HTML nào đó và sau đó nó có thể dùng lại trên nhiều trang khác. Trang 98
Search
Read the Text Version
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
