Area 10 [archive] - BUILD YOUR OWN WEBSITE PART FOUR

In Part 3 you learned how to build a basic webpage and how to save it, using the correct page-file-path and graphics-file-path, within a Directory structure you initially created on your own hard drive (Part 1).

Now we can do some more work on your first page. Open the page (using File - Open) [locate your page using the suitcase icon we covered previously, then click on it to access] and you'll get a message come up on your screen "convert from html?" Click on yes. If you click on "no", by mistake, you'll find you can't get into the page at all (WordPerfect Suite 8 will tell you it's already in use) and you'll have to exit the whole program and start again.

You can also access the page initally (if it's one you worked on recently) by clicking on File and having a look through items 1-9 (if you've used worked on other pages in the interim) which come up before the Exit option. Follow the same "convert from html?" option as described above.

If there is more than one "index" option (which there may be, in due course) hover over the item (highlight but don't click) and a little box will come up telling you the file-path for each page, so you can identify the one you want.

Okay, you now have before you an opened page. Black on grey is a bit boring, isn't it. So you can change the "background colour". First way of doing this is to click on "change colors" (americanised spelling, again), on your left-hand bar, under Internet Publisher. If the bar's not there, click on the shuttlecock at the top of your screen (as explained previously). If, for some reason, you've got WordPerfect at the top of the bar [this happens occasionally] try using the webpage icon at the top of the screen, as already explained.

So, click on "change colours". You'll get about 16 different options come up. Try any of them to see how it makes your page look (click to select). You can do this as many times as you like.

Another way of changing your colours is to click on "Change Background" (next option down on your left). This will give you a whole range of background wallpaper. Ignore this for now: on the right of the wallpaper options is a long downward bar, with a light grey area just below it. Click on that and it will take you a section further down the wallpaper options. Bottom right is a very large question-mark with "custom ...." next to it. Click on that.

This will bring you to the "text/background colors" option on an HTML Document Properties screen. Near the bottom (above "background wallpaper") is a "background color" option: click on the little graphic box. This will bring you up a range of (visible) colour boxes. Click on one to select - then click on OK near the bottom and this will change the background colour of your page.

Now follow this route again, and instead of clicking on a colour box, click on "more" at the bottom of the boxes. This will take you into "custom colours" where you can create your own shades. "Grab" the white box in the centre of the circle (click on it and drag) and you'll see the "current colour" box change in shade. Move around till you get the sort of colour you're looking for, then "let go" and instead "grab" the white box in the long up-down colour bar. Move upwards or downwards to vary the shade of your selected colour, then click on OK on that screen, and OK on the text/background colors screen, to change the colour on your page.

So - now you have bright-fuschia-pink (or whatever) as your background colour, still with black writing. Not very stunning. To change the colour of all your text, you have two options. The first is to go to the very beginning of your page (top left) and put your cursor there (using your mouse). Then click on the text colour icon at the top of your page. It's about half way across, what looks like an almost-full beaker of black fluid with an "a" just below and to the right. Click on this and you'll get a range of colour boxes come up: select the one you want using the same procedure as you used for your background colour [i.e. choose one of the standard options, or select a "custom colour"].

Let's suppose you chose white text on your pink background. You could have chosen any one of an infinite number of options for both text-colour and background-colour. However, what you do need to recognise (and I only found out recently) is that a lot of people's browsers might not support some of the colours you choose [particularly the custom ones] - so black text on white background is a "safer" option if you want all your visitors to be able to read your page.

If you do "opt for" something unconventional, try to ensure the contrast between the type colour and the background colour is strong enough to make the text easy to read. Read-ability is the most important factor, but if you can combine it with (pleasant!) visual impact, so much the better.

For now, we'll go for the boring "black on white" option. So, use the "change background" bar on your left, and select white again. You may find (if you chose white text) that you now have a completely blank screen (white text on white background.

To change this we'll use the second option for changing the colour of your text - highlighting it. To do this, put the mouse at wherever the end of your text is, click and then drag the mouse up to the top of the page. This will highlight all your text. Then use the "beaker" icon to change your text to black.

One small point - if you've been playing around with a range of text-colour options, you might find you then start typing in grey, blue or whatever, below the range of text you just changed back to black. A quick way of standardising your current text colour to the same is to go back to the last text letters in the correct colour, and place your cursor immediately after them. Press the back-delete key a couple of times (top right of your main keyboard section, just above the carriage return key) to delete the last couple of letters, and retype them: you'll find ongoing text you type should now be in the same colour.

So far so good. You now have a standard black-text-on-white-background page (but you also know how to vary all that, if you want to). It's time to save your page again. Use the "finish" key on your left-hand bar (as previously explained in Part 3) and the "publish to HTML" option, and check your page-file-path and graphics-file path are correct (Webimage should have remained a constant as the third option). Amend the filepaths if incorrect, in the same way we discussed previously. Then click on OK.

Now - background wallpaper. This is actually going to cover the white background colour we just selected - but note that when your page is up on the Internet, it is the white background which will be seen initially by your visitors, whilst the background wallpaper is downloading. So it's important to ensure that your page is read-able with-or-without whatever background wallpaper you select next.

Select "Change Background" again, and the "Custom" option (the big question mark) in the same way you did previously. You'll see a "Background wallpaper" option near the bottom, with a long blank white box next to it. At the right-hand-side of the long box is a little square: click on that. You'll get a large-ish box with Textures written in the long box at the top and about ten different directories available in the main box. For now, click on "Paper" to open that directory (use Select, or double-click). Then select "Light Texture" [which is what is used for the background of the page you're reading now]. Assuming you're happy with that (it will come up as a sample background in the big box on your text/background colors screen), click on OK.

This will then transfer the background onto the page you're building. If you decide you'd prefer another option for your wallpaper, follow the same route again until you're happy with the wallpaper you have chosen.

When you've finally identified it, you have to get that wallpaper pattern into the graphics file related to the page you're building (otherwise it isn't going to load up on the Internet, and may not load up next time you come back to work on your page). Depending on which version of WordPerfect Suite 8 you're using (and we've used two different ones, having received a free update with the latest "patches") and whether you're working in Windows 95 or 98, you may have to approach this in different ways. I'll describe the most long-winded way [that's likely to cover any possible problems] - you may find in practice that when you "publish" the page (using the saving option we've discussed previously) the wallpaper will simply transfer into your assigned graphics file - but for many people it may not, so I'll take you step-by-step through the longer procedure.

Save your work to date again (using the Finish - Publish options as previously) and then go to Internet Explorer (by the means explained previously). You can leave your page open, for now. Find the drive where you have installed your WordPerfect Suite 8 software, and then make your way through the Directory structure (usually clicking on the plus sign to the left of each directory title, to get the contents to drop down on the left-hand-side of your screen) as follows: Corel - Suite 8 - Graphics - Textures - Paper. This last one should bring up the Paper textures on the right-hand-side. Click on "Light Texture" to highlight it, then use Edit - Copy (top of your screen) to paste a copy (metaphorically speaking) onto your clipboard.

Then locate the correct Webimage file for the page you're building, and highlight it on the left-hand-side of your screen. Then select Edit - Paste. This will put a bmp version of your wallpaper graphic into the Webimage graphics file for your page. You are now going to re-name this file (highlight it and then use File - Rename). Re-type it exactly the same except that you use all lower case letters (not capitals). We've found later versions of WordPerfect Suite 8 make this change automatically, but earlier ones don't, so it's simplest to get into the habit of always putting the wallpaper title into lower case letters. The reason for needing lower-case is that when you upload your graphics to the Internet you may find that graphics in upper-case for some reason aren't recognised or accessed properly. We only discovered this by "trial and error" - but it took a long time. If you take the time (which is minimal, effectively) to always convert selected graphics into lower-case-titles, it may save you a lot of time later on.

Returning to the page you're building, go back to the "Change Background" option (left bar), select Custom (question mark) and find the long white box where your current background wallpaper is shown. Highlight this in blue (by clicking) and press delete, to remove. Click on OK. This should bring you back to a black-on-white page, meaning that you have removed the "template-wallpaper-file-path" completely. Now go back to the box you just took the background-wallpaper-file-path out of, and click again on the little box on its right. Use the suitcase icon (as previously) to go back through Textures and preceding directory structures till you reach your site-name-directory and can then locate your page folder and, within that, your Webimage folder. Clicking on this (when it's in the top box) will reveal the wallpaper bmp you just pasted in there. Click to highlight, and Select (or simply double-click) to put onto your "sample background image" and then click on OK to get the wallpaper-with-the-correct-filepath onto your page.

Now it's time to save your work again (usual procedure, NOT File - Save). Next re-access Windows Explorer where you may see that your background wallpaper has appeared in another format within your Webimage file [this varies between different versions of WordPerfect Suite 8 and/or whether using Windows 95 or Windows 98 - because we used the new version of WordPerfect Suite 8 at the same time as beginning to use Windows 98, we have no way of ascertaining which of them caused the variation]. The point of mentioning this is, that if you have gained a second version of the wallpaper in your Webimage file, it is this one you should later upload to the Internet.

Well - so far so good - you can now make your page a lot more interesting than previously. There are lots of brilliant background wallpaper options on Corel WordPerfect Suite 8 (a better range than we've found elsewhere), so before you leave your page select a background colour, text colour and wallpaper that you want for your main welcome page, and save in the usual way.

Please note that if you didn't install the full version of WordPerfect Suite 8 (eg because of lack of hard drive space) you may need to load the WordPerfect Suite 8 CD to access some of the wallpaper options (perhaps even some of those on the "templates" which are the range you encounter initially when selecting the "change background" option on the left of your screen). You can select a "template" simply by clicking on it - but in order to get that wallpaper into the correct graphics folder for your page you may need to use the "suitcase" option to locate the templates file which is usually within the main Suite 8 folder (you'll need to highlight the Custom WP Templates subdirectory of this, on the left of your screen, to bring up all the templates on the right of your screen, then copy as previously and paste into your Webimage folder). If you didn't load the full program you'll probably find that some of the templates or other wallpaper options are only accessible via your CD drive (locate this with the "suitcase" option and then make your way down through the directories as previously).

There are other factors you'll need later for building your page - like the colours for hypertext links - which appear on text/background colours, but we'll leave those till you get to Part 6. For now, simply try to ensure that your background wallpaper and previously-chosen background colour are fairly similar (eg that black text is readable on both, white text is readable on both, etc.).

The final item to be covered on this page is GRAPHICS. This bit is relatively straightforward (now that you know all about graphic file paths!).

First, select your Graphic. Here's one for you to try - it was given to us by Martin Lockey who built the first pages for our website. It's called "redline".

To add this graphic to your Webimage folder for your page, you need to go to this page on the Internet to "collect" it. Page address is http://www.happychild.org.uk/webpages/page0004.htm . Find this page and then click on the redline graphic with your RIGHT HAND mouse button.

This will bring you up an option of "save picture as" - select this using your LEFT HAND mouse button. Then you will get a screen with "File name: redline" near the bottom and underneath that, "Save as type: GIF (*gif)".

The top part of your screen (the long box and the big box) is for you to identify where you want to save this graphic. Using the "suitcase" icon as previously, go back through your Directory structure till you reach your site-name then progressively select until you have the Webimage folder for the page you are working on, in the long top box. Within the big box should be the wallpaper file name you selected previously. Click on Save - and you have now added this graphic to the correct folder.

[You might also find that if you have visited this page on our site recently, it will be accessible from your hard drive: in which case you may be able to visit it off line and retrieve the graphic even in off-line mode.]

Now - returning to your page building - go to the foot of your already-input text (or wherever you want the line) and do one carriage return [which allows you to change the justification factor] and select Format - Justification - Centre. You may already be using this, but I mention it in case you've at some stage selected the "Left" option whilst experimenting with the different options on your page.

Then click on Insert (fourth option from left along the top of your page) and select Graphics - From file, and re-locate your Webimage file (using the suitcase etc.) to bring it up in the top long box. Its contents (including the graphic you just saved) should be in the big box. Click on the redline graphic (to highlight) and select "Insert". This will put the red line onto your page (another copy as below).

You can check the graphic is central using your "browser" facility. Either use Finish (left hand grey bar) and "View in Browser" or - a shortcut - choose the browser option at the top of your page. This is on the line directly below the File - Edit - View - Insert (etc.) options - about half way along, past the first "spider-web" [which if you hover your mouse over it will read "browse the web"] - the second "web" option is "View {your page} in Web Browser". Select this one (use File - Close to exit the temporary web view, as previously).

To put some more text under your redline graphic, change your justification (if you wish) using Format - Justification - Left (or whatever). You'll need to have done a carriage return under your graphic or the change of justification will affect your graphic as well (you can verify this by using the browser option).

Time to save your page (Finish - Publish to HTML, as usual). If you've followed the basic format suggested in these initial pages, you now have something along the lines of "Welcome to John Bull's home page ..... you can get in touch with us at john.bull04@happychild.org.uk " spread out over your page, in striking colours probably on some sort of decorative background. The design factor's entirely up to you, but at least you have something that's intrinsically YOURS and maybe an animated graphic or two to go with it.

It is possible to "borrow" graphics (like the way you just did) from anywhere on the Internet (it's fairly common practice). However we would suggest you only "lift" graphics where permission has been given (eg from the several "free graphics" sites available on the Net) - and if it's something particularly decorative (eg a Kevdebin graphic like those used on our site, and for which the author is credited - he gives permission for non-commercial use but requests this be acknowledged) it is general Internet courtesy to credit the designer if you know who the designer is. A site-link isn't usually obligatory (and one of Kevin's graphics relates to "Web Prestige ... think before you link") - but a credit, wherever possible, is simply politeness. Plus maybe notifying the designer (by e-mail) that his/her graphics have been used.

The next page in this series relates to uploading your first page onto the Internet. We'll come later (Part 6) to adding other pages and making hyperlinks to link one area of your site to another.

SCHOOLS WEBSITES Carib Amer Europe Asia Aust Pacific Africa UK

Bricks and Mortar (learning to read) free to print

PROJECTS helping children Carib Amer Europe Asia Aust Pacific Africa UK

index to free educational resources English spelling: 500+ worksheets 4000+ free maths worksheets   learn times tables how to do fractions accelerated learning   timelines puzzles games dolphins carols focus Aesop's Fables Twin Towers change a life

~ linking children all across the world ~               publicity for this site is always           much appreciated ~ thank you

linking the world's major languages ... French worksheets Russian-English Romanian-English Polish worksheets   German worksheets Dutch-English Italian (soon) Spanish (soon)   Arabic-English worksheets (soon) [ click here to find out more ] 'Any-language-to-English' worksheets

infinite facts   countries A-Z islands A-Z USA counties Sioux tribes

POKÉMON   Harry Potter   news newsletter

HappyChild DIRECTORY   Events 2008 syndromes links landmines

sign up here for our free Newsletter - Project HappyChild News - see also our "Latest News" page name of your country email  email

copyright

webmaster