This video demonstrates using gif images to build a frame around a page. Topics include:
Frame components
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":
img
.contentColumn
.narrow
.navBoxes (add "margin-left: -10px;" and change "width" to be 15%)
.norm10
.ph
.sideBox
.sideBoxTitle
.sidePanelContents
.sidePanelContents p
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
content "Links"
Following the <h5> element, add a <div> element with class=sidePanelContents
Inside the sidePanelContents <div> element, add a <p> element with class of 'norm10'
containing two <a> elements:
<a href=#acts>Coming events</a><br>
<a href=#docs>Supporting documents</a><br>
Close off the sidePanelContents, sideBox, and navBoxes <div> 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
Look down the page and find the <p> element for the Read-a-thon, and add "id=acts" in the start tag
A bit further down the page, in the <p> element about the club, add "id=docs" in the start tag
Insert the </div> tag for the contentColumn 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 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
Email us
if you would like additional information.
We would love to see your comments and
recommendations for our site.
Our privacy
policy: we use cookies to keep track
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.
