CS101 Lecture 09: Intermediate HTML: Frames and CSS Aaron Stevens 7 February 2011 1 What You’ll Learn Today – How to make a web page look decent - formatting the website. – How to have the same look-and-feel across many web pages. 2 1
What makes a webpage suck? http://www.webpagesthatsuck.com offers some checklists – Content Depth: Too much/too little on a page – Display: Mix and match text font, size, colors on one page – High-tech: too much whiz-bank technology (JavaScript, Flash animations, music, videos) – Graphics: too big, too flashy, too animated – Navigation: unclear transitions between pages 3 Some Proven Tools HTML Frames segment the formatted output into regions – Organize the information Cascading Style Sheets (CSS) coordinate the formatting, look and feel – Consistency of visual experience Example: CS101 website 4 2
HTML Frames Frames segment the formatted output into regions (e.g. top, left). 5 HTML Frames Defining a frame set • in index.html • create “frames” • name each frame • load each frame 6 3
Each frame is an .html file 7 More Control Over Formatting • Tags like: <H1>, <h2>…, <B>, <I> only go so far in creating a look and feel. • Internet Explorer introduced the <FONT> tag to specify exact fonts, sizes, colors, etc. – Web pages with these tags didn’t always work on other browsers. 8 4
Consistent Formatting W3C introduced Cascading Styles to: – solve the problem of inconsistent browsers – simplify HTML source by externalizing format – Write-once, use-many formatting Cascading Style Sheets (CSS) uses an external file to specify format details. 9 CSS Syntax CSS has it’s own syntax; it’s not HTML. The CSS file uses elements with this syntax: selector {property: value} Example: body {color: black} p {font-family: "sans serif"} 10 5
Using a Style Sheet in HTML Must add the <link> element to the <head> section of the .html file.: This is how we tell the HTML to use a CSS file for style information. 11 Define Styles in a .css file Example: 12 6
HTML using CSS 13 What You Learned Today – What makes webpages suck… – Frames – Cascading Style Sheets (CSS) 14 7
Announcements & To Do List – Readings: • HTML Tutorial http://www.w3schools.com/HTML/ • Reed ch 3, pp. 53-57 (today) • http://www.webpagesthatsuck.com – HW 3 due WED 2/9 15 8
Recommend
More recommend
