FrontPage 2003 - Course Aware and User Guide

8/8/2019 FrontPage 2003 - Course Aware and User Guide

http://slidepdf.com/reader/full/frontpage-2003-course-aware-and-user-guide 1/106

Chapter 1 - Web Site Decisions

CHAPTER 1 - WEB SITE DECISIONS

Before you can start to use FrontPage, you have some big decisions to take about the nature of your web site. These are:

♦ Should you use frames?

♦ Should you use shared borders?

♦ What browser should you aim at?

♦ What screen size can you assume?

♦ Should you use a theme?

♦ What navigation method should you use?

♦ Do you want your web site to appear high up in searches?

♦ Where will your pictures come from?

♦ What will the layout of your web site be?

♦ Should your web site use style sheets?

♦ On what server will your web site be published (will you be able to use FrontPageextensions)?

♦ What about other web tools, like dynamic HTML and Active Server Pages?

This chapter attempts to explain and answer all of these questions!

© Copyright 2010 Page 1




1.1 Frames

An example of the use of frames in a web site is shown below:

Here are two good reasons not to use frames:

1) Wise Owl experience is that they create complex problems with navigation, since eachframe functions as an independent page.

2) Most (nearly all) commercial web sites don’t use them – all those professional webdesigners must know something.


The advantage of using frames is that youcan scroll each window independently – something which is very hard to achieveotherwise.

This web site is dividedinto a top banner, left menu

page and right content pageusing tables – the only lossis that you can not scrolleach part independently.

Wise Owl’sHint

This courseware does not make any reference to frames – instead we will use layout tables and shared borders to divide up our pages.




1.2 Shared Borders

An example of the use of shared borders is shown below:


The top shared border always contains a graphicgiving the page title.

The left shared border always contains the buttons

allowing you to move between pages.

Wise Owl’sHint

Shared borders make creating web sites much simpler, and we will use

them in our example web site.




1.3 Choice of Browser

A browser takes the raw material of a web page (written in HTML) and shows it graphically!

Browsers on the Market

There are two main choices of browser on the market:

♦ Internet Explorer ( IE ) comes with nearly allnew Windows computers – it has about 75% of the

browser market, and this share is growing. The versionsof IE more or less correspond to the versions of Windows shown on the right.

♦ Netscape is the other main browser, and comes in many versions (the current one is6.2). However, some people may still be using versions as early as 4.0.

In addition there are numerous specialist browsers – for example, WAP-enabled mobile phonesrely on specialist cut-down browsers to surf the web.

Choosing a Browser

The biggest question you need to consider is – who will be viewing my site?

♦ If your web site is for a corporate intranet, there is a good chance everyone will

be using the same version of Internet Explorer. This means that you can use features of FrontPage without considering whether they will work under Netscape.

♦ If it is not vital that everyone in the world should be able to view your site (for example, it is a sales site and a coverage rate of 80%+ is adequate), consider ignoringall browsers but Internet Explorer – again, this will mean that you can ignore Netscape.

♦ Otherwise, you must test your web site on all browsers which may be used to view it.In practice this means that you must be very careful what FrontPage tools you use.


A typical section of HTML (HyperText Markup Language) What a browser would display

Version of Windows

Versionof IE

98 4.0

2000 5.0

Wise Owl’sHint

There are a huge number of differences between the way in which Internet Explorer and Netscape interpret HTML. If you possibly can,assume that everyone viewing your site will be using Internet Explorer – otherwise, recruit the services of a professional web designer!




1.4 Screen Size

As a web designer, you have very little control over the way in which people will view your website:

When creating a web site, you have two basic options:

♦ Create every page of fixed width (600 pixels, say), and risk the sort of problem shownabove if someone views it using fine resolution on a large monitor.

♦ Create your pages so that they fill any screen, and ensure that text wraps sensibly whenthey are viewed on smaller monitors.

You can create tables and change their width settings to control how web sites appear – see thesections on “Tables” in this courseware for more details.


Bob has an old 14”

monitor, with 640 x 480 pixel resolution

Carol has a 19” monitor,with fine pixel resolution

Wise Owl’sHint

Many big web sites use a fixed screen width (often 600 pixels) – in WiseOwl’s opinion these look awful. Be nice to your viewers – createvariable width web sites!




1.5 Themes

A theme in FrontPage controls the look and feel of a site – as an example, here is an example of the same page using 3 different themes:

What this shows is that themes provide a quick and easy way to impose a consistent and visually pleasing style onto all of the pages in your web site. They do, however, have two disadvantages:

Disadvantage Notes

Lack of professionalism You can usually spot a web site which has been designed using aFrontPage theme – they tend to look a bit amateur.

Lack of flexibility Once you have elected to use a theme, there are certain things thatyou can not do. For example, in the box below for changing the

border styles of tables, several of the options are set to Automaticshowing that they are controlled by your theme and can not bechanged:


The Expedition theme The Canvas theme No theme at all

Wise Owl’s

Hint

If you want to create a web site quickly and it is not your main job, use a FrontPage theme to create a good effect quickly. Professional web

designers will avoid using themes and create their own effects.




1.6 Navigation Method

The web site shown below has a very clear method of navigation:

The buttons shown above form part of a FrontPage feature called anavigation bar . This automaticallycreates link buttons from thenavigational structure of your site.

Navigation bars such as the one shown above can also be horizontal, and can contain text, not buttons:


You can use these buttonsto jump to different parts of your site.

Navigation bars work onlywhen you have a clear hierarchical structure.

Text links shown acrossthe top or bottom of the

page can often look more professional.

Wise Owl’sHint

Use navigation bars to control links round your site, otherwise you will have to learn dynamic HTML and JavaScript (which you definitely don’t want to do unless you have to)!




1.7 Search Engines

One of the main ways in which members of the public will find your web site is by searching for it. Below is an example of a search run using Google (one of the main search engines on the

Net):

Most people just look at the top 10 sites returned from a search, but there are thousands – perhaps tens of thousands – of other sites competing with yours for a single search phrase. Hereare some thoughts:

♦ There are many companies who will offer to submit your web site to 2,000+ searchengines, but be aware that 1,995 of these will be obscure and unused. A good exampleof such a company is Submit It! (www.submitit.com ).

♦ Many web sites offer guidance on getting your web site submitted to search engines – always use free help when it’s available on the web!

♦ Finally, accept that if your main aim is to get to the top of a search engine’s lists, areasonable ambition is to choose a single engine ( Google is a popular one) and a singlesearch phrase to target.


Typing in caveman …

… gives about 102,000 websites – how can you ensureyours is in the top 10?

Wise Owl’sHint

The main search engines include Yahoo, Lycos, MSN, Google, Excite, AltaVista and the BBC. Each one uses a different technique for searching the web.

Wise Owl’sHint

Developers for internal Intranets can ignore this page. External developers should avoid targeting common phrases – choose“Manchester Excel Training” rather than “IT Training”, for example.

http://www.submitit.com/

http://www.submitit.com/




1.8 Where Will Your Pictures Come From?

One of the most time-consuming aspects of creating a web site is to get good graphics.

Types of Images

Web images are stored in one of two formats:

♦ GIF (file extension .GIF)♦ JPEG (file extension .JPG)

Although there is a difference between the two formats, either will do for your web site.Typically JPEG files are used more often for photographs.

Sources of Images

Here are some possible ways in which you can get images for a web site:

Method Notes

Clipart Microsoft Office comes with a large collection of clipart pictures.When inserting clipart you can also view the Microsoft web site clipart collection, which contains thousands more pictures.

You can right click on any clipart picture to ungroup it, allowing youto edit the picture (when you have finished, just group thecomponent parts back together again). The diagram below showsthe results of ungrouping a cartoon duck:


Wise Owl’sHint

You can make your life much easier if you choose a white background for your web site – otherwise all your images will have to have the correct background colour.




Method Notes

Someone else’s web site Simply find the picture you want, and click on it with the rightmouse button to copy it or to save it as a picture on your computer:

You should always get the permission of the relevant company before copying pictures, as they will remain the copyright of theartist.

Commercial clip-art sites

A search on the Internet will reveal hundreds of web sitesspecialising in clip-art, most of which will be prepared to drawimages that you specify for a fee.

Graphic artists For really professional sites, there is no alternative to commissioninga local graphic artist who you can meet regularly to produce artwork.This must be someone who has experience of producing graphics for the web.

Draw them yourself You can use packages like Paint Shop Pro and Adobe Photoshop tocreate your own images, but be aware that this will consume hugeamounts of your time. Avoid this if at all possible!





1.9 Style Sheets

Style sheets allow you to set up default appearances for different parts of an HTML page – anexample is shown below:

Style sheets have two huge advantages:

3) You don’t have to apply the same formatting to each bit of text – just specify that (for

example) all text in tables should appear in blue.

4) When you want to change the appearance of your web site, you can do it with just asingle change to a style sheet, rather than having to edit every single page.


This style sheet sets body textto be in Comic Sans font witha yellow background, and any

bold text to appear in largeBrush Script font.

Applying a style sheet to an HTML page completely changes its appeareance!

Wise Owl’sHint

The only reason not to use style sheets is if you can’t be sure that everyone viewing your web site will be using Internet Explorer –

Netscape and IE do not use style sheets in the same way!




