home > web design > working with DW

Working with Dreamweaver site

(Note: Our initial in-class exercise shows how we created and customized the templates and home page.)

create new page | insert image | assign styles | edit menus | update stylesheet

First, create the DW “site”

Each time you start working with our Dreamweaver template-based files on a lab PC, you'll need to set up the DW site. If you're using DW on your own computer, you'll only need to set this up once.

  1. Launch Dreamweaver
  2. Check preferences:
  3. From the Site menu, select "Manage Sites"
  4. Click "New," then "Site"
  5. Wait while DW opens the Site window, confirm you are on the Basic tab
  6. Name your site "652 web"
  7. (Only if using the newer DW8) URL is "http://www.pages.drexel.edu/~username/" (no quotes)
  8. "No, I do not want to use a server technology."
  9. Select "Edit local copies on my machine"
  10. 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)
  11. How do you connect: FTP
  12. Hostname: "dunx1.irt.drexel.edu" (no quotes)
  13. Folder: "public_html/652" (no quotes)
  14. Enter your username & password for dunx1
  15. Check box for secure FTP
  16. Test connection
  17. Next; Done

up to top^

Create new page from template

  1. From File menu, select New
  2. Click Templates tab, choose "colx2" (includes narrow left-hand column) or "colx1" (single, wider content area) ; confirm Update page is checked, click create
  3. From File menu, select Save As and save with .html filename in your local site
  4. Update doc title in design view (small white "Title" box above page)
  5. Update or remove breadcrumb navigation line
  6. Add h1 text
  7. Save and upload to dunx1

Insert image

  1. IMPORTANT: Confirm that image file is in your local /images folder!
  2. Drag image from file panel into your page; OR
    1. Place cursor in proper section of document
    2. Click "Insert Image" button (it's a picture of a tree) insert image iconOR select Image from Insert menu
    3. Browse to images folder and select image; click OK
  3. Always add <alt> text; click OK
  4. After inserting the image, you can select it to edit its properties in property inspector (palette at bottom of screen, usually)
  5. Remember that you will need to upload the saved .html page PLUS the image file itself to dunx1

up to top^

Assigning “class” styles to text

  1. Select the text
  2. In Property Inspector panel, choose element from "Format" dropdown or choose class from "Style" dropdown (note the style of elements like H1 are defined in my.css)

Edit menus

Breadcrumb trail

  1. Copy from existing page (see top of this page) or type from scratch on a page
  2. Apply Style (class) "breadcrumb" from dropdown box in Property Inspector panel (you can change the style "breadcrumb" with the directions "Update stylesheet" below)
  3. Confirm links for each "level" of trail
  4. Final item in list should not be linked; it should represent the current page

Main nav bar

The text in the nav bar should link to your top-level pages; be sure to have created each of those pages before you start this procedure (see "Create new page from template" above)

  1. Close all files in Dreamweaver (important!)
  2. Open Templates/base.dwt
  3. Edit text in nav bar (in the original template, text links are separated by the "bar" character, which is on your keyboard, perhaps above the backslash character)
  4. Fix links:
    1. Select text that should be clickable in nav bar (e.g., "about")
    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 the linked page (e.g., about.html) in the Files panel
  5. Save and allow update of all files
  6. Open index.html to check link
  7. Be sure to upload ALL files that have been affected to dunx1 (all .html files)

up to top^

Internal links

Another scheme for providing navigation is to use internal links on longer pages. This requires two distinct steps: creating the "anchor" in the page (e.g., "top") and then linking to that anchor.

  1. To create an anchor, place your cursor in the page at the correct location, then from the Insert menu, select "Named Anchor." Give the anchor a simple, descriptive name (e.g., "top" or "latkes") and click OK. You will see an anchor image on the page in Dreamweaver, but that will not be visible from a browser.
  2. Type a text link (e.g., "back to top^") in the proper location on your page (e.g., at the bottom of the page).
  3. To create the link, select the text, then in the Link text box of the Property inspector, type a number sign (#) and the name of the anchor (e.g., "#top").

Update stylesheet

Of course you can edit the stylesheet directly in Dreamweaver, then save it and upload it to dunx1. Or:

  1. In Dreamweaver, open any file in your site
  2. Expand the CSS palette
  3. Click a selector in CSS Styles panel
  4. Click pencil icon to edit style
  5. Each time you change a style, click Apply first to make sure you like it
  6. WARNING: changing attributes affecting size, margin, padding, position, etc. might have dramatically negative effects!
  7. If my.css (the style sheet) is open, be sure to save, then close it
  8. Upload the new version of my.css to dunx1

up to top^