Crie uma ilustração tipográfica com efeitos de reflexo no Photoshop

Neste tutorial você aprenderá a aplicar efeitos de luz a textos no Photoshop. Esse efeito poderia ser usa o em um logo de uma banda, um pôster ou uma capa de álbum. Optamos por começar com a fonte Museo Sans, modificando certas letras para criar um logotipo. Depois acrescentamos camadas de detalhes e incluímos perspectiva, reflexos e sombras para obter um efeito de metal escovado tridimensional.

Como a maioria das formas é vetorial, mantemos a flexibilidade do Adobe Illustrator com as vantagens dos efeitos de luz do Photoshop. Começando com os valores em preto e branco, o princípio básico consiste em criar camadas de forma e aplicar estilos de camada Gradient Overlay, que permanecem editáveis ao longo do projeto. Assim, você poderá editar partes da ilustração a qualquer momento, o que seria difícil com camadas de pixels normais. As técnicas mostradas servem para qualquer forma que se deseje incluir com a tipografia.

Como um efeito final, adicionaremos cores à imagem e pintaremos luzes e reflexos em neon para dar vida à ilustração. 

Ilustração de base

Baixe o arquivo fornecido online e construa a base da ilustração

01 Base tipográfica

Crie um novo documento de 235 x 302mm e preencha a camada de fundo com preto. Ponha o arquivo fornecido “Base Tipografia.eps” no documento (File>Place). Rasterize a camada e separe cada palavra, depois aplique Layer>Layer Style>Gradient Overlay a elas. Clique no dégradé para editá-lo e use configurações semelhantes à tela abaixo. Inclua um estilo de camada Stroke em branco, ajustado para 5px.

02 Chanfros

Crie uma nova camada e, começando com a letra R, use a ferramenta Pen para desenhar uma forma trapezoidal no lado esquerdo, a pouca distância do traçado em branco. Converta-a em seleção e puxe um degradê horizontal simples em preto e branco. Verticalmente, faça-o cinza escuro na parte de baixo e branco no alto. Repita em toda a letra R, criando dégradés em direções variadas.

03 Chapa de base

Carregue as duas imagens no Photoshop. Uma delas, em nosso exemplo o pôr do sol, conterá as cores que serão transferidas com o ajuste Match Color.

04 Pirâmides e diamantes

Duplique as formas de pirâmide e inverta-as verticalmente, movendo para o alto. Redimensione até o tamanho da palavra Electric e aplique uma sombra projetada suave em cada uma das formas para separá-las. No topo, crie uma nova camada com forma de diamante e aplique um estilo de camada Gradient Overlay. Duplique a camada quatro vezes e redimensione para 1/4 do tamanho. Diminua novamente para criar um ligeiro chanfro nas bordas, alterando o dégradé para um preto sólido. Duplique todas essas camadas, diminua o tamanho novamente e acrescente uma sombra projetada à camada de baixo.

Dica rápida
Para copiar um estilo que esteja aplicado em uma camada, segure Opt/Alt, clique e puxe o estilo para a camada desejada. A camada existente fica intacta e o estilo é copiado para a outra.

leia mais »

Aprenda a criar autênticos raios com dégradés, filtros e mais

Quando os vemos na vida real, nos extasiamos diante dos feixes de luz, mas eles ficam ainda melhores quando recriados no Photoshop.

Por Simon Skellon

 

Quando os vemos na vida real, nos extasiamos diante dos feixes de luz, mas eles ficam ainda melhores quando recriados no Photoshop. Mas como produzir esse tipo de efeito? Bem, tudo isso é possibilitado pelos modos de mesclagem e opacidade das camadas. A combinação desses recursos nos permite criar um efeito sutil que imita perfeitamente a luz do sol real. As decisões mais difíceis a tomar são quanto à forma e à escolha das ferramentas adequadas. Neste caso, usamos uma forma personalizada criada especificamente para este trabalho. Assim, os feixes já estão dispostos para nós; basta colocá-los em perspectiva e encaixá-los na imagem. É importante levar em conta a perspectiva e o ângulo dos raios de luz, que devem ser ligeiramente mais espessos próximo ao chão para mostrar o efeito da dispersão luminosa. 

A foto da floresta – disponível aqui em nosso site – foi tirada por Andreas Krappweis. Aplique o efeito em suas próprias imagens de paisagem para ver que tipo de atmosfera pode ser criada.

Ilumine uma cena

Carregue seu primeiro dégradé e comece a construir os feixes de luz

01 Abra a imagem

Para começar, abra a imagem inicial “Floresta.jpg” no Photoshop. Iniciaremos com a criação de feixes de luz largos e suaves. Faça uma nova camada acima do fundo com o atalho Ctrl/ Cmd+Shift+N.

02 Carregue as predefinições

Selecione a ferramenta Gradient (G) e clique no Gradient Editor na barra de opções superior. As predefinições aparecem no alto do menu. Abra Color Harmonies 2 na lista suspensa pressionando o ícone logo acima das miniaturas.

03 Posicione o dégradé

Selecione a predefinição Red, Blue, White e dê OK. Aplique um degradê em ângulo no centro da imagem, de cima para baixo. Altere o posicionamento e a espessura dos raios de luz, use o comando Desaturate (Cmd/Ctrl+Shift+U) para remover as cores e altere o modo de mesclagem para Screen.

Dica
Podemos editar o estilo de qualquer dégradé para criar raios de luz mais intensos usando as opções do Gradient Editor. Depois de escolher uma predefinição, mais amostras podem ser adicionadas às cores que aparecem na visualização do dégradé. Você pode usar qualquer cor, mas as mais escuras criam um contraste mais marcado quando o modo de mesclagem Screen é aplicado. Experimente outras predefinições, como Noise Samples, tendo em mente que é mais importante pensar no número de transições do que nas cores.

leia mais »

Aprenda a usar a cortar e realinhar suas imagens

use a ferramenta Perspective Crop do Photoshop CS6

Por Simon Skellon

A ferramenta Perspective Crop é uma novidade do Photoshop CS6 que permite recortar figuras de acordo com o ângulo em que foram fotografadas. Esse tipo de ferramenta é ideal quando você tira uma foto de uma figura que deveria ser reta, mas por alguma razão saiu inclinada. Veja, por exemplo, esta placa, que foi clicada em um ângulo meio torto. Com a ferramenta Perspective Crop é muito simples endireitar o objeto, bastando arrastar uma caixa de corte. Ela também dispõe de uma grade, garantindo que sua figura fique bem de frente para as lentes.

