Vanity Page
People make vanity pages to tell other people about themselves.This kind of page can be used as a "resumé on the web", or just a place to brag about yourself. A Vanity Page can also be used to share your interests with your friends or family. MySpace is the ultimate vanity website and the layout is very simple.
Your assignment will be to create a Vanity Page about yourself. The style will be similar to the old MySpace but will only use HTML & CSS. You will use a div inside a div to create the needed look. Below are all the requirements for the page. Have Fun!
| Sample Layout |
 |
Layout HTML:
- Create a new html file using your template and save it as vanity.html
- In the body section, enter this code (copy and paste it):
- <div class="wrapper">
<div class="main_column_left">
<div class="box_a">A</div>
<div class="box_b">B</div>
<div class="box_c">C</div>
</div>
<div class="main_column_right">
<div class="box_d">D</div>
<div class="box_e">E</div>
<div class="box_f">F</div>
</div>
</div> - Link it to an external style sheet called "vanity_style.css" (put it in your CSS folder - css/vanity_style.css)
Layout CSS:
- All formating and styles changes should be made in the css file.
- In your vanity_style.css make these basic formating class changes:
- wrapper /// width of 1000px / position of relative / margin left & right of auto
- main_column_left /// float of left / width of 50%
- main_column_right /// float of right / width of 50%
- all box classes /// bottom margin of 10px / padding of 10 to 20 pixels
- Your basic final layout should look something like the sample to the right. Don't worry about the height of each box, that will change later when you fill in the data below.
Data - Put the required data in the specified cell:
- This cell contains your name, your website URL, and a picture (if available) of yourself.
- Put in 10-15 links to the sites you go to every day. Put in the target="_blank" attribute in each hyperlink
- This cell is dedicated to your musings. Pick a topic that you are passionate about (a point or a topic you want to expound on or any idea that you feel needs elaboration. You can also write about your essence (what defines YOU as a person). Put in about 200 words and have fun.
- This cell contains a list of your interests: Movies, Books, Hobbies, Heroes, Foes, Goals, etc. The more detailed the better. Link up all the content in this cell to websites, book stores, library pages, etc. It's all got to be linked!
- This cell is dedicated to your school, IHS. Create some type of homage (look it up!) to the school: pictures, facts, links, pictures. Tell others about the school (love it or hate it) and why. Remember, your teacher works at the school so don't be mean for the sake of being mean (I might cry :..-(
- This cell is dedicated to your friends or family. Add some photos, links to websites, myspace pages, or just some facts .
Final Touches:
- Make sure all styles are in the EXTERNAL STYLE SHEET
- Change the font color and font face
- Pick colors that complement each other
- Change the link colors (all four)
- Add header tags to all "BOX" sections
- Add any photos you need BUT make sure they are not over 450px wide.
- Use Unordered and/or Ordered Lists for all your list items
- Add at least one script from dynamicdrive.com
- Experiment with your look; turn borders on or off, change the border colors, change the background colors on each div (can be the same color- IF IT LOOKS GOOD), find a great background texture, put tables inside of tables, align your text in a professional manner, and don't accept anything except the very best.
- Let me know when you are finished
- EXTRA: you can add more divs if you have more to say
- You will be graded on all the RED words. Do them all plus more.