Template scrambles when linking in Dreamweaver

[wjordan1987]

I'm not sure if I have sliced my document right or not, but when I bring it into dreamweaver and click and image to make it a link the document scrambles a little creating white spaces here and there. (Created template in photoshop and brought into dreamweaver, if that even matters?)

[Centauri]

(Created template in photoshop and brought into dreamweaver, if that even matters?)

Matters a lot, as that is completely the wrong way to make a web site - apart from the rubbish code that this produces, you will have very little control over what is happening. Suggest learning html and css code asap.

[eCat]

Are you using tables to build your page?

[wjordan1987]

All I did was load the template in dreamweaver, went to the properties section at the bottom and typed in the link address in the link text field area. Then when I clicked away it scrambled. Attached is the source code untouched by me.

[Centauri]

As I suspected, complete garbage code - a heap of images with meaningless names, including stupid 1 pixel spacer images, inside tables that are designed for displaying tabular data, and absolutely no meaningful content. There isn't even a doctype to let browsers know what version of html they are trying to parse.

Images are inline elements, and by default are aligned to the baseline of the inline text "box", and will normally have an allowance gap for text descenders to appear below this level unless all the images are set to block display or bottom vertical-align. Also, images within links will by default have a border around them, typically rendered in the current link text colour. These things can be controlled via css, but targeting specific elements within that table mess will be difficult.

The html should not concern itself with how the page looks, but should present the content in a meaningful way using semantic html elements designed for each particular purpose, with css then defining the visual aspects. Any images that are there to make the page "look good" do not belong in the html at all - they should all be applied via the css and kept to a minimum to speed page load.

Whilst doing a layout design in Photoshop has benefits, translating that into a proper web page is not an automated job - the content and meaning of the page should be written in html and various graphic elements extracted (not just sliced up) to apply via css. Dreamweaver has an excellent set of tools for assisting code writing (I use it myself), but the WYSIWYG operation of the design view window, together with Imageready slicing, is probably the major cause of poorly coded websites on the net.

If you want to learn the proper way of doing this, then stick around - plenty of helpful people around here. If we can see the layout you have come up with, we can suggest the ways to achieve it.

[wjordan1987]

I know "some" HTML and CSS, but I don't really understand how to manually create the layout using html. Thats my weakness so far. Attached is a copy of the layout. Attached is the layout (I had to take the most of the pics out to meet the required file size plus took the background out). I saved it as a png if thats ok.

[wjordan1987]

I think I'm starting to understand how to make a layout in Dreamweaver. I just create a AP div and use that, but then I get like 10 divs on one page. I'm not sure if that is the right way to go about it.

[Centauri]

No, this approach is nearly as bad as tables. You are still using Dreamweaver's design view window and letting it produce the code, which gives you little control and invariably produces the wrong code for your requirements. APdivs (called "layers" in earlier versions) are absolutely-positioned divs which then locks you into set sizes with no flexibility as the various elements cannot interact with each other on the page (absolute positioning completely removes the element from the document flow) which will result in unwanted overlaps when the amount of content is varied or the text is resized by the user.

PM sent.