DIFFERENT WAYS OF CREATING WEBPAGES

DIFFERENT WAYS OF CREATING WEBPAGES

As you now know, there are various ways of creating webpages.  We have seen how you can create webpages using:

·        Hot Potatoes

·        Word

·        FrontPage Express.

There are other ways too.  Here is an explanation of the main pros and cons of the different methods.

 1.      Word

One of the easiest ways of producing a webpage is to write your page in Word and then save it as a webpage (click on the File menu and choose Save as HTML). 

Unfortunately, webpages are not built in the same way as Word pages and you often find that what you created in Word doesn't look quite the same when it is transformed into a webpage. 

Another problem with webpages created in Word is that the code produced is rather dirty, which means that it contains quite a bit of extraneous stuff which Word puts in without you asking it to.  Moreover, some browsers don't display pages produced in Word very successfully.  On the other hand, since many teachers around the world use Microsoft products, including Word and Internet Explorer, this is not quite as severe a problem as it might seem.

Despite the problems just referred to, Word is a very quick way of producing a webpage and many people already have Word installed on their computer.  If you know how to edit HTML, either directly, or using some sort of an HTML editor (which we will talk about in a moment), then one approach to writing webpages that I have found very useful is to write them in Word (because it is so fast) and then clean up the code.  However, that was before I got to grips with FrontPage Express, of which more in a moment.

2.      WYSIWYG HTML editors like FrontPage

WYSIWYG (What you see is what you get) HTML editors make life easy because you write the page in something that looks very similar to an MS Word document and the program creates the underlying HTML code for you automatically.  You can still have access to the code if you want, but for the most part you can leave HTML up to the program and concentrate on producing the content and layout of your webpages.  This of course is highly desirable for teachers who are interested in producing a product for the learning and teaching of English rather in than the intricacies of HTML. 

