1

IT Services

Managing Personal Web Pages Using Microsoft FrontPage

2003

Contents:

Introduction

Creating a Source and Publish Folder

Creating a Web

Publishing the Web

o Setting File and Directory Permissions

Different Views

o Web Pages View

o Folders View

o Navigation View

o Hyperlinks View

o Reports View

o Tasks View

Shared Borders and Navigation Bars

o Adding a Navigation Button

Themes

Republishing the Web

Further Tasks

Opening a Web

Logging Out

This document is an introduction to managing personal web pages on the University system.

Before attempting these notes you should have worked through the document entitled Creating

Personal Web Pages in Microsoft FrontPage or have your own existing web pages stored in My

Documents (your Unix home directory, drive N: on IT Services public PCs).

Introduction

Microsoft FrontPage can be used not just to create web pages but also to control them. These notes

cover its second function and show you how to manage your personal web pages whether they were

created using FrontPage or other software such as Microsoft Word.

The notes assume you have an existing personal web site, here at the University (for example, if you

took the Creating Personal Web Pages class, you would have created one). If you do not have the

necessary files then you can download a set of files via the link provided here (when prompted: [Run]

the file - do this 2 times; change the install path to n:\ and click [Install]; a public_html folder should

have been created under your_username on 'ndrive' (N:)).

2

Creating a Source and Publish Folder

Though it is not strictly necessary, it's good practice to have both a development and published web

site. This allows you to mess around with your web pages without affecting the information on your

published pages. Only when you are happy that your new developments are working satisfactorily do

you publish them worldwide. Having separate source and publish folders also acts as a back-up, just

in case you accidentally delete a file (or part of one) when modifying your site.

You should already have a set of pages in your public_html folder. These will become your source

and a new folder for published pages will be created:

1. Login as usual by entering your username and password

2. View your current files by clicking on [start], My Computer and double clicking on the N:

drive 3. Right click on the public_html folder

4. Select Rename then type in the new name for the folder source and press <Enter>

5. Now open the File menu, select New then Folder

6. Type public_html to rename the folder then press <Enter>

7. End by closing the My Computer window - click on the [Close] button

Creating a Web

The management tools in Microsoft FrontPage require that all the files used on your personal pages

are bundled together in a web. When you create a web, FrontPage generates additional (mainly

hidden) files and folders to manage your personal files. Once established, you can rename or move

files between folders within the web and FrontPage will automatically update the hyperlinks for you.

FrontPage can also check for broken hyperlinks or for orphaned files - ones which do not have a link

to them anywhere within your web.

1. Open the start menu, choose All Programs then Microsoft Office and finally Microsoft

Office FrontPage 2003 2. In the Getting Started Task Pane on the right, click on the link Create a new page or site...

under the Open heading

3. In the New Task Pane on the right, click on the link More Web site templates... under the

New Web site heading

The Web Site Templates window appears:

4. Click on the Empty Web Site icon/picture on the left-hand side of the window to select this

5. Click on the [Browse...] button under Specify the location of the new Web site:

6. In the New Web Site Location window, click on the [My Computer] button on the left

3

7. In the list that appears, double click on your_username on 'ndrive' (N:)

8. Select the folder source then click on [Open]

9. Back in the Web Site Templates window, it should be showing N:\source\ under Specify the

location of the new Web site:

10. Click on [OK]

A temporary window appears as FrontPage creates the new web, followed by the following window,

listing the component files in the web. Note the creation of two additional folders: images (which can

be used for storing your pictures) and _private (this and a further two folders, _vti_cnf and _vti_pvt,

are used by FrontPage to manage your web).

Publishing the Web

To publish the web into the public_html folder previously created:

1. Open the File menu and select Publish Site... (or click on the [Publish Site] button -

towards the left of the Standard toolbar)

2. A Remote Web Site Properties window appears

3. Click on the radio button (circle) next to File System

4. Click on [Browse...] next to the box under Remote Web site location:

4

5. The New Publish Location window appears, click on [My Computer] on the left

6. In the list that appears, double click on your_username on 'ndrive' (N:)

7. Select the folder public_html then click on [Open] - it should be showing N:\public_html

under Remote Web site location:

8. Click on [OK] to confirm the published web location

The first time you publish a new window will appear, stating that the web doesn't yet exist and asking

if you would like to create it. On future occasions this message won't be displayed.

9. Press <Enter> or click on [Yes] to confirm this

The main window changes to show the files currently in your source Local Web site on the left-hand

side and in your public_html Remote Web site on the right-hand side. This is the Remote Web site

View. Currently, all the files (not folders) in the source Local Web site have an arrow in front of them

indicating that they will all be published.

5

10. Press <Enter> or click on the [Publish Web site] button in the bottom right-hand corner of

the window

A little graphic is shown while the pages are copied from the source folder to public_html - this

shouldn't take too long. The Status in the bottom left-hand corner of the window should show you that

the web site published successfully. There are also some links in the Status area that let you view your

publish log file and your Remote Web site, and Open your Remote Web site in FrontPage.

11. Click on the View your publish log file link - this will open up the log in Internet Explorer

Note the Show only: button. This lets you choose different components in the Publish Log.

12. This particular report shows which files were copied over and when the web was published -

[Close] the Internet Explorer window

Unfortunately, the View your Remote Web site link will only show the icons of the files and folders

on the Remote Web site rather than a web page with links.

It is not usually advisable to Open your Remote Web site in FrontPage as you should work and

change things only in the source or Local Web site.

Setting File and Directory Permissions

Because you now have a new public_html folder, your web site has lost its access permissions. These

still exist on the old folder (now called source) but the University Web Server doesn't recognise this

folder as the source of your web pages. You must reset permissions to the public_html folder on the

main computer, as you did when you first published your pages on the Creating Personal Web Pages

class. If you did not come to this class then please refer to those notes.

1. Open the Windows start menu, choose All Programs followed by Communications and

finally Connect to Main (Unix)

2. In the PuTTY window, at the login: prompt, type in your_username (press <Enter>) - if you

type this in wrong then press <Ctrl d> to close the PuTTY window and repeat the previous

step 1

3. At the Password: prompt, type in your password (press <Enter>)

4. At the main% prompt, type cd public_html (press <Enter>)

5. Type publish (press <Enter>)

6. Hide the PuTTY window by clicking on the [Minimize] button

7. Click on the Internet Explorer icon in the Quick Launch area to the right of [start] in the

bottom left-hand corner of the screen (if this is not showing, then click on [start] followed by

Internet at the top of the start menu)

8. Click on the University of Reading shield at the top of the Home Page

9. Change the Address: to http://www.reading.ac.uk/~your_username and press <Enter>

10. Hopefully, your personal home page should now be showing - test out your links, if you like,

then [Minimize] the Internet Explorer window

Different Views

Along the bottom of the Microsoft FrontPage window are buttons that give you different views. The

sections that follow deal with each of these views in turn, showing you how they can be used to

manage your web site. As the mouse cursor is pointed to each view in turn, a help tip is displayed:

6

Folders - organize files and folders

Remote Web site - synchronise files between this web site and a remote web site (this view

was seen when publishing above)

Reports - analyse your web site and manage its contents

Navigation - design the web site's structure for navigation and link bars

Hyperlinks - view hyperlinks to and from any page

Tasks - create and manage tasks

Web Page Views

These views are not explained above, but they are what you used when creating your original pages.

As such, they were fully explored in the previous notes on Creating Personal Home Pages Using

Microsoft FrontPage. To access your pages for editing:

1. In the Folder List panel on the left-hand side, double click on the file to be edited - e.g.

index.htm 2. Move between Design, Split, Code and Preview as required by clicking on the relevant tab

3. In Design View hold down <Ctrl> and click on the My Interests hyperlink to open the file

interests.htm for editing

At the top of the web page, you should now see some tabs for the open index.htm and interests.htm

files.

4. There is also a tab called [Web Site] - click on this tab now

Folders View

The first button in the Views panel at the bottom of the FrontPage window is labelled Folders. As you

