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

Well, I hope you have found Parts 1-11 useful. These include most of the basic information I have gleaned along the way, whilst learning to build pages for the Internet. I'm putting "Build Your Own Website" up on our site primarily to help schools who purchase the Academic version of WordPerfect Suite 8 for their pagebuilding (because the manuals don't come free and, frankly, I found them too high-level to work with easily, though they're probably useful to people who already have a fair grasp of the basics. For example, when I first tried to upload graphics and wallpaper, all the manual said was "specify graphic filepath". Well, you'll know from these Notes, specifying a graphic filepath is hardly a straightforward matter: there may well be other ways of achieving what I've done here, but this way works for me and I trust it will work for you too.)

I scribbled down reams of notes as I began to learn how to do things (primarily to refer back to later, because the demands of separate areas of the site were quite different and I would have to remember them when I went back to working on another area); many of them (like how to create graphic "buttons") became superfluous when I learned that Tables are a radically-easier way of creating even one-by-one buttons.

There are still a few items of which I made notes (primarily relating to use of WordPerfect Suite 8 which remains our major pagebuilding tool) which you may find useful, so I'll itemise them here. They aren't in any particular order; they're just odd points which you may find useful along the way. [Note: see the items at the very end also, added to this page at the end of the year 2000, after the main site pagebuilding was completed.]

TEXT FONT.

