http://elabnody.net/learn/wd/WD_CH01_Guide.pdf

1. Mohamed Elabnody
Web Design Guide
http://www.Elabnody.net
Elabnody@msn.com
Lecture (1)
2013

2. www.elabnody.net

3. 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.net 3

4. Outline
This guide explains in
simple terms how to
design, develop, publish
and promote a web page
www.elabnody.net 4
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

5. 1.1 Getting Started
 There is very little you require to build a website and
everything you need is available free on the Internet.
 In other words, you don't need to spend huge sums of
money purchasing expensive software packages,
programming manuals or web server space. You just
need 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.net 5

6. 1.2 Define Objectives
www.elabnody.net 6
Personal Websites
Photo Sharing Websites
Community Building Websites
Mobile Device Websites
Blogs
Informational Websites
Online Business Brochure/Catalog
E-commerce Websites

7. 1.3 Design Web Page
 Once you know exactly what you intend
to publish and who the targeted audience
will be, the next step is to determine the
mood of your website.
 Should the ambience be informal, professional
or high tech?
 Will you use graphics, animation or music?
 How will the text be structured and which
fonts will be used?
 How will visitors navigate through your site?
 Whatever you decide, try to maintain the same
theme and conventions throughout your site.
www.elabnody.net 7

8. www.elabnody.net 8

9. 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.net 9

10. 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.net 10

11. 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.net 11

12. 1.7 Upload Web Page
 Copying files from your hard drive
to the server is a simple process.
The host site will prompt you for
the name of the directory on your
hard drive where your files are
stored and the names of the
specific files to be uploaded.
 Once you have uploaded all your
files, you should test your page on
the web server and make certain
that it functions properly and that
all files have uploaded correctly.
 It is also a good idea to test your
page using a different computer to
ensure that graphic files are being
read from the server and not from
your hard drive.
www.elabnody.net 12

13. 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.net 13

14. 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.net 14

15. 15www.elabnody.net 15
Web Design (Tools)