Post on 27-Dec-2015
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 2008S M T W T F S
22 23 24 25 26 27 28
29 30 JULY 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
Mondays 6:30 pm - 9:30 pmUsually one break, halfway through.
How to reach me by e-mail:jhherring@yahoo.com
Please place “BCC Student” in subject line.
Class Web Sitehttp: / / 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 toolsever invented . . .
Pencil and paper
Good Supplies
USB key1 GB < $102 GB < $154 GB < $25
Necessary Supplies
Brands: SanDisk, Kingston, PNY
Vendors: CompUSA, BestBuy, BrandsMart, Target, Staples, Office Depot, Amazon.com
A free e-mail 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
Yahoo Unlimited
Gmail 6.8 GB
MSN / Hotmail 5 GB
The General Idea
The General IdeaTo 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 Sitesand Putting them on the Net
<html> <head> <title>Welcome to my Web Site! </tite> </head> <body bgcolor="yellow"> <p>Hello!</p> </body></html>
<html> <head> <title>Welcome to my Web Site! </title> </head> <body bgcolor="yellow"> <p>Hello!</p> </body></html>
<html> <head> <title>Welcome!</title> </head> <body bgcolor="yellow"> <p>Hello!</p> </body></html>
Creating Web Pages and Web Sitesand Putting them on the Net
<html> <head> <title>Welcome!</title> </head> <body bgcolor="lightgreen"> <p>Hello!</p> </body></html>
<html> <head> <title>Welcome!</title> </head> <body bgcolor="lightblue"> <p>Hello!</p> <img src="usb.jpg" /> </body></html>
<a href="home.html">Go to Home Page</a>
Creating Web Pages and Web Sitesand Putting them on the Net
<a href="blue.html">Go to Blue Page</a>
<a href="http://yahoo.com">Go to Yahoo</a>
Putting Web Pageson the Net
Creating Web Pages and Web Sitesand Putting them on the Net
HostHost
Creating Web Pages and Web Sitesand Putting them on the Net
TheWeb Host
TheWeb Host
Web Site HostingNaturally, these services aren’t free.
You can expect to pay at least$5/month (long-term contract;
more if you want to paymonth-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
Domain Names
Pines Lincoln-Mercurypineslm.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 Sitesand Putting them on the Net
http://mywebsite.com
http://mycompany.com
http://anothername.net
http://anonprofit.org
http://broward.edu
http://whitehouse.gov
http://nasa.gov
http://noaa.gov
http://af.mil
http://www.mywebsite.com
http://www.mycompany.com
http://www.anothername.net
http://www.anonprofit.org
http://www.broward.edu
http://www.whitehouse.gov
http://www.nasa.gov
http://www.noaa.gov
http://www.af.mil
Your Domain Name
http://806.com http://806.the-village.com
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 RegistrarsRegister 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 e-mail) 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 e-mail)
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 DocumentStructure
</html>
<head>
</head>
<body>
</body>
<title>
</title>
title of page
other things that belong in the head, if any
everything else
Entire HTML file
<html>
</html>
<head>
</head>
<body>
</body>
<title>
</title>
<html> <html> <head> <title> This is the title </title>
</head>
<body>
Hello, world!
</body></html>
<html> <head> <title> This is the title </title>
</head>
<body>
Hello, world!
</body></html>
<html><head><title>This is the title</title>
</head>
<body>
Hello, world!
</body></html>
<html> <head> <title> This is the title </title>
</head>
<body>
Hello, world!
</body></html>
<html><head><title>This is the title</title>
</head>
<body>
Hello, world!
</body></html>
<html><head><title>This is the title</title></head><body>Hello, world!</body></html>
<html><head><title>
This is the title
</title></head>
<body>
Hello, world!
</body></html>
<html><head><title>This is the title</title></head><body>Hello, world!</body></html>
Hello, world!
Hello, world!
Hello, world!
Hello,world!
Hello, world! Hello, world!
Hello,
world!
File Names
Naming Your FilesFor the UNIX Platform
Mac
CreateHostView
CreateHostView
CreateHostView
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.htmMyWebPage.htmlWEBPAGE.htmlmy First webpage.htmlMy*First webpage!.htmlweb_page.html underscore (UNIX convention)
special charactersspacescapitalization issuescapitalization issues
web-page-001.html numbers are OK
file-name.html File-Name.html
Windows (not case sensitive)
UNIX (case sensitive)
<a href=“file-name.html”>link text</a>
<a href=“file-name.html”>link text</a>
file-name.html
File-Name.html
Cannot Display
Web Page
image of ipod.jpg Image of iPod.jpg
<img src= “Image of iPod.jpg” />
<img src= “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.htmMyWebPage.htmlWEBPAGE.htmlmy First webpage.htmlMy*First webpage!.htmlweb_page.html underscore (UNIX convention)
special charactersspacescapitalization issuescapitalization 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:
JPG BMP TIFF RAW Others
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
JPGJPG
GIF
Smaller File = Better
File Size and File Formats
Smaller File = Quicker Download
256 KB17 KB
15JPG BMP
1 2
1
1 2
1
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 KB8 KB
12
45 KB4 KB
11
240 KB 20 KB12
JPG BMP
BMP JPG
GIF BMP
File Size and File Formats
616 KB
63 KB
9
JPG
JPG
File Size and File Formats
54 KB
54 KB1
JPG
JPG
File Size and File Formats
28 KB
237 KB
8JPG
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 containlarge amounts ofinformation if notproperly optimized
DON’T USE
BMP, WMF, TIF
Other formats
CONVE
RT A
S NEE
DED
FTP(File Transfer Protocol)
FTPFile Transfer Protocol
httpHyper-Text Transfer Protocol
Creating Web Pages and Web Sitesand Putting them on the Net
HostHost
Creating Web Pages and Web Sitesand Putting them on the Net
FTP
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 downor memorizing it.)
Your FTP User ID
your first name:
thomaspatriciaelizeealan
alijosemaria
Your FTP PasswordYou should memorize your password.
You should also keep it safe and private(once you get a new password).
All passwords are set to 12341234 at first.
If you want yours changed, send me e-mailand suggest a new password.
It must be at least 5 characters, cannot belonger than 8 characters, and you may
or may not get exactly the password you want.Only I can change the passwords.
jhherring@yahoo.com
Your web pageswill appear at this address:
http://johnherring.net/bcc/0806/yourlastname
(if you upload a file called “index.html”,this is all you need to type to see that page)
or
http://johnherring.net/bcc/0806/ . . .yourlastname/file-name.html
for files with other filenames.
Daily File Storage Procedures
At the end of class each day, you should e-mail your files to yourself. Remember, you should have a free e-mail 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