Would anybody know how to code this photoshop layout or know of any tutorials that could help me code this?
Photoshop Layout Coding
Started by Lastcrime, Jun 20 2007 03:16 PM
5 replies to this topic
#1
Posted 20 June 2007 - 03:16 PM
Would anybody know how to code this photoshop layout or know of any tutorials that could help me code this?
#2
Posted 20 June 2007 - 10:55 PM
start with http://www.slicingguide.com (go through all the lesson)
basically, you will be saving your images individually in photoshop and then importing them 1 by 1 into (for example) Dreamweaver. Your layout could be coded with divs (one for the top banner and navigation), then 3 beside each other for your main content and 1 at the bottom (if you want some content at the bottom). Otherwise, you could build your layout with tables, have a row for the banner, another for the navigation, a third row split in 3 columns (within which you will have to insert new tables for your vertically extending content) and a fourth optional row if you plan on putting something at the bottom.
oh, and if everything i just wrote seems a little confusing, you will understand it much better (specifically the table design) after going through the Slicing Guide.
basically, you will be saving your images individually in photoshop and then importing them 1 by 1 into (for example) Dreamweaver. Your layout could be coded with divs (one for the top banner and navigation), then 3 beside each other for your main content and 1 at the bottom (if you want some content at the bottom). Otherwise, you could build your layout with tables, have a row for the banner, another for the navigation, a third row split in 3 columns (within which you will have to insert new tables for your vertically extending content) and a fourth optional row if you plan on putting something at the bottom.
oh, and if everything i just wrote seems a little confusing, you will understand it much better (specifically the table design) after going through the Slicing Guide.
Edited by Tirus, 20 June 2007 - 10:56 PM.
#3
Posted 21 June 2007 - 04:07 PM
yah i followed this guide and it worked out good and gave me a much better idea of what i can do between photoshop and dreamweaver. thnx. it was much harder following and coding the photoshop files using divs i find this much easier.
Edited by Plastered, 21 June 2007 - 04:08 PM.
#4
Posted 21 June 2007 - 04:31 PM
Plastered, on Jun 21 2007, 05:07 PM, said:
yah i followed this guide and it worked out good and gave me a much better idea of what i can do between photoshop and dreamweaver. thnx. it was much harder following and coding the photoshop files using divs i find this much easier.
glad to hear it.
people do generally (or so I believe) start coding layouts with tables as it is simpler, and they later on move to using divs and much more css as they gain experience. It is a bit harder, but you can get some great results. Either way, there are plenty of tutorials on both coding methods so I think you have your work cut out for you. Good luck!
Edited by Tirus, 21 June 2007 - 04:32 PM.
#5
Posted 02 July 2007 - 11:01 AM
Hello
Just In Photoshop go to file >>> save for web >>> then Just click save
Just In Photoshop go to file >>> save for web >>> then Just click save
#6
Posted 02 July 2007 - 04:34 PM
^ I beg, please dont code your layouts using the ps html.
Its awful and you won't understand it.
In dreamweaver create the layout using tables, as most newbies learning xhtml etc find it easier to create layouts using tables due to the visual aids dreamweaver gives.
Once you've got tables mastered learn how to make pure CSS webpages, although you will find it difficult at first, compared to tables the versatility you get using pure css in awesome.
gl
Its awful and you won't understand it.
In dreamweaver create the layout using tables, as most newbies learning xhtml etc find it easier to create layouts using tables due to the visual aids dreamweaver gives.
Once you've got tables mastered learn how to make pure CSS webpages, although you will find it difficult at first, compared to tables the versatility you get using pure css in awesome.
gl
1 user(s) are reading this topic
0 members, 1 guests, 0 anonymous users
