How do i make my PSD Template into a working HTML Page

homer09001 · #1 Jul 30th, 2007, 15:44

i've made a layout for my website in Photoshop, sliced it up into individual images, i know how to output it into a html page, but how can i make that page auto resize to the width of the window?
and so it resizes the content box to the content within it?

my template can be seen here:

http://dth-scripts.com/layout/layout.html

ive tried setting it up so it outputs the css aswell but it still doesnt work?

HTML: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- ImageReady Styles (layout.psd) -->
<style type="text/css">
<!--
 
#Table_01 {
    position:absolute;
    left:0px;
    top:0px;
    width:800px;
    height:650px;
}
 
#layout-01_ {
    position:absolute;
    left:0px;
    top:0px;
    width:789px;
    height:169px;
}
 
#layout-02_ {
    position:absolute;
    left:789px;
    top:0px;
    width:11px;
    height:169px;
}
 
#layout-03_ {
    position:absolute;
    left:0px;
    top:169px;
    width:789px;
    height:1px;
}
 
#layout-04_ {
    position:absolute;
    left:789px;
    top:169px;
    width:11px;
    height:481px;
}
 
#layout-05_ {
    position:absolute;
    left:0px;
    top:170px;
    width:36px;
    height:61px;
}
 
#layout-06_ {
    position:absolute;
    left:36px;
    top:170px;
    width:6px;
    height:61px;
}
 
#layout-07_ {
    position:absolute;
    left:42px;
    top:170px;
    width:122px;
    height:61px;
}
 
#layout-08_ {
    position:absolute;
    left:164px;
    top:170px;
    width:560px;
    height:61px;
}
 
#layout-09_ {
    position:absolute;
    left:724px;
    top:170px;
    width:10px;
    height:61px;
}
 
#layout-10_ {
    position:absolute;
    left:734px;
    top:170px;
    width:55px;
    height:61px;
}
 
#layout-11_ {
    position:absolute;
    left:0px;
    top:231px;
    width:17px;
    height:379px;
}
 
#layout-12_ {
    position:absolute;
    left:17px;
    top:231px;
    width:133px;
    height:379px;
}
 
#layout-13_ {
    position:absolute;
    left:150px;
    top:231px;
    width:34px;
    height:379px;
}
 
#layout-14_ {
    position:absolute;
    left:184px;
    top:231px;
    width:576px;
    height:379px;
}
 
#layout-15_ {
    position:absolute;
    left:760px;
    top:231px;
    width:29px;
    height:379px;
}
 
#layout-16_ {
    position:absolute;
    left:0px;
    top:610px;
    width:83px;
    height:40px;
}
 
#layout-17_ {
    position:absolute;
    left:83px;
    top:610px;
    width:13px;
    height:40px;
}
 
#layout-18_ {
    position:absolute;
    left:96px;
    top:610px;
    width:68px;
    height:40px;
}
 
#layout-19_ {
    position:absolute;
    left:164px;
    top:610px;
    width:318px;
    height:40px;
}
 
#layout-20_ {
    position:absolute;
    left:482px;
    top:610px;
    width:6px;
    height:40px;
}
 
#layout-21_ {
    position:absolute;
    left:488px;
    top:610px;
    width:301px;
    height:40px;
}
 
