Introdução. Área de Trabalho

Tamanho: px
Começar a partir da página:

Download "Introdução. Área de Trabalho"

Transcrição

1 Dreamweaver CS5

2 Sumário Introdução... 1 Área de Trabalho... 1 Ajustes de Preferências... 3 Criando um novo Arquivo Salvando e visualizando um arquivo Trabalhando com imagens Iniciando a Construção do Site - Conceitos e Diretórios Exportando arquivos através do Photoshop Gerenciador de Arquivos - Manage Sites Estilo CSS Trabalhando com Layers Hyperlinks Rollover Image Frames e Iframes Integração com o Flash Tabelas AJAX Utilizando o Framework Spry Criando Páginas para o Site Formulário Criando o menu (Hotspot Image Map) Evento com Janela (JavaScript) Publicando o Site na Internet... 56

3

4 Introdução Adobe Dreamweaver CS5 O Adobe Dreamweaver CS5 é o software mais famoso para designers e desenvolvedores criarem seus sites de maneira rápida e fácil, podendo ser criados visualmente ou direto no código, além de muitos recursos e funcionalidades disponíveis. A novidade é que esta nova versão, inclui suporte para criações e edições mais populares dos dias atuais. Isto é ótimo, tanto para os novos desenvolvedores que estão começando a escrever códigos, quanto para os mais experientes que procuram agilidade. Área de Trabalho Para iniciar o Dreamweaver CS5, clique no botão Iniciar, Todos os Programas, opção Adobe Master Collection CS5 e clique em Adobe Dreamweaver CS5. Logo será iniciado o Dreamweaver CS5 com sua tela inicial. 1

5 Após iniciar o programa podemos visualizar a Start Page (Página Inicial), observe: Start Page (Página Inicial) Quando você executa o Dreamweaver, como padrão ele exibe a Página Inicial. Nela podemos manipular documentos. Open a Recent Item: podemos escolher qualquer documento criado antes pelo Dreamweaver. Create New: podemos criar um documento conforme o tipo que queremos (HTML, ColdFusion, PHP, ASP VBScript, XSLT, CSS, JavaScript, XML), um novo site do Dreamweaver ou mais opções, clicando em More. Top Features (videos): contém informações de como criar outra página baseada em modelo préexistente. Para desativar a Start Page, selecione a opção "Don't show again" (Não mostrar novamente), caso deixe esta opção desmarcada, sempre que iniciado o Dreamweaver exibirá a mesma. Para criar um novo documento, clique na opção HTML. Podemos observar na área de trabalho Designer, que todas as janelas e painéis estão integrados em uma única janela. 2

6 Para alterar a área de trabalho do Dreamweaver, clique no menu Window, Workspace Layout e escolha a opção Coder. Depois de atribuída a opção Coder, observamos as mudanças efetuadas na área de trabalho do Dreamweaver, clicando em cada um dos botões que estão em destaque. A área de trabalho Designer é mais utilizada e os três botões na parte superior permitem que o modo de trabalho seja alterado. Por exemplo, clicando no botão Design, o Dreamweaver muda para o modo de desenho de página. Ajustes de Preferências Para obter melhor resultado nos trabalhos do Dreamweaver CS5, podemos personalizar suas configurações na janela de preferências. Para abrir essa janela, escolha o menu Edit e clique sobre as opções Preferences; pode-se utilizar a tecla de atalho <Ctrl>+<U>. 3

7 Preferências - General Principais componentes. Show Welcome Screen: Selecionada, essa opção define que, quando abrir o Dreamweaver, inicialmente apareça na tela a janela Start Page, permitindo abrir documentos recentes e também criar outros. Reopen documents on startup: Quando estiver marcada, cada página que estava aberta quando fechamos o Dreamweaver, será aberta da próxima vez que inicializarmos o software. Warn when opening read-only files: Quando selecionada, aparecerá uma caixa de alerta toda vez que for aberto um arquivo configurado somente como leitura. Enable Related Files: Ativa arquivos relacionados automaticamente ou manualmente. Update links when moving files: Quando essa opção estiver marcada, ao mudar um arquivo do site, movendo, renomeando ou deletando, por exemplo, o Dreamweaver automaticamente muda as referências a esse arquivo que existiam em outras páginas. Quando escolhida, a opção Always, atualiza essas referências automaticamente. Se a opção Prompt for a escolhida, pergunta se deseja atualizar os arquivos, ou não atualizar 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 visualizar essas caixas de diálogo, não é necessário desmarcar essa opção, somente manter pressionada a tecla <Ctrl> quando clicar na opção de inserir objeto. Enable double-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. Use <strong> and <em> in place of <b> and <i>: No HTML existem dois tipos de formatações principais para os caracteres, sendo elas formatação física e lógica. 4

8 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 formação lógica, se desmarcada, usa a física. Maximum number of history steps: Esse valor define a quantidade de passos que será permitido voltar atrás, seja usando o comando Edit, Undo, tecla de atalho <Ctrl>+<Z>, ou usando um painel chamado History (Histórico). Podendo ser um valor entre 2 e 99. Preferências - Accessibility É nessa área que configuramos as opções de acessibilidade do software. Show attibutes when inserting: Marcando as opções Objetos de formulário (Forms objects), Molduras (Frames), Mídia (Media), Imagens (Images), ao incluir um desses elementos, será aberta uma janela com opções que torna mais fácil a configuração deles. Preferências - AP Elements Nesta área é possível configurar as opções padrão para as DIVs com o posicionamento absoluto (áreas que podem ter sua posição na página definida) usadas do Dreamweaver. Preferências - Code Coloring Nessa área configuramos como serão coloridos os códigos para facilitar a visualização. Document Type: Aqui escolhemos o tipo de documento para o qual desejamos configurar o sistema de cores do código. Esse sistema ajuda a encontrar e identificar os códigos e também possíveis erros. Para fazer a configuração desse sistema de cores, após selecionado o tipo de documento clique no botão Edit Coloring Scheme. Em seguida, é aberta uma nova janela, onde devemos selecionar o elemento desejado em Styles for e à sua direita, as cores do texto (Text color), do fundo (Background color) e aplicar Negrito (B), Itálico (I) ou Sublinhado (U). Background color: Nessa área é escolhida a cor padrão do fundo da janela do código. 5

9 Preferências - Code Format Nesta parte é possível configurar como será formatado o código pelo Dreamweaver. Tab size: Essa opção determina o tamanho utlizado pela tabulação. Esse valor é medido em espaços de caracteres. TD tag: Quando marcada a opção Do not include a break inside the TD tag, o Dreamweaver não incluiu quebra de linha do código caso ela passe a quantidade de caracteres definida em um campo. Advanced Formatting: Realiza definições do código para CSS ou para Tag Libraries. Clique no botão apropriado e na janela que se abre para efetuar suas configurações. Preferências - Code Hints O Dreamweaver nos permite que enquanto digitamos os códigos, recebemos uma dica rápida do código que é possível digitar. Preferências - Code Rewriting 6

10 Essa área do Dreamweaver é responsável por reescrever códigos que já existem em páginas que foram abertas no programa. Preferências - Copy and Paste Aqui definimos como se comportarão os elementos quando copiados de outro programa e colados no Dreamweaver na visualização Design. Preferências - CSS Styles 7

11 Nesta área configuramos opções referentes ao CSS (Cascade Style Sheets - Folhas de Estilo em Cascata), que são elementos responsáveis por quebrar limitações existentes nas marcações HTML, dando maior vantagem ao designer. Preferências - File Compare Podemos fazer uma comparação de determinados arquivos utilizando algum outro programa. Preferências - File Types/Editors Outros softwares podem ser abertos para editar os arquivos diretamente do Dreamweaver. Preferências Fonts Nessa área podemos configurar as fontes utilizadas no programa. Preferências - Highlighting 8

12 Nessa área configuramos as cores que o Dreamweaver usa para identificar certos elementos. Preferências - Invisible Elements Configuramos aqui as representações para elementos invisíveis. Show: Nesse espaço se determinam os elementos invisíveis que deseja ser representados por um ícone na tela de desenvolvimento, optando entre: Âncoras com nome (Named anchors), Scripts, Comentários (Comments), Quebras de linha (Line breaks), Mapas de imagens do cliente (Client-Side image maps), Estilos incorporados (Embedded styles), Campos ocultos de formulários (Hidden form fields), Delimitador de formulários (Form delimiter), Pontos de ancoragem de DIVs com posicionamento absoluto (Anchor points for AP elements), Pontos de ancoragem de elementos alinhados (Anchor points for aligned elements), Tags visuais de markup de servidores (Visual Server Markup Tags - ASP, CFML,...)) e propriedade display do CSS determinada como nenhuma (CSS display: nome). Preferências - New Document Ajustamos as opções para novos documentos do Dreamweaver. Entre algumas, temos: Default document: Escolhemos o tipo padrão para os documentos que vamos criar para o site, escolhendo no menu o tipo que queremos. Default extension: Nessa opção determinamos a extensão padrão para os arquivos a serem criados. Unicode Normalization Form: Se escolher a codificação Unicode (UTF - 8), aplica o formato de normalização que você escolher nesse menu. Preferências - Preview in Browser Escolhemos as configurações para visualização dos arquivos no navegador. Browsers: Podemos definir os navegadores a serem usados para a visualização das páginas. É possível adicionar um navegador clicando no sinal (+) e definir se ele será o primário (chamado pela tecla de atalho <F12>), marcando a opção Primary browser ou secundário (chamado por <Ctrl>+<F12>), marcando Secondary browser. Preview using temporary file: Selecionado, cria uma cópia temporária do arquivo no servidor para podermos visualizá-la. 9

13 Preferências - Site Always show: Configuramos o site (Local ou Remoto) que aparecerá em um dos lados da janela: à Esquerda (Left) ou à Direita (Right). FTP connection: Marcando essa opção, se você estiver conectado ao seu site FTP e se mantiver inativo pelo tempo estipulado à direita deste item, será automaticamente desconectado. FTP time out: Aqui configuramos o tempo máximo que o Dreamweaver faz a tentativa de se conectar com o site FTP. FTP transfer options: Em casos de usuário inativo, configura-se após quanto tempo será escolhida a opção padrão de determinada caixa de diálogo durante o uso FTP. Proxy host: Se você se encontrar atrás de um firewall, deve especificar seu endereço nessa área, caso não, deve deixá-la em branco. Proxy port: Utilizado para fazer a escolha de uma porta se estiver utilizando um firewall e a mesma for diferente da 21. Preferências - Status Bar Velocidade de largura de banda a ser simulada e o tamanho da tela são configuradas nessa área. 10

14 Preferências - Validator Utilizamos esta opção para verificar se nos códigos existem erros nas tags ou de sintaxe. If no DOCTYPE is detected, validate against: Nesta parte, configuramos o tipo de código que vai utilizar como referência para aplicar a validação, caso não tenha sido detectado o tipo de documento, restando apenas escolher as opções na lista disponível. Criando um novo Arquivo Ao iniciar o Dreamweaver CS5, temos em sua área de trabalho o Start Page, onde podemos escolher que tipo de arquivo iremos criar ou se desejamos utilizar um documento pronto. Durante o curso, todos os arquivos que criamos foram do tipo HTML, linguagem de programação padrão para Web. Existem duas maneiras de se criar um novo arquivo: através do menu File, opção New ou então, de um modo mais simples, clicando sobre a opção de arquivo desejada no Start Page. Clique na opção HTML, no Start Page. Após o clique, um novo arquivo é criado e exibido na área de trabalho do Dreamweaver. Note também que aparece no canto superior esquerdo, o Cursor de edição. 11

15 Neste novo arquivo, podemos digitar um texto, inserir uma imagem ou qualquer outro componente do Dreamweaver, e assim que este arquivo for salvo, poderá ser visualizado no browser (Internet Explorer, Mozilla Firefox ou outros). Acima da janela de documento encontra-se um grupo de botões denominado Barra de Ferramentas. Esses botões permitem a execução de algumas tarefas de forma rápida, como alteração do modo de visualização, gerenciamento de arquivos do site, visualização da página no navegador e configuração de opções. No campo Title é possível introduzir um texto a ser apresentado pelo navegador na Barra de Título. O menu View permite que sejam ativadas algumas opções de auxílio ao webdesigner, como régua e grade de linhas. A imagem a seguir, mostra a grade e as réguas apresentadas na área de trabalho. 12

