CC WEEK 4
Week 4: Syntax of WWW: Cascading Style Sheets (CSS)
90 minutes: CSS demo using EXTERNAL stylesheets of instructor’s design, or use Mulder’s Stylesheets Tutorial below; review of FTP if necessary. There are CSS LECTURE NOTES + TUTORIAL HERE.
Below is an example to begin with. If time permits have students open a new page in Dreamweaver, type “hello world” and format a link from the text “SAIC” to saic.edu, and have them attach an external stylesheet with these modifications to the BODY tag.
body {
font-family: “Courier New”, Courier, monospace;
font-size: 12px;
text-transform: none;
color: #660000;
text-decoration: none;
font-weight: bold;
}
Optional: Demo of how to change main body attributes on blog (only can preview, cannot publish without purchasing the upgrade from Wordpress)
>Sketch 4
Re-work your 3 pages (index, the links page, and the artist’s statement page) to link up to a single external CSS stylesheet. All of these pages should link together, and begin to function as a single website.
>Optional activity
Wondering about what styles look best together? Copy the styles for powerful tags like <BODY> from your blog stylesheet. NOTE: Generally, the CSS is available as for themes available on Wordpress like Andreas09, the theme associated with http://saicwired.wordpress.com. There the body styles read:
body {
background:#8b8b8b;
color:#303030;
font:76% Verdana,Tahoma,Arial,sans-serif;
margin:0;
padding:0;
text-align:center;
}
You can literally double click your “stylesheet.css” you are working from and copy and paste this in place in Dreamweaver!
>Time for screening?
Check out these artist websites, some complex layout, some simple, some using blogs, some HTML:
Institute for Infinitely Small Things: http://www.ikatun.com/institute/infinitelysmallthings/
Scott Snibbe: http://snibbe.com/
FutureFarmers: http://www.futurefarmers.com/
>Reading
Mulder’s Stylesheets Tutorial, read overview and Lesson 1.
http://www.webmonkey.com/tutorial/Mulders_Stylesheets_Tutorial_-_Lesson_1
>Reminder: bring firewire hard drives to next class for Time Machine discussion!