How to make cascading popup menus:

1. Create a new HTML page.
2. Add the images, e.g., buttons, that will serve as the trigger areas for the pop-up menus, and save the file.
3. Select the first image, and from the top menu, select Window>>Behaviors.
4. In the Behaviors panel, click the + (plus) button and select Show Pop-Up Menu from the drop-down menu. The Show Pop-up Menu dialog box will appear
5. In the Text box, type the text you want to appear in the first menu item.
6. In the Link box, type the URL of the file you want to go to when the user selects that menu item.
7. Click the + (plus) button to add the item to the list and prepare to enter a new item.
8. Repeat Steps 5 through 7 for each menu item you want to appear in the first pop-up menu.
9. You can make the menu cascading by indenting menu items. If you want a menu item to be a submenu selection of the preceding menu item, select the submenu item and click the indent item button. If you make submenus, Dreamweaver will place an arrows.gif file in the same folder as your HTML file. You must upload that file to your server along with the HTML file, if you want your pop-up menu to work properly.
10. When you have added all the items you want in the menu, click the Appearance tab of the dialog box to preview and adjust how your menu will look.
11. From the first drop-down menu, choose Horizontal menu or Vertical menu.
12. From the next group of menus, specify the font properties you want.
13. Specify the colors for the up state and the over state of the menu. (The up state is what the menu item looks like when the user does not have the mouse cursor over it. The over state is what the menu looks like when the mouse is over it.)
14. Click the Position tab in the dialog box in order to set where the menu pops out.
15. You can select one of four position buttons that determine where the menu will appear relative to the image.
16. Click OK to close the dialog box.
17. Repeat this procedure for the other images that are part of your menu system.

Note: Using the Show Pop-Up Menu behavior creates a JavaScript file called mm_menu.js in the same folder as your HTML file. You must upload that file to your server along with the HTML file, if you want your pop-up menu to work.

Sample menu
 

How to make a form jump menu in Dreamweaver:

1. Click Insert > Form > Jump Menu. You could also select the Forms Category under the Objects Inspector and select the Jump Menu button.

2. In the Insert Forms Dialog Window, type in the text field, "Navigation Links." This will be the default text on the jump menu. You can specify another name is you prefer. Leave the Go To URL Field blank.

3. Click the plus sign (+) to add another link. Type the name of the link in the text box and the link in the go to URL box.

4. Repeat the previous step until all of the links you want are specified.

5. Click OK to close the Insert Forms Dialog Window.

6. You can edit the jump menu by clicking once on the jump menu and in the Properties Inspector clicking the List Values button.

7. Save the Web page and test the menu in your browser.

How to create a rollover image in Dreamweaver

1. First create two images to use for the rollover: a primary image that displays when the page first loads and a secondary image that appears when the mouse moves over the primary image. Make both images the same size.

2. Open a new document and place the cursor where you want the rollover to appear on the page.

3. From the top menu, select Insert > Interactive Images > Rollover Image.

4. From the Insert Rollover Image dialog box, specify a name for the rollover, specify the original and rollover images, and specify alternative text and a link for the rollover, if you desire.

5. Select the Preload Images check box if you want the images preloaded in the browser’s cache so no delay occurs when the user rolls the mouse over the image.

6. Click OK to close the Insert Rollover Image dialog box.

7. Save the web page and preview in the browser to see the rollover effect.

How to insert page titles in Dreamweaver

Open the htm page. Click the Page Properties button in the Properties Inspector. Select Category – Title/Encoding. Type the page title in the Title text box.

How to insert meta tags in Dreamweaver

Using the top menu, select Insert – HTML – Head Tags – Keywords. Then type the keywords (separated by commas) in the text box. Repeat this process using Insert – HTML – Head Tags – Description.

Create a school home page that includes a banner, a gif title, a simple navigation bar, a table containing school information, a nested table, and a footer for copyright notice

1. 1. File -- New --Basic page -- Create

2. In Design mode, press Enter twice to set carriage returns. Place the cursor at the top of the page and using the Table Icon in the top tool bar, select a table with 1 row, 1 column, 755 pixels wide, border thickness 0, cell padding 0, and cell spacing 0.

3. Place the cursor in the table and using the Images Icon, browse to the images folder containing the banner.jpg file and insert the image.

4. Place the cursor below the table and create another table with 3 rows, 1 column, a width of 755 pixels, 0 cell padding, 0 cell spacing, and a border thickness 0.

5. Place the cursor in the top row. Using the Properties Inspector, specify Format: Paragraph, Font: Verdana; size 10, and type in the pre-defined menu bar.

6. Using the Hyperlinks Icon, create links for the menu items, e.g. highlight Home and from the Properties Inspector, put index.htm in the Link box. Repeat for the other menu items.

7. Create a background color for the menu items row: In the cell section of Properties, click the arrow in the box right of Bg, and specify the color (#FFCC99)

8. Place the cursor in the second row of the table, and insert the pre-defined text in the second row. Specify paragraph text to be Verdana, 10 pt.

9. Highlight “Welcome to Our Web Site!” and specify Heading 2, Verdana.

10. Highlight “Our mission” and specify Heading 3, Verdana.

11. Highlight “Contact us” and specify Heading 3, Verdana.

12. Put the cursor in the bottom row and type in: “2005 Verde Canyon Elementary School District. All rights reserved.” Center justify. Then place the cursor in front of 2005, and from the top menu, select Insert – HTML -- Special Characters -- Copyright.

13. Highlight all of the copyright text and specify Arial, 10 pt. Change the row's background color to #FFCC99.

14. Nested table with nondiscrimination message: 85%, align center, cell padding 4. Insert the message text. Cell background color: #FFFFCC

15. Delete Welcome to... and insert the welcome.gif image

Link to an external cascading style sheet using Dreamweaver:

1. Open the CSS Styles panel: Select Window > CSS Styles.

2. In the CSS Styles panel, click the Attach Style Sheet button.

3. In the Attach External Style Sheet dialog box, click Browse to browse to an external CSS style sheet.

4. In Add As, select Link. Click OK.

Notes:

• By default, Dreamweaver uses Cascading Style Sheets styles to format text. The styles that you apply to text using the Property inspector or menu commands are embedded in the head of the current document.

• You use the CSS Styles panel to create, edit, and remove CSS styles, as well as to attach external style sheets to documents.

• To display the O’Reilly CSS reference guide included with Dreamweaver, select Help > Reference and select O’Reilly CSS Reference from the pop-up menu in the Reference panel.