16 É importante mencionar como ativar as réguas (horizontal e vertical) da área de trabalho caso elas estejam desabilitadas. Essas réguas são úteis quando há a necessidade de orientação quanto à posição exata de determinado objeto dentro da página. Para ativá-las, clique no menu View, opção Rulers e selecione Show. Para inserir um texto em uma página do Dreamweaver, basta digitar o texto desejado quando o cursor de edição estiver em modo de espera. Com a janela do Dreamweaver ativa, digite: Primeiro Exemplo. Como um editor de textos qualquer, podemos apagar os textos digitados, bem como editá-los, alterando tamanho e estilo da fonte e aplicando efeitos como Negrito, Itálico, etc. Para formatar um texto, é necessário que o mesmo esteja selecionado. Posicione o cursor ao lado do parágrafo digitado e clique uma vez. 13

17 Após a seleção, o painel Properties (Propriedades) habilita suas funções para edição de textos. HTML: abre o painel HTML do Dreamweaver. Format: formata o parágrafo com estilos de textos e alinhamentos predefinidos pelo Dreamweaver. Bold e Italic: permitem aplicar a formatação em Negrito e Itálico. Formatação de Texto: Unordered List: aplica marcadores ao(s) parágrafo(s) selecionados(s). Ordered List: aplica numeração ao(s) parágrafo(s) selecionado(s). Remove Blockquote: retira os recuos de parágrafo. Blockquote: define um recuo de parágrafo. Com o texto selecionado, clique no drop-down da opção Format e selecione a opção desejada. Alteramos a cor do texto através da Paleta de cores. Após o clique, é exibida a Paleta de cores. Posicione o cursor sobre a cor desejada e clique para que ela seja aplicada ao texto. O Dreamweaver CS5 abre a caixa de diálogo New CSS Rule (Nova regra CSS). Nesta caixa devemos informar o tipo e o nome do seletor de contexto CSS. Selecione a primeira opção disponível na caixa de combinação, digite a descrição Título na caixa Selector Name e clique no botão OK. 14

18 CSS: Abre o painel de CSS do Dreamweaver. Targeted Rule: Exibe as regras criadas através do CSS. Font: Possui uma lista de fontes para formatação de texto. Text Color: Paleta de cores que permite aplicar cor ao texto. Align Left: Alinha o parágrafo à esquerda. Align Center: Alinha o parágrafo ao centro. Align Right: Alinha o parágrafo à direita. Justify: Justifica o parágrafo. Salvando e visualizando um arquivo Todo e qualquer arquivo criado no Dreamweaver, para ser visualizado em um browser, deve, antes de tudo, ser salvo. Com o arquivo desejado, clique no menu File, opção Save. 15

19 Após o clique será exibida a caixa de diálogo Save As. Nesta caixa, devemos informar o nome do arquivo e o local onde ele será salvo. Em Tipo, mantenha selecionada a opção mostrada abaixo, para que o arquivo seja salvo com a extensão.html. Feito isso, clique sobre o botão Salvar da caixa de diálogo. No Dreamweaver, com seu documento em uso, clique sobre o botão Preview/Debug in browser. Em seguida, selecione a opção Preview in IExplore para visualizá-lo no Internet Explorer. Após o clique, o IE será exibido, tendo como conteúdo, a página HTML criada por você. Observe na Barra de Título da janela do Internet Explorer (IE), que o arquivo ainda não possui título. Geralmente definimos um nome para cada página como um informativo, ou ainda, um único título padrão para todas as páginas do projeto. 16

20 Retornando ao Dreamweaver, definiremos um título para a nossa página. Na Barra Document, selecione e apague o texto da caixa Document Title. Com o cursor no campo Title, digite a descrição que desejar. Além de visualizarmos nosso arquivo no Internet Explorer (IE), podemos também utilizar outros browsers. Para isso, clique sobre o botão Preview/Debug in browser e escolha a opção Edit Browser List. Será iniciada a janela de Preferences. Para adicionar um novo browser, clique sobre o botão Add Browser. Na caixa de diálogo Add Browser, clique sobre o botão Browse... Na caixa Select Browser, abra a pasta e selecione o ícone do navegador desejado. 17

21 Ao indicar o caminho do browser, selecione o mesmo como secundário pois temos o Internet Explorer como navegador primário. O novo browser será adicionado à lista. No Dreamweaver CS5, com seu documento ativado, clique sobre o botão Preview/Debug in browser e selecione a opção Preview in firefox.exe. Após o clique, o Mozilla Firefox será exibido, tendo como conteúdo a página Html. No Dreamweaver pode ser encontrado o recurso Device Central que é um aliado para quem desenvolve sites para dispositivos móveis. Ele traz skins de diversos handhelds e celulares, e formata o conteúdo Html dentro da área de cada um. No arquivo desejado, clique em Preview/Debug in browser e escolha a opção Preview in Device Central. Caso queira visualizar utilizando outros tamanhos de display, navegue pelas opções da guia Test Devices, opção Flash Player. 18

22 Trabalhando com imagens Trabalhar com imagens, quando falamos de Internet, pode parecer um processo simples, mas não é. Digamos que seja simples inserir um arquivo de imagem em uma página HTML, sim, mas esta deve seguir alguns padrões, para que por exemplo, não implique na demora do carregamento da página do projeto ou então, que esteja com um nível de qualidade baixo, a ponto de implicar na visualização perfeita realizada pelo usuário. Os tipos de arquivos de imagens mais usuais, pelo fato de suas características atenderam aos requisitos de páginas web, são JPG (JPEG), GIF e PNG. Formato JPEG (Joint Photographic Experts Group) O formato de arquivo JPEG é o formato preferido para imagens fotográficas ou em tom contínuo, pois os arquivos JPEG podem conter milhões de cores. À medida que a qualidade de um arquivo JPEG aumenta, também aumentam o tamanho e o tempo de download do arquivo. Você geralmente consegue um bom equilíbrio entre a qualidade da imagem e o tamanho do arquivo compactando um arquivo JPEG. O JPEG é um dos formatos de imagens mais populares e isso se deve à capacidade de formar imagens fiéis à original. Além disso, os arquivos em JPEG costumam não ser grandes. Formato Gif (Graphic Interchange Format) Os arquivos GIF usam um máximo de 256 cores e são mais adequados para a exibição de imagens em tom não-contínuo ou imagens grandes de cores simples, como barras de navegação, botões, ícones, logotipos ou outras imagens com cores e tons uniformes. Formato PNG (Portable Network Group) 19

23 O formato de arquivo PNG é um substituto sem patentes para GIFs que inclui suporte à imagens true-color, em tons de cinza e de cores indexadas, além de suporte a canal alfa para transparência. PNG é o formato de arquivo nativo do Adobe Fireworks. Os arquivos PNG retêm todas as informações originais de camada, vetor, cor e efeitos (como sombras) e todos os elementos são completamente editáveis, continuamente. Os arquivos devem ter a extensão.png para serem reconhecidos como arquivos PNG pelo Dreamweaver. Graças aos formatos JPEG, GIF e PNG, foi possível utilizar figuras em várias aplicações em imagens na Internet. Até mesmo o layout das páginas de Internet utilizam estas imagens e é importante frisar que existem vários outros tipos de formatos para imagens. As imagens são sempre inseridas na posição em que o cursor estiver, seja em uma linha simples do documento, seja dentro de uma tabela, etc. Para que a imagem seja inserida centralizada, clique em Align Center. Logo será exibida a caixa New CSS Rule, em Selector Name:, digite a descrição e clique no botão OK. Com o cursor na posição definida, clique sobre o botão drop-down da opção Images, no painel Insert, guia Common. Note que é exibido um submenu com as opções de inserção disponíveis. Escolha a opção Image. Após o clique, será exibida a caixa de diálogo Select Image Source, onde devemos escolher qual será a imagem a ser inserida no documento. 20

24 Após escolher a imagem, clique no botão OK, para que a mesma seja inserida na página, no local indicado. Após o clique, será exibida uma mensagem na qual podemos informar um pequeno texto que deve ser mostrado no navegador quando não for possível carregar a respectiva imagem. Perceba que com a imagem selecionada, o painel Properties exibe campos que nos permitem fazer alterações nas propriedades da imagem. Dentre os recursos mais utilizados, temos: possibilidade de inserir um link, definir uma borda, alinhamento, etc. Não aconselhamos que seja alterado o seu tamanho através das caixas W (Width) e H (Heigth), pois as variações não são proporcionais, o que pode causar a deformação da imagem. Para aplicar uma imagem ao fundo de uma página, no arquivo desejado, clique no botão Page Properties (Propriedades da Página), localizado no painel Properties. Na caixa de diálogo aberta, clique em Browse..., para que seja possível a localização da textura que iremos inserir. Através do campo Examinar, selecione o local desejado e clique duas vezes na imagem. Em seguida, clique no botão Apply para adicionar a textura do arquivo e clique em OK para confirmar. No campo Title, digite a descrição que desejar para que a mesma seja exibida na guia da página. 21

25 Integração com o Photoshop CS5. Com a compra da Macromedia pela Adobe, se tornou possível a integração entre o Dreamweaver e o Photoshop. Vamos aprender como inserir um arquivo criado no Photoshop que possui a extensão.psd, em uma página do Dreamweaver. Após inserir a imagem.psd em um novo arquivo, como a extensão do Photoshop (.psd) não pode ser utilizada em páginas HTML, será aberta a janela Image Preview. Nesta janela serão realizados os ajustes necessários na imagem que será exportada. Caso não realize nenhuma alteração na imagem, clique no botão OK. Agora podemos trabalhar com uma imagem que foi gerada a partir de um arquivo do Photoshop. Ao selecionar a imagem inserida, perceba que no painel Properties terá um novo campo chamado Src, representado pelo ícone do Photoshop, o mesmo indica o caminho do arquivo psd. Outra forma de integração é copiar uma imagem do Photoshop e colá-la diretamente no Dreamweaver. Iniciando a Construção do Site - Conceitos e Diretórios Um site do Dreamweaver CS5 é um conjunto de arquivos que formam as páginas da Web. Você pode criar páginas da Web no computador, carregá-las em um servidor Web e manter o site transferindo arquivos atualizados sempre que os salvar. Um dos pontos mais importantes, quando iniciamos a construção de um projeto de site, é a organização dos arquivos em diretórios e subdiretórios. 22

26 O mais usual é deixar as páginas HTML do site na raiz de diretórios e separar em pastas distintas as imagens, o material pesquisado, os arquivos de download, etc. Nesta lição, criamos uma estrutura de diretórios que receberá todo o material utilizado para o desenvolvimento de um Website. Após criar as pastas desejadas, acesse o diretório, para visualizar o seu conteúdo. Logo em seguida, abra a pasta Arquivos PSD. Acessando o diretório. Exportando arquivos através do Photoshop Existem várias formas de se criar a estrutura de um site. Podemos abrir o Dreamweaver, criar algumas tabelas, inserir alguns dados e imagens e pronto! Além destas opções, podemos também "desenhar" ou desenvolver um layout em um software de edição de imagens, como o Photoshop. O site pode ser totalmente desenvolvido em um destes softwares ou apenas parte dele, como por exemplo, um menu diferente ou apenas o seu topo, etc. Este arquivo é então exportado como HTML, com uma pré estrutura de tabelas montada. Através do Photoshop CS5, clicamos sobre o menu File, opção Open, e abrimos um arquivo que, quando exportado, será a página principal do site. Após escolher a opção do menu File, será exibida a caixa de diálogo Open. Localize a Sua Pasta e acesse o diretório criado por você. Clique sobre o arquivo e no botão Abrir. 23

27 Pressione as teclas <Ctrl>+<+>, para visualizar o arquivo com Zoom de 100%, caso ainda não esteja. Agora pressione a tecla <Tab>, para que possamos vê-la por inteira, assim ficarão ocultas as Barras de Ferramentas. Para voltar as barras, aperte a tecla novamente. O que temos é um arquivo que contém várias imagens e textos. Caso você tenha feito o curso de Photoshop CS5 ou tenha conhecimentos deste programa, pode perceber que seu desenvolvimento não é complicado, contendo algumas formas, imagens e textos e formando o layout de um site. Note como no mesmo arquivo, definimos um topo para a página, um menu, um rodapé, etc. Mas, o que fazer para definir cada uma destas áreas para um documento Html? Simples! Não podemos disponibilizar todo o arquivo na Web, pois como dito anteriormente, as páginas devem ter um carregamento um tanto quanto rápido, e uma imagem com esta complexibilidade, comprometeria tal exigência. O que devemos fazer então, é dividir este arquivo em partes, para que cada uma seja carregada separadamente, de uma forma mais rápida. Utilizamos então duas ferramentas do Photoshop: as Slices, que definem as partes do arquivo, e as Guides, para que as Slices sejam desenhadas. Para posicionar as Guides ou Linhas-Guia, precisaremos da régua (Rulers). Com a régua sendo exibida, posicionaremos as Guides nos locais de cortes que faremos na imagem. Clique em um ponto qualquer da Régua Horizontal e com o botão do mouse pressionado, arraste a linha para o ponto 5,0 da Régua Vertical. 24

