3 problems that I've run into

Question

So to start out, I've been using Photoshop for about 3 years and I have just started messing with Dreamweaver for web design. In Photoshop I've just started using the slice tool and exporting the image of a web site I made myself into Dreamweaver which is an amazing feature, now I got everything exported and into Dreamweaver in a new site and things were looking good until I realized everything was squared off. I also have a gradient background on my page, I took the marquee tool in Photoshop and cut out a single pixel line of the background vertically to try and match it up but unfortunately the quality does not match between the two which in turn makes it look pretty bad near the bottom
Here is the site for you guys to look at
http://birchlake.ath.cx/newbirch/
As  you can see theres a weird line on the right side and the snow flakes  are cut off on the sides of the site. I havent started on the buttons  yet because I want to make sure I go about making this the right way  first.
I have a little bit of experience with HTML and CSS, I can do minor edits and add things fairly easily.
So in a brief manner here are the problems I am facing
Problem #1. - Background gradient does not match site
How should I match this up?
Problem #2. - Images will cut off at the end of the pages
(a work around for this would be to expand the entire site accross the whole page, if I wanted to do that how could I? Is it a good solution?)
Problem #3. - Content box
I have come to the conclusion that I am going to have the grey box in the middle house all of my content for each tab except for the email client, that links off to an external page for Outlook Web Access which is already made. Can someone point me to a tutorial on a good way to make a content box? I know I could do it with a table but I've heard that isnt a good way to do it....I'd like it to be able to expand and condense automatically if needed, I messed around with it and found that the whole Image will loop again if I keep putting in spaces, I assume I would need to cut off the bottom of the content box off and make that a footer and then leave the rest in the middle.
Thank you Adobe and everyone else in these forums!

Answer 1

Murray *ACP* wrote:
So to start out, I've been using Photoshop for about 3 years and I have just started messing with Dreamweaver for web design. In Photoshop I've just started using the slice tool and exporting the image of a web site I made myself into Dreamweaver which is an amazing feature
Unfortunately, it's amazingly bad.  One should never use a graphics app to write the HTML for ANYTHING other than a prototype web page.  It's just not suitable for real-world production work.  This mistake alone probably accounts for something in the order of 30% of the posts here on this forum.  Why is this code bad to use?  First of all, it's table based rather than the best practice CSS layout based.  Secondly the table structure is quite 'brittle' in that it will break unexpectedly if a visitor increases or decreases the size of their text display (this is because of the graphic app's extravagant use of the 'merge'ing and 'split'ing of table cells within the rows of the table.  This has a huge destabilizing impact on your page layout.  You can see more about that here -
http://www.apptools.com/rants/spans.php
This is what I was worried about, I assume the slice and export tool would be good for just using the images for the website right? Just delete the HTML page after your done exporting and build from there?
Your CSS for this is a bit weird -  * {     background-image: url(bg.jpg);} This would have the effect of applying that background image to EVERY ELEMENT on the page, not just the body, which is where you would want it to be. But beyond that, I'm not quite sure what you are saying here.
 The snowflakes are cut off because your slices cut them off (see this - http://birchlake.ath.cx/newbirch/images/index_06.gif, or this - http://birchlake.ath.cx/newbirch/images/index_04.gif).
About the gradient problem, I just noticed it was happening only on my second screen I guess that is only a problem with different brightnesses and contrasts for monitors.
For the clipping problem I forgot to mention that they are like that for the actual image itself in Photoshop
See - http://img602.imageshack.us/img602/3109/website.jpg
I guess I just shouldnt put anything on the edge of the screen right?
That's a VERY poor choice.  One should never elect to vertically constrain your text content unless you have built the container to be vertically flexible. Otherwise, your text can potentially overflow the height of the container and create a mess. I want to say very clearly - you are heading down a slippery slope here and will not be satisfied with the results. Please read this - http://www.apptools.com/examples/pagelayout101.php
I want the box to be vertically flexible, I read through the page layout link and its basically saying that tables are shouldnt be exploited for your content because they explode if a user changes the browser text size and that I should use div tags, absolute positioning, and margins instead....
The front page box is only going to have a few things on it. But I need it to commodate a picture gallery and a contact form.....How would I begin to do that?