Your assignment is to create a fully functioning website with 4 different pages that link to one another using HTML code and utilizing the root folder, absolute paths, and relative paths. The theme of the site is: HEROES or VILLAINS. This assignment will be weighted as a project grade.
- On your desktop, create your root folder and name it: YourFullName Root Folder. This is your directory - a place that includes all files in the website.
***Remember, ALL files need to be in your root folder (directory) to work. See the screenshot above to view how this folder should be organized.
- Make another folder in your Root folder names "jpegs".
- In Dreamweaver, File>New. Choose an html document with 2 column fixed left sidebar. Make sure HTML 5 is chosen and click "Create New File" under CSS.
- Name the style sheet: superheroes.css
- On the html page, change the name of the links on the left to: Home, Statistics, Background, Links
- In DW, click on SITE>MANAGE SITES. Then click NEW SITE. Then, name your site and define the local site folder as your ROOT FOLDER.
- Download 4 images from online (they don't have to be royalty free) and save them in the jpegs folder inside of the root folder.
- Every page should have the following metadata in the <head>: title, keywords, author name, and viewport.
***Everytime you write the superhero/villain's name, italicize it.
- Page 1: Index (<title> Home)
This page should include the following:
-An <h1> that says: [your superhero name]
-<h2> that says: A website about [your superhero name]
-Two <p> describing the superhero.
-An ordered list that lists their enemies (use an h2 tag to title the list).
-Add an embedded image (linked to in the root folder) of the superhero (ie images/iron man 4.png).
-Format the width of the image and give it alternate text.
-Save as index.html.
- Page 2: Statistics (<title> Statistics)
-Save a copy of your index file (click file>save as and save it as statistics.html). This makes a copy of your home page and names it statistics. Now change this page.
-An <h1> that says: Statistics.
-A paragraph describing the superhero's abilities and how he/she uses them.
-An h2 that says "Superpowers".
-An unordered list describing this superhero's powers.
-Embed another image (linked to in the root folder) of the superhero using his/her powers. Change the width and the alternate text.
- Page 3: Background (<title> Background)
-Save as background.html.
-<h1> that says: Background of [Superhero's name].
-3 short paragraphs describing the superhero's history, including his/her past.
-Embed an image (linked to in the root folder) of the superhero. Change the width and the alternate text.
- Page 4: Links (<title>Links)
-Save as links.html.
-An <h1>that says: Helpful Links.
-A short paragraph telling the user that he/she can learn more by clicking the links below.
-Add 3 links to 3 other web pages with more information and/or pictures of the superhero. Put the links in an unordered list. Title the list.
-Embed an image. Change the width and the alternate text.
- Go back to your other 4 pages and link your global navigation in each one. The code is already there, you just need to put in the path (shown in blue).
- Make sure you check your links on all 4 pages to make sure they work, because that's what I'll be doing when I grade them.
- Every time you write the superhero's name on each page, it should be italic (except for headlines or subheads).
- Use line breaks <br> where you think necessary.
- ***See the screenshot below to understand which color is which css code.
- Make the 4 pages first and THEN do the CSS.
- Make sure your style sheet is in your root folder and linked to ALL 4 pages.
- Change the CSS only in the CSS file, NOT in your html pages. This way, you only have to do it once!
- You may NOT keep the color scheme used on the template. I got my color scheme from this site. Use a color scheme consistent with the hero or villain.
- Change the h1 color (you'll have to write this CSS code)
- Change the h2 color (you'll have to write this CSS code)
- Change the background colors
- Change the link boxes
- Change the link boxes colors when they hover
- Change the font family for the body text, h1, & h2
Extra points (+3) if you you want to add a favicon:
- Search a favicon online. (or format one in PSD: must be 16px x 16px)
- Put it in your root folder.
- In the <head> of each page, type this code, but link to the favicon (the text in blue below will be changed for your own favicon path within the root folder)