Dream 07

496 visualizações

Publicada em

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
496
No SlideShare
0
A partir de incorporações
0
Número de incorporações
61
Ações
Compartilhamentos
0
Downloads
10
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

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.

×