|
Project Goals:
In this site you will apply what you learned during the graphics lessons, XHTML tutorial and CSS tutorial.
Project Overview:
In this first project you will build a site that contains biographical information about you*.
Site Requirements:
- Use a three box layout with banner box, menu box and main box (as used in the CSS tutorial).
- A menu with links to Home, Biography, Favorite Sites, Contact.
- The Home page will contain a picture of you.
- The Biography page will have a different picture of you and at least three paragraphs of text.
- The Favorite Sites page will have links to three of your favorite sites. There will be a description of each site and an image (usually the logo) from that site. The logo image will be linked to the site.
- The Contact menu will be an email link to you.
Steps:
- Before beginning this project make sure you visit the student samples for biography sites. View a few of the sites so that you can better understand the requirements of this project.
- Start a new site named My Bio in Dreamweaver. (for details see Class Lessons/Dreamweaver/Starting a New Site)
- Create a new .html file and save it as index.html. (Select New from the File menu. In the New Document window select HTML for the Page Type. In the Doc Type area select XHTML 1.0 Strict. Press the Create button. Save the file using the name index.html. )
- Create a new .css file and save it as main.css (In Dreamweaver choose File, New then select CSS from Page Type. Press Create)
- In order to link index.html to the style sheet main.css add the following line of code into the head section of index.html:
<link href="main.css" rel="stylesheet" type="text/css" />
- In order to pass the validation testing when the site is finished replace:
<html xmlns="http://www.w3.org/1999/xhtml">
with
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
- Create the banner box. Use a maximum of 800px for the width and a maximum of 120px for the height.
- Create the menu box. Use a maximum of 800px for the width and a maximum of 30px for the height.
- Create the main box. Use a maximum of 800px for the width and a height of auto. Set the overflow style to auto.
- Create a banner image using Photoshop. Place the image in your banner box.
- Create the menu with links to the pages Home, Biography and Favorite Sites, and an email link to your school email account named Contact.
- Duplicate index.html two times. (Select index.html in the Files palette on the right side of the Dreamweaver screen and press Ctrl-D)
- Rename the files bio.html and fav_sites.html.
- On index.html place an image of you with your name located either above or below. Add any other items that will enhance the look of the page.
- On bio.html add another image of you and at least three paragraphs of text. Add the styles of your choice to enhance the visual appeal of the page.
- On fav_sites.html add links to three of your favorite web sites. Each site must include an image taken from that site (usually the logo) that is linked to the site. There needs to be a description of each site. Add the styles of your choice to enhance the visual appeal of the page.
- When the site is completed you will need to validate the code from each page, including the main.css file. Use the instructions found at Class Lessons/CSS Tutorial/XHTML Validation for the .html files and Class Lessons/CSS Tutorial/CSS Validation for the main.css file.
- After validation, FTP the site to the class web server so that it can be graded. (for details see Class Lessons/Dreamweaver/'FTP'ing to the Server)
- View your site in both Internet Explorer and FireFox. (Open a browser and enter the url: hs-web-class/yourLastName_yourFirstName. Select your project from the list.
- If there are problems, fix the errors, FTP the corrected items to the server and preview the site again. Repeat this process until the entire site is error free.
- Place a note on the teacher's desk indicating that the site is ready to be graded.
*If you are not comfortable about putting information about you on a web site you can create a fictitious character.
|