Thông tin tài liệu
Game Developing GWX
margin-left: auto;
margin-right: auto;*/
text-align:left;
background:#7ED0D4 url(images/bg-right-column.gif) repeat-y right
top;
border:0px solid #000000;
}
#a5-header {
position:relative;
left:0px;
top:0px;
height:117px;
background: url(images/bg-header.gif) repeat-x;
border:1px solid #000000;
}
#a5-column-left {
float:left;
width:181px;
height:auto;
border:1px solid #000000;
}
#a5-body-content {
position:relative;
margin-left:181px;
border:1px solid #000000;
}
#a5-column-center {
position:relative;
left:0px;
top:0px;
margin:23px 0px 0px 20px;
font: bold 10.8pt arial, helvetica, sans-serif;
line-height:19pt;
border:1px solid #000000;
}
#a5-column-right {
float:right;
width:250px;
margin-top:-23px;
text-align:left;
border:1px solid #000000;
}
Chapter 12
■
Case Study: Full-Height Three-Column Layout332
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Game Developing GWX
#a5-footer {
clear:both;
text-align:center;
line-height:35px;
background:#4A7A7D;
border:1px solid #000000;
}
/* ++++++++++ global structure styles end ++++++++++*/
</style>
</head>
<body>
<div id="a5-body-center">
<div id="a5-body">
<div class="a5-bg-left">
<div class="a5-bg-right">
<!- - ###### header start ###### - ->
<div id="a5-header">
Header content
</div>
<!- - ###### header end ###### - ->
<!- - ###### left column start ###### - ->
<div id="a5-column-left">
<span style="color:#ffffff;">Left content</span>
</div>
<!– ###### left column end ###### –>
<!– ###### body content start ###### –>
<div id="a5-body-content">
<div id="a5-column-center">
<div id="a5-column-right">
Right content
</div>
<div style="margin-right:246px;text-align:r ight;">
Center<br />content<br />goes<br />right.<br />
Extra<br />words<
br />are<br
/>added<br />
to<br />extend<br />the<br />content.
</div>
</div>
</div>
<!- - ###### footer start ###### - ->
<div id="a5-footer"><span style="color:#ffffff;">Footer
content</span></div>
Building the Structure 333
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Game Developing GWX
<!- - ###### footer end ###### - ->
<!- - ###### body content end ###### - ->
</div>
</div>
</div>
</div>
</body>
</html>
There are several things to note about the code in Listing 12.2:
■ The a5-header row is the first structural element to be added. It is given
relative positioning so it expands the full width of the page. It also is as-
signed a height of 117 pixels so the container collapses perfectly around the
contents in all browsers. A horizontally repeating background is added to fill
the space between the images and fill extra space if the design is changed to a
liquid format.
■ The a5-column-left rule floats the left column to the left side under the
header row. The width of the column is set to 181 pixels.
Note
The border of the various containers is set to 1 for demonstration purposes for this step. They are
reset to 0 in the final code.
■ The a5-body-content is added under the header area to contain the center
and right columns. It is given relative positioning to fill the width of the
page. It is assigned a left margin of 181 pixels, so any content in it abuts the
left column. One of the tricks to this design is to set the right margin of
the center content at the local level. This ensures that the content does not
cross over into the right column because it is nested inside this container.
The right margin for the center area is set at 246 pixels. To position the
content that will be added to this container, the top margin is set to 23
pixels, and the left is set to 20 pixels.
Note
Technically, the right column is 250 pixels wide, so the right margin of the center content should be
set to 250, instead of 246, to avoid overlapping. In this design, however, 246 pixels is acceptable.
Chapter 12
■
Case Study: Full-Height Three-Column Layout334
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Game Developing GWX
■ As mentioned in the previous note, the a5-col umn-right container is floated
to the right inside the
a5-column-center <DIV>. By floating it to the right
and positioning the
bg-right-column.gif image in the a5-bg-right
container to the right, the background image of the column and the back-
ground of the image will always align with one another, whether the design
is fixed or liquid. Because the center container is given a top margin of 23
pixels, the right column has the top margin set to –23 pixels, so it will be
mortised with the header row. This is why the words ‘‘center content’’ and
‘‘right content’’ are set at different heights in Figure 12.8. The words also
are not aligned vertically because the right column is set to 250 pixels, while
the right margin of the center content is set to 246 pixels, as mentioned
earlier.
■ The a5-footer row is added outside the a5-body- content container,
with the
clear property set to both. This keeps the content in the a5-
left-column
and a5-center-column containers from crossing over the row.
Populating the Header, Footer, and Columns with Content
Once the framework of the design has been added, the designer need only po-
pulate the areas with the appropriate content. Because this styling is very similar
to the previous three case studies, the discussion for Listing 12.3 is limited to
unique aspects of this design. Figure 12.9 is the completed homepage design that
is outlined in Listing 12.3.
Note
The newly added code is bold to differentiate it from the existing code that is being built upon in this
example.
Listing 12.3 Code for Figure 12.9
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitiona l.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en"><head><title>Design 131</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<style type="text/css">
Building the Structure 335
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Game Developing GWX
/* ++++++++++ global general styles start ++++++++++*/
html, body {
margin:0px;
padding:0px;
font: 12.8pt arial, helvetica, sans-serif;
color:#000000;
}
a:link { color:#D0FAFC; }
a:visited { color:#D0FAFC; }
a:active { color:#D0FAFC; }
a:hover { color:#000000; }
a.linklist1:link { text-decoration:none;color:#E9DF40;}
a.linklist1:visited { text-decoration:none;color:#E9DF40;}
a.linklist1:active { text-decoration:none;color:#E9DF40;}
a.linklist1:hover { text-decoration:underline;color:#ffffff;}
.color-1-text-98 {
font-family:arial, helvetica, sans-serif;
Figure 12.9
The completed design after the various containers have been populated and styled.
Chapter 12
■
Case Study: Full-Height Three-Column Layout336
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Game Developing GWX
font-size:9.8pt;
color: #16C7C1;
}
.color-2-text-8 {
font-family:arial, helvetica, sans-serif;
font-size:8pt;
color: #D0FAFC;
}
.color-2-text-10 {
font-family:arial, helvetica, sans-serif;
font-size:10pt;
color: #D0FAFC;
}
.color-2-text-18 {
font-family:arial, helvetica, sans-serif;
font-size:18pt;
color: #D0FAFC;
}
.color-3-text-88 {
font-family:arial, helvetica, sans-serif;
font-size:8.8pt;
color: #ffffff;
}
/* ++++++++++ global general styles end ++++++++++*/
/* ++++++++++ global structure styles start +++++++++ +*/
.a5-bg-left {
width:100%;
margin-bottom:-10px;
background:url(images/bg- left-column.gif) repeat-y left top;
}
.a5-bg-right {
width:100%;
background:url(images/bg- right-column.gif) repeat-y right top;
}
#a5-body-center {
text-align:left;
}
#a5-body {
position: relative;
width: 1000px; /* change this to a specific amount for a fixed
design. E.g., 1000px. Or, it can be changed to a percentage,
which will allow the design to be liquid */
Building the Structure 337
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Game Developing GWX
/* remove these comment tags if the page is to be centered
margin-left: auto;
margin-right: auto;*/
text-align:left;
background:#7ED0D4 url(images/bg-right-column.gif) repeat-y right
top;
border:0px solid #000000;
}
#a5-header {
position:relative;
left:0px;
top:0px;
height:117px;
background: url(images/bg-header.gif) repeat-x;
border:0px solid #000000;
}
#a5-header-right {
position:absolute;
right:0px;
top:0px;
height:117px;
border:0px solid #000000;
}
#a5-column-left {
float:left;
width:181px;
border:0px solid #000000;
}
#a5-date {
text-align:center;
background:#ffffff;
vertical-align:50%;
line-height:26px;
}
#a5-menu {
width:181px;
padding:44px 0px 10px 0px;
font:bold 12.8pt arial, helvetica, sans-serif;
background: url(images/bg-menu.gif) repeat-y 0px 0px;
}
#a5-menu a {
Chapter 12
■
Case Study: Full-Height Three-Column Layout338
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Game Developing GWX
display:block;
text-align:left;
line-height:23px;
vertical-align:50%;
text-align:right;
padding:0px 25px 0px 10px;
text-decoration:none;
background: url(images/bg-menu-off.jpg) no-repeat 0px 0px;
color:#DEEFF0;
}
#a5-menu a:hover {
background: url(images/bg-menu-on.jpg) no-repeat 0px 0px;
color:#ffffff;
}
#a5-photo-bottom-left {
margin:23px 0px 20px 0px;
border:0px solid #000000;
}
#a5-body-content {
position:relative;
margin-left:181px;
border:0px solid #000000;
}
#a5-column-center {
position:relative;
left:0px;
top:0px;
margin:23px 0px 0px 20px;
font: bold 10.8pt arial, helvetica, sans-serif;
line-height:19pt;
border:0px solid #000000;
}
#a5-column-right {
float:right;
width:250px;
margin-top:-23px;
text-align:left;
border:0px solid #000000;
}
#a5-bottom-right-text {
font: bold 12.8pt arial, helvetica, sans-serif;
Building the Structure 339
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Game Developing GWX
line-height:14pt;
padding:0px 10px 10px 30px;
}
#a5-footer {
clear:both;
text-align:center;
line-height:35px;
background:#4A7A7D;
border:0px solid #000000;
}
/* ++++++++++ global structure styles end ++++++++++*/
</style>
</head>
<body>
<div id="a5-body-center">
<div id="a5-body">
<div class="a5-bg-left">
<div class="a5-bg-right">
<!- - ###### header start ###### - ->
<div id="a5-header">
<div><img width="557"
height="117" alt="" border="0" /></div>
<div id="a5-header-right"><a href="index.htm"><img
src="images/header-right.gif width="403"
height="117" alt="" border="0" /></a></div>
</div>
<!- - ###### header end ###### - ->
<!- - ###### left column start ###### - ->
<div id="a5-column-left">
<div id="a5-date class="color-1-text-98">September
31, 2010</div>
<div id="a5-menu">
<a href="index.htm">menu item 1</a>
<a href="menu-item-2.htm">longer menu item 2</a>
<a href="menu-item-3.htm">menu item 3</a>
<a href="index.htm"
>menu
item 4</a>
<a href="index.htm">menu item 5</a>
<a href="index.htm">menu item 6</a>
<a href="index.htm">menu item 7</a>
</div>
<div id="a5-photo-bottom-left"><a href="index.htm">
Chapter 12
■
Case Study: Full-Height Three-Column Layout340
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Game Developing GWX
<img
width="180" height="125" alt="" border="0"
/></a></div>
</div>
<!- - ###### left column end ###### - ->
<!- - ###### body content start ###### - ->
<div id="a5-body-content">
<div id="a5-column-center">
<div id="a5-column-right">
<div><img src="images/image-right-c olumn-
top.gif" width="250" height="88" alt=""
border="0" /></div>
<div><img src="images/image-right-c olumn-
middle.jpg" width="250" height="169"
alt="" border="0" /></div>
<div id="a5-bottom-right-text">
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. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
</div>
</div>
<div style="margin-right:246px;text-align:r ight;">
<span class="color-2-text-18">Duis autem vel eum iriure dolor in
</span> 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 <span
style="float:left;padding :10px 10px 10px 0px;margin-left:-20px;">
<img src="images/photo-center-middle.jpg" width="256" height="256"
alt=" border="0 /></span>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 olutpat. <span class="color-2-
text-18">Ut wisi enim ad minim eniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo</span>
</div>
</div>
</div>
<!-
- ###### footer start ##### # - ->
<div id="a5-footer"><div style="margin:0px 0px 10px 0px;
font-weight:bold;" class="color-2-text-10" >
<a href="index.htm" class="linklist1">menu item 1
Building the Structure 341
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
[...]... and tags, hyperlinks, and fonts The global structure styles comment tags include the styles used to define the structure of the design and elements included in that structure ■ Several rules define the and tags The margin and padding properties are used to ensure that the design is placed in the very top-left corner of the browser, with no space between the design and the... Photoshop file has already been created or customized and the designer just needs to position the images and text Creating the XHTML and CSS Framework The first step in building the design is to create the XHTML framework and initial CSS containers Listing 13.1 is the code that is used to output the page shown in Figure 13.6 Listing 13.1 Code for Figure 13.6 . in the page and to layer images and text over it. The graphical
elements can have their opacity changed so they appear somewhat transparent, and thus a. already been created or customized and the designer just needs to posi-
tion the images and text.
Creating the XHTML and CSS Framework
The first step in
Ngày đăng: 21/01/2014, 21:20
Xem thêm: Tài liệu Professional Web Design: Techniques and Templates- P8 doc, Tài liệu Professional Web Design: Techniques and Templates- P8 doc
