1 / 14

Introduction to Web Authoring

Understand how websites are composed of functional objects, grasp CSS and XHTML for layout, learn grid placement, use tables for display control, code structurally meaningful designs.

mhathaway
Download Presentation

Introduction to Web Authoring

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Ellen Cushman cushmane@msu.edu Introduction toWeb Authoring Class mtg. #8 www.msu.edu/~cushmane/wra210.htm our syllabus www.msu.edu/~cushmane/wa.htm old class page www.msu.edu/~cushmane/wa2.htm 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. I’m referring to Zeldman’s Chapter 7! Structure to Objects: CSS & Xhtml <div id =“header”> <div id =“submenu”> 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" />

  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>&nbsp;</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> <tr> <td>Row 2, Cell 1</td> </tr> <tr> <td>Row 3, Cell 1</td> <td>Row 3, Cell 2</td> <td>Row 3, Cell 3</td> </tr> </table>

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

More Related