Description
Required:
2018/2019 Adobe Dreamweaver
2018/2019 Adobe Photoshop
2016 Adobe Animate
I. Purpose
The purpose of this assignment is to use your Web development skills to create a functional Website. Your Website will be based on the Flowchart and Storyboard that you created (Project #2) earlier in the semester. In addition to creating a Website, you will need to demonstrate the ability to post your site on your Mason server account (e.g., mason.gmu.edu/~username). You should also test your site to ensure that it is fully accessible and functional.
II. Steps
- Review your Storyboard document created in Project #2. If you carefully documented the design and navigation details for your Website, it will be a straightforward process to build your Website from the storyboard.
- Use Adobe Dreamweaver (2018 or 2019) to build your Website. There should be three storyboard pages for the Home page (i.e., desktop, tablet, and mobile) and one storyboard page for every other Web page in your Website.
- Your Website should meet the following requirements:
- 8 Web pages minimum.
- Use of FRAMES is not permitted!
- Disclaimer statement on the Home page or linked from the Home page. The disclaimer will state that this is a fictitious company and is developed as an education project. If any copyrighted materials are included in accordance to the multimedia fair use guidelines, a notice should be added and states that certain materials are included under the fair use exemption of the
- The Home page of your Website should be based on a responsive web design (RWD), so the layout and content adjust according to different device and screen sizes, i.e., desktop (769px~1232px), tablet (481px~768px), and mobile (480px and below).
- Each page should be properly titled both in the body as an <h1> heading AND in the <title> tag.
- One of the pages of your Website must be a Site Map.
- Your site should include the logo created in Project #3 (I’ve attached that as a document) (reduced from its original size of 200x200).
- Your site should include the Flash commercial created in Project #4 (I’ve attached that as a document) (at least 20 seconds long, no larger than 800x600).
- Your site should include some clip arts/images other than the logo.
- Your site should include an embedded widget or Web element (e.g., Google map, custom search, photo gallery, YouTube video, etc.).
- Your site should include a navigation bar/menu/tab with rollover buttons/links, which can be graphical, link or CSS-based.
- Your site should include a custom favicon on the Home page.
- For accessibility, insert a visible Skip Link on every page.
- For accessibility, use alt attributes on all images.
- For accessibility, use title attributes on all non-text objects (e.g., <object> tag, <iframe> tag)
- For accessibility, at least the Home page passes WAVE (http://wave.webaim.org/), a Web accessibility evaluation tool.
- At least the Home page passes the W3C markup validator (http://validator.w3.org/). The use of a CSS validator is optional.
- The Website must adhere to all Copyright and Fair Use guidelines and limitations (Lecture #9). Proper attribution and acknowledgement must be provided for graphic/content sources. Websites that do not adhere to Copyright and Fair Use guidelines will not receive a grade.
- The content must be suitable for all audiences. Content or images that may be misconstrued to be offensive to ANYONE is not acceptable, and the Website will not receive a grade.
- Post your Website on your Mason server account (e.g., mason.gmu.edu/~username).
- Test your Website. For added feedback, ask someone else to test your posted Website. Note: compatibility across all browsers is not part of the requirement, however, is encouraged. Mozilla Firefox will be used to examine your Website at the time of grading.
- Complete the Project #5 Submission Sheet
III. Grading
Note: the Website must be posted on your Mason Server account and accessible online to receive a grade. Use of FRAMES is not permitted!
Description | Points |
| Website conforms to storyboard | 1-25 |
| Minimum number of required pages (8) | 1-25 |
| Disclaimer statement on the Home page or linked from the Home page | 1 |
| The Home page is based on a responsive web design (RWD), i.e., desktop (769px~1232px), tablet (481px~768px), and mobile (480px and below) | 3 |
| Each page is properly titled both in the body AND in the <title> tag | 1 |
| Site Map exists and is a clear representation of the site content | 1.5 |
| Flash animation exists and is at least 20 seconds long and no more than 800x600 | 1.5 |
| Logo exists and is no more than 200x200 | 1 |
| Widget or Web element exists and is embedded into the page | 1.5 |
| Navigation bar/menu/tab with rollover buttons/links exists and is graphical, link or CSS-based | 1.5 |
| Custom favicon exists on the Home page. | 1.5 |
| Accessibility: Skip links are implemented | 1.5 |
| Accessibility: alt attributes on all graphics | 1.5 |
| Accessibility: title attributes on all non-text objects (e.g., <object>, <iframe>) | 1 |
| Accessibility: Home page passes WAVE | 1.5 |
| Proper attribution and acknowledgement are provided for graphic/content sources | 1.5 |
| Validation: Home page passes the W3C markup validator | 1.5 |
| Aesthetics: color and contrast is appealing; Professional appearance; Adhere to Design Principles; Clip arts/images (other than the logo) are used | 1 |
| Content and Website design shows effort; Website text is clearly written and free of spelling and grammatical errors. | 1 |
| Navigation is intuitive and consistent; No broken links, buttons, or graphics | 1 |
TOTAL | 25 |
Additional Notes:
- I am attaching the Storyboard that is needed to build each page of the website. You basically have to follow that.
- The logo that I created on Photoshop 2018 needs to be included in one of the page on the website.
- The animate that I created in 2016 adobe animate. You will need 2016 animate to open the file. The animation also goes on one of the page.
Studypool is not letting me attach the logo and animate that I have created but I will email that to you after.
Please let me know if you need any more clarification.
Unformatted Attachment Preview
IT213 Lecture: Project #5
Website (10% of Final Grade)
I. Purpose
The purpose of this assignment is to use your Web development skills to create a functional
Website. Your Website will be based on the Flowchart and Storyboard that you created (Project
#2) earlier in the semester. In addition to creating a Website, you will need to demonstrate the
ability to post your site on your Mason server account (e.g., mason.gmu.edu/~username). You
should also test your site to ensure that it is fully accessible and functional.
II. Steps
1. Review your Storyboard document created in Project #2. If you carefully documented the
design and navigation details for your Website, it will be a straightforward process to
build your Website from the storyboard.
2. Use Adobe Dreamweaver to build your Website. There should be three storyboard pages
for the Home page (i.e., desktop, tablet, and mobile) and one storyboard page for every
other Web page in your Website.
3. Your Website should meet the following requirements:
• 8 Web pages minimum.
• Use of FRAMES is not permitted!
• Disclaimer statement on the Home page or linked from the Home page. The
disclaimer will state that this is a fictitious company and is developed as an
education project. If any copyrighted materials are included in accordance to the
multimedia fair use guidelines, a notice should be added and states that certain
materials are included under the fair use exemption of the U.S. Copyright Law
and have been prepared according to the multimedia fair use guidelines and are
restricted from further use.
• The Home page of your Website should be based on a responsive web design
(RWD), so the layout and content adjust according to different device and screen
sizes, i.e., desktop (769px~1232px), tablet (481px~768px), and mobile (480px
and below).
• Each page should be properly titled both in the body as an heading AND in
the tag.
• One of the pages of your Website must be a Site Map.
• Your site should include the logo created in Project #3 (reduced from its original
size of 200x200).
• Your site should include the Flash commercial created in Project #4 (at least 20
seconds long, no larger than 800x600).
• Your site should include some clip arts/images other than the logo.
• Your site should include an embedded widget or Web element (e.g., Google map,
custom search, photo gallery, YouTube video, etc.).
• Your site should include a navigation bar/menu/tab with rollover buttons/links,
which can be graphical, link or CSS-based.
• Your site should include a custom favicon on the Home page.
• For accessibility, insert a visible Skip Link on every page.
• For accessibility, use alt attributes on all images.
1
•
For accessibility, use title attributes on all non-text objects (e.g., tag,
tag)
• For accessibility, at least the Home page passes WAVE
(http://wave.webaim.org/), a Web accessibility evaluation tool.
• At least the Home page passes the W3C markup validator
(http://validator.w3.org/). The use of a CSS validator is optional.
• The Website must adhere to all Copyright and Fair Use guidelines and limitations
(Lecture #9). Proper attribution and acknowledgement must be provided for
graphic/content sources. Websites that do not adhere to Copyright and Fair Use
guidelines will not receive a grade.
• The content must be suitable for all audiences. Content or images that may be
misconstrued to be offensive to ANYONE is not acceptable, and the Website will
not receive a grade.
4. Post your Website on your Mason server account (e.g., mason.gmu.edu/~username).
5. Test your Website. For added feedback, ask someone else to test your posted Website.
Note: compatibility across all browsers is not part of the requirement, however, is
encouraged. Mozilla Firefox will be used to examine your Website at the time of grading.
6. Complete the Project #5 Submission Sheet (saved in the “Project 5” folder) and submit
the completed document via Blackboard using the Assignments Tool (“Course Tools” →
“Assignments” →follow the “Project 5: Web-enabled Multimedia Site” link).
III. Grading
Note: the Website must be posted on your Mason Server account and accessible online to
receive a grade. Use of FRAMES is not permitted!
Description
Website conforms to storyboard
Minimum number of required pages (8)
Disclaimer statement on the Home page or linked from the Home page
The Home page is based on a responsive web design (RWD), i.e., desktop
(769px~1232px), tablet (481px~768px), and mobile (480px and below)
Each page is properly titled both in the body AND in the tag
Site Map exists and is a clear representation of the site content
Flash animation exists and is at least 20 seconds long and no more than 800x600
Logo exists and is no more than 200x200
Widget or Web element exists and is embedded into the page
Navigation bar/menu/tab with rollover buttons/links exists and is graphical, link or
CSS-based
Custom favicon exists on the Home page.
Accessibility: Skip links are implemented
Accessibility: alt attributes on all graphics
Accessibility: title attributes on all non-text objects (e.g., , )
Accessibility: Home page passes WAVE
Proper attribution and acknowledgement are provided for graphic/content sources
Validation: Home page passes the W3C markup validator
Aesthetics: color and contrast is appealing; Professional appearance; Adhere to
Design Principles; Clip arts/images (other than the logo) are used
2
Points
1-25
1-25
1
3
1
1.5
1.5
1
1.5
1.5
1.5
1.5
1.5
1
1.5
1.5
1.5
1
Content and Website design shows effort; Website text is clearly written and free of
spelling and grammatical errors.
Navigation is intuitive and consistent; No broken links, buttons, or graphics
TOTAL
3
1
1
25
IT 213 -- PROJECT 5 -- WEBSITE
(This is only a partial list of requirements for Project 5 – Open the Project 5 document on
Blackboard to find ALL requirements. You will save this completed document to Blackboard as
your Project 5 submission document!)
Your Name:
Section:
Type of Business:
(Commercial Company, Non-Profit Association, or Defense Contractor)
Final Hyperlink to your project (please hyperlink!):
Requirement
Student Response
Student
Comments
(not required!)
Number of pages you created in your
project (requirement--minimum 8 pages)
Disclaimer Statement and Fair Use
Statements (required on or linked from
Home Page)
Home page is based on Responsive Web
Design (i.e., desktop, tablet, and mobile)
Title in the body as an heading and in
the tags on ALL pages
Site Map
Flash animation
Logo
Clip arts/images (other than the logo)
Widget/Web element (YouTube, Google
map, etc.)
Navigation bar/menu/tab with rollover
buttons/links on ALL pages
Favicon on Home Page
Skip Links on ALL pages
Alt attributes on ALL graphics
Title attributes on ALL non-text objects
Home page passes WAVE
Home page passes W3C markup validator
Graphic sources are available
Any broken links, buttons or graphics?
Did you spell check?
Number of pages in your site:
BOLD and font color RED your
answer: (example—Yes No)
Yes No
Yes No
Yes No
Page:
Page:
Page:
Page:
Page:
Yes No
Yes No
Yes No
Yes No
Yes No
Yes No
Yes No
Under each graphic
Graphic Sources page
Yes No
Yes No
or
Project 2- Website Storyboard & Flowchart
Tatheer Akbar - takbar
ONLINE MOTOR BIKES
HOME PAGE
About
Us
Our Products
MY ACCOUNT
Buy Goods
Product 1
Online Payment
Product 1
Product 1
Product 1
Home Page
First Level
Second Level
Third Level
Fourth Level
List/Table of different products not webpages
Contact Us
Site Map
Storyboard Template for Multimedia Product Development
Client Name: Digital Motors Company
Project Title: Online Motors Bikes
Last Update: October 14, 2018
Name of Designer: Tatheer Akbar
Panel/Page ID: Index.html
Panel/Page/Frame No: Online Motors(Desktop)
Description of Copy text:
Online Motors Texts: Introductory text to our website
Font: Bungee Shade, Times New Roman Font Size: 32,21 and 16
Color codes used: #ffb5ba, #ffffff, #7d8594
User Interactions:
A Menu button with several buttons which are links to the other
web pages that are contained in this website.
-Footer links to other resourceful websites and social sites
Hyper Links:
-index.html
-aboutus.html
–myaccount.html
- ourcitemap.html
-contacts.html –products.html
Audio inclusion and
controls:
None
Video inclusion and
controls:
None
Color specifications:
Background: : #ffb5ba;
Navigation: #923f3f text , #FFFFFF background color for buttons,
Menu Button: background color white (#FFFFFF)
Body: background color: : #ffb5ba
Footer: Background Color White((#FFFFFF), Black(#000000) font
color
Panel Layout (Desktops)
Storyboard Template for Multimedia Product Development
Client Name: Digital Motors Company
Project Title: Online Motors Bikes
Last Update: October 14, 2018
Name of Designer: Tatheer Akbar
Panel/Page ID: Index.html
Panel/Page/Frame No: Online Motors
Description of Copy
text:
Online Motors Texts: Introductory text to our website
Font: Bungee Shade, Times New Roman Font Size: 32,21 and 16
Color codes used: #ffb5ba, #ffffff, #7d8594
User Interactions:
A Menu button with several buttons which are links to the other web
pages that are contained in this website.
-Footer links to other resourceful websites and social sites
Hyper Links:
-index.html
-aboutus.html
–myaccount.html
- ourcitemap.html
-contacts.html –products.html
Audio inclusion and
controls:
None
Video inclusion and
controls:
None
Color specifications:
Background: : #ffb5ba;
Navigation: #923f3f text , #FFFFFF background color for buttons,
Menu Button: background color white (#FFFFFF)
Body: background color: : #ffb5ba
Footer: Background Color White((#FFFFFF), Black(#000000) font color
Panel Layout (Tablets)
Storyboard Template for Multimedia Product Development
Client Name: Digital Motors Company
Project Title: Online Motors Bikes
Last Update: October 14, 2018
Name of Designer: Tatheer Akbar
Panel/Page ID: Index.html
Panel/Page/Frame No: Online Motors
Description of Copy
text:
Online Motors Texts: Introductory text to our website
Font: Bungee Shade, Times New Roman Font Size: 32,21 and 16
Color codes used: #ffb5ba, #ffffff, #7d8594
User Interactions:
A Menu button with several buttons which are links to the other web
pages that are contained in this website.
-Footer links to other resourceful websites and social sites
When opened on a mobile device, it’s going to shift into one column.
Hyper Links:
-index.html
-aboutus.html
–myaccount.html
- ourcitemap.html -contacts.html –products.html
Audio inclusion and
controls:
None
Video inclusion and
controls:
None
Color specifications:
Background: : #ffb5ba;
Navigation: #923f3f text , #FFFFFF background color for buttons,
Menu Button: background color white (#FFFFFF)
Body: background color: : #ffb5ba
Footer: Background Color White((#FFFFFF), Black(#000000) font color
Panel Layout (Mobile Devices)
Storyboard Template for Multimedia Product Development
Client Name: Digital Motors Company
Project Title: Online Motors Bikes
Last Update: October 14, 2018
Name of Designer: Tatheer Akbar
Panel/Page ID: myaccount.html
Panel/Page/Frame No: User Account(Profile Page)
Description of Copy text:
User Account Text: Display Users Details and Transaction Records
and Other user information related to users.
Font: Bungee Shade, Times New Roman Font Size: 32,21 and 16
Color codes used: #ffb5ba, #ffffff
User Interactions:
A Menu button with several buttons which are links to the other web
pages that are contained in this website.
-Footer links to other resourceful websites and social sites
Hyper Links:
-index.html
-aboutus.html
–myaccount.html
-buygoods.html
- ourcitemap.html -contacts.html –products.html –onlinepay.html
Audio inclusion and controls:
None
Video inclusion and controls:
None
Color specifications:
Background: : #ffb5ba;
Navigation: #923f3f text , #FFFFFF background color for buttons,
Menu Button: background color white (#FFFFFF)
Body: background color: : #ffb5ba
Footer: Background Color White((#FFFFFF), Black(#000000) font color
Panel Layout
Storyboard Template for Multimedia Product Development
Client Name: Digital Motors Company
Project Title: Online Motors Bikes
Last Update: October 14, 2018
Name of Designer: Tatheer Akbar
Panel/Page ID: ourproducts.htnl
Panel/Page/Frame No: Our Products
Description of Copy text:
Our Products Texts: Display a list of products and their features
Provided by the company.
Font: Bungee Shade, Times New Roman Font Size: 32,21 and 16
Color codes used: #ffb5ba, #ffffff
User Interactions:
A Menu button with several buttons which are links to the other
web pages that are contained in this website.
-Footer links to other resourceful websites and social sites
-graphs and Charts
Hyper Links:
-index.html
-aboutus.html
–myaccount.html
- ourcitemap.html -contacts.html –products.html
Audio inclusion and
controls:
None
Video inclusion and
controls:
None
Color specifications:
Background: : #ffb5ba;
Navigation: #923f3f text , #FFFFFF background color for buttons,
Menu Button: background color white (#FFFFFF)
Body: background color: : #ffb5ba
Footer: Background Color White((#FFFFFF), Black(#000000) font
color
Panel Layout
Storyboard Template for Multimedia Product Development
Client Name: Digital Motors Company
Project Title: Online Motors Bikes
Last Update: October 14, 2018
Name of Designer: Tatheer Akbar
Panel/Page ID: contactus.html
Panel/Page/Frame No: Contact Us
Description of Copy text:
Contact Us: Display basic contact informatio i.e emails, phone number
etc.
Font: Bungee Shade, Times New Roman Font Size: 32,21 and 16
Color codes used: #ffb5ba, #ffffff
User Interactions:
A Menu button with several buttons which are links to the other web
pages that are contained in this website.
-Footer links to other resourceful websites and social sites
Hyper Links:
-index.html
-aboutus.html
–myaccount.html
- ourcitemap.html -contacts.html –products.html
Audio inclusion and controls:
None
Video inclusion and controls:
None
Color specifications:
Background: : #ffb5ba;
Navigation: #923f3f text , #FFFFFF background color for buttons,
Menu Button: background color white (#FFFFFF)
Body: background color: : #ffb5ba
Footer: Background Color White((#FFFFFF), Black(#000000) font color
Panel Layout
Storyboard Template for Multimedia Product Development
Client Name: Digital Motors Company
Project Title: Online Motors Bikes
Last Update: October 14, 2018
Name of Designer: Tatheer Akbar
Panel/Page ID: aboutus.html
Panel/Page/Frame No: About Us
Description of Copy
text:
About Us: Description of the company, Objectives, its locations and
other relevant information about the company.
Font: Bungee Shade, Times New Roman Font Size: 32,21 and 16
Color codes used: #ffb5ba, #ffffff
User Interactions:
A Menu button with several buttons which are links to the other web
pages that are contained in this website.
-Footer links to other resourceful websites and social sites
Hyper Links:
-index.html
-aboutus.html
–myaccount.html
- ourcitemap.html -contacts.html –products.html
Audio inclusion and
controls:
None
Video inclusion and
controls:
None
Color specifications:
Background: : #ffb5ba;
Navigation: #923f3f text , #FFFFFF background color for buttons,
Menu Button: background color white (#FFFFFF)
Body: background color: : #ffb5ba
Footer: Background Color White((#FFFFFF), Black(#000000) font color
Panel Layout
Storyboard Template for Multimedia Product Development
Client Name: Digital Motors Company
Project Title: Online Motors Bikes
Last Update: October 14, 2018
Name of Designer: Tatheer Akbar
Panel/Page ID: buyonline.php
Panel/Page/Frame No: Get Your Motor Bike
Description of Copy text:
Get Your Motorbike Text: Display form to be used for product
specification/selection before buying.
Font: Bungee Shade, Times New Roman Font Size: 32,21 and 16
Color codes used: #ffb5ba, #ffffff
User Interactions:
A Menu button with several buttons which are links to the other web
pages that are contained in this website.
-Footer links to other resourceful websites and social sites
Hyper Links:
-index.html
-aboutus.html
–myaccount.html
- ourcitemap.html -contacts.html –products.html
Audio inclusion and
controls:
-Voice Messages to alert user in case of invalid selections from forms
Video inclusion and
controls:
None
Color specifications:
Background: : #ffb5ba;
Navigation: #923f3f text , #FFFFFF background color for buttons,
Menu Button: background color white (#FFFFFF)
Body: background color: : #ffb5ba
Footer: Background Color White((#FFFFFF), Black(#000000) font color
Panel Layout
Storyboard Template for Multimedia Product Development
Client Name: Digital Motors Company
Project Title: Online Motors Bikes
Last Update: October 14, 2018
Name of Designer: Tatheer Akbar
Panel/Page ID: onlinepayment.php
Panel/Page/Frame No: Online Payment
Description of Copy text:
Online Payment Text: a form to manage online payment
Font: Bungee Shade, Times New Roman Font Size: 32,21 and 16
Color codes used: #ffb5ba, #ffffff
User Interactions:
A Menu button with several buttons which are links to the othe r
web pages that are contained in this website.
-Footer links to other resourceful websites and social sites
-Animation showing how to place orders and buy goods online
Hyper Links:
-index.html
-aboutus.html
–myaccount.html
- ourcitemap.html -contacts.html –products.html
Audio inclusion and controls:
-Voice Messages to alert user in case of wrong inputs during online
payments
Video inclusion and controls:
Short videos included to show how transactions are done
Color specifications:
Background: : #ffb5ba;
Navigation: #923f3f text , #FFFFFF background color for buttons,
Menu Button: background color white (#FFFFFF)
Body: background color: : #ffb5ba
Footer: Background Color White((#FFFFFF), Black(#000000) font
color
Panel Layout
Storyboard Template for Multimedia Product Development
Client Name: Digital Motors Company
Project Title: Online Motors Bikes
Last Update: October 14, 2018
Name of Designer: Tatheer Akbar
Panel/Page ID: sitemap.html
Panel/Page/Frame No: Site Map
Description of Copy text:
Site Map Text: Site Map (indexed site information);
Font: Bungee Shade, Times New Roman Font Size: 32,21 and 16
Color codes used: #ffb5ba, #ffffff
User Interactions:
A Menu button with several buttons which are links to the other web
pages that are contained in this website.
-Footer links to other resourceful websites and social sites
Hyper Links:
-index.html
-aboutus.html
–myaccount.html
- ourcitemap.html -contacts.html –products.html
Audio inclusion and controls:
-None Included
Video inclusion and controls:
-None Included
Color specifications:
Background: : #ffb5ba;
Navigation: #923f3f text , #FFFFFF background color for buttons,
Menu Button: background color white (#FFFFFF)
Body: background color: : #ffb5ba
Footer: Background Color White((#FFFFFF), Black(#000000) font color
Panel Layout
Purchase answer to see full attachment
Purchase answer to see full attachment
User generated content is uploaded by users for the purposes of learning and should be used following Studypool's honor code & terms of service.
Explanation & Answer
Hello please Check it out, i stored the...
Review
Review
Anonymous
Great content here. Definitely a returning customer.
Studypool
4.7
Trustpilot
4.5
Sitejabber
4.4
Similar Content
Estate Transactions in The Sacramento Area Dataset Questions
Assignment 3
This is a individual assignment.
For this assignment, you will use the Sacramento.csv file (available in Tool...
Discussion questions
answer these questions, 8-10 sentences each.MG 3021-Discuss how women’s style of leading is typically different from men...
George Mason University Python Programming and Coding Worksheet
please help me answer the questions for this paper. It really memasn a lot if you can ...
Shopping Store Item Cost & Receipt Python Programming Exercise
Please must go through the video instruction provided below: https://www.loom.com/share/b073696d398e4711bc032a3...use goog...
Transform Laplace transform to MATlab
Please transform the following 2 Laplace transform solution to MATlab........................................................
HTML CSS George Washington University Alice in Wonderland File Discussion
Question 1 Enhance the HTML Alice in Wonderland file that you created in class by adding CSS styling. Feel free to add oth...
Sql Language
These days most of the business have moved to databases, as it has made life easier for developing businesses. Businesses ...
Assign 4 Sql Fa20.edited
1. Create a new table to track the library location. (4 pts) LIBRARY (lib_id, lib_name, lib_address, lib_city, lib_state, ...
Assignment 2 Masour Final
You must submit two separate copies (one Word file and one PDF file) using the Assignment Template on Blackboard via the a...
