If you want to create a photo gallery in Dreamweaver today, here are a few options…

You can still create galleries using Flash and then insert them into Dreamweaver, but you need have Flash, and know how to use it, to do that yourself. (You’ll find an article about how to use Dreamweaver to  insert a flash file once you’ve created a gallery in Flash here.)

You can download gallery tools from Adobe. Many people use the extensions to Dreamweaver from the Adobe Exchange site. You can add gallery extensions to enhance the features in Dreamweaver and create a variety of different kinds of galleries.

This link will take you to the search results for Dreamweaver gallery extensions.

You can, of course, create custom galleries in Dreamweaver yourself with the page creation tools, and you can create templates, to make adding and updating pages more automated in Dreamweaver. In that case, you have to decide if the gallery want to create will have two pages or twenty or more, and how much control you want over the design. (You can get started learning Dreamweaver in the Dreamweaver Training Center.)

As a general rule, the more automated the system, the more the design needs to be consistent from page to page. If you learn how to use Dreamweaver to create, link, and optimize pages, you can use the template features in Dreamweaver to creating custom designs more effiiently, but that does require some experience with Dreamweaver.

If you want to see an example of a custom photo gallery created with Dreamweaver templates (using the .dwt file type), you can check out a site I created for Photographer Jasper Johal. That site is featured in my book, Web Sites DIY For Dummies, and you can download the templates that come with the book to create the same design yourself if you like that site. (Warning: this link goes to Jasper’s live site, which does include some nude art photos. http://jasperphoto.com/ I used a simplified version in my book.

Here’s another custom gallery site created with Dreamweaver’s template features for an artist to showcase her work: http://www.inplainsightart.com/. I’m planning to use that site in a new book and video soon.

Another approach to creating photo galleries is to use an online photo hosting service. Because photographers are such a big market, there are several sites that specialize in photo galleries and even selling prints with templates and plugins and everything you need for a monthly fee. Among those options, I believe http://www.zenfolio.com/ is especially popular for professionals and, of course, you can use www.flickr.com for free.

I hope that helps you find the best solution for your gallery,

Janine

I have recently upgraded to CS5 from CS3, and have also upgraded to your CS5 Dummies book.

In CS3 I frequently used Insert Media Flash button, but it doesn’t seem to be there in CS5, nor can I find any reference in your book. Has this function been moved, or has it been removed, which wouldn’t be good for me! If it has gone, do you have any suggestions as to what I can use instead for my link buttons?

Thank you for your time.
Ken

Hi Ken,

Thank you for buying my book. Sorry to confirm your fears, but the Flash button feature was removed in version CS4. Today, most professional Web designers use CSS to create visual effects for links. You’ll find a tutorial on a common technique for this on my Web site (these CSS features work the same in CS3, CS4, and CS5):

http://www.digitalfamily.com/dreamweaver/css-tutorials/css-navbar.html

I wrote another tutorial for Layers magazine that shows off a few variations on these techniques:

http://layersmagazine.com/use-css-to-style-your-lists-in-dreamweaver-cs34.html

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

I’m trying to add a Flash file to a template page, but I keep getting the error message “Making this change would alter a region that is locked by a template or translator. The change will be discarded.”

Do you know what I’m doing wrong?

Thanks,

Kate,

You’re not doing anything wrong. This is a common error in templates, and there is a fix that will take care of your problem.

Here’s a somewhat technical explanation of the problem with your template pages, followed by detailed instructions for correcting it. In addition to making it possible to add Flash files to pages created with templates, this fix will enable you to edit the title of your pages and to add AJAX, CSS, and Behaviors to pages created from templates.

The errors for all of these problems are caused because of a missing editable region in the header tag area at the top of the page (more on what that means below).

There are two ways to create templates in Dreamweaver. You can create a new template (.dwt file) directly, or you can create an HTML page and then later save the page as a template. When you create a new .dwt file from scratch in Dreamweaver, the head area of the template is automatically set up as an editable region.

Here’s what caused your problem and why it doesn’t always happen in Dreamweaver. When you turn an existing HTML page into a template (using Save As to change the file to the .dwt format instead of .html), Dreamweaver should make the head area editable — it does that when you create a new template, but not when you save an existing page as a template. This problem can be hard to find because the head region of a page is not visible in the design area, but it’s very important.

If you’re using Dreamweaver CS3, 8, or a previous version, you’ll need to make the head area of the template an editable region manually, and you’ll have to do a little code work to fix it. (Don’t worry, I’ve included the code below so you can just copy and paste it.)

Note: If you are using Dreamweaver CS4 (the newest version), this problem was fixed in most versions. That said, if you’re having this problem and you’re using CS4, the following solution will work for you, too.

To manually add an editable region to the head section of a template so you can insert Flash and other files into your pages, follow these steps:

1. Open the .dwt file and choose Split or Code View so you can see the code behind the 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 something like this:

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
</head>

Note: Your code may be longer and include other details, such as a real document title instead of Untitled Document, but you want to identify everything between the <head> and </head> tags before you fix it.

3. Dreamweaver creates editable regions in pages by adding a little code that looks like this: <!– TemplateBeginEditable name=”head” –> around whatever area you want to be able to edit. That code is not inserted when you create a template from an existing page, but you can copy and paste the following code into the top of your page to fix it.

4. The easiest thing to do is to replace the entire head area in the HTML code of the original .dwt template file. (Note: You can’t do this in an HTML page created from the template; you need to do it in the original .dwt file. The bonus is that if you’ve already created multiple pages from the template, this should fix all of the pages you created from the template at once.)

Here’s what you need to do:

First, select all the code at the top of your template contained between the <head> tag and the close </head> tag and Delete it.

Then copy the following code and paste it into your .dwt file in place of what you deleted (be very careful to paste this in exactly the same place where you cut the old <head> content. Note that you may want to preserve your title tag or other custom code by saving it and pasting it back into place very carefully. HTML is for the detail-oriented; one missing quote mark and it won’t work. . .

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<!– TemplateBeginEditable name=”doctitle” –>
<title>Untitled Document</title>
<!– TemplateEndEditable –>
<!– TemplateBeginEditable name=”head” –>
<!– TemplateEndEditable –>
</head>

5. Save the page to complete the changes. If you are prompted to apply those changes to pages created from the template, make sure to approve the changes.

6. Although you shouldn’t see any change in the main design area of the page (unless you made a mistake such as deleting the <body> tag), you should now be able to add Flash files and other elements to any page you’ve created from your template, because Dreamweaver will not have an editable region at the top of the code where it needs to save the scripts that make your Flash files, behaviors, and other interactive features work.

7. Once you’ve changed the head code area in the template, you should be able to open any of the pages created from the template and edit the title, insert Flash files, and anything else just as you would any other page . This will also make it possible to add Behaviors that use Javascript, Spry features, such as drop-down menus, and other elements that require adding code to the head region.

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

– Janine

I am surprised that the Total Training for Dreamweaver 8 only talks about streaming WMV or MOV but nothing about FLV.

Is that in some other training?

Thank you,
David S.

Hi David,

My Dreamweaver 8 training was created a few years ago and Flash video was not an option yet.

You will find some free tutorials about using Flash video on my Web site at www.DigitalFamily.com/dreamweaver. However, they cover features that were added to Dreamweaver in versions CS3 and CS4, so if you’re using Dreamweaver 8, you won’t find the Insert Flash Video option.

I strongly encourage you to upgrade both the program and the training as many things have changed since I created those version 8 videos, including the way most designers use CSS now instead of tables or layers.

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

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

]]> http://www.digitalfamily.com/dreamweaverblog/2008/12/where-can-i-learn-about-using-flash-video/feed/ 0 http://www.digitalfamily.com/dreamweaverblog/2008/12/i%e2%80%99m-having-a-problem-working-with-divs-after-i%e2%80%99ve-created-a-template/ http://www.digitalfamily.com/dreamweaverblog/2008/12/i%e2%80%99m-having-a-problem-working-with-divs-after-i%e2%80%99ve-created-a-template/#comments Sat, 06 Dec 2008 23:07:30 +0000 janinewarner http://www.digitalfamily.com/dreamweaverblog/?p=93 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 <head> 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.

]]> http://www.digitalfamily.com/dreamweaverblog/2008/12/i%e2%80%99m-having-a-problem-working-with-divs-after-i%e2%80%99ve-created-a-template/feed/ 0 http://www.digitalfamily.com/dreamweaverblog/2008/07/im-trying-to-create-special-elements-on-a-website/ http://www.digitalfamily.com/dreamweaverblog/2008/07/im-trying-to-create-special-elements-on-a-website/#comments Tue, 08 Jul 2008 19:08:50 +0000 janinewarner http://www.digitalfamily.com/dreamweaverblog/?p=49 Dear Janine,

