|
 Introdução
Este livro aborda os vários aspectos essenciais à criação de
páginas e sítios Web, utilizando o software Adobe Dreamweaver CS5 e as
tecnologias HTML, CSS e JavaScript.
O Dreamweaver é a ferramenta de web design mais
utilizada em todo o mundo, e esta nova versão CS5 possui novidades importantes,
nomeadamente ao nível do trabalho com as CSS, facilitando, ainda mais, o
trabalho dos web designers.
O primeiro passo na criação de páginas Web é a
definição da estrutura a utilizar, o que é realizado com o HTML. Com o
Dreamweaver não é necessário escrever código – todos os elementos HTML estão à
distância de um clique, num menu ou numa barra de ferramentas.
O aspecto visual das páginas Web é conseguido à custa da
utilização das Cascading Style Sheets. O Dreamweaver CS5 possui inúmeras
funcionalidades que permitem um trabalho rápido e eficiente com as CSS, para se
conseguir designs e layouts atraentes e funcionais.
Esta nova versão do Dreamweaver continua a apostar na Spry
framework, que utiliza a linguagem JavaScript e que permite dotar as páginas
Web de interactividade através da utilização de widgets.
O Dreamweaver CS5 também já aponta caminhos para o futuro com
o suporte das tecnologias mais recentes, como o HTML 5 e as CSS 3.
O livro apresenta ainda diversos exercícios ‘guiados’, que
permitem, mesmo ao utilizador principiante, criar páginas Web e utilizar os
conhecimentos adquiridos para resolver problemas nos seus projectos de
desenvolvimento de sítios Web.
Índice
Prefácio
Introdução
Público-alvo e pré-requisitos
Características principais do livro
Convenções usadas
Visão geral e Organização
Sobre o Autor
1 Web Design
| 1.1 Tecnologias client-side |
| |
1.1.1 HTML
1.1.2 XML
1.1.3 XHTML
1.1.4 CSS
1.1.5 JavaScript |
| 1.2 |
Ferramentas de Web Design |
| 1.3 |
Adobe Dreamweaver |
| |
1.3.1 Versões disponíveis
1.3.2 Requisitos de sistema |
| 1.4 |
Novidades no Dreamweaver CS5 |
| |
1.4.1 Para os web designers
1.4.2 Para os web developers
1.4.3 Funcionalidades removidas |
2 Ambiente de trabalho
| 2.1 WELCOME SCREEN |
| 2.2 Barras de ferramentas |
| |
2.2.1
Application Toolbar
2.2.2 Document Toolbar
2.2.3 Outras barras de ferramentas |
| 2.3 |
Painéis |
|
2.3.1 Alterar a disposição dos painéis
2.3.2 Flutuar um painel
2.3.3 Colocar grupos de painéis no panel dock
2.3.4 Minimizar painéis
2.3.5 Criar outro panel dock
2.3.6 Painéis horizontais
2.3.7 Painel INSERT
2.3.8 PROPERTY INSPECTOR
2.3.9 Painel RESULTS |
| 2.4 |
Workspaces |
| |
2.4.1 Criar um workspace
2.4.2 Repor tudo como estava |
| 2.5 |
Área de documento |
| |
2.5.1 TAG SELECTOR
2.5.2 Outros ícones e informação
2.5.3 Trabalhar com réguas
2.5.4 Trabalhar com a grelha
2.5.5 Trabalhar com guias |
3 Sitios Web
| 3.1 Definir um sítio Web |
| 3.2 Gestão de sítios Web |
| 3.3 Gerir ficheiros |
| 3.4 Outra informação sobre o sítio Web |
| |
3.4.1 Servidores Web
3.4.2 Trocar ficheiros com o servidor remoto |
4 Documentos
| 4.1 Preferências dos novos documentos |
| 4.2 Estrutura de um documento HTML |
| |
4.2.1 Secção HEAD
4.2.2 Sec ão BODY |
| 4.3 Trabalhar com documentos |
| 4.4 Visualizar páginas |
| |
4.4.1 Live View
4.4.2 Pré-visualização das páginas em browsers
4.4.3 BrowserLab
4.4.4 Multiscreen
4.4.5 Device Central |
5 Trabalhar com texto
| 5.1 Definir a estrutura do documento |
| 5.2 Parágrafos |
| |
5.2.1Seleccionar texto |
| 5.3 Cabeçalhos |
| 5.4 Alinhamentos |
| 5.5 Quebras de linha e espaços |
| 5.6 Caracteres especiais |
| 5.7 Formatação especial |
| 5.8 Citar texto |
| 5.9 Dar ênfase ao texto |
| 5.10 Dividir em secções |
| 5.11 Listas |
| |
5.11.1 Listas imbricadas
5.11.2 Listas de definições |
| 5.12 Importar texto |
| 5.13 Integração com o Microsoft Word |
| 5.14 Localizar e substituir |
| 5.15 Dicionário |
6 Imagens
| 6.1 Formatos de imagens |
| |
6.1.1 Formato GIF
6.1.2 Formato JPEG
6.1.3 Formato PNG
6.1.4 Formato SVG |
| 6.2 Inserção de imagens |
| |
6.2.1 Image placeholders
6.2.2 Posicionar imagens |
| 6.3 Optimizar e alterar imagens |
| |
6.3.1 Crop
6.3.2 Redimensionar
6.3.3 Luminosidade e contraste
6.3.4 Melhorar a definição
6.3.5 Optimizar imagens
6.3.6 Editar imagens num programa externo
6.3.7 Integração com o Photoshop |
7 Hiperligações
| 7.1 Tipos de links |
| 7.1 Criar links |
| |
7.2.1 Links para páginas externas ao site |
| 7.3 Propriedades dos links |
| |
7.3.1 Abrir páginas em janelas ou separadores do browser
7.3.2 Outras propriedades dos links |
| 7.4 Links em imagens |
| 7.5 Links para ficheiros PDF e outros |
| 7.6 Outro tipo de links |
| 7.7 Links internos a uma página |
| |
7.7.1 Criar named anchors
7.7.2 Elementos invisíveis
7.7.3 Criar links para aceder às named anchors
7.7.4 Named anchors externas |
8 Tabelas
| 8.1 Criar uma tabela |
| 8.2 Estrutura de uma tabela |
| 8.3 Alterar uma tabela |
| |
8.3.1 Seleccionar uma tabela
8.3.2 Largura da tabela e das colunas
8.3.3 Seleccionar linhas e colunas
8.3.4 Inserir linhas e colunas
8.3.5 Alinhamento vertical
8.3.6 No wrap
8.3.7 Fundir e dividir células |
| 8.4 Importar dados num formato tabular |
| 8.5 Acessibilidade em tabelas |
| 8.6 Outros elementos e atributos de uma tabela |
| 8.7 Ordenar os dados de uma tabela |
| 8.8 Modo expandido |
9 Formulários
| 9.1 Criar um formulário |
| |
9.1.1 Propriedades do formulário |
| 9.2 Campos de texto |
| |
9.2.1 Text
9.2.2 Atributos de acessibilidade
9.2.3 Atributos dos campos de texto
9.2.4 Textarea
9.2.5 Password |
| 9.3 Radio buttons |
| 9.4 Checkboxes |
| 9.5 Select |
| |
9.5.1 Jump menu |
| 9.6 Botões |
| |
9.6.1 Botões do tipo imagem |
| 9.7 Melhorar a organização do formulário |
| 9.8 Outros campos |
10 Conteúdo multimédia
| 10.1 Conteúdo Flash em páginas Web |
| |
10.1.1 Propriedades de uma animação Flash
10.1.2 Detecção do Flash Player |
| 10.2 Integração do Flash com o Dreamweaver |
| 10.3 Vídeo Flash |
| 10.4 Outros conteúdos multimédia |
| |
10.4.1 Áudio
10.4.2 Vídeo
10.4.3 Filmes Shockwave
10.4.4 Applets Java
10.4.5 Controlos ActiveX |
11 CSS (Cascading Style Sheets)
| 11.1 Criar uma identidade para o sítio Web |
| 11.2 Anatomia de um estilo CSS |
| 11.3 Criar estilos CSS |
| |
11.3.1 Painel CSS STYLES
11.3.2 Editar um estilo CSS
11.3.3 Eliminar propriedades e estilos CSS
11.3.4 Formatar outros elementos
11.3.5 Utilização de cores |
| 11.4 Utilizar ids em estilos |
| 11.5 Classes CSS |
| 11.6 Utilizar ficheiros CSS |
| |
11.6.1 Exportar estilos para um ficheiro CSS
11.6.2 Ligações a ficheiros CSS |
| 11.7 Cascading |
| |
11.7.1 Propriedades da página
11.7.2 Estilos inline, internos e externos
11.7.3 Precedência |
| 11.8 Selectores descendant |
| 11.9 Activar e desactivar propriedades CSS |
| 11.10 Informação sobre os estilos CSS de um elemento |
| |
11.10.1 CODE NAVIGATOR
11.10.2 Modo INSPECT |
| 11.11 Preferências na utilização de CSS |
| |
11.11.1Preferências para o código
11.11.2 Outras preferências |
| 11.12 Barra STYLE RENDERING |
| 11.13 Design-Time style sheets |
| 11.14 Verificar a compatibilidade do browser |
12 Formatar texto com CSS
| 12.1 Famílias de tipos de letra |
| |
12.1.1 Serif e sans-serif
12.1.2 Font stacks
12.1.3 Tamanho de letra |
| 12.2 Aspecto do texto |
| |
12.2.1 Font-weight
12.2.2 Font-style
12.2.3 Font-variant
12.2.4 Text-transform
12.2.5 Text-decoration |
| 12.3 Espaçamento entre palavras e caracteres |
| 12.4 Espaçamento entre linhas |
| 12.5 Espaçamento entre parágrafos |
| 12.6 Box Model |
| |
12.6.1 Padding |
| 12.7 Alinhar texto |
| |
12.7.1 Alinhamento vertical |
| 12.8 Listas |
| |
12.8.1 Listas de definições |
| 12.9 Selectores específicos dos links |
13 Layout de páginas Web
| 13.1 Utilizar tabelas para layout |
| 13.2 Frames |
| 13.3 Layouts CSS |
| |
13.3.1 Tracing image
13.3.2 Elementos block-level versus elementos inline
13.3.3 O elemento div
13.3.4 Opções de visualização dos elementos CSS
13.3.5 Utilização de floats
13.3.6 Layouts baseados em floats
13.3.7 Starter Pages
13.3.8 Posicionamento absoluto de elementos
13.3.9 Posicionamento relativo |
14 Behaviors JavaScript
| 14.1 Behaviors, eventos e acções |
| 14.2 Utilizar behaviors |
| |
14.2.1 O painel BEHAVIORS
14.2.2 Criar uma behavior
14.2.3 Gerir eventos |
| 14.3 Swap Image e Swap Image Restore |
| |
14.3.1 Swap Image Restore
14.3.2 Preload Images
14.3.3 Rollover Image |
| 14.4 Call JavaScript |
| 14.5 Trabalhar com janelas de pop-up |
| 14.6 Show-Hide Elements |
| 14.7 Set Text |
| |
14.7.1 Set Text of Container
14.7.2 Set Text of Frame
14.7.3 Set Text of Status Bar
14.7.4 Set Text of Text Field |
| 14.8 Check Plugin |
| 14.9 Go to URL |
| 14.10 Drag AP Element |
| 14.11 Pop-up message |
| 14.12 Spry Effects |
| |
14.12.1 Appear/Fade
14.12.2 Blind
14.12.3 Grow/Shrink
14.12.4 Highlight
14.12.5 Shake
14.12.6 Slide
14.12.7 Squish |
| 14.13 Utilizar outras behaviors |
| |
14.13.1 Instalar behaviors |
15 Navegação com Spry Widgets
| 15.1 Spry widgets |
| 15.2 Spry Menu Bar |
| |
15.2.1 Criar um menu de navegação
15.2.2 Alterar o aspecto de uma Spry Menu Bar
15.2.3 Aplicar estilos ao nosso menu exemplo
15.2.4 Remover uma Spry Menu Bar |
| 15.3 Spry Tabbed Panel |
| |
15.3.1 Formatar os painéis |
| 15.4 Spry Accordion Panel |
| |
15.4.1 Formatar um Spry Accordion Panel |
| 15.5 Spry Accordion Panel |
| |
15.5.1 Formatar a aparência de um SPRY COLLAPSIBLE PANEL |
| 15.6 Spry Tooltip |
| 15.7 Widget Browser |
16 Validação de formulários
| 16.1 Validação com widgets Spry |
| |
16.1.1 Utilizar widgets de validação com tabelas |
| 16.2 Spry Validation Text Field |
| |
16.2.1 Preview States
16.2.2 Criar padrões personalizados de validação
16.2.3 Alterar a aparência dos campos e das mensagens de erro |
| 16.3 Spry Validation Textarea |
| 16.4 Spry Validation Checkbox |
| 16.5 Spry Validation Select |
| 16.6 Spry Validation Password |
| 16.7 Spry Validation Confirm |
| 16.8 Spry Validation Radio Group |
| 16.9 Conclusão |
Autor
Pedro Remoaldo é licenciado em Informática, formador e
consultor em sistemas e tecnologias de informação, com cerca de uma década de
experiência como docente no ensino superior.
Autor de 17 livros sobre sistemas operativos, software,
Internet, segurança e web development, dos quais os 10 títulos mais recentes
foram publicados pelo Centro Atlântico.
Os seus interesses são bastante abrangentes, mas dedica
particular atenção às tecnologias Internet, aos sistemas de gestão de bases de
dados e ao Business Intelligence.
Comentários dos Leitores
|
