Frontpage 2003 for Igcse Ict

Copyright 2009 Steve Copley

www.igcseict.info

This work is licensed under the Creative Commons Attribution Non-Commercial 3.0 License

To view a copy of this license, visithttp://creativecommons.org/licenses/by-nc/3.0/

FrontPage 2003

1 Creating a Website Folder

1.1 Downloading Files for a Website 4

1.2 Opening a Folder as a Site 6

2 Creating and Editing Stylesheets

2.1 Creating a New Stylesheet 9

2.2 Creating Styles for HTML Tags 10

2.3 Modifying Styles to Use Several Fonts and/or Generic Fonts 13

2.4 Colour Codes in Stylesheets 15

3 Adding Things to a Web Page

3.1 Linking and Unlinking a Stylesheet to a Web Page 19

3.2 Creating Links to Other Web Pages 22

3.3 Creating Links to Anchors Within the Same Page 24

Creating a WebsiteFolder

FrontPage 2003 - 3 Copyright 2009 Steve Copley (www.igcseict.info) CC Licensed

Downloading Files for a Website

Whenever you are downloading files for a website, always create a new folder for them to beplaced in

This lesson will show you how to download files for a website

Create a new folder for your website files

Whenever you start a new website, always createa new folder for the files...

- Go to your Documents folder- Right-click- Click New- Click Folder

Using a new folder for each websiite keeps all ofthe files together, and stops them getting mixedup with saimilar files from other websites

Give the new folder a name

Download the files that you need

If you are instructed to download some files...

- Right-click each of the files- Select Save Target As... (if your are usingInternet Explore)- Select Save Link As... (if you are usinf Firefox)


Save the file(s) in your new folder

When asked where to save the file(s), go to the new folder that you made

You should see each of the file(s) downloadedinto your folder

Check your folder and files

Open the folder you created and check that all ofthe files are present


Opening a Folder as a Site

FrontPage works best when you open a folder as a 'site'. Doing this measn that FrontPageknows where all of the files for a website (HTML files, stylesheets, images, etc.) are located

This lesson will show you how to open a folder as a site

Open the folder with your files in as a 'Site'

Click the FIle menu, then click Open Site...

Note: This is NOT the same as Open...

Find the folder that you created to hold all of your website files

Click the folder once to select it

Then click Open

All FrontPage to convert your folder into a website folder

Click Yes to allow FrontPage to add a few extrathings to your folder

(Note: These extra things (special folders) can beignored, but Frontpage needs them)


Your website is now ready to work with

You should see your website folder and any filesyou put in it

Note: If you cannot see the list of files on the left ofthe window...

Click the View menu, then Folder List


Creating and EditingStylesheets


Creating a New Stylesheet

Stylesheets contain code that describes how various parts of webpages should look (font,colour, etc.)

This lesson will show you how to create a new stylesheet

Open the Page Templates window

Click the menu arrow next to the New Page button in thetoolbar

Then click Page...

Note: Don't click the page icon itself - this will give you a newweb page, not a stylesheet

Create a blank stylesheet

Select the Style Sheet tab

Then select Normal Style Sheet

Your new stylesheet is ready to use

You should see a new, blank stylesheet

The file extention will be .CSS

The Style toolbar should be visible

Save the stylesheet in your website folder

Make sure you keep the .css file extension

You should see the stylesheet in the left side filelist


Creating Styles for HTML Tags

Creating stylesheet code for HTML tags is fairly straightforward

This lesson will show you how to create and modify stylesheet code

Open the Style window

Click the Style... button on the Style toolbar

Select the HTML tag that you want to create a style for

Select the HTML tag from the list

Then click Modify...

Choose what you want to chnage about the style

From the Modify Style window, click the Formatmenu button


From the menu select what you want to change...

- Font... for font, colour, bold, italic, size- Paragraph... for align left / right / centre- Numbering... for numbers and bullets

The Font window

1. Choose a font... - Arial if a sans-serif font is needed - Times New Roman if a serif font is needed

2. Choose a font style (bold, italic)

3. Chose a size (use pt for points, px for pixels)

4. Choose a colour

The Paragraph window

Choose a text Alignment

The Bullets and Numbering window

Choose the style of Bullets or Numbers that youwant


Create styles for other HTML tags

Your Styles list will only show the styles that youhave created

To get back to the full list of HTML tags, select HTMLtags from the List menu

See the code in your stylesheet

After you have finished creating / modifying the styles for your HTML tags you will see the codethat has been created


Modifying Styles to Use Several Fonts and/or Generic Fonts

Web designers cannot guarantee which fonts a computer will have installed, so they oftenspecify a list of preferred fonts in their stylesheets

This lesson will show you how to modify styles to include a list of fonts

Create the styles in the normal way

Use the Style window...

Choose the colour, size, alignment, etc.

Choose the font that is your first choice - your preferred font

(Note: The Style window will only let you choose one font)

Add other fonts as required

To add another font to a style...

Click just after the font name (before thesemi-colon)

Type a comma

Then type in the name of the second choice font

Add generic fonts if needed

You can specify a generic font at the end of thelist...- Either serif- Or sans-serif

