Web Developer & Design Foundations with XHTML

1

Web Developer & Design Foundations with XHTML

Chapter 10

Key Concepts

2

© 2007 Pearson Education

Learning Outcomes

• In this chapter, you will learn about:– Reasons to use CSS for page layout– Relative and absolute positioning– The CSS Box Model– Configuring single column page layouts using CSS– Configuring two column page layouts using CSS– Configuring three column page layouts using CSS– Configuring navigation using lists– Styling for print media– CSS page layout resources

3


CSS Page Layout Overview

• The idea of using CSS for page layout is not new

• W3C Recommendations for CSS level 2 published in 1998

• In the past year or so ---An increasing number of commercial sites are

using CSS for page layout

Wired http://www.wired.comESPN http://www.espn.comTruGreen http://www.trugreen.com

4


CSS Page LayoutAdvantages

• Greater typography control• Style is separate from structure• Potentially smaller documents• Easier site maintenance• Increased page layout control• Increased accessibility• Ability to define styles for multiple

media types• Support of the Semantic Web

5


CSS Page LayoutDisadvantages

• There is one large disadvantage – the use of this technology is not yet uniformly supported by browsers.

• This current disadvantage will be less of an issue in the future people stop using old browsers and the newer browsers comply with standards. Examples in the text have been tested with Internet Explorer 6, Netscape 7, Opera 7.5, and Firefox 1.5, and Mozilla 1.7.

6


The Box Model

• Content– Text & web page

elements in the container

• Padding– Area between the

content and the margin

• Border– Between the padding

and the margin

• Margin– Determines the

empty space between the element and adjacent elements

7


CSS Positioning Properties (1)

• Relative– Use to slightly change the location

of an element in relation to where it would otherwise appear

