Files, File FormatFolders

Paths, URLAbsolute AddressesRelative Addresses

© Ms. Masihi

File Types

Images and data are stored in files.

Each software application uses different native file types and file formats.

Each file type has specific uses and restrictions

© Ms. Masihi

File Formats and Their Uses

Bitmap images TIFF, JPEG, GIF, BMP, PNG, PSD

Vector graphics EPS, PDF, PICT

© Ms. Masihi

Bitmap Images and Vector Graphics

A bitmap image is stored as individual square pixels, each defined as a specific color.

The number of pixels per inch (ppi) is a measure of the image resolution when displayed on the screen.

A bitmap file contains an image in one of various bitmap formats, such as TIFF, GIF, JPEG and BMP.

© Ms. Masihi

The most common file formats for bitmap images are JPEG and GIF files.

A bitmap file always contains RGB data.

Bit mapped images can get “jaggies” when the image is enlarged because the image is composed of colored square pixels.

© Ms. Masihi

Vector Graphics Image

Vector graphics represents images as mathematical formulas that define all the shapes in an image.

A vector graphic mage is composed of lines and a few control points that are connected using bezier curves.

Vector images are more flexible than bit-mapped graphics.

© Ms. Masihi

Vector graphic images retain their sharpness and shape even when scaled to different sizes.

Vector images are commonly created and used in Adobe Illustrator, Corel Draw and Adobe Freehand.

© Ms. Masihi

File Formats Analog images are saved as digital

images in files. Each of the several file types has specific

constraints and specific purposes.

PSD – working file in Photoshop

Photoshop File Format saves all data in layers

that comprise the image. Limited to use only in Photoshop. Save files in PSD format and JPEG / GIF

format.

© Ms. Masihi

Flash File Types Flash files saved

with .FLA extension are the files saved by Flash. (FLA stands for FLAsh.) The FLA file is NOT the published file seen on the Internet.

This is the main work file containing all your documents and images, where you will make all your changes and edits. (The FLA file in Flash is equivalent to the PSD file in Photoshop.)

© Ms. Masihi

From the .FLA file you can generate a .SWF file. (SWF stands for Small Web File.)

The .SWF file is your “published file” that is compressed and embedded inside an HTML file to be viewed on the Internet.

The .SWF file resides inside an HTML page which tells the Browser how to display objects on your page.

© Ms. Masihi

A SWF file is a compressed, optimized version of the FLA file. The SWF file is usually embedded in an HTML page for viewing using a web browser.

Flash Player must be installed in a Web Browser for you to see Flash content in SWF files.

The Flash Player is installed automatically in current Browsers.

The Flash Player can also be downloaded free from the Adobe Website.

© Ms. Masihi

The .HTML file is what the end user sees on their screen as displayed by a Browser.

The HTML file acts like a container to hold the SWF file for viewing on the published web page.

The HTML file controls the placement of the SWF file on the page, the size of the SWF file, etc.

© Ms. Masihi

JPEG – Joint Photographic Expert Group

Used primarily for photographs, graphic images – images that contain lots of colors.

JPEG is the most common format to store and transmit images on the web.

JPEG format is supported by all browsers.

© Ms. Masihi

File saved in JPEG format has a compression algorithm applied to the image, throwing out bits (but we do not notice the differences).

Each time an image is saved, more bits are lost. Save JPEG file only ONCE in image editing programs.

Standard in lossy compression. Does not convert well to GIF format.

© Ms. Masihi

GIF – Graphical Information Format

GIF format was originally created by Compuserve to send images across the internet.

No de facto file format at the beginning of the web, GIF became the standard for file transmission since it included a compression factor for easy file transmission.

© Ms. Masihi

GIF format is limited to high contrast images, simple images, line drawings, text, logos, clip art, and lots of single color areas.

Lossless compression. Uses a color table (maximum 256 colors) to format image colors.

Saves transparent background.

© Ms. Masihi

PNG – Portable Network Graphics

Lossless compression, designed primarily for use in Flash, Corel Draw, MSPaint, and Fireworks.

Designed to replace GIF and

TIFF, but did not happen. Better compression than GIF.

