Prévia do material em texto
* WEBDESIGNER – CONSTRUÇÃO DE SITES* ●Desenvolvido por Valdivan Ivan 1 * WEBDESIGNER – CONSTRUÇÃO DE SITES* Índice Mozilla Composer / Internet Introdução..................................................................................................................05 Histórico e Equipamentos Básicos..............................................................................05 World Wide Web....................................................................................................05 Protocolo...............................................................................................................05 URL........................................................................................................................05 Home Page............................................................................................................05 Browsers................................................................................................................06 HTML.....................................................................................................................06 ***Estrutura Básica de uma Página HTML...................................................................06 Exemplo..........................................................................................................06 Conhecendo o Mozilla Composer................................................................................07 Cabeçalhos,Títulos e Parágrafos.................................................................................07 Atributos.....................................................................................................................09 Alinhamentos..............................................................................................................09 Exemplo............................................................................................................09 Separador de Grupos..................................................................................................10 Exemplo............................................................................................................10 Formatação de Estilos de Textos.................................................................................11 Tabela de Cores (Código Hexadecimal)...................................................................................12 Tamanhos...................................................................................................................13 Estilos de Caracteres...................................................................................................................13 Entidades de Caracteres.............................................................................................14 Listagens....................................................................................................................15 Exemplo............................................................................................................16 Listagens Ordenadas..................................................................................................17 Exemplo............................................................................................................17 Listagens não Ordenadas...........................................................................................18 Exemplo............................................................................................................18 Listagens de Definição................................................................................................19 Exemplo............................................................................................................19 Listagens com Sub Níveis...........................................................................................20 Exemplo............................................................................................................20 Background................................................................................................................21 Exemplo1(Usando cores)...................................................................................21 Exemplo2(Usando imagens)..............................................................................21 Exemplo3(Usando imagens em sub pasta)........................................................21 Imagens......................................................................................................................22 ●Desenvolvido por Valdivan Ivan 2 * WEBDESIGNER – CONSTRUÇÃO DE SITES* ***Observações..........................................................................................................22 Formatos de Imagens.................................................................................................23 Tabelas.......................................................................................................................24 Exemplo...........................................................................................................24 Formulário..................................................................................................................25 Exemplo...........................................................................................................25 Link.............................................................................................................................27 Exemplo1..........................................................................................................27 Exemplo2 .........................................................................................................28 Exemplo3..........................................................................................................29 Frames(Molduras).......................................................................................................30 Etapas de Criação.......................................................................................................31 Resumo de TAGs.........................................................................................................32 Inkscape Introdução..................................................................................................................34 A Barra de Ferramentas..............................................................................................35 Zoom e Seleção de Objetos........................................................................................36 Criando Formas com o INKSCAPE...............................................................................37 ***Observações..........................................................................................................37 Preenchimento de um Objeto.....................................................................................38 Contorno de Objetos...................................................................................................38 Exemplo.............................................................................................................38 Modelo de Cores.........................................................................................................39 Girando um Objeto.....................................................................................................40 A Ferramenta de Criar e Editar Textos........................................................................41 Mudando a Cor de um Texto.......................................................................................41 Sombreamento...........................................................................................................42 Ordenando Objetos.....................................................................................................42“fechar Janela” pois o INKSCAPE não possui botões no final da janela. ●Desenvolvido por Valdivan Ivan 38 Desenhando com o INKSCAPE Tipos de pintura (preenchimentos) Modos de cores * WEBDESIGNER – CONSTRUÇÃO DE SITES* O INKSCAPE é um programa muito intuitivo, porém, por diversas vezes, alguns de seus mais importantes recursos, não serão notados por um usuário leigo. Por isso é muito importante observar toda a tela do INKSCAPE, para que recursos importantes não sejam perdidos. Um destes recursos é a possibilidade de trabalhar com as Ferramentas que desenvolvem funções duplas. DICA DO COREL DRAW Para editar um contorno no Corel DRAW, basta Selecionar o objeto e clicar na Ferramenta Contorno, como mostra a figura a seguir: Modelo de Cores Esta guia encontra-se no Menu Objeto e serve para trocar rapidamente a cor de preenchimento de um objeto, bastando para tanto apenas clicar na cor desejada. ●Desenvolvido por Valdivan Ivan 39 Escolha aqui a espessura do contorno a ser aplicado Clicando nesta aba, você poderá escolher entre os 5 tipos para visualizar. Pode escolher entre as opções: Listar e Grade. Serão 14 barras de MODELO DE CORES. Tipos Opções Barras de cores * WEBDESIGNER – CONSTRUÇÃO DE SITES* Girando um Objeto Com o INKSCAPE, podemos facilmente girar ou espelhar um determinado objeto. Como na maioria dos Ilustradores Vetoriais, o processo é semelhante ao processo de redimensionar um objeto, através da ferramenta de Seleção ou através do Menu Objeto. Vejamos a figura abaixo: Enquanto não soltamos o botão do mouse podemos girar livremente o objeto, porém, depois de criada a figura, devemos selecioná-lo para depois editá-lo. Na tela acima, criamos um triângulo. Para girar este objeto devemos proceder da seguinte forma: 1° - Com a ferramenta “Selecionar e transformar objetos” ativada, clicamos no corpo do objeto. Então, o objeto assume esta forma mostrada ao lado: 2° - Mais um clique no corpo do objeto, e as abas laterais do objeto assumirão formas diferentes das abas centrais. Compare na figura ao lado: 3 – Pronto. Nosso objeto já está preparado para ser girado. Basta clicar e arrastar em uma aba lateral e rotacionar o objeto livremente. DICA DO COREL DRAW De forma semelhante, siga os mesmos passos adotados no INKSCAPE. ●Desenvolvido por Valdivan Ivan 40 Figura criada no INKSCAPE Veja a visualização após o segundo clique. * WEBDESIGNER – CONSTRUÇÃO DE SITES* A Ferramenta de Criar e Editar Objetos Textos Com o INKSCAPE, fazer textos artísticos é uma tarefa simples e prazerosa. Podemos ter textos com e sem sombra, com ou sem efeitos de preenchimento. Então, vamos treinar... Mudando a Cor de uma Fonte Podemos mudar rapidamente a cor do texto ou de um objeto feito no INKSCAPE, clicando a cor na Paleta de Cores. Porém, através da opção "Preenchimento e Traço" estaremos tratando o texto como sendo um objeto, com linhas de contorno e preenchimentos independentes. Então, para tratar um texto como objeto, selecione tal texto e clique o Menu Objeto. No Menu “Objeto”, escolhemos a opção “Preenchimento e Traço”, após a seleção de tal texto. Depois basta escolher uma das guias de edição (RGB, HSL, CMYK ou RODA), para editar uma cor de sua preferência, pois, o processo é semelhante ao de preenchimento de um objeto. Assim sendo, é possível também aplicar contorno em nosso texto. Na dúvida, consulte o capítulo “Preenchimento de um Objeto” DICA DO COREL DRAW Faça um texto clicando na Ferramenta de Texto do Corel DRAW. Para formatar este texto, clique no menu “TEXTO”. Para mudar a cor de uma fonte no Corel DRAW, basta selecionar o texto e clicar na “Paleta de Cores”. ●Desenvolvido por Valdivan Ivan 41 Faça um texto qualquer, para tanto utilize a ferramenta de “Criar e editar objetos Texto”. Após digitar seu texto, vá até o menu “TEXTO”, e escolha a opção “Texto e Fonte” para abrir a caixa de diálogo mostrada ao lado: Escolha aqui a fonte que mais agrada você Escolha aqui o estilo da fonte que mais agrada você Escolha aqui o tamanho da fonte Caixa de diálogo do INKSCAPE Mudando a cor de um texto no INKSCAPE Na Barra de Ferramentas do Corel DRAW, clique nesta ferramenta para fazer um texto No Corel DRAW, escolha aqui a fonte que mais agrada você * WEBDESIGNER – CONSTRUÇÃO DE SITES* Sombreamento Aplicar sombreamento (sombra) em um texto é um recurso que garante beleza e versatilidade ao texto ou anúncio. É possível no INKSCAPE colocar sombra em um texto alternando entre as mais diversas cores. Então, vejamos os passos para a aplicação de sombra em um texto: 1 – Após fazer seu texto, duplique ele, através do Menu “Editar”, opção “Duplicar”, ou através do atalho CTRL+D. Detalhe: Duplicar é semelhante ao CTRL+C (Copiar), porém, mais rápido e mais prático, pois, copiando teremos que colar o objeto e depois movê-lo, sem mencionar que o copiar se utiliza da área de transferência e irá colocar o objeto colado exatamente onde o cursor estiver ativo. Duplicando o processo é automático e mais dinâmico, sendo preciso apenas, mover o objeto duplicado. Abaixo, temos um texto já duplicado e editado o seu preenchimento e traço. Ordenando Objetos Para definir a ordem de exibição das cores nas imagens, devemos usar um comando para levantar ou abaixar uma ou outra imagem, e isso é muito simples no INKSCAPE, bastando apenas usar as teclas “Page Up” para levantar, ou “Page Down” para abaixar um objeto. Através do comando ALT+clique, podemos selecionar os objetos por ordem de exibição. Abaixo temos o mesmo texto mostrado acima, porém, a ordem de exibição foi alterada para que o texto mais escuro seja a sombra. DICA DO COREL DRAW Para ordenar no Corel DRAW, usamos a tecla “CTRL” juntamente com Page Down e Page Up, para respectivamente, recuar e avançar um objeto. ●Desenvolvido por Valdivan Ivan 42 Para exibir esta caixa de diálogo, clique com o botão direito do mouse sobre a figura * WEBDESIGNER – CONSTRUÇÃO DE SITES* Transparência/Gradiente Podemos fazer um objeto ter cor sólida e misturá-la com uma transparência ou colocar tal objeto por inteiro em transparência. Veja os exemplos na figura ao lado; Acima temos a palavra DESIGNER e uma esfera. A primeira palavra tem início sólido e seu final tem transparência, mas, poderia ser uma outra cor sólida, formando um gradiente. A segunda palavra está com transparência em todo o seu conteúdo. A esfera tem em seu topo um brilho simulado pela aplicação de transparência. 1 - Para aplicar transparência em um objeto basta selecioná-lo e acessar o Menu “Objeto” e depois a opção “Preenchimento e Traço”. 2 - Depois na Guia “Preencher” selecionar o tipo de cor. Se lisa ou gradiente linear ou gradiente radial. 3 – Clique no botão “Editar”, porém, o botão editar estará disponível somente para os gradientes. 4 – Abrirá então a janela “Editor de Gradiente”, onde quanto menor for o valor de “ALFA”, maior será a transparência. 5 – Se não houver gradiente na figura, o valor de “ALFA” já estará disponível na opção “Preenchimento e Traço”. DICA DO COREL DRAW Para fazer um gradiente no Corel Draw, você escolhe as cores inicial e final. Estando na Guia “Preenchimento Gradiente” (veja figura 2), escolha entre os tipos Linear, Radial, Cônico e Quadrado. E em “Mistura de Cores” escolha entre personalizada ou duas cores. Depois Clique no botão OK. ●Desenvolvido por Valdivan Ivan 43 Figura 2 Figura 1 * WEBDESIGNER – CONSTRUÇÃO DE SITES* Importar Figura Importar figura significa por de forma adequada em seu arquivo uma figura que originalmente não foi feita em tal programa, ou arquivo vigente. Utilize o Menu “Arquivo” e depois o comando “Importar” ou o atalho CTRL+I, para abrir a seguinte tela: Exportar Figura Exportar é o processo inverso de Importar. Serve tambémpara forçar o programa a salvar uma imagem em um formato diferente dos que possui em sua listagem de “Salvar como”. Depois de fazer um objeto, utilize o Menu “Arquivo” e depois o comando “Exportar” ou o atalho CTRL+SHIFT+E, para abrir a tela abaixo: NOTA: O INKSCAPE geralmente aloca a imagem exportada na pasta principal do diretório raiz ●Desenvolvido por Valdivan Ivan 44 Navegador de Pastas Estrutura das Pastas Após selecionar uma imagem, sua visualização será mostrada aqui Depois de escolher sua imagem, clique no Botão Abrir Em FILENAME, digite o nome do arquivo com a extensão e clique no botão “EXPORT”. * WEBDESIGNER – CONSTRUÇÃO DE SITES* Ajustando um Texto ao Caminho Com este recurso podemos facilmente colocar um texto com a forma que queremos, seja fazendo curva ou com a aparência de um contorno de objeto. Veja alguns exemplos na figura; Para colocar um texto ajustado ao caminho devemos proceder assim: 1 – Primeiro faça um texto. 2 – Depois uma curva Bezier ou uma linha a mão livre, ou uma forma qualquer. 3 – Selecione o texto e o caminho, que pode ter qualquer forma comentada acima. Selecione o texto e depois mantenha pressionada a tecla SHIFT, clicando no caminho, para que ambos fiquem selecionados. 3 – Acesse o menu “Texto” e escolha a opção “Por no Caminho”. Pronto. Temos um texto que assumiu a forma do caminho desejado. DICA DO COREL DRAW Para selecionar vários objetos no Corel Draw, o processo é o mesmo do INKSCAPE, ou seja, pressionando e segurando a tecla SHIFT. Clique no menu “TEXTO”, e escolha a opção “Ajustar texto ao caminho”. Veja a figura ao lado: ●Desenvolvido por Valdivan Ivan 45 Podemos ter o formato que desejamos em nosso texto visto que as opções são diversas Contornando uma curva Tendo uma determinada curvatura Contornando um objeto * WEBDESIGNER – CONSTRUÇÃO DE SITES* Agrupar/Desagrupar Objetos As vezes, criamos um anúncio para nossa página que tem várias imagens, como se fosse uma logomarca. Se fossemos montar uma por uma perderíamos tempo e trabalho, porém, no INKSCAPE temos a possibilidade de agrupar-mos objetos. Com este recurso de “ agrupamento de imagens” podemos criar figuras diversas de forma adequada, pois, depois de agrupada uma imagem, as modificações serão feitas de uma única vez, pois, uma imagem agrupada torna-se uma única figura. Note que na figura abaixo nós temos três imagens. Vamos então, criar uma logomarca para nossa página com estas imagens. Após duplicar os objetos, espelhe a meia-lua, conforme estudado em lições anteriores. Neste momento teremos quatro figuras, sendo duas de cada. Selecione todos os objetos, segurando a tecla SHIFT e clicando em cada um dos objetos. Então você terá uma imagem semelhante à figura abaixo: Agora acione o comando “Agrupar”, através do menu “Objeto”, opção “Agrupar”, ou digite o atalho CTRL+G. Neste momento você terá a seguinte tela ao lado: Agora temos um só objeto, pronto para ser utilizado. Desagrupar é fazer o processo inverso com o objeto, para poder editá-lo. O processo é similar ao de agrupar, através do menu “Objeto”, porém, escolheremos a opção “Desagrupar”. Podemos também utilizar o atalho “CRTL+SHIFT+G”. DICA DO COREL DRAW Estes recursos são semelhante ao do COREL DRAW. Para “AGRUPAR” no Corel DRAW, selecione os objetos e clique no menu “Organizar” e escolha a opção “Agrupar” ou aplique o atalho “CTRL+G”, como no INKSCAPE. Porém, para “DESAGRUPAR”, um objeto, o atalho não é “CTRL+SHIFT+G” como no INKSCAPE. O atalho no Corel DRAW é, “CTRL+U. ●Desenvolvido por Valdivan Ivan 46 Este objeto foi duplicado através do comando CTRL+D Duplique este objeto através do comando CTRL+D Note que em cada objeto há um contorno pontilhado. Isso significa que todos os objetos estão selecionados. Note que o contorno que circundava todos os objetos agora circunda o objeto por inteiro. Podemos selecionar tudo através do atalho CTRL+A * WEBDESIGNER – CONSTRUÇÃO DE SITES* Salvar como O INKSCAPE gerencia bem extensões diversas, principalmente as do Adobe Illustrator, podendo inclusive salvar neste formato, mas, não esqueça que a extensão padrão do INKSCAPE é o padrão SVG. Para salvar como no INKSCAPE, siga os passos a seguir: Menu “Arquivo” e opção “Salvar como”, e então você terá a seguinte tela abaixo: DICA DO COREL DRAW O processo de “salvar como” é semelhante em praticamente todos os programas que rodam em qualquer Sistema Operacional. Então, entre o Corel Draw e INKSCAPE não é diferente, pois estes programas seguem as mesmas regras para o processo de “Salvar como”. ●Desenvolvido por Valdivan Ivan 47 Pasta ativa Aqui escolhemos a pasta ativa Navegador de Diretórios (Pastas) Aqui escolhemos a extensão (tipo) para nosso arquivo Clique no botão salvar para confirmar a operaçãoCaso queira abortar a operação do comando “Salvar como”, clique no botão cancelar * WEBDESIGNER – CONSTRUÇÃO DE SITES* Configurações do Desenho Podemos configurar o INKSCAPE, bem como o tamanho da página, se queremos exibir uma grade de precisão, e muito mais. Para tanto acesse o menu “Arquivo” e a opção “Configurações do Desenho”, onde nos aparecerá uma caixa de diálogo como a mostrada a seguir: Se desejamos precisão em um desenho, devemos acessar a guia “GRADE” e marcar a guia “Mostrar Grade”, para o INKSCAPE exibir uma grade de precisão. Assim sendo, a área de desenvolvimento do INKSCAPE estará com uma grade ao fundo. DICA DO COREL DRAW Para configurar página no Corel DRAW, clique no menu “Layout”. ●Desenvolvido por Valdivan Ivan 48 Aqui aplicamos uma grade de precisão ao LayOut da página do INKSCAPE Projeta uma sombra no LayOut de página do INKSCAPE Define se o INKSCAPE deve exibir uma página como LayOut Tamanho da página que teremos em nosso arquivo Orientação da página, que pode ser “retrato ou paisagem” * WEBDESIGNER – CONSTRUÇÃO DE SITES* Diferença, Intersecção e Exclusão Estes recursos permitem modificar ou criar tipos de formas simulando alguns efeitos através do ato de “soldar objetos” ou “cortá-los”. Estes comandos estão no menu “Caminho”. É importante ressaltar que o objeto que está ao fundo terá a prioridade destes comandos citados. Considere os objetos ao lado: Primeiro vamos usar o comando “diferença”, sabendo que em nosso exemplo a bola estará como objeto de fundo, como a seguir: Agora vamos usar na mesma figura o comando “intersecção”. Vejamos: Demonstraremos agora o resultado do comando “exclusão”. Visualize o resultado: ●Desenvolvido por Valdivan Ivan 49 Este será o resultado: Este será o resultado: Este será o resultado: * WEBDESIGNER – CONSTRUÇÃO DE SITES* DICA DO COREL DRAW Estes comandos encontram-se no menu “Organizar”, opção “Formato”, como mostra a figura 1. Então, nós tomaremos como exemplo apenas o comando “Intersecção”. Note que no Corel DRAW, este comando é escrito como sendo “Interseção”. Veja a figura a seguir: ●Desenvolvido por Valdivan Ivan 50 Figura 1 Selecione os objetos e clique no menu “Organizar”. Clique em “Formato” e por fim, escolha “Interseção”. Clique em um dos objetos e clique no botão “Interseção com” * WEBDESIGNER – CONSTRUÇÃO DE SITES* Inverter Objetos Podemos inverter um objeto de forma bastante intuitiva com o INKSCAPE. Para tanto podemos utilizar o menu Objeto ou o teclado. A inversão pode ser horizontal ou vertical. Após fazer um objeto e selecioná-lo, clique no menu Objeto (para inverter através do menu) e escolha entre as duas opções de inversão. Para inverter através do teclado, utilize as teclas H e V, para inversão horizontal e inversão vertical, respectivamente. Vejamos: A inversão pode ser aplicada em qualquer tipo de objeto. Objeto de texto, e formas e até mesmo em objetos agrupados por caminho. ●Desenvolvido por Valdivan Ivan 51 As opções de inversãoObjeto de texto original Comando para inverter verticalmente Comando para inversão horizontalmente Objeto de texto original Comando para inverter verticalmente Combinando os comandos V e H, podemos ter vários tipos de inversão entre os objetos Comando para inversão horizontalmente * WEBDESIGNER – CONSTRUÇÃO DE SITES* Créditos Copyright© 2007 - 2009 by Valdivan Ivan Direitos Reservados. Lei 9.610 de 19 de Fevereiro de 1998. Nenhuma parte deste material poderá ser reproduzida para fins comerciais, sob quaisquer alegações, sem autorização prévia e escrita do autor. Para uso não-comercial, cada página deste material se dará de forma completa, pois nenhuma página poderá ser modificada e/ou editada, suprimindo conteúdo escrito ou visual que alterem o original do autor. *Todos os softwares aplicativos comentados/utilizados neste material, são marcas registradas e pertencem aos seus respectivos proprietários e/ou desenvolvedores. Suporte Técnico ao Leitor O Suporte Técnico ao Leitor limita-se ao conteúdo específico deste material, e não à questões gerais referentes aos aplicativos comentados/utilizados neste material. Para tanto, o usuário deverá informar o nome do material utilizado(apostila), número da página, título do capítulo e especificar o assunto em questão. Mande suas questões para o e-mail: valdivan_ivan@hotmail.com. O suporte se dará somente através deste endereço de e-mail. Ficha Técnica Pesquisa e Revisão Técnica Valdivan Ivan Redação e Projeto Gráfico Valdivan Ivan Tratamento de Imagens e Editoração Valdivan Ivan Capa Valdivan Ivan Dedicatórias Para minha filha Natália, que considero a flor mais linda que pude ter em minhas mãos. Ela é sem dúvida tudo que pedi a Deus em uma criança. Sobre todas as coisas dedico e agradeço a Deus, por me dar inspiração quando tudo me faltava e por prover o impossível, tornando tudo possível. Porque quantas são as promessas de Deus, todas têm Nele o sim 2Co 1.20 ●Desenvolvido por Valdivan Ivan 52 Os Equipamentos Básicos: World Wide Web (WWW): Teia Ampla Mundial. Serviço de páginas gráficas, ligadas por hyperlinks, que são âncoras dinâmicas de ligação e transmitidas via protocolo HTTP. A sigla HTTP significa Hyper Text Transfer Protocol, ou seja, Protocolo de Transferência de Hipertexto. Tabela de Cores em Código Hexadecimal JPEG (Joint Photographic Experts Group) PNG (Portable Networ Graphics)Transparência/Gradiente.............................................................................................43 Importar Figura...........................................................................................................44 Exportar Figura...........................................................................................................44 Ajustando um Texto ao Caminho................................................................................45 Agrupar/Desagrupar Objetos......................................................................................46 Salvar como................................................................................................................47 Configurações do Desenho.........................................................................................48 Diferença, Intersecção e Exclusão..............................................................................49 Inverter Objetos..........................................................................................................51 Créditos......................................................................................................................52 ●Desenvolvido por Valdivan Ivan 3 * WEBDESIGNER – CONSTRUÇÃO DE SITES* ●Desenvolvido por Valdivan Ivan 4 * WEBDESIGNER – CONSTRUÇÃO DE SITES* Introdução Este material tem por objetivo difundir técnicas utilizadas na construção de páginas para Internet, porém, antes faz-se necessário conhecer-mos alguns princípios básicos de Internet. Como todos sabemos a Internet é uma rede mundial que interliga computadores. Através dela podemos nos comunicar com as pessoas em qualquer parte, localizar informações sobre política, economia, notícias, educação, imagens, sons, etc. Na Internet pode-se também comprar, vender... tudo está disponível na rede mundial de computadores. Precisamos entender que tudo isso precisa ser organizado em um padrão comum, visto que, cada operação listada acima depende de um serviço específico de Internet, assim devemos conhecer algumas particularidades desta rede. Para que tudo isso funcione bem, primeiro precisamos de um padrão comum de ligação, algo que interprete tudo que é publicado na rede, pois nestas grande rede, tudo é disponibilizado através de serviços. Histórico e Equipamentos Básicos Em 1969 com o nome de ARPANET (USA), nascia a Internet com a finalidade de interligar quatro computadores dispersos (espalhados) em uma grande área. A ARPANET tinha caráter militar em suas conexões. Hoje essa rede é mantida por instituições comerciais, governamentais e não-governamentais. Porém a maior característica desta rede é que ela não possui um dono para organizar toda essa troca de informações, existem sim, associações e grupos que se dedicam para promover os objetivos gerais e comuns da Internet. Os Equipamentos Básicos: Computador: PC 486/DX4 100 8 MB (Mega Bytes) DE MEMÓRIA RAM PLACA DE FAX MODEM DE 28.800 bps (Bits por Segundo) Linha Telefônica – para acesso Dial-Up World Wide Web (WWW): Teia Ampla Mundial. Serviço de páginas gráficas, ligadas por hyperlinks, que são âncoras dinâmicas de ligação e transmitidas via protocolo HTTP. A sigla HTTP significa Hyper Text Transfer Protocol, ou seja, Protocolo de Transferência de Hipertexto. Protocolo: É o responsável por interpretar as diferentes linguagens, os diferentes formatos postados na Internet. Entenda Internet como sendo uma rede mundial de milhares de pequenas redes de computadores, milhões de microcomputadores comerciais, educacionais, governamentais e pessoais, rede esta, que usa o protocolo TCP/IP (Transmission Control Protocol/Internet Protocol) para comunicação. Este padrão foi adotado por ser altamente roteável, ou seja, capaz de agregar outros protocolos de transmissão, através de duas ou mais redes. Outro fato é que há um protocolo específico para cada serviço postado na internet. URL: Uniform Resource Locator, ou seja, a URL é o endereço do hipertexto procurado. Na verdade este endereço é numérico e não cadeia de caracteres como conhecemos. Podemos então concluir que a URL que digitamos é na verdade um endereço de “máscara” ou “mask”, que são endereços utilizados para simbolizar endereços IP, sendo convertido pelo servidor de DNS. Home Page: São páginas gráficas, interligadas entre si através de hyperlinks. O termo Home Page também é usado para designar a "página principal ou inicial" de um conjunto de documentos, ou seja, a página de entrada de um SITE. Um conjunto de "páginas" também é chamado de SITE ou website. Alguns Servidores da Web reservam index.html como o nome da home page (página principal), enquanto outros a denominam como default.html. Para a publicação devemos saber qual é o padrão adotado pelo servidor de publicação. Caso não haja um termo explicativo, devemos adotar o nome de arquivo como sendo index.html, pois este é o mais usado e o mais comum na grande rede. ●Desenvolvido por Valdivan Ivan 5 * WEBDESIGNER – CONSTRUÇÃO DE SITES* Browsers (Navegadores da Web): Browsers são softwares que lêem e interpretam arquivos escritos em linguagem HTML (Hyper Text Markup Language), publicados na World Wide Web. Os navegadores da Web também podem executar sons e/ou arquivos de vídeo incorporados em documentos da Web. HTML (Hyper Text Markup Language): Significa “Linguagem de Marcação de Hipertexto”. É a evolução do antigo padrão de marcação de texto HTM. É através desta linguagem que as páginas de internet são escritas. Não existe uma concordância quanto ao HTML, pois alguns estudiosos afirmam ser o HTML uma linguagem de programação, porém, outros afirmam veementemente que linguagem de marcação não tem caráter de programação, não havendo assim, o profissional denominado “programador HTML”. Eu porém, me abstenho deste assunto. ***Estrutura básica de uma página HTML Note que a estrutura apresentada está entre os sinais '' (maior que). Chamamos este procedimento de TAG (Pode ser chamado de “a TAG” ou de “o TAG”, pois é um substantivo comum de dois gêneros). Note também que, em cada TAG de fechamento acrescentamos o sinal '/' (barra). Exemplo: Experimente digitar o seguinte fragmento: minha web page tudo digitado aqui sai na web page ------------------------------------------------ visualize o resultado na figura ao lado: ●Desenvolvido por Valdivan Ivan 6 Cabeçalho da página html Início do documento html Título exibido barra de título do navegador Final do cabeçalho da página Início e fim do corpo da página html Fim do documento html título da página corpo da página Página web visualizada em um Navegador * WEBDESIGNER – CONSTRUÇÃO DE SITES* Conhecendo o Mozilla Composer Para abrir o Editor de Código HTML Mozilla Composer, proceda da seguinte forma: APLICAÇÕES INTERNET MOZILLA COMPOSER Cabeçalhos, Títulos e Parágrafos Imagine um SITE como sendo um livro ou uma revista, que será visualizado na tela do computador. Logo, cada página do SITE, será como uma página deste livro ou revista, com títulos, cabeçalhos e parágrafos, bem como figuras e fotos. Já sabemos que cada instrução ou fragmento de código deve ser editado entre TAGs. Usamos geralmente três tipos de cabeçalhos em páginas web's que são: usado como título Principal Este é o título Secundário terceiro tamanho padronizado de cabeçalho Onde: é o maior cabeçalho da página; é um cabeçalho intermediário; é um cabeçalho com o mesmo tamanho de um parágrafo, porém, diferenciado; Para iniciar um parágrafo usamos e para quebrar uma linha usamos TAG FUNÇÃO SINTAXE Insereum título. O valor de h pode ser de 1 até 6. É importante lembrar que quanto maior for o valor de h menor será o título texto Marca um parágrafo e acrescenta uma linha em branco ao seu final texto Insere uma quebra de linha forçada em um parágrafo texto ●Desenvolvido por Valdivan Ivan 7 Tela do Mozilla Composer Barra de título Barra de menus Barra de ferramentas Barra de formatação Área de desenvolvimento Guias de construção Após o Mozilla Composer ser carregado para a memória do computador, você terá a seguinte tela: Cursor * WEBDESIGNER – CONSTRUÇÃO DE SITES* DICA DO DREAMWEAVER Para iniciar o DREAMWEAVER, siga o seguinte caminho, mostrado na figura abaixo: A figura acima sugere o seguinte caminho: “Botão iniciar” “Programas” “Pasta Macromedia” “Macromedia Dreamweaver MX” Então, dê um clique em “MACROMEDIA DREAMWEAVER MX”. Então, você terá a seguinte tela: Avance em todas as opções. Por fim, clique no botão “concluído”. Mais adiante, estaremos “editando um site no Dreamweaver MX”, as telas para edição são as mesmas desta opção inicial. De início você terá apenas uma tela em branco, simulando um editor “WYSIWYG “(what you see is what you get )expressão que significa “o que você vê é o que você tem ou consegue”. ●Desenvolvido por Valdivan Ivan 8 Para ter acesso ao código, você precisa clicar no botão mostrar a visualização do código * WEBDESIGNER – CONSTRUÇÃO DE SITES* Atributos São recursos usados com TAGs para auxiliar na formatação e configuração da página web, desempenhando importante papel da edição do código HTML. Os atributos são tão importantes que algumas TAGs simplesmente não funcionarão sem a declaração de um atributo. Todo atributo será acompanhado de “sinal de igualdade” (=), e o seu valor deve ser declarado entre “aspas duplas”(“). Alinhamentos O alinhamento padrão de leitura dos navegadores é o alinhamento 'à esquerda', por isso, quando não desejamos que nossa página tenha este alinhamento pré-definido (padrão), faz-se necessário o uso de TAGs de alinhamentos ou de um atributo de alinhamento. Note que o TAG, também é utilizado no exemplo como atributo. Outro fato é que alguns atributos de alinhamentos não podem ser utilizados para texto. Vejamos: TAG FUNÇÃO Alinha o elemento ao centro da página Align= Atributo para especificar o alinhamento de um objeto Ao ser declarado este atributo dentro de um TAG, devemos especificar o valor do alinhamento desejado. Os valores comuns entre texto e objetos são: Center= alinha ao centro Right= alinha a direita Left= alinha a esquerda Justify= (somente para texto) faz a justificação do parágrafo. Middle= (outros objetos, exceto texto) Base do texto com o centro da imagem Top= (outros objetos, exceto texto) Texto no topo do objeto Quando declarado antes de um texto, adiciona uma margem de cerca de um centímetro ao mesmo Exemplo: exemplos de alinhamentos Escrevendo no Centro Escrevendo na Direita Escrevendo na Esquerda Atributo center. Escrita ao Centro Escrita na direita Escrita na esquerda Escrita justificada. Para visualizar este atributo corretamente, devemos ter muitas linhas digitadas em nosso texto. Assim veremos um texto justificado, semelhante ao comando justificar dos editores de texto. Ou seja, as margens da esquerda e da direita, foram alinhadas corretamente, dando a forma de um texto justificado. Sendo assim, para obter um texto justificado, devemos utilizar o alinhamento justify. Escrita ao centro. Com TAG center Para adquirir uma margem no texto, utilize blockquote! ●Desenvolvido por Valdivan Ivan 9 * WEBDESIGNER – CONSTRUÇÃO DE SITES* Separador de Grupos Um separador de grupos é uma linha horizontal, que pode ser adicionada no corpo da página. Esta linha horizontal, pode ser formatada através de de seus atributos correspondentes. Veja como utilizaremos este separador em um exemplo de código: Exemplo: separador Linha 100% Linha na metade da página Linha na metade da página e centralizada Linha vermelha Insere uma linha horizontal como separador de grupo Atributos Size= define o tamanho da espessura da linha. Exemplo: Height=define a altura da linha Exemplo: ou Width= define a largura da linha horizontal. Exemplo: ou Noshade= desenha a linha sem a sombra para dar o efeito de três dimensões. Exemplo: ou Color= define a cor da linha ●Desenvolvido por Valdivan Ivan 10 Código no Mozilla Composer Visualização do resultado no Navegador * WEBDESIGNER – CONSTRUÇÃO DE SITES* Formatação de Estilos de Texto A formatação de estilos de texto é um importante recurso utilizado em páginas web's, pois, assim como em um texto impresso, a formatação da página desempenha importante papel na atratividade do SITE, tornando-o agradável ou não. Você verá que, cores de fontes (letras), estilos de caracteres (itálico, negrito e sublinhado) e tamanhos, terão particularidades na formatação de estilos de texto. Os estilos de caracteres (itálico, negrito e sublinhado), são definidos através de TAGs. Em relação ao tamanho da fonte, este, será definido através de um atributo com seu respectivo valor numérico. Porém, as cores das fontes, serão declaradas através de uma escala de cores pré-definidas de código hexadecimal ou então, através de notação em inglês. Vejamos primeiro as cores das fontes: NOTAÇÃO EM INGLÊS NOTAÇÃO EM PORTUGUÊS CÓDIGO HEXADECIMAL Beige Bege #F5F5DC Black Preto #000000 Blue Azul #0000FF Cyan Ciano #00FFFF Gold Ouro #FFD700 Green Verde #008000 Gray Cinza #808080 Yellow Amarelo #FFFF00 Magenta Magenta #FF00FF Maroon Marrom #800000 Olive Verde oliva #808000 Orange Laranja #FFA500 Red Vermelho #FF0000 Pink Rosa #FFC0CB Purple Púrpura #800080 White Branco #FFFFFF Caso você queira conhecer mais nomes de cores e/ou seus respectivos códigos hexadecimais, na página a seguir você terá uma escala de cores mais completa. ●Desenvolvido por Valdivan Ivan 11 * WEBDESIGNER – CONSTRUÇÃO DE SITES* Tabela de Cores (Código Hexadecimal) Tabela de Cores em Código Hexadecimal Antiquewhite....... Aqua.................. Aquamarine........ Azure................. Beige.................. Bisque................ Black.................. Blanchedalmond Blue................... Blueviolet........... Brown................. Burlywood.......... Cadetblue........... Chatreuse........... Chocolate........... Coral.................. Carnflowerblue... Cornsilk.............. Crimson............. Cyan.................. Darkblue............. Darkcyan............ Darkgoldenrod.... Darkgray............ Darkgreen.......... Darkkhaki........... Darkmagenta...... Darkolivegreen... Darkorange........ Darkorchid.......... Darkred.............. Darksalmon........ Darkseagreen..... Darkslateblue..... Darkslategray..... Darkturquoise..... Darkviolet........... Deeppink............ Deepskyblue...... Dimgray............. Dodgerblue......... Firebrick............. Floralwhite.......... Forestgreen........ Fuchsia.............. Gainsboro.......... Ghostwhite......... Gold................... #FAEBD7 #00FFFF #7FFFD4 #F0FFFF #F5F5DC #FFE4C4 #000000 #FFEBCD #0000FF #8A2BE2 #A52A2A #DEB887 #5F9EA0 #7FFF00 #D2691E#FF7F50 #6495ED #FFF8DC #DC143C #00FFFF #00008B #008B8B #B8860B #A9A9A9 #006400 #BDB76B #8B008B #556B2F #FF8C00 #9932CC #8B0000 #E9967A #8FBC8F #483D8B #2F4F4F #00CED1 #9400D3 #FF1493 #00BFFF #696969 #1E90FF #B22222 #FFFAF0 #228B22 #FF00FF #DCDCDC #F8F8FF #FFD700 Goldenrod...................... Gray.............................. Green............................ Greenyellow................... Honeydew...................... Hotpink.......................... Indianred....................... Indigo............................ Ivory.............................. Khaki............................. Lavander....................... Lavanderblush............... Lawngreen..................... Lemonchiffon................. Lightblue........................ Lightcoral....................... Lightcyan....................... Lightgoldenrodyelloow... Lightgreen...................... Lightgray........................ Lightpink........................ Lightsalmon................... Lightseagreen................ Lightskyblue................... Lightslategray................ Lightsteelblue................ Lightyellow..................... Lime.............................. Limegreen..................... Linen............................. Magenta........................ Maroon.......................... Mediumaquamarine....... Mediumblue................... Mediumorchid................ Mediumpurple................ Mediumseagreen........... Mediumslateblue............ Mediumspringreen......... Mediumturquoise........... Mediumvioltred.............. Midnightblue.................. Mintcream...................... Mistyrose....................... Moccasin....................... Navajowhite................... Navy.............................. Oldlace.......................... #DAA520 #808080 #008000 #ADFF2F #F0FFF0 #FF69B4 #CD5C5C #4B0082 #FFFFF0 #F0E68C #E6E6FA #FFF0F5 #7CFC00 #FFFACD #ADD8E6 #F08080 #E0FFFF #FAFAD2 #90EE90 #D3D3D3 #FFB6C1 #FFA07A #20B2AA #87CEFA #778899 #B0C4DE #3FFFFE0 #00FF00 #32CD32 #FAF0E6 #FF00FF #800000 #66CDAA #0000CD #BA55D3 #9370DB #3CB371 #7B68EE #00FA9A #48D1CC #C71585 #191970 #F5FFFA #FFE4E1 #FFE4B5 #FFDEAD #000080 #FDF5E6 Olive..................... Olivedrab.............. Orange.................. Orangered............. Orchid................... Palegoldenrod....... Palegreen............. Paleturquoise........ Palevioletred......... Papayawhip.......... Peachpuff............. Peru...................... Pink...................... Plum..................... Powderblue........... Purple................... Red....................... Rsybrown.............. Royalblue.............. Saddlebrown......... Salmon................. Sandybrown.......... Seagreen.............. Seashell................ Sienna.................. Silver.................... Skyblue................. Slateblue............... Slategray.............. Snow..................... Springgreen.......... Steelblue............... Tan....................... Teal...................... Thistle................... Tomato................. Turquoise.............. Violet.................... Wheat................... White.................... Whitesmoke.......... Yellow................... Yellowgreen.......... #808000 #6B8E23 #FFA500 #FF4500 #DA70D6 #EEE8AA #98FB98 #AFEEEE #DB7093 #FFEFD5 #FFDAB9 #CD853F #FFC0CB #DDA0DD #B0E0E6 #800080 #FF0000 #BC8F8F #4169E1 #8B4513 #FA8072 #F4A460 #2E8B57 #FFF5EE #A0522D #C0C0C0 #87CEEB #6A5ACD #708090 #FFFAFA #00FF7F #4682B4 #D2B48C #008080 #D8BFD8 #FF6347 #40E0D0 #EE82EE #F5DEB3 #FFFFFF #F5F5F5 #FFFF00 #9ACD32 (Fonte: Internet) ●Desenvolvido por Valdivan Ivan 12 * WEBDESIGNER – CONSTRUÇÃO DE SITES* Tamanhos Os tamanhos de fonte possíveis são numerados de 1 (um) até 7 (sete). Cada um representa um tamanho específico, sendo o tamanho 3 (três), o tamanho padrão de exibição no navegador. Tamanhos maiores ou menores, são obtidos através dos TAGs e . Veja a tabela que mostra os tamanhos e a sintaxe do atributo size a seguir: SIZE(atributo) TAMANHO size="1" 8 pt size="2" 10 pt size="3" 12 pt size="4" 14 pt size="5" 24 pt size="6" 36 pt size="7" 72 pt Estilos de Caracteres Estilos são o modo de apresentação dos caracteres, tais como: Itálico, Sublinhado, negrito e etc. Assim como em um editor de textos, temos em HTML uma gama de modos de apresentação de caracteres. Vejamos então: TAG FUNÇÃO SINTAXE Coloca o texto em negrito texto Coloca o texto em itálico texto Coloca o texto sublinhado texto Aumenta o tamanho da fonte e aplica negrito texto aplica tachado (riscado) na fonte texto Reduz a fonte e retira o negrito texto Aplica sobrescrito ao texto texto Aplica subscrito ao texto texto Quando usado sem atributos, esta TAG faz o texto rolar da direita para a esquerda na janela do navegador Atributos Behavior="alternate"(alterna a direção declarada no atributo DIRECTION), "scroll"(rolar) "slide"(deslizar) Width=Largura da janela de rolagem, em pixel ou porcentagem Direction="left", "right", "up", "down" Scrollamount="Velocidade do texto de rolagem" Scrolldelay="velocidade do texto. Retarda o início e interfere na velocidade declarada em scrollamount Loop="quantidade de vezes que o comando deve ser executado". Alguns navegadores não suportam texto Coloca o texto piscando. Alguns navegadores não suportam este comando texto Coloca o texto em fonte monoespaçada. texto Modifica a formatação do texto. Sem atributos não funciona Atributos Size = define o tamanho da letra Face = define o estilo da letra Color = define a cor da letra texto Marca um trecho formatado com fonte monoespaçada. Os espaços dos parágrafos serão respeitados texto Modifica a formatação padrão do texto. texto ●Desenvolvido por Valdivan Ivan 13 * WEBDESIGNER – CONSTRUÇÃO DE SITES* Entidades de Caracteres Algumas vezes precisamos digitar palavras acentuadas em nossa página, porém, a acentuação não deve ser feita como em um texto escrito normalmente, e sim, através de cadeias de caracteres especiais chamados de ENTIDADES, formando assim uma seqüência de escape. Em HTML temos dois tipos de Entidades: As Entidades de Caracteres e as Entidades Numéricas, que são digitados assim: Um “&” (e comercial) inicialmente, “uma cadeia que pode ser de caracteres ou numérica”, que representa o caractere desejado, e um “;” (ponto e vírgula) no final, formando assim a chamada seqüência de escape. Na tabela abaixo temos o exemplo de como proceder para obter estas ENTIDADES. Veja: Tabela de Caracteres Especiais e Acentuação em HTML Caracteres Entidade de Caracteres Entidade Numérica Descrição @ @ Arroba Espaço não ignorável " " " Aspas À À À A c/ crase Á Á Á A c/ acento agudo    A c/ acento circunflexo à à à A c/ til Ç Ç Ç C cedilha (maiúsculo) É É É E c/ acento agudo Ê Ê Ê E c/ acento circunflexo Í Í Í I c/ acento agudo Ó Ó Ó O c/ acento agudo Ô Ô Ô O c/ acento circunflexo Õ Õ Õ O c/ til Ú Ú Ú U c/ acento agudo Ü Ü Ü U c/ trema à à à a c/ crase á á á a c/ acento agudo â â â a c/ acento circunflexo ã ã ã a c/ til ç ç ç c cedilha (minúsculo) é é é e c/ acento agudo ê ê ê e c/ acento circunflexo í í í i c/ acento agudo ñ ñ ñ n c/ til ó ó ó o c/ acento agudo ô ô ô o c/ acento circunflexo ò õ õ o c/ til ú ú ú u c/ acento agudo ü ü ü u c/ trema & & & E(ê) comercial > > Maior que # # # Lasanha ou sustenido $ $ $ Cifrão %% % Porcentagem © © Copyright ® ® Marca Registrada (TM) º º O sobrescrito ª ª A sobrescrito Considerações: A maioria dos navegadores conseguem exibir palavras acentuadas diretamente, porém, esta prática ainda não é recomendável porque a codificação padrão ISO Latin1, usada como padrão da Internet, não é o padrão utilizado por todos os países, e sendo assim, algumas palavras acentuadas não serão visualizadas corretamente. Mas, para garantir a interpretação apropriada de um documento, nós podemos inserir uma indicação do esquema de codificação no cabeçalho da página da seguinte maneira: Onde: iso-8859-1 representa o padrão ISO Latin1 – padrão da Internet e do Brasil também, bem como tabela ASCII. ●Desenvolvido por Valdivan Ivan 14 * WEBDESIGNER – CONSTRUÇÃO DE SITES* Listagens Listagens são textos disponibilizados de forma organizada por tópicos. Um exemplo clássico de listagens são aqueles textos com marcadores (símbolo ou bullet) e/ou numeradores (numerações). Em linguagem HTML, podemos mesclar numeradores (numerações) com marcadores (símbolo ou bullet) em um mesmo tópico, através de TAGs. Por diversas vezes em um documento sentimos a necessidade de organizá-lo em tópicos para listar produtos, serviços ou nomes (palavras) que pertencem a uma mesma hierarquia ou grupo. As listagens se subdividem em ordenadas e não-ordenadas. Veja alguns exemplos de marcadores e numerações: CURSOS OFERECIDOS PELO INFOCENTRO: Com numeração: 1) OFICINA DE INFORMÁTICA BÁSICA 2) OPERADOR DE MICROCOMPUTADOR 3) MANUTENÇÃO DE MICROCOMPUTADORES 4) MONTAGEM E INSTALAÇÃO DE REDE LÓGICA ESTRUTURADA 5) AUX. ADMINISTRATIVO 6) TELEMARKETING 7) WEBDESIGNER Com letras: a) OFICINA DE INFORMÁTICA BÁSICA b) OPERADOR DE MICROCOMPUTADOR c) MANUTENÇÃO DE MICROCOMPUTADORES d) MONTAGEM E INSTALAÇÃO DE REDE LÓGICA ESTRUTURADA e) AUX. ADMINISTRATIVO f) TELEMARKETING g) WEBDESIGNER Com marcadores: ● OFICINA DE INFORMÁTICA BÁSICA ● OPERADOR DE MICROCOMPUTADOR ● MANUTENÇÃO DE MICROCOMPUTADORES ● MONTAGEM E INSTALAÇÃO DE REDE LÓGICA ESTRUTURADA ● AUX. ADMINISTRATIVO ● TELEMARKETING ● WEBDESIGNER TAG FUNÇÃO Marca o início e o fim de uma listagem ordenada. Exibem algarismos em seus tópicos. Usamos com Tag Atributos Start = especifica o número a partir do qual os itens começam a ser contados. Type = modifica o tipo do numerador que pode ser: número, letras ou algarismo romano. Marca o início e o fim de uma listagem não ordenada, porém organizada. Exibem símbolos em seus tópicos. Também usamos com Tag Atributos Type = modifica o tipo do marcador (símbolo, bullet), que pode ser: Circle = um círculo vazio. Disc = um círculo cheio. Square = um quadrado cheio. Tag responsável por exibir os tópicos de listagem de e Atributos Não tem Marca o início o fim de uma lista explicativa, ou seja, como em um dicionário. Devem ser usados com Tags e . Onde é o tópico e é a explicação da informação de Atributos Não tem ●Desenvolvido por Valdivan Ivan 15 * WEBDESIGNER – CONSTRUÇÃO DE SITES* Exemplo: Abra o Mozilla Composer e digite o seguinte exemplo na Guia de edição de Código HTML: Aprendendo Listagens Isto é uma lista OFICINA DE INFORMÁTICA BÁSICA OPERADOR DE MICROCOMPUTADOR MANUTENÇÃO DE MICROCOMPUTADORES MONTAGEM E INSTALAÇÃO DE REDE LÓGICA ESTRUTURADA AUX. ADMINISTRATIVO TELEMARKETING WEBDESIGNER Item 1 Item 2 Item 3 Depois clique na guia Visualizar e você terá a imagem ao lado: DICA DO DREAMWEAVER Para inserir uma comentário, clique em “Inserir”, “comuns”, botão “comentário”. ●Desenvolvido por Valdivan Ivan 16 Se você procedeu corretamente, esta será a estrutura do Mozilla Composer Visualizando o resultado com o Mozilla Composer Quando trabalhamos com códigos grandes, devemos inserir comentários em nosso documento. Um comentário nos ajuda a identificar com mais facilidade um trecho em nosso código. * WEBDESIGNER – CONSTRUÇÃO DE SITES* Listagens Ordenadas São ordenadas e organizadas por todos os tipos de algarismos. Exemplo: Mais exemplos de Listas Esta listagem inicia com 3 Item 1 Item 2 Item 3 Agora com letras Livros Cadernos Canetas também pode em algarismo romano Alunos Professor Internet Agora listagem em algarismo romano a partir do 5 Cabelo Barba Bigode ●Desenvolvido por Valdivan Ivan 17 Visualização deste código pelo Navegador * WEBDESIGNER – CONSTRUÇÃO DE SITES* Listagens não Ordenadas Não são ordenadas por algarismos, mas, são organizadas por símbolos ou marcadores. Exemplo: mais exemplos Listagem Caderno Borracha Canetas Listagem Aprovado Reprovado Listagem Curso Treinamento ●Desenvolvido por Valdivan Ivan 18 Visualização deste código pelo Navegador * WEBDESIGNER – CONSTRUÇÃO DE SITES* Listagens de Definição São listagens cujo os tópicos necessitam de explicação. Este tipo de listagem, será marcado em início e fim, com o tag . Sem o tag a listagem não será visualizada. Os tópicos serão marcados pelo tag , e a explicação da informação será marcada pelo tag . Os tópicos da tag , estarão na margem do navegador como um texto qualquer. A explicação da informação escrita na tag , estará recuada da margem neste tipo de listagem. Exemplo: listagem de definição Treinamento Temos professores qualificados! Consultoria Prestamos consultoria empresarial! Email: valdivan_ivan@hotmail.com ●Desenvolvido por Valdivan Ivan 19 Visualização no Navegador Exemplo de Listagem de Definição * WEBDESIGNER – CONSTRUÇÃO DE SITES* Listagens com Sub Níveis São listagens com estrutura aninhada. No exemplo abaixo podemos ver que este tipo de listagem, possui os mesmos tags das outras listagens que conhecemos, porém, declarados de forma alternada entre eles. Isso significa dizer que em listagens com sub níveis, podemos mesclar entre marcadores e numeradores, tendo assim, infinitas combinações entre os tipos de listagens. Exemplo: sub listas em Html Listagem e Sub Listagem ficou aberto> CHOCOLATE branco1.2 ao leite 1.3 do Numerador> CARRO , pois, eu não fechei ela ainda. Aí vem Outro Marcador dentro do Numerador> Novo 2.1Escolha entre continua aberto e eu abri outra tag. Início de outro Marcador dentro do Marcador—> Com ar2.1.1 Sem ar 2.1.2 agora. Fim do Marcador dentro do Marcador> Item 2.2 Item 2.3 que faltava. Fim do Marcador dentro do Numerador> Olhando superficialmente este código, parece muito difícil editá-lo ou interpretá-lo, porém, ele é apenas grande, e, grande não significa necessariamente, difícil. Outro fato que deixou este código bastante grande foi a necessidade de inserir comentário para facilitar a interpretação, visto que, este fragmento de código tem estrutura aninhada. ●Desenvolvido por Valdivan Ivan 20 Como prêmio, esta é a página gerada por este código * WEBDESIGNER – CONSTRUÇÃO DE SITES* Background Background é toda a área do corpo da página, sendo também chamado de pano (ou plano) de fundo ou cor de fundo da página web. Imagine o backgroung como sendo uma parede de uma casa em branco, que você pode colocar a cor que quiser ou desenhar a imagem que desejar. Podemos dizer também que o plano de fundo servirá como uma mesa, onde empilharemos sobre ela nossa página. Logo, no background, podemos colocar cores e imagens. Veja as diferenças nos exemplos: Exemplo 1: (Usando cores) Web page com Fundo Colorido formatando cor de fundo Para inserir cor de fundo na página usamos o atributo BGCOLOR dentro de . Note que o nome da cor utilizada no background é a mesma notação utilizada em Formatação de Estilos de Texto, ou seja, o nome da cor em inglês. Isso significa dizer também que a notação hexadecimal funcionará. Neste exemplo o fundo da página gerada seria cor azul e a fonte seria cor amarela. Exemplo 2: (Usando imagens) Inserindo uma imagem como fundo TEXTO A SER EXIBIDO Para inserir uma imagem como plano de fundo na página, devemos usamos o atributo BACKGROUND dentro de , e não o atributo BGCOLOR. As imagens devem OBRIGATORIAMENTE estar na mesma pasta onde está o documento HTML, ou em uma sub pasta. Porém, se a imagem estiver em uma sub pasta, OBRIGATORIAMENTE, devemos adicionar o caminho ou endereço da imagem, bem como seu nome, para indicar sua localização. Somente assim, o navegador achará tal imagem. Exemplo 3: (Usando imagens em sub pasta) Suponha que sua imagem está em uma sub pasta, então, basta digitar dentro a seguinte instrução: TAG FUNÇÃO Tag que marca o início e o fim do corpo da página. Atributos Bgcolor = permite inserir uma cor no fundo da página Text = define a cor do texto padrão a ser digitado na página Background = permite inserir uma imagem como fundo Bgproperties = fixa a imagem no fundo da página quando a página é rolada, criando assim um efeito de marca d’água. Pode ou não ser usado. Se não for usado, a imagem monta com um pouco de atraso, quando a página é rolada ●Desenvolvido por Valdivan Ivan 21 * WEBDESIGNER – CONSTRUÇÃO DE SITES* Imagens Há uma grande diferença entre imagens usadas como background e imagens disponibilizadas como incremento de página. No capítulo anterior, você aprendeu a colocar imagens como plano de fundo em sua página web, o chamado background. Porém, imagens em SITES, podem representar muito mais que um simples plano de fundo. Podemos melhorar a aparência de nossa página web através de imagens, e até mesmo usá-las como ligação entre uma página e outra, mas, por enquanto, vamos aprender como inserir uma imagem em nossa página. Lembre-se, que para inserir imagem de background, utilizamos o atributo “background” dentro do TAG, e para imagem de incremento, utilizaremos TAG, sempre dentro do corpo da página, que é a TAG. Imagine que na figura abaixo, o nome da imagem é infocentro.gif, sendo assim, teríamos que inserí-la através do seguinte fragmento: . Uma dica importante é que devemos evitar nomes de imagens em caixa alta(letras maiúsculas). Devemos então renomear essas imagens antes de utilizá-las, atribuindo nomes com letras minúsculas(caixa baixa). Isto é somente uma dica, e não uma regra. Outro fato é que se possível, não devemos ter espaços na composição dos nomes da imagem. Quando houver a necessidade de utilizar imagens com nomes formados por duas ou mais palavras, use o caractere " _ " (underline), para ligar as palavras que compõem o nome da imagem. ***Observações: Usamos caso a imagem esteja na mesma pasta da página web. Usamos caso a imagem esteja em uma pasta diferente da pasta da página web. Onde: “file:” - significa arquivo. “/nome da pasta” - deve especificar o nome da pasta que contém o arquivo de imagem. “/infocentro.gif” - é o nome do arquivo da imagem em nosso exemplo. Este nome deverá ser substituído pelo nome correspondente ao da imagem que será utilizada por você em sua página. Para ter um texto entre imagens devemos proceder das seguintes formas: texto. Ou texto Ou texto TAG FUNÇÃO Insere uma imagem Atributos src= indica o nome da imagem a ser carregada lowsrc=indica o nome de uma imagem mais leve que substituirá a imagem do atributo src, sendo exibida somente enquanto a imagem do atributo src não for carregada no navegador align= alinhamento da imagem na página, que pode ser: middle: centraliza a base do texto com o centro da imagem left: fixa a imagem na esquerda enquanto o texto circunda imagem à direita. top: alinha o texto no topo right: fixa a imagem na direita enquanto o texto circunda a imagem à esquerda alt=" "e title=" " Use alt= para indicar o texto que será exibido enquanto a imagem não é carregada. Use title= para indicar uma descrição que será mostrada quando o mouse estacionar sobre a imagem. Ex: alt=”carregando imagem, aguarde” title="minha imagem" ●Desenvolvido por Valdivan Ivan 22 CLIQUE AQUI PARA ENTRAR Usando imagens na página file:///nome file:///home/ivan/Desktop/!!!APOSTILA!!!/infocentro.gif * WEBDESIGNER – CONSTRUÇÃO DE SITES* DICA DO DREAMWEAVER Para inserir uma imagem, clique em “Inserir”, “comuns”, botão “imagem”. Formatos de Imagens GIF (Graphics Interchange Format) O GIF apresenta um bom rendimento no tamanho e qualidade em imagens com cores "limpas". Porém, não deve ser usado em imagens complexas e de muitos detalhes, pois, perde fidelidade. Possui suporte para imagens animadas e com transparências. CARACTERÍSTICAS: •Trabalha com cores indexadas, podendo representar um máximo de 256 cores. •Armazena imagens com grandes áreas planas (da mesma cor) de forma bastante eficiente. •Podem ser entrelaçadas. Uma imagem entrelaçada (interlaced) pode ser vista à medida que vai sendo carregada como se fosse mudando de resolução, pois seu carregamento no Navegador é distorcido. •Pode-se definir uma das cores como sendo "transparente", permitindo que se veja o que está por trás. O recurso de transparência é muito interessante, pois permite criar asensação de que as imagens não são todas retangulares. •Permite tratar camadas. •Permite a criação de animações, ou seja, GIFs Animados, que são na verdade, sequências de imagens que se alternam rapidamente. JPEG (Joint Photographic Experts Group) O JPEG é melhor para imagens que apresentam muitos tons de cores. Este formato é ideal para trabalhar com fotografias digitais e imagens complexas. Consequentemente, é um formato de imagem maior e mais pesado. Isso significa dizer que uma imagem em JPEG vai demorar mais para ser carregada pelo Navegador. Alguns dizem que o JPEG, é o mesmo formato JPG, com aprimoramentos e com maior confiabilidade. CARACTERÍSTICAS: •Pode apresentar uma imagens com até 16 milhões de cores. •Armazena imagens complexas de forma eficiente, pois perde menor taxa de resolução. •Não possui o recurso de transparência, portanto sempre aparecem retangulares na tela. •Não simula animações. •É exibida no Navegador por faixas. •Permite utilizar taxas de resolução, imperceptíveis na qualidade final da imagem, tornando-a mais leve. •Não permite tratar camadas. PNG (Portable Networ Graphics) O PNG ainda não é conhecido pela maioria dos usuários de internet, pois, o PNG é um formato relativamente novo. Alguns afirmam que este formato irá substituir o GIF. Porém, outros vão além na afirmação, e dizem que este formato irá substituir também o JPEG. CARACTERÍSTICAS: •Suporta cores TRUECOLOR (48 bits por pixel). •Intrelaçamento. •Transparência. •Permite tratar camadas. ●Desenvolvido por Valdivan Ivan 23 * WEBDESIGNER – CONSTRUÇÃO DE SITES* Tabelas Tabelas são um conjunto de informações disponibilizadas entre molduras (células). Elas auxiliam na apresentação de um conjunto de dados. Toda tabela é formada por linhas e colunas, sendo que, o entrelaçamento de uma linha com uma coluna recebe o nome de célula. Podemos nos utilizar de tabelas para os mais diferenciados fins em linguagem HTML, sendo o objetivo principal, a organização dos dados de forma apresentável e coerente, assim como em qualquer programa de computador, capaz de montar tabelas. Exemplo: TRABALHANDO COM TABELAS EXEMPLO DE TABELA célula1 da linha1 célula2 da linha1 célula3 da linha1 célula1 da linha2 célula2 da linha2 célula3 da linha2 Podemos organizar em tabelas quaisquer tipo de dados, sejam textos, ou imagens. Para exibir imagens nas células da tabela utilize os tags e atributos de imagens que conhecemos. ou seja, para exibir uma imagem utilize , na célula que desejar ter tal imagem. Para ter uma imagem como plano de fundo utilize , porém, note que o atributo background foi adicionado dentro da tag . DICA DO DREAMWEAVER Para inserir uma tabela, clique em “Inserir”, “tabela”, botão “inserir tabela”. Então, você verá a seguinte caixa de diálogo: ●Desenvolvido por Valdivan Ivan 24 Usando Tabelas na página Escolha aqui a quantidade de linhas e colunas e clique em OK * WEBDESIGNER – CONSTRUÇÃO DE SITES* Formulários Os Formulários servem para recolher informações. Através de um Formulário o visitante fornece informações digitando ou clicando em uma opção que pode ser por exemplo, um botão ou uma caixa de opções. Ao enviar tais informações, elas chegarão até você através de seu servidor por meio de um script que deverá ser escrito e configurado, para que tudo funcione bem. Veja a descrição de alguns elementos de Formulários: Radio Buttons: Geralmente são utilizados quando queremos forçar o nosso visitante a fazer uma escolha. Check Boxes: Também chamadas de Caixa de Validação. Permitem a seleção de uma ou mais opções. Textarea: Geralmente é exibido para fornecer uma área para digitação, pois na verdade este elemento é uma caixa de texto. TAG FUNÇÃO Define um formulário para recolher dados inseridos pelo visitante Insere um campo para introduzir dados Define uma área de texto. É usado para fornecer uma área para o visitante digitar um texto Define um nome para um elemento Agrupa elementos num formulário Define uma legenda para um grupo de elementos do formulário Insere mais uma opção em uma lista com várias opções selecionadas Define um botão que pode ser pressionado pelo clique do mouse Define uma lista com várias opções selecionáveis Define um grupo de opções Exemplo: forms nome: gostou de meu site? sim nao envie sugesta: ●Desenvolvido por Valdivan Ivan 25 Na página seguinte você verá a visualização do Formulário gerado por este Exemplo. mailto:valdivanfr@yahoo.com.br * WEBDESIGNER – CONSTRUÇÃO DE SITES* Veja a visualização no Mozilla Composer: **************** ******************************************************** **************** Veja a visualização no Navegador: ●Desenvolvido por Valdivan Ivan 26 A área pontilhada demarca a área do Formulário botão para enviar as informações Botão para limpar a digitação e cancelar o envio das informações Controle TEXTAREA Controle RADIO BUTTOM * WEBDESIGNER – CONSTRUÇÃO DE SITES* DICA DO DREAMWEAVER Para inserir um formulário, clique em “Inserir”, “formulário”, botão “inserir formulário”. Para colocar os elementos de seu formulário, utilize os botões da guia formulário do DREAMWEAVER Link Linkagem em HTML, é a possibilidade de ligação entre documentos de hipertexto. Sendo o HTML uma linguagem de marcação de hipertexto, os links desempenham importante papel na dinâmica de uma página web. Entenda link como sendo um nó atrelado a um outro nó em um ponto de acesso à outras páginas através de rede ou através de endereços, sejam eles internos ou externos. Basicamente, existem dois tipos de linkagem, que são: Internos e Externos. • Interno – que nos remete para outra página no mesmo conjunto e no mesmo site. • Externo – que nos remete para outras páginas fora do documento HTML(site) original. Os links também são chamados de hyperlink ou âncoras. Chamaremos de hyperlink quando eles forem internos ou externos. Chamaremos de âncora nomeada, quando o link nos remeter a uma parte na mesma página em ponto nomeado, simulando um salto em páginas com muitas informações. Então, vejamos: TAG FUNÇÃO SINTAXE Tag responsável por criar um hyperlink Atributos href=indica a referência a ser carregada. Esta referência é a Uniform Resource Locator, ou seja, a URL, que é o endereço descrito do hipertexto procurado. Para Link: texto exibido no navegador Para Âncora Nomeada: texto Exemplo 1: Link Interno Suponha que em seu Site existe um item de exemplo para guiar o internauta. Suponha que há também um item que remete aos cursos ministrados por você. Estudando Links Internos Exemplo de Links Internos Exemplo1 cursos Onde: exemplo1.html = é um arquivo html, que será carregado caso o link seja clicado. cursos.html = também é um arquivo html, que contém uma listagem de cursos.●Desenvolvido por Valdivan Ivan 27 Figura exemplo 1 * WEBDESIGNER – CONSTRUÇÃO DE SITES* Exemplo 2: Link Externo Suponha que em seu site alguém deseja colocar uma propaganda. Será dinâmico colocar um atalho em seu site para a página deste anunciante. Suponha também que você queira recomendar um site que você visitou e gostou. Estudando Links Estudando Links Externos Conheça a ITIC e a AAPSBPwww.itic.aapsbp.com Onde: "http://www.itic.aapsbp.com": É um endereço de uma página ou site na internet. "Conheça a ITIC e a AAPSBP": É o texto que aparecerá como link no navegador. Isto significa dizer que ao clicar este texto, seremos remetidos ao site http://www.itic.aapsbp.com. "www.itic.aapsbp.com": Está fora da marcação do hiperlink (as tags e ), portanto simboliza um texto qualquer sem a menor possibilidade de linkagem. Ou seja, descreve o endereço do site, mas, não remete para ele. ***Observações: Na figura “Exemplo2” a seguir, o texto “ Conheça a Itic e a AAPSBP” , é um link para o Site “www.itic.aapsbp.com”. ●Desenvolvido por Valdivan Ivan 28 Figura Exemplo2 http://www.itic.aapsbp.com/ http://www.itic.aapsbp.com/ http://www.itic.aapsbp.com/ http://www.itic.aapsbp.com/ http://www.itic.aapsbp.com/ * WEBDESIGNER – CONSTRUÇÃO DE SITES* Exemplo 3: Link com Imagens Podemos usar imagem ao invés de texto para obter linkagem. Assim como os textos funcionam tanto em links internos como nos externos, as imagens também funcionarão em quaisquer tipos de linkagens. Estudando Links Estudando imagens em links Exemplo de links Externos Conheça a ITIC e a AAPSBP Clique na Imagem Onde: "http://www.itic.aapsbp.com": É um endereço de uma página. " Conheça a ITIC e a AAPSBP": É um texto de linkagem, pois está entre as tags e . "info.gif": É o nome de um arquivo de imagem. No exemplo é a figura com o texto “ITIC & AAPSBP". Isto quer dizer que ao clicar na suposta imagem, isto nos remeterá ao site http://www.itic.aapsbp.com. DICA DO DREAMWEAVER Para inserir um link no DREAMWEAVER, clique em “Inserir”, “comuns”, botão “Hyperlink”. ●Desenvolvido por Valdivan Ivan 29 Exemplo de Link com imagem http://www.itic.aapsbp.com/ http://www.itic.aapsbp.com/ * WEBDESIGNER – CONSTRUÇÃO DE SITES* Frames (Molduras) Uma técnica muito utilizada em páginas da web é a criação de uma página com divisão de molduras. Uma página dividida em molduras, permite que diferentes páginas sejam visualizadas de uma única vez. Este recurso nos permite ter diferentes formatações entre as páginas, visto que, são páginas independentes, agrupadas e visualizadas na página que contém as divisões através das molduras. Cada moldura servirá de espaço para visualizar apenas uma página. Para ter uma página com duas molduras, teremos que criar as duas páginas que serão visualizadas na estrutura da moldura e criar a página que será dividida entre as molduras. ***Observações: O mozilla Composer não suporta páginas com divisões de molduras (frames), por isso para criar os frames utilizaremos o bloco de notas ou qualquer outro editor de texto. Exemplo: pag com frames Onde: Frameset= Layout da divisão da moldura; Frame= Cada divisão do Frameset. Especifica como será a visualização do layout de Frameset; Src= Especifica o documento html a ser visualizado; Noresize= Define o redimensionamento manual da estrutura do frame(moldura); Scrolling= Define a exibição da barra de rolagem; Frameborder= Define a exibição das bordas entre os frames(molduras); Border= Define o tamanho da borda do frame(moldura); Bordercolor= Define a cor da borda; Name= Para atribuir um nome ao frame(moldura); ●Desenvolvido por Valdivan Ivan 30 Frameset rows Frameset cols Topo Menu Principal * WEBDESIGNER – CONSTRUÇÃO DE SITES* Etapas de Criação Devemos planejar uma seqüência racional para a criação de nossas páginas web's. Tal seqüência, irá tornar o desenvolvimento mais rápido e conseqüentemente, mais profissional. 1ª Etapa: Planejamento O primeiro passo é definir o que queremos mostrar como objetivo de um site. 2ª Etapa: Organização da Informação Devemos organizar de forma racional as informações, para que o objetivo anteriormente definido seja alcançado. 3ª Etapa: Coleta de Material Devemos buscar todo tipo de informação possível. De posse desse material, faremos então, uma triagem, obtendo assim as melhores e mais completas informações. Devemos levar em consideração os fatos apurados no planejamento e principalmente, buscar materiais que se enquadrem no contexto definido na etapa de organização da informação. 4ª Etapa: Construção do Site Para definir a estrutura de navegação. Alguns sites são irritantes, outros vazios, por isso, tome cuidado com a navegabilidade do seu site. construa seu site seguindo os passos que foram estabelecidos no planejamento, organizando racionalmente as informações. 5ª Etapa: Testar localmente Depois de construído o site, é hora de testá-lo. Aqui temos a possibilidade de corrigir possíveis erros de linkagem, visualização e outros. Quando testamos localmente uma estrutura de páginas web's, temos também, a oportunidade de verificar a navegabilidade do nosso site. O simples ato de testar uma página localmente, nos informa se todas as etapas anteriores foram atingidas. ●Desenvolvido por Valdivan Ivan 31 * WEBDESIGNER – CONSTRUÇÃO DE SITES* TAG - Resumo Por fim, listamos as principais TAGs. Para maior compreensão. Dividimos as TAGs em dois grupos: Principal (P), e Especial (E). As TAGs agrupadas como principais aqui neste material, são aquelas que são abertas e fechadas. Em contrapartida as denominadas neste material como sendo especiais, são aquelas que são abertas, porém, não necessitam de fechamento. Note que algumas TAGs listadas aqui como sendo TAGs principais também são TAGs auxiliares, ou seja, TAGs que necessitam de outras para desempenharem suas funções. TAG TIPO FUNÇÃO EM HTML (Hyper Text Markup Language) P Especificação do código HTML P Delimita a cabeça da página, ou seja, a área de informações principais P Insere um cabeçalho que será exibido na Barra de Título do Navegador P Especifica e delimita todo o conteúdo exibido na página P Insere o título principal da página P Insere um texto ou subtítulo na página até P Raramente são usados para título em página. Use para ter texto com ênfase P Inicia parágrafos. E Insere uma quebra de linha forçada E Insere um separador de grupo, ou seja, uma linha que delimita uma área E Insere uma figura ou imagem P Insere um texto monoespaçado P Insere um texto de rolagem P Insere formatação em um texto P Insere um hyperlink ou âncora P Insere um texto em negrito P Insere um texto em itálico P Insere um texto sublinhado P Insere um texto tachado P Insere um texto sobrescrito P Insere um texto subscrito P Centraliza o objeto em questão P Coloca o objeto em questão à direita P Coloca o objeto em questãoà esquerda P Insere um texto com alinhamento forçado P Insere listas organizadas e ordenadas por números ou letras (numeradores) P Insere listas organizadas por símbolos (marcadores) P Marca a área de exibição dos numeradores/marcadores de uma lista E Insere um comentário visível apenas na edição do código P Marca a área de uma tabela P Insere as linhas da tabela P Cria uma célula, bem como seu conteúdo P Adiciona margem em um texto P Define um formulário para recolher dados inseridos pelo visitante PRE P Faz os espaçamentos serem reipeitados com fonte monoespaçadas FRAMESET P Inicia um conjunto de molduras em páginas FRAME P Área ocupada por cada moldura ●Desenvolvido por Valdivan Ivan 32 * WEBDESIGNER – CONSTRUÇÃO DE SITES* ●Desenvolvido por Valdivan Ivan 33 * WEBDESIGNER – CONSTRUÇÃO DE SITES* Introdução Agora iniciaremos nosso trabalho com Desenhos Vetoriais, para tanto, estaremos estudando um software de grande aceitação neste seguimento. O INKSCAPE. Por ser baseado em vetores, este programa tem precisão nos ajustes de cores, muitos recursos aplicáveis ao texto, bem como a criação de logotipos, cartazes e ilustrações diversas. Se você já é usuário de alguma ferramenta de Desenho Vetorial, não terá maiores dificuldades em manusear as ferramentas e os recursos do INKSCAPE, pois, este software é muito parecido com os demais Ilustradores Vetoriais do mercado, obtendo pouquíssimas particularidades. Para utilizar o INKSCAPE, proceda da seguinte forma: APLICAÇÕES GRÁFICOS ILUSTRADOR VETORIAL EM SVG INKSCAPE E então você terá a tela inicial do INKSCAPE: O modo de funcionamento do INKSCAPE é bastante semelhante ao COREL DRAW, porém, ele administra bem recursos e extensões do ILUSTRATOR. ●Desenvolvido por Valdivan Ivan 34 Tela inicial do INKSCAPE Esta página é a área de desenvolvimento do INKSCAPE Esta área fora da página é utilizada para rascunho no INKSCAPE Esta é a tela inicial do Corel DRAW A opção “ ABRIR GRÁFICO”, na verdade abre uma caixa de diálogo para escolher um desenho existente. A opção “ NOVO GRÁFICO”, é usada para criar um novo desenho vetorial. * WEBDESIGNER – CONSTRUÇÃO DE SITES* A Barra de Ferramentas O INKSCAPE tem uma Barra de Ferramentas condensada, porém, muito eficiente, devido ao seu grande poder de versatilidade de alguns botões, que fazem e editam uma imagem. Alterando alguns padrões de botões temos imagens complexas de forma rápida e eficiente. Vejamos as funcionalidades do INKSCAPE, através dos nomes das ferramentas: Seleciona, transforma e espelha uma imagem Altera nós ou alças de controle em imagens Amplia ou reduz a visualização de uma imagem através de ZOOM Cria e edita retângulos e quadrados Cria círculos, arcos e elipses Cria e edita polígonos e estrelas com até 1024 lados ou pontas Cria espirais e círculos complexos Ferramenta para desenhar a mão livre Cria linhas retas e curvas Bezier Cria linhas caligráficas Cria e edita texto artístico Cria conectores em uma imagem Cria e edita gradientes Escolher cores médias em uma imagem A maioria das Ferramentas do INKSCAPE possuem funcionalidade dupla, note isso através dos nomes das ferramentas, ou seja, serão utilizadas para diversos fins, enquanto criamos ou editamos uma figura. ●Desenvolvido por Valdivan Ivan 35 Esta é a Barra de Ferramentas do Corel DRAW * WEBDESIGNER – CONSTRUÇÃO DE SITES* Zoom e Seleção de Objetos Zoom A tarefa de ampliar ou reduzir a visualização de uma imagem no INKSCAPE é muito fácil, podendo ser através da ferramenta Zoom ou através das teclas + (para ampliar) ou – (para reduzir). É importante ressaltar que o Zoom não altera o tamanho da imagem. A imagem com Zoom, apenas será aproximada ou distanciada. Outro importante atalho para o Zoom: CTRL+Clique = ampliar; SHIFT+Clique=reduzir. Seleção de Objetos Para editar algo no INKSCAPE, você deve selecionar tal objeto com a Ferramenta de Seleção. Você já sabe que o Zoom não altera o tamanho original da imagem, porém, sempre que precisarmos redimensionar uma imagem, faremos isso através da Ferramenta de Seleção. ●Desenvolvido por Valdivan Ivan 36 Abas laterais Clicando nas abas centrais podemos esticar o texto Abas centrais Clicando nas abas laterais podemos redimencionar o texto Usando ferramentas do INKSCAPE Ferramentas Zoom e Seleção do Corel DRAW * WEBDESIGNER – CONSTRUÇÃO DE SITES* Criando Formas com o INKSCAPE Quando aprendemos a trabalhar com as ferramentas de forma do INKSCAPE, descobrimos um universo amplo de recursos que este programa nos oferece para a criação de formas diversas. Exemplo: Clique na ferramenta “Criar retângulos e quadrados” ou pressione a tecla F4 , então, o ponteiro do mouse será modificado para uma figura de um retângulo com um sinal de adição, leve-o para a página de desenvolvimento do programa e araste livremente, criando assim uma figura. Experimente fazer o mesmo com a ferramenta de “Criar círculo”, e a ferramenta de “Criar estrelas”. Podemos fazer inúmeras modificações nas figuras criadas, ou seja, transformar um círculo em uma elipse, uma estrela em um polígono e etc... Veja estas figuras: ***Observações: Para criar uma figura com dimensões e formas perfeitas, utilizamos a tecla “CTRL” (Control), no momento em que estamos arrastando o mouse para criar uma figura. ●Desenvolvido por Valdivan Ivan 37 Criando formas com o INKSCAPE Ferramentas semelhantes do Corel DRAW * WEBDESIGNER – CONSTRUÇÃO DE SITES* Preenchimento de um objeto Para mudar a cor de preenchimento de um objeto, devemos antes, selecioná-lo. Podemos editar um preenchimento ou um traço através de três guias: RGB, HSL, CMYK ou RODA. A cor de preenchimento também pode ser trocada rapidamente através da Paleta de Cores. Porém, para que possamos trabalhar o preenchimento do contorno também, não utilizaremos agora a Paleta de Cores. Depois de selecionar o objeto, clique no Menu Objeto e proceda assim: OBJETO PREENCHIMENTO E TRAÇO (SHIFT+CTRL+F) Clicando a Guia “PREENCHER” temos a possibilidade de mudar a cor do preenchimento do objeto. A Guia “PINTURA DE TRAÇO” se refere a possibilidade que temos de mudar a cor do preenchimento da linha de contorno do objeto. A Guia “ESTILO DE TRAÇO” se refere a possibilidade que temos de mudar a espessura e o tipo da linha de contorno do objeto. Contorno de Objetos O INKSCAPE trata um contorno como se fosse um traço. Temos a possibilidade de formar vários tipos de contorno, simplesmente alterando as escalas de “largura, ponta, traços e juntar” Exemplo: Vamos fazer uma estrela com um contorno, para tanto siga os passos a seguir: 1° - Clique na Ferramenta “Criar estrelas e polígonos”, desloque o ponteiro do mouse para a área de desenvolvimento do INKSCAPE e mantenha pressionada a tecla “CTRL” e abra literalmente uma estrela arrastando o ponteiro do mouse em seu página. Desta forma estaremos fazendo uma estrela com todos os lados iguais, ou seja, proporcionalmente. 2° - Clique na Ferramenta “Selecionar e transformar objetos”. 3° - Clique no Menu Objeto e escolha “Preenchimento e Traço”. 4° - Na janela que aparece clique na Guia “Preencher” e no botão “Cor Lisa”. 5° - Acesse a Guia “RGB” e digite os seguintes valores: R= 195; G=202; B=203; A=255 -(Composição da cor cinza). 6° - Clique na Guia “Pintura de traço” e no botão “ Cor Lisa”. 7° - Acesse a Guia “RGB” e digite os seguinte valores: R=0; G=0; B=0; A=255 –(Composição da cor Preta). 8° - Clique na Guia “Estilo de traço” e edite as propriedades: Largura= 12,600 Limite de aguçamento= 4,00 Traço= 0,00 Opacidade mestre= 1,000 9° - Nas Guias “Juntar” e “Pontas”, ative o primeiro botão para cada uma. 10° - Feche a janela clicando no botão
Mais conteúdos dessa disciplina
Login - Studeo Unicesumar | Ambiente Virtual de Aprendizagem- Os Principais Vírus de Computadores
- Cuidados com o Uso de Celulares na Internet
- Nos __________, a reação à aplicação de _________ segue um padrão semelhante. No entanto, na maioria dos casos, as _______ são aplicadas a partir da s
- Exercícios 1. Uma das grandes contribuições fornecidas pela sociologia da educação é enriquecer o debate em torno dos usos das tecnologias na educ...
- Por que grande parte dos resíduos gerados fora do sistema de produção agropecuário não pode ser utilizada diretamente como substrato ou como fertiliza
- Exemplo de software ou programa operacional criado com base em licença de uso comum ou código-fonte aberto está na alternativa: a. Microsoft Win...
- Assinale a opção que contenha um software: a. teclado. b. lousa eletrônica. c. teclado e mouse. d. monitor. e. editor de texto
- Considere uma planilha do Excel onde a célula A1 contém o valor 10, A2 contém 20 e A3 contém 30. Na célula B1, insere-se a fórmula: =SEERRO(ESCOLHER(C
- Qual o papel da coesão na escrita de um texto científico? Múltipla Escolha: O papel da coesão é pesquisar em biblioteca autores de renome par...
- Questão 8 Os programas ditos “Trojan” executam funções maliciosas e sem o conhecimento do usuário. Na língua portuguesa, esses programas são também co
- é um segmento de rede local em uma topologia de barramento É um conjunto de dispositivos que recebem qualquer pacote broadcast originário de qualquer
- 92:19 Progresso:9/10 2 horas AVALIAÇÃO – DIFICULDADES DE APRENDIZAGEM 10 Na perspectiva interacionista há três tipos de aprendizagem social, sendo...
- São interpretadas como manifestações psicossomáticas: Opção A Intolerância associada à destruição de coisas e objetos. Opção B Episódio de irr...
- Sobre as características clínicas da involução do aparelho mastigatório, que ocorre nos pacientes com avanço da idade, marque a alternativa incorreta:
- No contexto judicial, qual desses pode ser considerado um benefício em se criar um agente de IA? a. Criar documentos completos baseados na base de...
- VIGILÂNCIA E COLETA DE DADOS
- QUESTIONÁRIO GESTÃO DA PRODUÇÃO 5 PER ADMINIS
