Welcome to BCC’s Photoshop 1 Instructor / Revered Master / Fearless Leader John Herring

Things you’ll need to know... Schedule Five meetings, 3 hours each. Total: 15 hours. June / July 2008 SMTWTFS JULY Mondays 6:30 pm - 9:30 pm Usually one break, halfway through.

How to reach me by Please place “BCC Student” in subject line. Class Web Site http: / / johnherring.net / bcc You’ll be visiting this address, and related addresses, frequently. Changes / announcements / files / resources will appear on the class web site...

The best design tools ever invented... Pencil and paper Good Supplies

USB key 1 GB < $10 2 GB < $15 4 GB < $25 Necessary Supplies Brands: SanDisk, Kingston, PNY Vendors: CompUSA, BestBuy, BrandsMart, Target, Staples, Office Depot, Amazon.com

A free account. It’s best to use one of these, instead of a BellSouth or AOL account, and I’ll help you get one. Required Supplies YahooUnlimited Gmail6.8 GB MSN / Hotmail5 GB

The General Idea

To learn to create web pages...  Write code according to simple rules. Create basic page with text. Revise the page by editing the text.  Add images to web pages.  Add links to other pages and other sites.  Arrange text and images on the page. Change the arrangement to improve it. Make changes to the arrangement, or some part of it, and re-publish.  Publish the whole thing to the web. 

Creating Web Pages

Creating Web Pages and Web Sites and Putting them on the Net Welcome to my Web Site! Hello! Welcome to my Web Site! Hello!

Welcome! Hello! Creating Web Pages and Web Sites and Putting them on the Net Welcome! Hello! Welcome! Hello!

Go to Home Page Creating Web Pages and Web Sites and Putting them on the Net Go to Blue Page Go to Yahoo

Putting Web Pages on the Net

Creating Web Pages and Web Sites and Putting them on the Net Host

Creating Web Pages and Web Sites and Putting them on the Net The Web Host

Web Site Hosting Naturally, these services aren’t free. You can expect to pay at least $5/month (long-term contract; more if you want to pay month-to-month) for a good web host. Free hosts, like Tripod or Freewebs or Yahoo GeoCities, always have some kind of drawback – ads, pop-up panels, etc., on your web pages. If you’re OK with these, go for it. If you want your own space, you must have your own domain name....

Domain Names

Pines Lincoln-Mercury pineslm.com Doctors Talking drstalking.com Your Name? yourname.com? I can help you look up domain names, and even buy them, if you want.

Creating Web Pages and Web Sites and Putting them on the Net Your Domain Name

Getting your domain name has nothing to do with getting web hosting. They are two separate things. Many companies offer both, for “convenience,” but this approach can backfire. These are two separate things. Domain Names

Domain Name Registrars Register your domain name, like mycupcakes.com or joesmithphotos.com, for a period of time, and a small fee (about $10/year). If this registration isn’t kept current, your domain (including ) just won’t work. The registrar might offer to host your web site in addition to registering your domain, but this is not required. (Your web host will likely offer domain registration too – maybe even for free – but this too isn’t required, and may be a bad idea.)

The Keyboard

Escape

Tilde

Exclamation, Bang, Slam

At (from )

Pound, number, hash, octothorpe

Percent

Ampersand

Star, asterisk

Hyphen, dash / Underscore, underline

Equals

Braces, curly braces

Quotes (shift character)

Colon, semicolon

Brackets, angle brackets (open / close)

Slash

Control, Ctrl

Alt

Arrow / cursor keys

HTML Document Structure

title of page other things that belong in the head, if any everything else Entire HTML file

This is the title Hello, world!

This is the title Hello, world! This is the title Hello, world!

This is the title Hello, world! This is the title Hello, world!

This is the title Hello, world! This is the title Hello, world! This is the title Hello, world!

Hello, world! Hello, world! Hello, world! Hello, world! Hello, world!

File Names

Naming Your Files For the UNIX Platform

Mac Create Host View         

Things NOT to do... consistency (with index.html) my-web-page.html UNIX Filenaming Conventions use hyphens (dashes) to separate parts mywebpage.html all-lower-case, no spaces, no special characters, ends with.html mywebpage.htm MyWebPage.html WEBPAGE.html my First webpage.html My*First webpage!.html web_page.html underscore (UNIX convention) special characters spaces capitalization issues web-page-001.html numbers are OK

file-name.html File-Name.html Windows (not case sensitive) UNIX (case sensitive) link text file-name.html File-Name.html Cannot Display Web Page

image of ipod.jpg Image of iPod.jpg Image-of-ipod.jpg Image-of-iPod.jpg Windows (not case sensitive) UNIX (case sensitive)

