Dreamweaver MX

Note: 30 day free trial available at http://www.macromedia.com - try at http://www.macromedia.com/software/dreamweaver/trial/

Dreamweaver Recommended Development Process (simple static site):

1. Plan and prepare
2. Create Pages
3. Layout and set up the pages
4. Add content to pages
5. Link pages together
6. Publish your site

First, you need a place to put your stuff. Create a new folder and name it appropriately.

Create a site – this is important because Dreamweaver keeps your files organized. You are essentially creating a whole site, not just pages.

Site > New Site

· Click on BASIC tab to be led step by step through the process. See “Set up a local site” steps 1-14 for recommendations.

Tell Dreamweaver you care about Accessibility

Edit > Preferences

Choose Accessibility as the Category

· Check all 5 check boxes for Dreamweaver to ask accessibility questions of you when you create various things.

Create a Page

File > New

· Choose a category (e.g. Basic Page or Page Designs) and a more detailed choice (kind of page or page design) (e.g. “Text: Article D with Navigation”)

· Choose “Create” button

Open a page to edit

File > Open

Select the site

Save a page

File > Save

· Choose a name. Starting page is usually index.htm.

Preview WWW page

F12

OR Click on world icon on top tool bar and choose Preview in iexplore

OR File > Preview in Browser > iexplore

Manage Files

· “Site Panel” on Site tab on right side of window provides explorer like capabilities for copying files etc.

Modifying a Page Design

· Text may be edited by selecting and typing

· Cells in tables can be deleted by selecting the cell, selecting the appropriate HTML symbol at the bottom of the page, and hitting the DELETE key (this can be undone)

· Properties of objects are shown in Properties Pane (at bottom) and can be changed

Entering text

· Type it where you want it.

· To change properties, select text, and change in Properties window (near bottom of screen) or using “Text” tab items (near top of screen)

Inserting a horizontal line in text

Insert > Horizontal Rule

Making lists (ordered or unordered)

Use buttons in Insert Text toolbar (ol – ordered list; ul – unordered list (bullets))

Document Title

Use “Title” textbox on Document Toolbar

If document toolbar not visible, View > Toolbars > Document

Insert an Image Placeholder (holds place for an image without having to already have image)

Insert > Image Placeholder

• Specify properties – name, size

Create image

Use other software – Paint, Fireworks, Photoshop …

Insert Image

· Be where you want it

· Insert > Image

· Select image you want

· It is a good idea to name image so can be referred to – done in Properties window (left hand side, not labeled)

· OR, double click an image placeholder, then select image etc

· YOU can also select an image using “Point to File” icon, then drag to filename in “Site Panel” but this seems painful.

· An image in the same location as text will by default have its bottom aligned with the line of text. To improve this, work with properties of the image. Alignment could allow text to be wrapped to the left or right of the image. Horizontal or vertical spacing can be added (HSpace, VSpace)

Creating hyperlinks

Select item to link from (text, image, button)

In Properties Window, under Link - type the filename

OR

Click on Folder icon next to Link, and choose file from file dialog box

OR

Click on “Point to File” icon next to Link, and drag mouse to filename in Site Files window

OR other means as well – right click menu,

Creating internal hyperlinks

Make sure you will be able to see things you need to see

View > Visual Aids > Invisible Elements

Insert anchor(s)

Insert > Invisible Tags > Named Anchor

Type name to use

