Week 01

Week 01- Topics

Introduction
Syllabus
Domain name registration
Web hosting
The Internet
Web file naming conventions
HTML review
Project file structure
Web graphic formats
Image compression using Photoshop
Assignment 1: create HTML page
Quiz 1

Welcome to our first class

Please be sure you have read through the Introduction page located on this site. (FYI: it is the same information as the Introduction section on the class smconline.org site).

Also, make sure you have read through the syllabus for this class. The syllabus is located in the “Syllabus” section in the main navigation of this site.

If you have any questions about the introduction information, the syllabus, or anything else regarding general class questions, please post the question in the discussion section of the smconline.org site. I will answer your questions so all students can benefit from the additional information.

Let’s get started

To start off our class, I’d like to give you information about the process for posting a web site live to a server. If your goal is to design, build, and post web sites for clients (or yourself), you must understand there are two main “services” you have to purchase in order to post a site live.

Here are the two “services” you’d need to purchase in order to post a site live:

1. Domain name registration: registration of domain name you’d use for your site. (i.e – yourname.com)
2. Web Hosting: purchase of server space at a web hosting company.

Domain Name Registration

The first step is to determine a name for your web site. You can check to see if a particular domain name is available using a “Find a Domain” feature on a web site like Network Solutions. The “Find a Domain” feature is on the left-hand side of the Network Solutions home page. Here you can input a potential domain name to check if it is available.

Note: In order to have access to a server you should register your own domain name and purchase a web hosting plan. This is a requirement for the class, I recommend students set up their own web site. I find many students are interested in doing so and, if you are interested in securing clients in the future and designing web sites professionally, you will need your own web site and server space.

I have provided the following information for students who are interested in securing a domain name.

• I recommend domain registration with an ICANN-Accredited Registrar. If you don’t want to sift through the hundreds of companies, you may want to consider Network Solutions or Go Daddy.
• The big difference between Network Solutions and Go Daddy is price and service.
• Registering a domain name with Network Solutions costs $34.95 for one year. (Or free if you sign up for a year of web hosting. A one year basic hosting plan is around $120). Network Solutions has excellent customer service and has been around a long time.
• GoDaddy is more economical. You can register a domain name for $1.99 for one year with the purchase of a 2 month plan (Two months is the minimum purchase length and costs $3.99 a month) GoDaddy’s customer service has been impressive recently. (I’ve been told they send both a follow-up email and call new customers to answer questions.)
• Feel free to register your domain name at a different company than the two given above. I’d recommend you make sure the registrar you’ve chosen is ICANN-Accredited and you know someone who’s had a good experience with the company.

Web Hosting

In addition to securing a domain name, you will need to purchase a web hosting plan so you have your own server space. Both Network Solutions and GoDaddy, (and other web hosting companies), may attempt to sign you up for additional add-on services. Rarely will you need to add additional services to your web hosting plan. All you’ll need is a domain name and a basic hosting package. Beware of the multiple attempts companies make to sell add-on services when you order your domain name and web hosting. If you want to get started slowly without committing to a 12-month hosting plan, the 2 month minimum plan through GoDaddy might be a good choice.

When you purchase your web hosting you’ll see a box to add a domain name to your order. If you specify a one year registration, you’ll be charged $1.99. I recommend you choose the Linux/Unix platform rather than Windows for your web hosting. (Unless you need language support for ASP.NET, then you should probably go with a Windows server).

Remember to stay clear of the multiple attempts companies will make to sell other add-on services when you order your domain name and web hosting.

Here are some other features you should be aware of:

Disk space:
Total amount of usable space that you are allotted on hosting company servers. You will only need 300 – 500 MB…. at GoDaddy you get 5 GB with the Economy Plan. If you plan to incorporate a lot of video in your site, it is good to have at least 1 GB of disk space.

