Skills

  • 804- Perform image management procedures.
  • 805-Demonstrate professional visual communication skills.
  • 1502-Demonstrate proper use of a text editor.
  • 1504-Add color and format text.
  • 1511-Insert an image in a webpage.
  • 1513-Create image maps.
  • 1602-Create and utilize inline styles to change page attributes.
  • 1603-Create and utilize embedded styles to change page attributes.
  • 1607-Create and link an external style sheet.
  • 804- Perform image management procedures.
  • 805-Demonstrate professional visual communication skills.
  • 1502-Demonstrate proper use of a text editor.
  • 1504-Add color and format text.
  • 1511-Insert an image in a webpage.
  • 1513-Create image maps.
  • 1602-Create and utilize inline styles to change page attributes.
  • 1603-Create and utilize embedded styles to change page attributes.
  • 1607-Create and link an external style sheet.

Resources:

Textbook: Adobe Photoshop CC: Classroom in a Book

Textbook: HTML5 and CSS

Adobe TV: http://tv.adobe.com/

Project Files

CAN ASSETS

Energy Drink Project: HTML & Photoshop

OVERVIEW

Using Photoshop and HTML, you will create a energy drink can, web banner, and a 5-page website for a fictitious energy drink company. You will research some of the popular energy drink websites to find out what type of information they provide. Explore the examples that are provided throughout the classroom. Creativity matters!

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.

INSTRUCTIONS

Using Photoshop and HTML use the guidelines below to create the website.

Can:

  • 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)

Banner:

  • Create a new Photoshop document that is 1280 pixels wide and around 300 pixels high.
  • Be sure to include the picture of your energy drink can in 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!)

Website Structure and CSS

  • All styling done in an External Style sheet
  • Use all basic required HTML elements such as the html, head, title, and body elements
  • Use all HTML5 structure tags in the site: (header, nav, main, section, footer- (aside and article are optional))

Website Common Page Items (every page):

  • Energy Drink Banner
  • Navigation with five page links that work
  • A footer that includes the copyright year and who produced the site. (Your Name)

Website Components: (These should be utilized in your website)

  • Unordered or Ordered Lists
  • Headings (h1-h6)
  • Images
  • Absolute Links
  • Email Link

Home Page:

  • Include information about the energy drink. (Ingredients, performance, awards, etc..)
  • Include a relevant picture.

Flavors Page:

  • Showcase four different energy cans and their different flavors.
  • An explanation of the flavors of each can.

Events Page:

  • Explain an event that your energy drink company will be hosting. (Include specifics: date, time location etc…)
  • Include a relevant picture.

Sponsors Page:

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

Contact Page:

  • Use a contact form for people to fill out for more information or questions
  • Include your company’s fictitious address and phone number

Add decorative creative elements to make each page attractive and informative! (Use your creativity)

EXAMPLES

ASSESSMENT

You will be graded according to the following criteria to earn a total of 75 points:

Criteria

Point Value

Point Earned

Banner/ Header follows all of the requirements.

  • Size
  • Background
  • Can
  • Slogan
  • Company Name

5

 

Banner/ Header were created in Photoshop and incorporate
many creative/stylized elements. 

5

 

Energy drink cans have all of the required elements and
are displayed accordingly.

  • Company Name
  • Flavor
  • Logo

5

 

Energy drink cans were created in Photoshop and
incorporate many creative/stylized elements.

5

 

Homepage includes information about the energy drink and
includes a relevant picture.

5

 

The Flavors Page Flavors Page showcases four different
energy cans and their different flavors.
Each flavor can is explained.

5

 

The Events Page explains an event that your energy drink
company will be hosting. Includes a relevant picture.

5

 

Sponsors Page includes a corporate sponsor of your energy
drink.  It explains their role in the
sponsorship of your drink and has a picture.

5

 

Contact Page includes a contact form.  It also gives the company name,
address, and phone number to be reached.

5

 

Common Website page elements appear on every page and
work.

5

 

All website components are utilized: Lists, headings,
links, and images.

5

 
All website styling is done in an external stylesheet.  All HTML and CSS code works, is properly nested, and organized.  Classes and id’s are used appropriately.  All common and basic html5 layout tags are used and used appropriately.

5

 

Creativity of the overall site is compelling and markets the energy company appropriately. Many stylistic features make the site esthetically pleasing.

5

 

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.

5

 

You always uses 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.

5

 

Total

75