use html and css. please choose a subgect from one of these cars , colors. books, vacation or flowers.this assignment must be in 6 pages in (HTML) and 1 page in (CSS)There is a website called w3schools.com for help with this workPlease see attachment for instruction.CIS 205 Final Project
This
is your opportunity to put together everything youâve learned and create your
own Web site! If youâd like, you can practice your interpersonal, communication
and project development skills by creating a prototype site for a small
organization or company as your project.
Your
site should follow good design rules, provide accessibility and ensure privacy
of any information gathered.
If
you have not done so already, create a folder named Final Project on cis.dbq.edu.
When you finish this project, copy all Web site final project files and folders
to this folder. The Word file you will create below should be uploaded to
UDonline.
Following
is a table with the actual Web site requirements. This table should be copied
into the Word file you will create below, and it should be filled out.
Web
Site Requirements:
Where
to Find the Requirement:
Content
of Web Site(39
points):
·
Appropriate number of pages (Web Project-Ch 5)
·
Stored graphics and media files in a subfolder (Ch 7)
·
Appropriately used heading
& paragraph tags (Ch 2)
·
An absolute
referenceto a useful sitethat
displays in its own window (Chpt. 2)
·
A graphic (Chpt. 4)
·
At least one pseudo-class
(Ch 6)
·
Multiple-column layout (Ch 6 & 7)
·
A tableutilizing
appropriate table row groups (tbody, etc.) The table should be used to
organize data. (Chpt. 8)
·
A form with three different types of form elements with appropriate
attributes (Chpt. 9)
Describe the three used below and note where each can be found.
1.
2.
3.
·
A form script that returns a confirmation
page
·
Two optional
form element attributes. Checked=âcheckedâ is an example of an optional
attribute used with radio buttons and check boxes.
List the elements and attributes used below and note where
each can be found:
1.
2.
·
Description and keyword Meta tags on every page used appropriately (Chpt. 13)
·
Call a JavaScript
function to implement at least one validation
rule in your form (Chpt. 14)
·
Include a jQuestion Assignment routine
List the routine used below and note where it can be found:
1.
·
Choose three
additional content features that work
with your site design and have not been otherwise required above. Each
feature can be used only once. Those might include:
·
a favicon
(Ch 4)
·
an image map
(Ch 4)
·
a audio or video
file (Chpt. 11)
·
a Java applet
(Chpt. 11)
·
a Flash file
(Chpt. 11)
·
an inline frame(Chpt.
13)
·
an event trigger
& handler (Chpt. 14)
Describe the ones you used below and note where each can be
found.
1.
2.
3.
CSS (Chpt. 3 & 6) (14 points):
Use CSS
for all formatting and page layout
·
Include at least ten
unique styles. You can only count any given declaration property once. For
example, the Color declaration property can be counted only once.
·
Additionally, include at least three unique CSS 3 styles.
·
Describe the ones you used below and note
where each can be found.
1.
2.
3.
Design
Elements(18
points):
·
Your Web site will be evaluated against the modified
Felke Web Design Checklist copied in below as Exhibit 1.
·
Implement one
other design features not included in the Design Checklist below. Note that
design features are about how the content looks on the page. This is
different from content components. Many of the design features were
introduced in Ch 5.
List them below and note where each can be found.
1.
Accessibility
(10 points):
List ten different ways in which accessibility was addressed, note how each enhances
accessibility, and note where each can be found.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
Marketing (4 points):
List four features below that help you market (Ch 5) or promote (Ch 13) the product, information or
services of the site and note where each can be found. Any given tag or
attribute can only be listed once.
1.
2.
3.
4.
Mobile (3 points):
List three features below that makes your site work on mobile
devices, note how each enhances the page for mobile delivery, and note where
each can be found.
1.
2.
3.
The
following information, along with a copy of the table above filled out
indicating where each piece of functionality can be found, should be included
in a single Word file.
Testing
Documents(Chpt. 10)(10
points):
·
A
test plan that is comprehensive and
filled out with the final test results. Start your test plan with the example
test plan from Ch 10. Next, add things you need to test that are specific to
your site. In the real world, a test plan would be created for each page. For
this project, just create a test plan for your page that contains the form.NOTE: This test plan is not the same as the usability test. It is in addition
to it.
·
Screen
shot of the home page in IE, Chrome and Firefox showing that the site was tested in these browsers
·
Output
from CSS Validator showing that the
code has no errors
·
Output
from XHTML Validator for every html
page showing no errors
Clean output from an accessibility test(ex.:.webaim.org/”>http://wave.webaim.org, achecker.ca) for
every html page
Results from usability tests
Use three people
Ask each three questions
Provide results in a Word table
Note the changes you made as a
result of this testing
Documentation
(extension of Ch 10) (2 points):
Create
user documentation for the page that contains a form. Think about the kind of
written instruction you would want to effectively use your page. This should
contain a good level of detail so it serves experienced as well as
non-experienced Web users.
Exhibit 1
Felke Web Design Best Practices Checklist (Modified)
Points
A. Page Layout
1. Appealing to target audience
2. Consistent site header/logo & navigation area
3. Informative page title that includes the
company/organization/site name
4. Page footer area — copyright, last update, contact e-mail
address
5. Good use of basic design principles: (3 pts)
Repetition
Proximity
Alignment
6. Displays without horizontal scrolling at 1024×768 and
higher resolutions
7. Balance of text/graphics/white space on page
8. Good contrast between text and background
9. The repetitive information (header/logo & navigation)
take up no more than 1/4 – 1/3 of the browser window at 1024×768 resolution.
10. Home Page has compelling, interesting information
“above the fold” (before scrolling down) at 800×600 resolution.
B. Navigation
1. Main navigation links are clearly and consistently labeled.
2. Navigation is easy to use for target audience.
3. If images or multimedia are used for the main navigation,
clear text links are provided in the footer section of the page.
4.
Navigation is structured in an unordered
list
5. Navigational aids, such as site map, skip navigation link,
link colors or styles that indicate the current page, sub titles that
indicate the current page, or breadcrumbs, are used.
6. All navigational links work.
C. Color and Graphics
1. Use of different colors in page backgrounds/text is limited
to a maximum of three or four.
2. Color is used consistently.
3. Use of color and graphics enhances rather than distracts
from the site.
4. Each graphic used serves a clear purpose.
D. Content Presentation
1. Common fonts such as Arial, Verdana, Georgia, or Times New
Roman are used.
2. Techniques of writing for the Web are used: bullet points,
short sentences in short paragraphs, use of white space, etc.
3. Consistent use of fonts, font sizes, and font colors.
4. Content provides meaningful, useful, information.
5. Content is organized in a consistent manner.
6. Information is easy to find (minimal clicks).
7. The purpose of the site is evident
8. Content is free of typographical and grammatical errors.
9. Avoid the use of “Click here” when writing text
for hyperlinks.
10. If standard link colors are not used, all links use a
consistent set of colors to indicated visited/non-visited status.
E. Functionality
1. All non-nav. hyperlinks work.
2. Full-size content displays where expected.
3. Content resizes properly
4. All forms function as expected.
Final
Points
Total Points Possible (34 – .5 point each)
