Maintaining College Websites using Dreamweaver

Quick Reference Guide

Table of Contents

Defining a Site 3

Connecting to the Web Server & Transferring Files 5

Making Changes to Existing Pages 6

Creating New Pages in an Existing Site 7

Inserting and Formatting Text 8

Linking to Pages, Images or Files in Your Site – Relative Links 8

Linking to External Websites – Absolute Links 9

Linking to Documents 9

Email Links 10

‘Last Updated’ Date 10

Inserting & Resizing Images 11

Inserting Tables 12

Defining a Site

The site definition only needs to be done once per computer for each site you work with. Defining the site lets Dreamweaver know where files will be saved while being edited on your computer and also supplies information on how to connect to the web server. (Note that if you are working in the College computer rooms that these settings will be lost when you logout and so you will need to define the site again the next time you login).

To define the site:

  1. Choose Site - Manage Sites and then New - Site. Select the Advanced tab.


2.  Enter the ‘Site name’ for your site e.g. Astronomy. This is simply a reference name for your site so it does not necessarily have to match the name of the website but it should be clear to you which site it pertains to.

  1. The ‘Local root folder’ is where any files will be saved when you are editing them on your own computer. Click on the Browse button (yellow folder icon) and browse to the folder you wish to use to store your files. This will now be where your web pages will be saved and edited when using Dreamweaver.

Leave the other fields in the Local Info section set to their default values.


Next you will input the ‘Remote Info’ which gives Dreamweaver information on how to connect to the web server so you can publish files for people to view. Click on Remote Info under Category on the left:

  1. Access should be set to ‘FTP’. FTP stands for File Transfer Protocol.
  2. FTP Host is the name of the web server - www.tcd.ie or www.tcdlife.ie
  3. Host Directory is the location of the folder you will publish to on the web server. In College all entries here will start with /www.tcd.ie/ e.g. /www.tcd.ie/Webdesign. If working on the TCD Life server your entry will start with /www.tcdlife.ie/ e.g. /www.tcdlife.ie/societies/sitename or /www.tcdlife.ie/clubs/sitename
  4. Login and Password are your username and webauthor password. This webauthor password expires every 90 days so you will have to re-enter it here after you change it. If you have forgotten your webauthor password you will need to contact the IS Services Helpdesk to have it reset.
  5. Check the ‘Use Secure FTP (SFTP)’ box. The College web server is a secure web server meaning all data transferred to and from it is encrypted.


  1. Click Test to confirm that Dreamweaver can connect to the web server. The Test will fail if the Host directory is not entered correctly, or if there is a password problem.

If you need to edit these settings at any stage e.g. if your webauthor password changes, simply choose Site – Manage Sites from the main Dreamweaver menu, select the site definition you wish to update e.g. Astronomy and choose Edit.

Connecting to the Web Server & Transferring Files

When you defined the site you put in the details of the web server you want to connect to, the folder you want to work with online and the username and password of your webauthor account.

1.  Once you are ready to publish your pages to the web server or if you want to copy existing pages down from the server, which you must do before you can make edits to existing web pages, click on the Expand/Collapse button highlighted below:

2.  To connect to the web server click on the Connect\Disconnect icon as highlighted below:

3.  The ‘Remote Site’ on the left should now be showing the contents of your folder in the Astronomy folder on the web server. To upload and download files to and from the web server, select the files and one by one and drag and drop them to the desired location. Click No if asked to ‘get dependent files’ or ‘put dependent files’.

Making Changes to Existing Pages

Once you have copied down the existing web site files to your own computer you can make changes to the pages.

Steps for Updating an Existing Web Page

1.  Verify the URL (web address) of the page you wish to edit and browse to the page to check it online in Internet Explorer or whatever web browser you are using. This will help you verify the filename and the folder location of the page you wish to edit. For example, if the URL is http://www.tcd.ie/sitename/folder1/file1.php then you will be looking for the file called ‘file1.php’ in the folder called ‘folder1’.

2.  In Dreamweaver, download the file – first select it by single-clicking on it in the file list on the right, then hit the green download arrow to download it again. This ensures you have the most up-to-date version of the file on your computer.

3.  Open the file for editing by double clicking on it in the file list on the right

4.  Make the required changes

5.  Save the file and then Close it (File –Save and then File – Close)

6.  Upload the file to the web server – first select it again by single-clicking on it in the file list on the right, then hit the blue upload arrow to publish it to the server

7.  Browse to the page online in Internet Explorer or whatever web browser you are using to check the updates are ok. You may need to Refresh the view – you can do this quickly by hitting the F5 key.

Creating New Pages in an Existing Site

The best method to employ for creating a new page is to use an existing page in the site as a ‘guide page’ or starting point for the new page. Doing this ensures that the new page has the same layout as the existing pages in the site which is important as you usually will want to achieve consistency in appearance throughout the site. Using an existing page as a starting point saves a lot of needless work that would be involved in creating the page from scratch.

