É hoje que a “gata mia” mermão! rsrs
Recapitulando o “mastigado 3″ falei “chamar a classe” ou “chamar o objeto”.
Simples, em CSS quando você cria uma classe, objeto ou seja la o que for ele fica lá guardado nos códigos, como se você tivesse separado notas de 2, 5, 10, 20, 50 e 100 reais na carteira, ai vai fazer uma compra de R$: 20,00, qual a nota você tiraria para pagar?
Com CSS é a mesma coisa, se fosse um código PHP (ou outra linguagem) nós poderiamos até colocar como variáveis, afinal voce define o nome que quizer para a classe, coloca os atributos dela e pronto é só chama-la.
Pois bem, hoje iremos desenhar na tela, dar formato para ela e ver como seria tudo!
IMPORTANTE: caso você ache estranho o desenho do botão com um negócio escrito encima pode retirar ok? ensinarei como retirar o fundo de desenho.
Mastiguemos?
</span></span>
<html>
<head>
<title>...::Código Mastigado - UPLOAD 1::...</title>
<style>
body { background-image:url(imagens/bg.png);}
.cabecalho {margin: 0 3% 0; background-image:url(imagens/header.png); background-repeat:no-repeat; width: 760px; height: 180px; }
.enviar { background-image:url(imagens/botao_envia.png); height: 35px; width: 180px; border:0px; }
</style>
</head>
<body>
<div></div>
<div id="body" >
<form action="enviar.php" method="POST" enctype="multipart/form-data">
<fieldset>
<legend><font color="#FFFFFF" face="Courier New, Courier, monospace" size="+2">FAZENDO UPLOAD</font></legend>
<span>
<input type="file" name="arquivo" />
</span>
<br><br>
<span>
<input type="submit" name="submit" value="Upload" id="submit"/>
</span>
</form>
</fieldset>
</div>
</body>
</html>
Já haviamos mechido com a parte style, vamos ao corpo da página, primeiro passo CHAMAR O CABEÇALHO:
<div class="cabecalho"></div>
Bom a lógica é que você chamou o objeto que foi declarado lá na função style e que estava com o nome “cabecalho” entendeu? Se você quizer adicionar texto ou quer coisa é só entre os >< escrever algo que aparecerá o texto que você quizer.
Até agora olhe só como ficou:
Logo em seguida vamos ao passo de desenhar o “formulário”:
<div id="body" >
Aqui nós abrimos o corpo da página que fora definido no padrão css, nele contem tudo que declaramos como espaçamento e tal, no final do código precisará ser fechado com um
</div>
senão dá problema para nosso código.
Agora engrossando o caldo:
<form action="enviar.php" method="POST" enctype="multipart/form-data">
Vamos lá! Na primeirae ação do código ele vai entender que a ação a ser executada é abrir o arquivo “enviar.php”, na segunda que o método de comunicação é o “POST” (sinceramente não sou muito adepto do “GET” não) e que a forma de “encode” é multipart e tem dados de formulario.
GLOSSÁRIO ENCTYPE: atributo enctype especifica a representação dos dados do nosso formulário. Este serve para determinar o mecanismo utilizado para encode os conteúdos obtidos pelo formulário. Aqui, eu pessoalmente deixo o browser preocupar-se dado que por defeito quer para o método POST quer para o GET o enctype é application/x-www-form-urlencoded. No entanto terei de especificar o enctype caso deseje ter por exemplo um formulário para upload de ficheiros em que o mesmo será multipart/form-data e em que o método terá também de ser o POST. (retirei do HTMLSTAFF)
<fieldset>
Falando de modo grosseiro, esse negócio ai desenha na tela em volta do formulário uma linha quando usado a tag
</fieldset>
é o final da delimitação dele.
Próximo ingrediente:
<legend><font color="#FFFFFF" face="Courier New, Courier, monospace" size="+2">FAZENDO UPLOAD</font></legend>
Bom, a tag
<legend>
diz:
- “Eu sou a linha do fieldset, eu delimito até onde eu vou. No caso eu iniciarei em frente a letra F de FAZENDO e terminarei na letra D de UPLOAD!”
Ai vem
<font color="#FFFFFF" face="Courier New, Courier, monospace" size="+2">
isso ai basicamente diz para o navegador:
- “Toda a letra que for escrita dentro de minha tag será na cor BRANCA, terá a fonte COURIER NEW e o tamanho HTML +2.”
Dentro da delimitação iniciando pelo > e terminando pelo < temos o texto FAZENDO UPLOAD
esse é o texto que ficara no inicio da tela desenhada, logo em seguida vem o fechamento das tags com
</font> e </legend>[code]</span>. Agora desenharemos o primeiro campo: [code]<span> <input type="file" name="arquivo" /> </span>
Com a tag
<span> e </span>
mandamos o html não fazer alteração visual (basicamente isso).
Logo apos o span, vemos um codigo que seria:
- “Quero um arquivo de entrada de dados do tipo FILE (arquivo) e que terá o nome ARQUIVO pra quando eu precisar, chamar ele no código dinamico que terá. Ai é onde o “cara na frente do monitor” irá clicar para achar o arquivo necessario para subir no servidor.”
Bom não irei mais explicar as tags html básicas, então amigão, no código ai por exemplo tem as tags
<br> e <span>
da uma lidinha no http://www.w3schools.com/TAGS/ lá tem TODAS as tags HTML!
Agora adicionamos um ingrediente pesado:
<input class="enviar" type="submit" name="submit" value="Upload" id="submit"/>
Mastigando:
O arquivo tem a classe enviar (chamou o desenho do botão, se não quizer, so tire a tag class=”enviar”do código) e a entrada de dados nossa é do tipo SUBMIT (ENVIAR, ou seja, ele envia dados para algum lugar) e o nome dele é “submit” (ou seja, sera identificado como submit no codigo dinamico posterior) e o valor dele é “Upload” (tambem será utilizado no codigo dinamico posterior) e a identificação unica dele é submit (poderia ser um numero tambem, mas por questão de identificação colocamos submit porque o codigo é pequeno).
Logo em seguida temos as tags
</form> </fieldset>
que irão fechar o formulário e o desenho da linha! 
Fechamos os conteiners CSS com
</div>
e o resto do código html conforme foi explicado no MASTIGADO 1.
Até agora nossa tela está assim:
Bom, basicamente é isso por hoje pessoal.
Peço perdão por:
Erros de digitação (se virem por favor anunciem e eu corrijo), falta de assunto nos comentários e por ser um cara completamente estranho em relação aos códigos, mas eu converso com eles!
abração a todos e obrigado por lerem e comentarem.
ok