Final Project

Aim: How do we create a professional looking web site using the tools we've learned to sell merchandise?
Objective: Create a multi-page web site
Final Project Assignment 1
Final Project Assignment 2
Final Project Assignment 3
Final Project Assignment 4

Project Overview Sheet
Daily Progress Sheet






























IGNORE BELOW INFORMATION ---------------

Project and Page Descriptions:
You will create a web site of your choice. You may work with a partner.
  1. Decide on a topic for your final project
  2. Decide on a business name and logo - include a tagline/slogan
  3. Decide what pages you should include in your web site. Minimum of five(5) pages. Google: What pages should a web site have? Read the first 8 links to determine what the pages.
  4. Write a proposal for your web site in a word document. List all the pages and detail the content for each page.

If you need more guidance follow the outline below:
  1. Home- introduction to your site and its offerings.
    • Create a logo banner for the header area of your site in Photoshop. Be creative!
  2. Products or Whatever you are selling- display your products for sale on this page which can include tangible items, software, music, ideas and more...the sky is the limit, you just have to be able to represent your product with a picture you will take.
    • INCLUDE A descriptive VIDEO for your product/service or offering - use the video editing feature in Photoshop CS6 to edit the video.
  3. Contact -this page should contain all your contact information.
    • Full address (street address, city, state zipcode.......use any address)
    • Telephone
    • Email
    • Fax
    • Include a location map - directions (you can get this off the web)
  4. Support - this page offers customer support by providing a form that allows customers to contact you about any problems or to provide feedback on your products. Research other web sites and see what types of questions they ask.
  5. Events - this page should contain a monthly calendar that contains special sales and discounts noted on various days. For example: 15% off sale is listed on every Wednesday of the month. Create this calendar in Google, add the sale information and embed the code on this page.
  6. Advertisement Banner - Use the flaming text site or another to create an advertisement banner. Put this banner on your wiki.
  7. Additional pages of your choice = more credit as long as the above requirements are met first.



PROJECT INSTRUCTIONS:
STEP 1 - Start to modify a basic page and style sheet to get your result.
  1. Go to My Computer/Public Drive 331 and copy the folder FINAL PROJECT-CSS into your Web Design I folder
  2. Open the index file in your browser
  3. Open the index page and the master.css files in Notepad++
  4. Follow the instructions on the index page.
STEP 1A - Assign project tasks to each team member so that you are both busy working and not just watching.
PROJECT TASK LIST

STEP 2 - Decide on the "look & feel" (layout, colors, font face, size) of your site.
Modify the style sheet to define how you want your site to look.
  1. Define your site's color theme (the background color, the container colors, the font colors, family and size for each container and your paragraphs, headings, etc.). You can modify the existing code on your style sheet and ADD code to accomplish your goals. You can get color and layout ideas by looking at other web site

STEP 3 - Determine what you will be selling and a name for your business
  • Put information in your footer container, look at other web sites and see what they have in their footer.
  • In Photoshop, create the banner/logo
    • width =900px, height=150px for your site.
    • make your text look 3-dimensional special effects
    • put an image on the banner
    • put a slogan or tagline on your banner . Tagline examples
    • Save for the Web as a .jpg in your project's images folder
  • Change the code on your html page to display your banner image in the header area (Google: HTML image tag)

STEP 4 - Create the navigation bar
  • You should have the following text in your navigation bar area:
    • Home
    • Products
    • Contact
    • Newsletter
    • Events
    • You will modify the <a> tag hypertext link code on the index.html file's main-nav section. Each navigation bar text should link to the appropriate page. (The pages will be created in future steps.) Note: the home text is already linked to the index.htmlpage. Change the rest of the code in that section:
      • replace the "#" with the text: "products.html " to link that Product text to that page (which will be created below)
      • replace the "#" with the text: "contact.html"
      • replace the "#" with the text: "newsletter.html"
      • replace the "#" with the text: "events.html"
  • Define how you want your links to look in your style sheet (the .css file) Click here: define link colors: visited, hover, etc in CSS.

STEP 5 - Add content to the home page (index.html)
  • Open the index page and add the content on the home page. Visit other merchandise selling web sites for content and heading ideas and make up information.

