Turn off your iPad. It is not to be used (in any way) in this classroom, either for academic or recreational use (unless approved by the instructor). Ignoring this will result in detention and further disciplinary action (Gross Misconduct/Refusal to comply). Did you remember to put your assignments in a folder? Did you label the folder after the assignment title? Did you save your file in the appropriate manner? If not: NO GRADE! Check your PowerSchool frequently. It's your RESPONSIBILITY!

 

(Due Date: March 5)

Website Design (Part III): Building the HTML Layout

(Insert, Tables, Rows, Columns, Cells, Labels and Nesting)

If we were to take all of our images and try to place them in (from the images folder) to our webpage, it would be total chaos. Nothing will work, and images will be placed improperly on the page. Unfortunately, HTML does not work like Adobe Illustrator or Photoshop. You cannot simply click and drag things where you want or where you think they would look nice. Webpage layout requires the use of Tables to reassemble our images into a working model that resembles the version that we drafted in Photoshop. Hence the need to slice them up.

Double click on “design.html

 

This is your first webpage – with absolutely nothing on it: blank, white, lifeless…

The left-hand column is the code-view of the website. The right-hand column is the design view. Whatever happens on one column will happen on the other. This allows designers/developers to either design by typing code or by using a more graphical means to arrange content on their site.

We will be focusing on the design view (the right-hand column)

We also need to focus on the bottom panel/palette known as “Properties.” In Dreamweaver, this is probably most used window aside from the File, Styles, and Behavior window that we will be exploring later on.

What is important to note is that the Properties panel will change depending on what is selected on your webpage. If an image is selected, the Properties panel will display attributes that pertain to width, height, and other image properties. If text is selected, the Properties panel will display attributes like font size, style, family, etc. The same is true for Tables. So, the Properties never (ever, ever) displays only one thing. It all depends on what is selected on your page.

Items from your File panel are subject to “drag and drop” practices, meaning that you can drag from the panel and drop them into your webpage. If you drag an image from the “images” folder, it will place your image onto your page. Of course, getting the image to be exactly where you want it to be is another matter.

For that, we need a Table.

  1. On the menu bar, select “Insert”
  2. Select “Table” from the drop down menu
  3. This window will display: 
  4. Use the settings above to create your table. The inserted table will appear like this:

There is a reason why we created a single column (up/down) table with five rows (left/right). Looking at our Photoshop design, there are five rows worth of layout with a single column. 

  1. In the first row of your table, click on the white area (the inside of this table area is known as a “Cell”)
  2. Select “Insert” from the menu bar at the top of Dreamweaver.
  3. Select “Image”
  4. Navigate to your “images” folder
  5. Select “my_logo”
  6. Click “Enter”
  7. On the “Image Tag Accessibility” box, type “my_logo” in the “Alternate Text” box
  8. Click “Ok”

The logo will appear in the first row (cell) of our table

 

Repeat this process for the blue bar near the bottom. The “blue_separator_bar” needs to be inserted in the fourth row (cell).

In the second row (cell), we will insert a table inside this row. This is known as “nesting.”

 

  1. Click on the second row
  2. Select Insert from the menu bar
  3. Select Table
    1. Row: 1
    2. Column 6
    3. Table Width: 100 percent
    4. Summary: Navigator Bar
  4. Select the table you inserted
  5. On the Properties panel, select the white box under “Table” and type in “navigator_bar”

 

Our page should now appear like this:

We are now ready to insert our buttons that we created in Photoshop.

We have seen that it is easy to insert images by selecting “Insert” from the menu bar and then selecting Image, navigating to our images folder, and then choosing what images we want. There is another method which was mentioned before: drag and drop.

  1. Make sure your Files panel is displayed
  2. Double click on the “images” folder to display its contents
  3. Click on the first cell in our “navigator_bar” table
  4. Click and drag the “left_spacer” from the “images” folder in the Files window to the first cell in the “navigator_bar” table.
  5. Title it as “left_spacer”
  6. Repeat this process for all the other buttons.

Notice that will see the cells shift and redistribute the amount of available white space between them.

This is normal. By adding in our last spacer, it will cause the cells to compress and the bar will appear as one long blue bar. The reason the bar concedes to a single blue bar is because in Photoshop we dictated that the overall site width was going to be 1152 pixels. When we built the first table for this site, we dictated 1152 pixels as well. The total overall length, between all these individual images, lined up from side to side, is only 1152 pixels – a perfect fit.

Now, we need to be able to identify our buttons. Graphically, they say “Home,” “About Me,” “My Favorite Games,” and “My Favorite Sites.” But, Dreamweaver needs a better, more efficient manner of identification. So, on the Properties box, this is where we do this:

  1. Click on a button
  2. Select the blank “ID” box on the Properties panel
  3. Type in the same name as the image’s name: (for this example: “home_button”)

Repeat this process for the remaining three buttons