Unfortunately, different web browsers display text and HTML differently, and Internet Explorer is one of the worst, and most notorious, for bad code display. What most web designers do is test their pages in a variety of web browsers and work to make sure their pages look ‘good enough’ in all of them. Because the text size and spacing can vary from browser to browser, it’s challenging to get exactly the same display in all browsers. And if your concern is the way text wraps, it’s almost impossible. That’s because your users can change the text size in some browsers, and because text size is different between Mac and Windows computers. Here’s an article I published on my web site addressing this issue. It may help you understand why this is a challenge for all web designers. You’ll also find links to a few online testing tools that can help you make sure you site looks good, even in web browsers you may not have on your own computer. http://www.digitalfamily.com/dreamweaver/resources/web-browser-test.html I hope that helps and I wish you all the best, Janine

The answer to how to create a gallery in a web page in Dreamweaver isn’t as simple as you might expect. There were some automated tools for creating galleries in previous versions of Dreamweaver, but they had limited options and used an old version of Flash. Those features were cut from the program a couple of versions before the current CS5.5.

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

Good question. Dreamweaver includes the Alt text field when you insert images, but it has no easy way to add the title attribute, and that’s what you need if you want the text to appear when you roll a cursor over an image in IE.

Here’s an example of what it looks like:
<img src=”photo.jpg” width=”250″ height=”360″ alt=”My Great Photo” title=”My Great Photo” />
Note that the code: alt=”My Great Photo” is alternative text, which is recommended because this text is used by screen readers for the blind that ‘read’ web pages to people.
Adding the code: title=”My Great Photo” is not redundant, but you don’t have to use the same text for both. The title text will appear when you roll a cursor of the image.

Hope that helps,
Janine

Special thanks to Dale Ellis dale@ellismultimedia.com for this guest post. I hope it saves you the grief he suffered:

I recently redesigned a site for a client with WordPress and hosted it on GoDaddy. Unlike a standard blog where we would be starting off from scratch, there was already an existing site, hosted on another service, with a lot of content so we used GoDaddy’s Preview DNS feature to give us time to put in the necessary content before switching over to the new site.

This feature allows you to preview your site on a separate URL with previewdns.com appended to the normal domain name.

Several days after launching the new site, many of the pages suddenly appeared with broken image link indicators. It turns out that the previewdns.com domain will get assigned to any images you upload in the WordPress database so, when the Preview DNS expires, WordPress will be looking for the images in a domain that no longer exists.

GoDaddy’s technical support, while usually very good, was not able to provide us with an easy solution to this problem. Their recommendation was to re-upload the images to the site under the new, real domain name – but at that point that would have amounted to uploading a few hundred images again and, through the WordPress system, would have cost us a lot of time and effort.

