Op@alo - Challenge 4 - PHP,MySQL ,Jquery, HTML , CSS ...

Op@alo Qua Out 12, 2011 8:59 pm

2-)Usando o framework que bem entender ( ou linguagem de programação WEB ), crie um layout em código ou gráfico com aplicação WEB da sua linguagem de programação. É obrigatório ter os seguintes itens:* Título da página* Nome da página* Link de Index ( ou home ) , Sobre o site , Contatos.
* Comentários em todas as páginas. Ou seja, Index (ou home ), sobre o site , contatos.

É importante dizer qual framework usou, e não esquecer de dispor para download o source bem como comentar os códigos.

Usei o Jquery sómente....
index.html

Código:: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head>  <script type="text/javascript" src="jquery.js"></script> <link href='estilo.css' rel="stylesheet" type="text/css" /> <title>Challenge 4</title> <script type="text/javascript"> //Ultilizando o Jquery $(document).ready(function(){ //esconde os conteudos $(".conteudo").hide(); //quando clicar no link index... aparece a div do conteudo index. $("#in").click(function(){ $("#index").slideToggle("slow"); }); //quando clicar no link contato...aparece a div da mesma forma do index $("#cont").click(function(){ $("#contato").slideToggle("slow"); }); //... e assim tbm para o link 'sobre o site' $("#sobsite").click(function(){ $("#sobre").slideToggle("slow"); }); }); </script> </head> <body> <div id="menu1" align="center"><img src="chall4.png"/></div> <div> <ul id="menu"> <li id="in" class="aba"><a href="#aba1">Index</a></li> <li id="cont" class="aba"><a href="#aba2">Contato</a></li> <li id="sobsite" class="aba"><a href="#aba3">Sobre o site</a></li> </ul> </div> <div id="index" class="conteudo"> <p align="justify"><br/><br/><br/>Usando o framework que bem entender ( ou linguagem de programação WEB ), crie um layout em código ou gráfico com aplicação WEB da sua linguagem de programação. É obrigatório ter os seguintes itens:<br/> * Título da página<br/> * Nome da página<br/> * Link de Index ( ou home ) , Sobre o site , Contatos.<br/> * Comentários em todas as páginas. Ou seja, Index (ou home ), sobre o site , contatos.<br/> É importante dizer qual framework usou, e não esquecer de dispor para download o source bem como comentar os códigos. </p> </div> <div id="contato" class="conteudo"> <table align="center"> <tr> <th>Nome</th> <th>Telefone</th> <th>Email</th> </tr> <tr> <td>Mario Idival</td> <td>84 - 99191316</td> <td>marioidival@gmail.com</td> </tr> </table> </div> <div id="sobre" class="conteudo"><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <p>O Site foi desenvolvido em prol do <a href="http://pzim.forumeiros.com">Challenge 4</>, uma competição de programadores bem inteligente , voltada para leigos e experientes na area .</p> </div> </body> </html>

estilo.css

Código:: *{ margin:0px; padding:0px; // usado para zerar a pagina } .aba { // classe aba float:left; text-align:center; width:33%; } a{ text-decoration:none; color:black; } table, th, td { // tags table,th , td padding:10px; font-family:Lucida Console; } p{ // tag paragrafo font-family:Lucida Console; font-size:17px; }