Draft created: 8/28/00; last3/2/04
THIS IS A DRAFT, WHICH WILL BE IMPROVED WITH YOUR FEEDBACK

COSC 330 LAB 3
INTRODUCTION TO DREAMWEAVER
(NOTE: If you are already competent with DreamWeaver then do the Lab on Front Page.  If you are competent with both, see me about doing an alternate Lab.)

        This exercises introduces Dreamweaver to those who do not have experience with it's HTML authoring facilities.  According to Niederst, it is " the industry standard HTML authoring tool due to the fact that it produces the cleanest code of any of its competitors." According to Macromedia, "Dreamweaver provides advanced design and layout tools, as well as making it easy to use Dynamic HTML features such as animated layers and behaviors (implemented with JavaScript) without writing a line of code. Browser-targeting checks your work for potential problems on all popular platforms and browsers. Macromedia's "Roundtrip HTML technology" imports HTML documents without reformatting the code—and you can set Dreamweaver to clean up and reformat HTML when you want to." With these and other features, Dreamweaver is regarded as the most powerful WYSIWYG HTML authoring tool available so becoming familiar with it is essential for any Web developer.  Specifically the goals of this lab are to:

1. work through the introductory parts of the integrated learning facilities of Dreamweaver, i.e.
1. the Getting Started section of the Using Dreamweaver in the Help menu and
2. the integrated Dreamweaver Tutorial.
2. learn how to perform advanced HTML authoring and Web development tasks using Dreamweaver, including
1. creating layers and converting them into tables to format a Web page,
2. importing a Microsoft Word document,
3. defining HTML styles,
4. creating a visual site map,
5. designing a template, and
6. incorporating a jump window.
3. create a mini-Web, using Dreamweaver, on your FSU Web site, and
4. compare Dreamweaver to FrontPage

1. If you do not already have one, get access to Macromedia Dreamweaver.  (These lab instructions are based on Dreamweaver MX (not MX2004); if you are using a different version, you will have to "adapt and overcome" to accomplish equivalent tasks, if possible, on your version.)
   
1. It is available on the PCs in Pullen.
2. It can be purchased, by students, for for a minimum price in the FSU bookstore or a "best value" when bundled with Fireworks , the Web graphics development software.  (I recommend the latter bundle!)
3. A 30-day evaluations copy can be downloaded from the Macromedia Web site.

1. Open Dreamweaver and select Using Dreamweaver from the Help menu.  (If you don't have a printed version of Using Dreamweaver, you may find it easier to follow the integrated HTML version if you print the pages from your browser. You can also download a printable version from the Macromedia Web site.)
2. Keeping the time required, work through the Getting Started section, accessible by clicking it in the left hand panel.
1. In the Learning Dreamweaver, watch each of the "movies" of the Guided Tour to get a preview of the various facilities of Dreamweaver
1. It is advisable to follow some of the movies by performing the taskes in Dreamweaver itself.
2. It is unnecessary to try to learn the various facilities illustrated with the movies.  Just try to become familiar with what can be done.  You will always have these movies to walk you through particular procedures when you need them.
3. Keeping the time required, work through the Tutorial, accessible via Using Dreamweaver or, directly, from the Help menu in Dreamweaver.
1. Note that, in this tutorial, the primary technique for page development is to create layers which are subsequently converted to tables; this results in table based formatting with is currently popular but violates the W3C recommendation of using style sheets instead of tables for Web page layout. (This is done so that the pages will display correctly in 3.0 browsers as well as later versions.) Note the warning, "You cannot convert layers to tables if the document being converted contains nested or overlapping layers."
2. Tutorial tip: "Make a habit of naming the elements in your documents. Later, when you need to reference or select a particular image, layer, or some other document element, you'll be able to easily identify it."
3. Note that the rollover images created in the tutorial use JavaScript, although this is invisible to the Dreamweaver developer.
4. Note the difference between HTML styles and CSS.
4. Upload the web pages you created using the tutorial to your FSU account.
5. Create Web page, lab330-3.html, using Dreamweaver that contains tables created from layers.  It should inclulde
1. an overview of your lab results, including the version of Dreamweaver you used, the name of the tutorial(s) you finished, and any differences between the lab instructions and what you did,
   
2. link to the web created in the Dreamweaver tutorial,
3. a brief comparison of Dreamweaver, FrontPage, and any other authoring tool you like,
4. time it took you to complete
1. the Getting Started
2. the Guided Tour  exercises in Dreamweaver, and
3. the lab as a whole, and
5. suggestions as to how the learning experience in this lab.

1. Publish, on your FSU Web site,
1. lab330-3.html and
2. the web pages generated using the Dreamweaver tutorial.
2. Place an annotated link to lab330-3.html on  main330.html.