DESENVOLVIMENTO DE SITES
Turma:
Professor:
Aula: Pág: Data:
Anderson
9277
07 30/09/201307-13
@Formatando texto com CSS
@In...
@- Alinhamento do texto
<html>
<head>
<style type=”text/css”>
h1 {text-align: left;}
h2 {text-align: center;}
h3 {text-ali...
@- Formas das
letras do texto
<html>
<head>
<style type=”text/css”>
h1 {text-transform: none;}
h2 {text-transform: capital...
@ O valor inherit é usado
para herdar a fonte
usada pelo elemento pai
e também deve ser
declarado isolado na
propriedade f...
@Recuo do texto
<html>
<head>
<style type=”text/css”>
<!--
h3 {text-indent: 80px;}
p {text-indent: 3em;}
-->
</style>
</he...
@Para inserir imagens no Dreamweaver CS5, clique em
Inserir/Imagem no menu ou (CTRL + ALT + I) no
teclado. A seguinte imag...
@Ao selecionar uma imagem, o inspetor de
propriedades passará a exibir as informações da
mesma
@Quando uma imagem for selecionada dentro de sua
página, as propriedades dela serão habilitadas.
@ Rollover Image é um efeito simples e útil. Ele funciona quando
você passa o mouse sobre uma imagem e ela se “transforma”...
@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.
@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.
@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 p...
@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 âncor...
@Digite um texto que servirá como link para te levar até
a âncora que foi criada...
@Na caixa link digite: # logo em segui...
Página 56 da apostila.
Atividade I
Atividade II
Desafio
Salvar os arquivos, anexá-los e enviar para o seu
e-mail.
Próximos SlideShares
Carregando em…5
×

Dream 07

511 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
511
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.

×