Files, File Format

Folders
Paths, URL
Absolute Addresses
Relative Addresses

© Lynne O’Hanlon 2007

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
File Formats and Their Uses

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

Vector graphics
EPS, PDF, PICT
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.
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.
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.
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
Macromedia/Adobe Freehand.
 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.
 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 is equivalent to
the PSD file in Photoshop.)
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.
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.
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.
 JPEG – Joint Photographic Expert
Group
Used primarily for photographs, graphic
images.
Most common format to store and transmit
images on the web.
Supported by all browsers.

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.
 GIF – Graphical Information
Format
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.

Limited to high contrast images, simple

images, line drawings, text, logos, clip art,
and lots of single color areas.

Lossy compression. Saves transparent

background.
 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).
 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.
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.
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.
It takes a large amount of data to store
a high-quality image. File
Compression
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.
 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.
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.
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.
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.
Paths listed in Dreamweaver will have folders
separated with a forward slash.
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.
Some address are longer than others.
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.
 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
index.html is the default home or start page if you just list
piercecollege.edu or piercecollege.edu/
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.
 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.
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.
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.
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.

Give each folder a meaningful,

descriptive Name.
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.