1.10 FrontPage Extensions

When you have finished your web site, you will want to publish it. This is the process of copying it from your computer to one which everyone can see:

Unfortunately, when you are creating a web siteyou need to ask two things of your server

administrator:

♦ Is the server UNIX or Windows? If youwill be publishing to a UNIX server, you will not

be able to use FrontPage components.

♦ Even if the server to which you will publish your web site is running Windows NT or XP, does it have FrontPage extensions installed?These are the extra bits of software which allowyou to use FrontPage components.

If the answer to either of the above questions is“no”, you won’t be able to use many of the optionson the menu shown on the right.


You develop a web site on your own computer, normally – noone else can see it.

Publishing your website involves copying itto a web server, whichmany people (perhapsthe whole world) cansee.

Automatic hit counters, for example, will not run excepton a Windows server with FrontPage extensions installed.




1.11 Other Web Techniques

Dynamic HTML

DHTML (or dynamic HTML ) produces some of the best webeffects. Here is a simple example.

Dynamic HTML is the way to make the contents of a web page change when your viewers click on a drop list, hover the mouse over a piece of text, etc. However, it is not easy to learn!

Showing Database Records

Active Server Pages ( ASPs ) are pages of HTML interspersed with other commands written(usually) in a language called vbScript. Typically you use ASPs to present results from adatabase. Here is an example:


When you click on the +button next to a menu …

… the menu expands to show submenu options

The red lines are vbScript commands

This is the result of running the page on the left

This is the web page as viewed in IE

Wise Owl’sHint

Dynamic HTML looks great, but the huge learning curve puts it out of

the reach of most part-time web developers. Be prepared to learn JavaScript and experience endless difficulty getting DHTML to work inthe same way under Netscape and IE.

Wise Owl’s

Hint

Other variations on this theme are ASP.NET and PHP. If you do godown this route, prepare for a long learning curve.




CHAPTER 2 - CREATING AND EDITING WEB SITES

This chapter describes how to plan and create a web site, and how to add web pages using thesimple example shown below.

2.1 The Example Used for this Manual

We will create a web site for Sandy Stone (a caveman) – Sandy’s home page is shown below:


There are two other pages,listing how to find Sandyand his hobbies andinterests.

Wise Owl’sHint

Although the web sites that you create are likely to be much morecomplicated than this simple example, the principles used here can beapplied universally.




2.2 Entering and Leaving FrontPage

Going into FrontPage

To start using FrontPage, choose menu optionssimilar to those shown below:

Leaving FrontPage

To exit FrontPage from the menu, select: File Exit


a) If you have usedFrontPage recently it will belisted in this part of the StartMenu .

b) Alternatively you canlocate FrontPage within AllPrograms .

Wise Owl’sHint

You can also close down FrontPage with a single click.

Click the cross atthe top right of the window toclose FrontPage.




2.3 Planning Your Web Site

Before starting with FrontPage, it is a good idea to sketch a rough design of your web site. Thediagram below gives an idea of how Sandy Stone’s (fairly simple) web site was planned.

In FrontPage the home page will be the “parent page”, and any other pages will be linked to itrather like an ancestral tree.

Once you have a rough plan of how you want your web pages to look you are ready to createyour first web site!


Home Page

Where to Find Me Hobbies & Interests

What we want to show:

Introduction

Contact details

Hobbies & Interests

How we want to show it:

Home Page Where to Find Me Hobbies & Interests

Introduction Name Dinosaur huntingAddress Discus throwingTel. No. JavelinE-mail Web site design

Just brief notes areshown here…

… then split into three columnswith notes underneath for whatwill be included.

The three columns will become three pages on theweb site.




2.4 Creating a New Web Site

To create a new web site:

5) From the menu select: File New...

6) From the task pane select: One Page Web Site…

7) Complete the dialog box, which appears as shown below, then select OK .

8) If the folder doesn’t exist, FrontPage will create it for you. If the folder exists butdidn’t previously contain a website, FrontPage will convert it into a web folder for you.

Disk-Based and Server-Based Web Sites

The web site above is an example of a disk-based web site. Below is an example of a server- based web site:

Broadly speaking, you can only create a server-based web site on a computer which is running IIS ( Internet Information Server ).


Make sure this option isselected – this creates asimple web sitecontaining one page,rather than using one of

the wizards to create aweb site, which probably isn’t what youwant.

Type in a folder pathhere (but see the noteson disk-based andserver-based web sites

below).

If the web site location is preceded by http , you arecreating a server-based web.

Wise Owl’s

Hint

The only reason you are likely to want to create a server-based web is if

you are using Active Server Pages – they don’t work on disk-based webs.




2.5 Opening, Closing and Deleting Web Sites

Opening a Web Site

To open a web site, either:

♦ from the menu select: File Open Site...

♦ from the menu select: File Recent Sites and select a site you have been usingrecently; or

♦ use the toolbar as shown below:

Closing a Web Site

A web site consists of a number of different pages, any of which you may be editing at any onetime. You can close pages individually, or close down the entire site in one go:

9) From the menu select: File Close Site

Deleting a Web Site

You can either delete the entire contents of a web site, or simply stop it being a web site butleave the files on your computer’s disk:


The file open tool has adrop arrow to the right of it, allowing you to chooseto open either a web pageor a web site.

a) If the folder list is not visibleon the left of your screen,

press + todisplay it.

b) Click with theright mouse buttonon the web site itself,and choose deletefrom the menu thatappears.

c) To ensure that you have deleted the website you must choose to delete the web entirely

– otherwise the files are still left on your harddisk.




2.6 Viewing Web Sites

The FrontPage Screen, and Changing What You See

FrontPage allows you to view individual pages within your web site, or information about your web site as a whole.

Web Site Views

You can view different categories of information about your entire web site as shown below:


a) Selecting the WebSite tab allows you toview information aboutthe entire web site.

b) This toolbar allows you tochoose what information to view.Currently we are looking atFolders .

Wise Owl’sHint

The Folder List , which is displayed on the left hand side of the screen,can be used to move, copy or delete files or folders. You can press + tohide the Folder List if it gets in your way. Use the same keyboard

shortcut to redisplay it.




Showing a Map of your Web Site (“Navigation View”)

This is probably the most useful way in which to work with a web site:

Showing the Navigation Tree Sideways

Sometimes it is useful to rotate the navigation tree so thatthe root is shown on the left:


Make sure that you have theWeb Site tab selected…

… then click Navigation toview a map of your web site

Use the right mouse button to bring upthis menu – the option shown willrotate the web site map 90°

Sandy Stone’sweb site map in…

... portrait…

… and landscape.




Showing All of your Web Site in One Window

To compress your web site’s navigation view so that it fits into a single window, choose theoptions shown below:


This option fits your website onto a single screen.

In the top right of thenavigation window is adrop arrow.

Normally youhave to scroll tothe right to see afull web site.

The size to fitoption allows youto see all the pagesin your web site in

one go.




2.7 Creating Web Pages

A web site is just a collection of web pages. Web pages can be added to a web site in severaldifferent ways.

Creating a Web Page as part of Your Hierarchical Web Site

To create and name a web page that you want to be part of your site map:

Creating a Web Page Normally

Alternatively you can create a web page as follows:

10) From the Folder List select the folder in which you want to create a new page.

11) Choose any of the following options tocreate a new page:

Tool Top Menu Keyboard Right Mouse

File New Page... Ctrl + N New Blank Page

12) You can now rename the page created.


a) Click on the page

beneathwhich youwant to add

a page

b) Click the NewPage button.

c) Click once on

the page, then onceagain to rename it.

Wise Owl’sHint

When you have added or renamed pages, they will not immediatelyappear in the folder list in FrontPage. To refresh your web site so that its contents are up to date, press or from the menu select: View

Refresh .

Type in a newname here.

Wise Owl’sHint

If you rename a page in this way be sure to keep the .htm filenameextension. If you don’t then FrontPage won’t be able to recognise it as aweb page.




2.8 Moving and Deleting Web Pages

Moving Pages to the Navigation Structure

To include a page in the navigation structure of your web site, simply click and drag it from thefolder list:

Deleting Web Pages

To delete a web page, simply click on it in the folder list andpress Delete , or use the right mouse button:


a) Click and dragthe page from thefolder list to thenavigation structure.

b) Position the page andrelease the mouse button. Agrey outline shows where your

page will fit into the web site.

c) The page is now part of thenavigation structure of the website.

Click here todelete aselected page.

Wise Owl’sHint

If you choose to delete a page on the Navigation view you will be given theoption of deleting the page completely or just removing it from the navigation

structure.

Choose between thetwo options.




2.9 Viewing Web Pages

To edit web pages you first need to view them. You can view any page within your web site bydouble-clicking on it, regardless of what view you are in.


Wise Owl’sHint

When working with individual pages the left hand section of the screen can be set todisplay either the Folder List, or the

Navigation Map .

Choose betweenthe two views byclicking.

a) Whichever view youare in, double-clicking a

page will open it.

b) This toolbar allows you tochoose different page views.Currently we are looking at theDesign view.

c) Switch betweenopen pages by clickingtheir respective tabs atthe top of the page.




CHAPTER 3 - LAYOUT TABLES

3.1 What are Layout Tables?

