Contents:

Readings:

1. Osborn – Lesson 4  with CD
2. W3Schools Online Web Tutorials –

CSS Basic

CSS Introduction
CSS Syntax
CSS Id & Class
CSS How To

______________________________________________________

Introduction:

[kml_flashembed movie=” http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=week3css-110211234423-phpapp01&stripped_title=week3-css&userName=rowenali” width=”525″ height=”405″ allowfullscreen=”true” /]

______________________________________________________

How to set up simple CSS styles:

[youtube]http://www.youtube.com/watch?v=cNearx7zAYs[/youtube]

______________________________________________________

How to create and connect external css sheet with html file:

[youtube]http://www.youtube.com/watch?v=i6Vo-Kv-4n4[/youtube]

______________________________________________________

How to change headings with tag as a selector:

[youtube]http://www.youtube.com/watch?v=RirEuzlomEs&feature=related[/youtube]

______________________________________________________

How to group tag selectors:

[youtube]http://www.youtube.com/watch?v=oi16vVgqmHY&feature=related[/youtube]

______________________________________________________

How to create class styles:

[youtube]http://www.youtube.com/watch?v=Kn5BPDciMbg&feature=related[/youtube]

[youtube]http://www.youtube.com/watch?v=eUQOmBE2DUI&feature=related[/youtube]

______________________________________________________

Assignment (5 points):

Redesign your index.html page (week1 assignment) using table as your webpage structure. Your page content and theme can be changed around, but it should still based on the information in your original index.html. Here is an example for the page (just for the format).

You may add other elements as deemed necessary. However, the following elements are required for your revised index.html page:

A table (width in 700 – 1000 pixels) with the exact same setup of rows and columns as the example, but the content and images are up to your decision (You are not to create the same page as the example).

1. Your page title and subtitle with different font size and color (1 point);
2. A banner with an image (0.5 point);
3. A menu bar with background coordinate with your banner’s color, with words – Leave this space blank (0.25 point)
4. Left content area:
   • At least 2 Heading1s in the same color and font (0.5 point);
   • At least 2 taglines in the same font family, font size, font color, indented (These are the lines with author name and date time stamp) (0.5 point);
   • At least 2 paragraphs (0.5 point);
   • One image aligned either on the left/right (0.5 point);
5. Right content area with words – Leave this space blank (0.5 point);
6. Footer with background and words centered (0.25 point).

External CSS style is required. You may also use internal and/or inline style(s) at the same time. After it is done, please

1. submit your .css sheet on the Blackboard under Weekly Assignments > Week 3 link (0.5 point);
2. make sure this index.html file link on our class blog remains the same, since I will check your assignment through the link on our class blog.