HTML Muito Bom

http://www.linhadecomando.
com/category/javascript
O nosso site ser criado dentro da rea til de uma resoluo de monitor de 1024 x 768px. A rea til aproximada de 950 x 500px. Antigamente usava-se muito a resoluo de 800 x 600px devido a limitao das placas de vdeos e do tamanho da tela dos monitores. Podemos afirmar que, atualmente, mais da metade dos usurios utilizam uma resoluo igual ou maior que 1024px. No primeiro post eu disponibilizei um cdigo inicial para o desenvolvimento deste website. index.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <link href="estilo.css" rel="stylesheet" type="text/css" /> <title>Criando um website</title> </head>
<body> <div id="tudo"> <div id="cabecalho"></div> <div id="menu"></div> <div id="conteudo"></div> </div> </body> </html>
Vamos precisar criar um arquivo .css para configurao dos elementos do site. Um arquivo css externo fica melhor de visualizar e dar manuteno. A chamada do arquivo .css feita dentro da tag head do arquivo index.php. estilo.css #tudo{
#cabecalho{
#menu{ }
#conteudo{
Arquivo .css com alguns dados para ajustar o tamanho do site. #tudo{ width:900px; /* valor dentro da area util */ margin:0 auto; /* centraliza o site */ }
#cabecalho{ background-color:#000033; /* cor de fundo */ height:120px; /* altura do site */ color:#FFFFFF; text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:16px; line-height:120px; /* alinhamento vertical */ }
#menu{ background-color:#FFFF00; /* cor de fundo */ width:270px; /* largura do menu */ float:left; }
#conteudo{ background-color:#FF0000; /* cor de fundo */ float:right; width:620px; /* largura da area de conteudo */ }
Eu no estarei aprofundando em css. Para aqueles que querem aprender, temos o site do Maujor como uma tima referncia para aprendizado de css. Prximo post: Criao do Menu, Vamos utilizar css e javascript. tag(s): css site, dimenses, html ago 17 Criando um site: Layout (parte 1) Criando um site 0 Comentrio(s)
Estarei ensinando nos prximos posts a criar um site completo, com um layout simples, mas funcional. Os recursos utilizados sero: html - css - php - photoshop
Segue, abaixo, o layout do site que criaremos.
Este layout foi desenhado no fireworks, mas poderia ter sido feito no photoshop, corel draw ou qualquer outra ferramenta de edio de imagem. Com base nessa imagem, iniciamos com o cdigo html. Cdigo: <div id="tudo"> <div id="cabecalho"></div> <div id="menu"></div> <div id="conteudo"></div>
</div> Prximo post, definindo as dimenses do nosso site. tag(s): CSS, fireworks, html, layout, Photoshop, PHP, site
OUTRO TOPICO MUITO BOM ago 24 JavaScript: Valindando campos do tipo Radio(Melhorado) JavaScript 0 Comentrio(s) Aproveitando o cdigo do post anterior, foram acrescentadas mais algumas linhas de cdigo, para destacar o ttulo Endereo para correspondncia:. O ttulo ser destacado com a cor vermelha. Acrescentado as linhas 4 e 9 e na linha 21 utilizamos a tag span com id=end. 1 <script language="JavaScript"> 2 function validaRadio() { 3 4 5 6 7 8 9 10 11 12 13 } 14 } return true; if (document.form1.tipoEndereco[0].checked == false && document.form1.tipoEndereco[1].checked == false) { alert('Por favor, selecione o Tipo de Endereo.'); texto.style.color = "#ff0000"; return false; var texto = document.getElementById('end');
</script> </head> 15 <body> 16 17 <form name="form1" method="post" onSubmit="return 18 validaRadio();"> 19 <table> 20 <tr><td colspan="2"><span id="end">Endereo para 21 correspondncia:</span></td></tr> 22 <tr> 23 <td>Residencial: <input name="tipoEndereco" type="radio"
24 value="Residencial"></td> 25 <td>Profissional: <input name="tipoEndereco"
26 type="radio" value="Profissional"></td> 27 </tr> 28 </table> <p><input type="submit" value="Enviar"></p> </form> tag(s): CSS, JavaScript, Radio ago 24 JavaScript: Valindando campos do tipo Radio JavaScript 0 Comentrio(s) Segue um exemplo de como validar campos do tipo Radio ou Radio Buttons ou ainda Botes de Rdio. Lemnbrando que os campos do tipo rdio devem possuir o atributo name com o mesmo valor.
<input name=tipoEndereco type=radio value=Residencial> <input name=tipoEndereco type=radio value=Profissional> <html> <head> <script language="JavaScript"> function validaRadio() { if (document.form1.tipoEndereco[0].checked == false && document.form1.tipoEndereco[1].checked == false) { alert('Por favor, selecione o Tipo de Endereo.'); return false; } return true; } </script> </head> <body>
<form name="form1" method="post" onSubmit="return validaRadio();"> <table> <tr><td colspan="2">Endereo para correspondncia:</td></tr> <tr> <td>Residencial: <input name="tipoEndereco" type="radio" value="Residencial"></td> <td>Profissional: <input name="tipoEndereco" type="radio" value="Profissional"></td> </tr>
</table> <p><input type="submit" value="Enviar"></p> </form> </body> </html> tag(s): JavaScript, Radio Buttons, validando campos ago 11 JavaScript: getElementById + CSS + Flash JavaScript 0 Comentrio(s)
Utilizando-se desses trs recursos, faremos um efeito bem legal - uma animao ser exibida assim que carregar a pgina e ficar ativa por alguns segundos. Aqui eu no vou ensinar como criar a animao em flash, fique a vontade para criar a sua animao. Vamos utilizar: - animao Flash - cdigo JavaScript - css inline Acompanhe o cdigo abaixo: 1 <head> 2 <script type="text/javascript" > 3 function fechaAnimacao() { 4 5 6 } var vFlash = document.getElementById('divFlash'); vFlash.style.visibility = 'hidden';
7 8 9 10 11 12 13 14
</script> </head> <body> <div id="divFlash" style="position:absolute; zindex:10000; left:280px; top:300px"> <arquivo flash> </div> <script>setInterval(fechaAnimacao, 8000);</script>
</body> Explicando: - funo fechaAnimacao(): funo bem simples; passado para a varivel vFlash o id do elemento div definido com o nome de divFlash. - Esta varivel utiliza um manipulador css para ocultar a animao. Em um post anterior eu disponibilizei uma tabela com as propriedades do css permitidas no JavaScript. Acesse aqui. - dentro da tag body temos um div que contm a animao Flash e logo aps, um script que ao ser chamado espera 8 segundos para executar a funo fechaAnimacao(). O div utiliza css inline para ajustar a posio. Voc pode mudar os valores de left e top para definir uma nova posio. O z-index utilizado para que a exibio da animao ocorra acima dos demais elementos div. tag(s): animao, CSS, Flash, getElementById, JavaScript, popup jul 29 JavaScript: getElementById (Exemplo) JavaScript 0 Comentrio(s) Vamos ao primeiro exemplo de utilizao da funo getElementById.
<html> <head> <script type="text/javascript"> function verificaCampo(){ var v_campoTexto = document.getElementById('campoTexto'); if(v_campoTexto.value != "") alert("Voc digitou: " + v_campoTexto.value) else alert("Por favor, preencha o campo!") } </script> </head> <body> <input type="text" id="campoTexto" style="border:#FF0000 solid 2px" /> <input type="button" onclick="verificaCampo()" value="Verificar Campo" style="backgroundcolor:#000000;color:#FFFFFF"/> </body> </html> Resultado:
Campo de texto: id = campoTexto. Boto: evento onclick chama funo verificaCampo(). Funo verificaCampo(): atribui o valor do campo de texto a uma varivel. Depois
verificado se o valor obtido diferente de branco. Conforme o contedo da varivel exibido uma mensagem atravs do mtodo Alert. tag(s): Adicionar nova tag, exemplo, getElementById, JavaScript jul 28 JavaScript: Trabalhando com getElementById JavaScript 0 Comentrio(s) O getElementById permite acessarmos os elementos dentro de uma pgina HTML pelo seu id. Mas antes de falar sobre, vale a pena ler este post. Clicando neste post voc ficar por dentro do que esta funo pode diferenciar quando executada pelo Internet Explorer em verses anteriores a 8. Leia todo o texto e nos prximos posts iremos fazer alguns exemplos bem legais. tag(s): getElementById, JavaScript jul 28 JavaScript: Alterando Tamanho de uma Imagem JavaScript 0 Comentrio(s) Aprenda neste post como aumentar e diminuir o tamanho de uma imagem. Vamos utilizar os eventos onclick e ondblclick da imagem. Estes eventos faro a chamada de 2 funes que recebero como parmetro o nome da imagem. <html> <head> <script type="text/javascript"> function aumentaImagem(nome){ nome.width = nome.width+50;
nome.height = nome.height+50; } function tamanhoNormal(nome){ nome.width = 150; nome.height = 55; } </script> </head> <body> <img src="http://www.linhadecomando.com/logo.jpg" name="logo" width="150" height="55" onclick="aumentaImagem(logo);" ondblclick="tamanhoNormal(logo);" style="cursor:pointer" /> </body> </html> Como funciona: Quando ocorrer um clique sobre a imagem, a mesma aumentar. Ser acrescido 50 a largura e a altura da imagem. Quando for dado um clique duplo a imagem retorna ao seu tamanho original. tag(s): imagem, JavaScript, onclick, ondblclick Anterior

HTML Muito Bom

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

HTML Muito Bom

Hochgeladen von

Copyright:

Verfügbare Formate

http://www.linhadecomando.

#menu{ background-color:#FFFF00; /* cor de fundo / width:270px; / largura do menu */ float:left; }

#conteudo{ background-color:#FF0000; /* cor de fundo / float:right; width:620px; / largura da area de conteudo */ }

Segue, abaixo, o layout do site que criaremos.

24 value="Residencial"></td> 25 <td>Profissional: <input name="tipoEndereco"

Das könnte Ihnen auch gefallen