Introduction to Web Authoring Ellen Cushman cushmane@msu.edu Introduction to Web Authoring Class mtg. #14 www.msu.edu/~cushmane/wra210.htm www.msu.edu/~cushmane/wa2.htm
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
Today’s Agenda | Next Class Download a template for your personal site Apply the template Troubleshoot problems and adapt content to your template Post your project logs More fun with CSS & your UA sites Develop the site architecture and import content.
Recall: What is CSS? Multiple styles can be defined and used in individual HTML documents and across multiple HTML documents (fonts, spacing/placement, colors) Browser follows an order of interpretation (aka, a cascade) of the style definitions 3 W3C CSS standards (CSS1 and CSS2 are current; CSS3 in development)
Style hierarchy Style sheets work together in a cascading manner Inline (Controls style on an element basis in the <body> of htm) trumps embedded and linked Embedded (controls style in the <head> of htm) trumps linked So use linked for global, generic types of things and keep to a minimum
Page.html page.css In most cases, you will have two documents controlling how a page looks on the screen. One html file and one css file. Browser: Rendered View
Linked style Linked style uses same syntax as embedded style but is in a separate .css file that you link to from the HTML file requesting the style Controls style more globally, spanning documents or an entire Web site
Saving Linked files Note the folder/file architecture of the stylesheet you’ve downloaded. Save the image folder to your Web on afs/p drive space. Make sure it has images and the .css file in it. Do NOT put the index. Html into your afs folder!!!! You will overwrite all your other index pages.
Linked style 2 Open Dreamweaver>your personal page> recall the name/location the stylesheet you’ve downloaded>insert its name into the head in the code of your personal page. HTML file using the linked style uses <link> tag within the <head> tag to link to it <html><head> <link rel="stylesheet" type="text/css" href="linked_style.css"> </head>
Linked style 3 In Dreamweaver>open the css sheet in a new window Here’s the style definition in the linked_style.css file h1 { font-family: Arial,sans-serif; font-size: 48pt; font-weight: bold } Find other style codes using what you know about semantic structure
Remember all code has to be enclosed! CSS Syntax CSS rules have the following structure: selector {property1 : value; property2 : value} P {font-family : sans-serif; font size : 9} With this rule applied, everything enclosed by a <p></p> tag will display in sans-serif, 9pt.
CSS will make your old HTML look uhhhhgly! CSS references objects – in most cases, chunks of text 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 close those <p> tags
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…thinking ahead what will help both content developers and readers
CSS Classes…naming objects In CSS, a class refers to a particular category of a more general tag. Let’ say you wanted odd and even table cells to be different colors for easier scanning… In your css style sheet you would define the following code for table cells: TD {font-face : sans-serif; font-size : 12pt} .even {bgcolor : #FFFFFF} .odd {bgcolor : #CCCCCC}
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>
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.
An ID rule TR {font-face : sans-serif; font-size : 12pt} Here, I have added a new ID to our TR rules Now, I can specify a row as a header: <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}
<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!
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>
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.
For Homework apply the CSS to your personal page adapt the color scheme, images, and organization of the css style sheet to suit your tastes in your personal log: explain what you have changed and how.