Unit 4 - Tables

Unit 4 is an exploration of HTML Tables in Dreamweaver.

Kitchen 1 is a web-page that is based on a visual design that was replicated using tables. This was a good chance to play around with the table functionality in Dreamweaver. Adding a background color to cell was easy, all that needed to be done was to click on the cell and the either type the hexadecimal color code on the box next to "Bg" or click on the drop down arrow next to "Bg" and pick a color from the color selector. The colors used were a medium gray for the navigation cell and #f2f0d9 to match the background of the "Kitchen Designs" logo.

It was also very easy to resize columns. It works just like Microsoft Excel. Select the border, click and drag to get the new size on the column or row.

Kitchen 2 is a redo of the the Kitchen 1 web-page only instead of being table based, it was created using <DIV> tags and CSS. This seemed like a better way to build the page because the tables in the other kitchen page had a number of blank rows or columns for the sole purpose of adding blank space to the page. It is much easier to do this in CSS using the box model and applying proper padding and margins.

EUROVISION is a table based web-page containing one large table with information about the countries, songs and artists in this years Eurovision song contest. The <iframe> HTML tag was used to include each youtube video. The original design for this site had one column for the flag, country, song title, artist, review and video, but the display was awful. The height of the columns was too large with some of the data comprising a single line of text and some being a hug block of it. The "merge cells" function was used to merge the flag and country name. The song title and artist were also merged so this data took up far less room across the page.

The videos were resized by adding CSS in the style section to force the videos to all be of identical size. Because the width of the video was always set to 336 pixels, I used absolute pixel-based for setting the width of all the columns. This allowed for an extra column to be added by selecting a column, right clicking on the mouse and selecting "table-->insert column" I was then able to add the STARS column which contains a GIF that was created in Fireworks that can be added multiple times for a song's ranking from 1 to 5 stars.

Finally, something I learned too late was it it easy to add a class to an entire column by simply selecting the column and the adding the class in the class name field in the HTML section of Dreamweaver. For the review section, I went into each "p" tag and manually add class="review" so that I could add special styling just to this column.