Dreamweaver MX 2004 Basics
Computing Resources >> Tutorials >> Web Development >> Dreamweaver MX 2004 Basics

Objectives

Getting Started

Connecting to Your Server Space

Creating Your Page

Inserting Images

Inserting Tables

Links

Anchors

Page Properties

Resources

Evaluate this tutorial

PDF Handout

 

Creating Your Page

Now you're ready to begin! There are two ways to get started with Dreamweaver: Either select a new HTML file or open a new document by going to File --> New, and select HTML, and click Create.

Dreamweaver MX operates much like Microsoft Word; just begin typing, inserting images, tables, etc.

Let's take a look at the Dreamweaver interface:   several key toolbars - the properties window, the insert toolbar, and the file management window - offer quick access to many of Dreamweaver's functionalities:

Page Views

Dreamweaver offers three viewing options for working on and creating your page:

  1. Code - This view presents the user with only the HTML code.
  2. Design - This view presents the user with a GUI interface, similar to a word processing program, allowing for the creation of professional quality pages with little or no knowledge of code.  
  3. Code and Design - The view splits the screen, providing the user with both the code (on top) and GUI (on the bottom). Highlighting text in the bottom, GUI portion, will highlight the code on top.   This offers the user a unique opportunity to learn code in a "subtitle" fashion.

Preview Your Work in a Browser

While working on your web page, you may want to see how it will look when it's posted or in a browser. There are two ways to achieve this goal.

  1. From the main toolbar select File --> Preview in Browser. You may then select the default (Internet Explorer) or choose a new one (e.g., Mozilla, Netscape, Opera, Safari).
  2. When you feel more comfortable with Dreamweaver, you can use the hotkey, F12, to preview your work.

Saving and Publishing Your Page

When you are ready to publish your work, the first step is saving it to your local folder.   Next, click on the "Expand / Collapse" Button at the right of the Local View window to see a split view of your local files and your remote files - this will show you both what you have saved locally, on your computer, and what's on your iSchool server space inside your public_html folder.

Connect to your iSchool space by clicking on the "Connect to remote server" as illustrated below:

Finally, highlight the file or files you wish to upload and click on the "put" or upwards arrow at the top.   If your files transfer successfully to your iSchool server space, they will appear in the remote site area on the left side of the window:

You can now view your page on-line by typing http://www.ischool.utexas.edu/~yourlogin/filename.html.


next section >

Watch the video
screenshot
choose format/speed:
real media dial-up | broadband
windows media dial-up | broadband
dial-up | broadband
download

Entire Tutorial
dial-up | broadband
dial-up | broadband
dial-up | broadband
download

html transcript

© 2005 Sara Fuchs, Libby Peterek, & Holly Robertson | iSchool | UT Austin | webmaster