COIN 74 - Assignment Five
SOURCE: Robert Cormia's Foothill College online text, Fall 2006
This assignment has several tasks.
Homework 5 Additions to your Practice Site
- 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.
Then use the Commands>Format Table feature and change the attributes of the AltRows:Sunset Format to create the table format above.
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.
- 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.
- 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.
- What is the Expanded button on the Layout Group of the Insert Bar?
- 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, 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? Post your suggestions to the appropriate Forum Post 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.
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.
Use the tab key to move from upper left table cell to bottom right table cell.
If you resize a able 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 instead of content, they may change without a spacer image.
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.
You can select from a list of pre-set sizes or create your own size from the Edit Sizes... option on the menu.
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 Netscape. Observe Table Background Images, Cell Background Images, Table Borders, etc. as they differ in IE and Netscape. 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:
http://www.uiconf.com/7west/meyer_interview.htm
which includes the quote - "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-P is about positioning. It works with layers. It's not necessarily browser compatible which is why not everyone uses it, but one of the strengths of DW MX2004 is its rich support for CSS. We will introduce CSS-P and learn more about layers in lesson 10. 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. ~Marcia