I am a pro graphic designer coming from type/print and going into web making and I am reading your beautiful text DWCS3 for dummies to know anything about DW.

I am making a site where I am using one of your tutorials you explain in the book and that is shown in your site about Robin Eschner: the photo gallery of his works (thumbnails at left, detail at right appearing onMuseOver).

Well, everything is working fine, but some of the pictures appear stretched: that’s to say, in the opere (works) page the first picture is wide and is shown correctly, while the others are high and are shown as horizontal, instead of their real dimensions. Your site has pictures of different dimensions and are shown correctly.

What do I get wrong?

Thanks very much if you can help me.

Massimo
Cantello, Italy

That’s a great question, Massimo. Here’s the “magical” solution.

When you set up rollovers by using the Image Swap Behavior, the images all have to be the same height and width. That works fine if all of your images are the same, but you’re not the only one who has artwork of varying sizes and dimensions and you’ve run into a common problem.

As an experienced designer I’m sure you’ll appreciate how I managed to get images of different sizes and shapes to all display well in a similar Swap Image layout.

Just copy them all onto a background that’s the same size.

For example, if most of your images are 300 by 500 but a few are 200 by 400, set up the Swap Image with an image that is 300 by 500.

To get the smaller images to look right, create a new image that is 300 by 500, copy the smaller images onto it one at a time, center them, and save each one for the web. Of course, you need to make sure the background of the images is the same as the background on your web page, but because you’ve chosen a white background on your site, that part will be easy.

The result will be that none of your images appear distorted because they really are 300 by 500 even though they appear to be a variety of sizes. As long as the background matches the background of your web page, no one will ever know but you…

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 have purchased both your Total Training CD Total Training for Dreamweaver CS3 and your book Dreamweaver CS3 and have enjoyed them very much. But all of my pictures have blue boxes around them. How can I fix the problem? I am desperate… Please help.

Margarette

Hi, Margarette,

That’s a common question. When you turn an image into a link, you get a blue outline around it, much as text turns blue and gets an underline. You can change all of these options by using CSS, but there is a very quick and easy solution for removing the line around your images. Just click to select the image in Dreamweaver and then use the Property inspector at the bottom of the program window to set the Border to zero. With the border=0, the border around your pictures will disappear, even if the image is a link.

Hope that helps. 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.

First I would like to say that I am enjoying your CD on Web2  –  very well done.  I have a little problem, though. Is there  something special that I have to do to get the program to read the Photoshop PSD pics?

Hope that you can help.

Regards,
Kay

Hi Kay,

Glad you like my video. Expression Web can’t read Photoshop PSD files because it is designed to read only the file formats that work on the web, which are JPEGs, GIFs, and PNGs.

What you need to do is convert your images into one of these formats in Photoshop and then you can use the images in Expression Web.

To optimize an image for the web, which both gets it in the correct format and makes it download faster, choose File > Save For Web. Then select the image type and compression or color options you prefer. You’ll find some basic instructions in my training video for optimizing images for the web with this technique.

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.

In Total Training for Dreamweaver 8, Part 1, Lesson 6, Topic 4 at the very end, you center the SUBMIT and the CLEAR buttons by selecting them both and hitting the “center” button (align center). When I do this, DW8 adds a line feed after the SUBMIT Button and then puts the CLEAR Button below it. (????) What is going on here?

Thank you,
David S.

Hi, David,

That’s just an extra div tag around the button. Depending on exactly where your cursor was when you added that button, Dreamweaver must have added the div tag with the center command instead of putting the button in the same div tag as the other button.

Try this (it will be a good exercise in working with code anyway):

Choose the Split view by clicking on the Split button at the top left of the workspace. Click on the SUBMIT button in Design view and your cursor should go right to that place in the code. Look for the <div> tags that surround the buttons and consolidate them so there is one div tag instead of two.

You want to look for <div> </div> tags. Don’t be confused that the div tags will probably have a style or some other code that is centering the buttons. What you want to do is delete the first close tag </div> and the open <div> that follows (make sure to delete the entire tag, including any extra code within the brackets).

When you do that, both buttons should end up in one little box, side by side.

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.

]]> http://www.digitalfamily.com/dreamweaverblog/2008/12/why-is-dreamweaver-adding-a-linefeed-to-my-buttons/feed/ 0 http://www.digitalfamily.com/dreamweaverblog/2008/12/how-do-web-pages-put-mapquest-in-their-sites/ http://www.digitalfamily.com/dreamweaverblog/2008/12/how-do-web-pages-put-mapquest-in-their-sites/#comments Sat, 06 Dec 2008 22:40:55 +0000 janinewarner http://www.digitalfamily.com/dreamweaverblog/?p=78 Hi,

I am a high school web design teacher and I was wondering if you could help me.

How are web pages putting MapQuest in their sites? It is just like you are at the MapQuest site but it is in a box on the web page?

Thank you so much,

Jan

Hi, Jan,

Many Web sites, including Google Maps, Mapquest, Flickr, YouTube, and Facebook, make it easy to add widgets or other snippets of their content so that it appears on your own site.

Usually you create a free account on the site, such as MapQuest, and then log in to use their services. Once you’re logged in, you can enter an address to get a particular map, make other changes to the way you want it to look, and when you get it the way you want, you click a button and the site generates a special chunk of code just for you.

You then copy the code and paste it into your web page, and voila, the map magically appears.

The code you copy is usually a mix of HTML, JavaScript, and often very complicated links. Don’t worry about understanding the code, you just need to paste it into your Web page in the place where you want the map to appear.

