Hello Janine,

I’m a capable freelance print designer starting to learn Dreamweaver. One of the first real-world tasks I have set out to master is creating an email message. I loved your article in the current issue of LAYERS, but have had issues inserting images. I have looked on the Adobe boards for similar problems but haven’t been able to find an answer. I’m not sure if you take questions like this, but I would greatly appreciate your help.

My problem is my Photoshop .jpg is not showing up. I have loaded the image in my mac.com gallery, but when I place the link for this file in the Scr field of the Property Inspector, all I see is a broken .jpg icon. Switching to Live View, the area shows a blue box with a question mark. The gallery in mac gallery is unlocked and not password protected. What am I doing wrong?

Thanks for your great article.

Best Regards,
Eileen

Hi Eileen,

I do try to answer questions like yours, but it’s a little hard to diagnose from what you’ve written here. The only “trick” to all this is to make sure that the photo is online and that the path you insert into Dreamweaver takes you to the image.

Here’s a test you might try: Copy the URL for the image directly into a web browser and see if that takes you to the image. If not, you don’t have the right URL. I’m not sure how the Mac gallery sets up the path to images, but if you continue to have trouble, you might try copying the URL for an image (any image) from elsewhere on the web and make sure you can get that to work. It could help you identify what’s going on in your gallery.

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

Dear Janine,

Thanks very much for your response. I did as you suggested with testing the image URL and was able to navigate correctly, but still had the same issue. I went back to read the directions, taking the “full image URL” direction a little more seriously. I used the control + click on the image and selected “copy complete URL” on my Mac, pasted this, and it worked. Previously, I had been cutting and pasting the URL from the gallery window, which looks like it is missing a few numbers.

I now know how very exact I must be in using these new tools. Thanks for the lesson and for helping me get started.

Cheers!
Eileen

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

Hi Janine,

I was watching your new advanced CSS on Kelby Training last night and it brought up some questions that I hope you will answer for me. I have been a coder for a very long time and much of my work nowadays involves PHP code and MySQL. I have been using the <div> tag and CSS for a very long time to control layouts, but I have to admit that I have not used CSS to format my tables. I would have to presume that that is why my tables look like crap. Your videos on CSS using Dreamweaver have inspired me to let go of table properties and try to use CSS; however, I have a couple of unresolved issues, one that came up in your advanced lesson and another that you didn’t raise.

First, you bordered the <td> tag on the right and bottom, but I noticed what appeared to be a double border on the final column and the last row. How do you clean that up? Second, very often, especially when I construct a form, I need to vary the alignment of the columns. For example, I like the field IDs right-justified and the form fields left-justified. How do you do that? Maybe I shouldn’t be using a table for my forms at all — what do you think?

Before I forget, thank you for doing a great job presenting these two lessons on CSS. My main focus for Kelby Training is my photography, but I was bored one evening and saw your lovely face and wondered what kind of lessons you taught. I thought, “I could use a refresher course in CSS, why not?” You have a soothing voice and a very clear style of instruction that I really appreciate. You also cleared up the use of “clear.” That one has mystified me since the beginning. I usually make it work, but to be honest, I don’t know why or how and I never thought about using it in a <br  /> tag. Great idea! You also made me see just how cool Dreamweaver is, and you’re tempting me to drift away from coding just a little to try it out.

I look forward to hearing from you.

Thanks,
Bill
Vancouver, WA

Hi Bill,

Thank you for your kind words about my new Kelby Training videos on CSS. I’m pleased to know that I’ve inspired you to use CSS, even when you create tables, and that you’ve come to better appreciate some of the advantages of using Dreamweaver to develop page designs.

You ask an excellent question about table borders. Here are a couple of alternatives you may want to consider:

1. You can alter the styles I show in my video to prevent the double borders by setting the Table <table> border to only appear on the left and bottom of the table and the Table Data <td> border to only appear on the top and right. That still won’t create a clean, solid border, but you won’t get the doubled border.
2. Another alternative many people use is to define a border for all sides of the table tag (which creates a border around the outside of the table) and then use a background color for every other row within the table. This creates a table with colored rows instead of borders, a great way to distinguish the rows of content without using a border on the table data cells, which as you’ve noticed can be problematic.
3. If you really want a clean, solid border like you’re used to, you can use the border attribute of the table cell (it is safe to assume the border attribute will continue to be supported by browsers for many years to come, even if it doesn’t conform to the latest, strictest standards). If you go with this option, I still suggest you use CSS instead of HTML attributes for everything other than the table border.
4. As for applying different style rules to table data cells, the best option there is to use class styles. If you use this approach, create one style called something like .align-left and another called .align-center, and then the HTML code would look like this:

<table>

<tr>

<td class=”align-left”>content</td><td class=”align-center”>content</td>

</tr>

<tr>

<td class=”align-left”>content</td>

<td class=”align-center”>content</td>

</tr>

<tr>

<td class=”align-left”>content</td>

<td class=”align-center”>content</td>

</tr>

<tr>

<td class=”align-left”>content</td>

<td class=”align-center”>content</td>

</tr>

</table>

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

Hi Janine,

I’ve been creating posts in Dreamweaver and then copying and pasting them into WordPress.  I love being able to use Dreamweaver’s more sophisticated editor, but WordPress keeps deleting my paragraph and break tags. Is there a way to prevent WordPress from stripping out my line breaks?

It’s making me crazy. . .

