Web II ESCOLA. Web II

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

Download "Web II ESCOLA. Web II"

Transcrição

1 Web II ESCOLA Web II 1

2 Escola Alcides Maya - Segundo Módulo 2

3 1 MACROMEDIA FIREWORKS MX Web II 1.1 Desenho vetorial e imagem bitmap Antes de iniciar a aprendizagem sobre o software deste módulo, precisamos falar sobre desenho vetorial e imagem bitmap. Em computação gráfica, principalmente com softwares de desktop publishing, trabalha-se com esses dois tipos de imagem. O desenho vetorial é obtido através de formas geométricas. Usando o ambiente de trabalho do programa, o artista usa pontos fixos, conhecidos como nós e linhas retas e curvas. O artista cria um desenho através de objetos. Com um pouco de paciência e um software de desenho vetorial, pode-se moldar as formas do desenho até que ele fique como se quer. A base para esse tipo de desenho é as curvas de Bézier, que é o sistema usado por vários softwares como Corel Draw, Freehand, Fireworks, Flash, Illustrator e vários outros. Com esse sistema, o usuário marca pontos na tela e traça linhas entre esses mesmos pontos. O resultado é que assim, o desenho ocupa um espaço bastante reduzido na hora de armazenar e permite o redesenho de qualquer estágio do processo criativo. Já a imagem bitmap é usada para reprodução de imagens como fotografias. Dependendo do tipo de imagem bitmap, a qualidade e a quantidade de cores pode ser melhor ou pior. No caso de utilização de uma imagem desse tipo para uma revista, por exemplo, sua resolução deve ser no mínimo de 300dpi, enquanto para a web não precisa passar de 72dpi. Quanto maior for a quantidade de pontos por polegada (dpi), maior será a qualidade da imagem na hora de reprodução, mas uma imagem que será impressa na tela, como uma foto num website, não precisa de qualidade de impressão. Por isso as diferenças entre dpi entre os tipos de imagem. Para publicação em revistas e jornais, extensões como TIF e EPS são muito utilizadas, enquanto para web, JPG ou GIF são as principais. 1.2 Interface do Fireworks A interface do Macromedia Fireworks MX difere pouco dos outros softwares de autoria da empresa. Menu principal, barra de ferramentas e opções na esquerda, painéis na direita e propriedades na área inferior. Assim que o programa é aberto, é necessário ter um arquivo na área de edição para iniciar o trabalho. Ou abrimos um arquivo já existente, ou criamos um novo arquivo. Crie um arquivo novo levando o ponteiro do mouse até ARQUIVO>NOVO. 3

4 Escola Alcides Maya - Segundo Módulo Requisitando um arquivo novo, abre-se uma caixa de diálogo onde definimos a largura, altura do arquivo e resolução do documento. Na área inferior, o operador define a cor do fundo do arquivo. Pegue um formato 780X380 píxels. Depois de definir como será o arquivo, clique em OK. A interface do Macromedia Fireworks vai aparecer como na imagem: Se preferir, maximize a imagem. Na Barra de ferramentas, todas estão distribuídas em seções. Selecionar, ferramentas para trabalhar com bitmap, ferramentas para trabalhar com vetores, marcações para web, paletas de cores e exibição. 4

5 Web II 1.3 Barra de ferramentas Na barra de ferramentas estão todas as ferramentas de edição. Através destas ferramentas você poderá desenhar vetoriais e editar imagens bitmap. A interface do Macromedia Fireworks vai aparecer como na imagem: Se preferir, maximize a imagem. Na Barra de ferramentas, todas estão distribuídas em seções. Selecionar, ferramentas para trabalhar com bitmap, ferramentas para trabalhar com vetores, marcações para web, paletas de cores e exibição. Na barra de ferramentas estão todas as ferramentas de edição. Através destas ferramentas você poderá desenhar vetoriais e editar imagens bitmap. Seta preta seleciona um objeto. Seta branca seleciona um objeto. Permite manipula Dimensionar tamanho e forma do objeto Cortar altera largura e altura da tela de pintura 5

6 Escola Alcides Maya - Segundo Módulo Seleção de bitmap, com retângulos, círculos, polígonos e mão-livre. Seleção através de tolerância de cores e ferramenta pincel Ferramenta lápis e ferramenta borracha Ferramentas de manipulação de imagem e carimbo Ferramenta conta-gotas e Balde de tinta. Ferramenta linha e ferramenta de desenho em curvas de bézier. Ferramenta retângulo/elipse/polígono. Ferramenta texto. Ferramenta de manipulação de nós. Ferramenta faca. Ferramenta ponto ativo. Ferramenta Fatia Ocultar / mostrar pontos ativos e fatias Paleta de cor do traço Paleta de cor do preenchimento Definições de traço e preenchimento Modos de exibição Ferramenta mão. Ferramenta Zoom Visualizações Toda a edição é feita no modo ORIGINAL. Na aba VISUALIZAÇÃO, o operador terá uma visão de como ficará o documento quando publicado na web. A seguir, temos as abas para 2 PARA CIMA E 4 PARA CIMA, ambos permitem que o operador edite sua arte enquanto visualiza a prévia do que será o documento em edição. Para utilizar o modo quatro PARA CIMA, é necessário um computador bastante rápido, porque para cada edição no ORIGINAL, ele fará três prévias de como o arquivo pode ser exportado no final do processo. 6

7 1.4 Organização e alinhamento Web II Quando estiver fazendo uma ilustração ou layout, nem sempre você irá criar tudo na ordem que precisa. Normalmente é necessário passar um objeto para frente de outro, por exemplo. Como o último objeto desenhado sempre fica sobre os anteriores, a organização dos objetos é muito importante. Crie alguns quadriláteros e elipses, levemente sobrepostos. Depois escolha um objeto que está no fundo e escolha no menu principal MODIFICAR>ORGANIZAR>TRAZER PARA FRENTE O objeto vai passar do fundo para a frente de todos os objetos que você desenhou. As opções de organização são: Para frente de todos os objetos Para frente de um objeto Para trás de todos os objetos Para trás de um objeto Para alinhar objetos você precisa ter no mínimo uma seleção contendo dois deles. Depois da seleção, acione o menu principal como indicado na próxima imagem: Além dos alinhamentos dos objetos à esquerda, centralizado vertical, direita, superior, centralizado horizontal, centralizado inferior, ainda é possível definir as larguras e/ou alturas, isto é, deixar o espaçamento entre os objetos rigorosamente iguais. 1.5 Desenho básico O Fireworks é um software com muitas possibilidades para criação de um desenho. O básico da utilização destes softwares são formas geométricas como quadrados, círculos, retângulos, elipses, triângulos, pentágonos, hexágonos, estrelas e etc. Esses objetos são encontrados todos na mesma ferramenta, conforme ilustração. Para desenhar cantos arredondados, basta usar as setas do teclado (seta para cima, seta para baixo). Conforme pressionar as setas, a curvatura aumenta ou diminui. 7

8 Escola Alcides Maya - Segundo Módulo No caso dos polígonos, a barra de propriedades mostra as opções como quantidade de lados e ângulos para o objeto. As principais ferramentas de desenho do fireworks são curvas de bézier, principalmente a ferramenta Caneta. Com a ferramenta Caneta, o operador distribui nós e linhas elásticas(curvas de Bézier). Cada clique do mouse, é criado um novo nó, que pode ser editado posteriormente através das ferramentas de seleção. Para desenhar segmentos de traçado curvo, clique e arrastar durante o ponteiro do mouse sobre a tela. Durante o desenho, o ponto atual mostra alças. Foque sua atenção na linha da sua ilustração sem perder de vista as alças. Não importa se a ilustração está sendo produzida com a ferramenta Caneta ou com outra ferramenta de desenho do Fireworks, todos os pontos de todos os objetos vetoriais possuem alças de ponto. No entanto, essas alças apenas são visíveis nos pontos curvos. Para curvar uma linha reta. Use a ferramenta caneta sobre a linha. Desenhando com a ferramenta Caneta: 8

