Deciding on a layout for a web site


Aim: How do we create multiple web page layouts for prototypes in Dreamweaver?
Objective: Create a series of different web page layouts using tables and Dreamweaver

Description:
  1. Look up and read the definition of a prototype. Prototypes are used to develop web sites. When a client asks for a site and gives you a rough idea of what they want, the web site developer creates a prototype for the client to look at. At that point in time, the client will decide what they do and don't like. The developer makes the appropriate changes and keeps showing the modified prototype until the client is happy. Once the client is happy with the layout and appearance, also know as the "look and feel", then the developer can start to fill in the content.
  2. In this exercise you will be creating 5 different web page layouts. These are very BASIC examples prototypes. They only address the layout of the site and not so much the color and font face and size.
  3. You don;t need to define a site, just save them in your last project's folder. Your last project should be your MyStie project.

ASSIGNMENT - CREATE 5 WEB PAGE LAYOUTS USING TABLES:
Table 1 - Instructions:
  1. Open Dreamweaver
  2. Open a new blank HTML page. If you don't have one, go to FILE-->NEW --> HTML page
  3. Create the following layout using a table in Dreamweaver.
    1. Look at the image below & determine the number of rows and columns and create this layout using a table in Dreamweaver:
    2. Insert --> table
    3. 1 row & 2 columns (remember rows are horizontal & columns: vertical....they hold up the front porch)
    4. Width = 900 pixels, cell padding = 10, cell spacing = 0
    5. OK or DONE
  4. If the table doesn't look right, delete the table and re-create it.
  5. Fill the cells with color as shown so it looks similar
  6. Label the cells - put the same red text that you see below in your appropriate table cell to identify what will go there. Note: cells on a web page layout are also know as "containers".
  7. Save As: Table 1
two_column_layout.png

Table 2 - Instructions:
  1. Open a new blank HTML page. If you don't have one, go to FILE-->NEW --> HTML page
  2. Create the following layout using a table in Dreamweaver.
    1. Look at the image below & determine the number of rows and columns and create this layout using a table in Dreamweaver:
    2. Insert --> table
    3. 2 rows & 2 columns
    4. Width = 900 pixels, cell padding = 10, cell spacing = 0
    5. OK or DONE
  3. Now you have to merge the 2 cells in the first row to make 1 large cell. Select them both by mousing over them, RIGHT CLICK and select Merge Cells
  4. Fill the cells with color as shown so it looks similar
  5. Label the cells - put the same red text that you see below in your appropriate table cell to identify what will go there. Note: cells on a web page layout are also know as "containers".
  6. Save As: Table 2
two_column_layout_with_header.png


Table 3 - Instructions:
  1. Open a new blank HTML page. If you don't have one, go to FILE-->NEW --> HTML page
  2. Create the following layout using a table in Dreamweaver.
    1. Look at the image below & determine the number of rows and columns and create this layout using a table in Dreamweaver:
    2. Insert --> table
    3. If you notice, this layout is the same as Table 2 above but has and extra row for the footer. You should be able to figure out how many rows and columns at this point of the exercises
    4. Width = 900 pixels, cell padding = 10, cell spacing = 0
    5. OK or DONE
  3. You will be merging all the cells in the first and last rows to make 1 large cell instead of 2 smaller cells.
  4. Fill the cells with color as shown so it looks similar
  5. Label the cells - put the same red text that you see below in your appropriate table cell to identify what will go there. Note: cells on a web page layout are also know as "containers".
  6. Save As: Table 3
two_column_with_header_and_footer.png


Table 4 - Instructions:
  1. Open a new blank HTML page. If you don't have one, go to FILE-->NEW --> HTML page
  2. Create the following layout using a table in Dreamweaver.
    1. Look at the image below & determine the number of rows and columns and create this layout using a table in Dreamweaver:
    2. Insert --> table
    3. At this point, you should be able to figure out how many rows & columns to make.
    4. Width = 900 pixels, cell padding = 10, cell spacing = 0
    5. OK or DONE
  3. Figure out which cells to merge. If you get it wrong, just delete the entire table and start again.
  4. Fill the cells with color as shown so it looks similar
  5. Label the cells - put the same red text that you see below in your appropriate table cell to identify what will go there. Note: cells on a web page layout are also know as "containers".
  6. Save As: Table 4
two_column_with_header_footer_nav_bar.png

Table 5 - Instructions:
  1. Open a new blank HTML page. If you don't have one, go to FILE-->NEW --> HTML page
  2. Create the following layout using a table in Dreamweaver.
    1. Look at the image below & determine the number of rows and columns and create this layout using a table in Dreamweaver:
    2. Insert --> table
    3. At this point, you should be able to figure out how many rows & columns to make.
    4. Width = 900 pixels, cell padding = 10, cell spacing = 0
    5. OK or DONE
  3. Figure out which cells to merge. If you get it wrong, just delete the entire table and start again.
  4. Label the cells - put the same red text that you see below in your appropriate table cell to identify what will go there. Note: cells on a web page layout are also know as "containers".
  5. Save As: Table 5
three_column.png