1. Configure DreamWeaver
  • Select Edit —>Preferences
    Category : General
    Change workspace • Dreamweaver MX
    check Homesite / Coder style.
    OK
    Category : Fonts
    Proportional Font : Verdana  10pt
    Code View : Verdana  9pt
    Category: New Document
    Check Make document XHTML compliant.
    click OK
2. Create Site
  1. Select Site —> New Site
  2. Click the Advanced tab
  3. Site Name: test
  4. Local Root Folder: h:\www (you can just type this in)
  5. click OK
  6. Now you should see a list of files in the sidebar.
3. New Page Procedure
  1. select File —> New
    Basic Page : HTML (make sure "Make document XHTML compliant" is checked)
    Create
  2. click on Show Code View button
  3. delete the first line:
    <?xml version="1.0" encoding="iso-8859-1"?>
    which tends to foul up Internet Explorer
  4. now type the title of page into the Title: box
  5. select File —> Save and browse to :
    H:\www
    Save.
    Note on file names:
    filenames on the web should be all lower case
    and contain no spaces - use underscore __ instead of space in filenames
    eg bad : My Page.htm (capitals and space), Mypage.htm (capitals)
    eg good filename practice: my_page.htm, tom_foolery.htm

    Continue to save as you add code.
Display Web URL in Browser

For comprehensive instructions for how to see the page you have just created take a look at View Page on Web

  1. Open Firefox and go to Earlham home page
  2. In the address box, append a tilde ~ and then your username. Finally add a forward slash / and then the filename of your web page:
    http://www.earlham.edu/~username/filename.htm

    eg http://www.earlham.edu/~stanlgr/mypage.htm
Tour of the Dreamweaver Interface
  • Start up Dreamweaver from the usual place (where would you find it??)
  • "Welcome" page. Can do the guided tour and tutorial later. Accessible from Help -> Welcome
  • Toolbar - views, title, file management, browser preview
  • Object bar - Common, Characters, etc
  • Properties inspector - misnomer. Properties manipulator. Use this to do lots of things.
    Context senstitive and expandable
  • Panels. Choose which panels to show from Window menu.
  • Status bar at bottom - shows current size of web page, height and width in pixels and size or 'weight' of page and download time.
  • Three page 'views' - Design, Code/Design, Code
  • We'll be working in Code View