[Resolvido] importação de layout feito no photoshop

[Cristy0505 0]

Bom dia, estou desenvolvendo o layout no photosshop e por enquanto fiz a arte do home e durante o processo me surgiram algumas dúvidas.

Ele será um website com login, fiz a caixa de login e tudo mais, mas gostaria de saber depois que a pessoa se conecta, aparece aquela mensagem "Olá, fulano bem-vindo devolta, seu último login de sucesso foi em <data>"

Então, nesta parte a minha dúvida é a seguinte, se vou fazer a arte no photoshop para fatir e depois exportar para o Dream Weaver, devo criar duas versões do mesmo Quadro (uma com a caixa de login e outra sem) e tenho a mesma dúvida quanto aos botões do menu, pois gostaria que quando passasse o mouse por cima ele mudasse de cor, então como ficaria isto na hora de fatiar?

 

Segunda dúvida: passando para a página 2 e seguintes

Imagino que simplesmente refazer tudo novamente (colocar o banner de novo, os menus, etc) deixaria mais pesado e que pela lógica contariam como peças diferentes daquelas usadas na primeira página, o home, então gostaria de saber como desenvolvo a página dois e seguintes com os mesmos itens, somente alterando a parte que tem News, parceiros etc ou seja, uma parte da página só...Como funcionaria isto?

[Matheus Brito 12]

Seja bem vinda Cristy0505, na verdade existem muitas dessas coisas ai que são feitas no front-end do site, por exemplo um botao do menu que muda de cor quando ta ativo, isso é feito no css. Então você tem que saber com o que realmente precisa se preocupar. O login você cria a caixa que você pretende usar no sistema e pronto, depois via linguagem você irá fazer a caixa sumir e pronto, o que vai aparecer depois com o nome de quem ta logado é outra coisa, um simples label e pronto, e por ai vai...

Abs e boa sorte

[Cristy0505 0]

Muito obrigada pela atenção, bem mas deverá existir um pedaço de background da mesma dimensão da fatia que sumirá (no caso a caixa de login) senão fica um buraco, não?

Fiz em teste, apaguei a layer e salvei a as fatias, depois acendi e novamente salvei (ou seja, duas versões do mesmo "lugar")

Quanto ao menu, é que ele não é texto e sim um botão imagem...

[WilliansS 73]

Olá Cristy tudo bem?

Complementando a resposta do Matheus...

 

Um site quando feito totalmente no photoshop por exemplo ele fica pesado, o photoshop deve ser usado como ferramenta criativa para expressar o layout como ele deve ser e tambem para desenvolver alguns elementos gráficos fixos no site como por exemplo, Logotipos, botões e backgrounds. Atualmente quase tudo pode ser feito usando programação, seja java script ou css, mesmo que seja um botão animado. EX: se você necessita de um botão que use 2 imagens, na primeira ela tenha um smile triste e quando passamos o mouse encima o smile sorria, seu trabalho será apenas fazer essas duas imagens para que quando implementadas encima de um código css elas possam alternar entre si.

 

Eu pessoalmente não aconselho desenvolver um site todo no photoshop, além de te dar muito trabalho, ele ficará inviável para navegação e pesado, por mais que as imagens sejam leves.

 

Bom, qualquer dúvida, estou a disposição.

 

Beijos.

[Cristy0505 0]

Boa noite, vim agradecer a atenção, bem eu já terminei esta parte, inclusive ia postar no forum do dreamweaver agora, qualquer coisa sintam-se à vontade para mover o tópico se quiserem.

Acabei de fazer o onmouseover menu no dreamweaver, coloco os atalhos para buscar imagem 1 na pasta da imagem e para imagem 2 a de fundo, porém, apesar dele mostrar que tem duas imagens ambas imagens são a mesma, quando passa o mouse, ele não indica a imagem que seria para indicar, já fiz o mesmo processo umas 10 vezes e todas as vezes acontece a mesma coisa...Alguma sugestão?

 

Será que é a forma quer estou salvando?Coloco para salvar em Save as e depois escolho todos os documentos (xhtml, html etc)

[WilliansS 73]

Boa noite, vim agradecer a atenção, bem eu já terminei esta parte, inclusive ia postar no forum do dreamweaver agora, qualquer coisa sintam-se à vontade para mover o tópico se quiserem.

Acabei de fazer o onmouseover menu no dreamweaver, coloco os atalhos para buscar imagem 1 na pasta da imagem e para imagem 2 a de fundo, porém, apesar dele mostrar que tem duas imagens ambas imagens são a mesma, quando passa o mouse, ele não indica a imagem que seria para indicar, já fiz o mesmo processo umas 10 vezes e todas as vezes acontece a mesma coisa...Alguma sugestão?

 

Será que é a forma quer estou salvando?Coloco para salvar em Save as e depois escolho todos os documentos (xhtml, html etc)

 

Olá Cristy0505, tente verificar o nome das imagens, verifique se elas tem o mesmo nome, e altere se for o caso.

as vezes mesmo estando em pastas diferentes acaba ficando algo em cache e por isso as imagens não alternam entre si.

 

Abraços.

[Elektra 102]

...Alguma sugestão?

 

Será que é a forma quer estou salvando?Coloco para salvar em Save as e depois escolho todos os documentos (xhtml, html etc)

 

Um pouco de estudo do DW permite compreender isso, pesquisar e adquirir livros sempre ajuda muito.

 

Fiz um exemplo simples pra você visualizar, criei botões com gradiente no Photoshop:

 

https://rapidshare.com/files/936012512/DW.rar

 

Você irá utilizar o comportamento Swap Image no DW (uso o CS4) para a troca de imagens ao evento do mouse.

 

Usei 2 imagens, 'servicos_over' e 'servicos_down'.

 

Inicialmente inseri a imagem 'servicos_over', no inspetor de propriedades, na área referente ao nome da imagem (ID) digitei 'serviços' (aqui não importa o nome).

 

Depois, selecione a imagem e clique no menu Window > Behaviours - para abrir o painel - escolha a opção Swap Image, clique em Browse e selecione a imagem que será alterada >> no exemplo que fiz, foi a imagem servicos_down > clique OK.

 

Pronto, é salvar o arquivo e testar.

 

 

Obs: é mais indicado usar CSS, JavaScript ou até mesmo Flash para este tipo de menu, mas é válido para aprendizado saber como funciona os recurso do Dreamweaver.

 

 

Espero que seja útil pra você.

 

 

 

Abraços

[Cristy0505 0]

Oi, gente vim agradecer, mas funcionou da seguinte maneira: eu estava notando que a função não estava funcionado (quer dizer, estava, mas mostrava duas da mesma imagem apesar de eu colocar a versão grifada) dai depois que postei aqui, fiquei lá fazendo e refazendo, e resolvi trocar a ordem das imagens: coloquei como original image invés da original, a segunda e vice e versa e funcionou heheh

Elektra, não é que eu não tenha pesquisado antes de vir aqui tanto é que vi vários tutoriais antes de vir aqui, como vinha responder de qualquer maneira, resolvi postar, as vezes, alguem estava online e dava alguma sugestão, mas não é que eu não iria de forma alguma encontrar a resposta, pq para cada passo que dei, eu pesquisei milhões de coisas e no final, acabei encontrando sozinha antes de algum fórum me responder (inclusive era por isso que só respondia bem tarde o tópico), mas sou muito grata pela atenção de coração mesmo, inclusive acredito que esse tópico possa ajudar alguém com as mesmas dúvidas um dia...

 

Eu usei o seguinte atalho Insert > Image Objects > Rollover Image (como na maioria dos tutoriais que encontrei antes de vir aqui) só que coloquei em Original Image: a imagem que queria que aparecesse quando passasse o mouse por cima e em Rollover Image: a original...E deu certo assim :P

 

Novamente, muito obrigada, já terminei tudo, quando tiver montando o layout do meu portfolio volto aqui para novas perguntas heheh

(brincadeira!)

 

Uma boa noite para todos vcs!