IRC

Instructional Resource Center

 

 

Beginning Dreamweaver MX 2004

  1. Prerequisites
  2. Objectives
  3. Getting setup for class
  4. Opening dreamweaver and looking around
  5. Define a local Web site
  6. Web site story board
  7. Making your home page/first level page
  8. Text formatting
  9. Second level page
  10. Linking pages
  11. More linking
  12. Inserting images
  13. Lists
  14. FTP/uploading files to the Mason Web server

 

1. Prerequisites

In order to fully participate in this workshop, you should have a basic knowledge of Windows XP and have taken the "Tools for Web Page Creation/HTML workshop".

 

2. Objectives

At the end of this workshop, you will be able to:

    • Create a local folder with your Web site name on it (e.g. "yourname_MySite") in c:\temp and define a local site. Organize your Dreamweaver MX 2004 Web site files in this local site.
    • Create and edit an HTML page using Dreamweaver MX 2004
    • Use the properties boxes to manipulate page objects
    • Link to Web pages within "yourname_MySite" and to external Web sites
    • Create and edit tables
    • Subsequent to this workshop - you will be able to follow instructions for uploading your Web site files from a local computer to the Mason Web server using "Site>Put" in Dreamweaver MX 2004.

 

3. Getting Setup For Class

Create a folder (also called directory) in c:\temp and name the directory "yourname_MySite".
Click on each link below and select an image. When the image appears, execute the File/Save As process and save the image to "yourname_MySite" in the c:\temp directory.

Select an image from the image gallery at http://viewfinder.gmu.edu

GMU Logo at http://logo.gmu.edu/webguide

Sample Syllabus Page

In Internet Explorer In Netscape Navigator
Right-click on the image and (from the drop-down menu), select "Save Picture As"... Right-click on the image and (from the drop-down menu), select "Save Image As...

4. Opening Dreamweaver and Looking Around

  • View the hyperlink: Opening Dreamweaver MX 2004 and menus
    Four main components
    • Menus and toolbars
    • Document window
    • Site Files
    • Property inspector (similar to the Format toolbar in MS Word)

Start the Program

Start>Programs>Macromedia>Dreamweaver MX 2004

5. Define a local site

Note: Defining a site is a key step to ensure links work properly when you upload your files to the Mason Web server.

  1. Select Site>New Site

    site definition new site

  2. Click the "Basic" tab and follow the Site Definition wizard for "yourname_MySite". Type the name of your site and click Next>.

    basic site

  3. Select "No. I do not want to use server technology".

  4. Select "Edit local copies on my machine..." then click the yellow folder, browse to c:\temp\yourname_MySite and click Select.


    5. site definition c temp

  5. Click Next>
  6. For "How do you connect to your remote server" select "None" and click Next>.
  7. Click Done.

6. Story board for "yourname_MySite"

First level page. Create the Homepage as an exercise.

 

 

Second level page. Create the Resource Page as an exercise.
storyboard for a basic web site
The Syllabus Page is created for you

 

7. Creating your Home Page -Exercise

