Further projects as web pages.
Rascal, our dog now has his own website which you will recreate.
1.
Open FrontPage and create a new Web in My Documents called
Rascal. (There probably won’t be room for it on your floppy as there are a lot of photographs)
I have supplied source material on the ‘R’ drive, scroll down the folders to Webb,
This holds a folder called Source, copy this into your new web folder and place it
within the images folder supplied. (all files can be downloaded from valueserv website if not in college)
It is a very simple site consisting of a limited
number of pages suitably linked, listed on the
right.
It is all on the www.valueserv.co.uk website so
you can see how it works, (you may notice one page that
doesn’t)
Probably the easiest approach is to create all the
pages listed, leaving them blank, but saving
them with the names shown.
2.
Load the Index.htm home page
a. Insert the heading ‘Rascal’ using size 7 text.
b. Insert a table with 3 columns & 2 rows under the heading
c. In table properties, set the border size to 0 (zero) (right click in table,
choose table properties to see dialog)
d. Insert the picture Rascal1.jpg (Source/Rascal) into the top middle cell
of the table centre formatted
e.
Resize to Width 194, keeping the aspect ratio (Right click on the picture,
select properties & make adjustments)
f. With the picture still selected, click on the resample button in the
picture toolbar.
g. Enter the five lines of text (which will be links) into the top left cell:
(you may need to adjust the alignment of the cell, right click in it, choose cell properties and
adjust Vertical alignment to top)
Rascal as a Pup
He has grown
Scamp
Tawnyhill Kennels
e-mail Rascal
106751609
©Richard Webb
(www.tawnyhillgundogs.co.uk)
(rascal@valueserv.net)
Page 1 of 7
h. Enter the text for the potential link below into the lower middle
cell:
Click to see enlarged Picture
i. Insert a linespace below the table & insert the textfile:
Index_Rascal_Home.txt
j. Create the links to the obvious pages. Also create links using the
words in the inserted file: Scamp & Tawny Hill Kennels
(www.tawnyhillgundogs.co.uk)
k. Select the picture and create a link to Rascal_Large.htm
l. Save the page. When prompted, save the resampled picture into
the Images folder as Rascal1S.jpg (s for small)
3.
Load the Rascal_Large.htm page:
a. Insert & create the return link at the top (Index.htm)
b. Insert the Rascal1.jpg picture (Source/Rascal)
c. Resize to width 382
d. Click the resample button
e. Ensure everything on the page is centred
f. Save the page
g. When prompted, save the picture to:
Images folder as Rascal1L.jpg (L for large)
4.
Load the rascal_as_a_puppy.htm page
a. Insert & create the return link at the top (index.htm)
b. Insert a 3 col 2 row table below the link
c. Reset the table borders size to 0 (zero)
d. Insert the following pictures into each cell of the table
(each one will need to be resized to a height of 106)
Rascal1.jpg  Rascal6.jpg, these are in the pup folder.
e. Ensure all the pictures are centred within the cells of the table and
all text is centred on the page
f. Below the table insert the text:
’Click on any image to enlarge’
106751609
©Richard Webb
Page 2 of 7
g. Click on each picture & insert a link to the appropriate page
(Pup1.htm  Pup6.htm)
h. Save the page
i. When prompted save the pictures to:
Images folder as Pup1s.jpg  Pup6s.jpg – ‘S’ for small
5.
Load each ‘Pup’ page in turn (Pup1.htm  Pup6.htm)
a. Insert & create the appropriate ‘Return’ link at the top
b. Insert the related picture beneath,
c. Ensure all centred on the page.
d. Suitable heights for the pictures are between 400 & 450 pixels.
e. Resample the pictures,
f. save the pages saving the pictures into the images folder as
Pup1L.jpg  Pup6L.jpg ( L for large )
6.
Load the Rascal_has_grown.htm page
a. Insert and create a return link at the top (index.htm)
b. Insert a table below with 1 row and 2 columns
c. Insert the pictures Rascal2.jpg & Rascal3.jpg into the left and right
cells of the table
d. Resize each picture to a height of 400 pixels
e. Resample each picture
f. Save the page
g. Save the pictures when prompted to the Images folder as:
Rascal2L.jpg & Rascal3L.jpg
106751609
©Richard Webb
Page 3 of 7
7.
Load the Scamp.htm page
a. Insert the Heading ‘Scamp’ and set the text size to 7
b. Insert a table below with two columns and 2 rows.
c. In the top two cells insert the pictures:
Scamp_b_h_1.jpg
Scamp_a_h1.jpg
d. Both pictures will need resizing to a height of 170 pixels
e. Resample each photograph
f. In the bottom two cells insert the text:
Scamp before a haircut
After his haircut
g. Below the table, insert the text file Scamp.txt (Normal paragraphs)
h. Ensure all the text is centred on the page, and the photos centred
in their cells in the table.
i. Create a link in the last line (Back to Rascal's home page) to
Rascal’s home page – Index.htm
j. Create a link from each picture to the respective Scamp Large
pages.
k. Save the page
l. Save the pictures when prompted into the Images folder as:
ScampBefore.jpg & ScampAfter.jpd
8.
Load the Scamp_b_h.htm page
a. Insert the picture: Scamp_b_h_1.jpg
b. Resize to height of 466 pixels
c. Resample the picture
d. Insert & create the return link below the picture ‘Back to Scamp’s
page’ (Scamp.htm)
e. Save the page
f. Save the picture into the Images folder as ScampBefore_L.jpg
106751609
©Richard Webb
Page 4 of 7
9.
Load the Scamp_a_h.htm page
a. Insert the picture: Scamp_a_h1.jpg
b. Resize to height of 466 pixels
c. Resample the picture
d. Insert & create the return link below the picture ‘Back to Scamp’s
page’ (Scamp.htm)
e. Save the page
10. Save the picture into the Images folder as ScampAfter_L.jpg
11. Ensure that all pages are saved
12. Test the pages in Internet Explorer to see that all links work & pictures
displayed.
13. Change the background colour of several of the pages to something
more interesting.
14. Change the titles of each page to reflect its content.
(See page 1 list for suggestions)
This can be done in HTML (Remember the first lesson?) or:
Right click in an empty area of the page, choose Page properties,
& edit the Title box to reflect the content of the page.
15. Animate the Links on the Home page as follows:
a. Right click on an empty area of the page
b. Choose Page properties
c. Select the Background tab in the Dialog
d. Click in the Enable hyperlink rollover effects box
e. Click on the Rollover style Button
f. Choose Italic & Colour Red & OK
g. Save & Test.
16. Create a Java page from www.6sense.com
a. Follow instructions & copy HTML into your new pages HTML
106751609
©Richard Webb
Page 5 of 7
106751609
©Richard Webb
Page 6 of 7
106751609
©Richard Webb
Page 7 of 7