PARTE 1: HTML MINISTÉRIO DA EDUCAÇÃO UNIVERSIDADE FEDERAL DO PARANÁ SETOR DE CIÊNCIAS EXATAS
|
|
|
- Ágata Fortunato Stachinski
- 7 Há anos
- Visualizações:
Transcrição
1 MINISTÉRIO DA EDUCAÇÃO UNIVERSIDADE FEDERAL DO PARANÁ SETOR DE CIÊNCIAS EXATAS DEPARTAMENTO DE EXPRESSÃO GRÁFICA Professor: Paulo Henrique Siqueira Disciplina: Introdução ao Webdesign O design de páginas de internet é similar à editoração eletrônica. A criação de sites deve aproveitar ao máximo os recursos da Web, respeitando suas limitações. O objetivo principal do estudo de Web Design é a criação de layouts interessantes que chamem a atenção de visitantes. 1. TAGS DE TEXTO Vamos começar com as tags mais comuns de HTML para editoração de páginas. Vamos utilizar o aplicativo Bloco de Notas e um navegador para visualização das páginas (Chrome, Internet Explorer, Firefox, Safari, Opera). Um site que para utilizarmos as cores em código hexadecimal é o seguinte: Com o objetivo de criar apenas acessar o site: PARTE 1: HTML layouts, sem se preocupar com os conteúdos de texto de um site, podemos Vamos criar 2 parágrafos
2 Introdução ao Webdesign 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum bibendum posuere. Nulla blandit fermentum mi. In euismod dolor ligula, sit amet pellentesque ipsum venenatis a. Fusce a ipsum diam. Fusce sem magna, tempus fringilla arcu nec, interdum ultrices turpis. In euismod massa sollicitudin finibus ultricies. Nullam faucibus elit non semper porta. Curabitur nec leo urna. Phasellus dignissim consequat dui, dictum maximus turpis tristique at. Vivamus cursus, leo ac sagittis blandit, est sem lacinia nibh, id sagittis ipsum dui facilisis augue. Fusce at nulla et justo lacinia egestas in eu ante. Fusce lacinia pulvinar urna ut venenatis. Fusce ac lorem eget tellus malesuada lobortis nec in neque. Sed sit amet pharetra leo. Proin finibus diam at imperdiet condimentum. Nullam at dolor dolor. Phasellus a nisi id enim semper facilisis. Cras at dui turpis. Suspendisse convallis nisl leo, vel placerat est venenatis at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur tristique arcu in turpis tempor tincidunt. Ut varius nisl sed ligula convallis varius. Proin efficitur eleifend laoreet. Etiam orci nulla, ornare in fringilla eu, lacinia in turpis. Se colocarmos este texto no Bloco de Notas e salvar o arquivo com extensão htm, a visualização será a seguinte: Para separar os parágrafos usaremos a nossa primeira tag:<p></p> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vestibulum bibendum posuere. Nulla blandit fermentum mi. In euismod dolor ligula, sit amet pellentesque ipsum venenatis a. Fusce a ipsum diam. Fusce sem magna, tempus fringilla arcu nec, interdum ultrices turpis. In euismod massa sollicitudin finibus ultricies. Nullam faucibus elit non semper porta. Curabitur nec leo urna. Phasellus dignissim consequat dui, dictum maximus turpis tristique at. Vivamus cursus, leo ac sagittis blandit, est sem lacinia nibh, id sagittis ipsum dui facilisis augue. Fusce at nulla et justo lacinia egestas in eu ante. Fusce lacinia pulvinar urna ut venenatis. Fusce ac lorem eget tellus malesuada lobortis nec in neque. Sed sit amet pharetra leo.</p> <p>proin finibus diam at imperdiet condimentum. Nullam at dolor dolor. Phasellus a nisi id enim semper facilisis. Cras at dui turpis. Suspendisse convallis nisl leo, vel placerat est venenatis at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur tristique arcu in turpis tempor tincidunt. Ut varius nisl sed ligula convallis varius. Proin efficitur eleifend laoreet. Etiam orci nulla, ornare in fringilla eu, lacinia in turpis.</p> A visualização da página com estas tags fica assim:
3 Introdução ao Webdesign 3 A estrutura básica de uma página em HTML é a seguinte: <!DOCTYPE html> <html> <head> <title>título DA PÁGINA</title> </head> <body> CONTEÚDO DA PÁGINA </body> </html> A tag meta pode ser usada para colocar palavras-chave, autores e descrição da página. Esta tag pode ser colocada no cabeçalho da página. <meta name="author" content="autor DA PÁGINA"> <meta name="keywords" content="html, PÁGINA"> <meta name="description" content="minha primeira página"> <meta charset="utf-8"> Para mudar a cor de fundo da página, ou colocar uma imagem de fundo podemos colocar os atributos bgcolor ou background na tag <body>: Vamos criar uma pasta para as imagens <body bgcolor="gray"> <body background="imagens/fundo.jpg"> Dentro de uma tag podemos colocar atributos de cores, fontes, alinhamentos e planos de fundo. Vamos tentar trocar os atributos de uma tag de parágrafo: <p align="left">parágrafo à esquerda</p> <p align="right">parágrafo à direita</p> <p align="center">parágrafo ao centro</p> <p align="justify">parágrafo justificado</p> <p><font size="20">fonte tamanho 40</font></p> <p><font color="blue" size="30">texto em azul de tamanho 30</font></p> <p><font face="verdana">texto com fonte Verdana</font></p> As tags <hr> e <br> servem para definir uma linha horizontal e uma quebra de linha, respectivamente. Podemos colocar atributos de cores e tamanho na tag <hr> e estas tags não precisam de fechamento (tipo </br>). <hr> <hr width="50%"> <br> As tags <h1>, <h2>,... <h6> são usadas para definir cabeçalhos, com tamanhos diferenciados dos que usamos em parágrafos normais. <h1>cabeçalho de tamanho 1</h1> <h2 align="right">cabeçalho de tamanho 2 alinhado à direita</h2> A tag <blockquote> cria um bloco de texto em destaque, com margem diferente do parágrafo normal. Já as tags <i>, <b> e <u> servem para deixar o texto em itálico, negrito e sublinhado, respectivamente. <p><u>parágrafo normal com texto sublinhado</u></p> <blockquote><i>bloco de texto <b>destacado</b> em itálico</i></blockquote> A tag <strike> serve para deixar uma palavra riscada. <p><strike>palavra</strike> riscada</p>
4 Introdução ao Webdesign 4 2. TAGS DE LISTAS Para criar listas numeradas ou com marcadores vamos criar uma nova página e colocar o título de LISTAS. As tags são <ul> para marcadores e <ol> para as listas numeradas. Os atributos de alinhamento e cores funcionam do mesmo jeito que fizemos com as tags anteriores. <!DOCTYPE html> <html> <head> <title>listas</title> <meta name="author" content="autor DA PÁGINA"> <meta name="keywords" content="html, LISTAS"> <meta name="description" content="minha primeira página"> <meta charset="utf-8"> </head> <body> <h3>minha página de listas</h3> <ul> <li>item amarelo</li> <li>item azul</li> <li>item verde</li> </ul> <ol> <li>item cinza</li> <li>item branco</li> <li>item preto</li> <li>item vermelho</li> </ol> </body> </html> Para modificar os atributos das listas com marcadores usamos type com os valores circle, disc ou square: <ul type="square"> <li>item amarelo</li> <li>item azul</li> <li>item verde</li> </ul> Para modificar os atributos das listas numeradas usamos type com os valores A ou I, e podemos escolher também em que número a lista começa a contar com o atributo start: <ol type="a" start="4"> <li>item cinza</li> <li>item branco</li> <li>item preto</li> <li>item vermelho</li> </ol> 3. IMAGENS Para inserir imagens vamos criar uma nova página e colocar o título de IMAGENS. A tag é <img> seguida de atributos de localização, alinhamento e espaçamento das imagens inseridas. O atributo que mostra o caminho que a imagem salva será mostrada é src (source), o espaçamento horizontal é hspace e o espaçamento vertical vspace. O atributo align serve para deixar o texto alinhado no topo (top), no centro (middle) à esquerda (right) ou direita (left). Sem este atributo, o texto fica alinhado na base do texto.
5 Introdução ao Webdesign 5 O atributo width (comprimento) é muito importante, pois deixa a imagem com um tamanho fixo (se usado com pixels) ou em percentual, que pode dimensionar a imagem de acordo com o tamanho de tela do dispositivo usado para visualizar a página. O atributo height (altura) também pode ser usado para dimensionar a imagem. Outras tags que podem auxiliar na inserção de imagens são <figure> e <figcaption>. Segue abaixo um exemplo de página com inserções de imagens. <!DOCTYPE html> <html> <head> <title>imagens</title> <meta name="author" content="autor DA PÁGINA"> <meta name="keywords" content="html, IMAGENS"> <meta name="description" content="minha primeira página"> <meta charset="utf-8"> </head> <body> <h3>minha página com imagens</h3> <p>vamos testar se a imagem está alinhada com o texto.</p> <p>esta imagem <img src="imagens/figura1.jpg" width="30%" align="left"> está alinhada à esquerda do texto.</p> <p>esta imagem <img src="imagens/figura2.jpg" width="80%" align="middle" hspace="30" vspace="60"> está alinhada no meio do texto.</p> <figure align="center"> <img src="imagens/figura3.jpg" width="100%"> <figcaption>esta é a legenda da imagem</figcaption> </figure> </body> </html> Atividade 1: Crie uma página com um tema comum. Esta página deve conter imagens, uma lista e formatações de texto com cores e alinhamentos. 4. TABELAS A criação de tabelas nas páginas HTML permite algumas aplicações interessantes, que vão além de uma simples tabela de dados. Muitas vezes podemos usar a estrutura de tabela para criar um layout de página, uma paleta de cores ou galerias de imagens e vídeos. As principais tags são <table>, que cria a tabela, <tr> que define uma linha da tabela, <td> que define uma célula da tabela e <th> que define uma célula de título da tabela. Os atributos de alinhamento, cores e texto são os mesmos que vimos para parágrafos. Na primeira linha da tabela podemos definir o comprimento de cada coluna, fontes, alinhamentos, cores e bordas (border). Os atributos rowspan e colspan servem para mesclar linhas ou colunas, respectivamente. Um exemplo de estrutura simples de tabela com 3 linhas e 4 colunas é o seguinte:
6 Introdução ao Webdesign 6 <!DOCTYPE html> <html> <head> <title>tabelas</title> <meta name="author" content="autor DA PÁGINA"> <meta name="keywords" content="html, TABELAS"> <meta name="description" content="minha primeira página"> <meta charset="utf-8"> </head> <body> <h3>minha página com tabelas</h3> <table border="2" bordercolor="red" cellpadding="10" cellspacing="5"> <tr bgcolor="green"> <th>título 1</th> <th>título 2</th> <th>título 3</th> <th>título 4</th> </tr> <tr> <td>linha 2, Coluna1</td> <td>linha 2, Coluna2</td> <td>linha 2, Coluna3</td> <td>linha 2, Coluna3</td> </tr> <tr> <td>linha 3, Coluna1</td> <td>linha 3, Coluna2</td> <td>linha 3, Coluna3</td> <td>linha 3, Coluna3</td> </tr> </table> </body> </html> Os atributos cellpadding e cellspacing servem para definir a margem interna e externa de cada célula da tabela. O atributo bordercolor muda a cor da borda. Exercício 1: Como podemos criar uma linha de título, que ocupe a primeira linha da tabela? Exercício 2: Criar uma página que contém a tabela abaixo. Fonte: Brasil, Tabaco e Câncer de Pulmão: O que dizem os Números, André Medici, junho de 2013.
7 Introdução ao Webdesign 7 Atividade 2: Criar uma página com a paleta de cores básicas de HTML mostrada a seguir. Cada nome de cor pode ser colocado em uma célula com sua respectiva cor de fundo, ou em uma célula separada, logo abaixo da sua respectiva cor de fundo. Fonte: Web Design para iniciantes, Neilon Marcio. Para usar os alinhamentos horizontais nas células de uma tabela usamos o atributo align. Para o alinhamento vertical, podemos usar o atributo valign (bottom, top, middle). Exercício 3: Modifique os alinhamentos verticais e horizontais das células da tabela da Atividade 2. Exercício 4: Vamos criar uma primeira galeria de imagens. Crie um site com uma tabela com imagens reduzidas que você usou na Atividade 1 (use width para dimensionar as colunas da tabela de acordo com o número de imagens que você utilizar). Em cada célula, crie uma tag <img> com as informações de cada imagem. 5. LINKS, ÁUDIO, VíDEO e LISTAS SELETORAS Os links de uma página utilizam a tag <a>, que se refere a âncoras de hipertexto ou hiperlinks. Esta tag pode ser usada para referência de uma página do site que você criou ou de uma página externa. O atributo href é o endereço do link e target é o destino do link quando for aberto pelo visitante do seu site. Quando for omitido, o target define que a página do link será aberta na mesma aba da página que contém o link. Caso queira que ela abra em uma nova aba, basta usar o valor _blank para o target. O link a seguir define que a pagina1.htm será aberta em uma nova aba. Vale lembrar que para o link funcionar, esta página deve estar no mesmo diretório da página que contém o link. <a href="pagina1.htm" target="_blank" title="minha página">página 1</a> O link a seguir define que a página do Google será aberta na mesma aba da página do link. <a href=" title="google">página do Google</a>
8 Introdução ao Webdesign 8 Exercício 5: Para cada imagem colocada no site do Exercício 4, crie um link para que abra em uma nova aba. Assim temos uma galeria de imagens bem simples, com abertura da imagem completa em uma nova aba. Para mudar a cor do texto de links e de links visitados, basta colocar os atributos link e vlink na tag <body> da página: <body link="green" vlink="red"> Os arquivos de áudio e vídeo podem ser inseridos em uma página de forma similar com tags <source> <audio> e <video>. <audio controls="true" autoplay="true" src="audio/musica1.mp3"></audio> O atributo loop pode ser usado para repetir a música. Nem todos os navegadores conseguem abrir os arquivos mp3, logo podemos criar uma tag com arquivos mp3 e wma. <audio controls="true" autoplay="true"> <source src="audio/musica1.mp3"></source> <source src="audio/musica1.wma"></source> </audio> Se em nenhum dos casos o áudio funcionar, você pode criar um link para download do arquivo de áudio depois de fechar a tag <audio> ou criar uma mensagem em um parágrafo dentro da tag de áudio dizendo que o navegador não reconhece os arquivos de áudio. Para inserir um vídeo salvo em seu computador usamos a tag <video>, de forma similar à tag <audio>. <video controls="true" src="videos/video1.mp4"></video> Os atributos de dimensionamento (largura e altura), autoplay, preload (auto ou none) e loop podem ser usados nesta tag de vídeo. Para que todos os navegadores reconheçam e possam executar seus vídeos, os formatos devem ser ogv, mp4 e webm. A tag completa para vídeos fica da seguinte forma: <video controls="true" width="100%" height="100%"> <source src="videos/video1.mp4" type="video/mp4"></source> <source src="videos/video1.ogv" type="video/ogv"></source> <source src="videos/video1.webm" type="video/webm"></source> </video> Caso o navegador não reconheça os arquivos, você pode criar um link para download dos arquivos ou colocar um parágrafo dentro da tag vídeo com uma mensagem dizendo que o navegador não reconhece os vídeos. Os vídeos da internet podem ser inseridos em uma página HTML através de links ou usando a tag <iframe>, que cria uma tela de exibição do vídeo embutida na página. Os atributos são os mesmos da tag <img>. Um atributo adicional chama-se allowfullscreen, que permite a exibição do vídeo em tela cheia. Outro atributo chama-se frameborder, que cria uma borda na tela do vídeo. <iframe width="420" height="315" src=" frameborder="4" allowfullscreen></iframe>
9 Introdução ao Webdesign 9 Atividade 3: Crie uma página com imagens e descrições de 5 pontos turísticos de Curitiba colocados em uma tabela (exemplo a seguir). As informações podem incluir preço de ingresso, endereço, link para o site oficial de cada ponto escolhido e link para o mapa. Exercício 6: Crie um site com um endereço do Google Maps. Crie uma galeria de vídeos do youtube colocados em formato de tabela. Modifique bordas e cores para criar este site. A criação de formulários e listas seletoras em HTML utiliza o elemento input para validar informações digitadas pelos usuários de sua página. Podemos criar listas de seleção e validar campos de , telefone e outros elementos contidos em formulários. Segue abaixo um exemplo de lista seletora com as tags <select> e <option>, e o formato padrão de uma linha visível (primeira opção da lista). <select id="marca" class="texto" name="carro"> <option value="fiat">fiat</option> <option value="ford">ford</option> <option value="volkswagen">volkswagen</option> <option value="renault">renault</option> </select> Para que deixar um item pré-selecionado usamos a propriedade selected. Para deixar um item desabilitado usamos a propriedade disabled. <select id="marca" class="texto" name="carro"> <option value="fiat">fiat</option> <option value="ford" selected>ford</option> <option value="volkswagen">volkswagen</option> <option value="renault" disabled>renault</option> </select>
10 Introdução ao Webdesign 10 Para deixar a lista seletora em um formato de lista com mais itens visíveis, usamos a propriedade size. <select id="marca" class="texto" name="carro" size="3"> <option value="fiat">fiat</option> <option value="ford" selected>ford</option> <option value="volkswagen">volkswagen</option> <option value="renault">renault</option> </select> Um exemplo interessante é do uso de javascript para inserir opções de imagens ou vídeos dentro de um iframe. Segue abaixo o exemplo com 3 fotos, e a caixa seletora é usada para mudar as imagens do iframe. <select id="videos" class="midia" name="imagens" onchange="javascript:iframe1.location=this.value"> <option value="imagens/foto1.jpg">foto 1</option> <option value="imagens/foto2.jpg">foto 2</option> <option value="imagens/foto3.jpg">foto 3</option> <option value="imagens/foto4.jpg">foto 4</option> </select> <iframe src="imagens/foto1.jpg" name="iframe1" width="70%" height="70%" scrolling="auto"></iframe> 6. CSS CASCATING STYLE SHEET O padrão de formatação CSS (Cascating Style Sheet), também chamado de folha de estilos, permite a formatação de itens de uma página de uma só vez. Este padrão também permite que diversas páginas tenham um mesmo padrão para cada item HTML. A sintaxe é simples: objeto {propriedade:valor;} Por exemplo: body {background:#ofc;} O CSS pode ser inserido na página de três formas: inline (logo após a tag), interno (dentro da tag de cabeçalho da página) ou externo (um arquivo com extensão.css referenciado na tag de cabeçalho). Exemplo inline: <p style="color:#ofc; font-size:18px;">texto verde com fonte tamanho 18</p> Exemplo interno (dentro da tag <head>): <style type="text/css"> p {color:#ofc; font-size:18px;} </style> Exemplo externo (dentro da tag <head>): <link rel="stylesheet" type="text/css" href="estilo.css" /> No caso de css em arquivo externo, basta escrever dentro do arquivo estilo.css todas as formatações css: p {color:#ofc; font-size:18px;} Para elementos das tags do HTML usamos sempre o nome da tag (p, body, select, img, h1, h2, a, audio,...). Exercício 7: Crie uma lista seletora de vídeos que você usou no Exercício 6. Direcione o vídeo selecionado para um iframe.
11 Introdução ao Webdesign 11 Exercício 8: Crie 8 sites com mesmo tema (carros, vídeos ou frutas,...). Cada site deve ter layout simples, com um item do tema com foto e descrição do item. Crie um site principal, com uma caixa seletora que direcione os 8 sites que você criou em um iframe. Para deixar a página com a altura completa da tela, sem deixar que os iframes ou divs fiquem com alturas bem reduzidas em relação à tela, podemos usar as seguintes propriedades no CSS: body, html, iframe {height:100%;} Desta forma, o conteúdo ficará adequado à tela de visualização da página. Outra propriedade que podemos usar no CSS define o corpo da página centralizado à tela. Neste caso, podemos definir a largura da página menor do que 100% e as margens da seguinte maneira: body {width:85%; margin:auto;} Quando criamos vários elementos do mesmo tipo e queremos que todos tenham uma determinada formatação (por exemplo, parágrafos, cabeçalhos h1, divs, img,...) criamos as classes (class) para estes grupos de tags. Por exemplo, uma tabela e um parágrafo podem compartilhar das mesmas formatações colocando-se em suas tags a mesma classe: <p class="fontevermelha">parágrafo com fonte vermelha e fundo azul</p> <table class="fontevermelha">... </table> E no CSS colocamos as propriedades da classe fontevermelha: <style type="text/css">.fontevermelha {color:red; background:blue;} </style> Quando usamos os identificadores (id), a formatação do CSS deve ser usada exclusivamente para um determinado elemento. Os ids não podem se repetir em uma página. Caso estejam repetidos, o padrão é que a página coloque a formatação apenas no primeiro elemento que aparecer com id. Por exemplo, para criar um parágrafo com texto em vermelho e outro com texto em verde, colocamos ids em cada parágrafo no HTML: <p id="paragrafovermelho">parágrafo com fonte vermelha</p> <p id="paragrafoverde">parágrafo com fonte verde</p> E no CSS colocamos as propriedades de cada parágrafo: <style type="text/css"> #paragrafovermelho {color:red;} #paragrafoverde {color:green;} </style> Para modificarmos uma propriedade de um elemento que está dentro de uma tag do HTML criamos um seletor encadeado. Por exemplo, para mudar a cor do negrito de um parágrafo, usamos a seguinte tag HTML com respectivo css: <p>este é o meu <b>principal</b> parágrafo</p>
12 Introdução ao Webdesign 12 Dentro da tag <head>: <style type="text/css"> p b {color: blue;} </style> A mesma ideia vale para id e class. Para facilitar as formatações sempre usamos as tags <div> para separar elementos da página com atributos diferentes. Para criar uma página com menu, banner, logo e corpo de texto, podemos criar 4 tags <div> com os respectivos conteúdos e seus ids ou classes. Desta forma, a formatação do CSS ficará mais simples e eficiente. As pseudo-classes do CSS podem ser usadas para criar propriedades que não são editáveis em HTML. Estes seletores tem formato sempre separado por dois pontos : a:hover {font-weight:bold;} a:link {color:red;} a:visited {color:green;} Vamos criar um site com formato em tabela, com layout abaixo: Caixa/table ícone/texto banner menu Imagens dos conteúdos conteúdo contato rodapé Para criar o banner, selecione uma imagem e coloque-a como imagem de fundo da célula banner. Crie uma classe chamada banner para diferenciar esta célula das demais, colocando propriedades de cores e do background. Assim, o título da página pode ser criado por cima da imagem. Podemos criar um efeito de sombra no texto do banner com a propriedade CSS text-shadow: text-shadow:medida1 medida2 medida3 cor; onde medida1 e medida2 são as distâncias à direita e abaixo do texto, medida3 é o raio para um efeito blur (esfuminho) da sombra e a cor em rgb, hexadecimal ou código HTML. Para criar mais de uma sombra no mesmo texto, você pode colocar as medidas da outra sombra logo após as medidas da sombra anterior: text-shadow:medida1 medida2 medida3 cor1, medida4 medida5 medida6 cor2; As propriedades ideais CSS da imagem de fundo do banner não devem permitir repetições da imagem (norepeat) e podem deixar a imagem centralizada (center). Outra informação importante é sobre o tamanho, que neste caso é definido com a função background-size (contain, auto ou cover)..banner {background:url(imagens/banner.jpg) no-repeat center; background-size:contain;}
13 Introdução ao Webdesign 13 Agora vamos criar um menu horizontal usando a tag <nav> que indica uma lista de links internos ou externos. Vamos criar uma classe menu para esta tag para colocar suas propriedades CSS. Dentro desta tag criamos a lista dos itens do menu com as tags conhecidas <ul> e <li>: <nav class="menu"> <ul> <li><a href="site1.htm">primeiro Item</a></li> <li><a href="site2.htm">segundo Item</a></li>... </ul> </nav> Seguem abaixo as propriedades CSS do menu. A linha da tabela <tr> que contém o menu pode ter a classe menu para ser formatada no CSS. Podemos colocar bordar nesta linha <tr> e mudar a cor de fundo para o menu:.menu {background:yellow; border-top:blue 1px solid;} Primeiro com relação à lista <ul> do menu, o formato mostrado não deverá ser de lista e as margens internas e externas devem ser nulas (senão uma margem padrão de listas será colocada):.menu ul {list-style-type:none; margin:0; padding:0;} Cada item <li> do menu deve ter a propriedade float definida para que todos os itens fiquem na horizontal. Outros elementos que podem ser definidos para cada item são: margens internas (padding) e externas (margin), comprimento de cada botão e borda..menu li {float:left; margin:7px; padding:10px; border:1px red solid; width:100px;} Cada item <li> com seu respectivo link <a> pode ter definições de cor de texto, cor de fundo e o formato de visualização com a propriedade display:block..menu li a {display:block; color:#666; text-align:center; padding:4px 16px; text-decoration:none;} Para criar um efeito de sombra no texto ao passar o mouse em cada item do menu, podemos usar a propriedade hover de cada link do menu:.menu li a:hover {color:blue; text-shadow:2px 2px 6px white; background-color:green;} Assim como o efeito de sombra no texto, podemos criar um efeito de sombra em cada item do menu com a propriedade box-shadow: box-shadow:medida1 medida2 medida3 cor; que possui as mesmas informações da propriedade text-shadow. Experimente colocar esta propriedade em outros elementos da página, como o body, td ou parágrafos p. Para deixar a altura do menu ocupando o espaço total da célula usamos os atributos height e overflow. Para centralizar o menu, vamos colocar a propriedade display:flex do menu e usar um novo atributo em CSS chamando justify-content, que pode ter os valores flex-start (equivalente a left), flex-end (equivalente a right), center, spacebetween (outros objetos da mesma linha ficam com mesmo espaçamento, sem margens) ou space-around (outros objetos da mesma linha ficam com mesmo espaçamento e margens)..menu {background:yellow; border-top:blue 1px solid; height:100%; overflow:auto; display:flex; justify-content:space-around;} Para criar menu vertical, as propriedades são as mesmas, removendo-se a propriedade float:left; das tags <li> do menu.
14 Introdução ao Webdesign 14 O site tem a propriedade de deixar o item ativo do menu de outra cor. Outra mudança é com as cores do ícone (que poderemos desenhar e colorir com os conteúdos que veremos nas aulas seguintes), que podem ser diferentes para cada página criada. Página principal, com destaque para o item HOME do menu. Página com a equipe de trabalho, com destaque para o item ativo do menu. Para criar este efeito na página ativa, podemos criar uma classe.active dentro da tag html da página ativa. Depois é só colocar as propriedades CSS desta classe que o resultado fica semelhante ao site mostrado acima.
15 Introdução ao Webdesign 15 No código HTML da página site1.htm colocamos na lista do menu a classe.active. Podemos fazer o mesmo para cada página do seu site: <nav class="menu"> <ul> <li><a class="active" href="site1.htm">primeiro Item</a></li> <li><a href="site2.htm">segundo Item</a></li>... </ul> </nav> No CSS criamos as propriedades da classe active:.active {color:red; text-shadow:2px 2px 6px black; background-color:purple;} Outra propriedade de menu que podemos formatar é de criação de bordas laterais em todos os itens da lista li. Para que o último item fique sem borda, usamos a propriedade last-child. Se você quiser que o primeiro item fique sem borda, pode usar a propriedade first-child:.menu li:first-child {border-right:none;} ou.menu li:last-child {border-right:none;} Agora nossa página já está com a parte superior completa. O próximo passo é colocar em uma célula imagens de cada página, na célula ao lado o conteúdo da página e na terceira célula informações de contato. Imagens dos conteúdos conteúdo contato Na célula de contato, podemos criar uma função para enviar com o programa padrão de cada dispositivo com a seguinte tag: <a href="mailto:seu @provedor.com.br">envie um </a> Outras informações que podem ser colocadas são: mapas, endereço e telefone. Na última linha da tabela podemos criar os links para redes sociais e colocar informações de contato do webdesigner e o ano de criação de página. Para colocar os links de redes sociais basta criar ou copiar imagens dos principais sites de redes sociais e criar os links das redes sociais da empresa do site. Cada imagem terá um link agregado com o endereço da rede social, por exemplo: <a href=" src="imagens/facebook.png"></a> <a href=" src="imagens/twitter.png"></a> Para colocar dois links em um mesmo texto ou imagem, usamos um código em javascript para criar o segundo link. Como muitos navegadores possuem bloqueio de pop-up, este segundo link provavelmente não abrirá em todos os navegadores. Por isso, o link mais importante deve ficar no href. No exemplo a seguir, uma mesma imagem tem os links de facebook e twitter da UFPR: <a href=" onclick="javascript:window.open(' <img src="imagens/redessociais.png"></a>
16 Introdução ao Webdesign 16 Para abrir o segundo link com uma janela nova, sobreposta à janela do primeiro link, colocamos as dimensões da nova janela no código javascript: <a href=" onclick=" javascript:window.open(' 'nome', 'width=900px, height=800px, resizable=yes, scrollbars=yes, status=yes')"><img src="imagens/redessociais.png"></a> Você também pode colocar imagens com funções de botões para compartilhar sua página nas redes sociais. Basta colocar o link de cada imagem com as respectivas tags abaixo: <a href=" src="imagens/facebook_compartilhar.png"></a> <a href=" text=minhapágina&hashtags=webdesign,redes%20sociais"><img src="imagens/twitter_compartilhar.png"></a> Atividade 4: Crie um site de vendas com layout em tabela similar ao exemplo abaixo (index.htm). Crie logo e título com imagens, menu lateral, imagens de produtos e textos com promoções. Crie uma página com mesmo layout, mesclando as células de produtos em uma só, criando uma descrição da empresa, com uma imagem da empresa. Use CSS para modificar os atributos dos elementos das tags de links do menu lateral e do horizontal (tag de link a, por exemplo). Crie id ou class para os produtos em promoção (mudar cor ou fundo). LOGO MENU LATERAL BANNER pedidos fale conosco promoções sobre Produto 1 Preço: Promoção: Produto 2 Preço: Promoção: Produto 12 Preço: Promoção: COPYRIGHT, ENDEREÇO, FORMULÁRIOS Vamos criar uma página de formulário, usando os campos type e botões de validação. Tel telefone Search campo de busca formatação e validação de url endereço web datas e horas (date, month, week, time, datetime-local) Exemplos: <input type="date" name="data" value=" "/> <input type="datetime-local" name="data" value=" "/> <input type="tel" name="telefone" value="" maxlength="9"/> <input type="number" name="valor" value="10" max="20" min="1" step="0.1"/>
17 Introdução ao Webdesign 17 <input type="range" name="valor" value="7" max="40" min="0" step="0.5"/> <input type="color" name="color"/> <input name="procurar" placeholder="procurar"/> Podemos criar rótulos para os campos de entrada de um formulário usando a tag label ou usar uma tabela para organizar o formulário. <label>nome:</label> Para validar os campos de um formulário, precisamos criar um arquivo em PHP para enviar os dados para o servidor de hospedagem de seu site ou para o seu . Desta forma, podemos colocar todos os campos do formulário dentro de uma tag form com uma chamada para validação de um arquivo PHP. <form method="post" action="enviar.php"> </form> Para não deixar os campos do formulário vazios, podemos usar a propriedade placeholder em cada tag input para deixar uma mensagem da informação esperada de cada campo de entrada. <input name="name" placeholder="seu Nome"> Uma caixa de mensagem com mais linhas pode ser definida usando a tag textarea. O exemplo abaixo cria uma caixa de texto com 7 linhas. O número de colunas pode ser definido com a propriedade cols. <textarea rows="7" name="mensagem" placeholder="qual é sua dúvida?"></textarea> Qualquer entrada que seja obrigatória deve ter a propriedade required dentro da tag input. <input =" " placeholder="seu " required> Para enviar os dados do formulário usamos a propriedade submit. <input id="submit" name="submit" type="submit" value="enviar"> Exercício 9: Crie uma página de formulário de contato no site criado na página da Atividade 4. Coloque os campos NOME, , TELEFONE e MENSAGEM. A validação pode ser feita com um arquivo PHP com código abaixo. <?php $name = $_POST['name']; $ = $_POST[' ']; $message = $_POST['message']; $fone = $_POST['fone']; $from = 'De: Meu site'; $to = 'paulohs@ufpr.br'; $subject = 'Dúvida'; $body = "De: $name\n $ \n Mensagem:\n $message"; if ($_POST['submit']) { if ($name!= '' && $ != '') { if (mail ($to, $subject, $body, $from)) { echo 'Sua mensagem foi enviada!';} else {echo 'Algo deu errado, volte e tente novamente!';} } else {echo 'Você precisa responder todas as questões!!';} }?>
PARTE 1: HTML MINISTÉRIO DA EDUCAÇÃO UNIVERSIDADE FEDERAL DO PARANÁ SETOR DE CIÊNCIAS EXATAS
MINISTÉRIO DA EDUCAÇÃO UNIVERSIDADE FEDERAL DO PARANÁ SETOR DE CIÊNCIAS EXATAS DEPARTAMENTO DE EXPRESSÃO GRÁFICA Professor: Paulo Henrique Siqueira Disciplina: Fundamentos do Webdesign I O design de páginas
ISEL Instituto Superior de Engenharia de Lisboa ADEETC Área Departamental de Engenharia de Electrónica e Teleconumicações e de Computadores
ISEL Instituto Superior de Engenharia de Lisboa ADEETC Área Departamental de Engenharia de Electrónica e Teleconumicações e de Computadores MERCM Mestrado em Eng. de Redes de Comunicação e Multimédia Dissertação
TÍTULO DO ARTIGO EM PORTUGUÊS TÍTULO DO ARTIGO EM INGLÊS
TÍTULO DO ARTIGO EM PORTUGUÊS TÍTULO DO ARTIGO EM INGLÊS Nome completo (sem abreviações) do Autor 1, última titulação, endereço profissional Nome completo (sem abreviações) do Autor 2, última titulação,
Um exemplo de projeto feito em L A TEX: Procure um título suficientemente claro
Um exemplo de projeto feito em L A TEX: Procure um título suficientemente claro Projeto de Pesquisa - Nome da Instituição/Agência de fomento Proponente: Jesús P. Mena-Chalco Centro de Matemática, Computação
CCM002 Metodologia de Pesquisa em Ciência da Computação. Apresentações. Prof. Jesús P. Mena-Chalco 3Q-2016
1 CCM002 Metodologia de Pesquisa em Ciência da Computação Prof. Jesús P. Mena-Chalco jesus.mena@ufabc.edu.br 3Q-2016 2 Pratique, pratique, pratique,. Pode inovar, não ha regra apenas sugestões. Pode falar
Intro. Índice. Um teste do L Y X. Contents. efeefe. Sexta-feira, 13 de agosto de I O primeiro capítulo 1. II O segundo capítulo 3.
Um teste do L Y X efeefe Sexta-feira, 13 de agosto de 2010 Abstract Esse texto é teste do software L Y X para a diagramação de publicações online. Também vou utilizá-lo como base para converter para diversos
Um teste do L Y X. efeefe
Um teste do L Y X efeefe Sexta-feira, 13 de agosto de 2010 Esse texto é teste do software L Y X para a diagramação de publicações online. Também vou utilizá-lo como base para converter para diversos formatos
BRAND GUIDELINES RTP MÚSICA
RTP MÚSICA VERSÃO VERTICAL GRELHA / EIXOS BRAND GUIDELINES GRELHA / EIXOS VERSÃO VERTICAL VERSÃO HORIZONTAL BRAND GUIDELINES VERSÃO MOSCA COMPORTAMENTOS CROMÁTICOS (VERSÃO HORIZONTAL E VERTICAL) Cor Directa
MANUAL DE IDENTIDADE VISUAL ATUALIZAÇÃO: MARÇO/2017
MANUAL DE IDENTIDADE VISUAL ATUALIZAÇÃO: MARÇO/2017 INTRODUÇÃO Neste manual de identidade visual da Comissão de Graduação do Instituto de Física da Universidade de São Paulo serão oferecidas soluções e
EDITAL 03/2019 DISCIPLINA ESPECIAL: DIPLOMACIA MULTILATERAL E LIDERANÇA
EDITAL 03/2019 DISCIPLINA ESPECIAL: DIPLOMACIA MULTILATERAL E LIDERANÇA O presente documento versa sobre os requisitos para a submissão da inscrição na Disciplina Diplomacia Multilateral e Liderança, ofertada
Como gerenciar com sucesso o seu empreendimento
GRANDE ARACAJU SERGIPE Ano I Edição 1 Março/Abril 2018 ADMINISTRAÇÃO Como gerenciar com sucesso o seu empreendimento Entrevista com Dr. ANTONIO JOSÉ DA SILVA Administrador da SET & Cia. EXPEDIENTE EDITORIAL
MANUAL DE NORMAS GRÁFICAS MOD02_PR02_V03 1
MANUAL DE NORMAS GRÁFICAS MOD02_PR02_V03 1 DATA: Outubro 2016 ELABORADO: Laura Santos EDITADO: Bruno Filipe APROVADO: Manuel Serejo ASSUNTO: Normas para apresentação de documentos Normas e apresentação
D I G I TA L ATENÇÃO NAS MÍDIAS DIGITAIS, OS DESCONTOS DIFEREM DOS PRATICADOS NA MÍDIA IMPRESSA. CONSULTE-NOS.
D I G I TA L ATENÇÃO NAS MÍDIAS DIGITAIS, OS DESCONTOS DIFEREM DOS PRATICADOS NA MÍDIA IMPRESSA. CONSULTE-NOS. Plásticos em Revista Digital Plásticos em Revista é a mais antiga publicação de seu segmento,
MANUAL DE NORMAS GRÁFICAS MOD02_PR02_V05 1
MANUAL DE NORMAS GRÁFICAS MOD02_PR02_V05 1 DATA: Outubro 2018 ELABORADO: Laura Santos EDITADO: Bruno Filipe APROVADO: Manuel Serejo ASSUNTO: Normas para apresentação de documentos Normas e apresentação
MANUAL DE NORMAS Normas Normas.indd indd :09:36 12:09:36
MANUAL DE NORMAS Universo cromático Pantone 470 C C M Y K 0% 58% 100% 33% Black 50% Black Família Tipográfica Barmeno Regular utilizado nas palavras municipal de lisboa abcdefghijklmnopqrstuvxz ABCDEFGHIJKLMNOPQRSTUVXZ
d ce D I G I TA L ATENÇÃO NAS MÍDIAS DIGITAIS, OS DESCONTOS DIFEREM DOS PRATICADOS NA MÍDIA IMPRESSA. CONSULTE-NOS. R E V I S T A
d ce R E V I S T A D I G I TA L ATENÇÃO NAS MÍDIAS DIGITAIS, OS DESCONTOS DIFEREM DOS PRATICADOS NA MÍDIA IMPRESSA. CONSULTE-NOS. Doce Revista Digital Há 31 anos no mercado, a imagem da Doce Revista é
MODELO PARA EDITORAÇÃO DE LIVRO Guia do Usuário
MODELO PARA EDITORAÇÃO DE LIVRO Guia do Usuário 2016 Esta página ficará em branco. LOREM IPSUM (título) dolor (subtítulo) Falsa folha de rosto. Nesta folha conterá apenas o título e o subtítulo (se necessário)
Após Renato acelerar tramitação, Senado vota hoje PEC do teto
Dourados-MS, 12 de Janeiro de 2020. Digite e pressione enter... MS BRASIL MUNDO POLÍTICA ESPORTES FESTAS&EVENTOS ENTREVISTAS ARTIGOS COLUNAS + EDITORIAS Full banner capa 1 (728x90px) FULL BANNER DESKTOP
Fórum Metodologias Ativas MetA 2015
Fórum Metodologias Ativas MetA 2015 Professor, venha compartilhar suas experiências diferenciadas e inovadoras de ensino! Participe dessa onda Saberes da Universidade - Metodologias Ativas http://www.pucsp.br/reunindo-saberes-da-universidade
12 Set SEGUNDA-FEIRA ÀS 19:30PM
SUPER BANNER PERSONALIZADO (960X200px) Pec do Teto Após Renato acelerar tramitação, Senado vota hoje PEC do teto Fábio Assunção comenta cena do primeiro encontro entre Arthur e Eliza: Bem bonito Ator fala
AMAZÔNIA PARA SEMPRE. Inclusão Digital. Acessibilidade. País do Futebol. Sustentabilidade & Gestão Social
www.revistaresponsa.com.br Sustentabilidade & Gestão Social Inclusão Digital A internet sobe a favela Pág. 09 Acessibilidade Adaptação por todos os lados Pág. 15 País do Futebol Como a Copa do Mundo no
POCH MANUAL DE NORMAS
POCH MANUAL DE NORMAS 2015 A MARCA A marca é o elemento mais identificativo da identidade corporativa. A normalização da mesma é essencial para preservar a sua legibilidade e percepção. Por esse motivo,
A construção do logótipo (relações entre os diferentes elementos);
Manual Normas Este manual de normas gráficas é um instrumento de trabalho que visa definir um conjunto de regras e recomendações que garantam a aplicação correcta da identidade gráfica da ANI. As várias
SUPER LOGO EXEPLO DE APRESENTAÇÂO
SUPER LOGO EXEPLO DE APRESENTAÇÂO Capa com titulo da apresentação com sub-titulo ou texto de apoio, ou outras informações muito sumárias, caso necessário Lorem ipsum dolor sit amet, consectetur adipiscing
UNIVERSIDADE TECNOLÓGICA FEDERAL DO PARANÁ DEPARTAMENTO ACADÊMICO DE ENGENHARIA MECÂNICA
UNIVERSIDADE TECNOLÓGICA FEDERAL DO PARANÁ DEPARTAMENTO ACADÊMICO DE ENGENHARIA MECÂNICA PRIMEIRO AUTOR SEGUNDO AUTOR TERCEIRO AUTOR QUARTO AUTOR QUINTO AUTOR SEXTO AUTOR TÍTULO COMPLETO DO PROJETO PROJETO
NORMAS PARA PUBLICAÇÃO - TECCOGS ISSN:
Normas para publicação Formatação da página (margens): Topo: 3,3 cm Inferior: 3 cm Esquerda: 2,3 cm Direita: 2 cm Título: Fonte: Arial, 14 Alinhamento do texto: à esquerda Norma para publicação Autoria:
SUPER BANNER PERSONALIZADO 01 (960X200px) Fábio Assunção comenta cena do primeiro encontro entre Arthur e Eliza: Bem bonito
SUPER PERSONALIZADO 01 Pec do Teto Após Renato acelerar tramitação, Senado vota hoje PEC do teto CAPA 1 EUGÊNIO FALCÃO RINGSON TOLEDO MATEUS RODRIGUES CAPA 2 INTEGER amet, consectetur adipiscing elit.
MANUAL NORMAS GRÁFICAS
MANUAL DE NORMAS GRÁFICAS NOVEMBRO 2016 MIGUEL GATA INTRODUÇÃO 2 MANUAL DE NORMAS GRÁFICAS BEM-VINDO ao Manual de Normas Gráficas da ESCOLA PROFISSIONAL PRÁTICA UNIVERSAL BRAGANÇA Dada a importância que
Preparação de um trabalho de pesquisa: - Citações e Referências bibliográficas
CCM002 Metodologia de Pesquisa em Ciência da Computação Apresentações Preparação de um trabalho de pesquisa: - Citações e Referências bibliográficas Prof. Jesús P. Mena-Chalco jesus.mena@ufabc.edu.br 3Q-2017
Manual de Normas Gráficas. CASES - Cooperativa António Sérgio para a Economia Social
Manual de Normas Gráficas CASES - Cooperativa António Sérgio para a Economia Social CASES 2015 Assinatura CASES Versões da assinatura CASES v1 v3 v5 Positivo v2 v4 v5 Negativo v1. Esta assinatura deverá
HTML BÁSICO E TEMPLATE VIEW. Gabrielle Amorim Porto
HTML BÁSICO E TEMPLATE VIEW Gabrielle Amorim Porto HTML BÁSICO E TEMPLATE VIEW Hypertext Markup Language Linguagem de marcação de hipertexto; Descreve a estrutura das páginas Web utilizando tags. HTML
Coloque aqui seu nome
Universidade Federal do Triângulo Mineiro - UFTM Mestrado Profissional em Matemática em Rede Nacional - PROFMAT Dissertação de Mestrado Coloque aqui o título da sua dissertação Coloque aqui seu nome Uberaba
KIT DE NORMAS GRAFICAS
KIT DE NORMAS GRAFICAS ÍNDICE 1 2 3 4 5 6 7 8 9 10 11 INTRODUÇÃO CONCEÇÃO DO SELO CORES DO SELO SELO MONOCROMÁTICO REFERÊNCIAS DE COR OUTRAS CORES FUNDOS FOTOGRÁFICOS ÁREA DE PROTEÇÃO REDUÇÃO TIPOGRAFIA
Este é o Título do TCC
Faculdade do Piauí Curso de Bacharelado em Ciências da Computação Este é o Título do TCC Autores Teresina-PI, Xxxx de 20XX Autores Este é o Título do TCC Trabalho de Conclusão de Curso Monografia apresentada
Tags estruturais <!-- --> Cria um comentário <html> </html> Envolve todo um documento html <head> </head> Envolve o cabeçalho de um documento html
Tags estruturais Cria um comentário Envolve todo um documento html Envolve o cabeçalho de um documento html Fornece informações gerais sobre o documento
Manual de Normas Gráficas
Manual de Normas Gráficas A criação da identidade visual da Proxira, tem por base um sistema de aplicações coerente, organizado e bem definido. O manual de identidade visual apresentado reúne os elementos
MANUAL DE IDENTIDADE VISUAL CENTEIAS
MANUAL DE IDENTIDADE VISUAL Introdução A Marca Versões Cores Fonte Padrão Papelaria Template de Apresentações 4 5 6 7 8 9 18 ÍNDICE Este manual tem a função de estabelecer os parâmetros corretos para
Universidade Estadual de Campinas Faculdade de Tecnologia. Nome do Autor. Título da Dissertação ou Tese em Português
Universidade Estadual de Campinas Faculdade de Tecnologia Nome do Autor Título da Dissertação ou Tese em Português Limeira, 2017 Nome do Autor Título da Dissertação ou Tese em Português Dissertação apresentada
Manual de Normas Gráficas Março 2017
Manual de Normas Gráficas Março 2017 1 Introdução A Frusantos é uma empresa familiar, com aspiração comum, visão de crescimento e compromisso com o senso de legado, de geração em geração. Visão Ser empresa
Manual de Identidade
Manual de Identidade Sumário 1. Conceitos 2. Redesign 2.1. Análise Marca Atual 2.2. Processo Criativo 2.3. Justificativa 3. Logotipo 3.1. Área de Proteção 3.2. Redução Máxima 4. Cores 4.1. Aplicação Principal
PRÓ-REITORIA DE PÓS-GRADUAÇÃO E PESQUISA PROGRAMA DE INICIAÇÃO CIENTÍFICA UEPB/CNPq COTA NORMAS PARA O RELATÓRIO FINAL E PRESTAÇÃO DE CONTAS
PRÓ-REITORIA DE PÓS-GRADUAÇÃO E PESQUISA PROGRAMA DE INICIAÇÃO CIENTÍFICA UEPB/CNPq COTA 2018-2019 NORMAS PARA O RELATÓRIO FINAL E PRESTAÇÃO DE CONTAS A Pró-Reitoria de Pós-Graduação e Pesquisa da Universidade
IFDR, IP MANUAL DE NORMAS
IFDR, IP MANUAL DE NORMAS Este guia de normas representa, no seu conteúdo, o conjunto das regras básicas de utilização da marca, bem como das suas declinações e complementos visuais. A utilização dos elementos
Brandbook OUTUBRO 2017
Brandbook OUTUBRO 2017 Brandbook É um guia que faz parte da vida da Saque y Pague. Traduz verbalmente e visualmente a sua identidade e ajuda a gerenciar a comunicação entre seus diferentes públicos. Ele
Edital de Chamada para Trabalhos Acadêmicos
Edital de Chamada para Trabalhos Acadêmicos A Comissão Organizadora do VI Encontro Estudantil Regional de Relações Internacionais EERRI convida a comunidade acadêmica de relações internacionais para o
MANUAL DE NORMAS. Guia de identidade visual. Abril. 2016
MANUAL DE NORMAS Guia de identidade visual Abril. 2016 A logomarca tem como base a interação com as pessoas. É por isso que é tão importante que todos os que trabalham com a logomarca Nosso Shopping percebam
FULL BANNER CAPA 1 (728X90px)
abertura do abertura do abertura do abertura do FULL BANNER CAPA 1 SUPER BANNER CAPA 1 (960X240px) SOCIAL VÍDEOS Michel Teló fala de eliminação do The Voice Brasil que gerou burburinho nas redes Michel
LOREM IPSUM DOLOR SIT AMET
LOREM IPSUM DOLOR SIT AMET Capa com titulo da apresentação com sub-titulo ou texto de apoio, ou outras informações muito sumárias, caso necessário OMEULOGO Lorem ipsum dolor sit amet, consectetur adipiscing
[Título Ch19] Título do trabalho: Um título que reflete o conteúdo
![[Título Ch19] Título do trabalho: Um título que reflete o conteúdo](/thumbs/96/127326144.jpg "[Título Ch19] Título do trabalho: Um título que reflete o conteúdo")
[Título Ch19] Título do trabalho: Um título que reflete o conteúdo do texto [Autor Ch19] Luis Valente, Universidade do Minho, valente@ie.uminho.pt [Resumo Ch19] Resumo: Um texto curto que apresenta o trabalho
Aula 10 box Model. Prof. Paulo Cesar F. De Oliveira, BSc, PhD. 27/05/15 P C F de Oliveira
Aula 10 box Model Prof. Paulo Cesar F. De Oliveira, BSc, PhD 1 Modelo de Caixa? 2 Todo elemento é uma caixa Box Mod el 3 4 Box Mod el Área de Margem Área de Padding Área de Conteúdo 5 6 width - height
DE PRODUTOS. VISITE NOSSO SITE: FORMA DE BAURU C/ ROLO PARA PINTURA 15CM C/ ESPREMEDOR DE LARANJA C/
CATÁLOGO 2015 DE PRODUTOS FORMA DE BAURU C/1 009118 ROLO PARA PINTURA 15CM C/1 009197 ESPREMEDOR DE LARANJA C/1 009149 FURA COCO C/1 009301 Página 12 Página 12 VISITE NOSSO SITE: www.grupoufs.com.br HISTÓRIA
UNIVERSIDADE DO VALE DO RIO DOS SINOS - UNISINOS UNIDADE ACADÊMICA DE PESQUISA E PÓS-GRADUAÇÃO PROGRAMA DE PÓS-GRADUAÇÃO EM ENGENHARIA ELÉTRICA
Todo list o exemplo de comentário para auxiliar na lista de tarefas e correções.......... 13 o Alguns manuais de pacotes latex foram adicionados na pasta manuals......... 13 o Procure se informar a respeito
Modelo Canônico de Projeto de pesquisa com abntex2
Equipe abntex2 Modelo Canônico de Projeto de pesquisa com abntex2 Brasil 2013, v-1.7.1 Equipe abntex2 Modelo Canônico de Projeto de pesquisa com abntex2 Modelo canônico de Projeto de pesquisa em conformidade
manual de marca FAF Essência da marca
MANUAL DA MARCA Essência da marca A FAF é uma Escola que estimula seus alunos a explorar suas potencialidades e encontrar seu próprio rumo, ao invés de enquadrá-los em uma formação fechada, em um perfil
F E B A C. Exercício de Fixação 3. FACULDADE DE EDUCAÇÃO DE BACABAL FEBAC Credenciamento MEC/Portaria: 472/07 Resolução: 80/07
F E B A C FACULDADE DE EDUCAÇÃO DE BACABAL FACULDADE DE EDUCAÇÃO DE BACABAL FEBAC Credenciamento MEC/Portaria: 472/07 Resolução: 80/07 Curso: Sistemas para Internet Período: 2 o Disciplina: Fundamentos
Título UNIVERSIDADE FEDERAL DO RIO DE JANEIRO INSTITUTO DE MATEMÁTICA NOME COMPLETO ALUNO 1. Prof. Nome do orientador, M.Sc.
UNIVERSIDADE FEDERAL DO RIO DE JANEIRO INSTITUTO DE MATEMÁTICA NOME COMPLETO ALUNO 1 Título Prof. Nome do orientador, M.Sc. Orientador Prof. Nome do co-orientador, M.Sc. Co-orientador Rio de Janeiro, Janeiro
Manual de identidade visual
Manual de identidade visual Indrodução Neste manual de uso de marca, é possível encontrar todas as informações, denominações, padrões, variações, elementos e aplicações do novo sistema de identidade visual
PROPOSTA DE ISOLOGÓTIPO PARA O CONCELLO DE TEO
PROPOSTA DE ISOLOGÓTIPO PARA O CONCELLO DE TEO PROCESSO Captura de requirimentos Simbólicos - simplicidade - modernidade - proximidade - história - património - herdança Técnicos - reproducível a 1 tinta
HTML & CSS. uma introdução
HTML & CSS uma introdução HTML hypertext markup language CSS cascading style sheet linguagem de marcação que dá ao conteúdo estrutura e significado linguagem de estilo que dá ao conteúdo estilo e aparência
Título do artigo. 1,5cm. Nome completo do AUTOR 1. 2,5cm. 1,2cm
Título do artigo Formatação Título 1: fonte tamanho 16, negrito, Inicial maiúscula, espaçamento de 1,5 linhas, alinhado à esquerda. Nome completo do AUTOR 1 Resumo: Lorem ipsum dolor sit amet, consectetur
Brand Identity Guidelines
Brand Identity Guidelines manual PARA QUÊ? Índice 1.0 Logotipo 00 1.1 Apresentação 00 1.2 Cores Institucionais 00 1.3 Símbolo 00 1.4 Família Tipográfica 00 1.5 Redução 00 1.6 Versões 00 Este manual explica
Processamento da Informação Vetores Parte 1 (Arrays / Arranjos )
Processamento da Informação Vetores Parte 1 (Arrays / Arranjos ) Prof. Jesús P. Mena-Chalco CMCC/UFABC Q1/2017 1 Armazenar 10 inteiros em um programa... Usando variáveis: Usando um vetor: Para acessar
O PROJETO PROMOVER A IMPORTÂNCIA DE UMA EDUCAÇÃO ACOMPANHADA E INTERVENTORA PROMOVER RELAÇÕES DE INTERAÇÃO COM A NATUREZA E OS ANIMAIS
FONTE BOA O PROJETO PROMOVER A IMPORTÂNCIA DE UMA EDUCAÇÃO ACOMPANHADA E INTERVENTORA PROMOVER RELAÇÕES DE INTERAÇÃO COM A NATUREZA E OS ANIMAIS missão A MISSÃO DA FONTE BOA JUNTA DOIS UNIVERSOS DIFERENTES.
Processamento da Informação Vetores Parte 1 (Arrays / Arranjos )
Processamento da Informação Vetores Parte 1 (Arrays / Arranjos ) Prof. Jesús P. Mena-Chalco CMCC/UFABC Q2/2018 1 Armazenar 10 inteiros em um programa... Usando variáveis: Usando um vetor: Para acessar
Os slides que seguem mostram os principais comandos da linguagem HTML. Conhecer o código HTML possibilita a criação de páginas leves que contenham ape
INTRODUÇÃO A PROGRAMAÇÃO HTML Os slides que seguem mostram os principais comandos da linguagem HTML. Conhecer o código HTML possibilita a criação de páginas leves que contenham apenas os comandos necessários
Manual de Identidade do Projeto v.1.5. Implementação: Apoio Técnico: Realização:
Manual de Identidade do Projeto v.1.5 Implementação: Apoio Técnico: Realização: Introdução Este Manual de Identidade Visual do Projeto contém as regras de visibilidade para quaisquer comunicações, produtos
Word para publicações: Ênfase na NBR 14724
Word para publicações: Ênfase na NBR 14724 Tópicos Opções de autorrecuperação Layout da página Fonte Espaçamento Paginação Notas de rodapé Sumário automático Exibição Contar palavras Criar estilos Exportar
Cartão Loja. Cartão Pessoal. José Maria Diretor Administrativo. Buscamos e aviamos sua receita TELEVENDAS.
Aplicações Cartão Loja Buscamos e aviamos sua receita www.pharmasu.com.br Matriz: Av. C-159 nº 670 Filial T-9: Av. T- 9 nº 2.811 (62) 3526-4910 Farmacia Ipasgo: Av. Anhanguera nº 8517 Campinas (62) 3526-5900
Para mais informação consulte o nosso site ESPECIFICAÇÕES TÉCNICAS DO ANUÁRIO 2010
www.in-lex.pt Para mais informação consulte o nosso site ESPECIFICAÇÕES TÉCNICAS DO ANUÁRIO 2010 Data da Publicação Dimensões Papel Capa Papel Miolo Início de 2010 230 (largura) x 297 (altura) mm Mate
17/01/2016 PROGRAMAÇÃO EM AMBIENTE WEB I UM POUCO DE HISTÓRIA WWW. Tudo começou com a ARPANET; 1977 ARPANET nasce
PROGRAMAÇÃO EM AMBIENTE WEB I Prof. Esp. Fabiano Taguchi fabianotaguchi@gmail.com http://fabianotaguchi.wordpress.com UM POUCO DE HISTÓRIA Tudo começou com a ARPANET; 1977 ARPANET nasce 1987 Das universidades,
MANUAL DE IDENTIDADE VISUAL
MANUAL DE IDENTIDADE VISUAL CCDRC comissão de coordenação e desenvolvimento regional do centro Comissão de Coordenação e Desenvolvimento Regional do Centro Rua Bernardim Ribeiro, 80. 3000-069 Coimbra,
Este exercício será parecido com a montagem de um projeto real, onde trabalhamos com vários arquivos XHTML e um único arquivo CSS.
Este exercício será parecido com a montagem de um projeto real, onde trabalhamos com vários arquivos XHTML e um único arquivo CSS. 1) Crie uma pasta chamada com_estilo e salve dentro dela os arquivos obrigado.html
A C R A M A L D A U N A
MANUAL DA MARCA BRIEFING & PROCESSO CRIATIVO 01 CONCEITO E CONSTRUÇÃO DA MARCA 02 GRADE 04 PALETA DE CORES 05 APLICAÇÕES MONOCROMÁTICAS 05 APLICAÇÕES 06 CRÉDITOS 07 01 BRIEFING & PROCESSO CRIATIVO BRIEFING...
Monografia Índice Completo
Monografia Definição: dissertação a respeito de um assunto único; estudo minucioso a fim de esgotar determinado tema relativamente restrito. Monografia é uma dissertação sobre um ponto particular de uma
Fulano de Tal. Exemplo de livro produzido com. abntex2 v-1.9.7
Fulano de Tal Exemplo de livro produzido com abntex2 Publicações Acadêmicas Ltda. abntex2 v-1.9.7 Fulano de Tal Exemplo de livro produzido com abntex2 Publicações Acadêmicas Ltda. abntex2 v-1.9.7 2017
Apresentação Manual de Identidade Visual
Apresentação... 3 Elementos Estruturais... 5 Sistema modular... 7 Construção do Símbolo... 8 Tipograma... 9 Comportamento Símbolo/Tipograma... 10 Assinaturas... 11 Área de Não-Interferência... 12 Tipografia...
Câmara Municipal de Vagos Normas Gráficas
01 Índice Introdução # 3 Marca # 4 Logótipo # 5 Símbolo # 6 Construção Identidade # 7 Versões # 8-9 - 10 Arquitetura Marca # 11 Identidade Inglês # 12 Identidade Espanhol # 13 Área de proteção # 14 Dimensões
XI MOSTRA ACADÊMICA DE ENFERMAGEM DA UFC A Integralidade no cuidado em saúde EDITAL 001/2019
UNIVERSIDADE FEDERAL DO CEARÁ FACULDADE DE FARMÁCIA, ODONTOLOGIA E ENFERMAGEM - FFOE DEPARTAMENTO DE ENFERMAGEM PROGRAMA DE EDUCAÇÃO TUTORIAL - PET ENFERMAGEM UFC XI MOSTRA ACADÊMICA DE ENFERMAGEM DA UFC
Modelo Canônico de Trabalho Acadêmico com abntex2
Equipe abntex2 Modelo Canônico de Trabalho Acadêmico com abntex2 Brasil 2013, v-1.7.1 Equipe abntex2 Modelo Canônico de Trabalho Acadêmico com abntex2 Modelo canônico de trabalho monográfico acadêmico
PROGRAMAÇÃO EM AMBIENTE WEB I
PROGRAMAÇÃO EM AMBIENTE WEB I Prof. Esp. Fabiano Taguchi fabianotaguchi@gmail.com http://fabianotaguchi.wordpress.com UM POUCO DE HISTÓRIA Tudo começou com a ARPANET; 1977 ARPANET nasce 1987 Das universidades,
REGULAMENTO GERAL I JORNADA CIENTÍFICA DA EMBRAPA PESCA E AQUICULTURA
REGULAMENTO GERAL I JORNADA CIENTÍFICA DA EMBRAPA PESCA E AQUICULTURA A I Jornada Científica da Embrapa Pesca e Aquicultura acontecerá no dia 21 de outubro de 2016, na sede da Embrapa Pesca e Aquicultura,
Fique por dentro das nossas novidades
Index Área de acesso INSTITUCIONAL PRODUTOS DOWNLOAD CONTATO RH IMPRENSA 1 2 3 4 5 6 Fique por dentro das nossas novidades Política de Venda Onde comprar nosso produto Nova Medalha Conheça a nova medalha
Normas de estilo para teses de doutoramento 2013
1 Normas de estilo para teses de doutoramento 2013 Índice Introdução... 3 I. Conteúdo geral e organização... 3 1.1. Ordem... 3 1.º A página de rosto da tese... 3 2.º Página em branco... 3 3.º Repete a
CSS EXTERNO. <head> <link href="estilo.css" type="text/css" rel="stylesheet" /> </head>
CSS DDW CSS EXTERNO O CSS é um arquivo que visa personalizar o modo como seu HTML aparece para o usuário. Ele deve ser chamado dentro da tag no topo do site.
Programação Web Aula 2 XHTML/CSS/XML
Programação Web Aula 2 XHTML/CSS/XML Departamento de Informática UFPR 17 de Fevereiro de 2014 1 Histórico 2 Funcionamento 3 Atributos 4 HTML5 Estrutura de uma arquivo HTML5 Validação Tags básicas Seleção
MARCA BRAGANÇA MANUAL DE NORMAS GRÁFICAS NOVEMBRO 2014
MARCA BRAGANÇA MANUAL DE NORMAS GRÁFICAS NOVEMBRO 2014 INTRODUÇÃO 2 MANUAL DE NORMAS GRÁFICAS BEM-VINDO ao Manual de Normas Gráficas da Marca de Bragança. Dada a importância que tem a imagem gráfica na
MANUAL DE USO DA MARCA E IDENTIDADE VISUAL
MANUAL DE USO DA MARCA E IDENTIDADE VISUAL manual PARA QUÊ? Este manual explica como utilizar a marca Marchesoni. Por marca não entendemos apenas o logotipo, mas todo o material e as ideias que se relacionam
futuretransport O portal que nasceu digital para um mundo digital midiakit
O portal que nasceu digital para um mundo digital midiakit Portal de notícias de transportes Transport web magazine O que é notícia hoje e o que será notícia amanhã Com o advento de novas tecnologias,
COMO FAZER TRABALHOS
Índice Como fazer trabalhos... 3 Trabalho escrito... 6 Estrutura... 6 Capa... 6 Página de Rosto... 7 Índice... 7 Introdução... 9 Corpo do trabalho... 9 Conclusão... 10 Anexos... 10 Bibliografia... 10 Apresentação
Vamos ver como fica no código HTML e CSS na Listagem 1 abaixo:
Título: Alinhamento Central com CSS Descrição: Neste artigo serão mostrados os atributos e recursos necessários para alinhamentos de elementos inscritos no HTML, que no caso é o CSS. Login: alcideswenner
MELHOR TURISMO2020. Manual de Normas Gráficas ESTE MANUAL ESTABELECE AS NORMAS DE UTILIZAÇÃO DA MARCA.
MELHOR Manual de Normas Gráficas ESTE MANUAL ESTABELECE AS NORMAS DE UTILIZAÇÃO DA MARCA. by ESTE MANUAL É UM INSTRUMENTO DE TRABALHO, ILUSTRANDO E DEFININDO AS UTILIZAÇÕES DA IDENTIDADE GRÁFICA E ESCLARECENDO
A A. Caixas. Prof.: Ivan R. Pagnossin. Tutora: Juliana Giordano. Largura. Altura. Altura total. Linha-base. Profundidade. Ponto-de-referência
Prof.: Ivan R. Pagnossin Tutora: Juliana Giordano Coordenadoria de Tecnologia da Informação Centro de Ensino e Pesquisa Aplicada Definição e dimensões Largura Altura Profundidade g Altura total Linha-base
Desenvolvimento Web. HTML 5 Parte I. Prof. Vicente Paulo de Camargo
Parte I Prof. Vicente Paulo de Camargo Páginas com podem ser desenvolvidas com editor de texto simples Existem, no entanto, alguns editores interessantes, que facilitam a edição de páginas É o caso de
Normas para apresentação e elaboração de Trabalhos Finais de Licenciatura e Mestrado
Normas para apresentação e elaboração de Trabalhos Finais de Licenciatura e Mestrado Normas para apresentação e elaboração dos Trabalhos Finais Nota prévia: As normas agora aprovadas devem ser entendidas
ANEXO DO CONCURSO LITERÁRIO INTERNACIONAL. A Primeira Conferência
ANEXO DO CONCURSO LITERÁRIO INTERNACIONAL A Primeira Conferência (Capa título do trabalho) Emmanuel Bailly x 1 2 1.- Curriculum Vitae do Autor 2.- Ficha de Inscrição do Autor 2.1.- Dados pessoais: Nome:
Introdução. Este manual de identidade define um conjunto de regras e recomendações que visam garantir a utilização e aplicação correcta da marca Keep.
BRAND GUIDELINES Introdução Este manual de identidade define um conjunto de regras e recomendações que visam garantir a utilização e aplicação correcta da marca Keep. A identidade visual Keep deverá ser
Revista Universitária de Comunicação e Multimédia Número 1/bimestral/Abril/2010/UTAD/gratuita
Revista Universitária de Comunicação e Multimédia Número 1/bimestral/Abril/2010/UTAD/gratuita Concursos Empregos Proxima edição/fi cha técnica 19 Prêmio Design MCB http://www.mcb.sp.gov.br web designer
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE II
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE II Prof. Dr. Daniel Caetano 2012-1 Objetivos Apresentar o CSS como ferramenta de layout de página Capacitar para o posicionamento de elementos com
Algoritmos e Estruturas de Dados I Aula 05: Métodos simples de ordenação (bogo Sort, selection Sort, insertion Sort, bubble Sort)
Algoritmos e Estruturas de Dados I Aula 05: Métodos simples de ordenação (bogo Sort, selection Sort, insertion Sort, bubble Sort) Prof. Jesús P. Mena-Chalco 1Q-2016 1 Ordenação Ordenar corresponde ao processo
manual básico de aplicação do logo
manual básico de aplicação do logo Olá, Este é o manual prático de aplicação do logo Bradesco. Ao seguir as regras e dicas deste guia, você ajudará a construir e fortalecer a marca. Contamos com você!
Nome do Autor Sobrenome
Programa de Pós Graduação em Instrumentação, Controle e Automação de Processos de Mineração - PROFICAM Universidade Federal de Ouro Preto - Escola de Minas Associação Instituto Tecnológico Vale - ITV Projeto