NeuralNetWriter Website Creation

The way that web pages are created & displayed for the user is changing. HTML way originally created for the transfer of information. Tags within the file mark the meaning of each piece of text. HTML was extended to provide layout facilities needed to create a web page that would be acceptable to the general public. Different browsers have extended the original HTML specification in different ways, leading to compatibility problems. Views on the web vary about how to layout a web page. I like to have my content centred in the browser window. The only way I originally found to do this was to use tables. You create a table, and specify it's width and ask for it to be centred. That is how this page was created. The new way of doing web page layout is to use Cascading Style Sheets (CSS). This method separates the content from the layout instructions. This allows the layout to be changed easily, for it to affect all the pages on a web site, and even to allow the user to select the style they prefer. For an excellent example of a web page whose appearance can be totally changes by selecting a CCS, see http://www.csszengarden.com/
I'm now going to learn how to use CSS, and change my site accordingly.

Animations

Flipping an animation horizontally (or vertically)
The easiest way is to use GIMP.
Just flip horizontally (it does all the frames automatically) and save it.

IrfanView saves individual frames as .bmp files, which removes transparency, and so ruins many animations, unless you select the transparent option in the save window.

ASP Free Server

Top create a database, FTP the Microsoft database file to the /db folder.
It will something like: costoflivingcalc123.mdb
Go to the database manager and create a DSN for that database. eg cost

In the ASP file, put this code:

var adoConnection = Server.CreateObject("ADODB.Connection");
adoConnection.ConnectionString = "DSN=cost";
adoConnection.Open;
or like this:
var adoConnection = Server.CreateObject("ADODB.Connection");
adoConnection.Open("DSN=cost");

Note: the .asp files go in the 'www' folder (or lower) and the database files in the 'db' folder

Banners

For a chunky banner:
Use 32 point text, graphics wants to be about 53 pixels high.
Flags look better if stretched width-wise. So 140 wide and 53 high (aspect ratio = 2.64)

For a slim banner:
Use 18 point text (Heading 2 size), with height = 25, width = 2.64x25 = 66.

BookMark Icons

HTML Goodies – This explains it
http://www.htmlgoodies.com/tutors/favicon.html

Large icons should be 32x32, small ones 16x16.
The large is for the desktop icon, the small for the address bar.

Examples:

For hosting, some hosts like Angelfire won't allow hot linking. But Yahoo Geocities don't actually stop it. Just upload favicon.zip, and then rename it to favicon.ico. Ican't see that's a problem as they are such small files.

Colours

Blue 7: RGB = 40,0,153 = 280099 hex

Nav Class Colors & Fonts:

Nav Class → Link Color = FFFFFF (was 336699)
Nav Class → Visited Link Color = FFFFFF (was 336699)
Nav Class → Hovering Link Color = FFFFFF (was 336699)

Window colours:

Dark blue banner 48,104,153 = 0x30, 0x68, 0x99
Light blue window background = 217, 235, 255 = 0xD9, 0xEB, 0xFF

Creating Picture Frames

If you want to create a picture frame that will download quickly, this is the technique I have found works well.
The whole picture frame is created on the users screen from just 8 small image files. The corners, and thin strips
of the sides.
This is how I did it, using ArcSoft PhotoImpression, which came free with the Canon camera.
You need a piece of software that can crop a triangular part of an image, and flip & rotate it.

Create a thin strip

Find a bit of image, or create one, that can be repeated to form an attractive strip.
This could be a thin strip of any image. For example a slim strip from a real gold picture frame.
It's easier to start with an image larger than the final result.

Create the top,left,right & bottom version of this strip

Rotate this strip to give the 4 components necessary for the picture frame sides.

Create a long strip of this pattern repeated

Set the background of a table row to this graphics, selecting tiled.
The result should be something like this.

Create the corners

To get the pattern of the corners to match the sides, you need to use the long strip above.
Crop this to form a triangle, with equal sides.
Copy this onto another layer and flip it horizontally and rotate it 90 degrees
You must be very careful to get the horizontal position of the lower left part of the top right corner to match the left strip.
This matters to the pixel, so doing it on a large image which you later reduce helps.
You should now have the top left corner.
Save this, then rotate it 90 degrees, and save each result, for the top right, bottom right & bottom left.

Make the picture frame

By applying a tiled background to the cells of a table, you can now create a picture frame.
You need to set the row height for top and bottom rows and the column width for the first and last column of the table
in order to display the picture frame properly.
The result can look something like this. And to think, the original strip came from a picture of a rather rough looking
gold painted wood frame.

My Gold Frame

Frame Widths

A picture frame 2.67cm wide looks fine on a 1280x1024 display. However, on 1204x768 it looks too wide.
2.67cm = 104 pixels
A picture frame 50 pixels wide/high looks fine.

Display Widths

For those with small screens on 800x600, 20cm just fits - really chunky.
Many seem to use 1024x768, on which 26cm just fits.
I use 1280x1024 on 19” monitors, on which 32cm just fits.

The best fixed width to use is 20cm.
This fits an 800x600 window.
It gives a reasonable margin on 1024x768.
It gives a slightly too big margin on 1280x1024, but looks OK.

Display Heights

For a 800x600 display, 10cm is displayable vertically.
For a 1024x768 display, 14.5cm is displayable vertically.
For a 1280x1024 display, 22cm is displayable vertically.

File Formats for Images

If you want transparency, you can't use .jpg files.
You can use .gif files.

FTP

If you have a web host that accepts FTP uploading, updating your website is much easier.
I've tried various FTP programs, none of which worked. I discovered that the problem was the firewall.
I found that AceFTP 3 (freeware) works fine with a my ZoneAlarm firewall.

Uploading to AngelFire with an FTP program

Use AceFTP
Log in like this:

Host: ftp.angelfire.com
User ID: [/AngelFire Directory/AngelFire Member Name]
Password: [AngelFire Password]
Directory: /

For example:

ftp.angelfire.com
/hi5/neuralnetwriter
mystupidpassword/

To add a counter to a page include this:

A file with the same .cnt will be created. Deleting this will reset the count.

Uploading to Tesco with an AceFTP 3 program

Server: ftp.tesco.net
Port: 21
User ID: If your email address is “fred.bloggs@tesco.net”, then put “fred.bloggs”
Password: The one you login to your account with.

The website address is: http://homepages.tesco.net/fred.bloggs by default

Uploading with MS Internet Explorer

Type ftp://ftp.angelfire.com into the address field.

I haven't succeeded in doing this !

Secure File Transfer with WebDAV

Goto Start.MyComputer
On the left strip, under “Other Places” select “My Network Places”
On the left strip click on “Add a network place”
Follow the wizard
Enter ftp://ftp.angelfire.com
Untick “anonymous login” & leave the username empty

I haven't succeeded in doing this !

HTML

Converting an Open Office HTML page into a Microsoft FrontPage 2002 one

Create a webpage with Microsoft Frontpage, with the standard header things like CSS & Javascript.
Open the old page in Open Office, and copy the HTML body into the body of the new page.
Replace “multiple tabs” with “nothing”
Replace ' CLASS=”western”' with nothing
Replace 'STYLE="margin-left: 2cm"' with nothing, and for all other cm values

The way these two WYSIWYG HTML editors create HTML is different.
To convert a table based page created with OO to a cascading style sheet page with Frontpage you need to do the following:

This is all done in Frontpage.
In the HTML view, replace & with nothing.
This removes the unnecessary paragraphs in the tables.
Also, any other statement, like & 

Add class="tabletext" to the table declaration, so the style sheet can control the appearance of the table with a rule such as:

.tabletext {
   font-size: 110%;
   color: white;
   /* background: rgb(150,0,0); */
   padding-top: 10px;
   padding-left: 5px;
   padding-right: 5px
}

Remove table width statements.
Select each column and set it's width as a percentage of the display width.

Remove ' valign=top'
Remove ''
Remove ' BGCOLOR="#00dcff"' or similar

Differences between OO and Frontpage

When entering a URL longer than the space available in a table cell, it is necessary to hit return at the end of the text, then split the resultant URL to fit. With OO the first line of text forms only part of the URL, the second line the whole URL. Frontpage is in my opinion more sensible. It duplicates the URL for both lines of text.

This means that users must click on the last line of a URL created by OO.

Links

To create a link that opens a new window the HTML needs 'TARGET="_blank"' in the <A HREF...> link.
In OO, ALT click the link which will give the hyperlink pop-up window. Select Frame and select _blank.

Hyperboards Forum Creation

Goto http://www.hyperboards.com
Go through the signup procedure (my sub domain name is neuralnetwriter).
Get your email, which will tell you how to login.
Click on 'profile', then 'modify profile', and set

Password
Display name
Set avatar to superman
Set homepage name and URL & email address
set personal details

Goto admin

Click on 'forum layout' and 'template'
Click on 'create template module' and create:

welcome

Click on 'home page'

Remove 'news' from header modules
Add 'welcome' to header modules and move it to the top

Click on 'skins'

'Add skin' blue
Set the following values:

Description: Steve's blue scheme
Body background colour: 280099
Body text color: FFFFFF (or 606060 for quotes – this needs sorting !)
Body link color:FFFF00
Body visited link color: FFFF00
Body hovering link color FFFF00
Nav class->link color: FFFFFF
Nav class->visited link color: FFFFFF
Nav class-> hovering link color: FFFFFF

Back in 'skins' set blue as the default skin

To prevent Guests posting etc go to admin.membergroups.guests and untick:

Make posts (don't do this if you want a guest book)
Create threads
Optionally, 'view member profiles'

To prevent certain text being posted:

Go to Admin->Smart Censor
It is not case sensitive, so Fred and fred can be changed to joe with one rule.

Click on 'General Settings'

Set the logo for the top box.

By clicking on 'create category' create the categories you want.
By clicking on 'create thread' create the threads within each category that you want.
Delete the 'Welcome' category

Don't use CSS rules to set link colours in the welcome.html file, because it alters all the link colours.
Either set the colour for each link, or use a class for your own links.

?????
http://simpleshout.co.uk/

Bugs

I think the hyperboards forum has the following bugs:

The password access system doesn't work
Creating a new membergroup and setting, for example, access to board private for family only, does work.

Miscellaneous Admin tasks

To remove members go to members while logged in as admin.

If you move a thread, use 'Recount threads' to get the totals right.

My Categories & boards

Steve's Website with Guestbook & Discussion about my website
uk2nz emigration with emergency uk2nz use & general chat
general with general chat
private with family

Controlling Guest Access

See http://support.hyperboards.com/index.cgi?action=display&cat
=support&board=support&thread=1090286369&find=1090379151#1090379151

http://support.hyperboards.com/index.cgi?action=display&cat
=support&board=support&thread=1087805576&find=1087806061#1087806061

It's 'bugged'
http://support.hyperboards.com/index.cgi?action=display&cat
=support&board=bugreport&thread=1090681815

JavaScript

Traversing documents with the DOM

Mozilla based browsers insert 'extra' text elements. So when you use parentNode then lastChild, you'll actually be on the text element, not the node you wanted. To get to the node you want, you must test for nodeType==3, and skip the text if that's what it is.

ie
var lastTd = buttonParentUp1.lastChild;
if (lastTd.nodeType == 3) {
   lastTd = lastTd.previousSibling;
}

ID & NAME

If you do document.getElementById("fred"); IE uses name, Mozilla uses ID.
So in the HTML, use both with the same value.

insertBefore

This method is not so obvious to use. Here are some useful links.

It looks like you need to find the parent of the child you want to insert before.
So, the call looks like this:

newObj = fastherObj.insertBefore(childToBeInsertedObj, childToInsertBeforeObj);

WebReference – JavaScript & the DOM with the insertBefore method.
This explain creating a table in reverse order. Unfortunately it works in IE but not in Mozilla 1.0 ! Which is partly my problem !
http://www.webreference.com/js/column44/insertbefore.html

TBODY

Always put this in, even though it's optional in HTML.
It's implicit the traversing with the DOM, so will save confusion.
A table should look like this:

<table>
   <tbody>
   </tbody>
</table>

Possible Effects

Use real images, and tile them.
Use out of focus images for the background to bring the foreground images forward.
Spiral sections repeated in a column.
Small bits of images, such as skin, jewellery, hair.
Stereoscopic images (two pictures next to each other), or autostereogram background (possibly with 'hidden' text/images).

Referrers

If you want to know from where your visitors are coming, you need to extract the 'referrer' information from the link
the browser uses to get to your site.

The Stephen Downes method

This requires a website host that allows Javascript & CGI and setting file attributes.

Download referrer.js & referrer.txt
Rename referrer.txt to referrer.cgi

Edit referrer.cgi file to specify where your referrer info is stored.
Edit the referrer.js file to specify the full path to the above .cgi file.
Insert a “Script...” to the HTML: of your web page.

Getting Known by Search Engines

Make the <TITLE> tag good and descriptive
Include good keywords

<HEAD>
<TITLE>My Really good site for....</TITLE>
<META NAME="Keywords" CONTENT="keyword1,keyword2">
<META NAME="Description" CONTENT="A really good site for....">
</HEAD>

Where keyword n can be a set of words eg “computer software, computer virus”

Don't bother submitting your site to all the search engines
Find places to put links to your site. Preferably sites well known, and highly rated by Google etc.
Places like guest books, and forums. You may be able to trade links with other webmasters.

Linking Pages

How to link pages (including to sub parts of a page)
http://www.garsonix.co.uk/guides/html/html_5.asp

Resources

DiscoverNZ – Free currency calculator & distance calculator
http://discovernz.co.nz/currency/smlconv.html

Gold Palace
http://www.goldpalace.com/portfolio_web/index_4.htm

Whiteflash – Diamonds
http://www.whiteflash.com/info/testimonials.aspx

Style Switching

This page demonstrates a pull down menu for style switching – neat !
http://spellbound.sourceforge.net/
This is the relavant HTML:

<div id="styleBox" class="center marginTop5" style="display:none;">
        <select title="Switch to an alternate page style" id="styles" size="1"
            onchange="changeStyle(this.options[this.selectedIndex].value); return false;">
          <option value="Default">Default</option>
          <option value="Black">Black</option>
          <option value="Blue">Blue</option>
          <option value="Purple">Purple</option>
        </select>&nbsp;&nbsp;<a
          href="#header" id="backtotop" class="vertmiddle" title="back to top"><img alt="Top"
          src="images/backtotop_15x15.png" width="15px" height="15px" /></a>
      </div>

Website Creation

Page updated: 14 June 2005

Contents List - Click on one or just scroll down

Introduction