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

This is a discussion on "How do i make my PSD Template into a working HTML Page" within the Web Page Design section. This forum, and the thread "How do i make my PSD Template into a working HTML Page are both part of the Design Your Website category.



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

Notices
Please Register!
Webforumz.com is an education based community supporting web designers, developers and those who are new and learning. If you are a designer, developer, learning web design or are thinking about a career in web design then you have come to the right place. Register for free now to access more information and to participate in discussion and debate.


Reply
Page 1 of 2 1 2 >
 
LinkBack Thread Tools
  #1 (permalink)  
Old Jul 30th, 2007, 15:44
Junior Member
Join Date: Jul 2007
Location: Washington, England
Age: 20
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
How do i make my PSD Template into a working HTML Page
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>
Reply With Quote

  #2 (permalink)  
Old Jul 30th, 2007, 16:31
karinne's Avatar
SuperMember

SuperMember
Join Date: Jan 2007
Location: You know where
Age: 31
Posts: 4,617
Thanks: 0
Thanked 0 Times in 0 Posts
Re: How do i make my PSD Template into a working HTML Page
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
Reply With Quote
  #3 (permalink)  
Old Jul 30th, 2007, 17:23
Junior Member
Join Date: Jul 2007
Location: Washington, England
Age: 20
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
Re: How do i make my PSD Template into a working HTML Page
none of teh websites listed on the post make any sense to me whatso ever do you know of any basic tutorials etc?
Reply With Quote
  #4 (permalink)  
Old Jul 30th, 2007, 17:26
SuperMember

SuperMember
Join Date: Sep 2006
Location: Pink House
Posts: 3,946
Thanks: 0
Thanked 0 Times in 0 Posts
Re: How do i make my PSD Template into a working HTML Page
homer what program are you using to build your sites? Dreamweaver?
Let me know..
Reply With Quote
  #5 (permalink)  
Old Jul 30th, 2007, 17:29
Junior Member
Join Date: Jul 2007
Location: Washington, England
Age: 20
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
Re: How do i make my PSD Template into a working HTML Page
Cuteftp i simply edit them in my ftp program
Reply With Quote
  #6 (permalink)  
Old Jul 30th, 2007, 17:31
SuperMember

SuperMember
Join Date: Sep 2006
Location: Pink House
Posts: 3,946
Thanks: 0
Thanked 0 Times in 0 Posts
Re: How do i make my PSD Template into a working HTML Page
That's an ftp program. Do you use anything to open up your html pages to make changes to them?
Reply With Quote
  #7 (permalink)  
Old Jul 30th, 2007, 17:33
Junior Member
Join Date: Jul 2007
Location: Washington, England
Age: 20
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
Re: How do i make my PSD Template into a working HTML Page
nope
Reply With Quote
  #8 (permalink)  
Old Jul 30th, 2007, 17:35
karinne's Avatar
SuperMember

SuperMember
Join Date: Jan 2007
Location: You know where
Age: 31
Posts: 4,617
Thanks: 0
Thanked 0 Times in 0 Posts
Re: How do i make my PSD Template into a working HTML Page
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.
Reply With Quote
  #9 (permalink)  
Old Jul 30th, 2007, 17:36
SuperMember

SuperMember
Join Date: Sep 2006
Location: Pink House
Posts: 3,946
Thanks: 0
Thanked 0 Times in 0 Posts
Re: How do i make my PSD Template into a working HTML Page
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.
Reply With Quote
  #10 (permalink)  
Old Jul 30th, 2007, 17:37
Junior Member
Join Date: Jul 2007
Location: Washington, England
Age: 20
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
Re: How do i make my PSD Template into a working HTML Page
bassicaly all i need to do is get my web layout i made to expand to fill the IE windows as it resizes?
Reply With Quote
  #11 (permalink)  
Old Jul 30th, 2007, 17:40
karinne's Avatar
SuperMember

SuperMember
Join Date: Jan 2007
Location: You know where
Age: 31
Posts: 4,617
Thanks: 0
Thanked 0 Times in 0 Posts
Re: How do i make my PSD Template into a working HTML Page
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.
Reply With Quote
  #12 (permalink)  
Old Jul 30th, 2007, 17:43
SuperMember

SuperMember
Join Date: Sep 2006
Location: Pink House
Posts: 3,946
Thanks: 0
Thanked 0 Times in 0 Posts
Re: How do i make my PSD Template into a working HTML Page
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!
Reply With Quote
  #13 (permalink)  
Old Jul 30th, 2007, 17:49
karinne's Avatar
SuperMember

SuperMember
Join Date: Jan 2007
Location: You know where
Age: 31
Posts: 4,617
Thanks: 0
Thanked 0 Times in 0 Posts
Re: How do i make my PSD Template into a working HTML Page
Nice analogy Lchad!
Reply With Quote
  #14 (permalink)  
Old Jul 30th, 2007, 18:33
Junior Member
Join Date: Jul 2007
Location: Washington, England
Age: 20
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
Re: How do i make my PSD Template into a working HTML Page
ive tried playing with the code in those examples and it still makes no sense what so ever to me
Reply With Quote
  #15 (permalink)  
Old Jul 30th, 2007, 18:36
karinne's Avatar
SuperMember

SuperMember
Join Date: Jan 2007
Location: You know where
Age: 31
Posts: 4,617
Thanks: 0
Thanked 0 Times in 0 Posts
Re: How do i make my PSD Template into a working HTML Page
Yes well ... you won't *learn* CSS in a day!
Reply With Quote
  #16 (permalink)  
Old Jul 30th, 2007, 18:53
Junior Member
Join Date: Jul 2007
Location: Washington, England
Age: 20
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
Re: How do i make my PSD Template into a working HTML Page
Quote:
Originally Posted by karinne View Post
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
Reply With Quote
  #17 (permalink)  
Old Jul 30th, 2007, 18:55
karinne's Avatar
SuperMember

SuperMember
Join Date: Jan 2007
Location: You know where
Age: 31
Posts: 4,617
Thanks: 0
Thanked 0 Times in 0 Posts
Re: How do i make my PSD Template into a working HTML Page
Because you don't know CSS. If you knew CSS, played a bit with it, then you would be able to understand it more.
Reply With Quote
  #18 (permalink)  
Old Jul 30th, 2007, 19:05
Junior Member
Join Date: Jul 2007
Location: Washington, England
Age: 20
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
Re: How do i make my PSD Template into a working HTML Page
Quote:
Originally Posted by karinne View Post
Because you don't know CSS. If you knew CSS, played a bit with it, then you would be able to understand it more.
my point exactly unless i can view a page that tells me what does what then im not going to know what does what leaving me to trial and error my taking things out and adding things which is the long way around
Reply With Quote
  #19 (permalink)  
Old Jul 30th, 2007, 19:09
karinne's Avatar
SuperMember

SuperMember
Join Date: Jan 2007
Location: You know where
Age: 31
Posts: 4,617
Thanks: 0
Thanked 0 Times in 0 Posts
Re: How do i make my PSD Template into a working HTML Page
Start off at HTMLDog for some basic CSS tutorials
Reply With Quote
  #20 (permalink)  
Old Jul 30th, 2007, 19:17
Junior Member
Join Date: Jul 2007
Location: Washington, England
Age: 20
Posts: 11
Thanks: 0
Thanked 0 Times in 0 Posts
Re: How do i make my PSD Template into a working HTML Page
ok ill give them a shot thank you
Reply With Quote
Reply
Page 1 of 2 1 2 >

Tags
psd html css

« <HR> Styling | mimic iframe »
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
Is there a html code to make a page a certain size allstar Web Page Design 4 May 5th, 2008 20:25
How to make a template kobesunset Starting Out 7 Feb 8th, 2008 21:04
Generating a CSS Template from HTML dhochee Web Page Design 2 Apr 3rd, 2007 18:06
Template not working in my IE leoj Web Page Design 5 Sep 22nd, 2006 14:04
Someone to make Blog around currrent template saltedm8 Job Opportunities 1 Jun 8th, 2006 18:43


All times are GMT. The time now is 21:25.

Contact Us - Web Design & Development Forums - Archive - Top

Sleep Study Scoring :: Free Bet :: Online Betting :: Bookmakers :: Funny Quotes :: Internet Recruitment Software :: Microsoft CRM Experts :: Online Casino :: Decorated Christmas Trees :: Midwife Forums :: Football Betting :: Web Development India :: Ecommerce Software :: Football Stats :: Dry Cleaning Collection :: Free Bets :: xtreme wales - extreme clothing :: Apuestas :: SEO Company India :: Werbeartikel :: Sharepoint Consultants :: Search Engine Optimisation :: Office Clearance London :: Sharepoint Experts :: Sports Betting :: Casino :: Website Templates :: Online Gambling

Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17