Dreamweaver FAQ

Why can’t I preview my MP4 video in Dreamweaver?

janinewarner — Wed, 18 Apr 2012 17:35:08 +0000

Hi Janine,

I’m having problems bringing in videos and playing them via Dreamweaver. I have 5.5 version. I insert, go to media, then down to plugin, browse, bring in my MP4 video, size it and then click the play button on
property mgr, but it still doesn’t play. Here is the message I get. “Unable to find plugin that handles this media type.” DW can’t find the configuration in the plugin folder.

What does that mean? All MP4s will play on my desktop with no problems.

Not sure what Dreamweaver is asking. NEED HELP, PLEASE!!

Nikki

Hi Nikki,

Dreamweaver can only play videos in the Flash format. Dreamweaver is has limited browser features for testing, but that’s not a problem, just a limitation that requires some testing be done in a web browser. It appears from your email that you’re doing everything else right.

You can use Dreamweaver to insert your videos, as you have, and then use any browser to preview the page the video is on by clicking the Preview button in Dreamweaver. If the video plays correctly in the browser on your computer, then you’ve done everything correctly in Dreamweaver and when you transfer all of the files to your web server, the video should all work just fine on your website.

I hope that helps,

Janine

How to line up three divs in a row

janinewarner — Wed, 07 Mar 2012 06:18:33 +0000

Hi Janine,

I’ve listened to your CSS Basic and Advanced CSS DVDs. They are great resources, but I have a question

I am trying to create a banner div that includes 3 divs inside: a Photo div, Title div, and another photo div, all lined up at the same height. I want the photos floated at each end of the banner div and the Title div centered between them. Here is what I created:

A photo (123 px wide) div floated to the left.
Title (400 px wide) div for the centered (margins left & right set to auto).
A photo (123 px wide) div floated to the right.

The three above divs are within the banner div, each at the same level. I want space between the photos at each end and the title.

Here is my question: Why isn’t the 2^nd photo isn’t at the same height as the other 2 divs within this banner? This is driving me crazy.

Thanks, Don

Hi Don,

I can see why centering that banner section is driving you crazy, and why it seems like what you’ve done should work. There are a few ways to accomplish your task, none as logical as your approach (which you’d like would work, but doesn’t). Here’s a solution that should work.

Set all three styles for your divs to float left, yeah, I know, seems crazy, but that will get all of them to line up perfectly in the banner area.

Now use the left and right margin settings on the styles for each div to create enough space between them to get them where you want them. You can eyeball it, but I find it best to do a little math and calculate exactly how much padding I’ll need between each div. I know, most web designers hate the math part, but it’s more precise than the old ‘eyeball’ trick. Here’s how I’d do it. Add up the full width of each div, including any padding or borders, subtract it from the total space, divide by 3, set that amount of margin space between the divs.

Let me know if that works for you and email me the link when you’re done.

Thanks for watching my videos,

Janine

Janine,

Thank you so much. Your solution works! I cannot thank you enough. I have tried and tried over the past couple of years to use div’s instead of tables but always ran into problems and went right back to tables. I am finished with them for the most part after learning how to use div’s. You unlocked the div mystery.

Thank you!

Don

How do I create a web page design with a large background image and content that floats over the middle?

janinewarner — Mon, 27 Feb 2012 21:08:41 +0000

Hi Janine,

I’m reading Dreamweaver for Dummies and enjoying it very much, but I’m stuck on how to set-up a page that has a background image and then has a smaller boxed area for the “live” or content containing area inset over the background.

Could you possibly tell me how to do this?

Jack

Hi Jack,

Your question reflects a recent design trend on the web. Seems you’re trying to create a design with a big background image like the one I just designed for our iPad development services on my new Chameleon Engine site.

There are a couple of ways to achieve this look, but the simplest is to use the big image as the background image of the entire page (you can do that by choosing Modify > Page Properties — I recommend using the CSS options).

Advanced tip: add the style rule to the CSS code (Dreamweaver has no feature for this, but if you copy this into your body CSS rule, it will cause the background image to resize to fill the entire screen no matter how big the monitor, as it does on my Chameleon Engine site.

background-size: 100%;

To create the ‘live’ area for content, you’ll want to insert a div tag into the page that will surround all of your live content, and then create a style and apply it to the div that centers the box created by the div on the page. In that style, you’ll want to set a width for your site content. Most designers are setting that width to 960 pixels, which fits well on most monitors today.

A great shortcut for all of this is to start with one of the CSS Layouts included in Dreamweaver’s New Document dialog box. You should find instructions for working with CSS in chapters 5 and 6 of my Dreamweaver For Dummies book, and here are two tutorials specific to this task you can find on my website.

This tutorial shows how to customize a CSS Layout if you’re using Dreamweaver version CS3 or CS4

This tutorial reflects some of the changes to the CSS Layouts in version CS5

Hope that helps and I wish you all the best with your website,

Janine

Can I create all my pages in Photoshop and bring them into Dreamweaver as an image?

janinewarner — Mon, 06 Feb 2012 22:43:36 +0000

Janine

I just finished your Dreamweaver For Dummies book. I found it to be right on the money.

However, I have a question. I’m a photographer and graphic designer. I’m most comfortable working in Photoshop. Can I create all my pages in Photoshop and bring them into Dreamweaver as an image rather than create them from scratch? If this is possible can I then create hotspots to link the pages for example a thumbnail linked to the enlarged photographs?

Thanks for any help,

Barry

Hi Barry,

Thanks for the kind words. Yes, you “can” do that, and some sites are designed that way. There is even a ‘slicing’ tool in Photoshop designed for this purpose.

Before you rush off to do that, however, here are two reasons most web designers would not recommend that approach.

1. Images take longer to download than text so saving the entire page as an image often results in a web page that take a really long time to download — at the very least, make sure you are using the File> Save for Web and Devices dialog to optimize the images.

2. Search engines can’t ‘read’ the text on an image so your website will suffer when it comes to search engine results if all of your text is saved in images.

If you can live with those consequences, I make no judgement about your need to design your pages the way that works best for you. That said, what most of us do is create the design in Photoshop, Fireworks, or InDesign, then save the images (the parts that really have to be images), and reassemble it all in Dreamweaver using CSS.

I hope that helps you make the best decision for your website,

Janine

How do I arrange thumbnails in a photo slideshow?

janinewarner — Wed, 01 Feb 2012 18:07:23 +0000

Hi Janine,

I’m one of your students. Thank you for your very helpful online courses.

I am writing to ask your opinion. I am a graphic designer and illustrator. I am putting together my own website and would like to show samples of my work. My thought is to have a table of 15 thumbnails and a large mage to the left of the grid. The table would have 2 columns, one with the thumbnail images and one with the big version. Then using the swap image feature in Dreamweaver I would set them up to swap out each image as the viewer rolls over each thumbnail. Does that sound like the most efficient way to do that?

Otherwise, I thought I would have to create a series of Div tags using margins and padding to arrange them, but that seems like a lot of div tags, if each div tag had to contain an image.

Thank you for your help. Yours truly,

Mike

Hi Mike,

Thank you for your kind words about my training . I understand why you think tables might be a good solution to this design challenge, but trust me, they’re not. The only time Tables are still recommended in web design, is when you’re formatting ‘tabular data’ — in your case, I would not recommend a table.

However, it’s not as hard as you might think, and you DO NOT need a to create a div for each thumbnail image. Consider this. You can create two divs, one for the big image, and another one for all of the thumbnail images. Then insert all of the thumbnails in that one div, each separated by a single space. Then use a style to add as much space as you want between each image.

A compound style works well here. Ex: Create a class style for the div called .thumbnails, then create a compound style called .thumbnails img and set the margins to something like 10 pixels on the left and right, or top and bottom (depending on your design). That will put 20 pixels between each image. It’s like magic how that works instantly to spread the images apart, and it’s super easy to change if you decide you want more or less space between your thumbnails later.

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

Janine

I created a drop-down menu in Dreamweaver, but when I upload it to the server, it doesn’t work.

janinewarner — Sun, 04 Dec 2011 20:23:25 +0000

Hi Janine,

I created a drop down menu with Dreamweaver CS3 ( I am waiting to upgrade soon. )

Your directions were great. When I F12 the page to preview it, it looks awesome!

However, when I upload the page, does not look the way it should or function at all.

I have searched the internet high and low for answers to no avail.

Do you have any suggestions, or a quick fix?

Thank you so much for you help.

Shari

Hi Shari,

When you create a drop-down menu with the Spry features in Dreamweaver, Dreamweaver generates the HTML and CSS code, as well as the scripts that make it all work.

Those scripts are usually saved in a folder with a name like SpryAssets and you need to upload the scripts for your drop-down menu to work.

Look in the Files panel for a new folder created by Dreamweaver that has .js files in it (these are JavaScript files). Upload the entire folder to your server with the HTML page that has your drop-down menu and everything should work on the server, just like it does on your hard drive.

You can learn more on my site about creating a drop-down menu in Dreamweaver, as well as editing a drop-down menu in Dreamweaver.

Hope that helps you solve the problem,

Janine

I completely redesigned my site, uploaded it to my server, but it did not change. I couldn’t find the answer in your Dummies book.. maybe I am an idiot..

janinewarner — Mon, 28 Nov 2011 04:31:33 +0000

Something tells me you’re not an idiot, but there are a few reasons that your new site may not be showing up. Here are a some things to check.

1. Make sure you uploaded your site to the right place. On many web servers, if you use the FTP info they send, you enter the main folder on the server where they keep your email, web folder, etc, but you need to then open the web folder and upload your files into that folder. It’s often called something like htdocs, or webdocs, or it could be named the URL of your site. It depends on your server, but the key thing to know is that you need to upload the files for your new site into that folder for them to become visible at your URL.

On a related note, a good way to make sure you’re in the right folder is to look for the pages of your old site, make sure you find the main page of the site, and then replace it with the main page of the new site and all of your other files.

2. Make sure you named the main page of your site correctly. On most servers, the main page of your site should be named index.html, but some servers are set up for default.html. It’s often okay to use .html or .htm — they work the same. However, if the main page of your old site is called, say, default.htm and you upload the new version with a main page named index.html, you won’t see the new page if the server is still ‘serving’ the old default.htm page.

Whatever the main page of your old site was called, assume that’s what you should name the main page of the new site and make sure you replace the old page with the new page.

I hope that helps and I wish you all be best with your newly redesigned site.

Janine

What is the difference between using Appearance (HTML) or Appearance (CSS) in the Page Properties Dialog Box? They both seem to have most of the same options.

janinewarner — Wed, 02 Nov 2011 01:30:42 +0000

I strongly recommend Appearance (CSS). That option will cause Dreamweaver to create CSS styles that correspond to the Page Properties settings, which is the recommended way to define page properties today. To see how this works, create a new blank page, set the page properties with the CSS option selected, and then you can study the styles DW automatically creates by looking for them in the CSS Styles Panel.

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

Janine

How do I remove Skype formatting from phone numbers on my web pages on my websites?

janinewarner — Fri, 21 Oct 2011 06:37:13 +0000

Skype automatically highlights any phone numbers displayed in a web browser to make it easy to ‘click to call’ the numbers. Just because you see this formatting on your computer, doesn’t mean other people see it. Skype formatting on phone numbers is specific to each person’s computer, not to the general formatting of a web page.

That means you can’t really control whether other people see phone numbers on your web pages with skype formatting, but you can remove it on your own computer. I for one, found they formatting — and the way skype changed the size and display of phone numbers — annoying!

It can also be problematic that if you copy and paste a phone number that skype has highlighted, you get a bunch of skype code when you paste it, which means you have to delete a bunch of unecessary characters if you do something like copy and paste a number from a web page into an email message.

So how do you get rid of skype formatting on phone numbers?

The easiest way is to uninstall the skype “click to call’ app. That doesn’t mean you have to uninstall skype, you can still use skype to make call, chat, etc, you’ll just keep skype from formatting numbers on your computer — but you can still copy and paste numbers into skype to make it easy to call any number you see on your screen. Uninstalling Skype Click to Call just removes the program that creates Skype shortcuts.

On a windows computer, you can uninstall the skype click to call feature the same way you’d uninstall any program.

1. Click on the start button

2. Choose Control Panel

3. Choose Uninstall a Program

4. Select Skype Click to Call (make sure you don’t remove the actual Skype program unless you really want to get rid of Skype completely)

5. Click the Remove button.

As soon as the program is removed from your computer, the Skype formatting should go away with it.

Note: You may need to vary these steps slightly, depending on the version of Windows you are using,

Why is the CSS in templates from ThemeForest and Woo Themes so complicated and hard to understand?

janinewarner — Fri, 14 Oct 2011 17:27:21 +0000

One of the things that makes it hard to ‘get’ the hierarchy or specificity of CSS that was written by someone else is that there are so many different ways to write CSS. I sometimes compare it to the art of writing prose. Not everyone who has learned to spell and understands the basics of grammar, can write like Stephen King or Gabriel Garcia Marquez or William Shakespeare.

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