A few weeks back you were kind enough to take the time to respond to a few questions regarding Dreamweaver, so I thought I would try again with another couple of questions. I’ve been pulling my hair out “all” weekend trying to create similar elements to a website my client likes (www.touchtunes.com). I can’t seem to figure out how to do them with CSS.

I would like to create a navigation bar with drop-down submenus similar to what they have (without using AP divs). Does this look like something that was created in Flash? I copied the code from the page and opened it in Dreamweaver. It looks like it was done in Dreamweaver, but most of the format seems to be from external style sheets.

On a linked page from that same site, I would like to create similar rollover links. In the past I’ve done this by creating an initial image and rollover image in Photoshop, but I’m trying to do these by using “unordered lists.” I can change the text color easily enough, as you showed in the Total Training videos, but I can’t seem to figure out how to change the background color like they’ve done.

I certainly don’t want to take too much of your time. If either of these questions are covered in the advanced Total Training videos, please let me know. I learned quite a bit with your Essentials discs.

If there are any keywords or topics in the Dreamweaver manual that you could suggest, that would be great too. Thank you so much for your time. Any direction would be greatly appreciated.

Chris

Hi Chris,

You can create a drop-down menu like the one at Touchtunes by using the Spry menu features in Dreamweaver. You could also create something like this in Flash, but most sites that have menus like these use JavaScript, which is what Dreamweaver uses when you use the Spry menu. You’ll find this feature covered at the end of my Advanced Dreamweaver CS4 training video (www.DigitalFamily.com/videos) and you’ll find a free written tutorial on how to add drop-down menus with spry in the Dreamweaver section.