Two good examples of WYSIWYG editors are FrontPage Express which was bundled free as part of Internet Explorer (up until version 5.0) and Netscape Composer which is bundled free with the Netscape browser.  (In Netscape 6.2, click on Tasks and choose Composer.  It works in a similar way to FrontPage Express.

Like Word, these have the drawback that they produce rather dirty code, but again, since they are so quick and easy to use they are fantastic tools for teachers.  And they are free.

Note, there is a commercial version available of FPE called FrontPage which you have to pay for.  This has more features than the Express version, but for anyone starting out in webpage creation, FPE is fine.

3.      On-line editors

A number of sites on the web will help you to build your own site without knowing any HTML.  I do not have any experience of using them, but apparently they are quick and easy to use.  Examples are:

 ·        Homestead         http://www.homestead.com

·        Tripod                  http://www.members.tripod.com

·        Yahoo Geocities http://geocities.yahoo.com/  (Enter your Yahoo ID and password and then click on Yahoo PageWizards or Yahoo Pagebuilder).

 These have the advantage that once you have created your webpage, you don't need to know how to upload it to the Internet as the site will do this for you.  On the downside, you have to be online to use these (not a good option if you have a dial-up connection and are paying the phone bill).  My experience has also been that they create pop up adverts which can be rather annoying for a user looking at your site.

4.      Other commercial products

For people who want to get serious about webpage design, then one of the commercial programs which has received a lot of praise is Macromedia's Dreamweaver - this is a professional webpage design tool.  (Macromedia website is at www.macromedia.com)  However, for most teachers new to webpage creation, I would advise them to start with a free tool which is easy to use, ie FrontPage Express or Netscape Composer.

5.      Creating Webpages in Notepad

This is not as complicated as you might at first think, but it is very time consuming and there is a steep learning curve if you want to produce sophisticated webpages.  I think it is important for teachers to understand how HTML works so that you can edit it if necessary, but I doubt that most English teachers will want to produce webpages like this once they have been introduced to WYSIWYG editors.  If you want your students to create their own webpages, then Notepad is a very slow way of doing what you can do much more quickly and comfortably using FrontPage Expres of Netscape Composer.

6.      Non-WYSIWYG HTML Editors

These are a sort of half-way house between writing HTML code in Notepad and using a WYSIWIG editor.  They allow you to have complete control over the HTML code which you create (so you can avoid dirty code), but they also take some of the pain out of HTML by allowing you to add code snippets automatically and by using colour-coding so that it is easier to see the code when you are editing it. 

SO, WHICH TOOL TO USE?

Which tool you use to create webpages is really a matter of personal choice.  However, for busy teachers new to webpage creation, I would recommend FrontPage Express or Netscape Communicator as they are:

 ·        Free

·        Easily available (especially Netscape Communicator)

·        Very easy to use

·        Can be used by teachers and students

I also think it is a very good idea for teachers to have a working knowledge of HTML.

BEFORE YOU START

 Before creating a website, it's very important to have two things:

 1.      Something to say

2.      A plan of your site

 1.      Websites are only interesting if they have some interesting content.  This must take precedence over fancy design features like dancing text.  You obviously need to decide what you are going to use your website for.

 2.      Websites comprise a number of webpages all linked together.  Creating and maintaining these links can get very complicated, which is why it is good to have a plan at the outset.

 For the purposes of this course, I have decided both of these.  When you come to create your own site, these will be crucial points you will need to decide on before starting, but I think this will become clearer once you have created your FPE page.

CREATING WEBPAGES (1)

SINGLE PAGE IN FRONTPAGE

SO, HOW DO WE CREATE A WEBPAGE?

 There are in fact many different ways of creating webpages, but in this session we are going to use a program called FrontPage.  I’ve chosen this program as it is now widely available and if you are used to using MS Word, then it is very familiar. 

 FrontPage is a webpage editor, which means that you can use it to create and edit web pages.  It is also a WYSIWYG webpage editor, which means what you see is what you get, ie when you are creating a webpage, the way it looks on your screen is (pretty much) what it should look like once you put it on the web.

 Now, all webpages are written in HTML - ELICIT MEANING: Hypertext Markup Language.

 HTML is simply a series of codes which tells your browser how to display a given webpage.  If you want to get serious about creating webpages, there will come a time when it becomes essential to learn some HTML, but the good news is that you can create basic websites with almost zero knowledge of HTML.

STARTING OUT: CREATE A SHORTCUT TO FRONTPAGE

 Before we start using FrontPage (FP), we are going to create a shortcut to the program on the desktop so that it is easier to access.  To do this, click on the Start button, click on All Programs, select FrontPage and right click on it.  Choose Send to and then Desktop (create shortcut).

 Now open FP from the desktop using the shortcut button you have just created.

 If you look at the top of the screen, you will see that some of the icons are immediately recognisable.

 To start, select "File / new / file or web" and open a one-webpage site.

POSITIONING TEXT ON THE PAGE WITH A TABLE

 First of all, before we start entering any text, we are going to make sure that our text does not cover the whole screen when we look at it in a browser.  To see why, compare a story on the BBC’s web page with this page from Vance Stevens - http://www.geocities.com/vance_stevens/papers/index.html  (Actually, Vance has some very interesting stuff on his website).

 To avoid our text covering the whole screen, we are going to start by creating a one-celled table covering 80% of the screen in which to place all our content.  This is to avoid our text covering the whole width of the screen

 To do this, click on the Table menu, click on Insert and then Table.  Select one row by one column, choose centre alignment, zero border size and specify the width at 80%.  Then click OK and a cell with a dotted line around it should appear in your document.  (This will not be visible in your webpage.)

ADDING TEXT

Click anywhere inside the box (table) and write the title, that is your first name and your surname, eg "Phil Brabbs".  Then press Enter once  (NB you  will note this starts a new paragraph, not a new line.  This is one difference between FP and Word.)

 Write “Back to Course Homepage”

 Click on the Insert menu and select Horizontal Line

SAVING THE PAGE

 Before we do anything else, let's save the document.  As this is the first time you have saved the document, you can click Save or Save As on the File menu (or just click the Save icon which looks like a floppy disk). 

 When the Save As dialogue box appears on screen, enter the title of your page in the Page title box - type in your name as the title.  (This is what will appear in the browser address window at the top of your browser when the page is open.)  Then click on As File as we want to save this document as a file on our hard disk.  The Save as dialogue box will open. Select "My documents" and your folder as the place where you want to save the file. 

 Next you should enter the name of the document in the File name box.  Now, because this is your first webpage, FP automatically calls it index (no caps).  The first page (homepage) of any website should always be called index because this is what internet browsers look for when you type in the address of a website.

 Click on Save.  Now close your document before you go on to the next section. 

 Check to make sure you have successfully created  your index page by going to your floder and checking there is now a file there called “index”. 

VIEWING YOUR PAGE IN YOUR BROWSER

You can now see how your page will look as a webpage by opening your website  folder and double clicking on the index page.  This should open the document in your browser.

The text should look something like this:

ADDING YOUR OWN CONTENT

You now need to reopen the index page in FP.  NB double clicking on it will not be suitable, as this will open the page in Internet Explorer.  This is fine for viewing the page, but it will not let you change it.  For this, you need  a web editor like FP. 

So, open FP (by clicking on the shortcut on the desktop), then click on the open folder in the top left hand corner of the screen , to the right of the white page icon we clicked on earlier, and the Open File dialogue box will open.  Click on Desktop and then double click on the folder containing your index page.  When you can see the index page icon, click on Open.  You can now continue to create this file.

Position your cursor at the right hand end of the horizontal line and press the Enter key on your keyboard once.  You are now ready to enter your own text.  Don't worry about formatting at this stage, we will do that in a moment.

Create your own text introducing yourself and describing one of your hobbies.

 When you have done that, finish off the page by adding another horizontal line and the words “Back to Course Homepage”.  You should now have something like this:

Save your work.

FORMATTING THE TEXT

 Formatting text in FP is easy as it is almost like doing it in Microsoft Word - simply highlight the text you want to format and click on the icons on the toolbar at the top of the page.  Format your text now, by using centre, bold, increasing/decreasing the size of the text and changing the colour of the text. 

CHANGING THE BACKGROUND AND TEXT COLOUR

By clicking on the Format menu and selecting Background, you can also change the background colour of your page and the text colour. 

Experiment!! (and use the undo button to get rid of colour schemes you don’t like).

ADDING A PICTURE

Use a search engine (like Google) to find a suitable picture to illustrate your hobby.  (Save the URL of the site where you found the picture by pasting it from the browser address window into a new blank Word document as you will need it in a moment).  Find the biggest version of the picture you can and then right click on the picture and choose Save Picture As.  Give it a short name (no caps, no spaces – this is very important), make sure it will be saved as a .jpg or .gif file and save it in the same folder where your index page is saved.

Next go back to your webpage in FP put your cursor in the place where you would like the image to appear.  Click on the Insert menu and choose Picture, then From file. (A quicker way to do this is to click on the Insert Picture icon which looks like a yellow postcard on the toolbar at the top of the screen).  Use Browse to find the file, click on it and click Insert.  The picture should appear in your webpage.  You should be able to resize it by clicking on it and dragging one of the corners in the usual way.

ADDING A CAPTION TO THE PICTURE AND INSERTING A LINE BREAK

When you add a caption to your picture, you will want to make sure the text appears immediately below the picture, ie you need a line break after the picture, not a new paragraph.  To make a line break in FP hold down the Shift key when you press Enter.

Now place your cursor after the picture and create a line break.  Add a suitable caption for the picture.  Then insert another line break and add the words "I found this picture here" in brackets. The word "here" is going to be a hyperlink to the site where you found the picture.

ADDING A LINK TO AN EXTERNAL WEBSITE

Now, go back to the Word document where you saved the URL of the site where you found your picture.  Highlight the address and copy it.  Then go back to FP, highlight the word "here" underneath your picture and click on the Insert menu and select Hyperlink.  When the create Hyperlink dialogue box opens, paste the web address of the picture into the Address box, which is near the bottom of the Insert Hyperlink dialogue box.  Click on OK.

 The word “here” should now be blue and underlined, indicating it is a hyperlink. 

TESTING THE LINK

 To check to see if you have inserted the link correctly, run your mouse over the link (without clicking on it) and you should see the URL which it links to appear in the bottom left hand corner of the screen. 

 Or, more excitingly, click on Preview in the bottom left hand corner of the screen, and then click on the word here and you should jump to the website where you found your picture.

 To go back to your own page, click on Normal, to the left of the word Preview.

 To finish off this part of the page, click on the Insert menu and select Horizontal Line.

ADDING ANOTHER LINK TO AN EXTERNAL WEBSITE

 Put your cursor at the end of the bottom horizontal line and press Enter.  Now enter the text: “Here is the website of my school”.

 Now use Google to do a search to find the website of your school and copy the URL.

 Go back to your index page, and create a link to this website in the same way that you created the link to the site where you found the picture relating your hobby above.

 Test the link as you did before.

CREATING AN ARROW TO GO TO THE TOP OF THE PAGE

We are now going to create a navigation arrow at the bottom of the page to give readers a quick way of jumping back to the top of the page.  We will do this in 3 stages:

 1.      Insert the arrow

2.      Create a bookmark at the top of the page

3.      Create a hyperlink in the arrow to go to the top of the page bookmark.

1.      Insert arrow

 Let's use the blue arrow in the resources folder on the shared drive for this.  Find an image called "arrowupblue" using google, copy the file called arrowupblue and save it in the folder where your webpage is saved.

 Then go to your webpage in FP, put your cursor where you would like the arrow to appear (right at the bottom of the page) and click on the Insert menu and choose Picture, then From file.  Browse till you find the arrow image, highlight it and click Insert.  The arrow should appear in your page.

2.      Create a bookmark at the top of the page

 To create a bookmark at the top of the page, position your cursor at the top of the index page-, just to the left of the title.  Click on the Insert menu and select Bookmark.  Where it says Bookmark name, type in "topofpage" (no capitals, no spaces) and click OK.  A little blue flag should now appear to the left of your title, indicating that a bookmark has been inserted.

3.      Create a hyperlink in the arrow to go to the top of the page bookmark.

 The final stage is to create a hyperlink in the arrow at the bottom of the page which will jump to this bookmark.  To do that, scroll down to the blue arrow you inserted in stage 1 and click on it to select it.  Then click on the Insert menu and select Hyperlink.  When the Inset Hyperlink dialogue box opens, click on Place in this Document on the left hand side of the window and you should be able to see you “topofpage” bookmark joined to Bookmarks by a dotted line.  Click on “topofpage” and then click on Screentip in the top right hand corner of the window.  In the box marked Screentip text, type Go to top of page. Now click OK. 

TESTING YOUR TOP OF PAGE ARROW

 You can test your top of page arrow, by clicking on Preview again (bottom left hand corner).  Put your mouse over the arrow, but do not click.  After a few seconds, a little yellow tip should appear saying Go to top of page.  If you then click on the arrow, you should jump to the top of the page (you will probably just see the page jump slightly).

CENTRING EVERYTHING

Finally, to make all the text and graphics move to the centre of your page, click anywhere on your index page, hold down Ctrl and press “A”.  This should highlight the whole page.

Now click on the centre text icon at the top of the screen.

Congratulations!!!

Your webpage is called index. Create a new folder in your folder. Its name will not have any capital letters or spaces or symbols. It might be called your initials. The name of this folder could become part of the URL, depending on how you upload your site to the web.

In Frontpage, open your home page from your new folder

Adding your email contact

Adding new pages to your website

In the left pane, click the navigation button.

You will see a diagram of your whole site which consists of one page!

Right click on your index page’s icon è New page.

On the new page’s icon, right click è Rename. Name it Picture.

Right click on your index page’s icon è New page.

On the new page’s icon, right click è Rename. Name it Links.

Practice: click on these icons and create new pages and rename them as you wish.

You could continue doing this till you have a structure like this. School and town will be your own, of course.

If you need to delete a page, right click on the icon. Delete it from the web, the second radio button.

Adding navigation tools to your website

Format è Shared borders è Apply to all pages.

Choose where you want your navigation bars è top & left.

Right click in the border area. Choose these Link bar properties.

Click on the navigation button (left pane) and then double click on various page icons where you can see how the navigation area changes according to the position of the page in the hierarchy.

You might want to format the navigation text.

Previewing your work in the browser

Your work doesn’t have to be mounted on a server for you to preview it. In the File menu, choose Preview in Browser. Keyboard shortcut – Alt F + B + Enter.

Alternatively, in Navigation view, right click è Preview in browser.

You can check that your navigation buttons are working and see how your work is progressing.

Adding a theme

A theme is a fully pre-packaged co-ordinated colour scheme, with buttons, banners and everything already designed. When you apply a theme, it redesigns everything for you, giving consistency to the site.

Format menu è Themes. Click on theme names in the left pane to see them previewed.

At the top of the menu box, select the radio button Apply to all pages. When you have found what you want, hit OK.

You can choose a different theme later. And from the top of the theme names, you can also select No theme, which undoes all automatic formatting.

Adding a Page Banner

Click in the Top Margin. From the Insert Menu è Page Banner è Picture

Creating a Links Page for your Exercises

In the Navigation window, create a New Page and Rename it Exercises. Put it in the hierarchy wherever you think appropriate.

Double click on it to open it.

The heading of the page will appear in the BANNER (if you have previously chosen this option).

Your page will be divided into types of exercises, and under each type you will have a LINK and a brief description. For an example, see: http://www.britishcouncil.org/virtual/dictionaries/online/onlin.htm

Steps

1. Create several headings, e.g. Grammar exercises, Collocation Exercises.
2. Under each heading you will create the link by typing in the words that the user will click on, e.g Biographical dictionary.
3. Then select it è right click mouse è choose Hyperlink è type in the URL into the address space at the bottom of the window that popped up.

Note: your hyperlink can be to a file on your computer e.g. a Hot Pots exercise in your web folder. Your web site will also function off-line.

4. Click OK and you are returned to your page where what you selected is now underlined and blue. This is an active hyperlink.
5. Under this, you should write a brief description of what you are linking.

Repeat this procedure for each link.

To format the Headings (Collocation etc), put you mouse on it (it’s not necessary even to select it). There are two ways to apply the program’s pre-determined styles:

1. At the left of the Formatting Menu bar, you see Normal in a tiny window. Click on that and the list of predetermined styles appears. Select one (probably Heading 2)
2. You can use Shift + Alt + Right / Left Arrow to format the text according to the pre-defined Heading styles. Watch it change as you keep the Alt Shift down, and hitting the left and right arrows.

Aligning your pictures

If you have a number of pictures that need to be organised neatly on your page, they are best aligned using a Table.

Create a new page as you have before using the navigation window, and call it Pictures (or something).

Say we have four pictures: Create a table by dragging on the table icon on the standard toolbar. When you have it 4 x 2, release it. It should look like this without x.

You are going to put your pictures in the x cells. The spare cells will be used for captions.

Put your cursor in the top left cell. Insert Menu è Picture è from file.

·         If you do not have any pictures, there are some sample ones available at: My Documents è My Pictures è Sample Pictures.

Find your picture and click OK.

It might be so large that it distorts your whole page – do not fear!

Right click on a picture è picture properties è Appearance. Make sure the Specify size and Keep aspect ratio are ticked.

Make the width 300. The height is automatically adjusted.

Do all of this for the other pictures.

When you save, you will be prompted to put these pictures in your folder. Do so.

Advanced technique: if you make a picture a hyperlink (as we did with words in the Exercises page), clicking on a picture will take you to the specified site. WordArt also creates pictures.

Adding a Table of Contents (Site Map)

Click on the Navigation Button in the left pane to see the overview of the site.

Right click on Index. Add new page. Drag it up beside Index. Rename it Table of Contents.

Double click it to open the page.

From the Insert Menu è Web Components è Table of Contents è for this site.

Adding a webpage that already exists to your website

Important:

·         the page you are going to import MUST be a webpage, not a Word document and not a shortcut to a webpage.

·         You must know WHERE the page is.

Steps:

1. In Frontpage, open the website that you are going to add the existing webpage to.
2. You need to have the Views Bar open (if it’s not, go to the View Menu and open it).
3. You should see it in your Folder List. If you can’t see you Folder List, go to the Views menu and click on Folder List.
4. Open your Navigator (that shows the hierarchical structure of your site) by clicking on Navigator in the Views Bar.
5. In File è Import è Add File è Locate the file è Click on it è Open

When it is imported, it appears in the Folder List. Drag it from there to wherever you want it in the hierarchical structure.

Note: if you have already implemented Shared Borders and the navigation to the rest of the site, these features will not appear in newly imported web pages.  You will need to open a page (by double clicking it on the Navigation page. When it is open, Menu: Format è Shared Borders è choose the components that you want è Apply to all pages è OK è Save (Ctrl S).