Jeff

Hi Jeff,

I know exactly what you’re talking about, but it has nothing to do with Dreamweaver. That behavior is part of TinyMCE, which is the editor running behind the WordPress engine. It’s a common problem, so common there is a relatively easy fix.

Download and install the plug-in called TinyMCE Advanced, and you can change this annoying WordPress behavior. I recommend TinyMCE Advanced for every WordPress site.

To stop WordPress from stripping out your break and paragraph tags, open the Settings page for the plug-in after you install it. At the very bottom of the Settings page, you’ll find a check box that says “Stop removing <p> and <br /> tags when saving and show them in the HTML editor.”

Check that little box, and keep your sanity.

Janine

Hi Janine,

I’m trying to decide how far I should upgrade. I’m still using CS3 and I can’t decide if I should spring for CS5 or just purchase CS4 at a discount now that CS5 is released.

~Tom

Tom, CS4 had a few enhancements that were cool, but CS5 is a more significant upgrade, so if you can manage the full upgrade, I highly recommend it.

Follow this link to find my list of the Top 10 Reasons to Upgrade to Dreamweaver CS5, or follow this link to watch my video on the coolest new features in CS5 on the KelbyTraining Web site.

Hope that helps you make the best decision,

Janine

Hey there 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

Hi Janine,

I wonder if you could help me with the following: I’m new to building Web sites (I started 3 days ago!) and the problem I have is small but annoying. When defining rules for links, I am able to change the “hover” color but not the link color. When previewed in IExplorer, the link color insists on being purple when I’ve defined it as blue. Can you tell me what I’m doing wrong?

Hope to hear from you.
Regards,
Justin

Hi, Justin,

I’m guessing you’re seeing the visited link color in IE because you’ve already “visited” those links.

There are four color settings for links and you need to change all four. And keep in mind that you can use the same color for both active and visited links if you don’t want the color to appear to change after someone has visited the page.

On my website, you’ll find a tutorial on how to use CSS to create styles for links formatted in an Unordered List, which is a popular way to create navigation bars. Follow this link to the tutorial, where you’ll find more details about how to define styles for each of the four link states.

Best regards,
Janine

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.

If you really want to learn the best and latest, advanced CSS, I recommend AListApart.com for high-level CSS tips, but you won’t find much help with Dreamweaver there.

You may also appreciate my article about online browser emulators, which can help you compare your site on different browsers and even different versions of the same web browser.

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.

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

Hi Janine,

I’m currently working through your book Teach Yourself Visually
Dreamweaver and really enjoy the approachable instructions and text.

The question I have is around the screenshots you have used in your
book. I would like to produce similar books and training
manuals/handouts on other IT products and am unsure about the copyright
issues I may face in doing so.

Did you have to get written permission from Adobe, Macromedia and Microsoft in order to use screenshots of their products and if so, was it necessary to pay any ‘royalties’ or copyright fees for the privilege??? Or is this type of use covered by fair use or another such copyright exclusion?

Kind Regards
Sally | Librarian

Hi Sally,

You ask a great question, but the answer may surprise you. The software companies encourage authors and others to use screenshots of their programs,  books, and training materials. I imagine they realize our materials help people use products.

The trick for me with permissions has been making sure I have the rights to the images, designs, etc., that I feature in the books.

I like to use real web sites, but more and more I create sites specifically for my training videos and books so that I don’t have to worry about permissions. I do have a formal letter of agreement I use, but not all publishers even require those anymore, especially not for all the sites you might feature.

I’m not an attorney (insert generic disclaimer) but as I understand it, one screenshot of Google to illustrate the search engine probably doesn’t require a permission letter,  but a lot of screenshots of the Disney site showing actors’ faces and characters such as Mickey Mouse could get you in trouble.

Any time I’m using photos of kids,  I’m very careful about permissions (most of the kids in my books are my own nieces and nephew . I also ask anyone I know before I use their photo in a book.

I really love my work and there are many opportunities in the world for creating these kinds of materials, so I’m happy to help. I also have a soft spot in my heart for librarians, who have helped me out with more than one big research project over the years.

Oh, and my favorite program for taking the screenshots you need in a book like that is SnagIt by Techsmith. (It will save you much time, and you may have noticed those books have a lot of screenshots.)

Hope that helps, I’d love to know more about what you want to write about.

Janine

Dear Janine,

Please offer your recommendations for creating dynamic websites for those of us without ColdFusion. I have CS3 Master Suite.

Thanks for a terrific job on the Dreamweaver DVDs.

Tom

Hi Tom,

I completely understand if you don’t want to use ColdFusion. PHP and ASP.NET are more popular options, but many people teach the advanced features in Dreamweaver using ColdFusion because the way all three of these technologies works with Dreamweaver is similar.

That said, these days my best recommendation is that you don’t need to reinvent the wheel to create a dynamic Web site. A few years ago, the best option was still to build your own site in Dreamweaver; now I generally just use Dreamweaver to customize and build templates for sites and use programs such as WordPress or Joomla to add the dynamic functionality.

Although WordPress was created as a blog program, it’s increasingly used as a content management system to create complex Web sites. Joomla is more complex to start with, and more complex to use, but also a popular choice, especially for a site that will have many sections and subsections, such as an ezine. Both are open source, so they’re free.

To learn more about the difference between a web site and a blog, read this article in my Dreamweaver section.

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

Janine