Ir para conteúdo

Tutorial - Adobe® Dreamweaver® CS4 - HTML Básico


Andy

Recommended Posts

Adobe® Dreamweaver® CS4

dwcs4.jpg

Importante

Para que a página não fique extensa visualmente, cada capítulo estará dentro de um spoiler.

Em função das enúmeras imagens no decorrer do tutorial, todas elas estarão escondidas por trás de um botão clicável, bem como, evitar a quebra de layout.

O Adobe Dreamweaver, antigo Macromedia Dreamweaver é um software de desenvolvimento voltado para a web criada pela Macromedia (adquirida pela Adobe Systems), e que está atualmente na versão CS4. Suas versões iniciais serviam como um simples editor HTML WYSIWYG ("What You See Is What You Get", ou "O que você vê é o que você tem"), porém as suas versões posteriores incorporaram um notável suporte para várias tecnologias web, tais como XHTML, CSS, JavaScript, Ajax, PHP, ASP, ASP.NET, JSP, ColdFusion e outras linguagens Server-side.

No inicio o Dreamweaver era apenas um editor simples podendo ser usado em modo código ou modo design, WYSIWYG. Na época seu grande concorrente era o Microsoft Front Page, logo no lançamento do Dreamweaver 4.0 que apresentou nesta versão sua integração com o Ultra-dev, uma poderosa ferramenta de desenvolvimento para programadores web com suporte a PHP, ASP, ColdFusion e JSP inicialmente. Logo na versão Dreamweaver MX, o Ultra-dev passou a ser totalmente integrado ao Dreamweaver através do Painel Aplication, assim incluindo no mesmo definitivamente o conceito de ferramenta de desenvolvimento web.

Utilizando-se da base da mesma versão do Dreamweaver, MX, a Macromedia na época incorporou a estrutura do Dreamweaver a primeira versão da ferramenta Adobe Flex, assim também adotando ao Dreamweaver o conceito de ser IDE, podendo integrar outras ferramentas dentro de si próprio.

A partir desse conceito começaram a surgir várias extensões do tipo suíte, pacote completo de desenvolvimento para determinado assunto ou linguagem, de desenvolvimento para o Dreamweaver, adotando no mesmo funcionalidades avançadas para cada uma das linguagens suportadas por ele. Destacando-se nesta época a InterAKT que vinha lançando inovadoras suítes como por exemplo: Spry e Desevelopers ToolBox, hoje comprada pela Adobe Systems.

Em seu modo Design, como um editor WYSIWYG, o Dreamweaver pode esconder os detalhes do código HTML do usuário, tornando possível que não-especialistas criem facilmente páginas, sites e até mesmo aplicações para web. Alguns desenvolvedores criticam este modo de função do Dreamweaver por produzir códigos sujos, muito maiores do que o necessário, o que pode levar a erros de visualização em páginas HTML e erros de segurança em aplicações web. No entanto, este tipo de erro não se dá a ferramenta, e sim ao profissional que está usando a ferramenta, pois assim como outras IDE's de desenvolvimento, o Dreamweaver também dá a possibilidade de editar seus trabalhos em modo código, suportando as sintaxes de todas as linguagens de programação cobertas pelo software e também possuindo dicas, referências em modo código e até mesmo extensões para debugar códigos.

Uma outra boa funcionalidade do Dreamweaver é permitir selecionar a maioria dos navegadores para se ter uma previsão (preview) da visualização do HTML Output da página diretamente no(s) navegador(es) de destino. O software possui também ótimas ferramentas de gerenciamento e transferência de projetos tais como a habilidade de encontrar e substituir, no projeto inteiro, linhas de texto ou código através de parâmetros especificados. O painel de comportamentos também permite a criação de JavaScript básico, sem qualquer conhecimento de codificação.

Um aspecto altamente alardeado do Dreamweaver é sua arquitetura expansível. As “extensões”, como são conhecidas, são pequenos programas que qualquer desenvolvedor web pode escrever (geralmente em HTML e JavaScript) e qualquer um pode baixar e instalar, o que proporciona funcionalidade adicional ao software. O Dreamweaver conta com uma ampla comunidade de desenvolvedores que torna disponíveis extensões, comerciais ou grátis, para a maioria das tarefas de desenvolvimento web, de simples efeitos de rolagem, até "carrinhos de compras" completos.

FONTE WIKIPÉDIA

Índice

Criando um site

Referências

Imagem de fundo e música ambiental

Tabelas e Estilos

Mapeamento e Imagem Rollover

Links

Frames

Barra de Navegação

Templates

Iframe

Arquivo CSS – Configurações dos estilos

Arquivo CSS – Alterando estilos

Include

Camadas e Comportamentos

Mais eventos e Pop-Up

Formulários

FTP

Clique aqui para baixar o Adobe® Dreamweaver® CS4, faça o seu cadastro gratuitamente na Adobe para ter acesso aos downloads gratuitos para testes, e usufrua desse produto por 30 dias.

Link para o comentário

Criando um site

Antes de abrirmos o Dreamweaver, vamos para algumas Considerações:

Site: Consiste no conjunto de Páginas que forma o nosso produto final.

Página: São as partes do nosso Site, separadas por conteúdo ou função.

Link: Função que liga dois arquivos ou Páginas.

URL: (Uniform Resource Locator). Esse é o endereço que define o nosso Site.

http: (Hyper Text Transport Protocol). Usado para transferências de hiper textos.

Primeira Diretriz para ter um site de sucesso

  • Propósito claro.
  • Ter em mente o público-alvo.
  • Não exigir do usuário.
  • Visual atraente (elementos gráficos com justificativa).
  • Boa navegabilidade (fluxo de dados).
  • Não fazer testes exaustivos.
  • Atualizar sempre.
O que não se deve fazer ao construir uma página na internet

(Os 7 pecados capitais da internet).

  • Muito espaço vazio.
  • Elementos gráficos sem justificativa.
  • Imagens de fundo que atrapalha.
  • Páginas lentas.
  • Efeitos desnecessários.
  • Serrilhas e Halos.
  • Permanecer paralisado.
Clique para exibir

Crie uma pasta “sites” onde deverá ficar todos os seus sites criados neste tutorial.

Clique para exibir

Dentro da pasta “sites” crie uma pasta “primeiro”, onde será criado o seu primeiro site.

Clique para exibir

Abra o Dreamweaver, e se estiver abrindo pela primeira vez deixe todas as opções marcadas e dê OK.

Clique para exibir

Vamos começar criando um site, clique em Dreamweaver Site ou vai no menu: Site => New Site...

Clique para exibir

Temos o modo Basic (básico) e o Advanced (avançado). Escolha o modo Advanced, que nesse caso será mais rápido que o modo Basic, pois só iremos fazer duas configurações e dar OK.

Clique para exibir

Em “Site name” digite o nome da pasta “primeiro” (não pode ter espaço e nem acentuações) e em “Local root folder” clique na pastinha ao lado do rótulo.

Clique para exibir

Localize a pasta “primeiro”, a pasta do site a ser criado, e clique em Salvar.

Clique para exibir

Pode dar OK.

Clique para exibir

Finalmente iremos criar um novo arquivo no Dreamweaver, clique em HTML abaixo do “Create New”.

Clique para exibir

A Interface do Dreamweaver apresenta três modos de exibições na área de trabalho. O modo Code (código) para editar a página usando código HTML.

Clique para exibir

O modo Split exibe/edita no modo código e no modo gráfico.

Clique para exibir

O modo Design (desenho) para editar a página em ambiente gráfico, que é a que iremos trabalhar. Graças a essa opção, criar arquivos HTML não é mais coisa de outro mundo (uma vez que é possível criar códigos HTML no velho Notepad do Windows).

Clique para exibir

Em Title você define o título da sua página HTML, é permitido espaços e acentuações. Escreva lá “Meu Primeiro Site”.

Clique para exibir

Vamos salvar a página HTML, vá ao menu: File => Save (ou Ctrl S).

Clique para exibir

Salve como “index.html”, esse é o nome da página principal de um site com páginas HTML.

Clique para exibir

Escreva na sua página “Bem vindo ao meu primeiro portal”. E nas propriedades, clique na ferramenta Bold para deixar o texto em negrito.

Na aba do nome do arquivo está um asterisco, aparece sempre que um arquivo e alterado e ainda não foi salvo.

Clique para exibir

Ainda com o texto selecionado clique em Page Properties para abrir as propriedades da página.

Clique para exibir

Em Page Font, que está como Default Font (fonte padrão), mude para “Verdana, Geneva, sans-serif”. E dê OK.

Se em um computador não tiver a fonte “Verdana”, mudará automaticamente para “Geneva”; se não tiver também, mudará para “sans-serif”; e se não tiver essa também, exibirá a fonte padrão (Time New Roman).

Clique para exibir

Visualize no seu navegador como está ficando a sua página HTML. Vá ao menu: File => Preview in Browser = (ou simplesmente F12).

Clique para exibir

Nunca foi tão fácil fazer uma página HTML.

Referências

Ao lado do texto dê um Enter, você vai notar que o espaço de uma linha para outra é grande. Para fazer uma quebra de linha use o Shift com o Enter. Mas por enquanto sem quebra de linha.

Clique para exibir

Em Location Files, onde está o seu primeiro site, clique com o botão direito do mouse e escolha “New Folder” para criar uma nova pasta.

Clique para exibir

Nomeie como “images”. Para ficar mais organizado todas as imagens do seu site terão uma pasta para elas, evitando misturar com os arquivos HTML.

Salve na nova pasta “images” a miniatura Seu Madruga e Bruxa do 71.

Clique para exibir

Clique na imagem salva em Local Files e arraste ela para a sua página HTML. Ela vai oferecer uma pré-configuração, por enquanto clica em “Cancel”, disso a gente cuida depois. Foi feito uma referência relativa.

Clique para exibir

F12 para visualizar no seu navegador. Se você não salvou ainda vai perguntar se deseja salvar, clique em Sim.

Clique para exibir

Agora o seu site já tem uma foto. Lembre-se que se mudar a imagem de lugar ou renomear ela, precisará atualizar o novo caminho ou o novo nome da imagem no seu HTML, senão no lugar vai aparecer uma moldura com um X (referência quebrada).

Selecionando a imagem no seu HTML, você pode alterar sua escala, porém não é recomendável. Se for redimensionar uma foto, vai desperdiçar espaço no servidor em vão, não fará com que a foto carregue mais depressa, pois o tamanho original permanece o mesmo; também não se deve ampliar uma foto acima da sua escala original, pois uma foto no HTML é um bitmap (ou imagem raster) e com isso os pixels serão ampliados juntos, formando mosaicos.

Salve na pasta “images” a imagem Seu Madruga e Bruxa do 71, a outra vai servir de thumbnail (imagem reduzida) para a verdadeira imagem.

Clique para exibir

Selecione o thumbnail e ao lado do rótulo Link tem um Point to File para levar até o arquivo desejado.

Clique para exibir

Clique nele e leve até a foto ampliada. Ou se preferir clique na pastinha ao lado para localizar a foto (como foi feito quando definimos a localização do nosso site, na hora da criação).

Clique para exibir

Em Target você pode definir onde será aberta a foto.

Clique para exibir

Escolha o _blank para que a foto seja aberta em uma nova janela. Se a Target não estiver especificada (deixado em branco), o link abrirá na mesma página, que é a função do _top. Se bem que nesse exemplo o _self (que é o verdadeiro padrão) funcionaria também como _top.

Vamos aos significados das principais Target:

_blank – o link abrirá a página em uma nova janela.

_parent – o link abrirá a página na janela principal.

_self – o link abrirá a página na janela em que ele for inserido.

_top – o link abrirá a página na janela superior (em sites que trabalham com quadros).

Clique para exibir

Em Alt você pode incluir uma frase a ser exibida ao passar com o cursor do mouse sobre a imagem.

Clique para exibir

A borda que aparece no thumbnail será sempre a cor do hiperlink, salvo se não for hiperlink, onde você mesmo pode escolher uma cor para ela. E como uma foto com hiperlink bordado fica feia, vamos tirar a borda dela.

Clique para exibir

Selecione a imagem e em Border deixe em 0 (zero), pois espaço em branco conta como borda.

Clique para exibir

Vamos centralizar o nosso thumbnail, para isso vá ao menu: Format => Algn => Center (o atalho é Ctrl Alt Shift C).

Clique para exibir

Visualizando no modo código.

Clique para exibir

F12 para visualizar na web, clique no thumbnail para ver a foto ampliada.

Clique para exibir

Agora temos uma referência absoluta.

Clique para exibir

Se desejar mudar o plano de fundo, vá em Page Properties (onde você definiu o estilo de fonte) e clique em “Background color”,

Clique para exibir

Abriu uma paleta de cores, mude para uma cor qualquer e dê OK.

Clique para exibir

Conferindo a cor de fundo no código HTML.

Clique para exibir

F12 para visualizar com o novo fundo.

No próximo capítulo continuemos a falar do plano de fundo

Imagem de fundo e música ambiental

Em Page Properties também é possível mudar a cor da fonte.

Clique para exibir

Clique na paleta de cores do “Text color”.

Clique para exibir

Caso queira mais opções de cores, você pode clicar no ícone ao nordeste.

Clique para exibir

Você personaliza uma cor e clica em “Adicionar às cores personalizadas”. Dê Ok aí e OK em Page Properties.

Clique para exibir

F12 para ver o texto com a cor personalizada.

Clique para exibir

Volte em Page Properties e clique em “Browse...” para selecionarmos uma imagem de fundo em “Background image” (imagem de fundo é uma coisa ultrapassada e fica com o visual totalmente horrível, só estou ensinando para se ter conhecimento da função).

O caminho (diretório) será atribuído lá. Também é possível colocar uma imagem de url válida, mas não deve se esquecer do “htpp://” e terminar com o nome da imagem mais sua extensão (.jpg, .gif, .png...)

Clique para exibir

Em Repeat você pode escolher se a imagem só será exibida uma única vez no fundo da página (no-repeat), se será exibida lado a lado e embaixo da outra (repeat) que se não especificar por padrão será considerado “repeat”, se será exibida somente lado a lado (repeat-x) ou exibida somente embaixo da outra (repeat-y); escolha essa última e dê OK.

Clique para exibir

Parece que a cor da fonte não combinou com a imagem de fundo.

Volte na paleta “Text color”, mas vamos usar a cor da parede do thumbnail. Já aprendemos no Photoshop como capturar uma cor de uma imagem ou de qualquer outra coisa, com a ferramenta conta-gotas.

Quando abrimos a paleta de cores no Dreamweaver, ele automaticamente ativa o conta-gotas te dando a opção de escolher outra cor que você não encontra na paleta.

Clique para exibir

Clique nessa paleta de cores e clique no Thumbnail onde o cursor está indicando. Sua nova cor já foi capturada.

Clique para exibir

F12 para visualizar, melhorou bastante.

Já aprendemos a inserir uma imagem do computador, vamos aprender agora a inserir uma imagem da url.

Clique para exibir

Para isso apague o thumbnail e vá ao menu: Insert => Image (o atalho é Ctrl Alt I).

Clique para exibir

Em “Relative to:” está como “Document”, onde você pode inserir uma imagem que está no seu computador, seja na pasta do seu site ou em qualquer outra pasta. Mude para “Site Root”.

Clique para exibir

Insira a url no rótulo “URL”: http://i291.photobucket.com/albums/ll291/colunas_tpch/andy/tema/th_curch20093_1.jpg e dê OK.

Clique para exibir

Visualizando no modo Split a url da imagem.

Clique para exibir

Agora vamos aprender a colocar uma música ambiental na página (só procure não colocar uma música pesada), vá ao menu: Insert => Media => Plugin.

Clique para exibir

Basta localizar a música desejada (de preferência no formato MIDI que é leve), seja no seu computador ou em uma URL. Nesse exemplo será em URL já que não temos nenhum MIDI no nosso site. Mude novamente para “Site Root” e coloque em URL: http://www.zelda3.classicrpg.com/midi/z3lightworld.mid antes de dar OK.

Clique para exibir

Selecione o plugin e clique em “Parameters...”.

Clique para exibir

Atribua o primeiro parâmetro em Parameter digitando “hidden” (ocultar) e em Value digite “True” (verdadeiro). Com isso o plugin não será exibido na página. Clique em “+” para adicionar um novo parâmetro.

Clique para exibir

Digite autostart (iniciar automaticamente) e loop (repetir a música depois que terminar), ambos com o Value “True”. Pode dar OK.

Clique para exibir

Checando o código do plugin e seus parâmetros. Confira dando F12

Tabelas e Estilos

Vamos fazer o nosso segundo site, crie na pasta sites a pasta “juliaroberts” e crie um site com o nome dessa pasta. Crie dentro da sua nova pasta a pasta “images”.

Salve na pasta “images” o Título a Júlia 1, a Júlia 2, e a Júlia 3.

Crie um novo arquivo e salve como “index.html”.

Este capítulo é o ponto chave da organização do seu HTML, pois iremos aprender a lidar com as tabelas.

Uma tabela é um conjunto de células organizadas dentro das quais podemos alojar distintos conteúdos.

À princípio, poderia parecer que as tabelas são raramente úteis e que podem ser utilizadas simplesmente para listar dados como agendas, resultados e outros dados de uma forma organizada. Nada mais distante da realidade.

Hoje, grande parte dos desenhadores de páginas baseia seu planejamento neste tipo de engenhoca. De fato, uma tabela nos permite organizar e distribuir os espaços da melhor forma. Pode nos ajudar a gerar textos em colunas como os jornais, prefixar os tamanhos ocupados por distintas seções da página ou colocar de uma maneira simples uma legenda a uma imagem.

Pode ser que a princípio seja um pouco complicado trabalhar com estas estruturas, mas se desejamos criar uma página de qualidade, mais cedo ou mais tarde teremos que nos ver com elas e nos dar conta das possibilidades que nos oferecem.

Miguel Angel Alvarez

Veja um exemplo de tabela, que foi usada nas eleições do fórum em novembro de 2008:

Eleições do FUCH - Novembro/2008
Horas e Datas Eventos
22h00 (01/11) - 21h59 (06/11) Debate dos Moderadores Globais/Administradores
22h00 (03/11) - 21h59 (06/11) Avaliação dos Moderadores Globais/Administradores
22h00 (06/11) - 21h59 (11/11) Debate dos Moderadores Normais
22h00 (08/11) - 21h59 (11/11) Avaliação dos Moderadores Normais
22h00 (11/11) - 21h59 (13/11) Eleição para Moderador Global/Administrador na Área 51
22h00 (13/11) - 21h59 (15/11) Inscrições para as vagas existentes
22h00 (15/11) - 21h59 (20/11) Debate dos inscritos para as vagas
22h00 (17/11) - 21h59 (20/11) Votação para Moderação Normal
22h00 (20/11)_______-______ Posse dos moderadores eleitos

Com isso já se pode ter uma idéia o quando ela organiza os conteúdos, portanto, a partir deste capítulo se acostume a trabalhar com as tabelas.

Clique para exibir

Vá ao menu: Insert => Table (o atalho é Ctrl Alt T).

Clique para exibir

Escolha “3” em Rows (linhas) e “3” em Colums (colunas), depois a gente aumenta se precisar. Deixe em pixels conforme o indicado, mas não se preocupe com o tamanho da tabela, os textos e imagens vão ajudar a definir um tamanho ideal para ela. Coloque 0 (zero) em Border (a borda não vai fazer falta nesse exemplo), o mesmo em “Cell padding” (define a margem dentro da célula) e em “Cell spacing” (define o espaço de uma célula para outra). Qualquer coisa a gente aumenta depois, Pode dar OK.

Clique para exibir

Arraste as imagens para as células indicadas.

Clique para exibir

Selecione a primeira célula da segunda coluna e em “Bg” (plano de fundo da célula selecionada) atribua a cor “#333333”.

Clique para exibir

Selecione as outras células desta coluna e atribua a mesma cor de fundo da foto, basta chamar a paleta de cores de “Bg” e clicar na foto com o seu cursor conta-gotas.

Cole na primeira célula da segunda coluna o seguinte texto:

Julie Fiona Roberts nasceu em 28 de outubro de 1967, na cidade de Smyrna, na Geórgia, EUA.

Cole na segunda célula da segunda coluna o seguinte texto:

Seu pai se chamava Walter e era vendedor, e sua mãe se chamava Betty e era secretária da igreja. Seus pais se separaram quando ela tinha 4 anos e, anos depois, seu pai faleceu quando Julia tinha apenas 10 anos de idade!

Vamos aprender a criar vários estilos para os textos, nas propriedades da área de trabalho está ativo o “< > HTML”, ative o “CSS”.

Clique para exibir

Com uma das células com o texto ativa, vá em Font e escolha “Verdana”.

Clique para exibir

Abrirá uma janela do New CSS Rule, dê um nome para o estilo em Selector Name (texto_verdana por exemplo, embora os outros estilos a serem criados também serão Verdana...) e dê OK.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/html/dwcs4_tables8.jpg" title="8" >Clique para exibir

O novo estilo está ativado nos textos. E como texto preto com fundo preto não dá certo, vamos mudar o texto desse estilo para branco (#FFFFFF).

Clique para exibir

E diminua a fonte para 11. Como não tem o tamanho 11 no Drop-Down da Size, atribua manualmente.

Clique para exibir

Dupliquemos a terceira célula da segunda coluna, clique no ícone “Splits cell into rows or colums” (dividir células nas linhas ou colunas).

Clique para exibir

Marque a opção Columns e defina duas colunas antes de dar OK.

Uma nova coluna foi criada ao lado direito da foto, clique na foto e arraste para a nova coluna.

Cole na segunda célula da primeira coluna o texto a seguir:

A canhota Julia Roberts nasceu às 24:16 hs. Ela tocava clarineta na banda das escolas que freqüentou: a Griffin Middle School e a Campbell High School. Durante a adolescência, Julia queria ser veterinária, mas acabou se tornando modelo da Agência Click e depois, estudou artes dramáticas...

Clique para exibir

Crie uma nova coluna na terceira célula da primeira coluna, ajuste as células clicando nas linhas de grade e movendo com o mouse.

Clique para exibir

Crie um novo estilo para o texto colado na segunda célula da primeira coluna (verdana_preto por exemplo) com o tamanho 11 e clique em Align Right bem à direita de Font. Para que os textos não fique colados nas células, vamos aumentar a margem para 10. Selecione toda a tabela e aumente para 10 em CellPad. Não aumente o CellSpace também, senão entre as células de fundo preto vai ficar o fundo da página (no caso o branco).

Na célula onde estava a foto da Júlia na terceira linha da segunda coluna, cole o seguinte texto, com o estilo das células acima:

Julia Roberts tem 1,75 m. de altura e, em 1990 e 1991, foi escolhida pela Revista People como uma das "50 Pessoas Mais Bonitas do Mundo"!!

Cole na nova célula da terceira linha da primeira coluna o seguinte texto:

Esses lábios que ela tem fazem sucesso entre os atores de Hollywood!!

Clique para exibir

Crie um novo estilo para ele (verdana_negrito por exemplo) com o tamanho 11 e cor vermelha (#F00).

Clique para exibir

Por padrão o conteúdo em uma célula fica no meio verticalmente, ative a célula com o texto em negrito. Clique no Drop-Down “Vert”, que está em Default (padrão), e mude para Top (topo).

Cole na segunda célula da terceira coluna o seguinte texto:

No final de 1998, Julia se tornou a atriz mais bem-paga de todos os tempos em Hollywood!!!!

Clique para exibir

Centralize o texto, um novo estilo será criado, dê um nome pra ele (exemplo: texto_centralizado).

Clique para exibir

Mude para a fonte Verdana e diminua o tamanho para 10.

Faça mais alguns ajustes na tabela em relação a sua largura e a largura das células. Na última célula coloque o seu nome e o seu cargo (mesmo que fictício) com os estilos a seu gosto.

Clique para exibir

Volte ao Drop-Down “Vert” e mude para Bottom (parte inferior).

Na primeira célula da terceira coluna você pode aproveitar o estilo que você usou no texto centralizado para centralizar a foto. Feito isso, clique na foto e conheça o Align (alinhamento).

Clique para exibir

O Left (esquerdo) e Right (direito) são os únicos que podem digitar textos ao lado da figura sem a necessidade de separar por células. De qualquer modo escolha o Middle (só para forçar, já que esse é o Default).

Clique para exibir

F12 para visualizar no navegador, o que aparentou ser chato no início trouxe um resultado satisfatório.

Mapeamento e Imagem Rollover

Inserir uma imagem no Dreamweaver (tanto de seu computador como também de uma URL) nos já aprendemos, bem como, já aprendemos também a transformar uma imagem em um Link (quando clicamos no thumbnail para abrir a imagem ampliada em uma nova janela).

Neste capítulo iremos aprender a atribuir mais de um link em uma mesma imagem (mapeamento).

Crie na pasta “sites” a pasta “toplist” (e também uma pasta “images”) para criarmos o site “toplist”.

Salve na pasta “images” a logomarca Top List e crie o arquivo “index.html”.

Crie uma tabela com duas linhas e quatro colunas, com 0 (zero) de borda, deixe a margem e o espaço das células em branco.

Clique para exibir

Selecione as células da segunda linha e clique no ícone “Merges selected cells using spans” (mesclar células selecionadas usando extensões) para mesclar-las.

Arraste para a célula mesclada a figura “mapa.jpg”, salva na pasta “images”. Clique na figura, e nas propriedades terá o Hotspot com quatro ícones:

Pointer Hotspot Tool – Ativa o velho cursor.

Rectangle Hotspot Tool – Ativa o mapeamento retangular.

Circle Hotspot Tool – Ativa o mapeamento circular.

Polygon Hotspot Tool – Ativa o mapeamento poligonal.

Clique para exibir

Escolha o mapeamento poligonal.

Clique para exibir

Vai clicando com ela em volta da elipse “Cinema”.

Clique para exibir

Ative o ícone do cursor e selecione o mapeamento do “Cinema”. Feito isso atribua o link nas propriedades como “cinema.html” (essa página ainda vai ser criada).

Clique em qualquer lugar da figura e chame novamente o mapeamento poligonal, repita o procedimento com os demais, atribuindo os links: “musica.html”, “livros.html”, e “teatro.html”.

Clique para exibir

Hora de criar suas respectivas páginas HTML, no painel do site clique com o botão direito do mouse e escolha “New File”.

Clique para exibir

Nomeie como “cinema.html” e abra-o.

Para não ficar exaustivo, só iremos dar um nome de título e colocar na página um link que volta para a página inicial. Pois já aprendemos a inserir conteúdos na página e não é necessário no momento.

Clique para exibir

Coloque “Cinema” no Title e digite “Voltar” na área de trabalho. Selecione o texto e atribua no Link “index.html” para voltar à primeira página. Salve as alterações (Ctrl S).

Clique para exibir

Vá ao menu: File => Save As... (para salvar o arquivo com outro nome, o atalho é Ctrl Shift S).

Clique para exibir

Salve como “musica.html”.

Clique para exibir

Mude o Title para “Música” Ctrl S para salvar as alterações, e Ctrl Shift S para salvar como “livros.html”.

Clique para exibir

Mude o Title para “Livros”, Ctrl S para salvar as alterações e Ctrl Shift S para salvar como “teatro.html”.

Clique para exibir

Mude o Title para “Teatro”, Ctrl S para salvar as alterações e feche todos os arquivos (com a exceção da “index.html”).

Antes de testarmos o nosso HTML, vamos aprender a utilizar um script sem a necessidade de recorrer ao código HTML: a imagem rollover.

Sabe aquelas imagens interativas que mudam ao passarmos com o cursor do mouse sobre elas? Como no exemplo abaixo:

Iremos aprender essa função a partir de agora, para isso salve na pasta “images” os seguintes botões:

Cinema e Cinema_Over;

Música e Música_Over;

Livros e Livros_Over;

Teatro e Teatro_Over.

Clique para exibir

Ative a primeira célula e vá ao menu: Insert => Image Objects => Rollover Image.

Clique para exibir

Dê um nome para o primeiro botão (de preferência o mesmo nome da página a ser “linkada”), localize o botão a ser exibido na página e o botão a ser exibido ao passar com o cursor. Deixe marcada a opção “Preload rollover image” para que o botão a ser exibido no passar do cursor carregue junto com o botão de origem. Não há necessidade de colocarmos um texto alternativo no botão que servirá de link, e atribua o link “cinema.html”. Pode dar OK e faça o mesmo com os outros botões nas outras células.

http://i63.photobucket.com/albums/h142/andy_ch/dreamweaver/html/dwcs4_map15.jpg" title="" >Clique para exibir

Ative a célula com a logomarca mapeada e no Drop-Down “Horz” (horizontal) mude para Right (direito). Já pode das F12.

Clique para exibir

Experimente passar com o cursor nas elipses mapeadas e entre nas “seções”.

Clique para exibir

Volte para a página inicial.

Clique para exibir

Passe com o mouse nos botões e entre novamente nas seções.

Clique para exibir

Nunca foi tão fácil criar botões interativos.

Eu ia mostrar o código na figura, clicando no modo código, mas não caberá na figura por causa do script. Então confira na moldura abaixo o que foi feito na “index.html”:

HTML



Bem Vindo a Top List
<script type="text/javascript">

</script>





[url=cinema.html][img=http://www.forumch.com.br/topic/39-tutorial-adobe-dreamweaver-cs4-html-basico/images/cinema.gif][/url]
[url=musica.html][img=http://www.forumch.com.br/topic/39-tutorial-adobe-dreamweaver-cs4-html-basico/images/musica.gif][/url]
[url=livros.html][img=http://www.forumch.com.br/topic/39-tutorial-adobe-dreamweaver-cs4-html-basico/images/livros.gif][/url]
[url=teatro.html][img=http://www.forumch.com.br/topic/39-tutorial-adobe-dreamweaver-cs4-html-basico/images/teatro.gif][/url]


[img=http://www.forumch.com.br/topic/39-tutorial-adobe-dreamweaver-cs4-html-basico/images/mapa.jpg]
Imagine o trabalhão que daria se ainda dependêssemos do Notepad...

Links

Crie uma pasta “veiculos” (sem acento) e um site com o mesmo nome. Feito isso crie a “index.html” e o arquivo “carros.html” (não se esqueça de mudar a fonte para Verdana em ambas as páginas, página HTML com fonte “Times New Roman” fica parecendo que o site foi datilografado).

Clique para exibir

Somente crie um link para voltar para a “index.html” e feche o arquivo.

Clique para exibir

Crie uma tabela com quatro linhas e digite “Carros” na primeira célula. Selecione essa célula e atribua o link “carros.html”.

Clique para exibir

Não é necessário atribuir “_top” na Target para que a página seja aberta na mesma janela, uma vez que deixando em branco equivale ao “_self” (que nesse exemplo é a mesma coisa do _top), fiz isso só para forçar a forma de como o link será aberto. O Title do link funciona igual ao texto alternativo de uma imagem, faça o teste.

Clique para exibir

Digite na célula seguinte “Outros Veículos” e atribua o link “http://www.vrum.com.br/”(o uso do “http://” em links externos é obrigatório). Deixe a Target em “_blank” para que a página seja aberta em uma nova janela (totalmente recomendado para links externos de um site).

Dica: Se em um site um link externo estiver abrindo em “_top” e você não deseja sair desse site, pressione o Shift e clique no link para ele ser aberto em uma nova janela.

Clique para exibir

Na célula seguinte digite “A Nossa Marca” e atribua no link: “#logomarca”.

Novidade? Nós iremos criar uma âncora. E o que é isso? São aqueles links que são guiados para uma determinada área de uma página (muito usado nos textos gigantescos de uma página HTML). Aliás, se você observar o índice deste tutorial, verá que cada capítulo está ancorado para facilitar sua localização.

Clique para exibir

Voltando, clique fora da tabela e desça 25 linhas com o Enter. Digite “Em construção...” (pois não temos nenhuma logomarca...) e clique com o mouse no início dessa frase. Vá ao menu: Insert => Named Anchor (nome da âncora, o atalho é Ctrl Shift A).

Clique para exibir

Digite o mesmo nome que você atribuiu após o símbolo jogo da velha no link “A Nossa Marca” e dê OK.

Clique para exibir

Checando a âncora adicionada na frase.

Clique para exibir

E na última célula digite “Contate-nos”, o link será o endereço de e-mail. Ao invés de começar com “http://” começará com “mailto:” e o endereço de e-mail.

Antes de visualizar no navegador, vamos mudar o estilo do link. Para isso vá em Page Properties e clique no menu Link (CSS).

As cores padrão dos links são:

Link color (a cor inicial) – Azul;

Rollover links (passando o cursor sobre o link) – A mesma de Link color;

Visited links (links visitado) – Roxo;

Active links (muitas vezes passa batido porque ao clicar no link passa para outra página ou já passa para a cor do link visitado) – Vermelho púrpuro.

Clique para exibir

Antes de mudar a cor dos links, vamos primeiro tirar o sublinhando dele. Para isso clique no Drop-Down de “Underline style” (estilo de sublinhado).

Clique para exibir

Always underline (exibe o sublinhado), Never underline (esconde o sublinhado), Show underline only on rollover (exibe o sublinhado somente ao passar com o cursor no link), e Hide underline on rollover (esconde o sublinhado somente ao passar com o cursor no link). Vamos escolher a segunda opção “Never underline”.

Clique para exibir

Deixe o “Rollover links” com a cor “#F00” e os demais com a cor “#060” antes de dar OK.

Clique para exibir

F12 para testar as configurações.

Clique para exibir

Nós não configuramos o estilo do link nessa página. Mais na frente eu vou ensinar a configurar um estilo de link e eles serem aplicados em todas as páginas de um site ao mesmo tempo.

Clique para exibir

Como havia dito a função do Title no link é a mesma do texto alternativo na imagem.

Clique para exibir

Testando o link com âncora.

Clique para exibir

Levou para o local da logomarca em construção.

Clique para exibir

E por fim testando o link de e-mail, clicando nele abrirá o gerenciador de e-mails do seu computador.

Clique para exibir

Para que o gerenciador de e-mail abra com um título pronto, no link do e-mail adicione após o endereço um “?subject=título do e-mail” (pode ter espaços e acentos). Salve e F12 novamente.

Clique para exibir

O gerenciador de e-mails sendo aberto com um título pronto.

Frames

É um conjunto de quadros com mais de uma página HTML em uma única página. É um método ultrapassado, mas ainda existem sites que utilizam os quadros.

Vamos criar uma pasta “okcar” e uma pasta “images” dentro dela, em seguida criemos um site “okcar” e criemos um novo arquivo HTML, mas não salve como “index.html” ainda.

Salve na pasta “images” as imagens: Fundo, Carro 1, Carro 2, Carro 3, Carros, Carros_over, Home, Lojas, Lojas_over, Thumb Carro 1, Thumb Carro 2, Thumb Carro 3, e Topo.

Clique para exibir

Vá ao menu: Insert => HTML => Frames => Top Nested Left.

Clique para exibir

Vamos dar um título para cada frame, mude o “maisFrame” para “conteudo” (sem acento).

Clique para exibir

O “leftFrame” para “menu”.

Clique para exibir

E o “topFrame” para “topo” antes de dar OK.

Você pode ajustar a largura e a altura com o mouse se precisar.

Clique para exibir

Agora vá ao menu: File => Save Frameset (ou CTRL S). Agora já pode salvar como “index.html”.

Clique para exibir

Volte ao menu File e escolha Save All (salvar tudo) para a página do conteúdo, salve como “home.html”.

Clique para exibir

Clique no frame do menu e vá ao menu: File => Save Frame (ou Ctrl S).

Clique para exibir

Salve como “menu.html”, faça o mesmo com o topo e salve como “topo.html”.

Clique para exibir

Clique no frame do topo e crie uma tabela com uma linha, uma coluna, 100% de largura, e o resto em 0 (zero).

Nunca se esqueça de salvar as alterações no frame ativo, até recomendo sempre ir em “Save All” para salvar tudo de uma vez.

Clique para exibir

Em Page Properties deixe todas as margens em 0 (zero), no frame do topo e no frame do menu.

Leve para a célula do topo a imagem “titulo_okcar.jpg” e clique dentro da célula, volte para Page Properties e insira a imagem de fundo “bg_okcar.jpg” deixando em “repeat-x”.

Pois na resolução 800x600 vai aparecer só o topo nessa tabela, mas em 1024x768 (por exemplo) vai aparecer o fundo da célula por ter especificado a largura em 100%. Aí colocando uma imagem de fundo idêntica ao topo vai dar a impressão que o topo é largo.

Crie uma tabela no Frame do menu com três linhas e o deixe o “Cell spacing” em branco. Leve na primeira célula o “home.jpg”, na segunda célula insira uma “Rollover Image” com o botão “Carros.jpg” e “Carros_over.jpg”. O link será “carros.html”.

Faça o mesmo com os botões “Lojas.jpg” e “Lojas_over.jpg”, seu link será um script para não precisar criar uma página para ganhar tempo: “java script:alert('Página em Construção')”.

Clique para exibir

Deixe o fundo do menu com a cor do fundo do botão.

Clique para exibir

Vá ao menu: Window => Frames (o atalho é Shift F2).

Clique para exibir

O painel Frames foi aberto, clique no topFrame e nomeie em “Frame name” como “topo”. Faça o mesmo nos demais frames do painel (os mesmos nomes que modificamos ao criar os frames).

Com o botão Carros selecionado e ter atribuído o seu link, vamos atribuir a Target que fará com que a página seja aberta no frame do conteúdo.

Clique para exibir

Ao abrir a Target você verá três novas Targets, que foram definidas ao criar os frames: conteudo, menu, e topo. Escolha o “conteudo”.

Não precisa definir a Target no botão Lojas porque não irá abrir nenhuma página.

Dicas: Em sites com frames evite-se menus longos, pois barra de rolagem no menu deixa o visual com aspecto desagradável. Evite também com que um link externo seja aberto no frame do conteúdo, pois a página externa será exibida com uma barra de rolagem horizontal, o que trás certo desconforto para o internauta; deve-se usar o velho “_blank”.

Clique para exibir

A Target que leva para a primeira página do site não será a “index.html” (afinal, os frames já é a índex do site). O link será o “home.html” com a Target “conteudo”.

Crie uma página “carros.html” e monte uma tabela com as miniaturas “sm1.jpg”, “sm2.jpg”, e “sm3.jpg”. Elas servirão de link para suas respectivas fotos “big1.jpg”, “big2.jpg”, e “big3.jpg”. F12 ma “index.html” para visualizar a página com seus frames.

Clique para exibir

O fundo da imagem do topo engana direitinho.

Clique para exibir

Visitando a seção Carros e tentando visitar a seção Lojas.

Clique para exibir

A página está em construção.

Clique para exibir

Clicando no logo do menu para voltar à primeira página.

Clique para exibir

Visualizando a página na resolução 800x600, no topo a imagem de fundo não aparece, mas não se nota (assim como também não se nota em resolução maior de que há imagem de fundo).

Checando: para criar um site com três frames foram necessárias quatro páginas HTML: “home.html” (conteúdo), “menu.html”, “topo.html”, e “index.html” (responsável para visualizar as outras páginas ao mesmo tempo).

Barra de Navegação

Funciona como os botões rollover, agora com dois botões a mais: o botão do link ativo e o botão do link ativo ao passar com o mouse sobre ele.

Crie uma pasta “tabajara” (com a pasta “images” dentro dela) e crie um site com o mesmo nome.

Salve na pasta “images” as imagens: Topo, Home, TabaCANAL, TabaCANAL_down, TabaCANAL_ over, TabaCANAL_over_down, TabaCAR, TabaCAR_down, TabaCAR_ over, TabaCAR_over_down, TabaSAC, TabaSAC_down, TabaSAC_ over, TabaSAC_over_down, TabaTENDO, TabaTENDO_down, TabaTENDO_ over, e TabaTENDO_over_down.

Crie um novo HTML, deixe o fundo preto, o texto em Verdana, tamanho (Size) 24 pixels, e de preferência em negrito.

Clique para exibir

Vá ao menu Insert => HTML => Frames => Bottom.

Mude o “bottomFrame” para “menu” e o “mainFrame” para “conteudo”. Salve o frameset como “index.html” e salve o frame do conteúdo como “home.html”. Salve o frame do menu como “menu.html” e ative o frame do conteúdo, para salvar mais quatro páginas (Ctrl Shift S): “tabacanal.html”, “tabacar.html”, “tabasac.html”, e “tabatendo.html”.

Feche as quatro novas páginas e clique na aba “Frames” para mudar os “Frame name”: clique no “maisFrame” e nomeie como conteúdo, clique no “bottomFrame” e nomeie como “menu”.

Clique para exibir

Ative o frame do menu na “index.html” e vá ao menu: Insert => Image Objects => Navigation Bar.

Em “Element name” digite “tabacanal”, em “Up image” localize a “tabacanal.gif”, em “Over Image” localize a “tabacanal_over.gif”, em “Down image” localize a imagem que será exibida no link ativo “tabacanal_down.gif”, em “Over while down image” localize a imagem que será exibida ao passar com o mouse no link ativo “tabacanal_over_down.gif”, em “When clicked, Go to URL” atribua a URL “tabacanal.html”, em “in” (a nossa Target) mude para “conteudo”, deixe a “Preload images” marcada e a ‘Show “Down image” initially’ desmarcada (iniciar com o botão do link ativo).

Em “Insert” temos as opções “Horizontally” para exibir os botões na horizontal e a “Vertically” para exibir os botões na vertical. Como o nosso menu será horizontal deixe a opção indicada, mas após dar OK não poderá mais mudar.

Deixe marcada a opção “Use tables” para ser criada uma tabela automaticamente.

Clique para exibir

Feito isso clique em “Add item” (+) para adicionar os outros botões de navegação.

Clique para exibir

Tendo completado, pode dar OK.

Adicione uma nova célula ao lado do último botão e leve para lá a imagem “home_taba.jpg”. Atribua o link “home.html” com a Target “conteudo”.

Ative o frame do conteúdo e insira uma tabela com duas linhas. Leve para a primeira célula a imagem “logo_taba.jpg” e escreva qualquer coisa na linha seguinte.

Clique para exibir

Selecione a tabela da barra de navegação e deixe o Aling em Center.

Clique para exibir

F12 na “index.html”.

Clique para exibir

Passando com o cursor na seção TabaCANAL.

Clique para exibir

Botão ativo.

Clique para exibir

Passando com o cursor no botão ativo.

Clique para exibir

Testando a seção TabaCAR.

Clique para exibir

Testando a seção TabaSAC.

Clique para exibir

Testando a seção TabaTENDO.

Clique para exibir

Voltando para a página inicial.

Clique para exibir

Parece que a última seção visitada continua com o botão ativo.

Clique para exibir

Até passando com o cursor exibe o rollover ativo.

Isso aconteceu porque a imagem que leva para a página inicial não foi atribuída na barra de navegação. Para isso apague a imagem e mescle as células. Vá novamente ao menu: Insert => Image Objects => Navigation Bar.

Clique para exibir

Dê OK para fazer as alterações.

Clique para exibir

Como pode ver, não tem mais a opção da posição (horizontal ou vertical). Clique novamente em “Add item”.

Localize em “Up imagem” a “home_taba.jpg” (as outras três pode deixar em branco, pois só temos uma imagem), em “Element name” nomeie como “home”, em “When clicked, Go to URL” atribua a URL “home.html”, e o “in” como “conteudo”.

Clique para exibir

Mova o “home” para o primeiro da lista, clicando no botão que leva para cima, para que a imagem seja exibida antes dos botões na barra de navegação. Pode dar OK.

Clique para exibir

Deixe um botão ativo e clique na imagem que leva para a página inicial.

Clique para exibir

A imagem da página inicial ficou ativa (mesmo que indiretamente).

Templates

Usado como base para uma página da web. Se você achou que os Frames facilitaram a navegação por o menu estar presente em todas as páginas, o template tem essa mesma vantagem, mas sem precisar criar várias páginas para ser exibida na índex, o que deixa a home page (página inicial) muito mais leve.

Crie uma pasta “filmes” e um site com o mesmo nome, crie um novo arquivo HTML e faça as formatações do texto e link a seu gosto. Vá à Page Properties e zere as margens.

Crie uma tabela com 778 pixels de largura, com 3 de margem e 0 (zero) de espaço. Mescle as células da primeira linha e digite “BOX CINEMA” (já que não temos uma imagem para o topo, vai ser com texto mesmo. Mas isso não deve ser feito quando o site for ao ar, pois o topo com texto não fica agradável).

Crie dois links no menu: “Filmes” e “Lançamentos”, atribua os links “filmes.html” e “lanc.html”.

Clique para exibir

Clique na célula seguinte (não se esqueça de deixar as duas células em “Top” na vertical) e vá ao menu: Insert => Template Objects => Editable Region (ou Ctrl Alt V).

Clique para exibir

Nomeie como “conteudo”. Essa será a única parte da página que será editável nas páginas seguintes.

Clique para exibir

Vá ao menu: File => Save as Template...

Clique para exibir

Dê Ok e salve como “base”.

Foi criada uma pasta “Templates” no seu site, dentro dela está o arquivo “base.dwt”. NÃO COLOQUE NADA NESTA PASTA A NÃO SER O SEU TEMPLATE!

Feche o seu novo template (por enquanto).

Clique para exibir

Ctrl N para criar um novo arquivo, escolha “Page from Template” e clique no novo template criado antes de clicar em Create.

Clique para exibir

Tudo em volta está bloqueado, menos em “conteudo”. O resto você só pode modificar no arquivo DWT (Dreamweaver Template).

Obs: Se você desejar desbloquear regiões protegidas pelo DWT basta ir ao menu: Modify => Templates => Detach from Template. O vínculo com o corrente arquivo DWT será quebrado as regiões não estarão mais bloqueadas no corrente HTML.

Clique para exibir

Ctrl Shift S para criar o arquivo “filmes.html”.

Clique para exibir

Repita o procedimento e crie o arquivo “lanc.html”. Abra novamente o arquivo “base.dwt”.

Clique para exibir

Vamos adicionar mais um link no menu: “Contato”, com o e-mail que você quiser.

Clique para exibir

Ctrl S para salvar e clique em Update para atualizar todas as páginas com este template.

Clique para exibir

Clique em “Close” para fechar.

Clique para exibir

Como pode ver, o template foi atualizado em todas as páginas.

Continuemos trabalhando com esse site no próximo capítulo para aprendermos outros recursos.

Iframe

Continuando o nosso site, vamos inserir um iframe. E o que é isso? É uma tag que permite criar frames personalizados dentro da página HTML, podendo inclusive inserir uma página externa.

Clique para exibir

Crie um arquivo HTML em branco (não crie baseado no template atual) e escreva uma pequena frase. Salve como “p1.html” e Ctrl Shift S para salvar como “p2.html”.

Clique para exibir

No segundo HTML, crie um link que leve para a página “lanc.html” e deixe o Target em “_parent” (depois você vai saber porque).

Clique para exibir

Crie uma tabela com três linhas e duas colunas, mescle as linhas da segunda coluna. Crie um link para “Próximo” (na segunda célula) e “Anterior” (na terceira célula): “p2.html” e “p1.html”.

Clique para exibir

Ative a célula da segunda coluna e vá ao menu: Insert => Tag... (o atalho é Ctrl E).

Clique para exibir

Clique na pasta “HTML tags” e escolha o “iframe”. Feito isso clique em Insert.

Clique para exibir

Em Source você vai localizar o arquivo HTML a ser exibido no iframe ou atribuir uma URL de um site, nesse exemplo iremos atribuir o arquivo “p1.html”. Em Name coloque “destaque”, Com 212 de largura por 140 de altura. Deixe as margens com espaço em branco. Deixe o alinhamento em Top e pode dar OK. Clique em Close.

O Scrolling está como “auto (default)”, ou seja, se o conteúdo de um HTML for maior do que o iframe inserido, uma barra de rolagem irá ser criada. Se colocar no iframe um link externo, vai aparecer barra de rolagem tanto na horizontal como na vertical.

Clique para exibir

Nos links que atribuímos ao lado do novo iframe, vamos fazer essas páginas abrirem dentro do iframe. Para isso, digite em Target o nome do iframe (destaque).

Clique para exibir

Abra novamente o arquivo “base.dwt” e crie um link no menu para a página inicial. Salve as alterações e feche o template para dar F12 na “index.html”.

Clique para exibir

Testando o template e visualizando o iframe inserido na página inicial.

Clique para exibir

Bem mais leve que os frames, não?

Clique para exibir

O visual está horrível, não investimos na aparência para ganhar tempo. Não se preocupe porque no Fireworks iremos aprender a criar designs e testar as criatividades.

Clique para exibir

Se clicar em “Próximo” a página “p2.html” será exibida dentro do iframe.

Clique para exibir

E vice-versa. Mas parece que a borda em volta ficou feia...

Clique para exibir

Temos que modificar o nosso iframe, para isso vá ao menu: Modify => Edit Tag...

Clique para exibir

Desmarque a opção “Show borders” e dê OK.

Clique para exibir

Sem as bordas o iframe deu uma aparência de que a frase está na mesma página.

Clique para exibir

Ao clicar no link dentro do iframe, que está com a Target “_parent”, a página HTML será aberta na mesma janela. Com o “_top” funciona também.

Clique para exibir

Dito e feito.

Se a Target do iframe estivesse com espaço em branco ou em “_self”, a página seria aberta dentro do próprio iframe.

Arquivo CSS – Configurações dos estilos

Quando estudamos a tabela nós criamos vários estilos para elas (tipo de fontes, cor de fontes, alinhamentos, etc; além da personalização dos links em capítulos posteriores) sendo que o efeito era somente dentro daquele HTML. A partir deste capítulo iremos criar um arquivo CSS.

Mas o que é um CSS?

Com os estilos CCS (Cascading Styles Sheet) podemos controlar muito mais características que os estilos HTML. Mas devemos lembrar que os navegadores mais antigos não suportam essas configurações.

Esse tipo de estilo é semelhante em alguns aspectos aos estilos HTML, mas neste podemos editar muito mais características que no estilo anterior.

Os estilos CSS concentrados em um arquivo específico (CSS externo) vai poupar muito trabalho que você teria em um CSS do próprio HTML (CSS interno).

Por exemplo, eu crio um site com 10 páginas HTML, todas com estilos dentro do HTML cada. Aí em todas as páginas eu uso a fonte do conteúdo como Verdana, e resolvo mudar todas para Tahoma. Imagina o trabalhão que eu teria para mudar em cada CSS interno...

Aí que entra o CSS externo, onde você só modifica algum estilo dentro desse arquivo que alterará o estilo em todas as páginas HTML.

Crie uma pasta “modelo”, dentro dela crie a pasta “images” e crie um site “modelo”.

Crie um novo HTML (sem salvar) e zere as margens. Crie uma tabela com 778 pixels de largura, três linhas e uma coluna. Deixe a margem com espaço em branco e o espaço das células deixe em 0 (zero).

Deixe na primeira célula a palavra “MODELO”, na segunda célula os links para “Primeira Página”, “Modelo 1”, e “Modelo 2” (não atribua nenhum link ainda). A terceira célula será a nossa “Editable Region”.

Salve como “guia.dwt” (File => Save as Template...) mas não feche-o ainda.

Clique para exibir

Clique na Aba “CSS Styles” (se não tiver lá, vá ao menu Window => CSS Styles ou dê Shift F11) e vamos criar um novo CSS, clicando em “New CSS Rule”.

Clique para exibir

De cara as opções que usamos para criar os estilos na tabela da Julia Roberts. Em Selector Type deixe em “Class (can apply to any HTML element)”. Em Selector Name digite “negrito_verdana_24_center”. E agora a novidade: em Rule Definition, que estava como “This document only” (somente neste documento), você vai mudar para “New Style Sheet File” (novo arquivo com folha de estilos) e pode dar OK.

Clique para exibir

Salve como “estilos”.

Um novo arquivo CSS foi criado.

Clique para exibir

Na categoria Type (tipo) deixe a “Font-family” como “Verdana, Geneva, sans-serif”. Deixe o “Font-size” em 24 pixels. Deixe o “Font-weigth” em “bold”. O “Font-style” em “normal”. A “Color” em “#000”. Feito isso passe para a categoria “Block”.

Clique para exibir

Vá em “Text-align” (alinhar texto) e escolha “center” (centralizar). Pode dar OK.

Clique para exibir

Selecione a palavra “MODELO” e em Class escolha o estilo “negrito_verdana_24_center”.

Agora iremos definir um estilo para os links através do nosso arquivo CSS. Vá novamente em “New CSS Rule”.

Clique para exibir

Em “Selector Type” escolha “Tag (redefines na HTML element)” (certifique-se de que “Rule Definition” está com o nome do seu arquivo CSS, no caso o “estilos.css”).

Clique para exibir

No “Selector Name” escolha “a” (tag do hiperlink) e dê OK.

Clique para exibir

Na categoria Type escolha a “Font-family” como “Verdana, Geneva, sans-serife”. Deixe o “Font-size” em 10 pixels. Deixe o “Font-weigth” em “bold”. O “Font-style” em “normal”. A “Color” em “#F00”. Em “Text-decoration” marque a opção “none” (nenhum) para tirar o sublinhado dos links e pode dar OK.

Clique para exibir

Selecione “Primeira Página” e atribua o link “index.html”. O estilo do link foi aplicado automaticamente. Atribua os links seguinte: “mod1.html” e “mod2.html”.

Vamos definir um estilo padrão para os títulos na região editável do nosso template, para isso clique dentro da nossa Editable Region (no caso o “conteudo”) e vá outra vez a “New CSS Rule”.

Clique para exibir

Em Selector Type deixe em “Class (can apply to any HTML element)” e em Selector Name digite “verdana_20_italic” antes de dar OK.

Clique para exibir

Na categoria Type escolha a “Font-family” como “Verdana, Geneva, sans-serif”. Deixe o “Font-size” em 20 pixels. Deixe o “Font-weigth” em “normal” (só para forçar mesmo o estilo padrão...). O “Font-style” deixe em “italic” e pode dar OK.

Clique para exibir

Mude o Class para “verdana_20_italic”.

Vamos colocar uma imagem de fundo na célula do menu? Salve na pasta “images” o Fundo e vá outra vez a “New CSS Rule”.

Clique para exibir

Em Selector Type deixe em “Class (can apply to any HTML element)” e em Selector Name digite “bg_menu” antes de dar OK.

Clique para exibir

Vá para a categoria Background (plano de fundo) e em “Background-image” localize a imagem “fundo.jpg” (ou insira a URL completa do link que eu passei aqui da imagem de fundo). Em “Background-repeat” escolha o “no-repeat” e pode dar OK.

Curiosidades: Em “Background-attachment” você pode escolhe entre “fixed” (fixo: a imagem de fundo será fixa na tela, não acompanhará a barra de rolagem) e “scroll” (rolagem: acompanhará a barra de rolagem, não ficará fixa na tela) que é a padrão. Claro que essa opção é se a imagem de fundo ficar na página inteira, no nosso exemplo ela ira ficar somente dentro de uma célula (lembre-se que não existe visual mais horrível do que uma página HTML com imagem de fundo, uma imagem se repetindo e fixa fica pior ainda...).

Abaixo temos a posição na horizontal e posição na vertical, de onde será o ponto de partida da imagem de fundo (as mesmas opções que a gente encontra nas células de uma tabela). Enfim, deixe como está (já demos OK mesmo...).

Clique para exibir

Selecione a célula do menu e escolha o estilo (Class) “bg_menu”.

Estando com o cursor ativo em um dos links do menu, volte a “New CSS Rule” para configurarmos os estilos do hiperlink ao passarmos com o mouse, ativado, e quando o link já foi visitado (eu detesto ver um link com estilo de que já foi visitado).

Clique para exibir

Em Selector Type deixe em “Compound (based on your selection)” e em Selector Name escolha “a:hover” antes de dar OK.

Clique para exibir

Somente escolha a cor “#063” e pode dar OK.

Vá lá duas ou três vezes para deixar o resto com a cor “#F00”.

Salve as alterações do Template (escolha “Save All” para salvar também as alterações do nosso arquivo “estilos.css” que é aberto no Dreamweaver sempre que o alterarmos) e feche os arquivos.

Clique para exibir

Ctrl N para criar um novo arquivo HTML baseado no nosso mais novo template.

Clique para exibir

Por já ter criado um arquivo CSS e atribuído no template, ele é importado para os novos HTMLs automaticamente (se forem criados baseados nesse template, claro, um novo arquivo HTML sem template terá que exportar o arquivo CSS desejado, assunto do próximo capítulo).

Arquivo CSS – Alterando estilos

Crie dois arquivos baseado no nosso template: “mod1.html” e “mod2.html” (mais fácil usar o Ctrl Shift S...).

Clique para exibir

Depois de ter editado os dois novos HTMLs, feche-os e volte para o arquivo “index.html”. F12 para visualizar no navegador.

Clique para exibir

Todos os estilos concentrados no CSS externo.

Clique para exibir

Quando você abre uma página conhecida (o Orkut por exemplo) e ele está demorando a carregar a ponto de aparecer todo desbotado, é porque o CSS não foi carregado.

Clique para exibir

Eu copiei e colei o “index.html” para dentro da pasta “images”, com isso o vínculo com o CSS externo foi quebrado, como pode ser visto neste exemplo.

Clique para exibir

Veja, os estilos não estão mais em “Class”.

Clique para exibir

Aproveito para ensinar como vincular um CSS externo, no painel do CSS clique no ícone “Attach Style Sheet”.

Clique para exibir

Localize o arquivo CSS na sua pasta (ou insira uma URL válida).

Clique para exibir

Dê OK.

Clique para exibir

Os estilos criados foram vinculados. Isso foi só um teste, já pode apagar a falsa “index.html” (afinal, ali só entra imagens).

Clique para exibir

Eu quero mudar a fonte aplicada na região editável, clique nela e no painel do CSS clique na aba “Current” (corrente). Mude a “font-family”.

Clique para exibir

Escolha a “Tahoma, Geneva, sans-serif”.

Clique para exibir

O estilo mudou nessa página e nas outras páginas HTML criadas neste capítulo. Agora eu quero adicionar um sublinhado no título principal, sendo que não dá para ativar por aqui por causa do bloqueio. Não precisa abrir o DWT, basta clicar na aba “All” (todos).

Clique para exibir

Localize o estilo “.negrito_verdana_24_center” e clique no ícone “Edit Rule...”.

Clique para exibir

Em “Text-decoration”, da categoria Type, marque a opção “underline” e dê OK.

Clique para exibir

Se não quiser ir no assistente do CSS Styles, basta clicar em “Add Property” e adicionar o seu estilo (eu prefiro com assistente...).

Clique para exibir

Visualize no modo código e clique no “estilos.css” acima dos botões de exibição para checar os estilos aplicados.

 

HTML@charset "utf-8";
.negrito_verdana_24_center {
font-family: Verdana, Geneva, sans-serif;
font-size: 24px;
font-style: normal;
font-weight: bold;
color: #000;
text-align: center;
text-decoration: underline;
}
a {
font-family: Tahoma, Geneva, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
color: #F00;
text-decoration: none;
}
.verdana_20_italic {
font-family: Tahoma, Geneva, sans-serif;
font-size: 20px;
font-style: italic;
font-weight: normal;
color: #006;
}
.bg_menu {
background-image: url(images/fundo.jpg);
background-repeat: no-repeat;
}
a:link {
color: #F00;
}
a:visited {
color: #F00;
}
a:active {
color: #F00;
}
a:hover {
color: #063;
}
Clique para exibir

Não iremos fazer isso mas se desejar remover um estilo, selecione o estilo desejado e clique no ícone “Delete CSS Rule”.

Clique para exibir

F12 para visualizar os estilos com suas alterações.

Clique para exibir

O título do site com um sublinhado.

Clique para exibir

E o texto da página com a fonte Tahoma.

Seria bom daqui pra frente se acostumar a trabalhar com o arquivo CSS Styles nos seus sites.

Include

Ao contrário do DWT, onde o template está presente em todas as páginas, no “include” são as páginas que estão presentes a ele.

Não vai ser possível testar o “include” no seu computador porque requer um arquivo em PHP, mas você pode praticar quando tiver uma conta em um servidor que aceita arquivos PHP.

Crie uma pasta “praia”, dentro dela a tradicional pasta “images” e uma nova pasta “pages”. Crie um site “praia” mas não crie um novo HTML ainda.

Antes de prosseguir, salve na pasta “images”: Topo, Praia de Boa Viagem e Praia de Tambaba.

Clique para exibir

Em Create New escolha “PHP”.

Monte uma tabela com duas linhas e duas colunas, sem borda. Mescle as células da primeira linha e leve para lá o “topo_praia.jpg”. Faça o menu lateral com a seguintes seções “Página Inicial”, “Praia de Boa Viagem”, e “Praia de Tambaba”.

Crie um arquivo CSS com estilos a seu gosto, inclusive os estilos dos links das seções (eu criei o arquivo “praias.css”).

Clique para exibir

Fique ativo na célula da direita (onde vai ficar as páginas a serem incluídas nesse comando) e vá ao menu: Insert => PHP Objects => Include.

Clique para exibir

A área de trabalho passará para o modo código, volte para o modo de Design e você vai ver um ícone do PHP dentro da célula que você inseriu o “include”.

Clique para exibir

Selecione esse ícone e atribua nas propriedades o código que irei passar:

 

HTML$mostrar = $_GET["mostrar"];

if ($mostrar AND !isset($tipo)) {
include "pages/".$mostrar.".html";
}elseif($mostrar AND isset($tipo)){
include "pages/".$tipo."/".$mostrar.".htm";
}else {
include "pages/home.html";
}
Onde o “mostrar” será a ação do nosso “include” e a “pages” será a pasta onde vão estar os nossos HTMLs (isso mesmo só a índex será em PHP, todo o resto será em HTML). Na última linha do código, a página padrão a ser exibida na “index.php” será a “home.html”.

Clique para exibir

Na seção “Página Inicial” atribua o link “index.php” (não me diga...).

A novidade é que nas outras seções será “index.php” também (ta maluco?). Será esse link com um acréscimo “?mostrar=[nome do HTML]”.

Clique para exibir

Nisso o link para a praia de Boa Viagem será “index.php?mostrar=bv” (sem a extensão “.html”).

Clique para exibir

E o link para a praia de Tambaba será “index.php?mostrar=tambaba”.

Pode perceber que a “index.php” estará presente em todas as páginas.

Clique para exibir

Vamos criar um HTML em branco e salvemos como “home.html”. Parece que vai precisar vincular o nosso arquivo CSS, em “Class” clique em “Attach Style Sheet...” e localize o seu arquivo CSS.

Clique para exibir

Ctrl Shift S para salvar como “bv.html” e insira a imagem “praia_bv.jpg”.

Clique para exibir

Salve como “tambaba.html” e insira a imagem “praia_tambaba.jpg”.

Clique para exibir

Feche os HTMLs e mova-os para dentro da pasta “pages”. Vai perguntar se deseja atualizar os links, clique em “Don’t Update” (não atualizar).

Clique para exibir

Obiviamente os vínculos foram quebrados, mas quando for exibir na “index.php” em um servidor tudo será vinculado novamente.

Clique para exibir

Eu coloquei a pasta “praia” em um servidor, estou acessando a pasta “pages” que já exibe automaticamente a “home.html” por ela ser uma “default” (como uma “index.html”). Confira.

Clique para exibir

Acessando o arquivo “bv.html” (que pela pasta “pages” os vínculos continuarão quebrados) Confira.

Clique para exibir

Acessando o arquivo “tambaba.html”, confira.

Clique para exibir

Acessando a pasta “images”, ela está exibindo todos os arquivos que contém na pasta porque nela não tem nenhum arquivo “index” ou “home”. Confira. Se uma pasta sua estiver sem o HTML default, com isso exibindo todos os seus arquivos dessa pasta, você pode bloquear o acesso da pasta pelo servidor. Clique em “Parent Directory” para ir para a pasta “praia” (que já tem uma “index.php”).

Clique para exibir

Tudo vinculado novamente, pois o “include” puxa o HTML para fora da pasta “pages” temporariamente (exibindo por padrão o arquivo “home.html”). Confira.

Clique para exibir

Visitando a praia de Boa Viagem, confira.

Clique para exibir

Visitando a praia naturista de Tambaba (de longe, claro...), confira.

O “include” do PHP é tão bom quanto o Template do Dreamweaver.

Camadas e Comportamentos

Com certeza você já viu uma Layer (camada) flutuante com a opção de maximizar, minimizar e/ou fechar.

Pois bem, quando você clica nela para maximizar, na verdade ela está exibindo uma Layer flutuante oculta.

Vamos fazer uma então?

Crie uma pasta “eventos” (dentro a pasta “images”) e crie um site “eventos”, crie um novo HTML e salve como “index.html”.

Salve para dentro da pasta “images” os ícones Diminuir, Ampliar, Ampliar Travado, e Fechar.

Clique para exibir

Com a aba Insert ativa, clique em Common (ou no Drop-Down desse painel, caso já tenha mexido nele antes...).

Clique para exibir

Mude para Layout.

Clique para exibir

Clique na ferramenta Draw AP Div.

Clique para exibir

Com ele você pode desenhar uma janela flutuante, faça como indica à figura.

Dentro da janela flutuante monte uma tabela com duas linhas e três colunas, dê “2” de borda, deixe a margem com espaço em branco e o espaço da célula em 0 (zero). Mescle as células da segunda linha.

Acima da janelinha flutuante tem um ícone, clicando nele você pode mover-la para qualquer lugar e te dá acesso as propriedades, vamos aos dois Drop-Downs:

Vis

default: é o parâmetro padrão, no qual a camada fica visível.

inherit: a visibilidade da camada depende da camada superior.

visible: a camada está visível.

hidden: a camada fica oculta.

Overflow

Visible (padrão): mostrar o conteúdo excedente.

hidden: ocultar o conteúdo excedente.

scroll: adiciona uma barra de rolagem na janela flutuante.

auto: só adiciona a barra de rolagem quando necessária.

Clique para exibir

Ao lado da aba CSS Styles está a aba AP Elements (se não estiver la vá ao menu: Window => AP Elements, ou dê F2), ative-a.

Aí está a sua camada, se o “olho” estiver aberto a camada estará visível, se estiver fechado ela estará oculta.

Renomeie ela para “minimizada” e leve para as duas últimas células da primeira linha os ícones “down.gif” e “closed.gif”. Mude o fundo para um amarelo meio alaranjado, deixe a sua fonte em Verdana, de cor branca em negrito.

Chame novamente a ferramenta Draw AP Div e faça uma janela flutuante na mesma região da janela da camada “minimizada”. Renomeie essa para “maximizada”, e oculte-a para não te atrapalhar.

Clique para exibir

Ative a camada “minimizada e escreva na célula mesclada “10 GIGAS de espaço?”. Selecione a tabela e Ctrl C para copiar-la.

Oculte essa camada e desoculte a “maximizada”, cole a tabela lá e substitua os ícones “down.gif” e “closed.gif” pelos ícones “down_blocked.gif” e “closed.gif”.

Clique para exibir

Aumente a altura da célula mesclada e complete com a frase “Assine agora +hostbra.com”.

Agora iremos fazer esses ícones funcionarem com o clicar do mouse, para isso volte a ocultar a camada “maximizada” e desoculte a “minimizada”.

Clique para exibir

Vá ao menu: Window => Behaviors (o atalho é Shift F4).

Clique para exibir

Clique no ícone “down.gif” e vá em “+” => Show-Hide Elements (exibir-ocultar elementos).

Clique para exibir

Selecione o elemento ‘div “maximizada”’ e clique em Show antes de dar OK.

Quando for clicado no ícone “down.gif” irá exibir a camada oculta “maximizada”, no entanto a camada “minimizada” continuará sendo exibida e vamos precisar ocultar-la no evento para aparentar que ela foi esticada para baixo. Para isso mantenha o ícone “down.gif” selecionado e volte em Show-Hide Elements.

Clique para exibir

Desta vez selecione o elemento ‘div “minimizada”’ e clique em Hide antes de dar OK.

Selecione o ícone “closed.gif” e vá novamente à Show-Hide Elements. Selecione o elemento ‘div “minimizada”’ e clique em Hide antes de dar OK.

Com isso a janelinha flutuante será fechada na web.

Oculte novamente a camada “minimizada” e desoculte a “maximizada”. Selecione o ícone “up.gif” e volte em Show-Hide Elements.

Clique para exibir

Selecione o elemento ‘div “minimizada”’ e clique em Show antes de dar OK.

Com isso a janelinha aparentará estar diminuindo para cima, mas precisa fazer com que a janela ampliada seja oculta. Com o “up.gif” ainda selecionado retorne à Show-Hide Elements.

Clique para exibir

Selecione o elemento ‘div “maximizada”’ e clique em Hide antes de dar OK.

Deixe a camada “maximizada” oculta (é a última vez, prometo) e a “minimizada” desoculta.

Clique para exibir

Como pode ver no painel, foram atribuídos dois eventos ao ícone “down.gif”.

Clique para exibir

E um evento no ícone “closed.gif”. Fora os dois eventos atribuídos no ícone “up.gif”, F12 para visualizar no navegador.

Clique para exibir

Clique no ícone que ampliará a propaganda.

Clique para exibir

O ícone de ampliação ficou travado porque não dá para ampliar mais do que isso, o ícone que fechará a janelinha virou ícone de redução. Clique nele.

Clique para exibir

Feche a janelinha.

Clique para exibir

Assim seja.

Abaixo os códigos utilizados nessa página HTML:

HTML



Eventos

<!--
body,td,th {
color: #FFF;
font-family: Verdana, Geneva, sans-serif;
font-weight: bold;
}
#minimizada {
position:absolute;
left:8px;
top:10px;
width:138px;
height:111px;
z-index:0;
visibility: visible;
}
#maximizada {
position:absolute;
left:6px;
top:10px;
width:139px;
height:111px;
z-index:0;
visibility: hidden;
}
-->


<!--
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
down.gif

closed.gif

 

10 GIGAS

de espaço?

down_blocked.gif

up.gif

10 GIGAS

de espaço?

Assine agora

+hostbra.com

No próximo capítulo aprenderemos mais eventos com o mouse nas janelas flutuantes.

Mais eventos e Pop-Up

Ainda no site “eventos” crie um novo HTML e salve como “planos.html”.

Salve para a pasta “images” a Parte de Cima e a Parte de Baixo de uma propaganda.

Crie duas camadas com a ferramenta Draw AP Div e insira uma tabela com uma única célula em cada janela flutuante com tudo em 0 (zero), exceto a largura. Aproxime as duas janelinhas de modo que faça parecer uma imagem só quando visualizada na web.

Clique para exibir

Estando as janelinhas como indicadas na figura, oculte a camada com a parte de baixo da imagem.

Clique para exibir

Selecione a parte de cima e vá ao Behaviors em Show-Hide Elements. Clique no elemento referente a camada da parte de baixo da imagem e clique em Show antes de dar OK.

Está como “onClick”, ou seja, só quando for clicado. O que eu quero é que a parte de baixo seja exibida ao passar com o mouse na parte de cima.

Clique para exibir

Para isso clique em “onClick”.

Clique para exibir

E mude para “onMouseOver”.

Clique para exibir

Vá novamente à “Show-Hide Elements” e clique no mesmo elemento (a camada da parte de baixo) clicando agora em Hide antes de dar OK.

Clique para exibir

Mude de “onClick” para “onMouseOut” para a parte de baixo sumir quando tirar o mouse da figura de cima.

Mas eu queria que a parte de baixo continuasse sendo exibida ao quando passasse também com o cursor nela (já que foi programada para sumir ao sair da parte de cima).

Desoculte a parte de baixo da camada e selecione a parte de baixo da imagem.

Clique para exibir

Novamente em “Show-Hide Elements” para fazer a parte de baixo sumir ao sair dela também, clicando no elemento referente a parte de baixo da camada e clicando em Hide antes de dar OK.

Clique para exibir

Mude de “onClick” para “onMouseOut”.

Mesmo assim, a parte de baixo foi programada somente para ser exibida ao passar com o mouse na parte de cima. Então vamos programar para ela ser exibida ao passar na parte de baixo também (claro que só terá efeito se passar na parte de cima primeiro e de lá passar para a parte de baixo para continuar exibindo).

Clique para exibir

Novamente em “Show-Hide Elements” para fazer a parte de baixo continuar sendo exibida ao sair da parte de cima, clicando no elemento referente a parte de baixo e clicando em Show antes de dar OK.

Clique para exibir

Mude de “onClick” para “onMouseOver” e já pode dar F12 (antes ocultar a parte de baixo da camada primeiro).

Clique para exibir

Exibindo somente a parte de cima, mesmo passando na parte de baixo primeiro (oculta).

Clique para exibir

Passando na parte de cima da propaganda, se sair dela, a parte de baixo sumirá.

Clique para exibir

Exceto se passar para a parte de baixo em seguida. Com isso você pode mapear uma área para atribuir um link a essa propaganda.

Clique para exibir

Saiu da parte de baixo ela sumiu.

O código utilizado nessa página foi esse:

HTML



Planos

<!--
#plano3_1 {
position:absolute;
left:9px;
top:26px;
width:151px;
height:31px;
z-index:0;
visibility: visible;
}
#plano3_2 {
position:absolute;
left:9px;
top:55px;
width:150px;
height:51px;
z-index:0;
visibility: hidden;
}
-->


<!--
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
hostbra_plano3_1.jpg

hostbra_plano3_2.jpg

Salve esse arquivo e crie um novo HTML, salve-o como “flames.html”.

Salve em “images” o Thumbnail e a Imagem.

Agora nós iremos aprender a fazer um Pop-Up, que são aquelas janelinhas (muitas vezes indesejadas) com propagandas ou para visualizar uma foto ampliada.

Iremos testar primeiro com a ampliação de uma foto.

Clique para exibir

Leve para a área de trabalho a “th_flames.jpg” e selecione-a. Volte ao + do menu Behaviors e escolha Open Browser Window.

Clique para exibir

Localize a imagem “flames.jpg” e especifique uma escala para a imagem ser exibida (eu escolhi 400x300), se deixar em branco prevalecerá o tamanho original e se definir uma escala o ícone de maximizar do título da janela no Pop-Up ficará bloqueado. Dê um nome para o seu Pop-Up e pode dar OK.

Clique para exibir

F12 para visualizar e clique no thumbnail.

Clique para exibir

Um Pop-Up da imagem.

Clique em qualquer lugar da área de trabalho (que não seja no thumbnail) e volte ao Open Browser Window.

Digite a URL http://www.hostbra.com/ com 400 de largura por 300 de altura, dê um nome para o seu Pop-Up antes de dar OK.

Clique para exibir

Por padrão está como “onLoad” (será exibido automaticamente), no do Thumbnail por padrão fica como “onClick” porque o sistema entende que a princípio você deseja um evento ao clicar com o mouse, ao contrário de inserir um evento sem clicar em nenhum objeto (que foi o caso do Pop-Up do HostBRA, que você irá conferir dando F12).

Clique para exibir

O site do HostBRA, o servidor oficial deste tutorial, sendo aberto em Pop-Up.

O código utilizado nessa página foi esse:

HTML



Chamas

<!--
#plano3_1 {
position:absolute;
left:9px;
top:26px;
width:151px;
height:31px;
z-index:0;
visibility: visible;
}
#plano3_2 {
position:absolute;
left:9px;
top:55px;
width:150px;
height:51px;
z-index:0;
visibility: hidden;
}
-->


<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
th_flames.jpg

Formulários

Para que o visitante de um site possa interagir com o mesmo se faz necessária a utilização dos formulários, através deles é que os visitante pode enviar, receber, atualizar e apagar informações armazenadas no banco de dados do site.

Neste tutorial nós só iremos ter conhecimento dessas ferramentas, já que estamos trabalhando em cima do HTML, que não faz nenhum vínculo com banco de dados.

Clique para exibir

Escolha no painel Insert a opção Forms (formulários), que é semelhante a figura acima, nessa barra estão os Form Objects, que são destinados a captar informações do visitante. Vamos às principais dela:

Clique para exibir

Form (formulário) – Insere a tag , essa tag indica que tudo que estiver dentro dela será enviado com formulário, ou seja, se for necessário o envio de algum dado pelo visitante tem que ser enviado utilizando os campos que serão citados posteriormente, é dentro dessa tag que é caracterizada por uma linha vermelha tracejada, sem essa tag nenhum formulário funcionará corretamente.

Text Field (campo de texto) – Insere a tag caracterizando um campo de texto onde o visitante poderá digitar algo, como seu nome, seu CPF, sua senha entre outros.

Hidden Field (campo oculto) – Esse tipo de campo serve para enviar informações não digitadas pelo visitante e essas informações são enviadas sem que o visitante saiba, como por exemplo a data e a hora que o visitante efetuou uma compra no site.

Textarea (Área de texto) – Semelhante ao Text Field, porém pode conter mais de uma linha.

Checkbox – Esse tipo de form object é bastante utilizado quando o visitante do site pode escolher entre várias opções.

Checkbox Group – A mesma coisa, só que podendo definir antes e já atribuir o value (valor) de cada opção.

Clique para exibir

Radio Button – Mais utilizado quando o visitante só pode escolher uma das opções apresentadas, tornando o formulário de única escolha.

Clique para exibir

Para que a opção esteja em única escolha a ID deverá estar com o mesmo nome entre as opções a ser marcada (nesse exemplo a ID é “Sexo”)

Clique para exibir

Para ficar mais organizado, bom deixar em tabela (fiz com duas colunas dar um nome na primeira célula).

Clique para exibir

Radio Group – Abre uma tela como a mostrada acima, para que sejam colocadas as opções de uma pergunta que será de única escolha. Assim como o “Checkbox Group” no “Radio Group” você também já pode definir antes o value de cada uma das opções (nesse exemplo atribui com a primeira letra de cada opção).

Clique para exibir

Selecionei uma das opções para checar o “value”.

Clique para exibir

F12 para visualizar no seu navegador e testar as opções (não vai dar para confirmar as opções porque ainda não temos banco de dados).

List/Menu – Insere um Lista de opções onde o visitante por padrão só poderá selecionar uma das opções, mas caso seja necessário, pode escolher mais de uma opção, muito utilizado para o visitante escolher o estado onde mora, a cidade, etc.

Feche o arquivo “index.html” e crie um novo HTML de nome “guia1.html”.

Clique para exibir

Jump Menu – Esse tipo de menu deverá ser utilizado quando desejar que o visitante ao escolher uma das opções, seja automaticamente levado para a página escolhida.

Clique para exibir

Faça isso e crie o menu “Guia 1”, “Guia 2”, e “Guia 3”; selecione cada um e atribua seus respectivos links (seja na sua pasta ou em uma URL): “guia1.html”, “guia2.html”, e “guia3.html”. Se marcar a opção “Insert go Button after menu” vai aparecer um botão ao lado do nosso menu, com isso o link escolhido só terá efeito após clicar nesse botão. Se deixar essa opção desmarcada, o botão não será inserido e o link a ser escolhido no menu fará efeito de imediato. Marque essa opção e pode dar OK.

Clique para exibir

Clique no botão “Go” e em “Value” mude para “Ir”.

Clique para exibir

Salve como “guia2.html” e selecione o menu para que o link a ser exibido nessa página passe a ser o “Guia 2” em “Initially selected” (iniciar o selecionado). Salve como “guia3.html” e faça o mesmo em “Guia 3”. Deixe só o “guia1.html” aberto e pode dar F12.

Clique para exibir

Mude para o “Guia 2” e clique em “Ir”.

Clique para exibir

No “guia2.html” exibe por padrão o link do “Guia 2”, por termos alterado o “Initially selected”.

Clique para exibir

Vá para o “guia3.html”.

Clique para exibir

De volta ao “guia1.html”.

Isso foi só para ter uma noção de como lidar com os formulários, no segundo tutorial do Dreamweaver iremos usar-lo mais um pouco e aprenderemos a configurar um banco de dados sem precisar aprender códigos de programação.

FTP

Clique no Drop-Down dos seus sites.

Clique para exibir

Com a exceção do Portal Chaves e Sambario, aqui estão todos os sites que nós criamos no decorrer deste tutorial. Sempre que desejar editar uma configuração de um site, vá em “Manage Sites...” ou pelo menu: Site => Manage Sites...

Clique para exibir

Selecione o site desejado e clique em “Edit...”, se desejar remover um site clique em Remove. Enfim, deixa como está e clique em Done.

FTP - File Transfer Protocol (Protocolo de Transferência de Arquivos), é um modo prático de hospedar os seus arquivos no servidor (fazer upload).

Irei usar o FTP do HostBRA, que é o servidor onde está hospedado este fórum, para ensinar algumas coisas no FTP.

Antes de prosseguir, quero falar sobre o domínio e servidor:

Domínio – É o nome de uma área reservada num servidor Internet que corresponde ao endereço numérico de um website (endereço IP). No Brasil, os domínios sempre terminam com .br (sigla do Brasil na Internet) e podem apresentar vários tipos (.com para empresas comerciais, .org para empresas não comerciais, etc.). Ex: aisa.com.br é um domínio brasileiro do tipo comercial (o mais comumente usado). A.I.S.A.

Servidor – É o computador que administra e fornece programas e informações para os computadores conectados em sua rede, bem como, é onde o seu site é hospedado.

Nisso eu tenho um site de domínio www.classicrpg.com hospedado no servidor www.hostbra.com.

Para ter um domínio .com ou .com.br (por exemplo) você deve comprar com um servidor de hospedagem (mesmo que você não tenha um plano de hospedagem de site no corrente servidor). O domínio é válido por um ano, terminado um ano você precisará pagar para renovar o seu domínio. Um domínio .com é mais barato que um .com.br (isso não é novidade pra ninguém).

Já a hospedagem é mensal, todo mês você terá que pagar pela hospedagem para continuar tendo acesso ao servidor onde o seu site está hospedado (e os internautas terem acesso ao seu site...).

Se quiser conhece os planos do servidor oficial deste tutorial, acesse www.hostbra.com e conheça os planos, os preços promocionais e as vantagens que o HostBRA oferece para você.

Criei na pasta “sites” a pasta “classicrpg” e irei criar esse site no Dreamweaver.

Clique para exibir

Depois de seguir o procedimento conhecido, não irei dar OK ainda. Invés disso irei clicar na categoria Remote Info (informação remota).

Clique para exibir

Em Access está em None, clicarei nele.

Clique para exibir

Mudarei para FTP (isso mesmo, o Dreamweaver tem suporte para FTP, sem precisar instalar outro programa).

Clique para exibir

Em “FTP host” deve-se colocar o domínio do site, mas ao invés de “www” será colocado “ftp”, ficando ftp.classicrpg.com. O Login é o nome de seu usuário nessa conta (geralmente criam com o mesmo nome do site), nesse exemplo o login seria “classicrpg” e a senha dessa conta. Cliquei em Test para ver se não digitei nada incorreto.

Clique para exibir

O teste foi executado com êxito, vou dar OK aqui e OK na definição do site.

Clique para exibir

No primeiro ícone do painel do site “Connects to remote host” na aba Files, cliquei nele para se conectar.

Clique para exibir

No Drop-Down ao lado está em “Local view” (exibir local), mudei para “Remote view” (exibir remoto).

Clique para exibir

Dentre as pastas remotas, a pasta public_html é a pasta onde vai estar todos os seus arquivos do seu site (no exemplo os arquivos já estão lá).

Os arquivos e pastas seguem a mesma planta, isto é, para mandar um arquivo para a pasta public_html no servidor, no seu computador deverá estar também dentro da pasta public_html. Se baixar (download) uma imagem da pasta “images” (suponha que tenha ela no servidor) ela irá para a pasta “images” do site do seu computador (se não tiver essa pasta no seu site local, a pasta será criada automaticamente. A mesma coisa se subir um arquivo de uma pasta local que não tenha no site remoto, a pasta será criada lá automaticamente). Irei fazer um teste.

Clique para exibir

Eu vou baixar um arquivo qualquer de public_html, sendo que não tenho essa pasta no site local. Para isso irei selecionar um arquivo e clicar em “Get File(s)” (se eu selecionasse a pasta public_html ela seria baixada com todos os seus arquivos).

Clique para exibir

Vai perguntar se deseja baixar também os arquivos dependentes (se esse HTML tiver um arquivo CSS ou imagens na página, clicando em “Yes” esses irão junto também (se esses estiverem em uma outra pasta, será criada a referida pasta no seu site local automaticamente), como não tem nada dependente clique em “No” para baixar só o arquivo selecionado.

Clique para exibir

Como pode ver foi criado no site local a pasta public_html. Você também pode editar um HTML e subir com ele aberto clicando no ícone “File management” ao lado do rótulo do título. Se foi feito alguma alteração no seu arquivo e ainda não salvou, irá perguntar se deseja salvar antes.

Clique para exibir

Você também pode expandir o painel dos arquivos de seu site, clicando em “Expand to show local and remotes sites”.

Clique para exibir

À esquerda os arquivos remotos e à direita os arquivos locais (era para o local ter mais arquivos, mas como o site já existia no servidor remoto...), para voltar ao normal clique em “Collapse to show only local or remote site”.

Clique para exibir

O “Put File(s)” permite mandar para o servidor arquivos em massa.

Clique para exibir

Para desconectar o FTP, clique no mesmo botão que você conectou, agora como “Disconnects from remote host”.

Este tutorial foi baseado no programa Adobe Dreamweaver CS4, de modo que, nas próximas versões a serem lançadas, eu postarei aqui o que mudou.

Sempre que surgir uma dúvida com o que eu ensinei, poste aqui.

Quem quiser colaborar e ensinar algo que eu não coloquei (posteriormente não aprendi) fique a vontade e dê a sua participação.

Quem for colaborar, não importa a versão do Dreamweaver que esteja usando. Se houver algum diferencial, eu postarei onde e como é feito na versão atual.

Quando eu tiver um tempo livre, procurarei aprender mais coisas para ensinar aqui futuramente.

A gente se vê no próximo tutorial básico do Dremaweaver, explorando o ASP VBScript.

Abraços!

Link para o comentário

Aproveite o espaço para tirar as suas dúvidas no que ficou confuso ;)

Link para o comentário
  • 2 semanas depois...

Para falar a verdade tem 2 coisas que nao consigo fazer que preste:

1-> Um belo design

2-> Salvar e pôr o site no ar

PS.:

3-> E o menu ... Só faz com camadas/tabelas ou tem jeito mais pratico? (nunca consegui fazer um bonito)

Link para o comentário

1 - Quando eu falar sobre o Fireworks, você vai aprender a criar designs, mas se vai ficar bonito ou não vai depender da criatividade de cada um. O recomendável nesse caso é primeiro fazer o layout em um rascunho e em seguida passar as suas ideias para o seu editor de imagens para a web.

2 - Para criar um site no seu computador usando o Dreamweaver, você só precisa criar uma pasta para o corrente site e seguir os passos do capítulo inicial, não há mistérios. Quanto a colocar no servidor, depois de assinar com um servidor (de preferência um servidor pago) você só vai precisar configurar no seu gerenciador de FTP (ver: o último capítulo deste tutorial).

3 - Não é obrigatório o uso das tabelas mas é altamente recomendado para deixar a página mais organizada. Uma página sem tabela fica toda destroçada. A outra opção é usar as camadas flutuantes (aquelas camadas que ensinei no capítulo Camadas e Comportamentos), mas eu particulamente prefiro as tabelas. Sobre nunca ter conseguido fazer um menu bonito é porque ainda não aprendemos a criar designs, o que foi respondido na pergunta 1. Aguarde em breve o tutorial do Fireworks, que será criado após eu concluir o segundo tutorial do Dreamweaver que vai ensinar a redirecionar as informações do seu formulário para o seu banco de dados.

;)

