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
8/6/2019 Files Paths Folders URLs
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
8/6/2019 Files Paths Folders URLs
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
8/6/2019 Files Paths Folders URLs
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.
8/6/2019 Files Paths Folders URLs
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.
8/6/2019 Files Paths Folders URLs
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
8/6/2019 Files Paths Folders URLs
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/6/2019 Files Paths Folders URLs
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.
8/6/2019 Files Paths Folders URLs
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.)
8/6/2019 Files Paths Folders URLs
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.
8/6/2019 Files Paths Folders URLs
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.
8/6/2019 Files Paths Folders URLs
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.
8/6/2019 Files Paths Folders URLs
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.
8/6/2019 Files Paths Folders URLs
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.
8/6/2019 Files Paths Folders URLs
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).
8/6/2019 Files Paths Folders URLs
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.
8/6/2019 Files Paths Folders URLs
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.
8/6/2019 Files Paths Folders URLs
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.
8/6/2019 Files Paths Folders URLs
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.
8/6/2019 Files Paths Folders URLs
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.
8/6/2019 Files Paths Folders URLs
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.
8/6/2019 Files Paths Folders URLs
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.
8/6/2019 Files Paths Folders URLs
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.
8/6/2019 Files Paths Folders URLs
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.
8/6/2019 Files Paths Folders URLs
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.
8/6/2019 Files Paths Folders URLs
26/35
Some address are longer than others.Some address are longer than others.
8/6/2019 Files Paths Folders URLs
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.
8/6/2019 Files Paths Folders URLs
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
8/6/2019 Files Paths Folders URLs
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/
8/6/2019 Files Paths Folders URLs
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.
8/6/2019 Files Paths Folders URLs
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.
8/6/2019 Files Paths Folders URLs
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.
8/6/2019 Files Paths Folders URLs
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.
8/6/2019 Files Paths Folders URLs
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.
8/6/2019 Files Paths Folders URLs
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.