TecCodigos

Mostrando postagens com marcador web designe. Mostrar todas as postagens

quinta-feira, 16 de fevereiro de 2012

Photoshop

FERRAMENTAS DO PHOTOSHOP

Quando clicado com o botão direito do mouse em cima deste ícone que aparece o triângulo na parte inferior direita, aparece opções ocultas.

Aqui fica uma relação de todas as ferramentas disponíveis;

Ferramentas de seleção

ferramentas de Letreiro criam seleções retangulares, elípticas, de linha única e de coluna única.

A ferramenta Mover move seleções, camadas e guias.

As ferramentas Laço criam seleções à mão livre, poligonais (de arestas retas) e magnéticas (auto-ajustáveis).

A ferramenta Seleção Rápida permite “pintar” rapidamente uma seleção usando uma ponta de pincel redonda ajustável.

A ferramenta Varinha Mágica seleciona áreas coloridas semelhantes.

Ferramentas de corte demarcado e fatia

A ferramenta Corte Demarcado apara imagens.

A ferramenta Fatia cria fatias.

A ferramenta Seleção de Fatia seleciona fatias.

Ferramentas de retoque

Ferramentas de pintura

Ferramentas de texto e desenhos

Ferramentas de comentário, medida e navegação

Ferramentas 3D (somente no Photoshop Extended)

são também denominadas listas numeradas, pois, quando um navegador
encontra uma tag, iniciando uma lista ordenada, ele passa a mostrar cada
item utilizando números, como 1, 2, 3, e assim sucessivamente.
para estabelecer o início e o fim de uma lista ordenada utilizamos as tags
<ol> e </ol>.entre essas tags, usa-se uma tag <li> para estabelecer cada
itens contido na lista ordenada.
veja um exemplo:
<ol>
<li>www.seusite.domínio.net
<li>espaço ilimitado
<li>vários domínios
<li>serviços para webmaster

</ol>
na prática, o código acima fica assim:
1. www.seusite.domínio.net
2. espaço ilimitado
3. vários domínios
4. serviços para webmasters
tag br - quebra de linha
a tag <br> serve para forçar quebra de linha. este tag não requer tag de
fechamento.
a vantagem da tag br é permitir a quebra de linha economizando espaço, o
que não acontece nas quebras de parágrafo.

propriedade "alt"

a propriedade alt é uma propriedade da tag de imagem <img>. ela faz com
que apareça uma pequena legenda ao lado do mouse quando ele está sobre o
link.
isso ajuda na navegação quando é usado para explicar uma imagem ou um
link.
para implantar este recurso, copie a propriedade abaixo e cole dentro da tag
<img>.
alt="exemplo"
a tag deverá fica parecida com essa:
<img src="nomedaimagem" alt="exemplo de alt">
o texto do "alt" pode ser alterado por qualquer frase, sem limite de caracteres
e não interfere nas outras propriedades da tag <img>.
tag head - cabeçalho
a tag <head> delimita o início e o fim do cabeçalho do documento.
o cabeçalho possui informações especiais sobre o arquivo, que não são
exibidas na tela, tais como: data de criação do documento, assunto tratado,
etc.
as informações no cabeçalho, embora não façam parte do layout da página (a
nao ser que você esteja fazendo uso de folhas de estilo), possuem dados
essenciais para que o documento seja reconhecido pelos servidores, sistemas
de busca, entre outras aplicações.
tabela de acentos e caracteres
especiais