Link para o comentário

Andy (ou alguém experiente com o Dreamweaver):

- Eu preciso a solução de um enigma, na verdade dois, que são as seguintes:

Espaçamento entre células (linhas/colunas): Entre duas células de uma tabela, sempre há um espaço, de 1 pixel. Teria como retirar esse espaço?

Desorganização das imagens: Como estou criando o CH Media no Dreamweaver (já que o layout foi feito no Fireworks), o site tem um topo, um menu horizontal abaixo do topo, e um menu vertical á esquerda da página. Acontece que no conteúdo, na parte central da página, ao ser pulado linhas de texto, as imagens fatiadas do conteúdo vão se separando e se desorganizando. Teria alguma forma de que isso não aconteça? Eu adicionei uma barra de rolagem, mas deu um baita enrolo, to á dias tentando resolver isso e nada...

Esse Dreamweaver é foda...

Link para o comentário

Para tirar o espaçamento, selecione a tabela por fora e em propriedades deixe a Cell Space em "0" (não espaço em branco).

Quanto ao segundo quesito, novamente envolve a tabela, já que as fatias são separadas por células de uma tabela. Para isso basta ajustar a célula selecionada nas propriedades da tabela ;)

Link para o comentário
Visitante
Este tópico está impedido de receber novos posts.
  • Atividades

    1. E.R
      2927

      Pica Pau

    2. E.R
      581

      A Praça é Nossa

    3. E.R
      7899

      QUADRINHOS & GIBIS

    4. E.R
      176

      Futebol Alemão

    5. E.R
      192

      CARLOS VILLAGRÁN

  • Quem Está Navegando   0 membros estão online

    • Nenhum usuário registrado visualizando esta página.
×
×
  • Criar Novo...