Files Paths Folders URLs

8/6/2019 Files Paths Folders URLs

1/35

Files, File FormatFiles, File Format

FoldersFoldersPaths, URLPaths, URL

Absolute AddressesAbsolute Addresses

Relative AddressesRelative Addresses

Lynne OHanlon 2007 Lynne OHanlon 2007


2/35

File TypesFile Types

Images and data are stored inImages and data are stored in

files.files.

Each software application usesEach software application uses

different native file types and filedifferent native file types and file

formats.formats.

EachEach file typefile type has specific useshas specific usesand restrictionsand restrictions


3/35

File Formats and Their UsesFile Formats and Their Uses

Bitmap imagesBitmap images

TIFF, JPEG, GIF, BMP, PNG, PSDTIFF, JPEG, GIF, BMP, PNG, PSD

Vector graphicsVector graphics

EPS, PDF, PICTEPS, PDF, PICT


4/35

Bitmap Images and Vector GraphicsBitmap Images and Vector Graphics

AA bitmap imagebitmap image is stored asis stored as

individual square pixels, eachindividual square pixels, each

defined as a specific color.defined as a specific color.

The number ofThe number ofpixels per inch (ppi)pixels per inch (ppi)

is a measure of the image resolutionis a measure of the image resolution

when displayed on the screen.when displayed on the screen.

A bitmap file contains an image inA bitmap file contains an image in

one of various bitmap formats, suchone of various bitmap formats, such

as TIFF, GIF, JPEG and BMP.as TIFF, GIF, JPEG and BMP.


5/35

The most common file formatsThe most common file formatsfor bitmap images arefor bitmap images areJPEGJPEG andand

GIFGIFfiles.files.

A bitmap file always containsA bitmap file always contains

RGBRGB data.data.

Bit mapped images can getBit mapped images can get

jaggies when the image isjaggies when the image is

enlarged because the image isenlarged because the image iscomposed of colored squarecomposed of colored square

pixels.pixels.


6/35

Vector graphicsVector graphics represents imagesrepresents images

as mathematical formulas thatas mathematical formulas that

define all the shapes in an image.define all the shapes in an image.

A vector graphic mage isA vector graphic mage is

composed ofcomposed oflineslines and a fewand a few

control pointscontrol points that are connectedthat are connected

using bezier curves.using bezier curves.

Vector images are more flexibleVector images are more flexible

than bitthan bit--mapped graphics.mapped graphics.

Vector Graphics ImageVector Graphics Image


7/35

Vector graphic imagesVector graphic images retainretain

theirtheir sharpnesssharpness andand shapeshape

even when scaled to differenteven when scaled to different

sizes.sizes.

Vector images are commonlyVector images are commonly

created and used in Adobecreated and used in Adobe

Illustrator, Corel Draw andIllustrator, Corel Draw and

Macromedia/AdobeMacromedia/AdobeFreehand.Freehand.


8/35

File FormatsFile Formats

Analog images are saved as digital images inAnalog images are saved as digital images infiles.files.

Each of the several file types has specificEach of the several file types has specificconstraints and specific purposesconstraints and specific purposes..

PSDPSD working file in Photoshopworking file in Photoshop

Photoshop File Format saves all data in layersPhotoshop File Format saves all data in layers

that comprise the image.that comprise the image.

Limited to use only in Photoshop.Limited to use only in Photoshop.

Save files in PSD format and JPEG / GIF format.Save files in PSD format and JPEG / GIF format.


9/35

Flash File TypesFlash File Types

Flash files saved with .FLAFlash files saved with .FLAextension are the files saved byextension are the files saved by

Flash. (Flash. (FLAFLA stands forstands for FLAFLAsh.)sh.)

The FLA file is NOT theThe FLA file is NOT the

published file seen on thepublished file seen on the

Internet.Internet.

This is the main work fileThis is the main work file

containing all your documentscontaining all your documents

