1. Dreamweaver Tips & Basics Presented by Laban Toose ICT Specialist Sunbury Heights Primary School

2. Dreamweaver Property Inspector Objects Panel Image Table Layer Email button Flash button

3. A Basic Web Page / Web Site Plan your site – What is the purpose of your Page/Site? What will be on each page? How many pages? How will you navigate through each page? What images/ graphics will you be using? Where is the site?

4. Prepare Site folders Create the Web Site Root Folder e.g. /my documents/mysite Create an image folder in the root folder e.g. /my documents/mysite/graphics Create a folder called HTML in the root folder /my document/mysite/html

5. The Index.html Page The index.html page is the first and most important page of your web site. It is the home page of your site and the page that web browsers look for when opening a site. - Open Dreamweaver and save the page in your root folder calling it index.html - All other pages will be saved in the HTML folder - Now give the index.html page a browser name by selecting the Modify menu and Page Properties option While the Page Properties option is open you can also select the background image/colour for your page.

6. Adding text using Layers and/or Tables A layer is a free floating box that can contain text or images and can be dragged anywhere on the page. A table is a fixed box that can contain multiple rows and columns and can contain text or images. To insert a layer select the Draw Layer button in the Objects panel and click and drag the mouse pointer across the page. To insert a table select the Insert Table button from the Objects panel. Select the number of rows and columns and select OK. layer Table

7. Adding an Image to the Page/Layer/Table Any image or graphic can be inserted into a Dreamweaver Page. It is important to remember that the bigger the image (in terms of image resolution) the longer it will take for that image to appear on your page when viewed through a Web browser. To insert an image select the Image button from the Objects panel. Go to your root folder and select the image from the image folder that you prepared earlier. Select insert.

8. Adding a Hyperlink to your page For this exercise we will add a link for www.google.com to your page using both text and images. www.google.com Hyperlinks are connections to other pages in your site and links to other web sites on the internet. To add a hyperlink using text type the web site name and then highlight the text and enter the hyperlink address into the Property Inspector. To add a hyperlink to a picture select the picture and type the hyperlink address into the Property Inspector.

9. Hotspots Another useful way of creating a hyperlink is to use a Hotspot. A Hotspot is a semi-transparent shape placed over another image or text. Hotspots can be used to create multiple links from one image (individual people in a group photo). To create a Hotspot select the image that you wish to use and then select the shape of the Hotspot from the Property Inspector. Click and drag the Hotspot out over the required part of the image. Select the page that you wish to link to or type in the web site address that you wish to use in the Link section of the Property Inspector.

10. Dreamweaver Features Frames Forms Rollover images Alt References Named Anchors Creating Web Photo Albums with Fireworks Optimizing Images with Fireworks

11. Useful Links These sites listed below offer some of the best tips and online tutorials on the net for Dreamweaver http://www.macromedia.com/support/dreamweaver/tutorial_index.html Macromedia’s own Dreamweaver tutorial site. http://www.learnthat.com/courses/viewlets/dreamweaver/ Some very useful animated Dreamweaver tutorials with screen shots. http://webdesign.about.com/library/weekly/aadreamweaver.htm This site has quite a lot of adds but also has some great Basic and Advanced Dreamweaver Tutorials