Web Design Guide


Published on


Published in: Education, Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web Design Guide

  1. 1. Mohamed ElabnodyWeb Design Guidehttp://www.Elabnody.netElabnody@msn.comLecture (1)2013
  2. 2. www.elabnody.net
  3. 3. Overview In this course, students will learn thebasics of designing and developing a website. Well take a look at design issues specificto learn web page layout, effectivenavigation. How to using graphics, color and fonts onweb pages Working with tables and CSS.www.elabnody.net 3
  4. 4. OutlineThis guide explains insimple terms how todesign, develop, publishand promote a web pagewww.elabnody.net 4Web Design GuideGetting StartedDefine ObjectivesDesign Web PageDownload EditorConstruct Web PageFind a Web ServerUpload Web PagePromote Web PageMonitor Page Hits
  5. 5. 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 dont 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 yourpagewww.elabnody.net 5
  6. 6. 1.2 Define Objectiveswww.elabnody.net 6Personal WebsitesPhoto Sharing WebsitesCommunity Building WebsitesMobile Device WebsitesBlogsInformational WebsitesOnline Business Brochure/CatalogE-commerce Websites
  7. 7. 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.net 7
  8. 8. www.elabnody.net 8
  9. 9. 1.4 Download Editor There are many good HTML editors available and manyare free. For a more professional website, consider purchasingMicrosoft Expression Web or Dreamweaver. These feature rich products are inexpensive and canhelp you create very attractive and easy-to-maintainwebsites. Once you have downloaded the program file, youllneed to install the HTML Editor on your machine.www.elabnody.net 9
  10. 10. 1.5 Construct Web Page HTML editors let you insert images into the bodyof a document and create hyperlinks to otherpages. Most HTML editors allow you to insert additionalHTML code wherever you like. This is useful, forexample, should you want to add music or videoclip to your site. Hyperlinks are words or graphics on a web pagethat, when clicked, take the visitor to anotherpage or another web site. Your main page should always be assigned the filename "index.htm".www.elabnody.net 10
  11. 11. 1.6 Find a Web Server You are now ready to publish your page on the WorldWide Web. To do this, you will need to copy yourpage and all graphic and music files which your pageuses from your computers hard drive to a webserver. There are a number of companies that will provideserver space at no charge. You will, however, berequired to include a banner or icon somewhere onthe page to promote the free hosting service or theirsponsors.www.elabnody.net 11
  12. 12. 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.net 12
  13. 13. 1.8 Promote Web Page Depending on your objectives, you may also want toregister with some of the international, regional orsubject based search engines. You can add your URL to each major search engines byclicking 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. 14. 1.9 Monitor Page HitsA good hit tracker provides answers to the followingtypes of questions:1. From which countries did my website visitors comefrom?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 andmonitoring, check out Search Engine Watch(http://searchenginewatch.com/).www.elabnody.net 14
  15. 15. 15www.elabnody.net 15Web Design (Tools)