and images, where you willand images, where you willmake all your changes andmake all your changes and

edits. (The FLA file is equivalentedits. (The FLA file is equivalent

to the PSD file in Photoshop.)to the PSD file in Photoshop.)


10/35

From the .FLA file you canFrom the .FLA file you can

generate a .generate a .SWFSWFfile. (SWFfile. (SWFstands forstands for Small Web FileSmall Web File.).)

The .SWF file is yourThe .SWF file is yourpublished file that ispublished file that is

compressed and embeddedcompressed and embeddedinside an HTML file to beinside an HTML file to beviewed on the Internet.viewed on the Internet.

The .SWF file resides inside anThe .SWF file resides inside anHTML page which tells theHTML page which tells theBrowser how to display objectsBrowser how to display objectson your page.on your page.


11/35

AA SWFSWFfile is a compressed,file is a compressed,optimized version of the FLA file.optimized version of the FLA file.

The SWF file is usually embeddedThe SWF file is usually embeddedin an HTML page for viewingin an HTML page for viewingusing a web browser.using a web browser.

Flash Player must be installed in aFlash Player must be installed in a

Web Browser for you to see FlashWeb Browser for you to see Flashcontent in SWF files.content in SWF files.

The Flash Player is installedThe Flash Player is installedautomatically in current Browsers.automatically in current Browsers.

The Flash Player can also beThe Flash Player can also bedownloaded free from the Adobedownloaded free from the AdobeWebsite.Website.


12/35

TheThe .HTML.HTML file is what thefile is what the

end user sees on theirend user sees on their

screen as displayed by ascreen as displayed by aBrowser.Browser.

The HTML file acts like aThe HTML file acts like a

container to hold the SWFcontainer to hold the SWFfile for viewing on thefile for viewing on the

published web page.published web page.

The HTML file controls theThe HTML file controls theplacement of the SWF fileplacement of the SWF file

on the page, the size of theon the page, the size of the

SWF file, etc.SWF file, etc.


13/35

JPEGJPEG Joint Photographic Expert GroupJoint Photographic Expert Group

Used primarily for photographs, graphicUsed primarily for photographs, graphicimages.images.Most common format to store and transmitMost common format to store and transmitimages on the web.images on the web.

Supported by all browsers.Supported by all browsers.

File saved in JPEG format has aFile saved in JPEG format has acompression algorithm applied to thecompression algorithm applied to theimage, throwing out bits (but we do notimage, throwing out bits (but we do notnotice the differences).notice the differences).

Each time an image is saved, more bits areEach time an image is saved, more bits are

lost. Save JPEG file only ONCE in imagelost. Save JPEG file only ONCE in imageediting programs.editing programs.

Standard inStandard in lossylossycompression.compression.

Does not convert well to GIF format.Does not convert well to GIF format.


14/35

GIFGIF Graphical Information FormatGraphical Information Format

Originally created by Compuserve to sendOriginally created by Compuserve to sendimages across the internet.images across the internet.

No de facto file format at the beginning ofNo de facto file format at the beginning of

the web, GIF became the standard for filethe web, GIF became the standard for filetransmission since it included atransmission since it included acompression factor for easy filecompression factor for easy filetransmission.transmission.

Limited to high contrast images, simpleLimited to high contrast images, simpleimages, line drawings, text, logos, clip art,images, line drawings, text, logos, clip art,and lots of single color areas.and lots of single color areas.

LossyLossycompression. Saves transparentcompression. Saves transparentbackground.background.


15/35

PNGPNG Portable Network GraphicsPortable Network Graphics

LosslessLossless compression, designedcompression, designedprimarily for use in Flash, Corel Draw,primarily for use in Flash, Corel Draw,MSPaint, and Fireworks.MSPaint, and Fireworks.

Designed to replace GIF and TIFF, butDesigned to replace GIF and TIFF, butdid not happen.did not happen.

Better compression than GIF.Better compression than GIF.

