|
|
|||||||
Developed by Craig A. Cunningham |
Upon completion of this lesson, the participant will:
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.
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):

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
The contents of the Web Institute Web Site, including the On-Line Curriculum, Web Tank, and Session Notes, are Copyright 1999-2001, Graham School of General Studies, University of Chicago. No one may print, copy, or otherwise reproduce these materials without the express written permission of the Director of the Web Institute for Teachers or the Dean of the Graham School. All rights reserved. |