To change the text font of a whole page (assuming you haven't already made changes to text font or size within the page text) just place your cursor immediately before the first text on the page and amend the text font: all the rest should change automatically. Note: check on your browser to see if this actually happens - usually it will, but not always.

LINE BREAKS.

Sometimes you'll want to "turn up one line" without inputting a carriage return. Use Insert - 4^th from left at top - Line Break (bottom option). [Just a note here - our "patched" version of WordPerfect Suite 8 for some reason didn't offer this option, only "New Page" (the Internet-publisher version of text didn't for some reason load automatically) - whoever you bought your package from should be able to talk you through amending this, if required. After it was changed initially I have only had to do this once more, and - touch wood - it seems to be okay now.]

To return to Line Breaks - on your screen, two line breaks look the same as a carriage return. However if you want to alternate justification on your paragraphs, it is essential to have a carriage return between one and the next (equally before a graphic for which you want different justification). If you just use line breaks, two of these together will look like a carriage return but when you change the justification of the second paragraph it may or may not look okay on your screen (What You See Is Not Always Exactly What You Get) (WYSINAEWYG) but is likely to have the same justification as the previous para when you check on the browser.

If you find you have a problem, try putting the first paragraph into whatever justification you need, then take out all C/Rs or line breaks before the next paragraph (use cursor at end of first paragraph, plus Delete key). Then put in C/R (carriage return) [plus line breaks if you need extra space] then put your cursor directly before the first letter of your paragraph and change the justification (Format - Justification, etc.). Follow this procedure again with subsequent paras as necessary.

Sometimes when you exit [use Finish - Publish first] a file and re-enter it, you will find you have lost half your apparent "white space" [made up of C/Rs and line breaks]. In WordPerfect Suite 8 at least, "two carriage returns" doesn't seem to register: use one C/R plus as many line breaks as you need, for your extra "white space". It's probably easiest to work on the basis of deleting all the white space in any problem area and re-entering the C/RS and line breaks: checking on your browser will give you some clues as to what's happening but even so if you exit and re-enter the file you may not find it's saved itself exactly how you intended.

Getting the white space exactly how you want (particularly if you're aiming to achieve exact A4-size for printing from site) can be a little time-consuming and usually involves exiting and re-opening your file, at least once.

PRINTING.

When you're checking for white space, it's quite useful to print off a copy of your page. IMPORTANT NOTE! always view the page in your browser and print from there. Firstly you will get your "headers" printed (from the meta-tags you have put on your page) and secondly you will end up with an accurate-ish version of what's going up on your website. I know -from repeated experience! - that often if you print direct from table-formatted pages (eg our Directory pages and Directory Index) that printing direct off page-screen, rather than from the browser, generates pages which bear little relation to the web version. Why this should be I'm not sure - I've just learned to always print direct from the browser view of the page.

TEXT SIZE AND FONTS.

WordPerfect Suite 8 has a few anomalies in it somewhere - not knowing much about HTML I have found these complex to amend in the coding, though have done so on occasion when I simply can't resolve problems any other way.

You'll note that on our pages we use a fair amount of colour (assuming your browser supports this); we also vary text sizes here and there for visual impact [not on these pages, but elsewhere]. Sometimes you will find that text will appear larger on the browser than it does on your page, and/or it will be the wrong colour.

(A) SIZE: To amend the size (for example if it's a couple of sizes larger on the browser), highlight the text (cursor at beginning of text and drag the mouse across it) and then click on font size figure at top of page next to font name. Back-delete arrow to remove the figure, then type in next figure down below the desired font size (eg 10 instead of 12). It might revert to a 12 on screen but may come up the correct size 10 in the browser.

Sometimes I've found it works to go to the end of the paragraph, highlight backwards and then change the font to something larger, de-highlight and check in browser, then go through the whole process again and change it to what you actually want. This doesn't always work, but sometimes.

Something else to try is the little "a" symbol next to the abc-with-the-up-arrows at the top of your page.

When you're amending text sizes you often have to do this a paragraph at a time. Highlight your paragraph, and see what text font comes up next to the font name top left. Say it comes up 18 and you want 14 - you click on 14 [selected via using the down arrow next to the font size] and all of a sudden your text is massively larger and you have 21 come up in the box. Leave the paragraph highlighted and click on "a" - and you may find you have "extra large" ticked, for no apparent reason. "Click off" the tick for "extra large" - and the text should revert to the proper size (check in the browser).

Before I discovered the "a" facility I thought I would go quietly mental with all the type size anomalies. But you'll usually find whenever you get an "odd" type size come up (it could be 9.6, or 21, or 7.2, or whatever) that the culprit lives in that "a" box, and you can change it there. Usually these "odd" type sizes have come about when you go back to re-open the file, after saving [File - Publish etc.] and exit-ing the file.

What has to be remembered is that Corel WordPerfect Suite 8 is a brilliant program for those not initiated into the mysteries of html - it does a great deal of the work for you and automatically codes lots of instructions you aren't even aware of having given. However sometimes the way it achieves things isn't the way you input them in the first place, and if you later decide to modify your page (as we do here, regularly, all across the site) you have sometimes to identify exactly how any modifications have come about. They don't always become apparent immediately on re-opening the file - sometimes you may go back in and click right at the beginning to modify the typeface or size, forgetting you might have input different font instructions further down the page - and then discover that everything gets, say, smaller, with all these decimal-pointed typefaces appearing.

Once you know how to change them back, sanity returns. Even a very long page doesn't take too long to change, a paragraph at a time, provided you know about the "a" box. Doesn't always work (isn't always ticked in the likely place) - but usually.

(B) FONTS: Sometimes (when you change fonts a lot on your page) you will discover that the font on your page doesn't match the one on your browser. If so highlight the paragraph, change it to something else entirely (check on your browser) and de-highlight the para. Then go through the same process again and change it to the one you DO want. Check on your browser and, with any luck, you'll have it.

(C) COLOUR: Something I must admit to having endless problems with (quite apart from the fact that I've recently become aware that many browsers don't even see the colour ranges we use here).

Sometimes - when you've done lots of colour changes - you'll find when you go back to your page (or even when you look in your browser) that some areas have come up the wrong colour entirely. Something I discovered early on was that the page background (usually behind the "wallpaper") can have a bearing on this (though not always). If everything on your screen comes up black text (and you wanted white), try changing the background colour to something dark. You might find this will do the trick. Whether your text is black or white, it should still come out on the printed page (for which the Internet somehow omits both the background colour and the wallpaper).

When you've got lots of colour changes within your text, there is an annoying tendency for some of it to come up in the wrong colours here and there (usually between one colour change and the next). Even highlighting the text and physically changing it doesn't always work wonders in the browser. I have found the best solution is to choose a similar shade (eg brown in place of black) for the uncooperative text - the brown might "take" where the black won't. Makes your page look a bit "mottled", but still readable and approximately what you wanted.

However you may find yourself amending this every time you go back to your page - usually because you have a prior bit of html coding you don't know about which overwrites what you are trying to put in afterwards.

Like I said, WordPerfect Suite 8 does the html work for you, and sometimes its way of doing this is a little hard to fathom. Later on - when you've learned a little about html - you may be able to go into the WordPad version of the file and ask it to replace all the browns with blacks, for example. For now, I'd stick with the mottled version, if you need to.

TABLES.

In Part 6 I've covered the basics for simple tables. No doubt, like us, you will eventually progress to more complex tables - and there are one or two basic rules which will make your life a whole lot easier.

Firstly, stick with one font - and one font size. Try using File - Document and see if you can establish a Default Font. If not (this option isn't always available though I'm not sure why not), click extreme top of your page and change the font setting there, which should pre-set the whole page. Do the same for the top left cell of your table when you've created it, and highlight the whole table before you put text or figures in it, and do the same thing again. Setting as much as possible in the way of "default font" will save you aeons of time later. Set your font size at the same time.

Secondly - create the maximum number of cells you are likely to need to use, when you first set up the table. If your browser supports the colour and design used in our Site Map (http://www.happychild.org.uk/index4.htm ) have a look at that to see the range of box sizes. It isn't a "perfect table" by any means [lots of different blank-box column-widths which seemed to adjust themselves on the browser, despite it looking very regulated on the page screen] but it's fairly adventurous as mind-map-type site maps go.

You'll find the maximum number of columns you can create is 64. I used the full number for the site map, simply highlighting the number of cells across I needed for any particular "coloured box" and using Table - Join - Cell.

You'll see from the "Table" options (middle of grey line above your screen, when you have your cursor within the table) that you have the option both to "join" and to "split" cells. This is all very well - but if you didn't start with a large number of columns across and you try to "split" individual cells later, this can cause you endless problems elsewhere in your table, as I discovered many times. Try it with a table with text in all the boxes, and you'll see what I mean.

If however you start with a greater number of columns and rows, to allow for the smallest likely cell size, you can simply join those which are tinier than you need.

These are only a couple of brief pointers, but they will make your table building infinitely easier.

GRAPHICS.

Technically, every time you insert a graphic, you should insert "alternate text" (for people without browsers, also to get your message across whilst your graphic is downloading, so your visitors have something to look at). Also this "alternate text" does, I'm told, add some weight to your page when it's being scanned by the robot search engines (alternate text is viewed along with standard text).

So ..... click on your graphic to "select" it and you should get a box on the left which reads "change properties". Type in whatever text you'd like to accompany your graphic in "alternate text".

This comes up not only before your graphic loads, but is also view-able when a visitor's cursor hovers over your graphic (eg when they think about "borrowing" it!). So give some thought to what you might put there.

Incidentally if you have a big graphic and for some reason WordPerfect Suite 8 won't bring up the "change properties" box on the left, you can always temporarily import the "redline" graphic into your page, select that (clicking on this will usually bring up the "change properties" option) then move your cursor to the graphic you actually want (the bar on the left will probably stay in place). You can then put in your alt.img text and remove the redline later if you don't actually need it.

Well, I hope you've found these pages useful. Most of the rest of what you'll need to learn, will happen as you go along - html seems like a foreign language initially but you gradually learn what it all means and then it gets easier to modify your pages.

Final note [last day of the year 2000!] - a couple of items which will be of considerable use to you, a "parting gift" from me. The first is simply to save your auto-responder messages as text files, not html files (so they don't come up as "attachments", which not everyone can read). The second is where to find a (free!) program which allows you to block modify up to 200 pages of html at once (you will find this amazingly useful! - and it works on the html generated by innumerable software packages).

You'll find the free (careware, read the instructions!) block text modification package at http://www.arachnoid.com/arachnophilia/ - for which my endless gratitude to Paul Lutus whose genius designed it and who should be knighted for making such an amazing program free across the world. It's a delight to use as you'll find out if you try it.

Well, there you have it. Everything you need for a 1000-page website and a million visits worldwide (because our pagebuilding guide shows exactly how this was achieved here). Hope you'll enjoy trying all this out for yourselves. A link from your new mega-site to Project HappyChild would [needless to say] be very much appreciated!

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-English Spanish (soon)   Arabic-English worksheets [ other languages in progress ] '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