Macromedia Dreamweaver 4 Foundation Level Course

What is Dreamweaver? Dreamweaver is a powerful Web site development software program used by professionals, as well as beginners.

HTML - An Overview

The Authoring Environment The Main Menu The Toolbar The Status Bar The Launcher The Document Window

The Toolbar Code View Code and Design Views Design View Title field File management Preview/Debug Refresh Reference Code navigation View options

The Status Bar & The Launcher Tag selector Window size Download indicator Launcher Site Assets HTML Styles CSS Styles Behaviors History Code Inspector Properties

The Properties Inspector Displays attributes of a selected element Drop-down list and text boxes Point-to-file linking Linking Color selection

The Preferences Dreamweaver 4 enables you to customize your working environment from code colors to the status bar.

The Objects Panel The Objects Panel features seven categories: Characters Common Forms Frames Head Invisibles Special

Common Objects It inserts: Image Rollover Image Insert Table Tabular Data Draw Layer Navigation Bar Horizontal Rule Link Date Server-Side Include Fireworks HTML Flash Flash Button Flash Text Shockwave Generator This panel holds the most commonly used tools.

Character Objects This panel simplifies the entry of special characters. Line breaks Non-Breaking Space Copyright symbol Registered Trademark Trademark Currency: Pound, Yen, Euro Quotes Em-Dash Other Characters

Form Objects Text Field Button Check Box Radio Button List/Menu File Field Image Field Hidden Field Jump Menu This panel holds the components for building interactive forms.

Frames Objects The frameset designs in this panel simplify the creation of multiple frames. Left frame Right frame Top frame Bottom frame Left, Top-Left Corner, and Top frames Left and Nested Top frames Split Frame Center

Head Objects Search engines use keyword and description elements to categorize a Web site These elements are inserted into the section of the HTML page with tags

Invisible Objects Invisibles are the behind-the-scenes elements Named Anchors enable linking between items on the same page Insertion of JavaScript or VBScript Comments that are ignored by the browser

Special Objects Dreamweaver 4 enables the inclusion of external elements Applets Plug-ins ActiveX

Storyboarding Organization Site Navigation Linking The “storyboard” is a visual plan or a flow chart of the Web site. It facilitates:

Defining a Site Site root and Remote root Site Map Site layout preferences Site toolbar Site files Site map Site name Connect Refresh Put Get Help

File And Folder Management The Local folder shows files and folders located on your hard drive. The Remote Site shows files residing on the host server. The Site File View

The Path Structure  The full path to an image which resides in an Image folder in the site root directory would be as follows:   The domain name ( is the "index.htm" file  The sub-folder on the site is named "Images”  The actual file is "myphoto.jpg" Path structure is the step-by-step “path” a browser takes to locate a given object.

Creating a Site Map Flow chart of linked pages Displays link elements Inserted images Broken links The Site Map is a visual overview of the site

Creating a Local Site Create a folder on your hard drive Define the new site Create new files

Creating the Homepage The homepage is the “index.htm” file Set Page Properties All subsequent files link to this page

Adding Images jpg - compresses color information gif - bitmapped (maximum 256 colors) png - lossless compression Keep image size small to facilitate fast download time. Image file types for the Web are:

Adding Text Enter text into the document and format with the Text Property Inspector Format heading type, font style, font size, font color, font attributes, alignment, bullets and numbering Hyperlink text

Aligning Images and Text Text is aligned by the Image Property Inspector Text is placed in relation to the image Align function

Modifying Page Properties Pages can be modified to suit your preference

Adding Meta Tags Keywords Description Refresh Base Link

Viewing the Code The Code Inspector features options for customizing the appearance of the code in Code View

Linking with Point-to-File Quickly link one file to another Link Named Anchors

Browsing for Files Find a file using the Browse for File function

Links Add an link that will automatically open a pre-addressed New Message window in the user’s browser

Named Anchors Link a point in a page to another point in the same page

Linking Using Images and Text Link a “hotspot” on an image to another file Link specific text to another file

Checking the Links The Link Checker checks for broken links Checks a single page or an entire site

Previewing the Site Pages Preview the site pages in all browsers Add hard drive resident browsers to the Browser List

Remote Site Set up the Remote Site connection Information is generally supplied by the host server

Transferring Files to the Server Connect to the Remote Site Transfer files

Synchronizing Files Compares Local and Remote files Displays a list of files that are mismatched Saves a record of changes