Using Dreamweaver MX 2004

Slide 1 Window menu Manage Sites… Window menu Manage Sites… 2 2 Open Dreamweaver 1 1 Set up a website folder (1). Click New… Click Site Click New… Click Site 3 3

Slide 2 Set up a website folder (2). From list, select None Click Next From list, select None Click Next 7 7 Check top option (No) Click Next Check top option (No) Click Next 5 5 Enter a name for the website folder Click Next Enter a name for the website folder Click Next 4 4 Check top option (Edit locally) Click Next Check top option (Edit locally) Click Next 6 6 Click Done 8 8 Click Done, again 9 9

Slide 3 Dreamweaver screen layout. Panel groups Properties panel Menus and toolbars Document window

Slide 4 Insert a table for page layout. Enter 0 for Border thickness as you do not want a border Click OK Enter 0 for Border thickness as you do not want a border Click OK 4 4 Enter required number of rows and columns 2 2 Click on Table button 1 1 Change table width to 100 percent so table goes right across page Change table width to 100 percent so table goes right across page 3 3 The table is indicated by dotted lines (because it has no border). This example has 2 rows and 3 columns. Each cell is used to contain an object: text, image, menu, etc. The table is indicated by dotted lines (because it has no border). This example has 2 rows and 3 columns. Each cell is used to contain an object: text, image, menu, etc.

Slide 5 Enter and format text. Highlight the text 2 2 Enter main title 1 1 Use Properties panel to format it as Heading Use Properties panel to align to centre if you wish 4 4 Add further text as required in relevant cells. Do not format text at this stage Add further text as required in relevant cells. Do not format text at this stage 5 5 Pressing return at the end of a line produces a new paragraph, with a large gap. To start a new line without a gap, hold the SHIFT key down and press return

Slide 6 Page title. This title is shown in the title bar of the web browser Give your page a title 1 1

Slide 7 Click on Image button Select Image from the list Click on Image button Select Image from the list 1 1 Find and select the image file (gif, jpeg or png files only) Find and select the image file (gif, jpeg or png files only) 2 2 If you have not saved your file, this dialog box will appear Click OK If you have not saved your file, this dialog box will appear Click OK 3 3 If the image file is not already in your website folder you will see this message. Click Yes, to copy the image to that folder. If the image file is not already in your website folder you will see this message. Click Yes, to copy the image to that folder. 4 4 Select the image In the Properties panel, enter a text alternative description - helpful for users with images turned off. Select the image In the Properties panel, enter a text alternative description - helpful for users with images turned off. 5 5 Insert an image.

Slide 8 Choose cell properties. Use Properties panel to format background colour, text alignment in the cell, etc. Click inside a table cell

Slide 9 Text menu CSS Styles Manage Styles… Text menu CSS Styles Manage Styles… 1 1 Click Attach (If replacing a style sheet, first select it and click Remove) Click Attach (If replacing a style sheet, first select it and click Remove) 2 2 Click Browse Navigate to style sheet file and select it Click OK Click Browse Navigate to style sheet file and select it Click OK 3 3 If you have not saved your file, this dialog box will appear Click OK If you have not saved your file, this dialog box will appear Click OK 4 4 If the style sheet file is not already in your website folder you will see this message. Click Yes, to copy the image to that folder. If the style sheet file is not already in your website folder you will see this message. Click Yes, to copy the image to that folder. 5 5 Click Done 6 6 Link to style sheet.

Slide 10 Without a style sheet.

Slide 11 Using style sheet one.css.

Slide 12 Using style sheet two.css.

Slide 13 Using style sheet three.css.

Slide 14 Using style sheet four.css.

Slide 15 Saving files. You should find all files save in the site folder you made To work with most computers: Use lower case letters and numbers. Do not use spaces or more than 8 characters. Use.htm as the file extension. To work with most computers: Use lower case letters and numbers. Do not use spaces or more than 8 characters. Use.htm as the file extension. File menu Save File menu Save 1 1 Use Save As… to save a copy with a different file name Use Save As… to save a copy with a different file name Files appear in the Files panel Double click on a file icon in the panel to open it Files appear in the Files panel Double click on a file icon in the panel to open it

Slide 16 Make hyperlinks. In the Properties panel, Click on the Browse for file folder button beside the Link box In the Properties panel, Click on the Browse for file folder button beside the Link box 2 2 Before you make hyperlinks to jump from one web page to another, make and save the web pages Find and select the web page file to link to Click OK Find and select the web page file to link to Click OK 3 3 Select the text to link from 1 1 Your link text is marked The linked filename shows in the Link box Your link text is marked The linked filename shows in the Link box