Layout tables are used to create the structure of your web pages. Layout tables contain Layout cells , which in turn hold the contents of your web pages.


Sandy’s homepageconsists of four mainareas.

These areas aredefined by creating alayout table withfour layout cells.




3.2 Creating Layout Tables and Cells

There are several ways to create layout tables, the methodswe will look at use the Layout Tables and Cells task pane.

Inserting a Layout Table

Inserting a simple layout table of predefined size can be accomplished as shown below:

Drawing a Layout Table

Alternatively, layout tables can be drawn to size:


a) Selectthis optionfrom theTablemenu…

b) …and thetask paneappears on theright of your screen.

a) Select thisoption from the task

pane…

b) …and an emptylayout table isinserted on the page.

a) Select this button from the task pane…

b) …your mousecursor will change tolook like a pencil,and you can draw alayout table bydragging anddropping.




Drawing Layout Cells

Once you have created a blank layout table you will need to create some layout cells.

You can draw as many layout cells as you like:

Inserting a Predefined Layout Table

FrontPage contains a number of template layout tables with predefined cells. To insert one of these into a web page simply select it from the task pane:


a) Select this

button from the task pane…

b) …then draw alayout cell bydragging anddropping within thelayout table.

From very simple…

…to incrediblycomplex designs.

Wise Owl’sHint

If you make a mistake and want to start from scratch, selecting the No Layout template from the task pane will remove the currently selected layout table.

Click on the layout yourequire and it will beinserted into the web page.




3.3 Selecting Parts of a Layout Table

Once you have created layout tables and cells you can move, resize and rearrange them. To doany of these things with a layout table or cell you must first select it:

13) Click anywhere within the table.

14) Use the Quick Tag Selector to select the part you require as shown below:


The Quick Tag Selector can be found at the top of the page you are editing.

Clicking this tag selects theentire layout table.

Clicking this tag selects thecurrent table data cell.

The layout table isoutlined in green.

Layout cells areoutlined in blue.

Selecting a layouttable displays row andcolumn size tags.




3.4 Moving and Resizing Layout Cells

One of the great features of layout tables and cells is their flexibility. Cells can be moved andresized to create exactly the layout you require.

Resizing a Single Layout Cell

Resizing Multiple Layout Cells

When you add cells to a layout table youwill see dotted lines representing columnand row borders. Moving these linesaffects all cells whose borders are in linewith them.


a) When you select a layoutcell this tag appears, showingyou the size of the cell in pixels.

b) When you select a cell these sizing handles (blue squares)also appear.

c) To resize the cell, moveyour mouse cursor over a sizinghandle…

d) …then click, drag, andrelease the left mouse button.

Dotted lines and greendiamonds show columnand row borders.

Clicking and dragging will move the border.

Moving this border affectsthe top edge of all 3 cells.

Moving this border affectsthe bottom edge of cell 1.

Moving this border affectsthe bottom edge of cells 2+3.






3.5 Setting a Fixed Size for a Layout Table

Layout tables can be resized in several different ways. This can be done either before or after cells have been added to the table.

Using the Task Pane

Using the Sizing Handles

Using the Row and Column Size Tags


The task pane shows the widthand height of the table in pixels.

To change a size, simply click on it and overtype.

a) Move your mouse cursor over one of thesizing handles (small blue squares) and thecursor will change shape.

b) Click and drag with the mouse until youhave the size you require, and then releasethe mouse button.

a) Click on the dropdown arrowto the right of any Size Tag andselect the first option in the list.

b) Fill in the value for columnwidth or height and click w

Wise Owl’sHint

When you start adding cells to your table you will automatically createmore rows and columns, and thus more row and column size tags. Thismakes it more confusing to use this method to change the size of a table.




3.6 Setting a Percentage Size for a Layout Table

Using a percentage size for a layout table means that your table can adjust itself to suit differentcombinations of screen sizes, screen resolutions and web browsers. For example:

Setting a Percentage Size for the Whole Table


Using a fixed size value in pixelsmeans the table will stay the same sizeno matter the size of the browser window.

Using a percentage value of 100%means the table and cells will fill100% of the available space, no matter the size of the browser window.

a) On the quick tag selector click the drop arrow to theright of the <table> tag.

b) Select this option from

the drop down menu.

c) From the dialog boxchoose to specify widthand/or height.

d) Select the Inpercent option.

e) Finally, typein a value.

Wise Owl’s

Hint

Note that you don’t have to set a percentage value of 100% - if youintend for your table to only fill part of the screen then you can set a

smaller value.




Setting a Percentage Size for Columns and Rows (Autostretch)

Setting a percentage size for an entire table means that every cell in the table is affected whenthe viewing area changes. It is often useful to only allow certain parts of the table to do this.

To do this requires setting one of the columns to autostretch :


For Sandy’s homepage wewould like to keep the areacontaining the navigation

buttons the same size…

…but allow the areacontaining the text tostretch if the viewing areachanges.

a) Click the droparrow next to theappropriate columnsize tag.

b) Select theAutostretch optionfrom the list.




Effects of Autostretching


Without autostretch enabled, partof the page is hidden when theviewable area becomes smaller…

…and a big gap is left when theviewable area is larger.

With autostretch turned on, thecolumn shrinks when the viewablearea becomes smaller…

…and it stretches when theviewable area increases.




3.7 Useful Tools for Creating Layout Tables

When drawing and placing layout tables and cells it is handy to have a guide to help you arrangethem neatly. FrontPage has two useful tools for exactly that purpose.

The Ruler

To view the ruler, choose the option from the View menu as shown:

The Grid

To view the grid, choose the option from the View menu as shown:


Choose the Show Ruler option from the menu.

The ruler is displayed at the topand left edges of the page.

Choose the Show Grid option from the menu.

The grid is displayed on the page you areworking on. Note that the grid can be seenonly in the design view of FrontPage, so itwon’t appear on your website.






4.2 Applying a Theme

To apply a theme to your web site:

17) From the menu select: Format Theme...

18) From the task pane select the theme you require as shown:

Underneath the themes list there are another three options which change the way your selected theme will work. Try changing these and see how the theme looks.


Wise Owl’sHint

An alternative way to create a common look for the pages in your web siteis to use Cascading Style Sheets . These are more powerful but requireknowledge of HTML tags. They are covered in a separate chapter.

Vivid colours brightens colours for headings, text and links

Active graphics animates some advanced features in your site

Background Image switches the background colour/design on/off

Move your mouse cursor over anytheme and click the drop arrowthat appears.

Select this option to apply thetheme to every page in your website.

Select this option to apply thetheme to just the current page.




4.3 Customising a Theme

If you like a theme, but want to change a specific aspect of it (the font, colours used, etc.):

19) From the drop list of any theme select: Customize…

20) Complete the dialog box which appears as shown below, then select OK .

An Example – Changing the Background Picture

You can change the background picture as shown below:


Choose which part of thetheme you want to modify.

a) Choose tochange thetheme’s

graphics.

b) Choose toset a different

background picture.

c) Click on the Browse … buttonwhich appears to find a different

picture.

Wise Owl’sHint

This is a good example of something which seems easy to change, but isactually quite difficult. Background pictures have to have a number of

properties to work correctly, and Wise Owl’s best advice is to avoid changing parts of a theme unless you understand the implications.

Fill in the appropriate details inthe dialog box that appears.




CHAPTER 5 - WORKING WITH WEB PAGES

5.1 Editing Pages

Editing Pages

You can edit any page by double-clicking on it, regardless of what view you are in:

Setting a Page Title

The title of a web page shows up in your browser (it’s also one of the main things logged bysearch engines, when determining how to catalogue your site):

You can change the title of a page as shown below (noting that this doesn’t affect the file name):


Double-clicking on a page willopen it for editing, regardless of where you see it.

The title of this page is“Hobbies and interests”.

Right-click on afile to changeits properties, asshown here…

…then type in the new title and select .




Moving Between Pages

At any time, you may be editing a number of pages simultaneously. You can move from one tothe other in several different ways:

Saving Pages

To save the changes to a page:

21) Choose to save the current page: Tool Top Menu Keyboard

File Save Ctrl + S

Closing Pages

When you have finished working with a page in a web site (but still want to keep the site itself open:

22) Go to the page.

23) Choose to close it down: Top Menu Keyboard

File Close Ctrl + F4


2) Use the Windowmenu.

1) Click on the tab of the page you require.

3) Double click onthe page in thefolder list.




5.2 Adding Text

Where to Add Text

When you create a new web page, a typical structureis shown on the right:

The other areas of the page which you may have visible are called shared borders - these arecovered in a separate section:

Inserting Line Breaks

When you reach the end of one line, FrontPage Editor will automatically continue on the next.To throw a new line, press either or + :

5.3 Formatting Text

The first step towards formatting text is to select it:


You can type text at thevertical flashing cursor.

These are the top and leftshared borders - youshould not alter these untilyou understand how theywork!

You can click and drag across text to select it- alternatively, you can hold down the keyand use the , , and keys to select text.

Pressing automaticallycreates a spacer line followed by anew paragraph.

Pressing + generates a new paragraph thatfollows on immediately from the preceding one.

Wise Owl’sHint

Advanced Hint

The two options shown above correspond to the HTML <p> and <br> tags respectively.