DicaNão se preocupe em chegar a uma perspectiva perfeita logo de cara, pois a caixa de corte pode ser ajustada posteriormente tantas vezes quantas você quiser
 

Endireite objetos

Faça um corte dinâmico com perspectiva

01 Defina as opções

Selecione a ferramenta Perspective Crop (C) na mesma parte da barra de ferramentas em que fica Crop. Na barra de opções, marque a caixa Show Grid e, se precisar que a imagem tenha uma certa resolução (como 300dpi), insira-a no campo apropriado.

02 Posicione os marcadores

Com a ferramenta configurada, clique uma vez no canto da figura. Isso indica a partir de onde o Photoshop deve cortar a imagem. Desenhe uma linha para baixo e alinhe-a com uma borda reta.

03 Alinhamento

Posicione marcadores nos quatro cantos da figura a ser cortada. Use os pontos dos cantos para alinhar a grade com as bordas retas da imagem e clique no tique verde da barra de opções para aplicar o corte.

leia mais »

Como usar o método Color Range para criar seleções

Selecione cores!

O recurso Color Range do Photoshop serve para isolar uma cor. Seu funcionamento é semelhante ao da ferramenta Magic Wand (W), pois ambos usam áreas de cor para formarseleções, mas a vantagem de usar Color Range é poder controlar o tamanho da área da seleção e visualizar os resultados.

Existem muitas outras vantagens, como a possibilidade de selecionar apenas os tons de pele se houver pessoas em sua imagem (a partir do Photoshop CS6). Siga nosso procedimento neste camaradinha emplumado para descobrir como fazer seleções e aplicar ajustes usando Color Range.
 

Controle as cores

Altere um matiz usando o método de seleção Color Range

01 Abra Color Range

Encontre a opção Color Range dentro do menu Select, no alto do Photoshop. Como não se trata de uma ferramenta, ela não existe na barra lateral. Mas se tiver as ferramentas Marquee (M), Magic Wand ou Quick Selection (W) à mão, dê Ctrl/clique direito sobre a imagem para ver Color Range na lista.

02 Método de amostragem

Primeiro, escolha como deseja pescar a cor a alterar em sua imagem. Clique na lista Select e experimente uma das opções. As áreas brancas na janela de visualização representam a seleção, mas se ela estiver muito suave ajuste Select para Sampled Colors para fazer isso manualmente.

03 Localized Color Clusters

Para selecionar uma cor em apenas uma área sem afetar o resto da imagem, marque a opção Localized Color Clusters. O deslizante Range deverá estar visível, bem como Fuzziness. De início, ajuste Range para 20% e Fuzziness para 100.

04 Conta-gotas

Para fazer uma seleção, clique na cor que deseja alterar. Todas as áreas da cor escolhida devem aparecer na visualização em branco. Comece na borda da cor e uma pequena área de branco aparecerá dentro de Color Range.

05 Adicione a seleção

Com as seleções iniciadas, clique no conta-gotas com o símbolo de mais. Em sua imagem, clique e puxe a partir do ponto em que parou para adicionar mais cores à seleção. A visualização mostrará mais áreas brancas. Não se preocupe se elas sangrarem sobre outras partes da imagem.

06 Remova a seleção

Clique no ícone do conta-gotas com o sinal de menos. Usando a visualização do menu como guia, clique sobre as áreas brancas espúrias. A seleção ficará ainda mais limpa. É possível alterar os deslizantes Fuzziness e Range para um refinamento maior. Dê OK para aplicar a seleção.

07 Cor mascarada

Com uma seleção somente da cor, camadas de ajuste como Hue/ Saturation poderão ser adicionadas por meio da paleta Layers. Note como a camada de ajuste usa a seleção como máscara, permitindo alterar apenas esse matiz e produzir um efeito criativo.

leia mais »

Como projetar um layout de coluna dois para o seu site usando CSS

Pré-requisitos

Para você ser capaz de usar este artigo, você precisa ser capaz de codificar diretamente em ambos HTML e CSS . Se este não for o caso, você pode preferir usar um editor web visual para projetar seu site, em vez. Por exemplo, o Dreamweaver vem com vários templates para construir 2 ou 3 sites de colunas usando CSS. MeuDreamweaver Tutorial leva você através das etapas de criação de um site de duas colunas com base em CSS com este editor.

Meus tutoriais para o free web editores KompoZer , BlueGriffon e Nvu também pode ser usado para criar dois locais de coluna, embora não utilizando CSS.

Note que você não precisa ser um especialista em escrever código HTML ou CSS. Você só precisa de alguns conhecimentos fundamentais de trabalho caso contrário, este tutorial será incompreensível.

Usando Float para definir duas colunas

Embora existam muitos métodos de utilização do CSS para criar um local de duas colunas, este tutorial utiliza o flutuador propriedade para mover uma coluna para o lado da outra. Em alguns aspectos, este método é mais flexível do que o método de posicionamento absoluto actualmente utilizada thesitewizard.com. Ele também permite que você adicione cabeçalho e rodapé opcional bares que abrangem ambas as colunas, se desejar.

Compatibilidade

O CSS com duas colunas dada aqui foi testado para trabalhar em Internet Explorer 6 e 7, Firefox, Opera e Safari .

O código HTML para um site básico 2 Coluna

A parte HTML do código é bastante simples. Você precisa basicamente de duas div blocos, um para cada coluna.

<div id="container">
  <div id="navbar"> Navegação </ div>
  <div id="content"> conteúdo aqui </ div>
</ Div>

As palavras "Navegação" e "Conteúdo aqui" são apenas espaços reservados para a barra lateral de navegação e conteúdo principal. Você deve remover essas palavras quando você coloca o seu conteúdo real. O "container" div bloco é apenas um bloco colocando ambas as duas colunas, e é útil se você deseja aplicar determinados estilos que afetam ambas as colunas como uma unidade.

O código CSS para um Basic 2 Coluna site usando um fluido ou layout líquido (larguras relativas)

Se você quer um site onde suas larguras de página expandir ou contrair de acordo com a grande janela do navegador do seu visitante é, você deve usar larguras relativas de suas colunas. No momento em que escrevo isto, thesitewizard.com usa um esquema tão fluido bem. Por exemplo, se você mudar o tamanho da janela do navegador, o navegador irá formatar este artigo, tanto quanto possível para caber dentro da janela (a menos que você redimensioná-la muito pequena).

