Transcript Feb 18
CS 200 – Web Site
Organization
Quiz #3: First 10 Minutes
CSS For Layout (div's and id's)
Recall external css files
Example:
LabFourNNN.css
How you used it in each web page:
<head>
<link href="LabFourNNN.css" … />
</head>
One change this lab
The css file will be in a separate folder
called css
Referencing items in other folders
From web page (.html) to css folder:
<link href="css/labfiveNNN.css" … />
From web page to images folder:
<img src="images/akaka.jpg"/>
From css file to images folder:
<link href="../images/mastheadNNN.jpg"/>
How can css help
organize a page?
Set of <div's> to organize page
Chapter 13
<div id="mastheadregion”> <div id="masthead”> </div> </div>
<div id="wholepage">
<div id="sidebar"> </div>
<div id="content"> </div>
<div id="footer">
</div>
</div>
The css file says how wide, etc.
each div is!
See page 150
Yes, you will be typing most of this!
Example:
#content { float: left;
padding-left: 8px;
width: 80%; }
Overview of the Lab
Create folders; copy starter files
Link the css file to the 5 starter
web pages. Test that they work.
Add lots of styles to the css file for
layout: #masthead, etc.
Make other pages have the same
layouts just by adding <div>'s.
The result is a typical web site
layout. Try to get good at it!