Thông tin tài liệu
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
</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
Xem thêm: Tài liệu Professional Web Design: Techniques and Templates- P10 doc, Tài liệu Professional Web Design: Techniques and Templates- P10 doc
