Aula 5 Cabeçalhos, Imagens e Links

Transcrição

1 Roteiro Aula 5 Cabeçalhos, Imagens e Links Efeitos em cabeçalhos Imagens e CSS Links Curso: Técnico em Informática / 2º Módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Efeitos em Cabeçalhos Aplicação de borda Exemplo 1 HTML <h1> Propriedades CSS </h1> <p> As características de um elemento HTML podem ser alteradas por regras CSS. Para estilizar um elemento atribui-se um valor a uma propriedade </p> CSS border-top:1px solid #069; Exemplo 2 Borda e fundo 1

2 Exemplo 2: CSS border-top:1px solid #069; Exemplo 3 Borda e fundo 2 Exemplo 3: CSS border-top:1px dotted #069; border-left: 8px solid #069; padding-left: 12px; Exemplo 4 Mudando o alinhamento do título Exemplo 4: CSS border-top:1px dotted #069; padding-right: 12px; text-align: right; border-right: 15px solid #069; Exemplo 5 Imagem de Fundo 2

3 Exemplo 5: CSS border-top:1px dotted #069; background-image:url(imagens/target.png); background-repeat: no-repeat; background-position: 5px; padding-left: 69px; Cont. Exemplo 5 background-image: url(imagens/target.png); Endereço da imagem background-repeat: no-repeat; Modo de repetição: não repetir background-position: 5px Lado esquerdo com distância de 5px; padding-left: 69px; A imagem tem 64 px de largura, mais 5px de distância do lado esquerdo. Resumo background background-color: código hexadecimal: #FFFFFF código rgb: rgb(255,235,0) nome da cor: red, blue, green...etc background-image: URL: url(caminho/imagem.gif) background-repeat: não repete: no-repeat repete vertical e horizontal: repeat repete vertical: repeat-y repete horizontal: repeat-x Resumo background background-position: x-pos y-pos x-% y-% top left top center Cont. background-position: top right center left center center center right bottom left bottom center bottom right Maiores detalhes em: Exemplo 6 Borda personalizada 3

4 Exemplo 6 background-color: #EEEEEE; background-image: url(imagens/target-mini.png); background-repeat: repeat-x; background-position: left bottom; padding-bottom: 20px; Exemplo 7 Flutuado Exemplo 7: CSS border: 10px dashed #069; width: 6em; height: 2.5em; float: left; text-align:center; margin: 0 1em 0 0; Aptana New ->Web Project Desmarcar Use default location Localize o local em que deseja salvar o projeto Imagens O elemento img <img /> (XHTML) <img> (HTML) Atributos src alt Sintaxe <img src="images/logo.png" /> <img src="images/logo.png" alt= Logotipo do site /> 4

5 Exemplo 8: img Exemplo 8 <div id="pagina"> <img src="imagens/aero.jpg" alt="14- bis"> <p> A aeronave 14 Bis de Alberto Santos Dumont retirado do site Domínio Público </p> </div> Exemplo 8: CSS #pagina{ background: rgb(255,235,0); float: right; border: 1px silver solid; margin: 12px; padding: 12px; #pagina p { text-align: center; font-style: italic; font-size: smaller; Exemplo 9: img Exemplo 9: img <div id="pagina"> <img src="imagens/caderno.jpg" alt="caderno" id="cad" /> <img src="imagens/relogio.jpg" alt="relógio antigo" id="relogio" /> <p id="dois">alguma legenda para as fotos</p> </div> Exemplo 9: img #pagina{ background:#eee; padding:10px; border:1px solid silver; float:left; img#cad{ float:left; img#relogio{ clear: both; height: 200px; margin-left: 10px; p{ font-style:italic; font-size: smaller; text-align:center; width: 100%; 5

6 Âncora HTML O elemento âncora a juntamente com o atributo href tem a função de marcar hiperlinks; Sintaxe geral: <a href= > Site Pessoal </a> São quatro pseudoclasses (estados) para links: Efeito Cascata Regras declaradas posteriormente na folha de estilo têm precedência; a:hover antes de a:visited, esta declaração prevalecerá sobre aquela. Pseudoclasse a:link a:visited a:hover a:active Estado Link no estado inicial Link visitado Estado do link quando o usuário passa o ponteiro do mouse Quando o usuário clica sobre ele Efeitos em links Efeitos em links <div id="pagina"> <img src="imagens/aero.jpg" alt="14- bis"> <p><a href="index2.html">link para outra página</a></p> </div> --- a:link{ text-decoration: none; Efeitos em links text-decoration: none, underline, overline, line-through, blink a:hover{ text-decoration:underline; Efeito rollover a:link{ text-decoration: none; color: #C0C0C0; border: 1px dotted #069; background: #daf6d1; padding: 3px 5px; display: inline-block; a:hover{ color:#daf6d1; background: #000; 6

7 Efeitos em ícones <a href= " </a> a[href^=http]{ border:1px solid blue; background:url('imagens/target.png') no-repeat right top; height: 70px;width:50px; padding-right: 15px; Imagem como link <p><a href= novajanela.html"><img src= imagens/target.png" alt= Alvo /></a></p> Nova janela <a href=" " target="_blank">luciana Balieiro</a> Links para <a Contato</a> Publicação Publicação Free sharing hosting Criar um subdomínio grátis FTP 7

8 Sincronizar Exercício Leitura Complementar Capítulo 8 - SILVA, M. S. Construindo Sites com CSS e (X)HTML. Novatec, 2007 Referências SILVA, M. S. Construindo Sites com CSS e (X)HTML. Novatec, 2007 ROBBINNS, J. N. Aprendendo Web Design: Guia para iniciantes. 3ª ed. Porto Alegre. Bookman, Contato luciana.balieiro@ifnmg.edu.br 8