Dreamweaver FAQ » Behaviors

How do I arrange thumbnails in a photo slideshow?

janinewarner — Wed, 01 Feb 2012 18:07:23 +0000

Hi Janine,

I’m one of your students. Thank you for your very helpful online courses.

I am writing to ask your opinion. I am a graphic designer and illustrator. I am putting together my own website and would like to show samples of my work. My thought is to have a table of 15 thumbnails and a large mage to the left of the grid. The table would have 2 columns, one with the thumbnail images and one with the big version. Then using the swap image feature in Dreamweaver I would set them up to swap out each image as the viewer rolls over each thumbnail. Does that sound like the most efficient way to do that?

Otherwise, I thought I would have to create a series of Div tags using margins and padding to arrange them, but that seems like a lot of div tags, if each div tag had to contain an image.

Thank you for your help. Yours truly,

Mike

Hi Mike,

Thank you for your kind words about my training . I understand why you think tables might be a good solution to this design challenge, but trust me, they’re not. The only time Tables are still recommended in web design, is when you’re formatting ‘tabular data’ — in your case, I would not recommend a table.

However, it’s not as hard as you might think, and you DO NOT need a to create a div for each thumbnail image. Consider this. You can create two divs, one for the big image, and another one for all of the thumbnail images. Then insert all of the thumbnails in that one div, each separated by a single space. Then use a style to add as much space as you want between each image.

A compound style works well here. Ex: Create a class style for the div called .thumbnails, then create a compound style called .thumbnails img and set the margins to something like 10 pixels on the left and right, or top and bottom (depending on your design). That will put 20 pixels between each image. It’s like magic how that works instantly to spread the images apart, and it’s super easy to change if you decide you want more or less space between your thumbnails later.

I hope that helps you find the best solution for your website.

Janine

I created a drop-down menu in Dreamweaver, but when I upload it to the server, it doesn’t work.

janinewarner — Sun, 04 Dec 2011 20:23:25 +0000

Hi Janine,

I created a drop down menu with Dreamweaver CS3 ( I am waiting to upgrade soon. )

Your directions were great. When I F12 the page to preview it, it looks awesome!

However, when I upload the page, does not look the way it should or function at all.

I have searched the internet high and low for answers to no avail.

Do you have any suggestions, or a quick fix?

Thank you so much for you help.

Shari

Hi Shari,

When you create a drop-down menu with the Spry features in Dreamweaver, Dreamweaver generates the HTML and CSS code, as well as the scripts that make it all work.

Those scripts are usually saved in a folder with a name like SpryAssets and you need to upload the scripts for your drop-down menu to work.

Look in the Files panel for a new folder created by Dreamweaver that has .js files in it (these are JavaScript files). Upload the entire folder to your server with the HTML page that has your drop-down menu and everything should work on the server, just like it does on your hard drive.

You can learn more on my site about creating a drop-down menu in Dreamweaver, as well as editing a drop-down menu in Dreamweaver.

Hope that helps you solve the problem,

Janine

How do you create fly-out menus or drop-down menus with Spry in Dreameaver?

janinewarner — Wed, 25 Aug 2010 20:25:19 +0000

Hello Janine,

I am almost all the way through your Dreamweaver videos on Kelby Training, and they are great. Thanks.

One thing I have not seen yet (and don’t see in the lesson titles I have left) is how to create a drop-down or fly-out menu in Dreamweaver.

I have searched online and found a lot of conflicting information on how to do it. Since you are such a good instructor, I thought it would be great if you presented that technique somehow/somewhere. Thanks for any help you could give to the rest of us on that topic!

Thanks,
Doug

—–

Hi Doug,

Thank you so much for your kind words about my videos at KelbyTraining.com.

How to create and edit drop-down menus with Dreamweaver’s Spry feature is a topic I want to address, but I haven’t had a chance to get into those advanced features yet in my videos. There is a lot to cover when it comes to Web design, but I do hope to add some video lessons on these features in the future.

I do have a couple of written tutorials on the topic that may help you; the following URLs will take you right to them.

How to create drop-down menus (or fly-out menus) in Adobe Dreamweaver

Tips for editing a drop-down or fly-out menu in Dreamweaver

Two things to keep in mind.

First, these tutorials were done with Dreamweaver CS4, but the features did not change in version CS5, so they should work with either program.

Second, drop-down menus combine XHTML, CSS, and Javascript, which makes them considerably more complex to work with than many of the other features in Dreamweaver, especially when it comes to making sure your pages look and work well in many different Web browsers.

The Spry features in Dreamweaver offer a great shortcut to creating Javascript, but they’re not perfect, and if you run into problems, they can be complex to troubleshoot (I tell you that not to scare you off, just to warn you). In general, if you keep the drop-downs at the top of the page, they seem to work better than if you try to integrate them in the middle of a page design. Also make sure you don’t have any Flash files that may overlap with the drop-downs, or the menus will get lost behind the Flash file.

Finally, to make sure you drop-down menus work well across different computers and browsers, consider using the services in this tutorial on my site.

I sincerely hope that helps you and I wish you all the best with your Web designs,
Janine

Why am I getting an error because of Active X controls or scripts?

janinewarner — Thu, 18 Mar 2010 22:29:31 +0000

Why am I getting the error message: “To help protect your security, Internet Explorer has restricted this webpage from running scripts or ActiveX controls that could access your computer.”

I created a tabbed panel on one of my pages. When I preview it in a browser, the page has this restriction message about scripts and ActiveX controls at the top, and a pop-up window asking if I’m sure I want to run this active content.

What can I do to have the page appear without the ActiveX restriction?

Andrew

Hi Andrew,

That “error” is designed to protect you from the fact that when you execute a script or ActiveX control on your computer, you run the risk of getting a bad virus or unleashing some malicious program.

All that is to say that Internet Explorer is trying to protect you — in this case, from your own script.

The good news is you don’t have to change anything and most people who visits your site on the Web won’t see the error.

This error message only appears when you preview pages on your computer that have active content (drop-down menus, panels, and other interactive features that require scripts).

Beware that IE offers many security settings and there are many reasons users do sometimes see this error message on live web pages, especially if you’re using scripts to download active content to a user’s machine.

You can test it yourself by publishing the page and viewing it in the same browser on the server that you used to view it on your hard drive. If you only see the error when you view the page on your computer, you can assume your visitors will not have a problem with your content.

I hope that helps you as you build your site and I wish you all the best,
Janine

I’m having a problem working with DIVs after I’ve created a template.

janinewarner — Sat, 06 Dec 2008 23:07:30 +0000

Dear Janine,

I’m having a problem working with DIVs after I’ve created a template. I can create a new page from that template and all the graphics and links are fine. When I try to create a DIV in the editable region and assign CSS to it, the program won’t let me. In the New CSS Rule box, “define in this document only” is grayed out. And if I try to define a new style sheet, it tells me I can’t do that without an editable region in the tag.

When I create DIVs before defining a template, it works just like the video and the CSS rule goes into “this document only” – but then my page isn’t based on the template with all the fussy nav bar stuff. Am I making sense?

It would be great if you could help me because I really thought I was getting somewhere with this web design thing!

Thank you so much,
Linda

Hi Linda,

I completely understand your problem — there are at least two possible solutions, and you should do both.

First, make sure the CSS style sheet is saved as an external style sheet – if that’s the case, you should be able to edit the styles from any page created from the template because the styles will be handled separate from the template.

To add a new style sheet or change/create internal styles in pages created from a template, you need to make sure the head section of the template is an editable region.

I cover how to do this in another post on this blog. Don’t be thrown by the fact that the question is about AJAX; the same answer will solve problems with editing styles or adding anything that uses scripts, such as inserting multimedia or Behaviors to a page created from a template.

