_design_for_the_WWW
_week: 1 . 2 . 3 . 4 . 5 .





TOWSON: FALL 2017


ryanSmithArt.com/courses/fall2017

Note:
write down and save the class's URL address

 


Week #3

DOWNLOAD
- [ Brackets ]
or
- BBEDIT(TextWrangler)



* Assign "PROJECT #1"


examples :
Beatriz Martin Vidal
Chuck Close
Banksy

*Check Homework

(2 business cards) & HTML

- W3

w3schools.com (HTML5)

Review Some HTML:
<a href="http://www.website.com"> Link to a webpage </a>

<a href="..." target="_blank">Link to a webpage </a>

Headings:
<h1> </h1>

<!-- this is a comment in HTML -->

div tags:
<div id="name">







- CSS

-Example #1: (W3 schools)

-CSS Syntax

***External Style Sheets

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

Hexadecimal System (RGB)



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


* 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>





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