O código CSS para isso é simples.

# Content {
  margin-left: 20%;
}
# Navbar {
  float: left;
  width: 20%;
}

O código CSS tem que ir ou para o estilo seção de sua página web ou uma folha de estilo externa. Veja como personalizar o código:

1. Mudando a Largura

   O estilo acima define a coluna lateral para sua barra de navegação para 20% da largura da janela do browser. Consequentemente, a margem esquerda da coluna que contém o seu conteúdo também está definido para começar em 20% a partir da borda esquerda da janela do navegador, caso contrário, o seu conteúdo vai coincidir com a sua barra de navegação.
   Se você preferir que a largura da coluna lateral ser mais amplo ou mais restrito, basta alterar tanto as margin-left e width propriedades para o mesmo valor.
   Você também pode usar pixels para a largura, em vez de uma porcentagem. Por exemplo, para restringir sua coluna barra de navegação para 200 pixels, altere cada um dos 20% para os valores 200px vez. O uso de pixels é útil se você tiver uma imagem (como um logotipo) que você deseja colocar na coluna do lado e não quer que a coluna para ser mais estreita do que a sua imagem.

2. Como colocar a barra de navegação para o Direito

   O código acima coloca o menu de navegação na coluna da esquerda, assim como o que você vê na desta página . Se você preferir que o menu de navegação do lado direito, como é comumente encontrada em blogs, altere o código para que ele se parece com o seguinte:
   

   # Content {
     margin-right: 20%;
   }
   # Navbar {
     float: right;
     width: 20%;
   }
   

   Mais uma vez, mudar de "20%" para um valor apropriado para o seu site.

O código CSS para um Basic 2 Coluna site usando um layout fixo

Embora, neste momento, eu ainda uso um layout largura relativa, ou layout líquido, como algumas pessoas gostam de chamá-lo, as desvantagens que eu mencionei em meu artigo A Grande fixo Vs Relativa Largura Layout de Página Debate estão se tornando mais aguda com o grandes resoluções de monitor que estão agora disponíveis.

Como resultado, algumas pessoas preferem fixar a largura de sua janela para um valor razoável, como 800 pixels ou 1024 pixels. Para usar um layout como fixo para o seu site, definir uma largura para o bloco contendo duas colunas. Aqui é onde a DIV recipiente vazio que você criou anteriormente vem a ser útil.

O seguinte código CSS cria uma página com uma largura fixa de 800 pixels.

# Container {
  width: 800px;
}
# Content {
  margin-left: 200px;
}
# Navbar {
  float: left;
  width: 200px;
}

No entanto, se você fizer o acima, e seu site aparece em uma janela do navegador mais largo do que 800 pixels, você vai descobrir que ambas as colunas serão liberados para o lado esquerdo da janela, deixando um mar de espaço em branco à direita da tela . O que você quer, em tal caso, é para ambas as colunas a ser centralizado na janela do navegador.

A maneira compatível com os padrões de centralizar um bloco é dado abaixo:

# Container {
  width: 800px;
  margin-left: auto;
  margin-right: auto;
}

Para que este código para funcionar no IE 6 e 7, você deve ter um Document Type Definition válido ("DTD"), ou DOCTYPE, para a sua página web para evitar desencadear IE modo 6/7 's compatibilidade com versões anteriores (também conhecido como modo Peculiaridades para a maioria dos webmasters). Por exemplo, o HTML 4.01 DTD transição é o seguinte:

! <DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN"
  "Http://www.w3.org/TR/html4/loose.dtd">

As margens esquerda e direita estão definidos para auto que faz com que os navegadores compatíveis com os padrões para dar-lhes tanto um valor igual, efetivamente centralização do bloco.

Como colocar um cabeçalho ou rodapé Top Abrangendo ambas as colunas sobre a 2 coluna do Site

Alguns sites têm um cabeçalho superior que abrange ambas as colunas. Eles podem tanto colocar o logotipo ou o nome do site aqui, ou talvez até mesmo anúncios em banners ou ambos. Da mesma forma, alguns locais incluem um rodapé que abrangem ambas as colunas. Entre outras coisas, o rodapé pode ser usado para coisas como avisos de direitos autorais.

Para usar um cabeçalho e rodapé usando esse layout 2 colunas, modificar o código HTML da seguinte forma.

<div id="layout">
  <div id="header"> Top Header </ div>
  <div id="navbar"> Navegação </ div>
  <div id="content"> conteúdo aqui </ div>
  <div id="footer"> inferior rodapé </ div>
</ Div>

Adicione o seguinte código CSS para a sua folha de estilo existente. Basta colocá-lo depois que os estilos que você criou anteriormente .

# Footer {
 clear: both;
}

Se você deseja que o texto em seu cabeçalho a ser centralizado, adicione o seguinte. Caso contrário, não há necessidade de definir um estilo de cabeçalho.

# Header {
 text-align: center;
}

O mesmo text-align propriedade pode ser adicionado ao rodapé para centralizar o texto lá também, se desejar.

Assuntos Diversos

1. Top Line problemas de alinhamento

   Você provavelmente vai achar que o IE 6 e 7 não se alinham as principais linhas de sua esquerda e direita colunas da mesma forma como todos os outros navegadores. Se o design do site passa a ser o alinhamento sensível, você pode querer usar o condicional inclui descrito no artigo Como usar diferentes folhas de estilo CSS para navegadores diferentes (e como ocultar código CSS a partir de navegadores mais antigos) para posicionar seu texto especificamente para esses navegadores. É melhor posicionar especificamente o código para o IE 6 e 7 apenas (e nem todas as versões do IE), já que a Microsoft prometeu que o IE 8 terá melhorado CSS conformidade com padrões, então se você posicioná-lo para todas as versões do IE, o design do site vai quebrar no IE 8 e acima.

2. Texto e gráficos ir direto para o Edge

   O código dado acima apenas fornece o layout básico. Tal como está, o texto e os gráficos ir direto para a borda de cada coluna. Uma maneira de fazer algum espaço entre o texto e as bordas é adicionar a seguinte propriedade para o seu conteúdo , barra de navegação , cabeçalho e rodapé seletores DIV.
   

   padding: 4px;
   

   A largura exata do estofamento é, naturalmente, depende de você. O 4px dado aqui é apenas um exemplo.

leia mais »

Aprenda a desenhar um site usando HTML

1. Esta não é a maneira mais fácil de criar um site

   Mão de codificação de uma página web em HTML não é a maneira mais fácil de criar um site. Na verdade, é provavelmente a forma mais lenta e menos eficiente, e, dependendo de suas inclinações, possivelmente, o mais tedioso. Se tudo que você quer é criar um site, você pode querer considerar o uso de um editor web visual para fazer o trabalho em seu lugar. Visual Web editores, também chamados editores web WYSIWYG ("What You See Is What You Get" editores), são programas de computador que permitem criar sites sem necessidade de qualquer conhecimento técnico.
   
   

2. Este guia omite certos passos importantes

   Como este é um tutorial HTML , ele omite algumas das medidas não-relacionados a HTML que são necessários para criar um site, como obter o seu próprio nome de domínio, se um host, etc, eu recomendo que você leia Como fazer / criar seu próprio Website: Guia AZ do novato para mais informações sobre estes passos. Na verdade, se você ainda não tem um nome de domínio ou um host, ou se você nem sabe o que significam estas coisas, eu sugiro que você leia esse guia primeiro. O tutorial em HTML que você está lendo assume que você já conhece esses termos.

3. HTML não é suficiente

   HTML em si será não deixá-lo fazer coisas que web designers geralmente querem fazer em seu site, como criar duas ou mais colunas em seus sites, usar diferentes fontes, cores de mudança (ou "cores" Se você usar uma variante diferente do Inglês ), ou fazer alguns outros trabalhos de design visual para fazer a sua página web uma boa aparência. Coisas que regem a aparência do seu site são manipulados por uma tecnologia separada chamada CSS. Por favor, leia O que é HTML? O que é CSS? Quais são JavaScript, PHP e Perl? Preciso de aprendê-los para criar um site? para uma explicação sobre o que é e como se relaciona com HTML.
   Isso quer dizer que, após a conclusão da parte HTML desta série de tutoriais, vamos passar para o tutorial CSS, de modo que você possa completar o seu website.Não se preocupe. Este tutorial HTML será perfeitamente levar para o tutorial CSS, uma vez que ambas as seções dos tutoriais foram escritos para trabalhar uns com os outros.
   Se isso soa assustador, você pode querer considerar a criação de seu primeiro site usando um dos editores web visuais mencionados acima. Esses editores criar automaticamente o código HTML e CSS para você, para que você não tem que se preocupar com essas coisas. Então, depois que você terminar o seu site dessa forma, se você ainda quer aprender HTML, sinta-se livre para voltar para este guia .

Obter um editor de texto adequado

A primeira coisa que você precisa é fazer com que um editor de texto adequado. Deixe-me começar por afastar certas coisas, de modo que não há nenhum mal-entendido sobre o que eu quero dizer quando digo "editor de texto adequado."

• Não use o Notepad

  Eu sei que quando eu mencionei "editor de texto", algumas pessoas provavelmente pensou: "não há problema, meu computador usa o Windows, que vem com o bloco de notas".
  Deixe-me dizer isto sem rodeios: o bloco de notas não é um editor de texto adequado . Se você estiver indo para estar trabalhando em seu site, codificação diretamente no HTML, você realmente precisa de um editor totalmente funcional. Notepad não consegue lidar com determinados caracteres e combinações de caracteres que você pode encontrar ao longo da estrada. Como tal, em determinadas circunstâncias, pode corromper o arquivo sem o seu perceber. Oh, não me interpretem mal. Vai funcionar bem na maioria das vezes, mas em algum momento ao longo da estrada, se o arquivo acontece de ter um ou mais desses caracteres não segurar, ele vai morder você. E você nem vai saber que isso aconteceu, já que não há nenhuma mensagem de erro ou aviso que acompanha a corrupção do arquivo. Além disso, o bloco de notas não pode lidar com arquivos grandes, caso em que pode invocar de forma transparente um programa diferente, Wordpad, para fazer o trabalho. E Wordpad vai certamente corromper sua página web.
  Tenha em mente que mesmo os desenvolvedores da Microsoft não considero (nem recomendo) Notepad como um editor de texto viável para o trabalho normal de edição. O editor foi criado para o usuário do computador casual para ver as coisas como arquivos de log do Windows e coisas assim. É por isso que ele faz coisas como transparente invocando um programa diferente para arquivos grandes. Uma vez que é principalmente para a visualização de arquivos, não importa se o bloco de notas ou Wordpad faz o trabalho. Mas para o webmaster, que tem uma grande importância.
  Mesmo se você está se esforçando para uma vida ascética de sofrimento e gravidade, o bloco de notas não é o caminho. Pode ser aceitável para alguém brincar com o arquivo de texto ocasional (e mesmo assim é discutível), mas não é a ferramenta correta para quem quer trabalhar diretamente com HTML em uma base regular.

• Não use um processador de texto

  Não use processadores de texto a mão arquivos HTML de código. Processadores de texto inserir escondido (e invisível) de código em seus arquivos que não fazem parte do HTML.
  Por processadores de texto, quero dizer qualquer programa que lhe permite sublinhar o texto, fazer o texto em negrito, colocar o texto em itálico, criar tabelas, etc Isso inclui o Microsoft Word, LibreOffice, OpenOffice.org, e todo o material listado nos processadores palavra livre e suítes de escritório página. Ele também inclui Wordpad, que vem com o Windows. Sim, o WordPad é um processador de texto rudimentar. Não usá-lo para essa finalidade.
  Lembre-se: o tipo de editores de texto que eu estou falando não permitem que você faça coisas como sublinhar palavras, colocar o texto em negrito, etc Eles se comportam como o Bloco de Notas (sem os problemas que o último tem). Se o seu programa tem esses tipos de recursos, não é um editor de texto, mas um processador completo palavra blown.