28 Clique na Régua Vertical e arraste uma linha-guia para a posição desejada da Régua Horizontal. Não se esqueça de que você pode utilizar o Zoom (<Ctrl>+<+> ou Ctrl+<->) e mantendo a Barra de Espaço pressionada, clicar para movimentar o documento. Diminua o Zoom para 100%, altere o valor na Barra de Status e pressione <Enter>. Veja que agora o documento já está com as guias posicionadas para os cortes. Então, definimos as fatias da imagem ou Slices. Aperte a tecla <Tab> para ativar as Barras de Ferramentas. Mantenha o mouse pressionado sobre a ferramenta Crop Tool e quando surgir as opções, clique sobre Slice Tool. Exportando arquivos através do Photoshop Após o clique, o cursor tomará outro formato: de uma pequena "faca". As Slices serão definidas dentro dos espaços gerados pelas Guides. Utilize as teclas <Ctrl>+<-> para reduzir o Zoom. Ao terminar a fatia, pressione as teclas <Ctrl>+<+>. 25

29 Agora, que o arquivo já está pronto para ser exportado, utilizaremos um recurso do Photoshop que, ao salvar o documento, analisa cada parte separada por Slices e exporta um arquivo Html e Imagens, em separado. O programa cria uma página com uma tabela, respeitando o número de linhas e colunas definidas pelas fatias; cria uma pasta no diretório escolhido por você com o nome de images e armazena dentro dela os arquivos e imagens em formato GIF. Clique no menu File, opção Save for Web & Devices... Em seguida, surgirá a caixa de diálogo Save for Web & Devices, exibindo a imagem que será exportada. Verifique se na caixa Optimized file format está selecionada a opção GIF e clique sobre o botão Save. Será exibida agora a caixa de diálogo Save Optimized As. Em Salvar em, localize a Sua Pasta e depois o diretório Dream_CS5. Modifique o formato do arquivo através do campo Format, clique no botão drop-down e selecione HTML and Images. As caixas de diálogos serão fechadas logo após o término do processo de exportação. Feche o Photoshop e confirme a gravação do arquivo. Abra o Windows Explorer e acesse seu diretório de arquivos, para que seja possível ver se foi realizado o processo de exportação. 26

30 O Photoshop exporta o arquivo com extenção HTML (index) e cria a pasta images, com os arquivos.gif. Gerenciador de Arquivos - Manage Sites Tanto para sites simples quanto para os mais complexos, é inevitável a transferência de arquivos de diretórios para diretórios, cópias, etc. Bem como, ficar a todo momento, exibindo-os para manutenção, edição ou simples conferência de dados. Vimos até agora, como abrir arquivos e modelos através do menu File localizando os diretórios desejados e utilizamos o Windows Explorer para a cópia ou transferência de arquivos. O Dreamweaver possui um gerenciador de arquivos (Manage Sites) que nos permite ter acesso de forma simples e objetiva aos arquivos e diretórios do projeto no qual estivermos trabalhando. A principal função do gerenciador está ligada aos recursos de transferência de arquivos para servidores externos, ou seja, é um software FTP ligado ao programa. Utilizando comandos simples, podemos fazer alterações em nossos documentos e já atualizá-lo via web, em seu servidor, sem a necessidade de um outro programa para tal. Com o painel exibindo suas opções, temos algumas a destacar. 27

31 Nome do Projeto: no gerenciador, é permitido manter vários projetos cadastrados, e com isso, basta escolher o projeto desejado. Local de Trabalho: através deste campo podemos definir se queremos visualizar os arquivos existentes localmente (na máquina) ou na Web (servidor do site). Barra com os botões de ações: esta barra contém as principais operações do gerenciador. Gerenciador de arquivos: é neste local que serão exibidos os diretórios e os arquivos do projeto em uso. Abra o Dreamweaver CS5 e o arquivo index.html, caso o mesmo não esteja aberto. Vamos construir para esse arquivo um Manage Sites. No painel Files, clique em Manage Sites. Após o clique, surgirá a caixa de diálogo Manage Sites, clique no botão New. A próxima caixa de diálogo que surgirá será Site Setup for Unnamed Site 2, com a guia Site ativa. Em Site Name informamos o nome do site, apague a descrição e digite o que desejar. Em seguida, para indicar o caminho do arquivo, ative o Browse for folder para localizar o arquivo dentro da sua subpasta Dream_CS5. Clique no botão Salvar. 28

32 Ao retornar à caixa de diálogo Site Setup, clique na opção Advanced Settings. Em Local info, vamos indicar o caminho das imagens, ative o Browse for folder, localize a pasta Dream_CS5, em seguida abra a subpasta images, clique no botão Salvar. Ao retornar a janela Site Setup, clique no botão Save. Na última janela, clique no botão Done. Ao finalizar a construção do Manage Site, surgirá seu Código, sua pasta images, PSD e seu arquivo index.html. Clique sobre os sinais + ou - para exibir ou ocultar os arquivos dos diretórios. O Servidor Remoto é o local onde seu site será publicado, ou seja, um servidor que possa ser acessado por usuários do mundo todo, nas 24 horas do dia. Todo arquivo que faz parte do site deve ser copiado para este servidor. Este processo é chamado de Upload ou "Subir arquivos". Na Barra de Menus, encontramos comandos para a criação de arquivos e diretórios nos locais de trabalho (Local ou Remoto), bem como, para a criação e configuração de novos sites no gerenciador. Clique novamente sobre o botão Collapse to show only local or remote site para reduzir o tamanho da janela. 29

33 Estilo CSS As Folhas de estilo em Cascata CSS (Cascading Style Sheets) permitem a formatação automática e rápida dos documentos HTML. Por exemplo, se você definiu um estilo para os textos do título da página e o aplicou a várias páginas, quando fizer alguma alteração no estilo, como, por exemplo, mudar a cor dos caracteres, todas as páginas que apresentam o título configurado com ele serão automaticamente atualizadas. Repare que do lado direito da tela do Dreamweaver, existe um painel chamado CSS. Nele, existe uma guia chamada CSS Styles, onde editaremos os estilos CSS. Caso não exista na tela este painel, clique no menu Window e escolha a opção CSS Styles. Attach Style Sheet: adiciona ao documento um estilo já pronto (arquivo.css). Esse procedimento será explicado mais adiante. New CSS Rule: cria um estilo através de uma caixa de diálogo. Edit Style Sheet...: edita o estilo selecionado na lista. Disabe/Enable CSS Property: ativa e desativa o acesso às propriedades da lista. Delete CSS Property: apaga o estilo selecionado na lista. 30

34 Para iniciar um estilo, clique no ícone. Surgirá a caixa de diálogo New CSS Rule. Selecione a opção Class, o qual será o estilo aplicado a cada tag de script contido em sua página. Depois especifique o nome no campo Selector Name: como Estilo1. Selecione também a opção New Style Sheet File. Em seguida, clique no botão OK. Aparecerá uma nova caixa de diálogo Save Style Sheet File As, onde você deve especificar o nome do arquivo (.CSS) e o local onde ele será gravado. Defina o nome como Texto, indique o caminho da Sua Pasta\Dream_CS5 e depois clique no botão Salvar. É importante salientar que é preferível salvá-lo no mesmo local onde será gravada a página HTML. Após criar o arquivo, surgirá a caixa de diálogo CSS Rule Definition for, podemos definir as características do estilo criado, especificando: fonte, cor, fundo da janela, posicionamento, tabela, etc. 31

35 Através do botão Code, repare no cabeçalho do código HTML e veja a ocorrência do estilo, especificando que neste caso, está linkado a um arquivo externo. Ative o botão Design, no painel Properties, mantenha a opção HTML selecionada e clique no drop-down do campo Class para confirmar a existência do estilo criado. Para formatarmos o texto, selecione o mesmo. Depois, vá até o campo Class e escolha Estilo1. 32

36 Clique no botão Split e repare no código. A propriedade do estilo está em forma de tag e o texto passa a ter uma nova formatação. Trabalhando com Layers Layer (ou camada) é um elemento de páginas HTML que você pode posicionar em qualquer lugar, pois, diferente dos outros, esse parece "flutuar" sobre o layout da página. Assim como numa célula de tabela, numa layer, é possível inserir textos, imagens ou qualquer outro conteúdo que possa ser inserido em um documento HTML. No Dreamweaver, você pode usar layers para construir o layout de sua página. É possível colocar layers uma sobre a outra, ocultar alguns enquanto mostra outros e movê-los pela tela. Para inserirmos uma layer: No menu Insert, opção Layout Objects, escolha AP Div. Você também pode inseri-las através da Barra Insert, na opção Layout e ferramenta Draw AP Div. 33

37 Você se lembra do painel CSS Styles? Pois bem, é nele que encontramos a guia AP ELEMENTS, que contém a relação de layers criadas. Aqui, podemos ocultar layers, nomeá-las e ordená-las umas sobre as outras. O painel Properties também apresenta as propriedades da layer selecionada. Hyperlinks Hyperlink (ou somente link) é o termo usado para o recurso que faz uma "ligação" entre um local e um outro componente, que pode ser uma página, figura, vídeo, , etc. Os links são os responsáveis pela navegação rápida entre as páginas e o acionamento dos downloads. A propósito, você usa links o tempo todo durante o curso, clicando em Voltar, Próximo, etc... No Dreamweaver é muito rápido e fácil elaborar os vários tipos de links. Nessa lição aprenderemos como "linkar" uma página à outra, a fazer links de s e outras propriedades. Com a palavra desejada selecionada, clique no botão HTML do painel Properties e depois no botão Browse for File. 34

38 Com esse procedimento, você escolherá o destino desse link. Você também pode digitar o caminho no campo Link, do painel Properties. Pronto! Você acabou de fazer um link para uma página. Dê um clique fora do texto e repare que agora, o texto está na cor azul e sublinhado. Essa é uma característica padrão dos links. Clicando no botão drop-down, você verá uma lista com 5 opções de alvo, caso a opção não esteja ativada, clique sobre o link criado para ativá-la. _blank e _new:: as duas opções tem a função de carregar a página em uma nova janela. _parent: carrega a página em um frame ou janela do frame que contém o link. _self: carrega a página no mesmo frame ou janela do link. Essa opção é a mesma da padrão. _top: carrega a página em uma janela maximizada em toda a tela (fullscreen), removendo todos os frames. Rollover Image O Rollover Image, é uma opção muito conhecida do Dreamweaver. Quando você acessa um site e passa o mouse por cima de uma determinada imagem e a mesma se altera, esse efeito chamamos de Rollover Image. Este efeito funciona por meio de substituição de uma imagem por outra. Clique no menu Insert, Image Objects e selecione a opção Rollover Image. 35

39 A caixa de diálogo Insert Rollover Image será aberta. Image name: Um nome para seu Rollover. Original image: Primeira imagem que irá aparecer. Rollover image: Imagem que irá aparecer quando você passar o mouse por cima. Preload rollover image: Marque esta opção para que quando a página carregar, sua outra imagem seja carregada também. Alternate text: Texto que irá aparecer junto à imagem. When clicked, Go to URL: Link da sua imagem. Preencha o campo Image name com o nome que desejar. Este é um nome de identificação desse objeto. Clique sobre o primeiro botão Browse..., e escolha a imagem desejada e clique em OK. Clicamos no próximo botão Browse... para selecionarmos a outra imagem que aparece quando o cursor do mouse estiver posicionado sobre o objeto. O campo When clicked, Go to URL representa o endereço de outra página, a qual será aberta após o clique no botão. Frames e Iframes Às vezes é interessante manter uma parte da página fixa e outra parte variável. Isso é possível, dividindo-se a página em partes, isto é, em Frames. Esse recurso, apesar de pouco popular, continua sendo uma boa alternativa. A principal vantagem de uma página com frames é que podemos fazer links em um deles e carregar o conteúdo linkado no outro. Clique no menu File no Dreamweaver e selecione a opção New. Na caixa de diálogo New Document, selecione Page from Sample e, em Sample Folder escolha Frameset. Serão apresentados 15 tipos de disposição de frames. Escolha Fixed Top, Fixed Bottom e clique no botão Create. 36

40 O documento criado apresenta 3 frames: o topo (TopFrame), o principal (MainFrame) e o inferior (BottomFrame). Para salvar este documento, utilize o comando Save Frameset As. Salvamos o arquivo com a descrição frames.html dentro da sua Sua Pasta e da subpasta Dream_CS5. Primeiramente faremos com que esse documento comporte-se como três páginas distintas, mas em conjunto. O frame do topo abrirá uma determinada página, o frame inferior outra e o principal também. Escolha a opção Frames, do menu Window. Você verá o painel Frames ativado. Aqui, você pode selecionar o frame desejado clicando com o mouse. Após selecionar o topframe, no campo Src do painel Properties, especifique o caminho para o arquivo desejado. 37

41 Confirme a caixa de diálogo que surge, clique em Sim para fazer a cópia do arquivo que está sendo inserido e na próxima caixa, clique em Cancelar. Selecione agora o bottomframe pelo painel Frames. No campo Src, indique o caminho para o outro arquivo. Arquivo inserido. Selecione agora o mainframe pelo painel Frames. No campo Src, indique o caminho para o arquivo index.html. Teste sua página. Veja que o topframe e o bottomframe ficam estáticos, enquanto o mainframe possui uma Barra de Rolagem vertical e horizontal. Integração com o Flash Atualmente, os browsers têm a capacidade de exibir inúmeros tipos de arquivo de imagem, som e multimídia. Essa variedade contribui muito para a criação de páginas cada vez mais criativas. Uma das tecnologias multimídia mais usadas em páginas para web é o Flash. Esses arquivos permitem animação, som e interação, aumentando a interação com o usuário e melhorando a atratividade da página. Podemos inserir facilmente imagens e conteúdo criados com o Adobe Flash em um documento do Dreamweaver. Você também pode editar uma imagem ou arquivo SWF no editor original depois de inseri-los em um documento do Dreamweaver. 38

42 Para inserir um arquivo Flash, vá até o menu Insert, opção Media e escolha SWF. Você também pode fazê-lo através da Barra de Ferramentas Common, no botão Media : SWF. Você provavelmente verá uma mensagem avisando que se deve salvar o documento antes. Clique em OK e na caixa de diálogo aberta, digite a descrição desejada e clique em Salvar. Na caixa de diálogo Select SWF, procure pelo arquivo, selecione-o e clique no botão OK. Clicando em OK, surge a mensagem confirmando se quer salvar uma cópia do arquivo que está sendo inserido, clique em Sim, mantenha localizada a Sua Pasta e depois confirme clicando no botão Salvar. Após salvar o arquivo, surgirá a caixa de diálogo Object Tag Accessibility Attributes, clique somente no botão OK, pois não vamos colocar título. Como todo componente, o Flash tem suas propriedades específicas. Repare no painel Properties ao selecionar o componente. 39

43 Salve as alterações do arquivo e teste sua página para ver como ficou. A animação deve ser exibida imediatamente. Tabelas O uso de Tabelas em documentos HTML é muito útil na apresentação de informações de maneira organizada. Tabelas são objetos que inserimos nos arquivos para organizar a estrutura de uma página. Cada Tabela é formada por um número N de linhas, que pode ser dividida por um número N de colunas, chamadas de Células. É uma ferramenta eficaz para apresentar dados tabulares e dispor o texto e os gráficos. Embora as colunas não sejam, em geral, especificadas explicitamente no código HTML, o Dreamweaver permite que você manipule colunas, bem como linhas e células. Posicione o cursor na célula referente a imagem desejada. Feito isso, clique sobre o botão Table, no painel Common. Na caixa de diálogo Table, temos diversas opções que podemos definir antes de inserir a tabela: seu tamanho, o número de linhas e colunas, a espessura da borda, etc. Vejamos as opções de edição mais utilizadas. 40

44 Table size: Rows: número de linhas. Columns: número de colunas. Border thickness: espessura da borda. Se definirmos o valor 0, quando visualizada no browser, a tabela não exibirá suas linhas. Cell padding: define o espaço entre a célula e seu conteúdo. Cell spacing: define o espaço entre cada uma das células. Table width: o primeiro campo define o tamanho da tabela e o segundo se esse valor deve ser em pixels ou percent (porcentagem), em relação ao documento. Accessibility: Caption: neste campo, podemos definir um nome para cada tabela, podendo então diferenciálas entre si. Header: As opções contidas em Header permitem que se defina qual será o cabeçalho da tabela, ou seja, quais as células que receberão formatações diferentes das demais. Preencha a caixa de diálogo: Clique sobre o botão OK. A tabela será inserida na posição definida pelo cursor. Na caixa de diálogo, informamos que a tabela deverá ser formada por 1 linha e 1 coluna. Definimos o valor 140 para o seu tamanho. A tabela também não terá sua borda visível e não haverá nenhum espaço entre as células e seus conteúdos por isso os demais campos estão com valor 0. 41

45 Para retirar a seleção de uma tabela, basta clicar em qualquer ponto da página. Sempre que desejarmos fazer algum tipo de alteração em uma tabela, devemos selecioná-la antes. Existem duas formas de se fazer isto: clicando sobre a borda da mesma ou ativando um pequeno menu de opções. Com a tabela selecionada, formatamos o seu alinhamento. No painel Properties, clique sobre o botão drop-down do campo Align e escolha a opção Center. Mesmo após a inserção de uma tabela, com número de linhas e colunas definidas, ainda podemos inserir mais algumas ou até mesmo excluí-las. Posicione o cursor na célula da tabela e pressione a tecla <Tab>. Veja que uma linha será adicionada, respeitando a formatação da tabela. Clicando com o botão direito do mouse sobre uma das células será exibido um menu. Na opção Table temos disponível um submenu com algumas das formatações disponíveis. Para inserir mais uma coluna na tabela, escolhemos a opção Insert Column, do menu de opções citado acima. 42

46 Ainda podemos definir o número de linhas e colunas através do painel Properties. Selecione a tabela, utilizando uma das formas mostradas anteriormente, altere o valor do campo Colls para 5 e pressione <Enter> para confirmar. É comum, em determinados casos, a necessidade de transformar várias células em uma só, para chegar a determinados alinhamentos da tabela. Este processo é chamado de Merge ou Mesclar. Aprenderemos a mesclar uma célula para começar a inserir o conteúdo do site. Selecione as seguintes células, como mostra o exemplo abaixo, clique sobre a primeira e com o cursor pressionado, arraste até a última. Com o intervalo de células selecionado, clique sobre o botão Merges selected cells using spans, no painel Properties. Após o clique, as células selecionadas tornar-se-ão uma só 43.

47 AJAX Utilizando o Framework Spry Uma das maiores novidades desde a versão CS3 é a capacidade de gerar páginas em AJAX, o qual está ficando muito popular. O que é o AJAX? Através do AJAX temos na verdade um sistema que gera uma página inicial e simultaneamente recebe informações que são armazenadas para posteriormente utilizá-las. Clicando, por exemplo, em um botão ou link, a demora à qual estávamos acostumados desaparece, pois o próprio sistema usa as informações que possui e muda na própria página que está utilizando as áreas que terão modificações. O Gmail é um site que funciona desta forma, por exemplo. Utiliza principalmente XML e JavaScript, mas como era de se esperar, desenvolver diretamente um conteúdo AJAX demandaria um conhecimento profundo das tecnologias que o formam. Para facilitar o trabalho, temos diversos frameworks (uma espécie de biblioteca de códigos) para criar conteúdo AJAX. A Adobe possui o seu framework para criar conteúdo AJAX, chamado Spry. Spry Menu Bar A estrutura do Spry destina-se principalmente aos profissionais de design. Agora iremos conhecer alguns elementos denominados Spry Widgets, que são na realidade elementos principalmente de interface, como: menus tabs, etc, e que utilizam o framework Spry para tornar mais interessante seu resultado visual. A primeira opção que iremos conhecer é a Spry Menu Bar, uma Barra de Menus. Na Barra Insert, aba Spry, clique sobre Spry Menu Bar. Você poderá escolher dois layouts de menus, escolha o Horizontal e clique em OK. Após o clique, o menu será inserido. Selecione a parte de cima do menu (que possui uma aba azul com o texto Spry Menu Bar) habilitando assim a opção Properties. 44

48 Vamos alterar o seu "nome", para isso apague o texto MenuBar1 e o substitua com a descrição desejada. Para alterar o nome destes menus, selecione o Item 1. Visualize o campo Text, apague o Item 1, digite a descrição desejada e pressione <Enter>. Outra opção do Framework Spry que pode ser bem aplicada é a Spry Tabbed Panels. Em um novo documento, clique sobre a opção Spry Tabbed Panels. Selecione o Spry Tabbed Panels e observe suas propriedades. Em Properties temos a opção Panels onde é exibida a lista de guias já inseridas. Para alterar o nome da guia, selecione-a no documento. Após a seleção, digite a informação. Logo abaixo podemos visualizar um campo que contém o texto Content 1, neste campo vamos inserir um pequeno texto. 45

49 Com a guia ativa, vá até o documento e selecione a palavra Content 1. Ao selecionar, digite o conteúdo que deseja. Criando Páginas para o Site Para começarmos a criação de páginas no site, criamos um template para que o processo de criação seja mais simples e prático. Após abrir o arquivo html desejado, criaremos agora, as regiões editáveis (Editable Regions). Clique com o botão direito do mouse sobre a região desejável, vá até a opção Templates e escolha New Editable Region. Caso apareça a janela de aviso do Dreamweaver, clique sobre o botão OK. Defina o nome e clique em OK. 46

50 Após a criação da região editável, modifique o seu alinhamento no painel Properties. Altere a propriedade Vert para o tipo Top e apague a descrição. A seguinte tabela foi inserida. Em nosso exemplo, clicamos em uma das células da tabela e alteramos a propriedade H (Altura) no painel Properties para 330 pixels. Clicamos dentro de cada uma das três colunas e alteramos a largura na propriedade W de acordo com as medidas: 244px - 25px - 429px. Alteramos também o alinhamento interno das células para: Vert-Top. Criamos três links, os mesmos foram utilizados a partir da lição Criando o menu (Hotspot Image Map) que define uma área sobre uma figura onde é possível criar o link. Clique no botão Rectangle Hotspot Tool, selecione o botão Home e confirme a caixa de mensagem. 47

51 Em seguida, no campo Link, digite index.html e tecle <Enter> para confirmar. Clique novamente na opção Rectangle Hotspot Tool e selecione o botão com a descrição Destaques. Ao terminar, no campo Link digite destaques.html. Faça o mesmo com o botão Contato e no campo Link digite contato.html. Podemos também selecionar o objeto com a ferramenta Rectangle Hotspot Tool e depois localizar o arquivo que servirá como link através do botão Browse for File no painel Properties. Agora, vem o passo mais interessante: transformar a página em um modelo, ou melhor, em Template. No menu File e escolhemos o comando Save as Template... Na caixa de diálogo Save As Template, no campo Save as, mantenha o nome escolhido. Selecione no campo Site o seu código de matrícula que criamos na lição de configuração do Manage Sites e clique em Save. Na janela Dreamweaver - Update Links?, clique em Sim. O Dreamweaver criou a pagina.dwt, que é um template, colocando-o na respectiva lista. Agora, que já temos o nosso template, basta criarmos nossas páginas a partir dele. Para isso, usaremos o recurso Novo a partir do Template. No menu File, clique em New, para criar um novo arquivo. Na caixa de diálogo New Document, clique na guia Page from Templates. Você verá a lista de sites cadastrados na coluna Template for e os templates pertencentes a esses sites na coluna ao lado. É possível também, ter a visualização do seu template. Selecione o nome escolhido. 48

52 O documento criado contém as mesmas características do template. Veja que é especificado a partir de qual template ele foi criado no canto superior direito. Repare também, que é mostrada a área editada (regiao), criada anteriormente. Digite as informações que desejar. Este arquivo foi salvo com a descrição destaques.html. Caso apareça a caixa de mensagem confirmando a cópia dos arquivos contidos na página que está sendo salva, clique em Copy e depois em OK na mensagem seguinte. Se desejar, altere o título da página. 49