9 Selecionar a ferramenta Caneta. Clicar para colocar o primeiro ponto de canto. Web II Mover o local do próximo ponto e, em seguida, clicar e arrastar para elaborar um ponto de curva. Toda vez que clicar e arrastar o mouse, o Fireworks estende o segmento de linha para o novo ponto. Continuar plotando pontos. Se um novo ponto for clicado e arrastado, será elaborado um ponto de curva, se for apenas clicado, será produzido um ponto de canto. Seguir um destes procedimentos para finalizar o traçado, aberto ou fechado: o Clicar duas vezes no último ponto para terminar o traçado como aberto. o Escolher uma outra ferramenta para terminá-lo como um traçado aberto. Quando selecionar algumas ferramentas e depois retornar à ferramenta Caneta, seu próximo clique continuará com o desenho do objeto. o Clicar no primeiro ponto aplicado na tela para fechar o traçado. Os pontos inicial e final de um traçado fechado são o mesmo ponto. 1.6 Tamanho da imagem e tamanho da tela O tamanho da imagem e tamanho da tela são coisas diferentes. Tamanho da imagem se refere ao tamanho em pixels para altura e largura da imagem e sua relação com a resolução da imagem. Tamanho da tela é o formato em pixels da largura e da altura da imagem. Quando se inicia um projeto novo, a primeira coisa que o operador define é o tamanho da imagem em conjunto da resolução. Para o ambiente web, é necessário trabalhar com a menor resolução de imagem possível, porque quanto maior a resolução, mais espaço em disco e maior tempo são exigidos para sua visualização. O tamanho da imagem sempre vem cadeado, para manter a proporção do original. Liberando o item limitar proporções, se pode aumentar ou diminuir a imagem somente na vertical ou horizontal, mas o seu conteúdo também será distorcido. 9

10 Escola Alcides Maya - Segundo Módulo tamanho da tela não interfere com o conteúdo da imagem, apenas na largura e altura da mesma. Através da âncora, é possível indicar a direção que essa altura e largura será editada. A marcação na imagem indica que irá ocorrer uma modificação do centro para fora. Se o marcador estiver na primeira âncora da esquerda, significa que a alteração será vista no lado contrário. 1.7 Texto Criar texto no Fireworks é muito parecido com qualquer outro editor de texto existente. Vale lembrar que a função primária do programa é criar imagens para o layout do website, portanto, textos muito grandes e fontes muito pequenas não são recomendados. 1. Acione a ferramenta texto 2. Clique sobre a tela. 3. escreva Depois de escrever, você pode mudar as propriedades de texto usando a barra de propriedades. 1. Selecione o texto com a seta preta 2. Modifique as propriedades do texto As opções da barra de propriedade modificam o bloco de texto digitado. Negrito, Itálico, Sublinhado, largura da letra, altura, separação entre linhas, orientação do texto, alinhamento e etc. 1.8 Símbolos parte 1 Para mover ilustrações em grupo e guardar o original no Fireworks, é necessário trabalhar com Símbolos. Símbolos são objetos que estão ligados a uma biblioteca. É como uma matriz onde se pode puxar tantos símbolos iguais quantos forem necessários. Vamos criar um logotipo que exige um desenho mais técnico, para depois converter em símbolo Símbolo Gráfico 1. Acionar grade 10

11 Web II Mude as configurações para uma cor neutra e mantenha a distância entre as linhas da grade iguais. Marque mostrar grade e encaixar na grade. A aparência da sua área de trabalho vai ficar parecida com a da figura. Mude o esquema de cores para os objetos que serão desenhados. Linha com cor preta, preenchimento nulo. 11

12 Escola Alcides Maya - Segundo Módulo Com a ferramenta Elipse, tente copiar o exemplo. Com a ferramenta linha, finalizar a estrutura. Em Exibir Grade, desative a visualização e encaixar. Criar o lettering. Essa ilustração construída em vetores é composta de vários objetos diferentes. Transportar esse conjunto de objetos de um lado para outro seria muito complicado se não tivéssemos os símbolos. Selecione todos os objetos Modificar>Símbolo>Converter em Símbolo Escolha um nome para o futuro gráfico e clique em ok. 12

13 Web II Depois da conversão em símbolo a ilustração vai parecer diferente. Quando estiver selecionada, apresentará um pontilhado e no canto inferior esquerdo aparece um símbolo. Para editar qualquer elemento da ilustração, é necessário acionar uma área específica. Para mudar a cor, fonte ou outra coisa, dê um duplo clique sobre o símbolo gráfico. Isso abrirá o ambiente citado. Para saber se está ou não na área de edição, faça um teste. Observe se o Símbolo:Logotipo aparece no topo do programa. Para editar: 1. Duplo clique sobre o símbolo 2. Verifique se o nome do ambiente mudou como no exemplo: Para sair do ambiente de edição do símbolo basta fechar como se estivesse fechando um arquivo. Todos os símbolos ficam guardados numa ferramenta chamada Biblioteca. Cada documento pode armazenar vários símbolos em suas bibliotecas, que podem ser compartilhados entre diferentes documentos. Janela>Biblioteca 13

14 Escola Alcides Maya - Segundo Módulo 1.9 Símbolos - parte Símbolo botão Símbolo botão é usado para criar vínculos com outros documentos, por exemplo. Vamos criar um botão que servirá de base para criar um menu em lição posterior. Já que começamos criando um logotipo de uma empresa de turismo, vamos continuar no mesmo assunto. Quando se define um menu, é sempre melhor planejar quais são os rótulos que cada um desses botões terão. Exemplo: Empresa Promoções Roteiros Notícias Contato Neste caso, a matriz desse menu será Promoções, porque é a palavra que tem o maior número de caracteres. Como base desse botão que iremos criar, usaremos um retângulo. Desenhar um retângulo. Escolher a fonte, tamanho, cor, alinhamento. Se possível, alinhar centralizado. Crie o layout do seu botão preferencialmente do tamanho que será utilizado. Ampliação em 300% Selecione o retângulo e a palavra ao mesmo tempo e converta em Símbolo Botão. 14

15 Web II Uma vez convertido, o botão já pode ser utilizado como tal. A aparência é semelhante a do símbolo gráfico. O botão mostra sempre uma área verde com linhas vermelhas. Elas são parte do fatiamento que a exportação do arquivo exige. Noutra lição veremos mais profundamente o que é o fatiamento. Se a mancha estiver atrapalhando o seu trabalho, você pode ligar ou desligar a visualização clicando no botão branco. Para voltar a visualizar, basta clicar novamente no botão com as cores vermelha e verde. Agora crie as outras faces do botão, como por exemplo, uma pequena diferença de cor quando o ponteiro do mouse passar por cima do botão. Duplo clique sobre o botão recém criado e você entra na área de edição, conforme a imagem. As abas Acima, Sobre e Abaixo que aparecem agora e o nome do símbolo na barra superior indicam que você está na área de edição do símbolo botão. A aba Acima contém os elementos do botão em posição de descanso. Passar para a aba Sobre 15

16 Escola Alcides Maya - Segundo Módulo Essa aba ainda está vazia, para criar os elementos necessários clique no botão COPIAR GRÁFICO ACIMA. As ilustrações que aparecem agora são cópias da aba anterior. Troque as cores para causar o efeito desejado quando o ponteiro do mouse estiver sobre o botão. Para encerrar esta área de edição, basta fechar, como fizemos na edição de símbolo gráfico Comportamentos Os comportamentos são instruções em javascript que uma vez inseridas na arte, serão transferidas para o documento html na finalização do processo. Nesta lição veremos como é a aplicação desses comportamentos no layout. Exemplo, criar um efeito de permuta de imagem. Quando o ponteiro do mouse passar sobre o botão, a imagem será trocada. 1. Criar um botão para este exercício. 2. Criar polígono qualquer ao lado do botão. Usar a ferramenta fatia para criar uma área sobre o polígono Abra o painel de camadas 16

