Energy Drink Website
OVERVIEW
Using Photoshop and HTML, you will create a web banner and a 4-page website for an energy drink company that you will have created. You will research some of the popular energy drink websites to find out what type of information they provide.
OBJECTIVE
Using Photoshop, creatively develop an energy drink can and a web page header. Using your knowledge of HTML, incorporate the header into an HTML document and develop a full website for a fictitious energy drink company.
Using Photoshop and HTML, you will create a web banner and a 4-page website for an energy drink company that you will have created. You will research some of the popular energy drink websites to find out what type of information they provide.
OBJECTIVE
Using Photoshop, creatively develop an energy drink can and a web page header. Using your knowledge of HTML, incorporate the header into an HTML document and develop a full website for a fictitious energy drink company.
Step 1: Create folder & set up Dreamweaver
Create a new folder on your desktop named "Energy_Drink". Inside this folder, create sub folders named _pages, _images, _files. Save all files for this project in the appropriate folders.
Step 2: Photoshop - Design your 3 energy drink cans
You are to design your own energy drink can. DO NOT USE A BRAND THAT ALREADY EXISTS.
Blank Soda Can Image: |
|
Examples:
Cans:
- Each can will have a different Flavor Name
- There should be the Energy Drink Logo on each can
- There should be a slight difference in each can (Color)
Step 3: Photoshop - Energy Drink Web Banner w/Hotspots
Using Photoshop, you will create a web banner for your energy drink website. Please follow the criteria below, and be sure to save the files into the appropriate folder. Research some of the popular energy drink websites to find out what type of information they provide.
Banner:
- Create a new Photoshop document that is 900 pixels wide and 250 pixels high.
- Be sure to include the picture of your energy drink can on the banner.
- Use a custom background for your banner.
- Use the type tool to include the name of your drink company.
- Include a slogan (i.e. – Nike, just do it!)
- Include the navigation inside the banner (Include the text "Home", "Flavors" "Events", "Sponsors")
Step 4: Dreamweaver - Begin Energy Drink Website Creation
Set up your website & template with DIVs and add in your header like usual. You will NOT create a spot for navigation like you previously did. You will be adding hotspots (links) on your banner to link to the other pages.
Step 5: Dreamweaver - Using hotspots to link image elements
Step 6: Dreamweaver - Complete Energy Drink Website Template.
Now, complete your home (index.html) page, flavors (flavors.html page), events (events.html) & sponsors (sponsors.html) pages
Common Page Items (every page):
- Common page items on every page should include your banner and footer.
- The footer should include the copyright right and who produced the site. (Your Name)
- Include information about the energy drink. (Ingredients, performance, awards, etc..)
- Include a relevant picture.
- Showcase two to four different energy cans and their different flavors.
- An explanation of the flavors of each can.
- Explain an event that your energy drink company will be hosting. (Include specifics: date, time location etc…)
- Include a relevant picture.
- Incorporate a corporate sponsor of your energy drink. (Actor, Actress, Band, TV Personality, etc..)
- Explain their role in the sponsorship of your drink.
- Include a relevant picture.
GRADING RUBRIC:
Banner/ Header follows all of the requirements: Size, Background, Can, Slogan, Drink Company Name, Navigation Bar
Banner/ Header were created in Photoshop and incorporate many creative/stylized elements.
Energy drink cans have all of the required elements and are displayed accordingly: Company Name, Flavor, Logo
Energy drink cans were created in Photoshop and incorporate many creative/stylized elements.
Homepage includes information about the energy drink and includes a relevant picture.
The Flavors Page Flavors Page showcases four different energy cans and their different flavors. Each flavor can is explained.
The Events Page explains an event that your energy drink company will be hosting. Includes a relevant picture.
Sponsors Page includes a corporate sponsor of your energy drink. It explains their role in the sponsorship of your drink and has a picture.
Creativity of the overall site is compelling and markets the energy company appropriately. Many stylistic features make the site aesthetically pleasing.
You present and explain your website in a clear and concise manner. You act is if you are a professional selling this product to a client. The website is turned in on time.
You always use classroom project time well. Conversations are primarily focused on the project and things needed to get the work done and are held in a manner that typically does not disrupt others.
Banner/ Header were created in Photoshop and incorporate many creative/stylized elements.
Energy drink cans have all of the required elements and are displayed accordingly: Company Name, Flavor, Logo
Energy drink cans were created in Photoshop and incorporate many creative/stylized elements.
Homepage includes information about the energy drink and includes a relevant picture.
The Flavors Page Flavors Page showcases four different energy cans and their different flavors. Each flavor can is explained.
The Events Page explains an event that your energy drink company will be hosting. Includes a relevant picture.
Sponsors Page includes a corporate sponsor of your energy drink. It explains their role in the sponsorship of your drink and has a picture.
Creativity of the overall site is compelling and markets the energy company appropriately. Many stylistic features make the site aesthetically pleasing.
You present and explain your website in a clear and concise manner. You act is if you are a professional selling this product to a client. The website is turned in on time.
You always use classroom project time well. Conversations are primarily focused on the project and things needed to get the work done and are held in a manner that typically does not disrupt others.