System Requirements
Macintosh Minimum Preferred (or greater)
CPU PowerPC 601 PowerPC G3
Speed 180 MHz 300 MHz
RAM 96 MB 128MB
Hard Drive 2 GB 4 GB
Video Resolution 600x800 1024x768
Operating System OS 7.5.5 OS 8.1
PC Minimum Preferred (or greater)
CPU Pentium Pentium III
Speed 200 MHz 400 MHz
RAM 96 MB 128 MB
Hard Drive 2 GB 4GB
Video Resolution 600x800 1024x768
Operating System Windows 95 Windows 95
Applications
HTML Browsers
Netscape
Internet Explorer
HTML Editors
Adobe Go Live
Macromedia Dreamweaver
BBEdit
Graphic Editors
Adobe Photoshop
Macromedia Fireworks
Other Applications
Adobe Acrobat (Distiller)
Macromedia Flash
Macromedia Director (Demo)
Apple QTVR or equivalent
(Top)
Books
Designing Web Graphics
How to prepare images and media for the web (3rd edition)
Author: Lynda Weinman
ISBN: 1-56205-949-1
Retail Price: $55.00
How The Internet Works (4th edition)
Author: Preston Gralla
ISBN: 0-7897-1726-3
Retail Price: $29.99
Introduction to the Web and Christian ethics
A) What is the Internet?
1) A series of computers, connected through a global network?
B) Who runs the Internet?
1) Not owned by any one person, the internet requires many people to coordinate the effort for it’s successful use.
C) What can you do on the internet?
1) View web pages, using a web browser.
o Netscape
o Internet Explorer
2) Exchanges files via FTP (File transfer protocol)
o WinFTP
o Fetch
3) Real time chatting to anybody in the world.
o ICQ
o AOL Instant Messenger
4) Listen to music and audio.
o Midi files
o Sampled sounds
o MP3 compressed files
o Real audio
o Streaming audio
5) View video.
o QuickTime
o Streaming video.
6) Send and receive E-mail
o Eudora
o Microsoft Outlook Express
o Claris Emailer
7) News groups
8) Using search engines.
o Yahoo.com
o AltaVista.com
o Infoseek.com
o Go.com
D) What is a web browser?
A) A software program that runs on your computer that interprets HTML information and displays it in a way is meaningful and informative to you.
B) The two most common web browsing programs are…
o Netscape
o Internet Explorer
C) Common elements of web browsers:
o URL entry line. This would be where you would enter a web address such as www.ywamwoodcrest.com.
o Page loading indicator. This is usually shown as some sort of animated picture or icon in the browser button bar area. As long as the graphic is animated, the page you requested is still loading.
o Back button. Used to take you to the previous page you were viewing. You can usually keep hitting the back button to go back to further pages you have viewed since you started your current web surfing session.
o Forward button. If you have clicked the back button, this button will take you forward again to where you just came from before you pressed the back button.
o Stop button. There will be times when the page you requested, is taking a very long time to load. The Page loading indicator will keep animating, indicating that there is more information to come but for what ever reason you decided you want to terminate the page loading process. When you hit the stop button, this is accomplished.
o Refresh button. If a page has not loaded correctly or completely, the refresh button tells the browser to request the entire page again. Another reason for using the refresh button is that the content of the web page has changed and you want to view the current changes. A typical example of this might be a stock quote page.
o Cache. This is a certain amount of hard disk space that is reserved for files you have already loaded from the web. A cache is very useful for helping pages seem to load faster. The reason for this is that the instead of reloading a graphic that you just loaded for a previous page, your browse will check the cache to see if it already has the file. If so, it will use the one stored in your computer vs. downloading it once again.
o Bookmarks. This feature allows to store where pages are that you would like to go to again. It is simply a list of the URL that will get you there.
E) What is a search engine?
A) A website interface the directs your search criteria to a database of information. The goal being to provide you with a listing on web sites that closely match your search request.
B) Types of search engines.
1) Spiders
a) Uses a software robot to search all pages in a web site. Cataloging all the information that you can then search for.
b) Common Spider type search engines.
o Alta Vista
o Hotbot
o Excite
o Lycos
o Web Crawler
2) Directory
a) Gets it’s information from user submissions.
b) Common Directory based search engines.
o Yahoo
o Web Crawler
F) What is a URL?
A) Uniform Resource Locator
B) You can enter URL information into a browser to view a specific web site. For instance, you could enter www.ywamwoodcrest.com which would show you YWAM Woodcrest web site.
C) What happens when you enter a URL into a browser?
1) Browser goes to DNS Server to find out IP address.
2) Returns IP to Browser.
3) Browser goes to that IP address and request page or item.
4) Returns information back to Browser.
5) Browser interprets HTML information and generates web page.
G) What is a Domain Name
A) Breaking down the parts of a domain name www.ywam.com
1) .com = Top most part domain
2) Other top domains.
a) .com = commercial
b) .org = organization
c) .net = network
d) .gov = government
e) .mil = military
f) .edu = education
3) Country domains.
a) .au = Australia
b) .ca = Canada
c) .uk = United Kingdom
d) .fr = France
4) ywam = Next lower domain
5) You should always get the .com name before any other extension due to the fact that this will be the default page loaded if someone simple enters your domain (ywam, whitehouse, etc.) After you have secured the .com name then register a second, more applicable extension such as .org.
o Many years ago when the federal government was setting us their various web sites. They decided it would be nice to have a web page specifically for the whitehouse. Since they were a government organization, they registered a new domain with the following name www.whitehouse.gov. As the web got more popular and people started snatch up Domain Names and one such Domain to be bought was www.whitehouse.com. The only problem was the owner had no connection with the Whitehouse in Washington DC. Instead, they set up a pornographic web site at this domain. Now when some unsuspecting person entered Whitehouse in their browser, up can a site most were not prepared to see. Since then, the domain name has been reclaimed by the federal government and when entered, directs you to the correct site at www.whitehouse.gov. Let it be a lesson learned.
H) What is a DNS server?
A) Stands for Domain Name Server
B) One of many computers on the internet with the specific job of translating the URL into a physical IP address.
C) Since we remember words easier than long numbers, the DNS system allows us to use the easiest way to remember a specific web site.
I) What is an IP address?
A) Stands for Internet Protocol
B) Like a telephone number or house address, an IP address is a unique identifier to where a web server and ultimately a page can be found.
C) An IP address will resemble something like this 129.56.34.78
J) How is information transferred over the internet.
A) TCP/IP
1) Stands for Transmission Control Protocol/Internet Protocol
2) A means to take information and break it into small packets of information.
3) Many packets can be sent to the receiving computer one after another.
4) Packets arrive at the requesting computer, often out of order.
5) Each packet has a number called a checksum that is used to verify that the information received is all there and not corrupted.
6) If a corrupted packet is received, the computer request that the particular packet be sent over again.
7) Once all the packets have arrived at the requesting computer, they are put back into the correct order and the image and/or page is displayed in your browser.
K) Possible ways to connect to the Internet.
A) Modem (14.4Kbps, 28.8Kbps, 56Kbps)
B) ISDN (128Kbps)
C) Cable Modem (1.5 Mbps)
D) DSL (1.5 Mbps)
E) T1 (1.5 Mbps)
F) T3 (44 Mbps)
G) T5, etc…
L) What is Bandwidth?
A) The rate of speed that potentially, information could travel along the connection.
B) What can effect potential bandwidth.
1) Other people using the same connection at the same time.
a) Cable modems have this problem as your are sharing the network line with all your neighbors.
2) Other local users on the same network like in an office setting or university.
3) Retrieving data information from a computer with a slower network than yours.
4) Heavy traffic on the internet caused by…
a) Streaming video
b) Music files like MP3 (even if it is compressed)
M) Common symbols and their meanings.
A) K = 1,000
o 1K = 1000
o 10K = 10,000
o 100k = 100,000
B) M = 1,000,000
o 1M = 1,000,000
o 1.5M = 1,500,000
o 44.8M = 44,800,000
C) b = Bits (This is the smallest amount of measurement a computer can store and work with.)
D) B = Byte (1 Byte = 8 Bits)
o 1 Byte = 8 Bits
o 10 Bytes = 80 Bits
o 250 Bytes = 2000 Bits
E) ps = per second
o 56Kbps = 56,000 bits per second
o 7,000 bytes per second.
o 1.5 MBps = 12,000,000 bits per second
o 1,500,000 bytes per second.
N) Calculating the true rate of speed to potentially transfer a file.
o File size to transfer / (Connection Speed / 8) = Number of seconds to transfer file.
o Example
o File size to transfer = 500KB
o Connection Speed = 56Kbps
o Connection Speed(56,000) / 8 = 7000
o File size to transfer (500,000) / 7000 = 71.5
o Number of seconds to transfer file = 71.5 Seconds
o 1 minute, 11 seconds
O) How computers measure the size of a file?
A) Bytes vs. Bits
1) 8 bits = 1 byte
2) Why is this important?
o Because internet data transfer is measured in bits, but everything you want to send is measured in bytes.
B) How people count numbers?
1) The Decimal System.
2) Uses numbers 0.1.2.3.4.5.6.7.8.9
o 1 = 1
o 10 = 10
o 177 = 177
C) How a computer counts?
1) The Binary System.
2) Uses numbers 0 & 1 only
o 00000000 = 0
o 00000001 = 1
o 00000010 = 2
o 00000100 = 4
o 00001000 = 8
o 00001001 = 9
o 11111111 = 255
3) The Hexadecimal System
4) Uses numbers 0,1,2,3,4,5,6,7,8,9 & Letters A,B,C,D,E,F
o 0 = 0
o 1 = 1
o 9 = 9
o A = 10
o C = 12
o F = 15
o FF = 255
5) Often colors are represented using the hexadecimal system in web design.
o FF0000 = Red
o 00FF00 = Green
o 0000FF = Blue
o 000000 = Black
o FFFFFF = White
P) What is file compression?
A) When you take a computer file and reduce it to a smaller size.
B) Two types of compression.
1) Lossless
o Information is exactly the same as it was to begin with after it is decompressed.
o .gif graphic files
o .zip program & data files.
o .hqx & .bin program and data files.
2) Lossey
o Some information is lost by compressing the file to reduce file size. Lost information can not be recovered when decompressed.
o .jpg graphic files
o .mp3 music files
o .mov QuickTime movie file (in most cases)
Q) What is encryption?
A) When information is coded so that sensitive information can not be stolen or interpreted by other people or unauthorized computers.
B) Common types of information that are encrypted on the Internet.
1) Credit Card information.
2) Personal information like Social Security numbers and passwords.
C) How can you tell when you are in a secure/encrypted web site?
1) https://***.*****.*** (The "s" indicates you will be entering a secure server.)
2) Observe your browsers secure site indicator.
R) What’s an intranet?
A) A in-house network that post web pages and content for in-house use.
B) Intranets are becoming more popular but should not be mixed up with the Internet
(Top)
Strategy
A) Planning a successful web site takes careful planing. Here are some things to consider.
1) Who is my target audience?
a) Is it a narrow or broad audience?
b) Are there things that I can make some assumption regarding my target audience?
c) Are they web savvy?
d) Would they know how to install a plug-in that is specific for my site?
e) Would they typically own the best and newest equipment?
f) Are most going to connect to my site via a modem or a high speed network connection?
2) What does the site need to communicate?
a) We have a great product and we though you might like to know that? (http://www.levi.com)
b) We carry and sell every book you could possibly be looking for. (http://www.amazon.com)
c) Were a web site for everyone vs. were a top of the line exclusive web site for professional business women.
3) Are there any special goals that need to be met?
a) Listen to what the client wants and never take it upon yourself to just give them what you think they need unless they give you the permission to spend there money that way.
o This unfortunately is a common problem in technical fields such as web design. We need to give our customer the benefit of the doubt that, while they may not know how to design a web site, they probably have some idea what they are trying to get across to there customer.
o Remember it might be there referral that could be your next job.
b) Ask a lot of questions of your customer.
o There is nothing more frustrating than working long hours on a web site only to have your customer make major changes because you did not get a good picture of what they wanted.
4) What does your customer like as far as web sites and printed material go?
a) Why do they like it?
o Color?
o General feel.
o Attitude of the piece.
5) What is the purpose or scope of my site?
a) Educate the user?
b) Pure entertainment or interaction?
c) Factual information?
d) Gather information?
e) Sell a product?
6) Keep in mind that the ultimate purpose of the site is for the end user.
a) You can always help your client by doing some directing of how the site will be perceived by the end user.
b) There is definitely a place and time to speak up if part of the site idea will obviously not meet the end users need or the customers goals. Ultimately though, your customer will be the one who is going to pay you.
6) Does the company or organization already have printed material that they would like to use as a model for their web site?
7) Can I find other sites that have a similar purpose as my customers?
a) What can you learn from these sites?
8) Many times a customer will have a Photoshop or graphic mach-up of what they want the site to look like. Realize that it can often be very difficult to replicate an exact look generated by a graphic layout program. The way you layout web pages is radically different than the way you layout a page in QuarkXPress or Photoshop.
B) Storyboarding
1) Storyboarding is a way to visually brainstorm a web site page.
a) What would be wrong with a design concept laid out this way.
b) Obviously the main problem is that a screen is usually wider than it is taller.
2) One really great way to storyboard is to take a screen shot of an empty browser window. Printout a handful of these and draw your potential web pages in the white area. This will help you with general scale and placement of items.
3) Once you have storyboarded a design, you might run the design idea past another web developer to see how you might accomplish a look or specific type of layout. Just because you can simply draw a picture of how you would like something to look does not mean it will be simple to design.
4) Remember to allocate for your navigation links and buttons.
a) A user should be able to get to any page on your site within 1-2 links. As a rule of thumb, I always supply a place for users to get back to the home page to make further selections.
b) Never rely exclusively on the back button on the users browser.
c) Remember that since a user can set a bookmark to your page and any point, you would be wise to provide a way for them to find your actual home page.
5) Adding a site map?
a) A site map is a web page that contains a link to all your pages for that site. It is often organized by category.
b) A site map can help your user quickly find a specific place on your site that they want to go?
c) Site maps can be confusing it you are not quite sure what you are looking for.
6) Adding a glossary page.
a) If your web site or subject mater has unique content and lingo that goes with that content, this would be a great way to educate your user.
b) You could also offer hyper-links to this glossary of information throughout your document.
C) Flowcharting
1) When you flowchart a web site, you create a visual connection and correlation between different pages. It is a way to organize how pages will link to each other.
2) Never lock yourself into one specific flowchart design. As with all types of web content, you will inevitably find you forgot a category or page. You need to design with the though that this site can fairly easily change and grow with time.
3) Use an index card strategy to document all the pages that you think you need. Then arrange all these card in a logical way. After that have someone else take your cards and arrange them as they see the obvious organization of your prospective site. Glean from the most common ways people organize the cards as this will probably also be the logical way your users will view your site. If there is an odd ball card that does not seem to fit, you might consider combining the content with another page. It might be that there is a need for another category if the page is important enough. Ask your team members what they feel the odd card would best fall under.
D) Navigation
1) Navigation is simply the way you move around in your site. It is always a good idea to be consistent in the look and placement of your navigation. It should be simple to use and not to dominating.
2) Often, JavaScript rollovers are used in navigation buttons. This provides feed back to the choice the user might be selecting.
a) A rollover is a button that changes appearance when your mouse pointer is over it.
3) What is JavaScript?
a) JavaScript is a programming language that can be integrated into web pages.
b) It is known as an interpreted language since each line of JavaScript programming code is read in and interpreted by the browser as what to do.
c) JavaScript is not the same thing as Java. While they share the same name, JavaScript use to be called LiveScript. Since this did not sound very interesting, the name was changed to JavaScript for marketing purposes.
E) Using Metaphors to help with the design process
1) A metaphor can be anything that has a relevant tie to your subject. Linda Weinman gives a great example of this on page 38 in her book, Designing Web Graphics.
F) File Structure
1) It is important that you begin to develop good habits on how you organize your web pages and graphic files. With this in mind, I will recommend a wonderful organizational structure that I have used for years.
2) You set up the file structure before you begin developing any web pages or graphics. It is like and organizational skeleton of how the web site will connect and be put together.
3) You set up the file structure from your operating system. You do not need to use any special software except what runs your computer.
4) You should be familiar with how to create folders also known as subdirectories on your computer. You should also feel comfortable being able to navigate around your computers hard drive moving to different locations on your hard drive.
5) The root folder.
a) This is the main folder that holds the "web site" folder and the "support files" folder. It can live anywhere you would like to put it on your hard drive. (My suggestion is to locate it in your documents folder, in another folder called "web".)
(Top)
HTML
A) HTML as a language.
1) HTML Stands for - Hyper Text Markup Language.
2) This is a language of the Internet.
3) HTML is a text based language that when interpreted by a web browser such as Netscape, will produce a web page.
B) HTML Tags
1) In HTML, most of the programming code is broken down into what we call tags.
2) Common HTML tags and there functions.
a) <html> </html> - This the first and last tag of any web page.
b) <head> </head> - All pages contain a opening and closing head tag. Information put into here will mostly not be seen by the user except for what is put in the title tag. (Shown next)
c) <title> </title> - This is the text that is shown at the top of a web page.
d) <body> </body> - The majority of your web site tags will live between the opening and closing body tags.
e) <p> </p> - The paragraph tag.
o Many times the ending </p> paragraph tag is not used and in most cases the result is the same. Omitting the ending paragraph tag can sometimes be and option you will set in your HTML editor.
f) <b> </b> - The Bold tag. Any text between these tags will be bold.
g) <I> </I> - The italics tag. Same as above except it will be italics.
h) <img src=" woodlogo.gif"> - Use this tag when you are inserting a graphic image into a web document. Very often this tag will have other parameters inserted in it to give more details about how you want the graphic displayed.
i) <img src="woodlogo.gif" height="40" width="800" border="0" align="top">
j) <hr> - This simple tag inserts a line from left to right across the page. Is web terms we would refer to this as a rule or horizontal rule. There are other parameters that can also be set for a rule such as size of the line in pixels and the width it uses.
k) <hr size="3" width="50%">
l) <!--Begin navigation here--> - This is a comment tag. What ever you type between this tag will not show up on the web page. It’s specific purpose it to provide you with a way to add comments to a page.
m) <a href="http://www.ywam.org">Go to YWAM</a> - This is a link (hyperlink) tag. This tag will display the words "Go to YWAM" with a blue underline under the words. As we know, this is an indication the words are a hyperlink to another location. In this case, when you click the words, your are taken to the web site at "http://www.ywam.org".
n) <a name="Top"></a> - This is an anchor tag. You would place an anchor tag next to text or a picture that you would want to go to from a hyperlink. This anchor has been given the name "Top". If we have a tag at the bottom of the page that says…
<a href="#Top">Go to the top</a>
When you click on the words, "Go to the top," your browser window will jump to that location on the page.
o) <br> - This is a real handy tag when you need to drop down to the next line but don’t need as much space between the lines as the paragraph (<p>) tag gives you.
p) <table border="4" cellpadding="0" cellspacing="2" width="200">
<tr>
<td colspan="3">
<center>
Just the stats
</center>
</td>
</tr>
<td>Food</td>
<td>1997</td>
<td>1999</td>
</tr>
<tr>
<td>Apples</td>
<td>$12.74</td>
<td>$13.49</td>
</tr>
<tr>
<td>Pears</td>
<td>$6.57</td>
<td>$7.35</td>
</tr>
</table>
This is quite a large tag which actually includes many small tags. It is one I use all the time and is the key to successful web development. It is called the table tag. It is like a spread sheet. It contains many sub tags as follows.
o <tr> </tr> - The table row tag.
o <td> </td> - The Table data cell tag.
C) HTML Editors
1) A software program that aids you in creating HTML pages. It does this in a more intuitive way than hand coding HTML tags.
2) Common HTML Editors
o Adobe Go Live
o Macromedia Dreamweaver
o Claris HomePage
o Microsoft Front Page
(Top)
Graphics
A) There are two basic classifications of graphics and the programs that create those graphics.
1) The first is known as Bitmap graphics
2) The second is called Vector based graphics.
3) Special software is written to create both types of graphic files. Some of the more common ones are as follows.
a) Bitmap graphic creation & editing software.
o Adobe Photoshop (the standard in the graphics industry)
o Paintshop Pro
b) Vector based graphic creation & editing software.
o Adobe Illustrator
o Macromedia Fireworks (My favorite editor)
4) Each of these graphic editors have an advantage over the other and you will ultimately use both to have the greatest flexibility and power in creating great graphics.
5) Bitmap graphic editors allow you to change each individual pixel in a picture. You can use this software to manipulate parts of a photo or graphic that needs touchup or changing.
6) Say for instance, your photo is of an apartment building. Right in front of the building is a low strung power line. There in no good angel to take the picture to avoid the power line. So what do you do? Take the picture with the power line in it. Then use your bitmap graphics editor to remove the wire as if it never existed in the first place. Now a technique like this can take some practice but is within the reach of most people.
7) Lets take a look at one of the best graphic editors on the market, Adobe Photoshop.
(Adobe Photoshop training begins here)
8) Vector based graphic editors have the unique ability to allow you to scale and modify graphics without the distortion problem you have in a program like Adobe Photoshop.
9) A vector based graphics program gets it name from the way it stores and draws a graphic shape. Lines and shapes are mathematically created. Say for instance you draw a line from one corner of the screen to the other. A vector based program only knows that it is supposed to draw a line from point A to point B with a line that is only so thick. Vector based graphics are best suited for logos and illustrations. Eventually you will save (export) a graphic that was created in a vector based program so it can be used on your web page. It must be exported in either .gif or .jpg format to be "Web Friendly."
(Macromedia Fireworks training begins here)
10) Most graphic programs allow for the creation of anti-aliased graphics. This unusual term refers to the way and edge of one graphic shape interacts with it’s neighbor graphic. When an anti-aliased graphic is viewed side by side with a non-anti-aliased graphic, the difference becomes more clear. An anti-aliased graphic has a smoother appearance the non-anti-aliased one.
11) There are two types of graphics used on web pages.
a) .gif - Used most commonly for logos and illustrations
b) .jpg - Used most commonly for pictures and are that contains gradations.
12) Each of these graphic file formats is compressed.
13) Each of these graphic file formats has a specific purpose and time for use as well.
14) Lets discuss .gif graphics first.
a) GIF stands for Graphics Interchange Format.
b) It was developed by CompuServe in the late 1980’s specifically for online use.
c) GIF is available is two different formats.
o GIF87a
o Supports transparency & interlacing
o GIF89a
o Supports transparency, interlacing & animation.
d) GIF transparency simply means, you can have a graphic, lets say a happy face.
e) If you want the yellow happy face to seem to float on top our you web page and the background of your web page has a pattern you could use a transparent .gif.
f) First create the happy face on lets say a blue background. Then you set the blue color to be transparent in your graphics editor. When viewed in the browser, the blue background will be gone but the yellow happy face will be left on your page.
g) One thing to note when using transparent .gif’s is that if you create the .gif using anti-aliased graphics, you will get a colored jagged outline around wherever the transparent color was. This is caused by the anti-aliased graphic effect. Since it averages the adjacent colors, you get an in-between color that is not the same as the color that should be transparent nor is it the color of the bordering graphic. When using transparent .gif’s, never use anti-aliased graphics.
h) Interlacing is a process where the graphic is drawn in greater detail as the image loads. The advantage of using interlaced graphics, is that it lets your web viewer get an idea of what is loading without the entire picture loading. This way if they determine there is a point of interest they want to go to, they do not need to let the entire page load before going there.
i) Animated GIF’s are like a flip book of pictures. You change a small part of the picture at a time. When you sequence these pictures one after another, you get the illusion of animation. Remember that an animated GIF is a series of individual pictures all stored in one file. This means the file size of an animated GIF can grow very rapidly.
 |