Steps for Creating a New Page in an Existing Website

  1. Nominate a filename for the new file and determine what folder you will save it to in your site. When you nominate the filename stick to lowercase lettering and use underscores ‘_’ instead of spaces. Don’t use special characters or letters with accents such as á, í, é etc.
  2. Identify an existing page in the site to use as a ‘guide page’. Usually you will use a file that is in the folder which the new page will be in.
  3. Make a copy of this ‘guide page’. Open the ‘guide page’ in Dreameaver as if you are going to edit it and go to File – Save As, saving the file as the new filename. This creates a copy of the original guide page.
  4. Update the Page Title and page content as appropriate
  5. Save the file and close it (File – Save, File – Close)
  6. Upload the new file to the web server and browse to it online to check that it is ok
  7. Link to the new page from another existing page if appropriate so that visitors to the site can locate it

Inserting and Formatting Text

In Dreamweaver you can enter and format text in much the same way as you would in a word processing application such as Microsoft Word. You can use the options in the Properties to make your text bold or italicized or to change the paragraph alignment.

As you type the text appears on screen, automatically wrapping onto the next line as you reach the end of the current line.

If you hit Return Dreamweaver starts a new paragraph. If you hold Shift and hit Return you remain in the current paragraph but start on the next line – this is called a ‘soft return’.

You can format your headings by choosing the appropriate option beside ‘Format’ in the Properties. If using the Heading formats, do so only for structural formatting and not just to change the appearance of text i.e. only format text as a heading if it is actually a heading.

Linking to Pages, Images or Files in Your Site – Relative Links

To create linked text:

1.  Type in the link text.

2.  Then highlight the text you wish to link.

3.  Beside the Link box in the Properties at the bottom of the page click on the yellow folder icon and browse to the file you wish to link to.

4.  Select the file and click OK and you will see in the Link box the location of the linked file, relative to the file you are editing.

You can link images in a similar manner by first selecting the image and then browsing to the page, image or file you wish to link to.

Linking to External Websites – Absolute Links

It is also possible to link to websites outside your site by creating an absolute link i.e. specifying the full URL, or web address, of the destination page.

  1. As with the relative link you must first enter the link text.
  2. Highlight this piece of text – you must always highlight the text you want to link first before specifying where it links to.
  3. Click into the Link box in the Property Inspector
  4. Enter the full URL of the destination site (you would typically copy and paste the URL you are linking to from your web browser’s address bar).

You can link images in a similar manner by first selecting the image and then entering the URL you wish to link to.

Linking to Documents

Web sites often contain files other than web pages, such text documents or presentation files. When setting up your site, files like this, whether PDF or Word files, are best stored in a separate folder from standard web page files. For example you could have a folder called ‘docs’ for storing documents. Often this folder can be found in the ‘assets’ folder.

  1. You must first copy any documents you wish to use in the site into the ‘docs’ folder, or equivalent, on your computer, before linking to them.
  2. Upload the new document file(s) as you would upload an updated web page i.e. in Dreamweaver select the file(s) to be uploaded and then click the blue upload arrow.
  3. You can then link to the document from an existing web page in the same way that you would link to another web page in the site i.e. enter the link text, highlight that text and then click the yellow folder icon beside the ‘Link’ box and browse to the document.
  4. Beside the link text you should enter the details of the file type and size in brackets e.g. (PDF, 1.13MB). This lets the user know if they will be able to open the file and how long it will take to download.
  5. Save the file (File-Save) and upload it to the server.
  6. Browse to the web page in a web browser and check that the link works correctly.

Email Links

It is a convention that all web pages should include a contact email address.

  1. First type in the link text as usual.
  2. Then highlight this text and click into the Link box in the Properties.
  3. Now enter ‘mailto:’ where is the destination email address. This type of email link can be referred to as a ‘mailto’ link.

‘Last Updated’ Date

It is a convention that all pages should have a ‘Last Updated’ date. This indicates how current the information on the site is.

  1. For example, somewhere towards the bottom of the web page type ‘Last Updated:‘.
  2. Then choose Insert - Date to insert the current date.
  3. Tick the box for ‘update automatically on save’ so that this date is automatically updated each time you make a change to the page and save it.

Inserting & Resizing Images

When setting up your site, images are best stored in a separate folder from standard web page files. For example you could have a folder called ‘image’ for storing image files. This is often located in a folder called ‘assets’.

There are some free online websites that allow you to resize images and these should be used, if you do not have access to Photoshop, in order to resize your images before inserting them into your web pages. See http://www.shrinkpictures.com/ as an example. Once the image has been resized you will need to download it to your images folder. You can overwrite the original image file but it is best to save the resized image as a new file.

1.  Similar to when linking to documents you must first copy any image files you wish to use in the site into the ‘images’ folder, or equivalent, on your computer, before being able to insert them in Dreamweaver.

2.  In Dreamweaver you should then upload the new images to the web server by first selecting the image(s) from the file list on the right and hitting the blue upload arrow.

3.  Download and open the web page into which you wish to insert the image.

4.  To insert the image in Dreamweaver, click into the appropriate position in the web page and choose Insert – Image from the main menu. Browse to the image you wish to insert.

5.  You may be asked to provide ‘Alternate Text’ for the image and you should do so for accessibility reasons.

6.  Save the web page file and upload it to the web server using the blue upload arrow.

7.  Browse to this web page in a web browser to verify the image is displaying correctly.

Inserting Tables

You insert a table by clicking into the appropriate location in the web page and then choosing Insert – Table from the main menu. You then need to specify values for the various table attributes: