http://csci02.blogspot.

com Second Grading

Web Development 1 A.Y. 20102011

Designing and Constructing Web pages

One of the most common mistakes that new Web developers commit is to start building
a webpage without prior planning. The development of a site may not be as complicated as
building a house but having a good plan will help you achieve your goals better.

Start answering the following questions:

1. Why are you building a website?
2. What information do you want to share over the Internet?
3. Who are your intended audience?
4. What is the theme of your site?

Methodology
1. Identify a Web Project

The first question posed earlier in the chapter is: Why are you building a website?

Companies build websites in order to advertise their products and make themselves
accessible to their customers.

Schools have websites to let the world know about their school, their courses, or to
provide their students access to information they need.

Here are some suggestions and some reasons for student websites:

a. Your School Website

- Your school does not have a website at present and there are enough
achievements that your school is proud of and would want to share with the rest
of the education community.
- a website is a good venue to invite students from neighboring communities to
come to your school to study;
- your school may have regular activities like fairs, sport competitions and other
events that you would like others to know about.
b. A batch Website
- It can be a good senior activity to highlight the accomplishments of the batch and
assure that you have a way of keeping in touch with one another.
- It compliments the school yearbook as it can contain more information, including
audio and video recordings, media that cannot be included in your printed
yearbook.
c. Personal Website
- It showcase some of your best works and also provide information that, maybe,
members of the class do not know about.
- You can include poems you have written, songs you personally composed or
works of art you have created.
- It also lets everyone become aware of your personal awards and
accomplishments.

Source:
Arlene R. Penaflorida. Designing Webpages.
Quezon City: VibalPublishing House. c2003
http://csci02.blogspot.com Second Grading
Web Development 1 A.Y. 20102011

d. Subject Website
- Helps others who are having difficulty learning it.
- May use to share research information or showcase the best projects you have
accomplished in the subject.
e. Student Organization Website
- Accomplishments and activities of your organization in school can be put
together
- Procedures for applying to the organization, membership forms, or even history
of the organization can be included.

2. Developing Site Contents

Information that goes into a website must be well-selected, accurate and complete.
Collecting site information may well be the most difficult part of putting together a website.
Information may not always be readily available.

In building a school site, for example, you may have to look into the school archives or
library to get information about the school’s history, mission and vision, past administrators, list
of teachers, list of subjects, and others.

You may also need to see if there are photos, logos, charts and media that are available
for use.

For some types of information, you may have to conduct interviews, document certain
events, take pictures, or even develop completely new materials such as logos for various
departments or draw the organizational chart.

You will also have to organize this information. For a student organization site, for
instance, you may have major topics like history of the organization, officers, activities, awards
and membership information. Under the history of the organization, subtopics can include
founding members, constitution, milestones, explanation of the logo and others.

Personal websites can include hobbies, academic achievements, best works, current
activities.

Use good descriptive titles for topic headings and subheadings.

3. Determining Your Audience

You should never build a website for yourself. You build a website to share information
with others. Different types of audience want different kinds of information from a site.

Consider the following questions related to building a school website:

- What do parents want to know about a school?
- What information do new students need to know about a school?
- What is a student from other schools interested to know about your school?

Audience can be wide or very narrow. For instance, the school site may be there to
convince parents to enrol their children in your school.

Source:
Arlene R. Penaflorida. Designing Webpages.
Quezon City: VibalPublishing House. c2003
http://csci02.blogspot.com Second Grading
Web Development 1 A.Y. 20102011

4. Designing the Site and Navigation

The purpose, content and intended audience of your site are your main bases for
determining the theme and ―look and feel‖ of your site. A site intended to present your school
and aimed at convincing parents that it provides quality education will lose its credibility if it were
designed as cartoon site or a site similar to MTV. Similarly, a site for the Art Club without colors,
graphics or images is not likely to attract any new members. By coming up with a theme such as
formal, hi-tech, cartoonish, or funny will help enhance the information you are trying to convey in
your site.

Here are few design tips:

 Rank site content according to their level of importance to your target audience.
 Determine if you will need additional media (pictures, illustrations, sound, etc.) to
support the content. But avoid huge graphics and unnecessary animations and
video.
 Choose a simple theme and repeat it on all the pages of your site. Do not use dark
colors as backgrounds; these will make your site difficult to print. Having a theme will
let the audience know if they are still in your site or have jumped to a completely
different site you have linked them to,
 Use only 2 to 3 styles of fonts for all the webpages 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. Surfers must get the information they need as quickly as possible. Information
in your site should be easy to find, accurate and download fast.

The best way to help your users find information is to create a Site Map. It is an
invaluable tool to help you and your audience to view the full content of the site. It lets
you know how the information is grouped and what the hierarchy of the topic is.

5. Developing Web-Media Elements

Acquiring and Editing Videos, Sound and Images

Software examples
Videos – Sony Vegas
Sound – Sound Forge
Image – Adobe Photoshop
Never copy images from the internet and post it in your webpage.

6. Constructing a Website and Web pages

After you have created and collected the content and media needed to present the
information, you can now begin actually developing your site. A website is a collection of
webpages whereas a webpage is a collection of Web media elements. Webpages are
hyperlinked with each other to form the site while media elements are arranged by the browser
following HTML standards.

Source:
Arlene R. Penaflorida. Designing Webpages.
Quezon City: VibalPublishing House. c2003
http://csci02.blogspot.com Second Grading
Web Development 1 A.Y. 20102011

Here are the steps in constructing your site.

a. Based on the Site Map you have created, determine the number of webpages, the
names of the HTML files, and the title of each of the webpages you will need for the
site. it is common practice to name the first page as Home.html or Index.html.

b. Construct the individual webpages starting with the text, followed by the other non-
textual elements if needed. when working with text, type-in all the text first and do the
text formatting later. Remember to work around a common theme and apply it
consistently to the rest of the pages. Determine the exact size you need for your
visual media—graphics, movies and animations –and resize them using their
respective editors. It is best to create a directory to put in all the Web media such as
/images/ to keep your HTML files and media files in order.

c. Start making the hyperlinks beginning with the Index or Homepage. Make sure the
page to be linked is available before making the link. Test each link by loading the
page using a browser or the preview function of the HTML editor. Use the Site Map
to know which pages are to be linked.

d. Complete the webpages and test the site.Check if all text is displayed as you have
planned them. Test to make sure all other media elements load properly.

7. Deploying a Website on the WWW

Upload the site. You will need a Web server in a host computer to do this.

Source:
Arlene R. Penaflorida. Designing Webpages.
Quezon City: VibalPublishing House. c2003