Get started in Dreamweaver

Overview

This tutorial covers the basics of editing your web content using Adobe Dreamweaver. It assumes your computer is located on the University of Idaho campus. See the Off-Campus FTP Instructions for other locations.

Adobe Dreamweaver software aids in the creation and maintenance of Web sites stored on the UIdaho Academic Web space (http://www.webpages.uidaho.edu/sitename). This product is offered for both the PC and Macintosh platforms.

Note that password protection for Web content is not offered as a service through the UIdaho Academic Web space.

Need a NEW Web space? Contact the ITS Help Desk

Step 1) Locate Your UI Web Site

If the URL (or location of your Web site) follows the general format of http://www.webpages.uidaho.edu/sitename then it is located on the UIdaho Academic Web space. This space should already be mapped for you if you are a campus faculty or staff. Locate your UI Web site:

  • Go to My Computer
  • Go to your S: drive shared space on files.uidaho.edu
  • Go to webpages folder
  • Go to your sitename folder

ATTENTION: Take note of this location for Step 3 below. If you don’t see a webpages folder listed under your S:drive or elsewhere on your computer, please read the help on connecting to your Academic Web site [Windows or Mac].

Need Off-Campus help instead?
See the Off-Campus FTP Instructions to access your web from an FTP client.

Step 2) Purchase Adobe Dreamweaver

Step 3) Connect Dreamweaver to the Web Site

  • Open Dreamweaver
  • Choose Site > New Site…

  • Under Site tab
    • Enter your website’s sitename
    • Set Local Site Folder to S:\webpages\sitename
      Exact location of this folder was identified above in Step 2

Step 4) Basic Editing with Dreamweaver

  • Open Dreamweaver
  • Use the Your Site pulldown under the Files palette to select and load your site
  • Your site’s files will be listed on the right side of the screen
  • Edit a Web page by double clicking on it from this list

  • Edit the page content (using the formatting tools at the bottom of the screen, as needed)
  • Select File > Save to save the changes
  • Select File > Close to remove a file from the editing window

Step 5) Edit Font Styles in Dreamweaver

Editing fonts in Dreamweaver beyond simple ‘Bold’ and ‘Italic’ involves creating a named style specifying a font’s specific color, size, and typeface. These styles can then be applied to text throughout your Web site. A style’s color, size, and typeface specifications may be modified by you, at which time all text attached to that style will automaticially take on the modified look.

Apply a Style

  • Click on HTML icon in the lower left hand corner to switch to the HTML properties view
  • Select your desired text in the edit window to highlight it
  • Modify the lookof the highlighted text by doing one of the following:
    • Clicking on the Bold (B) or Italic (I) icons
    • Clicking on the ordered or unordered list icons
    • Adding or removing a Blackquote (indent) (by clicking on the appropriate icon)
    • Identifying your text as a heading by choosing a Format option
    • Selecting one of the styles from the Class pulldown list
    • Create a new style by following the instructions below

Create a New Style

Create a new style when you need to specify a unquie color, size, and typeface not already available from the Class pulldown list.

  • Select your desired text in the edit window to highlight it
  • Click on the CSS properties icon in the lower left hand corner to define a new style
  • Make a change to one of the options in the Formatting Tools area

  • Dreamweaver will immediately ask you to create a New CSS Rule (i.e. style, selector)
  • Name the selector
  • Select your style sheet from the pull down list or create one by selecting New Style Sheet File option

  • If new, give it a name of styles.css and press Save

Edit a Style

  • The Edit Rule button allows you to add or remove features from the styles you create. This button becomes available when you click on text or images that have a style attached to it.

  • Make the desired changes to the style
  • Click OK to apply the changes

Step 6 ) Support & Resources