Web Design Assignment 8

Tying everything together

Noe that you have completed your 7 assignments, let’s tie everything together. Using the skill you have developed in the previous assignments, create a new “index.html” page in your site’s root folder, this should be at the same level as your folders 1a-a7.

Student Samples

Your index page should contain links to assignment 1-7, plus your extra credit blog, and a place holder link (#) for your final project.  After you complete your final project, you will need to go back and update this link.

Here are some extra Tutorials, that you may find fun:

Flaming Font Tutorial

Background Videos

Background CSS


Background CSS Samples



body {
background-image: url(directory/yourimage.jpg);
background-repeat: no-repeat;
background-position:center top;


body {background:#ffffff url(‘directory/yourimage.jpg’) no-repeat right top



Download images from web.

Open Up Photoshop CS6

Select: File > Open

Use the square “Marquee” tool and draw a box around the portion of image you want.  Hold the “Shift” key down to make sure you keep it square.

Select: Edit > Copy

Select: File > New (then hit OK)

Select: Edit > Paste

Select: Image > Image Size >
– change the resolution to 72
– change the Height and Width to 250 pixels
– hit “OK”

Select: File > Save for Web

A new window will open, verify that you are using the jpeg preset, then select “Save”

Save the image as “NAMEXXXX.jpg” in the “Images” folder at wlac.us


In Dreamweaver:

Create new document called “index.html” and save it in the WLAC.US folder. (Do not create a separate a8 folder)


Select: insert > Image (placing the image you just made from photoshop.)

In the Properties palle, link the image to one of your assignments index page, for example “a1/index.html” (you can use the file browser to do so.