|
In this project you will build a web site dedicated to the celebrity of your choice, as long as it is school appropriate.
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, Discography or Filmography, Join and Contact.
- The Home page will contain a picture of the celebrity.
- The Biography page will have several pictures of the celebrity and at least five paragraphs of text.
- The Discography or Filmography page will list the albums or movies associated with the celebrity. Each album or movie will have an image of the album or movie and a description.
- The Join page will have a form that allows users to join the celebrities fan club.
- The Contact menu will be a fictitious email link to the fan club.
Steps:
- Before beginning this project make sure you visit the student samples for fan club sites. View a few of the sites so that you can better understand the requirements of this project.
- Start a new site named 'Celebrity' 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 Basic page. Press Create)
- 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">
- 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" />
- 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.
- Create a banner image using Photoshop. Place the image in your banner box.
- Create the menu with links to the pages Home, Biography, Discography or Filmography, Join and Contact, an email link to a fictitious email account at your celebrity site.
- Duplicate index.html three times. (Select index.html in the Files palette on the right side of the Dreamweaver screen and press Ctrl-D)
- Rename the three new files bio.html, discography.html or filmography.html and join.html.
- Add the content to the index, bio and discography or filmography pages. Be creative. It is up to you to decide what will be on the pages and how it will be presented.
- The join page will need a web form that allows users to sign up to be members for the fan club. Instructions on how to create a web form can be found at Web Form Tutorial.
- Add a form element (name=fan_club, action=/scripts/fan_response.php, method=post)
- A fieldset with a legend of Address Information, to include:
- a label of First name: and a text field for first name (name=first_name)
- a label of Last name: and a text field for last name (name=last_name)
- a label of Street: and a text field for street (name=street)
- a label of City: and a text field for city (name=city)
- a label of State: and a select item (dropdown list) for the state input (name=state).
- a label of ZIP: and a text field for zip code (name=zip, max size = 5)
- a label of Email: and a text field for email address (name=email)
- A fieldset with a legend of Personal Information to include:
- a radio group (name=gender) with option buttons for:
- male (label=Male, value=M)
- female (label=Female, value=F)
- a radio group (name=age) with option buttons for:
- under 12 (label=Under 12, value=less than 12)
- 12-15 (label="12-15", value="12 to 15")
- 16-20 (label="16-20", value="16 to 20")
- over 20 (label="Over 20", value=" more than 20")
- a set of check boxes so that the user can select from six available choices of hobbies/interests (use names of "hobby_01" through "hobby_06" for the six hobbies, and value="the hobby", value=Watching Birds for example, for each of the six choices).
- A fieldset with a legend of 'Comments' to include:
- a textarea (name=comments) for the user to enter comments.
- A button (type=submit, name=submit, value= Join Now).
- A button l(type=reset, name=reset, value= Clear Form).
- 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 .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: msd-hs-read180/your_login_name. 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.
|
|
|