53 Formulário Formulário é um recurso que permite coletar informações de um usuário e enviá-las a um determinado . É muito útil e é usado por empresas para pesquisas, formulários de pedidos e interfaces de busca. É uma maneira muito prática e inteligente de se comunicar com o usuário, permitindo que ele receba informações posteriormente. Nele, o usuário inserirá alguns de seus dados e os enviará para um determinado . Agora, vamos habilitar as ferramentas para o formulário. Na Barra de Ferramentas, clique na guia Forms. Ferramentas utilizadas na construção do formulário. 1. Form: cria uma área na página, que será destinada ao conteúdo do formulário. 2. Text Field: cria uma área que aceita qualquer tipo de texto. O texto digitado pode ser exibido como uma linha simples, múltiplas, marcadores ou asteriscos (com a finalidade de proteger senhas). 3. Hidden Field: permitem armazenar informações (como o destinatário dos dados do formulário ou seu assunto) que não são relevantes ao usuário, mas que serão utilizadas pelo aplicativo que processa o formulário. 4. Textarea: tem a mesma função do Text Field, mas permite uma área maior de texto multilinhas. 5. Checkbox: permite a escolha de múltiplas respostas em um único grupo de opções, não cancelando as anteriores. 6. Checkbox Group: permite a escolha de múltiplas respostas em dois grupos de opções, não cancelando as anteriores. 7. Radio Button: representa opções exclusivas. A seleção de um dos botões do grupo cancela a seleção de outros. 8. Radio Group: insere um grupo de Radio Buttons. 9. Select(List/Menu): permite criar uma lista de opções. 10. Jump Menu: permite inserir um menu, no qual cada opção vincula-se a um documento ou arquivo (links). 11. Image Field: pode ser utilizado no lugar de um botão de ação, exercendo a mesma tarefa. 12. File Field: permite que o usuário procure por arquivos que estejam em sua máquina, carregando-os como dados do formulário. Muito utilizado por sites que disponibilizam contas de . É o campo utilizado para anexar arquivos às mensagens. 13. Button: insere botões de ação, realizando tarefas quando são clicados. 14. Label: especifica um rótulo. 15. Fieldset: especifica um rótulo em uma área de formulário. 50

54 O segredo de um formulário bem organizado está na construção de uma tabela, pois ela ajustará com eficiência os componentes Forms. Inicialmente, crie a área para o formulário clicando no botão Form. Com o cursor dentro do Form, pressione a tecla <Enter>, para que possamos visualizar o formulário e a tabela que será inserida. Em Properties, na opção Vert, selecione Top. Pressione a seta de direção do teclado para cima ( primeira linha. ), para que o cursor fique posicionado na Criamos a tabela conforme especificações abaixo e centralizamos o cursor como align center, na região destinada ao formulário pixels de largura - 8 linhas - altere o valor do CellPad e CellSpace para 0 - cores: #99CCFF e #CCCCFF Foi utilizada a opção Checkbox, da barra de ferramentas Forms. 51

55 O componente Checkbox é usado geralmente para marcação de múltiplas opções, ou seja, permite que você marque todas ou nenhuma delas. Veja abaixo, suas propriedades no painel Properties. Para isso, basta selecionar uma delas. Propriedades do componente Text Field. Para inserirmos os botões que enviarão os dados para um , clicamos no interior da última linha, inserimos uma tabela com 2 colunas e com o alinhamento centralizado, clicamos na opção Button. Temos dois botões, um para enviar os dados e o outro para "resetar" o formulário, ou seja, apagar todas as informações escritas. Clique no primeiro botão e observe suas propriedades. Altere as propriedades para cada um deles. O passo final agora, é definir para onde e como os dados irão após o envio. Para isso, selecione o formulário para que apareçam suas propriedades. 52

56 Digite as propriedades conforme a figura nos campos Action e Enctype. Action: é a ação, ou seja, o que o formulário vai fazer. No caso, enviar os dados para um e- mail(mailto:). Method: determina como o navegador enviará os dados do formulário. O método POST faz com que os dados do formulário sejam transmitidos em uma transação em separado (uso do Outlook, por exemplo), enquanto o GET obriga os dados do formulário a serem anexados ao URL do script. Um primeiro exemplo da prática desses métodos é quando se transmite a senha de um usuário para um servidor autenticar. Se o formulário utiliza o método GET, a senha passa através da URL. Sendo assim, qualquer pessoa que tenha acesso ao computador do usuário poderá descobrir a senha. Enctype: é o modo como serão mostrados os dados enviados no . Usando text/plain, os dados aparecem separados por linhas. Agora, salve e teste sua página no browser! Preencha os dados e teste os botões. Clicando em Enviar, os dados irão para o especificado anteriormente. 53

57 Criando o menu (Hotspot Image Map) Temos que realizar a ligação entre as páginas, ou seja, os links. Utilizamos um recurso chamado Mapeamento de Imagem com Hotspot, que consiste em definir uma área sobre uma figura, possibilitando a criação de um link. Clique sobre a figura referente ao botão Destaques. Repare que no painel Properties, existem algumas opções destinadas ao Map. Pointer Hotspot Tool: manipula as regiões criadas. Rectangle Tool: cria regiões retangulares. Circle Tool: cria regiões circulares. Polygon Tool: cria regiões poligonais. Após ter selecionado a imagem, clique no Rectangle Hotspot Tool e faça uma região sobre a palavra. Veja que, logo após, o painel Properties já exibe as opções para definição do destino do link. Preencha o campo Link com destaques.html ou localize o arquivo pelo ícone. 54

58 Evento com Janela (JavaScript) O que é JavaScript? JavaScript é uma linguagem que permite injetar lógica em páginas escritas em HTML (HyperText Mark-up Language). Os parágrafos de lógica do JavaScript podem estar "soltos" ou atrelados à ocorrência de eventos. Os parágrafos soltos são executados na sequência em que aparecem na página (documento) e os atrelados a eventos são executados apenas quando o evento ocorre. Para inserir parágrafos de programação dentro do HTML, é necessário identificar o início e o final do código JavaScript, da seguinte forma: <SCRIPT> códigos </SCRIPT> Este procedimento pode ser adotado em qualquer local da página. Entretanto, para melhor visualização e facilidade de manutenção, recomenda-se que toda a lógica seja escrita no início do documento através da criação de funções a serem invocadas quando fizerem necessárias (normalmente atreladas a eventos). No arquivo index.html, acrescentamos um código Script que irá chamar uma outra janela. Este pop-up conterá alguma informação adicional do site. Exiba o código HTML de seu documento, clicando na guia Split ou Code. Localize a tag </style>. Posicione o cursor depois dele e tecle <Enter> para criar uma nova linha. Com o cursor posicionado abaixo da palavra </style>, digite o seguinte código: 55

59 Vamos entender o JavaScript digitado: <script language="javascript">: abertura do código JavaScript. window.open: indica qual será a função do código; neste caso abrir uma janela. ("pop_up.htm","popup",'scrollbars=no,width=245,height=245'): caminho (arquivo), nome da janela e opções (sem barra de rolagem, largura e altura). </script>: fecha o código JavaScript. O arquivo pop_up.html e a imagem pop_up.jpg copiamos para a pasta images. Visualize sua página index.html, através do browser e veja o resultado. Publicando o Site na Internet Após finalizar completamente o site, você deve disponibilizá-lo na Internet. Ainda mais, se você estiver construindo um site para uma empresa e o cliente tiver pressa de ver os resultados. No caso da criação de site para simples divulgação pessoal, sem nenhum objetivo comercial, pode-se utilizar um dos diversos sites de hospedagem gratuita atualmente disponíveis. É preciso verificar com o provedor no qual o site será hospedado a forma adotada para envio dos arquivos. A maioria utiliza o envio por meio do protocolo FTP, pelo qual, você compartilha seus arquivos com o provedor de uma maneira mais rápida através de um programa. Se a página estiver sendo desenvolvida para uma empresa (cliente), entre em contato com o provedor da mesma, para que os arquivos sejam enviados. Mas lembre-se de que as páginas devem sempre ser atualizadas de acordo com as necessidades da empresa que o contratou, pois os internautas sempre estão à procura de novidades. Por isso, quanto mais diversificado e interessante for o site, mais visitas ele terá. 56

60 Para ter um espaço disponível em um destes sites, basta que você se cadastre e aceite os termos de contrato, colocando em sua página apenas arquivos e imagens aceitos por ele. Utilizamos o site No lado direito da janela, clique na opção Publicar HTML grátis. É necessário que seja realizado um cadastro para a publicação do site que será feito através do Dreamweaver. Além da criação da conta é preciso fazer sua ativação através do para que o login seja reconhecido no site. Informe o Login que você desejar e seu . Em Categoria selecione a opção que desejar, digite a senha e confirme-a. Em seguida, marque a opção Concordo com o Termo de Serviço e clique em Cadastrar. Após o clique, irá surgir a tela de conclusão do cadastro. Em seguida, abra o seu cadastrado para a ativação do site e clique na mensagem da Equipe XPG. Selecione o link de validação, copie-o, cole o link na Barra de Endereços e pressione a tecla <Enter>. Você será redirecionado para a página do XPG. Informe o Login, ou seja, seu nome de usuário e a Senha. Observe o seu endereço para acessar o site após a publicação. Agora, abra o Dreamweaver e o arquivo index.html caso tenha fechado. Na guia Files, clique sobre a opção Expand to show local and remote sites. 57

61 Observe que uma nova janela surge do Dreamweaver, podemos observar que ela está dividida em duas partes a Local Files (seus arquivos locais) e a Testing Server (onde serão armazenados os arquivos do site). Caso não esteja visualizando a opção Testing Server, clique em Testing Server. Agora definimos as configurações de FTP do site, clique no link define a testing server. A caixa Site Setup for 0000 será aberta. Em Site Name informe Air Turismo e localize o caminho Local Site Folder da Sua Pasta, este local indica onde serão salvos os arquivos do site. Selecione a opção Servers e clique no botão Add New Server. Em seguida, em Server Name, informe Air Turismo e preencha os campos. 58

62 Clique em Save, ao retornar a caixa Site Setup for Air Turismo, marque Remote, caso não esteja. Clique em Advanced Settings, em Local Info já estará selecionada a pasta padrão de imagens. Clique no botão Save. Pronto, agora para realizar a conexão com o servidor FTP do XPG, clique sobre a opção Connects to remote host. Selecione todos os arquivos do Local Files, pois iremos transferi-los para o Testing Server. Após selecionar, clique sobre o botão Put File(s) e para completar esta ação, clique no botão OK. 59

Iniciando e conhecendo o Dreamweaver CS3

Iniciando e conhecendo o Dreamweaver CS3 Dreamweaver CS3 Sumário Iniciando e conhecendo o Dreamweaver CS3... 1 Ajustes de Preferência... 3 Criando um Novo Arquivo... 10 Salvando e Visualizando um Arquivo... 12 Trabalhando com Imagens... 16 Iniciando

Leia mais

Personalizando o Dreamweaver

Personalizando o Dreamweaver Personalizando o Dreamweaver - Acessando o painel de Preferências: O painel de preferências possui todas as configurações que o Dreamweaver oferece. Para quem é usuário de PC, poderá acessar pelo menu

Leia mais

Sumário INTRODUÇÃO 3 DICAS PARA CRIAR UM BOM SITE 4

Sumário INTRODUÇÃO 3 DICAS PARA CRIAR UM BOM SITE 4 Sumário Todos os direitos reservados e protegidos pela Lei 5.988 de 14/12/73. Nenhuma parte deste livro, sem prévia autorização por escrito de Celta Informática, poderá ser reproduzida total ou parcialmente,

Leia mais

Plano de Aula - Dreamweaver CS6 - cód.5232 24 Horas/Aula

Plano de Aula - Dreamweaver CS6 - cód.5232 24 Horas/Aula Plano de Aula - Dreamweaver CS6 - cód.5232 24 Horas/Aula Aula 1 Capítulo 1 - Introdução ao Dreamweaver CS6 Aula 2 Continuação do Capítulo 1 - Introdução ao Dreamweaver CS6 Aula 3 Capítulo 2 - Site do Dreamweaver

Leia mais

Faculdade de Ciências Médicas FCM Unicamp Núcleo de Tecnologia de Informação NTI

Faculdade de Ciências Médicas FCM Unicamp Núcleo de Tecnologia de Informação NTI Manual do usuário Desenvolvendo páginas em Drupal Faculdade de Ciências Médicas FCM Unicamp Núcleo de Tecnologia de Informação NTI Conteúdo Primeiro Passo... 3 1.1 Login... 3 1.2 Recuperando a Senha...

Leia mais

Imagens - Formatos. GIF (Graphics Interchange Format) JPEG (ou JPG) (Joint Pictures Experts Graphis)

