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

Hi Janine,

I got your Total Training for DW8 probably around 2007 and I really didn’t spend much time watching it. The only thing I did with DW was create part of a site for someone, using tables, before she finished it herself by using a simple program for non-designers, and for practice, I replicated one of your pages in the tutorial — the one with the green background about flowers with a newsletter signup. That was about a year ago, and I’ve done nothing with DW since then.

I recently became interested in the web design again as I run a sideline moving services company, basically loading/unloading for the do-it-yourself moves. I receive most of my leads via Craigslist. So I also have some other web tutorials by Lynda.Com, one of which is “HTML Essential Training.” I also got this one a few years ago and hardly watched it at all. I started watching several of the chapters this past weekend, and I tried creating a more advanced Craigslist posting with columns, using the <PRE> tag. It didn’t exactly come out as desired, with centering, bold, etc. From looking at the code view of a web site, I replicated parts of it and got the Craigslist posting exactly the way I wanted it to appear, using a div class panel. And, mind you, I do not know CSS at all.

What I’m getting to is, since doing this, I got reinterested in pursuing doing something with web design, even if only as some kind of freelancer, and maybe just getting some jobs working for someone else who has some side gigs, at least as a start. Having said this, if I want to get serious about doing something with web design, am I better off learning to hand-code, obtaining a more current Dreamweaver version as you suggested, or a combination of both?

Thanks again,
Ken

Hi Ken,

Dreamweaver is by far the most popular Web design program among professional Web designers. That said, most designers find that learning at least basic code is helpful, even if you use Dreamweaver. Indeed, most of us use the Split View in Dreamweaver, which lets us take advantage of all of the cool design features in Dreamweaver while still keeping an eye on the code behind the scenes. Once in a while, I find fixing something in Code View is more efficient, but most of the time, I prefer to use Dreamweaver’s design tools.

I definitely encourage you to upgrade the program if you want to improve your skills. Not only has Dreamweaver improved in the last few versions, but the way most of us design Web sites has changed. That means that books and training videos for the latest versions are written with the latest strategies. If you can, get the CS5 version of the program and consider subscribing to KelbyTraining to watch my videos on Dreamweaver. You can easily watch all of my videos in a month’s time, and a one-month subscription is about the same price as a book. You’ll find more information about my videos, as well as several free written tutorials for Dreamweaver CS5, on my site at www.DigitalFamily.com.

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

Hi Janine

I have a question about FULLSCREEN WEBSITES in Dreamweaver CS4. How can I design my site so that no matter what size the browser window is, it will be filled entirely? I like that my website will look the same on all types of monitors.

I have a SWF File in Dreamweaver. Shall I do some coding in Dreamweaver??

I have found this at Google: <table width =”100%” border=”0″
Is that right?????

Can you help me with that?

Thanks
Troels
Denmark

___

When you create a web site, you always have to set a width. These days we usually use 970 pixels wide, assuming that most people have a computer set to at least 1024 by 768 resolution.

If you want the design to fill the entire screen, you set the width to 100%. You can do this with a table or with CSS and get a similar effect. At 100% the width will change depending on the size of the monitor. The challenge with this approach, and the reason many designers don’t use it, is that monitors range from very small to very big these days and your site may not look good at all sizes. If you do use this approach, you should test your site on many different sizes to see how the design is affected. For example, if you have a lot of text on a page, when the size is set very wide, the text can be hard to read. Similarly, if you have multiple columns in a design, you can have strange results when the columns are bigger or smaller.

A variation on this is to set a maximum width and a minimum width so your designs are not spread so far on the largest screens and things do not get too crowded on the smallest screens.

If you are using Flash to design your site, how you set up your Flash files makes a difference. Because Flash uses vectors, it can adjust to different size screens very well, but only if you design well from the start. Again, testing on many different resolutions is a good idea.

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

Hi Janine,

I have now finished all of your courses on the Kelby training site. Loved them all. I hope you don’t mind me asking you a quick question? I think its the sort of question that an expert like you has to answer; I cannot find it in the FAQs.

When creating divs in a brand new page that will contain various content, such as headers, footers and images, etc., is it a good or bad idea to create them with absolute positioning? I discovered this by accident and it seems that by using it I can create lots of divs and then drag and resize them into any position I want on my page. This seems to be a lot easier than using float left and clearfloat, etc. Am I doing the wrong thing? Will it cause me problems later?

Many thanks,
Tony

Hi Tony,

Thanks for watching my videos. You ask an excellent question, and I completely understand why using divs with absolute positioning seems like such a great option, but there are a number of problems with absolute positioning on the web.

AP Divs, as the name implies, are <divtags that include styling information that adds absolute positioning. That means when you place an AP Div in a Web page, it stays where you put it, no matter how big the user’s browser window is. This may seem like a good idea at first, and AP Divs were popular among some designers for a while because they are so easy to use and so similar to many of the features in desktop publishing programs (such as Adobe InDesign and Photoshop). But the inflexible layouts created by AP Divs don’t adapt well to the changing environment of the Web, where different-sized monitors and other display variations can lead to cut-off text and other undesirable results in AP Div-based designs.

For example, you can’t center a design created with AP Divs, and depending on how you set them up, if the content in the div exceeds the size of the AP Div, it can get cut off or overlap in undesirable ways. Some designers use AP Divs on occasion to add immovable elements, such as a logo anchored to the top left of a page. They are also used with JavaScript for advanced features such as drop-down menus, but creating an entire page design with AP Divs is not recommended.

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

Hi 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

Hello Janine,

I have been on your Digital Family website and also purchased two Dummies books, trying to gather all the information I can get on building a website for a beer wholesaler in PA. I have registered our company’s domain name at GoDaddy; that was easy. Next step is to get a host., GoDaddy will do that; however, they want to host and do the website building with me, said I didn’t have to purchase Dreamweaver or Expression Web. GoDaddy has called and e-mailed me about this and I’m not sure what to do next. Am I totally locked into the package with GoDaddy and/or will it be beneficial to purchase a program as well?

Thank you for all the help; it will be greatly appreciated.

Barbara

Hi Barbara,

There are many ways to build a Web site. I haven’t used the service that GoDaddy provides. I believe it’s limited to a collection of templates you can choose from but can’t customize completely the way you could if you were building your own site with a program such as Dreamweaver or Expression Web. Some people prefer this option because they find it easier, and others want more control. It’s a trade-off, but you definitely have a choice.

The thing to understand is that even if you register a domain name at GoDaddy, you still have the option of hosting that domain name on another web server. These are two different services: domain registration and web hosting. Many companies provide both services, but buying one should not require you to buy the other from the same company. For example, I use GoDaddy as my domain registrar, but I host my sites at BlueHost, Dreamhost, and other web servers, depending on the preferences of my clients or their special needs. When you register a domain name at GoDaddy, you get a user name and password you can use to log in and change the DNS for the name, which is how you can direct a domain registered there to a Web server somewhere else.

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

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 without finding an answer. I would greatly appreciate your help.

My problem is that 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. When I switch to Live View, the area shows a blue box with a question mark. The Mac gallery is unlocked and not password protected. What am I doing wrong?

Thanks for your great article.

Best regards,
Eileen

Hi Eileen,

Your problem is a little hard to diagnose from what you’ve written here. The only “trick” to all this is to make sure the photo is online and 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, 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 Ctrl+click on the image, 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 when using these new tools. Thanks for the lesson and for helping me get started.

Cheers!
Eileen

Hello,

I wonder if you can help me. I’ve been using my website for 10 years without any problems until a couple of weeks ago when I went to upload the site after knocking an item off. Instead of just synchronizing the two pages I’d changed, it tried to re-synchronize the whole site and got stuck. Since then it sticks on different pictures until the connection is lost. I’ve checked everything I can think off. I did get it to synchronize off-line, but it won’t upload.

I’m using Dreamweaver 3. Any ideas?

Yours in anticipation,
Jane
Devon Uk

Hi Jane,

Sorry to learn you’re having trouble. Many things can cause problems when you upload a site. There may have been changes on the Web server you use, your version of Dreamweaver may have become damaged, or your site may have some corrupt files.

Whatever the cause, here are a few possible solutions. First, try uploading just the pages you changed, not the entire site. You don’t have to synchronize to use Dreamweaver to update your site, so if you’re timing out with the Synchronize feature, try just selecting the pages you want to update and clicking on the Upload arrow. See if you can fix them that way.

Did you say you’re using Dreamweaver 3 or CS3? If you’re using Dreamweaver 3, you should consider upgrading; that is a very old version of the program and after years and all the changes on the web, you can’t rely on a program that old to be stable. If you’re using version CS3, you’re probably fine, although it is also starting to be old by web standards.

Hope that helps,
Janine

Setting up a basic WordPress blog these days is easy, but as you add more posts, how do you back it all up so you don’t lose everything you’ve created?

Like most things on the Web, there are multiple options, and they come with varying levels of complexity and cost.

VaultPress (top of the line): This is a sleep-like-a-baby-at-night service, but you pay a monthly fee. http://vaultpress.com/

Follow the WordPress instructions: You’ll find backup suggestions and instructions here: http://codex.wordpress.org/WordPress_Backups

Do it yourself: You can back up your own database files with PHPMyAdmin, and you can add the plugin to your WordPress blog for free. Here’s a link to the plugin: http://wordpress.org/extend/plugins/wp-phpmyadmin/installation/)

Trust your Web host: If you do nothing, most web hosting services already back up their database servers as well as their web servers. This provides some security if they have a problem on site, but you may not be able to access it if you want to retrieve something that has been deleted.

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