Web Resourcesfor Evergreen Web Developers

Decorative graphic

Dreamweaver

Having trouble with Dreamweaver templates? Template Tutorial for Site Managers

Handouts

Using Site Management Features

  • It is very important to make sure that you always "get" an updated version of a site before working on it. Otherwise, you may unknowingly delete work that you or the web team has completed. It is also a good idea to "get" the entire site.
  • Always synchronize with the webdev server to test your modifications before going live to the www server.
  • Whenever you move files around or change their names in the Site Files Window, always click Yes when asked if you want to update links. The only time that you wouldn't want to update your links is if you plan to archive the file and replace it with a file that has the same name.

Organization

  • Maintain a 'flat' folder structure by using folders to organize only when necessary and avoid nesting folders unnecessarily.
  • Keep all main HTML files at the root of your site.
  • All images should be kept inside an 'images' folder.
  • Any associated non-HTML files (Word or PDF documents) should be kept in a 'docs' folder.
  • When a file is no longer used, remove it from your site by saving it to an 'archive' folder on your local site. Right-click on the folder and select Cloaking > Cloak. By cloaking your unused files, they will remain on your computer but be invisible to the server the next time you synchronize.

Frequently Asked Questions

Q: How do I define a new site in Dreamweaver?
A: See this step-by-step tutorial of how to define a site.

Q: How do I fix my page if I accidentally messed it up?
A: Try Edit > Undo Typing (ctrl + Z) to undo your mistake(s).

If you got your page from the server, then messed it up, and haven't published the messed up one, delete the messed up one, "get" the page from the server, and start over.

If you accidentally published a messed up page, your only option is to get a previous version off of your backup disk. If you do not have a backup (shame on you!) you can contact the Web Team to see if we have one somewhere.

Q: After applying the template to a page, why don't the left nav links work?
A: Open your template using DreamWeaver. Links on the left nav of your template need to be root relative. This means that the links need to start at the root. For example (assuming your site folder is at the root level), your link should look something like:
<P><a xhref="/yoursitefolder/filename.htm" class="leftNav">Your File Name</a></P>

Q: Why don't my images display?
A: Make sure your images are in a folder named "images" and that your <img> tag is looking in the right place for them. Your <img> tag should look something like:
<img xsrc="images/yourimagename.jpg">

Make sure that the file extension on your image matches the one in your <img> filename (e.g. filename.jpg or filename.gif)

Q: How do I get content to display on the screen where I want it to?
A: Do not use multiple forced spaces (&nbsp:). Instead, create a table. If you are not familiar with using html, you can open your page using DreamWeaver, select Insert > Table, and specify the number of columns, rows, width, etc... Place your content in the appropriate cell. You can modify the table row and column sizes by dragging the borders (much like a Microsoft Word table). If you do not want the table border to be seen, set the table border attribute to 0: <table ... border="0" ...>

Q: How do I get my student permission to update my website?
A: Send your students name along with the folder that you want them to be able to access to the Web Team

Q: How do I adjust the size of an image?
A: The preferred method is to adjust the size of an image in Photoshop or another image processing application, before importing the image into Dreamweaver. Although it is possible to resize images in Dreamweaver, it is not recommended. If you want help adjusting an image, contact the Web Team for assistance.

Q: How do I find the Web address (URL) for other pages on the Evergreen site that I want to link to?
A: Open the page that you want to link to in a browser. Look at the URL in the address bar of the browser. It should look something like: http://www.evergreen.edu/sitename/filename.htm.
You can make your link using this information, it should look something like:
<a xhref="/sitename/filename.htm">...</a>

DO NOT INCLUDE "http://www.evergreen.edu" in the link.

Q: What is the difference between an "absolute link" and an "relative link"?
A: An absolute link takes you out to the World Wide Web and usually starts with "http://www...". A relative link transfers you to a different page within the site you are in. When you are creating your site, do not make links to other pages on Evergreen's site absolute links. Absolute links my not work if structure changes are made on Evergreen's site.

Q: How do I make an image so that it is also a link?
A: All you have to do is wrap the <img> tag with an <a> tag. A typical image link may look something like:
<a xhref="page2.htm"><img xsrc="images/picture.jpg"></a>
Now clicking on "picture" should take you to "page2".

Q: How do I link to content on the same page?
A: This is a two step process. First you establish a "target", then you make a link to your target.
This page is a good example. There are a list of questions (links) at the top of the page, and each answer is a target.

To create a target, you must use the named anchor tag. A typical named anchor looks something like:
<a name="answer1">...</a>
You can accomplish this with DreamWeaver by selecting:
Insert > Invisible Tags > Named Anchor

Next you make a link to that target. This is very similar to other links, but instead of a URL, you use the # symbol followed by the target name:
<a xhref="#answer1">...</a>
You should choose a name that is short and descriptive.

Q: What are "Special Symbols" and why do I need them?
A: There are a few characters that have special meaning to the browser. < and > are good examples. The browser interprets these characters as the start and end of a tag. In order to get the browser to display these characters literally, you have to use special symbols. The & and the ; are designated to contain Mnemonics that tell the browser what to display. For example to display < literally, you must write the code &lt; (the mnemonic lt stands for less than and is contained between the & and the ;). The Web Team can help you with the code for other special symbols not listed here.
Here are some of the more common Special Symbols:

Appear as
Mnemonic Description
<
&lt; Less Than
>
&gt; Greater Than
"
" Quotation Mark
&
&amp; Ampersand
  &nbsp; Nonbreaking Space