|Liam Delahunty: Home||Tips||Web||Contact|
Think I deserve a present? See my Amazon Wish List
Liam's guide to stuff.
This docuemnt is older than the hills, and is only here for historical reasons, and to make me chuckle. Frames. Ha ha. See?
This is really an amalgam of several documents and articles I've written and at some point I will rewrite it properly. This date from 1999 or there abouts, the tips directory contains more short pieces and ideas.
This is neither for the fainthearted beginner or the really advanced web designer, this is really for me to record what new thing(s) I've learnt each day, problems I've encountered, and puzzles I've still to solve.
The basic HTML document looks like this;
<HTML> <HEAD> <TITLE>Title of doument</TITLE> </HEAD> <BODY> Generally the bits that you see are placed after the BODY tag, and before the closing... </BODY> </HTML>
The body tag itself often contains the following elements;
This entire web site has been created using just a couple of stylesheets. I can define all the font properties, text, headings, background color, positioning and be able to amend the entire web site by updating one file. Using just HTML I should give each new paragraph or cell a <font> tag and define the colour, size and face, using a stylesheet I can do that for every page in my site and change them all in one swoop if desired. Additionally documents created without all the formatting code are quicker to download, write and debug.
Stylesheets are unfortunately not supported by all browsers, if you want your web pages to work on the oldest browsers you need to carefully plan how you implement the style sheet. The basic rule of thumb as always with internet design is to test your pages on every browser you can.
I.E 3 tried to support style sheets, Netscape 3 didn't, I.E 4 and Netscape 4 both support style sheets, but unfortunately both don't support all the same properties. However the vast majority of useful properties work in roughly the same way on both browsers. As IE 4 seems to be the market leader by about 10% of hits at the moment I think you should design to work best on this browser (while it remains the most popular) and make sure that your site looks okay on the other browsers.
Firstly, I think once you start using style sheets you should make a effort not to use any formatting tags, such as <font> within HTML, and let the HTML code do what it does best - present and link documents.
There are several methods of using style sheets but the most useful is to link to a document wiithin your website as shown in this code example;
Before we get into the style sheet language and syntax itself lets look at how we should write the HTML now.
The first ting to consider is "do you really need any graphics?" This site has mostly been constructed using stylesheets and plain text. There are images on the opening page, (either gifs or a flash movie depending on your broswer), but other than that, no more images. Did you miss them? Probably not, however if you decide that you do require images then the one golden rule is keep the file size small. I use Fireworks to create most of my graphics now. I have found it to make smaller gif files than PhotShop and some of the automated features are quite useful. However as PhotoShop is still the market leader for creating graphics, most of the examples and techniques will be PhotoShop biased. Any Fireworks users out there? Drop me a line and we can start exchanging info, and perhaps will create enough useful information to merit some pages here.
I use the onMouseOut to reset the status bar message.
<a href="link.htm" onMouseOver="window.status='new text in status bar'; return true;" onMouseOut="window.status= ' '; return true;">look in the status bar</a>
Other similar window methods include scrollBy, moveTo,(which moves the window, but then you can't move it back), moveBy, resizeTo, resizeBy. The resizeTo method could be useful, to force a window to be, say, 600 x 400, but there are still problems with users resizing afterwards, or moving the window.
Absolute positioning in HTML.
The logical division tag appears to be one of the fundamental building blocks of DHTML or HTML 4.0 depending on how you look at it and what you read.
Within the DIV tag you can use the following elements;
...and the all important Style attribute, similar to the style sheet definitions you may have already come across, (and may be reviewed later).
The properties of the layer are described using the style attribute in the following manner:
The content of the layer will follow, completed by a closing </DIV> tag. The content can be any thing you'd normally find in a HTML document, text, images, links and tables.
The style properties are obviously the important aspect to layers;
position: relative - absolute visibility: hidden - visible - inherit left: # pixels top: # pixels width: # pixels height: # pixels z-index: #
The left and top are where you want the layer placed in pixels from the top right hand corner of the browser. Width and height are the dimensions of the layer. I will investigate and report further. Z-index is a number that defines what layer is see on top of what, the higher values being on top, and the visibility property can be set to hidden for an invisible layer.
It is also possible to define the font family, size, colour, weight and many other stylistic properties that is to be used though out the division. However these are normally best addressed by a style sheet referring to the divisions class. Strange effects can be achieved using the overflow property and setting the attribute to hidden so that anything that doesn't fit into the 'box' is clipped. Could be useful for dramatic text effects with clipped large fonts... maybe...
The basic layer code is;
Combine layers with images with transparent elements to produce interesting layered effects, or combine several lines of text on top of one another for rich and vibrant typographical designs.
So we need a function that will check the browser name and serve the correct syntax;
A preferred way though is to define global variables that can be used throughout the document. These works out if the Netscape or Microsoft is being used, then simply sets all the relevant parts. To call the hideLayer or showLayer the global variables fill in the details such as document.all or document.layers and if style is needed.
The code is called with the body using the following;
or my preferred method of making something visible on a mouse movement rather than a click, (for some reason have to code with a href="#", but no big probbem)
<a href="#" onMouseOver="showLayer('text4')"> Show me the layer...</a>
But all if that is really just games, the real joy is the absolute positioning that is at long last available to the web designer. Next thing to try is moving layers. Access the style parameter as detailed above, but change top and left to move a division layer.
MailtoThe following line includes the subject with the standard <a href="mailto..."> code. <A HREF="mailto:firstname.lastname@example.org?subject=new email">
Use the ENCTYPE="text/plain" parameter to makes the data from a form easily readable without CGI.<FORM ENCTYPE="text/plain" ACTION="mailto:email@example.com?subject=new email" METHOD="POST"> <INPUT TYPE=TEXT NAME="info"> <INPUT TYPE=SUBMIT> </FORM>
Well I never
Always declare image widths and heights so that the rest of the document will be in the correct place as it downloads. Helps with redraws and therefore loads quicker.
Changing an images width and height attributes from the real ones can significantly slow down scrolling. I had a large 600 x 480 image that I change to 600 x 400 in the HTML and the document became very jerky when scrolling.
Update two frames at once<a href="right.htm" onClick="window.self.location='left.htm'" target="right">Click</A>