Objective

To be introduced to Dreamweaver's templates system and power editing tools by editing an existing web site to match this version.

Discussion

A webmaster (or webmistress) is responsible for maintaining and updating web sites. The production-oriented task requires an understanding of the technology behind the web, attention to detail and a visual sensibility. Fortunately, Dreamweaver provides very powerful tools to make page editing and site management easier.

Important: When using Dreamweaver's templates, you MUST have a separate site definition for every site. There must be a separate TEMPLATE folder in the root directory of every site where templates are being used.

Note: Dreamweaver's template system also works seamlessly with Adobe Contribute (also see Wikipedia article).

Procedure

Overview: Download an exisiting web site. Set up Dreamweaver preferences. Edit text and images. Add new pages. Publish to server. Note: replace bold with personalized info.

Prepping for the exercise

1. explore the finished web site (what might a site map look like?)
2. download starter files (location: class/html/exercises)
3. launch Dreamweaver
4. define a new site (site > new site): name=ymca,
   local root folder=class/html/exercises/ymca
5. edit > preferences...
   > CSS: open CSS file when modified=no
   > invisible elements: all items=yes
   > preview in browser: choose your primary/secondary browsers
   > preview in browser: preview with temp file=no

Making text edits

1. move new "ann2011.jpg" to "_images_contact"
2. open "contact_us.html" (note locked areas, name of template)
3. view > visual aids > show all (cmd+shift+I)
4. click on Becca Guyette
5. insert > table objects > row below
6. add the following text:
   Ann Rasmus, Program Director, 337-1514, ann@universityymca.org
7. match formatting (use SHIFT+ENTER for line breaks)
8. insert image "ann2011.jpg"
9. crop image to match others
10. file > preview in browser (opt+F12 and cmd+F12)

Replacing an image

1. move new "affiliated2.jpg" to "_images"
2. open "organizations.html"
3. note image width
4. replace image with "affiliated2.jpg" (double-click)
5. scale to match width (note bold numbers for W/H)
6. re-sample image (properties)
7. file > preview in browser (opt+F12 and cmd+F12)

Search and replace

1. window > files:
   rename "organizations.html" to "affiliated_organizations.html"
2. open "affiliated_organizations.html"
3. change sublink to "Affiliated Organizations"
4. open "mission.html"
5. select link <a> "Organizations"; view > code
6. select unique string, copy (cmd+C)
7. edit > find and replace (cmd+F): replace "Organizations" with "Affiliated Organizations" (entire current local site)
8. file > preview in browser (opt+F12 and cmd+F12)

Working with templates

1. open "master.dwt"
2. change footer copyright to "2011"
3. add link "OUR BUILDING" (after "UI CERTIFIED HOUSING")
4. link to "building.html"
5. add class="building" to <a> (in code view)
6. repeat with "index.html"

Adding a new page

1. move new "building1.jpg" to "images"
2. file > new: from template "master.dwt"
3. file > save as "building.html"
4. change <h1> to "Our Building"
5. change picture to "building1.jpg" (double-click)
6. replace placeholder text with copy from "building.doc"
7. format text per sample
8. window > css: change style in header to "#menu .building"
9. file > preview in browser (opt+F12 and cmd+F12)

Adding a slide to the home page

1. open "new slide.jpg" in Photoshop
2. crop to 580x420
3. file > save for web: "04.jpg" (slides/580x420)
4. open "slides/slideshow.html"
5. replace caption #4 with the following text:
   INTERNATIONAL WELCOME RECEPTION
   Join us as we welcome all incoming international students. Light refreshments will be provided as well as live entertainment. (More...)
6. format <h1>
7. link "more" to "../international_programs.html"
8. add link to "580x420/04.jpg" (code view)
9. file > preview in browser (opt+F12 and cmd+F12)

Making a favicon

1. open "ico48.ai" in Illustrator
2. file > save for web: "ico48.png"
3. go to tools.dynamicdrive.com/favicon
4. options = yes (merge with both 32 and 48px icons)
5. move "favicon.ico" to root folder
6. open "master.dwt"
7. add the following code to <header>
   <link rel="icon" href="/favicon.ico" type="image/x-icon">
   <link rel="icon" href="/favicon.ico" type="image/ico">
   <link rel="shortcut icon" href="/favicon.ico">
8. file > preview in browser (opt+F12 and cmd+F12)

Grading

1. publish site (see separate lesson)
2. make a link from your process page to this assignment