HTML,CSS,JS

TETC

REVISÃO HTML,CSS,JS

CRIAR PROJETO NETBEANS• Netbeans• Menu Arquivo• Novo Projeto

• Na janela Novo projetos– escolha em Categoria JavaWeb e em Projetos

Aplicação Web– Próximo >

• Na janela Novo Aplicação Web– Informe o nome do projeto (RevisaoHtmlCss)– Local do projeto– Próximo Finalizar

• Botão direita do mouse em Páginas Web– Novo– Diretório (informe o nome)– Finalizar– Criar 3 diretórios (css, js, img)

CRIAR DIRETÓRIOS

CRIAR DIVISÕES 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>Hélio Toshio <b>Kamakawa</b></h1> <strong>Site Pessoal</strong></div>

CONTEUDO DIV TOPO<div id="conteudo"> <h3>Dados Pessoais</h3><br /> <b>Nome</b><br /> Hélio Kamakawa<br /><br /> <b>Moradia</b><br /> Umuarama - PR<br /><br /> <b>Naturalidade</b><br /> Paranavaí - PR<br /><br /> <b>Email</b><br /> [email protected]<br /><br /> <b>Formação</b><br /> Sistema de Informação (Unipar - 2005/2009)<br /><br /> <b>Especialização</b><br /> Desenvolvimento de Software para Web (Unipar/Cianorte)<br /> Administração em Banco de Dados - Oracle (FICM - concluindo)<br /></div>

EXECUTE O PROJETO

INSERIR IMAGENS

• Copiar pasta img e colar em Páginas Web do projeto

• Botão direita do mouse na pasta CSS do projeto– Novo– Folha de estilo em cascata– Informe nome (estilo1)– FINALIZAR

CRIAR ARQUIVO CSS

DEFINIR estilo.cssbody { 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 { font-size:50px; font-family:"Rage Italic","Monotype Corsiva","Edwardian Script ITC"; margin-bottom: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;}

#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>Hélio Kamakawa | Página Pessoal</title> <script language="javascript" src="js/script.js"></script> <link href="css/estilo1.css" id="tipoCss" rel="stylesheet" type="text/css" /></head>

INSERIR VÁRIOS 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>

• Botão direita do mouse na pasta JS do projeto– Novo– Arquivo JavaScript– Informe nome (script)– FINALIZAR

CRIAR ARQUIVO JS

DEFINIR FUNÇÕESfunction 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());}

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);}

DEFINIR FUNÇÕES

EXECUTE O PROJETO

CRIE PELO MENOS UM ESTILO

Documents

HTML,CSS,JS