February 16, 200818 yr hey all, i am having a few issues getting to grips with photoshop - dreamweaver - css/div technique all my previous experience has either been straight (fairly basic I'll be honest) html code or simply slice and 'save to web' from photoshop and then load into dreamweaver... i have been playing around with creating divs and using css in dreamweaver - thanks to various tutorials, mainly this one - so, i can do the basics of html/div/css page layout - and then build the images to go inside each div - fairly simple stuff - but feel that I am missing something... maybe I am being really stoopid and just not 'getting it' but - as an example - on this site here - I can't quite work out what is going on... for a start, how does the logo image 'blend' into the background image?! ie. i would expect the logo image to be designed onto the background and then cut out as seperate slice... sorry, hope that makes sense.... also, why is that background image so massive?! am I being a fool? have I just picked a complicated example? obviously with CSS you can't just check out the source code and see what's going on! so, I am asking here..... sorry to both you all! I am more than happy to learn if someone can point me in the direction of a decent tutorial on slicing from photoshop and then setting up as divs with css in dreamweaver... [second thoughts, can this even be done or would I sue a combination of tables - as I would have done before - and divs?] argh I feel like I have read so many conflicting opinions and techniques and guides and got totally lost... *calm* hmmmmn...... rather confused, any pointers, tips, advice etc would be gratefully received! eighty0ne x
February 16, 200818 yr There's no reason why you can't sift through the sourcecode and find a page's stylesheet. The stylesheet for the particular example you gave is here : http://www.belgrade-jazzfest.org/css/makeup.css
February 16, 200818 yr Ok dude it goes something like this, the classic method is this= 1. You put a slice (50-100 pxl width) of your graphic in the body tag with repeat-x ,with your color picker in Photoshop you mark the color at the end of the slice (gradient etc) and you put it in the background color of your body tag in the css. 2. You put your top image logo - design etc in the body tag of the container with top aligned no repeat. If you use floating divs in the container put your footer with clear>both so it wraps. There you have it. If you need more information let me know. If you are using FIREFOX download the CSSVIEWER and you can analyze websites real time and understand how divs work in general. Best OF LUCK
February 18, 200818 yr Author hi, thanks for your responses - been having a play around with CSSVIEWER and Aardvark to see if I can 'get it'... gonna keep playing about, still not sure I totally understand - if I get completely lost I may come back here! thanks again, joe
Create an account or sign in to comment