Things NOT to do... consistency (with index.html) my-web-page.html UNIX Filenaming Conventions use hyphens (dashes) to separate parts mywebpage.html all-lower-case, no spaces, no special characters, ends with.html mywebpage.htm MyWebPage.html WEBPAGE.html my First webpage.html My*First webpage!.html web_page.html underscore (UNIX convention) special characters spaces capitalization issues web-page-001.html numbers are OK

File Sizes & Image Formats

File Size and Image Formats

Digital cameras often save images in one of several formats: JPGBMPTIFFRAWOthers Most of these are unsuitable for use on the web, and even JPGs (which are suitable) can be much too large or can have other issues that should be dealt with before putting them on the web. But, most image types that are unsuitable can be made suitable, using appropriate free software (available here in the lab and at home). There are also other sources for images, like the web itself, but just because it came from the web doesn’t mean it’s right for what you want to do. Be careful. So what’s a suitable image type? Glad you asked....

Most of the images you want to use in your web pages will be in either JPG (pronounced jay-peg) or in GIF (usually pronounced giff) formats. There is also PNG, but this is less common. If you’re looking at any other image type, you should consider converting it before you do anything else with it. In general, JPGs are suitable for photos and other complex images with lots of different colors, while GIFs are suitable for simple images with few colors, large areas of single colors, or with transparent areas, or with animations. JPG images cannot have transparent areas or animations. JPGs for photos, GIFs for everything else. JPG – Photo, many complex colors GIF – Only a few solid colors

Smaller File = Better File Size and File Formats Smaller File = Quicker Download JPG GIF

Smaller File = Better File Size and File Formats Smaller File = Quicker Download 256 KB17 KB 15  JPG BMP

Bits and Bytes A bit is the smallest unit of data a computer can work with, a 1 or a 0. A byte is eight bits. File sizes are measured in bytes, because it’s important to know how big they are – how much room they’ll take up, how long they’ll take to download, how well they’ll print, etc. A smaller file size is better than a larger file size, but this usually means the quality of the image suffers. In general, the larger the image, the higher the quality – but the slower the download time, etc. A kilobyte is 1000 bytes (1 KB), and is usually fairly small by web standards. Most images for the web fall into the range of about 10 KB (kilobytes) to 80 KB -- total -- for the page. Anything larger than about 100 KB -- total – for the images on a page, and you should ask yourself if there’s a better way. There usually is. An image that needs 100 KB on disk, or 200 KB on disk, or even 1400 KB on disk, needs to be reduced (optimized) before use on a web page.

File Size and File Formats 96 KB 8 KB 12  45 KB4 KB 11  240 KB 20 KB 12  JPGBMP JPG GIFBMP

File Size and File Formats 616 KB 63 KB 99 JPG

File Size and File Formats 54 KB 11 JPG

File Size and File Formats 28 KB 237 KB 88 JPG

File Size and File Formats DO USE JPG (photos)* GIF (solid colors, or if transparency or animation is required) PNG (any) *JPGs can still contain large amounts of information if not properly optimized DON’T USE BMP, WMF, TIF Other formats CONVERT AS NEEDED

FTP (File Transfer Protocol)

FTP File Transfer Protocol http Hyper-Text Transfer Protocol

Creating Web Pages and Web Sites and Putting them on the Net Host

Creating Web Pages and Web Sites and Putting them on the Net FTP

1. A connection to the internet. 2. A program to send and receive files (an FTP client). 3. A host name / address. 4. A user ID. 5. A password. FTP (File Transfer Protocol) requires the following things:

Program to send and receive files (FTP client) Host name / address User ID Password

Your FTP Account (I suggest writing this down or memorizing it.)

Your FTP User ID your first name: thomas patricia elizee alan alijose maria

Your FTP Password You should memorize your password. You should also keep it safe and private (once you get a new password). All passwords are set to at first. If you want yours changed, send me and suggest a new password. It must be at least 5 characters, cannot be longer than 8 characters, and you may or may not get exactly the password you want. Only I can change the passwords.

Your web pages will appear at this address: (if you upload a file called “index.html”, this is all you need to type to see that page) or yourlastname/file-name.html for files with other filenames.

Daily File Storage Procedures At the end of class each day, you should your files to yourself. Remember, you should have a free account with Yahoo (unlimited), gmail (6+ GB), or MSN / Hotmail (5 GB). You should also upload all your files to the server via FTP if you want to see them on the web. You should check to be sure your files actually got uploaded safely – use a browser to check that the files are on the server. If you omit this step, you may get an unpleasant surprise later. You may also want to copy your files to a USB key.

Other Items Colors, color pickers, color utilities Broward Convention Center site