Docstoc

Graphic Web Design

Document Sample
Graphic Web Design Powered By Docstoc
					 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
       comprehend.
   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
      automatically.
 Tables are a series of rows (horizontal)
  and columns (vertical) that allow you to
  organize your website in a clear and
  coherent manner.
 Tables are, in part, an effective way to
  design web pages, because they mimic
  the design of a newspaper
   Rows
    › 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
      they reside.
    › Example: if a table is 600 pixels wide, the width of the cells
      and cell spaces, when added together, must not exceed
      600 pixels.
    › A row will be as tall as the tallest cell in the row
   Columns
    › 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
    › Cell padding is space between the cell wall and the
      content within the cell
   Cell Spacing
    › Cell spacing is the space between cells
   Table Stacking
    › 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
    › 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
    and height?
    › Always set table and cell widths in Dreamweaver's Properties
      Inspector.
    › 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
    resolutions?
    › This is what is commonly referred to as liquid design.
    › It is achieved by setting table widths with percentages rather
      than pixels.
    › 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
    widths?
    › 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
      resolutions.
    › Another consideration is the amount of content to be placed in
      a website.
    › If the pages will have a small amount of content, they could look
      bare and incomplete at small resolutions sitting in tables set at
      100%.
   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
  bar.
 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
  mailto link
 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.

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:4
posted:7/1/2012
language:
pages:15