Dreamweaver
Content
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 don’t 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 don’t 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 can’t 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
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 don’t 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 don’t 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 can’t 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
