If you choose Appearance (HTML) DW uses the HTML attributes, which are no longer recommended.

Janine

Even if you haven’t read those authors, you can quickly appreciate that Marquez was a master at magic realism, which is quite different from the science fiction and horror that Stephen King is famous for in books like Carrie and The Shining. To further complicate matters, the way many of us write CSS has changed over time. William Shakespeare is still considered a master, but few teachers would recommend you write the way he did anymore. Similarly, even well-written CSS, if it’s a few years old, may read like Old English today.

ThemeForest and Woo Themes are considered some of the better sources for templates and WordPress themes, but as soon as you find yourself reviewing someone else’s CSS, you have to take into consideration that every author has their own style, that there are many ways to create the same design effects with CSS, and that if you really want to write the cleanest, best code possible, you’ll spend hours on the details — in much the way a great writer can spend an afternoon looking for just the write word.

The more you learn about CSS, the better you’ll get at writing (and reading) it, but at the end of the day, some of the differences in style sheets come down to, well, style.

You can learn more about the basics from my CSS training videos.

Janine

I just watched your class on E-Commerce on Kelby Training.  It was an excellent class for someone like me, but  I am experiencing a little difficulty in adding the Google checkout to my site. I have no problems adding the code for the items, but that 2nd piece of code that you said to put at the bottom of every page is causing me problems. I am using iWeb and I am not quite sure where to insert that code, or if it is even possible.

Thank you in advance,

Joe 

Hi Joe,

Thanks for the kinds words about my training videos. I don’t know much about iweb specifically, but some web services — especially those that over simply web design and limit you to templates — make it difficult, or even impossible, to get to the right place in the code to use Google Checkout.

If that’s your situation, you may need to use PayPal instead. Unlike Google, which gives you a small piece of code for each button, and another small piece of code to put at the bottom of each page, when you use the shopping cart service from PayPal, you get all of that code in one big chunk. I still prefer the interface of Google Checkout, but in your case, PayPal may be your best (or only) choice.

I know many people prefer to learn with training videos, but I also have a written tutorial on how to use Google Checkout that may help you find the place you’re having trouble.

I hope that helps you find the right solution for your website and I wish you all the best with your online sales,

Janine
DigitalFamily.com

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’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 have tried everything under the sun to get my site to look proper in IE on the PC. Every other browser looks fine, but in IE there is always a “gap” between the top div and the middle. The bottom looks fine.

Any suggestions?

Thanks in advance!

Sincerely,

Ronnie

Hi Ronnie,

Unfortunately, CSS differences in IE are a frustration for most Web designers. Microsoft just hasn’t followed the rules the way other browser makers have. As a result, to get your designs to look exactly the same in most Web browsers, you’ll have to move on to some advanced CSS techniques.

On my site, you’ll find links to a few places where you can continue your training. You’ll find instructions there to get you started with CSS and how to edit a CSS layout in Dreamweaver — they are designed to look good in many browsers from the start and can help you avoid problems.

You may also appreciate my article about how to test your web pages in many different web browsers at once, including Internet Explorer, Firefox, Safari, Chrome, Opera, and more.

I wish you all the best with your CSS,
Janine

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

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

Thanks for all your great work teaching Dreamweaver! I’m looking for the simplest way to develop a sitewide search engine in which the user types into a blank field and sitewide search results appear. Can this be done through any Spry widgets inside Dreamweaver?

Thanks,

Kendra

Hi Kendra,

One of the easiest ways to add a search feature to a web site is to use Google’s search tools. You can learn about their service at this URL: http://www.google.com/sitesearch/

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’m writing in part to tell you how much I’m enjoying your book, although I’m still very new to the concepts, the Dreamweaver program, and web-design in general.

I’m also asking if you might have any recommendations on sources for Dreamweaver templates. I’ve downloaded a some from various Web sites, and I’ve found that they are often not developed with the neophyte user in mind. Trying to modify them involves a fair amount of trying to figure out what the original designer/developer was doing.

Any help would be appreciated.

Thanks,
Brian

Hi Brian,

One of the most confusing things about templates is that there are so many different kinds. For example, if you download a template designed for Flash, it won’t work in Dreamweaver. Similarly, many templates that are designed for blogs use PHP and require advanced programming knowledge and a web server.

Even if you do get a template designed using Dreamweaver’s template features, it can be difficult to know what and how to change things such as colors and fonts if you want to alter the template design.

Most good pages are designed with CSS these days, and if you learn CSS, you can probably edit most of the well-designed templates you can find on the web.

If you’re still new to design, you may appreciate a book I wrote called Web Sites  For Dummies — it’s part of the new Do It Yourself series it combines templates I created in Dreamweaver complete with instructions for how you can edit them in Dreamweaver.

When you buy the book, you get access to a special part of my Web site where you can download the templates.

You can find the book in the The Digital Family Bookstore.

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

I’m hoping you might be able to help me again. I’m working on a dynamic Web Template and everything is going well. Everything on the page is static. I have several editable regions either in a layer or a div. There is a footer at the bottom of the page in another div. I want it set up so that every page will look the same, meaning that as I fill the editable region more and more, the footer will just keep pushing down and sitting at the bottom of the page. When I’m working on a page, it works and looks exactly as I want it to. But when I view it on the web, the footer jumps up, overlapping the editable region as if it can’t read that there is something in its path.

Hopefully you’re able to understand what I mean. Do you know what I’m doing wrong?

Thanks for your help,
Megan

Hi Megan,

I believe I do know what you mean. Try this: Open the style you’re using on the Footer div by double-clicking on it in the Styles panel to edit it in the CSS Rules dialog box. From the category list, choose Box and then look for the field labeled Clear. In the Clear field, use the drop-down menu and select Both.

What this does is add a rule to the style that requires the browser to clear anything above the footer so that it always stays at the bottom. This is necessary when you use floats in your other styles.

Hope that helps,
Janine

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