FrontPage 2003

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, visit http://creativecommons.org/licenses/by-nc/3.0/

Creating a Website Folder 1.1 1.2 Downloading Files for a Website Opening a Folder as a Site 4 6

Creating and Editing Stylesheets 2.1 2.2 2.3 2.4 Creating a New Stylesheet Creating Styles for HTML Tags Modifying Styles to Use Several Fonts and/or Generic Fonts Colour Codes in Stylesheets 9 10 13 15

Adding Things to a Web Page 3.1 3.2 3.3 Linking and Unlinking a Stylesheet to a Web Page Creating Links to Other Web Pages Creating Links to Anchors Within the Same Page 19 22 24

Creating a Website Folder

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 be placed 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 create a 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 of the files together, and stops them getting mixed up 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 using Internet Explore) - Select Save Link As... (if you are usinf Firefox)

FrontPage 2003 - 4

Copyright 2009 Steve Copley (www.igcseict.info) CC Licensed

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) downloaded into your folder

Check your folder and files

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

FrontPage 2003 - 5

Copyright 2009 Steve Copley (www.igcseict.info) CC Licensed

Opening a Folder as a Site

FrontPage works best when you open a folder as a 'site'. Doing this measn that FrontPage knows 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 extra things to your folder (Note: These extra things (special folders) can be ignored, but Frontpage needs them)

FrontPage 2003 - 6

Copyright 2009 Steve Copley (www.igcseict.info) CC Licensed

Your website is now ready to work with

You should see your website folder and any files you put in it

Note: If you cannot see the list of files on the left of the window... Click the View menu, then Folder List

FrontPage 2003 - 7

Copyright 2009 Steve Copley (www.igcseict.info) CC Licensed

Creating and Editing Stylesheets

FrontPage 2003 - 8

Copyright 2009 Steve Copley (www.igcseict.info) CC Licensed

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 the toolbar Then click Page... Note: Don't click the page icon itself - this will give you a new web 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 file list

FrontPage 2003 - 9

Copyright 2009 Steve Copley (www.igcseict.info) CC Licensed

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 Format menu button

FrontPage 2003 - 10

Copyright 2009 Steve Copley (www.igcseict.info) CC Licensed

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 you want

FrontPage 2003 - 11

Copyright 2009 Steve Copley (www.igcseict.info) CC Licensed

Create styles for other HTML tags

Your Styles list will only show the styles that you have created To get back to the full list of HTML tags, select HTML tags 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 code that has been created

FrontPage 2003 - 12

Copyright 2009 Steve Copley (www.igcseict.info) CC Licensed

Modifying Styles to Use Several Fonts and/or Generic Fonts

Web designers cannot guarantee which fonts a computer will have installed, so they often specify 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 the semi-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 the list... - Either serif - Or sans-serif Using generic fonts means that if the fonts in the list cannot be found, any serif / sans-serif font will be used

FrontPage 2003 - 13

Copyright 2009 Steve Copley (www.igcseict.info) CC Licensed

Examples of font lists with generic fonts

Here you can see that the styles for H1 and H2 specify... - Use Times New Roman if possible - Use any serif font if Times New Roman is not available 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 not available

FrontPage 2003 - 14

Copyright 2009 Steve Copley (www.igcseict.info) CC Licensed

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 More Colors... from the Color menu

Pick the colour required

You can click on the colour required whilst watching the colour code at the top-right Or you can type values directly into the colour code 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)
FrontPage 2003 - 15 Copyright 2009 Steve Copley (www.igcseict.info) CC Licensed

Examples of the strange colour codes

Pure colours (use 100%)... Pure RED is FF,00,00 Pure GREEN is 00,FF,00 Pure BLUE is 00,00,FF Pure YELLOW is FF,FF,00 Pure BLACK is 00,00,00 Pure WHITE is FF,FF,FF Darker colours (use 50%)... Dark RED is 80,00,00 Dark GREEN is 00,80,00 etc... (100% RED, no GREEN, no BLUE) (no RED, 100% GREEN, no BLUE) (no RED, no GREEN, 100% BLUE) (100% RED, 100% GREEN, no BLUE) (no RED, no GREEN, no BLUE) (100% RED, 100% GREEN, 100% BLUE)

(50% RED, no GREEN, no BLUE) (no RED, 50% GREEN, no BLUE)

Example: Pure RED

Here you can see that the colour code is... FF,00,00 (100% RED, no GREEN, no BLUE)

Example: Pure Green

Here you can see that the colour code is... 00,FF,00 (no RED, 100% GREEN, no BLUE)

FrontPage 2003 - 16

Copyright 2009 Steve Copley (www.igcseict.info) CC Licensed

Example: Pure Blue

Here you can see that the colour code is... 00,00,FF (no RED, no GREEN, 100% BLUE)

Example: Dark Red

Here you can see that the colour code is... 80,00,00 (50% RED, no GREEN, no BLUE)

Example: Modifying a colour

This colour has a mixture of RED, GREEN and BLUE values To remove the GREEN part we need to edit the colour 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)

FrontPage 2003 - 17

Copyright 2009 Steve Copley (www.igcseict.info) CC Licensed

Adding Things to a Web Page

FrontPage 2003 - 18

Copyright 2009 Steve Copley (www.igcseict.info) CC Licensed

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 is visible in the file list

Drag and drop the stylesheet onto the page

Pick up the stylesheet with your mouse and drop it anywhere on the page

FrontPage 2003 - 19

Copyright 2009 Steve Copley (www.igcseict.info) CC Licensed

See the styles applied to the web page

You should see the styles of the various parts of the 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

FrontPage 2003 - 20

Copyright 2009 Steve Copley (www.igcseict.info) CC Licensed

Delete the whole <link> tag

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

FrontPage 2003 - 21

Copyright 2009 Steve Copley (www.igcseict.info) CC Licensed

Creating Links to Other Web Pages

Hyperlinks allow us to jump from one web page to another by clicking on text or images that have 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 to link to

FrontPage 2003 - 22

Copyright 2009 Steve Copley (www.igcseict.info) CC Licensed

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...)

FrontPage 2003 - 23

Copyright 2009 Steve Copley (www.igcseict.info) CC Licensed

Creating Links to Anchors Within the Same Page

Sometimes, especially with long web pages, links are provided that jump to another location in 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 the top of the page

Insert the anchor (bookmark)

Click where you want the anchor (bookmark) to go In this case we click right at the top of the page (The anchor will mark the place that our link will jump to)

FrontPage 2003 - 24

Copyright 2009 Steve Copley (www.igcseict.info) CC Licensed

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 of the page

The anchor is inserted

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

FrontPage 2003 - 25

Copyright 2009 Steve Copley (www.igcseict.info) CC Licensed

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 to link 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 - 26

Copyright 2009 Steve Copley (www.igcseict.info) CC Licensed