Dreamweaver CS3
Adobe Dreamweaver Developer Center: Getting Started with Dreamweaver
Accessibility Settings
- Click Edit>Preferences to open Preferences dialog box
- Click Accessibility in the Category list
- Show attributes when inserting checkboxes should be checked.
- Dreamweaver then prompts for accessibility information when you add media files or create tables, etc.
- Dreamweaver CS3 has an Accessibility Check function (File>Check Page>Accessibility) that points out possible accessibility problems, which may or may not be real problems.
new Dreamweaver CSS features
- Export CSS rules from inline styles or embedded stylesheets to external stylessheets
- Select the rule (or rules), right-click and select Move CSS Rules
- In the Save Style Sheet File As dialog box, enter name of existing or new stylesheet.
- Dreamweaver CS3 also has a CSS Browser Compatibility Check (File>Check Page>Browser Compatibility) which points out problems that will occur in browsers, espcially non-standard IE browser interpretation of CSS.
top
prepare media files for Web
NOTE: It is possible to edit image files within Dreamweaver CS3, but Photoshop CS3 has much more functionality, so unless you are in a hurry or the image is fine already, work in Photoshop first.
top
- Open a document in Dreamweaver Design view or Code view.
- Click cursor where you want document to go.
- Drag image file onto the page from
- Dreamweaver list of Local files
- Adobe Bridge CS3
- From desktop
- If image will not drag, click on the image icon in the Insert common objects toolbar at the top of the page
- Drag an image onto the page that is not optimized for the Web.
- The image opens in the Image Preview window
- First set the file dimensions by clicking on the File Tab in the upper left of the window and dragging the percent slider down so that the image has appropriate dimensions for the area on the page that will display it.
top
Example image settings
- Once file size is OK, click the Options tab.
- On the lower right, you can select whether to show only one version of the image, or 2 or 4 versions. The image above shows 4 versions of the image, 2 JPEG & 2 GIF.
- JPEG is a better compression format for this image because it is a photo with gradual tonal changes.
- Once a file format is selected, different options are available to prepare the image for the Web.
top
JPEG Web compression
- drag the Quality slider in the upper left of the window up or down & note the change on the image quality & on the file size.
- Progressive browser display downloads image in 3 passes -- not used much these days
- Smoothing will get rid of image sharpness -- may help low quality images
- check Sharpen color edges to sharpen image quality
- Matte allows specification of image's background color, which is usually set to color of page on which image resides -- may smooth out edges.
- Optimize to Size allows specification of image size in kilobytes, but better results occur when you use the quality slider and sharpen color edges checkbox.
GIF & PNG image option settings
top
- In the Options tab, you can set a transparency value for individual colors in GIF and 8-bpc PNG images so that the background of the web page is visible through areas with those colors.
- Palette is set to adaptive by default, can be set to web-safe color or other color palettes.
- Loss is set to 0 by default
- Dither
tries to approximate colors not in current palette by alternating similar-colored pixels so that they appear to blend to the missing color. Dithering adds to file size
- Number Of Colors List
set to 256 (maximum number of indexed colors in GIF format) by default -- the more colors, the larger the file size.
- The color palette displays the colors used in the image at different color levels
- Palette tools let you add or subtract colors from the color palette, make colors transparent or change to web palette
- Select Transparency Color Icons allows choice of colors that will be rendered as transparent -- helps avoid the jaggies for images that are selected from their backgrounds.
- Transparency Pop-Up Menu allows you to set
- index transparency for GIF files -- allows selection of colors that will be rendered transparent.
- alpha transparency for PNG images with transparent backgrounds.
- no transparency
- Matte allows setting images background color to web page color-- used with images with transparent backgrounds so that soft edges or shadows work
- Remove unused colors drops colors from color palette that are not found in the image - reduces file size.
- Interlace browser display downloads image in 3 passes -- not used much anymore
- Optimize to size allows setting of target file size -- images turn out better by setting other parameters.
top