h1 { background-color:#cccccc;padding:5px;color: #000000;}#myContent { position: relative;left:30px;font-family:Arial,sans-serif;}

8


CSS Positioning Properties (2)• Absolute

– Use to precisely specify the location of an element in the browser window

h1 { background-color:#cccccc;padding:5px;color: #000000;}#content {position: absolute;left:200;top:100;font-family:Arial,sans-serif;width:300;}

9



• Float– Elements that

seem to “float" on the right or left side of either the browser window or another element are often configured using the float property.

h1 { background-color:#cccccc;padding:5px;color: #000000;}p { font-family:Arial,sans-serif;}#yls {float:right;margin: 5px;border: solid;}

10



• Display– The display property configures how and if an

element is displayed. – An element configured with display:none will

not be displayed. This is sometimes used when configuring styles to print a web page

– An element configured with display:block will be rendered as a block element (even if it is actually an inline element, such as an anchor tag.

11



• Z-indexUsed to modify the stacking order of elements on a web page.The default z-index value is “0". Elements with higher z-index values will appear stacked on top of elements with lower z-index values rendered on the same position of the page.

12


CSS Properties Used with Page Layout & Formatting

• See Table 10.1 in your text for an alphabetical listing.

• Also see the Web Developer’s Handbook on the Student CD

13


Checkpoint 10.1

1. State three reasons to use CSS for page layout on a commercial site being developed today.

2. Describe the difference between relative and absolute positioning.

3. In the following code snippet the logo appears under instead of over the images. Explain why. (See your textbook for the code snippet.)

14


Two Column Page Layout

A common design for a web page is a two-column layout with left-column navigation and right-column logo and content.

15


body {margin:0px; font-family:Verdana, Arial, sans-serif; }#leftcolumn { float:left; width:100px;

background-color:#eeeeee; height:400px; }#rightcolumn { }#logo{background-color:#eeeeee; color: #cc66cc; font-size:x-large; border-bottom: 1px solid #000000; padding:10px; }.content {padding:20px 0px 0px 150px; }#floatright {margin:10px; float:right; }.footer {font-size:xx-small; text-align:center; clear:right; }.navBar{ color:#000066; text-decoration:none; padding:3px; margin: 15px;

display:block; }a.navBar:link {color:#000066; }a.navBar:visited {color:#000000; }a.navBar:hover {color:#cc66cc; }

Two Column Page Layout

16


Navigation LayoutUsing Lists

• Navigation link areas are actually “lists" of links

• Some web design gurus argue that Navigation links should be configured using XHTML list elements

• Use the list-style-image property to configure the “bullet" list-style-image:url(arrow.gif).

17


CSS & XHTML Navigation List

• CSS:.navBar{ color:#000066; text-decoration:none;

padding:3px; margin: 15px;display:block; }

• XHTML:<ul class="navBar">

<li><a class="navBar" href="home.htm">Home</a></li>

<li><a class="navBar" href="spring.htm">Spring</a></li>

<li><a class="navBar" href="summer.htm">Summer</a></li>

<li><a class="navBar" href="fall.htm">Fall</a></li><li><a class="navBar"

href="winter.htm">Winter</a></li></ul>

18


Three ColumnPage Layout

• Often a web page layout will consist of a header across the top of the page with three columns below: navigation, content, and sidebar.

• If you are thinking about this layout as a series of boxes—you’re thinking along the right lines for configuring pages using CSS!

19


Three Column Layout

• Review the CSS on threecolumn.htm from the Student Files

20


Checkpoint 10.2

1. The two column and three column page layouts you created in the Hands-On Practice did not use absolute positioning. Open the twocolumn.htm and threecolumn.htm pages in a browser.

Resize the browser window. Describe what happens. What type of page design layout: ice, jello, or liquid is being used?

21


Checkpoint 10.2

2. State a reason to use an unordered list to configure navigation links.

3. Describe how to choose whether to configure a XHTML tag, create a class, or create an id when working with CSS.

22


Using CSSto Style a Form

• Moderate Approach– Use a table to format the form but

configure styles instead of XHTML table attributes.table {border:solid 3px

#000000;width:100%;}td {padding: 5px;margin: 0px;}.mylabel {text-align:right;}

23


Using CSS to Style a Form

“Pure" CSS Approach – Do not use a table to format

the form. Use CSS divs and spans with positioning properties to configure the page.

#myForm {border:3px solid #000000;padding:10px;margin:10px;}.myRow {height:30px;}.myRowComments {margin-bottom:20px;}.labelCol{float:left;width:100px; text-align:right;}

24


CSS Styling for Print

• Create an external style sheet with the configurations for browser display.

• Create a second external style sheet with the configurations for printing.

• Connect both of the external style sheets to the web page using two <link> tags.

<link rel="stylesheet" href="wildflower.css" type="text/css" media="screen" /><link rel="stylesheet" href="wildflowerprint.css" type="text/css" media="print" />

25


CSS Debugging Tips

• Manually check syntax errors• Use W3C CSS Validator to check syntax errors

– http://jigsaw.w3.org/css-validator/• Configure temporary background colors• Configure temporary borders• Use comments to find the unexpected cascade• Don’t expect your pages to look exactly the same

in all browsers!• Be patient!

26


CSS Page Layout Resources

• For additional study:• http://glish.com/css/

– Large collection of CSS page layouts and links to tutorials• http://www.websitetips.com/css/index.shtml

– Comprehensive list of tutorials and CSS-related sites• http://www.meyerweb.com/eric/css/

– The web site of Eric Meyer, a leading-edge web developer• http://www.w3.org/Style/CSS/learning

– W3C’s list of CSS resources• http://www.bluerobot.com/web/layouts/

– A “reservoir” of CSS page layouts• http://www.blooberry.com/indexdot/css/

– CSS syntax reference list

27


Checkpoint 10.3

1. State an advantage of using CSS to style for print.

2. Describe a CSS display problem that you encountered and the steps you took to resolve it.

3. True or False. CSS that validates must always work.

28


Summary• This chapter introduced you to using

Cascading Style Sheets to configure page layouts.

• This technique is difficult for even experienced web developers to master.

• Be patient with yourself and plan on reviewing the CSS resources material. It takes a while to grasp this technology.

Web Developer & Design Foundations with XHTML

Documents

Transcript of Web Developer & Design Foundations with XHTML