will see in a minute, this acts very much like Windows Explorer in that it allows you to move files

around, create/delete files and rename them. Whenever you move or rename a file, Frontpage

automatically updates any references to that file within the same web.

1. Click on the [Folders] button in the Views panel

The right-hand part of the window now displays the full details of your files - their size, when they

were last modified, etc. As in Windows Explorer you can sort the files on whichever attribute you

choose simply by clicking on the column heading. Clicking on the same heading a second time

reverses the sort order.

Begin by moving your picture files into the images folder. It's good practice to keep your images and

text separate, either storing all image files in a single folder or (for a big web) by having separate

image folders for the different parts of the web.

2. Drag and drop each image (.gif and .wmf) file in turn into the images folder (point to the file,

hold down the mouse button and drag the file to the folder)

A window briefly appears for each image stating that, for example, contact.gif is being renamed

images/contact.gif. You can, by the way, select a group of files (use <Ctrl> click for single files,

<Shift> click for a range) and move them in one go. In a minute you'll verify that the raw html or code

has been changed in your original files; first, try renaming a file:

7

3. Right click on the file interests.htm and choose Rename

4. Type hobbies.htm as the new name for your Interests Page and press <Enter>

You are now warned that this page should be updated so that the hyperlinks are not broken.

5. Press <Enter> for [Yes] to update the hyperlinks to this page

To see what's been happening, have a look at the html:

6. Click on the [index.htm] tab just below the toolbars

7. Click on the [Split] tab at the bottom of the page

8. Look for any image in the bottom window and click on it - in the top window, the code should

now include images/ to reflect your moving the file into the images folder

9. End by clicking on the [Web Site] tab at the top to return to the Folders view

Another command that is available from the shortcut menu which appears when you right click on a

file in Folders View is Publish Selected Files.... Try this next:

10. <Ctrl> click to select the modified files: index.htm, hobbies.htm and the images folder

11. Right click on the selected files and choose Publish Selected Files... - reply [Yes] if you are

prompted to overwrite a file

Whenever you re-publish to your public_html folder, you may have to reset the access permissions.

This will certainly be true if you add new files or rename existing ones (as here).

12. Move to Internet Explorer on the Task Bar and [Refresh] your page (or use <F5>) - you will

find that the contact image at the bottom of the index page is not showing. If you click on the

My Interests link, you will find that access to this page is forbidden

13. Move to the telnet window (C:\) on the Task Bar and type publish - press <Enter>

14. Hide the telnet window by clicking on the [Minimize] button

15. In the Internet Explorer window [Refresh] your page (or use <F5>) once more - it should now

be working again

16. Hide the Internet Explorer window by clicking on the [Minimize] button

Navigation View

Skipping over Remote Web site View (which will be looked at again when republishing is done) and

Reports View for the moment, the next icon, Navigation, repeats many of the functions available

within Folders View but in friendlier way. It also helps you visualise the overall structure of the web

and is the best way both to create new pages and reposition existing ones.

1. Click on the [Navigation] button in the Views panel

The right-hand pane of the screen shows a box representing your Home Page, with a little house

symbol denoting this. You use this area to create a diagram showing the structure of your web - how

the files relate to each other. Most people arrange their site hierarchically, with the home page at the

top and child (dependent) pages underneath. These in turn may have their own child pages, creating a

structure like a Family Tree.

2. Drag the file hobbies.htm from the Folder List to a position immediately below the Home

Page box - a little join line appears

3. Release the mouse button to establish the link

4. Click on the [-] button at the foot of the Home Page box to close this part of the web

8

5. Click on the [+] button which is now showing to reopen the link

Currently, you have no other pages to add to the tree but you can also use Navigation View to create

new (empty) pages, ready for you to fill with content.

6. Right click on the Home Page box and choose New then Page

A new page is created, called New Page 1.

7. Right click on New Page 1 and choose Rename

8. Type My Family then press <Enter>

9. Repeat steps 6 to 8 for a second new page, calling this one My Friends

