Dream 07

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

@- 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>
<p>Este é o parágrafo cujo texto ...</p>
</body>
</html>

@- Formas das
letras do texto
<html>
<head>
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>

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

@Recuo do texto
<html>
<head>

</style>
</head>
<body>
<h3>Texto com recuo de 80 pixel</h3>
<p>Texto com recuo de 3.0em</p>
</body>
</html>

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

@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”
em outra. Pode também ser um link.

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

@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

@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

da apostila.
Atividade I
Atividade II
Desafio
Salvar os arquivos, anexá-los e enviar para o seu
e-mail.

Dream 07

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Dream 07

Ähnlich wie Dream 07 (20)

Mehr von Anderson Maciel

Mehr von Anderson Maciel (20)

Dream 07