Data Transfer/Bandwidth: This is the total amount of data that you can transfer to or from your web site. Below is an example of how many times a page would need to be viewed in order to reach 10 GB of transfer:

Page size 30 kb: 699,050 views
Page size 40 kb: 524,288 views
Page size 50 kb: 419,430 views
Page size 60 kb: 349,525 views

Therefore, most web hosting plans offer plenty of bandwidth.

When signing up for these services, you’ll be asked to specify a password and be given a login name. Please make note of all login and password information, You might be given a separate login and password for your domain registration and for web hosting. You’ll need this information to login onto your server. Please write everything down and keep any confirmation emails you receive from the companies in a place where you can find them.

Note: You are welcome to use any of my recommendations above. If you have someone you trust who has recommendations, or if you have purchased a web hosting plan already, or can do it by yourself, I encourage you to follow your own direction. It’s always good to do as much research as possible and to ask around. In no way are you required to follow any of my recommendations.

How the Internet Works

Take a look at the diagram below and read through the notes so you understand how the internet works. (Note that “Client” refers to the computer where the web page is viewed…)

Servers

The Server is where the web site files live. The web server software runs on the server machine, responding to client requests by sending files back to the client. The server also processes CGI (Common Gateway Interface) requests, runs programs, and accesses databases.

• Server software runs on the server machine
• The web site files are on a hard disk attached to the server
• The server software formats and delivers each web page element based on HTTP requests
• Elements are delivered to many clients at the same time
• A “hit” indicates that one element (not a page!) was delivered (e.g. an image)
• A web page is composed of many elements, therefore each page accessed generates many hits
• Hits vs. page visits vs. site visit

Clients

The client is the computer where the web page is viewed. The browser software runs on the Client computer and sends requests to the Server computer. When the client receives files from the server, the Client assembles the web page and displays it.
• The web browser runs on the client
• The client requests elements from the server
• It receives and “parses” the elements delivered by the server
• First reads the HTML
• Formats the page, and displays the text
• Gets additional elements (images, audio, etc.) specified in the HTML
• Displays additional elements
• Manages the interactions with the user (e.g. forms, scrolling, image maps, etc.), minimizing the amount of work the server has to do
• Runs client-side software (JavaScript, Java, plug-ins)

Composition of a web page

A web page is composed of the following elements:
• The HTML file, which describes the page layout, defines links to other web pages, and contains the text for the page
• Elements that come from the same server where the HTML files is, or from a different server
• Image files (.gif, .jpg, .png)
• Audio files (.mp3, .au, .ram, .mov)
• Other multimedia objects (QuickTime movies, Flash, Real, etc.)
• JavaScript

See the links to the directories below for examples. Take a look and note the various elements that comprise the web pages. Notice all the HTML files. (.htm and .shtml files are also HTML files).

• Can you find the .jpg and .gifs images? Where are they located?
• What about the Flash files… they end in .swf and only one of the directories below contain Flash files. Do you know which one?
• Do you know what a .css file is? A CSS file stands for”Cascading Style Sheet” and we will talk about these later in the semester.

Monterey Pop Web Site
Nike Annual Report Web Site

Additional Resources

From the “How Stuff Works” web site: How Internet Infrastructure Work

Moving files between the Mac and PC

Files can be transferred easily from the Mac to PC, and from the PC to the Mac for almost all applications. But you must follow the below directions carefully.
1. Always use PC formatted compact discs on both platforms. The Mac can read PC compact discs, but the PC cannot read Mac formatted compact discs. (Same is true for USB/flash drives).
2. Always use the correct 3 character file suffixes (e.g. .psd for Photoshop, .doc for Word, .htm or .html for Dreamweaver). This is critical. Both PC and Mac won’t know what to do with your files if you don’t use the proper suffixes.

Web file naming conventions

When creating your web site, you must be very methodical when naming your files. First, never use spaces, uppercase letters, or any special characters in your file names. While your site may seem to work OK in Dreamweaver, on your local computer, once you put the web site on the server, violating these rules can cause you no end of problems.

