Monitor

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

 Signed in as:    
      Sign out

 

Links

Your home page

Advanced Websites
   Layout and design
   Backgrounds
   Page framing
   Server Side Includes
   Introduction to CGI
   Introduction to php
   php: 'if', emails
   php: working with files
   Navigation I
   Navigation II
   Processing images

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, maybe call it ".partialwidth" that when used as a class in a <div> element restricts nested elements to 80-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
       
  • In "tripsite.html":
     
    • Add a link to the "photos.css" stylesheet
       
    • Update the "Links" side box to include:
       
      • 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
      • Possibly a second paragraph labeled "Destinations" followed by links to a page for each of the three cities in the itinerary (to be created later)
      • Possibly a separate side box containing a picture
         
    • Update the content side of the page using 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"
       
  • 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.