Business Web Page Design
Site Development,
Principles of Good Web Design,
& Publishing
Name: _________________________________________
Period________
Due Date: _____________________________
Task
Points

Matching Definitions and Terms from Chapter 1 and
attach sheet
30

Bad Web Design
15

Web Page Design Principles PowerPoint
60

Color for Coders
20

Crossword Puzzle
20
Earned
Points
Publishing a Web site


Find a Domain Name
10
ISP Information Activity
20
TOTAL
Document1
10/19/2009
175
1
Read Chapter 1 of HTML textbook pages 4-9
Matching Definitions & Terms
1. _______Host computer
2. _______Client
3. _______Web browser
4. _______Web site
5. _______Home page
6. _______Index
7. _______ISP
8. _______ e-commerce
9. _______ intranet
10. _______ extranet
a. The first page of a website that typically provides information
about the web site’s purpose and content.
b. Provides temporary connections to the Internet to individuals,
companies, or other organization through its permanent Internet
connection.
c. A private network where company can share information among
its employees. Access is restricted to those within the company.
d. The name given to the home page of a website.
e. A network server.
f. A private network used to share business information with select
corporate partners or key customers outside the company.
Password protected.
g. A group of related web pages that are linked together.
h. The process of buying and selling of goods and services on the
internet.
i. A software program that requests a web page, interprets the
HTML code and then displays the contents of the web page on
your computer screen.
j. Your computer from which you access the information.
Search the internet to complete the matching
Types of Web Sites
1. _______ Portal
2. _______ Informational
3. _______ Business/Marketing
4. _______Educational
5. _______ Entertainment
6. _______ Social Network
7. _______ Personal
8. _______Wiki
9. _______ Blog
Document1
a. A collaborative web site allows users to create, add to,
modify, or delete the website contents via their web browser.
b. Online community that encourages members to share their
interest, stories, photos, music and videos with other
members.
c. Provides avenues for formal and informal teaching and
learning
d. Offers an interactive environment and contains music, video,
sports, games, and other similar features.
e. Contains factual information, such as research and statistics.
f. Short for Weblog, uses regularly updated journal format to
reflect the interests, opinions, and personality of the author.
g. Is published by an individual or family and generally is not
associated with any organization.
h. Provides a variety of Internet services from a single,
convenient location.
i. Contains content that promotes or sells products of services.
j. Contains news articles relating to current events.
10/19/2009
2
Read Chapter 1 of HTML textbook pages 14-22
In the table below write the 5 Phases of Website Development and describe
what is involved in each phase.
WEB DEVELOPMENT PHASE
1
WHAT IS INVOLVED IN PHASE
2
3
4
5
Website Structures
1. ________Navigation Map
2. ________Linear
3. ________Web
4. ________Hierarchical
5. ________Deep
a. A good way to organize complex bodies of information.
b. User navigates sequentially, moving from one page to the next
with information flowing like a narrative
c. Many levels of pages requiring user to click many times to read
a particular page.
d. Consist of a number of topics of equal importance
e. Outlines the structure of the entire web site showing all pages
within the site and the connections from one page to the
others.
Assignment: go to www.utah.gov.
1. Find the site map. How many sections is the site divided into according to the site map? ______
2. What kind of a website structure or combination of structures do you think this site uses?
______________________________________________________________________________
Document1
10/19/2009
3
Bad Web Design Activity
Sometimes it is easier to understand good design principles by looking first at badly designed web sites
and examining what is bad about them. You will do exactly that in this first activity. Follow the directions
and fill in the table with 15 important things to learn from this website.
1. Open the following web site: http://www.angelfire.com/super/badwebs/main.htm
1.
2.
3.
4.
5.
6.
7.
8.
9
10.
11.
Hyperlink Problems to avoid:
12.
13.
14.
15.
Document1
10/19/2009
4
Click on Here’s some links. Visit http://fuzzymartian.tripod.com/ and
http://www.dokimos.org/ajff
What was bad about these two sites?
Fuzzymartian
Dokimos:
Web Page Design Principles PowerPoint
Consistency
1. __________________________ means making each page look the same and have each page
work the same on web site ________________. It is about looking
_______________________________. Even if it’s a bad design, at least make it a consistently,
bad design.
2. ______________________ forces people to spend extra time trying to figure out how to
navigate or where to find the answers to questions they have.
3. Elements that should be consistent:
a.
_____________________________________________________________________
b.
_____________________________________________________________________
c.
_____________________________________________________________________
d.
_____________________________________________________________________
e.
_____________________________________________________________________
f.
_____________________________________________________________________
g.
_____________________________________________________________________
4. Tools to help achieve consistency: __________________________, ______________________
Repetition, Rhythm and Harmony
Document1
10/19/2009
5
5. _______________________ is the duplication of specific elements on all pages of a website
which allows the user to become familiar and comfortable with your site.
6. Repeating an element creates a sense of __________________________. This flow can be
defined as ______________________. Three ways to use repetition to create rhythm are:
a. ______________________________________________________________________
b. ______________________________________________________________________
c. ______________________________________________________________________
7. _____________________________ is fostered by using similar fonts and colors, and pictures
which match the topic and help communicate the message. Harmony ensures that all the items
which are present on a page appear to belong there and different pages in the site are similar in
content and design.
8. ________________ can also be used to harmonize by spreading interest throughout the design
keeping it lively and interesting.
Clarity
9. Clarity requires designer to pare the message down to the absolute _______________________
the learner needs to know. Rules for improving clarity:
a.
______________________________________________________________________
b.
______________________________________________________________________
c.
______________________________________________________________________
d.
______________________________________________________________________
e.
______________________________________________________________________
f.
______________________________________________________________________
g.
______________________________________________________________________
h.
______________________________________________________________________
i.
______________________________________________________________________
Simplicity
10. Suggestions for keeping your message as simple as possible.
Document1
a.
_____________________________________________________________________
b.
_____________________________________________________________________
10/19/2009
6
Balance
11. ___________________ can be affected by the _______________ of objects, and their
______________ (ie. Lightness or darkness, visual weight)
12. An Unbalanced screen creates a feeling of _______________________ as if the screen might tip.
13. ________________ balance is also called ___________________ places items on one side of the
screen being similar in shape, size and color to the items on the other side of the screen. It is
_______________________ to design a page with symmetrical balance.
14. ________________________ Balance is also called _________________________. This
approach arranges several smaller items on one side then balancing them with a large item on
the other side, or smaller items being placed further away from the center of the screen than
larger items. One darker item may need to be balanced by several lighter items. It is much more
difficult to create __________________________ layouts
Create 2 sketches. One to illustrate symmetrical and one to illustrate asymmetrical balance.
Symmetrical
Asymmetrical
Precedence
15. ____________________ is the amount of visual weight different parts of your design have. A
designer should direct the user’s eyes through a ______________________ of steps through
the web page. Tools useful to achieve precedence include: _________________________,
______________________, _______________________, ________________________.
16. Describe each of the terms below that are also used to establish precedence.
Document1
a.
Scale __________________________________________________________________
b.
Proportion _____________________________________________________________
c.
White space ____________________________________________________________
10/19/2009
7
Typography
17. Text is the most common element of design. Everything that has to do with text is wrapped up
in ____________________________. Name important things to consider about typography
a.
______________________________________________________________________
b.
______________________________________________________________________
c.
______________________________________________________________________
d.
______________________________________________________________________
e.
______________________________________________________________________
f.
______________________________________________________________________
Usability
18. Usability means adhering to ________________________ such as the fact that links are usually
underlined and blue. Don’t confuse the user by formatting other text similarly or changing the
look of your links.
Accessibility
19. Accessibility addresses the need for all users to be able to access resources on the Internet
despite any disabilities. The WAI is the part of the World Wide Web Consortium W3C
responsible for publishing web page guidelines to promote accessibility by all Internet users.
20. Visually impaired users benefit by having links underlined and ALT text.
21. Auditory impaired users benefit by having text descriptions of the audio portions.
Color: source http://articles.sitepoint.com/article/color-for-coders
1. Name the three Primary Colors: ______________________, __________________, __________
2. If you mix two primary colors, you will get a _____________________________________.
Name the three secondary colors: _______________, ___________________, ______________
3. If you mix a secondary color with a primary color you will get a ___________________________
4. Name three main color schemes: _____________________, ____________________________
_____________________________________
5. Analogous colors are those that are _________________________ to each other on the color
wheel between two points of either primary triangle or secondary triangle. Two examples of
Document1
10/19/2009
8
analogous color ranges might be: ________________________________,
____________________________________________
6. Complementary color schemes consists of colors that are located ___________________ each
other on the color wheel such as ____________________ and red, _____________________
and violet or _________________________ and blue.
7. Explain what split-complimentary color means. ___________________________________
__________________________________________________________________________
Give an example. ____________________________________________________________
8. Monochromatic color scheme uses a color mixed with either white or black. If you mix white
with a color you produce ____________________ of that color. If you mix black with a color you
produce _____________________ of that color. This is a
_____________________________color scheme.
9. What is meant by Web-Safe colors? ______________________________________________
____________________________________________________________________________
10. How many values are in the hexadecimal base? _______ Name them
____________________________________________________________________________
11. What hexadecimal number values indicate a color is one of the web safe colors?
______________________________________________________________________________
Color for Coders
Assignment: Go to the website: The website: http://colorschemedesigner.com/. Create a color
scheme that you love. Print the Light version of the page and the Dark Version of the page. To print:
1. Have the version you want on the screen
2. Press the printscreen button on your keyboard to copy it to the clipboard
3. Go to Word and press Paste.
4. Paste both the dark and light printscreen to the same file. Save the file.
5. Print the file on the color printer.
Document1
10/19/2009
9
6. Answer the following questions about your chosen color scheme:
Which Type of Color Scheme did you choose? Analogous, Complimentary, Monochromatic
a. The hexadecimal number of the pure color: ______________________________
b. Other 15 hexadecimal numbers in your color scheme:
____________________________________________
_______________________________________________________________________
_______________________________________________________________________
c. Does your color scheme use Warm or Cool colors? _____________________________
Crossword Puzzle Words
Choose from these words to correctly complete
the crossword puzzle
1. Analogous
11. Secondary
2. Asymmetrical
12. Shade
3. Balance
13. Simplicity
4. Clarity
14. Split complimentary
5. Complimentary
15. Symmetrical
6. Consistency
16. Tint
7. Harmony
17. Typography
8. Monochromatic
18. Unity
9. Precedence
Document1
10. primary
19. White space
10/19/2009
10
Publishing a Web Site
1.
Get A Domain Name: Go to http://icann.org/registrars/accredited-list.html . You can
choose any US option from the bottom table. Try Address Creation. Type in a name you would
like to have for your website. Record the domain name with the possible extensions and the
cost for each extension..
Domain name________________________________________. Cost ____________
Other Extensions available ______________________________ Cost ____________
2.
Find and ISP Activity: Go to http://websitehostdirectory.com . Look at several ISP
plans. Find an inexpensive plan and fill in the table below with offered features. Next find one
that offers many services and fill in the table. Refer to pages 16-17 for complete question. Print
the webpage with your findings.
Name of ISP Chosen Host Server ___________________________________
Features
Name of Inexpensive ISP
Name of Full Service ISP
Monthly fee?
Discount for year-long sub.?
Setup fees?
Size of space. Can you purchase
more?
Average server uptime monthly?
Downtime?
Server specifications?
Many users?
Battery backup power?
Money-back guarantee?
What technical support and when
available?
Support e-commerce, multimedia?
Support Dreamweaver or other
web development software?
Would you choose this ISP to host
your Web site? Why or Why no
Document1
10/19/2009
11