View Full Version : Coding a Template from Photoshop with PHP


Atrocity
09-28-2006, 07:07 PM
Ive made a template in Photoshop CS2. I have it sliced and ready to code. I posted up the problem I was having with iFrames.

After looking through alot of topics on the forum, I found better ways to code it. I would like to try and code it using PHP.

Ive clicked lots of links and they show differents way of doing it, but not with using a Photoshop template that has already been sliced. I have all the buttons sliced and content box.

Using PHP, how would I be able to add content to the content box I sliced in Photoshop>? I read something about using DIV's to do this. Should I use Dreamweaver to add DIV's, or is it better to do with a text editor>?

I read on the HTML Help pages about how to create DIV's using this code:

<div id=layer1 style="position:absolute; top:20; left:20; width:300; height:300; z-index:1; padding:5px; border: #000000 2px solid; background-color:#000000; background-image:url(yourfilename.gif); layer-background-image:url(yourfilename.gif);">

Content goes here (images, text)

</div>

The content box I sliced in PS is this in Dreamweaver:

<img src="images/content.jpg" width="535" height="372" alt="">

How would I code that to work as a DIV>?

I read over this tutorial:

http://www.stilisticdev.net/tutorials.php?t=0002&cmd=full

And I like it says it can work by making a file for each link and using PHP to call that file when a certain link is clicked, but again, it doesnt show me exactly how to add content into my box I sliced out.

This is the basic template Im trying to work with for practice.

http://img176.imageshack.us/img176/862/geeksrr4.png (http://imageshack.us)

bejayel
10-03-2006, 05:34 AM
I am gonna rip that apart. Not to be mean, but to help you learn :D

1)That layout would be easiest using tables.
2) That layout is WAY too much in terms of images, you are going to tear away at your monthly transfer. Your entire layout should need only 8 small images, plus a logo.
3) if you are using a style tag that ridiculously huge in a div, you should do it in a linked stylesheet, then use it in a class attribute in the div.
4) <div> and php have absolutely no common ground what-so-ever except that they are used in the web.
5) Dreamweaver sucks (unless your using the text editor inside dreamweaver, which i actually like) the WYSIWYG editor in dreamweaver sucks.

Now to be a bit more elaborate. If you were to build that entire layout using divs, i would not only be impressed, but be wondering why you wasted so much time. Tables wil have the same effect and will be much easier to code in the end.

Look at your layout. Do you see anything that pops out in terms of common things? I do :D. Its all the EXACT same box, but a differant size. (Not bashing you, this is common, lots of my layouts have been the same style). What i am trying to say is: Cut off a corder of one of th eboxes and save it. Do that with all four corners, being careful to keep the same dimensions. Its easiest to simply rotate teh image if possible (Which in your case it isnt). Just crop and play till you get it right. NOW, take a 1px X 4px clip from EACH side of the box. Next is the hard part. Building the table. You will basically need a 3 X 3 table. Each corner will contain the corresponding corner image (in the cells background) and each side will contain the corresponding side image (again, in the background, so that it can repeat :D). Then the center will simply be a "background-color: #xxxxxx" in your stylesheet. Its a little extra work, but saves a lot of load time and transfer.

Check out lissas tutorial on stylesheets. They will save yoru life a lot of troubles.

The <div> tag is simply a block element in html. Itis used for grouping similar thing stogether in a block. The special thing about <div> tags is that they are easily customizeable with stylesheets. (actually any tag is easily ustomizeable with css :P, divis just the chosen one. I have seent layout that are half built out of lists and css :S)

PHP on the other hand is a server side (meanin gthe server does the cimpiling and running) language that can add a lot of dynamics to yoru page. Now, dont think javascript here, javascript has a completely different purpose (and it is a client side language). I suggest you read up about php at php.net.

Dreamweaver just sucks. There is nothign good about the code that it generates, and it is the fault of many people losing their ability to even code altogether. Sure, make a basic layout in dreamweaver. Then fix it to actually meet xhtml standards, and do the rest yoruself. I personalyl stay as far away from dreamweaver as i can. Unless it is presented to me in my work environment and i MUST use it. I dont use it.

I hope that helps a little.

By the way, with layouts, most people use php includes ;), just to get your started in the right direction.

BlueFlame
10-03-2006, 01:05 PM
I agree with bejayel, tables are the best to use. Unless your a real smart ```` and could pull it off with div tags, as I could do :) but its a lot easier with html tables.