Difference between revisions of "AIM Class2"
esse quam videri
(→XHTML: Extending HTML) |
|||
| (19 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
| − | [[Category:AIM] | + | [[Category:Authoring Interactive Media]] |
| + | ------------------------------------------------------------------------------------- | ||
| + | '''Class Goals''' | ||
| + | #Review basic markup concepts from previous class | ||
| + | #Introduce CSS and give a tutorial on basic CSS | ||
| + | #Students create at least one CSS page (a basic one) for reference | ||
| + | |||
| + | ------------------------------------------------------------------------------------- | ||
| + | |||
| + | |||
| + | ==Due== | ||
| + | Class Portfolio Website | ||
| + | |||
| + | [AIM Assignment 1] - Web site analysis project (emailed to instructor) | ||
| − | ==Review | + | Reading: XHTML: Introduction (pgs 13-22), Chapters 1, 2, and 3 |
| + | |||
| + | ==Review Markup== | ||
What is the connection between XML, XHTML and CSS? | What is the connection between XML, XHTML and CSS? | ||
| − | + | What is the basic syntax form? | |
| − | |||
| − | + | "Open" tags vs. "closed" tags | |
| − | |||
| − | + | Block level vs. inline | |
| − | |||
| − | |||
==Introduction to CSS== | ==Introduction to CSS== | ||
| Line 23: | Line 34: | ||
In class we will discuss the first three methods and create an example of the third. The fourth method, import, will not be covered in class because there is sketchy support for it (which actually turns out to be a plus if you want a specific style sheet that some browsers won't be able to see or use). | In class we will discuss the first three methods and create an example of the third. The fourth method, import, will not be covered in class because there is sketchy support for it (which actually turns out to be a plus if you want a specific style sheet that some browsers won't be able to see or use). | ||
| + | |||
| + | ===Style Rules=== | ||
| + | |||
| + | #Selector | ||
| + | #Declaration | ||
| + | |||
| + | ===CSS Properties and Values=== | ||
| + | |||
| + | See also Appendix B in your XHTML text (pages 440-446) | ||
==Class Assignment== | ==Class Assignment== | ||
| Line 38: | Line 58: | ||
[[AIM Assignment 2]] | [[AIM Assignment 2]] | ||
| − | + | ===Reading=== | |
| − | + | XHTML: Chapter 24, pages 394-404; Chapter 8, pages 133-146; Chapter 9, pages 148-149 | |
| − | + | ZEN: Chapter 1, pages 9-33 | |
Online Article: [http://argus-acia.com/strange_connections/strange001.html Peter Morville's Strange Connections] | Online Article: [http://argus-acia.com/strange_connections/strange001.html Peter Morville's Strange Connections] | ||
| Line 53: | Line 73: | ||
==Resources== | ==Resources== | ||
<ul>Helpful links: | <ul>Helpful links: | ||
| − | <li> | + | <li>[http://www.pixy.cz/apps/barvy/index-en.html Color Scheme] (color scheme generator)</li> |
| − | <li> | + | <li>[http://www.colorschemer.com/online.html Color Schemer](color scheme generator)</li> |
| − | <li> | + | <li>[http://colormatch.dk/ Color Match 5k](color scheme generator)</li> |
| − | <li> | + | <li>[http://archive.devx.com/projectcool/developer/gzone/color/color_symbolism02.html Color Symbolism] (devx.com article)</li> |
| − | <li> | + | <li>[http://www.personal.psu.edu/faculty/c/a/cab38/ColorSch/SchHome.html Color Use Guidelines for Mapping and Visualization] |
| − | </li><li>Web Graphics for Non-Designers Excerpt | + | </li><li>Web Graphics for Non-Designers Excerpt [http://www.webreference.com/authoring/graphics/color/nondesigners/chap2/ Chapter 2: Using Color] |
| − | </li><li> | + | </li> |
| − | <li> | + | <li>[http://webdesign.about.com/cs/color/a/aacolorharmony.htm Color Harmony] (about.com article)</li> |
| + | <li>[http://colormatters.com/colortheory.html Basic Color Theory] (color matters.com article)</li> | ||
| − | <li> | + | <li>[http://www.colormatters.com/chameleon.html Color, the Chameleon of the Web] (color matters.com article)</li> |
| − | <li> | + | <li>[http://colormatters.com/des_ecom.html Color and E-Commerce] (color matters.com article)</li> |
| − | <li> | + | <li>[http://webdesign.about.com/cs/color/ht/htrgbhexwindows.htm How To Convert From RGB to Hex on a Windows Computer] (about.com article)</li> |
| − | <li> | + | <li>[http://www.colordream.net/research/eresult.htm Study of color preferences in Japan]</li> |
| − | <li> | + | <li>[http://www.personal.psu.edu/faculty/c/a/cab38/ColorBrewerBeta.html Color Brewer] (color scheme tool)</li> |
</ul> | </ul> | ||
Latest revision as of 16:02, 5 August 2008
Class Goals
- Review basic markup concepts from previous class
- Introduce CSS and give a tutorial on basic CSS
- Students create at least one CSS page (a basic one) for reference
Contents
Due
Class Portfolio Website
[AIM Assignment 1] - Web site analysis project (emailed to instructor)
Reading: XHTML: Introduction (pgs 13-22), Chapters 1, 2, and 3
Review Markup
What is the connection between XML, XHTML and CSS?
What is the basic syntax form?
"Open" tags vs. "closed" tags
Block level vs. inline
Introduction to CSS
There are four ways to use stylesheets:
1. In-line 2. Embedded 3. Linked (External) 4. Import*
In class we will discuss the first three methods and create an example of the third. The fourth method, import, will not be covered in class because there is sketchy support for it (which actually turns out to be a plus if you want a specific style sheet that some browsers won't be able to see or use).
Style Rules
- Selector
- Declaration
CSS Properties and Values
See also Appendix B in your XHTML text (pages 440-446)
Class Assignment
Create an experimental CSS file that does the following:
* Use a div
* Use a span
* Use at least one class
* Use at least one ID
* Change the background color of a div, and the text color
* Change the background color of a span, and the text color
Homework
Reading
XHTML: Chapter 24, pages 394-404; Chapter 8, pages 133-146; Chapter 9, pages 148-149
ZEN: Chapter 1, pages 9-33
Online Article: Peter Morville's Strange Connections
Online Article: Dan Willis's Classic IA Tools
Quiz
Resources
- Helpful links:
- Color Scheme (color scheme generator)
- Color Schemer(color scheme generator)
- Color Match 5k(color scheme generator)
- Color Symbolism (devx.com article)
- Color Use Guidelines for Mapping and Visualization
- Web Graphics for Non-Designers Excerpt Chapter 2: Using Color
- Color Harmony (about.com article)
- Basic Color Theory (color matters.com article)
- Color, the Chameleon of the Web (color matters.com article)
- Color and E-Commerce (color matters.com article)
- How To Convert From RGB to Hex on a Windows Computer (about.com article)
- Study of color preferences in Japan
- Color Brewer (color scheme tool)
