1 / 23

Basic Web Design

Basic Web Design. Robby Seitz UM Webmaster rseitz@olemiss.edu 915-7822 121 Powers Hall. Basic Web Design. How to build a Web site:. 1. Open Notepad and type the following: <html> <head> <title>Robby's Page</title> </head> <body> This is a picture of my cat, Lou.<br />

lilike
Télécharger la présentation

Basic Web Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Basic Web Design • Robby Seitz • UM Webmaster • rseitz@olemiss.edu • 915-7822 • 121 Powers Hall

  2. Basic Web Design How to build a Web site: • 1. Open Notepad and type the following: • <html> • <head> • <title>Robby's Page</title> • </head> • <body> • This is a picture of my cat, Lou.<br /> • <img src="cat.jpg“ /> • </body> • </html> • 2. Save the file as test.html on your desktop. • 3. Double-click the file’s icon on the desktop and, if you have a picture called cat.jpg, you should see a page similar to this one. • Thanks for coming!

  3. Basic Web Design What is a web site? • Text & GraphicsPrintable information available at user’s pace • Animation (Flash)Only for animations and video, not for Web site building(www.clickz.com/showPage.html?page=3419561) • Video & SoundCall in the professionals! • Podcastspodcast.olemiss.edu

  4. Basic Web Design Who is your audience? • What do they want? • How do they expect to get it? • How do you know?Consider surveying your current visitors.

  5. Basic Web Design Take inventory: • What information do you already have and what do you have to create? • Graphics... create, steal, or borrow? • How much information should you give? Any security issues?

  6. Basic Web Design What are your resources and limitations? • Hardware(Build on whatever platform you like, but test thoroughly on both PC and Mac.) • Software(Build on whatever software you like, but test thoroughly with every browser.) • Bandwidth(I try to find the worst Internet connection in town and test the site through that.)

  7. Basic Web Design What are your resources and limitations? • Accessibility(Build the page with handicapped accessibility in mind.) • Maintainability(Build the page knowing that you won’t be the only person updating it.) • Static or dynamic? • Web page or web application?

  8. Basic Web Design Bad Examples(Don’t try this at home!) jones, partners: architecture www.jonespartners.com/ "If architects built buildings the way they build their Web sites, then the first woodpecker to come along would destroy civilization." More examples available at www.webpagesthatsuck.com

  9. Basic Web Design Bad Examples(Don’t try this at home!) Association of International Glaucoma Societies www.globalaigs.org Just because you can do something doesn’t necessarily mean you ought to.

  10. Basic Web Design Web Page Elements • StructureThe arrangement of content • NavigationThe means by which content may be found • ContextThe connection between menu and content groupings • ContentThe goal of Web browsing

  11. Basic Web Design Structure • Layout is not just decorative – it can also provide visual organization for your content. Google News news.google.com Fairly simple structure and easily understood

  12. Basic Web Design Structure • Layout is not just decorative – it can also provide visual organization for your content. Ole Miss www.olemiss.edu

  13. Basic Web Design Structure • Layout is not just decorative – it can also provide visual organization for your content. The New York Times www.nytimes.com

  14. Basic Web Design Navigation • Links and menus – Methods for moving from page to page Information Technologywww.olemiss.edu/depts/it/ Using both horizontal and vertical menus Note: Right navigation can sometimes be cut off in narrow browser windows.

  15. Basic Web Design Navigation • Links and menus – Methods for moving from page to page “Mystery Meat Navigation” www.art.northwestern.edu/welcome.html

  16. Basic Web Design Context • The grouping relationship between elements Students Page www.olemiss.edu/students

  17. Basic Web Design Context • The grouping relationship between elements Apple Downloads www.apple.com/downloads

  18. Basic Web Design Context • The grouping relationship between elements Microsoft Downloads www.microsoft.com/downloads

  19. Basic Web Design Content • The goal of Web browsing Upcoming UM Newsdesk

  20. Basic Web Design Things you can’t control • User's browser (type, version, plug-ins, etc.) • User's computer type • User's network speed • User's monitor • Browser window size • Image loading • Color • Fonts (type, size, character set) • User’s Scripting and CSS settings

  21. Basic Web Design Things you can’t control User’s Language

  22. Basic Web Design Web Site Design Tips • Remember your audience. • Keep it short, simple, consistent, and conventional. • Steal good ideas. • Organize your navigation– Lead users to your content using the most natural choices and the fewest links. • Use CSS to lay out your page if you know CSS. • If you don’t know CSS, learn CSS! (www.w3schools.com) • Test your pages! (validator.w3.org)

  23. Basic Web Design Web Site Design Tips • Consider accessibility limitations. How does your site look to someone who can’t see? • Location, location, location! (www.poynterextra.org/eyetrack2004) • Use Dreamweaver. • Keep all your images in one folder. • Create only a “handful” of templates for site consistency. • Provide a search engine if you have a large number of pages or complex content. (Try using Google!) • Make backups of the old site before writing over it! • If you are using the color red on an Ole Miss site, make sure it’s RED and notred!

More Related