dreamweaver image link problem

[drosster]

hello. I created my layout through photoshop slice. when you open the layout it's fine, everything is in place. The problem I'm having is when you add a link to a certain image it will expand thus trowing off all the other images in the layout. Is there a way you can add a link without it disrupting the size of the image?

[auntnini]

It bugs me when teachers (who don't want to mess with HTML and CSS) tell students to create a web page layout by slicing an Illustrator or Photoshop document.

This creates a <TABLE><TR><TD>content</TD></TR?</TABLE> that has cells already filled with content. The students don't learn how to style a <TABLE> with background colors, etc. And we all know (or should know), a <TABLE> layout is naughty!

Since your <TABLE><TR><TD>cell</TD></TR></TABLE> already has content from the slicing process, you are expanding the cell size when you add more content.

[drosster]

your absolutely right. I really need to learn how to use css, because I'm seeing the whole slicing method is going to be a problem. So I'm assuming there's no way around this problem I'm having.

[djr33]

It is possible to fix a sliced layout. But it's not easy and requires creativity and knowledge of CSS. There are a few tricks that you need to understand then use them in a creative way to get the job done. It's more than I can really explain in a post.

One important piece is that you should set your images as backgrounds rather than as images (<img> tags). That way you can put content on top of them.

You should also delete any images that are solid colors (you should plan ahead to have some sections like this) and replace them with solid color backgrounds.

Then you can also style things in a way that makes everything line up well and use CSS to tell certain parts not to move around.

In fact, if you can do this well enough, you can fix one of the major constraints of using slices (or most image-based layouts), which is that you are stuck with a fixed-width webpage that won't adjust to different-sized monitors. You can make some parts scale and others stay as they are, using images in some places and solid colors in others. It's complicated, though.


Contrary to the many typical harsh reactions from web designers to slicing, it is possible to use it well, within a well designed page. But that requires a huge amount of work, and a lot of knowledge beyond pressing the save button in photoshop.
What Photoshop gives you is a table layout. What you want is something else, using <div> sections to separate the images, styled using the images as backgrounds. This means literally rewriting all of the code, but having the images already sliced for you, with the measurements (height/width) already available is a good start.
If you can't quite manage to do that, then at least using some of the techniques I mentioned above can help.
Either way, using slices is not an "easy" way to make a good web page and it's a lot of work-- so the harsh reactions to slicing are based on two things-- 1) a lot of work; 2) the tendency for badly designed (table-based) sites due to them.



So I'm assuming there's no way around this problem I'm having.Yes and no. There's no way around it that won't mean learning CSS anyway. As I said above, using slicing can be helpful, but only within lots of other techniques. Otherwise you'll run into these problems.


Now if all you're trying to do is figure out how to make one element in a certain cell in the table show up properly, then you should post a link to your page and we might be able to suggest something.

[auntnini]

In PHOTOSHOP you should have used File>Save for Web and Devices then attached links to various image slice chunks.

Your probem is SLICING not Dreamweaver. Instead of applying a background color, you end up with an image slice chunk filling a cell, which you probably have to delete so you can add other content to the table cell.

In Dreamweavaer you have choice of 3 view modes: CODE, SPLIT. DESIGN. Use SPLIT which gives you view of CODE on left and view of page DESIGN on right.

HTML tabs are intructions to browser surrounded by lesser-than < and > greater-than characters. Most come in pairs -- an opening <tag> and closing </tag> with same element name preceded by /slash to define the content between the opening and closing tags.

You can modify the element by inserting attribute ="value" in the opening tag. In Dreamweavaer, CODE or SPLIT VIEW (on the code side), just before the > in the opening tag, hit the spacebar and,Dreamweaver displays a drop-down list of possible attributes. Double-click the attribute (e.g, bgcolor for background-color) and that attribute and = "quotes" is inserted and you get drop-down of possible "values". For example, <TD bgcolor="red"> cell content </TD>.

In some cases such as <TABLE><TR><TD> you get the OLD attributes (e.g., bgcolor= instead of CSS background-color:___; background= instead of CSS backgrorund-image:___; and text= instead of foreground COLOR:___; etc.) but you cn learn to set up-to-date CSS style rules later on.

Besides the problem of cells being filled with content that you encoutered, slicing also usually creates excessive/ unnecessary cells if you don't slice right at the edge of another slice. You might do better to start over and let Dreamweaver create the simpliest possible <TABLE> and just use your Photoshop sliced image as a reference.

If you are using a MAC press CMD+Shift+4 (number on regular keypad) and drag cross-hair to select area of screen-shot (or CMD+shift+3 for shot o whole screen), or save sliced image as JPG, GIF or PNG , which you can add to a post entry. Also VIEW>Page Source (or Code View), ctrl-A (or cmd-A) to copy all and paste your code into a post so people can see it and offer concrete help.

Good luck! Don't give up. Learning HTML and CSS is frustrating at the beginning, but you will get to enjoy working with code once you begin to understand how it works. Get some library books and/or search for online tutorials and blogs for info.