zzz | HW1 | HW2 | HW3 | HW4 | HW5 | HW6 | KQ | HW7 | CR | HW8 | HW9 | HW10 | HW11 | HW12 | final | hw

Index Page Page 1 Page 2 Page 3 Page 4 Page 5 Page 6 Homework

Martha's COIN 74 - Homework 5
For a description of this assignment, please see: assignment05.
As I went through the online text, I did some of the exercises. HERE is a link to those exercises.

HW 5 Requirements

Homework 5 Additions to your Practice Site

  1.  Create this table (with same colors) in standard view 400px wide. (Martha's table is HERE.)   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.

    sample table


    Link this table as an .html page called table_sunset.html to and from your homework site - in other words a link to this page from your site and a link from this page back to your site.
    Include text on this page describing the process you used to create this table AND list in detail the attribute you changed in the Sunset Format to achieve the table above.
  2. When you design your table in Layout View and add an Autostretch Column, what do you think is the most appropriate content for that column? Image, Flash File, Text?  Think about this and post your thoughts and why to the forum.  Discuss with classmates.  Create 3 tables and insert different content in each of the Autostretch Column for that table.  Post the URL of the file to the Autostretch Topic in the Homework Forum.  View classmates tables. Autostretch lets the content of the cell adjust to the user's browser width.
    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.
    Add these layout tables to the table_sunset.html page by copying the table and pasting below the sunset table.
  3. At the top of the page, add 2 links: one to the sunset table and one to the layout tables.
    Add Named Anchors at the top of each of the tables. Sunset and Layout
  4. What is the Expanded button on the Layout Group of the Insert Bar?
  5. 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.
  6. 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.
  7. 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, 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.
  8. 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?  Post your suggestions to the appropriate Forum Post if you have an idea.
  9. 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.
  10. 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.

Upload your revised site with table additions to your UNIX server space and submit the URL to the Assignment 5 Table link in Etudes. Your modified sunset table submission should look exactly like mine above - same colors, etc.



Page Finalized 10/27/06    Assignment Submitted xx/xx/06
Document Last Modified:
© mjraup 2006
Webmaster