Técnico de Organização de Eventos Módulo III Criação de Páginas Web. Técnico de Organização de Eventos. Técnico de Organização de Eventos

Tamanho: px

Começar a partir da página:

Download "24-05-2011. Técnico de Organização de Eventos Módulo III Criação de Páginas Web. Técnico de Organização de Eventos. Técnico de Organização de Eventos"

Baltazar de Almada da Cunha
8 Há anos
Visualizações:

Sumário Tecnologias de Informação e Comunicação Aquisição do software Dreamweaver. Características recursos e potencialidades. Ambiente de trabalho do software. Operações básicas com páginas Web.

1 2 Resumo da aula anterior 3 Objectivos da Aula Conhecer o editor de páginas Web Dreamweaver Descrever as principais características do programa Indicar o local de obtenção do software Enumerar

1 Sumário Tecnologias de Informação e Comunicação Aquisição do software Dreamweaver. Características recursos e potencialidades. Ambiente de trabalho do software. Operações básicas com páginas Web. Realização e correcção de uma ficha de trabalho. 1 2 Resumo da aula anterior 3 Objectivos da Aula Conhecer o editor de páginas Web Dreamweaver Descrever as principais características do programa Indicar o local de obtenção do software Enumerar recursos e potencialidades do software Identificar os componentes do ambiente de trabalho do Dreamweaver Iniciar o editor de páginas Web Dreamweaver Identificar a barra de: título, menus, ferramentas, formatação, área de trabalho, separadores, vistas, estado Activar e desactivar barras de ferramentas 4 Objectivos da Aula Realizar operações básicas com Páginas Web Criar uma página Web Guardar uma página Web Abrir uma página Web Pré-visualizar uma Página Web Imprimir uma Página Web 5 Editor de Páginas Web Dreamweaver Editor HTML não gratuito com as funcionalidades padrão desse tipo de ferramenta. Ideal para pessoas sem conhecimentos avançados em HTML que desejam criar Páginas Web atractivas e com aparência profissional. 6 1

2 Editor CSS O software traz consigo um editor específico para CSS, sigla que pode ser traduzida como folhas de estilo em cascata. Editor CSS Gestor FTP Selector de Cores Separadores Facilidades Código Limpo Réguas Dinâmicas Visualizador de Tags Editor HTML inteligente Gestor FTP Como todo bom editor HTML, o Dreamweaver traz consigo um gestor de sites FTP, uma caixa extra na janela do programa para navegar entre os trabalhos. Semelhante ao Windows Explorer, com diferentes modos de visualização, filtros de ordenação, entre outros. 7 8 Selector de Cor Permite encontrar a cor desejada alterando os componentes RGB, brilho, saturação, matiz ou utilizar qualquer uma das predefinidas. Para decisões mais rápidas, utilizar o rato e escolher uma directamente na paleta de cores Facilidades Como se não bastasse a facilidade na criação dos elementos da página, ajustar configurações deles é simples. Os ajustes básicos podem ser efectuados directamente com o rato e os mais avançados, através do painel de propriedades de cada elemento. Separadores O recurso de abas ou separadores trouxe alguma facilidade aos utilizadores. Assim como no navegador Firefox, o Dreamweaver permite realizar diversas tarefas numa única janela, dando mais organização ao seu trabalho. Código Limpo Quando se fala de um editor WYSIWYG, passa pela cabeça de alguns a questão da clareza do código. Normalmente, programas do género acabam por adicionar tags inúteis que comprometem a clareza do código. No Dreamweaver, isso não acontece! 9 10 Réguas Dinâmicas Que tal ajustar o tamanho das tabelas com o rato, guiado por uma régua? Esse recurso é muito útil para se redimensionar tabelas sem perder muito tempo. É só clicar com o rato e arrastar. Visualizador de Tags Este é um recurso interessante, principalmente para quem está a iniciar-se no HTML. De um modo adicional de visualização, HTML Tags (Exibir Tags), o programa identifica todas as tags da página sobre os seus elementos correspondentes. Assim, pode acompanhar o código criado após adicionar algum item visualmente. Editor HTML Inteligente Além do código limpo, o Dreamweaver gera automaticamente código identado, ou seja, com elementos ajustados de forma hierárquica para facilitar a compreensão do código

3 Editor de Páginas Web Dreamweaver Obter o software Passo 1 Criar uma pasta no Ambiente de Trabalho Passo 2 Deslocar-se para o site Editor de Páginas Web Dreamweaver Obter o software Passo 4 Na nova página pressionar Download Passo 3 clicar em Passo 5 Seleccionar a pasta criada no passo 1 e pressionar Guardar. Passo 6 Após finalizado o download Dreamweaver Ambiente de Trabalho A Barra de menus B Barra de Ferramentas C Área de Trabalho D Selector de painéis E Grupo de painéis F CS Live G Selector de Tags H Painel de Propriedades I Painel de arquivos Indica o modo de visualização actualmente activo para o documento em causa Code Split Design Código (Code) Permite visualizar e adicionar código HTML. Útil para quem pretender construir funcionalidade através de código HTML. Dividir (Split) Apresenta uma visualização de código e de design. Design Code Design Code Split Split

4 Design Código Activo (Live Code) Mostra somente a visualização de design na janela documento. Visualização dinâmica de código. Verificação da compatibilidade do navegador Design Code Split Código Activo (Live View) Visualizar no navegador web Visualização dinâmica. Inspect (Inspeccionar) Visualização da página web no browser. Actualizar visualizar de design Modo de inspecção do CSS. Título do documento Barra de estado A. Selector de tags B. Ferramenta seleccionar C. Ferramenta mão D. Ferramenta de zoom E. Definir ampliação F. Tamanho da janela G. Tamanho do documento e tempo de download estimado H. Indicador de codificação 23 Painel Propriedades Permite observar e editar as propriedades mais comuns dos elementos da página selecionados atualmente, como texto ou um objeto inserido. O conteúdo do Inspetor de propriedades varia de acordo com o elemento selecionado. 24 4

várias categorias, que podem ser alternadas pela seleção da categoria desejada no menu pop-up Categoria.

5 Painel Inserir O painel Inserir contém botões para criar e inserir objetos, como tabelas, imagens e links. Painel de Ficheiros Use o painel de ficheiros para visualizar e gerir os arquivos do site do Dreamweaver Os botões são organizados em várias categorias, que podem ser alternadas pela seleção da categoria desejada no menu pop-up Categoria Criar Guardar Abrir Pré-visualizar Imprimir Criar uma Página Menu File/New (CTRL+N) Guardar uma Página Menu File/Save (CTRL+S) Abrir uma Página Menu File/Open (CTRL+O)

32 Mapa Mental Objectivos da Próxima Aula Formatar páginas

6 Pré-Visualizar uma Página Menu File/Preview in Browser (F12) Imprimir uma Página Menu File Print Code (CTRL+P) Mapa Mental Objectivos da Próxima Aula Formatar páginas Web: Texto Parágrafos Listas Imagens Ficha de Trabalho 35 6

Documentos relacionados

TECNOLOGIAS DA INFORMAÇÃO E COMUNICAÇÃO INTRODUÇÃO AO MACROMEDIA DREAMWEAVER MX 2004 O Macromedia Dreamweaver MX 2004 é um software que permite a criação de páginas de Internet profissionais, estáticas