Our Collection Of Articles
HTML Formatting
Written By:
Now, you can view your page in an HTML editor and clean up all of the extraneous code or insert your own. Odds are that there will be some fine-tuning to do. I can give you some tricks here as well, to prevent headaches. For instance, don't leave any empty table cells. Instead put either a spacer.gif (1px by 1px transparent gif) or a non-breaking space ( ) because browsers tend to have an easier time with tables if they contain something. Netscape 4x is especially buggy this way.
In the <IMG> tag for the top frame, I set the width="n" to however many pixels "n" should be to fit the screen. This is good for fixed tables, whereas if you want it to scale, it would be better to use the images as the cell's background. Keep in mind, that this too can be buggy with Netscape. In the <TD> tag, you would set background="imagedirectory/filename.jpg" or whatever the directory and filename of the image is. Also remember to put a spacer.gif in the cell.
For this particular page, I made the entire background a single image in a size more suited to higher resolutions so that it doesn't appear to tile (see below - scaled down). You can do this by setting the background of the <BODY> tag to the image name. If you are familiar with CSS, you could add the image to the BODY element of your style sheet as "background-image: url (image.file);" and then giving it a "background: no-repeat fixed;" so that is doesn't repeat as a pattern, and stays fixed when the user scrolls the page, for an interesting effect. (And just forget about Netscape 4x altogether with that one.)
So that's about it. Of course, it will take a lot of trial and error before you find a way of exporting your mockups that you feel comfortable with. I recommend experimenting with a variety of programs and techniques to determine this. It is by far, not the most fun or glamourous aspect of web design. But it is pretty important to learn to do it well and do it quickly, because it is so easy to get stuck trying to make things to fit. This is why plotting it out on paper before starting is important. Sometimes when you run into problems, the better strategy is to start over and save the exported HTML as a different version.
Good luck!
About the Author
Jessica VanDusen is a freelance web developer and graphic designer who owns and operates, Visual Stimulus. She is also a contributing partner in Universal Metropolis, a multimedia events collective that specialises in building web-based business and community tools. You can contact Jessica with your questions or suggestions at jessica@visual-stimulus.com
|