MACROMEDIA DREAMWEAVER MX

Introduction Macromedia Dreamweaver MX is a professional HTML editor for designing, coding, and developing websites, web pages, and web applications. Whether you enjoy the control of hand-coding HTML or prefer to work in a visual editing environment which let you quickly create pages without writing a line of code. If you prefer to code by hand, however, Dreamweaver also includes many coding-related tools and features.

Starting Dream weaver 1. Click on start. 2. Click on run. 3. Type Dreamweaver in run box. 4. Click on ok.

Defining Site (without using server technology) 1. Click on New Site from site menu and click on next. 2. Enter site name (Folder name) 3. Choose the option No, I dont want to use server technology and click on next. 4. Set the location for your site then click on next. 5. Give the same path and again click on next, next. 6. Finally, click on Done button.

MACROMEDIA DREAMWEAVER MX
Defining Site (using server technology) 1. Click on New Site from site menu and click on next. 2. Enter site name (Folder name you have created in fortunec01/htdocs). 3. Click on next. 4. Click on Yes, I want to use server technology option button. 5. Choose PHP MySQL from which server technology drop down box. 6. Click on next. 7. Choose the 3rd option Edit directly on remote testing server using local network and click on next. 8. Enter the address (location) of site folder. Like: \\fortunec01\htdocs\sitename 9. Click on next. 10. Set the URL as http://fortunec01/sitename 11. Click on Test URL button and click on ok. 12. Click on next. 13. Click on Done. Applying Background Color 1. Right click on the page and click on page properties. 2. Choose Background and Text color. 3. Choose Link color, Visited link and Active link color. 4. Click on ok. Inserting Image 1. Open your z: drive and create a new folder in your site folder. 2. Rename and Add image in new folder. 3. Open Dream Weaver and connect to your site. 4. Click on (+) sign of image folder and choose image file. 5. Select and drag the image to your page and drop the image. 6. Select the inserted image and resize the image. Aligning Image and Adding Alternate Text 1. Select the image. 2. Choose align option from properties inspector. 3. Type text in Alt text box. 4. Save the page. Adding Horizontal Line 1. From insert menu, click on Horizontal line. 2. Select the line and enter number in height and width box from properties inspector. 3. Choose align option from properties inspector. Changing Horizontal Line Color 1. Select and right click on the line. 2. Click on edit tag and click on Browser specific. 3. Choose color from color drop down box. 4. Click on ok. Inserting Date and Time 1. From insert menu, click on Date. 2. Choose format of day from Day Format drop down box. 3. Choose format of date from Date format drop down box. 4. Choose format of time from Time format drop down box. 5. Click on Update automatically on Save check box. 6. Click on ok. Image Placeholder: - Place for inserting image and is used when you dont have right image to insert in that position at the same time. 1. From insert menu, click on Image Placeholder. 2. Type the image name in Name box. 3. Enter number in Height and width box.

MACROMEDIA DREAMWEAVER MX
4. 5. 6. Choose color for the place holder. Type alternate text in Alternate text box. Click on ok. Layers: Layers are DHTML components and are similar to tables with a few different properties. Table where you can type your text or you can add image but you cant drag the table wherever you want but you can easily move the layer where you want. Steps to insert layer 1. From insert menu, click on layers. 2. Click inside the frame and add content or image. 3. Select the layer and from properties inspector you can add background color, image background and height and width of layer.