Once you add the code, you can preview the page in a browser (and if you’re connected to the Internet) the map should magically appear. You can then adjust the positioning using CSS if you know how to create styles and work with the HTML around the code — just be careful not to edit or delete any of the code you copy from mapquest.

Here’s a tip about how best to paste this code into Dreamweaver: You need to paste the code into Code View, but if you use Split view, it’s easier because you can see where you are in the Web page, and in the code at the same time, making it easier to get the map into the right place in the design.

If you’re not familiar with Split View, look for three small buttons at the top-left of the screen. Click each one in turn to see the view options.

Hope that helps. I’m always happy to support teachers.

Janine

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

I’m hoping you can help. I’ve been searching and searching for an answer to a problem I’ve run across, to no avail.

I am creating my website in Dreamweaver CS3 and I’ve run into a situation I can’t resolve. I have two images on a page that are supposed to link to different pages on the site. They seem to have become connected to each other somehow because when I change the link for one of the images, the link for the other image changes as well. I’m not using any sitewide link change options, just doing it manually.

Any help you can give would be greatly appreciated.

Thanks and I love your site!

Rachel

Hi Rachel,

I can suggest a couple of solutions to your problem. The simplest is to add some space or a return between the images. Remove the link and then reset each link separately. Once you have some space between them, Dreamweaver should recognize that they are separate links.

If that doesn’t work, you may need to fix the links manually in the code. Here’s a quick guide to how that would work:

The HTML for a link begins with the tag <a href=”link.html”> and then has </a> at the end. Image tags use <img src=”image.jpg”>. You may need to cut and paste the </a> tag so it appears between the two tags for the images instead of surrounding both of them to create one link.

Here’s an example of how yours might look now:

<a href=”link.html><img src=”image1.jpg”><img src=”image2.jpg”></a>

You would need to cut and paste the </a> so the images are separated like this:

<a href=”link.html><img src=”image1.jpg”></a><img src=”image2.jpg”>

Of course, there may be other code that makes your pages a little more complex, but this is essentially what the code probably looks like and how you would fix it.

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

Hi Janine -

Thank you SO much for your speedy response. I took the plunge and looked at the actual code and was able to fix it. For some reason there was no <a href = linkimg.html> before the second image I was trying to create a link for. So I guess both images were referencing the same link.

I feel much more confident about working with the actual code now instead of doing it all visually, thanks to your clear instructions!

Thanks again.
Rachel

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

Carol

Hi Carol,

There are a couple of ways to remove the colored border around an image you use as a link. The simplest option is to select the image, and then in the Property inspector at the bottom of the workspace, enter a 0 in the Border field.

You can also create a style for the image tag with the border set to none and remove all of the borders from all images at once.

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 have enjoyed your teaching in Total Training for Adobe Dreamweaver CS3 Essentials. There is one thing I could not find any solutions for, namely links without any colored line or box. I changed the color to white in Page Properties and told Dreamweaver not to make any colored lines.

Nice-looking graphics do not look so nice with a colored border.

Warm regards
Seppo, Finland

Hi Seppo,

There is a very easy solution to your problem. All you need to do is set the border for your images to 0.

You can do this in two ways. The simplest is to select an image in the workspace and then enter a 0 in the Border field in the Property inspector at the bottom of the screen.

If you prefer, you can create a style for the img tag and set the border in the style to None. That will remove the border from all of your images at once.

I wish you all the best with your site,
Janine

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

The guy who created our church Web site has moved away, and the church staff understands little about web development. I have just as limited knowledge but am a graphic designer so if I can figure it out, at least our pages will look pretty!

The problem I’m having is when I set up pages with photos or imported graphics. When I upload the page to the server, although the images are imbedded in the page, they don’t show up (I get the dreaded X’d image). I’ve uploaded the images to the same folder as the index page and also placed them in a designated image folder. Neither fix makes any difference.

What am I doing wrong?

Thanks for your help,
Anne H., Littleton, CO

Hi Anne,

There are so many reasons that photos may not show up properly when you upload your Web site. It can be a bit tricky to find the problem sometimes, but one of the best ways to avoid this problem is to make sure you’ve used Dreamweaver’s site set-up feature and saved all your files in one main Web site folder. That way when you upload your site everything stays in the same relative location and links and images don’t break.

Another common, and easy mistake, is to name your image files with spaces or special characters. Although they will work on a PC or Mac computer that way, most Web servers are UNIX, which can’t handle spaces or special characters in filenames, so as soon as you upload the site, the image links break on the server.

If that’s not your problem, it may have to do with where your images are stored. You said you tried saving them next to the index file as well as in a separate images folder. Either option should be fine, but you have to make sure that when you set the link to the images they are in the same relative place on your hard drive as they are on the server.

Hope that helps you solve your broken image problem.

All my best,
Janine

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

My name is Jan Elias and I am a photo enthusiast. I am not sure whether you have the time to answer my e-mail, but I thought I should try.

Recently I discovered that when I upload pictures on the web their colours look different in different browsers. As you are a well known web designer I checked your website and didn’t find any colour variation in the photographs on your page in different browsers.

I wanted to ask you whether it would be possible for you to tell me what to take care of when I put photographs online in order to keep the colours throughout different browsers the same or if you have mentioned this in one of your publications I also would be very happy to purchase it.

I am in desperate need to know how to improve colour management in the web and would be very happy if you could help me.

Best wishes,

Jan

Hi Jan,

I optimize all of my images using Adobe Photoshop’s Save for Web feature. It’s not much of a secret, but it’s a great tool for preparing images for the Web.

You should also know that photos and other images with many colors should be saved as JPEGs when you want to put them on the Web. The lower-cost, Adobe Photoshop Elements, also has a Save for Web feature.

Hope that helps,

Janine