MMDI 202 10: CSS/Tables 11/03/14

INTRO:
CSS:
Create your own HTML/CSS site with multiple pages, using external CSS
Practice all list elements
Create a 3 column web page using CSS

READING:
Basic structure
Headings
Spanning columns and rows
Long Tables
Oldies but goodies
Ch. 14
List styles
List images
List positioning and shorthand
Table Properties
Even the Cursor can change
Ch 15
960.gs
z-index, and some examples of opacity, z-index and lists in drop down menus
3 columns

ASSIGNMENT:
Review 6, 12, 14
Practice- create tables and try all the attributes in Ch. 6
Practice modifying Cursors
Practice opacity, Z-index, drop down menu using lists, and drop shadows.
Read Chapter: 5, 16

CE 2411 05: More CSS 10/27/14

Review:
HTML:
1. Use Metatags (refresh and redirect)
2. Include declaration “Doctypes”
3. Try a table
CSS:
Create your own mini web site (at least 3 pages), using css to complete the following on each page:
1. place background image,
2. Use the “box model”
3. Use pseudo classes
INTERFACE:
Try a version.

READING:
Best examples
CSS Rules
External CSS. Here is how
Class, ID and Grouping
CSS priorities
Tables – Review

Assignment:
Review 6, 10, and 13
Read: Chapter 3, 14
HTML/CSS:
Create a table. Try all tags and parameters introduced in chapter 6 (including “colspan”, “rowspan”, etc). Try using Photoshop/slices to create a table mounted image. Text over image?
Create a mini site (3-4 pages) using external css, and multiple box models and their parameters. Practice css hierarchy

MMDI 202 09: Continue CSS 10/27/14

INTRO:
Convert your mini site – to an external CSS
Practice tables (create an image mounted in a table, create other table structures including ‘colspan’ and ‘rowspan’). Put text on top of your image/images in your table using the background image capability in HTML tables)
Review

Read the following articles
Float it
Flaunt it
3 columns
more 3s

Assignment:
Review 3, 13
Read Chapter 6, 12, 14
CSS:
Create your own HTML/CSS site with multiple pages, using external CSS
Practice all list elements
Create a 3 column web page using CSS

CE 2411 04: Intro to CSS 10/20/14

INTRO:
Prototypes: Review prototypes/interface

INTERFACE ON THE WEB:
The interface
Virtual Space is as old as art.
Stats for size
960 Grid
t960 upgrade
Stats for Browser

READING:
HTML is depends on file structure
HTML is depends on file paths
Examples,
Ch4 – Summary
Chapter 8
Meta basics – Here are EXAMPLES
Meta from Google
Meta today
Special Characters, Escape
Example
Ch8, Summary

INTRO TO CSS:
Tables – Review
CSS Intro
CSS parts
CSS Propertes
CSS Selector
The box
Pseudo class
Best examples

Assignment:
Review 4, 8
Read: Chapter 6, 10, 13
HTML:
1. Use Metatags (refresh and redirect)
2. Include declaration “Doctypes”
3. Try a table

CSS:
Create your own mini web site (at least 3 pages), using css to complete the following on each page:
1. place background image,
2. Use the “box model”
3. Use pseudo classes

INTERFACE:
Try a version.

MMDI 202 08: CSS and Box Models 10/20/14

INTRO:
Create your own mini web site (at least 3 pages), using css to complete the following on each page: Example
1. place background image,
2. Use the “box model”
3. Use pseudo classes

READING:
Best examples
CSS Rules
External CSS. Here is how
Class, ID and Grouping
CSS priorities
Tables – Review

Assignment:
Review 10, 13
Read: Chapter 3, review 13
CSS:
Convert your mini site – to an external CSS
Practice tables (create an image mounted in a table, create other table structures including ‘colspan’ and ‘rowspan’). Put text on top of your image/images in your table using the background image capability in HTML tables)

CE 2411 03: Links, Extra Markup/Template Design 10/13/14

INTRO:
Review HW: Talk about your Final (proposal emailed to me)
Review Site maps and wireframes.
Add more structural and semantic HTML to your pages (I will review. Email to me)

PROTOTYPING:
Examples
The interface

INTERFACE ON THE WEB:
Virtual Space is as old as art.
Design was limited by resolution
Stats for size
Used to be 960 Grid
t960 upgrade
Bigger and better?
Stats for Browser

Assignment:
Read: Chapter 4, 8
Revise IA and Wireframes based on feedback
Build out your Site prototype using your final wire frames.
Create Interface Design, Present next week as a JPG.
We will review in class next week.

MMDI 202 07: Links, Extra Markup

INTRO:
Review HW: Interface/Proto, etc
Add more structural and semantic HTML to your pages (I will review. Email to me)

READING:
HTML is depends on file structure
HTML is depends on file paths
Examples,
Ch4 – Summary
Chapter 8
Meta basics – Here are EXAMPLES
Meta from Google
Meta today
Special Characters, Escape
Example
Ch8, Summary

INTRO TO CSS:
CSS Intro
CSS parts
CSS Propertes
CSS Selector
The box
Pseudo class

Assignment:
Review 4, 8
Create HTML pages using all the new tags above. Pay close attention to anchors using the “id” attribute, iframes and the Meta tag functionality I introduced in class.
Read: Chapter 10, 13
CSS:
Create your own mini web site (at least 3 pages), using css to complete the following on each page: Example
1. place background image,
2. Use the “box model”
3. Use pseudo classes

CE 2411: 02 Process 10/06/14

INTRO:
Questions? Email me: jparada@uarts.edu
Review HW:
– Buy a domain name and Hosting account
– Create a Basic splash page with images, links, and headings.
– Select topic/project and begin research

If you want to turn your work in using DropBox, make sure you have an account and email me.
Review HW.

READING:
HTML is a hierarchy.
HTML provides structure
Attributes
Chapter 1 – Summary
Chapter 2, all the tags
Another example
Chapter 2 – Summary

PROCESS
What process? Why do we need it?
the bad, worse, just plain ugly
All kinds of “bad”

– Functional Specifications: Deliverable: 1-2 page proposal.
-Generating schematic wireframes for key interfaces and interactions: Deliverables: Site Inventory/Site Map,. Layout grids (Wire frames)
-Designing the visual interface: Deliverables: Template mock-ups in PSD or IA., Web based prototype

Assignment:
Review 1, 2
Read: Chapter 18 – Process and Design
Add more structural and semantic HTML to your pages.
Create Site Maps, wireframes
1-2 page proposal For Final Website. Discuss limitations and example sites (present next week)

MMDI 202 06: Links, Extra Markup/Into to CSS

INTRO:
Review HW: Interface/Proto, etc
Add more structural and semantic HTML to your pages (I will review. Email to me)

READING:
HTML is depends on file structure
HTML is depends on file paths
Examples,
Ch4 – Summary
Chapter 8
Meta basics – Here are EXAMPLES
Meta from Google
Meta today
Special Characters, Escape
Example
Ch8, Summary

INTRO TO CSS:
CSS Intro
CSS parts
CSS Propertes
CSS Selector
The box
Pseudo class

Assignment:
Review 4, 8
Read: Chapter 4, 8
Revise Wireframes prototype and Interface based on feedback
CSS: