Macromedia Dreamweaver 4

Intermediate Level Course

The HTML Code Window

HTML code can be viewed in:• Code View• Code and Design View

The Code Inspector

Editing code is easy when using Code View Options and the Code Inspector

External HTML Editors

• Graphics• Audio

• Video

Choose your favorite editing program for:

The Quick Tag Editor

Insert HTML - features a drop-down list of tagsWrap Tag - will enclose existing tags within another tagEdit HTML - to edit existing HTML code

Make fast alterations in the HTML codeMake fast alterations in the HTML code

Clean Up HTML

• Clean up redundant tags• Combine related tags• Remove empty tags

Clean Up Word HTML

Cleanup unnecessary code created in web saved Word files

Basic or Detailed Cleanup

Drawing Cells

Design and build the structure of the page layout

•Layout view

•Draw Layout Cell

•Draw Table Cell

•Nested tables

Tracing Images

A tracing image is used asa guide for placing layout elements

Convert Layers to Table

• Create the page in layers, and then convert it to tables for backward browser compatibility

Convert Tables to Layers

• The Convert Tables to Layers function enables you to return to layout mode after converting the page to tables

Design Notes

Design Notes for organization and communication

• Design Notes consist of a small file attached to the page, and follows the page even if that page is renamed

• The status category of Design Notes keeps track of the development stage of the page

Background Images

Add background or tiled images with ease

Image Spacers

Spacer images are small transparent GIFsthat are used to control thestability of a table

Creating Tables

• Tables are the foundation of web building

• Tables bring order and control to page layout

Table Borders and Cells

• Change table border size and appearance• Make table borders invisible• Split table cells

• Merge table cells

Modifying Tables

Change table attributes using the Property Inspector

Number of rows and columns CellSpace

CellPad

Alignment

Background color

Background imageBorder color

Width/Height

Border width

Clear row heightsClear column widths

Convert table widths to pixelsConvert table widths to percent

Aligning in Tables

Align contents of a cell:Horizontally• Left• Center• Right

Vertically• Top• Middle• Bottom• Baseline

Importing and SortingTabular Data

Import delimited data into a table

Sort the contents of a table

Image Assembly Using Tables

Change the table border to zero

Insert a sliced image into each cell

Working with Text

• The HTML document is made up of headings and paragraphs• Headings do not have an actual point size; they are relative

sizes

Fonts

The following series of fonts are generally resident on the user’s system:

•Arial, sans-serif •Courier New, mono•Courier, mono •Geneva, san-serif•Georgia, serif•Helvetica, sans-serif•Times New Roman, serif•Times, serif•Verdana, sans-serif

HTML Styles

• HTML styles can be assigned to an entire paragraph or just to a selected section of text

Lists

Lists can be bulleted plain, or indented

Types of lists are:

•Ordered•Unordered•Definition•Nested

Text Color

• The default color for text is black

• Font color can be added to the entire page, or just a selection of text

Correcting Text

• Spell Checker enables you correct any spelling errors that may exist on your page

• Find and Replace can be applied to a single page, all files in a folder, or an entire Web site

The History Panel

The History panel tracks all the actions you take as you create your page

Creating Frames

Frames divide the Web page into sections, and the sections can display different HTML documents

Modifying Frames

• Name each frame• Display or hide frame scroll bars• Set frame borders• Resize frames• Color frame borders

Links and Targets

The element in the frame links to another file or URL, and the content of the linked file will be displayed in another frame window.

Splitting Frames

• Split Frame Left – positions the current page in the left created frame

• Split Frame Right – positions the page in the right created frame

• Split Frame Up – positions the page in the top created frame

• Split Frame Down – positions the page in the lower created frame

Split existing frames or “nest” frames

Background Images with Frames

Create seamless background images using frames

• Logos• Navigation menus• Graphic headers

Templates in Action

• A standard template is a copy or “pattern” of the basic elements of an object

• A template is a combination of a standard template and updateable Library elements

•Locked regions are elements that consistent on every page

•Editable regions are elements on a page that are not consistent with all other pages

New Template

When creating a new template, include elements all that will be consistent on every page in your Web site

• Image page headers• Navigation menu• <meta> tags• Styles• Links

Modifying a Template

Modify the template and update all “templated”pages instantly

Library Items in Action

The Library consists of stored, repeated elements, which alleviates tedious insertion on every page, and retains consistency throughout the site

New Library Item

• Create a new Library item using the Library Assets menu

• Drag the item from the Assets panel onto the page

• Library items can be copied to other Web sites

Modifying a Library Item

Update a Library item and instantly update all pages with the modification