art365 : design_for_the_WWW

week:   1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |

Week#8

Tuesday, Oct. 15

DESIGN FOR THE WWW
ART 365
FALL 2019

webpage:
ryanSmithArt.com/courses/fall2019




- "xd_project" WAS DUE 3 WEEKS AGO

Talk about Attendance & Grades

CHECK LIST:

(first 7 weeks)

- Homework from the 1st two weeks of class (.jpg or .png copies)
- Project idea/proposal (.pdf copy)
- Adobe XD Project (& uploaded or video copies)
- 1 web page about yourself (HTML & CSS code, and .jpg images)

- Your 2nd project about an artist (HTML & CSS), should be started...



TALK ABOUT UPLOADING XD PROJECTS:
VIDEO:https://www.youtube.com/watch?v=khxMAajFJ0Y
EMAIL ME : rtsmith@towson.edu
Link should look like: https://xd.adobe.com/view/c78c3b75-4320-..../
And/Or make a video of your project, to present next class...







Talk about:
your class web page

And, file management

Assign: "website_project_2"


examples:
- Beatriz Martin Vidal
- Alex Grey
- Chuck Close
- "Loish"
- Feng Zhu





REVIEW

- HTML



<!-- this is a comment in 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" >



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 :


Keep working on "website_project_2"

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










updated 2019
© ryanSmith