Download presentation
Presentation is loading. Please wait.
1
Session #4 Cascading Style Sheets February 23, 2004
B118 Web Programming Session #4 Cascading Style Sheets February 23, 2004
2
Tonight’s Agenda Campus event announcements
Website review grading scheme Tips on preparing for the midterm XHTML examples & discussion Tables (colspan & rowspan) Validation Anything else? Look at CSS examples Chapters 5 & 6 quiz next week !!!
3
Tonight’s Agenda Website review grading scheme Follow-up on XHTML
Look at CSS examples Quiz on Chapter 4 Chapters 5 & 6 quiz next week !!!
4
Due Tonight XHTML Resume Project team roster
Help wanted / positions available Infrastructure team?
5
Website Review Grading Scheme
Points 15 “Perfect” exec summary, criteria analysis (including 2 benefits/speculation per criteria), grammar & appearance 14 One minor flaw (usually grammar) 13 (incomplete exec summary + a minor flaw) or (2 minor flaws) 12 Weak criteria analysis 11 Missing benefits/speculation in most criteria evaluations or significant flaws in several areas
6
Website Review – Common Misconceptions
Navigation pages and whole sites should show gradients of complexity
7
Follow-up on XHTML XHTML examples & discussion
Tables (colspan & rowspan) Validation Anything else? Any questions on lecture or midterm prep exercises?
8
General Form of a CSS <style type="text/css">
element { property: value } element.class { property: value; property: value } element:pseudoclass { property: value } element1, element2 { property: value } element child-element { property: value } </style>
9
CSS examples: font color
<html> <head> <style type="text/css"> .blue-text {color: blue} </style> </head> <body> <p>This is regular color text. </p> <p class=blue-text>This is colored text. </p> <p>Back to normal color.</p> <p class=“blue-text”>Color. </p> </body> </html> Additional example: css-text.htm
10
CSS examples: table width & font settings
Instead of <table width=“600”>: Define standards for H1 & H2 Example: Jason’s resume <!-- use inline style declaration --> <div style=“width:600px"> </div> <style type="text/css"> h1 { font-family:"times"} h2 { font-family:"arial"; font-style:"oblique"} </style>
11
CSS examples: positioning & layers
top, left, position to define object positioning z-index to define layers higher value layers sit on top of lower value layers Examples: layer.htm & layer2.htm <table style ="top: 0px; left:0px; z-index:1"> <tr> <td> </td> </table>
12
Midterm Prep Exercise 6.8 Exercise 6.8: Write an XHTML document that shows the results of a color survey. The document should contain a form with radio buttons that allows users to vote for their favorite color. One of the colors should be selected as a default. The document should also contain a table showing various colors and the corresponding percentage of votes for each color. (Each row should be displayed in the color to which it is referring.) Use attributes to format width, border and cell spacing for the table. You don't need to make the Submit and Clear buttons do anything if they're clicked.
13
Screen Shot
14
Tips & Notes Based on layer.htm with radio button & forms added
See end of Chapter 5 for details on XHTML forms Use <form method = "post" action = ""> to create submit and clear buttons
15
Tips & Notes (cont’d) Radio buttons
Need common name to group buttons together Value attribute used to set property if selected Use checked attribute to set default radio button Surround radio button tag with <label> to distinguish this type text from the other text elements Define style to align label text (text-align) <p> <label>Blue <input name = "color" type = "radio" checked = "checked" value = "Blue" /> </label> </p>
Similar presentations
