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

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!!!

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.

Structure to Objects: CSS & Xhtml I’m referring to Zeldman’s Chapter 7! 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 Xhtml is being used Here is code that shows a CSS is being used

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”).

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

Grid Problem 1.Return to your site: 2.Map the basic layout grid the site uses for its main page. Label grid areas with object names. 3.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. 4.Post your mockup on your webpage and try to include the parody image!!!

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.

Tables control displays 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.

Table attributes, 1 <table border=“1” cellpadding=“4” cellspacing=“0” width=“700”> 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. The values for border, cellpadding, & cellspacing here are in pixels. Use the last two to fine-tune the amount of space between grid squares.

Table Rows 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.

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

Red Cell Table Row 1, Cell 1 Row 1, Cell 2 Row 2, Cell 1 Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3

Red Cell Table, Nested Table 1, row 1, cell 1 t2, r1, c1 t2, r1, c2 t3,r1, c1 t3,r2, c1 t3, r3, c1