Professional Documents
Culture Documents
IT104N
Overview
2 of 35
7 of 35
8 of 9
9 of 35
Mock up
10 of 35
Wireframe
11 of 35
At this time, web designer will take all of the individual graphic
elements from the prototype and use them to create the
actual, functional site.
This is typically done by first developing the home page,
followed by a shell for the interior pages.
The shell serves as a template for the content pages of your
site, as it contains the main navigational structure for the web
site. Once the shell has been created, designer will take the
content and distribute it throughout the site, in the
appropriate areas.
Elements such as interactive contact forms, flash animations or
ecommerce shopping carts are implemented and made
functional during this phase, as well.
13 of 35
Template shell
Logo and title
Content 1
Content 2
Content 3
Content 4
15 of 35
WS_FTP
16 of 35
Feedback Questions
19 of 35
21 of 35
Linear navigation
22 of 35
23 of 35
Database navigation
Database navigation
An auto parts site might use this configuration when they develop their
website so that their customers can locate a specific part from a
particular category. The main divisions could be starters, engine parts,
fluids,etc. and the databases would contain information as to specific
vehicle, year, etc
25 of 35
Hierarchical navigation
27
28
30
31
Break your content into smaller files, and then link them
together.
Provide logical groupings of choices.
Keep a flat hierarchy.
Users should not have to click more than two or three times
to see the information they desire.
32
33 of 9
34
35
36
37
38
39
40
These are links that you can embed directly in the flow of
your content by choosing the key terms and concepts
you anticipate your users will want to follow
41
42
The HTML list elements are the preferred element for containing
navigation links
Lists provide an easy way to create navigation that can be styled with CSS
<ul id="navlist">
<li><a href="index.html">Home</a></li>
<li><a href="history.html">History</a></li>
<li><a href="how.html">How it Works</a></li>
<li><a href="clubs.html">Balloon Clubs</a></li>
<li><a href="festivals.html">Festivals</a></li>
<li><a href="rides.html">Where to Ride</a></li>
<li><a href="faq.html">FAQ</a></li>
</ul>
43
44
ul#navlist {
padding: 0;
margin: 0;
}
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
ul#navlist a:hover {
color: #fff;
background-color: #0033cc;
font-weight: bold;
}
60
61
Underlining on Hover
a:hover {text-decoration:
underline;}
62