Overview of Dreamweaver

Agenda

• Goals for this lesson
• What is Dreamweaver?
• What are its major components?
• Activity: Creating a simple web page

 

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: "The world's best way to create professional websites is now the easiest way to build powerful Internet applications. For the first time, you can work in a single environment to quickly create, build, and manage websites and Internet applications. Get visual layout tools. Rapid web application development. And extensive code-editing support. All in one complete, integrated solution—Dreamweaver MX."

...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?

NOTE: This section assumes you have told Dreamweaver MX to use the "MX Workspace" (without the "Homesite/Coder style") rather than the "Dreamweaver 4 Workspace." This choice is only available in the Windows version. See page 15 of Getting Started with Dreamweaver MX" for more information about these workspaces.

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

Notice the line of icons just below the menu bar. This is the "Insert Bar" and it can be used to add pretty much every page element. The tabs just above the bar control which category of Insert element is displayed in the bar.

Also, notice at the bottom of the Page Edit view is the Property Inspector. This is used to set most attitributes of selected page elements:

Back to the top.

Activity: Creating a simple (local) web page

Load Dreamweaver

Choose the blank editing window that opened automatically (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 the button on the Mac)

Create a link to the current page. The URL is http://cuip.uchicago.edu/wit/2002/modules/usingdreamweaver/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 Insert bar, which is just under the menu at the top of the document editing screen. The buttons can be used for adding links, tables, anchors, images, horizontal rules, or for entering Flash or Fireworks files). If you choose a different "Tab" you can insert other page elements.

Now look at different views: Code, Layout, both. These are selectable from the Document Toolbar (just below the Insert bar).

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 2002.

Then, Highlight it.

For a external (or remote) link, type in a URL (such as http://webinstituteforteachers.org/2002) 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.

 

Next lesson.