Final+Project

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

Project Overview Sheet Daily Progress Sheet

You will create a web site of your choice. You may work with a partner.
 * IGNORE BELOW INFORMATION --- **
 * Project and Page Descriptions: **
 * 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!
 * 1) **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.
 * 1) **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)
 * 1) **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.
 * 2) **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.
 * 3) **Advertisement Banner -** Use the flaming text site or another to create an advertisement banner. Put this banner on your wiki.
 * 4) //Additional pages of your choice = more credit as long as the above requirements are met first.//

PROJECT TASK LIST
 * 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.

Modify the style sheet to define how you want your site to look.
 * STEP 2 -** **Decide on the "look & feel" (layout, colors, font face, size)** of your site.
 * 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
 * **NOTE**: You an either create your banner first (step 3 below) and then coordinate your site's colors **OR** you can decide on your colors first and then use those colors when you create your banner. Either way, the colors in your banner must work with the colors on your site.
 * page's background color
 * colors of each container
 * text color and font face which must contrast well with your background color for EASY reading!!
 * [|font style/family],(more info: [|font style/family]
 * Make sure it's EASY TO READ!
 * Heading 1 color and font face
 * Heading 2 (subheadings) color
 * Link colors, link hover effects, etc.
 * **Color References:**
 * [|Hex Color Chart]
 * [|Color Scheme Designer]
 * [|Design/Color Ideas]
 * [|Importance of Color]
 * [|Psychology of colors]


 * 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 **** 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.html**page. 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**.
 * Create the page: Open your index.html file in Notepad and Go To: FILE--> SAVE AS: **newsletter.html**
 * 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. (Click here for information on how to create a form. Your form will have different input fields.)


 * 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.

EXAMPLE:
 * 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.
 * 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 **price**for 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: http://news.google.com ','window2','menubar=yes,resizable=yes,width=500,height=500')">Click here to go to
 * 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:**

Modify the color, font family, size and other on your style sheet to define the following elements of your web site.
 * 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:[[file:Defining a Site.docx]]
 * 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.
 * 1) Set up a style sheet for your site in Dreamweaverto define the following:
 * Background color (change the body section of style sheet)
 * Main text color and font face (must contrast well with background color for EASY reading!!) (body section)Decide on your [|font style/family],(more info: [|font style/family]) for your page and/or individual headings. Make sure it's EASY TO READ!
 * Heading 1 color and font face
 * Heading 2 (subheadings) color
 * Link colors, link hover effects, etc.
 * **Color References:**
 * [|Hex Color Chart]
 * [|Color Scheme Designer]
 * [|Design/Color Ideas]
 * [|Importance of Color]
 * [|Psychology of colors]


 * 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 u//**se 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:
 * Template1.dwt (the dwt = Dreamweaver template)
 * index.htm
 * products.htm
 * contact.htm
 * newsletter.htm
 * events.htm
 * You may even have a .css file in there if you decide to create and use a style sheet for your site.
 * 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 **price**for 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!

Read, follow and TRY all the lessons up to EVENTS at **[|www.w3schools.com Javascript Lessons clicking NEXT CHAPTER]**
 * 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: http://news.google.com ','window2','menubar=yes,resizable=yes,width=500,height=500')">Click here to go to
 * 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.