Danh mục

Web Programming with HTML, XHTML, and CSS Second Edition- P9

Số trang: 50      Loại file: pdf      Dung lượng: 1.05 MB      Lượt xem: 8      Lượt tải: 0    
Thư viện của tui

Phí tải xuống: 19,000 VND Tải xuống file đầy đủ (50 trang) 0
Xem trước 5 trang đầu tiên của tài liệu này:

Thông tin tài liệu:

Web Programming with HTML, XHTML, and CSS Second Edition- P9: Điều này bắt đầu hướng dẫn nhận xét HTML và cũng giới thiệu đến bạn bằng cách sử dụng XHTML cho cấu trúc của một trang web và cascading style sheets (CSS) để kiểm soát như thế nào một tài liệu sẽ xuất hiện trên một trang web. Bạn se tìm hiểu làm thế nào để tận dụng lợi thế của các tính năng mới của các trình duyệt trong khi đảm bảo rằng các trang của bạn vẫn làm việc ở cũ, nhưng phổ biến, các trình duyệt. Bằng...
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ài liệu được xem nhiều:

Gợi ý tài liệu liên quan: