Dreamweaver 8

Background

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 – with appropriate layout
3. Add content to pages
4. Link pages together
5. Publish your site

Getting Started

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

Go into Dreamweaver

            Start > All Programs > Macromedia > Macromedia Dreamweaver 8

            First time in, you get a choice between Designer or Coder layout – Choose Designer

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

            From the start page, choose Create New ________ or Create From Samples _________

            For instance Create New Dreamweaver Site

· Click on BASIC tab if it is not already selected to be led step by step through the process.

o Name site, and give URL where it will be published

o Choose Server Technology (ASP.NET, JSP, PHP) or None (fine for what we’re doing)

o Choose Edit local copies on my machine, then specify the location

o Indicate how you will connect (e.g. FTP), and the hostname, folder, ftp login and ftp password

o Select whether to check pages in and out (no if only a few people working on the site)

Tell Dreamweaver you care about Accessibility

            Edit > Preferences

            Choose Accessibility as the Category

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

· Un-Select “Offscreen Rendering” to make things better for screen readers.

Create a Page

            File > New

· Choose a category (e.g. Basic Page, Dynamic Page, Framesets, or Page Designs etc) and a more detailed choice (kind of page or page design) (e.g. Page Design (CSS)  “Two Column Left Nav “, or Frameset “Fixed Top, Nested Left”, or Basic Page “html”, etc  ). Some possibilities are previewed so you can see what they will look like

· Choose “Create” button

· Specify the name of the file (default location should be good – in the folder you specified for the site). Starting page is usually index.htm or index.html

· OR if creating blank page you can Right Click on Site in Files Panel and choose New File

Files and Management

Open an existing page to edit

            File > Open

            Find and select the page

Save a page

            File > Save

· If not already named, 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

            (Careful, it will use an open browser window. More than one time I’ve seen the preview, then closed the window, then realized I’d closed a browser window that I wanted to have open (like e-mail)

Saving and opening existing sites

When working on a single machine, this is easy. Once a site is created Dreamweaver knows where it is. When you bring Dreamweaver up again, it will automatically bring up your existing site. So if you’ve created a site and saved the files in the site, you’re “saved” the site. However, all you’ve really saved is the files. If you move them to another machine, you have the files, but you do not have the coherent “site”. If I understand it correctly, what one might expect to be “save” and “open” sites is accomplished by “export”ing and “import”ing sites. See the end of this document for info on exporting and importing (taken from Dreamweaver’s Help). The export creates an XML file with a .ste extension that stores info about the site.

Manage Files

· “Files” Tab on “Files” Panel on right side of window provides explorer like capabilities for renaming, copying files etc. (Copying a page is fairly well hidden. Right Click to get shortcut menu; under Edit, there are Copy, Paste, etc)

Publishing Site

· To publish, the files must be uploaded to a publicly accessible folder on a machine set up to be a web server (at La Salle, alpha.lasalle.edu).

· In the Files panel, multi-select the files to be uploaded, then click on the “Put” button (blue up arrow)

Editing Pages

Modifying a Page Design

· Text may be edited by selecting and typing

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

· 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)

Entering text

· Type it where you want it.

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

Inserting a horizontal line in text

            Insert > HTML > Horizontal Rule

            Specify relevant properties

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

Creating Table

            Insert > Table  OR use Common tool box

· 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)

Set Background Color in Table, Cell, Layer, etc

· Properties window – BgColor - choose

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

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

            Insert > Image Objects > Image Placeholder

• Specify properties – name, size, alternate text

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, by the src property of an image placeholder, select Browse for file (folder icon); find the file

· 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 “Files Panel” but this seems painful.

· An image in the same location as text will have a default alignment. There are a variety of other possible alignments. Alignment could allow text to be wrapped to the left or right of the image. Horizontal or vertical spacing can be added (HSpace, VSpace)

Insert Date and Time

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

Links