Supports transparency in an image (inSupports transparency in an image (inother formats transparencies turnother formats transparencies turnopaque).opaque).


16/35

TIFFTIFF Tagged Image File FormatTagged Image File Format

Used in InDesign or QuarkUsed in InDesign or Quark

production images.production images.

Most popular for prepress images.Most popular for prepress images.

Platform independent; supported byPlatform independent; supported by

numerous image processingnumerous image processing

applications.applications.

Standard in document imaging; mostStandard in document imaging; most

accepted file type for printing.accepted file type for printing.


17/35

Cannot be embedded into a webCannot be embedded into a web

page.page.

Owned by Aldus which laterOwned by Aldus which latermerged with Adobe.merged with Adobe.

LosslessLossless (resulting in larger files);(resulting in larger files);some versions of TIFF havesome versions of TIFF havecompression algorithms applied tocompression algorithms applied tofinal image.final image.

No provision for storing vectorNo provision for storing vectorgraphics or animation.graphics or animation.


18/35

EPSEPS Encapsulated Postscript FileEncapsulated Postscript File

InDesign or Quark productionInDesign or Quark productionimages.images.

Used in print productionUsed in print productionapplications.applications.

Files are very large.Files are very large.

Takes lots of time to render image.Takes lots of time to render image.

Image in EPS cannot be modified.Image in EPS cannot be modified.

Image preview before printing isImage preview before printing isshown as JPEG file.shown as JPEG file.


19/35

File CompressionFile Compression

It takes a large amount of data to storeIt takes a large amount of data to store

a higha high--quality image.quality image.

Data compression techniques are usedData compression techniques are used

to reduce image size.to reduce image size.

Most compression techniques loseMost compression techniques lose

image information in order to achieveimage information in order to achieve

a smaller file.a smaller file.

Compression techniques that deleteCompression techniques that delete

pixels (lose information) are referredpixels (lose information) are referredto asto as lossylossy compression.compression.

GIF and JPEG formats compress anGIF and JPEG formats compress an

image in different ways.image in different ways.


20/35

FoldersFolders

Folders on a computer are used to organize and group relatedFolders on a computer are used to organize and group relatedfiles.files.

Right click where you wish to create the new folder, clickRight click where you wish to create the new folder, clickNew > FolderNew > Folder and give the folder a meaningful name.and give the folder a meaningful name.


21/35

File NamesFile Names

In order to store and access files,In order to store and access files,each file must be given a name.each file must be given a name.The file name is the name given toThe file name is the name given tothe stored file on disk. The filethe stored file on disk. The filename does now show in a webname does now show in a webbrowser window.browser window.

File names must begin with a letterFile names must begin with a letterand may contain letters andand may contain letters and

numbers.numbers.

Do not use spaces or other specialDo not use spaces or other specialcharacters for files used in Flashcharacters for files used in Flashand Dreamweaver.and Dreamweaver.


22/35

File ExtensionFile Extension

A 3 or 4 character extensionA 3 or 4 character extensionis appended to the end of ais appended to the end of afile name, depending on thefile name, depending on thesoftware that is saving thesoftware that is saving the

file and the file typefile and the file typedesignated in the savedesignated in the saveprocess.process.

HTML extension is used forHTML extension is used for

web pages, JPEG and GIF areweb pages, JPEG and GIF areused for digital image files,used for digital image files,FLA and SWF are used forFLA and SWF are used forFlash files, CFM forFlash files, CFM forColdFusion Dynamic webColdFusion Dynamic webpages, etc.pages, etc.


23/35

PathPath

The sequence of drives,The sequence of drives,

folders, and finally thefolders, and finally the

filename is known as a Path.filename is known as a Path.

Windows separates drivesWindows separates drives

and folders with a backand folders with a back

slash.slash.

Paths listed in DreamweaverPaths listed in Dreamweaverwill have folders separatedwill have folders separated

with a forward slash.with a forward slash.


24/35

