TOWSON WEATHER :
49° - 45°, Cloudy with periods of light rain.
NOTE: Exchange contact info with 3 people
NOTE:
This week, move homework (HTML, CSS, & image) files to thumb-drive.
Prepare to present webpages to the rest of the class.
Let's open up Adobe Photoshop & Dreamweaver
**Talk about: TYPOGRAPHY & readability
CSS
-CSS Syntax
***External Style Sheets
<link href="466.css" rel="stylesheet" >
styling links
a:link {color:#FF0000;}
h1{
background-color:#CC0;
padding:.5em;
text-align:center;
}
/*this is a comment in CSS code */
- Hexadecimal System
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
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:
talk about Project #1
EXHIBITIONS & ARTISTS:
AVAM
BMA
THE WALTERS
TOWSON
MICA
AIC (chicago)
Chambers Project (CA)
(HIRSHHORN)Yayoi Kusama
Rafaël Rozendaal
Alex Heilner
Carrie Fucile
- UPLOADING
HOMEWORK:
Get started on Project #1
[part 1]
- Draw your site structure diagram.
- Create a wireframe for your 1st project
- Find or make a logo for your website.
[part2]
Using one exernal style sheet, start making a navigation bar for "Project #1".
- Example
...all due next class
- Put all of your images, HTML, & CSS page in 1 folder
- You can compress it into a .zip file