17 Web II O painel de camadas aparece já com a marcação MOLDURA 1. Esse é o local onde você está trabalhando. Molduras são planos diferentes que um layout pode ter. Conforme a moldura, temos um ou outro grupo de objetos aparecendo. Agora você está com dois objetos na Moldura Criar nova moldura. Se não ocorrer automaticamente, mudar para Moldura 2 Na moldura 2, você só vê imagens que estão no arquivo, mas noutro nível. Por isso você só poderá visualizar o estágio sobre do botão que você criou. Desenhar um outro polígono na moldura 2 Selecionar o botão. 17

18 Escola Alcides Maya - Segundo Módulo Observe que ao selecionar o símbolo, aparece um alvo no centro dele. Esse alvo será usado para ligar o botão ao objeto polígono. Clicar sobre alvo e arrastar até a fatia criada pelo operador Caso não esteja, marque MOLDURA 2 Retornar para MOLDURA 1 Para testar o comportamento aplicado, desligue a visualização das fatias passe para a aba VISUALIZAÇÃO. Depois de alguns momentos, você verá como ficará o efeito na web camadas Camadas permitem uma edição mais eficiente da ilustração que está sendo criada. O operador pode facilmente cadear vários objetos, permitindo assim editar apenas um elemento. Cada camada pode ter nome personalizado. Para a realização desse exemplo, vamos trabalhar apenas com desenhos simples. Noutra lição faremos um layout mais complicado. Abrir painel de Camadas Janela >Camadas Crie um retângulo conforme exemplo. No painel de camadas, você vê a CAMADA DA WEB e CAMADA 1, onde dentro dessa camada existe um elemento retângulo. Essa é a hierarquia do arquivo atual. 18

19 Desenhar outro gráfico. Web II Observe que o novo gráfico pertence a mesma camada, porém ocupa outra posição dentro da hierarquia. Observe também que no painel de camadas, existe uma miniatura para ajudar o operador quanto à posição, cor e forma dos elementos. Inserir nova camada Desenhar outro polígono na camada 2. Observe as camadas. 19

20 Escola Alcides Maya - Segundo Módulo A pasta indica camada. O sinal de indica que a camada pode ser fechada O sinal de + indica que a camada pode ser expandida O símbolo do olho indica que a camada ou objeto da camada está visível Por definição padrão, a opacidade de uma camada é 100%. Através de arraste, um objeto pode ser transferido de uma para outra camada e uma camada pode trocar de lugar dentro da hierarquia do layout que está sendo produzido Bitmap no Fireworks Imagens bitmap são imagens que não possuem vetor. Sua visualização se baseia na cor de um conjunto de pixels. Sua qualidade pode ser medida através da quantidade desses pixels por polegada e seu tamanho em largura e altura. O Fireworks não é um software para manipulação de imagem, mas pode criar alguns efeitos interessantes. Armazene algumas imagens na sua pasta. Abra uma dessas imagens Ajuste Para ajustar o tamanho da imagem, use a ferramenta Cortar. 1. Abrir uma área com a ferramenta Cortar 2. Ajustar tamanho usando as alças 3. Duplo clique dentro da área para recorte 20

21 Seleção Web II A seleção de uma figura é diferente da seleção de objetos vetoriais. Uma imagem bitmap pode ser selecionada em parte. A área selecionada pode sofrer alterações, enquanto a área fora da seleção permanece inalterada. A seleção pode ser retangular ou elíptica. Uma área selecionada é representada graficamente por um recorte sobre a figura. Para acrescentar mais uma parte selecionada use a tecla shift enquanto está criando a nova seleção Para retirar uma área selecionada, faça o mesmo procedimento com a tecla ALT pressionada. Uma seleção mais detalhada, como por exemplo, recortar apenas uma das pessoas na foto, use a ferramenta laço. O laço polígono é desenhado ponto por ponto, enquanto o laço depende unicamente da habilidade do usuário com o mouse. Ferramenta pincel. Desenho em modo bitmap com várias opções de efeitos. Ferramenta lápis. Desenho em modo bitmap. Ferramenta Borracha. 21

22 Escola Alcides Maya - Segundo Módulo Clicando e mantendo o botão da esquerda pressionado, o usuário tem acesso as outras ferramentas. Imagem original Ferramenta Embaçar Ferramenta Nitidez Ferramenta Escurecer Ferramenta Manchar 22

23 Web II Ferramenta Carimbo. Duplica os pixels de acordo com a distância determinada pelo usuário. O operador marca origem e local de aplicação através do mouse e da tecla ALT. Dentro de filtros o usuário pode realizar manipulações nos bitmaps. Os ajustes de cor podem ser usados para mudar o brilho, contraste e a paleta de cores da foto como um todo. Programas como Eye Candy e Alien Skin são incluídos dentro do Fireworks, aumentando as opções de alteração nas imagens. 23

24 Escola Alcides Maya - Segundo Módulo 1.13 Layout Nesta lição vamos criar um layout de um cliente hipotético. 1. Criar novo documento com as dimensões 780x380pixels 2. Use JANELA>BIBLIOTECA, abra o menu desta janela e acione IMPORTAR SÍMBOLOS para trazer o símbolo do logotipo que foi criado anteriormente. Por arraste, traga o logotipo da biblioteca para o layout. Feche a janela Biblioteca. Ajuste o tamanho do logotipo no layout. Renomear a CAMADA 1 para LOGOTIPO. Logo depois, Cadear a camada conforme exemplo. Essa camada está protegida. Nenhum objeto pode ser selecionado, nem apagado diretamente na área do layout Crie nova camada. Renomear como Fundo. Desenhe um retângulo e ajuste seu tamanho conforme o exemplo. Como essa camada foi criada depois da camada logotipo, ela aparecerá sobre a primeira, portanto, cobrirá o logotipo. Não esqueça de trocar a ordem das camadas. Na mesma camada, crie um retângulo com os cantos arredondados e ajuste na tela conforme o exemplo. Para melhor compreensão, a magnificação da tela está maior. Ainda na camada Fundo, crie outro retângulo com cantos arredondados para servir de base ao menu. 24

25 Web II Crie uma nova camada chamada Menu Considere que os links deste site serão: empresa, promoções, roteiros, notícias, contato. O link com maior número de caracteres é PROMOÇÕES. Este será a matriz dos botões que serão criados. O texto deverá ter alinhamento centralizado. Converta em botão e entre na área de edição do símbolo. Faça o SOBRE conforme lição anterior. Duplique o botão usando a propriedade e arraste com ALT. Na Barra de propriedades, troque os textos dos botões em TEXTO 25

26 Escola Alcides Maya - Segundo Módulo Crie outra camada para fazer o preenchimento da área que ficou em branco. Com o layout pronto, temos que analisar como será a navegação deste site. Primeiro, observe que o globo colocado na área da capa pode servir como plano de fundo, mas seria estranho repetir aquela imagem cortada. Precisamos então uma área maior no sentido vertical para poder usar essa imagem como background. Aumente a tela de pintura o suficiente para poder ver o globo como no exemplo. Alinhe e distribua os botões do menu. Agora o layout está pronto para a próxima etapa Fatiamento, otimização e exportação Através do fatiamento preparamos as imagens do projeto para a exportação. Use a ferramenta fatia para preparar os cortes. 26

27 Web II Exportação Cada layout terá um fatiamento diferente. Exportação é a tarefa de transformar o conteúdo criado no Fireworks em conteúdo para o Dreamweaver. A imagem PNG que foi criada até aqui será preservada, porém a exportação irá gerar uma série de imagens bitmap, códigos escritos em Javascript e os documentos html necessários para o projeto. 1. Selecione a ferramenta ÁREA DE EXPORTAÇÃO Selecione a área conforme exemplo Duplo clique sobre a área selecionada. Isso abre um quadro de diálogo. Mude o número de cores para um número mais baixo. Neste exemplo 32 cores são suficientes. 27

28 Escola Alcides Maya - Segundo Módulo Clique em exportar e espere a nova caixa de diálogo abrir. Agora os arquivos devem receber nome e um local de depósito. Essa área que será exportada se chamará topo. Não é preciso escrever a extensão do arquivo. Basta escolher os parâmetros conforme a necessidade do usuário. Não esqueça de manter INCLUIR ÁREAS SEM FATIA e COLOCAR AS IMAGENS NA SUBPASTA. Assim, as imagens não ficarão misturadas com os arquivos HTML do projeto. Repita a operação com as seguintes seleções: 28

29 Web II A seleção com o logotipo deve ser exportado apenas como imagem. Sem html. Dê um nome como fundo.gif por exemplo Menu pop-up Crie um botão ou uma fatia Menu principal MODIFICAR>MENU POP UP>ADICIONAR MENU POP UP. Vai aparecer a seguinte tela Preencha os endereços, se for o caso, também identifique o destino Escolha a aparência dos botões que serão criados.. 29

30 Escola Alcides Maya - Segundo Módulo Se precisar, altere a aparência através da aba avançada. Determine a posição que o menu vai ficar na apresentação final. Clique em Concluído. O Fireworks produzirá o menu pop up conforme suas especificações. O menu pop up aparece como uma marcação, que pode ser movido com o mouse, permitindo o ajuste de sua posição se necessário. Para visualizar o menu, é necessário fazer uma prévia do que será o arquivo finalizado. Pode usar ARQUIVO>VISUALIZAR NO NAVEGADOR ou acionar pela tecla de atalho F12. 30

31 2 MACROMEDIA DREAMWEAVER MX Web II 2.1 Apresentação e Interface O Dreamweaver é um programa de autoria para Web. Ele incrementa a velocidade a de produção porque o usuário vê o que está programando e viceversa. Ao iniciar o software, o usuário tem uma visão da área de trabalho, com uma página em branco e os painéis de controle. Todos os painéis no Dreamweaver são móveis, o que facilita muito o trabalho. A seguir veremos as partes da interface do dreamweaver. Menu principal Ferramentas Atalhos para criar novo, abrir, salvar, salvar tudo, recortar, copiar, colar, desfazer e refazer. Código, código e layout, layout, Live Data, título do documento, gerenciamento, depuração, Arquivo em uso e/ou lista de arquivos abertos Inspetor de propriedades. Esse painel é dinâmico. Conforme a ferramenta em utilização, o inspetor muda seus campos. 31

32 Escola Alcides Maya - Segundo Módulo Os painéis abrem e fecham clicando no símbolo triangular ao lado do nome. O mais importante para este módulo é o painel de arquivos do site, conforme mostra o exemplo. Neste painel, o usuário tem a visão da sua pasta raiz local, essencial para o desenvolvimento de um projeto para o ambiente web. Funções como download e upload de arquivos, fazem parte deste painel. 2.2 Pasta Raiz Local Através da Pasta Raiz Local, o operador determina qual é a pasta que guardará todos os arquivos de um projeto de site. Considerando o módulo anterior, usaremos os arquivos construídos no Fireworks para ser montado no dreamweaver. 1. Menu principal SITE>NOVO SITE Preencha os campos, indicando o nome para o projeto e a pasta onde os arquivos serão criados. 32

33 Web II Confirme e aguarde o aviso Confirme e aguarde. A pasta raiz local que irá se apresentar, mostra o que tem dentro da pasta escolhida. Todos os arquivos que fazem parte do projeto deverão ser salvos nesta pasta. Arquivos que não estiverem na pasta raiz local, serão ignorados na hora de fazer o upload. 2.3 Ambientes de trabalho Apenas código 33

34 Escola Alcides Maya - Segundo Módulo Neste modo, o usuário pode trabalhar no Dreamweaver digitando o código de forma direta. A vantagem é que como editor, existe diferença de cores para o que pertence às TAGs e o que será impresso na tela do navegador. O código apresentado é o padrão na criação de páginas básicas com linguagem HTML. Código e Layout Na visualização de código e layout, tanto faz se o operador escrever o código ou desenvolver o layout. Finalmente temos a visualização do layout. Sem códigos, o operador usa a tecnologia WYSIWYG, que é uma sigla para O QUE VOCÊ VÊ É O QUE VOCÊ TEM. As informações impressas na tela do navegador serão o que o operador fizer neste ambiente. 2.4 Montagem de layout criado no Fireworks Considerando os arquivos criados no módulo Fireworks e a pasta raiz local para este módulo, antes de fazer a montagem, você precisa trazer uma cópia daqueles arquivos para dentro deste diretório, conforme o exemplo. 34

35 Web II A pasta imagens contém as imagens dos botões e cabeçalho, tal qual foram criadas no Fireworks. Neste exemplo, temos ainda a pasta imagens_site, que contém imagens importadas de outros lugares para o site, e ainda uma pasta produção, que contém os arquivos PNG. Só para lembrar, os arquivos PNG são os arquivos originais do seu layout, quando estava trabalhando no Fireworks. Outros arquivos, como os temporários por exemplo, aparecem e desaparecem da pasta raiz local. Esses arquivos são na maioria criados pelo próprio dreamweaver, deletando-os automaticamente quando não forem necessários. Agora, vamos juntar as partes criadas no Fireworks, usando o dreamweaver. Crie um arquivo novo. ARQUIVO>NOVO Marque as opções para a criação do documento Uma vez criado o documento, clique em MOLDURAS e depois observe o formato apresentado para cada layout. Neste exemplo, usaremos o padrão molduras superior e esquerda aninhada. Em ARQUIVO>ABRIR NA MOLDURA, escolha o cabeçalho.htm. Isso substituirá o arquivo em branco pelo arquivo que foi criado previamente no Fireworks. O mesmo com menu. Salve o documento em branco como capa.htm. 35

36 Escola Alcides Maya - Segundo Módulo É normal que as molduras pareçam desajustadas, como no exemplo: Ajuste as divisórias da moldura usando o ponteiro do mouse, através da propriedade de arraste. As molduras aparecem com o conteúdo deslocado, para que isso seja eliminado, é necessário um ajuste nas propriedades da página. Menu principal Propriedades da página>propriedades da seleção. Ajuste as margens com o valor 0 O resultado é que as tabelas ficarão alinhadas pelas paredes da moldura, sem espaço sobrando. 36

37 Web II Marque a divisória e no menu principal em ARQUIVO>SALVAR O CONJUNTO DE MOLDURAS, salve o arquivo como index.htm O cabeçalho tem que ser preenchido até o final com a cor do fundo. Essa cor não pode ser interrompida pela resolução diferente de um usuário. Para que isso ocorra, siga o procedimento. Menu principal, MODIFICAR>PROPRIEDADES DA PÁGINA Troque a cor do fundo e confirme Dica: sempre que realizar alguma modificação,salve e teste no navegador usando o atalho F12. Agora vamos colocar o fundo no arquivo capa.htm. 1. Clique no documento capa.htm 2. Neste caso específico, a imagem tem mais peso do lado direito, neste caso, a única forma de alinhar uma imagem pela direita é usando uma tabela. Passe para a aba comuns. Observe o Inspetor de propriedades. As opções de edição da tabela e seu alinhamento podem ser editados neste painel. 37

