Back

Web Authoring 1 - Final Assignment   Due in last class.

- Create a 3 page website -

- Supply your own content (artwork, photos, text).
• Project to be built using Adobe Photoshop, Dreamweaver &/or possibly NotePad or TextEdit.

Video Instructions

Step 1: Must Watch this to properly set up site   -  (critical to make sure your links are relative)

Your Root directory should look like this:

 

Beginning Instructions:

1. Formerly Set up site in Dreamweaver to begin. How to video

2. Root folder must contain a folder named "images" for images & a folder named "CSS" for your css file.

3. Must Use One External Cascading Style Sheet for all CSS styles. Name it "yourLastName.css" and save it in the CSS folder.

4. Make sure all your images and css file are in their proper folders before making html files.

5. As soon as you create a new html file in Dreamweaver SAVE IT IMMEDIATELY! This will ensure your links work as relative links.

6. All pages must have your full name as the html page title.

7. You can create and/or open the css file in Dreamweaver and hand code it in Code view. Or use NotePad if you wish.


Details for Each Page:

Home Page:

A- Must name your home page "index.html"

B- Must create a graphic Navigation Bar using a Table with 1 row and 2 columns with 2 Graphics as links to other pages.
      You will need to create the graphic buttons as jpgs in Photoshop.
      Buttons will link to the Div page and Tables page. (use 2 empty paragraphs under the table to create space.)

C - Include a second table below the first table with 1 Row and 2 columns.
      Include a 300 x 300 pixels square image inside the left cell.
      Put your name in right table cell. Align Name to center of table cell.
      Format your name with h2 tags.


Div Page:

HTML - link file to your CSS stylesheet.

A - Create a div tag with ID ="top".
    - Place an image 200 x 200 pixels inside the div tags.

B - Create a 2nd div tag with ID= "bottom"
- Insert an image no larger than 300 x 300 pixels inside this div tag.

C - Must include a link back to Home page.

CSS

1. Create ID called "top" with the following attributes:
- Set positon to Absolute 20 pixels from left and 50 pixels from top, set width to 200 pixels and height to 200 pixels and set a Red 4 pixel border.

2. Create ID called "bottom" with the following attributes:
- Set positon to Absolute 20 pixels from left and 400 pixels from top, set width to 300 pixels and height to 300 pixels and set a GREEN 8 pixel border.


Tables Page - link file to your CSS stylesheet.
(3 photos with 3 descriptions)

HTML

A- Create a table with 3 rows and 2 columns.

B- place an image of your choosing in the left table cell in each row (each image should be the same size). Limit no bigger than 300px x 300px.

C- In right columns add a heading (with H1 tag) and a one line brief description in a paragraph for each row.

D- Must have a link back to Home page.

CSS

1- Create a tag style in your CSS file for H1 tag - Set to Arial, 16 pixels, Red.

2- Create a class style called "photodescription". Set it to Arial, 14 pixels, Black. Apply it to each paragraph opening tag.

3- Create a class style called "tableborder". Set a border of 6 pixel, Solid, Purple. Apply the class to the table.


CSS file summary:

Should have these 5 items:

1." h1" selector style - for Tables page
2. class style called "photodescription" - for Tables page
3. class style called "tableborder" - for Tables page
4. ID called "top" (using position:absolute) - for Div page
5. ID called "bottom" (using position:absolute) - for Div page



Hand In -
Upload Zipped Root folder to CANVAS