Upload
mohamed-elabnody
View
280
Download
1
Tags:
Embed Size (px)
DESCRIPTION
http://elabnody.net/learn/wd/WD_CH01_Guide.pdf
Citation preview
Mohamed Elabnody
Web Design Guide
http://www.Elabnody.net
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)