Page Layouts by gegeshandong


									                        Page Layouts
• The next step in our development of our web page design is to
  implement page layouts
   – In 1996, W3C recommended what we call CSS Level 1 and in 1998
     they recommended CSS Level 2
       – they are currently working on CSS Level 3
   – Most web browsers have only recently been able to handle CSS Level
     2, which includes CSS-P properties for positioning, what we will
     cover in this chapter
• Why use CSS page layout?
   – Greater control on typography and page layouts
   – Style can be separated from structure (layout)
   – Could allow us to create smaller documents because formatting and
     page layout information are placed in separate files
   – Easier site maintenance and ability to make quicker changes to format
   – Increased accessibility, ability to utilize more multimedia
   – Support for the semantic web
• Our other options are to use HTML tables (we cover this in
  chapter 8), frames (we cover this separately) or nothing at all
            XHTML Tables vs CSS
• One way to control the layout of items in a page is
  to place each item as an entry into a table
   – We will cover tables in chapter 8
• Many web pages are created using tables, so why
  not use this approach rather than CSS?
   – One problem with CSS is that, if a browser is not set up
     to handle CSS2 and gracefully degrades, the result is a
     less-than-satisfying display of the web page content
      • see for instance how figure 6.1 becomes figure 6.2 or 6.3
   – Tables are a perfectly acceptable way to do things, but
     tables can be difficult to maintain and update and are a
     clunkier approach
      • using CSS is more in line with the concept of having an explicit
        page layout
      • tables require that you determine where everything must fit
        before you start
                      The Box Model
• We will call the various web page entries content areas
   – A content area can contain text, images, paragraphs, headings,
     lists, etc
   – An area will have a border and padding and will have four
     sides (top, bottom, left, right)
      • default sizes are 0
   – Surrounding each content area is a margin, which will always
     be transparent
      • use the margin property to override the default size
• So far, this is the same as we saw before in chapter 4 using
  headings, paragraphs, divisions
   – In order to create a more elaborate format, we will now nest
     our statements
   – We will use the <div> tag in order to display a defined style for
     a content area although we could use any of the types of region
     tags – this is just for the next examples, we can (and will) use
     other tags for our areas
                       Simple Example
• Here we see two kinds of flow, normal and nested
.div1 {                         <div class="div1">
   width: 200px;                This is one content area
   height: 200px;               </div>
   background-color: #666666;   <div class="div2">
   border: inset;               Here is another content area
   padding: 5px;                </div>
}                               </div>

.div2 {
   width: 100px;
   height: 100px;
   background-color: #ffffff;   <div class="div1">
   border: ridge;               This is one content area
   padding: 5px;                <div class="div2">
   margin: 10px;                Here is a nested or
}                               inner content area
              Column-Based Example
