Professional Documents
Culture Documents
Web Authoring Step by Step Booklet
Web Authoring Step by Step Booklet
FRONTPAGE
STEP BY STEP GUIDE
Mark Nicholls
ICT lounge
Page |1
Section 15: Web Authoring Mark Nicholls – ICT Lounge
Contents
Introduction to this unit………..……………………………………….…….……………………… Page 4
How to open FrontPage…..…………………………………………………..………………………….Page 4
The FrontPage Menu Bar…………………………………………………………….…………………..Page 5
Downloading Files from the Web..………………………………………………….……………..Page 6
Creating a New Folder…………………………………………………….……….................... Page 6
Renaming the Folder………………………..…………………………….………………………….. Page 6
Downloading the Files…………………………………………...……………………….………..… Page 7
Style Sheets………………………………………………………………………………………………..……. Page 8 - 20
What is a Style Sheet?..................................................................................... Page 8
How to create a Style Sheet……………………………………………….…….………….…….. Page 8
Specify styles for the Style Sheet…..………………………………..………………………….Page 9 - 11
Viewing generated code for a Style Sheet………………………………..…………… Page 12
Saving a Style Sheet…………………….…………………..……………………………………..……Page 12 - 13
Example of the effects of a Style Sheet……………………………………………….……. Page 13
Printing Style Sheet code…………………………………………….………………………….….. Page 14 - 15
Attaching Style Sheets to web pages………………..……………………….…………....... Page 19
Removing Style Sheets from web pages………………………………….…..…………… Page 20
Creating web pages from scratch………………………………………………….…………….... Page 16
Saving web pages…..………………………………………………………………..……………………… Page 16
Adding text to web pages………………………………………………………………………….…… Page 20
Using tags to set styles to text…………………………………..……………………..…………… Page 20 - 24
Accessing HTML code ……………………………..……………………………………………….… Page 20 - 21
Adding the paragraph <p> tags to the HTML code………….………………………. Page 21
Checking that the tag is communicating with the Style Sheet……….……..… Page 22
Adding the heading <h1> tags to the HTML code………………….………………… Page 24
Creating and Formatting Tables…………………………………………………………………….. Page 25 - 28
Inserting a table……………………………………………………………………………….………….. Page 25
Formatting a table (border size, rows/columns, colour etc)…………........... Page 25 - 26
Getting back into table properties……………….……………………………………………. Page 26
Merging table cells………….……………………….……………………………………………..….. Page 26 - 27
Page |2
Section 15: Web Authoring Mark Nicholls – ICT Lounge
Page |3
Section 15: Web Authoring Mark Nicholls – ICT Lounge
The guide uses the 2007 past paper question as a basis for its activities and tasks but
skills you gain will also apply to other past paper questions.
Page |4
Section 15: Web Authoring Mark Nicholls – ICT Lounge
The menu bar in FrontPage is very similar to the one found in Microsoft Word
2003. If you have used Word 2003 before then you should be able to transfer your
skills to FrontPage very easily.
The screenshot below shows you the menu bar items that you will use most often:
File: Format:
New Page Font Styles / Sizes / Colours
Save As Background Colours
Preview in Browser Style Sheets
Insert: Table:
Pictures Insert a new Table
Hyperlinks Edit existing Table
Page |5
Section 15: Web Authoring Mark Nicholls – ICT Lounge
If you are asked to download files from a web site you should first create a folder
where you can store them. This helps you to quickly find the files whenever you
need them.
Page |6
Section 15: Web Authoring Mark Nicholls – ICT Lounge
5. Click Save
Page |7
Section 15: Web Authoring Mark Nicholls – ICT Lounge
Save the style sheet and attach it to each web page as you create it.
A style sheet is kind of similar to the master slide on a PowerPoint. Style sheets can
be used to specify fonts styles, colours, sizes, alignment, bullet points etc before
objects are actually added to web pages.
Once the style sheet is applied to web pages, these specifications will automatically
be applied to the correct objects. This saves a lot of work and time.
5. Click OK
Page |8
Section 15: Web Authoring Mark Nicholls – ICT Lounge
At this stage our style sheet is empty. Our next task is to specify the styles required
by the question (blue fonts, 36 points in size etc). This is how you do it:
2. Click Format
3. Click Style
Select the HTML tag you want to apply the style to:
Page |9
Section 15: Web Authoring Mark Nicholls – ICT Lounge
1. Click Format
1. Choose a Font
Comic sans = sans-serif font
Times New Roman = serif font
1. Click Format
2. Select Paragraph
P a g e | 10
Section 15: Web Authoring Mark Nicholls – ICT Lounge
1. Click Format
2. Select Numbering
1. Your styles list will only show the styles that you have created.
NOTE:
At this stage you would repeat the above instructions add create the styles for the
rest of the HTML tags specified in the task
P a g e | 11
Section 15: Web Authoring Mark Nicholls – ICT Lounge
Once you have created the styles for each of the tags specified in the question, you
should be able to see the HTML code that has been created.
The code will be viewable in the style sheet that we created earlier:
To save the style sheet for later use you should do the
following:
5. Click Save
P a g e | 12
Section 15: Web Authoring Mark Nicholls – ICT Lounge
NOTE:
We will attach this style sheet to a web
page later.
The images below show you how style sheets effect how web pages look.
The first image is before the style sheet is attached to the page.
The second image shows the changes that the style sheet has made to the
same web page.
Notice how the fonts, colours and alignment styles have automatically applied
themselves to the objects on the web page.
Before the style sheet was attached: After the style sheet was applied:
P a g e | 13
Section 15: Web Authoring Mark Nicholls – ICT Lounge
Make sure that your name, candidate number and centre number are printed on the
page.
1. Click File
2. Click Open
6. Select Open
P a g e | 14
Section 15: Web Authoring Mark Nicholls – ICT Lounge
1. Click File
2. Click Print
NOTE:
NEVER print anything without your name and
numbers added.
P a g e | 15
Section 15: Web Authoring Mark Nicholls – ICT Lounge
Sometimes your examination task may ask you to start a new web page from
scratch. Fortunately this is very easy as shown below:
4.2 – Save the web page with the correct name - How to do it:
To save the web page with a specific name you should do the following:
1. Click File
2. Click Save As…
3. Browse to your web authoring past
paper folder
4. Name the file HOMEPAGE.htm
5. Make sure that ‘Save as type…’ is set
to ‘Web Pages’
6. Click Save
P a g e | 16
Section 15: Web Authoring Mark Nicholls – ICT Lounge
NOTE:
This task is not asking you to do
anything other than understand
where objects will go.
P a g e | 17
Section 15: Web Authoring Mark Nicholls – ICT Lounge
Task 6 – Attach the external style sheet created in task 2 to the web page
Attach the external style sheet that was saved in task 2 to HOMEPAGE.htm.
A style sheet will only change how a web page looks after the style sheet is linked to
the web page. The examples below show you how this is done:
4. Click Add
7. Click OK
8. Click OK again
P a g e | 18
Section 15: Web Authoring Mark Nicholls – ICT Lounge
Sometimes you need to remove a style sheet in order to attach a different one. The
example below shows you how this is done:
P a g e | 19
Section 15: Web Authoring Mark Nicholls – ICT Lounge
Task 7 – Add some text to the web page and set text styles
In the top left corner add the text ‘Last edited by:’ and then add your name, centre
number and candidate number.
Adding text to a web page is easy, you just need to make sure that you are typing it
in the correct place:
We need to tell FrontPage that this text is a paragraph. This is so the style sheet can
apply the formatting that we set up for the p tag (paragraph tag) in task 2.
P a g e | 20
Section 15: Web Authoring Mark Nicholls – ICT Lounge
Tags are used to instruct web browsers how to display objects on the web page
(text styles for example). Tags almost always work in pairs with an opening tag <>
and a closing tag </>. The opening tag tells the browser to start applying the style
and the closing tag tells it to stop applying the style.
The tag we need to surround our text with is the <p> </p> (paragraph) tags.
3. FrontPage will automatically assume you also want the closing tag </p>.
P a g e | 21
Section 15: Web Authoring Mark Nicholls – ICT Lounge
Checking that the style sheet has applied the correct formatting:
Now that we have surrounded the line of text with the <p> </p> tags, the style
sheet can apply the formatting that we set up during task 2.
To see if this has happened we need to go back into Design View to see the effects.
2. This will take us back into Design View and you should notice that the style
sheet has indeed altered the text to match the formatting specified in task 2
(black, sans-serif, 10 points, left aligned):
P a g e | 22
Section 15: Web Authoring Mark Nicholls – ICT Lounge
Task 8 is almost the same as task 7 apart from different text, different text position
and a different set of tags:
P a g e | 23
Section 15: Web Authoring Mark Nicholls – ICT Lounge
3. FrontPage will automatically assume you also want the closing tag </h1>.
Checking that the style sheet has applied the correct formatting:
Go back into design view and check that the correct formatting has been applied
from the style sheet (dark blue, sans-serif, 36 points, centre aligned, bold).
P a g e | 24
Section 15: Web Authoring Mark Nicholls – ICT Lounge
Below the heading, create a table which has 4 rows and 2 columns.
Merge the cells to create the table as
shown to the right:
Set the cell padding for the table to 3.
Set the cell spacing for the table to 5
Set the width of the table to 100%
Set the table border to 2.
Set the table background colour to light yellow.
1. Click Table
2. Click Insert
3. Click Table
P a g e | 25
Section 15: Web Authoring Mark Nicholls – ICT Lounge
You can get back into table properties at any time by:
The image in task 9 requires us to merge (or join) some of our cells so that we are
left with the correct layout.
P a g e | 26
Section 15: Web Authoring Mark Nicholls – ICT Lounge
4. Repeat for the other sections that require merging. Your table should look like
this when you are finished:
P a g e | 27
Section 15: Web Authoring Mark Nicholls – ICT Lounge
1. Click the border of the row / column and hold the mouse button down
2. Drag the border to the size you want
3. Your table should look like this when you are finished:
P a g e | 28
Section 15: Web Authoring Mark Nicholls – ICT Lounge
2. Click Insert
3. Click Picture
4. Click From File…
7. Click Insert
P a g e | 29
Section 15: Web Authoring Mark Nicholls – ICT Lounge
The task wants us to resize the image to 250 pixels high and maintain aspect ratio.
To do this you should:
6. Click OK
NOTE:
If you needed to distort the image for any reason you would simply uncheck the Keep aspect
ratio box before setting a new height.
P a g e | 30
Section 15: Web Authoring Mark Nicholls – ICT Lounge
P a g e | 31
Section 15: Web Authoring Mark Nicholls – ICT Lounge
Task 11 – Insert text that has been supplied to you in a downloaded text file
Sometimes you are asked to use text that has been supplied to you within one of
the documents that you download at the start of the question paper.
In this case we need to get our text from the file named “SPECIMEN1.TXT” that we
downloaded back in task 1. This is how you do it:
P a g e | 32
Section 15: Web Authoring Mark Nicholls – ICT Lounge
Paste the text into the correct section of the web page:
P a g e | 33
Section 15: Web Authoring Mark Nicholls – ICT Lounge
Task 12 – Use tags to attach our style sheet to the text items in the table
In tasks 7 and 8 we used 2 different tags to change how some of the text on our web
page looked. The tags used in those tasks were the <h1> </h1> tag and the <p> tag.
Tags are used to alter how items on our web pages look and they can also be used
alongside style sheets to specify exact font styles, colours, sizes etc.
Tags almost always work in pairs with a start tag <> and a close tag </>.
P a g e | 34
Section 15: Web Authoring Mark Nicholls – ICT Lounge
To set the rest of the tags required by the question you should do the following:
P a g e | 35
Section 15: Web Authoring Mark Nicholls – ICT Lounge
1. Repeat this with all of the other tags required for task 12
2. Your finished task should look like this:
P a g e | 36
Section 15: Web Authoring Mark Nicholls – ICT Lounge
P a g e | 37
Section 15: Web Authoring Mark Nicholls – ICT Lounge
Task 13 – Open an existing web page and use it’s contents on HOMEPAGE.htm
Sometimes your examination task may ask you to open existing web pages that have
already been started. To do this you need to find files with the .htm extension (.htm
is the file name given to web pages):
1. Click File
2. Click Open
P a g e | 38
Section 15: Web Authoring Mark Nicholls – ICT Lounge
This task requires us to simply copy the table found in SPECIMEN3.HTM and paste it
into the correct position underneath the table in HOMEPAGE.HTM.
7. The table from SPECIMEN3 will appear underneath the main table in
HOMEPAGE:
P a g e | 39
Section 15: Web Authoring Mark Nicholls – ICT Lounge
Use table properties to check that the table borders are set to 0:
The question said that the menu table borders should be set to 0. To do this we
need to access Table Properties:
5. Click OK
P a g e | 40
Section 15: Web Authoring Mark Nicholls – ICT Lounge
P a g e | 41
Section 15: Web Authoring Mark Nicholls – ICT Lounge
Create a hyperlink from the menu item ‘Try Bonsai’ to link to the file
SPECIMEN2.HTM
Create a second hyperlink from the menu item ‘Order Form’ to point at the
following website: http://www.arborday.org/shop/index.cfm
The first hyperlink is going to be inserted onto the text ‘Try bonsai’. The hyperlink
will take us to a web page that we have already downloaded called
‘SPECIMEN2.HTM’.
This is how you can add a hyperlink to link to web pages we have saved on our
computer:
7. Check that the link has been set (it should turn blue and underlined):
P a g e | 42
Section 15: Web Authoring Mark Nicholls – ICT Lounge
In order to test that the hyperlink works we need to find the HOMEPAGE.HTM file
and double click it.
Double clicking the file will open it in ‘Preview Mode’. This shows us how the web
page would look and work as if it was actually online. This is how you do it:
NOTE:
You can also click F12 from within FrontPage to preview your web pages.
P a g e | 43
Section 15: Web Authoring Mark Nicholls – ICT Lounge
You can also create links that take you to external web pages. External web pages
are those that belong to someone else and are already online and available to view.
We link to external websites using their URL (web address). External websites are
usually opened in a new window. This is how you do it:
P a g e | 44
Section 15: Web Authoring Mark Nicholls – ICT Lounge
3. Click OK
4. Click OK again
5. Save HOMEPAGE.HTM
6. Open the web page in Preview Mode and test that the link opens the correct
website and that it opens in a new window:
Hyperlink takes us to
an external website
New hyperlink
P a g e | 45
Section 15: Web Authoring Mark Nicholls – ICT Lounge
Hyperlinks do not need to be text based. You can also attach hyperlinks to images
and these will direct the user to other web pages when the image is clicked. In this
example I am going to use an image to link to an external website.
P a g e | 46
Section 15: Web Authoring Mark Nicholls – ICT Lounge
3. Click OK
4. Click OK again
5. Save HOMEPAGE.HTM
6. Open the web page in Preview Mode and test that the link opens the correct
website and that it opens in a new window:
Hyperlink takes us to
an external website
P a g e | 47
Section 15: Web Authoring Mark Nicholls – ICT Lounge
Anchors / bookmarks are special types of hyperlinks that help you navigate around
the same page. They are different from normal hyperlinks because they are not
used to link one web page to another.
For example – in this task we are going to use an anchor that will take us from the
bottom of the web page, to the top whenever the text that the anchor is attached to
is clicked.
1. Open HOMEPAGE.HTM
3. Click Insert
4. Click Bookmark
6. Click OK
7. The anchor will insert itself into the top left of the
web page:
P a g e | 48
Section 15: Web Authoring Mark Nicholls – ICT Lounge
2. Click Insert
3. Click Hyperlink
4. Click Bookmark
6. Click OK
7. Click OK again
P a g e | 49
Section 15: Web Authoring Mark Nicholls – ICT Lounge
1. Save HOMEPAGE.HTM
2. Open the web page in Preview Mode and click the text ‘Top of page’ to check
that the anchor is working properly. If everything is correct, the text should be
set as a hyperlink (blue and underlined) and the link should move you to the
top of the page when it is clicked:
P a g e | 50
Section 15: Web Authoring Mark Nicholls – ICT Lounge
The image editor that is used in my school is currently Adobe Photoshop but this
will vary from school to school.
Photoshop can be used to open and edit all the main types of images including:
P a g e | 51
Section 15: Web Authoring Mark Nicholls – ICT Lounge
1. Click Image
4. Click OK
NOTE:
We need to uncheck the ‘Constrain Proportions’ tick box before we enter the new width and
height because this image was required to be distorted when compared to it’s original size.
If we were required to keep the original dimensions we would have ticked the ‘Constrain
Proportions’ box.
72 60
73 40
Original Image Resized Image
P a g e | 52
Section 15: Web Authoring Mark Nicholls – ICT Lounge
Colour depth is the number of colours that each pixel in an image can be:
8 bit colour (used by GIFs) = each pixel can be any of 256 colours
24 bit colour (used by JPGs) = each pixel can be any of 16,800,000 colours
To ensure that our image colour depth is set to 256 colours (8 bit) we simply need
to save the image as a GIF.
1. Click File
6. Click Save
P a g e | 53
Section 15: Web Authoring Mark Nicholls – ICT Lounge
If you are asked to crop, you will need to ‘remove’ certain parts of an existing
image and then resave. In this case we are being asked to crop out the plant pot
part of the SPECIMEN6.JPG image.
Save the image with the correct file name and with a file type of .JPEG:
P a g e | 54
Section 15: Web Authoring Mark Nicholls – ICT Lounge
Replace the text ‘Candidate name’ (at the top of the page) with your name,
centre number and candidate number.
Replace the text ‘click here’ (at the bottom of the page) with the image
SPECIMEN5.GIF.
Make this image a link to open the file HOMEPAGE.HTM in the same window.
Save the file as SPECIMEN2.HTM (replace original file).
Now let’s see what you have remembered. You should be able to carry out the
above tasks by yourself. If you run into trouble you can always refer back to the
tasks in this guide that cover the above problems.
After you have completed this task, SPECIMEN2.HTM should look like this:
P a g e | 55
Section 15: Web Authoring Mark Nicholls – ICT Lounge
Independent work - Create a second style sheet for use with SPECIMEN2.HTM
READ ME:
See if you can create and attach this style sheet independently. Notice how the
colours in this task are not as straight forward as red, green, blue etc. You are
sometimes required to use precise shades of colours.
SPECIMEN2.HTM should look like this when you have created the style sheet and
attached:
P a g e | 56
Section 15: Web Authoring Mark Nicholls – ICT Lounge
(Web Colours)
Red
Green
Blue
All colours used on web pages are made up of different combinations of RGB. The
code used to create these colours is called hexadecimal and it is broken down as
follows: #RGB
Each primary colour can be assigned 2 digits or letters to determine what level of
that colour to use.
R G B
0 0 0 0 0 0
By entering different values into the Red, Green and Blue sections of the
hexadecimal code we can create any colour from 16 million possibilities.
Fortunately you do not need to remember many of these. The RGB colour code
values that you need to understand are as follows:
P a g e | 57
Section 15: Web Authoring Mark Nicholls – ICT Lounge
R G B
F F F F F F
FF, 00, 00
00, FF, 00
P a g e | 58
Section 15: Web Authoring Mark Nicholls – ICT Lounge
00, 00, FF
R G B
8 0 8 0 8 0
80, 00, 00
P a g e | 59
Section 15: Web Authoring Mark Nicholls – ICT Lounge
00, 80, 00
00, 00, 80
And so on……….
The other possible shades of RGB colours that you may be asked to create are
summarised below:
P a g e | 60
Section 15: Web Authoring Mark Nicholls – ICT Lounge
The following method works for both style sheet colour choices or if you were
altering the colour of text on a normal web page:
On a style sheet:
2. Click Format
3. Click Style
4. Select the tag which requires
the colour change
5. Click Modify
6. Click Font
7. Open the More Colours
window from the colour menu:
P a g e | 61
Section 15: Web Authoring Mark Nicholls – ICT Lounge
80, FF, 40
80, 00, 40
P a g e | 62
Section 15: Web Authoring Mark Nicholls – ICT Lounge
Task 18 – Print web pages in both browser view and HTML code view
Examination questions always require you to print off 2 versions of your web pages:
2. Click File
3. Click Print
NOTE:
Check that your printout is complete and that
your whole web page can be seen clearly.
P a g e | 63
Section 15: Web Authoring Mark Nicholls – ICT Lounge
3. Click File
4. Click Print
6. Click OK
P a g e | 64
Section 15: Web Authoring Mark Nicholls – ICT Lounge
Sometimes examination questions ask you to highlight key sections of the HTML
code of your web site.
For example – task 18 requires you to highlight the section of HTML code that
attaches the first style sheet to the web page.
Section of HTML
code to highlight
NOTE:
To find the style sheet link in the code you should look for the name of your style sheet.
END OF GUIDE
P a g e | 65