Using generic fonts means that if the fonts in thelist cannot be found, any serif / sans-serif font willbe used


Examples of font lists with generic fonts

Here you can see that the styles for H1 and H2specify...- Use Times New Roman if possible- Use any serif font if Times New Roman is notavailable

And the style for P specifies...- Use Arial if possible- Use Verdana if Arial is not available- Use any sans-serif font if the other fonts are notavailable


Colour Codes in Stylesheets

Colours are specified in stylesheets using rather strange codes called hexadecimal codes

This lesson will show you how to choose the correct colour codes

Open the More Colors window

When picking the colour for a style, select MoreColors... from the Color menu

Pick the colour required

You can click on the colour required whilstwatching the colour code at the top-right

Or you can type values directly into the colourcode at the top right

Explanation of the strange colour codes

The colour code has three parts...

RED, GREEN, BLUE

Different values entered into these three parts can create any colour required

The code values are a bit strange: FF = 100% (maximum) C0 = 75% 80 = 50% 40 = 25% 00 = 0% (none)


Examples of the strange colour codes

Pure colours (use 100%)... Pure RED is FF,00,00 (100% RED, no GREEN, no BLUE) Pure GREEN is 00,FF,00 (no RED, 100% GREEN, no BLUE) Pure BLUE is 00,00,FF (no RED, no GREEN, 100% BLUE) Pure YELLOW is FF,FF,00 (100% RED, 100% GREEN, no BLUE) Pure BLACK is 00,00,00 (no RED, no GREEN, no BLUE) Pure WHITE is FF,FF,FF (100% RED, 100% GREEN, 100% BLUE)

Darker colours (use 50%)... Dark RED is 80,00,00 (50% RED, no GREEN, no BLUE) Dark GREEN is 00,80,00 (no RED, 50% GREEN, no BLUE) etc...

Example: Pure RED

Here you can see that the colour code is...

FF,00,00

(100% RED, no GREEN, no BLUE)

Example: Pure Green


00,FF,00

(no RED, 100% GREEN, no BLUE)


Example: Pure Blue


00,00,FF

(no RED, no GREEN, 100% BLUE)

Example: Dark Red


80,00,00

(50% RED, no GREEN, no BLUE)

Example: Modifying a colour

This colour has a mixture of RED, GREEN andBLUE values

To remove the GREEN part we need to edit thecolour code...

Here we have changed the GREEN part from FF(100%) to 00 (none)

Now the colour is just a mixture of RED and BLUE(with no GREEN)


Adding Things to aWeb Page


Linking and Unlinking a Stylesheet to a Web Page

A stylesheet will only change how a web page looks when the stylesheet is linked to the page

This lesson will show you how to link a stylesheet to a web page

Open your web page

Open the web page in Design view

Make sure that your stylesheet is saved, and isvisible in the file list

Drag and drop the stylesheet onto the page

Pick up the stylesheet with your mouse and dropit anywhere on the page


See the styles applied to the web page

You should see the styles of the various parts ofthe page change

Check the stylesheet link code

Switch to Code view

Look in the <head> section of the page code

You should see a <link> tag containing the stylesheet filename

Removing a stylesheet link

Go to the page Code view

Highlight the stylesheet <link> tag


Delete the whole <link> tag

You should see that the styles are no longerbeing applied to the HTML tags


Creating Links to Other Web Pages

Hyperlinks allow us to jump from one web page to another by clicking on text or images thathave been made into links

This lesson will show you how to create hyperlinks

Select the text that you want to make into a link

Highlight the text

Create the link

Right-click the text

Select Hyperlink...

Enter the address of the page to link to

Make sure Existing File or Web Page is selected

Type in the address or filename of the page tolink to


If the link must open in a new window, chnage the Target Frame

Click the Target Frame button

Type in the name to be used for the new window

Check the link works

Save the web page

Open the page in a browser

Click the link

Image links

Exactly the same steps can be followed to make images into links

(Right-click, the Hyperlink...)


Creating Links to Anchors Within the Same Page

Sometimes, especially with long web pages, links are provided that jump to another locationin the same page

This lesson will show you how to add 'anchors' to you page and then create links to them

Here is a long web page

The page has a lot of sections

We need a link to go back to the top of the page

This text will become a link to an anchor at thetop of the page

Insert the anchor (bookmark)

Click where you want the anchor (bookmark) togo

In this case we click right at the top of the page

(The anchor will mark the place that our link will jump to)


Click the Insert menu, then Bookmark...

(Note: FrontPage uses 'bookmark' to mean an anchor)

Give the anchor (bookmark) a name

Type in a name for the anchor (bookmark)

In this case, we name it TOP as it is at the top ofthe page

The anchor is inserted

You should see a little flag to indicate that the anchor (bookmark) is in place


Create the link to the anchor

Highlight the text

Then right-click and select Hyperlink...

Create the link

Make sure Place in This Document is selected

Click the anchor (bookmark) that you want tolink to

Test the link

Your text should now be a link

Save the page and open it in a browser

Scroll to the link and click it...

You should be taken back to the top of the page


Frontpage 2003 for Igcse Ict

Documents

html tags

extra things

adding things

cc licensed

web page

html tag

colour code

downloading