Transcript Dreamweaver Chapter 2

Dreamweaver Chapter 2
Mr. Ursone
Web Structure
• Types
• Grid
• Random
• Hierarchical
• Linear
Document Toolbar
Visual Aids
Show Code and
Design View
Show
Design
View
Preview/Debug in
Browser
Document Title
File
Management
Show Code
View
Refresh Design
View
View Options
The Files Panel
• The Dreamweaver Files panel provides
a view of the devices and folders on
your computer and shows how these
devices and folders are organized
• A folder icon represents a folder
The Assets Panel
• The Assets panel: Helps you manage
and organize your Web site’s assets
• Grouped with the Files panel
• Assets include images, colors, URL, Flash
and Shockwave files, movies, scripts,
templates, and library items
Home Page
• Most Web servers recognize index.htm
as the default home page and
automatically display this page without
requiring that a user type the full URL
• Is similar to a table of contents or an
index in a book.
Images
• Graphical images on the web are in
one of two categories: vector and
bitmap
• Vector images are composed of key
points and paths, which define shapes
and coloring instructions
• Associated with Adobe flash or LiveMotion
animation programs
• Small file sizes
Images
• Bitmap images are a common type of image file
that maps out or plots an image on a pixel-by-pixel
basis.
• Pixel (Picture Element): The smallest point in a graphical
image
• The W and H boxes in the Property inspector
indicate the width and height of an image,
measured in pixels.
• You can specify the size of an image in a variety of
units. In source code Dreamweaver converts the
values to pixels
• The Reset Size tool, on the properties inspector, is
used to reset the W and H values to the original size
of an image after they have been altered
Images
• The Bit Resolution of an image is described by the
number of bits used to represent each pixel.
• GIF: Graphics Interchange Format - uses 8 bit
resolution supports up to 256 colors
• JPEG: Joint Photographics Experts Group – supports
up to 16.7 million colors
• Invisible Element Marker: shows the location of the
inserted image with the HTML code
• Alt: Specifies the Alternative Text that appears in
place of the image for text-only browsers or for
browsers that have been set to download images
manually
GIF89a Format
• Version of GIF that includes three features
that are not available in GIF 87 and JPEG
formats
• Transparency: allows you to specify a
transparency color, which allows the
background color or image to display
• Interlacing: lets the browser begin to build a
low-resolution version of the full-sized GIF
picture on the screen while the file is still
downloading
• Animation: Allows you to include moving
images
Alignment
• Alignment: determines where on
the page the image displays and if
and how text wraps around the
image
Alignment Options (Table 2-3
pg. 146)
V and H Space
• Allow you to adjust the vertical and
horizontal space between the image
and text
• Found in the Property inspector
Low Src
• Found in the Property Inspector
• Specifies the image that should be loaded
before the main image
Editing Images
• Found in the Property Inspector
• Image editing Tools Modify and Enhance Images
• Optimize: The process of compressing and setting
display options for Web graphics
• Cropping: lets you edit an image by reducing the
area of the image and allows you to eliminate
unwanted or distracting portions of the image
• Resampling: adds or subtracts pixels from a resized
JPEG or GIF image
• Brightness and Contrast: Modifies brightness or
contrast of the pixels in an image
• Sharpening: adjusts the focus of an image by
increasing the contrast of edges found within an
image
Different Types of Links
• Absolute/External Link: Used to link to documents
on other servers.
• Links you to web pages outside of your own.
• Relative/Internal Link: Links you to pages within
your site
• Named Anchor: used to link to a specific location
within that web page
• Email link: creates a blank e-mail message
containing the recipient’s address. It is one of the
foundation elements of any successful Web site
Inserting Relative Links
• 3 Methods
• Point to File Method: You drag the point to
file icon to the file or image from the Files
or Assets Panel
• Drag-and-Drop Method: You drag the file
from the Files or Assets panel to the Link
text box in the Property Inspector
• Browse for File Method: is accomplished
through the Select File dialog box
Site Map
• Graphical Representation of the
structure of a Web site
Standard Toolbar
Browse in
Bridge
New
Cut
Copy
Undo
Paste
Open
Redo
Save
Save
All
Browse in Bridge (Not on Quiz)
• Dreamweaver provides seamless integration
with Adobe® Bridge, a stand-alone filebrowsing application. Adobe Bridge is a
cross-platform application included with
Adobe® Creative Suite® 3 components that
helps you locate, organize, and browse the
assets you need to create print, web, video,
and audio content. You can start Bridge from
any Creative Suite component (except
Acrobat 8), and use it to access both Adobe
and non-Adobe asset types.
From Adobe Bridge you can:
• Manage image files: Preview, search, sort, and
process files in Bridge without opening individual
applications. You can also edit metadata for files,
and use Bridge to place files into your documents,
projects, or compositions.
• Manage your photos: Import and edit photos from
your digital camera card, group related photos in
stacks, and open or import camera raw files and
edit their settings without starting Photoshop. You
can also search leading stock libraries and
download royalty-free images by way of Adobe
Stock Photos.
• Work with Adobe Version Cue®-managed assets.
• Perform automated tasks, such as batch
commands.
• Synchronize color settings across color-managed
Creative Suite components.