MACROMEDIA DREAMWEAVER MX
For Typing Text over Layer 1. Insert another layer and type your text and move the layer over the previous layer. INTERACTIVE IMAGES: Rollover Image: - A rollover is an image that, when viewed in a browser, changes when the pointer moves across it. A rollover actually consists of two images: 1. Primary image (the image displayed when the page first loads) 2. Secondary image (the image that appears when the pointer moves over the primary image). Both images in a rollover should be the same size; if the images are not the same size, Dreamweaver automatically resizes the second image to match the properties of the first image and also can link with another page or image file. Steps: 1. From insert menu click on interactive image rollover image. 2. Type image name and Click on Browse button of Original image. 3. Choose location and select the image file. 4. Click on ok. 5. Click on Browse button of Rollover image and choose location and select the image file. 6. Click on ok. 7. Type Alternate text. 8. Click on Browse button of Go to URL button and choose location and select file for link. 9. Click on ok. 10. Click on ok. Navigation Bar A more complex form of rollover image is a navigation bar. To create a navigation bar: 1. From insert menu click on interactive image/navigation bar OR Select the Common tab of the Insert bar, and then click the Insert Navigation Bar button. 2. Enter Name in Element Name box. 3. Click on Browse button of Up Image and choose location and image file. 4. Click on ok. 5. Click on Over image browse button and choose location and image file. 6. Click on ok. 7. Click on Down image browse button and choose location and image file. 8. Click on ok. 9. Click on Over while Down Image browse button and choose location and image file. 10. Click on ok. 11. Type text in Alternate text box. 12. Click on Go to URL browse button and choose location and file for link. 13. Click on ok. 14. Click on ok.

Modifying Navigation Bar 1. From Modify menu click on Navigation bar.

MACROMEDIA DREAMWEAVER MX

2. Modify all the option or apart of the option as you want. 3. Click on ok. Flash Button: - The Flash button object is an updateable button that is based on a Flash template. You can customize a Flash button object, adding text, background color and links to other files. Steps: 1. First you have to save the page before inserting Flash button.

MACROMEDIA DREAMWEAVER MX

2. From insert menu, click on Interactive Image Flash Button. 3. Choose Button style from Style box. 4. Type Text in Button Text box to display the text in the button. 5. Choose font and size for text. 6. Click on Link browse button then choose location and select the file for link. 7. Click on ok. 8. Choose Background color and click on Apply

MACROMEDIA DREAMWEAVER MX

9. Click on ok save the page. Flash Text: - The Flash text object lets you create and insert a Flash movie that contains just text. This allows you to create a small, vector-graphic movie with the designer fonts and text of your choice. Steps: 1. From insert menu, click on Interactive image Flash text. 2. Choose font, size and alignment.

MACROMEDIA DREAMWEAVER MX

3. Type your text in Text box. 4. Choose style (Bold and Italic) of the text. 5. Click on Browse button of link text. 6. Choose location and select file for link and click on ok. 7. Choose Background color and click on Apply button. Hyperlink 1. Select the text and click on Folder icon of link box from properties box.

MACROMEDIA DREAMWEAVER MX

2. Choose location and select the file. 3. Click on ok. Image Map: -An image map is an image that has been divided into regions or "hotspots". When a hotspot is clicked an action occurs, for example a new file opens. 1. Select the image on which you would like to make multiple links. 2. Click on the rectangular hotspot tool found in the Properties Inspector.

MACROMEDIA DREAMWEAVER MX

3. Select the rectangle tool and drag the pointer over the image to create a rectangular hotspot. 4. You can also choose the oval or polygon hotspot tool to make an oval or polygon selection. Pop-Up Menu 1. Save the file first. 2. Select the text and type # symbol in link box. 3. Press Enter key and select the text. 4. Open the behaviors panel by clicking on Windows Behaviors.

MACROMEDIA DREAMWEAVER MX

5. Click on the '+' symbol in the behaviors panel. 6. Click on Show Pop-Up Menu. 7. Type menu name in Text box. 8. Click on folder icon of link box. 9. Choose location and select the file. 10. Click on ok. 11. Click on + sign for another menu. 12. Repeat the same steps from no. 6 to 9.

MACROMEDIA DREAMWEAVER MX

13. Click on Appearance tab and choose up state text and cell color. 14. Choose Over state text and cell color. 15. Choose font, size, alignment and style. 16. Click on Advance tab and choose options. 17. Click on Position tab and choose position of menu. 18. Click on ok. Open Browser Window

MACROMEDIA DREAMWEAVER MX

Open the behaviors panel by clicking on Windows Behaviors. Click on the '+' symbol in the behaviors panel. 3) Click on Open Browser Window. 4) Click on Browse button and choose location. 5) Select the file and click on ok. 6) Enter number in width and height box. 7) Type Window Name and click on ok. 8) Save the page.
1) 2)

MACROMEDIA DREAMWEAVER MX