Dreamweaver MX, Part I (Introduction)

Center for Instructional Technology

 

After completing this tutorial, you will understand how to:

§         Configure and create web documents

§         Format documents

§         Incorporate files from other sources

§         Create and edit links to other web pages

What is Dreamweaver MX?


Dreamweaver MX is a professional HTML editor, created and sold by Macromedia.

Advantages

§         Has more features

§         Produces cleaner code

§         Does not require knowledge of  HTML

§         Can create layers

§         Usable cross PC and Mac platforms

Disadvantages

  • Requires FTP
  • Some actions require more knowledge and understanding of web technology than other programs



Structural Concepts


Dreamweaver MX boasts of new options that make your site fully customizable.

q       Property Inspector changes properties of selected objects (e.g., revise text formatting)

q       Integrated workspace layout allows adjusting and moving of panels.

q       Customizable insert bar provides easy access to objects and behavior options.
 
Property Inspector



 

Insert Bar
Workspace layout

 

 

 

§         Site window and document window.

Similar in concept to FrontPage explorer and editor, but can see both windows simultaneously. See images below.

 

Site panel

 

The site window allows you to see the layout of the site. It also shows external hyperlinks.

 

(This particular view allows you to see the folders and the site simultaneously. You can also choose to see only the site or folder view.)

 

Document window

 

The document window displays your actual pages.

§         Flexibility in Preferences.

Go to Edit—Preferences. View the different categories and available options.

 

 

 

 

Create a Dreamweaver Site

 

1.      Create a new folder on the desktop.

 

2.      Open Dreamweaver MX.

 

3.      In the document window, select Site—New Site. The Site Definition dialog box will appear.

 

4.      Click the Advanced tab.



 

5.      Type a name for your site in Site Name. (You can name it anything.)

6.      Enter the filename path to the folder on the desktop.
(W:\user1\)

7.      Choose refresh files or not (refreshing will slow down the process, but ensure that you always have the most recent list of files).

8.      In the HTTP Address box, type the anticipated web address of your site. (See sample above.)

Choose whether to use enable cache. (Using cache will speed up the process of reviewing web pages.)

 

 

 

Note:  Other information will be added when you’re ready to publish your web.

 

 

 

Create a Document within your new web site

 

There are 4 ways you can create a new document:

  1. Start from “scratch”
  2. Copy and paste content from another document
  3. Open an existing html page
  4. Use a template (not covered in this class)

 

 

Method I:  From “Scratch”

 

1.      In the document window, click File—New.

2.      Choose Basic Page—HTML. Click Create.

3.      Enter text.






 


4.      Experiment and select text and different formats using the Property Inspector.

a.       Format (pre-established styles)

b.      Font (sets to accommodate various font packages on different computers

c.       Size (relative to the default font size which is “3”)

d.      Color (only the 212 web-safe colors)

Email
 

Insert Image
 

Insert flash file
 

Horizontal rule
 




5.      On the Common panel (on the Insertion panel), insert a horizontal rule. You can modify properties of the horizontal rule in the Property Inspector.

6.      Type text for an external hyperlink (e.g., James Madison University). Select the text. In the link window of the Property Inspector, type the URL for your link.

7.      Select the Email icon. The Insert Email Link dialog box will appear.
 

8.      Input information and click OK. (Modify email text in the Property Inspector).


 

Insert an image

9.      Click and drag the Image icon from the Objects panel into your document. The Select Image Source dialog box will open. Select an image file from the Dreamweaver_MX folder on your desktop.

Dreamweaver will ask you if you want to copy the image file into your Dreamweaver site. Click OK.

 

Adjust various properties in the Property Inspector. Resize the images by dragging the resize handles.

 

Insert a Flash File

10.  Create a new document.

From the Common tab of the Selection panel, select the Flash icon. A dialog box will appear.

Select Cow.swf from the Dreamweaver Workshop Files folder on the desktop.

Change settings in the Property Inspector as desired.

 



11.  Save the file as flash.htm and preview it in a browser.

 

 

Method II:  Copy and paste from another document

 

  1. Create a new page. Go to File-New.

 

  1. Save it and give it a page title. Click File—Save As.

 

  1. Open the file “Word Doc.doc” from the Dreamweaver folder on your desktop and copy the desired content.

    (Highlight text by left-clicking and dragging with your mouse.)

    From the menu bar, select Edit--Copy.

 

  1. Open your Dreamweaver document and paste the contents.

 

  1. Save changes. Go to File—Save. Keep the file open.

 

 

Method III:  Open an existing HTML document

 

  1. In the document window, select File—Open. Open “HTML Doc.htm” in the Dreamweaver folder on the desktop.

 

  1. Select the html shortcut in the lower right corner of the document window (two angle brackets). Look at the code.

 

  1. View the code again.

 

  1. Save the document into your web folder.






 

 

 

                                                                                      

Create a hyperlink to another document

 

There are three ways you can create a hyperlink to another document.

 

§         Type in the file name.

  1. Type “Home Page” at the top of the page you just saved into your web (HTML Doc.doc).
  2. Select the text.
  3. Type “index.htm” in the URL box in the Property Inspector.
  4. Undo this action.

 

§         Select the file from a folder.

  1. Open a new document. File—New.  Type “Home Page” at the top of the page.

  2. Select the text “Home Page.” Click on the folder icon next to the URL box.

  3. Select index.htm and select Open.

  4. Undo action #2.

 

§         Use the Point-to-File icon.

  1. Select the text “Home Page” again.
  2. Click on the Site icon on your Workspace palette. This will open the site window.
  3. Click on the Point-to-File icon next to the URL window in the Property Inspector.
  4. Drag arrow to index.htm in the Site window Local Folder listing. Release your mouse button, the URL “index.htm” will appear in the URL window.

 



  1. Open index.htm and insert a link to your other file.

 

 

 

View the site navigation

 

1.                  From the menu bar, select Site--Site Map button.

 

 

Publish your site

 

1.      On the Site Layer, click Edit—Locate in Remote Site.

2.      A dialog box will appear. Click OK.

3.      A Site definition for “X Site…” will appear. Fill-in the information as directed by your instructor.

 

 

 

Your host directory will be ____________________________________
Your password is ____________________________________________