1. Introduction to Web Authoring
Ellen Cushman
Introduction to Web Authoring
Class mtg. #8
our syllabus
old class page
new class page

2. Today’s Agenda
Pay attention to how your site organizes the content of the page.
where is information located and how?
what file architecture does this suggest?
Peer review on 2/6: 4-5 pages of text, plus your image due in class!!!

3. Objects: Functional, Reusable Chunks of Content
Consider a website as composed of “objects,”
or…
“chunks of text, with associated art, sound, video, etc.– a single unit of meaning with all the necessary components”—Price & Price, Hot Text: Web Writing that Works
It’s the job of the writer/designer to determine where/how these objects are displayed on the screen.

4. Structure to Objects: CSS & Xhtml
I’m referring to Zeldman’s Chapter 7!
Structure to Objects: CSS & Xhtml
Open the site you’re analyzing and view its source. Many of these sites will be using CSS for layout and xhtml for structure.
Here is code that shows a CSS is being used
Here is code that shows Xhtml is being used
<link rel="stylesheet" href="images/BrightSide.css" type="text/css" />
<div id =“header”>
<div id =“submenu”>

5. Structure to Objects: Divs & Grids
In Xhtml, a div is in “W3C’s phrase, ‘a generic mechanism for adding structure.” In the header and submenu divs, these structural elements allow a navigation bar to be placed in the header along with a logo.
* Always give the value’s of your (div) identifier (id) attributes (=) that are semantically meaningful to outside readers (“submenu”); vs names that are meaningful to you (“bluebox”).

6. Grids: Locating Objects in a Display
Page designers use grids to place objects consistently and in some kind of meaningful relationship to one another

7. Grid Problem Return to your site:
Map the basic layout grid the site uses for its main page. Label grid areas with object names.
Return to dreamweaver and using the table code in the next slides to help you, continue developing your parody site using the split screen of code/design.
Post your mockup on your webpage and try to include the parody image!!!

8. Next class
Peer review on 2/6: 4-5 pages of text for your genre analysis, plus your image and grid due in class!!!
Grid and table sample code follows.

9. Tables control displays
<table width=“700” border=“0”>
<tr>
<td> </td>
</tr>
</table>
A simple, one cell table like this one can define the viewable area for a web site screen. More complex tables recreate layout grids and contain the objects for a display.

10. Table attributes, 1 <table border=“1” cellpadding=“4”
cellspacing=“0” width=“700”>
The values for border, cellpadding, & cellspacing here are in pixels. Use the last two to fine-tune the amount of space between grid squares.
It’s helpful to have borders set to “1” when designing so you can see the grid, even if you plan to set them to “0” later.

11. Table Rows <tr bgcolor=“#CCCCCC” align=“left” valign=“top”>
<tr bgcolor=“#FFFFFF” align=“left” valign=“top”>
Table rows are do not contain data in HTML, but they can be given attributes. The example above establishes alternating gray & white rows as you might see in a display of search results.

12. Table Cells <td bgcolor=“red” align=“left” valign=“top”
colspan=“2” rowspan=“2”>
The red cell spans two vertical columns and two horizontal rows.

13. Red Cell Table <table width="300" border="1"> <tr>
<td bgcolor="red" rowspan="2" colspan="2">Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<td>Row 2, Cell 1</td>
<td>Row 3, Cell 1</td>
<td>Row 3, Cell 2</td>
<td>Row 3, Cell 3</td>
</table>

14. Red Cell Table, Nested <table width="300" border="1"> <tr>
<td valign="top">
<table border="1" width="200">
<td bgcolor="red">Table 1, row 1, cell 1<br><br><br><br></td>
</tr>
</table>
<td>t2, r1, c1<br><br></td>
<td>t2, r1, c2<br><br></td>
</td>
<td>
<table border="1" width="100">
<td> t3,r1, c1<br><br></td>
<td>t3,r2, c1<br><br></td>
<td>t3, r3, c1<br><br></td>