LL WEEK 10
Week 10 : CSS and HTML
Intermediate HTML: Using stylesheets (CSS) to control formatting and enhance consistency of site de-sign.
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 activity: Demo of how to change main body attributes on blog (only can preview, cannot publish without purchasing the upgrade from Wordpress)
>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 on your external stylesheet!
>Screen
Interesting 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/
>Sketch 9
Finalizing and editing your website. Remake your site using an external stylesheet (CSS) to streamline color, fonts, etc. The CSS you choose will enhance the overall look and feel of your site that you are building in HTML. If you want to link your blog to your HTML site why not copy over some of the style attributes?
You should now have these pages:
SPLASH PAGE: “index.html” your splash page links to:
LINKS: “Self-Portrait in Links” (experimental HTML page, Sketch 7)
WORK: Photo archive/tables of recent work (Sketch 9)
>Reading
Mulder’s Stylesheets Tutorial, read overview and Lesson 1: http://www.webmonkey.com/webmonkey/authoring/stylesheets/tutorials/tutorial1.html
>Browse for ideas
Zen Garden, wonderful resource displaying the power of CSS: http://csszengarden.com/