Using Dreamweaver MX

Slide 2

Standard toolbars and menus

Time indicator:gives an approximation of download time of the page

Properties panel

Slide 3

Use the Insert, Table menu to insert a base table for the page layout.

Cell spacing adjusts the width of the space between the cells.

Select the width of the table: if this is not entered, the table will adjust according to the items in the cells and the window size of the browser.Note, it is better to use % rather than pixels, then the table will alter its width to suit the browser window.

Cell padding adjusts the space between the edge of the cell and the text.Select the

required numbers of Rows and Columns.

Slide 4

The base table you have chosen is indicated by dotted lines. This example has 2 rows and 3 columns.Each cell is used to contain an object: text, image, menu, etc.

Slide 5

Add further text as required in relevant cells. Don’t format the text at this stage.

1. Enter main title.2. Highlight the text.

4. Centre the text if you wish.

3. Use the drop down menu to format it as Heading 1.

Slide 6

Pressing Return at the end of a line produces a new paragraph.To move down one line, hold the Shift key down and press Return.

Slide 7

1. Enter text for hyperlinks.2. Highlight required text.3. Use Insert, Hyperlink

menu or use the Properties panel

1. Enter the url for the link2. Decide upon the target

for the link

Slide 8

NOTE: Web servers differ in the way they handle file names. To be safe always use: lower case letters and numbers only and no spaces. Always specify .htm as the file name extension.

Enter a Page Title.

To save the file, use the File, Save menu.Make sure you save the file in the correct location.

Slide 9

Note: Make sure that any images you want to use are saved in an assets folder which could be in the same folder as the web page.

To insert images, use the Insert, Image menu and browse to the required image.

Slide 10

Use a right click on the image to call up image properties.

Always describe the image used.

Slide 11

Click on the edge of a table to call up Table Properties.

Change table properties as required.

Slide 12

Click on any cell inside a table to call up Cell Properties.

Change cell properties as required.

Slide 13

Style Sheets

Slide 14

1. Click on Attach Style Sheet.

2. Click on Browse

3. Select body – css file.4. Press OK

To add an existing style sheet

Slide 15

body.css will change your page defaults so it will look like this

Slide 16

Style sheet oneStyle sheet two

Style sheet three Style sheet four

Slide 17

To create your own style sheet

1. Click on New CSS style

2. Redefine HTML Tag3. Select body

Slide 18

3. Select font colour

2. Select default font size

1. Select default font

4. Select background colour