Create hyperlink (as above – except name is #anchorname, and/or Point to File, you drag to the anchor

Create Rollovers for Graphical Links

Add an image where desired:

Insert > Interactive Images > Rollover Image

· In dialog box, specify files with images for both unselected and selected versions, specify alternate text for handicap accessibility, specify URL to go to (preferably everything is relative to “Document”, not “Site”. Make sure “Pre-load rollover image” is checked so that there is a quick transition between images)

· If using for Navigation bar, Insert > Navigation Bar is similar but a little more specific to the task.

Create an Image Map for Navigation (not a recommended UI practice, since not immediately obvious to users that the image is a navigation tool)

· Select the image to be mapped

· Name the image map (“Map:”)

· Select the rectangular hotspot tool (light blue, near bottom, rectangular drawing) (alternatively, use circular or polygon hotspot tools adjacent. If using polygon tool, click on arrow tool when done selecting area)

· Drag over area to be hotspot

· Hotspot property inspector appears. Click folder icon next to Link:

· Find the file to be displayed when hotspot is selected

· In the “Alt Text” box type meaningful words that describe selection (probably what you would put on a command button if you were using a command button). This is crucial for handicapped users (visually impaired – screen reader will read the words in the alt –text)

· If you want the new page to open in a new window, choose “_blank” for “Target:”

Insert text box

• Best to have a table cell or layout table cell or layer to put it in – otherwise it will be placed on a new line by itself
• Change tool box from common to forms
• Select “Insert Text Field” icon from tool box
• OR – instead of last two – Insert > Form Objects > Text Field

Insert Radio Buttons

• Insert > Form Objects > Radio Group (OR use tool bar)
• Fill in choices in dialog box

Insert Check Boxes

• Probably best to have created a table of some sort to hold these
• For each, Insert > Form Objects > Check Box (OR use tool bar)

Insert Combobox

• Best to have a layer to put it in – otherwise it will be placed on a new line by itself
• Change tool box from common to forms
• Select “Insert List/Menu” icon from tool box
• OR – instead of last two – Insert > Form Objects > List/Menu
• In properties window, choose List Values, type in values
• Choose Initial value

Insert Jump Menu – a combo box in which making a choice takes you to a page

• Best to have a layer to put it in – otherwise it will be placed on a new line by itself
• Change tool box from common to forms
• Select “ Jump Menu” icon from tool box (bottom right)
• OR Insert > Form Objects > Jump Menu
• Enter Possible values and the URLs to go with them

· Under Options – choose “Select First Item After URL Change” so that when we return to this page, the choice will be reset to the start

Insert Command Button

• WWW pages tend to keep buttons limited. Dreamweaver is prepared to provide Submit and Reset buttons (can do others)
• Use Tool Bar or Insert > Form Objects > Button
• Use properties to specify the label on the button if not submit. (Label specified in dialog box will show up outside the button)
• Use properties to signify type of request going to server (Method - GET or POST)

Insert Date and Time

• Insert > Date
• Choose whether want day, choose date format, choose whether want time

Associate Behaviors with page elements – possible behaviors include calling JavaScript, changing a property, go to a URL, play a sound, popup a message, set text of a layer, text field, or status bar, swap image, play timeline (animation), validate form, and more.

• Ensure Behavior window is open (Window > Behaviors)
• Select object you are interested in adding behavior to
• In behavior window, select +
• Choose a behavior
• Fill in any needed info for the behavior in the dialog box
• In Behaviors panel, ensure that event is correct (use down arrow to change)

Insert Microsoft Word Document – can include file created in Word and saved as HTML. This can be cleaned up to say, get rid of Word specific markup tags..

• File > Import > Word HTML
• Select filename from file dialog box
• Choose which version of Word cleaning up from
• Check which kinds of things should be cleaned up.
• Some things may still end up messy, but the html is a lot less messy.

Set a page as home page for the site

From Site files window, find the proper folder and select the file

Right click; choose “Set as homepage”

Create a site map

• After having set a home page,

· Site > Site Map

• *Choose “Map and Files” – to keep both hierarchy and list

Page layout can be aided via using tables or layout tables or layers. Consistency in page layout can be aided by creating templates. Consistency in formatting can be aided by using cascading style sheets.

Creating Layout Tables

· On Insert Bar, Click “Layout” tab, then click “Layout View” button

· Choose “Draw Layout Cell” toolbar button and then draw location for the cell

Layout Tables by default have fixed width columns. You can change one column to vary so that page will expand (or contract) to the size of the browser window:

• At the top of the column, where the width is shown, click the down arrow, and choose “Make Column Autostretch” on pop-up menu.
• If a spacer image has not been chosen, you will be asked for one
• The column will now have a wavy line instead of a size
• When displaying the page, if the column would be too small to hold the contents, then it stops contracting

Creating Table

Insert > Table

· Table sizes can be specified for % of the visible page, or by # pixels. % can ensure that a table shows completely no matter what; # pixels ensures readable size (if you make it readable size)

· Tables can be inserted inside cells recursively to build up an organization

· Tables can be modified with Modify > Table > (Delete Columns, Merge Cells, Etc)

Create Layers – Dreamweaver seems to have downplayed this in the latest version. These can be used to help organize complex layouts – can easily reposition page elements by dragging the layer around

• Insert > Layer OR
• Toolbox icon (5th from left, under Common)
• Modify > Arrange > Prevent Layer Overlaps toggles to allow or make sure layer overlapping doesn’t happen, as desired)

Set Background Color in Table, Cell, Layer, etc

· Properties window – BgColor - choose

· If doing whole table, must get whole table selected (use <table> tag)

Convert Layers to Table – useful so that people with Old Browsers can access your page

• Wait until you are close to done

· In order to get good results, layers must look table-ish, otherwise will get very many rows and columns in resulting table (my simple opening screen with 4 layers ended up with 16 cells in the table) – need to align. Can Modify > Align > Make Same Width to aid minimizing number of cells

• Modify > Convert > Layers to Table
• Answer dialog box questions – make number of pixels to ignore larger to reduce the number of cells created

Check Current Page for Accessibility

File > Check Page > Check Accessibility

· Many messages with items that may be an accessibility problem.

· To check any page, in Site Panel, select the page, then on Site pulldown choose Reports, and in dialog box, choose “Accessibility” checkbox

*You also can:

• Create frames, in any of many different styles
• Create your own style (font, color, size) to be applied to text on your pages
• Create a template so that you can have multiple pages with the same basic format, background etc
• Keep track of history of changes and repeat the same changes later
• Make things (text, background …) any color that you can find and put on your desktop (note however that there are only 212 “Web-safe” colors – colors that will display correctly on all platforms – Dreamweaver’s color palette uses these)
• Prepare to tie into DBs
• Do Many, Many, Many things