Macromedia
Dreamweaver is a rapid development environment for HTML and other Web scripting
languages, meaning that it is a tool that assists web designers in producing
web pages faster than hand-coding in a text editor like Notepad or SimpleText.
One of Dreamweaver's strengths is as a visual or WYSIWYG (What You See Is What
You Get) editor, meaning that you can design and lay out web pages visually,
much like using a word processor. It is even possible to create web pages without
knowing a single bit of HTML.
However, in addition to being a visual web development tool, Dreamweaver also
includes some
powerful features to enhance hand-coding, such as tag completion and hints.
Using a combination of visual and hand-coding development, Dreamweaver can accommodate
novice users who are just beginning to learn about and build web sites, and
more advanced users, who prefer hand-coding to produce specific results.
The current version of this tool, Dreamweaver MX, is the most versatile and powerful edition yet. In previous versions, you could create static HTML pages, along with some JavaScript Behaviors to increase interactivity, but you had to either purchase a different tool, such as Dreamweaver UltraDev, or know and code Server-Side interactivity (such as connecting to a database to display or collect user information) by hand. With the release of MX, you can design and develop static HTML pages, as well as dynamic, database-driven pages with the same tool.
This course will cover only static page construction using HTML and some JavaScript. Creating dynamic pages is a more advanced topic, and can be learned independently by following some of the tutorials included in the Dreamweaver Help files, and also by purchasing books that help you learn Client-Side scripting languages such as ColdFusion, ASP, or JSP. The learning curve for creating dynamic, data-driven pages is higher than for static pages, so be prepared to spend some time learning how to do it.
Spend some time familiarizing yourself with Dreamweaver's layout. There is a "Welcome" introduction in the Help menu to get you familiarized with the Dreamweaver interface. Our first tutorial, entitled "Site Management" will get you started building an instructional site using Dreamweaver.
Questions to Ponder:
Tutorial Objectives: The goals of the Dreamweaver tutorials are to: 1. get you up to speed with basic website creation and management using a popular and powerful tool, and 2. help you create an instructional site that will be useful to you now, as well as provide you with practice for creating future instructional Web sites.
Obtaining a copy of Dreamweaver: Dreamweaver may be purchased directly from www.macromedia.com in either a downloadable version (user manuals cost extra) or a boxed version (user manuals included) or other vendors that sell macromedia products (i.e. www.buy.com, or www.ecost.com).
You may purchase either the Full Commercial version, or the Education version, which costs about $100. It should be noted that the license agreement for the Education version states that it cannot be used commercially. In other words, if you plan to use Dreamweaver to make money, buy the Full Commercial version. Otherwise, you can always upgrade to the next full Commercial Version after buying the Student Version. It is also available at the USU bookstore, and at several online academic resellers such as www.edtech-cps.com You will be required to prove your student or faculty status by faxing or emailing your school ID.
There is no difference in functionality between the commercial and educationally priced versions.
You may also elect to download a 30 day trial version from Macromedia. Please be aware that after the trial expires, there is no way to reinstall the trial.
If you are interested in designing graphics for use in your web pages, consider buying Macromedia Fireworks MX, a powerful web graphics program. Also, the Macromedia MX Studio, which includes Dreamweaver MX, Fireworks MX, Freehand 10, a vector illustration tool, and Flash MX, a versatile rich media application development tool is also an option. Buying the Studio is considerably cheaper than buying each program separately.
Tip: To see a quick video introduction to DWMX workspace, follow the link below, and look for 'Macromedia Dreamweaver MX 2004.'http://www.macromedia.com/macromedia/events/online/ondemand/ (you will need to create/register a user id to view. Reuse this same account for all your future extension downloads from macromedia) |
Lastly, here is a resource (link) for users who do not wish to upgrade to the latest version of DWMX. Its a compilation of various online learning resources on using Dreamweaver 4. However, I strongly recommend that you follow the class syllabus, and also update to the latest version of software that the rest of the class is using.
If you still need more help, refer to Dreamweaver's help files by going to Help > Using Dreamweaver.
Objectives:
Web Designers very rarely create a single page for any one purpose. Most often, they create dozens, even hundreds or thousands of pages as part of a site. While individual page creation skills are the most important, it is also necessary to know how to manage an entire site. Managing a professional web site includes such topics and skills as FTP, moving, naming, saving, and deleting files, version control, and other topics.
From previous lessons on HTML and web sites, you should know that web pages are served up on the web by a web server, which is most likely (but not necessarily) a different machine than the one you use to create those web pages. Dreamweaver helps you manage your local files (the ones on your machine that you will be creating and editing) and your remote files (the files that have been uploaded to the web server to be viewed on the internet via a web browser).
Dreamweaver has powerful, built-in site management features. You will need to learn the basics of these features, and will do so by setting up a new site to contain all your web pages developed for this class.
Additional Resources: Here are a few web resources that will help you to familiarize yourself with many of the site management features of Dreamweaver. Keep in mind that these tutorials are for Dreamweaver 4 and earlier, and while there may be many similarities with Dreamweaver MX, there will be differences also.These tutorials will walk you through setting up a new site. The content for theses tutorials is provided through 3rd party websites and is not developed by USU. The links will open in a new browser window.
- http://dreamweaver.cybermeister.net/team/index.html
- http://ict.cas.psu.edu/training/howto/htmleditors/using_siteman.html
If you need more information than these tutorials cover, refer to the Dreamweaver manual (the book or in the Help menu within Dreamweaver) or search the internet for "Dreamweaver Site Management" or "Dreamweaver Tutorial."
Activity: |
Create a new site
You are almost ready to begin doing what you came here to do: create a web pages. First, however, you will need to organize your site in a logical way. There may be files already in your local folder (on your hard drive or Zip disk) from completing the previous HTML tutorials. To prepare for creating new files from these Dreamweaver tutorials, add a folder to your local site called "dreamweaver". To add a new folder:
To further organize our files, we will add an "images" folder inside the dreamweaver folder to store any graphics associated with the html files you will create in the Dreamweaver tutorials.
Now, upload your files to the remote site (the web server).
Ensure that the files uploaded to the remote site properly. Also, make sure that your local and remote sites are "parallel", meaning that the root level of your local site corresponds to the root level of the remote site, and likewise for all the sub-folders in your site. If the folders do not correspond, or in other words, if they are not on the same level, you will have major problems. See Figure 3 for an example. If your folders are not parallel, then you need to redefine your site (Site > Edit Sites) and make sure that the local root folder and the remote root folder correspond. Congratulations! You made it through defining your site. Now you can get creative. The following tutorials will introduce you to the basic and most important features in Dreamweaver MX for designing and developing web pages. If you ever need to re-define your site, just come back to this tutorial for a refresher course. In the following tutorials, you will be creating an instructional site of some kind. The site will include things like a homepage with course information, a syllabus with a calendar, a quiz page, and other pages of your choosing. |
Dreamweaver MX supports the use of many different types of web pages, including your standard HTML documents as well as pages that can take advantage of various server-side scripting and programming languages, such as ASP, ColdFusion, PHP, and more. In this tutorial, and during this course, we will only be using HTML pages, with a .htm or .html file extension.
Dreamweaver eases the creation of new pages by automatically inserting basic tags such as <HTML>, <HEAD>, and <BODY>. Additionally, you can use the Page Properties dialog box (Modify > Page Properties) to configure some of the basic elements of a page, such as link and background color, page margins, and other features.
Activity: |
Creating a new HTML document
As you become more familiar with Dreamweaver's interface and features, you should hopefully also become aware of how quick and easy it is to produce basic HTML. Compare the time you spent hand-coding your first HTML document with the time you just spent creating this one in Dreamweaver. Chances are you were able to do more with the page, and faster than hand coding. |