You can then make formatting changes to your text - some ideas are shown below:

Formatting Tool What it Does Example

This box gives a drop-down list of differentstyles you can use. Sandy Stone

This box gives a drop-down list of differentfonts you can use. Sandy Stone

This box gives you a drop down list of fontsizes you can use.

Sandy Stone

Click on this tool to make text bold. Sandy Stone

Click on this tool to italicise text. Sandy Stone

Click on this tool to underline text. Sandy Stone

This tool allows you to set a backgroundcolour for the selected text. Sandy Stone

This tool allows you to change the fontcolour of the selected text. Sandy Stone

In addition, you can also use the following tools to change the alignment of all the paragraphsthat you have selected:

Aligns text to the left of the page. Sandy Stone

Centres text on the page. Sandy Stone

Aligns text to the right of the page. Sandy Stone

These tools change the indent of selectedtext from the left margin. Sandy Stone





5.4 Bullet Points & Numbering

Items in typed lists often stand out better when bullet points are used. To apply bullet points:

24) Go to the right point on your page.

25) Click on the bullets icon.

26) You can now type the first item after the bullet point. If you have a theme for your site,FrontPage will choose the bullet type for you and you won’t be able to alter this.

27) When you press another bullet point will automatically appear on the next line.


First of all, make sure you have thecursor at the place where you wantyour bullet list to begin.

Clicking on the bullets iconon the toolbar...

… will place the first bulletwhere the cursor was.

When you have finished your bullet list, press twice after the last entry in order tostop another bullet point from appearing atthe beginning of your next line.

Wise Owl’sHint

Creating number lists is done in exactly the same way as for creating bullet lists , except that you choose the numbering icon instead of the bullets icon .




5.5 Adding Clipart and Pictures

Placing clipart pictures into your web site will help to keep the interest of your viewer.Microsoft Office includes a wide variety of clipart for you to choose from. To insert clipart:

28) Position the cursor where you want the clipart to go.

29) From the menu select: Insert Picture Clip Art...

30) Choose a picture as shown below:

31) FrontPage adds the image to your page:


You can now resize, move,align, etc. this picture.

a) Type in a keywordhere and click Go .

b) Move your mousecursor over the

picture you want andclick the drop arrow.

c) Choose Insert fromthe menu to insertthe image into your

page.




Resizing Clipart

To resize Sandy without stretching or squashing him, select his image and click and drag one of the corner handles, as shown in the example below.

If you prefer to stretch or squash Sandy, choose a handle that is not on the corner of the image,and click and drag as above.

Removing the Clipart Background

You may want to remove the white background from a picture. To do this:

32) Click on the picture, and then click on the Make Transparent icon on thedrawing toolbar at the bottom of the screen.

33) You can now confirm what you want to do - a message box will appear as below:

34) Click on the colour within your picture which you want to make transparent. All pixelsof this colour will now appear transparent.


a) Click and drag thishandle…

The background of theimage has gone, andSandy now blends innicely with the page

background.

Choose this button to make the imagetransparent. Don't worry about themessage - GIF is one of the two standardweb image formats.

b) …then let go of it when the picture is the size you want.




Clipart Aligning

The default alignment for clipart and other graphics is the left-hand side of the page i.e. left aligned . However, you may prefer to centre your clipart or have it right aligned .

The icons for changing the alignment of your image (or text) on the toolbar are shown below:

Align Left Centre Align Right

To change the alignment, select the image to align and click on the required alignment icon.

Adding Other Images

If someone has very kindly drawn a picture for you, you can insert this also:

35) From the menu select: Insert Picture From File...



If the file isn’t stored within

your website, you will need tosearch for where it is located onyour computer.




Saving Pictures

Pictures are saved separately from text in web pages. When you come to save or close down aweb page, you will be asked where you want to save the pictures it contains:


It’s a good idea to give asensible name to your pictures.Click on any individual file andclick the Rename button.

Click here to change where thefiles will be stored – you do nothave to store them in the samefolder as the text file.

Wise Owl’sHint

By default FrontPage puts all pictures in the root folder of your web site. This means you get hundreds of images in the same

folder, plus it looks untidy. Use theChange Folder… button to storedifferent sets of images in different

folders, and hence make them easier to find.

When you have set a name andsave location, click OK tosave your picture.




Picture Size and Layout Cells

The size of layout cells can be affected when pictures are added to them. This can result in someconfusing information being displayed on the layout table.

If you make the picture smaller the layout cell will shrink back to the original size. Alternatively

you can leave the picture the same size and force the layout cell to accept the new width.


a) This layout table has two layoutcells, each 225 pixels wide and450 pixels high.

b) The picture that has been inserted is wider than the layout cell, which hasautomatically stretched to accommodate it.

c) The size tags now giveconflicting information.

d) The originalsize is shown atthe left of eachtag…

e) …whilst thenew size is shownin brackets.

b) Complete thedialog box asshown, then click .

a) To clear the contradictingwidths, click on the drop arrow of the tag and choose the optionshown




5.6 Horizontal Lines

To add a line to your page (e.g. underneath a picture):

Changing How Lines Appear

To change the appearance of a horizontal line, simply double-click on the line, or right-click toformat it:


Select Horizontal Linefrom the Insert menu.

Your line will appear wherethe cursor was.

a) Click with the right mouse button on the line and choosethe menu shown.

b) You can then sethow wide it is as a

percentage of thescreen size or inabsolute terms, howhigh it is, etc.




5.7 Views of a Web Page

There are 5 ways in which you can view a web page: Design view, Code view, Split view, andPreview view (described below) or in a web browser (see following page).

Split view shows a combination of the design and code views. Preview view allows you to seean exact representation of how your web page will look in Internet Explorer:


Design view provides a more-or-less accurateview of how your page will look in Internet Explorer or Netscape, and is the view you

normally use for editing web pages.

Code view shows the underlying HyperText Markup Language inwhich all web pages are ultimately written. You can try editing

this if you like – it is a fairly forgiving language, and invalid “commands” are normally just ignored.

Click on this tab to see a web pagein Preview view.

Wise Owl’sHint

Preview view is not a good idea. It does not do what it claims (there are sometimes discrepancies between preview view of a web page and howthe page looks in a browser), and offers no additional advantages. Avoid it and view your pages in a browser (see next page) instead!




Viewing Pages in a Browser

The best way to see what a web page will look like in a browser is to … view it in a browser. Todo this, you must follow these steps:

37) Make sure that you have installed on your computer every browser with which youwant to test your web site. For example, if you want to see what your site will look likein Netscape 4.0 (a good thing to do), you will need to install this software on your PC.

38) Save your page (although FrontPage will warn you if you miss out this step).

39) From the menu select: File Preview in Browser...

40) Select the option required as shown below:

41) If necessary, FrontPage will load the relevant browser program – otherwise, it will justswitch you to it. It will then display your page.

42) Finally (and most importantly), refresh your view to ensure that you are viewing thelatest page, and not an old cached copy!

43) Provided that you remember to refresh your page, you are now seeing what it will look like to the world. Be aware, however, that what your audience sees will also depend ontheir screen resolution, browser settings and what fonts they have installed on their PC.


a) Select the browser andscreen resolution you want touse to view your web page (herethere’s not much choice!).

b) Click here to add other

browsers (e.g. Netscape) to thelist.

In Internet Explorer 6, for example, you can refresh a page

by pressing or by clicking on thistool.

Wise Owl’sHint

Failure to follow the steps below exactly is one of the most commonmistakes you can make when creating a web site. In particular,

forgetting to refresh pages can make you think you have made a mistake,when in fact you’re just not seeing your most recent changes.




CHAPTER 6 - SHARED BORDERS

In the chapter on Layout Tables we created layout cells to contain a page banner and navigation buttons. An alternative way to do this would be to use Shared Borders .

6.1 What are Shared Borders?

Shared borders allow you to create a common look and feel to your web site. The advantage of this is that you only have to set up the border once and it can be included on every page:

You can set left, right, top or bottom shared borders for a web site, and then suspend or changethem for any single page.


This very old version of the Wise Owl web sitecontains one left shared

border, containing thenavigation buttons.

Sandy Stone's site contains:

a top shared border containing the page title

a left shared border containing navigation

buttons.

Wise Owl’sHint

Experienced web authors should note that to a large extent shared

borders make the use of frames unnecessary.




6.2 Setting Shared Borders

Setting Shared Borders for your Web Site

When you have designed your web site, you will be ready to tell FrontPage what shared bordersyou want to set. To do this:

44) In FrontPage, from the menu select: Format Shared Borders...


Changing Border Settings for a Single Page

Often you will want to suspend thestandard shared border settings for (say) the home page of your website.


For the home page only,we might suspend thetop shared border.

Make sure that you are changingthe shared borders for every pagein your web site.

Tick the borders thatyou want.

This will put navigation buttons in theleft shared border, allowing you tomove between pages of your web site

– see later in this chapter for moreinformation.




You can suspend the shared borders for a single page by selecting Selected page in the dialog box above.





6.3 Editing Shared Borders

Shared borders are easy to edit - you can get at them from any page in your web site!

Where are My Shared Borders Stored?

