home > dreamweaver > templates

Adapting the course template

set up files | configure site | customize templates | create index.html | update colors | create about.html | update navbar

In-class exercise

Set up files

  1. Create 2 folders (css, Templates) in your local folder "652" [Note capitalization of folder names!]
  2. Download files from Dreamweaver page into appropriate subfolders in local "652" folder

Configure DW site

  1. Launch Dreamweaver
  2. From the Site menu, select "Manage Sites"
  3. Click "New," then "Site"
  4. Wait while DW opens the Site window, confirm you are on the Basic tab
  5. Name your site "652 web"
  6. (Only if using the newer DW8) URL is "http://www.pages.drexel.edu/~username/" (no quotes)
  7. "No, I do not want to use a server technology."
  8. Select "Edit local copies on my machine"
  9. To select "Where to store files," use Browse to locate local "652" folder (this may be on your jump drive, or you could copy the folder to your hard drive before you start setting up this site)
  10. How do you connect: FTP
  11. Hostname: "dunx1.irt.drexel.edu" (no quotes)
  12. Folder: "public_html/652" (no quotes)
  13. Enter your username & password for dunx1
  14. Check box for secure FTP
  15. Test connection
  16. Next; Done

up to top^

Customize templates

IMPORTANT: Never open a template in Dreamweaver if any other files are open! This can "break" the connection between the file and its underlying template.

  1. Open base.dwt (confirm no other files are open); personalize footer; add site title to header (actually type it into the colored block at the top of the page) and to title field (small white "Title" box above page); save; do update files (wait until "done," then close dialog); close page
  2. Open colx1.dwt; switch to code view; fix doc title in head section (since it's editable in each page, the change to base.dwt hasn't fixed this); save & close
  3. Open colx2.dwt; fix doc title in design view; click on image holder and update source and alt tag; add caption under image (for © symbol, use Insert menu, HTML, Special Characters); save & close

Create index.html

  1. First save a copy of your first, primitive index page. Right-click on index.html and select Edit, then Duplicate.
  2. Rename the copy to "old.html"
  3. Delete index.html (this is the old original; we are creating a brand-new index.html)
  4. From File menu, select New
  5. Click Templates tab, choose "colx2", confirm Update page is checked, click create
  6. From File menu, select Save As and save as "index.html" in your site
  7. Update doc title (white box above page in Edit window) in design view
  8. Remove breadcrumb navigation line (breadcrumb navigation is generally unnecessary on "top level" pages)
  9. Write intro text (brief; apply H1 style with Format drop-down in Property Inspector); save and close
  10. Upload all to dunx1: In the Files panel, select the top level "Site" folder and click the blue "Put Files" arrow

up to top^

Update colors

  1. Expand CSS panel at right
  2. WARNING: changing widths, margins, padding, position attributes may cause unexpected results. Stick to changing colors, fonts, font sizes. If the layout becomes distorted, you may wish to download a fresh copy of my.css.
  3. Click body selector in CSS Styles panel; click pencil icon to edit style; from background category change color; click Apply and Okay. NOTE: each time you change a style, click Apply first to make sure you like it.
  4. Click #header; change background:color and text:color
  5. Click #nav; change background:color and text:color
  6. Click div#column p; change text:color at least
  7. Click #footer; change text:color and border:top color
  8. Fix text:color as necessary for these selectors: a: selectors, #nav a: selectors, heading styles
  9. Upload updated my.css to dunx1 (if my.css is open for editing, be sure to save and close it): In the Files panel, select my.css and click the blue "Put Files" arrow

Adapt about.html

  1. Open about.html and from the Modify menu, select Templates, then "Apply Template to Page"
  2. Most likely, you will want to apply the colx2 template.
  3. Save changes and upload to dunx1

up to top^

Update link in navigation bar

  1. Make sure all .html pages are closed, then open base.dwt
  2. Fix hyperlink from "about" button
    1. Select "about" text in nav bar
    2. From the Link box in the Property Inspector panel at the bottom of your screen, click on the "Point to File" icon (looks like a compass? or rifle scope?) and drag to the right to point at about.html in the Files panel
  3. Save; allow update; upload all .html files to dunx1

Finish

  1. Expand File palette to show local and remote files
  2. Confirm all files are uploaded to dunx1
  3. View website with browser at http://www.pages.drexel.edu/~username/652 (replace "username" with your Drexel dunx1 account name)