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. What is Internet? An ISP (Internet service provider)
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

4. Brief History of the Internet

5. Why Do You Need a Modem?

6. Modem Speeds
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 and games directly on your computer, have video chats, etc.

7. The World Wide Web 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.

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

9. Browsers & URLs http://www.ratz.com/robin/hats/html
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.
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, basic elements of a web page?

12. How do you know what’s HTML text and what’s an image
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:

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

14. Web Graphic Formats - GIF
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

15. Web Graphic Formats - JPEG
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

16. Web Graphic Formats - PNG
PNG (Portable Network 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

17. Dreamweaver – 1st Steps

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

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

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

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

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

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