http://www.digitalfamily.com/dreamweaverblog/2008/01/why-cant-i-edit-the-page-title-in-template-pages/

I hope that helps and I wish you all the best with your Web site,
Janine

Still want more? Visit the Dreamweaver Help Center at www.DigitalFamily.com/dreamweaver to find Dreamweaver tips, tricks, and tutorials.

I don’t want colored borders around my graphics — what can I do?

janinewarner — Tue, 08 Jul 2008 00:46:07 +0000

Dear Madame Janine,

I have enjoyed your teaching in Total Training for Adobe Dreamweaver CS3 Essentials. There is one thing I could not find any solutions for, namely links without any colored line or box. I changed the color to white in Page Properties and told Dreamweaver not to make any colored lines.

Nice-looking graphics do not look so nice with a colored border.

Warm regards
Seppo, Finland

Hi Seppo,

There is a very easy solution to your problem. All you need to do is set the border for your images to 0.

You can do this in two ways. The simplest is to select an image in the workspace and then enter a 0 in the Border field in the Property inspector at the bottom of the screen.

If you prefer, you can create a style for the img tag and set the border in the style to None. That will remove the border from all of your images at once.

I wish you all the best with your site,
Janine

Still want more? Visit the Dreamweaver Help Center at www.DigitalFamily.com/dreamweaver to find Dreamweaver tips, tricks, and tutorials.

Why can’t I edit the page title or add Behaviors and Spry to Template pages?

janinewarner — Sun, 06 Jan 2008 20:45:15 +0000

Janine,

First, your video training for Dreamweaver CS3 is great. It got me started with CSS and while I am still learning it really gave me a good jump start into this complex area.

I learned the template creation and love it but I think I missed something, using a template to create a new page I find I am unable to change the document title. I suppose it is not an editable region? How do you make it possible to edit the document title on templates?

Thanks,
Chandler

———————

Hi Chandler,

Thanks for your kind words about my videos. You ask a good question.

When you create a new template in Dreamweaver CS3, 8, and previous versions, by choosing File>New and then choosing HTML Template as the Page type, Dreamweaver automatically inserts code into the region of the HTML, making it possible to edit the title, insert Meta tags, and Javascript features.

If, however, you create a regular HTML page and then use Save As to save the file as a .dwt template, you’ll need to add the code to the head area of the template manually if you want to be able to edit the title, and Javascript features, or make other changes that affect this part of the HTML document.

Note: In Dreamweaver CS4 this problem has been fixed and when you save a page as a template, this code is automatically added.

To manually add the editable region code around the title section of a temple created from an HTML page, follow these steps:

1. Open the .dwt file and choose Split or Code View so that you can see the code behind page.

2. Find the Head section of the page — it should be toward the top of the page in the HTML code and should look like this:

Untitled Document

3. Add the template code inside the head tags. If you’re not sure what that code should look like, just copy and paste the following to replace the entire head area in the HTML of the .dwt template file. (Alternatively, you can create a new template file and just copy and paste the code from the head region of that file into your template.) Either way, it should look like this:

Untitled Document

4. Save the .dwt template file and choose to apply the changes to all of the pages created from the template.

Once you’ve done this, you should be able to open any of the pages created from the template and edit the title in the Page Properties dialog or by simply typing in a new title in the title field at the top of the workspace. This will also make it possible to add Javascript and other special features that require adding code to the head region of the page.

Hope that solves your problem, and I wish you all the best with your Web site!

Janine

Still want more? Visit the Dreamweaver Help Center at www.DigitalFamily.com/dreamweaver to find Dreamweaver tips, tricks, and tutorials.

Trying to create a rollover image and running into trouble, what’s causing it?

janinewarner — Mon, 10 Dec 2007 07:33:43 +0000

Hi Janine,

First I would like to say that your Dreamweaver 8 for Dummies is very, very good. I have already learned so much more with this book than I could have ever imagined on my own.