Paths listed in Dreamweaver will have foldersPaths listed in Dreamweaver will have folders

separated with a forward slash.separated with a forward slash.


25/35

URLURL

Each web page andEach web page and

web site has a URLweb site has a URL

(Uniform Resource(Uniform Resource

Locator) or WebLocator) or Web

Address.Address.

The URL is the addressThe URL is the address

used by Browsers toused by Browsers to

locate a file for a weblocate a file for a website, web page, image,site, web page, image,

link, etc.link, etc.


26/35

Some address are longer than others.Some address are longer than others.


27/35

Images added toImages added to

Dreamweaver WebDreamweaver Web

Pages will have theirPages will have their

URL listed in theURL listed in the

Properties Inspector.Properties Inspector.

The URL tellsThe URL tells

Browsers where toBrowsers where to

find the filefind the file

containing the actualcontaining the actualimage when the pageimage when the page

is displayed.is displayed.


28/35

Absolute URLAbsolute URL

An absolute URL is used in Dreamweaver to link to an exactAn absolute URL is used in Dreamweaver to link to an exactlocation on the web:location on the web:

http://www.piercecollege.edu/index.htmlhttp://www.piercecollege.edu/index.html

http is the web protocolhttp is the web protocol

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

index.htmlindex.html is the name of the fileis the name of the file


29/35

index.htmlindex.html is the default home or start page if you just listis the default home or start page if you just listpiercecollege.edupiercecollege.edu oror piercecollege.edu/piercecollege.edu/


30/35

All of these components comprise an Absolute URL and shouldAll of these components comprise an Absolute URL and shouldonly be used for an exact location on the web, outside of youronly be used for an exact location on the web, outside of yourweb site.web site.

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


31/35

Relative URLRelative URL

A relative URL is used toA relative URL is used to

link one web page tolink one web page to

another within oneanother within one

website, and identifywebsite, and identify

files and images used infiles and images used in

web pages.web pages.

Use a Relative URL toUse a Relative URL to

point to a page or imagepoint to a page or imagewithin your website.within your website.


32/35

Do NOT link anythingDo NOT link anythingon your web page to aon your web page to aspecific drive on yourspecific drive on yourcomputer (do not usecomputer (do not usedrives such as A: or C:drives such as A: or C:in a path or for a URL)in a path or for a URL)..

When you upload a fileWhen you upload a fileto a web server forto a web server forothers to see, the serverothers to see, the serverwill NOT have access towill NOT have access to

your local computeryour local computerdrives.drives.


33/35

File and Folder ManagementFile and Folder Management

Add, modify, move, deleteAdd, modify, move, delete

files or folders in the Filesfiles or folders in the Files

Panel in Dreamweaver.Panel in Dreamweaver.

This allows Dreamweaver toThis allows Dreamweaver to

keep track of changes and tokeep track of changes and to

update any links andupdate any links and

references in your webreferences in your webpage.page.


34/35

Website FolderWebsite Folder

Designate one location on yourDesignate one location on yourcomputer to store all yourcomputer to store all your

websiteswebsites commonly this will becommonly this will be

a folder on your C: drive.a folder on your C: drive.

Create a separate folder withinCreate a separate folder within

this general website folder forthis general website folder for

each individual website.each individual website.

Give each folder a meaningful,Give each folder a meaningful,

descriptive Name.descriptive Name.


35/35

When your website containsWhen your website containsimages, create animages, create an Images FolderImages Folderwithin each site for image fileswithin each site for image filesused in that website.used in that website.

Store images, backgroundStore images, background

images, logos, etc in the Imagesimages, logos, etc in the ImagesFolder for each website.Folder for each website.

Loading images into the ImagesLoading images into the Imagesfolder can be done in Windowsfolder can be done in Windows

Explorer before beginningExplorer before beginningwork on your website.work on your website.

Files Paths Folders URLs

Documents

Transcript of Files Paths Folders URLs