• Existem muitos editores de texto around livres e comerciais

  Alguns de vocês provavelmente estão pensando neste momento que eu já descartou praticamente tudo no seu sistema informático. Não se preocupe. Editores de texto são um centavo uma dúzia na Internet. Na verdade, você não precisa nem de um centavo. Existem zilhões de editores de texto livres ao redor. (E zilhões de os comerciais também, para essa matéria. Programadores parecem amar a criação de editores de texto.)
  A lista de editores de texto gratuitos podem ser encontrados nas seguintes páginas:
  
  1. Editores HTML livres e editores WYSIWYG Web - embora esta página lista os editores de texto, bem como editores web WYSIWYG, lembre-se de que você está apenas à procura de um editor de texto, assim você pode ignorar a seção da página do WYSIWYG web editores. (No caso você esteja se perguntando, os editores HTML listados na página são apenas editores de texto. Eles podem ser usados ​​para digitar o código HTML, código de programação ou quaisquer outros tipos de texto puro.)
  2. Se você não consegue encontrar o que quiser na página, você também pode olhar para o Editor do programador gratuito página. Não se deixe enganar pelo título grandioso da página. "Editores do programador" são apenas editores de texto simples. Na verdade, minha decisão de listar um editor de texto no editores HTML da página ou os editores dos programadores página é muitas vezes arbitrária. Se acontecer de você usar um editor de texto especial para escrever o código HTML, você vai acabar chamando-o de um editor HTML. Se acontecer de você usar a mesma coisa para escrever código de programação, você vai chamá-lo de editor de um programador. Mas eles são todos os editores de texto simples. Realmente. É principalmente uma questão de perspectiva.
  Para quem não pode decidir, deixe-me apenas dizer que, do ponto de vista de alguém que tem vindo a utilizar editores de texto há décadas: eles são todos basicamente o mesmo hoje em dia. Lembre-se que estes não são os processadores de texto sofisticados ou qualquer coisa. Todos eles funcionam como o Bloco de Notas. Não há "melhor" editor de texto ou qualquer coisa assim. Se você não pode decidir, é só pegar um e experimentá-lo. Se você não gostar dele, por algum motivo, desinstalá-lo e começar outro e tentar isso em seu lugar. Afinal, eles são todos gratuitos.
  (Na verdade, para iniciantes, as chances são de que qualquer um que você escolher vai funcionar muito bem.)

• Se você tiver Dreamweaver ...

  Se você já tem o Dreamweaver , você não tem que ter um editor de texto separado. Basta mudar a visualização do código do Dreamweaver. Ou seja, clique em "Exibir" na barra de menu, e "Código" do menu drop-down que aparece. Isso muda Dreamweaver de sua interface design visual para sua interface editor de texto.
  E você não está recebendo algum editor de texto meia-boca também. Built-in editor de texto do Dreamweaver é realmente muito bom, e que é altamente otimizado para pessoas que escrevem HTML, então você pode muito bem não perder tempo procurando outro. Usando o editor de código do Dreamweaver também tem inúmeras outras vantagens. Por exemplo, ele tem ferramentas para verificar o seu código de correção, e você também pode facilmente mudar para o modo Design do editor para ter uma idéia do que sua página web se parece em um navegador. Outras vantagens incluem a possibilidade de utilizar as suas instalações de sincronização do site para publicar suas páginas web. E assim por diante.

Sua primeira página Web

Agora que eu tenho você entediado às lágrimas com as preliminares, vamos apenas saltar para o lado fundo da piscina imediatamente.

Tome o seguinte (incompleto) exemplo de página HTML como um ponto de partida.

Antes de discutirmos o código acima, copie-o em seu editor de texto e salve-o como um arquivo chamado "sample.html" no seu desktop. Eu sei que é fácil simplesmente ignorar as minhas palavras aqui e pular essa etapa, mas fazendo isso irá acelerar o seu aprendizado e melhorar sua compreensão do que estou a falar mais tarde. (Você também estará modificando o código à medida que avançamos.) Há também um benefício secundário (menos importante), em que ele vai ajudá-lo a se familiarizar com o seu editor de texto.

Para aqueles que não sabem como fazer o que eu disse no parágrafo acima, clique uma vez na caixa acima contendo o código. O conteúdo da caixa deve automaticamente ser destacado. Se não estiver, arraste o mouse sobre o texto e selecionar manualmente tudo. Em seguida, clique com o botão direito do mouse. No menu que aparece, clique no item "Copy". Inicie o seu editor de texto. Clique em "Editar" na barra de menu, seguido pelo item "Paste" no menu drop-down que aparece.O texto que você vê na caixa acima devem aparecer no seu editor de texto.
Dependendo de qual editor você instalou, o texto acima pode aparecer em uma variedade de cores. Não se preocupe com isso. As cores são o que os programadores chamam de "destaque de sintaxe". Simplesmente ignorá-lo. (E não se preocupe se você não vê essas cores também. Eles não são importantes.)
Para salvar o arquivo, clique no menu "File", seguido pelo item "Save" no submenu que aparece. Quando for solicitado um nome de arquivo, selecione a pasta apropriada para o arquivo a ser salvo (por exemplo, seu desktop, para que você não vai esquecer de onde você colocá-lo) e digite "sample.html" (sem as aspas). Note que eu estou supondo que você não está usando o Bloco de Notas. Se você usar o bloco de notas, isso não vai funcionar, já que o bloco de notas vai invisivelmente mudar seu nome de arquivo para "sample.html.txt" atrás das costas. Não use o Bloco de Notas.

Agora, abra o arquivo no seu navegador web. Uma maneira de fazer isso é clicar duas vezes no arquivo no seu desktop. O arquivo deve aparecer em seu navegador padrão. Manter tanto o navegador eo editor de texto aberto. Ou seja, não fechar ou sair ou programa.

A lógica de HTML

Olhe para o código HTML (ou em seu editor de texto ou deslocando-se neste artigo).

Observe que as palavras exibidas em seu navegador, "Esta é uma página web amostra de thesitewizard.com 's HTML tutorial" é imprensada entre " <p> "e" </ p> ". Todo esse bloco é imprensado entre si " <body> "e" </ body> ". Na verdade, se você estiver atento, você notará que há outros pares de palavras entre colchetes como o " <head>"e" </ head> "par, bem como o" <html> "e " </ html> "par.

Todas estas palavras ângulo entre colchetes (ou cartas) são comumente chamados de " tags HTML ". Em HTML, a maioria das marcas vêm em pares, com a versão sem adornos, como " <body> ", que está sendo usada para indicar o começo de algo, ea versão com uma barra anterior (" / "), como" </ body > ", que está sendo usado para sinalizar o fim de algo.

Cada marca tem uma função específica. Por exemplo, o " <p> "e" </ p> "par de etiquetas é usado para indicar o início eo fim de um número. (Pense no "p" em " <p> "como se referindo a" parágrafo ".)

