Designs Freebies How-To

Guide to Creating Quick and Dirty Web Pages

6-Step Guide to Creating Quick and Dirty Web Pages on the Fly

Most hardcore designers are going to hate me for this post, but sometimes you just need something that looks decent and isn’t too complicated to make. It is horrible for SEO and other purposes, but in many cases you can get away without having to mess around with tags or any other fancy tags/CSS when you don’t really care about SEO (such as for PPC landing pages).

If you are a lazy web designer, tables are a godsend. You can easily throw together some web pages in a few minutes with some basic inline CSS.

  1.  To get started, go to http://www.somacon.com/p141.php, a website that lets you play with your table design. With it, you can generate CSS code that will style your table borders, styles, fonts, background colors, etc. Then, copy and paste the CSS into the part of your html document.
  2. To make sure that your web page looks it’s best, add an align=”center” attribute to the table so that it does not end up being on the left side of the screen. This is confusing for people, as their eyes naturally go to the center.
  3. From there, you can also add a “width” attribute, and adjust the value of the attribute to your liking. For best results, specify the size of the width attribute as a percent so that the size of the table will adjust to the size of the screen. I typically use 75% for the width of the table so that there is plenty of whitespace on the sides of the screen, and this gives the table a nice, clean look.
  4. To create a header for your HTML page, you can simply add a row to the table with two tags in it. You can then add an tag to the leftmost for a logo, and a tag for the header’s text.
  5. If this is a website with multiple pages, you can add a menu underneath the header with some text links ( tags).
  6. Underneath this, add another row for content. Create a tag and fill it up with text. Depending on how it looks on the screen, you may want to play with adding extra tags to help the content seem more centered.

Bonus Tips:

[ad name=”bnr-middle-post”]
  1. If you want a footer, you can add another row below that content and put whatever links or text you want in that row.
  2. The easiest way to style any of these elements is through inline CSS, so just add your code to whatever, with a style=”” attribute.
  3. If you are having problems with rendering the page, you can also create separate table tags for each block of content on your page, and “nest” those tags under one table tag.

This isn’t intended to give you perfect results, but you can experiment with these steps to get what you want from your project!

Enhanced by Zemanta

About the author

Husnain Naz

Naaz is a web designer and loves to find new tips and tricks for creativity purposes and likes to share them with the people.

Leave a Comment