Tài liệu Web Programming with HTML, XHTML, and CSS- P9 pdf

While using images often makes a menu very distinct from content, you must be careful that your images are not so large that they slow down the loading of the site. Figure 10-6 shows an example of using images for navigation within a separate box. Figure 10-6 You should take a closer look at how this menu was created; the menu is created inside a <div> element; and the CSS rules for that element specify that it should have a background image that repeats from left to right. That background only needs to be 1 pixel wide, making the image smaller, and therefore saving the amount of time that a page takes to load. The background image is also the same height as the images that are used to click on. Inside this <div> element are the images that link to the other pages. When you come to look at the CSS for this example in a moment, note how there is a rule in there that specifies that images within a link should 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 next to each other. Here is the XHTML for this example ( ch10_eg06.html): <div class=”page”> <h1>The Used Equipment Exchange</h1> <div class=”navigation”> <img src=”images/navigation_divider.gif” alt=”” width=”2” height=”16” /> <a href=”/” title=”Home page”> <img src=”images/navigation_home.gif” alt=”Home” width=”38” height=”16” </a> <img src=”images/navigation_divider.gif” alt=”” width=”2” height=”16” /> <a href=”stocklList.aspx” title=”Stock List”> <img src=”images/navigation_stock_list.gif” alt=”Stock List” width=”70” height=”16” /> </a> <img src=”images/navigation_divider.gif” alt=”” width=”2” height=”16” /> <a href=”equipmentWanted.aspx” title=”Equipment Wanted”> <img src=”images/navigation_wanted.gif” alt=”Wanted” width=”54” height=”16” /> </a> <img src=”images/navigation_divider.gif” alt=”” width=”2” height=”16” /> 371 Chapter 10: Design Issues 59313c10.qxd:WroxPro 3/23/08 11:57 AM Page 371 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. <a href=”contactUs.aspx” title=”Contact Us”> <img src=”images/navigation_contact_us.gif” alt=”Contact Us” width=”75” height=”16” /> </a> <img src=”images/navigation_divider.gif” alt=”” width=”2” height=”16” /> </div> </div> </body> 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 Will Understand 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 59313c10.qxd:WroxPro 3/23/08 11:57 AM Page 372 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 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 items, it can be very difficult for some users to select the correct menu item. A user with a dodgy mouse, poor eyesight, or difficulties with motor control may have trouble hitting a small or tight target, and even those most able to control a point- ing device will find it easier to hit larger targets. Furthermore, most users can find moving targets either irritating or hard to hit — and they are best avoided in most designs. When you are creating a menu, you need to make sure it will work on all the main browsers. As the Web has grown up, there have been many menus (particularly drop-down menus that use JavaScript) that do not work even on some of the more common browsers. There are two ways around this problem: ❑ Test your menu on many different types of browsers (particularly older versions). ❑ Avoid complex code in menus. Drop-down or pop-up menus, which make new items appear as you hover your mouse over a heading, tend to be particularly problematic for two reasons: ❑ They are often written in JavaScript, which is implemented slightly differently in the various browsers — particularly the older ones. So while a menu might appear to work fine in the designer’s browser, some other visitors will simply not be able to navigate the site. ❑ They can be too sensitive or move too quickly for users to select the item they require. 373 Chapter 10: Design Issues 59313c10.qxd:WroxPro 3/23/08 11:57 AM Page 373 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Over the years, I have come across many sites that have attempted to implement drop-down menus that simply do not work in my browser. As a result, and for usability reasons, I now avoid these menus completely. Some designers play with more experimental types of menu (particularly in Flash) that often require quite dexterous control — these menus often move and slide between items as the user moves the mouse to the left or right when hovering over an item. While such menus that require fine control of a pointing device often look great on experimental sites, they can exclude those who do not have excellent control over their pointing device, and are therefore best left to the realms of more experimental sites than regular business sites. Menus Must Load Quickly When creating a menu you should not expect that every visitor to your site has a fast Internet connection — some visitors may still be on dial-up connections or in an office building with a lot of users on the same con- nection. Although connection speeds are constantly improving, your menu should load within the first cou- ple of seconds. If your menu takes longer than around eight seconds to load, many users will think that the page is not loading or that the browser has frozen — they will try to reload the page or, even worse, click their Back button or go to another page. The loading speed is particularly important for designers who use graphics or Flash in their menus (plain text loads very quickly). If you want an image to change when the user rolls his mouse over an image to make it appear highlighted, then your loading time can double (as a second image is required for each image that the user rolls over). Note that some browsers require the content of a table to load completely before displaying the table, so if you are putting images in a table, users might have to wait quite a while for a page to load. Menus Must Be Consistent Across a Site The more pages a site contains, the more navigation items you are going to require. As soon as you have to introduce submenus, the navigation becomes more complicated and will vary from page to page. It is very important that the primary navigation remains consistent across all pages. The submenus in each section of your site should be in the same position on each page and have a similar look and feel, so that users know exactly where to go to navigate the site. Links In addition to the menus your visitors will be using to navigate the site, many web pages contain other hyperlinks in the text that makes up the body of the document. This short section addresses two topics regarding links that are not part of the main menu: ❑ Text links ❑ Images as links 374 Chapter 10: Design Issues 59313c10.qxd:WroxPro 3/23/08 11:57 AM Page 374 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Text Links By default, text links tend to be blue and underlined. Some experts on usability suggest that all links should be left to their default appearance. However, from your experience of the Web, you probably know that using a color that’s clearly different from the main text makes it easy to tell what text makes up a link. As you saw in Chapter 7, you can change the appearance of links as a user hovers over them and when a user has already visited them. Here is a quick reminder of how you change the appearance of links using CSS ( ch10_eg07.css): a {font-weight:bold; color:#ff0000; text-decoration:none;} a:hover {color:#FF9900; text-decoration:underline; background-color:#f9f0f0;} a:visited {color:#990000;} As users hover over links, these links will be underlined, change color, and gain a background color. The visited links will be in a different shade reminding users where they have been. You can see this best if you run the example available with the download code for the chapter. It is generally a bad idea to use a different weight of text when a user hovers over a link because this changes the width of the font, making it hard to read and changing the width of the line. Images as Links Images are often used as links in menus, advertisements, photos to click on, graphical icons, and so on. Whenever you use an image as a link you should use two attributes on the image: ❑ alt =”description of image or text on image”: Use this to tell users who cannot see the image what the image is of or what it says. ❑ title=”where the link will take the user”: Use this to show users a tooltip that says where the link will take them; this is also used by screen readers. If you do not use CSS to control the border of images that are links (and set them to “no border”), you should also add the border attribute: ❑ border=”0”: If you don’t use CSS to control borders or this attribute you will get a border around the image in many browsers, which can look unsightly. You saw an example of using images as links earlier in the chapter ( ch10_eg06.html). In Chapter 12, you’ll see an example of using JavaScript to create what are known as rollover images, or images that change as the user hovers over them. Site Search Features The third way a user can navigate your site is by using a search feature. A search feature allows users to immediately look for a keyword (or words) that relate to the information they are trying to find from your 375 Chapter 10: Design Issues 59313c10.qxd:WroxPro 3/23/08 11:57 AM Page 375 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. site. Searching can save users from having to learn your scheme for navigating the site and offers another way to find the information if they are having difficulty finding what they came for. Search Features Make Sites More Usable Search features are increasingly important as your sites grow. If you have only a few pages then your menu should be rather easy to understand anyway. However, larger sites, which may incorporate sub- menus where not all options are featured on every page, can really benefit from this addition. There are many ways in which you can implement a search feature on your site. While some methods require fairly advanced programming experience, there are ways in which you can add a fairly simple search feature. Large commercial sites, where the content is stored in a database, can use programming commands called queries to ask the database which pages contain the terms a user searched for, or they can use a special indexing application to index the site and make the search facilities available. For sites that do not use databases or indexing tools, the easiest way to add a search feature to your site is to use a third-party search utility to index your site for you. These services also give you the code to create a search box that will send queries to the service’s site. When visitors to your site use a search box, their query gets sent to the server of the company offering the search service, and the server will then return the answers to the user on your behalf. The best-known company to offer this kind of service is Google, which does it for free at the time of this writing. (Google makes its revenue from supplying ads with the search results — but as you can see from Figure 10-7, these are not intrusive; they appear only on the right side of the results page, as they do when you send a query to Google.com.) Adding a Google Search to Your Site Google, which is currently the most widely used search engine on the Internet, offers a very powerful and flexible service whereby you can use its search engine to provide a search feature on your own site. At the time of this writing you have to register in order to use the service. However, the instructions and setup on the site are quite simple and the service is free. Figure 10-7 shows you how an arts and music site called Neumu.net has a small search box underneath the navigation bar. When a visitor to this site searches the Neumu site, the request is sent to Google, which then generates a page with items from Neumu containing those words and sends it to the user. Obviously, the results point back to the Neumu site, as you can see in Figure 10-8. You can see the code for the search box by selecting View Source on the menu. 376 Chapter 10: Design Issues 59313c10.qxd:WroxPro 3/23/08 11:57 AM Page 376 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Another site that offers a free search service for a limited number of pages is www.Atomz.com, but it does charge for larger sites. Figure 10-7 Remember that you cannot just copy this code; you need to register for the service yourself. 377 Chapter 10: Design Issues 59313c10.qxd:WroxPro 3/23/08 11:57 AM Page 377 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Figure 10-8 Shading Multiple Rows of a Table When dealing with tables that contain multiple rows of information, you can make it easier for visitors to follow the rows of the tables if you alternate the background color of the rows very slightly. Figure 10-9 shows you an example of a table that has alternating colors for each row. This was achieved using odd and even classes on rows like so (ch10_eg08.html): <table> <tr> <th>Item</th> <th>Description</th> <th>Cost</th> 378 Chapter 10: Design Issues 59313c10.qxd:WroxPro 3/23/08 11:57 AM Page 378 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. <th>Subtotal</th> </tr> <tr class=”even”> <td>Imation CD-R 25pk</td> <td>Blank CDs 25pk 700mb data and audio</td> <td>16.99</td> <td>16.99</td> </tr> <tr class=”odd”> <td>Biro</td> <td>Bic biro black</td> <td>.25</td> <td>17.24</td> </tr> <tr class=”even”> <td>Envelopes</td> <td>25 pack DL size brown</td> <td>2.50</td> <td>19.74</td> </tr> </table> Figure 10-9 Here is the CSS that goes with this example: body{ color:#000000; background-color:#ffffff; font-family:arial, verdana, sans-serif; font-size:12pt;} th {font-weight:bold; text-align:left; background-color:#fff336;} .odd {background-color:#d6d6d6;} .even {background-color:#ffffff;} Remember that whatever background colors you use, there must be a good contrast between the back- ground and the text in order for the user to be able to read it easily. The very light gray in this example is a good example of a color that does not dramatically affect the readability of the table itself. 379 Chapter 10: Design Issues 59313c10.qxd:WroxPro 3/23/08 11:57 AM Page 379 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Forms I have yet to meet anyone who enjoys filling in forms — especially on the Web. Therefore, if your site must include a form, good design is essential or people will not fill it in (and if you are an online shop that is an essential part of your core business). In this section you are going to learn about the following: ❑ What to do before designing the form ❑ How to design a form, select the right form controls, group them correctly, and label them ❑ How best to lay out a form To work through the points in this section, you will see an example of a basic form that users have to fill in before they can register for an online service. Before Designing the Form Before you address how a form should really look, you need to do some preparation — this is just like the preparation you need to do before you start designing a site, although it should take less time. Listing Required Information First When designing a form, you should start out by creating a complete list of the information you require from a user. You might start with a general list with items such as login details, name, mailing address, and e-mail address, but you need to make sure for each item that you know what makes up these require- ments. For example, do you need to get a user’s first name and last name separately? If so these will have to be separate items on the form. What makes up the address: house number/name, street name, suburb, ZIP Code, and so on? Which ones need to be separated from the others? Here is a list of the information that is needed for our registration form: ❑ Login information ❑ User’s name ❑ User’s address ❑ User’s contact details When this is broken down, the exact information that’s needed is as follows: ❑ Login information: Username and password ❑ Name: First name, last name ❑ Land address: Street address, city ZIP Code ❑ Contact information: E-mail address, area code, phone number When you are creating forms, you should ask only for the information you really need to get a job done. It’s very tempting when gathering information from visitors to ask as many questions as you can; but the longer a form is, the less likely it is that users will complete it. 380 Chapter 10: Design Issues 59313c10.qxd:WroxPro 3/23/08 11:57 AM Page 380 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... learn in this chapter and the next should be enough to help you understand the thousands of free scripts that are available on the Web and allow you to incorporate them into your web pages You should even be able to customize these scripts and write some of your own based upon what you will learn in this and the following chapter In addition, it will give you an idea of what programming is really about... features to documents on the Web, which up to that point had been static Back then you could only enter a URL or click a link and read the page and view the images JavaScript allowed web- page authors to access and manipulate features and content of the document and the browsers used to view them You should note that JavaScript is not the same as Java, which is a bigger programming language (although... library of helpful scripts that you can use in your own pages and also clarify how the basic concepts you learned in this chapter work in practice As you will see, JavaScript gives web developers a programming language for use in web pages and allows them to perform tasks such as the following: ❑ Read elements from documents and write new elements and text into documents ❑ Manipulate or move text ❑ Create... This will order the elements correctly, and users with a screen reader will understand the form Note that the class=”formPrompt” on the elements that are labels is associated with a CSS style sheet rule that indicates the text should be right-aligned in the table This makes for a much neater display on the pages and prevents large gaps between a label and its associated control You can see the... a element to show the boundary and size of the form, and this is given a to describe the purpose of the form ❑ Required information is indicated with a red asterisk that uses color and a symbol to indicate some extra meaning (remember that you should not rely on color alone to convey meaning) 400 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 59313c10.qxd:WroxPro... layout more attractive and less intimidating ❑ The Submit button is moved to the right of the form with the use of a Putting submission buttons to the right follows the way the eye scans a page and indicates moving forward, not backward — and coincides with users’ experience of how the forward button is positioned to the right of the Back button on a browser menu ❑ The text inputs and Submit button... otherwise you will submit the form as normal Since different programming languages often have to work with the same applications or the same kinds of documents, there are things called Application Programming Interfaces, or APIs, that are like a manual of what can be asked using the programming language, and how the reply will be formatted The API for web documents is known as the DOM or document object model... This example is fairly straightforward, but here are some things to note about it: ❑ The form labels and form controls are aligned using a two-column table and CSS This makes the form much neater and easier to read compared with a table where form elements are not aligned ❑ Each form control is labeled with a element ❑ A screen reader should easily be able to read the correct information to the... window (or containing element) Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 385 59313c10.qxd:WroxPro 3/23/08 11:57 AM Page 386 Chapter 10: Design Issues Splitting a Form into Separate Pages Long forms not only put off users but also make the form harder for the user to fill in And if you are writing validation and error handling (such as the error messages to say a form... size=”12” /> The disadvantage with this approach is that the presentation is not very attractive — and gets worse with longer forms — because the form controls are not aligned well with each other, as you can see in Figure 10-14 While elements do require a little extra programming effort, it is generally a good idea to get into the habit of using . 382 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Radio Buttons and Checkboxes Although radio buttons and checkboxes take. correctly, and users with a screen reader will understand the form. Note that the class=”formPrompt” on the <td> elements that are labels is associated with