Creating Web Pages at MMU with Netscape Composer : Lesson 2
This lesson assumes that you have covered the basic aspects of creating web pages at MMU, as outlined in Lesson 1. You should have
Setup your initial web page at MMU Done basic editing of your web page using Netscape Composer Set Page Properties for Title. Keywords, Colour etc Created your own links to other web sites Inserted images into your document, and altered their properties (alignment, display size, border etc) Copied images from other web sites or disk and inserted them onto your page Made an image into a link
In this lesson, you will learn how to:
Create new, blank pages and set them up with a default style Use template pages as a basis for setting off on a new page Link your web pages together Create tables of data/links to aid layout and design of your web page Add “thumbnail” images and icons to your web page Access advanced formatting characteristics Create links within your document to other parts of the same document Examine where to go from here, in terms of web page design and functionality
The guide is meant as a self-learning tutorial, and steps where you are expected to type something are indicated by the symbol
Using Netscape Composer Lesson 2 -1- Creating New Web Pages Once you have set up your initial web page, you will want to create other pages and link these to your home page and vice versa. New pages can be created in different ways.
1. Create them with a Web Page Wizard which will asks few questions and generate a new page with the setup you specify that you can change and add to. 2. Use a template file that has the basic structure of your web page ready laid out. You then add to the template your own style and information, saving it under a different name. This is useful if you want to maintain consistency in your web page style 3. Create a brand new blank page and start “from scratch” each time
Creating a new, blank page
Start Netscape Communicator from the program menu and select File – New – Blank Page
You will then be presented with a blank screen within Netscape Composer, ready for you to enter text and set properties
Using Netscape Composer Lesson 2 -2- Use the editor to make a page to access some of your files for other users. Just put the words in for the links, we will set the links in a moment. Use the page setup etc to set : Page heading in menu bar (page properties) Colours for the page and text A list of items to download as shown, including indications of different files, to include Another web page A Word document A Picture file
Use the preview option to save (use a suitable filename, such as DOWNLOAD.HTM and look at how your page will appear Copy a picture file from your own directory to your WWW account, together with a Word file, ready for access from your page Make these into links on your page (highlight the link text, then use Insert – Link, then enter the filename of the linked document) Preview your page again, test the links, and work on the links until you are happy Use File—Open to open up your original homepage (called INDEX), and create a new link in that that points to the page of document links you have just created. Save your homepage and test the links out
Exercise
Make a new file called LINKS.HTM, which contains links to your favourite web sites. Put these in a list with a short explanation, and a link to the actual site. Tidy up your homepage so that the links to sites are contained in the LINKS page, the documents links are in the DOWNLOAD page, tying all 3 together.
Using Netscape Composer Lesson 2 -3- More on Images and Icons
Web pages can be enhanced by using icons and images for links to press. A problem with images however, is that they can be very large, and it is sometimes useful to be able to use a “thumbnail” image as a pointer to the main one.
Icons and Thumbnail Pictures Icons can often be used as links to other pages or files, or just to make page design look better. Many icons are available for free download and distribution. A few sites are given below. To have a look at a page, simply enter the address in your browser and go to the page. Note : In the case shown, there are many icons, and the page can take some time to load. If you like any icon, simply put your mouse over the icon and right-click to Save Image. Remember to save your image in your WWW folder.
http://www.free-clip-images.com/ http://www.barrysclipart.com/ http://www.webplaces.com/html/clipart.htm Animated GIFs at http://www.animfactory.com/
Do this now Create a folder called IMAGES in your WWW folder. Put your images into this folder for easy access. Examine the icons pages, and save some icons for later use.
Exercise 1. Add some icons to your web pages. If they are in the IMAGES folder, set the filename (for say gb.gif) to be images/gb.gif. This ensures your web page will find the image in a sub-folder from the main page. 2. Make some of the Icons into links, to other pages.
Manipulating Images
Images to load on a page are notorious for taking time to download. File sizes vary considerably. Where possible, you should try help the person looking at your page by keeping image sizes down to a minimum and not forcing the user to download entire sets of pictures to view a page.
Images are picture files, in different formats. Most browsers will handle different types BMP or "bitmap" files, were common, but can be very large GIF files, smaller, more common now. Sometimes "animated" JPG ("j-peg") small file size, are "compressed" Good for downloading
Try, where possible, to use JPG files, or GIF files if they are small or animated.
There are many image editors around that will allow you to manipulate image files, changing their format and altering size/orientation etc. One such program is LView , available from the desktop and program menu.
Do this now – Resizing Images Start the LView program.. Use File – Open to open one of your picture files. Use the Edit—Resize option to resize your image. Save it under a new name, indicating thumbnail perhaps. E.g. save GB.GIF as GB_TH.GIF (no spaces in filenames) Load a new file. Experiment with options in rotating the images, colour operations etc
Using Netscape Composer Lesson 2 -4- Try the “Save As” option to save a file in a different format, say swapping GIF to JPG. Note : Only GIF files can be animated. Exercise Create a thumbnail image of one of your pictures. Incorporate the thumbnail image in a web page, and make it a link to load a bigger picture, or file to download.
Tables on your web pages
Tables are an excellent way of presenting information to the user in a structured way. Composer allows you to easily create tables, and set various properties on colour, grid lines, size of individual cells etc.
Adding a table
We will create a table on your web page that holds a list of colleagues names, their web pages and their email addresses. The user will be able to click a name and get a link to either their email, or their webpage. We will create a new web page for an “address book” of web pages and email addresses
Use File—New to make a new web page In the new page, click the button for table, or select from the Insert—Table menu
From the dialog box, select an 8 row and 3 column table.
Note the border line option to specify how wide the grid lines are.
Also, colour option
Set any immediate options and press OK
Using Netscape Composer Lesson 2 -5- You now have a table shown. Enter values for headings and 2 names, with link text for web page and email
Turn the link text into correct links. For links, use the example of http://www.doc.mmu.ac.uk/STAFF/A.Turing for web pages for mail links, use, for example mailto:[email protected]
Experiment with the table. Right-click in the table and select Table—Properties . Try setting colours of the table, and individual cells. Look at alignment, text and background colours, grid lines etc. Note : use Undo in the Edit menu (or
Exercise
1. Finish your table of links to other members of staff 2. Try a table for downloading some course notes from. Make the links point to a document other than a word document
Using Tables for Layout
Tables aren’t just used for presenting structured data as before. More commonly they are used for layout of your page too.
It is very difficult to have aspects of your page such as titles/menus etc appearing in particular places. A table can help you keep to a standard layout, possibly even providing a skeleton template page for you to work with.
The important thing to remember about tables is that they can be used to hold anything, not just text or links. This means you can have images or even other tables within them.
Using Netscape Composer Lesson 2 -6- Creating a table for layout
We will create the following table layout
Notice the Title bar, image and menu bar of links. In this example, the gridlines are still shown, though we will remove those too.
This can be used as a template for your web pages.
Do this now – Table Layouts
1. Create a new blank page in Netscape Composer 2. Insert a table of 2 columns by 2 rows. Do not click OK yet, we need to set some properties. a. Set 2 rows and 2 columns b. Deselect the entry for “Equal Column Widths” c. Select a table background colour if you wish d. Press OK
Using Netscape Composer Lesson 2 -7- 3. You now have a table displayed. We need to set the column width of column 1 to be 15% of the table width. Click in column 1 row one, and from the menu select Format —Table Properties (or use right- click to select from pop-up menu). Then set Cell Width to be 15%, and Horizontal and Vertical Alignment to be centred.
4. You may need to repeat this for column 1, row 2 as well. You should see your onscreen table adapt to the thinner column on the left 5. In the table now, you can place a Header in the top right,, an image at the top left, and a list of your menu links in the bottom left column. You can press
8. Save the completed template, and use it as a blank for future pages 9. Make blank pages for all these menu links and try the system out.
Using Netscape Composer Lesson 2 -8- After some amendment, you may end up with a common layout looking something like
Links within the same document
If you have a large document (for example a report, or handbook), you should make an index at the start of the document that contains links to other sections of the document to make navigation easier.
To create a link within the same document
There are two steps
1. Make a location in the document a named location 2. Make a link to this named location from some link text.
You will need a large (ish) document to create a named link in, so open a document that is large (or save the pathway handbook file from abopve in your account). Edit this file in composer.
Go to the section you want to name as a target
Using Netscape Composer Lesson 2 -9- Select Insert – Target
Now, name the target. Give it a name that reflects that point in the document
This will be our link target later.
You can now create a link to this target. Select your link text somewhere in the document Create the link, but for the target enter #PathwayAims (in this case)
Insert the link, save the file and test the link in your browser.
Note : You can use the target as part of a full web address so that other documents can leap to specific sections of your document. Simply add the “#” at the end of the address
e.g PathHand.htm#PathwayAims will jump to the PathwayAims section of the PathHand web document.
Exercise
Take a large document and paste it into the text of a blank web page. Put named links in your document, but also put “Top” and “Bottom” links throughout the document to return to the index or bottom of file at different points in the document.
Using Netscape Composer Lesson 2 -10- Exercise on Templates / Page Wizards
Explore the option in Create New Page to use a template from Netscape. These provide many layouts that you can use already, according to the style you like. Simply choose the option for Template from the File— New menu. Also experiment with the Page Wizard, which will prompt you for what style you would like.
Where do we go from here ?
If you have successfully worked through the two tutorials, you will need to practice, practice, practice. Make lots of pages, experiment. Get used to the environment.
Learn HTML
At this point, it would be very worthwhile learning the HTML coding that actually makes up the web pages you have written so far. There is really only so far you can go with web page writing just using visual editors. We now need to be able to “tweak” the code behind the scenes.
For the moment you should study the HTML code from the pages you create (View …Source in the menu options). Also, obtain an HTML tutorial, either online or a book.
http://www.w3schools.com/html/
A simple search for HTML and Tutorial will yield many many results
Forms and HTML
This forms the basis of the next Advanced Web Page Design and will assume a grasp of HTML.
It will show how to incorporate interactive forms into your web pages that request information from the web server. This will allow you to return dynamic data from databases or files held on the web server, or run programs held on the web server that return results as a web page.
This involves a knowledge of HTML as well as some programming.
Further studies can involve making your pages more attractive with animation, and more interaction with the user. These involve generally learning programming languages such as JavaScript and Java or Perl. They allow the user to be able to run programs from your web page, such as database searching and presentation of the results of searching or work (eg the search engines use databases and present the results to you as web pages).
It need not be as complicated as it seems, many tools are about for creating such programs or easily amending or using existing ones.
Resources are often available. A good one for teaching is the Netskills initiative, http://www.netskills.ac.uk where you can download much teaching material if you are from a UK university.
Using Netscape Composer Lesson 2 -11-