Dreamweaver Site Design and Management Tutorial

Skip to end of metadata
Go to start of metadata

Objectives

  • Understand the "why" and "how" of setting up a site in Dreamweaver
  • Use Dreamweaver SFTP to transfer files to the server
  • Leverage Dreameaver's CSS capabilities for attractive, consistent page formatting
  • Use Dreamweaver templates to consolidate elements that are repeated on many pages

Site Management

Dreamweaver's Site Management tools can be used on either an existing web site or a new site. When not using Dreamweaver, a site developer will create a folder on their local computer, save html files there, and often create an images directory for image files, or even create a new folder for each area of navigation on the site. When uploading the site to the web server, the developer then needs to carefully re-create those folders. Using the Site Management tools, Dreamweaver keeps the file structure on the server in sync with the local machine. Also, if you need to move some pages or entire directories within the site, Dreamweaver will automatically update all the links in the affected pages. Finally, creating a site is essential if you wish to use Dreamweaver's template features, outlined below. In short, it's almost always a good idea to create a Dreamweaver site for any site that contains more than one or two pages.

Create a Site


  The Advanced tab of the New Sites window allows you to fill in information quickly.

  1. Open Dreamweaver. Ignore the "new file" box that pops up in the middle of your screen. Instead, select Site > Manage Sites... from the menu bar.
  2. Click the New... button, then Site from the sub-menu that appears.
  3. In the Site Definition window, at the top, switch from the Basic pane to the Advanced pane (it's not really any more advanced, it just displays more options at one time so you can set up more quickly).
  4. Make sure Local Info is highlighted in the "Category" box on the left. Then use this Site Namebox to give your site a name. This name is only for your reference, so make it whatever you like that will remind you what this site is for.
  5. If you're creating a new site from scratch, the default value for Local Root Folderis probably fine. But if you're creating a site based on files you already have on your computer, you'll need to use the yellow folder icon to find the folder your pages are in, and make that your "local root folder."
  6. Now select Remote Info from the Category box, and fill in the values from Table 1 below.
  7. You can use the Test Connectionbutton to ensure that you've entered all of your remote info properly. Dreamweaver will pop up a box saying that it has successfully connected, or an error message if something went wrong.
  8. Click OK, then click Done in the Manage Sites window.

Table 1

Field Value
Access FTP
FTP Host webpub.brown.edu
Host Directory www
Note: This might be www1, www2, etc. if you are the owner of more than one site on webpub. For most people though, www will be correct.
Login Your login name for webpub, usually the same as your AuthID
Password Your password on webpub, not necessarily the same as your e-mail password.
Note: It's probably safe to check the "save" checkbox, as long as you're not worried about someone malicious sitting down at your computer and changing your site.
(Checkboxes) "Use secure FTP" must be checked. Do not check any other boxes unless you're sure you know what they do.

Dreamweaver SFTP

One great feature of Dreamweaver sites is that you can transfer files to and from the web server with Dreamweaver's built-in SFTP client, eliminating the need to open a secondary file transfer program at the same time.

Note: If you are still using a version of Dreamweaver older than MX 2004, now is a great time to upgrade! Older versions of Dreamweaver do not have SFTP support, which is now required to connect to the Brown web server (because the older FTP standard was not secure, which meant it was easy for malicious individuals to steal passwords and work mischief on webpub). Therefore, if you want to use Dreamweaver to upload your files, you must use Dreamweaver MX 2004 (or later)! It is available as a free download for Brown students at software.brown.edu.

Once your site is set up, you can connect to the server using the Files panel on the right side of your screen. Just click the connect icon, pictured below. If you didn't save your password when you set up the site, you'll be asked for it now.
When you have a live connection, the icon will change to

Now you should be connected to webpub, Brown's web server. In the filespanel on the right side of the screen, you'll see a "remote view" of your site, which means that you're seeing files that are on the server,noton the computer you're currently working on. To see the files that are in your local site folder, pull down the "remote view" pull-down and change it to "local view." Most of the time, you'll want to work in the local view.

To move files from your local computer to the web server (sometimes called "uploading" or "putting" the files) simply highlight the files in your local view and click the up arrow in the filespanel. If you want to upload the whole site, just select the topmost folder in your local view, and click the same upload arrow. If, for some reason, you need to get files from the server, you use the opposite procedure; go to remote view, highlight the files you want to download, then click the down arrow.

Remember to upload any files you've changed every time you're done for the day. Otherwise, they will be changed on your computer, but not on the web server, which is what the rest of the world sees!

Cascading Style-Sheets

Cascading Style-Sheets (CSS) allow you to add definition to HTML tags. For example, by default, an *<h2>*tag will display in the default font and black. CSS can be used to say that every time this tag is used, display it blue and with Arial font.

The 3 Types of CSS

External: An external style sheet is extremely powerful. Style definitions are stored in a separate file from the HTML, which allows any number of HTML pages to use the same style definitions by linking to that file. When the style sheet is updated, the look of each and every linked HTML page is updated instantly!

Embedded: The styles are defined in the web page in the *<HEAD>*section. This type of style can be used to override a style in an external sheet, or simply to define a unique style for one particular page.

Inline: The least powerful, but the most flexible. The style definition goes directly inside the tag being defined. This will override either of the other types of CSS.

Using CSS to Change the Appearance of a Tag

  1. Open the CSS Styles window (Window > CSS Styles)
  2. Click the Create New Style button
  3. For Selector Type choose Tag
  4. Use the Tag: pull-down at the top of the dialog box to select the tag you want to format
  5. For "Define in:" at the bottom of the box, choose New Stylesheet File, unless you already have a stylesheet defined that you'd like to add to, in which case you can select that file. You should only use the "This document only" option if you want to create embedded CSS (see definition above).
  6. Click OK, then set formatting options for this tag as desired. All tags of this type will automatically be formatted with the options you select.
     
     
     
     
     

Defining a CSS Class

CSS classes can be used to format areas that aren't neatly defined by a single kind of tag. The procedure for creating a CSS class is almost exactly the same as creating a tag rule, except that for Selector Type you choose Class. The name of your class needs to follow two simple rules: 1) It must begin with a dot (period) and 2) it may not contain spaces or other punctuation.

To Apply a Class Style to Your Page

In your web page, select some text (or, if appropriate, another element like a table cell or image). In the properties bar, use the style pull-down menu to select the style you'd like to apply.

To Create CSS Link Rollovers

You've probably noticed that on many web pages the links change in one way or another when you move your mouse over them. Perhaps they change color, or an underline appears. It used to be that in order to create this effect you had to use complicated Javascript or Flash components, but nowadays the effect can be achieved with a few simple CSS rules.

To create CSS link rollovers, create a new style as described above, but this time for Selector Type choose Advanced. The selector drop-down will now include several options beginning with "a:". This is because "a" is the HTML tag for a link, and the word after the colon describes the state of the link that your new style will be applied to.

(Technically, a selector after a colon (like :link, :visited, etc.) is called a "pseudo-class," but in this case it's more intuitive to think of it as the state that a link is in.)

Selector Affects Default
a:link Links "at rest" (i.e., links that aren't in any other state) Blue, underlined
a:visited Links to pages that the user has visited Purple, underlined
a:hover Links that are currently being "moused over" (no change)
a:active Links that are currently being clicked by the user Red, underlined

So, for example, if I wanted most of my links not to be underlined until someone moused over them, I could create rules for a:link and a:visited with no underline, then set a rule for a:hover that has an underline.

Two important notes on using these link selectors:

  1. If you're going to use any given selector on this list, you must also declare all the ones above it. In other words, if you want to use a:hover, you must also declare a:link and a:visited.
  2. Whichever ones you decide to use, you mustdeclare them in the order they are presented above (which, helpfully, is the same order that Dreamweaver presents them in the Selector drop-down). In other words, you must first declare a:link, then a:visted, and so on.

To Use the Styles You've Created on Another Page

In the lower right corner of the CSS Styles palette, click the Attach Style Sheet button (see palette illustration above if you have trouble finding the button). You can now click Browse... to find the style sheet file (.css) that you created earlier.

Generally speaking, it doesn't matter too much if you use the Link or Import option to attach your style sheet. The main difference has to do with Netscape 4. NS4 does not understand Import, so if you use Import, none of your styles will be visible to NS4 users. If you use "Link," NS4 willbe able to see you style sheet, but this is not always a good thing as NS4's style sheet support is very buggy, and sometimes the browser will even crash on certain stylesheets. If you care about letting NS4 see your stylesheet, use "Link," but be sure to test your pages in NS4 before you send them out into the world!

Remember, if you change the style definitions on any one page now, the style changes will be reflected on all pages that link to this style sheet! Usually, this is exactly what you want, but it can be confusing if you're not ready for it

 

Labels

student student Delete
staff staff Delete
faculty faculty Delete
how-to how-to Delete
tutorial tutorial Delete
dreamweaver dreamweaver Delete
webpublishing webpublishing Delete
webpage webpage Delete
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.