Macromedia Dreamweaver 4 Foundation Level Course What is Dreamweaver? Dreamweaver is a powerful Web site development software program used by professionals, as well.
Download ReportTranscript Macromedia Dreamweaver 4 Foundation Level Course What is Dreamweaver? Dreamweaver is a powerful Web site development software program used by professionals, as well.
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 Document Window The Status Bar The Launcher The Toolbar Code View Code and Design Views Design View Refresh File management Title field Preview/Debug Code navigation View options Reference The Status Bar & The Launcher Tag selector Download indicator Launcher Window size Site Assets Code Inspector HTML Styles History CSS Styles Behaviors 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 This panel holds the most commonly used tools. 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 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 This panel holds the components for building interactive forms. • • • • • • • • • Text Field Button Check Box Radio Button List/Menu File Field Image Field Hidden Field Jump Menu 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 <head> section of the HTML page with <meta> 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 The “storyboard” is a visual plan or a flow chart of the Web site. It facilitates: • Organization • Site Navigation • Linking Defining a Site • • • • Site root and Remote root Site Map Site layout preferences Site toolbar Site files Site map Site name Refresh Help Connect Put Get File And Folder Management The Site File View • The Local folder shows files and folders located on your hard drive. • The Remote Site shows files residing on the host server. The Path Structure Path structure is the step-by-step “path” a browser takes to locate a given object. 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 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" Creating a Site Map The Site Map is a visual overview of the site • Flow chart of linked pages • Displays link elements • Inserted images • Broken links 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 Keep image size small to facilitate fast download time. Image file types for the Web are: • jpg - compresses color information • gif - bitmapped (maximum 256 colors) • png - lossless compression 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 Email Links • Add an E-Mail 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