1. Trang chủ
  2. » Công Nghệ Thông Tin

Tài liệu Professional Web Design: Techniques and Templates- P10 doc

50 455 1

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Định dạng
Số trang 50
Dung lượng 3,22 MB

Nội dung

Game Developing GWX Note Because the photo in the left column of Figure 16.12 is floated, it is not included in the document flow, meaning other elements could pass above and below it, as well as in front of and behind it. If the amount of content is going to change dynamically, this design structure may not be the best solution. The designer may consider not including a footer area and assigning different positions to the <DIV> tags, or the designer may want to use the design technique described in Chapter 12 or 13 that provides a solutio n to creating equal column designs. Centering a Fixed-Width Design Depending on the requirements, some sites need to be designed with liquid lay- outs—that is, they fill the full width of the screen. Yet others require a fixed width. HTML and XHTML used to make the process simple, but with the varied browser support of CSS, the process is a little more involved. One way requires Figure 16.12 If content is decreased in the left column, not only does the right column move below the footer, but the footer moves up. Chapter 16 ■ Tips and Techniques432 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX wrapping two different <DIV> tags around the body. Following are the steps to accomplish this task: 1. Add a rule to the style sheet that centers the fixed-width design, which is set at 770 pixels for this example. This rule centers the body for IE 5 and 5.5. It would be extremely rare for this code still to be necessary, but it doesn’t hurt to explain its use. #a5-body-center { text-align:center; } 2. Add a second rule that sets the text-align property to left, assigns the left and right margins to auto, and defines the positioning as relative. Setting the positioning to relative will allow the design to be positioned relative to the <DIV> tag in which it is nested. The auto value of the margins will tell the browser to set the margins evenly on both sides, thus centering the code. The text-align:left; code is added because the a5-body-center rule that was added centers not only the body, but also the text in that container, by inheritance. #a5-body-center { text-align:center; } #a5-body { position: absolute; left:0px; top:0px; width:770px; text-align:left; } 3. Add the two <DIV> tags around the code between the <BODY> tags in the XHTML page. Listing 16.5 is the code that was used to create Figure 16.10. Listing 16.5 Code for Figure 16.10 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional. dtd"> <html><head><title>Fixed-Width Design</title> Centering a Fixed-Width Design 433 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> html, body { margin:0px; padding:0px; font: 13px Arial, Helvetica, sans-serif; color:#000000; background:#ffffff; } #a5-body-center { text-align:center; } #a5-body { position: relative; margin-left:auto; margin-right:auto; width:770px; text-align:left; } #a5-header { text-align:center; color:#ffffff; width:100%; padding-top:15px; background:black; height:180px; } #a5-main-content { position:absolute; left:0px; top:180px; color:#ffffff; width:100%; background:#89766F; border:0px solid #ffffff; } #a5-column-left { position:relative; left:0px; top:0px; color:#ffffff; Chapter 16 ■ Tips and Techniques434 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX padding:10px; margin-right:232px; background:#7A7878; border:0px solid #ffffff; } #a5-column-right { position:absolute; right:0px; top:0px; color:#000000; height:100%; width:232px; background:#B0ADAD; border:0px solid #ffffff; } #a5-footer { position:relative; left:0px; top:0px; font: 10px Arial, Helvetica, sans-serif; padding:5px; color:#ffffff; background:#000000; border:0px solid #ffffff; } </style> </head> <body> <div id="a5-body-center"> <div id="a5-body"> <div id="a5-header"> <div><img width="750" height="150" alt="" border="0" /></div> </div> <div id="a5-main-content"> <div id="a5-column-left"> Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse <span style="position: relative;float:left;padding:1 0px;"><img src="images/photo_beanie_dadd y.jpg" width="200" height="171" alt="" border="0" /></span>molestie consequat, vel illum dolore eu feugiat nulla Centering a Fixed-Width Design 435 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat <br /><br /> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. <br /><br /> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </div> <div id="a5-column-right"> <div style="padding:10px;"> Ut wisi enim ad minim veniam, quis nostrud exerci tation. <br /> <div style="text-align:center;padding:15px 0px 10px 0px;"><img src="images/photo_beanie_right.jpg" width="100" height="150" alt="" border="0" /></div> </div> </div> <div id="a5-footer"> † copyright 2005 | A5design, LLC | all rights reserved&nbsp;&nbsp; </div> </div> </div> </div> </body> </html> Chapter 16 ■ Tips and Techniques436 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX When the page is rendered, it would look like Figure 16.13. Notice that there is an even amount of space on both sides of the design . Creating a Liquid Design Because of the way the fixed design was created, modifying it to be a liquid design is very simple. All the designer needs to do is change the 770px value of the a5-body rule to 100%. This is because the left column will always try to fill the screen because it is assigned relative positioning and it is included in a <DIV> tag, which together default s to 100% width . There are two main reasons the design works the way it does: ■ The left column has relative positioning assigned to it, so it can expand and contract, depending on the resolution or width of the screen. ■ While the positioning will stretch to 100% by default, it can also be con- trolled with the margin property. In this case, the margin-right property is set to 232px, which means the column will stretch within 232 pixels of the right side of the screen but no further. Figure 16.13 Fixed-width design that is centered using CSS. Creating a Liquid Design 437 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX Figure 16.14 shows how the page shown in Figure 16.13 expands when the value of the a5-body rule is changed from 770p x to 100%. Chapters 9, 10, 11, 12, and 13 provide additional examples and explanations of how designs can be created to be liquid. Creating a Line When XHTML tables were used to add lines in content, the designer could repeat a background image sideways along a table row or simply place an image in the table row, among other solutions. CSS-based layout made this much more simple. Because <DIV> tags are used so frequently in page layout, the tool for which to create a line, many times, is already there, and if it’s not, it’s easy to add. The code in Listing 16.6 shows two lines of text, representing paragraphs, which are separated by two <BR /> tags (see Figure 16.15). Listing 16.6 Code Before <DIV> Tag Is Wrapped Around This would be the text in the top paragraph of the page. <br /><br /> Figure 16.14 Liquid design that fills the full width of the screen. Chapter 16 ■ Tips and Techniques438 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX This would be the text in the bottom paragraph of the page. For a designer to add the line that is between the two paragraphs in Figure 16.16, a <DIV> tag can simply be wrapped around the top or bottom paragraph, with a basic style assigned to it (see Listing 16.7). Listing16.7 CodethatCreatesaLineUsinga<DIV> Tag <div style="width:260px;margin:0px 0px 5px 0px;padding:0px 0px 10px 0px; border-bottom:1px solid #000000;"> This text represents the top paragraph. </div> This text represents the bottom paragraph. Things to note about the style that is added to the <DIV> tag, resulting in the layout in Figure 16.16. 1. The width rule is added to control the width of the content. If the width is not set, the <DIV> tag would run as wide as the page allowed. 2. The margin rule is added to provide 5 pixels of separation between the line and the second paragraph. It basically is setting half the height that was created when the two <BR/> tags were added. 3. The padding rule sets the space between the first paragraph and the line, which is really the bottom border of the paragraph. 4. The border-bottom rule sets the border width to 1 px and the color to black. Figure 16.15 Two paragraphs separated by <br /> tags. Figure 16.16 Line that is added between the two paragraphs in Figure 16.15. Creating a Line 439 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX Using Background Images as Design Elements There were all types of issues when designing with background images back when browsers such as Netscape 4.7 were the standard. These days, however, CSS-based design allows for the full use of background images, which includes layering nested background images on top of one another. This change allows for more design possibilities. One example is to use a background image for the entire site. While this has always been available with XHTML table-based design, there is no longer concern for the designer of running into browser issues, as more and more background images are nested inside one another. Figure 16.17 shows how background images can be used more extensively. There are three things to note about the design: ■ The background in the right column (right sid e of the infinity loop) is broken up from the background in the left column (left side of the loop, along with the woman). This is because the right image is best saved as a GIF file, while the left image should be saved as a JPG. Figure 16.17 Design that uses background images as menu bullets, images for the left and right columns, and a repeating image for the entire page. Copyright † 2006 Innergy Coaching, LLC. Used with permission. Chapter 16 ■ Tips and Techniques440 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX ■ The entire left column of color is repeated as a background image in the page’s <BODY> tag, so it will repeat endlessly down the left-hand side. It repeats und erneath the background image of the left column. Because the bottom of the left background image looks exactly like the page background image, there is seamless repeating. ■ Each menu item is assigned a background image to its left that serves as a bullet. The bullet changes when the menu item is moused over, which is explained in the next section. Coding CSS Mouseovers Menu mouseovers used to require JavaScript to perform a simple image switch. Now, CSS allows the designer to simply replace the background image by as- signing a different image when the user mouses over an item. The three-step process is as follows: 1. The designer creates a rule that will be used to display the menu item when it is not moused over. The two main properties to pay attention to in the following code are display and background. The display property, when assigned a block value, tells the browser to vertically stack each hyperlinked menu item when it is included inside the a5-menu container. The background property, with its values, determines what image will be used for the menu item, including how it will be positioned and whether it will be repeated. In this example, the image will not be repeated, and it will be positioned in the top-left corner of the block. #a5-menu a { display: block; background: url(images/bg-menu-off.gif) no-repeat 0px 0px; text-decoration:none; color:#ffffff; font-weight:normal; padding: 3px 5px 2px 25px; } 2. The designer then adds the hover element to the hyperlinks. When the user mouses over a link, the background image is changed from bg-menu-off. gif to bg-menu-on.gif, with the same positioning of the image. The font is turned bold, so not only the image, but also the changing text color, iden- tifies the link. Coding CSS Mouseovers 441 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... Developing GWX 463 464 Chapter 16 ■ Tips and Techniques Summary Understanding common roadblocks and issues with designing Web sites can make a designer or developer much more efficient If a designer creates enough sites, she will run into most of the issues outlined and hopefully be able to easily work through them with the help of this chapter Some of the tips and techniques in this chapter included coding... quickly becoming the standard for many designers Remembering the Order of Margin and Padding Shortcuts Writing shorthand CSS properties and values makes designing and managing sites much easier Sometimes remembering the order of the shorthand methods, however, is not always as easy There is a visual reminder for the value order of the two most commonly used properties: margin and padding Because the... browser and refresh it to see how the site appears By using some method of consistency, the designer will recall more readily how each browser handles the nuances of CSS Creating Source Image Files That Can Be Easily Customized and Resaved Most Web sites are in continual evolution That is, they are constantly undergoing changes and revisions While physically making changes to the source code of Web pages... Around that time, other search engines, such as MSN, Excite, Web Crawler, Lycos, AltaVista, Hotbot, and AskJeeves came into existence For years, Yahoo, MSN, and combinations of these previous Web sites were what designers focused on optimizing their sites for It was a much different landscape because the designer needed to use a variety of techniques to satisfy the majority of these sites, never knowing... Google has become in Web site development The company not only created AdWords, the Internet’s most successful Pay Per Click advertising program, but it also offers free tools for designers to improve, track, and analyze their Web sites, which, in and of itself, has earned a faithful following A couple of these services, such as Google Analytics, Google Keyword Tool, and Google Website Optimizer are... start ##########- -> we create reasonably priced, highly professional web designs, web sites, web applications, e-newsletters, and other visual, usable, and functional work while we create various custom designs for our clients, our bestselling, internationally published designs are a good place to start to not only understand our design skills but also to discover we're not a flash-inthe-pan design... consistently ■ Allow for easy and efficient creation, editing, deletion, and downloading of individual menu items The first of these two requirements depends more on the architecture of a site than anything else If the positioning, hierarchy, and naming conventions of sections and subsections of the site’s architecture are intuitive, then the menu will only help capitalize on such planning and forethought The... it has not evolved nearly as much as Web site development since the 90s—at least from a designer’s perspective Many of the same basic techniques discussed in this chapter are used by designers and SEO specialists that were common more than a decade ago This chapter provides a basic understanding of SEO at a general level It is no replacement for work conducted by a professional SEO company or a designer... easily be reused in the framework of subsequent pages if the containers are built and mortised correctly Figure 16.33 is a site that reuses the left and top images for the second- and third-level templates, such as the second-level page shown in Figure 16.34 Figure 16.33 Site that reuses the left and top images on second- and third-level templates Copyright † 2002 by Knowledge Workers, Inc All rights... (SEO) a site would rank in the ever-changing and competitive search engine environment Since the domination of the search engine world by Google in the late 90s and early 2000s, the landscape and SEO methods used by designers, domestically, have been simplified drastically Today, the main search engines a designer needs to be concerned with are Google, Yahoo, and Bing, which has replaced MSN as Microsoft’s . left and right columns, and a repeating image for the entire page. Copyright † 2006 Innergy Coaching, LLC. Used with permission. Chapter 16 ■ Tips and Techniques4 40 Please. many designers. Remembering the Order of Margin and Padding Shortcuts Writing shorthand CSS properties and values makes designing and managing sites much easier. Sometimes

Ngày đăng: 26/01/2014, 17:20