• We can position our content areas
   – specifying that they have a position of absolute
   – using left and/or top to specify starting location in pixels
  .div1 {                                   <div class="div1">
     width: 200px;                          Column 1 content area
     height: 200px;                         <div class="div2">
     background-color: #666666;             Nested content area
     border: inset;                         </div></div>
     padding: 5px;                          <div class="div3">
     position: absolute;                    Column 2 content area
     left: 0px;                             <div class="div2">
  }                                         Nested content area
  .div2 { // from the previous slide // }

  .div3 {
     // same as with div1
     position: absolute;
     left: 250px;
   Absolute vs. Relative Positioning
• Using absolute position requires that you know the exact
  spacing of elements
   – This may require guesswork and revision particularly if the
     content will change
• Relative positioning adjusts one area relative to another
  and so might be more useful
   – Relative position will change the location of an element
     slightly from where it would normally be
   – The element is positioned at its normal location but offset by a
     value you specify using top or bottom, left or right or both
     (e.g., top and left)
   .div1 { background-color: #99FF00;
           position: absolute;
           left: 0px;}
   .div2 { background-color: #CCCCCC;
           position: relative;
           left: 50px;}
More Examples
     Here, we do not nest the <div> statements, one
     follows the other. By using absolute for div2
     notice how the text of div1 runs into div2 when
     we add top: 0px to both.

     .div1 {   background-color: #99FF00;
               position: absolute;
               left: 0px;
               top: 0px; }
     .div2 {   background-color: #CCCCCC;
               position: absolute;
               left: 50px;
               top: 0px; }

     Changing position to relative for div2 gives us

     In this version, we make div1 relative with a top of
     50px and div2 absolute with a top of -50px.

     The use of -50px forces div2 to appear 50px
     earlier than it should, thus it appears above div1
                     Example Layout
• We want to create a page with a layout as follows
   – A logo that runs across the top after the image
   – A navigation bar along the left hand side that consists of a few
   – An area to the right of the navigation bar which consists of text
     followed by a row of images followed by another text area
• We will define each as a class as follows:
   –   h1 heading for the logo
   –   nav for the navigation bar
   –   txt1 and txt2 for the two text areas
   –   ims for the row of images
• We will use absolute positioning to locate each of these
   – We will use <div> tags to place our classes other than the
     header (although we could use <p> or <span> or other)
• We will define our css code in our html using the style tag
                         Style Definitions
<style type="text/css">
                                               .txt1 {    width: 500px;       height: 100px;
h1 {      width: 300px;       height: 50px;
                                                          background-color: #666666;
          background-color: #333333;
                                                          color: #ff99cc;
          color: #ffffff;
                                                          font-family: Georgia, serif;
          font-family: "Geneva", sans-serif;
                                                          position: absolute;
          text-align: center;
                                                          top: 100px;         left: 120px;
          border: outset;
          padding: 10px 0px 10px 0px;
                                               .txt2 {    width: 500px;       height: 100px;
          position: absolute;
                                                          background-color: #666666;
          top: 0px; left: 100px;
                                                          color: #ff99cc;
                                                          font-family: Georgia, serif;
.ims {    width: 500px;       height: 100px;
                                                          position: absolute;
          padding: 5px 10px 5px 10px;
                                                          top: 300px;         left: 120px;
          position: absolute;
          top: 200px;         left: 120px;
.nav {    width: 80px;        height: 100 px;
          color: #cccccc;
          font-family: "Times New Roman", serif;
          position: absolute;
          top: 80px;          left: 20px;
<h1>Isotopes R Us</h1>             Continued
<div class="nav">
Home<br />
<a href="link1.html">Link 1</a><br />
<a href="link2.html">Link 2</a><br />
<a href="link3.html">Link 3</a><br />
<a href="link4.html">Link 4</a><br />
<a href="link5.html">Link 5</a>
<div class="txt1">Here is some text that describes us. This is
just a place-holder to demonstrate the formatting. I'm typing
stuff just to fill in space. Are you reading this stuff that is
here just to fill in space? If so, don't you feel foolish that you
are wasting your time reading this nonsense? If you don't
feel foolish, you should!</div>
<div class="ims"><img src="image1.jpg"><img
src="image1.jpg"><img src="image1.jpg">
<div class="txt2">And here is yet more text to fill up space.
Blah blah blah, just nothing to say here, don't read this, go
away now. Stop reading. NOW! Ok, still reading this?
Well, here is something meaningful... well, maybe not.</div>
                The Float Property
• Another positioning property is called float
   – This allows one item to float around another item
      • for instance having text “float” around an image
   – When floating an image, the margin property can
     configure empty space between the image and text
• Here are some examples to show the difference
  between float: left and float: right
                               .ims { float: left;
                                     margin: 0px 10px 0px 10px; }

                               .ims { float: right;
                                     margin: 0px 10px 0px 10px; }

                               The <img> tag appears before the
                               text in the html file
               Another Float Example
                                <h1>Football Helmets</h1>
h1 {                            <p><img class="ims" src="ARI.gif" alt="ARI Cardinal
   background-color: #ccffaa;   helmet" />Arizona Cardinals helmet has an angry looking
   color: 000000;               cardinal, which is the state bird of Ohio if you didn't
   padding: 15px;               know.
   font-family: geneva;         <img class="ims" src="CIN.gif" alt="Cincinnati Bengals
}                               helmet" />Cincinnati Bengals helmet consists of bengal
                                stripes. Here though, we represent it as a letter B.
                                <img class="ims" src="MIN.gif" alt="Minnesota Vikings
.ims {
                                helmet" />The Minnesota Vikings helmet is a pretty
   float: left;
                                intimdating viking, don't you think?
   margin: 0 10px 0 5px;        <img class="ims" src="STL.gif" alt="St. Louis Rams
   border: solid;               helmet" />The St. Louis Rams helmet consists of curves
}                               that look like Rams' horns. But here, we see the whole
                                angry Ram. I'd hate to be in this guy's way!</p>
                  Clear and Display
• The clear property is used to stop a float
   – You would use this so that further items do not continue to
      • clear: left; would clear a left float, clear: right would clear a right
        float, etc
      • download float2.html and see what happens when you put clear:
        left; in the .ims rule
      • you would instead use clear: left in a separate rule that follows
        the images so that the float can be cleared before starting
        whatever follows that part of the page
• The display property allows you to specify if an
  element is displayed or not and whether it should be
  treated as an in-line element or a block element
   – This allows you to more precisely control consecutive
     elements than using tags like <div>, <p>, or <h#> which
     inserts blank spaces around and above/below the current
      • we use display in ch. 7 & 8 so postpone discussion until then
                 Z-index Property
• The z-axis indicates depth
   – as opposed to x and y coordinates
   – so the z-index property can be used to denote the way items
     are “stacked” on a page
      • what element is on top of what element
• The default z-index is 0
   – elements with a higher z-index will appear stacked on top
     of those with a lower z-index
• In our previous example with the helmets, the figures
  appeared on the same line but not on top of each other
  (not stacked)
   – If we reposition the figures so that they do overlap, we can
     specify in what order they should appear by using z-index
   – Without this, they will appear in the opposite order that
     they appear in the html file (that is, the last one is on top
              Example: Using z-index
h1 { background-color: #ccffaa;
      color: 000000;
      padding: 15px;
     font-family: geneva;
     width: 350px; }
.im1 { position: absolute;
       left: 0px;
       top: 100px;
       z-index: 3; }
.im2 { position: absolute;
       left: 70px;
       top: 100px;
       z-index: 2; }
.im3 { position: absolute;
       left: 140px;
       top: 100px;
       z-index: 1; }              .descr { position: absolute;
.im4 { position: absolute;                 top: 200px;
        left: 210px;                       left: 50px;
        top: 100px;                        width: 300px;
        z-index: 0; }                      text-align: center; }
                  Formatting Example

• From the textbook (p. 237-240)
   – As can be seen from the wireframe to the right, we need three areas
       • Logo which includes navigation bar (nested) and image
       • Content area
       • Footer (footer is nested in the content area)
   – We will divide our definitions into five classes
       •   contentlogo which will embed (nest) nav
       •   imagelogo
       •   content
       •   footer
<div id= "wrapper" >
                    XHTML Code
<img id="imagelogo" src="pls.jpg" alt="Pink Lady Slipper"
         width="200" height="150" />
<div id="contentlogo">
 <h1>Door County Wildflowers</h1>
 <div id="nav">
   <a class="nav" href="page1.html">Home</a>
   <a class="nav" href="spring.html">Spring</a>
   <a class="nav" href="summer.html">Summer</a>
   <a class="nav" href="fall.html">Fall</a>
   <a class="nav" href="winter.html">Winter</a>
<div class="content">
 <p>Wisconsin&#39;s Door County Peninsula is a unique, …</p>
 <p>Explore the beauty of Door County Wildflowers....</p>
 <div class="footer">
Copyright &copy; 2007 Door County Wild Flowers<br />
Last Updated on 07/02/07
#contentlogo { background-color:#e8b9e8;
                                                    CSS Code
                                         .content {
#imagelogo { float:right;
          margin:0 0 5px 5px;
                                         .footer {
.nav { padding:5px;
          font-family:Verdana, Arial, sans-serif;
            2-Column Version
• The 2-column version will embed the CSS
  code in the XHTML code under the <style>
                                  CSS Code
<style type="text/css">
body {margin:0;
   font-family:Verdana, Arial, sans-serif;   .content {padding:20px 20px 0 20px;
}                                            }
#wrapper { background-color:#e8b9e8;         #floatright {margin:10px;
   color:#000066;                                     float:right;
}                                            }
#leftcolumn { float:left;
               width:100px;                  .footer {font-size:xx-small;
}                                                  text-align:center;
#rightcolumn { margin-left:100px;                       clear:right;
          background-color:#ffffff;                padding-bottom:20px;
          color:#000000;                     }
}                                            .navBar{ text-decoration:none;
#logo { background-color:#eeeeee;                        margin: 15px;
     color: #cc66cc;                                    display:block;
     font-size:x-large;                      }
     border-bottom: 1px solid #000000;       </style>

<div id="wrapper">
 <div id="leftcolumn">
<a class="navBar" href="#">Home</a>
                                                 XHTML Code
<a class="navBar" href="#">Spring</a>
<a class="navBar" href="#">Summer</a>
<a class="navBar" href="#">Fall</a>
<a class="navBar" href="#">Winter</a>
 <div id="rightcolumn">
  <div id="logo">
  <h1 >Door&nbsp;County&nbsp;Wildflowers</h1>
  <div class="content">
    <img src="showy.jpg" width="200" height="150"
          id="floatright" alt="Showy Lady Slippers" />
    <p>Wisconsin&#39;s Door County Peninsula is a unique, …</p>
     <p>A wide array of wildflowers grow in the county
     because of this variety of ecosystems.</p>
     <h3>Explore the beauty <br />of Door County Wildflowers....</h3>
  <div class="footer">Copyright &copy; 2007 Door County Wild Flowers<br />
  Last Updated on 07/07/07
  </div> </div> </div>
                             Scroll Bars
• If you limit the size (via height or width) of a content area such
  that the text (and/or figures) cannot appear, you can be supplied
  with scroll bars
   – For this to work, you have to use the overflow property as in
     overflow: auto;
       • other values are visible (the default), hidden, and scroll
   – Hidden will cause any overflow area to be pruned
   – Scroll will automatically insert both horizontal and vertical scroll
     bars (whether needed or not)
   – Visible will cause the overflow area to be visible and thus possibly
     overrun the next area
   – Auto will insert scroll bars as needed
       • an example is shown below with auto (left) and with scroll (right)
             Additional Properties
• Additional properties are given in this chapter but
  haven’t been covered yet, so they are listed here
   – line-height – allows text to be double spaced by using the
     value 200% (although you can use any % you want)
   – min-width – minimum width of an element
   – text-indent – value is in em or px or percentage and
     describes how far to indent the first line of a block
   – text-transform – modifies text as one of capitalize,
     uppercase, lowercase or none
   – vertical-align – modifies the alignment of an inline
     element as one of middle, bottom, text-bottom, text-top,
     top, super, sub or a percentage value
   – visibility – one of visible, hidden, inherit to control
     whether an element appears on a page or not
               CSS Debugging Tips
• CSS for page layout requires patience and planning
   – Testing is crucial
   – Do not attempt to make your pages look the same across all
     browsers and platforms but design the pages so that they look
     the best on the most commonly used browsers
   – Many pages devoted to helping you debug CSS pages (see p.
• Debugging techniques
   – Manually check for syntax errors
   – Use W3Cs CSS validator
   – Try different colors to see if the color selection is what is not
     properly working
   – Use temporary borders to ensure that borders are being
   – Use comments to ensure you are nesting elements correctly
      • Aside from <!--comments> you can also use /* */ comments (similar to

To top