Imagens - Formatos. GIF (Graphics Interchange Format) JPEG (ou JPG) (Joint Pictures Experts Graphis) Imagens - Formatos GIF (Graphics Interchange Format) - Muito popular na web. - Permite ter um máximo de 256 cores. - Indicado para cartoons, logos, imagens com áreas transparentes e animações. JPEG (ou

Leia mais

Conteúdo Programático do Web Design

Conteúdo Programático do Web Design Conteúdo Programático do Web Design O Ambiente Macromedia Dreamweaver Instalação do Dreamweaver Arquivos Utilizados na Apostila A Inicialização de Dreamweaver Área de Trabalho Dreamweaver Criação de uma

Leia mais

STI - Seção Técnica de Informática. Dreamweaver. DreamWeaver 1

STI - Seção Técnica de Informática. Dreamweaver. DreamWeaver 1 Dreamweaver DreamWeaver 1 Í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.

Leia mais

DESENVOLVIMENTO DE PÁGINAS PARA INTERNET

DESENVOLVIMENTO DE PÁGINAS PARA INTERNET UNIVERSIDADE ESTADUAL DE MARINGÁ PRÓ-REITORIA DE RECURSOS HUMANOS E ASSUNTOS COMUNITÁRIOS - PRH DIRETORIA DE RECURSOS HUMANOS - DRH DIVISÃO DE TREINAMENTO E DESENVOLVIMENTO TDE DESENVOLVIMENTO DE PÁGINAS

Leia mais

Tutorial Plone 4. Manutenção de Sites. Universidade Federal de São Carlos Departamento de Sistemas Web Todos os direitos reservados

Tutorial Plone 4. Manutenção de Sites. Universidade Federal de São Carlos Departamento de Sistemas Web Todos os direitos reservados Tutorial Plone 4 Manutenção de Sites Universidade Federal de São Carlos Departamento de Sistemas Web Todos os direitos reservados Sumário Introdução 1 Como fazer a autenticação do usuário 1.1 Através do

Leia mais

Manual de utilização GDS Touch PAINEL TOUCH-SCREEN CONTROLE RESIDENCIAL INTERATIVO. Versão: 1.0 Direitos reservados.

Manual de utilização GDS Touch PAINEL TOUCH-SCREEN CONTROLE RESIDENCIAL INTERATIVO. Versão: 1.0 Direitos reservados. Bem Vindo GDS TOUCH Manual de utilização GDS Touch PAINEL TOUCH-SCREEN CONTROLE RESIDENCIAL INTERATIVO O GDS Touch é um painel wireless touchscreen de controle residencial, com design totalmente 3D, interativo

Leia mais

Excel 2010 Modulo II

Excel 2010 Modulo II Excel 2010 Modulo II Sumário Nomeando intervalos de células... 1 Classificação e filtro de dados... 3 Subtotais... 6 Validação e auditoria de dados... 8 Validação e auditoria de dados... 9 Cenários...

Leia mais

Apostila de CmapTools 3.4

Apostila de CmapTools 3.4 Apostila de CmapTools 3.4 Índice Definição do software... 3 Criando um novo mapa... 3 Adicionando um conceito... 3 Alterando a formatação das caixas (Barra de Ferramentas Estilos Paleta Styles)... 7 Guia

Leia mais

Capítulo 7 O Gerenciador de Arquivos

Capítulo 7 O Gerenciador de Arquivos Capítulo 7 O Gerenciador de Arquivos Neste capítulo nós iremos examinar as características da interface do gerenciador de arquivos Konqueror. Através dele realizaremos as principais operações com arquivos

Leia mais

Manual do Teclado de Satisfação Local Versão 1.4.1

Manual do Teclado de Satisfação Local Versão 1.4.1 Manual do Teclado de Satisfação Local Versão 1.4.1 26 de agosto de 2015 Departamento de Engenharia de Produto (DENP) SEAT Sistemas Eletrônicos de Atendimento 1. Introdução O Teclado de Satisfação é uma

Leia mais

LABORATÓRIO DE INTERNET FRONTPAGE

LABORATÓRIO DE INTERNET FRONTPAGE I LABORATÓRIO DE INTERNET FRONTPAGE Prof. Antonio Geraldo da Rocha Vidal II SUMÁRIO Introdução...3 Construindo um Web Site...4 Iniciando...4 Administrando o Site...5 Navegação...5 Trabalhando com Páginas...6

Leia mais

Mozart de Melo Alves Júnior

Mozart de Melo Alves Júnior Mozart de Melo Alves Júnior WORD 2000 INTRODUÇÃO: O Word é um processador de texto com recursos de acentuação, formatação de parágrafo, estilo de letras diferentes, criação de tabelas, corretor ortográfico,

Leia mais

Iniciando o Word 2010. Criar um novo documento. Salvando um Documento. Microsoft Office Word

Iniciando o Word 2010. Criar um novo documento. Salvando um Documento. Microsoft Office Word 1 Iniciando o Word 2010 O Word é um editor de texto que utilizado para criar, formatar e imprimir texto utilizado para criar, formatar e imprimir textos. Devido a grande quantidade de recursos disponíveis

Leia mais

Ferramentas para Multimídia e Internet - 1486

Ferramentas para Multimídia e Internet - 1486 1 Ferramentas para Multimídia e Internet - 1486 HTML BÁSICO: O que é uma página WEB? Uma página WEB, também conhecida pelo termo inglês webpage, é uma "página" na World Wide Web, geralmente em formato

Leia mais

Projeto de Agenda Telefônica. Cleyton Tsukuda Kano (kanoct@br.ibm.com)

Projeto de Agenda Telefônica. Cleyton Tsukuda Kano (kanoct@br.ibm.com) Projeto de Agenda Telefônica Cleyton Tsukuda Kano (kanoct@br.ibm.com) Objetivo Conhecer o elemento de designs XPages, componente da ferramenta Lotus Domino Designer, através da criação de uma aplicação

Leia mais

Slice Tool - Ferramenta Fatia

Slice Tool - Ferramenta Fatia Faculdade de Tecnologia da Paraíba CURSO CURSO SUPERIOR DE TECNOLOGIA EM SISTEMAS PARA A INTERNET DISCIPLINA DESENVOLVIMENTO DE APLICAÇÕES WEB ESTÁTICAS PERÍODO: P2 Semestre: 2008.2 PROFESSOR Geraldo Rodrigues

Leia mais

Vamos criar uma nova Página chamada Serviços. Clique em Adicionar Nova.

Vamos criar uma nova Página chamada Serviços. Clique em Adicionar Nova. 3.5 Páginas: Ao clicar em Páginas, são exibidas todas as páginas criadas para o Blog. No nosso exemplo já existirá uma página com o Título Página de Exemplo, criada quando o WorPress foi instalado. Ao

Leia mais

INTRODUÇÃO INICIANDO O WORD INSERIR TEXTO

INTRODUÇÃO INICIANDO O WORD INSERIR TEXTO SUMÁRIO 01 - INTRODUÇÃO 02 - INICIANDO O WORD 03 - INSERIR TEXTO 04 - SALVAR UM DOCUMENTO 05 - FECHAR UM DOCUMENTO 06 - INICIAR UM NOVO DOCUMENTO 07 - ABRIR UM DOCUMENTO 08 - SELECIONAR TEXTO 09 - RECORTAR,

Leia mais

Gerenciador e Editor de Conteúdo

Gerenciador e Editor de Conteúdo Gerenciador e Editor de Conteúdo Manual do Usuário Versão 1.0 2 Sumário 1. Introdução... 4 2. Referência Rápida... 4 Funções do Gerenciador de conteúdo... 4 Funções comuns da barra de ferramenta... 5 Funções

Leia mais

Treinamento de Drupal para Administradores do Site Bibliotecas UFU

Treinamento de Drupal para Administradores do Site Bibliotecas UFU Treinamento de Drupal para Administradores do Site Bibliotecas UFU 1 1. Como logar no sistema como usuário autenticado Para logar no sistema como usuário autenticado é necessário digitar /user na frente

Leia mais

Capítulo 12 Criando Páginas Web

Capítulo 12 Criando Páginas Web Guia do Iniciante Capítulo 12 Criando Páginas Web Salvando documentos como arquivos HTML Direitos Autorais Este documento é protegido por Copyright 2010 por seus contribuidores listados abaixo. Você pode

Leia mais

Introdução Microsoft PowerPoint 2013 apresentações Office PowerPoint 2013 Microsoft PowerPoint 2013 textos planilhas Excel Word

Introdução Microsoft PowerPoint 2013 apresentações Office PowerPoint 2013 Microsoft PowerPoint 2013 textos planilhas Excel Word PowerPoint 2013 Sumário Introdução... 1 Iniciando o PowerPoint 2013... 2 Criando Nova Apresentação... 10 Inserindo Novo Slide... 13 Formatando Slides... 15 Inserindo Imagem e Clip-art... 16 Inserindo Formas...

Leia mais

Microsoft Word INTRODUÇÃO

Microsoft Word INTRODUÇÃO INTRODUÇÃO O Word é uma ferramenta utilizada para o processamento e editoração eletrônica de textos. O processamento de textos consiste na possibilidade de executar e criar efeitos sobre um texto qualquer,

Leia mais

Introdução ao Fireworks CS4

Introdução ao Fireworks CS4 Introdução ao Fireworks CS4 Profa. Flávia Pereira de Carvalho Fontes: Adobe Fireworks CS4 Design para Web Processor Alfamídia Criação de Sites: Layout e Projetos - Processor Alfamídia Crie, Anime e Publique

Leia mais

Manual do Teclado de Satisfação Local Versão 1.2.2

Manual do Teclado de Satisfação Local Versão 1.2.2 Manual do Teclado de Satisfação Local Versão 1.2.2 18 de fevereiro de 2015 Departamento de Engenharia de Produto (DENP) SEAT Sistemas Eletrônicos de Atendimento 1. Introdução O Teclado de Satisfação é

Leia mais

Professor Paulo Najar www.aprenderdigital.com.br

Professor Paulo Najar   www.aprenderdigital.com.br ~ 1 ~ O QUE É O BROFFICE? Broffice.org é o nome de um conjunto de programas de escritório livre (free software), disponível na internet gratuitamente (no site www.broffice.org) que oferece ferramentas

Leia mais

INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN

INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN Sumário 1. Introdução...1 2. Tags...1 3. HTML...1 4. Cabeça, Corpo

Leia mais

Introdução ao Fireworks CS4

Introdução ao Fireworks CS4 Introdução ao Fireworks CS4 Profa. Flávia Pereira de Carvalho Fontes: Adobe Fireworks CS4 Design para Web Processor Alfamídia Criação de Sites: Layout e Projetos - Processor Alfamídia Crie, Anime e Publique

Leia mais

Pág 31. UC Introdução a Informática Docente: André Luiz Silva de Moraes 1º sem Redes de Computadores. 5 Introdução ao uso do BrOffice Impress

Pág 31. UC Introdução a Informática Docente: André Luiz Silva de Moraes 1º sem Redes de Computadores. 5 Introdução ao uso do BrOffice Impress 5 Introdução ao uso do BrOffice Impress O pacote BrOffice é um pacote de escritório muito similar ao já conhecido Microsoft Office e ao longo do tempo vem evoluindo e cada vez mais ampliando as possibilidades

Leia mais

Noções de Informática

Noções de Informática Noções de Informática 2º Caderno Conteúdo Microsoft Excel 2010 - estrutura básica das planilhas; manipulação de células, linhas e colunas; elaboração de tabelas e gráficos; inserção de objetos; campos

Leia mais

ArcMAP (parte 2) Rodar o ArcMap teclar: Iniciar > Todos os programas > ArcGIS > ArcMap. Sobre a janela selecionar o item An existing map:

ArcMAP (parte 2) Rodar o ArcMap teclar: Iniciar > Todos os programas > ArcGIS > ArcMap. Sobre a janela selecionar o item An existing map: ArcMAP (parte 2) Nesta parte do tutorial, você irá mapear cada tipo de uso da terra dentro do noise contour. Você adicionará dados ao seu mapa, desenhará feições baseadas em atributos, selecionará feições

Leia mais

Construtor Iron Web. Manual do Usuário. Iron Web Todos os direitos reservados

Construtor Iron Web. Manual do Usuário. Iron Web Todos os direitos reservados Construtor Iron Web Manual do Usuário Iron Web Todos os direitos reservados A distribuição ou cópia deste documento, ou trabalho derivado deste é proibida, requerendo, para isso, autorização por escrito

Leia mais

Word 1 - Introdução 1.1 - Principais recursos do word 1.2 - A janela de documento 1.3 - Tela principal

Word 1 - Introdução 1.1 - Principais recursos do word 1.2 - A janela de documento 1.3 - Tela principal Word 1 - Introdução O Word para Windows ou NT, é um processador de textos cuja finalidade é a de nos ajudar a trabalhar de maneira mais eficiente tanto na elaboração de documentos simples, quanto naqueles

Leia mais

Microsoft Office FrontPage 2003

Microsoft Office FrontPage 2003 Instituto Politécnico de Tomar Escola Superior de Gestão Área Interdepartamental de Tecnologias de Informação e Comunicação Microsoft Office FrontPage 2003 1 Microsoft Office FrontPage 2003 O Microsoft

Leia mais

Apostila Curso Inclusão Digital na Terceira Idade Módulo Avançado Unicruz 2015/1. João David G. Prevedello

Apostila Curso Inclusão Digital na Terceira Idade Módulo Avançado Unicruz 2015/1. João David G. Prevedello Apostila Curso Inclusão Digital na Terceira Idade Módulo Avançado Unicruz 2015/1 João David G. Prevedello Básico Teclado e Mouse Um teclado tem mais de 100 teclas, existem de várias cores, formatos, cabos,

Leia mais

[CURSO DE FÉRIAS FIREWORKS] JULHO / 2011

[CURSO DE FÉRIAS FIREWORKS] JULHO / 2011 Conteúdo 1. OBJETIVO DO FIREWORKS... 2 1.1 - Diferença entre imagem Vetorial e Bitmap... 2 1.2 - Formato de Arquivos... 3 2. AMBIENTE DO FIREWORKS... 3 2.1 - INICIANDO UM PROJETO... 4 3. DESENHANDO NO

Leia mais

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

Leia mais

OpenOffice Writer. Por: Leandro Dalcero

OpenOffice Writer. Por: Leandro Dalcero OpenOffice Writer Por: Leandro Dalcero Índice 1 Iniciando o Writer... Pág. 1 2 Componentes básicos da janela do Writer... Pág. 1 3 Menu Arquivo... Pág. 3 3.1 Novo... Pág. 3 3.2 Abrir... Pág. 3 3.3 Piloto

Leia mais

Sumário. 1 Tutorial: Blogs no Clickideia

Sumário. 1 Tutorial: Blogs no Clickideia 1 Tutorial: Blogs no Clickideia Sumário Introdução... 2 Objetivos... 2 Instruções para utilização do Tutorial... 2 Acesso ao Portal e a Home Blog... 3 Página Inicial da área do Blog... 4 Apresentação da

Leia mais

ANABELA GONÇALVES O GUIA PRÁTICO DO MACROMEDIA DREAMWEAVER MX

ANABELA GONÇALVES O GUIA PRÁTICO DO MACROMEDIA DREAMWEAVER MX ANABELA GONÇALVES O GUIA PRÁTICO DO MACROMEDIA DREAMWEAVER MX Portugal/2003 Reservados todos os direitos por Centro Atlântico, Lda. Qualquer reprodução, incluindo fotocópia, só pode ser feita com autorização

Leia mais

UNIVERSIDADE TECNOLOGIA FEDERAL DO PARANÁ. Owncloud SERVIÇO DE COMPARTILHAMENTO EM NUVEM. Manual

UNIVERSIDADE TECNOLOGIA FEDERAL DO PARANÁ. Owncloud SERVIÇO DE COMPARTILHAMENTO EM NUVEM. Manual UNIVERSIDADE TECNOLOGIA FEDERAL DO PARANÁ Owncloud SERVIÇO DE COMPARTILHAMENTO EM NUVEM Manual DIRETORIA DE GESTÃO DE TECNOLOGIA DA INFORMAÇÃO DIRGTI 2015 Sumário 1. Introdução... 3 2. Acessando o serviço...

Leia mais

1 Crie uma pasta (dentro do seu diretório) com o seu nome. 2. Se tiver dúvida pergunte o seu professor

1 Crie uma pasta (dentro do seu diretório) com o seu nome. 2. Se tiver dúvida pergunte o seu professor i.exe FrontPage Criação de Home Page s PPaaggi innaa 1 Sobre FrontPage Parte 1 Front Page é uma ferramenta para criação e gerenciamento de web s.o aluno não necessita de nenhum conhecimento de programação

Leia mais

Manual do Teclado de Satisfação Local Versão 1.6.0

Manual do Teclado de Satisfação Local Versão 1.6.0 Manual do Teclado de Satisfação Local Versão 1.6.0 09 de novembro de 2015 Departamento de Engenharia de Produto (DENP) SEAT Sistemas Eletrônicos de Atendimento 1. Introdução O Teclado de Satisfação é uma

Leia mais

MICROSOFT WORD 2007. George Gomes Cabral

MICROSOFT WORD 2007. George Gomes Cabral MICROSOFT WORD 2007 George Gomes Cabral AMBIENTE DE TRABALHO 1. Barra de título 2. Aba (agrupa as antigas barras de menus e barra de ferramentas) 3. Botão do Office 4. Botão salvar 5. Botão de acesso à

Leia mais

Informática Aplicada. Aula 2 Windows Vista. Professora: Cintia Caetano

Informática Aplicada. Aula 2 Windows Vista. Professora: Cintia Caetano Informática Aplicada Aula 2 Windows Vista Professora: Cintia Caetano AMBIENTE WINDOWS O Microsoft Windows é um sistema operacional que possui aparência e apresentação aperfeiçoadas para que o trabalho

Leia mais

BrOffice.org - Impress

BrOffice.org - Impress BrOffice.org Impress 1 BrOffice.org - Impress Programa de apresentação, utilizado para criação e manipulação de slides. Os slides criados para uma eletrônica podem conter texto, gráficos, objetos, formas,

Leia mais

INSTITUTO PRESBITERIANO MACKENZIE COLÉGIO PRESBITERIANO MACKENZIE SP. Passo a Passo

INSTITUTO PRESBITERIANO MACKENZIE COLÉGIO PRESBITERIANO MACKENZIE SP. Passo a Passo Passo a Passo São Paulo 2002 1 Índice O Xara 3D...3 Vamos iniciar nossos estudos do Xara 3D...3 Exibindo as barras de ferramentas e Status...5 A barra de Status (Status Bar)...9 Vamos começar a trabalhar

Leia mais

Linux. Educacional. Tutorial Buzzword

Linux. Educacional. Tutorial Buzzword Linux Educacional Tutorial Buzzword Para trabalhar com o programa Buzzword online, é necessário que crie uma conta no site. Para isso acesse o endereço - https://buzzword.acrobat.com/ Para criar uma conta

Leia mais

Apostila da Ferramenta AdminWEB

Apostila da Ferramenta AdminWEB Apostila da Ferramenta AdminWEB Apostila AdminWEB SUMÁRIO OBJETIVO DO CURSO... 3 CONTEÚDO DO CURSO... 4 COMO ACESSAR O SISTEMA... 5 CONHEÇA OS COMPONENTES DA PÁGINA... 6 COMO EFETUAR O LOGIN... 9 MANTER

Leia mais

Google Docs EDITOR DE TEXTOS

Google Docs EDITOR DE TEXTOS Google Docs Um destes serviços oferecidos é o Google Docs, uma espécie de suíte de aplicativos online, bastante semelhante ao Microsoft Office e ao OpenOffice.org/BrOffice.org. O serviço da Google possui

Leia mais

Universidade Federal de Pelotas Conjunto Agrotécnico Visconde da Graça CAVG Disciplina: Informática Apresentação Gráfica

Universidade Federal de Pelotas Conjunto Agrotécnico Visconde da Graça CAVG Disciplina: Informática Apresentação Gráfica Apresentação Gráfica Microsoft Office Power Point 1 Sumário 1. MICROSOFT POWER POINT... 4 1.1. INICIANDO O MICROSOFT POWER POINT... 4 2. CONHECENDO A INTERFACE DO POWER POINT... 5 2.1. O DOCUMENTO DO POWER

Leia mais

Microsoft Word 97 Básico

Microsoft Word 97 Básico Poder Judiciário Tribunal Regional Federal da Terceira Região Microsoft Word 97 Básico DIMI - Divisão de Microinformática e Redes Índice: I. Executando o Word... 4 II. A tela do Word 97... 6 III. Digitando

Leia mais

SGCD 2.2. Sistema Gerenciador de Conteúdo Dinâmico

SGCD 2.2. Sistema Gerenciador de Conteúdo Dinâmico Atualizado em 13/AGO/2012 Sistema Gerenciador de Conteúdo Dinâmico No final de 2007, o Serviço Técnico de Informática da UNESP Marília, disponibilizou para a comunidade acadêmica e administrativa o Sistema

Leia mais

LIÇÃO 1 - USANDO O GRAVADOR DE MACROS

LIÇÃO 1 - USANDO O GRAVADOR DE MACROS 1_15 - ADS - PRO MICRO (ILM 001) - Estudo dirigido Macros Gravadas Word 1/35 LIÇÃO 1 - USANDO O GRAVADOR DE MACROS No Microsoft Office Word 2007 é possível automatizar tarefas usadas frequentemente criando

Leia mais

SGCD 2.0 Sistema Gerenciador de Conteúdo Dinâmico

SGCD 2.0 Sistema Gerenciador de Conteúdo Dinâmico Sistema Gerenciador de Conteúdo Dinâmico Atualizado em 24/08/2011 No final de 2007, o Serviço Técnico de Informática da UNESP Marília, disponibilizou para a comunidade acadêmica e administrativa o Sistema

Leia mais

Introdução editor de textos versão 2013 Microsoft Word ferramentas mais completas e poderosas trabalhar com texto Word 2013 compatibilidade

Introdução editor de textos versão 2013 Microsoft Word ferramentas mais completas e poderosas trabalhar com texto Word 2013 compatibilidade Word 2013 Sumário Introdução... 1 Iniciando o Word 2013... 2 Salvando e Fechando o Arquivo... 9 Abrindo o Arquivo... 12 Cursor de Edição... 15 Selecionando o Texto... 16 Formatação: Alinhamento e Espaçamento...

Leia mais

Pré-requisito Conhecimento básico do sistema operacional Windows ou Mac OS.

Pré-requisito Conhecimento básico do sistema operacional Windows ou Mac OS. 1 e Descrição Este treinamento abortará conceitos essenciais de HTML e CSS para a construção de páginas web através do uso do Adobe, com a mínima necessidade de intervir ou escrever códigos, utilizando

Leia mais

Prof. Edwar Saliba Júnior Como fazer uma apresentação utilizando o software Microsoft Power Point

Prof. Edwar Saliba Júnior Como fazer uma apresentação utilizando o software Microsoft Power Point Prof. Edwar Saliba Júnior Como fazer uma apresentação utilizando o software Microsoft Power Point - Conceitos Básicos - Faculdade de Tecnologia INED Julho de 2007 Responsável pela obra: Prof. Edwar Saliba

Leia mais

Início Rápido Desktop. 2015 Release 1 Xojo, Inc.

Início Rápido Desktop. 2015 Release 1 Xojo, Inc. Início Rápido Desktop 2015 Release 1 Xojo, Inc. Capítulo 1 Introdução Bem-vindo ao Xojo, O jeito mais fácil de criar aplicativos multi-plataforma para Desktop e Web. Seção 1 Sobre o Início Rápido para

Leia mais

Manual de Usuário do UnB Webmail Destinado aos usuários de e-mail da Universidade de Brasília MODO DINÂMICO

Manual de Usuário do UnB Webmail Destinado aos usuários de e-mail da Universidade de Brasília MODO DINÂMICO Destinado aos usuários de e-mail da Universidade de Brasília MODO DINÂMICO Elaboração: Equipe de Suporte Avançado do CPD SA/SRS/CPD/UnB suporte@unb.br Universidade de Brasília Brasília / 2014 Resumo A

Leia mais

IMPRESS Trata-se do software pertencente ao pacote BrOffice.org, seu papel é a criação de apresentações

IMPRESS Trata-se do software pertencente ao pacote BrOffice.org, seu papel é a criação de apresentações IMPRESS Trata-se do software pertencente ao pacote BrOffice.org, seu papel é a criação de apresentações O que é uma Apresentação? É um arquivo em que são exibidos textos, gráficos, imagens, sons e animações,

Leia mais

Índice Apresentando o software Programa aberto Criando nova animação Trabalhando as animações Ferramentas Abrir uma figura como animação

Índice Apresentando o software Programa aberto Criando nova animação Trabalhando as animações Ferramentas Abrir uma figura como animação Apostila Índice Apresentando o software...o que são GIF s animadas Programa aberto 2 Criando nova animação 3 Trabalhando as animações 3 Ferramentas 4 Abrir uma figura como animação 5 Barras de ferramentas

Leia mais

Os elementos básicos do Word

Os elementos básicos do Word Os elementos básicos do Word 1 Barra de Menus: Permite aceder aos diferentes menus. Barra de ferramentas-padrão As ferramentas de acesso a Ficheiros: Ficheiro novo, Abertura de um documento existente e

Leia mais

PREFEITURA MUNICIPAL DE PINHAIS ESTADO DO PARANÁ

PREFEITURA MUNICIPAL DE PINHAIS ESTADO DO PARANÁ NOVEMBRO / 2007 17 APRESENTAÇÃO Este material foi solicitado pela Secretaria Municipal da Administração SEMAD, e elaborado com o intuito de capacitar os servidores desta prefeitura, de todos os cargos

Leia mais

M Manual ZAIG P. 1 of 35. Project: ZAIG ID: 028 Description: Manual descritivo de utilização das principais janelas do publicador

M Manual ZAIG P. 1 of 35. Project: ZAIG ID: 028 Description: Manual descritivo de utilização das principais janelas do publicador M Manual ZAIG P. 1 of 35 Project: ZAIG ID: 028 Description: Manual descritivo de utilização das principais janelas do publicador Date: Version: Author: terça-feira, 13 de abril de 2010 2 Richard Ikeda

Leia mais

1. Como criar uma conta

1. Como criar uma conta Tutorial MediaWiki 1. Como criar uma conta Para criar uma conta clique no botão, disponível canto superior direito, "Entrar". Será então mostrada a página de entrada na conta onde terá de introduzir os

Leia mais

ÍNDICE... 2 INTRODUÇÃO... 3. A série... 3

ÍNDICE... 2 INTRODUÇÃO... 3. A série... 3 WORD 2007 E 2010 ÍNDICE ÍNDICE... 2 INTRODUÇÃO... 3 A série... 3 01 CAPTURAS DE TELA WORD 2010... 3 02 IMAGENS 2007/2010... 5 03 NOTAS DE RODAPÉ... 13 04 NUMERAÇÃO DE PÁGINAS... 15 05 CONTAR PALAVRAS...

Leia mais

Coleção - Análises de email marketing em clientes de email

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Introdução Nesta sexta e penúltima edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos dos clientes

Leia mais

Montar planilhas de uma forma organizada e clara.

Montar planilhas de uma forma organizada e clara. 1 Treinamento do Office 2007 EXCEL Objetivos Após concluir este curso você poderá: Montar planilhas de uma forma organizada e clara. Layout da planilha Inserir gráficos Realizar operações matemáticas 2

Leia mais

Editor de Texto openwysiwyg +3ST Versão 1.4.7 e +3ST 1.0.0 Manual de Usuário ÍNDICE

Editor de Texto openwysiwyg +3ST Versão 1.4.7 e +3ST 1.0.0 Manual de Usuário ÍNDICE Editor de Texto openwysiwyg +3ST Versão 1.4.7 e +3ST 1.0.0 Manual de Usuário Este Manual apresenta instruções para a instalação e utilização do Editor de Texto para Web, customizado pela 3ST tomando por

Leia mais

EDITOR DE TEXTO BROFFICE WRITER

EDITOR DE TEXTO BROFFICE WRITER 1 1 Editor de Texto BrOffice Writer O Writer é o editor de texto do pacote OpenOffice, que corresponde ao Microsoft Word. Um editor de texto é um programa com recursos para formatação de texto que poderá

Leia mais

MANUAL DO USUÁRIO DE SOFTWARE

MANUAL DO USUÁRIO DE SOFTWARE MANUAL DO USUÁRIO DE SOFTWARE P-touch P700 O conteúdo deste manual e as especificações deste produto estão sujeitos a alterações sem prévio aviso. A Brother reserva-se o direito de fazer alterações sem

Leia mais

METEP MICROSOFT OFFICE WORD. Professor Me. Silvio Silvestre Barczsz. Objetivos de Aprendizagem

METEP MICROSOFT OFFICE WORD. Professor Me. Silvio Silvestre Barczsz. Objetivos de Aprendizagem METEP MICROSOFT OFFICE WORD Professor Me. Silvio Silvestre Barczsz Objetivos de Aprendizagem Utilizar o Software Word como ferramenta para edição de textos. Plano de Estudo A seguir, apresentam-se os tópicos

Leia mais

ÁREA DE TRABALHO. Área de Trabalho ou Desktop Na Área de trabalho encontramos os seguintes itens: Atalhos Barra de tarefas Botão iniciar

ÁREA DE TRABALHO. Área de Trabalho ou Desktop Na Área de trabalho encontramos os seguintes itens: Atalhos Barra de tarefas Botão iniciar WINDOWS XP Wagner de Oliveira ENTRANDO NO SISTEMA Quando um computador em que trabalham vários utilizadores é ligado, é necessário fazer login, mediante a escolha do nome de utilizador e a introdução da

Leia mais

O MESMO EXCELENTE CONTEÚDO. UMA MELHOR EXPERIÊNCIA DE USUÁRIO.

O MESMO EXCELENTE CONTEÚDO. UMA MELHOR EXPERIÊNCIA DE USUÁRIO. O MESMO EXCELENTE CONTEÚDO. UMA MELHOR EXPERIÊNCIA DE USUÁRIO. Bem-vindo à nova interface do Catálogo de Vídeos da CNN Newsource. Elaborada pela BitCentral, esta nova interface proporciona o mesmo conteúdo

Leia mais

Mais sobre uso de formulários Site sem Ajax

Mais sobre uso de formulários Site sem Ajax Mais sobre uso de formulários Site sem Ajax Página com busca padrão 1 Página com o resultado da busca carregada no local da anterior (o formulário está vazio) Site com Ajax 2 Site usando Ajax para preencher

Leia mais

> Herbet Ferreira Rodrigues > contato@herbetferreira.com

> Herbet Ferreira Rodrigues > contato@herbetferreira.com Curso HTML & CSS > Herbet Ferreira Rodrigues > contato@herbetferreira.com Sumário > Apresentação > Introdução ao HTML História Começando a Programar > Tags em HTML Headings (Cabeçalhos) Parágrafos Formatação

Leia mais

NTI Núcleo de Tecnologia de Informação / UNIFAL-MG Drupal Manual do Usuário DRUPAL MANUAL DO USUÁRIO

NTI Núcleo de Tecnologia de Informação / UNIFAL-MG Drupal Manual do Usuário DRUPAL MANUAL DO USUÁRIO DRUPAL MANUAL DO USUÁRIO Primeiros passos para inserir conteúdo no site. 1. Logar-se no site através de seu usuário e senha. 2. Criar um novo menu. 3. Ativar o menu criado, colocando-o em alguma região

Leia mais

Logo abaixo temos a Barra de Menus que é onde podemos acessar todos os recursos do PHP Editor.

Logo abaixo temos a Barra de Menus que é onde podemos acessar todos os recursos do PHP Editor. Nessa aula iremos estudar: A anatomia da janela do PHP Editor Iniciando o servidor Web O primeiro exemplo de PHP Anatomia da janela do PHP Editor Barra de Títulos: É a barra azul que se encontra na parte

Leia mais

1. Introdução. 2. A área de trabalho

1. Introdução. 2. A área de trabalho Curso Criiar web siites com o Dreamweaver Parrttee II 1. Introdução O Macromedia DreamWeaver é um editor de HTML profissional para desenhar, codificar e desenvolver sites, páginas e aplicativos para a

Leia mais

INFORMÁTICA WORD. TELA DO WORD Nome do Arquivo que esta sendo editado: Botão Office Diversos Textos Barra de Títulos Nome do programa: Microsoft Word

INFORMÁTICA WORD. TELA DO WORD Nome do Arquivo que esta sendo editado: Botão Office Diversos Textos Barra de Títulos Nome do programa: Microsoft Word WORD INTRODUÇÃO O MS Word é um editor de textos cujos recursos facilitam a criação de documentos, memorandos, cartas comerciais ou pessoais, enfim, tudo aquilo que se relaciona a texto. Até mesmo páginas

Leia mais

PROJETO DE ACESSIBILIDADE VIRTUAL DO IFRS Manual Rápido do NVDA. Sumário

PROJETO DE ACESSIBILIDADE VIRTUAL DO IFRS Manual Rápido do NVDA. Sumário PROJETO DE ACESSIBILIDADE VIRTUAL DO IFRS Manual Rápido do NVDA Sumário O que são leitores de Tela?... 1 O NVDA - Non Visual Desktop Access... 1 Procedimentos para Download e Instalação do NVDA... 2 Iniciando

Leia mais

SIGEP WEB - Gerenciador de Postagens dos Correios Manual do Usuário

SIGEP WEB - Gerenciador de Postagens dos Correios Manual do Usuário MANUAL DO USUÁRIO 2 ÍNDICE 1. PRÉ REQUISITOS PARA UTILIZAÇÃO DO SIGEP WEB 04 2. PROCEDIMENTOS PARA DOWNLOAD DO SISTEMA 04 3. INSTALANDO O SIGEP WEB 07 4. CONFIGURAÇÕES DO SISTEMA 09 COMPARTILHANDO O BANCO

Leia mais

Banner Flutuante. Dreamweaver

Banner Flutuante. Dreamweaver Banner Flutuante Dreamweaver Começamos com um arquivo em branco no Dreamweaver MX. Para que o banner apareça sobre a página, precisamos inserir uma camada a mais no arquivo HTML. Selecione o menu Inserir

Leia mais

Conhecendo o Visual FoxPro 8.0 Parte 2

Conhecendo o Visual FoxPro 8.0 Parte 2 AULA Conhecendo o Visual FoxPro 8.0 Parte 2 Na aula anterior, vimos sobre: a) Janela de comando b) Gerenciador de Projetos c) Database Designer e Table Designer Prosseguiremos então a conhecer as ferramentas

