1. Agenda – Week 6, Day 2 Revisit where we’ve 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: –Site>New 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? Here’s how –Place graphic in Assets folder –Add graphic through Insert > 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 1.Create folders for local storage of site Create website folder within your “Sites” folder Create “Assets” folder within website folder 2.Configure Dreamweaver to point to website Site > New Site When choosing folder for website, point to folder you already created 3.Populate Assets folder with graphics Drag any useful graphics into the Assets folder 4.Create starting pages Create two pages with File > New Add links so that the two pages point to each other Save pages to the website folder 5.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 website’s folder (or sites folder) –Redefining site in Dreamweaver (Site>NewSite). 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…