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

Mais conteúdo relacionado

Destaque

Semelhante a Dream 07

Mais de Anderson Maciel

Dream 07