Este exercício será parecido com a montagem de um projeto real, onde trabalhamos com vários arquivos XHTML e um único arquivo CSS. 1) Crie uma pasta chamada com_estilo e salve dentro dela os arquivos obrigado.html (copiar código em obrigado.txt e salvar como.html), locadora.jpg e titulo_formulario.jpg 2) Abra no bloco de notas o arquivo obrigado.html (que você salvou na pasta com_estilo ). 3) Dê duplo clique no arquivo obrigado.html (na pasta com_estilo ) para que ele seja aberto no navegador. Observe o layout. 4) Clicar em Iniciar/Executar/Notepad <Enter> para abrir nova janela do bloco de notas (sem fechar a janela já aberta no item 2). a. Salve o arquivo vazio na pasta com_estilo dando o nome estilo_locadora.css (antes de salvar trocar o tipo para todos os arquivos ). b. Copie e cole neste arquivo o código abaixo. Este 1º bloco de código configura as regras gerais do layout (a fonte e sua cor e a cor de fundo da página. Há uma observação ( /* */ ) no código). /* corpo da página com atribuições genéricas */ body { font-family: Verdana, Arial, Helvetica, sans-serif; color: #000; background-color:#000; c. Copie e cole no mesmo arquivo o código abaixo. Este código cria uma caixa central onde todo o conteúdo da página será colocado. Esta caixa terá 720px (pixels) de largura e margens automáticas (a caixa ficará centralizada). O posicionamento é RELATIVO (relative) para que esta caixa sirva de referência para os outros elementos que ela irá conter, ou seja, o ponto (0,0) para as outras caixas será o canto superior esquerdo desta caixa de 720px. /* caixa total centralizada */ #total { position:relative; margin: auto; width: 720px; d. Copie e cole no mesmo arquivo o código abaixo. Este código cria uma nova caixa (de 700px de largura) para conter o conteúdo principal. Note que esta caixa tem posição ABSOLUTA (absolute). Isso significa que esta caixa estará posicionada de acordo com a posição da caixa do item anterior (necessariamente uma relative ). Note o espaçamento superior de 250px, isso é para que o conteúdo não sobreponha o logotipo (veja no código que o logotipo está no background). Observe o código antes de copiar. /* logotipo superior e conteúdo principal */ #conteudo { position:absolute; width: 700px; padding-top: 250px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; background-color: #fff; background-image: url(locadora.jpg); background-repeat: no-repeat; background-position: 10px 10px;
e. Copie e cole no mesmo arquivo o código abaixo. Este bloco é usado para colocar o endereço e o telefone da empresa. Note que o posicionamento também é ABSOLUTO (absolute), seus parâmetros de posição vão corresponder ao elemento PAI (a caixa total (item c) criada como relative). Esta caixa tem 400px de largura, 80px de altura e uma margem à esquerda de 300px (para que ela fique mais a direita). Dentro desta caixa o texto será branco, com fonte 11, negrito, alinhado a direita e entrelinha de 20px. /* conteúdo do lado direito/superior o endereço */ #endereco { position:absolute; width: 400px; height: 80px; margin-top: 40px; margin-left: 300px; font-size: 11px; font-weight: bolder; color: #FFF; text-align: right; line-height: 20px; f. Salve o documento CSS ( estilo_locadora.css ). ATENÇÃO! Todas as propriedades definidas acima estão ligadas ao posicionamento dos elementos div que serão criados a seguir no código HTML. 5) Dê um clique na janela do bloco de notas do arquivo obrigado.html 6) Faça as seguintes alterações no arquivo (indicadas pelas setas) ou copie todo o código abaixo e substitua: <!DOCTYPE html> <html> <head> <title> Formulário - Obrigado! - Locadora Muito Legal</title> <link href="estilo_locadora.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="total"> <div id="conteudo"> <h2><img src="titulo_formulario.jpg" alt="formulário de interesse" /></h2> Obrigado por seu interesse. Entraremos em contato em breve. <hr /> [<a href="formulario.html" title="voltar">voltar</a>] </div> <!-- fechamento div conteudo --> <div id="endereco"> rua da direita, 29 - RJ tel 21 2122 3334 </div> <!-- fechamento div endereco --> </div> <!-- fechamento div total --> </body> </html> Atenção! Note que a linha com a imagem do logotipo for retirada! Está agora no CSS.
7) Observe na figura abaixo a forma como os elementos são posicionados na estrutura HTML. A div #total é pai das outras duas div (filhos). Obs.: caso a janela do navegador seja redimensionada a div pai (relative) carregará consigo as div s filho (posicionamento absoluto), continuando centralizada. Obs.: a div endereço e seu conteúdo serão acrescentados em todas as páginas do projeto. 8) Salve a página obrigado.html, dê um clique na janela do navegador, atualize o navegador e veja o efeito. 9) Aumente e diminua a janela do navegador e note que a página continua centralizada. 10) Copie o código abaixo para criar o arquivo formulario.html no bloco de notas. Note o arquivo CSS estilo_locadora.css, criado anteriormente, sendo usado também por este arquivo HTML (ver linha em negrito abaixo). Claro que foi necessário incluir no formulário as div utilizadas no arquivo CSS (ver linhas em negrito). As tag s utilizadas para o formulário já foram estudas. <!DOCTYPE html> <html> <head> <title> Formulário - Locadora Muito Legal</title> <link href="estilo_locadora.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="total"> <div id="conteudo"> <h2><img src="titulo_formulario.jpg" alt="formulário de interesse" /></h2> <form action="obrigado.html" method="post" name="interesse" id="interesse"> <fieldset> <legend>dados Pessoais</legend> <label for="nome">nome: </label> <input type="text" name="nome" id="nome" /> <label for="email">e.mail: </label> <input type="text" name="email" id="email" /> </fieldset> <fieldset> <legend>informações</legend> <label for="depto">enviar para departamento: </label> <select name="depto" id="depto">
<option>escolha sua opção</option> <option value="fin">financeito</option> <option value="tec">técnico</option> <option value="adm">administrativo</option> <option value="att">atendimento</option> </select> Tipo: <input type="radio" name="tipo" value="pf" id="pf" /> <label for="pf">pessoa física</label> <input type="radio" name="tipo" value="pj" id="pj" /> <label for="pj">pessoa jurídica</label> Informativo: <input type="checkbox" name="info_mensal" id="info_mensal" value="sim" /> <label for="info_mensal">quero receber o informativo mensal</label> <input type="checkbox" name="info_patro" id="info_patro" value="sim" /> <label for="info_patro">quero receber informações dos patrocinadores</label> <label for="mensagem">mensagem: </label> <textarea cols="50" rows="5" name="mensagem" id="mensagem"></textarea> </fieldset> <input type="reset" name="submit2" value="limpar dados" /> <input type="submit" name="submit" value="enviar formulário" /> </form> </div> <!-- fechamento div conteudo --> <div id="endereco"> rua da direita, 29 - RJ tel 21 2122 3334 </div> <!-- fechamento div endereco --> </div> <!-- fechamento div total --> </body> </html> 11) Após salvar o arquivo (formulario.html), retorne à janela do navegador, clique no link Voltar da página obrigado.html e no botão Enviar Formulário da página formulário.html. Veja os efeitos da formatação CSS.
12) Abra no bloco de notas o arquivo estilo_locadora.css caso ele não esteja aberto. 13) Copie e cole o código abaixo no final do arquivo (NÃO apague o conteúdo já existente). Esta alteração vai interferir apenas no layout do FORMULÁRIO. /* estilos para o formulário */ fieldset { border: solid #666; padding: 7px; legend { font-size: 11px; font-weight: bolder; color: #666; label { color: #900; #nome, #email { border-top-style: none; border-right-style: none; border-left-style: none; border-bottom-color: #666; width: 400px; #mensagem { border: 1px solid #666; width: 450px; input[type="submit"], input[type="reset"] { background-color: #CCC; width: 150px; border: 3px solid #666; cursor: pointer; 14) Salve o arquivo estilo_locadora.css. Atualize o navegador e veja os efeitos da formatação: clique no botão Enviar formulário e no link Voltar. Note os novos efeitos de formatação. Note que os novos efeitos de formatação interferem apenas no formulário. Responda: a) Para que serve o parâmetro cursor: pointer na formação do formulário/input? b) Para que serve a tag <fieldset> no código do formulário?