STEP 6 - Create the contact page and add the content.
  • Create the page: Open your index.html file in Notepad and Go To: FILE--> SAVE AS: contact.html
  • Put your FULL address (street, city, state and zipcode), telephone number, email address and a location map (get one from widgetbox.com.

STEP 7 - Create and add content to the newsletter page.

STEP 8 - Create and add content to the events page. Describe events that you have during the month or year.
  • Create the page: Open your index.html file in Notepad and Go To: FILE--> SAVE AS: events.html
  • Go to Google Calendar and get the embed code for your calendar. (Click here for information on how to create a calendar)
  • Then go to widgetbox.com and search google calendar.
  • Change the title of the calendar in widgetbox
  • Scroll down on the left side of the page and find the "Calendar ID" window and paste your Google Calendar's embed code.
  • Press the "Get Widget" code and copy that code and paste it in your web site's calendar page.

STEP 9 - Create and add content to the products page - 6 items for sale
  • Create the page: Open your index.html file in Notepad and Go To: FILE--> SAVE AS: events.html
  • In your content area, insert a table to display your products and information.
  • Insert a table with 7 rows and 3 columns.
    • First row will contain the column headings.
    • One row for each product.
    • The first column will contain the image, second column the description and third column the price.
EXAMPLE:
Product
Description
Price
Product 1 Image
.....details.....
...$10.00
Product 2 Image


Product 3 Image


Product 4 Image


Product 5 Image


Product 6 Image



  • You will post 6 items for sale on the page. An image, a description and a pricefor each:
    • 4 ITEMS you will get off the web.
    • 2 ITEMS you will bring into class to photograph in a photography booth & modify in Photoshop

STEP 10 - Create a banner to advertise your web site.
  • Read about the importance of advertising.
  • Read about banner ads.
  • Do a search on advertising banner examples or click here or click here to see some examples.
  • Decide on a banner ad size. Make it animated (a moving advertisement banner)
  • Find a web site to create a free animated banner and create one. Put a bogus web site address in your ad that corresponds to the name of your site in your site's header banner or logo. (visit flamingtext.com or another site)
  • Post the advertisement banner on your wiki. Send your wiki page's URL: buterawork@schools.nyc.gov

IMPORTANT:
  • Make sure the pages look consistently similar -- your tables should not move when you go from page to page
  • images should be the same size on the products page.
  • Test your pages in the browser as you develop!

FOR 100 POINTS- Site Enhancements:
  • Any external web site links should open in a "New Browser Window" rather than the user leave your site. Use this Javascript code in place of your regular link HTML code and modify it: <a href="#" onClick="MM_openBrWindow('http://news.google.com','window2','menubar=yes,resizable=yes,width=500,height=500')">Click here to go to</a>
  • More pages (see the bottom of the project's task list for ideas).
  • Look for web site enhancements on the web.
  • Anything done in addition to the requirements outlined above.
  • Learn a simple programming/scripting language used on the web that allows the developer to make the page interactive.

Read, follow and TRY all the lessons up to EVENTS at www.w3schools.com Javascript Lessons clicking NEXT CHAPTER





































DREAMWEAVER INSTRUCTIONS:

STEP 1 - Start the project & decide on the layout
  1. Go into your Web Design I folder & create a new folder, name it Final Project
  2. Open Dreamweaver, define your site and point to that "Final Project" folder. All files for this site will be saved in this folder. Use these instructions if you have forgotten how to define a site:
  3. Create the layout for your web site (use a layout that you created in the previous table layout assignment). If you don't have a blank page in Dreamweaver, go to: File-->New --> HTML page. The layout will determine the location of your site's banner, your navigation bar and your content areas.
  4. Save this first page as index
  5. For more credit, use CSS (cascading style sheets) to create the entire web site.
STEP 2 - Decide on the look (colors, font face, size) for your site.
Modify the color, font family, size and other on your style sheet to define the following elements of your web site.
  1. Set up a style sheet for your site in Dreamweaverto define the following:

STEP 3 - Decide on a name for your business
  • In Photoshop, create the banner/logo for your site. Remember to File-->Save for Web as a .jpg into your FINAL PROJECT folder and use the colors you picked in Step 2 so your site is color coordinated!!!
  • INSERT your banner on the banner area of your index page.
STEP 4 - Create the navigation bar
  • Type the names of your links in your navigation bar area. You will link them later.
    • Your navigation bar must contain, at least, these links: Home, Products, Contact, Newsletter, Events
  • Go to FILE --> SAVE AS A TEMPLATE name it: Template1
  • LET ME KNOW WHEN YOU ARE HERE - in the next step you will be creating the rest of your pages from this template.
STEP 5 - Create all of your pages from the site's TEMPLATE
  • First CLOSE ALL the HTML pages you have open in Dreamweaver!
  • Go to: FILE --> NEW --> FROM TEMPLATE1
  • Save As: index (yes, replace the original index page)
  • Save As: products
  • Save As: contact
  • Save As: newsletter
  • Save As: events
  • Open each page and type a title at the top of the content area it identify them. For example, open the products page and at the top of the content area type: PRODUCTS
  • When done you will have the following 6 files in your FILES window task pane in Dreamweaver:
STEP 6 - Modify your TEMPLATE1 to link the navigation bar to the correct page.
  • Go to File--> Open Template1
  • Select each word on the navigation bar and link it to the appropriate page as you have done so in earlier exercises.
  • Extra points if you can figure out how to change the menu's link hover code in your style sheet (a:hover) so the text changes to a color other than white when you hover over it. Hint: Create a style sheet and link it to the pages.
STEP 7 - Add content to the home page
  • Open the index page and add the content on the home page. Visit other merchandise selling web sites for content and heading ideas and make up information.
STEP 8 - Add content to the products page - 6 items for sale
  • Open the products page
  • In your content area, Insert a table to display each of your product's image, description and price.
  • Insert a table with 6 rows and 3 columns.
  • You will post 6 items for sale on the page. An image, a description and a pricefor each:
      • 4 ITEMS you will get off the web.
      • 2 ITEMS you will bring into class to photograph in a photography booth & modify in Photoshop
STEP 9 - Add content to the contact page. Put your FULL address (street, city, state and zipcode), telephone number, email address and a location map (get one from widgetbox.com.
STEP 10 - Add content to the newsletter page. Describe your newsletter. Add a form to this page that allows someone to sign up for your newsletter. Think about what input fields you should have. Use your common sense to decide.
STEP 11 - Complete your events page. Describe events that you have during the month or year.
  • Go to Google Calendar and get the embed code for your calendar.
  • Then go to widgetbox.com and search google calendar.
  • Change the title of the calendar in widgetbox
  • Scroll down on the left side of the page and find the "Calendar ID" window and paste your Google Calendar's embed code.
  • Press the "Get Widget" code and copy that code and paste it in your web site's calendar page.
STEP 12 - Create a banner to advertise your web site.
  • Read about the importance of advertising.
  • Read about banner ads.
  • Do a search on advertising banner examples or click here or click here to see some examples.
  • Decide on a banner ad size. Make it animated (visit flamingtext.com)
  • Find a web site to create a free animated banner and create one. Put a bogus web site address in your ad that corresponds to the name of your site in your site's header banner or logo.
  • Post the advertisement banner on your wiki. Send your wiki page's URL: buterawork@schools.nyc.gov
IMPORTANT:
  • Make sure the pages look consistently similar -- your tables should not move when you go from page to page
  • images should be the same size on the products page.
  • Test your pages in the browser as you develop!

FOR 100 POINTS- Site Enhancements:
  • Any external web site links should open in a "New Browser Window" rather than the user leave your site. Use this Javascript code in place of your regular link HTML code and modify it: <a href="#" onClick="MM_openBrWindow('http://news.google.com','window2','menubar=yes,resizable=yes,width=500,height=500')">Click here to go to</a>
  • More pages
  • Look for web site enhancements on the web.
  • Anything done in addition to the requirements outlined above.
  • Navigation bar links change color when you hover.
  • Learn a simple programming/scripting language used on the web that allows the developer to make the page interactive.
Read, follow and TRY all the lessons up to EVENTS at www.w3schools.com Javascript Lessons clicking NEXT CHAPTER