Creating hyperlinks

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

            In Properties Window, under Link - type the filename (the way to go for external links)

            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 Files Panel

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 >  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:”

Forms

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 “Text Field” icon from tool box
• OR – instead of last two – Insert > Form > Text Field

You can specify a label or not.

Insert Radio Buttons

• Insert > Form > 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  > Check Box (OR use tool bar)

You can specify a label or not. (You might as well include it)

Insert Combobox

• Best to have a table of layer to put it in – otherwise it will be placed on a new line by itself
• Change tool box from common to forms
• Select “List/Menu” icon from tool box
• OR – instead of last two – Insert > Form > 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 table 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 “ Jump Menu” icon from tool box
• OR Insert > Form > 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
• Use Tool Bar or Insert > Form > 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)

Miscellaneous

Check Current Page for Accessibility

            File > Check Page > Check Accessibility

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

Insert Microsoft Word Document – you can include within a page material that was created in Word. This can be cleaned up to say, get rid of Word specific markup tags..

• File > Import > Word Document
• Select filename from file dialog box; Choose which formatting to retain (text only; text with structure (paragraphs, lists, tables); text, structure, basic formatting (bold, italic); or test, structure, full formatting)
• The html is supposed to be cleaner than that generated by saving as html in Word, but the html is still pretty messy.

Set a page as home page for the site

            From Files panel, find the proper folder and select the file

            Right click; choose “Set as homepage”

Site map

            Site maps may be either used to help the developer, or they may be saved as an image to help visitors to a site. The home page for the site must be set (above) before a site map can be created. To view as a developer:

• Under Files panel, change drop down from “Local view” to “Map view”

To save as an image, while in map view:

• Click on Options button in top right hand corner of Files panel (it looks like a set of bullets)

· File > Save Site Map

• Specify the file name and choose bmp or png format

Design More From Scratch

Besides using PageDesigns when creating new pages, you can start from more basic pages and develop your own layout.

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, Choose “Layout”, then click “Layout” 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 cell heights and widths using properties

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

• Insert > Layout Objects > Layer OR
• On Insert Bar, Choose “Draw Layer” (3rd from left) and then draw location for the layer
• Modify > Arrange >  Prevent Layer Overlaps   toggles to allow or make sure layer overlapping doesn’t happen, as desired)

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 multi-select, then Modify > Arrange > Make Same Width  or Align Left etc 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

More Advanced

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)

*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

Importing and exporting sites

You can export a site as an XML file that contains the site’s settings, and import the site into Dreamweaver later. This enables you to move sites between machines and product versions or to share the settings with other users.

TIP	It’s a good idea to export your sites regularly so that you have a backup copy if anything happens to the site.

To export your sites:

1. Select Site > Manage sites.

The Manage Sites dialog box appears.

2. Select one or more sites to export, and then click the Export button.

To select more than one sites, Control-click (Windows) or Command-click (Macintosh) each site. To select a range of sites, Shift-click the first and last site in the range.

3. For each site you want to export, browse to a location where you want to save the site and click Save.

If you export a site that specifies a user name and password for a remote server, Dreamweaver asks whether you want to back up your settings or if you want to share the settings with other users. If you want to share your settings with other users, select the second option and click OK. Dreamweaver does not save information that would not work for other users, such as your remote server login information and local paths.

Dreamweaver saves each site as an XML file, with an .ste file extension, in the specified location.

4. Click Done to close the Manage Sites dialog box.

To import sites:

1. Select Site > Manage sites.

The Manage Sites dialog box appears.

2. Click the Import button.

The Import Site dialog box appears.

3. Browse to and select one or more sites--defined in files with an .ste file extension--to import.

To select more than one sites, Control-click (Windows) or Command-click (Macintosh) each .ste file. To select a range of sites, Shift-click the first and last file in the range.

4. Click Open to start importing the sites.

After Dreamweaver imports the sites, the site names appear in the Manage Sites dialog box.

5. Click Done to close the Manage Sites dialog box.