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 Choose your favorite editing program for:

• • •

Graphics Audio Video

The Quick Tag Editor Make fast alterations in the HTML code Insert HTML Wrap Tag Edit HTML - features a drop-down list of tags - will enclose existing tags within another tag - to edit existing HTML code

Clean Up HTML

• • •

Clean up redundant tags Combine related tags Remove empty tags

Clean Up Word HTML Basic or Detailed Cleanup Cleanup unnecessary code created in web saved Word files

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 as a 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 GIFs that are used to control the stability 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 Width/Height CellSpace CellPad Alignment Clear row heights Clear column widths Convert table widths to pixels Convert table widths to percent Background color Border color Background image Border width

Aligning in Tables Align contents of a cell:

• • •

Horizontally Left Center Right

• • • •

Vertically Top Middle Bottom Baseline

Importing and Sorting Tabular Data Import delimited data into a table Sort the contents of a table

Image Assembly Using Tables Insert a sliced image into each cell Change the table border to zero

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 existing frames or “nest” 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

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