Project 1 - My Favorites Web Site

Topic:

In this project you will create and design an original website. The subject will be My Favorites. You will create, link and style a home page and three content pages - My Favorite Things, Gallery of My Favorite Things, and My Favorite Historical Figure

Before you begin:

Inside the folder for your Web Design class, create a new folder named My Favorites Site. All site assets will be saved in this folder. This new folder should be completely separate from your Lesson Site folder.

Inside the My Favorite Site folder, create two subfolders, one name images and one named pages.

Task 1: Create Content Pages

1. Create the home page:
   1. Create a new page from your Template page. Save it immediately at the root of your My Favorites folder as index.html.
   2. Enter My Favorites Home Page in the title element in the head section.
   3. In the body of the page, create a heading1 element with the text My Favorite Things.
   4. Add a horizontal rule (not an image) below the heading.
   5. Add four paragraph elements, each with one of the following:
      Home, My Favorites Things, Favorites Gallery, Historical Figure
      
   6. Add paragraph element that welcomes your visitors to your site. Explain what they will find, etc.
   7. Add a paragraph element containing an email link to you with Email Me! or other appropriate text.
      
   8. Place a div element around the h1 and hr elements.
   9. Place another div element around the four category paragraphs.
   10. Add the style attribute to the second div: style="float:left; width:150'"
   11. Place another div element around the welcome paragraph.
   12. Place a div element around the paragraph containing the email link.
       
   13. Save the index page.
       
       
2. Create the My Favorite Things page:
   1. Create a new page from your Template page. Save it immediately in the pages folder your My Favorites site as favorites.html.
   2. Enter My Favorite Things in the title element in the head section.
   3. Add a three heading elements, smaller than h1: My Favorite Foods, My Favorite TV Shows, and My Favorite Movies
   4. Under the first header, add an unordered list to include five of your favorite things to eat.
   5. Under the second header, add an ordered list to list your tip five favorite television shows.
   6. Under the third header, add a definition list with your five favorite movies, and a description of why you liked each movie.
      
      
3. Gallery of My Favorite Things page:
   1. Create a new page from your template, and save it in the pages folder as favorites-table.html.
   2. Enter Gallery of My Favorite Things in the title element in the head section.
   3. In the body of the page, enter a heading2 element with the same text as the title element.
   4. Create a table with six rows and two columns.
   5. Merge the top row to a single cell.
   6. Enter a small amount of text in this header cell, to introduce your table and its contents.
   7. In the left column, enter a medium-sized header element to identify your five favorites (these can be taken from any category).
   8. Save your file.
      
      
4. My Favorite Historical Figure
   1. Create a new page from your template, and save it in the pages folder as historical-figure.html.
   2. Enter My Favorite Historical Figure in the title element in the head section.
   3. In the body of the page, enter a heading2 element with the same text as the title element.
   4. Create the following sections with appropriate heading elements: Biography, Accomplishments, and Learn More About...
   5. In the Biography section, include at least two paragraphs of biographical information (do not just cut and paste).
   6. In the Accomplishments section, outline the person’s major life accomplishments using an unordered list (include at least five accomplishments).
   7. In the Learn More About... section, include hyperlinks to three websites that contain additional information about your subject.
   8. Add a short paragraph before the links, which includes a citation stating the source of your information, and to explain what the links can provide to your users.
      
      

Task 2: Enhance, Link and Style Pages

1. Collect Images:
   1. You will need two images to illustrate each category of favorites, as well as at least one of your historical figure. You may collect extras to use in the Gallery and/or Home page.
   2. Visit various Royalty-free image and clip-art pages to locate an image for each of your favorites. Do not use copyrighted images without permission.
   3. Be sure to collect only medium-sized or smaller images, in order to not create long download times for your users.
   4. For each image you find, save the image into the images folder of your Favorites site, and record the source of the image. (Suggest you keep a Word document with this information.)
   5. You can find 'extra' images for some of the favorites, as you will need two for some of your favorites. (see below about where these will be used.)
      
      
2. Place Images on pages:
   1. Favorites page:
      1. Choose one image to illustrate each category.
      2. Place your chosen image to the right of its heading and add a style or other attribute to align it to the right.
      3. Add the source of the image as its alt text.
         
   2. Gallery page:
      1. In each right column cell, insert an image to illustrate the item you named in the left column.
         
      2. Add the source of the image as its alt text.
   3. Historical Figure:
      1. Add an images of your historical figure at the beginning of the first biographical paragraph.
      2. Add a style or other attribute to align it to the left placing it before the explanation paragraph.
      3. Add a second image if you wish, aligned to the right of the links section.
   4. Home page:
      1. Add any images you have not yet used to the home page to enhance your welcome paragraph.
      2. Add attributes to align them as you like.
         
         
3. Add hyperlinks:
   1. Navigation links:
      1. On the Home page, for each of the first four paragraphs create a link to the page to which it refers.
      2. Save the page and test the links.
         
   2. Internal Links to Historical figure page:
   1. Below the h2 element, add a paragraph to contain internal links, using the text: Biography, Accomplishments, and Learn More About...
      
   2. Between 'Biography' and 'Accomplishments', add three non-breaking space characters, the vertical bar character, then three more non-breaking space characters.
   3. Copy this separation section after' Accomplishments' and 'Learn More About...'
   4. Create a bookmark for the first section heading by adding the attribute id="bio" to the opening tag.
   5. Create bookmarks for the other two section headings in the same manner, using appropriate short identifiers.
   6. Link each link text to its appropriate bookmark.
   7. Add an id attribute to identify the title h2 element as top.
   8. Add a paragraph after each section with appropriate text that links back to the top of the page.
   9. Save, preview and test your hyperlinks.

Task 3: Add Style to your Pages

1. Based on the images you have chosen and the subject matter of your pages, choose colors to style your site:
   1. Choose a page background color and a text color to go with the background. (consider the color the links will be before and after clicking, so you don't choose a color that will hide them.)
   2. Choose two complementing colors for a title bar and navigation bar on all pages.
      
      
2. Add an a style or other attribute to the body element of all pages to set your chosen background and text colors.
   
   
3. Working on the index page, style the div elements:
   1. Add a style or other attribute to assign one of your accent colors as the background of the first div element.
   2. Repeat this color attribute in the email div.
   3. Add to the existing style element in the links div to add the second accent color as its background color.
   4. Save and Preview your page. You should have a color in your content section, a differently colored 'header' and 'footer' bar, as well as a links section in another color to the left of your welcome section. Make any changes needed.
      For example, you might want to adjust colors, or change the width of the links section for better balance with your welcome section arrangment. Now is the time to do this, before you copy your design to the other pages.
      
      
4. Copy the style elements to your other pages:
1. Copy the first two div elements to each of the other pages, placing the copy immediately after the opening body tag.
2. Copy the 'footer' div element to each of the other pages, placing the copy immediately before the closing body tag.
3. On the content pages, you will need to adjust the link paths for the index page (since it is not inside the pages folder, the link path will be different).
   
4. Save your pages and test your site, testing all links on all pages.
   
   
5. When you are satisfied with your site, save everything and close the files.

Task 4 - Publish your Site

1. Publish your Favorites site to your personal publish folder. When you are finished, your publish folder should have two folders - one for each of your published sites.
2. Close all windows pertaining to your site, and test your published site from its published location.
3. Have a friend test your site in its published location, using their own computer account. Particularly have them test all the links - this is the most common problem that occurs, that links do not work correctly for another user.