After doing some research it turns out that there are a couple of fairly quickways to correct this problem, but they require performing the equivalent of afind-and-replace command on the MySQL database that WordPress uses. These processes can be risky so you may want to backup your WordPress database before performing these procedures (http://codex.wordpress.org/WordPress_Backups)

The first method, which I consider the easiest and preferable way, is to download and install a WordPress plug-in called “Search and Replace,” which you can find at http://wordpress.org/extend/plugins/search-and-replace/. This should allow you to search for and replace all the instances of http://www.[yoursitedomain].com.previewdns.com with http://www.[yoursitedomain].com.

If the plug-in method doesn’t succeed in eliminating the extra “previewdns.com” from the URLs, the next method involves operating on the MySQL database at a lower level. The first thing you’ll want to do is make sure that WordPress is that the domain name is updated in the WordPress’ options. Two good sources for instructions on that are GoDaddy’s help system (http://help.godaddy.com/article/5712?) and Sallie Goetsch’s blog (http://www.wordpressasylum.com/previewdns-can-bork-your-wordpress-installbut-theres-a-fix/)

The second thing you’ll need to do is replace all the instances of the
previewdns.com URL in the database with the new, normal URL for your site(replacing http://www.yoursitedomain.com.previewdns.com with http://www.yoursitedomain.com) Full, detailed instructions on how to do that can be found at Lorelle Van Fossen’s blog at http://lorelle.wordpress.com/2005/12/01/search-and-replace-in-wordpress-mysql-database/

That took care of the problem for me – saving hours of rework – and it should for you, too!

– Guest post by Dale Ellis dale@ellismultimedia.com

Domain registration and hosting are two separate services. Many companies offer both, but they are completely different services. Here’s a metaphor that may help you understand the difference — it confuses a lot of people.

Think of a hosting company like an apartment you rent, a place where your web site can live.

Think of the domain name like your phone number, one that you can transfer (or forward) to a new apartment if you ever needed to do so.

Some web hosting services, such as Weebly, provide a very limited hosting service that only lets you use their templates in their system. You could think of that like getting a furnished apartment you’d rent by the week.

A custom web site created with a program like Dreamweaver or WordPress, is far too complex for a web hosting system that restricts you to the templates on their site.

Web hosting varies the way apartments do. When you sign up for web hosting at a new company like Dreamhost.com, you get a cheap apartment, but one it’s still one that you can furnish yourself. When you sign up with a company like Rackspace.com, you got a much nicer apartment, but you pay for the view (or in this case, the faster, more reliable service). These and many other web hosting services let you upload your own web site to their web server or install a wordpress blog, much like you would furnish your own apartment and hang art on the walls.

You can use the same company to register your domain name and host your web site, or you can use two different companies. If you use two different companies, then you then have to essentially transfer your domain from your domain registrar to your web host, much like you might ask the phone company to move your a phone number to your new apartment. In the case of a domain, however,  it’s usually called changing DNS. If you ever want to change the company where you registered your domain, that’s kind of like changing phone companies while keeping the same phone number and it’s a bit more complicated than just changing DNS.

For more tips on how (and where) to register a domain name, check out the article: Can Anyone Register a Domain Name?

For more tips on web hosting, check out the article: Choosing the Best Web Hosting Service.

Hope that helps,

Janine

When I send people my Web address (URL) or print it on my business cards, should I use all lowercase, or can I write it like I would in a sentence and use the caps?

Answer:

In any URL, caps are optional up to the .com part. Addresses are only case-sensitive after the .com (same goes for .org, .edu, and other types of URLs).

When I’m advertising a Web address or URL, I like to use caps in the URL because most web site names are easier to read that way.  I recommend:

MyDomainName.com

or for my site: DigitalFamily.com

However, if anyone types your domain in all lowercase, they’ll get there just fine. (Some publications prefer that style and will only print URLs in all lowercase, but it’s not necessary.)

Both DigitalFamily.com and digitalfamily.com will take you to the same web page, but if you have an address that extends beyond the .com part, the case does matter.

For example: DigitalFamily.com/Books and DigitalFamily.com/books are not the same address — the one with the capital B will not work.

The technical reason is that most web servers are case-sensitive and the part of the address that comes after the .com is based on the name of the folder or the filename that page resides in on the server.

For the same reason that links within a web site should match the case of the name of the file they link to, the address after the .com needs to match the case of the specific file or folder.

Think of a long URL as being one long link to a page within a site. In this example, DigitalFamily.com/books takes you directly to a page on my web server that is in a folder named “books.” This won’t work with “Books” because I didn’t use a cap when I named the folder. Most web designers use lowercase after the .com consistently so they can easily keep things the same, but if you do use mixed case on folders and filenames, you need to do the same in the URL (as you see in this next example).

I could have linked specifically to the page about my newest book, Mobile Web Design For Dummies, by using this URL: http://www.digitalfamily.com/books/mobileWebdesign/index.html.

And here’s your bonus lesson for the day

Name your main pages index.html to create shorter sub-URLs.

The URL http://www.digitalfamily.com/books

goes to this page: http://www.digitalfamily.com/books/index.html

If you name the main page in any folder index.html, you can shorten the address and just use the folder name. That makes it easier to give the URL out in print, and because most web servers are designed to “serve” the index.html page first, you can more easily set it up.

Save people typing the extra long addresses and use index pages to take people directly to subsections of your sites.

Oh, and if you have a blog, use an SEO plugin to help create clean URLs. Short URLs are better for humans and computers…

In trying to get to know Dreamweaver, I was moving the panels around. The Insert panel subsequently disappeared from the space on the right. Its contents seem to be strung across the top of the screen, but there is no Insert panel. When I click on Windows and check Insert, the contents across the top appear and disappear, but I cannot get the panel itself to reappear on the right above the CSS panel. Any suggestions?

I admit to feeling foolish asking you such a mundane question, but I would really like to learn Dreamweaver, and I am extremely frustrated by this confusing situation. I have both of your books, Dummies and Visually—they are quite clear compared to some others, which seem incapable of saying anything straightforwardly.

Enjoy the weekend.
Carol

Hi Carol,

I understand your problem and how not finding any of the panels makes it hard to do anything else.

Here’s an easy way to get them back. Choose Window > Workspace Layout > and then choose any of the options. Each one will change the entire layout of the program, moving panels in a variety of configurations. You can even set up your own layout by opening and closing panels and then saving it.

But if you just want to get everything back so you can keep using the program the way I do in the book, choose Window > Workspace Layout > Designer. (Note that there is also an option to Reset Designer if that was the last option you chose.)

That should get the program back to a place where you can use it. I have a full class on setting up the interface in my video training series. If you visit DigitalFamily.com, just click on any of the links for my online video training and you’ll discover how to subscribe. I find books make great reference, but learning design concepts when you can see what the instructor is doing in a video is much easier.

No matter how you continue to learn Dreamweaver, I wish you all the best,
Janine

Hi Janine,

Could you please show me how to change a standards-based vertical navigation bar into a Spry menu bar? In other words, how to add submenus to a standards-based vertical navigation bar?

Regards,
Coddie

PS: I’m working on a template.

HTML Code:
<ul>
<li><a href=”#”>Item 1</a></li>
<li><a href=”#”>Item 2</a></li>
<li><a href=”#”>Item 3</a></li>
<li><a href=”#”>Item 4</a></li>
</ul>

Change to

<ul id=”MenuBar1″>
<li><a class=”MenuBarItemSubmenu” href=”#”>Item 1</a>
<ul>
<li><a href=”#”>Item 1.1</a></li>
<li><a href=”#”>Item 1.2</a></li>
<li><a href=”#”>Item 1.3</a></li>
</ul>
</li>
<li><a href=”#”>Item 2</a></li>
<li><a class=”MenuBarItemSubmenu” href=”#”>Item 3</a>
<ul>
<li><a class=”MenuBarItemSubmenu” href=”#”>Item 3.1</a>
<ul>
<li><a href=”#”>Item 3.1.1</a></li>
<li><a href=”#”>Item 3.1.2</a></li>
</ul>
</li>
<li><a href=”#”>Item 3.2</a></li>
<li><a href=”#”>Item 3.3</a></li>
</ul>
</li>
<li><a href=”#”>Item 4</a></li>
</ul>

Hi Coddie,

Unless you know JavaScript, HTML, and CSS very well, doing your own editing of a menu like the one you show in the email will be very challenging.

If you don’t wish to learn how to write all of that code, I suggest you consider using the Spry navigation options in Dreamweaver. Here’s an article on how to create a drop-down menu in Dreamweaver:
http://www.digitalfamily.com/dreamweaver/Spry-Tutorials/spry-drop-down-menu.html

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

Hello Janine,

I am working my way through my Dreamweaver CS3 Total Training lessons, and I am stuck on this one issue in Lesson 6, Topic 7. I do great up until I apply the style to float the Story div left. Once I apply that, my Sidebar content jumps out of the Sidebar div and is in the Story div. I’ve been spinning my wheels on this since yesterday. I’ll attach a few screen captures for you (not sure if they’ll help). I also see the empty Sidebar div between the story and sidebar content in the code.

One other problem I am having is that my pages will not open in Firefox. I can preview in Opera and Safari, but the pages are jumbled though they look perfectly fine within the program. I am running CS3 as I said, but with current browsers. Could this be a compatibility issue?

Thank you so much for any help you can send my way!

Kitty

Hi Kitty,

Good questions. I can see you’re getting into more advanced issues as you combine CSS styles, but that’s also where you can start running into conflict. As you get more advanced with CSS and Web design, you’ll quickly learn that there are multiple ways to get into, and out of, style conflicts:

Here are a couple of things to check for:

If you align a div to the left or right (a common way to create a multi-column design), beware that the alignment of one element can affect others. Also note that the positioning of open and close div tags is important. I often change to Split View, as I can see you’ve done in this screenshot, so I can make sure I have only the content I want in a div tag. Sometimes just copying and pasting the content you don’t want in one div into another can solve a problem.

Here’s another scenario I’ve run into: I often want an image and a caption together, aligned to the left or right so text wraps around both of them. If you’re just aligning an image with a text wrap, a simple align-left or align-right style is handy, but if you want to include a caption, you may want to create additional styles. In that case, I usually create two class styles named right-caption and left-caption.

There are a few ways to apply these styles and make sure you have all the divs you need in the right place.

You can first insert the div, then assign the right-caption class style, and then insert the image and text within it. The style for the div that positions the image and caption should have a width set to about the width of the image and an alignment to the right or left (set as Float=right or left in the Block Category of the CSS Rules window in Dreamweaver).

One thing to watch out for. If you’re like me and you start building a page by putting some text in a div and then adding an image and aligning it, and then you realize you want to add a caption… well, at that point, you can insert a new div and drag the image into it, or you can select the image and choose Insert>div set to Wrap About Selection and even apply the class style as you add the div. That trick works beautifully when it goes well, but sometimes when I do that, Dreamweaver grabs some of the text already on the page — like it’s trying to help me out but it didn’t quite understand what I had in mind. If that happens, I just use code view to copy and paste the text where I want it, making sure the caption is in the div with just the image, and the rest of the text is outside that div so it can wrap about the image and the caption.

Advanced tip: If you’re aligning an image with a caption and you’ve already aligned the image to the right before you add a div around the image that is also aligned, sometimes that’s just too much floating to the right. Remember, you can (and should) remove styles you don’t need as you add new ones — that’s always good practice.

If you align an image and caption with a class style that has a float right, for example, take a moment to remove the float-right style that you already applied to the image (you can select an image and use the Style drop-down in the Properties Inspector at the bottom of the screen to change the class style setting to None). This removes the style and often solves style conflicts.

As for the differences between Firefox, Safari, and Internet Explorer, you’ve hit on the biggest challenge of Web design. My best advice for that is to write clean code, watch out for conflicts, and test in as many web browsers as possible.

Here’s a link to an article about testing browser differences:
http://www.digitalfamily.com/dreamweaver/resources/web-browser-test.html

I hope that helps you with your more advanced questions, but let me know if you want to go another round.

And finally, I’m thinking about offering an Advanced Class for students like you. Would you be interested in enrolling in a small online class with me and a few other students at your level? Please let me know.

Thanks,
Janine