Lesson 3: Page Framing
(And a two-column layout)

 Signed in as:    
      Sign out



Your home page

Advanced Websites
   Layout and design
   Page framing
   Server Side Includes
   Introduction to CGI
   Introduction to php
   php: 'if', emails
   php: string handling and date / time
   php: file handling
   Responsive Web Design
   Processing images
   php: databases
   php: logins and passwords
   Tracking hits
   Navigation I
   Navigation II

This video demonstrates using gif images to build a frame around a page. Topics include:

This video also demonstrates using a two-column layout, with one column for navigating and the other for page content.


Note: I strongly suggest you view all our videos in full screen mode: click the icon in the lower right corner of the video area (it shows four arrows pointing to the corners of the screen). When you are done, the Esc ("escape") key returns you to regular mode.


Lesson 3: Page framing
Part 1: Build a frame

Click here for the video transcript


Note that the framing technique is a bit specialized (although it's cool that the frame grows as the page content increases, and it's good to see how to nest div elements effectively). But the idea of having two columns on a page, one for navigation and one for page content, is something that can be useful in a wide range of situations.

Hands on exercise

This exercise is primarily focused on using the two column techniques discussed in the video. The goal is to set up your index page with two columns, and include some links in the leftmost column.


Session 2
Creating a similar page


Here we create a new page using the ideas from before. Topics include:



Lesson 3:
Part 2: Creating a page based on another page

Click here for the video transcript.


Hands on exercise

This exercise is primarily focused on the process of copy-and-pasting in building one page based on another page.

The Table 'N' Fable club has organized a trip to visit locations in Wales named in the mystery novel "Welsh Rarebit Gone". You need to build the first page of a website for this trip (so, a "tripsite"). Call it "tripsite.html".

This page will be in the style of the page you created in the previous lab, "index.html".

However, you will also be using techniques discussed in the above video to include photos and text in a pleasing way.

Here we give you just some general guidance, confident you will know how to accomplish it all:

  • Open "workStyles.css" and add a rule called ".partialwidth" that when used as a class in a <div> element restricts nested elements to 85% of the available screen width
  • Create a new stylesheet, "photos.css" containing these style rules found in 1TIJ.html:
    • ".picLeftNat"
    • ".picRightNat"
    • ".polaroid"
    • Suggestion: you might want to also create ".polaroid2" being ".polaroid" without the box-shadow, since the box shadow doesn't look good against a gradient background
  • Now start with index.html: open this file and save it as "tripsite.html", then:
    • In the head element, change the <title> element to reflect this is a page for our trip
    • Add a link to the "photos.css" stylesheet in the head element
    • In the body of the page, modify the page title text to indicate this is a page about our trip
    • Update the "Links" side box by modifying:
      • The two local links ("#acts" and "#docs") to be prefixed by their page name, "index.html")
    • Update the "Links" side box by adding:
      • A link back to the activities home page (index.html)
      • A link to the tripsite home page (that is, to itself)
      • A link to a "Style of the trip" page (to be created later) tripStyle.html
      • A link to a "Detailed itinerary" page (to be created later) itinerary.html
      • A link to a "Prices" page (to be created later) prices.html
      • A link to a "Plot summary" page (to be created later) tripPlot.html
      • A link to a "Sign up to go" page (to be created later) signUp.html
      • In a second paragraph labeled "Destinations" include links to a page for each of the three cities in the itinerary (to be created later)
      • Add a separate side box containing a picture of Cardiff Castle (see below)
    • Update the content side of the page by copy-and-pasting the content of "TNFTrip.txt" (supplied in AdvancedWebFiles)
    • There are six images for you to include on the page as you find fit (you do not need to use all of them):
      • CardiffCastle.jpg
      • pontcanna_Cardiff.jpg
      • st-davids-OldCrossHotel-Wales.jpg
      • st-davids-Wales.jpg
      • the-five-arches.jpg
      • TenbyHarbour.jpg
      • Note: you will need to edit some of the images to make them fit well on the page; we recommend a width of 350 pixels for pictures in the page body, 200 pixels for any image(s) in the left hand column
  • In "index.html":
    • In the sideBox, add a <p> element to include a link to "tripsite.html" with the text "Travel with us"
  • Save and upload your files and test the result:
    • Both pages look like you planned / designed / wanted
    • Link from "index.html" to "tripsite.html" works
    • Links from "tripsite.html" work:
      • To activities page
      • To activities page, events fragment
      • To activities page, documents fragment


Supplemental materials

    A cumulative summary of the contents of this course so far: Click here
    For a combined cumulative summary of both Web courses so far, Click here



 Lesson navigation 



Email us if you would like additional information. We would love to see your comments and recommendations for our site.