This video demonstrates using gif images to build a frame around a page. Topics include:
Process of constructing a page
The line-height style property
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.
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.
Copy the following style rules from 1TIJ.html into your "workStyles.css":
.navBoxes (add "margin-left: -10px;" and change "width" to be 15%)
Create a style rule in "workStyles.css" named ".bold14" that sets font-weight and font-size as you
might expect from the name
Make the following changes to "index.html"
Add a <div> element with class=navBoxes after the three blank lines after the <h1> element
Inside the navBoxes <div> element, nest a <div> element of class sideBox,
and inside that nest an <h5> element of class sideBoxTitle with
Following the <h5> element, add a <div> element with class=sidePanelContents
Inside the sidePanelContents element, add a <p> element containing two <a> elements:
<a href=#acts>Coming events</a><br>
<a href=#docs>Supporting documents</a><br>
In the <p> element for the Read-a-thon, add "id=acts" in the start tag
In the <p> element about the book club, add "id=docs" in the start tag
Close off the sidePanelContents, sideBox, and navBoxes elements using </div> tags
After the end tag for navBoxes, add a <div> element of class contentColumn that contains the
rest of the body until the end-of-page code
Include the contents of "TNF_intro.txt" right at the beginning of the contentColumn section
Insert the </div> tag just before the <div class=bottomBox> tag
Save and upload "index.html" and "workStyles.css" files, and test:
The links in the links box both work
The content looks like you expected and wanted it to
The page looks good in all the browsers you test with
Session 2 Creating a similar page
Here we create a new page using the ideas from before. Topics include:
Borders around images
The box-shadow attribute
Lesson 3: Part 2: Creating a page based on another page
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
Create a new stylesheet, "photos.css" containing these style rules
found in 1TIJ.html:
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
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):
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 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
A cumulative summary of the contents of this course so far:
For a combined cumulative summary of both Web courses so far,
if you would like additional information.
We would love to see your comments and
recommendations for our site.
of where you are on the site, but we do not
leave cookies on your site; we do not track
your visits; we do not disseminate any
information about you because we do not
gather any information about you.