Week #3
* Assign "PROJECT #1"
examples :
Beatriz Martin Vidal
Chuck Close
Banksy
*Check Homework
Class work:
Open up
TextWrangler or Dreamweaver
*Add a link from Week #2's homework to your .pdf file from Week#1.
*experiment with some CSS, maybe try something we haven't talked about...
CSS3
Review some HTML
<!-- this is a comment in HTML -->
/*this is a comment in CSS code */
div tags:
<div id="name">
- CSS
***
External Style Sheets
<link href="365.css" rel="stylesheet" type="text/css" >
an
example of a CSS page
body{background-color:black;}
styling links
a:link {color:#FF0000;}
h1{
background-color:#CC0;
padding:.5em;
text-align:center;
}
Review file formats:
.
jpg, gif, png, pdf, txt, html
More CSS
Center divs using CSS:
#wrap{
text-align:left;
max-width:1000px;
min-width:600px;
margin-left:auto;
margin-right:auto;
width:60%;
background-color:white;
padding:10px;
}
****changing the background with CSS
....... CSS3:
html{
height:100%;
overflow-y: scroll;
background: url(images/bg.gif) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Google fonts
why not use "
daFont.com" ?
ID vs. Classes
* htmldog.com
( review : reading materials )
* CSS styles can be applied to general page elements, CSS Classes, and specific items:
img { border: solid #000 10px; }
this applies to every image tag in the HTML document
.classy { color: red; }
this applies to a CSS class called classy.
<span class="classy" > Example of classy red text </span>
#about { background-color: #ccc; }
This rule applies to just the specific element that has an ID value of about:
<div id="about"> About stuff goes here </div>
Example of good CSS positioning
Here's the CSS code
by Larry Ullman
One more example...
HTML div tags:
<div id="title"> Week 3 </div>
<div id="other"> most of stuff </div>
<div id="scroller">--scrolling div section-----------</div>
CSS:
#title{
background-color:#000;
color:#FFF;
top:0px;
height:50px;
left:0px;
width:100%;
}
#other{
top:70px;
background-color:#FFF;
color:#999;
width:500px;
}
#scroller{
padding-left:10px;
background-color:#000;
color:#FFF;
width:100px;
height:50px;
overflow:scroll;
}
Homework :
Get started on "PROJECT #1"
Due next week:
- familiarize yourself with HTML & CSS, start planning the website
- pick an artist
- do some research
- get (or make) digital images of artwork
- complete 2 webpages with at least 1 image
- create a working link between those 2 pages
Next Week:
- Adobe Dreamwever
- Continue working on 1st project