For the web page file names, be sure you use “index.html” (or “index.htm”) for your first web page. Using this special name will tell the server to display this page as the default page for any directory of html files.

Other HTML files should have meaningful names such as products.html or about_us.html, rather than convenient names such as page1.html. Name your files as if you giving the web site to someone else to work on, and who won’t be able to ask you any questions about it (for example, you 6 months after the project is finished when you can’t remember anything about it).

Web file naming rules

• No spaces in the filenames
• Use all lowercase letters
• No special characters in the filenames: For example none of the following are acceptable in web filenames: “!~:&(,
• The files MUST have the proper suffix (.html, .gif, .jpg)
• Be consistent in your naming of files, for example use the same prefix in a series of files. Also, to ensure that the files alphabetize correctly, always “zero-pad” your filenames when they have numbers in them. In other words, if you have a series of files numbered 1-20, the first file should be something like myfile01.jpg, and the last file should be named myfile20.jpg.

And again, it’s critical that you name your files correctly from the start. If you attempt to rename your files after you’ve created your site, you will, in all likelihood, break all the links in your web pages.

HTML Review

You should be familiar with all the information below. If you are not, I suggest you take the prerequisite to this class GrDes 65. We will not cover the basics of HTML in this class although it is important for you to understand the basic principles.

Why learn HTML?

Given that tools such as Dreamweaver exist, and allow you to create web pages without knowing HTML, you might ask “why learn HTML?” There are several reasons:

• Dreamweaver does not always do what you want. To get the page to look right, you often need to hand code some HTML.
• You will become a better web designer. Learning HTML and how a web site is built will give you the advantage of understanding how to design a better site for your client.
• You will get paid more if you know HTML. It is a simple fact. Web design companies want people who can hand code HTML. This is because you will be a more flexible employee if you can do lots of things. In addition, larger web site projects often require that the pages have special HTML codes inserted into the web page, and tools like Dreamweaver won’t be able to do this.
• If you want to use JavaScript, you need to know HTML. The most interesting web pages often use JavaScript to make them interactive. Before you can learn JavaScript, you need to understand HTML and be comfortable coding.

Tags

HTML stands for Hypertext Markup Language, and uses the concept of tags. An HTML tag is always contained between a left angle bracket “<” and a right angle bracket “>”. These tags are special instructions designed to mark or “tag” a particular section of the web page, for example to identify a set of text as bold. The tags do not appear in the visual display of the web page. In general, HTML tags have a starting tag “<tag>” and an ending tag that has the same name as the starting tag but with a forward slash at the beginning “</tag>”. The text in between the starting and ending tags is the only text affected by the tags.For example, to make some text bold, the HTML would be written as follows:Here is some text, and <b>this text will show bold</b> when displayed in a browser.

HEAD & BODY Sections

An HTML web page is divided into to two major sections, the head and body. The head section is a description of the page, with its title, any meta tags, JavaScript, and other special information about the page. The head section does not contain any displayed content. The body section contains a description of how the page should look and work, including the text, text markup, links for in-line images, form descriptions, links to other pages, and page enhancements such as Flash, JavaScript, etc.

Every HTML page must include the opening and closing tag of what I call the four “master tags” – <html></html><head></head><title></title><body></body>. Below is an example of the basic structure of the four “master tags.”

Basic HTML

A simple example of a web page

<html>
<head>
  <title>HTML Example</title>
</head>
<body bgcolor="#FFFFFF">
  Some text for a web page that <b>demonstrates</b> the basic form of HTML in a web page.
</body>
</html> 

HTML coding style

The format of your HTML code does not affect how the page will be displayed in a browser.

For example, this example of poor HTML style:

<html><head>
<title>a title
</title></head><body>
Example of BadHTML Coding style<ol type="A"><li>item #1
</li><li>item #2</li>
</ol></body></html>

Displays exactly the same as this example of good HTML style.

<html>
<head><title>a title</title></head>
<body>
Example of Good coding style
<ol type="A">
<li>item #1</li>
<li>item #2</li>
</ol>
</body>
</html>

HTML Basic tags

For the HTML tags below, please be sure you understand all 19 tags outlined in the notes below. You will need to use these tags in your Assignment 1 for this week. This should be review for you, but if you need to refresh your memory or re-learn how to use these tags, be sure to take the time to do so NOW. Remember, if you have any questions on how to use the tag, please take a look at the example located here:

Link to HTML Example directory

Also, note the name of each tag is hyperlinked and links to an example page. (Click on “background color” below to see example). If you view the source of the example page, you can see exactly how the page is coded.

1) background color

