Presentation is loading. Please wait.

Presentation is loading. Please wait.

Macromedia Dreamweaver 4 Foundation Level Course.

Similar presentations


Presentation on theme: "Macromedia Dreamweaver 4 Foundation Level Course."— Presentation transcript:

1 Macromedia Dreamweaver 4 Foundation Level Course

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

3 HTML - An Overview

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

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

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

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

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

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

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

11 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

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

13 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

14 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

15 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

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

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

18 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

19 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

20 The Path Structure  The full path to an image which resides in an Image folder in the site root directory would be as follows:  http://www.mysite.com/Images/myphoto.jpg http://www.mysite.com/Images/myphoto.jpg  The domain name (www.mysite.com) 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.

21 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

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

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

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

25 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

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

27 Modifying Page Properties Pages can be modified to suit your preference

28 Adding Meta Tags Keywords Description Refresh Base Link

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

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

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

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

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

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

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

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

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

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

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


Download ppt "Macromedia Dreamweaver 4 Foundation Level Course."

Similar presentations


Ads by Google