The basic idea behind good web design is to partition your
web page into various sections and columns to give it a
professional allure and to make it user friendly.
Creating a template that you can use on all your web
pages to give it a familiar look every time a visitor goes to
a different part of your site.
› A website should be like your home in that you want visitors to
feel welcome and at ease throughout their stay.
› You don't want them completely disoriented and wondering
where they are the minute they decide move around, i.e. move
to another page on your site.
Creating a header section that runs across the top of your
page in order to designate a prominent place for your
website logo, slogan, cool graphic or whatever. The top of
your web page is prime real estate in web design terms
and has the greatest impact on your visitors. You want to
make sure that you use this space wisely.
Creating multiple columns that clearly divide your web
page into various logical sections such as:
› A menu column containing your navigation or a list of links to
other pages on your website. This will help your visitors get
around regardless of what page they are on.
› A main content column (such as that which holds the text you
are currently reading). This column renders the main text and
graphics which define what your web page is about. This should
be kept narrow enough to facilitate easy reading. A computer
screen is typically much wider than a page in a book or a
column in a newspaper or magazine. Lots of text spanning
across the entire screen quickly becomes tiresome to read and
Creating a footer section to hold copyright information
and important links. This helps to create a visual ending to
your web page and can help direct visitors to other
important sections of your website.
A template is a common structure of a web
site that most of your web pages use.
Usually web sites follow a standard structure
› You would have a header, a navigation bar and
a footer that is common to all your pages.
› Imagine that your site has 25 pages. If you need
to make one small change, let's say adding a
new link, you would need to go to each of those
25 pages and change it manually.
› By using a template you only need to change it
in the template and all the pages get updated
Tables are a series of rows (horizontal)
and columns (vertical) that allow you to
organize your website in a clear and
Tables are, in part, an effective way to
design web pages, because they mimic
the design of a newspaper
› A row is a line of horizontal table cells.
› A row may have one cell or many.
› The widths of cells in each row plus any cell spaces must
equal and never exceed the width of the table in which
› Example: if a table is 600 pixels wide, the width of the cells
and cell spaces, when added together, must not exceed
› A row will be as tall as the tallest cell in the row
› A column is a line of vertical table cells.
› A column may have one cell or many.
› A column will be as wide as the widest cell in the column
› Cell padding is space between the cell wall and the
content within the cell
› Cell spacing is the space between cells
› That is when tables are stacked one above the other.
› For instance, you may have a table for the header of your
site, a table for the body, and a table for the footer
› Nested tables are tables within tables.
› This should be used sparingly. Nesting tables beyond two
or three deep generates copious amounts of HTML code,
making the web page slow to load and HTML
troubleshooting very difficult.
What is the best way to set table attributes such as width
› Always set table and cell widths in Dreamweaver's Properties
› Never drag table or cell walls. This can mess up table math.
› It is not necessary to set table or cell heights.
How do I get my page to fill the whole monitor screen and
how do I get my page to shrink and expand with different
› This is what is commonly referred to as liquid design.
› It is achieved by setting table widths with percentages rather
› A table set 100% wide will fill the monitor screen width regardless
of resolution. A table set 90% wide will fill 90% of the width of the
space, etc. This applies to any space wherein a table resides,
whether it be a web page or another table's cell (nesting).
Can I mix pixel widths and percentages for my table's cell
› Yes. This is appropriate when static columns are needed for a
navigation bar, a gutter between columns of text, or various
other applications. Keep in mind that at least one column in the
table must have a width set with percentages. The percentage
widths in each row must add up to equal 100% even if the table
width is set at less than 100%.
How wide can I make my site so it is viewable at all
resolutions with no side-to-side scroll?
› To accommodate 800x600, the design should be approximately
770 pixels wide. Even if you are using liquid design or
percentages for your widths, remember that the content, such
as images, in each row, cannot exceed combined widths of
approximately 770 pixels.
If the monitor resolution is set at 800 pixels wide, why
design at a width of 760?
› We have to allow for the edges of the browser and the scroll bar.
Which are better, liquid or static designs?
› Neither. There are uses for both.
› The first consideration is individual taste.
› Many do not like the appearance of static sites that appear
narrow with lots of page background showing at small
› Another consideration is the amount of content to be placed in
› If the pages will have a small amount of content, they could look
bare and incomplete at small resolutions sitting in tables set at
Why do my tables look different in different browsers?
› Different browsers read code differently.
› This applies to tables, too.
› Be sure to test in at least IE and Firefox, and preferably a third
browser as well.
There are two different types of
hyperlinks that can be in a webpage-
absolute and relative.
An absolute link is a hyperlink that goes
to an outside website or URL (Uniform
Resource Locator) in the same manner
as if you had typed it into the address
A relative link is a hyperlink that links to
another page within your website
Hyperlinks should be clear and concise
The user should know where they are
going when they click on the link
› Links should not be Click Here or Click Me
with no clue as to where they will end up
Be careful when using images as links.
Again, there should be clarity as to what
will happen when the user clicks on it.
If something atypical is going to occur,
let the user know it is going to happen.
There is a third type of link which is the
This type of link is a special case,
completely different to those described in
the previous slide
Instead of linking to a place on the internet,
clicking this link causes the user's computer
to open it's default email program (e.g.
Outlook Express, Eudora, etc) and prepare
a blank email to the specified address.
› The user then enters their message and sends
the email in the normal way.