inline

<body bgcolor=”#000000″>

css

body { background-color: #000000;}

2) background image

inline

<body background=”images/an_image.gif”>

css

body { background-image:url("images/an_image.gif"); }

use this image as the background image (control-click to download it):

3) Heading styles
<h1>The biggest heading</h1>

<h6>The sixth biggest heading</h6>

4) Line break
some text using a br with a line break at the end<br />

5) Paragraph
<p>some text in a paragraph, always has a blank line after it</p>

6) Bold and italic

<b>Some Bold Text</b> OR <i>Some Italic Text</i><br>
<b>Some Bold Text AND <i>some bold and Italic text</i></b>

<strong>Some Bold Text</strong> OR <em>Some Italic Text</em><br />
<strong>Some Bold Text AND <em>some bold and Italic text</em></strong>

How would you use html markup to produce this sentence (bold & italic, then italic)?

7) Horizontal rule
<hr />
<hr size=”20″ />
<hr width=”100″ align=”left” />

<hr width=”50%” />

8) Image
<img src=”images/an_image.gif” width=”200″ height=”100″ alt=”An image to be displayed” />

9) Links
A link to another web site
<a href=”http://www.nytimes.com/”>Link to the New York Times</a>

A link to a page within the website
<a href=”about.html”>Link to a the About page on this site</a>

A link that sends an email. Note that this won’t work right on the computers because they are not configure for email.

<a href=”mailto:jane@jane.com”>Email Jane</a>

The next two tags enable you to create a link to a different location on the current web page. When the user clicks on the link, the browser will scroll to the new position – assuming that the link is far enough away to need a scroll. The “href” version is the link and must include the “#”, the “name” version is the location on the page to scroll to and must NOT include the “#”. NOTE: You must have some text between the <a name> tag and the </a> tag, or the link won’t work in Explorer. If you don’t want anything to so in the name tag, use the non-breaking space HTML code:

<a href=”#lowerpoint”>Link to a location lower on this page</a>
<a name=”lowerpoint”>Some text lower on the same page</a>

10) Font

Special note: We will NOT define our font styles inline in the body of the HTML file. In this class, we will define all styling using external CSS files. More about this later in the semester.)

inline

<font face=”Arial, Helvetica, sans-serif” color=”#ff0000″ size=”6″>this is some text</font>

css

body { font-family: Arial, Verdana, sans-serif; }

PC	Mac
Arial	Helvetica
Times New Roman	Times
Courier New	Courier
Verdana	Verdana
Trebuchet	Trebuchet
Symbol	Symbol

11) Centering
<center>Using CENTER</center>

12) Indenting a paragraph, creates a paragraph and adds margin on left and right
<blockquote>some indented text</blockquote>

13) Bulleted list
<ul>
<li>this is item 1 in an un-ordered list</li>
<li>this is item 2</li>
<li>this is item 3</li>
<li>this is item 4</li>
</ul>

14) Numbered list, types: numbered=no type, upper letters=”A”, lower letters=”a”, upper roman=”I”, lower roman=”i”

