Você está na página 1de 18

TETC

REVISO HTML,CSS,JS

CRIAR PROJETO NETBEANS


Netbeans Menu Arquivo
Novo Projeto

Na janela Novo projetos


escolha em Categoria JavaWeb e em Projetos Aplicao Web Prximo >

Na janela Novo Aplicao Web


Informe o nome do projeto (RevisaoHtmlCss) Local do projeto Prximo Finalizar

CRIAR DIRETRIOS
Boto direita do mouse em Pginas Web
Novo Diretrio (informe o nome) Finalizar Criar 3 diretrios (css, js, img)

CRIAR DIVISES EM index.jsp


<body> <div id="pagina"> <div id=topo">

</div> <!fim topo <div id="menu">


</div> <!fim menu <div id=conteudo"> </div> <!fim conteudo

</div> <!fim pagina </body>

CONTEUDO DIV TOPO


<div id="topo"> <h1>Hlio Toshio <b>Kamakawa</b></h1> <strong>Site Pessoal</strong> </div><!--fim do topo-->

CONTEUDO DIV TOPO


<div id="conteudo"> <h3>Dados Pessoais</h3><br /> <b>Nome</b><br /> Hlio Kamakawa<br /><br /> <b>Moradia</b><br /> Umuarama - PR<br /><br /> <b>Naturalidade</b><br /> Paranava - PR<br /><br /> <b>Email</b><br /> heliotk@unipar.br<br /><br /> <b>Formao</b><br /> Sistema de Informao (Unipar - 2005/2009)<br /><br /> <b>Especializao</b><br /> Desenvolvimento de Software para Web (Unipar/Cianorte)<br /> Administrao em Banco de Dados - Oracle (FICM - concluindo)<br /> </div><!--fim conteudo-->

EXECUTE O PROJETO

INSERIR IMAGENS
Copiar pasta img e colar em Pginas Web do projeto

CRIAR ARQUIVO CSS


Boto direita do mouse na pasta CSS do projeto
Novo Folha de estilo em cascata Informe nome (estilo1) FINALIZAR

DEFINIR estilo.css
body { background-color:#B3B3B3; font-family: Arial, Helvetica, sans-serif; } #pagina{ position:relative; width:900px; padding:30px; }
#topo { text-align:right; line-height:10px; }

#topo h1 b{ color:#FF0000; }
#menu { width:600px; float:right; text-align:right; margin-bottom:30px; } #menu ul li{ display:inline; margin-left:20px; }

#topo h1 { font-size:50px; font-family:"Rage Italic","Monotype Corsiva","Edwardian Script ITC"; margin-bottom:10px; }

#conteudo { padding-left:350px; color:#333333; width:600px; font-size:12px; }

DEFINIR CSS NO HTML


<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Hlio Kamakawa | Pgina Pessoal</title> <script language="javascript" src="js/script.js"></script> <link href="css/estilo1.css" id="tipoCss" rel="stylesheet" type="text/css" /> </head>

INSERIR VRIOS ESTILOS


Copiar arquivos da pasta estilos e colar na pasta css do projeto

MENU ESTILOS
<div id="menu"> <ul> <li><a onclick="mudarCss('estilo1.css')">Estilo 1</a></li> <li><a onclick="mudarCss('estilo2.css')">Estilo 2</a></li> <li><a onclick="mudarCss('estilo3.css')">Estilo 3</a></li> <li><a onclick="mudarCss('estilo4.css')">Estilo 4</a></li> </ul> </div>

CRIAR ARQUIVO JS
Boto direita do mouse na pasta JS do projeto
Novo Arquivo JavaScript Informe nome (script) FINALIZAR

DEFINIR FUNES
function getCss(c_name){ if (document.cookie.length>0){ c_start=document.cookie.indexOf(c_name + "="); if (c_start!=-1){ c_start=c_start + c_name.length+1; c_end=document.cookie.indexOf(";",c_start); if (c_end==-1) c_end=document.cookie.length; return unescape(document.cookie.substring(c_start,c_end)); } } return ""; } function setCss(nomeCss,valor,vencimento){ var exData = new Date(); exData.setDate(exData.getDate()+vencimento); document.cookie = nomeCss + "=" +escape(valor)+ ((vencimento==null) ? "" : ";expires="+exData.toUTCString()); }

DEFINIR FUNES
function checarCss(){ cssPag = getCss('cssPag'); (cssPag!=null && cssPag!="") ? mudarCss(cssPag) : mudarCss('estilo2.css'); } function mudarCss(estilo){ document.getElementById("tipoCss").href="css/"+estilo; setCss('cssPag',estilo,1); }

EXECUTE O PROJETO

CRIE PELO MENOS UM ESTILO