Sometimes it can be useful to know where shared borders are stored (for copying them from onesite to another, for example). Your shared borders are stored in the _borders folder within your web site, but you can not usually see this. To view hidden folders:

46) From the menu select:Tools Site Settings…

47) Complete the dialog box which

appears as shown, then select OK .

48) You should now be able to see some or all of the four possible shared border files in thefolder called _borders : top.htm , left.htm , bottom.htm and right.htm .


Under normal circumstances, youare editing a page in your web site(here it is howto.htm ).

Click in a shared border to edit it (the edges of all theselected borders change from dotted to black). When youhave finished, click back in the main body of the page.

Select this option in theAdvanced tab.

Wise Owl’sHint

Editing shared borders is frightening because although you appear just to be changing a single page, you are actually making a change whichwill affect most if not all pages in your web site!




6.4 Navigation Bars

Navigation bars allow your readers to move between pages in your web site easily. Navigation bars can go anywhere in a web page, but are usually positioned in a shared border.

To create a navigation bar:

49) Position the cursor in the shared border in which you want to create a navigation bar:

50) From the menu select: Insert Navigation...

51) Complete the series of dialog boxes which appear as shown below.


Here the navigation bar willgo in the Left shared border (and in doing so will make ita bit wider!).

a) Choose which type of nav bar touse. One that is based on thenavigation structure you havealready set up is most useful.

b) Choose a style for the bar. Themestyles will create graphic buttons,text styles can be found at the

bottom of the list).

c) Choose the orientation for your nav bar. Typically you would include ahorizontal bar in a top border, and avertical bar in a left border.

d) Click Finish , and see the following page for what to do next.




Navigation Bar Properties

The final stage in inserting a navigation bar is to choose which pages your buttons will link to.

The next page describes the effects of the different button options.


The key changesdepending onwhich options

you choose.

Tick this option if youwant your navigation

bar always to include a button allowing your user to return to your home page.

Tick this option if you

want your navigation bar always to include a button allowing our user to return to thenext highest level pagein your web site.




The Different Button Options

Consider this fairly old incarnation of the Wise Owl web site:

The table below shows what the various navigation bar options would display:

Option What you will see What it is showing

All pages at the next level up of the web sitehierarchy (this page's parent, uncles and aunts).

All pages on the same level of the web sitehierarchy (this page's brothers and sisters). Thisincludes a link to the page itself!

Pointers to the previous and next pages.

All pages on the next level down in the hierarchy(this page's children).

All pages on the top row of the navigation tree(all this page's most distant ancestors). In our

web there is only one home page and we havechosen not to show it, so we will not seeanything.


All the examples below assume that this is the pagewe are editing, and that neither the home page nor

the parent page has been requested:




Changing the Properties of a Navigation Bar

To change your mind about the buttons anavigation bar should display, simply double-click on it:

Changing how Up, Back, Down and Next Appear

Depending on the options you have chosen, you may get some or all of the following buttonsappearing:

To change the text on these standard buttons:

52) From the menu select: Tools Site Settings...



The hand holding asheet of paper shows

you can change the properties of thisnavigation bar.

You can change the text which appearson these standard buttons.

a) Select thistab.

b) Change the text thatappears on the standard

buttons by typing newtext here.




6.5 Timestamps

This page gives one idea for how to create a bottom shared border that identifies when a pagewas last updated.

To create a timestamp:

54) Position the mouse pointer where the timestamp should go (this does not have to be in ashared border, but typically would be).

55) From the menu select: Insert Date and Time...

56) Complete the dialog box which appears as shown below, then selectOK

.

57) You can now add some text before or after the timestamp - in our example above wehave typed in Page last updated on: before the timestamp.


It is good practicefor every page of your web site toshow a timestamp ,showing when the

page was lastedited.

This is the best option- it shows whensomeone last editedthe page.

Choose a formatfor the date and

time.




CHAPTER 7 - LINKS

7.1 Overview

You can use hyperlinks to move between pages within web sites, and to link to other web sites.

This chapter covers the following sorts of links:

Type of link Notes

Hyperlink Click on the link to jump to another page

Mail link Click on the link to send an email to someone

Hover buttons

Buttons which glow when you let your mouse linger over them – click on them to jump to other pages

Image maps When you click on part of a picture, you jump toanother page

Bookmarks Links to different points within the same page.


…takes the reader to another page.Clicking on this link…




7.2 Basic Hyperlinks

To create a basic hyperlink:

58) Type text to describe your link (e.g. "Click here to …."), then select this text.

59) From the menu select: Insert Hyperlink...


61) The text you had highlighted is now a different colour and is also underlined:

A link can also be added to a picture - just select the picture before choosing to insert the link.


Select the page youwant to create a link to. Note that pagescurrently being editedare indicated as open.

Your new hyperlink has now been created.

Wise Owl’sHint

Different themes will show hyperlinks in different colours. For most themes, “used” hyperl inks will appear in a different colour to that used

for unused hyperlinks.

FrontPage puts the URL (the link information) in this box. This

shows that FrontPage is going to create a relative link (i.e. jump tothe file called hobbies_&_interests.htm in the same folder as thecurrent page) rather than the less useful absolute one (jump tohobbies_&_interests.htm in f:\training\ … \trainingsite ).




7.3 Creating Mail Links

To create a hyperlink that enables your viewers to e-mail you:

62) Type some meaningful text (e.g. "Click to contact the Author"), then select this text.


64) Complete the dialog box which appear as shown, then select OK .

65) When a reader clicks on this link while viewing your page on the web, his/her e-mailsoftware will run and open a "new e-mail message" window for him/her to contact you.


When your user clicks on the link, theywill be given the chance to e-mail you.

Select the E-mailAddress button, andtype in an e-mailaddress.

Recently used emailaddresses are listed here.

When you are ready,click OK .




7.4 Interactive Buttons

An interactive button is another type of link in the form of an animated button. It actuallyconsist of three separate images, which are saved when you save the page.

To create a hover button:

66) As always, position your cursor where you want your interactive button to go.

67) From the menu select: Insert Interactive Button…



When someone hovers their mouse button over this hover button , itglows and changes colour.

Wise Owl’sHint

In some browsers (for example, some versions of Netscape) when youreturn to a web page you have previously viewed hover buttons canappear to vanish! In this case you should click on the Refresh button toredisplay them.

You can see a preview of the button here.

Choose the styleof button from theextensive list.

Type in the textfor the buttonhere.The link can be to

another page, anemail address or a

bookmark.

Use the font andimage tabs tochange theappearance of the

button.




7.5 Image Maps

Image Maps are images containing hyperlinks to other pages.

To create an image map :

69) Insert an image onto your page (e.g. a clipart picture), then select the image.

70) Create a hotspot on it by following the steps below:

(i) Choose the type of hotspot you wantto create from the Pictures toolbar:

(ii) Draw your choice on the top of your image (for polygonal hotspots, click at theend of each line segment and then double-click to finish).

(iii) Complete the dialog box which appears as shown, then select OK .

71) Repeat step 2 for any further hotspots you wish to create on your image map .


Click on the page youwish to link to…

… or type the location of the required page here,then click on .

a) A polygonalhotspot is created onthis image.

b) When the reader moves themouse over Ireland, the pointer changes to a hand and a text messagetells the reader where the hyperlink goes to.

Choose to draw arectangular, circular or

polygonal hotspot.

Wise Owl’sHint

You can click on the tool to highlight all the image maps youhave created - then click again to hide them again.




7.6 Bookmarks

You can use Bookmarks to take your reader to a particular location on a large web page:

Creating Bookmarks

To create a bookmark:

72) Place the cursor where you wantthe bookmark to be created.

73) From the menu select: Insert Bookmark...

74) Complete the dialog box which appears asshown, then select OK .


This is where SandyStone wants a bookmark on his Hobbies &Interests page.

Type in a name for the bookmark andclick on .

Your reader can still view earlier parts of the page by using the scroll bar, or by pressing or on the keyboard.

When you click on this hyperlink it jumps your user to the correct

point on the page.

Bookmarksshow as flags.




Creating Links to Bookmarks

Once you have created a bookmark, you can create a link to it:

75) Select the text which you want to become a clickable hyperlink.




a) Choose to link to a place in this document.

b) Choose any of thebookmarks present on the

page you have selected,then click .

Wise Owl’sHint

Note that in order to be able to create a link to a bookmark in this way,the file containing the bookmark must be open.




CHAPTER 8 - BASIC TABLES

Previously we used layout tables to create a structure for a web page. Simple tables can also beused in FrontPage; these lack the flexibility of layout tables but are still useful.

8.1 Creating a TableThere are three different ways to create a table in FrontPage.

Inserting a Table from the Menu

This method allows you to specify other options at the same time:

78) From the menu select:Table Insert Table...

79) Complete the dialog boxwhich appears as shown, then select

OK .

80) FrontPage will insert atable at the cursor position.


A blank table will appear on your page.

Wise Owl’sHint

The reason tables are so useful for web sites is that they are largelybrowser and screen independent - what looks acceptable on a 14" monitor running Netscape 3 will also look more or less the same on a17" monitor running Internet Explorer 5.

Choose to

disable layouttools.

Enter the number of rows andcolumns.

Options below this point dealwith formatting, which we willcover later in this chapter.




Drawing a Table

