Web Design Basics
description
Transcript of Web Design Basics
![Page 1: Web Design Basics](https://reader034.fdocuments.in/reader034/viewer/2022051821/56816385550346895dd46df4/html5/thumbnails/1.jpg)
Web Design Basics
![Page 2: Web Design Basics](https://reader034.fdocuments.in/reader034/viewer/2022051821/56816385550346895dd46df4/html5/thumbnails/2.jpg)
What is Internet?
What is a ISP, Modem, Web Browser?
How does information get displayed on the Web?
What is a website? (basic elements)
Graphic formats: JPEG, GIF, PNG
Image compression
Lecture Outline:
![Page 3: Web Design Basics](https://reader034.fdocuments.in/reader034/viewer/2022051821/56816385550346895dd46df4/html5/thumbnails/3.jpg)
What is Internet?It is a vast collection of computers all over the world that store information and send it out. It’s 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 via a phone line- Broadband cable connection - DSL high-speed phone connection
![Page 4: Web Design Basics](https://reader034.fdocuments.in/reader034/viewer/2022051821/56816385550346895dd46df4/html5/thumbnails/4.jpg)
Why Do You Need a Modem?
![Page 5: Web Design Basics](https://reader034.fdocuments.in/reader034/viewer/2022051821/56816385550346895dd46df4/html5/thumbnails/5.jpg)
Modem SpeedsThe 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
![Page 6: Web Design Basics](https://reader034.fdocuments.in/reader034/viewer/2022051821/56816385550346895dd46df4/html5/thumbnails/6.jpg)
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.
![Page 7: Web Design Basics](https://reader034.fdocuments.in/reader034/viewer/2022051821/56816385550346895dd46df4/html5/thumbnails/7.jpg)
Entry Page vs Home Page
Reverse Though web site – entry page.
![Page 8: Web Design Basics](https://reader034.fdocuments.in/reader034/viewer/2022051821/56816385550346895dd46df4/html5/thumbnails/8.jpg)
Entry Page vs Home Page
Reverse Though web site – home page (table of contents).
![Page 9: Web Design Basics](https://reader034.fdocuments.in/reader034/viewer/2022051821/56816385550346895dd46df4/html5/thumbnails/9.jpg)
Browsers & URLsTo 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
Hypertext transfer protocol
WorldWideWeb
DomainName(tells youwho owns the site)
A path telling the browser where the page is located
Indicatespage format:HTML file
![Page 10: Web Design Basics](https://reader034.fdocuments.in/reader034/viewer/2022051821/56816385550346895dd46df4/html5/thumbnails/10.jpg)
The basic elements of a web page
![Page 11: Web Design Basics](https://reader034.fdocuments.in/reader034/viewer/2022051821/56816385550346895dd46df4/html5/thumbnails/11.jpg)
![Page 12: Web Design Basics](https://reader034.fdocuments.in/reader034/viewer/2022051821/56816385550346895dd46df4/html5/thumbnails/12.jpg)
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
![Page 13: Web Design Basics](https://reader034.fdocuments.in/reader034/viewer/2022051821/56816385550346895dd46df4/html5/thumbnails/13.jpg)
What is the standard Web resolution?
72 dpi (ppi)
Decoding screen size and resolution
![Page 14: Web Design Basics](https://reader034.fdocuments.in/reader034/viewer/2022051821/56816385550346895dd46df4/html5/thumbnails/14.jpg)
What screen size should I use?In Photoshop, go to File, New and choose Web
![Page 15: Web Design Basics](https://reader034.fdocuments.in/reader034/viewer/2022051821/56816385550346895dd46df4/html5/thumbnails/15.jpg)
Which color mode is used for Web?
![Page 16: Web Design Basics](https://reader034.fdocuments.in/reader034/viewer/2022051821/56816385550346895dd46df4/html5/thumbnails/16.jpg)
Web Graphic Formats - GIF- GIF (Graphics Interchange Format)
- 256 colors max
- Not very good for photos, but perfect for black & white graphics, line drawings
- Small file size (less than 10kb)
![Page 17: Web Design Basics](https://reader034.fdocuments.in/reader034/viewer/2022051821/56816385550346895dd46df4/html5/thumbnails/17.jpg)
Web Graphic Formats - JPEG- JPEG (Joint Photographic Experts Group)
- Lots of colors = JPEG… Solid colors or no gradations = GIF
- Perfect for detailed photos as it supports 16 mil. colors
![Page 18: Web Design Basics](https://reader034.fdocuments.in/reader034/viewer/2022051821/56816385550346895dd46df4/html5/thumbnails/18.jpg)
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
![Page 19: Web Design Basics](https://reader034.fdocuments.in/reader034/viewer/2022051821/56816385550346895dd46df4/html5/thumbnails/19.jpg)
Web Graphic Formats
PNG, JPEG and GIF files
![Page 20: Web Design Basics](https://reader034.fdocuments.in/reader034/viewer/2022051821/56816385550346895dd46df4/html5/thumbnails/20.jpg)
What is GUI?A graphical user interface is the link
between you and your content.
Example: A screenshot of a modern GUI (Windows 7).
![Page 21: Web Design Basics](https://reader034.fdocuments.in/reader034/viewer/2022051821/56816385550346895dd46df4/html5/thumbnails/21.jpg)
A GUI is a type of user interface that allows people to interact with computers, MP3 players, gaming
devices, etc. in more ways than typing.
- Wikipedia
What is GUI?
![Page 22: Web Design Basics](https://reader034.fdocuments.in/reader034/viewer/2022051821/56816385550346895dd46df4/html5/thumbnails/22.jpg)
Examples of GUI:
![Page 23: Web Design Basics](https://reader034.fdocuments.in/reader034/viewer/2022051821/56816385550346895dd46df4/html5/thumbnails/23.jpg)
Good GUI> makes a user feel in control> presents the most up-to-date info> makes info easily available> is transparent & intuitive
http://www.sensisoft.com/ (Advertising Agency)
![Page 24: Web Design Basics](https://reader034.fdocuments.in/reader034/viewer/2022051821/56816385550346895dd46df4/html5/thumbnails/24.jpg)
What is Navigation?Navigation is the term used for the structure of the menus and all of the other kinds of links to help theuser find their way around.
![Page 25: Web Design Basics](https://reader034.fdocuments.in/reader034/viewer/2022051821/56816385550346895dd46df4/html5/thumbnails/25.jpg)
Dreamweaver – 1st Steps
![Page 26: Web Design Basics](https://reader034.fdocuments.in/reader034/viewer/2022051821/56816385550346895dd46df4/html5/thumbnails/26.jpg)
What is Dreamweaver?
Watch this video (www.lynda.com)
![Page 27: Web Design Basics](https://reader034.fdocuments.in/reader034/viewer/2022051821/56816385550346895dd46df4/html5/thumbnails/27.jpg)
Where to store files?
Local Drive Remote Server
Upload final filesto make the site public
![Page 28: Web Design Basics](https://reader034.fdocuments.in/reader034/viewer/2022051821/56816385550346895dd46df4/html5/thumbnails/28.jpg)
Where to store files
- You can store files under your Gavilan account
- Each student enrolled in the class will have a Gavilan account and server space
- It’s very important that you back up files on a regular basis (i.e. bring a USB drive or
a portable external hard drive)
![Page 29: Web Design Basics](https://reader034.fdocuments.in/reader034/viewer/2022051821/56816385550346895dd46df4/html5/thumbnails/29.jpg)
Organize Your Files WellIt’s important that you create a Root Folder before starting to
work on your site. I suggest that you create smaller folders inside the main Root Folder to organize your files better:
images text layered Photoshop
files
- contract- notes
CSS files
![Page 30: Web Design Basics](https://reader034.fdocuments.in/reader034/viewer/2022051821/56816385550346895dd46df4/html5/thumbnails/30.jpg)
File Naming Conventions
The primary concern for any web developer should be accessibility. Is your site designed to
be easily accessible to the wide variety of browsers that are currently available? One of the ways you
can ensure that your site is user-friendly, is to ensure that all files follow these naming rules:
![Page 31: Web Design Basics](https://reader034.fdocuments.in/reader034/viewer/2022051821/56816385550346895dd46df4/html5/thumbnails/31.jpg)
- Use only low case letters
- No spaces between words, but you can do this:art_portfolio.html
or this: art-portfolio.html
- Don’t use any special characters such as:#, &, /, @, etc.
- Make file names descriptive, but short
- Use well-known abbreviations
![Page 32: Web Design Basics](https://reader034.fdocuments.in/reader034/viewer/2022051821/56816385550346895dd46df4/html5/thumbnails/32.jpg)
Defining a New Site
Watch this video (Adobe TV site, by James Williamson)
![Page 33: Web Design Basics](https://reader034.fdocuments.in/reader034/viewer/2022051821/56816385550346895dd46df4/html5/thumbnails/33.jpg)
Web site – Background Graphic
- Gradients (Photoshop)
- Repeating backgrounds(Tiling images in Dreamweaver)
- Rollover Images (Photoshop & Dreamweaver)
![Page 34: Web Design Basics](https://reader034.fdocuments.in/reader034/viewer/2022051821/56816385550346895dd46df4/html5/thumbnails/34.jpg)
Student Work - Examples
Discovering Bodie website by Nick Gariaeff
Santa Cruz Muzzleloaders website by Jacqueline Kiel
Hair Salon website by Ramon Mendoza
Website for Nicole & Brittany by Zachary Pettibone
![Page 35: Web Design Basics](https://reader034.fdocuments.in/reader034/viewer/2022051821/56816385550346895dd46df4/html5/thumbnails/35.jpg)
“The Non-Designers Web Book”by Robin Williams and John Tollett
Good Books: