Beto Marques Internet Solutions - Curso de FrontPage 2000 On Line

Curso de HTML On Line - FrontPage 2000

Imagens

O comando que permite colocar imagens em um documento HTML
<img src="nome_da_imagem.gif">

As extensões aceitas para imagens são : gif , jpg e png

Alinhamento de imagem

<img align="top" src="beto.gif"> alinhamento na parte de acima em relação ao texto

<img align="middle" src="beto.gif"> alinhamento no meio em relação ao texto

<img align="bottom" src="beto.gif"> alinhamento na parte de baixo em relação ao texto

Observações :

Quanto maior for a imagem, tanto maior será o arquivo e mais tempo levará para que ela apareça na sua página
Use imagens em gif quando o número de cores não for grande ou se precisar de transparência ou animação
Use imagens em jpg quando o número de cores for grande e as variações de cor forem suaves, como em fotos, mapas, pinturas, etc.
Imagens em gif não há perda de qualidade para imagens planas e há economia de espaço no disco, enquanto que jpg há compressão de imagens. Todas as duas extensões tem Interlaced , que faz com que a imagem vai carregando aos poucos e vai se definindo

Exemplo :

<img align="top" src="cristo.gif" alt="Cristo Redentor"> o comando alt é um texto mostrado antes que a imagem comece a ser transferida, dando uma idéia do que irá aparecer naquele espaço e também serve, no caso do Netscape e no Internet Explorer versão 4.0 ou superior, quando o mouse passa sobre a imagem, aparece uma descrição da mesma, que foi mencionada no comando alt

Posicionamento das imagens

align="right" - a imagem fica alinhada a direita e o texto flui ao redor da imagem pela esquerda, isto é, várias linhas do texto podem aparecer ao longo da altura da imagem

align="left" - a imagem fica alinhada à esquerda e o texto flui ao redor da imagem pela direita, isto é, várias linhas de texto podem aparecer ao longo da altura da imagem

Aos usar os alinhamentos left e right, você poderá também adicionar a distância horizontal entre a figura e o texto ao redor (hspace) e a distância vertical entre a figura e as linhas anterior e posterior do texto ( vspace)

align="top" - alinha ao topo o texto . Se a altura da imagem for maior que a altura, aparece um espaço em branco abaixo da linha para compensar a diferença

align="middle" - alinha a linha-base do texto ; a linha imaginária que passa por baixo da maioria dos caracteres. Se a imagem for mais alta que o texto, um espaço extra será distribuído acima e abaixo do texto para compensar

align="bottom" - alinha a parte inferior da imagem com a linha-base do texto, colocando um espaço extra acima caso a imagem seja maior que o texto

Alinhamentos especiais

align="texttop" - o topo da imagem fica alinhado com o topo do texto mais alto da linha. Em geral isso é o mesmo que especificar o Top, mas nem sempre. Da mesma forma, se a altura da imagem for maior que a altura da linha, aparece um espaço para compensar

align="absmiddle" - alinha o ponto médio da altura da imagem com o ponto médio da altura da linha, também colocando espaços acima e abaixo do texto caso a imagem seja mais alta

align="baseline" - o mesmo que align="bottom"

align="absbottom" - alinha a parte da imagem com a parte inferior da linha atual, colocando um espaço extra acima do texto a imagem seja mais alta que ele

Tamanho da imagem

height - especifica a altura da imagem
width - especifica a largura da imagem

<html>
<head>
<title>Título da Página</title>
</head>
<body>

<img src="cristo.gif" alt="Cristo Redentor" width="150" height="100">

</body>
</html>

Bordas de imagem

border - especifica a borda , caso coloque o comando border="0" a imagem ficará sem borda

<html>
<head>
<title>Título da Página</title>
</head>
<body>

<img src="cristo.gif" alt="Cristo Redentor" width="150" height="100" boder="1">

</body>
</html>

Inserir arquivo de vídeo

dynsrc="arquivo_video.gif" - indica o arquivo de vídeo a ser carregado
img src="imagem.gif" - deve ser colocado para que os browsers que não aceitam o comando dynsrc possam mostrar uma imagem
controls - determina botões para controlar a execução do arquivo de vídeo
loop =" n" ou "infinitive" - determina quantas vezes o arquivo de vídeo será executado

n é o número de vezes que o arquivo será executado
infinitive executa o arquivo indefinidamente

start = "fileopen" ou start="mouseover" - determina quando o arquivo de vídeo começará a ser executado

<html>
<head>
<title>Título da Página</title>
</head>
<body>

<img src ="imagem.gif" dynsrc= "arquivo_video.gif" loop="2" start="mouseover">

</body>
</html>

Como copiar uma imagem na Internet

