Layout photoshop e div html - Arte, (Web) Design, 3D & Interfaces - MM Fórum
Layout photoshop e div html
Por Diogo Pereira, 11 de maio de 2010 em Arte, (Web) Design, 3D & Interfaces
Eu tenho aqui uma questao e gostaria que me ajudassem..
Estou me a iniciar em CSS e Html e por isso tenho aqui algumas duvidas...
Como é que voces produzem os vossos layouts? Criam "peça" a "peça" no photoshop ou assim e depois importam aos poucos para o dreamweaver, ou criam tudo juntos e depois é que importam? Suponho que a segunda opção seja mais facil...
Eu criei exactamente o template todo no photoshop e queria agora importa para o dreamweaver, a minha questao é, como crio as divs? Uso a slice tool no photoshop ou crio as mesmo no dw?
Obrigado e desculpem as duvidas ainda basicas!
Bom, não sou nenhum expert mas me viro som isso...
Se é o jeito mais facil não sei, mas eu usaria a Slice tool e criaria divs com floats para a disposição das imagens que tu cortou, la no CSS mesmo.
Se tu importar uma imagem só, alem de ficar pesado pra abrir o site, as divs que vir por cima dela vão ficar bem zuadas.
A não ser que tu use o Flash pra fazer um préloader, ai funciona, mas ai tem um pouco mais de comando e envolve action scrip...
Pois tem toda a razao! se eu importar so como uma imagem fica muito pesado... mas se eu importar com já com os compomentes criados com a slice tool ele no dreamweaver entende me aquilo como tabelas e nao como div´s... esse era o meu problema:S
Você deve recortar todo os objetos do layout criado no Photoshop.
Aqui entra a parte que você vai ter que estudar.
Não se importa nada no Dreamweaver porque ele acaba criando um código sujo e pesado.
Recomendo que você escreva seu html e seu CSS na "raça" criando todas as classes e definições e usando os recortes de seu layout somente via CSS, nada via HTML.
No começo é meio complicado fazer tudo se encaixar perfeitamente, mas não é um bicho de sete cabeças não.
sim eu tambem nao ira usar html para aplicar as modificaçoes, iria usar o CSS. Mas quando eu abro o ficheiro .html que o photoshop me cria com o dreamweaver ele aparece com tabelas e nao com div´s... Ai é que tenho duvidas..
Por isso eu falei que não se deve exportar nada para o dreamweaver.
Recorte na mão e crie os arquivos html e css.
Assim eles ficam do seu jeito e não do jeito da Adobe.
eu abandonei completamente o uso de dreamweaver pra webdesign.
desenho o layout no Illustrator, recorto, exporto e monto o css "na mão" usando CSSEdit + Espresso (macrabbit.com, tem trial, vale a pena)
Eu uso o dreamweaver sem o menor problema. A questão é que uso no modo código. Eu faço assim:
. crio o layout no photoshop ou illustrator, separando tudo em camadas;
. analiso o layout e me organizo para criar as divs css;
. exporto todas as imagens que preciso para meu layout;
. crio o arquivo .css + html.
. testo, testo, testo.
é isso aí, fredperes. dá pra usar o DW dessa forma sim. é que comecei a achar que já que uso apenas código, ficar num programa do tamanho do dreamweaver era exagero. Mais pesado, mais complexo e muito, muito mais caro - quando tudo o que preciso está no CSSEdit, que comprei por uns 50 dolares ;D Dá uma testada nele, vale a pena - sou muito mais rápido usando ele que um DW, hoje em dia.
Realmente o Espresso e o CSSEdit são muito mais baratos e leves do que o Dreamweaver.
Para HTML + CSS e até um pouco de JS e PHP recomendo o uso deles ao invés do Dreamweaver.
O Dream CS5 ainda suja to ??
Seguinte , antes , eu era meio virgem e css , porem pensava que sabia.
Cara , era tudo no photoshop crúuu mesmo , os layouts eu sempre fiz , mais o css nunca soube.
Até que pedi pro meu professor umas reposições.
Cara , é outro mundo , outra vida , outro esquema.
Agora eu continuo fazendo os layouts no PS, e pego as imagens de que necessito , e monto o css legalzão.
Em relaçao ao dream cs5 , nao intendi a pergunta. ;s
Queria saber se o novo Dreamweaver continua "sujando" o código.
Se você usar o Dreamweaver / Photoshop / Fireworks / etc, para criar um arquivo automaticamente: SIM.
Por isso que o melhor é você recortar as imagens e escrever o código HTML e CSS na mão. Mesmo no Dreamweaver, quando é você que escreve fica mais leve, rápido e conciso.
Vou fazer um teste; valeu pela dica!
Estou usando o DW CS5 e tem duas coisas que me agradaram muito, que me fazem usá-lo ainda:
1. browser lab: com ele fica mais fácil testar o código em diversos navegadores, principalmente IE6 e IE7;