LandingPage - HTML + Php

Gonzallez · 11 de março de 2014

Fala galera,

Sou leigo em HTML mas estou precisando muito fazer uma LandingPage pro meu Facebook. Já Peguei o script PhP e o código HTML de formulário. Mas o que quero fazer é colocar isso "dentro" de uma imagem.

Tenho aqui uma imagem com os campos "Nome", "E-mail", "Cidade" etc. Como colocar cada parte do formulário certinho nesses respectivos lugares da imagem? Tenho no meu PC o DreamWeaver CC.

Obrigado!

DiF · 11 de março de 2014

Olá,

Tirando fora o dreamweaver, você pode criar uma div do tamanho da sua imagem e deixe a imagem como background.. depois posicione com position absolute os elementos nos seus respectivos lugares... e setando o background do elemento como transparent.

Particularmente, eu não gosto de fazer desse jeito.

Gonzallez · 11 de março de 2014

@dif Obrigado pela pronta resposta.

Teria algum tutorial para me indicar?

DiF · 11 de março de 2014

Tutorial eu não tenho um específico... mas tenho um exemplo:

http://jsfiddle.net/6fL49/

É tudo questão de CSS e posicionamento sob a imagem.

O que posso fazer por você é, indicar para você ler sobre css, os atributos:

position, width, height, background, class.

um bom lugar para ler é: http://www.w3schools.com/css/

ps: eu aconselharia você a não utilizar essa maneira... pois a imagem pode ser pesada para carregar. se o seu formulário for simples como o exemplo.. você pode refazer ele sem a imagem só usando css... como fundo em degradê, estilização dos campos e botões.

Gonzallez · 11 de março de 2014

@dif Fera, vou dar uma estudada nisso.

Mas só para eu entender. Vou usar só CSS, desse modo eu abro um documento em branco do tipo CSS no DreamWeaver ou você recomenda outro editor?

valeu!

Mog.Lucas · 11 de março de 2014

@difMas só para eu entender. Vou usar só CSS, desse modo eu abro um documento em branco do tipo CSS no DreamWeaver ou você recomenda outro editor?

Até o edit do DOS (Windows + R -> cmd -> edit) é melhor que o Dreamweaver. Existem melhores opções no mercado. Não conheço nenhum editor especifico de CSS, mas tenho certeza que o seguinte link poderá lhe ajudar:

http://designmodo.com/css-editors/

Com recomendação para o Notepad++ por ser multiuso e bem leve..