COIN74A - Assignment Six

DW Cover

Home
Assignment Six

This assignment has several tasks.

Part 1: Tables

Create this table (with same colors) in standard view 400px wide. Your submission should look EXACTLY LIKE THIS TABLE with the numbers aligned and colored the same. CLONE THIS TABLE. That means your should look EXACTLY LIKE THIS SAMPLE. If you have color blind or vision problems, use these hexidecimal color codes: the green color is #336666 and the grey color is #999999. The light font is white and bold. The dark font is black and regular.

First use the Merge and Split Cells feature to create the rowspans and colspans.

This was my process:
- Insert
  - Table ( 6 columns, 5 rows, 400 pixels width)
  - Merge cells to duplicate colspans and rowspans.
  - Insert numbers 1–22, styling each with appropriate attributes (color, emphasis, justification) according to sample
Create three tables:
- Insert different content in each cell. Make at least one column autostretch.
- Add text data to 3 cells and add a background color to one cell.
- Make a table border of 3 pixels and color the border orange.
- Make one of the tables borderless
Autostretch lets the content of the cell adjust to the user's browser width. This is done by setting the width of the column to a percentage. In the code it looks like this

In CSS: .wid80 { width: 80%; }

In HTML: <td class="wid80">

What do you think is the most appropriate content for an autostretch column? Image, Flash File, Text? Think about this and post your thoughts and why to the forum. Discuss with classmates. Post the URL of the file to the Autostretch Topic in the Homework Forum. View classmates tables.
Things to note and think about:
- What is the Expanded Tables Mode? When would you use it?
- Think about....How would you create an outline border for a table if you didn't want the interior cell borders to be visible? In other words, you only wanted to outline of the table to have a border? Share your suggestions in the discussion area if you have an idea.

Extend Your Learning: *Optional and Helpful

View your tables in both IE and Firefox. Observe Table Background Images, Cell Background Images, Table Borders, etc. as they differ in IE and Firefox. Yes, you need to view in both browsers and report the differences. Notice what happens to the autostrecth and other cells when you change the size of your browser.
Article on nested tables: -- oops! (this link no longer takes you to the article, but does bring you to some interesting tutorials for photoshop and some web design books).
http://www.computerarts.co.uk/tutorials/default.asp?pagetypeid=2&articleid=18059&subsectionid=846&subsubsectionid=761

From a Student: I want to share with you my own personal epiphany I had yesterday. It all centers around a small link Marcia gave us that I did not have the time to explore when we were doing Lesson 5 on tables:
http://www.computerarts.co.uk/tutorials/type/tutorial.asp?id=31863 (this link no longer takes you to the article, but does bring you to some interesting tutorials for photoshop and some web design books).

I have been having a terrible time understanding just why one would want to nest tables, and when to nest them, how to nest them, etc. I searched online a bit, but as we all know, it takes a lot of time to weed through the bad ones to find the gems. This one is a gem, let me assure you. If you are trying to figure out how to lay out your final project in tables, take the time to go through this tutorial.

The very first page is priceless - it's the first time I've seen a visual explanation of nesting (color coded!). Printing that out and staring at it started to help, but taking the tutorial (it's very easy, you download the images files and CSS, and they walk you step by step through the rest) highlighted little nuances of decision-making to me. Granted, this tutorial expects you to have a certain level of understanding about html and DW. But for me, it came along at the perfect time, made perfect sense, and I was then able to go through the mental gymnastics of actually deciding *before* I built my page how I would lay it out. I think that's what the professionals do. ;) Here's a link to my final project shell. I still need to fine-tune it, but look! the navigation bars gracefully stay on the right side of the screen when you resize the window, and all it took was a cute little 1-row, 5 column nested table, right-aligned, inside a larger 1-row, 1-column table (which is only as high as the nav bars). I don't want to tell you how frustrated I was trying to do this in Layout View. Ugh!

I hope this helps someone else out there. Thank you for pointing this wonderful tutorial out to me and thank you Marcia for initially linking it to our homework.
http://www.webstyleguide.com/page/

So then what's this all about:

"I'm excited by how many designers are moving to CSS-driven design, and discovering all its benefits. Increasingly, I see comments online to the effect of, 'I finally got into using CSS and it's is so awesome that I'm never going back to tables. I can't figure out why I ever put up with that kind of designing in the first place.' "
Just how does CSS replace tables in doing layout??? Terry

Hi Terry, "So far in our DW course, we've only used CSS for font styles. CSS is about positioning. It works with layers (AP elements). We will introduce CSS positioning and learn more about layers in lesson 9. Great link - thanks for the resource, Eric Meyer is the king of CSS. If you want a head start, check out his site now and forever! He's on the bleeding edge of web development.

Part 2: Templates

In this assignment you will create a small site using templates. Follow the example used in the tutorial for this week. Make sure to study and practice using that example so that you can work with templates.
In addition you will link your template to a CSS file which will help in creating a constant look and feel, as well as making global / site-wide edits more efficient.
Build a small 3 page website from one or more of the templates. We're looking for basic functionality of the template, not a completed website - so content should be minimal, just enough for us to see proof of concept.
You may optionally submit professional work you have developed that uses a template(s) of your design

Here is an example of a template file that Hyunmi Lee, a fellow student, created.

View the template file.
View the site created from the template. (If this does not render then click HERE)

Part 3: Libraries and Snippets

Libraries - Create at least two new library items in the Assets Panel and add them into your website.
Snippets - Create at least three snippets in your Snippets Panel and then add them to one or more of your website pages. Let me know where you have added it by using a comment in your html code or by describing it. If you don't tell me where it is I will not be able to find it.

Top