week2

Web Hosting by Netfirms | Free Domain Names by Netfirms

week 2

Last week we constructed a two page web (albeit with no information on the pages!), that has the pages linked. These pages look sooo BORING that we'll try to improve their appearance with a few features of FrontPage.

Some points to remember from last week:

There are three page views in FrontPage:

Normal: The view we use for adding elements to the web page.

HTML: The view used if you know HyperText Markup Language.

Preview: Lets you see how your page should operate when viewed on the internet. (Using the preview in browser icon gives you a more accurate view.)

	To follow a link when in normal page view use ctrl and left click.
	Right clicking on any image or icon will allow you to access it's properties, which you can then change (eg ensuring that a pages filename and title are correct, or nominating a hyperlink to a page or site.)
	Shared borders are areas on your pages that contain the same or similar information.
	Using the navigation view allows you to drag around your pages and show their relationship to each other on the web site.

And now ........

Using Themes

One simple way to give your web pages a more attractive and consistent appearance is to apply a theme, whether it is one of the 68 themes that come with FrontPage (the theme of these pages you are viewing is one of them, Network Blitz) or a downloaded third party theme. (Examples are at these sites themes, more themes.) A theme provides you with a background and buttons, bullets, banners etc which will match.

	Open a web page and select Format\|Theme from the menu bar or right-click on the page and select Theme... from the shortcut menu.
	Under Apply Theme to, select All pages to add the theme to all pages in your web or Selected page(s) to only apply the theme to activated pages.
	Scroll through the theme selections and highlight the theme names to preview the theme in the Sample of Theme window. Click the check boxes to change the theme as well.

	Vivid Colours enhances the colours of the theme.
	Active Graphics will convert navigation buttons to Java applets that change when the mouse hovers over them.
	Background picture including a repeating background image to the page. Uncheck the box for a plain colour background.
	Apply Using CSS will add the properties to a style sheet.

Click OK when you have selected a theme.

Removing a Theme

To remove a theme from a page after it has been applied, select Format|Theme from the menu bar and select the first "(no theme)" option from the themes list. Click OK.

Modifying a Theme

The themes provided in FrontPage can be modified to fit your needs. If you have already assigned a theme to a page that could like to modify it, follow the steps on this page. First select Format|Themes and click the modify button. This action will reveal additional buttons for modifying themes.

[Themes dialog box]

Colours

Click the Colours... button to modify the colour scheme.

	Colour Schemes tab - Select preset colour schemes from the list and preview those colours in the theme in the Sample of Theme window.
	Colour Wheel tab - Click and drag the circle in the colour wheel to alter the colour scheme. Use the Brightness slider to brighten and dim the colours.
	Custom tab - Change each text type individually by selecting the item from the drop-down menu and assigning a colour.
	Click OK when you are finished modifying the colour scheme.

Graphics

The bullets, banners, and backgrounds on a theme can be changed as well. Click the Graphics... button to change the images in the theme.

	Select items from the drop-down menu. Change the images from the text field provided under the Picture tab and modify the fonts used from the Font tab.
	At the bottom of the window, select "Normal Graphics" for static images and "Active Graphics" for Java rollover applets.

Click OK when finished.
[Modify Theme dialog box]

Adding images to your pages

Go to Insert/Picture and (unless you have an image on file that you know the location of) select Clip Art. You will then be presented with the clip art gallery.

You can either look through the clips or enter a search word in the 'Search For Clips' field at the top of the window. make your selection, and click OK.

Your image should now appear on your page. If you right click the image you can access it's properties. If you select the appearance Tab and change settings under Layout in the drop down menu for alignment, you can change the relationship between the image and text. I selected Left here, which places the image on the left of the page and has the text wrapping around it..... child's play really.

Image Types

HTML code used on the web recognizes two basic graphic formats - GIF and JPEG. All the images on your web page must be either of these formats.

	JPEG (Joint Photographic Exchange Group) - As a general rule, photos should be saved as JPEGs. This file type consists of 16 million colours.
	GIF (Graphic Interchange Format) - These files contain 256 colours or less and should generally be used for non-photo graphics. All of the images on these tutorial pages are saved in GIF format.

Picture Properties

To change the properties of the picture, select the image and choose Format|Properties from the menu bar.

[Picture Properties dialog box]

Below Alternative representations, type a description of the image in the Text box. This text will appear in place of the graphic if the user browses your site with graphics turned off on their browser and will also be displayed while the picture is loading.

Click the Appearance tab.

[Picture Properties dialog box]

	Change the Alignment if the picture should be aligned to the right or left of the text on the page or if it should be centred on the page.
	Border thickness will add a border to the picture depending on the number of pixels you enter. Leave this value at "0" if there is no border on the picture.
	Horizontal spacing and Vertical spacing are measured in pixels and will add white space surrounding the picture either above and below (vertical) or on both sides (horizontal).
	FrontPage automatically calculates the size of the image. However, if you would like it smaller or larger than actual size, check the Specify size box and enter the new Width and Height values. Please note, it is recommended that you change the actual size of the image in an editing program such as Adobe Photoshop instead of changing these values, particularly if the actual size is large and you want it to appear smaller on the screen. Resizing the actual size of the graphic will lower the download speed of the image.

This page is still under construction.