web design n.
Skip this Video
Loading SlideShow in 5 Seconds..
WEB DESIGN PowerPoint Presentation


135 Views Download Presentation
Download Presentation


- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript


  2. The World Wide Web • A Web site is a group of related files organized around a common topic • A Web page is a single file within a Web site which has a unique name • Types of Web Sites • Commercial: sell or promote a company’s products or services • Educational: provide information about a school, university or topic • Informational: provide people with information • Personal: used by individuals to share information • Portal: provide a variety of services that people use everyday

  3. Elements of a Web Page • Text • Words, letters, numbers and other symbols • Graphics • Drawings, charts, diagrams, paintings, photographs, and navigational buttons • Multimedia • Audio, video or animation • Hyperlinks • Internal links, external links and intrapage links

  4. Web Site Development • Determine the purpose and goals of the Web site • Design and develop the Web site • Evaluate and test the Web site • Implement the Web site • Maintain the Web site

  5. Determine Purpose and Goals • What is the site’s purpose • What do you want the site to do • What are the site’s goals • What impact do you want the site to have • What tools do you need to reach your goals • Do you need special hardware and/or software • What is your primary (target) audience • Who will visit/use the site • What kinds of hardware and software are the site’s visitors likely to be using

  6. Design and Develop a Site • The design process • Interaction design • Where will the user need to go • In what order will the user move around the site • Will the purpose of each link be clear to the user • Information design • What text should be on each page • What graphics will I include • Be sure that text and graphics support the site’s purpose • Presentation design • What will the site look like • What color scheme will be used • Where will I position menus and hyperlinks

  7. Evaluate and Implement a Site • Evaluate and Test a Site • Make sure all hyperlinks work correctly • Use various browsers and different computers to view your site • Implement the Site • Publish the site on a web server • Retest the site after publishing to make sure all of it still works

  8. Maintain the Site • Keep your site current and working properly • Add, delete and update content and pages • Check the links to make sure they continue to work properly (Remember, if you have external links outside Web sites may change location or shut down: check regularly)

  9. HTML • HTML stands for Hypertext Markup Language • The code used to create web pages • Consists of tags (a starting and ending tag) • Uses nested tags (a tag enclosed in another set of tags) • An empty tag requires only an opening tag • HTML and the other text in the web page are called its source code • Usually written using Notepad or any other text editor

  10. 3 Main Parts of HTML • Document Type Definition • Specifies the version of HTML you are using: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “”> • Start HTML <HTML> • Header <Head> <Title>Document Title</Title> </Head> • Body <Body> CONTENT </Body> • End HTML </HTML>


  12. Adding Images Using HTML • You use the <img> tag to insert images into a Web page • Image tags have 5 attributes: • src: the source location of the image • alt: an alternative text message to display if the image does not display • align: wraps text around the image and places the image on the screen • border: places a border around the image • width and height: specifies the image’s height and width EXAMPLE: <img src=“images/book.gif” alt=“Books” align=“center” border=“0” width=“40” height=“30”>

  13. Inserting Links using HTML • Hyperlinks are external, internal or intrapage • Use anchor tags to create all links (<a></a>) • Hyperlinks can be text or graphic • Text links example <a href=> Century Public Library</a> • Graphic links example <a href=><img scr=“images/book.gif” alt=“Books” align=“left” border=“0” width=“40” height=“30”></a>

  14. Relative and Absolute Links • Relative links • Contains the name of the file being linked to • Only works if the file is in the same folder as the document containing the link • Links pages within the same web site • Absolute links • Contains the complete URL of the file being linked to • Requires the full file path because it absolutely must follow the path to get to the file • Typically used for external links (to an outside file or website)