Key Skills in Dreamweaver

Ed Tec 6452

Parts of Dreamweaver:

· Menu Bar

· Insert Panel (toolbar running along the top, with Tabs)

· Files Panel (running along the right hand side)

· Properties Panel (running along the bottom)

· Open web pages you are editing show up in the middle.

Besides saving files to your web server “remote” location, these are the main skills you need:

1) Giving your page a title

2) Setting up the Layout of the webpage, with regions for text and/or media in a Table

a. Use Insert Panel -> Layout Tab -> Layout View -> Draw Layout Cell

b. Make sure the alignment of text or images in a cell is what you want; check the Horz & Vert alignment options in the Properties Panel with that cell selected

c. Add background colors ( in the Properties box) or images as needed to divide your page up into “menu” (left, right, top, bottom) and content areas

d. Use good contrast colors against one another (light text, dark background; or dark text, light background)

e. Lay out for the size screen your users are likely to have, 640x480 maximized, 800x600, or 1024x768 (use “Window Size” menu in bottom right of Page window)

3) Changing the appearance and style of text (in the Properties box at the bottom)

a. Paragraph

i. heading levels (big to small)

ii. Alignment (left, center, right, flush)

iii. Numbered list or Bullet list

iv. Indent levels (move left or right)

b. Individual words

i. Font
Important: Choose one of the options in the font list rather than entering an individual font – this avoids compatibility problems

ii. Size, Color, Style (Bold, italic)

4) Images

a. Prepare your image for the web in Photoshop or other manipulation program (JPG, GIF, or PNG), in the size you want to display on the page, and preferably put it in your local working site folder

b. Layout options

i. In text with wrap

ii. In a table cell (see 1a above)

iii. Avoid “Layers” because they show up differently on different machines

c. Place an image already saved as a JPG, GIF, or PNG ( use or just drag the image from your Files list to the page)
(if you have not saved it in your site, DW will prompt you)

d. To make parts of an image “hotspots” so that they can link to different places, select an image and use the Hotspot tools in the Properties Pane: Rectangular, Oval, or Polygon Hotspots are possible. After you make a hotspot, you can create a link as described below (item #5)

5) Links

a. Select any text, image, or hotspot within an image

b. If it is on the web, copy the address (include http://) from your web browser and paste it into the Link box in the Properties Pane

c. If it is in your site, drag from the “Point to File” icon to a file in your Files list, OR use “Browse for File” and choose it using a dialog box.

d. If you want the link to open in a new browser window, change the “Target” in the Properties Pane to “_blank”.

6) Cascading Style Sheets –allow you to standardize the look of multiple web pages

a. In the Design Palette, choose CSS Styles

b. Add a style by choosing the “New CSS Style” button in the Design palette under CSS Styles

c. The most important things to work with are “Redefine HTML Tag” or “Use CSS Selector”

i. To set the body properties of multiple pages, choose Redefine HTML Tag, then “Body”. In the resulting dialog, set the default body type style to your choice (use one of the font selections that is there). You can also set the background color or image to a standard image

ii. To set the color of links and visited links, choose “Use CSS Selector”, then “a:link” (for unvisited links) or “a:visited”. Then change the font color to your choice.

d. Once you have some CSS styles defined in one document (web page), you can export them to a style sheet to attach all your other web pages to. Choose File > Export > CSS Styles …, and save the file.

e. If you’ve saved a style sheet to a file (see step d), you can apply it to another web page by opening the web page, and choosing “Attach Style Sheet” in the Design Palette under CSS Styles.