Designing in Photoshop

Question

I am working myself into designing sites using css for
layout, etc. I have been designing in Photoshop CS2, and then using
the "save for web" to export my slices as divs. I then go into
Dreamweaver and add more styles, replace images as backgrounds,
etc. This is the latest result from a recent website:
http://wmsgroup.com/client_temp/BucknellPark/www/index.html
Looks fine in Dreamweaver, not on the web. I think part of my
problem is remembering and correctly labeling the differences
between ids and classes.
I have also attached the css.
Thanks.

Answer 1

Kind of mess there. Open your page in FF, Safari or Opera and
increase text
size. What happens? The page breaks apart. Photoshop is
wonderful for
image editing but it stinks as an html or CSS generator.
Don't use
Photoshop to build your code for you. These kinds of
shortcuts lead to
badly coded web pages that are almost impossible to work with
and edit later
on. Do yourself a favor and learn how to use basic html and
CSS and then
come back to DW.
http://www.w3schools.com/
--Nancy O.
Alt-Web Design & Publishing
www.alt-web.com
"OlDirty" <[email protected]> wrote in message
news:[email protected]...
> I am working myself into designing sites using css for
layout, etc. I have
been
> designing in Photoshop CS2, and then using the "save for
web" to export my
> slices as divs. I then go into Dreamweaver and add more
styles, replace
images
> as backgrounds, etc. This is the latest result from a
recent website:
>
>
http://wmsgroup.com/client_temp/BucknellPark/www/index.html
>
> Looks fine in Dreamweaver, not on the web. I think part
of my problem is
> remembering and correctly labeling the differences
between ids and
classes.
>
> I have also attached the css.
>
> Thanks.
>
> /* CSS Document */
>
> /*LAYOUT*/
>
> #Table_01 {
> position:relative;
> left:0px;
> top:0px;
> width:1024px;
> height:768px;
> margin: 0px auto;
> }
>
> #logo_ {
> position:absolute;
> left:138px;
> top:0px;
> width:403px;
> height:162px;
> }
>
> #button1_ {
> position:absolute;
> left:541px;
> top:123px;
> width:104px;
> height:39px;
> }
>
> #button2_ {
> position:absolute;
> left:648px;
> top:123px;
> width:104px;
> height:39px;
> }
>
> #button3_ {
> position:absolute;
> left:755px;
> top:123px;
> width:104px;
> height:39px;
> }
>
> #textarea_ {
> position:absolute;
> left:138px;
> top:162px;
> width:748px;
> height:310px;
> background: url(textarea.jpg) no-repeat left top;
> }
>
> #welcome_ {
> position:absolute;
> left:138px;
> top:471px;
> width:487px;
> height:176px;
> background: url(welcome.jpg) no-repeat left top;
> }
>
> #scheduling_ {
> position:absolute;
> left:626px;
> top:471px;
> width:260px;
> height:176px;
> background: url(scheduling.jpg) no-repeat left top;
> }
>
> #video_ {
> position:relative;
> left:252px;
> top:25px;
> width:472px;
> height:117px;
> background: url(bucknellvideo.jpg) no-repeat left top;
> }
>
> #aboutus {
> position:relative;
> left:252px;
> width:233px;
> height:137px;
> background: url(aboutus.jpg) no-repeat left top;
> top: 30px;
> }
>
> #advertising {
> position:relative;
> left:490px;
> top:-107px;
> width:233px;
> height:137px;
> background: url(advertising.jpg) no-repeat left top;
>
> /*TEXT*/
>
> .scheduletext {
> font: 10px/12px Geneva, Arial, Helvetica, sans-serif;
> color: #666666;
> margin-left: 135px;
> margin-top: 30px;
> float: right;
> margin-left: 250px;
> margin-left: 250px;
> float: right;
> }
> .scheduletext {
> font: 11px/12px Geneva, Arial, Helvetica, sans-serif;
> color: #FFFFFF;
> margin-top: 0px;
> position: absolute;
> width: 125px;
> padding-left: 135px;
> padding-top: 12px;
> }
> .welcometext {
> font: 11px/12px Geneva, Arial, Helvetica, sans-serif;
> color: #FFFFFF;
> margin-top: 0px;
> position: absolute;
> width: 417px;
> padding-left: 50px;
> padding-top: 12px;
> height: 155px;
> }
> .nav {
> font: 12px/35px Geneva, Arial, Helvetica, sans-serif;
> color: #FFFFFF;
> margin-top: 0px;
> position: absolute;
> text-transform: none;
> padding-top: 45px;
> padding-left: 25px;
> width: 224px;
> height: 239px;
> top: 10px;
>