Introduction to Web Authoring

1. Introduction to Web Authoring Class mtg. #15 Ellen Cushman cushmane@msu.edu www.msu.edu/~cushmane/wra210.htm www.msu.edu/~cushmane/wa2.htm

2. Web Tech UA Schedule Dates of interest for the UA project: • 2/11 - Introduction to assignment #3 & Teams • 2/13 - UA Background & Principles • 2/18 - Semantic Principles of User Assistance • 2/21 - UA Storyboard • 2/25 - UA Walkthrough • 2/27 - Workshop Dreamweaver: CSS • 3/3-3/5 - Spring Break • 03/10 –Workshop:Dreamweaver CSS • 03/12– Workshop:User Feedback & Revision Plans • 03/17 – Final Versions Posted

3. Today’s Agenda | Next Class • Refresher on CSS • Apply a template to team’s site • Develop site architecture for team site • Troubleshoot problems • Add content to your template • Workshop • Post your project logs Peer review workshop of sites Develop a revision plan and set of homework assignments for your group Homework: final site due by 3/17

4. Last Class: what did it mean?! • Before we left for spring break, we applied a style sheet to our personal sites. • We learned: that CSS elements need to be identified in the style sheet, then called upon in our pp page html code • We also learned that the previous style hierarchy trumped our new code. Sometimes we had to completely revise our pages, starting with a new one, to avoid hunting for our outmoded inline and embedded code.

5. CSS will make your old HTML look uhhhhgly! CSS references objects – in most cases, chunks of text, columns, menus, or images enclosed by tags – so you must define as an object any text that you want to reference in a style sheet. This means: You have to identify the tags you want from your css, then write these into your html page. Remember to open and close those tags!

6. CSS will make your old HTML look uhhhhgly, 2 It also means… • You define object Classes, ID’s and learn their properties and value ranges • You learn to use wildcard tags like <div> and <span> to define sub-sections of text within the body of a document • You have to get good at designing documents before hand…thinking ahead about how the page will look and work, and that will help both content developers and readers of your UA sites!!!

7. CSS Classes…naming objects In CSS, a class refers to a particular category of a more general tag. Let’s say that in the CSS sheet you’ve downloaded, you find code that allows you to label odd and even table cells to be different colors for easier scanning… In your css style sheet, that would be written thusly: TD {font-face : sans-serif; font-size : 12pt} .even {bgcolor : #FFFFFF} .odd {bgcolor : #CCCCCC} Let’s say that I wanted my UA site to have three columns, in my CSS sheet I will look for the semantic structure that identifies those columns: /* sidebar */ #sidebar { float: left; width: 23%; margin: 0; padding: 0; display: inline; }… /* rightbar */ #rightbar { float: right; width: 23%; padding: 0; margin:0; }

8. CSS Classes…naming objects Now that I’ve identified the class or element in my css that I want in my htm document, I simply call forth that element (sidebar, table cell odd/even, or rightbar, etc)— the class or element will name the style!

9. CSS Classes…cont. TD {font-face : sans-serif; font-size : 12pt} .even {background-color : #FFFFFF} .odd {background-color : #CCCCCC} In your HTML code for the table, you simply reference the class to invoke the style: <td class=“even”>display this text with a white background</td> <td class=“odd”>and this text with a grey background</td>

10. Getting more specific…ID’s You can set ID’s for specific kinds of objects too by giving them a unique ID name and set of display rules. Let’s say, for example, we want a table row that serves as a column header… it could be different than our odd or even classes of rows and even different from our default row look.

11. An ID rule Here, I have added a new ID to our TR rules in our CSS style sheet. Now, I can specify a row as a header in my htm document: <tr id=“header”>Red, sans-serif, 12pt type on a white background, por favor</tr> TR {font-face : sans-serif; font-size : 12pt} .even {background-color : #FFFFFF} .odd {background-color : #CCCCCC} #header {color : red}

12. <DIV> & <SPAN> are your friends <div> and <span> tags allow you define exceptions to the general rules of your body text…and they are helpful tools for document designers and web developers <div> is usually used to designate styles for block elements that should stand apart from the body text…like callout quotes. Everything inside a <div> tag takes on the <div> attributes…and you can specify classes and ids for <div> too!

13. More on <SPAN> The <span> tag is usually used to change the display attributes of a short run of text or objects within a block-level element (such as a paragraph or table cell). I might use <span>, for example, to define a look for code examples (like the one below) that is different than the body text… <span class=“example”>TR {font-face : sans-serif; font size : 12pt}</span> “But I do not like green eggs and <span>, <SAM> I am”

14. Seeing a document as a collection of objects… All of these tags, attributes, rules, selectors, declarations…what do they mean? They are all tools you use well ONLY if you can see a document as a collection of objects…so, let’s practice.

15. Objects in your UA sites Get with your group and on notebook paper, draw the objects you want in your UA site by considering: • What page layout will govern the whole site? (1,2,3, etc columns; header; footer; navigation bars, images???) • Where will content be located? • Identify the classes and elements from your CSS sheet that allow you to do this!

16. Objects in your UA sites Now that you have a web page design in mind or on paper: • Develop wire frame designs in separate html files (Into.htm, step 1. htm, step 2.htm, etc.) • Save these files on jump drives and share them with your team members who will use them to plug content into them. OR • Designate one web space manager and give content to that manager to plug in.

17. Homework Make sure your site is developed by the middle of next class for peer review! If your team has one content developer, the rest of you should work on your personal pages to add elements and classes from your css to your htm.