Presentation is loading. Please wait.

Presentation is loading. Please wait.

B118 Web Programming Session #4 Cascading Style Sheets February 23, 2004.

Similar presentations


Presentation on theme: "B118 Web Programming Session #4 Cascading Style Sheets February 23, 2004."— Presentation transcript:

1 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 14One minor flaw (usually grammar) 13(incomplete exec summary + a minor flaw) or (2 minor flaws) 12Weak criteria analysis 11Missing 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 element { property: value } element.class { property: value; property: value } element:pseudoclass { property: value } element1, element2 { property: value } element child-element { property: value }

9 CSS examples: font color.blue-text {color: blue} This is regular color text. This is colored text. Back to normal color. Color. Additional example: css-text.htm

10 CSS examples: table width & font settings Instead of : Define standards for H1 & H2 Example: Jason’s resume h1 { font-family:"times"} h2 { font-family:"arial"; font-style:"oblique"}

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

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 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 to distinguish this type text from the other text elements –Define style to align label text (text-align) Blue


Download ppt "B118 Web Programming Session #4 Cascading Style Sheets February 23, 2004."

Similar presentations


Ads by Google