Week#7
Tuesday, Oct. 8
DESIGN FOR THE WWW
ART 365
FALL 2019
webpage:
ryanSmithArt.com/courses/fall2019
- "xd_project" WAS DUE 2 WEEKS AGO
- open "Adobe Photoshop"
- open "Adobe XD"
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
examples:
- Beatriz Martin Vidal
- Alex Grey
- Chuck Close
- "Loish"
- Feng Zhu
REVIEW
<!-- 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" >
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 "website_project_2"
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 3 webpages with at least 1 image on each page *create working links between those 3 pages
**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 : )