Computer screen is a small constrained space.
Divert attention using
The usual minimum graphic resolution is 640 x 480 effective browser resolution of 595 x 295. No matter what you develop for users will have lower and higher resolution screens.
Colours are described using 24-bit RGB values using hexadecimal notation #RRGGBB. However there are only 216 stable between browsers (safe) colours on the Web.
This is something to keep in mind when producing graphic content.
For any colours other than the 216 browser safe colors, computers with different colour palettes or with fewer available colours will convert the original colours of your image to other colours that are available to their computers. This will cause artwork to look different.
Even if graphics are created using browser safe colours, if they are then converted to JPEGs, the original colours may not remain exactly the same. This is because JPEG conversion uses a lossy compression method which throws away some colour information in the interests of maximum compression.
GIFs, on the other hand, offer precise control over colour content.
An image which uses far fewer than 216 colours can be reduced even further by reducing the number of colours, by using Indexed Colour and an Adaptive Palette.
Try downloading Paint Shop Pro (http://www.paintshoppro.com) and experimenting by beginning with 8-bit, and trying progressively fewer colours (128, 64, 32, 16, 8) until you begin to lose colour quality.
A browser safe image with only 7 colours, which was created using 216 colours and had a file size of 6.8k, could be reduced to about 5.8k, a 14% file size savings, by choosing a 7 colour palette in this manner.
The look of text on the page is important, both for readibility and esthetics.
< DIV > ... < /DIV >
Divides the HTML document into a number of sections. Alignment can be applied to these sections.
Nested DIV
Divisions within divisions are allowed. Once the inner section is finished, the outer alignment style is restored.
Aligning Images
Horizontal
< IMG src=... align=left | right >
Vertical
< IMG src=... align=top | middle | bottom >
< IMG src=... hspace=x vspace=y >
x and y are the number of pixels to surround the image. This is used when wrapping text around images (floating images).
Plenty of whitespace and balance between the text and graphics result in an attractive flow of text and images.
Stylesheets can be used for layout and alignment
and applied using < DIV STYLE="..." > or < DIV class="..." > .
Another tag that can be used to apply a style to a defined range is < SPAN > . SPAN does not force a line break after the division so it is used to modify the style of elements smaller than a paragraph, e.g. yellow Strikethrough text for just part of a sentance.
The best solution was to add lots of non-breaking spaces ( ) to the beginning of each paragraph, creating the necessary white space. Style Sheet standard includes the text-indent property. The value of this property is used to shift the first line of text in a pargraph over to the right.
P { text-indent: 0.5in; }
It's better to create indents that are relative to either the font size or the width of the text flow. For the latter, specify the indentation amount as a percentage. The browser will compute the indentation according to the width of the text flow.
To create indents proportional to the font being used, define the indentation in terms of em's. The size of an em is based upon the size of the font, so the indentation amount will scale as the font grows larger or smaller.
Hanging indents, were pretty much impossible. With a hanging indent, the first line of text extends to the left of the paragraph. Create a hanging indent by using a negative value for the text-indent property.
.wrong { text-indent: -3em; }
.hang { text-indent: -3em;
margin-left: 3em; }
CSS Box Properties
(Once they're fully supported by the major browsers) will enable Web developers to position text and images without the use of tables.
A "box" is the area of space an element occupies when displayed by the browser.
At the outer edge of the element box, outside of the borders, are the margins. These are areas of blank space found around the box through which the background is visible.
Inside the margins, between the borders and the element's content, is the padding. The difference between padding and margins (besides where they sit in relation to the borders) is while margins do not take on the element's background, the padding does.
Using CSS, anything can be floated using, the float property. To float an image to the left
<IMG SRC="one.gif" STYLE="float: left;">
In theory anything can be floated headings, tables, even whole paragraphs. Unfortunately, browsers aren't very good about handling floated text just yet.
<STYLE type="text/css">
.fig5 {color: black;
background: olive;
float: right;
width: 8em;
padding: 5px;}
</STYLE>
<P class="fig5">
This is a sidebar past which...</P>
<P>This is the main text of the page...</P>
Stylesheets can be used to give pixel-level control over the location of elements on a page. Positioning uses the following ideas.
P {position: absolute | relative}
Position values can be specified in pixels, inches, centimeters. Negative values can be used. Remember there is no bottom to a Web page.
The normal document structure is one where one element follows another from top to bottom and are displayed in the order which they appear in the HTML text. With absolute positioning the order of the elements does not matter. The browser parameters not the other elements on the page determine where it is placed.
Relative positioning (can be unreliable) displays elements in the order they appear in the HTML text but the designer determines where to put the elements in relation to one another.
Position can also be used to specify depth or layers. The Z-Order allows one element to be behind (in front) of other elements.
P { position: absolute; top: 150px;
left: 0px; z-index: 1; }
Effects
Clipping Layers
The clipping region defines the part of the layer that is visible. Any part of the layer that is outside the clipping region is transparent. It's like cutting a hole in a piece of card and placing this over the layer, only elements under the cut-out section will be visible.
A clipping region is defined with the use of four attributes that make up the shape of a rectangle: top, right, bottom and left. (NN4 and MSIE4 implement these in totally different ways).
NN4 has a clip object for each layer
top, right,
bottom, left
MSIE4, has one clip property: clip for each layer, clip has a string value that represents the four clip values.
clip: rect(top right bottom left)