38 Escola Alcides Maya - Segundo Módulo Insira uma tabela com 1 linha por 1 coluna, largura 550 pixels, borda 0, preenchimentos 0. Para isso, use o botão inserir tabela. Na barra de propriedades, altere a altura para 100% Alinhamento pela direita. No campo Fundo, coloque o caminho para a imagem de fundo criada no Fireworks. O resultado final é a front page de um website montada. Na próxima lição vamos criar os conteúdos de cada botão do menu. Com o layout construído, agora precisamos criar os conteúdos para cada botão. No planejamento, temos os seguintes botões: Empresa, promoções, roteiros, notícias e contato. Cada link será um documento de HTML que será acionado pelo botão e aparecerá na janela principal do layout. 38

39 Vamos primeiro criar um arquivo novo. Menu principal ARQUIVO>NOVO. Salve o arquivo como empresa.htm Web II Quando iniciar um layout, lembre-se de que o padrão de um documento HTML é começar no canto superior esquerdo do navegador. Portanto, no dreamweaver acontece o mesmo. Para começar um layout, precisamos então recorrer ao uso de tabelas, que ajudam a formatar o documento. O que vamos produzir é simples, foto de um lado, texto do outro, texto embaixo ocupando o espaço de duas células. Primeiro, insira uma tabela usando o botão inserir tabela no menu comuns. A tabela pode ficar com duas linhas e duas colunas. A largura pode ficar com 600 pixels e para que os elementos não fiquem grudados na parede da célula, coloque um espaçamento de 5 pixels. O resultado obtido será uma tabela vazia, onde o pontilhado identifica a tabela, mas não mostra as divisórias no navegador. Capture uma imagem na web para servir de conteúdo. Insira a imagem através do botão inserir imagem. Traga a imagem na primeira célula da tabela. 39

40 Escola Alcides Maya - Segundo Módulo Se precisar redimensionar a foto, use o botão SHIFT pressionado e as alças de redimensionamento que aparecem na imagem quando as mesmas são selecionadas. A aparência final deverá ser como no exemplo: Escreva um texto qualquer na célula 2 e observe que este aparece no meio da célula, alinhado pela esquerda. Isso acontece porque todo o alinhamento ocorre pela célula com maior objeto. No caso é a foto. Mude o alinhamento para o topo com o seguinte procedimento: Por dentro das células, faça a seleção por arraste. Mude o alinhamento no inspetor de propriedades. 40

41 Web II O resultado é o seguinte: Selecionando o texto como em qualquer editor de texto, troque o tipo, tamanho e estilo Use para o título Verdana, tamanho 4, cor vermelha e negrito. Para criar separação de parágrafos, use ENTER. Para criar quebra de linha, use SHIFT+ENTER. Obs.: Um parágrafo pode conter textos com quebra de linha. Faça um texto conforme o modelo, usando fonte verdana e tamanho 2. 41

[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

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

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

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

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

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

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

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

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

Corel Draw 12. Enviado por: Jair Marcolino Felix. Rua Dr. Osvaldo Assunção nº 72 Tucano BA Próximo a Escola de Artes e Ofícios (antigo CESG)

Corel Draw 12. Enviado por: Jair Marcolino Felix. Rua Dr. Osvaldo Assunção nº 72 Tucano BA Próximo a Escola de Artes e Ofícios (antigo CESG) Corel Draw 12 Enviado por: Jair Marcolino Felix Corel Draw 12 O Corel Draw é um programa de design gráfico pertencente à Corel.O Corel Draw é um aplicativo de ilustração e layout de página que possibilita

Leia mais

Microsoft Office Excel

Microsoft Office Excel 1 Microsoft Office Excel Introdução ao Excel Um dos programas mais úteis em um escritório é, sem dúvida, o Microsoft Excel. Ele é uma planilha eletrônica que permite tabelar dados, organizar formulários,

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

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

Á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

Portal da Prefeitura de São Paulo SECOM. MANUAL DO WARAM v. 1.5 Secretarias

Portal da Prefeitura de São Paulo SECOM. MANUAL DO WARAM v. 1.5 Secretarias SECOM MANUAL DO WARAM v. 1.5 Secretarias WARAM 1.5 Ferramenta de atualização do Portal da Prefeitura de São Paulo. Use preferencialmente o navegador Internet Explorer superior ou igual a 7.0. No campo

Leia mais

Plano de Aula - Fireworks CS5 - cód. 4084 16 Horas/Aula

Plano de Aula - Fireworks CS5 - cód. 4084 16 Horas/Aula Aula 1 Capítulo 1 - Introdução ao Fireworks CS5 Plano de Aula - Fireworks CS5 - cód. 4084 16 Horas/Aula 1.1. Novidades do Fireworks CS5...23 1.2. Área de Trabalho...24 1.2.1. Painel Ferramentas...25 1.2.2.

Leia mais

CURSO BÁSICO DE INFORMÁTICA. Microsoft Windows XP

CURSO BÁSICO DE INFORMÁTICA. Microsoft Windows XP CURSO BÁSICO DE INFORMÁTICA Microsoft Windows XP William S. Rodrigues APRESENTAÇÃO WINDOWS XP PROFISSIONAL O Windows XP, desenvolvido pela Microsoft, é o Sistema Operacional mais conhecido e utilizado

Leia mais

Para alterar o texto diretamente na página selecione a ferramenta Texto e clique sobre o bloco de texto parágrafo ou artístico.

Para alterar o texto diretamente na página selecione a ferramenta Texto e clique sobre o bloco de texto parágrafo ou artístico. Quando precisarmos utilizar trechos de texto mais longos, como frases inteiras e parágrafos, utilizaremos o recurso Texto Parágrafo. Para iniciarmos um texto parágrafo selecionamos a ferramenta Texto e

Leia mais

Tour pela área de trabalho

Tour pela área de trabalho Tour pela área de trabalho Bem-vindo ao CorelDRAW, um programa abrangente de desenho e design gráfico baseado em vetor para o profissional gráfico. Neste tutorial, você se familiarizará com a terminologia

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

6.5. Renomeando Arquivos ou Pastas

6.5. Renomeando Arquivos ou Pastas 50 II. Para mover um arquivo, pasta, objeto dentro do Windows: 1) Clique com o mouse sobre a pasta, arquivo a serem movidos; 2) Mantenha o botão esquerdo do mouse pressionado; 3) Arraste o objeto para

Leia mais

Clique no menu Iniciar > Todos os Programas> Microsoft Office > Publisher 2010.

Clique no menu Iniciar > Todos os Programas> Microsoft Office > Publisher 2010. 1 Publisher 2010 O Publisher 2010 é uma versão atualizada para o desenvolvimento e manipulação de publicações. Juntamente com ele você irá criar desde cartões de convite, de mensagens, cartazes e calendários.

Leia mais

Microsoft Power Point 2007

Microsoft Power Point 2007 Microsoft Power Point 2007 Sumário Layout e Design 4 Formatação de Textos 8 Salvando um arquivo do PowerPoint 15 Plano de Fundo 16 Marcadores 18 Réguas e grade 19 Tabelas 20 Gráficos 21 Imagens 22 Smart

Leia mais

BREVE TUTORIAL DO PAINT PARTE I Prof. Reginaldo Brito - Informática

BREVE TUTORIAL DO PAINT PARTE I Prof. Reginaldo Brito - Informática BREVE TUTORIAL DO PAINT PARTE I Prof. Reginaldo Brito - Informática O Paint é o programa de edição de imagens padrão do Windows, ao instalar o sistema o Paint é instalado automaticamente. Provavelmente,

Leia mais

Apostila retirada do site Apostilando.com

Apostila retirada do site Apostilando.com Introdução... 2 Area de trabalho... 3 Ícones... 3 Barra de tarefas... 3 O Botão Iniciar... 4 Todos os programas... 5 Logon e Logoff... 6 Desligando o Windows XP... 6 Acessórios do Windows... 7 Janelas...

Leia mais

OURO MODERNO www.ouromoderno.com.br. Designer Gráfico APOSTILA DE EXEMPLO. (Esta é só uma reprodução parcial do conteúdo)

OURO MODERNO www.ouromoderno.com.br. Designer Gráfico APOSTILA DE EXEMPLO. (Esta é só uma reprodução parcial do conteúdo) Designer Gráfico APOSTILA DE EXEMPLO (Esta é só uma reprodução parcial do conteúdo) 1 Índice Aula 1... 3 Apresentação do Photoshop... 3 Barra de Menus... 3 Barra de Opções... 3 Barra de Ferramentas...4

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

MICROSOFT OFFICE WORD2000 INTERMEDIÁRIO

MICROSOFT OFFICE WORD2000 INTERMEDIÁRIO MICROSOFT OFFICE WORD2000 INTERMEDIÁRIO Atualização 01/10/2001 2 Objetivo Este treinamento é dirigido a pessoas que desejam aprender como aplicar e criar estilos; criar e formatar tabelas; adicionar formatações

Leia mais

Entendendo as janelas do Windows Uma janela é uma área retangular exibida na tela onde os programas são executados.

Entendendo as janelas do Windows Uma janela é uma área retangular exibida na tela onde os programas são executados. Windows Menu Entendendo as janelas do Windows Uma janela é uma área retangular exibida na tela onde os programas são executados. Minimizar Fechar Maximizar/restaurar Uma janela é composta de vários elementos

Leia mais

Apostila de Windows XP

Apostila de Windows XP Table of Contents Introdução...1 Area de trabalho...5 Ícones...7 Barra de tarefas...8 O Botão Iniciar...10 Todos os programas...14 Logon e Logoff...16 Desligando o Windows XP...18 Acessórios do Windows...20

Leia mais

FOXIT READER 6.0 Guia Rápido. Sumário... II Use o Foxit Reader 6.0... 1. Leitura... 5. Trabalhar em PDFs... 8. Comentários... 10. Formulários...

FOXIT READER 6.0 Guia Rápido. Sumário... II Use o Foxit Reader 6.0... 1. Leitura... 5. Trabalhar em PDFs... 8. Comentários... 10. Formulários... Sumário Sumário... II Use o Foxit Reader 6.0... 1 Instalar e desinstalar... 1 Abrir, Criar, Fechar, Salvar e Sair... 1 Definir o estilo da interface e da aparência... 4 Veja todas as diferentes ferramentas...

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

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

Apostila de Word 2013

Apostila de Word 2013 Iniciando o word 2013...01 Regras Básicas para digitação de um texto...02 Salvando um arquivo com senha...02 Salvando um arquivo nas nuvens (OneDrive).... 02 Verificando a ortografia e a gramática do texto...

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

MICROSOFT WORD INICIANDO O MICROSOFT WORD

MICROSOFT WORD INICIANDO O MICROSOFT WORD MICROSOFT WORD Este é um dos editores de texto mais utilizados no mundo. O Word é um processador de texto de alta performance para trabalhar com textos. Com ele você pode fazer o que desejar, em matéria

Leia mais

Crie um novo documento de mais ou menos 300x300Selecione a ferramenta Elipse tool (elipse U)

Crie um novo documento de mais ou menos 300x300Selecione a ferramenta Elipse tool (elipse U) Animação Crie um novo documento de mais ou menos 300x300Selecione a ferramenta Elipse tool (elipse U) Crie uma bola segurando a tecla SHIFT com uma cor qualquer Duplique essa bola através do menu Editar

Leia mais

OpenOffice Calc. Por: Leandro Dalcero

OpenOffice Calc. Por: Leandro Dalcero OpenOffice Calc Por: Leandro Dalcero Índice... 1. Iniciando o Calc 1.0 2. Componentes básico da janela do Calc...... 3. Menu Arquivo... 3.1.Novo 3.2.Abrir... 3.3.Piloto Automático...... 3.4.Fechar 3.5.Salvar......

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

INDÍCE. Esta apostila foi baixada do site Geek Brasil http://www.geekbrasil.com.br

INDÍCE. Esta apostila foi baixada do site Geek Brasil http://www.geekbrasil.com.br INDÍCE Visão Geral: Introdução ao Fireworks...2 Ferramentas de desenho...3 Pintar o traço e o preenchimento...3 Botões JavaScript...5 Criar um botão...5 Duplicar o botão...12 Rollovers sofisticados...14

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

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

Conhecendo o Word... 2 Configurar área de trabalho... 3 Abrir um arquivo já gravado:... 5 Salvar (guardar) o seu trabalho:... 6

Conhecendo o Word... 2 Configurar área de trabalho... 3 Abrir um arquivo já gravado:... 5 Salvar (guardar) o seu trabalho:... 6 Microsoft Word 1- Conhecendo o Word... 2 2- Configurar área de trabalho... 3 3- Abrir um arquivo já gravado:... 5 4- Salvar (guardar) o seu trabalho:... 6 5- Formatar a fonte:... 7 6- Desfazendo / repetindo

Leia mais

SUMÁRIO. Introdução 1

SUMÁRIO. Introdução 1 SUMÁRIO Introdução 1 Tela de Apresentação 1 Criando Figuras Simples 2 Linhas Curvas 3 Figuras Geométricas 4 Ferramenta Seleção 4 Desfazer e Repetir 4 Colorindo os Objetos 5 Ferramenta Zoom 5 Gravando,

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

Publisher. Publisher. versão 2012.2

Publisher. Publisher. versão 2012.2 versão 2012.2 Publisher Publisher Para diagramar, vamos utilizar o Publisher, do pacote de programas Microsoft Office. As instruções valem para as versões 2003, 2007 e 2010 do pacote. Vamos aprender através

Leia mais

Dados contadores de história. Qlik Sense 1.1 Copyright 1993-2015 QlikTech International AB. Todos os direitos reservados.

Dados contadores de história. Qlik Sense 1.1 Copyright 1993-2015 QlikTech International AB. Todos os direitos reservados. Dados contadores de história Qlik Sense 1.1 Copyright 1993-2015 QlikTech International AB. Todos os direitos reservados. Copyright 1993-2015 QlikTech International AB. Todos os direitos reservados. Qlik,

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

Macromedia Flash MX 1

Macromedia Flash MX 1 Macromedia Flash MX 1 Macromedia Flash MX 2 Universidade José do Rosário Vellano Bacharelado em Ciência da Computação Práticas de Ensino Alunos: Dayana Ribeiro de Castro Ferreira Luiz Ferreira Peçanha

Leia mais

APOSTILA DE DESENHO TÉCNICO NO COREL DRAW PROFESSORA GRAZIELA BRUNHARI KAULING UNIDADE 02: COREL DRAW

APOSTILA DE DESENHO TÉCNICO NO COREL DRAW PROFESSORA GRAZIELA BRUNHARI KAULING UNIDADE 02: COREL DRAW APOSTILA DE DESENHO TÉCNICO NO COREL DRAW PROFESSORA GRAZIELA BRUNHARI KAULING UNIDADE 02: COREL DRAW 1 INTRODUÇÃO ÀS FERRAMENTAS DO PROGRAMA COREL DRAW INTRODUÇÃO O Corel Draw é um programa de design

Leia mais

XXIV SEMANA MATEMÁTICA

XXIV SEMANA MATEMÁTICA XXIV SEMANA ACADÊMICA DA MATEMÁTICA Minicurso: Produção de Páginas Web para Professores de Matemática Projeto de Extensão: Uma Articulação entre a Matemática e a Informática como Instrumento para a Cidadania

Leia mais

