Lesson 5 - Creating Page Layouts with CSS
Download or Printout Lesson 5 - Serenity Spa Project Directions
This lesson provides students with a good foundation in laying out pages with CSS.
Preparation:
Download these images for use in this lesson.
Click here to go to the Spa Pictures web page
Exercise 5A: Using AP Divs for layout
In this lesson, students will create a web page using
Dreamweaver's AP Div feature. This book focusses on using CSS
for layout, not tables (as was standard practice in the early days
of the web.) It may be worthwhile to have students research
popular web sites and determine which method of layout the
sites are using. Then, have a discussion to talk about why sites
may still be using older table based methods. (For example,
large sites that have been in existence for years may have
"legacy" pages built with tables. The time and effort involved in
converting these may not be worth it for these companies.)
- Choose File > New. When the New
Document panel appears, choose Blank Page > HTML,
then press Create.
- Choose File > Save. When the Save As dialog box appears,
have them navigate to the site folder and type gallery.html
in the Name text field. Press Save.
- Choose the Layout category in the Insert panel. They need
to locate and select the Draw AP Div button. Then they
put the cursor back over the page; the cursor changes to a
crosshair.
- Click and drag to draw a box in the upper left-hand corner.
The box appears with a tab on the top-left edge and
handles on all sides and corners that can be used to resize
the box.
- Selecting the entire box by clicking the tab in its top- left
corner triggers the Property Inspector to display all of the
options for the box, including its current width, height, and
position. Select the Bg color swatch and select a background
color for the box from the Swatches panel.
- Students can add text to the box by simply typing in it.
Have them click inside the box and type Gallery. Center
the text in the box.
- Add links from the homepage to the gallery.html file and from gallery.html to index.html
- Save the file.
Exercise 5B: Overlapping boxes
This feature is not covered in depth in the book, but AP Divs
have a property called the "z-order" that students should be
aware of and can even be used to creative effect. Z-order can be
thought of as an order; when two or more AP divs occupy the
same space, one will overlap the other. The AP div that has the
higher z-order will always be on the "top" of the stacking order
visually.
In this exercise, you will use overlapping boxes to create a
page with a photo collage.
- On the gallery.html page, use the Draw AP Div tool, click
and drag to draw a rectangle that is about one-sixth of
the size of the entire page. Select the box by clicking on
the tab in the upper left corner, and copy and paste it five
times. Distribute the boxes around the page.
- Place your cursor in one of the boxes. Click on the
Common category of the Insert bar, and select the Image
icon.
- Choose an image from the files provided, and press OK.
The image will now appear inside the box. If you need to
resize the image, click on the image itself, put your cursor
on one of the handles, hold down the Shift key, and drag
the handle to resize the image.To resize the box, select
the box by clicking on the tab in the upper left corner,
then click on one of the box handles and drag until the
box is the size you want.
- Follow the procedure outlined above to add images to the
other five boxes on the page. The boxes should overlap.
- Now, select each box, one at a time, and look at the
z-index in the Property Inspector. Change the z-index
of each box, assigning each one a different number, 1
through 6. Notice how the overlapping of the boxes
changes as you assign the z-index numbers to them. Find
the box that is at the back of all of the others, select it,
and give it a z-index of 7.What happens?
- Experiment with z-indexes. For example, try taking one
of the images and resizing it until it nearly fills the page,
then use the z-index value to move it to the bottom of
the stack, so it appears behind the other boxes.
- Save the file.
Exercise 5C: Adding text
- Using the Draw AP Div tool, create a new box.
- Insert your cursor and type Relax.
- Select the box and check its z-index in the Property Inspector.
Change the z-index value to 10, and drag the
box over one of the image boxes. Position the text so it’s
legible over the photograph.
- Save the file and preview your work in your web browser.
- Follow the same procedure to add other spa-related words
to the page, using boxes and their z-indexes to set up the
appropriate overlapping of word and image. If you like,
you can create a new CSS style for the text and apply it
to all of the words to give them a nicer look.
- Save the file.
When Finished
Put (Upload/Copy)
- The entire Serenity Spa website to your Student Web Server