GA Tech logoGreenwich Academy Technology
Techno Tips
Getting Started With Dreamweaver MX

1. Before you begin:
Plan your web page. Have an idea of what you want your page to look like. Sketch it out. Navigation should be visible and easy to navigate.
2. Consult the GA Guidelines for Web pages
  • Make sure Greenwich Academy appears somewhere on the page
  • Use a common element on every page as an identifier (tree or other graphic)\
  • Adhere to GA Copyright Policies (posted on GA Website)
  • Use only student’s first name or initials
  • Do not use student names with pictures
  • File and Folder Names
    • Short, descriptive file names
    • Lowercase only - ex. mshealth.htm
    • No symbols (except _ and .) - ex. lesson2_9_00.doc
    • No spaces in file names
    • Use the proper file name extensions -
      .htm or .html for web pages
      .doc for MS Word documents
      .xls for Excel documents
      .ppt for PowerPoint projects
      .fp3 for Filemaker
 
3. Create a working folder for your web page
Create a folder for your web page. Use lower case, no spaces and no symbols in the file and folder names.
4. Create an "images" folder:
Create a folder called images within your web page folder. Put any picture files you want to use in this folder. Images should be in .jpg or .gif format and sized to fit on the web pages.  File size should be more than 50k.
5.   Create a new page:
Open Dreamweaver

Save the page in your web page folder. Use lower case, no spaces and no symbols in the file name.  

DreamWeaver Environment
a) Document Window
b) Panels (affect elements on page) & Inspectors (change according to selection)
c) To hide: Window/Hide Panels

Setting up a Site
a) Local site resides on your computer
b) Remote site resides on Web server
c) Must set up a local site to use Library, Assets panel, HTML Styles, Link checker, automatic link updates, & templates.

Exercise 1:
Create a Local Site
1. In Site/New Site
2. Name your site (DWClass) Next
3. Site Definition: No, I do not want to use a server technology Next
4. Edit local copies on my machine, then upload to server when ready
5. Where on your computer…. Desktop or My Documents – Browse if necessary Next
6. How do you connect? None Next Done

6.  Working with the Dreamweaver desk top:
dreamweaver desk topThe Document Window - Top
a) Title Bar
b) Menu Bar
c) Document Toolbar - Code View; Code and Design; Design – Select Design View
d) Standard Toolbar
e) View/Toolbars to show or hide

The Document Window – Middle
a. Body of the HTML document
b. WYSIWYG

The Document Window – Bottom
a) Tag selector – displays HTML tags surrounding selection
b) Window Size indicator

Resize Document Window by dragging lower right corner.
7.  Create a basic web page:
Exercise 2: Create a Basic Web Page

1. Type: My Home Page Enter
2. Type: Welcome to my home page, etc (type several lines of text)
3. Save as Index
4. Note that Save As window opens to your local site (DWClass)
5. Go to Site Window (on right of page)
6. Click on View / Site Map
7. Show Properties Inspector – Window/Properties
8. In WYSIWG window, select My Home Page
9. Drag Properties Inspector window underneath
10. Click on Format arrow
11. Select Heading 1 Note the result
12. Select My Home Page again
13. Click font (A icon)
14. Select Arial, Helvetica, …..
15. Select first line of body text (hit Enter after 1st sentence to create paragraph)
16. Note format (“paragraph”) OK
17. Select text, and change font to Arial
18. Click Size arrow
19. Select 4 (3 is default size)
20. On Document toolbar, select Code & Document view
21. Highlight My Home Page in the body and note the action in the Code section.
22. In Code View, scroll up to <Title> tag – note “Untitled Document”
23. Go to Toolbar
24. In Title field, type: Home Page Enter
25. Note code change
26. Select next line of text
27. In Property Inspector, click in color box to color text
28. Note that you can Bold, Italicize, and Align text . Experiment !
29. Save
30. To change background color: Modify / Page Properties
31. To View in Browser: F12 key (or File / Preview in Browser)
Note: you can view in different Browsers (Internet Explorer, Netscape, etc) if they are installed on your computer.
8.  Modify your page and add text:
Go to Modify/Page Properties

You can give it a name, put in background color, background image, text colors, set margins.

For colors you can choose from the ones shown when you pull down the menu, or click on the circle of color at the right side (to the right of the white box with the red line through it) and you will have more choices.

You can choose a text color for links, visited links, etc.

To have a background texture, use and image and it will tile to become a texture.
9.   Format the page using a table
To insert and format a table:

Go to Insert/Table OR click on the table icon.

Choose the number of rows and columns, cell padding, cell spacing, border.
Choose width of table. Either pixels or percentage. 100% will fill the width of the screen.

To change these settings later:
Click anywhere in the table. At the bottom of the window, click on <table> to select the whole table. In the table properties window at the bottom you will see the places to change settings. You can also add color here. (If table properties are not’t open, go to Window/Properties and add check. It will appear.)

To select a row: Click anywhere in the row. At the bottom of the window, click on <tr> to select the whole row. In the table properties window you can now make the row a separate color. To select a cell, click in that cell and then click on <td>.

You can also change the color of the table border in the properties window.

To change the size of a table or any cell in a table. Select the whole table. Then drag the handles to make the whole table larger. Drag any lines in the table to make rows, columns or cells larger.
10.   Using Images
To insert and work with images.  Make sure your image is in the folder file with your web page.

Drag the image file into the web page.

To make an image into a link:

Select the image. In the properties window below, in the line called “link” either type in a URL (include the http://) or click on the folder to browse for a file. Change the border to 2 in order to surround the image with a border so that it is clear that it is a link.
11.  Using tables:

Using Tables
a) Tables permit greater control over placement of text and graphics on the page.
b) Insert / Table
c) Borders, Cell Padding, etc.

Exercise 4.  Creating a page layout using tables.

Return to Tech Support  |  PlaidNet  |  Greenwich Academy Web Site