Supports transparency in an image (in other formats transparencies turn opaque or white).

© Ms. Masihi

TIFF – Tagged Image File Format

Used in InDesign or Quark production images.

Most popular for prepress images.

Platform independent; supported by numerous image processing applications.

Standard in document imaging; most accepted file type for printing.

© Ms. Masihi

Cannot be embedded into a web page.

Owned by Aldus which later merged with Adobe.

Lossless (resulting in larger files); some versions of TIFF have compression algorithms applied to final image.

No provision for storing vector graphics or animation.

© Ms. Masihi

EPS – Encapsulated Postscript File

InDesign or Quark production images.

Used in print production applications.

Files are very large.

Takes lots of time to render image.

Image in EPS cannot be modified.

Image preview before printing is shown as JPEG file.

© Ms. Masihi

File Compression

It takes a large amount of data to store a high-quality image.

Data compression techniques are used to reduce image size. Most compression techniques “lose” image information in order to achieve a smaller file.

Compression techniques that delete pixels (lose information) are referred to as “lossy” compression.

GIF and JPEG formats compress an image in different ways.

© Ms. Masihi

Folders Folders on a computer are used to organize and group

related files. Right click where you wish to create the new folder, click

New > Folder and give the folder a meaningful name.

© Ms. Masihi

File Names In order to store and access files, each file must be given a name. The file name is the name given to the stored file on disk. The file name does now show in a web browser window.

File names must begin with a

letter and may contain letters and numbers.

Do not use spaces or other special characters for files used in Flash and Dreamweaver.

© Ms. Masihi

File Extension A 3 or 4 character

extension is appended to the end of a file name, depending on the software that is saving the file and the file type designated in the save process.

HTML extension is used for web pages, JPEG and GIF are used for digital image files, FLA and SWF are used for Flash files, CFM for ColdFusion Dynamic web pages, etc.

© Ms. Masihi

Path The sequence of drives,

folders, and finally the filename is known as a Path.

Windows separates drives and folders with a back slash.

Paths listed in Dreamweaver will have folders separated with a forward slash.

© Ms. Masihi

Paths listed in Dreamweaver URLs will have folders separated with a forward slash.

© Ms. Masihi

URL

Each web page and web site has a URL (Uniform Resource Locator) or Web Address.

The URL is the address used by Browsers to locate a file for a web site, web page, image, link, etc.

© Ms. Masihi

Images added to Dreamweaver Web Pages will have their URL listed in the Properties Inspector.

The URL tells Browsers where to find the file containing the actual image when the page is displayed.0

© Ms. Masihi

Absolute URL An absolute URL is used in Dreamweaver to link to an exact

location on the web: http://www.piercecollege.edu/index.html

http is the web protocol

www.piercecollege.edu is the host computer (server) name

index.html is the name of the file

© Ms. Masihi

index.html is the default home or start page if you just list piercecollege.edu or piercecollege.edu/

© Ms. Masihi

All of these components comprise an Absolute URL and should only be used for an exact location on the web, outside of your web site.

Do NOT use an absolute URL for images and other files inside your web site.

© Ms. Masihi

Relative URL

A relative URL is used to link one web page to another within one website, and identify files and images used in web pages.

Use a Relative URL to point to a page or image within your website.

© Ms. Masihi

Do NOT link anything on your web page to a specific drive on your computer (do not use drives such as A: or C: in a path or for a URL).

When you upload a file to a web server for others to see, the server will NOT have access to your local computer drives.

© Ms. Masihi

File and Folder Management

Add, modify, move, delete files or folders in the Files Panel in Dreamweaver.

This allows Dreamweaver to keep track of changes and to update any links and references in your web page.

© Ms. Masihi

Website Folder Designate one location on

your computer to store all your websites – commonly this will be a folder on your C: drive.

Create a separate folder within this general website folder for each individual website. This is your Site Root Folder.

Give each folder a meaningful, descriptive Name.

© Ms. Masihi

When your website contains images, create an Images Folder within each site for image files used in that website.

Store images, background images, logos, etc in the Images Folder for each website.

Loading images into the Images folder can be done in Windows Explorer before beginning work on your website.

© Ms. Masihi