Mohamed Elabnody

Web Design Guide

http://www.Elabnody.net

Elabnody@msn.com

Lecture (1)

2013

www.elabnody.net

Overview

In this course, students will learn the

basics of designing and developing a web

site.

We'll take a look at design issues specific

to learn web page layout, effective

navigation.

How to using graphics, color and fonts on

web pages

Working with tables and CSS.

www.elabnody.net3

Outline

This guide explains in

simple terms how to

design, develop, publish

and promote a web page

www.elabnody.net4

Web Design Guide

Getting Started

Define Objectives

Design Web Page

Download Editor

Construct Web Page

Find a Web Server

Upload Web Page

Promote Web Page

Monitor Page Hits

1.1 Getting Started

There is very little you require to build a website andeverything you need is available free on the Internet.

In other words, you don't need to spend huge sums ofmoney purchasing expensive software packages,programming manuals or web server space. You justneed to know where to start.

Here is a list of what you do need:

Basic computer skills

Access to a personal computer

Access to the Internet

A free HTML Editor (a web page construction tool)

A place on the world wide web to publish your page

www.elabnody.net5

1.2 Define Objectives

www.elabnody.net6

Personal Websites

Photo Sharing Websites

Community Building Websites

Mobile Device Websites

Blogs

Informational Websites

Online Business Brochure/Catalog

E-commerce Websites

1.3 Design Web Page

Once you know exactly what you intendto publish and who the targeted audiencewill be, the next step is to determine themood of your website.

Should the ambience be informal, professionalor high tech?

Will you use graphics, animation or music?

How will the text be structured and whichfonts will be used?

How will visitors navigate through your site?

Whatever you decide, try to maintain the sametheme and conventions throughout your site.

www.elabnody.net7

www.elabnody.net8

1.4 Download Editor

There are many good HTML editors available and many are free.

For a more professional website, consider purchasing Microsoft Expression Web or Dreamweaver.

These feature rich products are inexpensive and can help you create very attractive and easy-to-maintain websites.

Once you have downloaded the program file, you'll need to install the HTML Editor on your machine.

www.elabnody.net9

1.5 Construct Web Page

HTML editors let you insert images into the body of a document and create hyperlinks to other pages.

Most HTML editors allow you to insert additional HTML code wherever you like. This is useful, for example, should you want to add music or video clip to your site.

Hyperlinks are words or graphics on a web page that, when clicked, take the visitor to another page or another web site.

Your main page should always be assigned the file name "index.htm".

www.elabnody.net10

1.6 Find a Web Server

You are now ready to publish your page on the World Wide Web. To do this, you will need to copy your page and all graphic and music files which your page uses from your computer's hard drive to a web server.

There are a number of companies that will provide server space at no charge. You will, however, be required to include a banner or icon somewhere on the page to promote the free hosting service or their sponsors.

www.elabnody.net11

1.7 Upload Web Page

Copying files from your hard driveto the server is a simple process.The host site will prompt you forthe name of the directory on yourhard drive where your files arestored and the names of thespecific files to be uploaded.

Once you have uploaded all yourfiles, you should test your page onthe web server and make certainthat it functions properly and thatall files have uploaded correctly.

It is also a good idea to test yourpage using a different computer toensure that graphic files are beingread from the server and not fromyour hard drive.

www.elabnody.net12

1.8 Promote Web Page

Depending on your objectives, you may also want to

register with some of the international, regional or

subject based search engines.

You can add your URL to each major search engines by

clicking below:

Add URL to Google

(http://www.google.com/addurl.html )

Add URL to Open Directory

(http://dmoz.org/add.html )

www.elabnody.net13

1.9 Monitor Page Hits

A good hit tracker provides answers to the following types of questions:

1. From which countries did my website visitors come from?

2. Which search engine did they use to find my site?

3. Which words or phrases did they search on?

4. Which sites and URLs are sending me traffic?

5. How did my visitors navigate through my site?

6. Which of my pages are the most and least popular?

For more information on meta tags, search engines and monitoring, check out Search Engine Watch (http://searchenginewatch.com/).

www.elabnody.net14

15www.elabnody.net

15

Web Design (Tools)