Dreamweaver Chapter 2

1
Dreamweaver Chapter 2

• Mr. Ursone

2
Web Structure

• Types
• Grid
• Random
• Hierarchical
• Linear

3
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
4
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

5
The Assets Panel

• The Assets panel Helps you manage and organize
  your Web sites assets
• Grouped with the Files panel
• Assets include images, colors, URL, Flash and
  Shockwave files, movies, scripts, templates, and
  library items

6
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.

7
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

8
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

9
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

10
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

11
Alignment

• Alignment determines where on the page the image
  displays and if and how text wraps around the
  image

12
Alignment Options (Table 2-3 pg. 146)
13
V and H Space

• Allow you to adjust the vertical and horizontal
  space between the image and text
• Found in the Property inspector

14
Low Src

• Found in the Property Inspector
• Specifies the image that should be loaded before
  the main image

15
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

16
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 recipients address. It is one of
  the foundation elements of any successful Web site

17
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

18
Site Map

• Graphical Representation of the structure of a
  Web site

19
Standard Toolbar
20
Browse in Bridge (Not on Quiz)

• Dreamweaver provides seamless integration with
  Adobe Bridge, a stand-alone file-browsing
  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.

21
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.