A estrutura de um documento HTML

Antes de discutirmos a estrutura de uma página web, considere uma carta comercial normal no tijolo e argamassa mundo. Essas cartas realmente tem uma forma especial: se o papel que você está usando não tem um timbre, normalmente você terá que digitar (ou escrever) o seu próprio endereço na parte superior da página, seguido do endereço da pessoa que você ' está escrevendo para baixo. Só então você começa a sua carta adequada com algo como "Querido ...". Existe normalmente uma linha de assunto após isso, e abaixo disso vem o corpo da sua carta, onde você finalmente começar a dizer as coisas que você queria dizer.

Páginas da Web também têm um formato específico.

1. A primeira linha da página identifica o tipo ea versão do HTML que sua página web está usando.
2. O resto da página é colocada entre a " <html> "/" </ html> "par tag. Código colocada entre estas duas marcas formam a página web adequada.
3. A primeira parte da página web é o que é conhecido como a seção HEAD. A seção começa com " <head> "e termina com" </ head> ". Ele contém informações destinadas para browsers e motores de busca. Código colocado nesta seção não é exibida em um navegador da web. É como os endereços que você coloca no início de uma carta comercial - eles servem a um propósito, mas eles não são realmente parte do conteúdo principal. De qualquer forma, eu tenho certeza que você notou que a secção de cabeça no meu exemplo de código é vazio no momento. Isso é porque eu não quero te confundir por congestionar o arquivo com muitas coisas. Vamos inserir algo nessa seção mais adiante neste capítulo.
4. A parte da página web que contém as informações exibidas em um navegador da web é chamado de seção do corpo, e que é, como você provavelmente já adivinhou até agora, colocada entre a " <body> "e" </ body> "tag par.

Cada uma destas coisas é discutido em detalhe abaixo.

DOCTYPE ou DTD

No código de exemplo que você usou acima, a primeira linha é a seguinte:

<DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN" "http://www.w3.org/TR/html4/loose.dtd">

Ao contrário das outras linhas em sua página web, a primeira linha não é uma tag HTML. Como mencionado acima, é uma espécie de identificador de versão que diz navegadores que sua página está usando a versão 4.01 das especificações HTML. No momento em que escrevo isto, tanto quanto eu posso dizer, as versões mais utilizadas do HTML na Internet são HTML 4 (ou 4,01 para ser mais exato) e XHTML 1.0. Para todos os intentos e propósitos práticos, estas duas versões são, na verdade praticamente o mesmo, exceto que XHTML é fussier sobre algumas coisas, como a necessidade de pequenas letras (minúsculas) palavras para suas tags, exigindo tags de fechamento para tudo, e algumas outras coisas.

Nós só vai ser lidar com HTML 4.01 neste tutorial. Não se preocupe. Você não perder nada usando HTML 4 em comparação com XHTML. Apesar de seu nome chamativo (com a letra extra), XHTML não lhe dá mais recursos para usar em sua página web. É na maior parte apenas faz com que o navegador fussier sobre o que vão aceitar a partir de sua página web. Ele também adiciona complicações com compatibilidade cross-browser (principalmente com versões antigas do Internet Explorer) que vai tornar sua vida um pouco mais miserável, se você é um purista e insistem em estrita conformidade com todos os aspectos do XHTML. Desde que você está apenas começando, é mais fácil simplesmente começar com HTML 4. (E não há nenhuma necessidade real de transição para o XHTML também. HTML 4 é completo em si mesmo.)

A linha de versão é comumente chamado de DOCTYPE por webmasters (já que a linha começa com a palavra DOCTYPE). Oficialmente, ele é conhecido como umDocument Type Definition (ou " DTD "para aqueles que amam abreviaturas). Como o próprio nome indica, ele faz mais do que dizer navegadores web a versão do HTML que você está usando. Ele também indica se sua página web é um dos três tipos: se ele usa frames (um tipo de tecnologia HTML), se é uma página web normal ("transição"), ou se é uma página web normal que usa um limitado subconjunto do HTML ("strict").

Para os curiosos sobre o que os DOCTYPEs parecer para os outros tipos de documentos, eles são os seguintes:

• DOCTYPE HTML 4.01 Strict

  <! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 / / EN" "http://www.w3.org/TR/html4/strict.dtd">

• HTML 4.01 Frameset DOCTYPE

  <DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 Frameset / / EN" "http://www.w3.org/TR/html4/frameset.dtd">

De qualquer forma, não há necessidade de memorizar qualquer um destes DOCTYPEs. Basta copiar e colá-los em sua página web, conforme necessário.

A seção head: Apresentando o título de tag

Uma das coisas mais importantes que pertencem na seção HEAD é a tag título para sua página web. Esta tag fornece browsers e motores de busca o título de sua página.O título que você dá neste tag na verdade não aparecer na sua página web em si, mas é colocado na barra de título da janela do navegador da web quando ele exibe a sua página. Para entender o que quero dizer com isso, olhar para o topo da janela do seu navegador, por enquanto. NÃO rolar a página para cima ou qualquer coisa assim.Basta olhar para cima na borda superior do navegador. Na maioria dos navegadores, você deve ser capaz de ver as palavras "HTML Tutorial - Aprenda a desenhar um site usando HTML (thesitewizard.com)" em algum lugar na barra de título. Alguns navegadores colocar essas palavras na guia para a janela atual. Este é o título que eu defini para este artigo.

Alterne para o seu editor de texto e adicione a seguinte linha em sua seção HEAD.

<title> Minha primeira página web </ title>

Para aqueles que não sei o que eu quero dizer, mova o cursor para o final da linha que contém o <head> tag. Pressione a tecla para criar uma nova linha abaixo ENTER. Em seguida, digitar as palavras que eu dei no bloco acima. Na verdade, você realmente não tem que usar as palavras "Minha primeira página Web". Use o que palavras você quiser, o título. Mas tenha certeza que essas palavras são colocadas entre a abertura <title> tag eo fechamento </ title> tag. E assegurar que esta seqüência inteira ocorre antes do fechamento </ head> tag. Em outras palavras, quando eu digo para adicionar uma determinada linha na seção HEAD, isso significa que você tem que adicionar essa linha entre a abertura <head> tag eo fechamento correspondente </ head> tag.

