WebsiteBaker Support (2.8.x) > Templates, Menus & Design

Porting Template from Photoshop

(1/2) > >>

spiderwebb:
Hi all Im sorry but I must be very very stupid, let me explain

I love WB and can modify the existing templates a bit to suite most of my needs. I want to begin using WB as a backend for my webdesign clients, but I cant seem to understand how to make an existing design into a WB template.

I use Photoshop and Dreamweaver and know my way around basic PHP. Photoshop can create a design as either html or CSS, so folks how do I do it?

 below is a simple design (header, 3 col, footer) from Photoshop as both html and CSS please show me how to make either WB and I will write a Dummies Guide and submit any designs I make to the forum.

HTML Example

--- Code: ---<html>
<head>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (index.psd) -->
<table id="Table_01" width="800" height="600" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="3">
            <img src="images/index_01.jpg" width="800" height="150" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/index_02.jpg" width="176" height="402" alt=""></td>
        <td>
            <img src="images/index_03.jpg" width="481" height="402" alt=""></td>
        <td>
            <img src="images/index_04.jpg" width="143" height="402" alt=""></td>
    </tr>
    <tr>
        <td colspan="3">
            <img src="images/index_05.jpg" width="800" height="48" alt=""></td>
    </tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
--- End code ---

CSS Example


--- Code: ---<!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>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- ImageReady Styles (index.psd) -->
<style type="text/css">
<!--

#Table_01 {
    position:absolute;
    left:0px;
    top:0px;
    width:800px;
    height:600px;
}

#index-01_ {
    position:absolute;
    left:0px;
    top:0px;
    width:800px;
    height:150px;
}

#index-02_ {
    position:absolute;
    left:0px;
    top:150px;
    width:176px;
    height:402px;
}

#index-03_ {
    position:absolute;
    left:176px;
    top:150px;
    width:481px;
    height:402px;
}

#index-04_ {
    position:absolute;
    left:657px;
    top:150px;
    width:143px;
    height:402px;
}

#index-05_ {
    position:absolute;
    left:0px;
    top:552px;
    width:800px;
    height:48px;
}

-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#FFFFFF;">
<!-- ImageReady Slices (index.psd) -->
<div id="Table_01">
    <div id="index-01_">
        <img id="index_01" src="images/index_01.jpg" width="800" height="150" alt="" />
    </div>
    <div id="index-02_">
        <img id="index_02" src="images/index_02.jpg" width="176" height="402" alt="" />
    </div>
    <div id="index-03_">
        <img id="index_03" src="images/index_03.jpg" width="481" height="402" alt="" />
    </div>
    <div id="index-04_">
        <img id="index_04" src="images/index_04.jpg" width="143" height="402" alt="" />
    </div>
    <div id="index-05_">
        <img id="index_05" src="images/index_05.jpg" width="800" height="48" alt="" />
    </div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>
--- End code ---


Thanks in anticipation

Edit:
Please use for code the code funktion of SMF. Thanks Matthias

erpe0812:
Hi

would be good to read the help pages.

All your questions are answered there.

rgds

erpe

spiderwebb:
Hi erpe

Thanks for your reply, I have read the help pages, many times and trust me if they had explained what I was asking I would not have posted my request. I am sure I am not the only person out there who cant make heads nor tails of the help pages or there would be far more templates available.

Most of the templates I have seen are variations of the andreas01/maxdesign with over 20000 PSD templates floating around the internet would it not be nice to have a way the non WB experts could port these templates.

If this is not possible, I will just have to keep on designing websites without using WB but this would be a shame

Regards

Spiderwebb (Non WB Expert) 

ruebenwurzel:
Hello,

so maybe you have overseen this here:

http://help.WebsiteBaker.org/pages/en/advanced-docu/designer-guide.php

look at: adding wb functions, creating a wb template ....

all explained.

Matthias

erpe0812:
Hi Spiderwebb,

be sure that there are lost of wb-templates outside that will never reach any official gallery for people created them for their own or their customer's use.

It is that easy even for a newby in html and css to create a wb template that is not impossible to make your own templates or modify existing templates even if you are not a coder.

I created my first template by using the help pages and finished it 1 week after having started with wb. And I had only less skills  reagrding html or css at that time (and none in php, the same as today  :-D) .

And I know that there are a lot bakers outside that started the same way.

So it depends on you, to use this easy cms or move to another one.

And if you search the forum there are some examples of templates that have been ported to wb  from other templates.

So if you are not able to port a template, ask someone to do it for you or learn to port it by your own.

rgds

erpe

Navigation

[0] Message Index

[#] Next page

Go to full version