Agenda

1
Agenda Week 6, Day 2

• Revisit where weve been
• HTML and Dreamweaver
• Other Cool things in Dreamweaver
• Tables and Imagemaps
• Finishing the Tutorial
• Returning to Dreamweaver
• Inventory of status and Debugging
• Adding a new page
• Moving on to the assignment

2
Other cool things in Dreamweaver
3
Tables and Imagemaps

• Tables
• Tables are valuable for page layout.
• Dreamweaver makes it easy to use tables, as well
  as tables within tables.
• Image map
• An imagemap is an interactive image. The image
  has hotspots, or clickable regions that serve
  as links.
• An imagemap is a useful for transforming a
  graphic image into a navigation device.
• Dreamweaver makes it easy to create imagemaps.
• Dreamweaver has tutorials for both of these.

4
Completing our Tutorial
5
Returning to Dreamweaver

• We need to tell Dreamweaver to point to the
  TC-Topics-Web website. How do we do this?
• Answer
• SitegtNew Site
• When choosing directory, point to the
  TC-Topics-Web directory
• The site files should appear in the Files panel.

6
Taking Stock

• Does your TC-Topics-Web website have the
  following properties
• The main page (TC-Topics.htm)
• Reflects changes I made to it in Dreamweaver
  (color and list).
• Has a link to the usability topic page
  (Usability.htm).
• The usability page (Usability.htm)
• Shows the small screenshot graphic
• Shows the graphic background

7
Opportunity to Debug

• Broken images (images that do not show up)
• Why might images not show up?
• How can you debug broken images
• Invisible updates
• Why might the Internet version of the site not
  reflect changes you have made in Dreamweaver?
• How can you debug such situations?
• Other Problems
• Why might this problem exist
• How can you debug such situations?

8
Adding a graphic

• How would you add a graphic?
• Heres how
• Place graphic in Assets folder
• Add graphic through Insert gt Image
• Why does it matter that the graphic be in the
  Assets folder?

9
Extending the Site

• Add an Information Design topic to site
• In Dreamweaver, create a new page
• Add the following text as a heading 1,
  Information Design
• Add the phrase return to home
• Transform the phrase return to home into a link
  to the main page.
• Save the page as informationDesign.htm
• Edit the main page to point to the new page.
• Transform the existing text Information Design
  into a link that points to the new page.
• Save the main page
• Republish your website
• FTP the new page informationDesign.htm to your
  web folder
• FTP the index page, TC-Topics.htm to your web
  folder (since it was updated)
• Explore your new site

10
Revisiting the Tutorial

• Created file space for site.
• Configured Dreamweaver to point to site.
• Edited existing pages (and adding a new page)
  using Dreamweaver.
• Added background color to pages.
• Added links and images to pages.
• Published the website.

11
Looking to the Assignment
12
Preparing for the Assignment

• Write down the set of steps you would need to go
  through in order to create a two page website in
  Dreamweaver and publish that site to the
  Internet.

13
Creating an initial 2-page website

• Create folders for local storage of site
• Create website folder within your Sites folder
• Create Assets folder within website folder
• Configure Dreamweaver to point to website
• Site gt New Site
• When choosing folder for website, point to folder
  you already created
• Populate Assets folder with graphics
• Drag any useful graphics into the Assets folder
• Create starting pages
• Create two pages with File gt New
• Add links so that the two pages point to each
  other
• Save pages to the website folder
• Publish initial website
• Using FTP, copy the website folder to your
  public_html (or students_html) account

14
Final Thoughts!
15
Some additional hints

• File references in HTML are case sensitive
• If a link/URL is not working, check that you have
  the right combination of upper and lowercase
  letters!
• Debugging problems with images
• The most common reason for non-working images is
  some type of error in the filename/path to the
  image.
• Know where you are saving your site.
• I recommend that you save your site in
  U\sites\mysite (where mysite represents the name
  of the folder containing your site)
• You can save the site almost anywhere
• If you choose to save the site at another
  location, be aware of where you are saving it!

16
Working Strategically

• Test (publish) early and often
• Be successful early
• Extend your successes
• Practice moving your site to another location
• Move the websites folder (or sites folder)
• Redefining site in Dreamweaver (SitegtNewSite).
• This will ensure that you know how this works.
• Going beyond the requirements
• The assignment has very basic technical and team
  coordination requirements. If you go beyond the
  requirements, be certain to let me know how. I
  need to have it spelled out