Macromedia Dreamweaver MX

Welcome to Dreamweaver. Dreamweaver is a powerful web design program recommended for people who already have had a taste of web design using either HTML or a simpler web design program. The best way to become comfortable with Dreamweaver is to explore the tutorials. Launch Dreamweaver and when the tool bar appears at the top of screen, choose Help > Getting Started and Tutorials.

It is a good idea to become familiar with how successful sites are set up and what about their structure makes them easy to navigate. Begin thinking how you might apply these concepts to your own site. Sketch a plan of your site, showing which pages are connected to which, and whether or not you'll have a consistent design throughout your whole site. It's easier to change things in the beginning stages of web design. The easiest format for this is a "family tree" approach containing a "root" (index) page with lots of branches (links) to other pages. It is also important to have all your pictures and text ready to go before you begin building your website, since doing so makes it easier to choose a format and flow for your site.

 

Defining a Site

  • Click on the Document window to activate it.
  • Along the top tool bar, choose Site>New Site...
  • In the Site Definition window that appears, name your site in the white text box that is selected. Click "Next".
  • Make sure, "No, I do not want to use a server technology," is selected and click "Next".
  • Make sure, "Edit local copies on my machine, then upload to sever when ready," is selected and then choose the directory to which you would like to save all you files; i.e., C:\windows\desktop\website.
  • Under, "How do you connect to your server?" select FTP.
  • Next, for the host name, enter webdrive.stolaf.edu
  • Enter the location to which you want to upload your files. See Finding File Location.
  • Enter your St. Olaf username and password and click "Next".
  • Click "Next" again making sure "No, do not enable check in and check out" is selected.
  • Review your settings and click "Done".
  • To the right of the screen a new site navigation window will appear. We will come back to this later.

 

Title and Save Your Page

  • When Dreamweaver opens you will notice a blank white page, a menu bar at the top of the screen, tool bars below and a few windows to the right of the screen.
  • To give your page a title, enter the name that you want to appear at the top of the browser window in the "Document Title" section of Dreamweaver’s main tool bar.
  • Save your homepage as index.html by selecting "Save" from the File menu and then naming the file "index.html". It is very important to name your first page "index.html" otherwise it will be read just as another page and no sites will be uploaded.
  • Next, decide the manner in which you want to work with your web page. There are three main options:
    • To work only with the HTML source code.
    • To work only with the tools that Dreamweaver makes available.
    • To use a combination of the above methods.
  • To switch between each view click on the button that correlates to the appropriate view. The button represented on the far left of the image below is the code view. The button on the far right is the design view and the button in the middle is both the code and the design views.



  • Since the scope of this tutorial does not encompass HTML, we will deal exclusively with the design view.

 

Text and Bulleted Lists

  • Entering text in Dreamweaver is very similar to entering text into a word processor, except that in Dreamweaver you have less control over formatting and layout.
  • To enter text, start typing and text will appear where the cursor is blinking.
  • Use the Property Inspector to make changes to the text, such as font, color, size, etc.
  • Click in text or select an object on the page. The Property Inspector (in some versions, labeled "Properties") for the text or object appears below the Document window. If the Property inspector is not visible, select Window > Properties.
  • Make changes to the attributes in the Property inspector, shown below.



  • To create a list, click on the numbered or bulleted list button in the Properties window:



  • Type text.
  • When done, click the list button again to release the list.

 

Hyperlinks

  • To create a hyperlink, first highlight text you want to transform into a link.
  • In the Property Inspector, refer to the Link dialogue box.
  • In the link field type the full URL of the web site to which you want to link (ex: http://www.stolaf.edu) or type just the name of the file you want to link to (ex: index.html):


  • If you want to create an email link in the URL box, type "mailto:emailaddress", i.e. "mailto:pittb@stolaf.edu".
  • You can also create links by using the Hyperlink icon in the toolbar:



  • The "envelope" icon will create an email link.
  • The "anchor" icon will create a page anchor (see below).

 

Images

  • To insert an image, click on the image button (see image below). The image dialog box will appear. Or go to the Insert menu and choose Image.



  • Then just navigate to the image you want to insert, select it and click the "OK" button. The image should now appear in your document.
  • You may now move this image around by clicking on it once to select it and then by clicking and dragging it to where you want it to appear.
  • To make this image a link, first click on the image to make sure it is selected.
  • Next, in the Properties Inspector window, type the URL or the name of the file you would like to link to in the field titled "link".

 

Horizontal Rules

Horizontal rules are, quite simply, horizontal lines on a page. They are often used to create a visual break between different sections of a web page.

  • To insert a horizontal rule, place the cursor where you would like the break to occur and click the horizontal rule button, or go to the Insert menu and select "Horizontal Rule". A new horizontal rule will appear where the cursor was blinking.



  • You can change characteristics of the horizontal rule by entering different values into the Property Inspector at the bottom of the screen.

 

Anchors

Anchors are markers in your document that you can jump to quickly, using a hyperlink. In situations where large amounts of text and excessive vertical scrolling are necessary, consider using anchors to make navigation easier.

  • To insert an anchor simply push the anchor button (see image below). The anchor dialog box will appear.



  • In the anchor dialog box input a name for your anchor. Try to name it something simple but easy to remember.
  • After you name it and click the OK button an anchor symbol will appear on your page.
  • You can move this symbol anywhere on the page. Wherever you put the symbol is the point to which you will jump when this anchor is linked to.
  • To link to an anchor click the link button like you would normally, but instead of putting the name of a web page or URL in the link section, select the name of your anchor from the drop down menu.


 

Tables

Tables can be for a variety of purposes, such as displaying spreadsheet data, organizing an online photo album, or adding multiple columns of text to a page.

  • To insert a table, click Insert on the tool bar, and choose Table.
  • A table dialog box will appear. Enter the number of rows and columns you would like in your table.



  • The width field determines what percentage of the browser window your table should encompass or how many pixels wide the table should be.
  • If you would like your table to have a border around all the cells enter a value in the border field. It is usually best not to have a border wider than five pixels. The "Cell Padding" field determines the amount of space around the content in each cell. It is often times a good idea to set the Cell Padding to some value if you are entering text into you table. If you are using the table for formatting purposes alone, you may not want any cell padding.
  • The Cell Spacing attribute is similar to the Cell Padding attribute except that the space is added around the outside of the cells instead of inside. Often times, the two values serve the same purpose and can be used interchangeably. Once you input the values for your table click the "OK" button and your table will appear on the workspace.
  • To enter data into your table, click on the cell in which you want the data to appear and enter the information, just as you would in other applications.
  • You can apply formatting options to text in tables just as you would with any other text in Dreamweaver.

Modifying Tables

  • You can resize your table by dragging its borders in the direction you want, but it is not always best to resize your table in this manner since it forces the table to have absolute dimensions in terms of pixels.
  • To delete or insert a row or a column, make sure the cursor is blinking in a cell contained within the row or column you want to delete.
  • Select Modify > Table. Under the "Table" submenu you will see a variety of options.
  • Choose the appropriate option and your table will reflect your decision. Feel free to experiment will all the choices and see how they affect your table.

 

Rollover Images

  • Inserting rollover images is relatively simple. First, create both the initial image and the image that you want to appear to replace it in an image-editing program like Photoshop.
  • It is important that both images are the exact same dimension. From the "Insert" menu select "Interactive Images" > "Rollover Image".
  • The Rollover Image Dialog Box will appear.



  • In it type the name you want your image called in the "Image Name:" field.
  • Click the "Browse" button next to the "Original Image" field and find the image that you would like to show up when the cursor is not over the image. Press "OK".
  • Do the same thing for the image that you would like to replace the original image.
  • Make sure that "Preload Rollover Image" is checked.
  • Enter any alternate text that you would like to appear if the person viewing your page cannot view pictures.
  • If you would like the picture to be a link enter a URL or a name of an HTML file in the "When Clicked, Go To URL" field.
  • Press "OK".

Uploading Your Site

  • Once your site has been created, you will want to upload your files to the web server. Make sure your site has been defined as described in the Defining a Site section of this page.
  • You will first need to connect to the web server. Click on the 'Connect to remote host' button in the 'Site' window:



  • Once connected, this button should show a green circle. You will also notice that the second menu in the 'Site' window says 'Remote View'—this is showing the files that are on the server.



    You will need to switch back to 'Local View' if you want to make any changes to your site.
  • Now click on 'Site' -> 'Synchronize' to upload your files.
  • You will see a dialogue box. In the first menu, make sure 'Entire Site' is selected, and in the second menu, make sure 'Put newer files to remote' is selected.



  • Click 'Preview'.
  • Review the information and press 'OK' to continue with the upload.
  • The files should now be uploaded. You do not need to save a log file, unless errors were generated during the upload process.
  • Be sure to open a web browser and review your web site to make certain that all the files were uploaded properly.

 

Back to Top | Contents | IIT Documentation