As for changing the background color when you set up links with a UL tag, add a Background category setting (using the New CSS Rules dialog) to your a:link and a:hover styles and you should be able to control the background color in your rollover.

All my best,
Janine

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

I have viewed Total Training for Dreamweaver CS3 and enjoyed your tutorials.

I viewed your tutorial on image swapping. I am interested in swapping an image for a small Flash movie. Can this be done and if so, what is the best way? I edited the video in Premiere Pro CS3 and exported it to a .flv file. I can create the movie (.swf file) in Flash CS3, but I’m not sure how to make it work in Dreamweaver.

As you can probably tell, I am a novice. Thanks in advance for any suggestions and taking the time to read this email.

Bob

Hi Bob,

Thanks for watching my video. If you just want to have a still image appear before the video starts playing, the simplest solution is to add the still image as a frame to your FLV file so that it displays before the video is watched. You’d add the frame in your video editor, export the FLV file, and then insert the file into your site by using Dreamweaver.

On my Web site, you’ll find written instructions for adding Flash and Flash video files (note they are different) – at www.DigitalFamily.com/dreamweaver.

I hope that helps and I wish you all the best,
Janine

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

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.

I created a .swf file from Flash and placed it into a Dreamweaver file. All the photos in the animation are not showing up, and some of them are there but cut off (not the whole image)?! If I open that .swf file up directly or with my browser it looks fine. Any suggestions? There is also some fading of photos and also a “movie clip” button in the Flash file.

thanks!!
Sue

Hi Sue,

If you’re having trouble getting a Flash file to play properly in a page created in Dreamweaver, you can try adjusting your Flash settings in Dreamweaver. If you change the size, you may avoid cutting off images, and if you adjust the quality control options, you may solve some of your other problems.

Open the page with the Flash file in Dreamweaver, click to select the Flash file, and then use the options in the Property inspector at the bottom of the page to adjust quality, size, and other settings, and you may be able to get better results.

Hope that helps,
Janine

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