Step 1 - Create a Page: File>New...>Click new page: create

  1. Type your name on the page, then press enter

  2. Insert a horizontal line (Insert>Horizontal Rule or click horizontal rule), press the right arrow key (to avoid deleting the horizontal line) and then press enter (the cursor will move down 2 lines).

  3. Type the following page navigation:

    Home | Resource Page | Sample Syllabus

    (to place the "|" symbol - hold down the Shift key and press the pipe symbol (on the keyboard)\ key (the key below the "Backspace" key). Hold down the Shift key and press enter (the cursor will move down one line instead of the usual 2 lines)

  4. Type your school location information

  5. Right-Click the over the blank area of the page and select properties

    1. Give your page a title (e.g. Your Name Home Page)

      graphic of first level index page
  6. Save the file as index.html

     

  7. Right-click on index.html (in the files window) and select "Set as Home Page"



    set the index.html page as home page

Step 2 - Preview your Home Page

  1. Press F12

  2. Netscape Navigator or Internet Explorer Launches

  3. See your home page

Step 3 - View the Code

  1. Return to Dreamweaver

  2. Click on the HTML (Code View) icon show code view

  3. Observe that a new window appears to show you the code.

  4. Return to design view by clicking the design view icon (show design view).

8. Text Formatting - Exercise

Step 1 - Web Friendly Fonts

  1. If necessary, reopen index.html

  2. press Ctrl-A on your keyboard to select all

  3. Select a font set from the properties box

  4. Save the index.html file

Step 2 - Set a Font Size

  1. Highlight the title on your page

  2. Select a font size of 5 from the properties box to make it larger

  3. Highlight the text that looks like a menu

  4. Select a font size of 2 from the properties box to make it smaller

  5. Save the index.html file

Step 3 - Change Color

  1. Highlight the title on your page

  2. Click on the color icon (next to the size drop down menu) in the properties box and select a color

  3. Save the index.html file

Step 4 - Menu Emphasis

  1. Highlight "Home"

  2. Click on the bold button in the properties box

  3. Save the index.html file

9. Second Level Page - Exercise

Step 1 - Create a Second Level Page

  1. Click File/New to create a new page and select Basic Page under the General category. Click Create.



  2. Right-Click the over the blank area of the page and select properties

  3. Give your page a title

  4. Save the file as resource (Dreamweaver will add the .htm)

Step 2 - Create a table for layout purposes

table with formatting of text

  1. Click Insert/Table

  2. Select 3 rows, 2 columns, and 0 for borders

  3. Click OK

  4. Save your changes

Step 3 - Fill the table and merge some table cells

  1. Type "Resource Page" in the top cell on the left

  2. Type "Home" in the top cell on the right

  3. Connect the two columns in the second row

  4. Click inside the second row and insert a horizontal rule

  5. Set the background color of the second row to the color of your choice

  6. Place cursor into the third row

  7. Connect the two columns in the third row

  8. Type the following: "Home | Sample Syllabus"

  9. press the tab key to add a fourth row

  10. Save your changes

Step 4 - Align the content in the cell

  1. Click once in the cell with "home"
  2. Click the <td> in the bottom tool bar of Dreamweaver
  3. Select Center for the Horz alignment
  4. Select Top for the Vert alignment
  5. Save your changes

Step 5 - Add Formatting

  1. Apply a web friendly font
  2. Set the font size for the menu and title
  3. Change the color of the title
  4. Save your changes

 

10. Linking Pages - Exercise

Step 1 - Make a Link to another page in your site

  1. Return to index.html.

  2. Highlight (Select) "Resource Page" in the menu area

  3. Hold down the "Shift" key, click and hold on the selected text (Resource Page) and drag to the resource.html file in the Site window. Release the mouse key when the arrow and "point to file" symbol (point to file symbol) is over the file you want to link to (resource.html).

    link to page

  4. Repeat this process to link the sample syllabus

  5. Save the file as index.html

Step 2 - Make a Link to another page in your site

  1. Return to resource.htm

  2. Highlight "Home" in the menu area

  3. Hold down the "Shift" key, click and hold on the selected text (Home) and drag to the index.html file in the Site window. Release the mouse key when the arrow and "point to file" symbol (point to file symbol) is over the file you want to link to (index.html).

  4. Repeat this process to link the sample syllabus

  5. Save the file

 

11. More Linking - Exercise

Step 1 - Links within a Page

  1. Open samplesyllabus.htm

  2. Set the Anchors by putting cursor before the bold text headers on the page

  3. Click on Insert/Named Anchor

  4. Give it a simple name you can remember (one word)

  5. Double click on the word in the menu that will receive the link

  6. Using the link box in the properties box, type #anchorname

  7. Repeat this process one or two more times to practice

  8. Save the samplesyllabus.htm file

Step 2 - Make an email link

  1. Scroll to the bottom and highlight the email address

  2. In the insert menu click the e-mail button, to create a hyperlink

  3. Save the samplesyllabus.htm file

Step 3 - Make web link

  1. Highlight "George Mason University"

  2. Using the link box in the properties box, type http://www.gmu.edu

  3. Practice linking to other web sites by linking the URLs under the resources section of the syllabus

  4. Save the samplesyllabus.htm file

Step 4 - Link to the homepage

  1. Highlight "Return to Homepage"

  2. Click on the yellow folder just to the left of the word "target" in the properties box

  3. Locate the index.html file and double click on it

  4. Save the samplesyllabus.htm file

Step 5 - Add Formatting

  1. Apply a web friendly font

  2. Set the font size for the menu and title

  3. Change the color of the title

Step 6 - Change the Title of the page

  1. Right click on the page

  2. Enter a title for the page

  3. Save your changes

 

12. Inserting Images - Exercise

Step 1 - Insert an Image

  1. If necessary, reopen resource.htm

  2. Place the curser at the end of the home link

  3. Press Shift-Enter to insert a line break

  4. Click Insert/Image from the menu

  5. Double click the GMU logo

  6. Save the resource.htm file

Step 2 - Make the image a link

  1. Click once on the image

  2. In the properties box, enter http://www.gmu.edu in the link space

  3. In the properties box, enter "GMU Homepage" in the alt space

  4. Save your changes

 

13. Lists - Exercise

Step 1 - Insert a bulleted list

  1. If necessary, reopen index.html

  2. Type a list of items

  3. Highlight the list and click the bullet icon (button for bulleted list) in the property box

  4. Click in one of the list items

  5. Click on the "List Item" button

  6. Save your changes

Step 2 - Insert a numbered list

  1. If necessary, reopen resource.htm
  2. Click in one of the table cells
  3. Type a list of items
  4. Highlight the list and click the numbered list icon (button for ordered list) in the property box
  5. Notice that the "List Item" button is not available
  6. Right click in the table area over the list and select list/properties
  7. Change a style
  8. Save your changes

14. FTP/upload files to the Mason Web server

The instructor will demonstrate uploading your local files to your Mason Web site.

Materials created by the Instructional Resource Center, July 2004
All rights reserved.