10. Repeat steps 6 to 8 again but this time, right click on the My Friends box to create a page

called Photos under My Friends

When you rename a page in the structure you are changing the Page Title. As you will see later, this is

used in shared borders and navigation bars.

Hopefully, you created your new files in the correct places so that the structure looks like this:

Don't worry if your tree is slightly different, you are now going to learn how to move files around

within Navigation View. First, you need to refresh the Folder List to show the added files.

Tip: Occasionally FrontPage seems to lose track of what's happening. If you create and rename a file

then you can't move it until the Folder List is updated.

11. From the View menu, choose [Refresh] (or press <F5>) to see your new files in the Folder

List

12. In the right-hand pane, point the mouse cursor to the Photos box then hold down the mouse

button and drag the box from its current position to below the My Family box

13. When the join line moves to My Family, release the mouse button to confirm the file's new

position in the structure

You can also copy and paste files within Navigation View:

14. Right click on the Photos box and choose Copy

15. Right click on the My Friends box and choose Paste - you should now have a Copy of Photos

box under My Friends

16. Right click on the new box and Rename it Photos - press <Enter>

9

Though both files have the same Page Title, the filenames are different. To see this:

17. From the View menu, choose [Refresh] (or press <F5>) to refresh the Folder List

Tip: It's a good idea to rename your files from the default given them by FrontPage as you create

them. It's then less likely you will forget which is which!

18. Right click on photos.htm in the Folder List, select Rename and call it FamilyPhotos.htm -

press <Enter>

19. Repeat step 18 on photos1.htm, calling it FriendsPhotos.htm

You can also create new pages in the Folder List and then add them to the tree later. Folder List also

enables you to create new folders in which to store related files. To do this:

20. Right click on N:\source under Folder List, choose New then Folder

21. Type in the name for the new folder (call this one Friends) then press <Enter>

22. Drag and drop the files my_friends.htm and FriendsPhotos.htm into the new folder

Note: Though you are currently in Navigation View you are not affecting the tree structure - it's as

though you were in Folders View, changing your filestore structure.

One final thing you may need to know about Navigation View is how to remove a file from the

structure. To do this:

23. Right click on the Photos box under My Family and choose Delete

24. Press <Enter> for [OK] to Remove page from the navigation structure

The page will be removed from the tree but remains in Folder List. If you were to carry out step 23

within Folder List then the file would be permanently deleted. To restore your Family Photos page:

25. Click on the [Undo] button or drag FamilyPhotos.htm from the Folder List to its position in

the tree

Hyperlinks View

In the same way that Navigation View gives a graphical representation of the file structure of a web,

Hyperlinks View shows you the hyperlinks from and to your pages. This includes both links to your

own files and external links. Email (mailto) links are also shown.

1. Click on the [Hyperlinks] button in the Views panel (you will probably need to scroll

horizontally)

10

In the right-hand pane, a visual representation of the hyperlinks is shown. This is currently centred on