Leia mais

Introdução. Como adquirir o FrontPage?

Introdução. Como adquirir o FrontPage? Introdução O software FrontPage é muito utilizado para a criação, gerenciamento e publicação de páginas (sites) na Internet. Sendo um produto da Microsoft Corporation, ele apresenta uma interface bastante

Leia mais

Editor de Apresentações - Windows. Manual do usuário. Campus Frederico Westphalen-RS

Editor de Apresentações - Windows. Manual do usuário. Campus Frederico Westphalen-RS Editor de Apresentações - Windows Manual do usuário Campus Frederico Westphalen-RS Introdução Bem vindo ao OpenOffice.org 1.0: Manual do usuário. O OpenOffice.org 1.0: Manual do usuário contém informações

Leia mais

Apostila Microsoft Word 2000

Apostila Microsoft Word 2000 Apostila Microsoft Word 2000 SUMÁRIO I. INTRODUÇÃO II. INSERIR TEXTO III. SALVAR UM DOCUMENTO IV. FECHAR UM DOCUMENTO V. INICIAR UM NOVO DOCUMENTO VI. ABRIR UM DOCUMENTO VII. SELECIONAR TEXTO VIII. RECORTAR,

Leia mais

Coleção - Análises de email marketing em clientes de email

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Thunderbird e Terra Nesta terceira edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos do webmail

