Microsoft FrontPage 2003™ Creating a Personal Web Page Contents Introduction .............................................................................................................. 2 Loading a Browser ................................................................................................... 2 Looking Behind Web Pages ................................................................. 2 Creating a Web Page .............................................................................................. 3 A Simple Page ........................................................................................... 3 Web Page Views ...................................................................................... 4 Adding Formatting ................................................................................. 4 Adding Lists and Lines ........................................................................... 5 Adding Colour .......................................................................................... 6 Adding Tables ........................................................................................... 7 Linking to Other Pages........................................................................................... 8 Linking to your Own Pages .................................................................. 8 Linking within your Own Pages .......................................................... 9 Linking to External Pages ................................................................... 10 Changing and Removing Hyperlinks ............................................. 11 Adding Graphics.................................................................................................... 11 Inserting Clip Art .................................................................................. 11 Copying Images off the WWW ........................................................ 12 Creating an e-mail Link ...................................................................... 12 Editing Raw HTML................................................................................................. 13 Publishing Pages ................................................................................................... 13 Setting File and Directory Permissions ........................................ 14 Resetting File Permissions ................................................................ 15 Creating HTML from Other Software ............................................................ 16 Microsoft Word, Excel, PowerPoint and Access........................ 16 Merging HTML Files.............................................................................................. 16 Managing a Web Site .......................................................................................... 16 Further Information ............................................................................................. 17 Logging Out ............................................................................................................ 17 IT Services
Transcript
Microsoft FrontPage 2003™ Creating a Personal Web Page
Creating HTML from Other Software ............................................................ 16
Microsoft Word, Excel, PowerPoint and Access ........................ 16
Merging HTML Files .............................................................................................. 16
Managing a Web Site .......................................................................................... 16
Further Information ............................................................................................. 17
Logging Out ............................................................................................................ 17
IT Services
2
Introduction This document is an introduction to providing and publishing personal information on the World Wide Web. IT SHOULD NOT BE USED FOR OFFICIAL UNIVERSITY PAGES.
Any member of the University can publish their own private pages on the World Wide Web, via the main University computer, providing the information does not breach the rules agreed by the NIPP (Networked Information Provision Panel).
pages must comply with the rules for the Acceptable Use of University Computers and Data Network
it is important to remember that the URL (Uniform Resource Locator) carries the University's name
and users must not bring the University into disrepute
users are responsible for monitoring the content of any links they make to other sites
users should be aware of their use of resources - a few Kilobytes will not be noticed but a personal
page using several Megabytes may be
the University shield may only be used in material published on behalf of the University - it should not
be used on PHPs (Personal Home Pages)
If any complaints are received about the content of PHPs, these will be investigated and any necessary disciplinary action taken.
Loading a Browser The current recommended web browser at the University is Microsoft Internet Explorer (though Netscape is also available from the Communications folder on IT Services machines). To start up Internet Explorer:
1. Login to the computer as usual by entering your username and password
2. 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)
Looking Behind Web Pages Most users are familiar with web pages but the majority probably have no idea how the layout and content of a page is defined. When writing a document using Microsoft Word, for example, you define the layout - which text is bold and which centred. The computer then adds hidden codes to your text to create your design. With a Word document you cannot display and edit these codes; with web pages you can.
To see the codes:
1. Open the View menu and select Source - the information is displayed in Notepad
Don't panic at what is displayed - this is a very complex web page and the computer can generate all the codes for you automatically. Just scroll down and note the general construction of the information, with special mark-up codes (in angled brackets) liberally scattered through the text itself. The codes used are known as HTML (HyperText Markup Language), which is switched on at the top of the document by <html> and off again at the very end by </html>. Most codes have the same format - i.e. they are switched on by <code> then off again with </code>.
A web page is often comprised of several files. Images, for example, are held separately. Indeed, browsers can be set up so as not to display images at all, allowing you to load up text faster. A template setting out the overall layout of the page can also be held in a separate file. This can then be used for several different pages of information to maintain a consistent overall look to the set of pages.
2. Close Notepad by clicking on the [Close] button in the top right corner of its window
3. Now minimize the Internet Explorer window by clicking on the [Minimize] button on the left of the
group of three buttons in the top right corner of the window
Creating a Web Page To create a web page, you can write the raw codes yourself (using a text editor, like Notepad), save in a particular format from Microsoft Word (Excel, etc) or use a special composer (such as DreamWeaver or Microsoft FrontPage). In these notes you are going to use FrontPage 2003, which is very similar to Microsoft Word so far as creating web pages is concerned.
Tip: When designing web pages you should make most of them as small as possible (ideally, a single screen of information), with links to further pages of more detailed information where necessary. Someone browsing your pages can then decide whether they want to explore further or whether they have seen enough.
A Simple Page Start off by creating a very simple page, just to see how easy it is:
1. Open the start menu, choose All Programs then Microsoft Office and finally Microsoft Office FrontPage 2003
The following window appears:
2. In the new document, type Your Name's Home Page (substitute your name for the italics)
3. Press <Ctrl s> to [Save] your page
The name you give to your main home page is important - for FrontPage, it should be index.htm in lowercase letters (home.htm and home.html are also recognised by browsers as the home page). Also, it must be placed in a folder called public_html, again all lowercase, here on the University system on your N: drive.
4
4. Change Save in: to Drive N: by clicking on the [My Computer] button on the left, and then double
clicking on your_username on 'ndrive' (N:) drive in the list
5. Press <Alt 5> to create a new folder (or click on the [Create New Folder] button), call it public_html (underscore is <Shift ->) then press <Enter> for [OK]
6. Accept the default File name: (index.htm) - press <Enter> or click on [Save]
Note that the default font is set to Verdana. This font is particularly clear to read for anyone with poor eyesight. You can, of course, change it if you want.
Web Page Views Currently you are in Design view, as indicated by the bottom left-hand corner of the FrontPage window. This is where you design and edit your web pages.
In earlier versions of FrontPage (2002 and below), this looked different (Normal HTML Preview).
1. To see the hidden codes at the same time, click on the [Split] tab - this offers you access to both the Code and Design views in a split-screen format
Note the codes which have been added to your typed words. In FrontPage these are colour-coded in purple (sometimes with red and blue added too!). At the very top (you may need to scroll vertically), <html> defines the type of codes being used, while </html> turns this off at the very end. In between, there is a <head> (which includes information such as the title of your page - what appears at the very top of a browser screen - and metadata) and <body> (for the actual text itself). Note that by default FrontPage uses the first words of your actual text for the title of the page. You can choose to make this different if you want, as you'll see later.
2. Click on the [Code] tab
This just shows the HTML code, and should preferably be used by those who are experienced with working in HTML. Note that the lines are numbered by default - this can help to find a line of code where there may be a particular problem.
3. Click on the [Preview] tab
In this mode you see the page as it should appear in a browser. Any links to other web pages are fully active, enabling you to check they are working properly. Again, you will see this later. Note that you don't need to save the web page before previewing this way, but if you want to preview your page in the actual web browser, as shown below, you need to save the page first:
4. Open the File menu, choose Preview in Browser and select the first option in the list (probably
Microsoft Internet Explorer 6.0)
Note that, strictly speaking, your words aren't yet a web page - they are just held in a file with special additional codes which can be interpreted by a browser. Only when you publish your information so that other people can read it does it become a true page on the WWW.
5. Close the Internet Explorer window by clicking on the [Close] button
Adding Formatting
Style:
Your Home Page is not only very short but also very plain. In this next exercise you will add some more text and start including formats - like bold text and headings.
5
1. Move back to Design View by clicking on the [Design] tab
2. Check the insertion point (flashing vertical line) is at the end of your line of typing
3. Open the list of styles by clicking on the list arrow attached to the [Style] button at the start of the Formatting toolbar (2nd toolbar down from the menus)
4. Choose Heading 1 (about halfway down the list) to make your text bigger and bolder
5. Centre your text by clicking on the [Center] button (halfway along the same toolbar)
6. Press <Enter> to turn off the heading style and return to Normal style
7. Click on the [Align Left] button (to the left of [Center]) to reset justification
You may not be familiar with styles but they are very useful in preparing web pages (and in Word documents). By choosing particular styles for your headings and other special features, you can maintain a consistency across your web pages. Next, type in some more text.
8. Type in a real or rubbish (i.e. not real words) paragraph of about 3 lines
9. Press <Enter> at the end of the paragraph
10. Repeat steps 8 and 9 for a second short paragraph of 2 lines
11. Make some of the words in the paragraphs bold or italic by double clicking to select a word and then clicking on the [Bold] or [Italic] button
To embolden or italicise several words, you must select them first. You can also turn bold etc on/off as you type, just like in Word. It is not a good idea to use underline to make text stand out as this usually suggests a link to another web page.
Note: The asterisk (*) at the end of the filename (index.htm*) denotes that the latest changes to the file have not yet been saved. It will disappear following the next instruction:
12. Press <Ctrl s> to [Save] your changes
13. Click on the [Split] tab to see the new codes
Note all the new HTML mark-up codes which have been added to your file. You do not need to memorize these, but it's helpful if you can understand what's happening. <b> turns bold on; </b> turns it off. <i> does the same for italic. <p ...> marks the start of a paragraph; </p> marks the end. <h1...> introduces your heading, </h1> ends it. Note also the special code (in black), font which denotes a single nonbreaking space.
Tip: For those of you who will go onto designing web pages for a department, club or company, you will be faced with issues of accessibility. One of these issues recommends that you now use <strong> and <em> (short for emphasis) instead of <b> and <i>, respectively. To put these codes into your document, select the text you want to format, open the Format menu, choose Font..., click on the checkbox next to Strong or Emphasis, and finally click [OK].
Adding Lists and Lines
Numbering: Bullets:
Lists are a very precise way of showing information on web pages and also look attractive. Lists can be numbered or bulleted (various characters or even images can be used for bullets). If you are used to creating lists in Word, the next exercise should be very familiar to you:
1. Move back to Design View by clicking on the [Design] tab
2. Move to the end of your text (<Ctrl End> then <Backspace>, if necessary)
3. Type Here are links to my other web pages: and press <Enter>
4. Click on the [Bullets] button
6
5. Type in some headings for your other pages (e.g. My Family, My Friends, My Interests), pressing <Enter>
at the end of each line
6. Press <Enter> once on an empty bulleted line to turn the bullets off
To change the look of the list:
7. Right click on the list and choose List Properties... (or left click on it and use Bullets and Numbering...
from the Format menu)
8. Choose the option you prefer then press <Enter> for [OK]
Finish off this section with a line across the page:
9. Press <Ctrl End> (and <Backspace>, if necessary) to move to the end of your document
10. Open the Insert menu and choose Horizontal Line
If you want to change the look of the line:
11. Right click on the line and choose Horizontal Line Properties... (or left click to select it then use
Properties from the Format menu)
12. Under Size change the Width: to 50 Percent of window
13. Press <Enter> or click on [OK]
14. Press <Ctrl s> to [Save] your changes
Your Home Page should be looking quite good now. Let's have a look at the new HTML mark-up codes which have been added.
15. Click on the [Split] tab to see the new codes
Note the new HTML mark-up codes for a list - <ul> to turn on bullets (u stands for unordered - if you had a numbered/ordered list you would see <ol>) - and </ul> to turn them off. Within these codes, <li> is used for each list item. A horizontal line is marked by the single code <hr ...>.
Adding Colour
Font Color:
In this next section you are going to add colour to your web page. This is a very easy thing to do, yet it should make your page much more interesting (but take care not to use too many different colours as this can make it difficult for those with poor eyesight to read). Colour can be added to the overall background and to text and tables.
1. Move to Design View by clicking on the [Design] tab
2. Drag through your main heading, to select it, then click on the list arrow attached to the [Font Color]
button and choose a colour
3. Repeat step 3 for other pieces of text on your page
4. To set a background colour, right click on the page background, select Page Properties... then click on
the Formatting tab (or open the Format menu and choose Background...)
5. Under the Colors heading set Background: to the colour you want
Note that you aren't restricted to the default set of font and background colours. If you click on More Colours... you have a much wider range. You can also use an image (i.e. any picture) as a background to a web page. Under Page Properties you can also set the default colours for text and hyperlinks.
6. Press <Enter> or click on [OK]
7. Press <Ctrl s> to [Save] your changes
8. Click on the [Split] tab to see the new codes
7
Note the new HTML mark-up codes for colours - <...color="#hexadecimal number"> for text colours and <...bgcolor="#hexadecimal number"> for the background page colour.
Adding Tables
Insert Table:
Though FrontPage only lets you have a single background colour for your web page, you can set different background colours within tables. If you want a section to appear with a different colour, a simple way is to set up a table with just a single cell (i.e. one row and one column) and then type your text into that cell. You can also use the [Highlight Color] button to give parts of your text a different background, however this may not work on all browsers. In this next exercise you are going to set up a proper table, with several rows/columns.
1. Move back to Design View by clicking on the [Design] tab
2. Move to the end of your existing text then click on the [Insert Table] button
3. Drag across the first 3 cells to create a table of 1 row by 3 columns
You can now fill in the cells. Use <Tab> to move between the cells, which expand vertically as you type in text or press <Enter>.
4. Type something into each cell (e.g. Name, Address and Phone)
5. Press <Tab> at the end of the first row and a second row will automatically appear
6. Type in your own details, pressing <Tab> to move between the cells
Tip: When you type in your address, if you press <Enter> at the end of each line you will find that the lines are widely spaced. This is because FrontPage automatically adds a blank line between paragraphs. To overcome this, use <Shift Enter> instead. This adds a line break within the single paragraph. You can also add these breaks using Break... from the Insert menu.
After typing in your address, you will probably find that your name has moved down to the middle of the cell. If you don't like this then to put it back to the top line:
7. Right click on the cell and choose Cell Properties...
8. Set the Vertical alignment: to Top (by clicking on the list-arrow next to Default and choosing Top) and
click [OK]
You'll find that the columns inside the table will probably not be of equal width, and that their width sometimes changes when you add or remove text. You can alter the width of a particular column by positioning the mouse cursor on the right-hand border (it becomes a double-headed arrow), holding down the button and moving the mouse to left or right. When you let go of the button, the column is resized. You can also double click to fit the column to the data.
9. Double click on the right-hand border of each column to fit it to the data
Next set up justification and the required table background colour and borders:
10. Select row 1 (drag through the cells or click on any cell and from the Table menu choose Select then
Row) and make it bold and centred by using the [Bold] and [Center] buttons
11. Right click anywhere within the table and select Table Properties...
12. In the Layout section set Alignment to Center - this will centre the whole table on the page
13. In the Borders section set the required Size: (size 0 gives no borders) and Color:
14. In the Background: section select a suitable Color: for all the cells
15. Press <Enter> for [OK]
Each cell (row or column) can have its own distinct colour, if you want:
8
16. If you want several cells to have the same settings, select them first
17. Right click on the cell(s) and choose Cell Properties...
18. In the Layout section set Vertical Alignment to Top and set the Color: on the Background: tab, as required
19. Press <Enter> for [OK] - make use of the [Undo] button if you don't like the effects
You can have a look at the HTML code used for a table, if you like, but it's quite complicated and not so
easy to understand. End this section by saving your work.
20. Press <Ctrl s> to [Save] your changes
Linking to Other Pages Earlier in this document it was mentioned that a well-designed web site should have relatively small pages of information, with links to further pages where necessary. The very idea of a web is that there are links from one place to another and that these can be quite complex. In this next section you will see how to create links both between and within web pages.
Linking to your Own Pages
Insert Hyperlink:
Start by linking to a second web page of our own. First, however, you need to create the second page.
1. Make sure you are in Design View
2. Drag through the words My Interests in the bulleted list to select them
3. Click on the [Insert Hyperlink] button (or use Hyperlink... from the Insert menu)
The following window will appear:
4. Click on [Create New Document] on the left hand side of the Insert Hyperlink window
5. Name the new document interests then press <Enter> for [OK]
6. Type in a heading of My Interests setting an appropriate style, justification and colour
9
7. Press <Enter> and type in a paragraph and/or a list explaining what you are interested in (be it work
or pleasure)
8. Set a background colour - right click and choose Page Properties... or use Background... from the Format menu
9. Press <Ctrl s> to [Save] your new page
Now that you have a second web page, you can test out the link to it from your Home Page:
10. Move to your Home Page by clicking on the index.htm* tab (or use the Window menu)
11. Press <Ctrl s> to [Save] the new link to your interests
12. Click on the [Preview] tab (as it's easier to move between links)
13. Click on My Interests to test out the link
You now need a corresponding link back to your Home Page from the My Interests page. Even though your My Interests page appears to be currently active, you will find when you return to Design View that you are taken to your Home Page. This is shown by the active tab in Preview View - namely index.htm. This can seem confusing at times, but it's easy to resolve.
14. Click on the [Design] tab to return to your Home Page
15. Hold down the <Ctrl> key and click on the link to My Interests
Whereas you can move between pages with ordinary clicks in Preview, you must hold down <Ctrl> and click in Design View. Here, as the file was already open, you could also have clicked on the interests.htm tab. Now make the necessary additions:
16. On the new line at the end of the My Interests page type: Back to my Home Page
17. Drag through the words Home Page then click on the [Insert Hyperlink] button
18. Click on [Existing File or Web Page] on the left hand side of the Insert Hyperlink window
19. Choose the file index.htm (open) then press <Enter> for [OK]
20. Press <Ctrl s> to [Save] your changes
21. Click on the [Preview] tab and test out your links
You should now be able to move freely, back and forward, between your two pages.
Linking within your Own Pages The simple links you have set up so far always take you to the top of your web pages. You can also create links which take you to a named point part-way through a page by using a bookmark.
1. Return to your Home Page in Design View - click on the [Design] tab then on index.htm
2. Click to set the insertion point at the start of the line introducing the bulleted list
3. Open the Insert menu and choose Bookmark...
4. Type links as a Bookmark name:
5. Press <Enter> for [OK]
A little flag now appears in your page, denoting the bookmark. This is hidden in Preview View.
6. Press <Ctrl s> to [Save] your page
7. Click on the interests.htm tab to move to your My Interests page
8. After the words Back to my Home Page type: or links to my Other Pages
9. Select the words Other Pages then click on the [Insert Hyperlink] button
10. Click on the required file (index.htm(open)) then on the [Bookmark...] button
11. Click on links under the heading Select a bookmark in the Web page:
12. Press <Enter> for [OK] - note the form of the address (index.htm#links)
10
13. Click on [OK] to complete the hyperlink definition
14. Press <Ctrl s> to [Save] your changes
15. Click on the [Preview] tab and test out your new link
You should find that this new link opens up the Home Page with Here are links to my other web pages: showing at the top of the window, whereas the Home Page link shows the page from the first main heading.
This particular example showed you how to link to a bookmark in another page. Bookmarks are more usually used to create links within longer pages, with a Contents List provided at the very top - just like in this document.
Linking to External Pages It's equally simple to provide links to other pages of information, anywhere in the world. Try adding a link to the University Home Page.
1. Return to your Home Page in Design View - click on the [Design] tab then on index.htm
2. Press <Ctrl End> to move to the end of your page then type: To the University of Reading Home Page
3. Drag through the words University of Reading Home Page to select them
4. Click on the [Insert Hyperlink] button
5. In the Address: box type: http://www.reading.ac.uk/
6. Press <Enter> or click on [OK] to create the link
7. Move to Preview View by clicking on the [Preview] tab and try out the new hyperlink - note that you
can get back to the previous page in Preview by right-clicking on the page and choosing Back
8. Move back to Design View by clicking on the [Design] tab
In the above example you linked to another site by typing in its Address (URL); you can also insert a link automatically. Try this next.
9. Press <End> to move the insertion point to immediately after the link to the University Home Page
then press <Shift Return> for a new line
10. On the new line type: To the Library Catalogue
11. Drag through the words Library Catalogue, then click on the [Insert Hyperlink] button
You now have to supply the Address for the page. There are two methods to do this: (a) if you have already visited the required web site today you can use the [Browsed Pages] button or (b) if you haven't been to the web site you can do so now by clicking on the [Browse the Web] button.
Browse the Web:
12. Click on the [Browse the Web] button - an Internet Explorer window appears
13. If necessary, change the Address: to http://www.info.reading.ac.uk/student or /staff
14. Using the Quick Links on the right hand side, click on Library
15. Next click on the quick link to the Unicorn catalogue (again, on the right-hand side) then on [Quick
Login]
16. Return to FrontPage (via the Task Bar) and you'll find the Address has been filled in for you
17. Press <Enter> or click on [OK] to fix the address
18. Press <Ctrl s> to [Save] your changes
19. Click on the [Preview] tab and test out the new link
20. End by moving back to Design View - click on the [Design] tab
11
Tip: You can also copy the URL of a web page into the link box. Right click on the Address bar in Internet Explorer and choose Copy. Move back to the hyperlink box in FrontPage and Paste in the location using <Ctrl v> or <Shift Insert>.
The HTML code used to create a link is of the form <a href="http_or_file_location"> ... </a>, with the text used for the link occupying the area denoted by .... There's no need to verify this (unless you want to).
Experiment setting up other links to your favourite sites, if you like, either by typing in the address, copying and pasting it, or using automatic fill (as above).
Changing and Removing Hyperlinks To change or remove a hyperlink you simply select it then alter its Properties. You can do this through the Properties command in the Format menu or, more simply, via a shortcut menu:
1. Right click on any of your current hyperlinks
2. From the shortcut menu which appears choose Hyperlink Properties...
3. Amend the Address: as required
4. Here, [Cancel] the change (or use [Undo] if you accidentally changed it)
To delete a hyperlink:
1. Repeat steps 1 and 2, as above
2. Click on the [Remove Link] button
3. Here, click on [Undo] or <Ctrl z> to restore the link
Adding Graphics Inserting pictures into your web pages is also very simple. You can even use pictures as links to other pages of information. Graphics can come from many sources - they might be from files you have created yourself (e.g. from a digital camera, by drawing or scanning in a picture), from commercial galleries (e.g. the Microsoft Clip Art Gallery) or from other sites on the WWW. You should acknowledge copyright if you don't own the image yourself.
Inserting Clip Art As you probably don't have your own graphics files yet, try inserting some clip art and pictures from elsewhere on the WWW.
1. Move to your My Interests page by clicking on the interests.htm tab
2. Set the typing position on a blank line above the link Back to my Home Page (you may have to press <Enter> to get this blank line)
3. Open the Insert menu and choose Picture then Clip Art...
4. In the Clip Art Task Pane that appears on the right of your screen, click in the Search for: box and type the subject of the required clip (if possible, pick something associated with your interests)
5. Press <Enter> or click on [Go]
If no clips are found or they don't appear as pictures, click in the Search for: box, select the text and delete it by pressing <Delete> on the keyboard. Run the search again (this should come up with some pictures). You can also search for more clips via Clip art on Office Online.
6. Choose a picture from those provided then click on it to insert the clip
7. Close the Task Pane - click on its [Close] button or use Task Pane from the View menu
12
8. Click on the inserted picture and, using the handles provided (these are the little black squares around
the edge of the picture), resize it to the required size/shape
9. Click on the [Center] button (on the 2nd Formatting toolbar) to position it in the middle of the screen
10. Press <Ctrl s> to [Save] your changes
11. Press <Enter> for [OK] to Save Embedded Files to the public_html folder (the clip art is saved in a file
with a .wmf extension and a strange filename!)
The HTML code used to link to an image file is of the form <img src="file">.
Copying Images off the WWW In this next section you'll find out how to pick up an image from another web page. It's best to save the image as your own file and link to it from there (though you could provide a link directly to it so that it is loaded into your web page from the other site).
When using images which aren't your own, you must be careful not to infringe copyright. All material on the WWW is copyright, even if it doesn't explicitly say so. Even here at the University, you are not allowed to use images such as the University crest (unless it is on an official University page) without special permission. For this next exercise we'll let you use an IT Services image:
1. Click on the Internet Explorer icon in the Quick Launch area to the right of [start] to open up another
web browser window
2. Click on the quick link to ITS on the right-hand side
3. Click on the Training link in the coloured bar across the page
4. Choose Course Notes on the left-hand side, click on the link Web and Frontpage, and select Creating Personal Web Pages Using Microsoft FrontPage
5. Press <Page Down>, then under the Adding Graphics heading, click on Copying Images off the WWW - you are taken to this place in the on-line notes
6. Right click on the Keeping in Touch image then choose Save Picture As ...
7. Change Save in: to Drive N: by clicking on the [My Computer] button on the left, and then double
clicking on the N: drive (it also shows your username) in the list
8. Select public_html then press <Enter> to [Open] the folder
9. Press <Enter> again to [Save] the image as contact.gif
10. Close this Internet Explorer window by clicking on the [Close] button (the cross in the top right-hand
corner)
11. Go to your Home Page by clicking on the index.htm tab
12. Press <Ctrl End> to move to the end of the page
13. Open the Insert menu and choose Picture then From File ...
14. Check Look in: is set to public_html and then select the file contact.gif
15. Press <Enter> for [Insert] and the image will be added to your web page
Creating an e-mail Link In this next exercise you are going to turn your new button into an e-mail link.
1. Click once on the Keeping in Touch button to select it
2. Click on the [Insert Hyperlink] button
3. Click on the [E-mail Address] button on the left of the window
13
4. In the E-mail address: box type: [email protected] (the code mailto: will be added in
front) then press <Enter> for [OK]
This will make the Keeping in Touch button an active e-mail link such that anyone clicking on it will automatically be taken to Outlook Express (or whichever default mailer they have set up to use).
Tip: In the above exercise you typed in your e-mail address using a mailto: code. You can also type e-mail addresses directly into FrontPage - any text which includes an at (@) sign automatically becomes an e-mail link. If you don't want the hyperlink inserted after an @, simply press <Backspace> once.
5. Press <Ctrl s> or click on the [Save] button
6. Move to Preview View - click on the [Preview] tab
7. Test out the [Keeping in Touch] button and send yourself an e-mail
Editing Raw HTML Throughout these notes you have viewed the HTML source codes. Occasionally, you may want to edit these directly. In this next exercise you'll make a couple of minor changes, just to show you how it's done.
1. Open the File menu, choose Preview in Browser and select the first option in the list (probably
Microsoft Internet Explorer 6.0)
2. Click on the link to My Interests in the new browser window
3. Note the Title (New Page 0) shown in the blue title bar at the top of the browser window - you need
to change this
4. Move back to FrontPage by clicking on its button on the Task Bar
5. Click on the interests.htm tab in Preview View then on the [Split] tab
6. Near the top of your page find the HTML <title> mark-up codes and change the text within them to
something more appropriate, e.g. Your_Name's Interests
7. Find the HTML </h1> (or equivalent) code marking the end of your main heading and add an extra
horizontal line by typing <hr> immediately after it
8. Press <Ctrl s> or click on the [Save] button
9. Move back to Internet Explorer by clicking on its task bar button, and choose New Page 0 from the list
10. Click on the [Refresh] button or press <F5> to update your display
Note that the title of the Internet Explorer session has now changed and a horizontal line has appeared below your main heading.
Publishing Pages Up until now your web pages have only been accessible by you. In order for them to be viewable by anyone, anywhere in the world, you have to make sure that your files have the correct permissions set. You have to give explicit permission for other people to be able to access your public_html directory and its files.
There are three different categories of people you can allow to look at your files: yourself, a special group of users (including our Web server) and others (absolutely anybody). Access to each file can be read only, write or execute. For each category of users, you can have different levels of access (for example, you wouldn't want to give write access to others or they could overwrite your files). To be visible to everyone on the WWW a file must be readable by our Web server.
Before publishing, it's safest to close down any open web pages by exiting from FrontPage.
1. Move back to FrontPage by clicking on its button on the Task Bar
2. Open the File menu and choose Exit to leave FrontPage
14
Setting File and Directory Permissions File permissions can be set up at different levels within your unix home directory. Whereas directories need execute access, files need read access. In order for a file permission to be effective, permission must also be set on the directory in which that file resides. This rule extends up through the whole directory structure, right up to your home directory itself. Setting execute permission on a directory doesn't mean that others have access to all the files within it; each file will still be protected by its own permissions.
In this next exercise you are going to set up public execute access on your unix home directory. You only ever have to do this once, so don't be alarmed about the unix command required. Note that if you make a typing mistake you can use <Backspace> to correct it.
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>)
You should see a PuTTY window similar to the following:
4. At the main% prompt, type chmod a+x . (match the spaces and full-stop exactly) - press <Enter>
Next you have to set up public execute access on your public_html directory and then public read access on your files within that directory. You could do this using a series of unix commands (using chmod) but a special command called publish has been provided for you on the University system. First, you need to move into the public_html directory:
5. At the main% prompt, type cd public_html (press <Enter>)
6. Now type the command publish (press <Enter>)
If you get the message Command not found, try typing /usr/local/publish instead.
15
If the commands carried out above have worked correctly then your PuTTY window should look something like below:
7. Type logout (and press <Enter>) then [Close] the PuTTY window
8. Move to Internet Explorer by clicking on its button on the task bar
9. Use your own link to move to the University Home Page (http://www.reading.ac.uk)
10. In the Address: bar, click twice at the end of the current Address and add ~your_username - the tilde
before your username is important
11. Press <Enter> to view your web pages - note that personal has been added to the Address though you
don't have to type this, as you have already seen
Assuming everything is working okay, your Personal Home Page can now be viewed by anyone in the world. If you are on a training session, test this out by exchanging information with your neighbour and take a look at their PHP.
12. Amend the Address: to read http://www.personal.reading.ac.uk/~their_username and press
<Enter>
13. Use [Back] to return to your own Home Page
Resetting File Permissions Sometimes when you make any changes to your files you may find that the new version no longer has public read access. Similarly, when you add new files or images then you'll need to set up the necessary permissions. There's no need to carry out the instructions below now; they are provided for future reference:
1. Repeat steps 1 to 4 in the previous section to log in to the main computer
2. At the main% prompt, type cd public_html (press <Enter>)
3. Type publish (press <Enter>)
4. Type logout (and press <Enter>) then [Close] the PuTTY window
16
Creating HTML from Other Software Many packages now give you the opportunity of saving text as an HTML file. Most people on campus are using Microsoft Office, so let's concentrate on that bundle of software.
Microsoft Word, Excel, PowerPoint and Access Creating HTML from a new or existing Microsoft Office file is simplicity itself - you just choose Save as Web Page... from the File menu. The HTML produced isn't nearly so clean and user-friendly as from FrontPage but it works fine. In the latest version of Microsoft Office, 2003, the web page that is saved includes all the text and images on the page.
(In earlier versions of Microsoft Office, any images associated with a particular file were stored in a separate folder, one for each file. Thus, index.htm would have a folder called index_files, while interests.htm would have a folder interests_files. The file and its associated folder are intricately linked such that if you move the file to a different location then the folder moves automatically with it).
Merging HTML Files Sometimes you may want to merge two or more HTML files together. For example, you may want to place a chart, created in Excel, into a FrontPage document. To demonstrate how this is done, let's combine your Home Page with your My Interests page:
1. Open up FrontPage (Start menu then Programs and Microsoft FrontPage)
2. Open up the index.htm file from public_html
3. Press <Ctrl End> to move to the end of your file
4. Open the Insert menu and select File...
5. Select interests.htm from public_html and press <Enter> for [Open]
You should find that your interests have been added to your Home Page. This isn't very sensible - you did it just to see how to merge files.
6. Click on the [Undo] button to restore your original Home Page
Managing a Web Site These notes form an introduction to publishing information on the WWW. For Personal Home Pages the methods used work fine. However, if you are creating a larger site it's just impossible to keep track of everything and make sure all the links etc still work. It's also a good idea to have two copies of your files - one which you can use for development and the other containing the published web site.
As you edit your information and, maybe, delete files it's important that any links to those deleted files are removed. Similarly, if you have links to other web sites then these need to be tested regularly to see if they still work. With your own small web site, probably with less than a dozen links, you can do this by hand. With a large site, however, it's better to use FrontPage to do this.
This is what's covered in the notes Managing Personal Web Pages in Microsoft FrontPage 2003.
Further Information Microsoft FrontPage has its own built-in Help system, which contains a considerable amount of information
as well as tips and examples. It can be accessed in the usual ways - via the Help menu, the button at the end of the top toolbar, or by pressing the <F1> key.
Further information on creating and managing web pages at the University is also available from the IT Services Help with the WWW page.
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. Finally, on IT Services machines, click on [Start], choose Log Off, and press <Enter> for [Log Off] to
