Baixe Apostila do Programa Dreamweaver e outras Manuais, Projetos, Pesquisas em PDF para Gráficos e Animação de Computador, somente na Docsity!
Apostila Completa
de Dreamweaver
CS
340 Páginas
Versão de Demonstração
A versão completa desta apostila você encontra no
mais novo lançamento do Apostilando.com, o
SuperCD4, para adquirir o seu basta acessar:
http://www.apostilando.com/supercd
Acabamos de lançar uma nova versão do SuperCD, o SuperCD4, ele está muito mais completo, com mais de 80. Páginas de Apostilas totalmente atualizadas.
O que há de novo no SuperCD4?
O SuperCD4 está recheado de apostilas atualizadas e inéditas, das versões mais novas dos programas, como: Dreamweaver CS3, Office 2007, Autocad 2007, Windows Vista, 3D Studio Max, Corel Draw X3, CSS, Fireworks CS3, Flash CS3, Word 2007, Excel 2007, Corel Draw 12, Photoshop CS2 e CS3, dentre muitas outras, veja algumas apostilas exclusivas desta versão:
- Apostila completa de Dreamweaver CS3 340 Páginas;
- Diversas Apostilas de Excel 2007 totalizando mais de 200 Páginas;
- Apostila de Corel Draw X3 com 71 Páginas ;
- Apostila de Fireworks CS3 67 Páginas;
- Apostila de Flash CS3 51 Páginas;
- Apostila completa de Photoshop CS3 132 Páginas;
- Apostila completa de Photoshop CS2 240 Páginas;
- Apostila completa de Flash CS3 120 Páginas;
- Diversas apostilas completas sobre Hardware.
Índice
- Capítulo 1 – A Área de Trabalho................................................................................
- Página Inicial ( Start Page ) ................................................................................
- A Interface..........................................................................................................
- Capítulo 2 – Ajuste de Preferências..........................................................................
- Preferências – General......................................................................................
- Preferências – Accessibility..............................................................................
- Preferências – AP Elements..............................................................................
- Preferências – Code Coloring...........................................................................
- Preferências – Code Format..............................................................................
- Preferências – Code Hints.................................................................................
- Preferências – Code Rewriting..........................................................................
- Preferências – Copy and Paste..........................................................................
- Preferências – CSS Styles.................................................................................
- Preferências – File Compare.............................................................................
- Preferências – File Types/Editors.....................................................................
- Preferências – Fonts..........................................................................................
- Preferências – Highlighting...............................................................................
- Preferências – Invisible Elements ....................................................................
- Preferências – Layout Mode.............................................................................
- Preferências – New Document..........................................................................
- Preferências – Preview in Browser....................................................................
- Preferências – Site
- Preferências – Status Bar...................................................................................
- Preferências – Validator....................................................................................
- Capítulo 3 – Criação do site ......................................................................................
- Capítulo 4 – Configurações Iniciais da Página.........................................................
- Propriedades da Página.....................................................................................
- Appearence........................................................................................................
- Links..................................................................................................................
- Headings ...........................................................................................................
- Title/Encoding...................................................................................................
- Tracing Image....................................................................................................
- Capítulo 5 – Textos.......................................................................................................
- Criação de Listas................................................................................................
- Capítulo 6 – Imagens....................................................................................................
- Edição de Imagens..............................................................................................
- Alocador de Espaço de Imagem ( Placeholder ).................................................
- Integração com o Photoshop CS3.......................................................................
- Capítulo 7 – Hyperlinks...............................................................................................
- Links Absolutos..................................................................................................
- Links Relativos...................................................................................................
- Links para E-mails..............................................................................................
- Âncoras...............................................................................................................
- Mapa de Imagem................................................................................................
- Capítulo 8 – Integração com o Flash CS3...................................................................
- Texto Flash..........................................................................................................
- Botão Flash..........................................................................................................
- Image Viewer.......................................................................................................
- Flash Vídeo..........................................................................................................
- Flash Paper...........................................................................................................
- Capítulo 9 – Design com Tabelas.................................................................................
- Ordenar a Tabela ................................................................................................
- Tabular Data........................................................................................................
- Expanded Tables Mode.......................................................................................
- Capítulo 10 – Frames e Iframes...................................................................................
- Destino (Target).................................................................................................
- Iframe.................................................................................................................
- Ajustes para o Projeto........................................................................................
- Capítulo 11 – Posicionamento Absoluto....................................................................
- Conversões........................................................................................................
- Movimentação...................................................................................................
- Trajetórias Complexas......................................................................................
- Transição...........................................................................................................
- Capítulo 12 – CSS – Folhas de Estilo........................................................................
- Type..................................................................................................................
- Background.......................................................................................................
- Block.................................................................................................................
- Border...............................................................................................................
- List....................................................................................................................
- Positioning........................................................................................................
- Extesions...........................................................................................................
- Filters................................................................................................................
- Estilos Externos................................................................................................
- Style Rendering................................................................................................
- Capítulo 13 – Tableless...............................................................................................
- Capítulo 14 – Elementos do Formulário...................................................................
- Área do Formulário ( Form ).............................................................................
- Campo de Texto ( Text Field )..........................................................................
- Campo de Senha ( Password )...........................................................................
- Campo Oculto ( Hidden Field ) ........................................................................
- Área de Texto ( Text Área )...............................................................................
- Caixa de Seleção ( Checkbox )..........................................................................
- Botão de Rádio ( Radio Button ).......................................................................
- Grupo de Botões de Rádio ( Radio Group )......................................................
- List/Menu ( List/Menu )....................................................................................
- Campo de Imagens ( Image Field ).................................................................
- Campo de Arquivos ( File Field )....................................................................
- Botão ( Button )...............................................................................................
- Capítulo 15 – Behaviors.............................................................................................
- Open Browser Window....................................................................................
- Change Property...............................................................................................
- Drag AP Element..............................................................................................
- Call JavaScript..................................................................................................
- Set Text.............................................................................................................
- Go To URL.......................................................................................................
- Popup Message..................................................................................................
- Jump Menu........................................................................................................
- Show-Hide Elements........................................................................................
- Jump Menu Go .................................................................................................
- Swap Image.......................................................................................................
- Validate Form....................................................................................................
- Check Plugin......................................................................................................
- Outros Comportamentos....................................................................................
- Capítulo 16 – AJAX Utilizando o Framework Spry................................................
- Efeitos Spry.......................................................................................................
- Spry Menu Bar..................................................................................................
- Spry Tabbed Panels...........................................................................................
- Spry Accordion.................................................................................................
- Spry Collapsible Panel......................................................................................
- Spry Validation TextField.................................................................................
- Spry Validation Select.......................................................................................
- Spry Validation Checkbox................................................................................
- Spry Validation Textarea...................................................................................
- XML .................................................................................................................
- Spry XML Data Set...........................................................................................
- Spry Region.......................................................................................................
- Spy Repeat.........................................................................................................
- Spry Repeat List................................................................................................
- Spry Detail Region............................................................................................
- Capítulo 17 – Configurações de Site Dinâmico.........................................................
- Configuração do Servidor – IIS.........................................................................
- Configuração Avançada do Dreamweaver........................................................
- Banco de Dados.................................................................................................
- Capítulo 18 – Páginas Dinâmicas...............................................................................
- Capítulo 19 – Paginação..............................................................................................
- Data Objects......................................................................................................
- Capítulo 20 – Busca – Resultado – Detalhe...............................................................
- Página de Busca................................................................................................
- Editar Registros.................................................................................................
- Deletar Registros...............................................................................................
- Formulário de Inserção de Registros................................................................
- Formulário de Edição de Registros...................................................................
- Capítulo 21 – Inserir, Deletar e Editar Registros.....................................................
- Inserir Registros................................................................................................
- Editar Registros.................................................................................................
- Deletar Registros...............................................................................................
- Formulário de Inserção de Registros.................................................................
- Formulário de Edição de Registros...................................................................
- Capítulo 22 – Sistema de Autenticação com Login e Senha....................................
- Capítulo 23 – Loja Virtual..........................................................................................
- Adicionar Produto ao Carrinho..........................................................................
- Carrinho de Compras.........................................................................................
- Esvaziar o Carrinho...........................................................................................
- Gerar o Pedido...................................................................................................
- Armazenar Dados do Cliente.............................................................................
- Capítulo 24 – Criando Server Behaviors...................................................................
- Capítulo 25 – Sistema de Busca Avançada...............................................................
- Inner Join..........................................................................................................
- Capítulo 26 – XSLT ....................................................................................................
- Recuperação de Dados de RSS..........................................................................
- Capítulo 27 – Produtividade ......................................................................................
- Assets.................................................................................................................
- Biblioteca ( Library ).........................................................................................
- Modelos ............................................................................................................
- Commands.........................................................................................................
- Snippets.............................................................................................................
- Referência..........................................................................................................
- Coding Toolbar..................................................................................................
- Capítulo 28 – Resultados............................................................................................
- Find and Replace..............................................................................................
- Validação..........................................................................................................
- Check Target.....................................................................................................
- Verificador de Links.........................................................................................
- Site Reports.......................................................................................................
- FTP Log............................................................................................................
- Capítulo 29 – Publicação............................................................................................
- Transferência dos Arquivos..............................................................................
- Mapa do Site.....................................................................................................
- Apêndice 1 – Criação de um Banco de Dados Simples............................................
- Banco de Dados da Loja.................................................................................
- Apêndice 2 – Acessibilidade.....................................................................................
- Elementos de Formulário................................................................................
- Frames.............................................................................................................
- Mídia ..............................................................................................................
- Imagens ..........................................................................................................
- Tabelas............................................................................................................
- Apêndice 3 – Adobe Device Central........................................................................
Caso marque essa opção e deseje ver essa tela novamente, basta ir ao menu Edit – Preferences e na aba General , na área Document Options , marcando a caixa de seleção Show Start Page.
Interface
A área de trabalho do Dreamweaver pode se adequar conforme sua preferência, permitindo então, total personalização.
Podemos escolher modelos distintos de layout da área de trabalho através do menu Window – Workspace Layout. Opções como Coder, Designer e Dual Screen.
Estilo que usa diretamente a opção de digitação de códigos, com a possibilidade de inserir elementos externos ( como imagens ) arrastando da esquerda para a parte do código que deseja.
( Utilizaremos em toda a apostila )
Escolhendo a opção Designer, logo percebemos que os painéis estão trancados na tela ( lado direito e na área inferior ).
A área central ( branca ) representa a página que criaremos, onde todos os elementos ( texto, mídia ) que desejarmos em nossa página deve ser colocados nessa área. Acima dessa área temos opções que ajudam a desenvolver as páginas.
Na parte superior da página, temos algumas abas quem mostram o nome dos arquivos abertos, clicando na guia com seu nome para alterar de página pra página.
Abaixo, na parte superior, encontramos os modos de visualização, onde podemos escolher entre visualizar apenas o código ( Code ), o código e o design simultaneamente ( Split ) ou somente o design ( Design ). No menu View também temos essas opções.
Ao lado dos modos de visualização temos outros botões que servem para colocar título nas páginas, gerenciar arquivos, visualização no navegador, atualização das páginas, opções de visualização e auxílios visuais ( conhecidos como Visual Aids ) , verificar validação do código e compatibilidade da página.
Na parte inferior da página há os indicadores das tags HTML usadas até o ponto que o cursor estiver posicionado. A área inferior direita tem um indicativo das dimensões escolhidas para a página. No extremo direito encontra-se um informativo do peso do arquivo ( em Kb ) e o tempo estimado para seu carregamento na web.
Também temos um conjunto de controles de zoom, que auxilia muito o trabalho de criação de páginas. Essa opção serve somente como auxílio durante a criação. O resultado final é o equivalente ao zoom em 100%.
Para ativar o campo de zoom, no local onde se encontra a porcentagem de zoom aplicada à página, clique na seta para baixo e escolha um dos valores predefinidos.
Utilizando a seta que está à esquerda do nome do grupo de painéis você pode expandir ou retrair esse grupo. Para remover um grupo de painéis, é só arrastá-lo pela sua barra de título para fora dessa área. Para anexá-lo a alguma área da tela, basta movê-lo e, quando estiver em um local em que possa ser encaixado, a área será destacada. Se quiser que todos os painéis fiquem escondidos, clique em F.
Alguns painéis possuem opções adicionais que podem ser usadas clicando no ícone à direita de seu nome, simbolizando três quadrados pequenos com linhas ao lado e uma pequena seta para baixo.
Nas áreas dos grupos de painéis, existe um botão que serve para retrair essa área. Caso queira reverter e deixar a área visível novamente, clique nesse botão, voltando ao estágio original.
Um dos inspetores de maior importância do software é o Propriedades ( Properties ), onde se encontram as principais opções do elemento que estiver selecionado, facilitando o trabalho.
Para abrir o inspetor de propriedades, escolha a opção de menu Window – Properties.
Para colocar a maior parte dos elementos necessários nas páginas, usamos o painel Insert.
Esse painel se localiza na área superior do software e tem muitos elementos que podem ser colocados na página.
As opções desse painel estão divididas em vários conjuntos, cujos nomes aparecem na parte superior do painel. Para escolher um conjunto qualquer do que estiver aparecendo, vá até a área do seu nome e escolha o grupo que deseja.
Se quiser que o painel se pareça com o do Dreamweaver versão 8 ( um menu à esquerda com as categorias ), escolha a opção Show as Menu nas opções que surgem ao clicar no nome do grupo.
Quando tiver escolhido essa opção de menu e quiser voltar ao original, escolha entre as opções do menu a opção Show as Tabs.
Como todos os painéis do Dreamweaver, o Insert e o Inspetor de Propriedades podem ser expandidos e retraídos clicando na seta à esquerda de seus nomes; também podem mudar de lugar.
Para fechar qualquer um desses painéis, escolha a opção de menu Window- Insert ( para o painel Inserir ) ou Window – Properties ( para o inspetor de propriedades ).
Entre as categorias do painel Insert temos a Favorites, que pode facilmente ser modificada por cada um. Para começar clique no painel Insert com o botão direito do mouse e escolha a opção de menu Customize Favorites.
Para voltar a configuração original das réguas, escolha a opção de menu View- Rulers – Reset Origin ou clique duas vezes no quadrado do canto superior.
Para escolher a unidade de medida usada pela régua, pode ser modificada na opção de menu View – Rulers , escolhendo entre Pixels, Inches ( polegadas ) e Centimeters ( centímetros ).
Partindo da régua, podemos puxar linhas-guias, que são vistas apenas durante a edição, e não aparecem no resultado final.
Para puxar uma linha-guia, coloque o cursor do mouse na régua na direção que deseja e clique. Mantendo pressionado, arraste a linha para a posição que quiser, junto com a linha – guia. Enquanto é arrastada, aparece um indicativo da posição ( em pixels ) onde nos encontramos, facilitando o trabalho de estabelecer os limites das áreas para a criação, com precisão máxima.
Se depois quiser alterar a posição da linha-guia, pode arrastá-la ou clicar duas vezes nela, abrindo uma janela, onde você determina a posição para a linha.
Para travar uma linha e não correr o risco de alterar sua posição, utilize a opção de menu View – Guides – Lock Guides.
Outro recurso é o de adicionar várias linhas tanto na vertical quanto na horizontal para estabelecer limites de sua área.
Para remover uma linha, é só arrastá-la de volta para a régua. Se quiser remover todas de uma vez, escolha a opção de menu View-Guides-Clear Guides.
Podemos também criar guias que apontem a área útil disponível quando visualizada uma página em um navegador web de acordo com determinadas configurações de tela. Escolha View – Guides e selecionar uma das opções ( localizadas abaixo da opção Clear Guides ).
Um elemento visual também muito útil durante a criação de páginas é a grade, formada por um conjunto de linhas que se cruzam formando uma espécie de malha quadriculada, ajudando assim a demarcar os espaços entre elementos, muito usada por designers gráficos.
Para utilização da grade, escolha a opção de menu View – Grid – Show Grid para mostrá-la na página.
Para elementos, como tabelas de layout e camadas, encaixem-se nas linhas da grade, ative a opção View – Grid – Snap to Settings.
As configurações que fizemos ( encaixar e visualizar ) e outras podem ser feitas pela opção View – Grid – Grid Settings.
Uma janela de definições da grade em que você pode escolher:
A cor utilizada na visualização dessa grade. Escolha entre as opções da caixa de cores ou digitar código hexadecimal relativo à cor desejada.
O resultado é o mesmo das opções de menu que vimos antes.
Aqui definimos as dimensões dos quadrados que formam a grade terão, digitando um valor e escolhendo no menu a unidade de medida desejada ( pixels, polegadas ou centímetros ).
Nessa opção escolhemos as linhas que formam a grade, podendo ser sólidas ( Liners ) ou pontilhadas ( Dots ).
Para por em prática as configurações, clique com o botão aplicar ( Apply ). Depois de decidir as opções, clique no botão OK.
Always , atualiza essas referências automaticamente. Se a opção Prompt for a escolhida, pergunta se deseja atualizar os arquivos, ou não atualiza nenhum arquivo se for escolhida a opção Never.
- Show dialog when inserting objects
Quando estiver marcada, ao incluir algum tipo de elemento na tela, como imagens, aparece uma caixa de diálogo com configurações que podemos utilizar.
Para não ver essas caixas de diálogo, não é necessário desmarcar essa opção; somente manter pressionada a tecla Control quando clicar na opção de inserir o objeto.
- Enable doublé-byte inline input
Algumas espécies de texto, como o japonês, por exemplo, são double-byte. Quando escolhida essa opção, podemos digitar diretamente esse tipo de texto no documento. Se não for escolhida, aparecerá uma caixa de diálogo que faz a conversão do texto nesse tipo.
- Switch to plain paragraph after heading
No HTML existe um tipo de formatação chamado cabeçalho ( heading ). Quando essa opção estiver marcada, ao pressionar a tecla Enter em um texto com cabeçalho, automaticamente é introduzida uma marcação de parágrafo após o cabeçalho.
Se após pressionar o Enter , a opção for desmarcada, o seguinte texto também é acompanhado por uma nova marcação de cabeçalho igual à anterior.
- Allow multiple consecutive spaces
Os navegadores não consideram espaços sucessivos nas páginas, ou seja, se criarmos um código HTML que tenha uma palavra seguida por quatro espaços e outra palavra no navegador, aparecem a primeira palavra seguida de apenas um espaço e a palavra seguinte.
Para interromper essa formatação, é usado um tipo de caractere especial: ** ** que simboliza os espaços adicionais desejados.
Por padrão, o Dreamweaver acompanha o mesmo sistema dos navegadores, desconsiderando os espaços adicionais que digitamos, porque essa opção está desmarcada. Para os usuários acostumados a editores de texto padrão, o Dreamweaver permite que ao marcar essa opção seus espaços sejam considerados ( coloca automaticamente a formatação ** ** ; para cada espaço que for digitado.
- Use < strong > and < em > in place of < b > and < i >
No HTML existem dois tipo de formatação principais para os caracteres, sendo elas a formatação física e a lógica.
Os comandos < strong > e < em > simbolizam elementos de formatação lógica para o negrito e o itálico respectivamente. Já os comandos < b > e < i > também simbolizam negrito e itálico, só que em formatação física.
Com essa opção marcada, ela utiliza os comandos de formatação lógica; se desmarcada, usa a física.
- Use CSS instead of HTML tags
Se essa opção for escolhida , definimos que o Dreamweaver, quando possível, utiliza de preferência formatação via CSS ( folhas de estilo ) em vez de tags HTML.
- Warn when placing editable regions within < p > or < hl > < h6 > tags
Se estiver selecionada, temos um alerta quando incluímos regiões editáveis ( elementos presente nos modelos ) na abrangência das tags < p > ou em alguma das tags < hl > a < h6 >.
- Maximum number of history steps
Esse valor define a quantidade de passos necessária que será permitido voltar atrás, seja usando o comando Edit – Undo ( Control + Z ) , ou usando um painel chamado histórico.
Podendo ser um valor entre 2 e 99.999.
