Contents:

• Review how to create Webpage layout with tables;
• Learn to create one-column Webpage layout with div tags and CSS style;
• Learn to create two-column Webpage layout with div tags and CSS style;
• Learn to create and modify CSS styles from Dreamweaver’s panels.

  ______________________________________________________

Readings:

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

CSS Styling

Styling Backgrounds
Styling Text
Styling Fonts

______________________________________________________

Introduction:

In this online session, we are going to go over 4 sections. Section 1 consists of 4 videos, intending to further your knowledge and skills of using CSS styles in creating Web pages with table structures. Section 2 starts with the introduction of div tags. After viewing Sections 2 and 3, you should be able to create a Web page with div tags instead of tables. Please pay attention to where to insert div tags in code view and also how to create two-column layouts with div tags.

All the videos introduced on Week 3 and Week 4 blog pages show how to create Web pages with CSS style from the code view (by manually typing in the codes in code view). During our class session on September 12 , I demonstrated how to add CSS styles from Dreamweaver panels. The 4 videos in Section 4 show how to use these panels in details.

______________________________________________________

Section 1. More on how to create Web page layout with tables:

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

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

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

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

_______________________________________________

Section 2. Create a one-column layouts with div tags and CSS style:

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

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

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

_______________________________________________

Section 3. Create a two-column layouts with div tags and CSS style:

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

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

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

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

_______________________________________________

Section 4. Learn how to use Dreamweaver panels to implement CSS styles:

Creating & Modifying Styles from the Properties Panel

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

Creating & Modifying Styles from the CSS Styles Panel

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

Working with Page Properties

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

Working with Compound Selectors

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

_______________________________________________

Assignment (5 points):

Please create a Web page exact the same as Assignment 3 with div tags instead of a table. Here is the example for your reference.

Please set up your wrapper width within 850 – 1000 pixels with the exact same structure as the example. Its content should be the same as your Assignment 3 page, which include the following elements:

1. Your page title and subtitle with different font size and color (1 point);
2. A banner with an image (Please make the image fully expanded to the four borders without any blank space around – 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 same color and same font (0.5 point);
   • At least 2 taglines in their own distinct 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. Set up the border as the example with 1px width (0.5 point);
7. Footer with background and words centered (0.25 point).

You may use inline, internal or external CSS styles, or any combination. After it is done, please

• create a link on your index.html for this page, so that I will check this page through your index.html linked on our class blog.