GDT 150 Design for the Internet: Fall 2002

September 16

Site Management in Dreamweaver

Always use the Site window to open files in dreamweaver. It prevents you from saving files in a location that is outside your site root (the folder that corresponds to public_html on the server).

Defining a Site

  1. If the Site window isn't visible, Window > Site
  2. From the Site dropdown menu at the top of the window choose "Edit Sites..."
  3. Click "New"
  4. Give your site a name - probably your name - and click "Next"
  5. No to server technology
  6. Edit local copies... and then click the folder icon to browse to your root folder, which should be inside of the Documents folder
  7. Connect to the remote server via FTP. Enter the same info that you would in Fetch, but be sure to enter "public_html" in the field asking what folder on the server
  8. Don't enable check in and check out
  9. Click "Done" twice and you'll see a list of all your files in the right-hand pane of the Sites window

For the remaining exercises and projects, create a directory inside your public_html directory. For example, Project 2 should have a folder called "Project2" and exercises should have folders labeled with "exercise" followed by the date assigned. Today's exercise will be in a folder called "exercise9_16". Use an underscore or dot to delineate date and month - DO NOT USE A SLASH!!

Graphics for the Web

Most bitmap graphic formats have very large file sizes. (Bitmap graphics are images that are made up of dots arranged in a grid. Each dot is described by a certain number of bits, and these bits quickly add up to a large file size.) To distribute images on the web, it is necessary to compress them somehow. Graphic compression is a tradeoff between image quality and file size. You need to make the file size as small as possible, but you also want your graphics to look good.

All graphics for the web should have their resolution set to 72 ppi. No matter what the resolution, one pixel will always display as one pixel on the web.

GIF 89a

GIFs compress graphics in two ways: by indexing the colors, and by describing images in horizontal sequences of pixels. Gifs use indexed color, meaning that they use a limited number of colors and assign each one a number in a color table. Gifs can have a maximum of 256 colors (8-bit, each bit represents 2 possibilities, so 8-bit means 2x2x2x2x2x2x2x2, or 2 to the 8th power, which is 256). Fewer colors mean smaller file sizes.

They also compress by notating the number of pixels in a horizontal row that are the same color. Graphics that have a lot of pixels that are the same color next to each other can be efficiently compressed. In a photographic image, where virtually every consecutive pixel is a different color, this compression method isn't nearly as effective.

JPEG

JPEGs are an extremely efficient compression method for continuous tone images. They compress graphics by discarding data: they write equations that approximately describe sections of color in the image. If you look closely at a jpeg, you'll see that it's roughly broken up into squares. The size of these squares is controlled by the amount of compression. The greater the compression, the larger the size of the squares and the lower the image quality. The lower the compression, the smaller the squares and the higher the image quality.

PNG-8

PNG-24

PNG was expected to be the revolutionary new graphic format when it was introduced, but it's not widely used because of a lack of widespread support in the browsers. Some browsers require the Quicktime plugin to view pngs, which can be a problem if the plugin isn't installed. PNG-24 has the added disadvantage of super large file sizes. Pngs are basically useless as web graphics until there is wider support and faster connections.

Saving Graphics in Photoshop

  1. File > Save for Web
  2. Click 4-up to see 4 different versions of the image. Click between the four squares to change their settings
  3. Choose the file type most suitable for your image
  4. Choose the lowest settings while maintaining acceptable image quality
  5. Click OK and save in your graphics directory

Inserting Images in Dreamweaver

  1. make sure your document has been saved so that dreamweaver can figure out where the image is relative to your document
  2. Place your cursor where you want the image to appear
  3. Click the Image button in the Insert toolbar
  4. Browse to the location of your image
  5. Ensure that the "Relative to:" dropdown says "Document" and click "Choose"
  6. Once your image has been inserted type something in the alt field. Alt text should describe the image. If the image is text, the text should be exactly replicated in the alt field
  7. To make text wrap around your image, change the Align dropdown to "Left" or "Right"