81) From the menu select: View Toolbars Tables to display the tables toolbar.

82) Choose to draw a table: Tool Top Menu

Table Draw Table

83) The mouse pointer will change into a pencil. Follow the steps shown below:

84) The mouse pointer will still look like a pencil. To draw in your columns and rows,click and drag to form a line from two opposite edges of the table.

85) Repeat the above steps for the remainder of your lines, then click the icon againto end “drawing” mode (or press Esc ).


a) Click and hold the mouse where you want

your line to start, and drag the dotted linetowards the opposite side…

b) Release the mouse button andyour table appears on the page asabove.

a) Click and drag with the left mouse button until you have the size you require.

… and when the pointer is more than half

way across or down the table, the dotted linewill automatically join the opposite side.




Creating a Table Using the Table Icon

86) To create a table using the Insert Table icon:

87) Click and hold the icon on the toolbar. The box below will appear:

88) With your mouse button still held down, drag to fill in the required number of cells for your table:

89) Release the mouse button to insert the table onto your page.


Each square representsa cell in a table.

As you move the mouse, the selectedsquares change to a dark blue.

The bottom of the box confirms thetype of table you have selected.

As soon as you release themouse button, the table isdrawn onto your page, asshown here.




8.2 Using Tables

Moving between Cells

Clicking on any cell in the table will position the cursor in that cell. Alternatively, once you arein the table, you might find that pressing the keys below is an easier way of moving around:

Keys What they do

or Moves to the end/start of a cell character bycharacter, then jumps to the next/previous cell.

or Moves to the previous or next row

Moves to the next cell to the right (or to the firstcell in the next row if there is none)

+ Moves to the next cell to the left (or to the last cellin the previous row if there is none)

Adding Text

90) Position the cursor in the cell where you want your text to be.

91) Type in your text as required:


Pressing at the end of a table inserts a new row:

The cell will grow taller automatically to accommodatethe text you type.

Press here to create a fifthrow for this table.

Wise Owl’sHint

Wise Owl’sHint

You can insert almost anything into a table cell - text (as above), clipart pictures, or even another table!




8.3 Selecting in Tables

Before you can insert, delete or format table rows, columns or cells, you must know how toselect them.

Selecting a Single Cell

To select a single cell, either:

♦ Click in the cell and use the <td> tag on the quick tag selector;♦ Holding the Alt key down, click in the cell; or

♦ Click in the cell, then from the menu select: Table Select Cell

Selecting Multiple Cells

You can click and drag down/across cells to select them, or use the Ctrl key to select non-adjacent cells:


Those with good mouse skills might like to try the method shown below for selecting a single cell - it doesn't work for the top row of a table:

FrontPage highlights the cellto show that it is selected.

When this "North-East" arrowappears beside a cell, you can click toselect the cell.

You can click down and across cells in a block to select them. Alternatively, click onthe top left cell, then with the keyheld down click on the bottom right cell.

You can select non-adjacent cells like this byselecting the first block, then holding down the

Ctrl key while you select subsequent blocks.

Wise Owl’sHint




Selecting Rows

You can select rows by clicking and dragging down them:

Alternatively, use the <tr> tag from the quick tag selector, or select one or more cells and thenfrom the menu select: Table Select Row

Selecting Columns

You can select columns as for rows, by clicking and dragging across them:

Alternatively, select one or more cells and then from the menu select: Table Select Column

Selecting a Whole Table


Wise Owl’s

Hint

As for selecting cells, you can use the key to add rows/columns onto your selection:

a) Position the mouse immediately tothe left of the first row you want toselect.

b) Click and drag toselect as many rows asyou want.

a) Position the mouse immediately abovethe first column you want to select.

b) Click and dragto select asmany columnsas you want.

Here we used thekey to select rows1, 3 and 4simultaneously.




To select a whole table, click on any cell within the table then from the menu select: TableSelect Table . Alternatively, you can double-click to the left of the table, or use the quick tagselector.





8.4 Adding Cells, Rows & Columns

Adding Cells

To add new cells to a table (without adding rows and columns):

92) Position the cursor in thecell to the left of where you wantyour new cell to be created.

93) From the menu select: Table Insert Cell


The cursor is positionedinside the table.

The width of the columnshas been reduced in order to fit four columns in atable of the same width.

Note that the spaces above and belowthis cell are not part of the table.

Wise Owl’sHint

Inserting cells like this is something which is probably more often doneby accident than design – it can make for very confusing tables!




Adding Rows or Columns

To insert one or more rows or columns into a table:

94) Position the cursor in a cell:

95) From the menu select: Table Insert Rows or Columns...



The cursor is in the secondrow in the second column.

You can choose whether you want toinsert rows or columns, how many toinsert, and whether they should go

before or after the current row/column.

Wise Owl’sHint

Don’t forget that you can also use the icon in the Tables toolbar to

draw in new rows or columns.




8.5 Deleting Cells, Rows & Columns

The principle for deleting rows, columns and cells is the same - the example below would deletethe address row from the table shown:

97) Select the cell or cells you wish to delete.

98) Choose one of theseoptions:

Tool Top Menu Right Mouse

Table Delete Cells Delete Cells

99) FrontPage deletes the row(s), column(s) or cell(s) you had selected:


Here we have selectedthe second row.

The selected cellshave been deleted.

Wise Owl’sHint

Don’t forget that you can also use the in the Tables toolbar toerase row and column dividers.




8.6 Resizing Columns and Rows

Changing Column Widths

To quickly alter the width of a column, follow the steps below:

Changing Row Heights

To quickly alter the height of a row, follow the steps below:


a) Place the cursor over the border youwish to move until the pointer changesto a two-headed arrow.

b) Click and drag the border until the dotted line is whereyou want the border to be.

a) Place the cursor over the border you wish tomove until the pointer changes to a two-headedarrow.

Click and drag the border until thedotted line is where you want the

border to be.

Wise Owl’sHint

Unless formatted manually, columns and rows are always distributed

evenly within a table.

Wise Owl’sHint

You can also try double-clicking with the mouse at step (a) above - thiswill automatically change the width of the column to be exactly wideenough to accommodate its widest entry. This method works for all but the right-most column.




Sizing Allowing for Different Browsers/Screen Sizes

The table below looks sensible using Internet Explorer on a 17" monitor at 1024 x 768 pixelsresolution:

However, what will happen to the table if we make the browser window smaller or use adifferent screen or browser? The answer comes from the column height and row width settings:

Here are the settings for the table shown above, with what they mean:

Rows 1, 3 and 4 Row 2 Column 1 Column 2


By centrally aligning thetable, we ensure that itlooks sensible.

a) Select the row or column whosewidth/height you want to determineand right click with the mouse.

b) Select this option to displayits properties.

Because the row heights are measured in pixels, readers using smaller screens may haveto scroll down to see the whole of your table.

Because the widths of your columns are measured as a percentage of the table's width (which may or may not be100% of the screen), the column widths will appear smaller on smaller screens.

Wise Owl’sHint

The simple way to avoid problems is to ensure that in every table that you create, columns are measured as a percentage of the total tablewidth, and the sum of these percentages is not more than 100%.




8.7 Table Alignment

Table alignment enables positioning of a table on the left, the right or the centre of a web page.

Left Aligned Centre Aligned Right Aligned

To align a table:

100) Ensure that the cursor is inside any of the cells within the table.

101) Choose one of theseoptions:

Top Menu Right Mouse

Table Properties Table Table Properties

102) Complete the dialog box which

appears as shown below, then selectOK .


Choose from this dropdown list of alignmentoptions.

Specify the table width as a percentage of the totalscreen width – although12% (as here) is a bit onthe small side!

Wise Owl’sHint

Choosing centrally aligned tables, and making sure that their width (as

specified in the above dialog box) does not exceed 100% of the screen, should mean that your tables look sensible using most browsers and most screen sizes.






CHAPTER 9 - ADVANCED TABLES

This section contains more details on how you can use and format tables.

9.1 Merging and Splitting Cells

Merging Cells Together

This option is particularly useful for table headers:

To create a header like this:

106) Enter text into the left-most cell in your block of cells to be merged:

107) Select the cells you want to merge:

108) Choose to merge theselected cells:


Table Merge Cells Merge Cells


This header spans two cells -they have been merged together.

You can type text into the cells to be merged, although often it iseasiest to merge then enter data.

These are the two cellswhich we want to consider asa single cell.




Splitting Cells

Less usefully, you can also tell FrontPage to subdivide a cell in your table into different parts:

To split a cell as shown above:

109) Click in the cell you want tosplit, then choose to split it up:


Table Split Cells... Split Cells…


111) You can now drag and drop to movethe address lines into the correct cells:


Here we are subdividing the addressinto three separate rows.

FrontPage is not clever enough to know that youwant one line of theaddress in each cell.

It's not often that you will want to

change these numbers.

Wise Owl’sHint

Advanced Hint

One other thing to try is to change the span of a cell, by altering its properties. This quickly leads tomessy and unsymmetrical tables,however.




9.2 Table Captions

Instead of merging cells together, you could use a table caption to achieve the effect shown below:

Setting a caption like the one shown above is easy!

112) Click anywhere within the table.

113) From the menu select: Table Insert Caption

Selecting a Caption

To select a caption for formatting, simply click to its left:

Deleting a Caption

To delete a caption, double-click to its left to select it then press Delete .


Using merged cells, the title carries thesame border as the rest of the text. A table caption avoids this problem.

Click with this mouse pointer to select a table caption.

Double-click with this mouse pointer to the left of the captionto select it, then press .




9.3 Table Borders and Shading

The Parts of a Table

The diagram below shows the various parts of a table:

Setting Borders

You can choose to set borders for a table as follows:

114) Click anywhere within your table,then choose to change its properties:




Cell borders must be set separately. See later in this chapter for how to do this.


Every table has a border round it - eventhough it may sometimes have zerowidth. This border is 10 pixels wide.

The gaps between cells (shown here ingrey) are called the cell spacing . Here thecell spacing is set to 20 pixels.

The gap between the contents of each cell and its border is calledthe cell padding . Here the cell padding is set to 10 pixels.

You must first set the border size to be at least one pixel, otherwise youwon't see the border!

Set the border colour (the colour of the Default option is determined byany theme you have applied).

Wise Owl’sHint

The options described in this section can be equally applied to bothnormal tables and layout tables.




Setting 3-Dimensional Effects

By judicious use of light border and dark border colours, you can set 3-dimensional effects for your table:

To set effects like this:




117) Complete the dialog box which appears in part as shown below, then select OK .


The "light colour" here issilver - this determines the topand left edges of your table.

The "dark colour"here is black - thisdetermines theright and bottomedges of your table.

Set any light and dark border colours.If you set a light colour but no dark colour, FrontPage will automatically setthe dark border.

Collapsing the table border will remove any cell spacingyou have set.




Cell Spacing

To control how spaced out your cells look, you can set the properties as shown:

118) Click anywhere within your table,

then choose to change its properties:



119) Enter a cell spacing value in the dialog box as shown below, then select OK .

A cell spacing value of 0 means that all your cells touch each other.

A cell spacing value of 10 puts a gap of 10 pixels between all your cells.

Cell Padding

To control margins in relation to cell borders, you can set cell padding values (from the table properties dialog box) as shown.

A cell padding value of 0 means that the cellcontents are placed in contact with the cell

border to which they are aligned (left in thiscase).

A cell padding value of 10 puts a gap of 10 pixels between the cell contents and all the cell borders.





Table Background Colours and Pictures

Below are a couple of examples of possibilities with table backgrounds:

To set the background colour/image for a table:




121) Complete the dialog box which appears in part as shown below, then select OK .

122) When you have finished, select all the cells in your table and set their backgroundcolour (see the next page for how to do this).


Here the table background colour is set to grey, but each cell's background colour has been set to white.

Here a caveman forms the table's background image – cells have a white background colour.

Click on this button tochoose a picture to formyour table's background -

but notice that "busy" pictures like the cavemanshown above make for messy-looking tables.

Choose the background colour for your table. In this example if the caveman image is transparent, the background colour for theimage will be set to be white.




9.4 Cell Borders and Shading

In addition to setting global settings for a table, youcan set individual cells' borders and background.

The first steps towards doing this are always as follows:

123) Select the cell(s) whose borders or colour you want to change.

124) Choose to change thecells' properties:

Top Menu Keyboard Right Mouse

Table Properties Cell Alt + Cell Properties…

Setting Cell Borders

You can change the borders of a cell in an identical way to changing a table's borders:

Setting Cell Backgrounds

You can change the background colours or images of cells just like for a table:


Here the table has a grey background, butthe six cells have a white background.

Click on this button to choose a picture to form the backgroundfor the selected cell(s), but notethat having different pictures for different cells can look messy!

Choose the background colour for the selected cells. In this example the selected cell(s) will havea picture of a caveman as their background, and this picture will have a white background.

Alternatively, set any light and dark border colours to create a 3-dimensional effect for the selectedcells (this is explained in more detailin the preceding pages).

To set the border colour for the selectedcell(s), choose a colour here.

Wise Owl’sHint

The options for formatting layout cells are more limited - for example youcannot set a background picture. To format a layout cell, click in the cell,

from the menu select Table Cell Formatting… and then use the task pane to set border and background colours.




CHAPTER 10 - HTML

10.1 What is HTML

HTML ( HyperText Markup Language ) is the language in which web sites are written (FrontPage just makes it easier to do this). Here is a sample:

Viewing Other People’s HTML

The great thing about HTML is that it’s publicly viewable. Go to any web site in InternetExplorer or Netscape and click with the right mouse button, and you’ll be able to view itscontents:


HTML is interpreted by browsers

like Internet Explorer into pages on screen

This shows how to view the contents of the Googleweb site in IE5 – like many pages on commercial web sites, this HTML also contains embedded

JavaScript, a progamming language which makes

sites dynamic

Wise Owl’sHint

HTML is a language with many keywords, and this chapter doesn’t attempt to give a reference to more than a few of them. If you want tobecome a serious HTML programmer, a good first move is to buy an

HTML reference book.




10.2 HTML Tags and Attributes

Tags

The basis of an HTML document is the tag – the format is:

<formatting code> text </formatting code>

where formatting code can be any valid HTML code. For example, this piece of HTML woulddisplay “Wise Owl” in bold:

<b>Wise Owl</b>

Some general principles of HTML documents:

Principle Details

Spaces are ignored Any space that you type into HTML is ignored. To get aspace to show up, you must type it in as a non-breakingspace – “ ”

Blank lines areignored

Likewise, any blank lines you put into HTML by pressingwill be ignored. If you do want to put a blank line in,

put <p> </p> (i.e a paragraph with a blank spacein), to ensure it doesn’t get ignored.

All tags have to start and end

Every tag has to begin with a <> tag and end with a </> tag,apart from paragraph tags like <p> (which you can use inisolation to generate a new paragraph).

Attributes

Most of the standard HTML tags have a pre-defined set of attributes, controlling how they work.For example, the <p> tag has an attribute controlling whether the paragraph is to be left, centreor right-justified.


This tag specifies that the paragraph which followsshould be centre justified.




10.3 Tags

This section describes some common tags and their associated attributes. This is by no means anexhaustive list!

Title <title>

The title tag only appears in the <head> section and specifies the text to appear in the browserstitle bar .

HTML Web Preview<head><title> HOME PAGE </title>

</head>

Comment 

Comments are used for annotation and are never displayed in the browser window - in fact browsers completely ignore anything inside a comment tag. Comments are used to break your HTML into logical ‘chunks’.

HTML Web Preview No preview - comments do not appear!

Note that the comment has no closing tag ( </!-- --> does not exist!).

Headers <H1>, <H2>, … , <H6>

Headers are predefined text styles. <H1> being the largest and <H6> being the smallest.

HTML Web Preview

<H1> Welcome to the Pets DataBase! </H1><H2> Please select an option </H2>

Paragraph <p>

The paragraph tag forces two carriage returns (pressing ENTER on the keyboard twice).Compare the second example which uses no tags at all.

HTML Web Preview

<p> The cat sat on the mat </p>

<p> The dog sat on the cat </p>

The cat sat on the mat

The dog sat on the cat

The cat sat on the mat.The dog sat on the cat The cat sat on the mat.The dog sat on the cat





Image <img>

Image tags are used to insert pictures. Note the src=“filename” attribute .

HTML Web Preview

<img src= "owl.bmp" >

HyperLinks <a>

Hyperlink tags are used to create clickable areas on your web pages.

HTML Web PreviewPlease click<a href= "mailto:[email protected]" >here <a>to contact us.

Please click here to contact us.

Bold <B>, Italic <I> and Underline <U>

As you can probably guess, these tags apply formatting.

HTML Web Preview<p> The <b> cat </b> <i> sat </i> on the<u> mat </u>.</p>

The cat sat on the mat.

Align=“Alignment” (attribute)

Again you can probably guess the purpose of the align attribute . Notice it is placed inside the<p> tag. Replace “Alignment” with “Center”, “Left”, “Right” or “Justify”

HTML Web Preview<p align= "right" >The cat sat on the

mat .</p>

The cat sat on the mat.

Alt <alt> (attribute)

This tag displays alternate text for images when you hold the mouse cursor over it.

HTML Web Preview<p><img alt= "Owl" src= "owl.bmp" ></p>


mailto:[email protected]







10.4 Tables

The Tags in a Table

The main building blocks (tags) of a table are:

Tag What it means

<table>,</table>

Begin and end a table – the entire contents of the table mustcome between these two tags.

<tr>, </tr> Begin and end a row in the table

<td>, <td> Begin and end each cell in a row (if you think of td asstanding for “table data”, it makes sense)

HMTL Web Preview<table width= "20%" >

<tr><td width= "50%" >Pet </td><td width= "50%" >Owner </td>

</tr><tr>

<td width= "50% " >Boris </td><td width= "50%" >Fred </td>

</tr>

</table>

Spanning Rows and Columns

In HTML every table must be a rectangular grid of cells. To ensure that this is the case, HTMLuses the RowSpan and ColSpan attributes to fill in extra spaces, as in the above example:


Sandy’s address Name: Sandy Stone

First row spans 2 columnsSingle cell Single cell

The HTML view of 2 of the rowsin the above table

How HTML constructs the table

How the table appears




10.5 Structure of a Web Page

