Rollover (Beethoven), or Dis Joint the image, eight to the bar

Rick asks, "how can I roll over something and have an image pop up elsewhere on the page?" Look at http://www.paeweb.org/students/DWCS4/disjointTest.html

1. Begin with your images optimized to two sizes: a thumbnail and a full-sized image. I have not optimized OR sized any of the images in this example; you may also want to play around with sizes before you do final sizing.
   
2. Make an APdiv (or other image 'placement') and insert your "resting" image...the image that will show when you are not mousing over the thumbnails. You need not use an APdiv. Any image anywhere on the page can be "swapped" out and in. Just watch the dimensions of the image and make sure it acts the way you want it to!
   
3. Make sure each image on the page is named, including the "resting" image.
4. Turn on the Behaviors panel from the Window menu.
5. Select (click on) the first thumbnail and press the "plus" in the Behaviors panel (on the Tag Inspector panel). Choose "swap image."
6. In the field at the top of the swap image window, all named images will be listed. Click on the image that is your "resting" image. You will tell DW to swap that image with the one you will browse to. Make sure you ask the system to Preload images and Restore images on mouseout. That's all there is to it!
   
7. Be warned: if you move the page around within the site files, your image source paths will not be updated automatically, and you will probably have to remove and re-apply the behaviors. I speak from experience!
   

Questions, we have questions!~

1. It is perfectly all right to put a spry menu inside an APdiv. You will find that divs are incredibly useful structurally and to isolate individual elements of your page.
2. Not only is an APdiv the same thing as what we used to call a "layer," it is principally just a div with that added attraction of being more defined: width, height, position. It remains fully editable.
3. Placing images inside divs and APdivs is also fine.
4. You may easily place flash buttons and text if you have created them in Flash. Dreamweaver no longer (in CS4) gives you an easy way to originate them.
5. To change a rollover color on a spry menu, you will change the a:hover state in the spry css file that is coordinated with your spry menu.
6. Rollover images may be applied to an existing image on the page by using the swap image behavior.
7. To offer a space for a client to preview/review a website without "going live," the easiest way is for you to have a "sandbox" area on the server that you yourself use. For instance, in my www.gravenimagedesign.net server space, I have a folder called PHA, where my entire PHA working site lives. It is accessed by both my client and by me at www.gravenimagedesign.net/PHA.
   Although I have made that sub-site accessible through my own website, it need not be publicized on your home website. But if the client is given the URL, the site is available to be reviewed 'live,' even if it is not live on their server at their domain name.
      You are correct; you would not want to email them html files, or the whole constellation of files in your site. By putting them on the web, you are ensuring that they function correctly, and as they will when they are finally uploaded to your client's server space.
   

Testing, Testing

 If I want to test my webpage with Internet Explorer, is there a way to  do  that if I work on a Mac?

Internet Explorer is not being supported on the Mac anymore; which you probably know.

    Beyond testing ... or at least validating ... your code within Dreamweaver, you can upload your files to a server and check them out online. You'll still need to be looking at it ON a PC.

    In my experience, Macs can read PC disks/media while PCs or Windows machines cannot read Mac-formatted media. So, you could get a PC flash drive, which your Mac should recognize, and put your files on it. Then carry it to a PC and check the page out in IE. (This is what we would now call a "sneaker net"...presuming that you are wearing the sneakers)

    I found something called "browsershots": http://browsershots.org/ which will show your page in tons of browsers, but it requires that the site/page be online.

    Also, http://www.thesitewizard.com/webdesign/multiplebrowsers.shtml

It seems, though, that some of those sites take only a snapshot, which makes it difficult to actually test function...beyond look...

Best way seems to be actually looking at it with a windows machine.

Ironic, isn't it, that Mac is a great developing environment, but most of the world uses Windows*. Dust off that corner of the desk and install a PC. Or grab one out of your neighbor's attic. PC users upgrade frequently, and you might find one cheap on Craigslist.

http://www.w3schools.com/browsers/browsers_stats.asp

At this w3schools site, you can also find statistics

• by OS (operating system) platform
• display resolution and color depth
• statistics and descriptions of different IE versions
• Netscape, Mozilla (which is not a browser)
• Firefox
• Opera
• Chrome. 

Other browsers apparently sport such low usage numbers that they are not treated. The Browser home page (http://www.w3schools.com/browsers/default.asp) describes each browser generally.

This is a good page/site to get to know. It will help you when you are deciding what size 'viewport' you want to be working within.

Adobe TV and other delights

Here's a link to great videos that introduce the viewer to features and workings of Dreamweaver (and other Adobe products) that we might not touch on in class:

http://tv.adobe.com/

The presentations are informative and entertaining at the same time; the speakers are project managers and engineers at Adobe.

Topics I have watched recently: how to make a dynamic database page using an html page with an html table (no php required) as datasource; tag navigator; InContext Editing.

If you are looking for a safe way to allow your clients to update and edit their own website content, investigate InContext Editing. You use Dreamweaver CS4 to set up editable regions and repeating regions (much like setting up template regions), then register the website with Adobe InContext Editing and send an invitation to your client. There is much control you may exert: protecting the coding for a section or allowing as much or as little control to the client as you wish. Watch the videos for a good look at it. There is also a 50+ minute presentation that describes the process. Right now, InContext Editing is free; in future it will be a paid resource at the rate of $10-20 a month (paid by you, the web developer/designer) for use with up to 5 websites on the public web. Intranet sites are not accessible with InContext Editing. This is a fine way to maintain control of the look and feel, as well as the coding, of a website, while allowing your client to maintain control of the content itself.

Welcome to the evening Dreamweaver CS4 class!

Welcome, all!

I hope you will find assistance, amusement, and an opportunity to communicate with other Dreamweaver learners and users here at Portland Adult Ed!

Beth