Designing Webpage

7/30/2019 Designing Webpage

1/26

es gn ng an

ConstructingWeb Pages


2/26

Designing the Site and

Navigation

Main bases for determining the theme

and look and feel of your site:

Purpose

Content

Intended audience


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.


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.


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 .


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/26

WEB-MEDIA

ELEMENTS


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.


9/26

Example:

text

text

text

text


10/26


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.


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.


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.


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.


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.


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,


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.


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.


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)


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.


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.


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.


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


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.*


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


26/26

Inform People that your

site EXIST Enlist your site to one of several search engines.

There you have it, your own website!

Designing Webpage

Documents

Transcript of Designing Webpage