How a Web Page is Structured

Every HTML page is structured as follows:

FrontPage Headers

FrontPage creates cryptic-looking headers – here are the main lines explained:


The Body section contains the contents of the page, including alltext and images to be displayed

The Head section contains the title of the page, whether it wasbuilt in FrontPage, whether it uses themes or shared borders, etc.

<HTML><HEAD>

… other header information goes here …

<Title> Title goes here </Title>

</HEAD>

<Body>

… content of page goes here …

</Body></HTML>

The page was generated usingFrontPage 2003 (or FrontPage6.0, as it is known internally).

The page uses the Expedition theme (referred to here by itsinternal name).

This page uses top (t) and left (l) shared borders.

Wise Owl’sHint

The main thing that you need to know about FrontPage headers is that you should avoid editing them (with the exception of the title) – it mayhave unpredictable results!




10.6 An Insight into Professional Web Design

Virtually all professional web sites compose pages from a number of nested tables, which can bedifficult to interpret.

An Example – Microsoft.Com

Here is what the Microsoft web site looked like atthe time of writing:

Here is how the main tables for this web site are made up:


The main table is set at 621 pixels wide, to ensure that itwill be visible in its entirety in a predictable way on most

browsers. This ensures maximum compatibility, but looksstrange on large resolution screens.

This search form actually consists of six differentrows, including spacer rows. As commonlyhappens in big web sites, single pixel transparentimages are used to fill spacer rows to ensure that

they are not ignored by browsers.

This column of options consistsof more nested tables – these arenot shown here to avoidcomplicating the diagram!

This is a cell spanning two

columns of the table to whichit belongs.

Another table is nested within the bottom row of the screen.

This consists of a set of nestedtables (not shown here).

Wise Owl’sHint

The reason for using tables to construct pages is that they are more or less browser independent (an HTML table will look the same in Internet

Explorer and Netscape) and screen independent (provided you use percentage widths, tables will look sensible on all screens).




CHAPTER 11 - STYLE SHEETS

Style sheets are a (better) alternative to using themes – they work in the same way as for Microsoft Word, determining the default way in which various parts of a site appear.

11.1 Overview of Style SheetsThe diagram below shows the same page with and without styles applied:

The style sheet which effected the formatting changes shown above is as follows:


A page without styles applied The same page with body text set to Comic Sans font, a yellow background and table cell formats changed

This shows that body text (i.e. mostnormal text) will appear in Comic Sansfont (or the closest to it possible) with awhite background.

This shows that table cells will be displayed with white lettering on a yellow background.

Wise Owl’sHint

Before deciding to use style sheets, do a little test to make sure that all your web site users will be able to view them correctly (particularly non- Internet Explorer users).

Wise Owl’sHint

The above diagram shows that to use style sheets effectively you need to

understand HTML tags. You don’t, however, need to learn the codes for the different colours – the style sheet editor will fill these in for you.




11.2 Creating a Style Sheet

You can have a number of different style sheets, although if you want to apply the same look-and-feel throughout your site it is a good idea only to have one. To create this style sheet:

125) From the menu select: File New

126) Select More page templates from the task pane.


128) See the following page for what to do next!

129) When you have finished setting styles,choose to save your style sheet:

Tool Top Menu Keyboard

File Save As... Ctrl + S

130) The style sheet will appear in the FrontPage file list (all style sheets have a CSSextension, standing for Cascading Style Sheet ):


a) Select tocreate a stylesheet.

b) Choose this icon toavoid creating a stylesheet which has beenalready filled in.

Initially style sheets appear as blank sheets!

You can double-click on a stylesheet file to edit it, just like for anyother FrontPage file.




11.3 Creating and Editing Styles

To set a style within a style sheet:

131) Make sure you have created or are editing a style sheet (see previous page).

132) Identify which HTML tag you want to change. Here are a few examples:

Tag What it will change

Body Most content within your site

Table The format of tables

TD The format of each table cell

P The format of paragraphs of text

IMG How inserted images will appear

133) From the menu select: Format Style...

134) Complete the dialog box which appears as shown below:


a) Make sure that youhave this option selected(the alternative, User-defined styles , is beyondthe scope of thiscourseware).

b) Select an HTML tag(here we have chosen the TD tag, which will affect all tablecells).

c) Click here to change how this tag will appear.




135) You can now choose which aspect of the style you want to change:

136) Select OK twice to return to the style sheet.


There’s nothing to stop you editing the style sheet directly (if you arehappy doing this):

The name of the selected tag.

This shows what currentsettings you have.

Click here to change howthis style appears …

… then choose which aspect of thestyle you want to change.

Are you brave enough to try different numbers in here?

Wise Owl’sHint




11.4 Applying a Style Sheet

There’s not much point creating a style sheet unless you apply it to one or more pages in your web site! To do this:

137) From the menu select: Format Style Sheet Links...

138) Complete the dialog boxes which appear as shown below, then select OK .

139) FrontPage puts the following HTML line in each page of your web site:


a) Select this option to apply thestyle sheet to all the pages inyour web site.

b) Click here to choose which stylesheet you want to link to each page in your web site.

c) Select a style sheet.

d) SelectOK

.

This line shows that this page uses the caveman.css stylesheet. If the page also uses a theme the style sheet settingswill override the theme settings where they conflict.




CHAPTER 12 - PUBLISHING A WEB SITE

When your web site is ready to be viewed by the world, you should check and publish it.

12.1 Checking your Spelling

You can run a spell check on any page that you are working on, or check your whole web site inone go. To do this:

1) Switch to the web site view.

2) Choose to check your spelling: Tool Top Menu Keyboard

Tools Spelling... F7

3) Choose to check the spelling of the entire web:

4) FrontPage shows you a list of all errors found:


Wise Owl’sHint

You can also right click on any individual spelling mistake (shown withwavy red underlining) to correct it, add it to the dictionary or ignore it:

Select this button to check thewhole of your web site.

Double-click on each mistaketo choose what to do about it

– it’s fairly intuitive to work out what to do!

Here the correct option is shown,so you could just select it.

Wise Owl’sHint

You may have been editing your final web site directly, in which case youwon’t need to publish it – however, this will mean that anyone will havebeen able to view your development work in progress.




12.2 Using Reports to Check for Errors

When you think your web site is ready for publishing, use the built-in reports to check for inconsistencies and errors:

The main reports for checking for errors are shown below:


A good place to start iswith the default SiteSummary report,which summarises allthe pages in your website.

The menu options shown list items as follows:

Report What it shows

Unlinked Files Files that can’t be reached by

following links from the home page.

Slow Pages Shows all files exceeding thedownload time set in ToolsOptions... under the ReportsView tab. The default is set to 30seconds download at 28 kbpsdownload speed, but you canchange this.

Broken Hyperlinks Lists files which have hyperlinkswhich don’t go anywhere.

Component Errors Lists files containing “broken”FrontPage components. For example, you might havespecified to include one pagewithin another, when theincluded page no longer exists.

Wise Owl’sHint

Note that you can double-click on any row of the site summary report to see its detail. For example, the site summary report above shows 4unlinked files – double-click on this row to see where they are.




12.3 Publishing your Site

After correcting spelling and other errors, you are ready to publish your web site to the world!The first step is to switch to the Remote Web Site view.


Specify where the web site is to bestored (this could be an internal server on your Intranet, or – as here – a server

provided by a hosting company).

Switch to the Remote WebSite view and click theremote web site properties

button.

Fill in the dialog box whichappears as shown below.

Choose the type of server your website will run from. Here we havechosen a remote server suportingFrontPage Server Extensions.

On the Publishing tab select what part of your web site to publish.Just publishing pages that you havechanged will speed up the process.

If you are publishing to a remoteserver, clicking OK will promptyou for a username and password,which should have been provided

by your hosting company.

Finally, click the Publish Web Site button to copy your files to thelocation specified. After all, copyingfiles is all publising really is!

Make surethat you arecopyingfrom Localto Remote.




Publishing Selected Pages

FrontPage 2003 allows you to publish individually selected pages, which makes updating your website even quicker.

The pages you have selected will then be copied straight to the location you specified when youfirst published your web site.


From the Folders tab of the WebSite view, select the pages youwant to publish. You can use toselect multiple pages.

Click with the right mouse button on one of the selected pages and choose the optionshown.




12.4 Possible Problems when Publishing

Here are some of the main problems you may have when publishing a web site:

Problem Solution

FrontPage won’t give you access tothe web site to which you want to

publish

Contact the server administrator or web sitehost for the correct name and password, and toensure that you have access to publish to thisserver.

Certain features of FrontPage don’t work, or your site looks nothing like it did in FrontPage.

The server to which you are publishing doesn’tsupport FrontPage components. If it is aWindows server, contact the server administrator to see if it is possible to install

FrontPage extensions (without whichFrontPage components won’t work).

Active server pages won’t work. You have published to a disk-based (notserver-based) web, or the server to which youare publishing isn’t running IIS. Contact theserver administrator to ask if IIS can beinstalled.

Your web site hasn’t changed Have you refreshed the page?

Date post:	10-Apr-2018
Category:	Documents
Upload:	andyowl
View:	219 times
Download:	0 times

FrontPage 2003 - Course Aware and User Guide

Documents