<ol type=”i”>
<li>this is item 1 in an ordered list</li>
<li>this is item 2 in an ordered list</li>
<li>this is item 3 in an ordered list</li>
<li>this is item 4 in an ordered list</li>
</ol>

15) Preformated text allows use of extra spaces and line breaks to format your text

</pre>

alskf asldk
     aslfk asldkf asdlk

         als faslfk alskfa sldk

            aksdf alsfk laskf alsdkf

     alskf asldk aslkf
als kfasdlk

</pre>

16) Flowing text around an image align=”left”, align=”right”, vspace=”pixels” margin above and below image, hspace=”pixels” margin left and right of image

<img src=”images/an_image.gif” width=”200″ height=”100″ align=”left” hspace=”10″ vspace=”10″>

17) Text colors text=basic text color, link=links color, vlink=visited links, alink=link when mouse down

inline

<body text=”#ff0000″ link=”#003300″ vlink=”#000066″ alink=”#000000″>

css

body {color:#ff0000;}
a:link {color: #003300; text-decoration: underline; }
a:visited {color: #000066; text-decoration: underline; }
a:hover {color: #000099; text-decoration: none; }
a:active {color: #000000; text-decoration: underline; }

18) Meta tags refresh=go to a new page after N seconds, description=used by search engines, keywords=used by search engines

<meta http-equiv=”Refresh” content=”15; URL=http://academy.smc.edu”>
<meta name=”description” content=”The New York Times on the Web”>
<meta name=”keywords” content=”New York Times, newspaper, international, news, business”>

19) Comments, used for identifying different parts of the code, or explaining how the code works. Comments are not displayed in the page, and are ignored by the browser. The format for a comments is: Begin a comment with “<!–”, end it with “–>”, and do not use “–” within the comment.

<!– this is a comment –>

Additional Resources

From the “How Stuff Works” web site: How Web Pages Work
HTML Cheatsheet on the webmonkey.com site. You may want to bookmark this page and keep it as a reference.

Project file structure

When building a web site, it’s essential to create a folder/directory structure on your computer to accommodate your whole project. This is extremely important and you need to make sure you create this file structure correctly at the very start of your project. Please note the following regarding the project file structure:
Inside the master directory structure (named final_project in the example to the left), you will keep two folders. The folder doesn’t need to be called final_project you should name it after the project you are working on such as midterm.
1) One folder will be named source_files and this is where you will keep all of your original design files (e.g. Photoshop and Illustrator files, Flash files, sound files, raw images downloaded from your camera, etc).
2) In addition, there will be a folder named final_web that contains all the html files for your web site, (eventually a .css file– we will cover css later in the semester) and an images folder with all your GIF files, and JPEG files that are part of the web pages–this final_web folder will mirror the structure on the web server. Please note fthat or your assignments in this class your “final_web” folder will be named midterm_yourlastname, final_yourlastname for the HTML project 1, the midterm, and final project.

You must keep your files separated into different folders so that files stay organized and easily accessed, and so that extraneous files do not get uploaded to the server. You will only upload your final_web folder and never your source_files folder. Source files like Photoshop and Illustrator should never be uploaded to the server.

To start the project, create a new folder, and then create several new folders inside this main project folder. Please refer to the example below. It is critical that you set up this empty directory structure before you start working on your web site. If you attempt to organize your files after you’ve made the site, you will, in all likelihood, break the links in your web pages.

Web Graphic Formats

Okay, now let’s talk about how to prepare images for the web. But before we get started below is some information about downloading files from this site. You will need to download a zip file to complete the exercise at the end of the class notes so please be sure you know how to download a file from this site.

Downloading files

The following is an explanation of how to download files from this site. The download files will typically be in a format called ZIP. The ZIP format allows multiple files to be grouped together into one file for a simpler downloading process. In addition, the ZIP format compresses the size of the files so the download takes less time. This means that you will download one compressed file with a “.zip” file extension. You then decompress the files and put them on your personal disk.

You can decompress these files on Macintosh computers with the Stuffit Expander program. If you have a PC or Macintosh at home or work, you can get the following utilities for working with ZIP files: StuffitExpander for the Mac or PC, or WinZip for the PC.

Downloading files

1. On the web page, click on the file to be downloaded.
2. On most Macintosh systems, the file will be downloaded to the desktop. It may be decompressed automatically, or you may have to double click on it to decompress it, or you may have to open Stuffit Expander to decompress it.
3. On the PC:
   1. When the dialog box comes up, click OK to “Save this file to disk”
   2. Then BROWSE your way to a directory on your Zip disk to SAVE the file
   3. Start WinZip and use FILE>OPEN (or the OPEN icon) and browse to the drive where you saved the file from the web browser.
   4. With the zip file opened in WinZip, select ACTION>EXTRACT (or the EXTRACT icon), browse to a directory on your disk where you want the files placed, and click on the EXTRACT button. Note that you do not have to select the files to be extracted.
   5. This will uncompress, separate all the files, and place them on your disk.

For practice, download and extract the compression_test.zip file here.

Okay, now before we get started let’s first talk a little about web-safe colors versus non web-safe colors.

Web-safe colors

Are they necessary? There is a standard set of 216 colors that are known as the “web safe” colors. In the past, web designers have used only colors in web safe palette. The reason for this is that many older computers could only display a total of 256 different colors, and there were only 216 common colors between the Mac and the PC. Using colors other than those in the web safe palette would cause those colors to be displayed with dithering. (i.e. a few of the 216 colors are mixed to create a substitute for the actual color.)

But these days, less than 1% of web users use computers that only display 256 colors–either because they have very old computers that “compresses” the images down to the web safe colors. These users can still view web pages, but non web-safe colors will look dithered.

Given that so few users have this problem, and what they see still works, there is simply no reason to worry about the web-safe colors anymore. You are free to use of the millions of colors available to you. (But this is my opinion, and others disagree).

To see a chart of all the web safe colors, see this page on the WebMonkey site

For more information about the percentage of users viewing the with with 256 colors, see Browser News

Basic image types

RGB images

RGB images are a “true color” format, in that the original colors of the image are preserved to a high degree. RGB format (vs. CMYK, JPEG, or GIF) images should be used for your master Photoshop files.

RGB – Each pixel can have any color, independent of all other pixels. Each pixel has a value for Red, Green, and Blue, and each color value has a range of 0-255 (or 00 to FF in hexadecimal).

Bit depth = The number of different colors available for each pixel

• 32bit = 16,777,216 colors + 256 shades of gray for the alpha channel
• 24bit = 16,777,216 colors
• 16bit = 65,536 colors

Indexed images

Indexed images are a limited palette image format that is used for the web, game machines and other situations where there is a need for reduced image size or hardware that supports a limited number of colors.

Indexed – Pixels in an image are limited to a small number of colors available for the entire image. Each pixel has value that points to an entry in a table of colors (also known as a palette or CLUT -Color LookUp Table).

Here is an example of the palette for the duck image below. Pixels in the image can only be one of the 8 colors in the image’s palette.

Bit depth = The number of different colors available for the entire image – i.e. number of colors in the palette. The fewer bits per pixel, the smaller the file.

• 8bit = 256 colors
• 6bit = 64 colors
• 4bit = 16 colors
• 2bit = 4 colors
• 1bit = 2 colors

Dithering

Dithering is a way to fool the eye into thinking there are more colors in the image than are actually there. Dithering works by scattering pixels of different colors over an area so that the eye averages them to a color that’s a combination of the colors used.

These are indexed images that use the same number of colors (8). The second image looks better through the use of dithering which creates the impression of gradients. The disadvantage of dithering is that it does not compress as well in the GIF format.

Web image types

GIF format

A compressed file format for indexed images. It uses run-length encoding, which compresses a series of pixels of the same value (in the horizontal direction) as a single entry (e.g. 30 pixels of red), which saves space over specifying each pixel. This means that large blocks of a single color compress very well. It also means that dithering (which reduces the runs of the same pixels) usually makes the image compress poorly.

• Best for - Graphic images with large areas of a single color, images with transparency, images with sharp edges, images with few colors.
• Transparency – Defines one color to be transparent
• Animations – Format supports multi-frame animations
• Interlacing – A way to encode the image so that when a small amount of the image has been downloaded, it can be displayed in rough form. The image becomes progressively more clear until the whole image is downloaded.

JPEG format

A “lossy” compressed file format for RGB images. Among other things, it eliminates hard edges to achieve compression. The loss of quality in the image is controlled by the quality setting when you save a JPEG image. The lower the number, the worse the quality.

• Best for – Photographic images, complex images, images with soft edges
• No transparency or animation
• Progressive – A format similar to interlacing for GIFs that displays the image with increasing quality as it downloads. The progressive format is not supported by some older browsers.

PNG format

A relatively new format that combines the best of GIF and JPEG. It supports both Indexed images and RGB images. It also supports a 256 color alpha channel for transparency. Not fully supported by older browsers.

About the PNG‑8 format

More information about the PNG format can be found here.

Image Compression using Photoshop

Download and extract compression_test.zip.

The primary goal in creating graphics for the web is to maintain high image quality, while creating files that are as small as possible. This is always a compromise, and requires a subjective judgement by the designer. The best approach is to experiment with different image settings to discover a good compromise appropriate for the image and web page.

GIFs

To make a GIF, do the following to an RGB image in Photoshop:

• Show and hide any layers to get the image you need
• Determine the color of the web page background that the image will be displayed against
• Select FILE>SAVE FOR WEB…
• Notice that the image is displayed in its compressed format. And at the bottom left of the screen, the size of the compressed image is shown. Keep track of both of these as you adjust the various settings. Keep in mind that, in general, the total size of a web page including all of its images should be less than 100K.
• Select GIF 32 No Dither from the Settings pull down. This will provide a good starting point for your settings.
• Select PERCEPTUAL, SELECTIVE, ADAPTIVE, OR WEB for the palette selection method. SELECTIVE is the default and will usually provide good results. Following are Photoshop’s definition of these methods, quoted from Adobe Photoshop Help:
  Perceptual - Creates a custom color table by giving priority to colors for which the human eye has greater sensitivity.
  Selective - Creates a color table similar to the Perceptual color table, but favoring broad areas of color and the preservation of Web colors. This color table usually produces images with the greatest color integrity. Selective is the default option.
  Adaptive – Creates a custom color table by sampling colors from the spectrum appearing most commonly in the image. For example, an image with only the colors green and blue produces a color table made primarily of greens and blues. Most images concentrate colors in particular areas of the spectrum.
  Web – Uses the standard 216-color color table common to the Windows and Mac OS 8-bit (256-color) palettes. This option ensures that no browser dither is applied to colors when the image is displayed using 8-bit color. (This palette is also called the Web-safe palette.) Using the Web palette can create larger files, and is recommended only when avoiding browser dither is a high priority.
• Select NO DITHER. This will produce the smallest files, while the other Dither options may improve the image quality. If Dither is needed, you may want to consider JPEG for the image format.
• Select the smallest number of colors that produces an acceptable looking image. You can reduce the color information if necessary by selecting the “color” pull down menu and with the right arrow reducing the color to 16, 8, 4 or perhaps even 2.
• If you want the image to display while downloading,select the INTERLACED checkbox.

Transparency in GIFs allows you to see through parts of the image to the background of the web page. Photoshop creates transparency in GIFs by using the mask transparency in the Photoshop file.

• Create the transparency in your photoshop file, and set your layers so that you can see the checkerboard transparency in the file before you select SAVE FOR WEB
• If you have created a mask for transparency, and want the background of the web page to show through the mask area, checkthe TRANSPARENCY box in the SAVE FOR WEB palette on the right side of the screen.
• Select a MATTE color. This color selection affects the color of the anti-aliasing fringe used at the boundary between the image and the transparent areas. E.g. if your image will be displayed on a white web page, select white as the MATTE color to make a clean, anti-aliased edge for the image.

JPEGs

To make a JPEG, do the following to an RGB image in Photoshop:

• Show and hide any layers to get the image you need
• Select FILE>SAVE FOR WEB…
• Notice that the image is displayed in its compressed format. And at the bottom left of the screen, the size of the compressed image is shown. Keep track of both of these as you adjust the various settings. Keep in mind that the total size of a web page including all of its images should be less than 100K.
• Select JPEG Medium from the Settings pull down. This will provide a good starting point for your settings.
• Check the OPTIMIZED checkbox. This makes the file size smaller, and is compatible with almost all browsers.
• Experiment with the QUALITY setting while checking the Optimized image for JPEG artifacts and looking at the resulting file size. Usually a setting between 40 – 60 works well. Choose the lowest quality setting acceptable so the file is the smallest.
• If you want the image to display while downloading, select the PROGRESSIVE checkbox.

Transparency is not available in JPEG images. But the MATTE feature described for GIFs can be used in JPEGS. If the photoshop image has transparency, the matte color you choose in SAVE FOR WEB will change the transparent areas of the image to that color. This is useful if you need to put an image against a particular color on a web page.

Please read the information below before completing the class exercise.

Required Reading:

From our textbook: Adobe Dreamweaver CS4 How-Tos: 100 Essential Techniques
Chapter 1: Creating a Website

Photoshop CS/ImageReady CS for the Web Hands-On Training: Optimization

Additional Resources (suggested):

iTunes: Lynda.com video- Photoshop CS3 Web Essentials
This is a good resource to walk through the beginning steps of saving an image with a transparent background using a matte color.

Exercise

Working with the fern, graphic text, and temple images in the download, use Photoshop to convert them to web format with FILE>SAVE FOR WEB.

Do the following for each image:

1. Decide on the best format to use for this image: JPEG or GIF
2. Decide on the smallest file size possible without compromising image quality
3. Document the settings you use for your final versions of each image (e.g. number of colors in a GIF, compression setting for JPEG).
4. Note the size of each file you create.

Please be sure you understand how to optimize images for the web and let me know if you have any questions. I have added the topic “Web graphic format” to the Discussion area on the smconline.org site if you have any questions.

Assignment 1

(Must be posted to “Dropbox” on smconline.org site by noon on Monday, June 28)

Please create a simple HTML page with images and text. I’d like you to create a biography page that tells me and your classmates a little about your self. The purpose of this assignment is for you to demonstrate basic skills building an HTML page. Please be sure to use as many as possible of the HTML tags outlined in the class note above. In this assignment you should demonstrate the following:

• An understanding of the basic structure of an HTML page.
• An understanding of how to use the tags outlined in the class notes above.
• In particular, I want you to demonstrate a skill in inserting images and links into a page.
• An understanding of correct file structure.

You can use Notepad, TextEdit, Dreamweaver (if you have basic skills in this application), or any other HTML editor you choose. When you have completed the assignment, please upload the project folder (be sure your file structure is correct or you will be asked to re-do this assignment) as a zipped file to the drop box located in the smconline.org site. Please be sure to include your last name in the name of the file when you upload it to the drop box. Please name your file: assignment1_yourlastname.

Also, answer the question in the attached Quiz 1 and upload to the “Dropbox” on smconline.org site by noon on Monday, June 28. Again, please be sure to include your last name in the name of the file when you upload it to the DropBox.

Comments

Sorry, but comments are currently closed.

About Author