Week #4

DESIGN FOR THE WWW
ART 365 - 002
SPRING 2019
Tuesday, 2:00pm - 5:50pm
CA 4030
Instructor : Ryan Smith

webpage: ryanSmithArt.com/courses/2019

Talk about:
your class web page

Assign "project_a"

REVIEW

- HTML

*LINK 2 PAGES TOGETHER*

<a href="name_of_page.html"> Link to a webpage </a>

Headings:
<h1> </h1>

<em>, <i>, <strong>, & <b>

div tags:
<div id="name">

*CHECK HOMEWORK*

CSS

-Example #1: (W3 schools)

-CSS Syntax

***External Style Sheets

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

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_a"

Due next week:
- familiarize yourself with HTML & CSS, start planning the website
- pick a topic
- do some research
- come up with an idea, write a paragraph or 2 about it
- save it as a .pdf file.
- add link from your class web page, to your .pdf file

- get (or make) digital images

**draw site structure and wire frames
- start designing and building an informative website based on your research.

Note:
- no need to upload your homework this week : )

Next Week:

- More CSS
- CSS3
- Adobe Dreamwever
*Continue working on 1st project

ART365

Week #4

Assign "project_a"

- HTML

CSS

Hexadecimal System (RGB)

More CSS