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
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
XHTML and tags

  • Elements, attributes and values
    <tag attribute="value"> ... </tag>

  • block, inline types

    a block tag has blank line above and below text, eg <h1>...</h1>, <p> ... </p>

    an inline tag has no extra whitespace around it, eg <strong> ... </strong>
Basic XHTML

  1. Web page structure

    • <!DOCTYPE>
    • <html>  ...</html>
    • <head>
    • <title> .... </title>
    • <style> ... </style> . Optional, used to define styles.
    • </head>
    • <body> ... </body>

  2. Basic tags

    • Headings

      heading tag default font size default font weight
      <h1> 24 pt bold
      <h2> 18 pt bold
      <h3> 14 pt bold
      <h4> 12 pt bold

    • paragraph <p> ... </p> block tag. Blank line above and below <p> tags.
      what's a paragraph?
      where's the right margin?
      attributes - align = "center", "justify", "right".
      eg, <p align="right"> .... </p> aligns the paragraph to the right of the browser window.

    • new line / line break <br />. Puts the text onto a new line. DW - [Shift][Enter]

    • Where have all the spaces gone. Use &nbsp; or [Shift][Ctrl][space] in D.W. to insert 'hard' spaces.

    • bold - <strong> ... </strong> or <b> ... </b> and italic <em> ... </em> or <i> ... </i>

    • horizontal line <hr>

    • increasing or decreasing text size - <big> ... </big> <small> ... </small>

    • quoting text - <blockquote> ... </blockquote>. Block tag which indents a block of text.

    • superscript <sup> ... </sup>, subscript <sub> ... </sub>

    • mark inserted text <ins> ... </ins>, mark deleted text <del> ...</del>

    • monospaced font <tt> ... </tt> inline ; <pre> ... </pre> block

    • abbreviation with "tool tip" popup - <abbr title="..."> ... </abbr>.
      eg <abbr title="HyperText Markup Language">HTML</abbr> looks like HTML
DreamWeaver Order of Service
  1. Start up D.W
  2. select File —> New
    Basic Page : HTML (make sure "Make document XHTML compliant" is checked)
    Create
  3. click on Show Code View button
  4. delete the first line:
    <?xml version="1.0" encoding="iso-8859-1"?>
    which tends to foul up Internet Explorer
  5. now type the title of page into the Title: box
  6. 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 comprehsive instructions for how to see the page you have just created take a look at View Page on Web

  1. Open Netscape 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