Barra de Títulos. Barra de Menu. Barra de Ferramentas. Barra de Formatação. Painel de Tarefas. Seleção de Modo. Área de Trabalho.

Barra de Títulos. Barra de Menu. Barra de Ferramentas. Barra de Formatação. Painel de Tarefas. Seleção de Modo. Área de Trabalho. Conceitos básicos e modos de utilização das ferramentas, aplicativos e procedimentos do Sistema Operacional Windows XP; Classificação de softwares; Principais operações no Windows Explorer: criação e organização

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

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

Tour pela área de trabalho

Tour pela área de trabalho Tour pela área de trabalho Bem-vindo ao CorelDRAW, um programa abrangente de desenho e design gráfico baseado em vetor para o profissional gráfico. Neste tutorial, você se familiarizará com a terminologia

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

WIN + D WIN + M SHIFT + WIN + M WIN + R WIN + E WIN + PAUSE BREAK

WIN + D WIN + M SHIFT + WIN + M WIN + R WIN + E WIN + PAUSE BREAK Windows em geral WIN = Abre o menu Iniciar. Use as setas para navegar nas opções, e dê ENTER para abrir um item. WIN + D = Mostrar área de trabalho. WIN + M = Minimizar tudo. SHIFT + WIN + M = Desminimizar

Leia mais

Flex. MANUAL DE USO DA FERRAMENTA FLEX O Flex como gerenciador de conteúdo

Flex. MANUAL DE USO DA FERRAMENTA FLEX O Flex como gerenciador de conteúdo 2011 MANUAL DE USO DA FERRAMENTA FLEX O Flex como gerenciador de conteúdo Aprenda como é simples utilizar a ferramenta Flex como seu gerenciador de conteúdo online. Flex Desenvolvido pela ExpandWEB 31/01/2011

Leia mais

8/9/2010 WINDOWS. Breve Histórico. Profa. Leda G. F. Bueno. Seu desenvolvimento iniciou-se em 1981

8/9/2010 WINDOWS. Breve Histórico. Profa. Leda G. F. Bueno. Seu desenvolvimento iniciou-se em 1981 Conceitos Básicos e Gerenciamento de Arquivos WINDOWS EXPLORER Profa. Leda G. F. Bueno WINDOWS Sistema operacional criado pela Microsoft Corporation Característica Principal características o uso de janelas

Leia mais

Manual PAINT.NET de imagens

Manual PAINT.NET de imagens Manual PAINT.NET de imagens 1. Instalação 1.1 - Para instalar o programa paint.net, o primeiro passo é baixá-lo do endereço a seguir e salvá-lo em seu computador. http://ww2.prefeitura.sp.gov.br/paint_net/paint.net.3.36.exe

Leia mais

ROBERTO OLIVEIRA CUNHA

ROBERTO OLIVEIRA CUNHA LEIAME APRESENTAÇÃO Nenhuma informação do TUTORIAL DO MICRO- SOFT OFFICE WORD 2003 poderá ser copiada, movida ou modificada sem autorização prévia e escrita do Programador Roberto Oliveira Cunha. Programador:

Leia mais

APOSTILA BÁSICA COMO UTILIZAR A LOUSA DIGITAL E O SOFTWARE SMART NOTEBOOK

APOSTILA BÁSICA COMO UTILIZAR A LOUSA DIGITAL E O SOFTWARE SMART NOTEBOOK APOSTILA BÁSICA COMO UTILIZAR A LOUSA DIGITAL E O SOFTWARE SMART NOTEBOOK 1 SÚMARIO ASSUNTO PÁGINA Componentes da Lousa... 03 Função Básica... 04 Função Bandeja de Canetas... 05 Calibrando a Lousa... 06

Leia mais

Bem vindo ao ajuda do software QUICKFISH para criação de sites.

Bem vindo ao ajuda do software QUICKFISH para criação de sites. Bem vindo ao ajuda do software QUICKFISH para criação de sites. SUMÁRIO 1 Exemplo de site criado no software QUICKFISH...02 2 Salvando Seu Site...03 3 Publicando Seu Site...03 4 Visão inicial do Software

Leia mais

ROBERTO OLIVEIRA CUNHA

ROBERTO OLIVEIRA CUNHA LEIAME Apresentação Nenhuma informação do TUTORIAL DO MICRO- SOFT OFFICE POWER POINT 2003 poderá ser copiada, movida ou modificada sem autorização prévia e escrita do Programador Roberto Oliveira Cunha.

Leia mais

Portal Contador Parceiro

Portal Contador Parceiro Portal Contador Parceiro Manual do Usuário Produzido por: Informática Educativa 1. Portal Contador Parceiro... 03 2. Acesso ao Portal... 04 3. Profissionais...11 4. Restrito...16 4.1 Perfil... 18 4.2 Artigos...

Leia mais

O OpenOffice.org Impress

O OpenOffice.org Impress 1 O OpenOffice.org Impress O OpenOffice.org Impress é uma ferramenta excelente para a criação de apresentações multimídia realmente eficientes. Suas apresentações vão brilhar com figuras, efeitos especiais,

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

Publisher. Publisher. versão 2012.2

Publisher. Publisher. versão 2012.2 versão 2012.2 Publisher Publisher Para diagramar, vamos utilizar o Publisher, do pacote de programas Microsoft Office. As instruções valem para as versões 2003, 2007 e 2010 do pacote. Vamos aprender através

Leia mais

Manual do Usuário. Sumário

Manual do Usuário. Sumário Manual do Usuário Sumário Login... 2 Tela inicial (Dashboard)... 3 Modelo Operacional... 4 Agrupamentos de Menus... 6 Conteúdos / Notícias / Eventos... 9 Capas... 14 Repositório de Arquivos... 17 Enquetes...

Leia mais

UNIVERSIDADE ESTADUAL DE CAMPINAS. Instruções para Uso do Software VISIO

UNIVERSIDADE ESTADUAL DE CAMPINAS. Instruções para Uso do Software VISIO UNIVERSIDADE ESTADUAL DE CAMPINAS Instruções para Uso do Software VISIO Fevereiro/2006 Instruções para uso do Visio... 03 Instruções para Uso do Software VISIO 2 Instruções para uso do Visio O Visio 2003...

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

Uruaçu - 2009. Professoras Formadoras do NTE Uruaçu

Uruaçu - 2009. Professoras Formadoras do NTE Uruaçu Professoras Formadoras do NTE Uruaçu Uruaçu - 2009 Núcleo de Tecnologia Educacional de Uruaçu Rua Maranhão Quadra 02 Lote 01 Bairro JK Uruaçu Goiás Telefone: (62)3357-4237 - Fax : 3357-4217 E-mail nteuruacu@hotmail.com

Leia mais

Status. Barra de Título. Barra de Menu. Barra de. Ferramentas Padrão. Caixa de nomes. Barra de. Ferramentas de Formatação. Indicadores de Coluna

Status. Barra de Título. Barra de Menu. Barra de. Ferramentas Padrão. Caixa de nomes. Barra de. Ferramentas de Formatação. Indicadores de Coluna O que é uma planilha eletrônica? É um aplicativo que oferece recursos para manipular dados organizados em tabelas. A partir deles pode-se gerar gráficos facilitando a análise e interpretação dos dados

Leia mais

TUTORIAL SCRIBUS 1.4.2

TUTORIAL SCRIBUS 1.4.2 1 TUTORIAL SCRIBUS 1.4.2 Marinez Siveris asiveris@via-rs.net O que é o Scribus? O Scribus é um excelente programa livre para a produção de revistas, propagandas, jornais, enfim, qualquer documento que

Leia mais

APOSTILA WORD BÁSICO

APOSTILA WORD BÁSICO APOSTILA WORD BÁSICO Apresentação O WORD é um editor de textos, que pertence ao Pacote Office da Microsoft. Suas principais características são: criação de textos, cartas, memorandos, documentos, mala

