Weinberg College of Arts and Sciences


WCAS NU

home departments and programs faculty research resources
students

Setting Up Your Site with Dreamweaver

These instructions describe how to set up your site in Dreamweaver for the very first time. If you have an existing site (that you created from these templates), see Editing Pages.

Download the Template Site

Video of Downloading the Template Site
Video of downloading the site (1:02)

The "Template Site" contains the files you will need to build your web site.

  1. Download the template site by clicking this link and saving the file to your hard drive: My Web Site.zip
  2. Double click the ZIP file on your hard drive to see the contents
  3. Windows users: In the left hand of the folder window, click "Extract all files." The Extraction Wizard" will open. Follow the steps in the wizard (next, next, finish)
  4. You should have a folder called "My Web Site." Name this folder whatever you would like (this guide assumes "My Web Site") and save it wherever you like (in My Documents or on the Desktop are recommended)

Define the Site in Dreamweaver

Video of Downloading the Template Site
Video of defining your site (2:12)

Defining your site tells Dreamweaver where to store files on your computer (local) and where to upload them for your web site (remote).

  1. Launch Dreamweaver
    • Windows: Under the Start Menu, All Programs, Macromedia Dreamweaver
    • Macintosh: In your hard drive, under Applications, Macromedia Dreamweaver
  2. Under the Site menu, choose Manage Sites...
  3. Click the New... button, select Site
  4. Enter a name for your site (this guide assumes "My Web Site"). Click Next >
  5. Choose No... when asked about server technologies. Click Next >
  6. Choose Edit local copies on my machine... when asked how you want to work with your files
  7. If you already have your files downloaded or if you want Dreamweaver to store your files in a different folder than the one it selected, click the folder icon to choose a new location. Click Next >
  8. Choose FTP when asked how you connect to your remote server. Enter the following information into the boxes that appear:

    Hostname: faculty.wcas.northwestern.edu
    Folder: public_html
    FTP login: Your NetID
    FTP password: Your NetID Password (same as e-mail)
    Use Secure FTP: on (checked)

    Do not save your password if you are on a public machine (shared department computer or a lab).

    Click Next >

  9. When asked about enabling check in and check out, answer No, do not enable. Click Next >
  10. Review all the information. Click Done
  11. An "Updating the site cache" window may appear for a few seconds. This window will automatically close when Dreamweaver is done reading your site files
  12. In the Files window, change the view to Local view if it is not already. See Local View or Remote View? for more information

Editing the Header

  1. In Dreamweaver, in the Library folder, open "Header.lbi" by double clicking it
    • The header will appear as plain black text and blue links when you open it. This is because it is outside the context of the rest of the page.
  2. Change "Your Name," "Your Title," and "Your Department" to your name, title, and department
    • You can link your department to the department's home page by highlighting the department's name and typing the URL in the link box of the properties window. See Links in Dreamweaver for more information.
  3. Save your changes. Dreamweaver will ask if it should "Update library items in these files?" Click Update
  4. Dreamweaver will update your template files (and any pages you may have created) to reflect your changes. Once finished, click Close

Editing the Footer

  1. In Dreamweaver, in the Library folder, open "Footer.lbi" by double clicking it
    • The footer will appear as plain black text and blue links when you open it. This is because it is outside the context of the rest of the page.
  2. Change "Your Name" to your name.
    • You do not need to change the last updated date. This will automatically update as you create and make changes to your pages
    • Do not delete any of the footer information. All three items are required elements. You may add additional information if you wish (e.g., contact information)
  3. Save your changes. Dreamweaver will ask if it should "Update library items in these files?" Click Update
  4. Dreamweaver will update your template files (and any pages you may have created) to reflect your changes. Once finished, click Close

Editing the Template Document Title

  1. In Dreamweaver, in the Templates folder, open "Navigation.dwt"
  2. Change the title of the document from "Faculty, Northwestern University" to "Your Name, Northwestern University" (or another title of your choosing).
    • The document title appears in several places in browsers: top of the browser window, search results (Northwestern's search and external engines such as Google), and users' bookmarks/favorites menu
  3. Save your changes.
    • If Dreamweaver asks to "Update files based on this template?" Click Update
  4. Repeat this process using "Single Page.dwt" in step 1

Upload Your Files

"Site - My Web Site" folder at the top of your web site files and click the blue up arrow (Put/(blue up arrow)). This posts all the files you've edited to your web space so you don't need to edit the header, footer, and template files again. This is especially important if you're working in a computer lab or want to later set up a second computer to edit your site (because those files can later be downloaded from your web space).

Create Your First Page

Now that the template has your information, it's time to create your first page. You should know by now whether your site will have one page or several (you can always switch from a single page to navigation site later).

New Page From Template

  1. Under the File menu, choose New...
  2. Make sure the Templates tab is selected
  3. If you're managing multiple sites, make sure your site is selected on the left
  4. If you want a one-page site, choose Single Page from the center column. If you want a multi-page site, choose Navigation
  5. Make sure Update page when template changes is checked
  6. Click Create

Screenshot: new from template

Fill in Page Information

Sections outlined in blue are editable regions. Sections outside the blue are uneditable and are controlled by the template the page was based on (making changes to these areas of the template will update all pages using that template to reflect the change)

  1. If you're using the Navigation template, enter a title for this page in the Page Title box (e.g., "John Evans' Web Page")
  2. Enter content for your first page in the Content section

Screenshot: Dreamweaver editor

Save and Upload

  1. Save your document (under the File menu, choose Save). Save the file as "index.html" in the "My Web Site" folder
  2. In Dreamweaver, highlight index.html in the files window
  3. Click the blue up arrow (Put/(blue up arrow))
  4. If Dreamweaver asks if you would like to "Put dependent files" answer Yes
    • If Dreamweaver did not ask to put dependent files, highlight the root (top) folder of your site and click the put button (up arrow). Answer Yes if asked if you want to put the entire site

Screenshot: uploading files

Visit the page in your web browser (the URL is http://faculty.wcas.northwestern.edu/~NETID/, using your NetID). For additional changes, make edits in Dreamweaver, save, and use the blue up arrow again to upload your changes.

Setting Up a Second Computer

If you have a second computer with Dreamweaver in another office or at home, you can set up both computers to manage the same web site. Follow these steps for each additional computer you want to set up:

  1. Instead of downloading the template files, create a folder on your computer (in My Documents or on the Desktop are recommended) where you can download the web site you already created (this guide assume you name the folder "My Web Site")
  2. Follow Define the Site in Dreamweaver above, using the folder you just created in step 7
  3. Highlight the "Site - My Web Site" folder at the top of your web site files and click the green down arrow (Get/(green down arrow)). This downloads all the site files you created originally

When working with two computers it's important to make sure they are always using the most up-to-date files. If you make a change to your web site at home, your office computer's copy of the site will not reflect those changes until you download the updated copy.

Keeping Two Copies of Dreamweaver in Sync

If you're using more than one computer, follow these two rules to always keep your Dreamweaver up to date:

  1. When you first start Dreamweaver, highlight the "Site - My Web Site" folder at the top of your web site files and click the green down arrow (Get/(green down arrow))
  2. When you're finished using Dreamweaver, highlight the "Site - My Web Site" folder at the top of your web site files and click the blue up arrow (Put/(blue up arrow))

These two steps download and upload the most recent copies of your web site.

Next Steps

From here you can go on to Adding New Pages. You may also want to change the color or change the layout of your templates. Next time you want to make changes to your site, read Editing Pages.