Maintaining Trinity websites

Basic Editing - Working with documents in Dreamweaver

dreamweaver header

What is this page about

This page gives information and instructions to insert, link and work with documents using Dreamweaver on a Trinity website.

 

Who will find this information useful.

Staff and postgraduates with webauthor accounts, and associated editing permissions.

 

Requirements

  • PC / Mac with internet connection
  • Webauthor Account
  • Adobe Dreamweaver
  •  

    Before you begin

    1. Consider the information within the document, documents with any sensitive or identifying information should not be accessible from the website.
      Personal data, including sensitive personal data, is information relating to a living individual who is, or can be, identified, either from the data or from the data in conjunction with other information.
      This is a highly regulated area therefore, please take the time to inform yourself of the Trinity policies in this area.:
      Data Protection Legislation, College Data Protection Policy, Trinity Web Policies

    2. Identify if your site is an older site type, with left hand menu, or a newer site type based on templates with a top menu.
      Some tips on how to identify older and newer site types can be found on our frequently asked questions page. If you are not sure, ask your designated departmental web administrator.

    3. Identify if you are using Dreamweaver CS or Dreamweaver CC.
      Instructions on how to identify your Dreamweaver version can be found on our frequently asked questions page.
    4.  

    Adding a document to your webpage.

    Step 1: Adding the document file to your local website files

    Locate the document file you wish to use on your computer and copy the image into your images folder within your local website files. 

    • You many need to rename the file as it is recommended the filename should be all lower case and contain no spaces. For example the pdf document ‘Course Requirements.pdf’ should be renamed ‘course_requirements.pdf’

    This folder is often located in the ‘assets’ folder and called ‘doc’.

    • On larger sites you should create subfolders within the doc folder, referencing the names of the site’s top-level folders, this will make it easier to find the correct document later on.

    The steps below will guide you through this.

    1. Open Windows Explorer (Start -> Windows Explorer)

    2. Folder icon
    3. Locate the document file you wish to use.
      • In this example we will use the pdf ‘course_requirements.pdf’ and we find it in the ‘Documents’ folder in ‘This PC’

    4. Right click on the file and select ‘copy’

    5. Navigate to the Dreamweaver website data folder on your pc, Go to the ‘assets’ folder and to the ‘doc’ folder within that.
      • In this example the Astronomy Website data is saved in My Documents -> Dreamweaver Site Data

    6. Right click within the files in doc folder and click paste.
    7. Open Dreamweaver and expand the doc folder by clicking on the plus button/arrow head beside it to confirm the document is there.

    Step 2: Adding the document to the webserver

    Once you have the file in the local webfolder, you can now upload it to the webserver so that it can be viewed on the internet.

    1. Highlight the file in the local folder list

    2. In this example the the file is ‘course_requirements.pdf’

    3. Click the connect button to connect your pc to the webserver.

    4. Click the up arrow button to "put" the file on the webserver.

    5. Allow the file activity to complete

    6. The file is now on the webserver and can be placed in your webpage

     

     

    You can verify that the file is on the webserver by comparing the file list on the remote and local folders. Expand folder view

    1. Click on the "expand button" on the right of the folder list.

    2. This brings up the remote file list (on left) and local file list (on right).

    3. Open the 'assets' folder and the 'doc' folder on both and you can compare the files within each.

    4. Click on the "expand button" on the right of the folder list to close the folder list to its usual location.

    Step 3: Adding the document to your webpage.

    Now you have located the document in your local Dreamweaver files, and uploaded it to the webserver, you can link to it on the page.

    1. Download the webpage you wish to add the document link to.

    2. Highlight the text you wish to link your document to.
      It is not advisable to used text like "link here" or "click here" as it will be difficult to search for should you need to update the file in the future.

    3. With the text highlighted, you can create the link one of two ways.

      • If using Dreamweaver CC: using the Properties bar go to the Link box and click the folder icon.
      • Property bar add file

      Or

      • Right click and select ‘Make Link’
        right click add file

    If using Dreamweaver CS 6 or earlier: beside the Link box in the Properties click on the yellow folder icon and browse to the document you wish to link to and double-click on it.

    1. Select the document you require from the ‘docs’ folder within ‘assets’
    2. select file

    3. Click OK

    4. After the link text enter the details of the file type and size in brackets e.g. Course Requirements Document (PDF, 144KB)
      This lets the user know the type of file, if they can view it and how much data it will require to download it.

    The text has now become a link to the document you selected, and will be opened on the computer of anyone who clicks on it.

    Step 4: Saving the webpage and publishing it to the webserver.

    Now your document has been uploaded to the webserver and inserted into the page, you can publish this to the webserver so it can be publicly viewed.

    1. Save your page changes. File -> Save

    2. Upload your saved page to the webserver.

    3. Open a webbrowser and enter the URL for the page.

    4. Note if you have recently viewed the page you may need to clear your cache to view the most recent version.

    5. If you are happy with the link and document, then close the page in Dreamweaver and exit the program.

     

    Related pages