Dreamweaver FAQ » Web graphics

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

How do you create photo galleries in Dreamweaver CS5?

janinewarner — Tue, 26 Jul 2011 23:50:21 +0000

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

How do you add text to an image so that the text appears when someone rolls a cursor over the image in a browser?

janinewarner — Tue, 07 Jun 2011 18:31:57 +0000

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:

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

How can I get my site to look good in IE on the PC?

janinewarner — Fri, 19 Mar 2010 22:18:04 +0000

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.

You may also appreciate my article about how to test your web pages in many different web browsers at once, including Internet Explorer, Firefox, Safari, Chrome, Opera, and more.

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.

How can I display artwork of varying sizes and dimensions?

janinewarner — Wed, 26 Aug 2009 19:44:29 +0000

Dear Miss (Mrs.?) Warner,

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.

My pictures have blue boxes around them. How can I fix the problem?

janinewarner — Sun, 19 Apr 2009 11:09:18 +0000

Ms. Warner,

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.

How can I get Expression Web to read Photoshop PSD files?

janinewarner — Tue, 17 Mar 2009 00:01:01 +0000

Greetings,

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.

How can I find the Spam Blocker program to hide email addresses?

janinewarner — Wed, 04 Feb 2009 22:19:28 +0000

Hello Janine,

I’m going through your Dreamweaver CS4 session on Total Training and was looking for the spam-blocker app you mentioned in the chapter “Creating a New Website, Creating Links.” I think I’m blind – I can’t seem to find it. Could you please direct me to the software you were referring to? Thank you so much for your time!

Sincerely,
Andrew in Texas

Hi, Andrew,

Happy to help. The online tool is called Address Munger, and you can use it to block spammers from scraping your email address of your web pages.

In this review, you’ll find several great resources you can use to enhance your web site, including how to create a favicon, how to add ecommerce to your web site and more .

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

Why is Dreamweaver adding a linefeed to my buttons?

janinewarner — Sat, 06 Dec 2008 23:03:15 +0000

Hello again:

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

tags that surround the buttons and consolidate them so there is one div tag instead of two.

You want to look for

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

and the open

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.