Build a two page Web Site
 

 

 

 

 

 


To start we need to open a new folder in “My Computer” called “Townswomen”.  The most accessible place is in the opening menu of your “C” drive – you can always move the folder later.

 

Right Click on the “My Computer” icon, select “Explore”, select the “Local Disc” ‘C’.  Go to the “File” menu, then “New” then “Folder”.    A new folder will open with the words “new folder” in the box underneath the icon.  Delete this text and write “Townswomen” and then press the enter key so that the folder is named.

 

 

 

 

Open Word©

 

N.B. [For the second page repeat from here.  We will be calling the second page “Information”]

 

On the File menu select “New” and when the selection box appears select “Web Page” and then press “OK”

 

 

Because monitors vary greatly in their resolution we need to build our pages so that they can easily be viewed on all types of monitor.  We also need to make sure that our text can easily be seen.  It is essential that we select a good background.  Plain white is too reflective so pastel shades will help viewing.

 

Firstly let’s work on making the page easily readable on all monitors

 

We need to set our margins carefully.

 

On the “View” menu make sure that there is a “tick” against Ruler

 

 

On the “Tools” menu select “Options” and on the “General” tab make sure that the measurement units are set to “centimetres” and press “OK”

 

 

This will ensure that we have a ruler on your building page set in centimetres.

 

Set the Left margin to 2 centimetres  - To do this place cursor just below the grey box on the left of the margin ruler until the left indent tabs appear and then drag to 2

 

Set the Right margin to 30 centimetres by placing the cursor on margin tab and dragging to 30

 

 

 

 

Now make sure that the screen display, shown on the top line is set to 75%.  Once this is done we are ready to go…..

 

 

On the “Format” menu select “Background” and the colour box opens

 

 

Click on any colour in the box and then “OK” and the screen alters to the selected colour.  Clicking on “More Colours” provides you with the 256 colours used on the Internet.  

 

Clicking on “Fill effects” puts up a four-tab “Option” menu. We are going to use the “Texture” menu and one of the textures provided by Microsoft.    These are low-resolution backgrounds and will load very quickly when a viewer calls up our finished web-page.

 

 

You can select any texture from the full selection but for our purposes any one of the backgrounds on the top row is adequate.  Click on the one that you prefer and then click “OK”.  You automatically lose any previously selected background and the background on your page changes to the new one.  Note that the background is seamless and continuous.

 

Feel free to explore all options offered by the Background Option Box

 

 

When you are satisfied with your background place the cursor at top left of the screen.   Using Arial, 14pt, bold type:

 

“Press here for more Information”

 

 

Press the “Enter” key once to lower the cursor by one line.

 

 

On the “Insert” menu select “Break” and then on the drop down box shown above select “Page Break”.  Now click the small circle alongside “Continuous” and press “OK”

 

This has now isolated the words “Press here for more Information” so that nothing can interfere with it”

 

The cursor now appears immediately below the page break.  Centre the cursor and then go to the “Insert” menu, select “Picture”, select “WordArt”, and click on the third down on the left hand column for our purposes.  You can experiment with other versions later.

 

Click “OK” and the “Edit WordArt” box appears

 

 

Alter the text to “Townswomen”.  Alter the size to 48pt, click on “B” for Bold and then click on “OK”.  The graphic now moves to your web-page

 

To position the graphic simply drag it up to just below the page break.  Stretch to the left margin and to 20 on the right hand side.

 

The WordArt formatting box has appeared at the bottom of the screen

 

 

WordArt allows formatting.  . Click on Format (the paint box and brush).  On the drop down box select the “ Colours and Lines” tab and then click on the downward arrow to the right of colour.  Select “Fill Effects” followed by “ Texture” and then select the marble green, which is the second down the left hand column.  Click  “OK” The “Format WordArt” box reappears so click ”OK” once again and your graphic changes to marble green. Click outside graphic to remove the outline box.  (You can try any colour/texture effect until you are satisfied with the result)

 

Press the “Enter” key until the cursor drops below the graphic.  The graphic might move down the page but don’t worry about this – we can put it back later.

 

On the Insert menu select “Break” and then “Continuous” and then “OK” to put in a further page break.

 

If the graphic has moved highlight it and drag it upwards with the four-point cursor until it is back in its original position and above the new page break.

 

By now you might be getting worried that our screen looks messy.  It is time to explain the “Web Page Preview” item on the “File” menu

 

 

 

Pressing this item opens up your Internet Browser and the resulting screen shows you exactly how your web-page will appear when published.  You click on the “x” at the top right of the browser to return to your web-page Word document.  By flitting between the two types of screen you will see that they do not match exactly and you might have to make adjustments to your Word document to create the perfect web-page in the browser.

 

Note also that the Page Break lines are not present in the Preview

 

Once satisfied it is now time to Save your document.  Go to the “File” menu and “Save As”.   You MUST call this document “index” and it will be saved as a web-page, or .htm file.

 

 

When you publish you web page your host (ISP) requires that the first page of your web-site must be called “Index”

 

At the top of the box scroll through until your find your “Townswomen” folder and then save the file to that folder.

 

If you take a few moments to open “My Computer” you will see that as well as the “index” document there is a folder called “Index Files”.  Word stores all the graphics separately and calls then up from the “Index files” when they are needed.

 

 

Second Page

 

To create the second page return to the linking point on Page 1 and work through again to this point.

 

[For the second page:

 

 Where we placed “Press here for more Information” on the index page replace this with “Return to the main page” using Arial, 14pt, Bold. 

 

Insert the word “Information” in your WordArt and then call your file “information” and save as above. 

 

A check on “My Computer will show that the file has been created as well as a second folder called “information files”]

 

Remember to Save the Information File

 

 

 

Let’s Link the two pages which we have created

 

 

Open your  “Index” file in Word.  If you open it in Internet Explorer or any other browser you will not be able to make any alterations.  Run cursor over the words “Press here for more Information” to highlight the words.

 

 

 

 

Go to the “Insert” menu and then “Hyperlink”.  Click on “Hyperlink” and the “Hyperlink” box will open as in the illustration below.   Use the “File” button to locate your file “Information” and press “OK”.   The name of your file will appear in the box “Type the File or web page name”. The file name is case sensitive so if it is all in lower case it has to go in this box as lower case as well.

 

 

Click on the button “Screen Tip” and the following box appears:

 

 

Type “Takes you to our Information Page” in the box provided.  Click OK and then OK again and the Hyperlink is complete.  When the viewer is on our web-page, and puts the mouse cursor over the words “Press here for more Information”, the text “Takes you to our Information Page” will be displayed in a small box on the screen.  When the viewer presses these words they will be taken to the Information page, but we are ahead of ourselves….

 

 

We now have to save our “Index” file

 

Once saved open the “Information” file in Word and repeat the process described above but this time you will be looking for the “Index” file to place in the Hyperlink information box and the screen tip will read “Takes you to our Opening Page”

 

Once done, save the “Information” file and keep it on the screen.  We now need to test the links and see what happens 

 

 

 

 

Test the links

 

With the “Information” file open in Word click on the words “Return to the main page”.  This automatically brings up the “Web Page Preview” of the “Index” file.   Press the “Press here for more information” on the “Index” file and you will go to the “Web Page Preview” of the “Information” file. Use the small “x” at the top right of the Preview screen to get back to Word.

 

You have now created a basic two page website and you only need the text and graphics to put into the empty spaces below the headings.

 

 

 

Press here to find information – How to send your files to your ISP

 

 

Al

April 2006