Off Campus Editing in Dreamweaver

Overview

This post covers the basics of editing your web content with Adobe Dreamweaver. It also covers the settings required to transfer to your website to and from the University of Idaho Academic Web server.

Step 1) Open Adobe Dreamweaver

ATTENTION: You must contact the ITS Help Desk to be given FTP access to UI servers.

Need a NEW web space? Contact the ITS Help Desk

STEP 2) Connect Dreamweaver to your Web Site

  • Open Dreamweaver
  • Choose Site, then New Site…

  • Under Site, update the Site Name
  • Browse to locate the place on your computer where you want to store your Web site
    (For example: C:\\My Documents\My Web Site)

  • Go to the Servers on the left
  • Press the plus (+) button to add a server

  • Set Server Name to UI Academic Webs
  • Set Connect using to SFTP
  • Set SFTP Address to unix.uidaho.edu
  • Enter your myUIdaho account username and password (account help)
  • Set Root directory to /shared/webpages/WEBNAME
  • Set the Web URL to http://webpages.uidaho.edu/WEBNAME
    ATTENTION: You must contact the ITS Help Desk to be given FTP access to UI servers.

Additional Optional setting:

  • Under Advanced, check the box Automatically upload files to server on Save. This means you won’t have to “put” (or publish) your changes to the server after each file is saved. They will automatically be uploaded to the server.
  • Press Save

  • Press Done on the Site Manager

STEP 3) Download your Web site

  • Switch your site to the Remote server view
  • Click on the top level of your site
  • Press the down arrow labeled Get Files, which will proceed to download your entire website to your computer

Step 4) Basic Editing with Dreamweaver

  • Open Dreamweaver
  • Use the Your Site pulldown to select and load your site, if needed
  • 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) Publish your Web site

If you did not check the box to Automatically upload files to server on save, you’ll need to “Put” or publish your files back to the server manually.

  • Select the files that you’ve edited and saved from the Local Files list on the right
  • Press the up or Put arrow to upload the files to the Web server
  • Refresh your Web browser at your NEW web location to see the changes:http://www.webpages.uidaho.edu/***Your Web Site***

Step 7) Support & Resources