Advanced Web Design Part II

Overview:

In this second part of Lab #3 we’ll explore using Cascading Style Sheets to control the formatting and placement of web content.

Objectives:

1. Use CSS to control the formatting of multiple pages in a website
2. Control the layout of a web page using CSS instead of tables

The More You Know:

Hold onto your hats!!

This portion of the lab will guide you through modifying CSS in Dreamweaver, but before we even open the software let’s start with a brief overview of what CSS even is:

• Introduction to CSS principles

Now that you understand how CSS allows us to format and control content, let’s look at how CSS controls these boxes to give us a layout without using tables.

• How CSS controls the layout of a page
  Important: When you create your page make sure you set the “Layout CSS” to “Create New File” as illustrated in the image below:
  

Now that you understand how CSS controls the position of content (remember anything you put into an HTML page is considered a “box” to CSS), let’s look at how to make changes to the CSS using Dreamweaver CS3

• Modifying your CSS in Dreamweaver CS3

Before you move on to your performance tasks below, I want to point out that GPC and Weebly both use CSS to control the content on their pages… you just don’t see it.  When you select a new “theme” or “design” each program just links to a different stylesheet.  Your content remains the same, but the formatting and positioning (dictated by the CSS) completely changes!  Neat, huh?

Your Performance Tasks:

Please create a new page in Dreamweaver CS3 with a predefined layout.  Don’t use the page you created in Lab #1–we want to start with a fresh page.

1. Using Dreamweaver’s CSS editor, complete the following tasks on your web page created with a predefined layout:
   • • Change the font properties on the entire page by modifying the properties of the “body” tag
     • Change the font properties of each heading that appears on your page (H1, H2, H3, etc.  They can all look the same if you want)
     • Change the background of each area of the page so there is no longer any gray on your page
     • Change the width of the “sidebars” and “main content” areas on your page by at least 30 pixels
2. Upload your new page and it’s accompanying CSS to your AFS space.

Due Date:

All tasks for this lab must be completed by 8am tomorrow, Thursday, July 1st.  Please submit the URL of your web page to the comments below.