WEEK 4

(Tuesday) February 22
- Weather forecast Towson : Rain, 60°F - 62°F Precipitation: 90%, Humidity: 83%


*CHECK HOMEWORK*


NOTE: Let's open up Adobe Dreamweaver & Photoshop

What's WeTransfer ?

(Review) :

***External Style Sheets

<link href="365.css" rel="stylesheet" type="text/css" >

an example of a CSS page

body{background-color:black;}


CSS: HOW TO & hyperlinks

here's my notes:
CSS STYLES
CHANGING HYPERLINK COLOR

Here's something new:

ACTIONS...
- You can try using the Actions Window in Photoshop to record what you do.
- After recording any image size changes, you can replay them...
- Then you can go to: File, Automate, Batch...
- You can apply these actions to a folder filled with images files
- And, save yourself hours of time, by not having to reopen, resize, rename, and re-save all your images

Here's a project I put together:

https://ryansmithart.com/courses/2020/proj_2_ryan_smith/index.html

You can download my .zip file:
https://ryansmithart.com/courses/2020/proj_2_ryan_smith.zip

- Look at my code, open up the .css page
- And, see how I've organized my local files...

This week, I would like you to start playing around with your .css code.
*Double check your hyperlinks, make sure you are not linking to URL addresses starting with:
file:///C:/Users/
or
file:///Users/Desktop/...
instead you want to link directly to: art.html
or
a .html page that's in the same folder.

*Make sure that all your pages have titles, and don't say "Untitled Document"

Try changing the colors of your hyperlinks, add a hover effect or 2

---

helpful links:

CSS OPACITY AND TRANSPARENCY

CSS Class and ID

CSS Navigation

Try it yourself

---

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 * 

---

ID vs. Classes
* htmldog.com


* 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

Some examples:
- Chuck Close
- Loish
- Beatriz Martin Vidal

Artist/portfolio Websites:
- SamLacombe.com
- Alex Heilner
- Rafaël Rozendaal
- BzSullivan.com
- ReneTrevino.com

---

HOMEWORK:

Keep working on "PROJECT #1" 

*Have some HTML pages completed with CSS code :)


Project due date: Tuesday, March 8

- Put all of your images, HTML page, and CSS in 1 folder
- You can compress it into a .zip file
help: How to ZIP files, Mac
help: How to ZIP files, Windows