View University CalendarsView University DirectoriesSearch the SiteGo to the SitemapGo to the Homepage

Dreamweaver MX

Dreamweaver is a versatile HTML (Hyper Text Markup Language) editor that allows you to create and design your own web pages without having to know HTML . Users may edit webpages using the visual editor which is almost as easily as writing a paper using a word processor or by hand-coding the HTML.

Starting Dreamweaver

From a window station:

  1. Start-Programs-Macromedia Dreamweaver MX

From a Macintosh station:

  1. Application-Macomedia-Dreamweaver MX

Dreamweaver Window

Insert Bar - The Insert bar contains icons for inserting various types of "object", such as images, tables, and layers into a document.

Document Bar - The Document bar contains icons and drop-down menus for switching to different views for the Document window such as "HTML" or "preview in browser" views.

Document Window -The Document window displays the current document you are working on.

Property Inspector - The property inspector lets you view and change the properties for the selected object or text. Each object has different properties.

Panel Groups - Panel Groups are sets of related features grouped together under one heading/panel.

Site Panel - The Site Panel contains all of the folders and files of a web site.From the site panel you can manage files, open pages for editing, upload or download files from remote sites.

Creating a Site

In order for others to view your site (a group of webpages) through a browser, the site must be published.You must do these step once per computer.

  1. Open Dreamweaver.
  2. Choose Site-New Site.
  3. At the Site Definition window enter a name for your site.
  4. Click Next from the bottom of the window.
  5. At the server technology question select “No, I do not want to use server technology”.
  6. Click Next from the bottom of the window.
  7. At the “work with your files during development” prompt choose “edit directly on server using FTP or RDS”.
  8. Choose where you save your local copies of the web files.
  9. Click Next from the bottom of the window.
  10. At the host name prompt enter: www.lawrence.edu
  11. At the folder promt enter the specific part of the Lawrence site you want to edit such as: /dept/computer_services
    /dept/conservatory/voice/
    /sorg/phidelt/
    /fast/johnsonf
  12. At the FTP login prompt enter your network username.
  13. At the FTP password prompt enter your network password.
  14. Click Test Connection to make sure you can successfully connect to the web server.
  15. Click Next from the bottom of the window.
  16. Select “No do not enable check in and check out”.
  17. Click Next from the bottom of the window.
  18. Click Done.

Connecting to a Site

Once your site is defined you need to connect to it.

  1. Select Site-Site Files
  2. From the File-Site panel, select the site to connect to.
  3. Click the "Connect to remote host" icon.

Open a blank page in Dreamweaver

A blank default page will open automatically when Dreamweaver is opened.

Document Foundations

  1. Choose Modify-Page Properties.
  2. At the top of the page, in the title field enter a title for the page.The title will appear in the upper window frame on browsers and home pages. It is also the name given to a bookmark for your page. It is also used by some search engines to index your page.
  3. Click on the box directly to the right of backround, text, links, visited links, or active links. A color-seclection window will appear. Select a color for your object.
  4. Click OK.

Saving Your Page

Periodically save your work. When saving pages remember to use lowercase for file names. Also do not use spaces or special character such as & or / in the filename.

  1. Click File-Save and navigate to the folder you want to save in.
  2. Type in the file name in the file name field.
  3. Click Save.

Inserting Images

First be sure the picture you want to insert is in a web friendly format such as jpg or gif. Have the picture saved somewhere on the computer.

  1. From the Insert bar click the Image icon or click Insert-Image.
  2. Browse to the image file. Select it and click OK (windows) or Choose (mac).
  3. Resize and position image as necessary.

Preview Your Page

Choose File-Preview in Browser or from the Insert bar click the Preview/Debug in Browser icon.

Formatting Text

Fonts

Tips - stick with the basic fonts. Not all computers have specialized fonts.

  1. Select the text to change.
  2. Select a font from font styles pull-down menu. Note that several fonts are listed together. Note the fonts are listed in groups. These are related fonts that the browser can substitute if the font of choice is not available.

Things to consider when selecting a font.

Size Text

Most browsers are set to present text at roughly 10 or 12 point. If you leave the size set to "none" the text will follow whatever setting the reader has set in their browser. To override these settings do the following:

  1. Select the text to change.
  2. Specify the font size by either choosing an "absolute" size from very small (1) to very large (7) or choose a relative size (+1, +2 or -1, -2, etc.).

Color Text

If you want to change a bit of text to a different color you can override the default color.

  1. Select the text to change.
  2. Click on the square color box to the right of the size pulldown.
  3. Select the color you want.

    Tip: It is good to use background and text colors that contrast.

Emphasis Text

Avoid using underlines to emphasize text. People confuse it with hyperlinks. Add emphasis with bolding and italicizing. Use italics to indicate the titles of books.

  1. Select text to change.
  2. Click either the Bold or Italize button.

To turn off the emphasis, select the text again and click the appropriate button.

Aligning Text

  1. Select the text you want to align
  2. Click the text alignment buttons (left, right or centered)

Indenting Text

  1. Select the paragraph(s) to indent.
  2. Click the right indent button to move the paragraph(s) to the right. Click again to indent further.

    OR

    Click the left indent button to move the paragraph(s) to the left. Click again to indent further.

Creating Lists

  1. Type in your lists with carriage returns at the end of each item.
  2. Select the items.
  3. Click the bullet list button to create a bullet list.

    OR

    Click the numbered list button to create a numbered list.

Spell Check

Choose Text-Check Spelling.

Working with Links

External Links - Links to pages that are not within your site folder.

  1. Type the text that will contain your link.
  2. Select the text that will serve as the link.
  3. In the Property Inspector window enter the full URL in the Link field and press Return (Mac) or Enter (windows).

Internal Links - Links to pages within your site folder.

  1. Type the text that will contain your link.
  2. Select the text that will serve as the link.
  3. Click and drag the Point-to-File icon to the right of the Link field in the Properties Inspector window.
  4. Drag the arrow to the file you want to link from the right (Local folder) side of the Site Window.
  5. Let go of the mouse to insert the link.

Remove a Link

  1. Select the text that contains the current link.
  2. From the Property Inspector window select and delete the text in the Link field.

 

 

 

Lawrence University, PO Box 599, Appleton, WI 54912 (920) 832-7000 Contact Lawrence