Information Resources & Technology (IRT)–

Create a New Topic Subdirectory

Sites are structured with subdirectories within the main, or "root" folder for the site. Subdirectories are a place to store the pages of a topic and also sub-subdirectories for related sub-topics. As with pages, new subdirectories should be created by duplicating existing, functional directories.

Watch Demo

Step 1: Find a source folder to duplicate

  1. In your browser, find a New Subdirectory stationery folder; Student practice sites will have a "New Subdirectory" link you can follow
  2. If working a live site, look for root/new_subdirectory/ (version 2.0) or root/new-subdirectory/ (version 1.9)
    • You can look at your site files in Dreamweaver or on your desktop for the exact folder name
    • If your site doesn't have one, you can request installation of via Web Help
  3. You can also work with any functional topic folder; remember that everything in your source folder will be duplicated (you may want to choose the simplest or most like your new topic)
  4. Note how a directory listing shows in the browser when there's no index.html

Step 2: Duplicate source folder

  1. In Dreamweaver, find and examine the same folder as viewed in the browser
  2. Select the source folder and right-click (Win) or Ctrl-click (Mac); find the Edit menu item, then the Duplicate submenu item
  3. A new folder named "Copy of [source folder name]" is created; select it
  4. Re-name the folder for your topic
    • no spaces or special characters!
    • hyphens (-) and underscores (_) are OK
    • keep it short; for our example
    • let's use "my_project"
  5. Dreamweaver asks if you want to check for broken links to updated files; click "Don't Update"
  6. Examine your new folder
    • If you used a New Subdirectory stationery folder, you have one or more page stationery files, and an includes folder, but no home page
    • If you used a developed topic's folder as your source, you have copies of all that topic's files
      • you may want to delete all but one page (the simplest) and use it as your new page stationery
      • you can delete, update or replace the existing index.html home page (see next tutorial); if you want to save the older version, re-name it "index-old.html"

Step 3: Update links through Find/Replace

  1. In Dreamweaver, select the new topic folder you created
  2. Use the menu sequence Edit > Find and Replace
  3. Check your search settings
    • Find in: Selected Files in Site
    • Search: Source Code
    • Find: [source directory name] e.g. "new_subdirectory" or "new-subdirectory"
    • Replace: [new topic folder name] e.g. "my_project"
    • Options: None need to be checked, but note "Match case" and "Ignore whitespace"
  4. Click "Replace All" button; Dreamweaver warns you this cannot be undone; click "Yes"
  5. Note how results are returned in the results panel; collapse the Result panel

Step 4: Apply topic to stationery

  1. In Dreamweaver, open the 2-column stationery file from within your new topic's folder; if your folder already has an index.html you want to keep, open it as well
  2. You will duplicate this file to create all of the new topic's pages, so think about any features you want to appear on all or most
  3. Update the Browser Title to specify the topic, typically the second group words
    • Example: PageNameHere - TopicNameHere - SiteNameHere - Stanford University School of Medicine
  4. Save your changes

Step 5: Create topic home page

  1. If you don't still have the stationery file open, open it now
  2. File > Save As...
  3. Name the file "index.html" - it must be spelled exactly like this
  4. Make sure it is inside your new topic folder; if there's already an index.html and you want to replace it, click Yes when prompted
  5. Update the main headline to communicate your topic, e.g. "The [your name] Web Training Project"

Steps 6 & 7: Put new folder to server and validate in a browser

  1. Select the new topic folder you created ("my_project") in the Local files list
  2. Click the Put button; click "No" on the dependent files prompt
  3. Switch to your browser, view the new folder
    • Browse to your site's home page
      • The URL ends in either a slash, ("/") or "index.html"
      • If "index.html," delete back to the slash
    • Type or paste the new folder name after the slash e.g. /my_project/
    • Type Enter to access the URL
  4. If you have trouble finding the new folder in your browser
    • Check that it was uploaded and that you have spelled the folder name exactly as in Dreamweaver
    • You can link from the body of one of your other pages to the folder or it's index.html file and then refresh the linking page and follow that link in the browser

Fill in the topic's pages later

« Previous | Home | Next »

Stanford Medicine Resources:

Footer Links: