Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Antena

Web Form com imagem criada no photoshop

Por , em Desenvolvimento frontend

Recommended Posts

Antena    0

Antena
Postado

Algum cristão poderia me ajudar a inserir um form em uma imagem.

 

Exemplo: criei esta simples caixa de newsletter no photoshop e quero iserir os respectivos código para hospedr no meu site e realmente ficar ativa.

 

Imagem Postada

 

Sei criar o form e sei criar a imagem. Só não sei uní-los.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme_90    33

Guilherme_90
Postado

Você quer fazer um form igual a este da imagem?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Eliseu M.    2

Eliseu M.
Postado

Ah... você deve estar pensando em converter do PS para HTML. Você terá que ter noção de CSS para poder realizar esta tarefa, além de muito tableless...

 

Este tutorial é ótimo: http://net.tutsplus.com/tutorials/site-builds/from-psd-to-html-building-a-set-of-website-designs-step-by-step/

 

A imagem tem um form extremamente simples. Acesse o site a seguir e comece a criar até chegar a um resultado próximo: Real-time HTML Editor

 

Ah! Não podemos esquecer da função PHP (acabei me desvirtuando um pouco). Há vários tutoriais na web ensinando a criar sistemas de newsletter, além de muito código pronto: http://net.tutsplus.com/freebies/others/fantastic-ajax-newsletter-module/ e outros com dicas para melhorar o corpo do e-mail: http://net.tutsplus.com/tutorials/html-css-techniques/20-email-design-best-practices-and-resources-for-beginners/

 

Espero ter ajudado e até mais!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Antena    0

Antena
Postado

Você quer fazer um form igual a este da imagem?

 

Quero poder faze uma imagem como esta acima e aplicar um form nela, entendeu?

 

Ah... você deve estar pensando em converter do PS para HTML. Você terá que ter noção de CSS para poder realizar esta tarefa, além de muito tableless...

 

Este tutorial é ótimo: http://net.tutsplus.com/tutorials/site-builds/from-psd-to-html-building-a-set-of-website-designs-step-by-step/

 

A imagem tem um form extremamente simples. Acesse o site a seguir e comece a criar até chegar a um resultado próximo: Real-time HTML Editor

 

Ah! Não podemos esquecer da função PHP (acabei me desvirtuando um pouco). Há vários tutoriais na web ensinando a criar sistemas de newsletter, além de muito código pronto: http://net.tutsplus.com/freebies/others/fantastic-ajax-newsletter-module/ e outros com dicas para melhorar o corpo do e-mail: http://net.tutsplus.com/tutorials/html-css-techniques/20-email-design-best-practices-and-resources-for-beginners/

 

Espero ter ajudado e até mais!

 

 

Converter psd para html eu já sei mas, quando tento colocar o form, tudo fica desalinhado.

 

 

Para quem possa me ajudar, fiz o uplod de um htmal já com imagens cortadas e seu respectivo PSD.

http://www.multiupload.com/8I8S3TLPJE

 

Se alguém colocar o form nesse arquivo acima eu analisarei e aprenderei.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Sinceramente, você não precisa de imagens para fazer o formulário que pretende... Pela imagem mostrada, apenas com CSS é perfeitamente possível...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Formulário</title>
	<style type="text/css">
	* {
		margin:0;
		padding:0;
		font-family:Arial, Helvetica, sans-serif;
	}
	body { padding:20px; }
	form fieldset {
		width:500px;
		padding:6px;
		background-color:#f8f8f8;
		border:1px solid #e4e4e4;
	}
	form fieldset label {
		display:block;
		height:22px;
		line-height:22px;
		text-indent:7px;
		font-size:90%;
		padding:3px 0 8px;
		border-bottom:2px solid #e2e2e1;
	}
	form fieldset label input {
		display:block;
		float:right;
		width:145px;
		height:18px;
		font-size:80%;
		margin-right:225px;
		background-color:#ffffa0;
		border:2px inset #e5e5e5;
	}
	form fieldset button {
		display:block;
		width:65px;
		height:24px;
		margin-top:7px;
	}
	form fieldset br { display:none; }
	</style>
</head>
<body>
	<form action="arquivo-de-envio.alguma-coisa" method="post">
		<fieldset>
			<label for="email" title="E-mail">
				E-mail:
				<input type="text" name="email" id="email" title="E-mail" />
			</label>
			<br />
			<button type="submit" title="Enviar">submit</button>
		</fieldset>
	</form>
</body>
</html>
Outra coisa, não existe "inserir um form em uma imagem", no máximo que você faria é aplicar uma imagem como background de um form, aí sim, mas como pode observar com o exemplo acima, não é necessário utilizar imagem nenhuma, basta apenas controlar tudo com CSS.

 

 

http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Antena    0

Antena
Postado

Obrigado.

 

Então reformulando minha pergunta: Como usar a imagem acima como background de um form?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Mas eu volto a insistir: por que querer utilizar uma imagem nesse caso se é possível fazer apenas com CSS? :mellow: Tudo bem, se você quer saber como se faz independentemente, o link que o Evandro passou irá lhe auxiliar, mas pense bem antes de utilizar imagens, verifique se é realmente necessário...

 

 

http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito