Week 6 3/7-13 Div & page layout

READINGS

CSS Box Model| CSS Outline | CSS Borders | CSS Margins | CSS Padding | CSS Float

CONTENT

    • create a one-column Webpage layout with div tags and CSS style;
    • create a two-column Webpage layout with div tags and CSS style;
    • set up page layout with Dreamweaver.

INTRODUCTION

Here are two intro videos with the Powerpoint slides.
CREATE A ONE-COLUMN LAYOUT WITH DIV TAGS AND CSS STYLE

This section starts with using Div tags to create a one-column layout webpage. Please watch carefully.

CREATE A TWO-COLUMN LAYOUT WITH DIV TAGS AND CSS STYLE

This section introduced using Div tags to create a two-column layout webpage. After viewing Sections 1 and 2, you should be able to create a Webpage 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.

CONSTRUCT A WEBPAGE WITH DIV IN DREAMWEAVER

This section talks about using Dreamweaver CC to set up page layouts. Pay attention to static, relative, and absolute positions mentioned in the video. Float and clear functions need special attention, too.

ASSIGNMENT 6

6 points
due on 3/14/2022

Please create a webpage the same as week5.html with div tags instead of a table. Here is the example for your reference.

Please set up your wrapper (or container) width within 850 – 1000 pixels with the same structure as the example. Its content should be the same as your week5.html page, which includes the following elements:

  1. Page content centered (0.5 points);
  2. Your page title and subtitle with different font sizes and color (0.5 points);
  3. A banner with an image. Please make the image fully expanded to the four borders without any blank space around (0.5 points);
  4. A menu bar with background coordinate with your banner’s color, with words – Leave this space blank (0.5 points)
  5. Left content area:
    • At least two h1 or h2 in the same color and same font (0.5 points);
    • At least 2 taglines in their own distinct font family, font size, font color (These are the lines with author name and date time stamp) (0.5 points);
    • At least 2 paragraphs (0.5 points);
    • One image floated either on the left/right (1 point);
  6. Right content area with words – Leave this space blank (0.5 points);
  7. A border as the example with 1px width (0.5 points);
  8. Footer with background and words centered (0.5 points).

You may use inline, internal, or external CSS styles or any combination. After it is done, please create this page link on your week2.html. I will check this assignment from your week2.html.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Set your Twitter account name in your settings to use the TwitterBar Section.
Skip to toolbar