Frontpage 2003 for Igcse Ict
-
Upload
mohammad-nafai -
Category
Documents
-
view
197 -
download
18
description
Transcript of 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)
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) downloadedinto your folder
Check your folder and files
Open the folder you created and check that all ofthe 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 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)
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 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
FrontPage 2003 - 7 Copyright 2009 Steve Copley (www.igcseict.info) CC Licensed
Creating and EditingStylesheets
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 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
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 Formatmenu 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 youwant
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 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
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 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
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 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
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 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)
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 (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
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 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)
FrontPage 2003 - 17 Copyright 2009 Steve Copley (www.igcseict.info) CC Licensed
Adding Things to aWeb 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 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
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 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
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 longerbeing 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 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
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 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)
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 ofthe 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 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 - 26 Copyright 2009 Steve Copley (www.igcseict.info) CC Licensed