Personal tools
  •  

DWMX Learning the Basics

Document Actions
  • Content View
  • Bookmarks
  • CourseFeed
  1. Dreamweaver - Conceptual Overview
  2. Cheat Sheet - Defining a Site in Dreamweaver
  3. Site Management - Dreamweaver Tutorial
  4. Configuring a New HTML Document - Dreamweaver Tutorial

Dreamweaver MX: Conceptual Overview

Notepad 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 Dreamweaver MX screenshot 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.

Static & dynamic page models

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:

  1. What does WYSIWYG stand for? Is it really a true statement?
  2. What might be some limitations of using a 100% WYSIWYG authoring environment?

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.

Define a Site in Dreamweaver

  1. Open the Site window and select Define Sites from the drop-down menu. Click New .
  2. Under Local Info , give your site a name (like "My5240Site") and select the local folder where you will keep your site files. If you are using public lab computers, you may wish to create your local folder on a zip disk.
  3. Under Remote Info , enter your remote site information: ftp host, host directory, username and password.
  4. Click "OK" and then Click "Done."
  5. You should now be able to connect to the remote site. Click the icon immediately to the right of the drop down list of sites in the Site window. The icon looks like the ends of 2 cables which will join when you are connected to the server.
  6. Once your are connected you can upload (Put) and download (Get) files to and from the server using the up and down arrows at the top of the Site window.

If you still need more help, refer to Dreamweaver's help files by going to Help > Using Dreamweaver.

Site Management in Dreamweaver MX

Objectives:

  • You will learn how to Define a Site (create a site profile) in Dreamweaver
  • You will create folders to store your site files in
  • You will upload your files to a remote site (web server).

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.

  1. http://dreamweaver.cybermeister.net/team/index.html
  2. http://ict.cas.psu.edu/training/howto/htmleditors/using_siteman.html
  3. 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

  1. Open Dreamweaver MX. When first starting the program, you may be asked which layout you would like to use. While you may choose either layout, these tutorials will assume that you have chosen "Dreamweaver MX Workspace" without checking the Homesite style checkbox. You can change the layout at any time by going to Edit > Preferences > General.
  2. Open the Site Panel (Window > Site) and select Site > New Site from the panel menu.
  3. A dialog box will open. Select the Basic tab if it is not already selected. If you receive a warning message when going from the advanced tab to the basic tab, just click OK.
  4. On the first screen, enter a name for your site like "My 5240 site" or another descriptive name. Click Next.
  5. We will not be using a Server Technology in this class, so select "No, I do not want to use a server technology." Click Next.
  6. Make sure that "Edit local copies on my machine,..." is selected. This means that you will work with and change files locally and then upload them to the server, rather than directly modifying the files that are already on the server.
  7. One the same screen, click the folder icon to browse to the location on your computer where you will be storing your web site files. If you are on a lab computer, you may wish to create your local folder on a zip disk, since there is no guarantee that your files will be safe on the Hard Drive. Click Next.
  8. Select FTP from the dropdown list asking how you want to connect to the remote server. Several other text boxes will appear. See Figure 1.
    Check In/Out is not necessary at this time, but it can be a valuable version control feature if there is more than one person working on a site.
    Defining a New Site - FTP
    Figure 1
  9. Click "Test Connection" to verify that the information you entered is correct and that you can connect to the remote server. Click Next when the test connection is succesful.
  10. Enabling Check In/Out is not necessary at this time, but it can be a valuable version control feature if there is more than one person working on a site. Click Next.
  11. You will see a summary of your site configuration. Click Done.

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:

  1. Make sure that the root level of your site (the topmost folder in the file list) is selected by clicking once on it.
  2. From the File menu in the Site panel, select New Folder .
  3. Type a name for your new folder, in this case " dreamweaver ". Press Enter or click away from the folder somewhere to accept the new name. You can rename folders at any time by selecting a folder and going to File > Rename . Remember that the web server is case sensitive, so be consistent when naming your files and folders. Using all lowercase letters for file and folder names is recommended. Also avoid spaces and special characters (other than "-" or "_") in file names.

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.

  1. Select the "dreamweaver" folder by clicking it once.
  2. Go to File > New Folder and give the new folder the name "images".

The Site Panel
Figure 2.

Now, upload your files to the remote site (the web server).

  1. Select the " dreamweaver " folder by clicking on it once.
  2. Click the up arrow in the Site panel, or go to Site > Put.
  3. You may be asked if you want to include dependant files. Dependant files are files that are used within the document or documents you are uploading, such as images or Flash movies, and also Design Notes (files that Dreamweaver automatically creates for you). Since you are uploading a folder, all of the files within that folder, including other folders, will be uploaded, so you can select "No".

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.

Parallel  Remote and Local Sites

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.

Opening and Configuring a New Document in Dreamweaver MX

Objectives

  • You will learn how to prepare a new document in Dreamweaver

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

  1. Create a new document by selecting File > New. Make sure you are on the General tab and select "Basic Page" from the category box and "HTML" from the Basic Page box. Click "Create".
  2. You may notice that Dreamweaver uses a split-pane view of the document, with the lower half displaying the visual layout of the page, and the upper half showing the html code. If you plan to lay out your pages visually, it is recommended that you keep the code visible as you create pages, so you can see how the code is generated. This is a good way to pick up some basic HTML skills. You can switch between code view, split view, and design view on the toolbar. You can adjust the height of each pane in the split view by clicking and dragging the border between the two panes. There is also a Live Data view that you do not need to use at this point.
  3. At the top of the document window, to the right of the page view buttons, is a "Title" textbox. Enter a title for your page here. Since this will be the home page of your site, give it a name like "Homepage" or some other descriptive title. You can always change it later. (If you do not see the "Title" textbox, go to View > Toolbars, and select "Document" to display the toolbar)
  4. You can also add or change a page title in the Page Properties dialog box along with other page settings. Go ahead and open the dialog box (Modify > Page Properties).
    Page Properties
  5. Choose a background color (Click "Apply" to see the changes to your document without closing the Page Properties dialog box.)
  6. Choose a text color .
  7. Close the dialog box.
  8. Now add some text to the body of your page welcoming students to the site.
  9. Save your page. Select File > Save and a dialog box should appear, allowing you to name the file. Since this will be the home page of your site, name it " index.htm ". Remember that the web server we will be using is case sensitive, so we recommend naming all of your files in all lowercase letters. A file named "index.htm" will automatically be displayed when you go to that page's folder in the browser. This is called a folder's default page.
  10. Upload (Put) it to the server. Select the file in the site tab of the Files panel, and click the "up" arrow. A dialog box may pop up asking if you want to include dependent files. Click "No." You should notice that index.htm has appeared in the Remote View of your Site panel, inside the "dreamweaver" folder.

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.

Copyright 2008, by the Contributing Authors. Cite/attribute Resource . admin. (2008, May 20). DWMX Learning the Basics. Retrieved January 07, 2011, from Free Online Course Materials — USU OpenCourseWare Web site: http://ocw.usu.edu/instructional-technology-learning-sciences/producing-distance-education-resources/resource18.html. This work is licensed under a Creative Commons License Creative Commons License
Online Degree Program
Utah State University offers an online masters degree program (MS & MEd) in Instructional Technology and Learning Sciences. Click below to find out more.