os caracteres especiais da tabela iso 8859 latin-1 foram criados por uma
questão de compatibilidade, e são amplamente usados e recomendados para
a construção de páginas html. a internet reúne páginas feitas em diversos
computadores ao redor do mundo, que usam diversos idiomas e layouts
próprios de teclado, e por isso é necessário um sistema universal de
representação de caracteres especiais.
um exemplo: como a língua inglesa não possui acentos, qualquer texto em
português (ou qualquer língua que suporte acentos, como o alemão e o
espanhol) precisa que esses caracteres sejam representados por combinações
especiais de teclado para que possa ser lido em um computador que use o
idioma inglês.
da mesma forma, você precisa saber digitar essas combinações para poder
escrever em seu teclado letras e palavras que não possuem teclas próprias,
como por exemplo o sinal ¿ utilizado na língua espanhola.
para inserir um caractere especial, basta você trocar o espaço do caractere
desejado por toda a seqüência. desta forma você faz uma página html cujos
textos podem ser vistos corretamente em qualquer computador de qualquer
lugar do mundo.
confira abaixo a lista dos caracteres especiais:
æ æ
á á
â â
à à
å å
ã ã
ä ä
ç ç
ð ð
é é
ê ê
è è
í í
î î
ì ì
ï ï
ñ ñ
ñ ñ
ô ô
ò ò
ø ø
ø ø
ö ö
þ þ
ú ú
û û
ù ù
ü ü
ý ý
á á
â â
æ æ
à à
å å
ã ã
ä ä
ç ç
é é
ê ê
è è
ð ð
ë ë
í í
î î
ì ì
ï ï
ñ ñ
ó ó
ô ô
ò ò
õ õ
ö ö
ß ß
þ þ
ú ú
û û
ù ù
ü ü
ý ý
¡ ¡
¢ ¢
£ £
¥ ¥
¦ ¦
§ §
¨ ¨
© / © ©
ª ª
« «

® / ® ®
¯ ‾
° °
± ±
² ²
³ ³
´ ´
µ q
¶ ¶
· —
¸ ¸
¹ ¹
º º
» »
¼ ¼
½ ½
¾ ¾
¿ ¿
× ×
Þ þ
÷ ÷
& &
< <
> >
" "

