Baixe DreamWeaver MX Parte1 e outras Notas de estudo em PDF para Informática, somente na Docsity!
Õndice
IntroduÁ„o
1. Conhecendo a ¡rea de Trabalho
1.1. Barra de TÌtulo
1.2. Barra de Menus
1.3. Guias
1.3.1 Guia "Common"
1.4. Barra de "EdiÁ„o do Documento"
1.5. PainÈis
1.6. ¡rea de Desenvolvimento
1.7. Barra "Inspetor de Propriedades"
2. Tipos de P·ginas
2.1. ConfiguraÁ„o de P·ginas
2.2. FormataÁ„o de Texto
3. Tabelas
4. Imagens
5. Links
6. Frames
7. Templates (Modelos)
8. MÌdias
9. Layers
10. Rollover de Imagens
11. Janela PopUp
12. Menus
13. Formul·rios
IntroduÁ„o
O DreamWeaver MX È um editor de HTML profissional para o desenvolvimento de p·ginas, sites e aplicativos para a Internet que j· È bastante utilizado no meio dos desenvolvedores pela facilidade que sua interface apresenta. Ele oferece ferramentas suficientes para aqueles que gostam de trabalhar em modo texto, como por exemplo, as dicas de cÛdigo que s„o exibidas ‡ medida que s„o digitados os comandos. O DreamWeaver MX tambÈm facilita a vida daqueles que n„o tem afinidade com cÛdigos HTML, ele possui uma interface gr·fica que possibilita a criaÁ„o de p·ginas, sites e aplicativos sem a necessidade de digitaÁ„o de uma sÛ linha de cÛdigo. Possuindo painÈis, guias, menus e o inspetor de propriedades junto da ·rea de trabalho, facilita-se a busca de problemas e se agiliza as definiÁıes em geral. Sendo um produto da famÌlia MacroMedia ele tem ligaÁıes com outros aplicativos como por exemplo, o Flash, o Fireworks, o ColdFusion etc. No decorrer da apostila veremos como o DreamWeaver MX conversa com alguns desses aplicativos. O DreamWeaver MX possui tambÈm extensıes que devem ser baixadas (download) do site da Macromedia (www.macromedia.com.br). Tais extensıes trazem novos recursos para o aplicativo que podem ser bastante ˙teis. Na Internet vocÍ tambÈm encontra muitas referÍncias sobre o DreamWeaver MX e as versıes que o antecederam.
1.3. Guias
O DreamWeaver possui uma barra denominada ìINSERIRî que contÈm ìguiasî, e estas possuem Ìcones de atalhos para ferramentas b·sicas, ou seja, as mais utilizadas na construÁ„o do site.
1.3.1. Guia Common
Nessa guia h· ferramentas b·sicas do DreamWeaver. S„o elas:
Hiperlink: inserir link;
Email Link: link para e-mail;
Ancora: Link para um lugar especÌfico dentro do prÛprio documento ou outro qualquer;
Inserir Tabela: Inserir tabela;
Desenhar camada;
Imagem: Inserir uma imagem;
Flash: Inserir arquivo flash (.swf);
Imagem Rollover: Insere uma imagem que È substituÌda por outra ao passar do mouse;
Menu de NavegaÁ„o: Cria um menu com troca de imagens;
Linha Horizontal;
Data;
Coment·rios.
Outras guias ser„o abordadas de outra forma no decorrer da apostila.
1.4. Barra de "EdiÁ„o do Documento"
Denominada ìDocumentoî essa barra possui ferramentas que exibem informaÁıes do arquivo em ediÁ„o, tais como, o tÌtulo, exibiÁ„o de layout, layout e HTML e apenas o HTML. … muito usada na manutenÁ„o dos sites, quando da necessidade de correÁıes no cÛdigo HTML.
1.5. PainÈis
Os painÈis possuem informaÁıes relacionadas a aÁıes avanÁadas dentro de uma p·gina. Dentre os painÈis existentes podemos destacar:
- Design: onde buscaremos informaÁıes sobre o arquivo .css que ser· vinculado ao arquivo; e
- Arquivos: onde teremos a definiÁ„o e a respectiva ·rvore de diretÛrios do site em evidÍncia. Esses painÈis podem ser exibidos e ocultados atravÈs do menu ìjanelaî na opÁ„o "ocultar painÈis".
1.6. ¡rea de Desenvolvimento
A ·rea de desenvolvimento exibe tudo o que est· sendo criado no site. Nessa ·rea usamos um termo WYSIWUG (What You See Is What You Get ñ O que vocÍ vÍ È o que vocÍ ter·), sendo assim tudo o que est· na ·rea de desenvolvimento est· como ser· exibido no browser, excetuando-se as linhas e marcas de sÌmbolos visÌveis que identificam algum atributo ‡ imagem ou texto.
1.7. Barra "Inspetor de Propriedades"
A barra Inspetor de Propriedades, que fica exatamente no pÈ da ·rea de desenvolvimento, exibe informaÁıes fundamentais sobre o que est· sendo feito no site, como por exemplo, quando vocÍ estiver trabalhando com: Texto
- barra informar· formato do texto (par·grafo, cabeÁalho);
- bloco de fontes que ser· usado;
- tamanho;
- cor;
- itens de formataÁ„o como negrito, it·lico, alinhamentos, lista com marcadores e numeradores e tabulaÁ„o;
- link; Imagem
- tamanho da imagem;
- origem;
- link;
- ·rea para texto alternativo;
- mapa de imagem. Tudo o que for inserido na ·rea de desenvolvimento ter· informaÁıes importantes na barra de propriedades. Essa barra È a mais importante da ·rea de trabalho, pois atravÈs dela vocÍ identificar· problemas nas definiÁıes de atributos.
3. Tabelas
Neste tÛpico iremos abordar os seguintes temas relacionados a tabelas:
- InserÁ„o;
- Mesclagem;
- Fundos;
- Alinhamentos;
- Auto-formataÁ„o;
- Fixa e escalon·vel;
- CellPadding;
- CellSpacing;
- IndexaÁ„o;
- CriaÁ„o de layouts com tabelas. As tabelas ajudam bastante no desenvolvimento do site. Elas podem ser fixas ou escalon·veis. A vantagens e desvantagens em trabalhar com as duas, isso vocÍ dever· decidir quando da inserÁ„o das mesmas. H· algumas consideraÁıes com relaÁ„o ao alinhamento das tabelas que devem ser discutidas, por exemplo, nunca se alinha uma tabela com alinhamento de texto e sim com o alinhamento da cÈlula ou cÈlulas. Para mudar a porcentagem da largura da cÈlula, selecione a cÈlula que dever· receber um novo valor. Para inserir uma tabela vocÍ pode usar:
- o menu ìInserirî e a opÁ„o ìTabelaî
- a na barra ìInserirî a guia ìTabelasî Feito isto, ser· exibida a caixa de propriedades ìInserir Tabelaî, representada abaixo. Essa caixa possui as definiÁıes da sua tabela.
4. Imagens
Abordaremos neste item:
- InserÁ„o de Imagem;
- Alinhamentos. Inserir imagens no DreamWeaver È como tirar o doce da boca de uma crianÁa. Como j· abordado no inÌcio da apostila, a guia "Common" possui um Ìcone para que vocÍ insira suas imagens . FaÁa um teste.
Quando inserida a imagem, vocÍ poder· clicar sobre ela e usar alguns comandos da barra ìInspetor de Propriedadesî, tais como, inserir um link, fazer um mapa da imagem com v·rios links,alinhamento e inserir borda.
