Overview of Dreamweaver
 
Developed by Craig A. Cunningham

 

Agenda

Goals for this lesson

Upon completion of this lesson, the participant will:

  • Recognize the value of learning Dreamweaver for creating and managing curriculum webs.
  • Be able to start Dreamweaver on their work station.
  • Understand the use and significance of the panels, palettes, windows, and views in Dreamweaver.
  • Be able to use the page layout view to create a simple web page.

Back to the top.

What is Dreamweaver?

From the Macromedia web site: "Macromedia Dreamweaver 4 has everything you need to develop a professional Web site. Now you can build Macromedia Flash graphics directly in Dreamweaver. Whether you use Dreamweaver's visual layout tools or its text-editing environment, the intuitive Macromedia User Interface makes it easy."

...WYSIWYG (What you see is what you get) editor and web site manager

...the most popular of the high-end web development tools

...easily integrated with Flash (for animations) and Fireworks (for buttons and more animations)

...produces HTML (hypertext markup language) documents as well as interlinked sets of documents, and helps the user to create and maintain web sites on remote servers

...easily allows the inclusion of JavaScript applets as well as Java code in order to increase web page functionality and interactivity

You can download a trial copy of Dreamweaver from the http://www.macromedia.com web site.

Back to the top.

What are the major components?

Here's the entire Dreamweaver screen, with a variety of panels, palettes, and views.

Site files view (shows the files on your local computer and web server and allows putting and getting files)


Site map view (used for getting visual representation of the structure of your site or for building that structure):

Page edit view (used for editing pages; similar in function to Netscape Composer):


  • Panels
    • Objects
    • Launcher
    • Property Inspector

 

  • Palettes: These are all "turn-off-able" and can be arranged to suit you.
  • If you lose track of any of your panels or palettes, use the Window|Arrange Panels command.
    • Styles Palette

     

    • Reference/Assets Palette

     

Back to the top.

Activity: Creating a simple (local) web page

    Load Dreamweaver

    Choose blank window (untitled document) or choose File|New Window

    Create a simple home page for yourself. Include your name, information about you, your job, and your interests.

    Simply type text in like word processor

    Use the "property inspector" to alter styles, colors. Try changing Format to Heading 1. Try changing Size to +6. Try changing the text color (using on the property inspector), adding bold, italics, alignment (using ), bullets () or numbering ().

    Use Modify|Page Properties to change background and text colors

    Insert a table using Insert|Table

    Experiment with the right mouse button (or hold down button on the Mac)

    Create a link to the current page. The URL is http://cuip.uchicago.edu/wit/2001/modules/dw4wit/overview.htm

    (You can copy and paste URLs; to create link, highlight text, then Copy -- ctrl-c --then paste -- ctrl-v -- into the "Link" field on property inspector.)

    Try playing with the Objects panel (some of the buttons are used for entering Flash, Shockwave, tables, images, etc.)

    Now look at different views: Code, Layout, both.

    Click File|Save. (Click here for a brief diversion on file names.)

    Save into a new folder on the desktop (we'll erase this later) To create a new folder, use the new folder button in the Save as dialog:

    And that's it! Now create a few additional pages, with links among the various pages.

    To create links, type the text you want to link from.

    Example: Web Institute for Teachers 2001.

    Then, Highlight it.

    For a external (or remote) link, type in a URL (such as http://webinstituteforteachers.org) into the Link box on the property inspector.

    Or for a local link, click the folder icon on the property inspector, choose the file to link to.

     

    Okay, that's it for today. Before you leave class, make sure your mentor has seen your finished page!

    Developed by Craig A. Cunningham