as meta tags
as meta tags são tags especiais, posicionadas no cabeçalho dos documentos
html. contêm informações extras sobre o documento, essas informações
possuem diversas aplicações, mas neste tópico trataremos apenas das que
ajudam os sites de busca a encontrar o conteúdo da home page.
veja o exemplo de meta tags:
<meta name="keyword" content="criandosite, home page, site, grátis,
gratuito, especial, galeria, busca, destaque, sites pessoais">
<meta name="description" content="criandosite, o maior portal de
hospedagem grátis do brasil">
explicando melhor o código acima:
· o comando meta keyword possui uma coleção de palavras-chave que
servem aos mecanismos de busca, para que encontrem as páginas que mais
coincidem com o objeto da busca;
· o comando meta description possui uma breve descrição do conteúdo da
página, e serve para que os mecanismos de busca consigam exibir as páginas
retornadas de uma forma amigável e auto-explicativa;
para inserir comandos meta em suas páginas, copie o código acima e insira-o
dentro do cabeçalho do seu documento (entre as tags <head> e </head>).
seja bastante criterioso na escolha das melhores palavras-chave (coloque no
máximo trinta), pois elas podem fazer a diferença.
existem outras meta tags, com diversas aplicações. aguarde, em breve
falaremos sobre elas.
após ter elaborado as metatags para suas páginas, você pode cadastrá-las
em sites de busca.
código fonte
apesar dos programas wyswyg (what you see what you get - o que você vê é
o que você terá) como frontpage, dreamweaver e muitos outros serem
bastantes úteis, são péssimos "escritores", pelo menos a grande maioria
deles. eles enchem o código fonte de tags desnecessárias e com isso, a
página fica mais pesada para carregar.
se você for escrever uma página, dê preferência para os editores em modo
texto. eles são mais difícies de serem utilizados por iniciantes em html, mas
caso você tenha um conhecimento intermediário, não tenha dúvida que o
resultado será bem melhor.
tag div - conteúdo
a tag <div> configura um bloco todo de conteúdo (podendo conter textos,
tabelas, imagens, etc). o alinhamento pode ser à esquerda (left), à direita
(right) e centralizado (center). veja a sintaxe padrão da tag:
<div align="right">exemplo de conteúdo alinhado
com o uso da tag <b>div</b>, neste caso com o
atributo right </div>
abaixo, o resultado gerado pela tag acima:
exemplo de conteúdo alinhado com o uso da tag <div>, neste caso com o
atributo right
veja outros resultados possíveis, obtidos com a variação dos atributos:
exemplo de conteúdo alinhado com o uso da tag <div>, neste caso com o
atributo left que posiciona todo o conteúdo à esquerda.
exemplo de conteúdo alinhado com o uso da tag <div>, neste caso
com o atributo center que posiciona todo o conteúdo no centro.
a tag <div> ganhou novas funcionalidades com a chegada do dhtml, sendo
que hoje os elementos div também pode servir como layers (camadas de
código) que você pode usar para posicionar elementos (textos, imagens,
tabelas) em qualquer lugar da sua página.
tag title - título da página
a tag <title> (e sua tag de fechamento </title>) informa o título do
documento. o título de um documento html aparece em uma série de lugares,
como por exemplo:
· na barra superior dos browsers;
· no cabeçalho das páginas html impressas;
· nos resultados dos mecanismos de busca em geral;
tag a href - inserção de links
1. criar um link para outro site
para criar links, usa-se a tag a em conjunto com os atributos href ou name.
veja como fazer um link para o hpg:
<a href="http://www.criandosite.com.br"
target="_blank" > link para portal
<b>criandosite</b></a>
na prática, o código acima fica assim:
link para portal criandosite
um visitante na sua página que clicar sobre o link acima será levado à página
principal do hpg. como você deve ter notado, o link abriu outra página. para
fazer isso, use o atributo target="_blank".
2. criar uma imagem com link
para criar links em imagens, usa-se a tag a href em torno da tag img, que
chama a imagem. veja o código abaixo:
<a href="http://www.criandosite.com.br"
target="_blank"><img src="figura.gif"></p>
veja que o link criou uma borda na imagem. para retirar essa borda, insira o
atributo border="0" dentro da tag img.
3. criar um link interno
para criar links para certas regiões dentro da sua página, usa-se a tag a
name (para definir as regiões em si) e a tag a href para chamar essas
regiões.
presta atenção nas tags dos dois próximos exemplos:
<a
name="topodapagina">
a tag acima define a região chamada "topodapagina".
note que:
1) a tag a name não precisa ser fechada com </a>
2) não se usa, neste caso, o atributo target.
agora veja a segunda parte do processo:
<a
href="#topodapagina">voltar
para o topo</a>
a tag href do exemplo acima é feita para chamar a região "topodapagina",
definida pelo a name. note que o link é feito usando o caractere "#" junto do
nome da região, porque o "#" indica que o link está dentro da mesma página.
além disso, a tag a href precisa ser fechada com </a>.
para ver um exemplo prático desse tipo de link, clique no botão "topo da
página" existente no final desta tela, ou então clique aqui.
4. criar um link para endereço de email
para criar links para endereços de email, usa-se a tag a href como nos outros
links, mas com um detalhe: no atributo href, onde seria digitado o endereço
de destino do link, insere-se a palavra mailto: seguida do endereço de email
desejado.
veja um exemplo prático abaixo:
<a
href="mailto:suporte@criandosite.com.br">mandenos
um email</p>
veja abaixo o resultado obtido:
mande-nos um email
obs: nesse caso também não se deve usar o atributo target.

tag body - corpo da página
a tag <body> (e a tag de fechamento </body>) delimitam todo o conteúdo da home
page. é aí que aparecerão os textos, as figuras, o fundo de tela, entre outras coisas.
dentro da tag <body> você conseguirá formatar o conteúdo, especificando os seguintes
atributos:
· fundo de tela (atributo background): insere uma imagem como fundo de
tela. basta especificar o caminho da imagem, que deve ser .gif ou .jpg;
· cor de fundo da tela (atributo bgcolor): altera a cor de fundo de tela. basta
especificar o código da cor ou o seu nome em inglês;
· cor padrão de texto (atributo text): determina a cor padrão do texto. basta
especificar o código da cor ou o seu nome em inglês;
· cor padrão de link (atributo link): determina a cor padrão dos links no
documento. basta especificar o código da cor ou o seu nome em inglês;
· cor padrão de link visitado (atributo vlink): determina a cor padrão dos
links que já foram visitados. basta especificar o código da cor ou o seu nome
em inglês;
· cor padrão de link ativo (atributo alink): determina a cor padrão dos links
ativos. basta especificar o código da cor ou o seu nome em inglês;
como especificar cores
o valor "cor" pode ser especificado de duas formas:
· por meio dos nomes das cores, que precisam ser escritos em inglês;
· por meio do sistema rgb, que é determinado por números e letras;
veja abaixo a relação das principais cores, seus nomes em inglês e seus
códigos rgb:
· black (preto) "#000000"
· silver (prata) "#c0c0c0"
· gray (cinza) "#808080"
· white (branco) "#ffffff"
· maroon (marrom) "#800000"
· red (vermelho) "#ff0000"
· purple (roxo) "#800080"
· orange (laranja)"#ff8000"
· fuchsia (rosa) "#ff00ff"
· green (verde) "#008000"
· lime (verde limão) "#00ff00"
· olive (verde oliva) "#808000"
· yellow (amarelo) "#ffff00"
· navy (azul escuro) "#000080"
· blue (azul) "#0000ff"
· teal (verde) "#008080"

escolha a fonte certa para seu site
agora que você já projetou seu site, reuniu conteúdo suficiente, e imagens,
vem uma das partes mais difíceis: a escolha da fonte adequada. lembre-se,
que se o visitante não tiver a fonte da sua escolha, instalada no computador
dele, ele verá a fonte padrão do navegador, normalmente a fonte time news
roman. este tópico do melhore sua página, traz algumas dicas que facilitam a
escolha da fonte certa para seu site, facilitando a leitura e garantindo a
harmonia do layout.
1. pense no layout do seu site como um todo, e escolha a fonte que siga o
estilo do seu site. procure usar fontes comuns, fontes que a maioria das
pessoas tem instalada em seu computador. para windows, as fontes mais
comuns são: arial, comic sans, courier new, georgia, helvetica, time new
roman. para mac, as fontes mais comuns são: arial, chicago, courier, geneva,
helvetica, times.
2. escolha uma fonte que facilite a leitura, principalmente se for usada em
textos mais extensos.
3. caso você escolha uma fonte que seja comum em uma plataforma, defina
<script language="javascript">

</script>
<a
href="javascript:changefundo('#ff6600')">
mudar para #ffcc00</a>
como a segunda opção de fonte, uma fonte comum com a outra plataforma.
por exemplo, se você escolheu a fonte comic sans, que é comum na
plataforma windows, deixe como segunda opção de fonte, uma fonte comum
na plataforma mac, como a fonte geneva.
4. para definir disponibilizar uma segunda opção de fonte, defina a primeira
opção, e depois de uma vírgula, e então defina a outra. por exemplo: <font
face="'comic sans ms',georgia">texto</font>.
5. o seu browser vai tentar mostrar as fontes na ordem que você definiu. se
não tiver a primeira, ele vai tentar mostrar a segunda, e se não tiver a
segunda, ele vai tentar mostrar a terceira, e assim por diante.
6. certifique-se que a fonte que você escolheu é legível em vários tamanhos.
7. a fonte exibida no mac fica aproximadamente 30% maior do que em um
pc. lembre-se disso na hora de definir o tamanho da fonte.
8. para facilitar a construção e manutenção de sua página sem ter que ficar
definindo toda hora o tipo de fonte, tamanho, cor, você pode "fixar" essas
propriedade usando um css.
lembre-se que um texto na web não é um pedaço de papel impresso. um
texto impresso é muito mais fácil de ser lido do que um texto numa tela de
computador, portanto tente deixá-lo o mais legível possível para textos
extensos.

mudando cores de fundo com css
com algumas poucas linhas de javascript, baseadas em instruções em css,
você pode controlar dinamicamente as cores de fundo de sua página. isso lhe
permite construir páginas com efeitos bastante interessantes, como por
exemplo páginas onde o próprio usuário escolhe a cor preferida para navegar
pela página, sem que o webmaster tenha que fazer alterações periódicas no
código html.
nos próximos tópicos do melhore sua página, você poderá acompanhar e
aprender na prática como controlar ainda mais recursos de sua home page
usando comandos javascript e instruções css, tudo de forma dinâmica e com
o mínimo de tempo necessário para implantação.
observe os dois blocos de código logo abaixo: o primeiro exibe a função
javascript para executar a mudança de cores de fundo, enquanto o segundo
demonstra como você deve inserir o link para executar a função.

<script language="javascript">

</script>
<a
href="javascript:changefundo('#ff6600')">
mudar para #ffcc00</a>

· mudar para #ffcc00
· mudar para #cc66cc
· mudar para #ffffff
· mudar para #336699
veja ao lado como fazer o
script do link (que tanto
pode ser em texto (como
exibido ao lado) como
também em links de imagem.
veja em destaque, no código acima, o local onde você deve inserir o código
da cor ou o apelido respectivo. algumas cores não possuem apelido, portanto
é recomendável que seja usada uma tabela de cores hexagonais

tabelas

a tabela é um recurso bastante utilizado para a organização visual dos dados
de um documento html.
a tag <table> é utilizada para a representação de dados tabulares. os
elementos <table> e </table> determinam o início e o fim de uma tabela.
dentro dessas tags, encontram-se outros subconjuntos que definem
elementos específicos.
título da tabela - tag caption
a tag <caption> define o título de uma tabela. quando utilizada, deve estar
logo após a tag que define o início da tabela.
por exemplo:
<table> <caption>título<caption> ...
cabeçalho da tabela - tag th
a tag <th> é usada para especificar as células de cabeçalho da tabela. essas
células são diferenciadas, pois seu conteúdo aparece centralizado e em
negrito.
quando o elemento th é apresentado sem conteúdo algum, corresponde a
uma célula em branco.
as tabelas podem ainda conter mais de um th para uma dada coluna, ou
linha, ou simplesmente não conter nenhum elemento th, isto é, não conter
nenhuma célula em destaque.
por exemplo:
<table> <th>cabeçalho<th> ...
linha da tabela - tag tr
a tag <tr> indica o início e o fim de uma linha na tabela. cada linha da tabela
pode conter várias células, e portanto, é necessário que se faça uso de uma
marcação que indique exatamente o ponto de quebra de uma linha e início de
outra.
toda linha deve terminar com um </tr>, com exceção da última linha da
tabela, que dispensa o tr porque o uso da própria marcação de fim de tabela
</table> torna implícito o fim da linha.
dados da tabela - tag td
a tag <td> define as células que irão compor cada linha da tabela. por se
tratar de dados comuns (e não cabeçalhos), essas células possuem seu
conteúdo escrito em fonte normal, sem nenhum destaque e alinhado à
esquerda.
dentro de uma célula é possível inserir textos, imagens, arquivos, links, ou
até mesmo outras tabelas (todos com suas opções e elementos).
assim como o <th>, pode-se construir células em branco, usando o elemento
<td>, como no exemplo a seguir:
<td>dados da tabela<td>
observação: a tag de terminação, </td>, também é opcional.
atributos das tabelas
as marcações das tabelas podem apresentar resultados diferentes, se
acompanhadas de alguns atributos que complementam a tag <table>. os
principais atributos são:
· border: indica a largura das bordas de uma tabela. se o valor atribuído for
0 (zero), o border funciona exatamente como no caso padrão, sem o
border. dessa maneira, é possível colocar tabelas em maior destaque,
atribuindo um valor maior que 1 para o border;
· align: define o alinhamento horizontal dentro dos elementos da tabela.
possui os valores left (à esquerda), center (no centro) e right (à direita).
este atributo pode ser aplicado a <th>, <td> ou <tr> e controla o
alinhamento horizontal do conteúdo em relação as bordas laterais; aplicado a
<td>, define o alinhamento de cada célula em separado; aplicado a
<table>, define o alinhamento de toda a tabela dentro do conteúdo da
página;
· valign: define o alinhamento vertical dentro dos elementos da tabela.
possui os valores top (ao alto), middle (no meio) e bottom (embaixo). este
atributo pode ser aplicado a <th>, <td> ou <tr> e controla o alinhamento
do conteúdo com relação as bordas superior e inferior; aplicado a <td>,
define o alinhamento de cada célula em separado; aplicado a <table>, define
o alinhamento de toda a tabela dentro do conteúdo da página;
· background: permite que sejam usadas figuras de fundo dentro da tabela.
aplicável na tag <table>.
· bgcolor: permite definir uma cor de fundo para a tabela. linha ou célula.
aplicável nas tags <table>, <tr> ou <td>. vale lembrar que este abributo é
"cumulativo", ou seja, você pode atribuir uma cor de fundo à toda a tabela,
posicionando o bgcolor na tag <table> e ao mesmo tempo usar um bgcolor
diferenciado para uma célula em especial, posicionando-o também na tag
<td>;
· cellspacing: é a distância formada por um "vão" que divide as linhas
gráficas que formam as linhas da tabela;
· rowspan: parâmetro usado para aumentar as células verticalmente,
mesclando-as com a célula de baixo, o valor é expresso em números e define
o número de células que serão envolvidas na mesclagem. aplica-se apenas à
tag <td>;
· colspan: parâmetro usado para aumentar as células horizontalmente,
mesclando-as com a célula vizinha, o valor é expresso em números e define o
número de células que serão envolvidas na mesclagem. aplica-se apenas à
tag <td>;
· height: define a altura da linha ou da célula em pixels, de acordo com a
tag onde é aplicada, respectivamente <tr> ou <td>;
· width: define a largura da linha ou da célula em pixels, de acordo com a
tag onde é aplicada, respectivamente <tr> ou <td>;

botão "fechar janela"
se você quer melhorar a navegação da sua página e usa janela pop-up, a
função java script "fechar janela" é de grande ajuda.
é uma função simples de ser aplicada e ajuda o usuário a não se perder com
muitas janelas abertas. além disso, pode ser comandada pelo usuário, ou
automaticamente conforme a sua definição.
para aplicár a função "fechar janela", basta copiar o código abaixo e colá-lo
onde você quer que o link "fechar janela" apareça na sua página:
<a
href="javascript:window.close()">fechar
janela</a>
este recurso javascript é compatível com ie, netscape 4.75 e netscape 6.
como criar um botão de impressão
o bom webdesigner também precisa se preocupar com as versões impressas de suas
páginas. é importante que o usuário tenha o recurso de impressão sempre à mão.
além do botão de imprimir, existente em todos os browsers, você também pode inserir
links para impressão através de algumas simples linhas em javascript, dentro do
código html da sua página. esse recurso pode facilitar a impressão de frames, por
exemplo.
para criar um botão de impressão que imprima apenas o frame onde o botão se
encontra, a forma mais simples e direta é criar um link, onde será usada a função
javascript print(). esse link pode ser feito em texto, em imagem ou até em forma de
botão. basta escolher o mais adequado para o seu caso.
veja abaixo os exemplos e seus respectivos códigos:
<a href="#"
onclick="self.print()">clique aqui
para imprimir esta página</a>
clique aqui para imprimir esta página
<a href="#"
onclick="self.print()"><img
src="imgs/imprimir.gif"
border="0"></a>
<form><input type=button
value=imprimir
onclick="self.print()"></form>

links sem sublinhado
com um simples estilo em css, você pode tirar o sublinhado padrão dos links
da sua página, e fazer que ele só reapareça quando o cursor do mouse estiver
sobre o link.
para aplicá-lo, basta copiar e colar o texto abaixo entre as tags <head> e
</head> do seu código.
<style>

</style>
agora, copie a tag abaixo dentro de cada tag <a>,onde o link deve ficar sem
sublinhado:
class="estilo1"
seu link deverá ficar parecido com o exemplo abaixo:
<a href="http://www.criandosite.com.br"
class="estilo1">www.criandosite.com.br</a>
a parte destacada em azul, é o nome da função, que poderá ser substituído
por qualquer outro, contanto que você altere o mesmo dentro das tags de
link.
a parte destacada em verde, são as propriedades da função:
· "color: black;" - define que os links com o estilo, ou classe, aplicado terá a
cor preta. pode ser substituído pela cor de sua preferência.
· "text decoration: none;" - faz com que o traço sob o link desapareça.
· "font-size:12px" define o tamanho da font do link. neste caso, o tamanho
está definido como 12 pixels, mas você poderá alterá-lo.
· "font-family: arial" - define o tipo de letra, no exemplo, a fonte é arial, mas
poderá ser substituída por qualquer outra.
o texto em vermelho servirá para produzir o efeito de sublinhado quando o
cursor do mouse estiver sobre o link. poderá ser excluído caso você queira
que o sublinhado do link simplesmente desapareça, e que não reapareça
quando o cursor do mouse estiver sobre ele.
este recurso é compatível com ie e netscape 6.

botão "voltar"
um recurso muito útil e muito usado em web pages é o botão "voltar". este
botão facilita a navegação do usuário, principalmente se a página foi
construída dentro de uma janela popup, que não tem os botões padrão do
navegador.
este botão faz com que a pessoa volte para a última página visitada.
este botão pode ser aplicado com um javascript muito simples. para inserí-lo,
copie e cole o código abaixo entre as tags <body> e </body> da sua
página:
<a href="javascript:window.history.go(-1)"
target="_self">voltar</a>
você pode colocar uma imagem no lugar do texto, comopor exemplo um
botão.
compatível com qualquer navegador.

tag img - inserção de imagens
<img> é a tag identificadora de imagem. vai acompanhada de um atributo
fundamental src, que indica o caminho onde se encontra o arquivo que
contém a imagem. a tag <img> pode vir acompanhada de diversos
parâmetros:
· localização da imagem (src): especifica o endereço da imagem a ser
inserida na página. normalmente, as imagens têm terminação .gif ou .jpg;
· texto alternativo (alt): é um texto alternativo para a imagem, utilizado
principalmente para aqueles browsers que não permitem mostrar imagens. o
texto acompanhado do alt aparecerá no espaço correspondente ao da
imagem e também quando o usuário passar o mouse por cima da imagem;
· tamanho da borda (border): especifica o tamanho da borda, em pixels. os
números têm de ser inteiros (entre 0 e 99). toda vez que utilizamos uma
imagem para estabelecer um link, automaticamente o browser acrescenta
borda à imagem. se quiser eliminá-la, indique com o atributo border="0";
· alinhamento da imagem (align): alinha a imagem à esquerda (left), direita
(right), ao centro (middle), no topo da página (top) ou no pé da página
(bottom);
· altura em pixels (height): especifica a altura da imagem, em pixels. caso
este atributo não esteja presente na tag <img>, a imagem será carregada
em seu tamanho natural;
· largura em pixels (width): especifica a largura da imagem, em pixels. caso
este atributo não esteja presente na tag <img>, a imagem será carregada
em seu tamanho natural;
· espaçamento horizontal (hspace): especifica um espaço em branco a ser
deixado entre as bordas esquerda e direita da imagem, em pixels. ou seja, os
textos que forem escritos ao redor da imagem não ficarão grudados nela;
· espaçamento vertical (vspace): especifica um espaço em branco a ser
deixado entre o topo e o pé da imagem, em pixels. ou seja, os textos que
forem escritos ao redor da imagem não ficarão grudados nela;
veja, logo abaixo, uma tag de imagem e o resultado gerado:
<img src="figura.gif" width="73" height="60"
border="2" alt="exemplo de tag img"
align="middle">
trabalhando com grandes imagens
muitas vezes gostaríamos de colocar uma imagem grande em uma página e
esquecemos como isso pode se tornar um pesadelo para quem estiver
navegando pelo site, pois se durante o carregamento da imagem a linha
travar, o internauta provavelmente dará um reload, assim a imagem grande
terá que ser carregada novamente por inteiro porque uma parte dela não
apareceu. isso acontece principalmente com imagens muito grandes do tipo
.gif se comparadas ao formato jpeg.
um dos recursos mais utilizados para resolver o problema é cortar a imagem
em vários pedaços menores porque se o internauta der reload na página não
será preciso carregar toda imagem novamente, mas sim apenas a parte que
não foi carregada.
a imagem pode ser dividida em 2, 3, 4 partes, etc… o único requisito é que
sejam partes retangulares. por que retangulares? porque para juntarmos
todos os pedaços é necessário utilizar uma tabela.
o segredo para não deixar o espaço que normalmente aparece quando se usa
as tabelas é colocar zero nos seguintes atributos que são pouco conhecidos,
mas que fazem grande diferença:
<table border="0" cellspacing="0" cellpadding="0">
· border: define a largura da border entre as células
· cellspacing: define o espaço entre as células da tabela
· cellpadding: define o espaço entre o conteúdo da célula e a borda da
mesma

tag html - o documento inteiro
a tag html indicam o início e o fim de um documento escrito nessa
linguagem, é é um elemento obrigatório.
todo arquivo html precisa estar "envolvido" por esta tag para que o browser
possa reconhecê-lo e interpretá-lo.
janela para descrição de links
você já deve ter visto em alguma página um link ou imagem com "alt",
aquela propriedade que mostra uma janelinha amarela ao lado do mouse com
algum texto (exemplo de alt). esse recurso é muito usado para descrever
links, coisa que ajuda muito na navegação.
porém, esse recurso é limitado, uma vez que você não pode alterar a fonte,
cor de fundo, etc.
essa dica traz um script um pouco complexo, mas que substitui o alt muito
bem, pois com esse script, você consegue alterar a cor de fundo da legenda,
a letra, tamanho da janela, etc.
por ser um script um pouco mais difícil de aplicar, é indicado para quem já
tem uma noção maior de html e javascript.
para aplicá-lo, siga as instruções passo a passo:
1º passo:
clique aqui e salve o arquivo descricao.js na da onde se encontra a sua
página.
2º passo:
agora, copie e cole o código abaixo entre as tags <head> e </head> do
seu código:
<style>
#ptt {
font-family: arial;
font-size: 8pt;
}
#pst {
font-family: arial
font-size: 8pt;
}
</style>
para personalizar seu script:
· o valor destacado em rosa indica a fonte e o tamanho do título da janela
popup.
· o valor destacado em verde indica a fonte e o tamanho do texto da janela
popup.
3º passo:
agora, copie e cole o código abaixo entre as tags <body> e </body> do seu
código:
<div id="overdiv" style="position:absolute;
visibility:hide;"></div>
<script type="" language="javascript">

</script>
<script language="javascript"
src="descricao.js"></script>
para personalizar seu script:
· os valores destacados em vermelho indicam a largura da janela popup e
sua borda, respectivamente.
· os valores destacado em laranja indicam as cores ds janela popup.
4º passo:
copie e cole o código abaixo no body de sua página. é o link com a descrição,
e você deve alterá-lo seguindo a legenda:
<a href="http://www.criandosite.com.br"
onmouseover="dcc('portal de hospedagem
grátis!','criandosite'); return true;" onmouseout="nd();
return true;">criandosite</a>
· o valor destacado em verde indica a url do link.
· o valor destacado em vermelho indica a descrição do link.
· o valor destacado em rosa indica o título da janela popup.
· os valores destacado em azul indica o texto do link.
este script é compatível com ie.

quinta-feira, 16 de fevereiro de 2012

Photoshop

quinta-feira, 17 de novembro de 2011

listas ordenadas HTML

propriedade "alt"

tabelas

Postagens populares

Cursos de Informatica

Publicidade

Advertisement