COIN74A - Homework Six


DW Cover


This assignment has several tasks.

Part 1: Tables

  1. 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

  2. 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

    <td width="80%">

    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.

  3. Things to note and think about:

    • What is the Expanded Tables Mode? When would you use it?
    • Border="0". Designing tables with a border equal to zero creates an invisible table when previewed in the browser. While working in DW, the dotted lines to indicate the borders of cells and table take up one pixel each, making the table look slightly larger in DW's document window than in the browser. If you are nesting borderless tables, this may amount to a significant different between your DW docoument window and your file in the browser. You have the option to turn off the table borders in the DW document window by going to the View Menu - View>Visual Aids>Table borders.
    • Printing a Table from the Web. The dimension for a printable web page is 535 pixel width. There is no consistent printing from web pages due to the variety of screen resolutions and printers. You can use the Window Size Menu at the bottom right of the status bar of your document window to ensure that pages which are to be printed, will fit into the 535 px width. You may also have a print button which links to a page that is predominantly text and laid out to fit within the printable pixel window size. See more below in "This Table Won't Print" section.
    • Designing for Accessibilities. As we get more into designing websites for users with accessibilities (a feature of usability), it's important to have Alt Text for images and table headings and the Summary tag for tables, so that screen readers can make sense of the display of material in a table. If your table is used ONLY for layout, make sure to put <empty> in the Alt Tag so the screen reader will skip over the image or table alternative text. If your images are icons only, put <empty> in the Alt Tag so the screen reader will skip over the image icon.
    • 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.
    • You can't copy table data from DW and paste into another spreadsheet or word processing program, but you can Export your table and save the file as a tab-delimited file. Note that when you export a table, the dialog box will ask about Line breaks. Make sure to select the proper Operating System if the file will be used on a system other than yours. For example, I'm on a Mac OS X. If I am exporting a table from my mac to my office, which is Windows based, I will have to select Windows from the Line breaks dropdown menu. Or, I can export the table several times for different destination machines and Operating Systems.
    • You can use a Tracing Image as a background guide to develop your design in DW. Any image in .gif, .jpg, or .png format can be used as a tracing image. The tracing image is not visible in the browser and is used only as a visual guide to lay out images and content in the Document Window.

Table-Friendly Tips

Use the tab key to move from upper left table cell to bottom right table cell.

If you resize a table by dragging the borders, DW will add height and width tags. You can use the PI to remove table height and width but if these attributes have been added to a table row or heading, you may have to go into Code view to find the pixel width and height and remove them manually.

If you don't use spacer images, columns can change size or disappear if they have no content. In other words, if they have &nbsp; instead of content, they may change without a spacer image.

This Page Won't Print

How many times have you printed a webpage only to find that the parts near one or other or both of the margins was not included in the printed copy? Generally, the dimensions for a printable page is 535 pixel width. Colleague Lily Avida has a good resource on her site http://www.eavida.com/ref/print/index.php about printing web pages. Factors that influence the viewable size of your webpage include browser version and flavor (IE 5, IE 6, Safari, Mozilla, Netscape 4.7, Netscape 6.0, etc), size and resolution of your users' monitors. Think about the difference in resolutions of a 160x160 Palm, Web TV, a 21-inch monitor and all the devices in between. If you know your target audience, you can use the Window Size dropdown menu on the right corner of the Status Bar of DW to select an appropriate size for the majority of your users.

window size menu on status bar

You can select from a list of pre-set sizes or create your own size from the Edit Sizes... option on the menu.

Edit Sizes...

How would you resolve a printing issue if I'm recommending that you set your page width to a percentage, yet we know that the maximum width for printing is 535 pixels? Hmmm......

Extend Your Learning: *Optional and Helpful

  1. 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.
  2. 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.

  3. 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

  1. 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.
  2. 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.
  3. 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.
  4. 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

  1. Libraries - Create at least two new library items in the Assets Panel and add them into your website.
  2. 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.

Copyright © 2009 - 2010 Robert D. Cormia - May 4, 2010