WEB PAGE CONSTRUCTION WITH IE4

NEXT PAGE

CAPTURING PAGES AND IMAGES

This page is all text for easy copying and printing. You are advised to have a printout beside you as you create your page later. Of course, I am assuming you have IE4 loaded as your browser.

It will be necessary to use the mouse and toolbar to capture the files to a suitable folder on your computer and work off-line. Click FILE-SAVE AS-AS FILE-C:\(home)-CREATE NEW FOLDER(the little folder box up the top with an asterisk thingy on the corner)-WEBSTUFF(or make up your own name) using the webpage1.htm name I used.

Go to the bottom of the page and click NEXT PAGE. Save this after it has fully loaded as above. Do this for all the following pages which will have obvious names like "webpage2.htm" etc. Capture all the images with a RIGHT BUTTON click and save each image as named in the SAME folder/directory as your pages.

You're now ready to work off-line. Your folder "webstuff" will have a few htm-files and lots of images for you to learn to compose. It's surprisingly easy. I'll give you sites where you can find more backgrounds, etc., later and lead you through a Graphics tutorial to make images.

NOW EXIT THE INTERNET AND WORK OFF-LINE IN YOUR FOLDER - WEBSTUFF.

In Explorer or Your Computer, open the folder WEBSTUFF (or whatever you called it) choosing to work off-line when asked and FILE-OPEN C:\WEBSTUFF\webpage1 which should start up this page from your hard drive. PRINT IT OUT - you'll need it.  You can now begin "editing" the model page.

The INSTRUCTIONS below will be your guide. Click "WEB PAGE TEMPLATE" to complete a basic page.

INSTRUCTIONS (basic)

NOTE: There are lots of tools we won't use...they're for you to discover later. Please e-mail me with any requests or things that are not clear enough.

1. Once you've opened the sample page, choose EDIT-PAGE from the toolbar above and you are ready to start.

2. So you DON'T LOSE the TEMPLATE, use FILE-SAVE AS-(NAME IT) and you are now working with your NEW page.

3. TITLES and RESIZING:  Type your own title first or use mine to practise resizing. Do this by blocking the passage (click on the beginning with the left mouse button and drag to the end before release) and CLICKING the big A or little A above. Then change them to your choices.

PARAGRAPHS: these allow you to set out information. This is where you say what you have to say. In this programme, just type as you would in any word processor.  When you SAVE, the file will be in html. Do the same to insert titles and sub-titles...change the font in the usual manner, too. (But the A's make the sizing simple). 

4. BACKGROUND...just a colour or image.

Practise this with FORMAT-BACKGROUND and in BACKGROUND (the top one) choose a LIGHT one by holding down the mouse button and sliding to your choice. Click OK and there it is. If you choose a dark one, you will have to go back and colour your text with a light colour.

Do this again and this time slide the mouse down to CUSTOM and a rainbow appears. Practise clicking in the rainbow to get strips of colour and click on a light bit of colour that appeals to you. Choose ADD TO THE CUSTOM COLOURS-OK-OK. Wasn't that easy!

Now for a texture. Try for a new background but this time click BACKGROUND IMAGE-BROWSE. Locate your WEBSTUFF folder and choose a light one. OK-OK loads it. (NOTE: you MUST unclick the BACKGROUND IMAGE dot to return to just colours)

5. TABLES AND IMAGES

Click TABLE-INSERT TABLE using 4 rows and 4 columns OK. Click the cursor on part of the table. Click TABLE-TABLE PROPERTIES (bottom one). Now click ALIGNMENT-CENTRE and select BORDER 0 if you don't want one or maybe 1 with CELL SPACING to suit you.  Try a few choices.  It's easy to change the value.

To add rows is easy.  Click a cell in the bottom row and TABLE-INSERT ROWS OR COLUMNS-ROWS-2-BELOW and you will now have 6 rows.

Slide the mouse down the side to get a horizontal arrow.  Click to block the row.   You could now use the CENTRE ikon to centre titles text, the B to make it bold, the A to resize it etc. If it's a row of pictures, use TABLE-CELL PROPERTIES-HORIZONTAL ALIGNMENT (centre)-VERTICAL ALIGNMENT(middle) to format the table.

The horizontal row block or just highlight a couple of cells allows TABLE-MERGE CELLS allow for larger images..and even split cells for different size groupings.  Play around and discover how easy it is.

IMAGES:  Keep in mind that a page size is about 720 wide.  This allows 4 x 180 but not quite 5 of the 150 size.  When you resize pictures, always resize to a width of 90, 120, 180, 240, 360, etc., so you can mix and match your pictures in this format.

In PAINTSHOP Pro you will see I've done just that...even trying to "guess" the width when cropping the vertical size also as close to one of those numbers as possible.  If you crop "square" with pictures, all will match nicely.

INSERTING THE PICTURES

Click in the first box of your table. Click INSERT-IMAGE then click through folder path to WEBSTUFF if not already there and choose "IMAGE" (your choice)-OK. There are 12, 4 for the 1st, 3rd and 5th rows. Then you can type the text for the names in between. (You could also use the ikon just under the word "table" on the toolbar)

6. URL's There's an ikon under the word "frame" on the toolbar.

Type a LINK such as NEXT PAGE.

Now, highlight the words and click the ikon.

You will have the choice of typing in a site which will then be linked to your page or by using the magnifying glass one navigate to the "webpage1" as an example.

7. Mail Box

It is sufficient to say in your text "Send me a letter at  [email protected]" as clicking on that will call up your default e-mail programe.  You can, of course, insert a fancy picture and block it and turn it into a URL to do the same thing.

INSERT-IMAGE...find one of those mail boxes...OK and highlight it and CENTRE it.   You may wish some text as well.

8. SUMMARY: You now have TITLES, PARAGRAPHS, a TABLE with TEXT and IMAGES, a LINK (URL) and a MAIL BOX LINK.  You can now use a FILE TRANSFER PROTOCOL programme like CuteFTP to UPLOAD your files to the folder your PROVIDER's made for you.  If you are new to this, you will have to advise them first so the directory will be made.  Once you tell the ftp-programme the address of your providor and go online, it is largely automatic as you will find. 

Locate the destination directory, highlight the files you want to upload and choose send/upload.  It is useful to make a final selection of files for your site and copy them into a special directory on your computer so you don't accidentally send unnecessary ones. 

Your provider may require your main file to be named "index.htm" or "index.html".  Just go back to it. Click EDIT-PAGE and then FILE-SAVE AS- type index.html and OK. That's the file you use.  If you have a page 2 linked back, you'll have to edit the URL link to go to the new name.  Highlight it, click the ikon and make the change.

Created by Wally Morgan with  ,  &