2. Learning objectives
At the end of this chapter, student should be able to:
1. Explain the concept of World Wide Web
2. List out the basic design element
3. Determine type of web navigation models
4. INTERNET and WWW
➢ Internet – the network of computer networks that provides the framework for the World Wide
Web.
➢ The web can’t exist without the internet.
➢ Browser – link documents on any computer on any network by means of an easy-to-use piece of
software.
➢ World Wide Web – web of documents that linked together.
5. Concept of using WWW
Used web browser
to open web sites
by using URL
and homepage
will appear
Computer program that interprets HTML commands to
collect, arrange and display web sites such as Mozilla Firefox,
Google Chrome, Opera and others.
Internet location that contain collection of hyperlinked web
pages.
Unique address of web sites.
The first page of the web sites.
11. Web Design Principle
Portable design
• Must be portable and accessible by user who have different browser, OS and
computer platform
Design for low bandwidth
• Website design must be accessible at a variety of speeds
Direction
• The elements need to place in sequence where the eye moves and perceive
the things it sees
12. Web Design Principle
Accessibility
• when a visitor enters the website, he must be able to easily access the
information.
White space
• use white space deliberately in your design as a breathing space. May also be used
to show division of contents
Simplify
• the more options you place in your site, the more difficult it is for a visitor to make
a decision and more time is required to browse through them.
13. Web Design Principle
convenience
•to allow a visitor to make an action, click buttons
should be conveniently located and accessible
Regular testing
•the website should be regularly upgraded, updated,
and tested so that problems will be quickly resolved.
14. Characteristics of Web Pages
➢ Create building blocks of a website, like a page in a book.
➢ Require a browser such as Internet Explorer, Firefox to be viewed.
➢ Contain HTML code to define format and functions.
➢Include text, downloadable files, audio, video and animation in different formats.
➢ Allow nonlinear navigation to other pages through hyperlinks.
16. Web Navigation Design
1. Your navigation scheme should reflect your website
structure and you should always make it clear for your
visitors how they can get between topics easily.
2. Always provide a means for them to go back from
where they started.
3. Make an outline of your website and go from there.
19. Web Layout
Homepage/Index Page
This should be considered the first tier of content and lead
into the interior of your site. Here is where your visitor is first
introduced to your website. First impressions are important
on the Web just as in life.
Main Sections/Site Index
The main sections of your site have been identified and
placed in order of importance in your navigation scheme.
20. Web Layout
Subsections/Database
Subsections are placed in their proper categories and the
content has been decided upon. This is where the main body
of your website content resides. (i.e. database) They contain
the bulk of the information that you are presenting to your
visitors.
21. Element of Web Page Design
• Emphasis - Communicates your message effectively.
• Contrast - Generates visual interest by making page appealing.
• Typography - Refers to the arrangement of text on a page.
• Color and Graphics - Defines character and identity of the web page.
• Navigation - Refers to the way a web page is structured for use.
• Visual Balance - Refers to the combination of visual elements such as lines, images, text,
shapes, and color on a page.
22.
23. Conclusions
1. The concept of using WWW are used web browser, to open the website, by using the URL and
homepage will appear
2. There are 7 elements in designing the web which are colour, text, graphics, shapes,
background, video/audio and links
3. There are linear navigation model, database navigation model and hierarchical navigation
model
24. Discussion
Give any 3 WEBSITE that you always visit.
Discuss why? Present in the classroom