Leia mais

Seleção Retangular Esta é uma das ferramentas mais usadas. A seleção será indicada pelas linhas tracejadas que fazem a figura de um retângulo.

Seleção Retangular Esta é uma das ferramentas mais usadas. A seleção será indicada pelas linhas tracejadas que fazem a figura de um retângulo. O que é o Gimp? O GIMP é um editor de imagens e fotografias. Seus usos incluem criar gráficos e logotipos, redimensionar fotos, alterar cores, combinar imagens utilizando o paradigma de camadas, remover

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

ÍNDICE. Sobre o SabeTelemarketing 03. Contato. Ícones comuns à várias telas de gerenciamento. Verificar registros 09. Tela de relatórios 09

ÍNDICE. Sobre o SabeTelemarketing 03. Contato. Ícones comuns à várias telas de gerenciamento. Verificar registros 09. Tela de relatórios 09 ÍNDICE Sobre o SabeTelemarketing 03 Ícones comuns à várias telas de gerenciamento Contato Verificar registros 09 Telas de cadastro e consultas 03 Menu Atalho Nova pessoa Incluir um novo cliente 06 Novo

Leia mais

Aprendendo Corel Draw 2

Aprendendo Corel Draw 2 ÍNDICE Introdução Ferramentas do Trabalhando com cores Trabalhando com objetos Transformando objetos desenhados Clonagem de objetos Formatando objetos Preenchimentos e Contornos Preenchimento Gradiente

Leia mais

MANUAL DE GERAÇÃO E DISPOSIÇÃO DE IMAGENS

MANUAL DE GERAÇÃO E DISPOSIÇÃO DE IMAGENS MANUAL DE GERAÇÃO E DISPOSIÇÃO DE IMAGENS Página 1 Titulo do Manual Manual de Geração e Disposição de Imagens Elaboração Humberto Heitor de Lima Matheus Versão 1.0 Data Elaboração 03/03/2011 Paginas 48

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

Versão 2.2.0 PIMACO AUTOADESIVOS LTDA. Assistente Pimaco + 2.2.0. Ajuda ao Usuário

Versão 2.2.0 PIMACO AUTOADESIVOS LTDA. Assistente Pimaco + 2.2.0. Ajuda ao Usuário Versão 2.2.0 PIMACO AUTOADESIVOS LTDA. Assistente Pimaco + 2.2.0 Ajuda ao Usuário A S S I S T E N T E P I M A C O + 2.2.0 Ajuda ao usuário Índice 1. BÁSICO 1 1. INICIANDO O APLICATIVO 2 2. O AMBIENTE DE

Leia mais

Manual de utilização do Portal Entrelace.org.br. William Oyama www.evisionbrasil.com.br

Manual de utilização do Portal Entrelace.org.br. William Oyama www.evisionbrasil.com.br Manual de utilização do Portal Entrelace.org.br William Oyama www.evisionbrasil.com.br Índice do tutorial 1 Portal entrelace.obr.br 2- Painel Administrativo 3- Informações Restritas 4- Acervo 5- Notícias

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

Trabalhando com Imagens no Word XP

Trabalhando com Imagens no Word XP Table of Contents Trabalhando com imagens...1 A barra de desenho...2 Tela de desenho...2 Caixa de Texto...3 Linha...4 Seta...4 Retângulo (e quadrado)...5 Elipse (e círculo)...5 AutoFormas...6 Modificação

Leia mais

ÍNDICE... 2 INTRODUÇÃO... 4

ÍNDICE... 2 INTRODUÇÃO... 4 Mic crosoft Excel 201 0 ÍNDICE ÍNDICE... 2 INTRODUÇÃO... 4 Interface... 4 Guias de Planilha... 5 Movimentação na planilha... 6 Entrada de textos e números... 7 Congelando painéis... 8 Comentários nas Células...

Leia mais

Bem-vindo ao CorelDRAW, um programa abrangente de desenho e design gráfico baseado em vetor para o profissional gráfico.

Bem-vindo ao CorelDRAW, um programa abrangente de desenho e design gráfico baseado em vetor para o profissional gráfico. Trabalhar com layout Bem-vindo ao CorelDRAW, um programa abrangente de desenho e design gráfico baseado em vetor para o profissional gráfico. Neste tutorial, você criará um pôster para uma cafeteria imaginária.

Leia mais

BrOffice Impress Módulo 06 ÍNDICE

BrOffice Impress Módulo 06 ÍNDICE ÍNDICE VÍDEO 1 Trabalhando com o BrOffice.org Impress VÍDEO 2 Conhecendo o BrOffice.org Impress VÍDEO 3 Criando uma nova apresentação VÍDEO 4 Estrutura de tópicos VÍDEO 5 Layout VÍDEO 6 Trabalhando com

Leia mais

para Windows OpenOffice.org 1.0: Manual do usuário

para Windows OpenOffice.org 1.0: Manual do usuário para Windows Secretaria da Administração Cia de Processamento de Dados do Estado da Bahia Cia de Processamento de Dados do Estado da Bahia Introdução Bem vindo ao. O contém informações sobre como utilizar

Leia mais

Sistema topograph 98. Tutorial Módulo Projetos

Sistema topograph 98. Tutorial Módulo Projetos Sistema topograph 98 Tutorial Módulo Projetos Como abrir um projeto existente _ 1. Na área de trabalho do Windows, procure o ícone do topograph e dê um duplo clique sobre ele para carregar o programa.

Leia mais

Licenciamento de Uso

Licenciamento de Uso Licenciamento de Uso Este documento é propriedade intelectual 2002 do Centro de Computação da Unicamp e distribuído sob os seguintes termos: 1. As apostilas publicadas pelo Centro de Computação da Unicamp

Leia mais

editor Writer, do BrOffice

editor Writer, do BrOffice editor Writer, do BrOffice Utilizar o editor Writer, do BrOffice, para editar textos e inserir tabelas; Conscientizar sobre o cuidado com os direitos autorais, citando sempre as fontes de onde foram retirados

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

Microsoft PowerPoint

Microsoft PowerPoint Microsoft PowerPoint Microsoft PowerPoint é utilizado para desenvolver apresentações. Os trabalhos desenvolvidos com este aplicativo normalmente são apresentados com o auxílio de um datashow. Apresentações

Leia mais

Centro Federal de Educação Tecnológica da Bahia Curso Excel Avançado Índice

Centro Federal de Educação Tecnológica da Bahia Curso Excel Avançado Índice Índice Apresentação...2 Barra de Título...2 Barra de Menus...2 Barra de Ferramentas Padrão...2 Barra de Ferramentas de Formatação...3 Barra de Fórmulas e Caixa de Nomes...3 Criando um atalho de teclado

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

Unidade III 1. APRESENTANDO PLANILHAS ELETRÔNICAS. 1.1) Conceito de Planilha Eletrônica. 1.2) Inicializando o Excel e o Calc

Unidade III 1. APRESENTANDO PLANILHAS ELETRÔNICAS. 1.1) Conceito de Planilha Eletrônica. 1.2) Inicializando o Excel e o Calc Unidade III 1. APRESENTANDO PLANILHAS ELETRÔNICAS 1.1) Conceito de Planilha Eletrônica Em certa época, a planilha era um pedaço de papel que os contadores e planejadores de empresas utilizavam para colocar

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

OpenOffice Impress. Por: Leandro Dalcero

OpenOffice Impress. Por: Leandro Dalcero OpenOffice Impress Por: Leandro Dalcero Índice 1. Iniciando o Impress... Componentes 2. básico da janela do Impress...... 3. Menu Arquivo 3.1.Novo...... 3.2.Abrir... 3.3.Piloto Automático 3.4.Fechar......

Leia mais