Designing and Constructing Web Pages

Designing the Site and Navigation

Main bases for determining the theme and look and feel of your site:
Purpose Content Intended audience

 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.

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.

 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 .

Developing Web-Media Elements

Two general types of Web Elements
Link
It adds interactivity to the page.

Media
It is used to present information.

WEB-MEDIA ELEMENTS

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.

Example:
<b>text</b>
text

<strike>text</strike>
text

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.

 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 <IMG SRC> tag.

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 the GIF. The PNG file excels when the image has large, uniformly colored areas.

 GIF
(Graphics Interchange Format) It supports animation and is still widely used to provide image 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 their simplicity and wide acceptance in Windows programs.

Sound
This are the background music, sound effects or narrations. It can help establish the theme of the site. Sound Loop is a small sound file that simply repeats itself.

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,

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.

Movies and Animation

Movies can show real action using images and sounds. Animations can be very useful to show processes that have multiple steps much better than still images. You can present live video using the technology real-time streaming video.

 They also require special software and hardware for creating and editing, like Adobe Flash, for animations, and Adobe Premier, for videos. Video formats: AVI (Audio Video Interleave) and Quicktime Animation format: SWF (ShockWave Flash)

Constructing a Web Site and Web Pages

Web page- a collection of Web media elements. 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 browser following the HTML standards.

Four ways to develop Web Site

Writing HTML 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.

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 you are developing it.

Steps in constructing your site:

1. Based on the site map you have created, determine the number of web pages, the names of the HTML files, and the title if each of the web pages. 2. Construct the individual web pages starting with text , followed by the other non-textual elements, if needed.
When working with the text, type all the text first before formatting it. Remember the look and feel

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

 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 you have planned.

5. Upload the site.

You will need a web server in a host computer to do this.

Inform People that your site EXIST

Enlist your site to one of several search engines.

There you have it, your own website!