CE 2411 08: HTML5 – 11/17/14

INTRO:
Practice – Image alignment
Practice – Roll-overs and sprites
Review Final Interface design
Due: FINAL WEB SITE (12/01/14)

HW Deliverables for final:
BASIC HTML
– Create a Basic splash page with images, links, and headings.
– Add more structural and semantic HTML to your pages.

PLANNING:
– 1-2 pragraph proposal For Final Website. Discuss limitations and example sites.
– Create Site Maps
– Create wireframes
– Build out your Site prototype using your final wire frames.
– Create Interface Design – 3 levels minimum, (JPG, PDF, ETC.).

CSS/HTML:
-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
— 4. Include Declaration and metatags (refresh and redirect)
– HTML: Create a table. Try all tags and parameters introduced in chapter 6 (including “colspan”, “rowspan”, etc).
– HTML: Try using Photoshop/slices to create a table mounted image. Text over image?
– CSS: Practice text attributes. In particular, I want to see the @font-face
– Create a 3 column web page using external CSS
– Practice- create tables and try all the attributes in Ch. 6
– Practice styling Forms
– Practice modifying Cursors
– Practice opacity, Z-index, drop down menu using lists.
– Practice – Image alignment
– Practice – Roll-overs and sprites
– Practice all HTML5 elements in Chapter 17
– Practice – Image alignment
– Practice – Roll-overs and sprites
– Instal Favicon on your site
– Try Mobile redirect functionality

READING:
HTML5
The old
The new
What about those older browsers?

Extras:
FAViSize
Flavor FAVicon
Favicon generator

ASSIGNMENT:
Review 17
Practice all HTML5 elements in Chapter 17 (use code and images)
Read Ch 19, Ch 9, Ch 12
Work on your final PROJECT!!

MMDI 202 12: HTML5 + WordPRess 11/17/14

INTRO:
Practice – Image alignment
Practice – Roll-overs and sprites

READING:
HTML5
The old
The new
What about those older browsers?

Introduction to WordPress
Uses a database and PHP
WordPress the platform, not to be confused with wordpress.com
WordPress magic
WP customize
– More WP custom
– WP theme mods
– WP theme customization
– More WP tips

Extras:
FAViSize
Flavor FAVicon
Favicon generator

Assignment:
Review Ch 17
Make a favicon, install it
WP: Play around with the themes
Play around with customizing your blog using the editing function. Put all assignments here.
Show results next class
Review Ch. 19
Work on Final. Design and development

CE 2411 07: Images/CSS 11/10/14

Review:
Practice all list elements in Ch 3
Practice modifying Cursors
Practice opacity, Z-index, drop down menu using lists, and drop shadows.
Create 3 column layout with css.

READING
Examples of Drop down menu
Adding images is easy
Review “figure” and title=””
Sizes in CSS
Alignment
Centering
More than one way
The lowly roll over
Rollovers and all their parts
Negative values??
Margin Shorthand
Put it all together

ASSIGNMENT
Review 5, 16
Practice – Image alignment
Practice – Roll-overs and sprites
Final Design: Work on the final changes to your interface. Start working on your final Project.
Read Ch 17, 19

MMDI 202 11: IMAGES/CSS 11/10/14

INTRO
Practice- create tables and try all the attributes in Ch. 6
Practice styling Forms
Practice modifying Cursors
Practice opacity, Z-index, drop down menu using lists.

READING
Examples of Drop down menu
Adding images is easy
Review “figure” and title=””
Sizes in CSS
Alignment
Centering
All the different background image insertions
The lowly roll over
Rollovers and all their parts
Put it all together
Great Examples

ASSIGNMENT
Review 5, 16
Practice – Image alignment
Practice – Roll-overs and sprites
Final Design: Work on the final changes to your interface. Start working on your final Project.
Read Ch 17, 19

CE 2411 06: Advanced CSS 11/03/14

Review:
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

READING:
Ch. 14
List styles
List images
List positioning and shorthand
Table Properties
Even the Cursor can change
z-index, and some examples of opacity, z-index and lists in drop down menus
3 columns
Review Zen Garden

Assignment:
Review 3, 14
Read: Chapter 5, 16
HTML/CSS:
Practice all list elements in Ch 3
Practice modifying Cursors
Practice opacity, Z-index, drop down menu using lists, and drop shadows.
Create 3 column layout with css.

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)