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

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

50 345 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 2,81 MB

Nội dung

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

TỪ KHÓA LIÊN QUAN

w