Leia mais

1. ACESSO AO SISTEMA. LOGIN E SENHA Para ter acesso ao painel administrativo de seu site, acesse o link: http://atualiza.urldosite.com.

1. ACESSO AO SISTEMA. LOGIN E SENHA Para ter acesso ao painel administrativo de seu site, acesse o link: http://atualiza.urldosite.com. Manual de uso 1. ACESSO AO SISTEMA LOGIN E SENHA Para ter acesso ao painel administrativo de seu site, acesse o link: http://atualiza.urldosite.com.br Após acessar o link acima, favor digitar seu LOGIN

Leia mais

Conceitos Fundamentais de Microsoft Word. Professor Rafael rafampsilva@yahoo.com.br www.facebook.com/rafampsilva

Conceitos Fundamentais de Microsoft Word. Professor Rafael rafampsilva@yahoo.com.br www.facebook.com/rafampsilva Conceitos Fundamentais de Microsoft Word Professor Rafael www.facebook.com/rafampsilva Introdução É um editor de texto ou processador de texto? editores de texto: editam texto (assim como uma máquina de

Leia mais

Guia do usuário do Web Portal. Versão 6.0

Guia do usuário do Web Portal. Versão 6.0 Guia do usuário do Web Portal Versão 6.0 2013 Pitney Bowes Software Inc. Todos os direitos reservados. Esse documento pode conter informações confidenciais ou protegidas por direitos autorais pertencentes

Leia mais

Manual de Uso Wordpress

Manual de Uso Wordpress Manual de Uso Wordpress Olá! Seja bem vindo ao igual. Agora você pode transmitir todas as notícias importantes da sua comunidade de forma mais simples e eficiente. Mas para que isso aconteça, primeiro

Leia mais

MANUAL DO NVDA Novembro de 2013

MANUAL DO NVDA Novembro de 2013 MANUAL DO NVDA Novembro de 2013 PROJETO DE ACESSIBILIDADE VIRTUAL Núcleo IFRS Manual do NVDA Sumário O que são leitores de Tela?... 3 O NVDA - Non Visual Desktop Access... 3 Procedimentos para Download

Leia mais

Menú Iniciar -> Programas -> Internet Explorer Entre no site da uarte: http://www.uarte.mct.pt/ajuda/manuais/

Menú Iniciar -> Programas -> Internet Explorer Entre no site da uarte: http://www.uarte.mct.pt/ajuda/manuais/ Crie uma pasta (0) no ambiente de trabalho com o seu nome. Inicie o Internet Explorer através do: W O R K S H O P Menú Iniciar -> Programas -> Internet Explorer Entre no site da uarte: http://www.uarte.mct.pt/ajuda/manuais/

Leia mais