j) GIF’s have a lossless file compression. This means that the file is compressed but when uncompressed, all the original information is still there. You do not lose any quality in a lossless compression file format.
k) One of the short fallings of GIF graphic files is the limited number of colors in it’s pallet. You have what is known as a web safe color pallet of 216 colors. If you create a picture ignoring the 216 color pallet and then convert your graphic to a GIF format, there is no telling how the graphic software will convert your picture. It will most likely choose the most mathematically close color in the GIF color pallet and substitute your color with that. This means a blue sky might have patches of pink or green grass with red throughout it. It is always best to work within the 216 color pallet when you know the graphic will be used as a GIF.
15) Now lets discuss .jpg graphics.
a) .jpg or JPEG stands for Joint Photographic Expert Group
b) .jpg graphics allow a full color pallet that can display millions of colors. As long as the view of your web page has the available color depth as your graphic, they should see basically the same thing you do. (Some difference come from gamma settings between different computer operating systems.)
c) JPEG file are referred to as "jay-peg".
d) JPEG’s are great for photographs or graphics that have blends. The main reason is that it’s color pallet allows for subtle shades of colors.
e) JPEG graphics allow compression at various levels of compression.
f) JPEG compression is a lossy compression file format. This means you will loss quality of the original picture if you compress it with JPEG compression. The quality of the picture vs. compression play against each other.
o The higher the quality, the less the compression and the greater the file size.
o The less the quality, the higher the compression and the smaller the file size.
g) JPEG is also good for gray scale pictures where there are more than just black and white pixels in a picture
B) Color Issues
1) In most cases, if you start to create a new graphic in Adobe Photoshop, the default mode will be RGB. This is fine is your final graphic is to be a JPEG but if it is going to be a GIF then you may have a problem.
2) When you convert from RGB mode to Index mode in Photoshop, you will be asked to select a palette to convert to. Since you are creating a graphic for the web and in this case it is a GIF then you would choose the Web palette option. Leave the Color Depth setting to Other and if at all possible, leave Dither to None.
a) If your original picture has blends in it, and you still want to try to create a GIF instead of a JPEG, try setting Dither to Diffusion. The biggest problem with doing this to a GIF file is that very little compression will be possible and you will end up with a very large GIF file.
3) There will be color differences from one computer platform to the next. For instance, if you develop your graphics on a Macintosh, they will show up darker on a PC. The root of the problem lies in what is called the Gamma setting.
o Macintosh Gamma (default) = 1.80
o PC’s Gamma (default) = 2.20
4) Since there are more PC’s users surfing the web, it would be advisable for Macintosh web developers to change there Gamma settings in their Monitors & Sound control panel to reflect Uncorrected Gamma. You will notice you screen seems darker. This will now more closely resemble the PC users screen.
C) What is a browser-safe color palette? (see DWG P.124)
1) A prearranged set of colors that appear the same on Netscape and Internet Explorer.
2) Why 216
a) The colors were chosen more mathematically than as visually appealing. There are six shades of red, six shades of green and six shades of blue. Any one of these shades of color can be mixed with the other shades of color. This will give you 216 total color choices (6x6x6=216).
b) Here are the six color settings used by each color. Remember that you combine these to get other colors.
Decimal Hex Look
0 00 Darkest
51 33 Darker
102 66 Dark
153 99 Light
204 CC Lighter
255 FF Lightest
c) Make sure your color choices contain the numbers above or you will get a color shift when viewing it in a browser
d) A color shift happens when you use a color that is non-browser safe and your web user has limited video color options. The color will shift to something other than what you desire.
e) The color safe palette does not apply when creating JPEG’s. The main reason for this is JPEG is a lossy file compression. Colors that you use in a JPEG will be altered as soon as you save the graphic in JPEG.
f) Due to the difference in the way GIF’s and JPEG’s are compressed, it is not possible to exactly match foreground JPEG’s of Background GIF’s and vice-versa.
g) For a complete set of color pallets, look at pages 126-129 in DWG.
D) Color in your design (Chapter 9 DWG)
1 ) The choice of your colors in a web site could be the difference between a site that is viewed as current or one that seems to have stepped out of the disco era.
2 ) Always take your time deciding on the colors of your graphics and site.
3 ) Common color terms
a) Spectrum - All the possible colors
b) Hue - A specific color.
c) Value - The range from light to dark of that color
d) Saturation - The intensity of the color.
e) Contrast - The difference between colors.
f) Readability - How readable is the information with the current color contrast
g) Tint - The process of adding more white to a color
h) Tone - The process of adding more black to a color.
4) Read chapter 9 of DWG for more information on colors.
(Top)
Linking
A) What is a link?
1) A link provides you with a way to navigate to different pages in your web site or to other web sites.
2) The two most common items you can link from are text and graphics.
3) There are several ways to know where a link is.
a) Text that is underlined (usually in blue) is a link
b) Pictures with a blue border are links.
c) Pictures that you move over with your cursor and your cursor turns into a pointing finger are a link.
B) Linking from text in a document.
1) If we had the following text and wanted to link to a page called hello.htm, this is what it would look like.
Welcome to Bobs page of recycling. Click Here to find out more about recycling.
(Here's the HTML code)
<html>
<head>
<title>Bob's recycling world</title>
</head>
<body>
Welcome to Bobs page of recycling. <a href="hello.htm" target="_body" title="Hello World">Click Here</a> to find out more about recycling.
</body>
</html>
2) Other than the link itself, there are some other items here to be aware of.
a) a href="hello.htm" - What page to load when the link in clicked.
o Occasionally you will see a # symbol with text after it in a <a href="hello.htm#bob"> tag. This is known as an anchor. What will happen when this link is clicked is that it will open the desired page in your browser and then locate a specific place within that page that has a corresponding anchor point with the same name. Are example above would go to the hello.htm page and then move the page contents so we could see the item with the hidden "#bob" anchor tag.
b) target="_body" - Which frame to load the page in. (We will go more into this when we study frames.)
c) title="Hello World" - Some browsers support an option that when your mouse is over a link long enough, a message will pop up from the link with this text in it.
C) Linking from a graphic in a document.
1) If we had a page with a graphic and we wanted the graphic to be a link, this is what the HTML code would look like.
<html>
<head>
<title>Bob's recycling world</title>
</head>
<body>
Welcome to Bobs page of recycling.
<a href="hello.htm"
target="_blank" title="My World">
<img height="50" width="40" src="http://ywamwoodcrest.com/tools.jpg" border="0" alt="The World" align="top"></a>
</body>
</html>
2) Again, we have the link and some of the same tag items as we had in the text link, but there are a few new options as well.
a) a href="hello.htm" - What page to load when the link in clicked.
o You can also use anchor tags like you do with text links. (See above)
b) target="_blank" - Where to load the page. The _ blank option tells the browser to open up a new window and load the page into it.
c) title="My World" - Some browsers support an option that when your mouse is over a link long enough, a message will pop up from the link with this text in it.
d) img height="50" - This is the height to draw the graphic.
o You can also specify the tag with a percentage. For example
img height="25%"
o The down side to using this option is that the entire graphic must download and the browser must decide what 25% of the original size is.
o Another pitfall of using percentages is the problem of proportionate scaling. If you scale a graphic height and width by 50% you will get a graphic that is not proportional.
o Remember that if you are having to scale down or reduce a picture when it gets to the users browser, you have forced them to have a larger download than was necessary. It is always better to create the graphic to the exact correct size for the page.
e) width="40" - This is the width to draw the graphic.
o This is just like the height option above.
o It is possible to omit the height and width tag. The problem with doing this is that the graphics will have to load before any further text can be viewed. It is better to supply the exact size of a graphic so our user can at least read text while they are waiting for the rest of the graphics to load.
f) src="tools.jpg" - This is the actual graphic file to use on the page.
o Did you know that you can even use a graphic file located on another web server. All you need to do is change this path to point to where the graphic is you want to use. This technique is often used for banner adds. This allows the company to change the banner but not change any code on your page.
g) border="0" - The number in this tag determines the width of the link border around the graphic.
o It is important to understand that if this option is missing, a border will be drawn around your link graphic.
o Most of the time when you insert a graphic as a link, no border tag will be included. Remember to add this option if you do not want a border around your link graphic.
h) "alt="The World" - This is not a required tag but if you are going to design professional web pages, you should always include them. This is the text that will show up before the graphic has loaded. It is a courtesy you provide for your users so that it is not necessary for the entire page to load before they have some idea of what the page contains.
o Another less known reason for using this option is to allow people with certain disabilities to browse your web site. There are plug-in for web browser that will read the content on a web page. What would you rather hear if you were vision impaired, "Welcome" or "image"?
i) align="top" - The align option has many options. It’s basic function is where to align adjoining text. The "top" option will align text to the top of the picture. Other alignment tags.
o top
o middle
o bottom
o left
o right
D) Using thumbnails for linking.
1) Thumbnails are small copies of larger graphics. It is commonly used in a catalog type page where you might have a lot of graphics to display to your user but you know they will only be interested in a handful. The thumbnail gives the user a faster download time and the option to choose what graphic or picture they would like to look at with more detail.
This is the thumbnail. It is only 1.5KB in size. When clicked, it loads the full image. It is 12KB in size. Your thumbnail loaded nearly ten times faster that this graphic.
E) Providing clues that a graphic is a link.
1) While the above thumbnail is effective, I would additionally try to clue my user that they were to click this if they wanted to see a larger size. I might include the thumbnail along with a list of other thumbnails and an explanation of what the user is to do.
2) It is preferable to provide some sort of clue that your user might be looking for. Lets look at some options.
3) Both of these graphics could be links. The lower one provides us with a much more obvious clue that it is a clickable button.
4) To emphasize this as a like even more, we could use a technique called rollover.
5) Rollovers are graphic links that change state when the mouse cursor is moved over it.
6) The left most graphic links are shown in the state they would show when the cursor is not over them. The right most graphic links are shown in the state when the mouse cursor is over them. [another example of java rollovers is the navigation buttons at www.ywamwoodcrest.com]
7) To create this sort of rollover effect, you create two graphics, one for each state. There are two other states that can also be shown, the button clicked down and the button released state. While these other states are possible, most people do not use them.
8) One last thing to know is that rollovers require the use of JavaScript, a programming language that can be used in web pages. We will discuss this further in a following lesson.
F) Linking with imagemaps.
1) An image map is a way of taking one graphic and linking to more than one page from it depending on the location clicked upon.
2) Imagine having a graphic of the United States. You could have an image map defined that when you click on any particular state, you are taken to a page specifically about that state.
3) Defining an image map usually requires an HTML editor or other program for aiding in mapping out the linked locations. Macromedia Fireworks provides tools for creating imagemaps and then exporting the code to a HTML format.
(Top)
Typography
A) Typography Terms.
1) The two most common classifications for type faces would be Serif and Sans-serif.
a) A Serif font face is one that has small excentuating strokes attached to the main character strokes. Here is an example of some serif type faces.
b) The serif font style is typically the default font used by web browsers.
c) It is thought that the serif font style is the easiest to read for large amounts or text.
d) A Sans-serif font face has no excentuating strokes attached to the main character strokes. Here is an example of some sans-serif type faces.
e) You can try to force your user to display a sans-serif font style with the Font Face tag. I do not recommend using this technique since it requires you to designate a specific font name. Since you do not know what the user might have loaded on their computer, you might try to set a font face no available on the users computer and your text will display with unpredictable results.
f) Another term used in Typography is monospaced or sometimes called fixed font width fonts. Here is an example.
g) Notice that with a fixed font, the space used in the letter "I" takes up the same amount of space as the letter "W". Fixed fonts are great when you require certain types of information to line up in columns. Mono type faces could be used when creating graphics but should not be used as body test for a web page.
h) Proportional type look like the following.
i) Notice that a proportional font face has varying widths for each letter. You can clearly see the space it takes to create the letter "I", is much less than the space required for the letter "W". The majority of type faces used as proportional font faces.
j) There is a term that refers to how much space is between lines of text. This term is called leading. Here is an example.
k) These two lines have been leaded differently. Font’s are designed with certain leading characteristics but there will be times when they do not comply with the look of the design you are creating.
l) Spacing refers to the amount of space between letters. Here is an example.
m) These two lines have been set with different spacing.
n) One of the last terms we will discuss regarding type is the Drop Cap. Here are some examples.
o) Drop caps are simply a way to draw attention to a specific part of your text. You may have seen this technique used in storybooks as a child. Simply enlarge the first letter of a word. It may also be necessary to adjust the spacing between the drop cap and adjacent letter.
p) There are many other terms to typography that have not been discussed here. These will be most of the terms we will use during our class.
B) Type on the web.
1) If you have ever used a page layout program such a QuarkXPress or Page Maker you are going to hate the way type is done on for web pages. Why is this? Because you have little control of how text will look from one computer platform and browser to the next. If you like to have total control over the way your designs look, then you must begin to understand what you do have control of and how to get the most out of those options.
2) When you enter text for a web page in most cases it will be displayed in a Serif font face similar to Times Roman at about point size 12.
3) You do have some control on how large the text will be but it can be somewhat relative. Basically there is a default font size that you can increase and decrease in certain increments.
4) There is a tag called Font Face that lets you designate what font you want your text to be displayed in on the users machine. Sounds like this would be the solution to all our font problems but just the opposite is true. This tag can the beginning of more problems that it is worth. Here is the big problem with the Font Face tag.
a) When using the font face tag you must designate what font you want the users computer to use for your text. This would be fine if you knew for sure that every user that was going to view your page had that font face.
b) If the user is on a PC and you designate the font face "Geneva" you have just introduced a problem for the browser to solve. PC’s do not use the type face "Geneva", the closest they might have to it would be "Arial". But how can you be sure they have "Arial". It is possible to provide many type faces to use in case one is not available. Now you have just added downloadable code length to your page and you are still not sure if the user will have the font you have specified.
c) I have seen some pages nearly a third larger due the web page designer trying to second guess what type faces there end user will have on there computer.
d) Is it advisable to add any further time to downloading a page? Is it worth the hassle to determining what font name you want the user to use not knowing for sure if they will have any?
e) I believe it is substantially better and more professional to work with as many givens as possible. It is a for sure fact that your user has some font designated as the default font. It is also more likely that there default font will match 90% of the other users default font. To date, I have not used the Font Face tag and have never had any problems with text showing up so radically different from what I generally designed for.
f) This is my recommendation, don’t use the Font Face tag at all. It is still an option for you to decide on and there are many people who have unknowingly used this option because there HTML editor automatically placed the Font Face tag throughout there pages.
h) Due to my thought on the Font Face tag, we will not go any further in it’s use. If you would like to pursue this option further, there are many books that will give you the full details on using it.
5) Some of the font options that you have control over are as follows.
a) <b></b> This is the bold tag. What ever you insert between these tags will be bold.
b) <I></I> This is the italic tag. What ever is between these tags will be in an italic font style
c) <pre></pre> This is the preformatted tag. What ever you place between these tags will be displayed in a monospaced font style.
d) <Font Size="5"></Font> This tag is used to set the relative size of the font. You should understand when using this tag that the result can be drastically different from on Operating system to another. Even between browser you will have major differences. This is not a problem if you use this tag conservatively. For instance, when I first started doing web pages years ago. I though that if I wanted my text to be real large, lets say for a title of a page, that I should go with the biggest I could get. Then I started to view my pages on other computers and found out how large the title actually was. Now I know better. It is best to make small, one step changes and check it out on various browsers and computers to see how it is displayed.
o <Font Size="7"> = Largest
o <Font Size="6"> = Ever More Larger
o <Font Size="5"> = Even Larger
o <Font Size="4"> = Larger
o <Font Size="3"> = Default size (Not necessary to specify)
o <Font Size="2"> = Smaller
o <Font Size="1"> = Smallest
e) Text justification. Justified text simply means text that is either all the way to the left margin, centered or all the way to the right margin. Most HTML editors will make this very easy to apply to text. Here are the tags that you would use for the different types of justified text.
o Left - No special tags are needed. Text will be default, be justified to the left.
o Center - <center></centered>
o Right - <div align="right></div>
C) Cascading Style Sheets (CSS)
1) I will briefly cover what cascading style sheets are so that you are at least informed in the idea of them.
2) The concept behind Cascading Style Sheets or CSS as they are often called, is the ability to have complete control of where a graphic or text is placed. It also allows to have control of what the text will look like.
3) Wow, you would think with such a promising option as CSS, that I would dedicate much time to the subject. Unfortunately as will many technologies that come to the web, CSS started out with a lot of promise that was never fulfilled. A large percentage of users browsers do not support CSS. For this reason alone, you should not use CSS with the exception that you know for certain (100%) that your user has CSS capabilities.
4) If you want the type of control that CSS had to offer you would be much better off investing your time in learning Macromedia Flash. This technology is now coming as a regular part of the install on most recent web browsers. It has greater flexibility and reliability
(Top)
