1 / 23

Web Design Basics

Web Design Basics. Lecture Outline:. What is Internet? What is a ISP, Modem, Web Browser? Examples, etc. How does information get displayed on the Web? What is a website? (basic elements) Graphic formats: JPEG, GIF, PNG Image compression.

jacoba
Download Presentation

Web Design Basics

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. Web Design Basics

  2. Lecture Outline: • What is Internet? • What is a ISP, Modem, Web Browser? Examples, etc. • How does information get displayed on the Web? • What is a website? (basic elements) • Graphic formats: JPEG, GIF, PNG • Image compression

  3. The Internet is a vast collection of computers all over the world that store information and send it out. Internet is like a virtual highway and your computer is like a private on-ramp. • What do you need to connect to the internet? • An ISP (Internet service provider) • A modem (internal or external) - Dial-up connection via a phone line • - Broadband cable connection • - DSL high-speed phone connection What is Internet?

  4. Brief History of the Internet • http://www.youtube.com/watch?v=eZSPWDMn730&feature=related

  5. Why Do You Need a Modem?

  6. The biggest difference between modems is speed which is called the baud (bod) rate. The rate refers to how many bits (digital pieces of info) per second can the modem send and receive. • Ex: 56K or 56,000 bps (the most typical dial-up modem speed) • Broadband (high-speed) connections refer to: • Satellite or cable • T1 Lines • DSL or ISDN • Other variations of the connections mentioned above • Broadband connection allows you to play movies andgames directly on your computer, have video chats, etc. Modem Speeds

  7. A collection of related pages is called a web site. • Each website has a home page (similar to a table of contents). It’s usually the 1st page of the site. • A site can also have an entry page (splash page), • which will lead you to the home page. The World Wide Web

  8. Ex: Reverse Though web site. Ex: Entry Page & Home Page

  9. To see pages on the web, you must have software called a browser. • The browser reads the info on the web page and displays it on your screen. Ex: Internet Explorer, etc. • Every page on the web has an address = Uniform Resource Locator. • http://www.ratz.com/robin/hats/html Browsers & URLs • Hypertext transfer protocol • World • Wide • Web • Domain • Name • (tells you • who owns the site) • A path telling the browser where the page is located • Indicates • page format: • HTML file

  10. What are the main, basicelements of a web page?

  11. How do you know what’s HTML text and what’s an image?- View Page Source in Firefox, Explorer, etc.- Right click on the image to copy it, to save it, to find out it’s size, etc.Ex: www.gavilan.edu

  12. What is the standard Web resolution?72 dpi (ppi)

  13. GIF (Graphics Interchange Format) • 256 colors max • Not very good for photos, but perfect for b&w graphics, line drawings • Small file size (less than 10kb) • Interlacing (a process by which the image is drawn in • a series of passes rather than all at the same time.) • - Animated Gifs Web Graphic Formats - GIF

  14. JPEG (Joint Photographic Experts Group) • Lots of colors = JPEG… Solid colors or no gradations = GIF • Does not work well on line drawings, lettering or simple graphics • Supports 16 mil. Colors Web Graphic Formats - JPEG

  15. PNG (PortableNetwork Graphics) • Supports RGB only (not CMYK) • Employs lossless data compression • Was designed to improve upon and replace GIF • Can help you produce images that have transparent bkgr Web Graphic Formats - PNG

  16. Dreamweaver – 1st Steps

  17. What is Dreamweaver? • Watch this video (Adobe TV site, by James Williamson)

  18. Where to store files? • Local Drive Remote Server • Upload final files • to make the • site public

  19. Defining a New Site • Watch this video (Adobe TV site, by James Williamson)

  20. Web site – Background Graphic • Gradients (Photoshop) • Repeating backgrounds (Tiling images in Dreamweaver) • Rollover Images (Photoshop & Dreamweaver)

  21. Student Work - Examples • Discovering Bodie web site by Nick Gariaeff • Santa Cruz Muzzleloaders web site by Jacqueline Kiel • More examples

  22. Good Books: “The Non-Designers Web Book” by Robin Williams and John Tollett “Creating a Web Site in Dreamweaver CS5” by Nolan Hester

More Related