Download - Designing Webpage
-
7/30/2019 Designing Webpage
1/26
es gn ng an
ConstructingWeb Pages
-
7/30/2019 Designing Webpage
2/26
Designing the Site and
Navigation
Main bases for determining the theme
and look and feel of your site:
Purpose
Content
Intended audience
-
7/30/2019 Designing Webpage
3/26
Here are few design tips:
1.
Rank site content according to their
level of importance to your target
audience.
2.
Determine if you will need additional
media to support the content. But
avoid huge graphics and unnecessary
animations and video.
-
7/30/2019 Designing Webpage
4/26
3.
Choose simple theme and repeat it on
all pages of your site. Do not use dark
colors as background; these will
makes your site difficult to print.
4.
Use only 2 to 3 styles of fonts for all
the web pages in the site. Serif fonts
for long text and sans serif fonts for
titles.
-
7/30/2019 Designing Webpage
5/26
The most important design consideration
is to make it easy for your visitors to
navigate your site.
The best way to help your users find
information is to create a .
-
7/30/2019 Designing Webpage
6/26
Developing Web-Media
Elements
Two general types of Web Elements
Link
It adds interactivity to the page.
Media
It is used to present information.
-
7/30/2019 Designing Webpage
7/26
WEB-MEDIA
ELEMENTS
-
7/30/2019 Designing Webpage
8/26
Text Textual information is often contained in
the HTML (Hypertext Markup Language)
file.
HTML interprets the codes for the
position, size, color, and other attributes
for displaying text.
It is considered as the most useful type
of media for the web.
-
7/30/2019 Designing Webpage
9/26
Example:
text
text
text
text
-
7/30/2019 Designing Webpage
10/26
-
7/30/2019 Designing Webpage
11/26
Graphics
This are hand-drawn illustrations, such as
cartoons and logos or real images, are
the graphical elements of a Web Page. It is used only to enhance or support
textual content.
-
7/30/2019 Designing Webpage
12/26
Graphic elements are created using
graphic editor such as Adobe Illustrator
or Macromedia Freehand.
Images are made using photo editors
such as MS Paint, Adobe Photoshop or
Paintshop.
Graphics are not part of the HTML file
but are linked to it using the tag.
-
7/30/2019 Designing Webpage
13/26
Image File Formats
JPEG (Joint Photographic Experts Group) is a
compression method; JPEG-compressed images
are usually stored in the JFIF (JPEG File
Interchange Format) file format.
PNG
(Portable Network Graphics) file format was
created as the free, open-source successor to theGIF. The PNG file excels when the image has large,
uniformly colored areas.
-
7/30/2019 Designing Webpage
14/26
GIF
(Graphics Interchange Format) It supports
animation and is still widely used to provideimage animation effects.
BMP
BMP file format (Windows bitmap) handles
graphics files within the Microsoft Windows
OS. Typically, BMP files are uncompressed,
hence they are large; the advantage is theirsimplicity and wide acceptance in Windows
programs.
-
7/30/2019 Designing Webpage
15/26
Sound
This are the background music, sound
effects or narrations.
It can help establish the theme of thesite.
Sound Loop is a small sound file that
simply repeats itself.
-
7/30/2019 Designing Webpage
16/26
Sound File Format SWA
(Shockwave Audio) Audio file originally created
for Macromedia Shockwave (now Adobe
Shockwave) MID
Musical Instrument Digital Interface, is a standard
protocol for the interchange of musical
information between musical instruments,
synthesizers,
-
7/30/2019 Designing Webpage
17/26
keyboard controllers, sound cards,
computers and all other electronic
instruments from all manufacturers.
WAV
standard audio file container format used
mainly in Windows PCs.
MP3
MPEG Layer III Audio. Is the most common
sound file format used today.
-
7/30/2019 Designing Webpage
18/26
Movies and Animation
Movies can show real action using
images and sounds. Animations can be
very useful to show processes that havemultiple steps much better than still
images.
You can present live video using thetechnology real-time streaming video.
-
7/30/2019 Designing Webpage
19/26
They also require special software and
hardware for creating and editing, likeAdobe Flash, for animations, and Adobe
Premier, for videos.
Video formats: AVI (Audio VideoInterleave) and Quicktime
Animation format: SWF (ShockWave
Flash)
-
7/30/2019 Designing Webpage
20/26
Constructing a Web Site and
Web Pages Web page- a collection of Web mediaelements.
Web Site- a collection of web pages. Web pages are hyperlinked with each
other to form the site while media
elements are arranged by the browserfollowing the HTML standards.
-
7/30/2019 Designing Webpage
21/26
Four ways to develop
Web Site WritingHTML tags it is a set of tags used to create a
webpage, which are used to specify how your
web pages are to be displayed.
CSS codes- allows you to layout your web
pages efficiently by separating the pages
contents from its design specifications.
-
7/30/2019 Designing Webpage
22/26
Javascript codes- makes static HTML pages
more dynamic. It allows you to make the users
interact with the pages.
Using
HTML editor- like Microsoft Frontpage or
Adobe Dreamweaver. It allows you to see
exactly how the webpages will look like as youare developing it.
-
7/30/2019 Designing Webpage
23/26
Steps in constructing your
site:1. Based on the site map you have created,determine the number of web pages, the namesof the HTML files, and the title if each of the
web pages.2. Construct the individual web pages starting withtext , followed by the other non-textualelements, if needed.
When working with the text, type all the text firstbefore formatting it.
Remember the look and feel
-
7/30/2019 Designing Webpage
24/26
Determine the exact size of visual media
IT is best to create a directory to put in all
the web media
Complete the main pages to be linked to
the homepage before the series of pages
under each main page.
3. Start making hyperlinks beginning with the
Index or Homepage. *Note: Make sure that the
page to be linked is available before making thelink.*
-
7/30/2019 Designing Webpage
25/26
Test each link by loading the page.
Use site map to know which are pages are to be
linked.
4. Complete the web pages and test the site.
Test or check to make sure that the media
elements load properly and displayed as youhave planned.
5. Upload the site.
You will need a web server in a host computer todo this.
I f P l h
-
7/30/2019 Designing Webpage
26/26
Inform People that your
site EXIST Enlist your site to one of several search engines.
There you have it, your own website!