I don’t know if you take questions about your book, but I’m in Chapter 9 right now where you explain how to insert a rollover image. I’m not sure what is going wrong, but I entered all the information in correctly (or so I believe). When I go to the preview browser and roll over the image, the second image comes up, but when I roll off the image, the one that popped up doesn’t go away to show the original image.

What could be causing this?

Best Regards,
Brandon

Hi Brandon,

To get your images back the way they started when you create a rollover, you need to set up a Swap Image Restore as well as a Swap Image. That is useful for more complex designs, but if all you want is a simple rollover, Dreamweaver 8 gives you a much easier way.

Here’s a tutorial on how to create rollover effects using the Swap Image Behavior in Adobe Dreamweaver.

All my best,
Janine

Still want more? Visit the Dreamweaver Help Center at www.DigitalFamily.com/dreamweaver to find Dreamweaver tips, tricks, and tutorials.

Is there a timeline feature in the new Dreamweaver MX 2004?

janinewarner — Mon, 10 Dec 2007 07:32:21 +0000

Hi Janine,

I am playing with Dreamweaver, and I can’t seem to find where you can record layer paths, use the timeline feature, etc… I noticed in your latest Dreamweaver book that the entire chapter was removed (comparing to your previous MX book)… So did Macromedia completely remove this from Dreamweaver? And if so, do you basically only replace this functionality by using Flash?

Thanks for your time!

Darrin S.

Hi Darrin,

Macromedia took all of the timeline features out of MX 2004 when they released it, but they got enough complaints that they put it back in,and kept it in version 8. The problem is, they haven’t updated these features in the past two versions. As a result, you may run into problems because animations or other features you create by using the timeline may not display consistently across different browsers. You’ll also get more complex code than necessary, which can slow download times.

My best advice if you want to create animations is to use Flash. You’ll have much better design control, faster page loads, and many more options. Dreamweaver is a great Web design tool, but when it comes to animation, I strongly recommend you work in Flash and use Dreamweaver to add the animations to your Web pages.

Happy Web weaving!

JanineStill want more? Visit the Dreamweaver Help Center at www.DigitalFamily.com/dreamweaver to find Dreamweaver tips, tricks, and tutorials.

Should I use Layers or DIV tags and CSS?

janinewarner — Mon, 10 Dec 2007 02:24:05 +0000

Hi Janine,

I recently bought and have enjoyed watching your two Total Training DVDs on using Dreamweaver 8. It’s fantastic!

However, in your course you use layers and I’m confused about whether I should go down this route. I understand from the Adobe help desk that the use of DIV tags should be the standard. I would be grateful for your comments on this. I wonder also if you might be planning to issue a training DVD that is dedicated to the use of CSS and DIV tags?

Many thanks and best wishes
Simon

Hi, Simon,

Thank you for your kind words about my videos. There is a lot of confusion about Dreamweaver’s Layers and other CSS features. Layers are created with Div tags, and they are positioned with CSS, but most professional Web designers will tell you there are better ways to create CSS layouts.

Although the Layer’s feature in Dreamweaver 8 is an easy and intuitive option for create page designs, Layers require absolute positioning in CSS, which has advantages and disadvantages. Many designers prefer Div styles that don’t use absolute positioning because they are more flexible, adjustable, and allow centering.

Layers have proven so confusing that in Dreamweaver CS3, the Layers feature is now called an AP Div, an attempt, by Adobe to better clarify that Layers are Divs that us absolute positioning.

All that said, I must agree with Adobe that the ideal way to create Web sites today is by using div tags and CSS with styles that float or adjust to the browser window.

You’ll find instructions for creating CSS layouts at my site at www.DigitalFamily.com/dreamweaver.

All my best,
Janine

Still want more? Visit the Dreamweaver Help Center at www.DigitalFamily.com/dreamweaver to find Dreamweaver tips, tricks, and tutorials.