Clique sobre a imagem com o botão direito do mouse e o browser dará uma opção Save Picture as ou Salvar Imagem Como ..., e assim você escolhe o diretório onde quer deixá-la e dê OK

Imagem Mapeada

Uma imagem mapeada <map> é uma imagem onde definimos várias pontos da imagem conhecidas sensíveis ou hotspots , que quando clicadas agem como links levando para outra página ou URL.

<html>
<head>
<title>Título da Página</title>
</head>
<body>
<map name ="nome da imagem">
<area shape="rect" coords ="200,250", 300, 20" href="beto,htm">
<area shape="rect" coords ="150,100", 100, 120" href="cadastro.htm">
</map>

</body>
</html>

area shape - tamanho da área mapeada
coords - posição da imagem mapeada na página
href - link na imagem mapeada para uma determinada página

Como copiar uma imagem para FrontPage 2000

1	Clique no ícone
2	Abrirá uma Caixa de Diálogo : Picture ( Figura ) e clique no ícone
3	Procure a imagem no seu computador, selecione-a e clique OK
4	Clique no ícone
5	Abrirá uma Caixa de diálogo : Save Embbeded Files Salve Arquivos Inseridos com o nome da imagem ;
6	Clique no botão Change Folder Mudar de Pasta , pois todas as imagens devem ser guardadas dentro da pasta images ( imagens ) que foi criada automaticamente pelo FrontPage Explorer quando você criou o Site Curso
7	Clique OK e o FrontPage faz uma cópia automaticamente para seu site

Propriedades de uma imagem no FrontPage 2000

Clique sobre a imagem com o botão direito do mouse >
Picture Properties - Propriedades da Figura

• General - Geral

Picture Source
Origem da Figura - especifica o nome do arquivo
Type - Tipo - especifica a extensão da imagem : gif, jpg ou png
Alternative Representations
Representações Alternativas
Low-res
Baixa Resolução ( comando lowsrc )
Text - Texto - especifica a descrição da imagem ( comando alt )
Default Hyperlink - Hyperlink Padrão
Location - Local - especifica o link
Target Frame - Quadro de Destino - especifica o alvo do frame
Style - Estilo - insere recursos de CSS - Folha de Estilos na imagem

• Vídeo

Video Source - Fonte do vídeo - especifica o nome do arquivo
Show controls in Browser - Mostrar controles no navegador
Repeat - Repetir
Loop - especifica quantas vezes irá rodar o vídeo
Forever - Contínuo - especifica que o vídeo rodará infinitamente
Loop delay - Atraso a Loop - especifica o tempo de espera para iniciar o vídeo
Start - Iniciar
On file open - Ao abrir arquivo
On mouse over - Ao passar com o mouse

• Appearence - Aparência

Alignment
Alinhamento- alinhamento do texto em relação a imagem
Border Tickness - Espessura da Borda
Horizontal Spacing
Espaçamento Horizontal - espaço na horizontal entre a imagem e o texto ( hspace )
Vertical Spacing
Espaçamento Vertical - espaço na vertical entre a imagem e o texto ( vspace )
Specify Size - Especificar tamanho
Width - Largura
Height - Altura
Keep Aspect Radio
Mostar a taxa de definição - manter a proporção entre a altura e a largura

Outras Propriedades da Imagem no FrontPage 2000

Clique na imagem e observe que na parte de baixo da tela será exibido vários ícones sobre as propriedades da figura

Insert Picture From File - Inserir Figura do Arquivo

Text - Texto - inserir texto sobre a imagem

Auto-thumbnail - Auto-miniatura

Position Absolutly - Posição Absoluta

Bring Forward - Avançar - trazer para frente

Send Back - Recuar - enviar para trás

Rotate - Girar a figura para direita , esquerda , horizontal e vertical

More/Less Contrast - Mais/Menos Contraste
More/Less Brightness - Mais/Menos Brilho

Crop - Cortar
Set Transparent Color - Definir Cor Transparente
Back and White - Preto e Branco - transformar imagem em preto e branco
Wash Out - Desbotar -transformar imagem em cinza e branco
Bevel - Chanfrar - criar botão na imagem
Resample - Criar Novas Amostras

Select - Selecionar imagem para transformá-la em imagem mapeada
Rectangular Hotspots - Área interativa em forma Retangular - especifica área mapeada retangular
Circular Hotspots - Área interativa Circular - especifica área mapeada circular
Polygonal Hotspots - Área interativa em forma Poligonal - especifica área mapeada poligonal
Highlight Hotspots - Realçar Área Interativa - especifica área mapeada sem parte da imagem

Restore - Restaurar para forma original

Imagens • Exercício 4

Introdução • Menu • Ferramentas • HTML • Site • Cores • Listas
Links • Imagens • Tabelas • Exercícios • Inscrição • Contato