Tài liệu Professional Web Design: Techniques and Templates- P9 pdf

Game Developing GWX <input type="text" name="purchase_date" id="purchase_dat e" style="width:70px;"/><span style="padding-left:10px;"> <img src="images/icon-calendar.gif" width="16" height="15" alt="" border="0" /></span> </div> Adding the Comments Row The code required to produce the Comments row is almost identical to several of the other rows, barring one difference—the row includes the <TEXTAREA> tag, which does not force the height of the row for compliant browsers, such as Firefox. The designer, therefore, needs to force the height of the row. One way to do so is to add a local style to the parent <DIV>, shown in Listing 14.9. Without declaring the height of the row, the row would look like the right side of Figure 14.9. The left side illustrates what the row looks like if a height is defined. Listing 14.9 XHTML and CSS Code for Comments Row <div class="a5-row-1" style="height:80px;"> <label title="Comments" for="comments">Comments:</label> <textarea name="comments" id="comments" rows="3" cols="40"> </textarea> </div> Figure 14.9 The Comments row and how it will appear in compliant browsers when a height is and isn't defined when using the <TEXTAREA> tag. Chapter 14 ■ Case Study: A CSS Form382 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX Adding the Options to Select Rows The Options to Select rows add two more situations a designer may or may not come across. The first is to include only a section title and nothing more in a row. This is accomplished by merely not including a form field. The second is a little more involved. It requires two things: (1) define appropriate margins for posi- tioning in the parent <DIV>, which, in this case, sets the bottom margin to 20 pixels and the left margin to 80 pixels; and (2) use a table to lay out the form fields in columns and rows. While the latter could be accomplished with CSS, the more simple and straightforward route is to use a table. The code in Listing 14.10 shows how simple the table needs to be. Listing 14.10 XHTML and CSS Code for Options to Select Row <div class="a5-row-1"> <label>Options To Select:</label> </div> <div style="margin:0px 0px 20px 80px;"> <table cellspacing="0" cellpadding="3" border="0"> <tr> <td> <input type="checkbox" name="sample_text_1" id="sample_text_ 1" /> <label title="Sample Text Option 1" for="sample_text_1">Sample Text Option 1</label> </td> <td> <input type="checkbox" name="sample_text_2" id="sample_text_ 2" /> <label title="Sample Text Option 2" for="sample_text_2"> Sample Text Option 2</label> </td> <td> <input type="checkbox" name="sample_text_3" id="sample_text_ 3" /> <label title="Sample Text Option 3" for="sample_text_3">Sample Text Option 3</label> </td> </tr> <tr> <td> <input type="checkbox" name="sample_text_4" id="sample_text_ 4" /> <label title="Sample Text Option 4" for="sample_text_4"> Sample Text Option 4</label> </td> Building the Form Row by Row 383 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX <td> <input type="checkbox" name="sample_text_5" id="sample_text_5" /> <label title="Sample Text Option 5" for="sample_text_5"> Sample Text Option 5</label> </td> <td> <input type="checkbox" name="sample_text_6" id="sample_text_6" /> <label title="Sample Text Option 6" for="sample_text_6">Sample Text Option 6</label> </td> </tr> </table> </div> Adding the Submit and Cancel Buttons The final row contains the Submit and Cancel buttons. There are several things to note about this section of code: (1) a local style is added to the <DIV> to provide 20 pixels of padding on the top and bottom, (2) the <LABEL> tag has &nbsp; added so that all browsers recognize the tag and account for its width, and (3) the two but- tons are placed side by side without any additional styling. The Cancel button calls an image, while the Submit button is generated with XHTML (see Listing 14.11). Listing 14.11 XHTML and CSS Code for Submit and Cancel Buttons <div class="a5-row-1" style="padding:20px 0px 20px 0px;"> <label>&nbsp;</label > <input type="submit" value="submit" /> <input type="image" src="images/button-cancel.gif" /> </div> The Final Product When all the code and images are added, the final 13-row form only needs the back-end functionality added to it. Figure 14.10 is the visual representation of the final code, which is shown in Listing 14.12. Chapter 14 ■ Case Study: A CSS Form384 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX Listing 14.12 XHTML and CSS Code for Completed Form <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title></title> <style type="text/css"> html, body { margin:0px; padding:10px; font: 9.8pt arial, helvetica, sans-serif; color:#000000; } .a5-form { margin:0px 0px 0px 0px; } .a5-required-field { Figure 14.10 How the final form appears prior to being added to the design (see Figure 14.1). Building the Form Row by Row 385 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX color:#D60000; } .a5-disabled-field { background:#7ED0D4; } .a5-disabled-checkbox { background:#7ED0D4; voice-family:"\"}\""; voice-family:inherit; } html>body .a5-disabled-checkbox { padding-top:3px; } .a5-row-1 { height:30px; } .a5-row-1 label { float: left; width: 220px; text-align: right; padding:0px 30px 0px 0px; } </style> </head> <body> <form action="menu-item-3.cfm" method="post" name="sample_form" class="a5-form"> <div class="a5-row-1" style="margin:10px 0px 0px 0px;"> Required: <span class="a5-required-field">* </span> </div> <div class="a5-row-1"> <label title="First Name" for="first_name">First Name: <span class="a5-required-field" >*</span></label> <input type="text" name="first_name" id="first_name" /> </div> <div class="a5-row-1"> <label title="Last Name" for="last_name">Last Name:</label> <input type="text" name="last_name" id="last_name" disabled="disabled" class="a5-disabled-field" /> </div> Chapter 14 ■ Case Study: A CSS Form386 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX <div class="a5-row-1"> <label title="Contact Name">Contact Name: <span class="a5-required- field">*</span></labe l> <strong>A5design</strong > </div> <div class="a5-row-1"> <label title="Region" for="region">Region: <span class="a5-required- field">*</span></labe l> <select name="region" id="region"> <option value="This is sample text">This is sample text.</option> <option>This is longer sample text</option> </select> </div> <div class="a5-row-1"> <label title="Language" for="language">Language:</label> <select name="language" id="language" disabled="disabled" class= "a5-disabled- field"> <option>This is sample text.</option> </select> </div> <div class="a5-row-1"> <label title="Status" for="status">Status: <span class="a5-required- field">*</span></labe l> <input type="checkbox" name="status" id="status" /> </div> <div class="a5-row-1"> <label title="Unlimited" for="unlimited">Unlimited:</label> <span class="a5-disabled-checkbox" ><input type="checkbox" name="unlimited" id="unlimited" disabled="disabled" /></span> </div> <div class="a5-row-1"> <label title="Purchase Date" for="purchase_date">Purchase Date: </label> <input type="text" name="purchase_date" id="purchase_date" style= "width:70px;"/><span style="padding-left:10px;"><img src="images/ icon-calendar.gif" width="16" height="15" alt="" border="0" /></span> </div> <div class="a5-row-1" style="height:80px;"> <label title="Comments" for="comments">Comments:</label> <textarea name="comments" id="comments" rows="3" cols="40"></textarea> </div> Building the Form Row by Row 387 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX <div class="a5-row-1"> <label>Options To Select:</label> </div> <div style="margin:0px 0px 20px 80px;"> <table cellspacing="0" cellpadding="3" border="0"> <tr> <td> <input type="checkbox" name="sample_text_1" id="sample_text_1" /> <label title="Sample Text Option 1" for="sample_text_1">Sample Text Option 1</label> </td> <td> <input type="checkbox" name="sample_text_2" id="sample_text_2" /> <label title="Sample Text Option 2" for="sample_text_2">Sample Text Option 2</label> </td> <td> <input type="checkbox" name="sample_text_3" id="sample_text_3" /> <label title="Sample Text Option 3" for="sample_text_3">Sample Text Option 3</label> </td> </tr> <tr> <td> <input type="checkbox" name="sample_text_4" id="sample_text_4" /> <label title="Sample Text Option 4" for="sample_text_4">Sample Text Option 4</label> </td> <td> <input type="checkbox" name="sample_text_5" id="sample_text_5" / > <lab el title="Sample Text Option 5" for="sample_text_5">Sample Text Option 5</label> </td> <td> <input type="checkbox" name="sample_text_6" id="sample_text_6" /> <label title="Sample Text Option 6" for="sample_text_6">Sample Text Option 6</label> </td> </tr> </table> </div> Chapter 14 ■ Case Study: A CSS Form388 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX <div class="a5-row-1" style="padding:20px 0px 20px 0px;"> <label>&nbsp;</label> <input type="submit" value="submit" /> <input type="image" src="images/button-cancel.gif" /> </div> </form> </body> </html> Summary Creating a form with CSS is not difficult once the designer understands the basic structure of the layout. After rules have been created for each row and the <LABEL> text, there are only a few nuances that need to be learned to control the form fields and the <DIV> tags that contain them. When these are understood, it becomes much easier for the designer to satisfy the majority of form requests he will come across using the methods discussed in this chapter. Even if a form needs to be more involved, the basics that are explained will provide a strong foundation for such a request. Summary 389 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. This page intentionally left blank Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWXGame Developing GWX chapter 15 Case Study: Low-Content XHTML Template Although Web sites are no longer being built using nested XHTML tables, there are still uses for this design technique. Sometimes the user will need to position elements in a design that CSS will simply not accomplish because of its incon- sistent support among the major browsers. The most common reason for still using this layout method is for creating email templates. CSS is supported only sporadically and definitely not consistently among the various email programs and versions that continue to exist. Tables, however, are supported quite consistently, which is why this chapter is still included in this updated edition. Originally included to explain how to create a table-driven Web design, this chapter is now included to explain how to create XHTML table-driven emails. The fact of the matter is that many email templates are nothing more than less- complicated versions of Web design layouts, so the crossover works quite well. Just for reference, the design explained in this chapter is the very first design in the first edition of the book—design 1. Note It is important that all hyperlinks and image source paths are assigned absolute paths. For example, instead of src=" images/spacer.gif", the designer should write the code as src="http://www.a5design.com/images/spacer.gif." This is also true for hyperlinks because without an absolute path, the hyperlink will look for the file on the user's computer, where it won't exist. 391 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... controllable, advanced layout Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Game Developing GWX 409 This page intentionally left blank Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark chapter 16 Tips and Techniques When learning how to build Web sites, the most time-consuming aspect is not always creating the look and feel of the site in image editing... company’s Web site, providing yet another way for the user to get to the company’s site Understanding the Strengths and Weaknesses of the Chosen Design As with any design, there are going to be strengths and weaknesses Following is a list of the strengths of Figure 15.1: 1 The page has a fast download (26 KB): This is because a large amount of white space is used, the image is black and white, and the... noncompliant browsers (IE 5 and 5.5) and compliant browsers Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Game Developing GWX Tantek or Box Model Hack To accomplish this, a designer needs to resort to various work-arounds, such as branching JavaScript Many designers, however, use the Tantek hack, which feeds different values for IE 5 and 5.5, IE 6, and compliant browsers The... understand about the table: 1 The title and logo image are saved as one image that spans the full width of the table Because the image uses few colors, it is possible to save it as a small GIF (arrow 1 in Figure 15.11) Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Game Developing GWX Creating the Content (Right-Area) Table Figure 15.11 Content table with images and text... it is possible they could be compressed even more Figure 15.1 Site designed for a low amount of content Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Game Developing GWX Understanding the Strengths and Weaknesses of the Chosen Design 2 Both the menu and content areas are flexible: Despite more than half the design being made up of images, it is still flexible If the client... Developing GWX 412 Chapter 16 ■ Tips and Techniques of pixels Thus, if the width of the box is set to 200px, with the left and right padding properties set to 50px, which adds 50 pixels to both the left and right sides, the total width of the box would grow to 300 pixels (see Figure 16.1) Note While newer browsers interpret the width property to W3C specifications, IE 5 and 5.5 do not Rather than add the... creating such a design rather than to provide a working example Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Game Developing GWX 393 394 Chapter 15 ■ Case Study: Low-Content XHTML Template Adding Guides and Slices Creating guides and slices are the same for this chapter as with Chapters 9, 10, 11, 12, and 13 When adding such elements, there are several aspects of this design... removed Copyright † 2006 Emerge Colorado Used with permission Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Game Developing GWX 415 416 Chapter 16 ■ Tips and Techniques Note The Tantek hack is not always necessary Sometimes the CSS code needs only to be cleaned up or reworked to accomplish the same look and feel Note While the Tantek hack is not considered pure form, the W3C... 15.1.) If, on the other hand, the client needs to add another section, this can also be easily accomplished While the content area is limited in size, the area itself can be easily customized to accommodate different layouts 3 The overall layout of the design is not complicated: Edits and revisions are simple 4 The parent table allows for the words ‘‘ENGULF them’’ and the hand to be edited separately... GIFs are used in the cells that make up the black lines The advantage of the lines being cells is that they will expand vertically as the text in the middle cell expands (arrow 5) One of the GIFs has its vertical height set to "101" to ensure Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Game Developing GWX 407 408 Chapter 15 ■ Case Study: Low-Content XHTML Template that . purchase PDF Split-Merge on www.verypdf.com to remove this watermark. This page intentionally left blank Please purchase PDF Split-Merge on www.verypdf.com. working example. Understanding the Strengths and Weaknesses of the Chosen Design 393 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game