your Home Page, index.htm (that's the default setting) but any page can be the focus - you simply

select it in the Folder List. The lines connecting one page to another represent the hyperlinks, with

arrowheads denoting the direction of the link.

As you move the mouse cursor over a page in the right-hand panel, further information about the link

is displayed. For example:

2. Move the mouse cursor over the link to the University Home Page (http://www.reading.ac.uk)

and note that this is shown as an External Hyperlink which is Not Verified - you will see in a

moment how to verify your links

Some pages (e.g. hobbies.htm) have + signs attached, indicating that they in turn contain further

hyperlinks.

3. Click on the [+] button attached to hobbies.htm to the right of index.htm

4. To close the opened link, click on the [-] button now attached to hobbies.htm

The default Hyperlinks View displays filenames but excludes images. To see these and display the

more user-friendly Page Titles:

5. Right click in the background in the right-hand panel and select Show Page Titles

6. Right click again and this time choose Hyperlinks to Pictures

7. To return to normal settings (if you want to), repeat steps 5 and 6 to turn off these options

Note that you can also show Repeated Hyperlinks, using the above method, if you have more than

one link from one file to another.

Reports View

In Hyperlinks View you saw that certain links were Not Verified. Checking for broken hyperlinks and

various other useful features are available under Reports View. This is one of the most useful tools

provided by FrontPage.

1. Click on the [Reports] button in the Views panel

The Site Summary window appears:

11

In the left-hand column of the table is a list of the available reports. These are accessed by clicking on

the report name. A new Reporting toolbar should also have appeared just above. The drop-down

arrow attached to the first ([Site Summary]) button on this toolbar can be used to switch between

different reports or to return to the Site Summary.

Begin by exploring which files in your web are currently unreachable:

2. Click on the Unlinked files report - the third in the list

A list of all the new files you created under Navigation View is given. These files are often referred to

as orphans and FrontPage provides this very useful way of identifying them, reminding you that you

have yet to fill in the contents and link them to pages currently accessible.

3. Using the drop-down arrow attached to the first button (now showing as [Unlinked Files]) on

the Reporting toolbar, reselect Site Summary

4. From the Name list, this time choose Hyperlinks

You are now asked whether you would like the hyperlinks verified. Checking that hyperlinks are still

active is one of the biggest problems faced by websites, but FrontPage can do this for you.

5. Press <Enter> for [Yes]

All your hyperlinks should now be shown as OK. If FrontPage identifies a broken hyperlink then you

are informed. To see this, you first need to create an incorrect link on one of your own pages:

6. Click on the [index.htm] tab just above the Reporting toolbar

7. Check you are editing index.htm in Design View

8. Drag through the bulleted link to My Friends then click on the [Insert Hyperlink] button

9. Check you are linking to an [Existing File or Web Page] then type an Address of

my_friends.htm - press <Enter> for [OK]

10. Press <Ctrl S> to [Save] your changes

11. Click on the [Web Site] tab just above the Reporting toolbar

The Broken Hyperlinks report now shows a broken hyperlink - the one you have just added. To correct

this:

12. Right click on the broken hyperlink to my_friends.htm then choose Edit Hyperlink...

You now have the choice of Edit Page, which takes you to Page View (where you can make the

necessary changes either in Design View or Split View), or Browse..., which lets you edit the

hyperlink directly.

13. Click on the [Browse...] button

14. Double click on the Friends folder

15. Choose my_friends.htm then press <Enter> for [OK]

16. Click on [Replace]

In the Broken Hyperlinks report you should find that my_friends.htm is no longer shown as a broken

link.

Note: One set of reports which aren’t available via the Reports button list arrow on the University

system is Usage. This normally gives data on the number of hits to your website etc; however it is not

supported by our server. Such data is available for departments, research groups and clubs (but not

12

personal home pages) at the following address: http://www.webstats.reading.ac.uk/

Tasks View

The final Views panel button is labelled Tasks. This is a useful place to store your own notes about

your web site. You can record changes you have made and create lists of jobs to be done.

1. Click on the [Tasks] button in the Views panel

Currently you have no tasks and a message to that effect appears. To create a task:

2. Open the Edit menu and select Tasks then Add Task... - or right click on the empty

background of the right-hand panel and select the command from the shortcut menu

The following dialog box appears:

Note: If you use the command from the menu, you can open this window from anywhere in

FrontPage - you don't have to be in Tasks View.

3. Start filling in the New Task by typing a Task name: of Photos

4. Ignore the Assigned to: box - this is useful where several people are jointly developing a web

5. Finally, type in a Description: of the task - e.g. Scan in photos of my friends for the

FriendsPhotos page - click on [OK]

You can add further tasks, if you like, to remind yourself of the other jobs which need doing.

FrontPage can automatically generate tasks for you as you create pages, if you turn on the relevant

option. For example, it can remind you to check for missing hyperlinks or spelling errors:

13

6. Open the Tools menu and select Spelling...

The following dialog box appears:

7. Leave Check spelling of: set to Entire web

8. Under Options: turn on the Add a task for each page with misspellings checkbox

9. Press <Enter> for [Start]

A new task will now be created for each page with a spelling mistake.

10. [Close] or [Cancel] the Spelling window

Once a task has been generated you can activate it by right clicking on it. You can then:

Edit task - to add further comments or assign it to someone else, for example

Start Task - to start a task such as a spell check

Mark Complete - change the status of the task to show it has been completed

Delete Task - remove the task from the list

As an example, try out a spelling check:

11. Move back to [Tasks] view and right click on a Fixed Misspelled Words task (hopefully you'll

have one - if not then go back to one of your pages and deliberately make a spelling mistake!)

12. Select Start Task and the spell checker will start up on the selected page

13. Make any necessary corrections (or use [Ignore] if you are checking rubbish text)

14. Press <Enter> for [OK] when the spelling check is complete - note that the spell check took

place where you would normally edit/change the page

15. Press <Ctrl s> to [Save] the corrected version of your page - the following prompt will

appear:

16. Click on the [Yes] button to mark the task as completed

17. Make sure that you close any open files, e.g. index.htm and hobbies.htm (just click on the tab

at the top for the file, and then click on the cross to the far right of the tabs [but not the cross in

the top right-hand corner as this closes down FrontPage])

You are taken back to Tasks View and should find that the Fixed Misspelled Words task has now been

marked as Completed

14

18. To remove the completed task, right click on this task and select Delete Task - press <Enter>

for [Yes]

The task is now removed from the list completely. Some people like to retain completed tasks in the

list to remind them that the job has been done. It's particularly useful if a team of users is working

together on a web site.

Shared Borders and Navigation Bars

Shared borders and navigation bars are features employed by many web sites, including the official

University pages. These are areas at the side (left or right) and top or bottom of web pages which are

reserved for items which you want to appear consistently across your web. Examples might be an

image, such as a photograph of yourself, and a set of navigation buttons giving easy access to other

pages in the web.

You can set up these borders and navigation bars so that they automatically appear on each web page -

rather like headers and footers containing page numbers etc in a Word document. Once they have

been established, they can easily be modified to incorporate extra elements, which then appear on all

the pages.

In FrontPage 2003, you may find that shared borders aren't available by default (Dynamic Web

Templates are now preferred). To check this, click on the Format menu. If the Shared Borders...

option appears dimmed or grey then they are not available and you need to carry out the steps below:

1. Open the Tools menu and choose Page Options...

2. Click on the [Authoring] tab

3. Click in the checkbox next to Author-time Web Components (a tick should appear in the

box) and then click in the checkbox next to Shared Borders

4. Click [OK]

The shared borders should now be ready to apply them.

1. Click on the [Navigation] button in the Views panel

2. In the right-hand pane, check the My Home Page (or equivalent) box is highlighted (click on

it once)

3. Open the Format menu and choose Shared Borders...

4. In the new Shared Borders window check that Apply to: is set to All pages

5. On the right, turn on the Top and Left check boxes together with both their Include

navigation buttons boxes

This will set the shared borders along the top and down the left of your pages - if you prefer other

settings then the choice is yours. The window should now look as below:

15

6. Press <Enter> for [OK]

7. Double click on the My Home Page (or equivalent) box to see the result

You will find that borders have been added, with a main title across the top and links to your other

pages down the left. These make your current main heading and the bulleted list redundant (you can

remove these later, if you decide you like shared borders).

8. Click on the Preview tab to see how the page will appear when published

9. Try out the new link (on the left) to My Family

This is in fact currently an empty page, but it already has borders giving a link at the left to your

Photos, plus links across the top to your other pages, including your Home Page. What appears in the

shared borders is determined by the tree structure you created in Navigation View. The order of the

buttons is derived from your tree, reading left to right. The headings which form the links are

provided by the Page Titles you saw earlier. The links which are shown are the default settings and

can be changed in the Link Bar Properties window:

10. Click on the [Design] tab to return to editing mode

11. Now double click on the links in the shared border area on the left of your page - the following

window appears:

16

This window shows that the navigation buttons in the left-hand shared border link to child pages of

the current page. You can change the settings here if you want to provide other links (eg under

Additional pages: you can add a link to your Home page). You can also change the way the

navigation buttons look:

12. In the Link Bar Properties window, click on the Style tab - the following appears:

Here, the style of the buttons is set. Currently, the Brackets style is used with the orientation set to

vertical. There are many other different styles you can choose from, accessible via the scroll bar

provided.

13. Using the scroll bar, move to the top of the list and set Choose a style to Use Page's Theme

14. Press <Enter> for [OK] to confirm the changes

You should see no immediate change to your layout as you are not currently using a Theme - that's

coming in the next section. An independent set of hyperlinks is included in the navigation buttons in

the top border (double click on where it says Edit the properties... to see the properties, as before).

There is one further border property to examine namely the Page Banner Properties.

15. Double click on the My Home Page banner in the top shared border

16. Amend the wording of the current Page banner if required

17. Press <Enter> for [OK] to confirm any changes

18. Save the new version of your Home Page by pressing <Ctrl s>

You will see a new _borders folder appear in the Folder List. This is where information about the

shared borders is kept, and it is controlled by FrontPage.

17

Adding a Navigation Button

Once you have established shared borders with their navigation buttons, you can easily add new ones

simply by adding new pages to the Navigation View structure.

1. Click on the [Web Site] tab just above the web page

2. Right click on the Home Page box and choose New then Page

3. Right click on New Page 1 and choose Rename

4. Type My Work then press <Enter>

5. Click on the [Refresh] button or press <F5>

6. Drag the new page to the required position to set up the correct navigation button order

Having created the new (empty) page, its Title will have been added to your navigation buttons:

7. Double click on the My Home Page box

8. Click on the Preview tab to see the new link(s) to My Work

9. Click on the [Web Site] tab just above the web page

10. Click on the [Hyperlinks] button in the Views panel to see how that has changed

Themes

One final thing you may wish to apply to your web site is a Theme. This works in the same way as a

Template in PowerPoint - it provides you with fancy backgrounds and buttons in your shared borders.

Though these themes have been professionally designed, they may not comply with the UK

Government's Accessibility legislation. This includes things like colour schemes for partially-sighted

or colour-blind users. You may wish to consider these aspects when designing your own personal web

pages. Further information about accessibility can be found on the University's Web Information

Policy pages.

1. Click on the [index.htm] tab at the top, and then click on the [Design] tab at the bottom

2. Open the Format menu and select Theme... - a Theme Task Pane appears on the right

18

3. Initially No Theme is selected - scroll down through the preview boxes of the themes under

Select a Theme, and find one that you like

4. Move your mouse over the preview box of the preferred theme and you should find that a

vertical column with a down arrow appears on the right-hand side of the preview box. Click on

this column and select Customize...

For each theme, there are several options you can set (there are checkboxes to turn these on and off):

Vivid colors - turn this on/off to see which set of colours you prefer

Active graphics - some themes use animation and this option turns animation on/off

Background picture - take care using a picture for your background, the text may not be

readable

You can also modify an existing theme (the colours used etc) if you want. To modify the current

scheme and create your own based on it:

5. Click on the [Save As...] button, name the theme MyTheme then press <Enter> for [OK]

6. Now click on the [Colors...] button then on the [Custom] tab

7. Under the Item: heading select Banner Text

8. Using the list arrow attached to the Color box, select a new colour from those provided in the

palette (or click on More Colors... for a wider choice)

9. Press <Enter> for [OK] to close the Modify Theme window

10. Click on [OK] again then press <Enter> for [Yes] to save the changes to your theme

To now apply your theme to your web pages:

11. From the themes in the Theme Task Pane, you should now find a MyTheme preview box - move

to the preview box, click on the vertical column that appears on the right, and select Apply as

default theme

19

12. A warning message will come up asking if you really want to apply the theme

13. Press <Enter> for [Yes] to apply the theme (this may take some time)

You should now have your own individual scheme, which uses a different colour for your main

heading. You may notice that a new _themes folder appears in the Folder List. This is where

information about the theme is kept, and it is controlled by FrontPage.

Note: Changing the Background colour of a scheme only has an effect if a plain background is being

used - it has no effect on patterned or image backgrounds. To do this, turn off the Background picture

option.

14. If the [index.htm] tab has an asterisk/star next to it, make sure that you save the page by

pressing <Ctrl s>

15. Close down the index.htm page and the Theme Task Pane

Republishing the Web

Having made the changes to your development web site, it's now time to publish the results. As usual,

this is now done in two stages - first using the FrontPage Publish Web command, then resetting access

permissions on the main computer.

1. Open the File menu and choose Publish Site...

2. In the Remote Web Site Properties window that appears, check that the Remote Web site

location: is set to N:\public_html (if not then you need to carry out the same set of steps that

you did the first time you published the web site) - if it is, press <Enter> for [OK]

3. Press <Enter> or click on the [Publish Web site] button in the bottom right-hand corner of

the window

4. If asked, press <Enter> for [Yes] to remove files no longer in the current web - you may have

to do this a few times (if there are going to be a lot of files that you know can be deleted then it

may be better to choose [Yes to all] the first time you are prompted)

As before, the relevant pages are copied across from your source to your public_html folder. This

time, however, many more files are involved, including several used by FrontPage to manage your

web, so it will take longer to publish. When the process has ended, have a look at the log file:

5. Click on the View your publish log file link

6. Note how this is now much more detailed than when you published the first time - [Close] the

Internet Explorer window that opened to show the log

To make your web site visible to the world:

7. Click on the still-open telnet window on the Task Bar

8. Type publish then press <Enter>

20

9. Hide the telnet window by clicking on the [Minimize] button

10. Click on the Internet Explorer window on the Task Bar and press <F5> or click on the

[Refresh] toolbar button - your web page should be fully up and running again

11. Test out your links, if you like, then [Minimize] the Internet Explorer window

Further Tasks

You have finished working through the notes now, but there's plenty to be done to complete your web

site. Currently you have several empty pages, which need writing up. You will, no doubt, want to

create an entirely different structure, with different Page Titles etc. Spend some time now or later

practising what you have learnt today. Here's a list of further tasks:

In Tasks View create a list of outstanding jobs - keep this up-to-date as you work through them

Add text to any empty pages

Remove any headings and hyperlinks which are now shown in the shared borders

In Navigation View remove any unwanted pages and create new ones where required

Give your pages more suitable Page Titles

In Folders View, rename your files to match the new titles and move them within the file

structure, putting them into new folders where that's sensible

In Reports View check that your hyperlinks are all working properly

Modify the theme and shared border settings, if necessary

Republish your web site within FrontPage and reset the Unix permissions on main

View and test out any links in your browser (i.e. Internet Explorer)

Opening a Web

It's probably going to take several days work to complete your web site - and then you'll need to

maintain it over the coming years. To reopen your source web the next time you work on it:

1. Open up Microsoft FrontPage as usual

2. Open the File menu and choose Open Site...

3. Click on the [My Computer] button on the left

4. In the list that appears, double click on your_username on 'ndrive' (N:)

5. Select the folder source then click on [Open]

Note: If you are not using a public PC then you can, more easily, open the File menu and choose

Recent Sites then select your web site from the list which appears.

IMPORTANT: NEVER be tempted to edit the published web in public_html - ALWAYS edit the

source web then publish it.

Logging Out

You have now finished this training session, so save your pages, shut down any open windows and

log out:

1. Open the File menu and choose Exit to leave FrontPage

2. Press <Enter> for [Yes] if asked if you want to save the changes to your file(s)

3. Close Internet Explorer by clicking on its [Close] button

4. In the telnet window, type logout followed by pressing <Enter>, and then [Close] the

window

21

5. Finally, on IT Services machines, click on [Start], choose Log Off, and press <Return> for

[Log Off] to confirm this

TM

Trademark owned by Microsoft Corporation.

© Screen shot(s) reprinted by permission from Microsoft Corporation.

Page last updated Thursday, 29 November 2007

Email: its-help@reading.ac.uk © The University of Reading