Web Programming with HTML, XHTML, and CSS Second Edition- P9
Thông tin tài liệu:
Nội dung trích xuất từ tài liệu:
Web Programming with HTML, XHTML, and CSS Second Edition- P9 Chapter 10: Design IssuesWhile using images often makes a menu very distinct from content, you must be careful that your imagesare not so large that they slow down the loading of the site. Figure 10-6 shows an example of using imagesfor navigation within a separate box. Figure 10-6You should take a closer look at how this menu was created; the menu is created inside a element;and the CSS rules for that element specify that it should have a background image that repeats from leftto right. That background only needs to be 1 pixel wide, making the image smaller, and therefore savingthe amount of time that a page takes to load. The background image is also the same height as the imagesthat are used to click on.Inside this element are the images that link to the other pages. When you come to look at the CSSfor this example in a moment, note how there is a rule in there that specifies that images within a linkshould have no border — this is because IE will, by default, add a blue box around such images.Between each image is a spacer image that is a darker line to separate the links if they are butted up nextto each other.Here is the XHTML for this example (ch10_eg06.html): The Used Equipment Exchange Chapter 10: Design Issues And here is the CSS for this example (ch10_eg06.html): body { background-color:#ffffff; font-family:arial, verdana, sans-serif; font-size:12px;} .page {width:700px;} .navigation { background-image:url(images/backdrop.gif); background-repeat:repeat-x;} a img {border:none;} Because all these images are fairly small (and they were saved for the Web using the Save for Web option in Adobe Photoshop), they should not add too much time when downloading the page.If You Use Icons to Represent a Link, Make Sure Everyone WillUnderstand Them Many web sites use images known as icons for links. These icons are images such as a magnifying glass to indicate a search feature. If you are going to use icons, make sure your target audience will understand these images or users will not click them. Many users are familiar with the following icons: ❑ A house to indicate the home page ❑ A magnifying glass to indicate a search feature ❑ An envelope to indicate an e-mail address or link ❑ A question mark to indicate help files If you use icons that are less common, it’s a good idea to add the link in words as well as using the image. (Don’t expect that users will hover over a link to find a tooltip that tells them more about that link.)Menus Must Be Quick and Easy to Read As I have already mentioned, when browsing web pages, most visitors do not really read them — they scan them. Making your menu distinct from the main part of a page (and using bold, a different color, or underlined text for links within the body of a page) will help users scan and register the navigation items more easily. Any words or images you use in a menu must be large enough to read (especially for users who have high screen resolutions that make text appear smaller), and text must contrast well with its background.372 Chapter 10: Design Issues Links should also be short and concise. For example, a link that just reads “Home” is a lot more obvious and easier to read and understand than a link that says “Front door.” Having said that, a couple of simple words are always better than one word of jargon.Grouping of Menu Items Must Be Logical If you have a lot of pages, you might well decide to create submenus. If so, it’s very important that you group menu items so that visitors will understand where to look for something without having to search through several sections or categories. If you do use submenus, you should make sure that they are clearly distinguishable from the main menu, and that it is clear which items belong to which section. Submenus often make use of a different colored background, smaller font, an indented position, or an alternate color to show they are distinct from the main menu. For example, if you are creating a site for a computer store, you might create a grouping something like this with three main sections, each containing its own subsections: ❑ Computers: Desktop computers, laptop computers ❑ Software: Business software, games ❑ Peripherals: Printers, scanners This would be easier to navigate than an alphabetized menu of all sections.Menus Items Must Be Easy to Select If a menu item is too small or there is not enough space between menu ite ...
Tìm kiếm theo từ khóa liên quan:
phương pháp lập trình lập trình web với html ngôn ngữ lập trình html lập trình xhtmlGợi ý tài liệu liên quan:
-
Giáo trình Lập trình logic trong prolog: Phần 1
114 trang 194 0 0 -
Giáo trình Lập trình C căn bản: Phần 1
64 trang 170 0 0 -
Giáo trình Lập trình C căn bản
135 trang 170 0 0 -
14 trang 134 0 0
-
Bài giảng Phương pháp lập trình: Chương 9 - GV. Từ Thị Xuân Hiền
36 trang 112 0 0 -
Giáo trình lập trình hướng đối tượng - Lê Thị Mỹ Hạnh ĐH Đà Nẵng
165 trang 112 0 0 -
Giáo trình về môn Lập trình C căn bản
131 trang 50 0 0 -
Bài giảng Lập trình hướng đối tượng (dùng JAVA): Chương 1 - Trần Minh Thái
40 trang 41 0 0 -
PHP: The Good Parts: Delivering the Best of PHP- P5
20 trang 36 0 0 -
Bài giảng Lập trình căn bản - Trường CĐ Công nghệ và Nông Lâm Nam Bộ
219 trang 28 0 0 -
Giáo trình Lập trình hướng đối tượng C++
197 trang 28 0 0 -
68 trang 27 0 0
-
Bài giảng Phương pháp lập trình - Chương 4: Mảng
9 trang 26 0 0 -
50 trang 25 0 0
-
50 trang 25 0 0
-
Bài giảng Phương pháp lập trình: Bài 8 - TS. Ngô Hữu Dũng
43 trang 25 0 0 -
50 trang 24 0 0
-
Bài giảng Lập trình hướng đối tượng: Chương 1 - Trần Minh Thái
40 trang 24 0 0 -
Bài giảng lập trình Web - Ts.Vũ Đức Lung - Chương 6
24 trang 24 0 0 -
Bài giảng lập trình Web - Ts.Vũ Đức Lung - Chương 5
45 trang 24 0 0