Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Dream 07

531 views

Published on

  • Be the first to comment

  • Be the first to like this

Dream 07

  1. 1. DESENVOLVIMENTO DE SITES Turma: Professor: Aula: Pág: Data: Anderson 9277 07 30/09/201307-13 @Formatando texto com CSS @Inserindo imagens @Inserindo links @Atividades
  2. 2. @- Alinhamento do texto <html> <head> <style type=”text/css”> h1 {text-align: left;} h2 {text-align: center;} h3 {text-align: right;} p {text-align: justify;} </style> </head> <body> <h1>Este é o cabeçalho 1</h1> <h2>Este é o cabeçalho 2</h2> <h3>Este é o cabeçalho 3</h3> <p>Este é o parágrafo cujo texto ...</p> </body> </html>
  3. 3. @- Formas das letras do texto <html> <head> <style type=”text/css”> h1 {text-transform: none;} h2 {text-transform: capitalize;} h3 {text-transform: uppercase;} h4 {text-transform: lowercase;} </style> </head> <body> <h1>Texto com letras como digitadas</h1> <h2>Texto com primeira letra das palavras, maiúsculas</h2> <h3>Texto com todas letras, maiúsculas</h3> <h4>Texto com letras minúsculas</h4> </body> </html>
  4. 4. @ O valor inherit é usado para herdar a fonte usada pelo elemento pai e também deve ser declarado isolado na propriedade font, como mostra o exemplo abaixo. <html> <head> <style type=”text/css”> .p1 {font: status-bar;} .p2 { font: inherit; .p3 { font: small-caption ;} } </style> </head> <body> <p class=”p1”>Parágrafo com fonte status- bar</p> <p class=”p2”>Parágrafo com fonte inherit</p> <p class=”p3”>Parágrafo com fonte small- caption</p> </body> </html>
  5. 5. @Recuo do texto <html> <head> <style type=”text/css”> <!-- h3 {text-indent: 80px;} p {text-indent: 3em;} --> </style> </head> <body> <h3>Texto com recuo de 80 pixel</h3> <p>Texto com recuo de 3.0em</p> </body> </html>
  6. 6. @Para inserir imagens no Dreamweaver CS5, clique em Inserir/Imagem no menu ou (CTRL + ALT + I) no teclado. A seguinte imagem aparecerá. Escolher a imagem desejada e clicar em OK.
  7. 7. @Ao selecionar uma imagem, o inspetor de propriedades passará a exibir as informações da mesma
  8. 8. @Quando uma imagem for selecionada dentro de sua página, as propriedades dela serão habilitadas.
  9. 9. @ Rollover Image é um efeito simples e útil. Ele funciona quando você passa o mouse sobre uma imagem e ela se “transforma” em outra. Pode também ser um link.
  10. 10. @Links internos são aqueles que ligam uma seção de uma página com uma outra seção da outra página, mas no mesmo site.
  11. 11. @Links externos são aqueles que ligam uma seção de uma página com uma outra seção de uma outra página, mas de outro site.
  12. 12. @O link para e-mail serve para ligar a um software de e- mail, onde será aberto já com o endereço de e-mail do remetente para digitar o assunto e enviar para o endereço do destinatário. @OBS.: digitar a tag mailto: com endereço de e-mail do destinatário.
  13. 13. @As âncoras são aquelas que ligam uma seção de uma página com outra seção da mesma página. @Passos para criar o link âncora: use a tecla de atalho Ctrl + Alt + A... Digite o nome da âncora
  14. 14. @Digite um texto que servirá como link para te levar até a âncora que foi criada... @Na caixa link digite: # logo em seguida o nome da âncora
  15. 15. Página 56 da apostila. Atividade I Atividade II Desafio Salvar os arquivos, anexá-los e enviar para o seu e-mail.

×