360 likes | 501 Views
Web Design Basics. Lecture Outline:. 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.
E N D
Lecture Outline: • 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
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 What is Internet?
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 Modem Speeds
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
Reverse Though web site – entry page. Entry Page vs Home Page
Reverse Though web site – home page (table of contents). Entry Page vs Home Page
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
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
What is the standard Web resolution?72 dpi (ppi)Decoding screen size and resolution
In Photoshop, go to File, New and choose Web What screen size should I use?
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) Web Graphic Formats - GIF
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 Web Graphic Formats - JPEG
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
Web Graphic Formats • PNG, JPEG and GIF files
What is GUI?A graphical user interface is the linkbetween you and your content.Example: A screenshot of a modern GUI (Windows 7).
What is GUI? A GUIis a type of user interface that allows people to interact with computers, MP3 players, gaming devices, etc. in more ways than typing.- Wikipedia
Good GUI> makes a user feel in control> presents the most up-to-date info> makes info easily available> is transparent & intuitivehttp://www.sensisoft.com/ (Advertising Agency)
What is Navigation? • Navigationis the term used for the structure of the • menus and all of the other kinds of links to help the • user find their way around.
What is Dreamweaver? • Watch this video (www.lynda.com)
Where to store files? • Local Drive Remote Server • Upload final files • to make the • site public
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) Where to store files
It’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: Organize Your Files Well • images • text • layered Photoshop files • - contract • - notes • CSS files
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: File Naming Conventions
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
Defining a New Site • Watch this video (Adobe TV site, by James Williamson)
Gradients (Photoshop) • Repeating backgrounds(Tiling images in Dreamweaver) • Rollover Images (Photoshop & Dreamweaver) Web site – Background Graphic
Discovering Bodiewebsite by Nick Gariaeff • Santa Cruz Muzzleloaderswebsite by Jacqueline Kiel • Hair Salonwebsite by Ramon Mendoza • Website for Nicole & Brittany by Zachary Pettibone Student Work - Examples
Good Books: “The Non-Designers Web Book” by Robin Williams and John Tollett