Salve sua página e reload (atualização) no seu navegador web. Para aqueles que não tem certeza de como recarregar uma página em seu navegador, descobrir como. Na maioria dos navegadores, pressionando Ctrl + R deve fazer o truque (ou seja, mantendo pressionada a tecla Ctrl ao digitar a letra "r" no teclado). Além disso, se você usa o Windows, uma maneira rápida de salvar o seu trabalho na maioria (se não todos) os editores de texto é pressionar Ctrl + S, ou seja, mantenha pressionada a tecla Ctrl e digite "s" no teclado. (Eu não tenho certeza se isso funciona através da placa em software Mac também.)

Agora olhe para a barra de título da janela do browser. Você deve ser capaz de ver o título definido. Observe que as palavras que você digitou não aparecem no corpo principal da sua página web em si. O <title> só define o título da sua página web para o benefício dos browsers e motores de busca. Isso não muda a aparência de sua página web. Qualquer coisa que você deseja exibir na sua página web em si tem de ser inserido na seção do corpo.

Importante: A tag título é obrigatório em todas as páginas web. Não deixá-lo sair. Como eu mencionei acima, a página HTML de exemplo que eu dei anteriormente não estava completa, pois faltava a tag TITLE. Na verdade, ainda não é completa, até mesmo como uma página mínima, e não será até o próximo capítulo.

Mais uma vez, por favor, não sair do seu editor de texto ou navegador web. Mantê-la aberta durante todo o tutorial. Você vai aprender mais rápido se você experimentar o que eu mencionei.

A Seção corpo ea Tag Parágrafo

Embora eu vou apresentar a maioria das tags HTML que lidam com o texto no próximo capítulo, vamos lidar com a tag de parágrafo, <p> , aqui. Isso também me permitirá demonstrar uma característica muito importante do HTML, ou seja, caracteres em branco, não importa na parte da página web entre os mais de abertura e fechamento de tags HTML. (Não se preocupe se a última parte da frase que não faz sentido É o que toda esta seção está aqui para:. Explicá-lo.)

Antes de chegar à frente de nós mesmos, deixe-me primeiro estado que os <p> sinais tag para o navegador que é para mostrar que segue como um único parágrafo até que ele atinja um </ p> tag.

Em seu editor de texto, coloque o cursor de texto no final da linha que diz: "Esta é uma página web amostra de thesitewizard.com 's HTML tutorial." Isto é, mover o cursor até que seja logo após o ponto final (período) em que a sentença. Pressione a tecla (ou tecla Enter se você usar um Mac) ENTER. Isso cria uma nova linha no editor de texto.Agora digite alguma outra frase em que a nova linha em branco. Para aqueles que não sabem o que dizer, digitar "TheSiteWizard.com é um recurso útil para webmasters" (sem as aspas).

Salve a página e carregá-lo em seu navegador, e olhe atentamente para a colocação de sua nova sentença. Observe que mesmo que você colocar a frase em uma nova linha em seu editor de texto, navegador exibida a sentença imediatamente após o anterior, de modo a tornar ambas as sentenças parte do mesmo parágrafo.

Volte para o seu editor de texto e colocar o cursor entre as palavras "de" e "thesitewizard.com 's". Neste momento, existe apenas um espaço vazio entre essas duas palavras. Adicione um pouco mais espaços por bater sua barra de espaço várias vezes. Não importa quantos espaços você adicionar, contanto que um número significativo de modo que você pode facilmente detectar que há uma grande diferença natural entre essas duas palavras. Bata a barra de espaço 10 vezes se você não pode decidir.

Mais uma vez, salvar a sua página e atualizá-la no navegador. Olhe para o seu parágrafo no navegador novamente. Observa-se que o seu parágrafo não parece diferente de antes. É como se o navegador engoliu todos os seus espaços extras.

O caractere de espaço eo caractere de nova linha (o personagem invisível ou uma seqüência de caracteres que o editor de texto insere em sua página web quando você bate a tecla ENTER ou RETURN) são chamados personagens "espaços em branco". Vários espaços em branco são substituídos por um único caractere de espaço em branco por todos os navegadores web. Em HTML, você não precisa formatar uma página da web, adicionando espaços ou novas linhas. Não vai funcionar. Como você observou de cima, o navegador simplesmente ignora os espaços extras ou linhas que você adiciona. Em vez disso, você formatar uma página em HTML, adicionando diferentes tags HTML, ou usando CSS.

Como é que alguém adicionar um novo parágrafo para uma página web? Tenho certeza de que, neste momento, a maioria de vocês já (muito) adivinhado a resposta. Mas vamos experimentá-lo para que você possa vê-lo em ação. (Eu também quero usá-lo para demonstrar algo mais sobre HTML. Então, por favor fazê-lo mesmo que ele parece muito óbvio.)

Mova o cursor para o final da </ p> linha. Pressione a tecla ENTER. Em seguida, insira o seguinte na nova linha que você criou.

<p> Este é um novo parágrafo porque eu usei uma nova tag de parágrafo para iniciá-lo fora. </ p>

Salve a página e recoloque-o no seu browser. A mais recente adição à sua página web deve agora aparecer como um novo parágrafo no seu browser.

Volte para o seu editor de texto novamente. Observe que, ao contrário do parágrafo anterior, eu não coloquei meu <p> tag em sua própria linha. Em vez disso, eu digitei a frase pertencente ao parágrafo imediatamente após a tag, e ainda assim tudo funcionou a mesma de quando eu coloquei o tag em uma linha separada. Ou não há qualquer espaço em branco entre a tag de parágrafo e meu texto real não importa.

Eu recomendo que você brincar com isso um tempo para se familiarizar com a forma como os navegadores interpretam o espaço em branco e as marcas de parágrafo. Ou seja, adicionar novos parágrafos, ou novas frases para suas tags de parágrafo existente, colocar todas as frases e tags em uma única linha, e recarregue a página em seu navegador para ver os seus efeitos.

Recomendações (para proteger sua sanidade)

A partir dos experimentos acima, você provavelmente já percebeu que provavelmente você pode colocar toda a sua página web em uma única linha no seu editor de texto, e tudo ainda vai aparecer corretamente no seu navegador web.

Enquanto isso é verdade, é melhor que você não faça isso. Embora os navegadores da web não terá problemas para lidar com esse tipo de código, você, o webmaster manter a página, vai. Com tudo o comprimido para ocupar espaço mínimo, é muito fácil para você perder alguma coisa e criar erros na sua página web. A economia de espaço mínimo você tem de fazer esses tipos de truques bobos não é apenas vale a pena.

leia mais »

Criar um PhotoGallery bonita que usa o swap Comportamento imagem no Dreamweaver CS6

Adobe Dreamweaver CS6 inclui algumas instalações embutidas como o comportamento Trocar imagem.Os swaps de comportamento Trocar imagem de uma imagem para outra imagem, esta técnica é normalmente usado em sobreposições de botão e galeria de fotos. Você pode trocar mais de uma imagem ao mesmo tempo com um único comportamento Trocar imagem. Este tutorial foi concebido para ajudá-lo a criar uma galeria de fotos usando Trocar imagem Behavior & Aparecer / Desaparecer efeitos no Adobe Dreamweaver CS6.

Confira a demonstração aqui!

Vamos começar o tutorial.

Passo 1: Abra o Adobe Dreamweaver CS6 e carregar o seu " gallery.html page ".

Passo 2: Usando tag DIV e estilo CSS podemos criar um layout básico para a galeria de fotos. Aqui vamos começar por definir as propriedades da página como abaixo 
background-color: # 333; 
margin-left: 0px; 
margin-top: 0px; 
margin-right: 0px; 
margin-bottom: 0px;

Passo 3: Nesta galeria, eu usei 8 grandes imagens e oito imagens em miniatura (ou seja, imagem pequena). Você pode cortar e ajustar o maior tamanho das imagens como: largura - 640px, altura - 500px eo tamanho miniatura da imagem: largura - 76px, altura - 57px.

Passo 4: Basta fazer um esboço da estrutura de galeria que você está planejando para criar. Por isso, vai ajudar você a especificar exatamente como os elementos da página será organizado. Neste tutorial, eu preciso de uma estrutura de layout, como mostrado abaixo:

Passo 5: Primeiro eu preciso para criar a tag DIV e, em seguida, para criar seu estilo correspondente como a sua posição, margem, cor, aparência, preenchimento e tamanho para o layout de página galeria de fotos.

Passo 6: Usando tag DIV, eu criei as áreas para o título, a imagem grande galeria e imagem em miniatura na " gallery.html page ".

Passo 7: Depois código as propriedades CSS em folhas de estilo "style.css" para recuperar a estrutura abaixo.

Passo 8: Coloque a primeira grande imagem (ie, p1.jpg), onde você deseja inseri-lo. Também tenho chamado todas as imagens maiores como p1.jpg, p2.jpg para p8.jpg e todas as imagens em miniatura como p1a.jpg, p2a.jpg para p8a.jpg .

Ir para Inserir> Imagem .

A caixa de diálogo Select Image Source aparece. Selecione p1.jpg imagem e clique em OK.

Passo 9: Repita o processo de " Passo 8 "para cada imagem em miniatura para colocá-los em seus lugares apropriados.

Passo 10: Agora, a estrutura da galeria foi formado como abaixo

Passo 11: Selecione a imagem "p1.jpg" (ie, imagem maior). Vamos criar uma ID da Imagem no "Bottom-Left" no Adobe Dreamweaver CS6.

Digite o ID como " gallery_main "no campo de propriedades.

Passo 12: Agora selecione a imagem em miniatura. Repita o "Passo 11" e nomeie o ID como " g1 ".

Passo 13: Repita esse processo para o descanso das imagens em miniatura e nomear seu ID como " G2, G3 para g8 ".

Passo 14: Quando você aplica um comportamento a uma imagem, Adobe Dreamweaver CS6 insere o código-fonte HTML na tag área automaticamente. Vamos criar o efeito de imagem com a troca para as imagens em miniatura.

Selecione a primeira imagem em miniatura e ir para o " Tag Inspector ", no lado direito da área de trabalho e escolha a ação Trocar imagem da lista de comportamentos.

Tag Inspector> Comportamento> Trocar imagem

Imediatamente aparece uma caixa de diálogo "Trocar imagem". Certifique-se os abaixo de 4 pontos foi feito antes de clicar em "Ok" na caixa de diálogo "Trocar imagem".

1. Images - Escolha aqui a identificação da imagem, o que você precisa para trocar.

. 2 Definir fonte para - Escolher o nome da imagem, o que você precisa para substituir com a imagem "gallery_main" ao clicar na miniatura.

3. Verifique sempre as imagens pré-carga (ou seja, para carregar as imagens quando a página é carregada)

4. Certifique-se de desmarcar a restaurar imagens onMouseOut (ou seja, as imagens originais serão substituídos)

Aqui quando eu clicar sobre a imagem thumbnail "p1a.jpg", eu preciso de imagem "p1.jpg" para ser exibido. Daí eu ter escolhido imagem "p1.jpg".

Passo 15: Agora para a imagem em miniatura "p2a.jpg", eu cliquei imagem "p2.jpg" para ser exibido.Repita este procedimento para as outras imagens em miniatura também.

Passo 16: Depois de definir as ações, precisamos definir os eventos para todas as imagens em miniatura. Adobe Dreamweaver CS6 aplica evento de default como " onMouseOver ", mude isso em um evento como" onClick ". (Ie, Ao clicar na imagem em miniatura, a imagem maior mudará de acordo com sua ação)

Passo 17: Agora vamos ter completado a galeria de fotos simples, sem quaisquer efeitos.

Passo 18: Prepare-se e experimentar alguns efeitos para a galeria de fotos. Selecione a imagem em miniatura e definir o " Aparecer / Desaparecer efeito ", como abaixo

Tag Inspector> Comportamento> Effects > Aparecer / Desaparecer

Neste tutorial, eu definir o efeito de "parecer" para a galeria de fotos. Certifique-se sempre de manter o "elemento-alvo", como a maior imagem de identificação.

Definir o "parecer" valores de efeitos como abaixo

Passo 19: Após a conclusão da criação dos efeitos para fotos imagens em miniatura da galeria. Ao salvar o arquivo "gallery.html", o Adobe Dreamweaver CS6 vai gerar o javascript e seus arquivos de acordo com o nome " SpryEffects.js "na pasta" SpryAssets ".

Nota: efeitos do Spry é uma adição relativamente nova ao arsenal de comportamentos do Dreamweaver.

Passo 20: É isso, criamos uma galeria de fotos linda usando swap Comportamento de imagem em Adobe Dreamweaver CS6. O resultado final do Photo Gallery é como abaixo

leia mais »