-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#FFFFFF;">
<!-- ImageReady Slices (layout.psd) -->
<div id="Table_01">
    <div id="layout-01_">
        <img id="layout_01" src="images/layout_01.gif" width="789" height="169" alt="" />
    </div>
    <div id="layout-02_">
        <img id="layout_02" src="images/layout_02.gif" width="11" height="169" alt="" />
    </div>
    <div id="layout-03_">
        <img id="layout_03" src="images/layout_03.gif" width="789" height="1" alt="" />
    </div>
    <div id="layout-04_">
        <img id="layout_04" src="images/layout_04.gif" width="11" height="481" alt="" />
    </div>
    <div id="layout-05_">
        <img id="layout_05" src="images/layout_05.gif" width="36" height="61" alt="" />
    </div>
    <div id="layout-06_">
        <img id="layout_06" src="images/layout_06.gif" width="6" height="61" alt="" />
    </div>
    <div id="layout-07_">
        <img id="layout_07" src="images/layout_07.gif" width="122" height="61" alt="" />
    </div>
    <div id="layout-08_">
        <img id="layout_08" src="images/layout_08.gif" width="560" height="61" alt="" />
    </div>
    <div id="layout-09_">
        <img id="layout_09" src="images/layout_09.gif" width="10" height="61" alt="" />
    </div>
    <div id="layout-10_">
        <img id="layout_10" src="images/layout_10.gif" width="55" height="61" alt="" />
    </div>
    <div id="layout-11_">
        <img id="layout_11" src="images/layout_11.gif" width="17" height="379" alt="" />
    </div>
    <div id="layout-12_">
        <img id="layout_12" src="images/layout_12.gif" width="133" height="379" alt="" />
    </div>
    <div id="layout-13_">
        <img id="layout_13" src="images/layout_13.gif" width="34" height="379" alt="" />
    </div>
    <div id="layout-14_">
        <img id="layout_14" src="images/layout_14.gif" width="576" height="379" alt="" />
    </div>
    <div id="layout-15_">
        <img id="layout_15" src="images/layout_15.gif" width="29" height="379" alt="" />
    </div>
    <div id="layout-16_">
        <img id="layout_16" src="images/layout_16.gif" width="83" height="40" alt="" />
    </div>
    <div id="layout-17_">
        <img id="layout_17" src="images/layout_17.gif" width="13" height="40" alt="" />
    </div>
    <div id="layout-18_">
        <img id="layout_18" src="images/layout_18.gif" width="68" height="40" alt="" />
    </div>
    <div id="layout-19_">
        <img id="layout_19" src="images/layout_19.gif" width="318" height="40" alt="" />
    </div>
    <div id="layout-20_">
        <img id="layout_20" src="images/layout_20.gif" width="6" height="40" alt="" />
    </div>
    <div id="layout-21_">
        <img id="layout_21" src="images/layout_21.gif" width="301" height="40" alt="" />
    </div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>

karinne · #2 Jul 30th, 2007, 16:31

NEVER use the slice tool in Photoshop to generate your site!

The resulted HTML is crappy and non semantic.

The layout is a very simple one. Learn CSS and what it can do before using PS to create your site.

Resources for learning how to use CSS for layout

homer09001 · #3 Jul 30th, 2007, 17:23

none of teh websites listed on the post make any sense to me whatso ever do you know of any basic tutorials etc?

Lchad · #4 Jul 30th, 2007, 17:26

homer what program are you using to build your sites? Dreamweaver?
Let me know..

homer09001 · #5 Jul 30th, 2007, 17:29

Cuteftp i simply edit them in my ftp program

Lchad · #6 Jul 30th, 2007, 17:31

That's an ftp program. Do you use anything to open up your html pages to make changes to them?

homer09001 · #7 Jul 30th, 2007, 17:33

karinne · #8 Jul 30th, 2007, 17:35

Get a good editor ... see the stickies in the HTML section for one.

The links in the "How" section are mostly just layouts you can copy and use as base to create your own.

Read some of the books in the "Book" section of that thread so you can start understanding the concepts of semantical mark-up.

Lchad · #9 Jul 30th, 2007, 17:36

Oh well... then I can't really help you.* You can't build quality / well functioning website with PS!* They may claim that it's possible but it's not.

PS is for graphics creation.* Once the graphics are done, you move to a text editor (many of which are listed in the beginner's resources sticky area)

Then you use the ftp program to upload it all.

homer09001 · #10 Jul 30th, 2007, 17:37

bassicaly all i need to do is get my web layout i made to expand to fill the IE windows as it resizes?

karinne · #11 Jul 30th, 2007, 17:40

You'll have to cut the images you need yourself but if you don't understand how to create a fluid CSS layout, then you will be struggling.

Start off by learning CSS and playing around with some of the layout in the above link. Learn how it works. Then you should be able to realize what you need to do in PS to make your site work.

OR ... post in the Job Opportunities forum and get someone to do it for you.

Lchad · #12 Jul 30th, 2007, 17:43

homer.. we get it... you feel so close... "If you could just get it to resize, the problem is solved" What are these two women babbling about.

Unfortunately, we know that even though it appears you are close to the solution there is a 150 foot dropped ravine... you can't get there from here!

karinne · #13 Jul 30th, 2007, 17:49

Nice analogy Lchad!

homer09001 · #14 Jul 30th, 2007, 18:33

ive tried playing with the code in those examples and it still makes no sense what so ever to me

karinne · #15 Jul 30th, 2007, 18:36

Yes well ... you won't *learn* CSS in a day!

homer09001 · #16 Jul 30th, 2007, 18:53

Quote:

Originally Posted by karinne

Yes well ... you won't *learn* CSS in a day!

the pages don't explain what does what in a way i understand it that why im finding it difficult to make any sense of it

karinne · #17 Jul 30th, 2007, 18:55

Because you don't know

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
How do i make my PSD Template into a working HTML Page