Under Construction
Note: these notes are based on Dreamweaver 1.2 only at present.
Dreamweaver is a professional authoring tool that you can use to create and manage cross-platform, cross-browser web pages. You can import HTML documents without reformatting the code. You can also use the latest Dynamic HTML features like animated layers, behaviors, and style sheets without writing any code. You can check your pages for potential problems on all popular platforms and browsers.
Set up a directory for Dreamweaver, and then install it as per the instructions that came with it. You will need a registration number before you can run it.
Read the readme.htm file. It includes a few instructions to get you started, plus links to the Macromedia web site for release notes, new features, developer's centre, contact details and other information.
Select Help > Dreamweaver Help Topics for help on the following topics: using Dreamweaver help, a guided tour, workspace, site management, roundtrip HTML, formatting, tables, forms, images, frames, dynamic HTML, stylesheets, layers, behaviours, timelines, libraries, Shockwave ActiveX Java, and Netscape plugins, targeting browsers, HTML reference, keyboard shortcuts, Dreamweaver techniques. You need to have JavaScript enabled in your browser, plus Java for the search.
You will need to set up a site for each project you want to create in Dreamweaver. First decide what directory you want to be the root for the site, and create the directory if it does not already exist.
Select File > Open Site > Edit Sites. Click on the New Site button. Type in the Site Name that you want to appear on the File > Open Site submenu. Type in your chosen Local (hard drive) Root Folder. This will be the local equivalent of the site root folder on the remote site. Dreamweaver will store files for this site here, and create all site-root-relative links relative to the local root folder. If you want new documents to be saved in this location by default, turn on the Default Site option. The remaining options need only be filled in if you want to connect the local site to a remote site, and can be left blank otherwise.
If you have a remote server, enter the host name (e.g. www.myhost.com) in FTP Host, put the site root (i.e. directory on the remote site where documents visible to the public are stored) in Host Directory, and your login name and password on the server. If you want to be prompted for a password when you connect to the remote site, turn off the Save option. Finally, choose Connect to access the remote server.
To switch sites, choose File > Open Site
Dreamweaver provides the following windows/toolbars on your screen:
When you work in the document window, which acts rather like a word processor, Dreamweaver generates HTML code. You can see that code by launching the HTML inspector from the Launcher window. You can work in the HTML window instead of the Document window if you prefer.
Use the object palette to insert an object at the cursor location. For instance, if you want to insert an image, place the cursor where you want the image to go, click on the 'insert image' icon in the object palette, and it will give you the chance to browse for the image source.
Choose File > View File in Browser to see how your document will look in a particular browser.
The property inspector can be used to dynamically set values for all elements. You can open it using Window > Properties. There is an arrow at the bottom right hand corner that you can use to expand what it shows you. It updates when you click on a new element.
Choose File > Preview in Browser to see how your document will look in a particular browser. Edit the browser list if you want to add more browsers. Click on F12 to see the document in the primary browser.
Frames are used to divide up a web page. For example, you may want the navigation on one part of the page (one frame), and the content in another. Different files can be loaded into each frame. First select View >Frame Borders. Then alt-drag a border into the window to create a frame (option-drag on Macs). Drag in from a corner to create 4 frames at once. Select Windows>Frames to see the Frame Inspector. You can then use it to select frames. Then use the property inspector to change the selected frame's properties or to load a file into it. The size and location of a page's frames, along with the names of any files that should be loaded into them, are stored in a file called a frameset. Select File> Save Frameset to save a frameset file. Select file Save when the cursor is inside a frame to save a file inside that frame, or File> Save all to save all frames and frameset files.
Click on frames to see more about the subject.
To apply style to the whole page, right click on the page, and select Page Properties. You can then give the document a title, and specify a background image or colour and the colour of links, for example.
You can group together several formatting attributes into a style that has its own name, and apply it to as much text as you want. Then, when you change an attribute of the style, then all the code controlled by that style is instantly reformatted.
Select Text > Custom Style > Edit Style Sheet then click on New to create a new style. You then have the option of making a custom style (class), redefining an HTML tag, or using the CSS (Cascading Style Sheets) selector.
A custom style defines formatting attributes for text identified by a CLASS attribute. When you select make a custom style (class), enter a name for it before clicking OK. Once you have created the style, you can apply the style to selected text using the style palette. The name of the style is assigned to a Class attribute in a SPAN tag in HTML. The formatting for the style will appear in the HEAD of the HTML, for example:
.myCustomStyle {color:red;}
Examples of formatting attributes matching HTML tags to which styles can be attached are paragraph (<P>), bold (<B>) and table. If you choose to redefine an HTML tag, a style definition sheet for it will pop up that you can use to enter settings for the new style. The formatting for the style will appear in the HEAD of the HTML, for example:
h3 {colour: #9966ff}
Click on CSS for more about the subject of styles.
You may want your page to behave in a certain way depending on what the user does - for example, to play a sound when the mouse is placed over an object. Behaviors make objects interactive without scripting. They are JavaScript elements. First open the Behavior Inspector by clicking on the behavior button on the Launcher or by selecting Window > Behavior. Select the object to which you want to attach a behavior. Next use the browser pop-up menu to select the browser(s) in which you want the behavior to work, since they don't all recognise the same events. The events offered will depend on both the browser(s) selected and the type of object selected. Click on the events pop-up (the button with a + on). If you don't see the event that you expected, check that you selected the object correctly - its tags appear above the events pop-up menu to the left of the word 'Events' (didn't look too consistent to me). Choose an event, then choose an action from the actions pop-up, and provide any information required. To see the behavior, you will need to view the page in a browser. (adding a sound to a link like in the tutorial did not seem to work).
A layer allows you to position HTML content exactly where you want it in the browser window. You can include images, plugins, text and even other layers in a layer. To create a layer, click on the Layers button in the object palette, then drag the shape/position that you want. Dreamweaver will place a marker to identify the location of the code, but put the actual code that defines the layer at the top of the document.
To select a layer, click the layer selection handle (square to top left of layer), or click on the layer marker (a C in a square speech bubble at the top of the page). Just clicking inside a layer won't work, although you do get a blinking cursor inside the layer. Having selected a layer, use the Property inspector to change its properties, and the Layer inspector to select layers, change their stacking order, nest them within each other, or set their visibility. To open the Layer inspector, select Choose Windows > Layer. Click on the name of a layer to select it. Drag a layer in the inspector to change the stacking order: a highlight should appear above or below the layer names (rather than a border appearing around the one being dragged) - only then release the mouse button. Drag a layer so that a box appears around the name of the target layer in order to nest layers. The parent layer will expand to surround the nested layer when you release the mouse button. Nesting layers is useful for grouping layers together. Click in the column to the left of the layer to change the visibility of a layer. A closed eye denotes that means the layer is hidden, and an open eye that it is visible. If a layer has no visibility icon, its parent determines its visibility; ; otherwise it overrides its parent.
You can create animation using timelines. They use Dynamic HTML (DHTML) features rather than ActiveX controls, plugins or Java applets. The DHTML changes the properties of layers and images over time.
First place the image to be moved in a layer and move the layer to its starting position. Click on the timeline button in the Launcher, or select Window > Timelines. Select the layer (carefully) by clicking the layer marker and choose Modify > Add Object to Timeline. Click the keyframe marker at the end of the bar (in the Timeline window) and move the layer on the page to where it should be at the end of the animation (drag it along the page using the layer marker). Hold down the mouse on the play button (the right arrow on the toolbar of the Timeline window) to preview the animation on the page.
Note: my examples of layers and timelines do not show in Netscape and are way down the bottom of the page in IE.
© 2001. Copyright Sue Nethercott.