CSS Exercício JCC. Comunicações Digitais e Internet, 2006/07 Jornalismo e Ciências da Comunicação, U.Porto. Sumário
|
|
|
- Marco Alencar Sales
- 5 Há anos
- Visualizações:
Transcrição
1 CSS Exercício JCC Comunicações Digitais e Internet, 2006/07 Jornalismo e Ciências da Comunicação, U.Porto Sumário Com este exercício pretende-se apresentar e experimentar o processo de implementação de um design para a web, começando no momento em que a maquete base é aprovada até à conclusão do HTML e CSS. A imagem em baixo corresponde ao que se pretende implementar. Tipicamente, a maquete é desenvolvida num programa desenho (p.e. Freehand, Photoshop, Fireworks). Identificar Estrutura Base Numa primeira fase, existe um diálogo entre o responsável pelo design (maqueta) e o responsável pela implementação em HTML e CSS. Neste diálogo é importante esclarecer questões como: qual o comportamento da estrutura face a mudanças na dimensão do
2 browser, qual a apresentação dos elementos face às interacções do utilizador (por exemplo: quando se passa com o rato sobre uma ligação), o que acontece quando o conteúdo é bastante menos (ou mais) do que o previsto. Neste caso concreto, a estrutura deve ser dependente da dimensão do browser e quando o rato passa sobre os menus, a cor de fundo é alterada para laranja. O resultado esperado pode ser visto em O passo seguinte corresponde à identificação das principais áreas que compõem o documento. É importante perceber que não existe uma solução única nesta fase. Diferentes pessoas vão chegar a diferentes soluções. A mesma maquete pode resultar em documentos HTML e CSS muito diferentes. Nesta fase, a experiência em projectos anteriores é o factor que mais influência o resultado final. A imagem seguinte ilustra uma possível identificação de áreas. Implementar a Estrutura Base em HTML Depois de terem sido identificadas as principais áreas, há uma primeira implementação do documento em HTML. Em baixo apresenta-se uma possível abordagem. Observe com atenção o documento e identifique as diversas áreas.
3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <title>licenciatura em Jornalismo e Ciências da Comunicação</title> <link rel="stylesheet" type="text/css" href="jcc.css"> </head> <body> <div class="base"> <div class="cabecalho"> <div class="logo"> <div class="up">universidade do Porto <div class="jcc">jornalismo e Ciências da Comunicação <div class="menu"> <ul> <li><a href="#">apresentação</a></li> <li><a href="#">cursos</a></li> <li><a href="#">projectos</a></li> <li><a href="#">pessoal</a></li> <li><a href="#">contactos</a></li> </ul> <br> <br> <div class="principal"> <h1>licenciatura em Jornalismo e Ciências da Comunicação</h1> <div class="submenu"> <ul> <li><a href="#">informações</a></li> <li><a href="#">plano Curricular</a></li> <li><a href="#">documentos</a></li> </ul> <div class="conteudo"> <h2>apresentação</h2> <p>o curso de Jornalismo e Ciências da Comunicação, que tem como base um protocolo assinado pelas Faculdades de Letras, Engenharia, Belas-Artes e Economia, pretende combinar uma formação em Humanísticas (Ciências Sociais) com a vertente das novas tecnologias da informação e da comunicação e as dimensões estática e gráfica.</p> <p>depois de frequentarem um tronco comum, nos dois primeiros anos, os alunos optarão, a partir do terceiro ano, por uma das seguintes especializações: <strong>jornalismo</strong>; <strong>assessoria de Comunicação</strong>; <strong>comunicação Multimédia</strong>. Pretende-se um leque vasto de saídas profissionais, das várias formas de jornalismo (escrito, radiofónico, televisão e online) aos gabinetes de imprensa e de imagem, passando pela produção de software educativo ou de materiais multimédia de todo o tipo.</p> </body> </html> No código HTML apresentado, as ligações ainda não estão definidas. Como ainda não existe uma decisão quanto aos endereços finais das páginas, é normal usar o símbolo #. Grave este documento com o nome jcc-modelo.html e veja o resultado num browser.
4 Posicionar os Principais Blocos Para posicionar os principais elementos, é comum colorir cada DIV com uma cor diferente de forma a facilitar o trabalho inicial. Assim, crie um novo documento CSS jcc.css, e defina as cores de fundo de cada bloco da seguinte forma: A cor de fundo do DIV da classe cabecalho deve ser vermelha. A cor de fundo do DIV da classe menu deve ser verde. Classe principal a amarelo. Classe submenu a azul. Classe conteudo a cinzento. Veja novamente o documento no browser. O primeiro passo corresponde à eliminação das margens associadas ao corpo do documento. Por omissão, o elemento BODY tem margens que variam de browser para browser. De forma a garantir que os elementos ficam encostados às margens laterais, é necessário eliminar estas margens. Assim, defina uma regra que coloque a zero a margem do corpo. Em seguida vamos colocar o menu na horizontal e afastado da margem lateral esquerda. Assim, faça as seguintes alterações usando CSS: Os itens da lista definida dentro da classe menu devem flutuar para a esquerda. A margem lateral esquerda da lista (não dos itens) deve ser de 250 pixels. A margem lateral direita de cada item deve ser de 30 pixels. As restantes margens devem ser zero, bem como todos os espaçamentos internos. Os itens não devem ter nenhum símbolo associado. Relativamente ao submenu, e para garantir que ele fica do lado esquerdo e com uma largura fixa, faça as seguintes alterações: O DIV deve flutuar para a esquerda e ter uma largura de 150 pixels. Cada item deve ter um espaçamento superior e inferior de 10 pixels. Os itens não devem ter nenhum símbolo associado e o texto deve estar centrado. A lista não deve ter margens nem espaçamento interno. O contorno inferior de cada item deve ser preto, sólido e com a largura de 1 pixel. Veja o documento num browser com regularidade! De forma a que o conteúdo se mantenha alinhado na vertical e não fique por baixo do submenu, é necessário definir uma margem esquerda. Assim, defina uma regra CSS que coloque a margem esquerda do DIV da classe conteudo igual a 200 pixels.
5 Observando a maquete inicial, verifica-se que a área principal tem espaços laterais. Assim, defina uma regra CSS que coloque cada margem lateral do DIV da classe principal igual a 50 pixels. Neste momento, a estrutura geral está próxima daquela apresentada na maquete. No documento CSS, remova as cores de fundo auxiliares de cada área. Depois deste passo, o código do documento CSS deve ser semelhante ao apresentado em baixo. body { margin: 0px; div.menu ul { list-style-type: none; margin: 0px; padding: 0px; margin-left: 250px; div.menu ul li { float: left; margin-right: 30px; div.submenu { float: left; width: 150px; div.submenu ul { list-style-type: none; margin: 0px; padding: 0px; div.submenu ul li { padding-top: 10px; padding-bottom: 10px; text-align: center; border-bottom: 1px solid black; div.conteudo { margin-left: 200px; div.principal { margin-left: 50px; margin-right: 50px; div.logo { margin-left: 50px; Formatações Gerais A fase seguinte corresponde à definição de formatações gerais (cores, tipos de letra, detalhes). Assim, vamos observar a maquete e alterar cada um dos elementos de forma a aproximarmos o resultado final àquela pretendido inicialmente. É importante ir acompanhando as alterações no browser.
6 Os cabeçalhos e menus do documento são apresentado em Arial. Apenas os parágrafos do corpo diferem, sendo apresentados em Georgia. Assim, definimos o corpo como sendo do tipo Arial e os parágrafos do conteúdo como sendo do tipo Georgia (não esquecer de incluir os tipos de letra alternativos). O tamanho do texto em ambos os menus (menu e submenu) deve ser 14 pixels. O cabeçalho H1 deve ser apresentado com um tamanho de 24 pixels, com um contorno inferior preto e com a cor rgb(156,154,154). A margem inferior deste cabeçalho deve ser colocada a zero. O cabeçalho H2 deve ser apresentado com um tamanho de 18 pixels e com uma cor rgb(102,96,141). Observando a maquete, constata-se que o parágrafo não se prolonga até ao final da área principal. Assim, associe uma margem direita ao parágrafo de 150 pixels. Defina também uma altura de 1.3em para cada linha do parágrafo. A cor de fundo do DIV da classe cabecalho deve ser rgb(141,140,184) e a cor de fundo do DIV da classe menu deve ser rgb(95,93,92). Na área logo, o texto relativo à UP deve ser a bold e a branco. O texto relativo à JCC deve ser a bold e de tamanho 20 pixels. O espaçamento interno superior do DIV da classe cabecalho deve ser 30 pixels. A margem superior do DIV da classe menu deve ser 30 pixels. Apresentam-se em baixo as novas regras que deverão existir após estes passos. body { margin: 0px; font-family: Arial, Helvetica, sans-serif; h1 { color: rgb(156,154,154); font-size: 24px; border-bottom: 1px solid black; margin-bottom: 0px; h2 { color: rgb(102,96,141); font-size: 20px; div.conteudo p { font-family: Georgia, "Times New Roman", Times, serif; margin-right: 150px; line-height: 1.3em; div.cabecalho { background-color: rgb(141,140,184);
7 padding-top: 30px; div.menu { background-color: rgb(95,93,92); margin-top: 30px; font-size: 14px; div.submenu { float: left; width: 150px; font-size: 14px; div.up { color: white; font-weight: bold; div.jcc { font-weight: bold; font-size: 20px; Formatar as Ligações Neste momento, a apresentação da página já se aproxima bastante daquela pretendida. A principal situação a alterar tem a ver com a apresentação das ligações. As ligações do menu devem ser apresentadas a branco, em tamanho 12 pixels, a bold e sem sublinhado. Quando o rato passa por cima destas ligações, o texto deve passar a preto e a cor de fundo a rgb(255,145,8). As ligações do submenu devem ser apresentadas a preto, a bold e sem sublinhado. Quando rato passa por cima destas ligações, a cor de fundo deve passar a rgb(255,145,8). Incluir Imagens Neste passo final vamos incluir as imagens em falta. Neste exemplo, este passo foi deixado para o final. Não é obrigatório que assim seja. Foi tomada esta opção porque, neste exemplo, as imagens não têm impacto significativo na estrutura da página. Vamos inserir 5 imagens: a imagem institucional da UP, a listagem no fundo do cabeçalho, a barra de cor do lado esquerdo do menu, a fotografia em baixo do submenu e a marca de água no final da página. Pode obter a imagem da U.Porto e a fotografia da sala de aula nos seguintes endereços. Use o Mozilla Firefox para descarregar as imagens.
8 Insira a imagem da U.Porto no HTML na zona do logótipo, antes dos DIV das classes up e jcc. Se abrir o documento num browser, verifica que a imagem ficou sobre o texto. Para que a imagem fique à esquerda, crie uma regra CSS que a faça flutuar para a esquerda. Defina também um espaçamento de 5 pixels à direita da imagem. A fotografia da sala deve ser colocada no HTML, no DIV da classe submenu, após a lista. Veja o resultado no browser. Para que o resultado fique mais próximo daquele pretendido, defina uma margem superior para a imagem de 50 pixels e um contorno de 1 pixel sólido a preto. Relativamente ao fundo do cabeçalho, use o Photoshop para produzir a imagem a utilizar. Crie uma nova imagem com 11 pixels de altura e 1 pixel de largura. Usando a Pencil Tool, pinte os 4 pixels superiores com a cor rgb(138,136,181) e os restantes com a cor rgb(141,140,184). O resultado está ilustrado na imagem seguinte (notar que a imagem está a ser vista com um zoom de 1600%). Grave esta imagem com o nome fundo.gif e altere o documento das regras CSS de forma a que esta imagem seja usada no fundo do DIV da classe cabecalho. Para alterar a cor da zona lateral esquerda da barra do menu horizontal também vamos usar uma imagem. Assim, crie uma nova imagem no Photoshop com 200 pixels de largura e 1 pixel de altura com a cor de fundo igual a rgb(102,96,141). Grave esta nova imagem com o nome menu.gif. Altere o documento CSS de forma a que esta imagem seja usada no fundo do DIV da classe menu, que seja colocado no topo esquerdo e que seja repetido na vertical (ao longo do eixo dos y).
9 Finalmente, para produzir a marca de água, crie uma nova imagem com 350 pixels de largura por 350 pixels de altura. Usando as ferramentas de desenho, faça três circunferências concêntricas. A primeira e maior com a cor rgb(231,231,231), a segunda a branco e a última e mais pequena de novo com a cor rgb(231,231,231). O resultado final deve ser próximo daquele apresentado na imagem seguinte. Grave esta imagem com o nome marca.gif e altere o documento de CSS de forma a que esta imagem seja usada no fundo do BODY, não seja repetida e seja colocada a 40 pixels para a esquerda e 400 pixels para baixo. Apresentam-se em baixo as novas regras CSS que deverão existir após estes últimos passos. body { margin: 0px; font-family: Arial, Helvetica, sans-serif; background-image: url("marca.gif"); background-position: -50px 400px; background-repeat: no-repeat; div.cabecalho { background-color: rgb(141,140,184); padding-top: 30px; background-image: url("fundo.gif"); div.menu { background-color: rgb(95,93,92);
10 margin-top: 30px; font-size: 14px; background-image: url("menu.gif"); background-position: top left; background-repeat: repeat-y; div.logo img { float: left; margin-right: 5px; div.submenu img { margin-top: 50px; border: 1px solid black; Observações Finais Apesar de nem todos os pormenores estarem concluídos, o resultado final já se aproxima bastante do pretendido inicialmente. Num projecto profissional, a fase seguinte corresponderia à conclusão de todos os detalhes e, muito importante, à verificação do resultado nos principais browsers.
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
JavaScript Exercício Comportamentos Dinâmicos
JavaScript Exercício Comportamentos Dinâmicos Comunicações Digitais e Internet, 2006/07 Jornalismo e Ciências da Comunicação, U.Porto Sumário Com este exercício pretende-se apresentar um exemplo simples
HTML 5 LINGUAGEM DE MARCAÇÃO E ESTILO - CSS - Prof. Rosemary Melo
HTML 5 LINGUAGEM DE MARCAÇÃO E ESTILO - CSS - Prof. Rosemary Melo RESUMO Linguagem de Marcação e Estilo - CSS DESCRIÇÃO Regra CSS Vinculação Inline Vinculação Incorporada Vinculação Externa TAGS seletor
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
TECNOLOGIAS WEB. Unidade 3 Linguagem de Marcação e Estilo. Luiz Leão
Luiz Leão luizleao@gmail.com http://luizleao.com Conteúdo da Unidade Cascading Style Sheet (CSS) Linguagem CSS Introdução É uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos
CSS [10] Desenvolvimento e Design de. Websites. Prof.: Ari Oliveira
![CSS [10] Desenvolvimento e Design de. Websites. Prof.: Ari Oliveira](/thumbs/68/59560005.jpg "CSS [10] Desenvolvimento e Design de. Websites. Prof.: Ari Oliveira")
Desenvolvimento e Design de Websites Prof.: Ari Oliveira Folhas de Estilo em Cascata CSS Localização dos estilos Seletores 2 Faça uma página de trabalhe conosco. Esta página deverá conter um formulário
#Trabalhando com Texto
INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RIO GRANDE DO NORTE CAMPUS SÃO GONÇALO DO AMARANTE PROGRAMAÇÃO WEB #Trabalhando com Texto Eliezio Soares elieziosoares@gmail.com Aula de Hoje Web
Comandos Extras Formatações no CSS
Comandos Extras Formatações no CSS Propriedade 'background-color': A propriedade background-color define a cor do fundo de um elemento. Propriedade 'color': A propriedade color define a cor do primeiro
Unidade 4: Introdução à Tecnologia CSS Prof. Daniel Caetano
Programação para Internet Rica 1 Unidade 4: Introdução à Tecnologia CSS Prof. Daniel Caetano Objetivo: Apresentar conceitos de introduzir o uso de Folhas de Estilo em Cascata. Bibliografia: W3, 2009; CASCADE,
Sintaxe Básica da Linguagem CSS
Sintaxe Básica da Linguagem CSS Regras - Regra CSS é uma declaração com sintaxe própria, que indica como será aplicado um estilo a um ou mais elementos HTML. Ela é composta por três partes: um seletor,
Criação de estilos CSS
Em primeiro lugar vamos inserir um parágrafo Marco Soares 1 Criação de estilos CSS Para começar, crie um site novo e uma página inicial para testes chamada index.html Vamos começar por criar alguns estilos
Exercícios Práticos HTML5 + CSS3. Profa. Flávia Pereira de Carvalho
Exercícios Práticos HTML5 + CSS3 Profa. Flávia Pereira de Carvalho Maio de 2018 1 Exemplos e Exercícios Práticos HTML5 e CSS3 1) Primeiro exemplo: 2) Seletor ID: 3) Seletor de Classe: 2 4) Também é possível
Exemplos Práticos HTML5 + CSS3. Profa. Flávia Pereira de Carvalho
Exemplos Práticos HTML5 + CSS3 Profa. Flávia Pereira de Carvalho Agosto de 2018 2 1 Exemplos Práticos HTML5 e CSS3 1) Primeiro exemplo: 2) Seletor ID: 3) Seletor de Classe: Profa. Flávia Pereira de Carvalho
Web Design Aula 16: Modelo de Caixa e propriedades de Imagem
Web Design Aula 16: Modelo de Caixa e propriedades de Imagem Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Roteiro Introdução Área de Conteúdo Enchimento Bordas Margens Caixas Propriedades
Recurso Didáctico. Dossier Técnico Pedagógico Projecto: 5742/2008/22 Acção: 5742/2008/ Formador[a]
![Recurso Didáctico. Dossier Técnico Pedagógico Projecto: 5742/2008/22 Acção: 5742/2008/ Formador[a]](/thumbs/75/71501484.jpg "Recurso Didáctico. Dossier Técnico Pedagógico Projecto: 5742/2008/22 Acção: 5742/2008/ Formador[a]")
Recurso Didáctico Formador[a] Sónia Rodrigues UFCD / UC 0793 Scripts CGI e Folhas de Estilo Data 05/05/2009 Contextualização / Objectivos Documentação de apoio Orientação Pedagógica Apontamentos de Folhas
08/11/2012. Tecnologias WEB - CSS. Professor Elisson Lobão
Tecnologias WEB - CSS Professor Elisson Lobão 1 CSS CSS(Cascade Style Sheets) são folhas de estilo que permitem controlar a aparência dos elementos HTML Vantagens: Grande liberdade de formatação Maior
CSS (Cascading Style Sheet)
CSS (Cascading Style Sheet) André Tavares da Silva andre.silva@udesc.br CSS Folha de Estilo em Cascata Mecanismo simples para adicionar estilos (fontes, cores, espaçamentos, por exemplo) aos documentos
Introdução ao HTML e às folhas de estilo (CSS)
MIEEC SIEM ano letivo 2013/14 Introdução ao HTML e às folhas de estilo (CSS) José A. Faria (jfaria@fe.up.pt) FEUP, DEIG Setembro 2013 MIEEC SIEM --- 1 --- José António Faria Introdução ao protocolo HTTP
Faculdade de Engenharia Departamento de Informática. Composição Web
Folha Prática 6: CSS OBJECTIVO: Neste laboratório iremos continuar a trabalhar com Cascade Style Sheets na formatação de uma página muito simples, que apenas contém um título e uma lista desordenada que
Introdução à Informática Escola Superior de Tecnologia - Ano Lectivo 2005/06 Prof. Bruno Silva
Introdução à Informática Escola Superior de Tecnologia - Ano Lectivo 2005/06 Prof. Bruno Silva Cascading Style Sheets - (CSS] Introdução Uma Style Sheet é um ficheiro que contém regras que dizem ao browser
Módulo 17E. Revisões de HTML. A) Noções básicas de HTML
Módulo 17E Revisões de HTML A) Noções básicas de HTML Estrutura básica de um documento Um documento HTML começa com a tag de abertura e termina com a tag de fecho . De seguida, temos a considerar
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
Modelo de formateo visual em CSS
Programação Web Modelo de formateo visual em CSS Conferencia 6 MSc. Yoenis Pantoja Zaldívar Recordando Atributos das caixas largura borde margen fundo altura recheio Resumo Tipos de posicionamento. Visualização
INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO
INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO A partir do HTML 4.01, o único modo de alterar a letra (cor, tamanho, tipo, etc.) ou o fundo (cor ou imagem) é utilizando o atributo
DIV 1 DIV 2 DIV 3 DIV 4 DIV 5
Posicionamento CSS Esquema normal ou fluxo normal é o esquema padrão de posicionamento dos boxe. Segundo as regras desse esquema, elementos de nível de bloco são colocados em sequencia vertical, dentro
Cascading Style Sheets
Cascading Style Sheets PROF. ME. HÉLIO ESPERIDIÃO CSS Cascading Style Sheets (CSS) é uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação,
INTRODUÇÃO À PROGRAMAÇÃO EXERCÍCIO DE REVISÃO
INTRODUÇÃO À PROGRAMAÇÃO EXERCÍCIO DE REVISÃO Questões de concurso 1. Na interface Web, ele é um arquivo independente do arquivo HTML no qual são declaradas propriedades e valores de estilização para os
PROGRAMAÇÃO EM AMBIENTE WEB I
PROGRAMAÇÃO EM AMBIENTE WEB I Prof. Esp. Fabiano Taguchi fabianotaguchi@gmail.com http://fabianotaguchi.wordpress.com CSS As folhas de estilo em cascata são mecanismos usados para adicionar estilos em
Teste de avaliação de frequência Parte Prática
Abaixo está uma proposta de solução para os exercícios do teste de avaliação de frequência às aulas práticas. Se tem dúvidas sobre esta resolução, fale com o seu Professor. GRUPO I HTML 1. CrieumHTMLcom3tiposdiferentesdelistasnãonumeradas.
CSS: Cascading Style Sheets (folhas de estilo) Pimentel, Morganna BSI - UNIRIO DPW
CSS: Cascading Style Sheets (folhas de estilo) Pimentel, Morganna BSI - UNIRIO DPW 2017.2 1 CSS: ementa Texto Fontes Links Ícones Listas Tabelas DPW 2017.2 2 / 18 CSS: text Definição Formatar o texto quanto
IFSC/Florianópolis - Prof. Herval Daminelli. De fontes De textos De margens De bordas De preenchimentos (padding) De fundos (background) De links
De fontes De textos De margens De bordas De preenchimentos (padding) De fundos (background) De links Propriedades básicas para fontes: color: cor da fonte font-family: tipo de fonte font-size: tamanho
HTML, CSS e JavaScript
HTML, CSS e JavaScript Contato: Site: http://professores.chapeco.ifsc.edu.br/lara/ 1 Arquivo externo Dentro da tag head: 2 Qual a dirença
SEPARAÇÃO EM: Apresentação Estrutura Comportamento
SEPARAÇÃO EM: Apresentação Estrutura Comportamento Arquitectura de Sistemas DEI-ISEP Estrutura/Apresentação/Comportamento Uma boa prática na construção de páginas web: Separação em 3 camadas: Estrutura
Prof. Erwin Alexander Uhlmann 1/7/2010. Agora vamos elaborar um menu de navegação em cascata.
AULA 4 Menu em cascata Agora vamos elaborar um menu de navegação em cascata Primeiro precisamos elaborar uma lista de possíveis links em html link11 link12
Aula 3 - Parte Final HTML e CSS
Universidade Federal do Paraná - UFPR 16 de Agosto de 2010 Div 1 Div 2 Div Div Podemos dizer que a função da tag < div > é fazer a divisao dos itens de uma pagina, isto é posicionar os layouts. Para um
1) Criar o código HTML para construir a página representada pela imagem abaixo.
1) Criar o código HTML para construir a página representada pela imagem abaixo. 2) Código HTML puro (criar arquivo index.html): brasil Motores Motores diesel para uso automotivo, veicular, marítimo,
Introdução a HTTP, HTML e CSS
MIEEC SIEM ano letivo 2014/15 Introdução a HTTP, HTML e CSS José A. Faria (jfaria@fe.up.pt) FEUP, DEGI Setembro 2014 1. Introdução ao protocolo HTTP Introdução A WEB -worldwideweb é um sistema global de
06/02/2016 PROGRAMAÇÃO EM AMBIENTE WEB I CSS UM POUCO DE HISTÓRIA
PROGRAMAÇÃO EM AMBIENTE WEB I Prof. Esp. Fabiano Taguchi fabianotaguchi@gmail.com http://fabianotaguchi.wordpress.com CSS As folhas de estilo em cascata são mecanismos usados para adicionar estilos em
Ao projeto inciado na aula anterior, faça as seguintes alterações:
Atividade 4 Ao projeto inciado na aula anterior, faça as seguintes alterações: 1. Insira uma cor de fundo na página. 2. Google fonts Se nos basearmos apenas nas fontes que o usuário terá instaladas em
Web Design - CSS. Conteúdo. - O que é CSS? - Sintaxe CSS - Como inserir CSS em HTML - Propriedades CSS
CSS Web Design - CSS Conteúdo - O que é CSS? - Sintaxe CSS - Como inserir CSS em HTML - Propriedades CSS 01 Assunto: CSS O que é CSS? CSS é a sigla para Cascading Style Sheets, que pode ser traduzida para
Roteiro de Estudos e Atividades Avaliativas HTML
Roteiro de Estudos e Atividades Avaliativas HTML Faça essa atividade de forma individual ou em dupla, faça o máximo de questões que conseguir. Pesquise na Web o significado das tags e utilize-as para alcançar
Uma regra CSS quando válida para vários seletores, estes podem ser agrupados. Exemplo: h1, h2, h3, h4, h5, h6 { color: #00FF00; }
CENTRO PASTORAL, EDUCACIONAL E ASSISTENCIAL DOM CARLOS CPEA Reconhecido de Utilidade Pública pelo Decreto No. 5.692 de 08.11.1967 FACULDADE VIZINHANÇA VALE DO IGUAÇU VIZIVALI DOIS VIZINHOS PARANÁ Criada
08/08/2011 TECNOLOGIAS WEB AULA 10 PROF. RAFAEL DIAS Objetivos: Revisar os princípios de CSS Blocos e Elementos Alinhados com CSS
TECNOLOGIAS WEB AULA 10 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD Objetivos: Revisar os princípios de CSS Blocos e Elementos Alinhados com CSS 1 SINTAXE: seletor{ propriedade: valor; Seletor: É o elemento HTML
AULA 02 Introdução (HTML, CSS e Javascript) PROGRAMAÇÃO PARA WEB Marcelo Henrique dos Santos
AULA 02 Introdução (HTML, CSS e Javascript) Mestrado em Educação (em andamento) MBA em Negócios em Mídias Digitais MBA em Marketing e Vendas Especialista em games : Produção e Programação Bacharel em Sistema
Cascading: Style Sheet
André Kawamoto 2010 O que é CSS Cascading: Múltiplos estilos podem se sobrepor para especificar uma variedade de estilos desde um website inteiro até um único elemento. Qual estilo é aplicado diz respeito
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.
Módulo 17E. Revisões de HTML. A) Noções básicas de HTML (cont.)
Módulo 17E Revisões de HTML A) Noções básicas de HTML (cont.) Inserção de Imagens A inserção de imagens em documentos HTML é feita através da tag (que não tem tag de fecho). A indicação do local
MODELO DE CAIXA (BOX MODEL)
Programação Web MODELO DE CAIXA (BOX MODEL) Conferencia 5 MSc. Yoenis Pantoja Zaldívar MODELO DE CAIXA (BOX MODEL) ( ) comportamento de CSS que provoca que todos os elementos incluidos numa página HTML
Estilo em Aplicações Hipermídia na Web
SCC0265 Sistemas Interativos Web Estilo em Aplicações Hipermídia na Web Renata Pontin M. Fortes (renata@icmc.usp.br) PAE: Willian Watanabe (watinha@gmail.com) Instituto de Ciências Matemáticas e de Computação
Desenvolvimento de Aplicações para Internet
Desenvolvimento de Aplicações para Internet CSS Celso Olivete Júnior olivete@fct.unesp.br HTML Formatando o documento... Formulário Responsável por fazer a interação entre os dados fornecidos pelo usuário
Criando estilos. Css. Cada estilo que você cria é definido como uma regra CSS. Cada regra deve-se utilizar a seguinte sintaxe:
Css CSS (Style Sheets Cascating - Folhas de Estilo em Cascata) é um estilo criado para melhorar a formatação de textos, imagens, links, tabelas, formulários e etc das suas páginas HTML. o CSS também facilita
CSS Cascading Style Sheets (Folhas de Estilo em Cascata)
CSS Cascading Style Sheets (Folhas de Estilo em Cascata) Instituto Federal de Educação, Ciência e Tecnologia do Triângulo Mineiro Prof. Edwar Saliba Júnior 1 Parte I CSS Basic 2 CSS Determina como elementos
Faculdade de Engenharia Departamento de Informática. Composição Web
Folha Prática 5 : CSS OBJECTIVO: O objetivo desta ficha é familiarizar-se com as folhas de estilos encadeados (Cascade Style Sheets CSS). RECOMENDAÇÕES: Sempre que necessário, procure informação adicional
Síntese da aula anterior
Síntese da aula anterior Na última aula, aprendemos a utilizar em html: Tabelas Hiperligações Foi também disponibilizado um formulário de ajuda em html com as tags principais Sítio da aula anterior: http://www.marcosoares.com/aia/11/aula_2010_04_16/
Cascading Style Sheets CSS
Cascading Style Sheets CSS Sistemas de Informação André Monteiro de Oliveira Restivo E-mail: andre.restivo@fe.up.pt URL: www.fe.up.pt/~arestivo/aulas/sinf André Restivo SINF 2003/2004 CSS: 1 CSS: O que
Guia de Referência CSS Volume 1: Parâmetros Básicos Prof. Daniel Caetano
Programação Web 1 Guia de Referência CSS Volume 1: Parâmetros Básicos Prof. Daniel Caetano Objetivo: Apresentar os parâmetros básicos que podem ser modificados com a tecnologia CSS. Bibliografia: W3, 2009;
20/02/2014. <HTML> Introdução </HTML> Web
Introdução 1 Web 2 1 Web 3 Web 4 2 Web 5 Browsers 6 3 Editores 7 Editores 8 4 Aula Teórica-prática Etiquetas (tags) base Etiqueta principal e que deve abranger todo o código;
Qual a razão do termo cascata na terminologia CSS? A forma como as regras de estilo são aplicadas obedece a 3 princípios básicos: herança,
Qual a razão do termo cascata na terminologia CSS? A forma como as regras de estilo são aplicadas obedece a 3 princípios básicos: herança, especificidade do seletor e proximidade do elemento estilizado.
Aula 7 Html 7. Prof. Paulo Cesar F. De Oliveira, BSc, PhD. 22/04/15 P C F de Oliveira
Aula 7 Html 7 Prof. Paulo Cesar F. De Oliveira, BSc, PhD 1 Elementos Genéricos DIV SPAN 2 DIV Cria divisão ou seção no documento HTML Containers que podem ser formatados Elemento em bloco 3
HTML: Recursos Básicos e Especiais
Linguagem de Programação para Web HTML: Recursos Básicos e Especiais Prof. Mauro Lopes 1-31 34 Objetivo Iremos aqui apresentar os recursos básicos e especiais do HTML. Serão apresentados, o uso de fontes,
Tecnologias da Informação e Comunicação
Cria um diretório na tua pen de nome Web. Abre o Dreamweaver. Tecnologias da Informação e Comunicação Cria um novo ficheiro HTML. Grava o ficheiro como primeira.html. 1 Muda a vista para Split para que
HTML? HTML? HTML? HTML e HTTP. HTML e HTTP 26/02/2011
INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DA PARAÍBA CAMPUS CAMPINA GRANDE 1 2 HTML? INTERNET BÁSICA: EXTENSIBLE HYPERTEXT MARKUP LANGUAGE XHTML PARTE 1 Hypertext Markup Language (Linguagem de
<head> <title> Uso de Imagem </title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=iso " /> </head>
1. Digite a seguinte página e salve como imagem_01.html. 2. Digite a seguinte página e salve como imagem_02.html. img.imagem1 {border: solid;} img.imagem2 {border:
Escola Secundária Ferreira Dias Agualva - Sintra. Atividade 20
Atividade 20 1. Abra a base de dados Atividade 19 e guarda-a como Atividade 20. 2. Organize o painel dos objetos (à esquerda) por: Tabelas e vistas relacionadas, para que todos os objetos permaneçam junto
Web Design Aula 15: Propriedades CSS
Web Design Aula 15: Propriedades CSS Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Roteiro Propriedades de texto Propriedades de Cores Propriedades de Bordas Propriedades de Listas Cor de
IFSC/Florianópolis - prof. Herval Daminelli
Existem cinco pseudoclasses associadas ao estado de um link. São elas: a:link - define o estilo do link no estado inicial; a:visited - define o estilo do link visitado; a:hover - define o estilo do link
Aplicação para Web I. Manipulando Imagens e Links
Aplicação para Web I Manipulando Imagens e Links Antes de começar O HTML também é uma linguagem de programação, então deve ser organizada de forma identada também. Estamos aprendendo agora a linguagem
Passa a passo para construir uma página pessoal - Parte 1
Passa a passo para construir uma página pessoal - Parte 1 Quais ferramentas são necessárias? - Editor de texto básico (sem formatações): use o Bloco de Notas (não use o MS Word e WordPad) - Navegador (browser):
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
HTML. HyperText Markup Language. v Rui Menino. Tags de marcação. Referência. (Linguagem de marcação de hypertext)
HTML HyperText Markup Language (Linguagem de marcação de hypertext) Tags de marcação Referência v1.1 2008-2017 Rui Menino tags Para formatar e paginar o texto dentro de uma página html, foi definido o
CSS Cascading Style Sheets
CSS Cascading Style Sheets Linguagem de Folhas de Estilo Introdução Faz parte da versão 4 do html Utilizado para padronizar os componentes html Pode ser utilizado de três formas: Inline quando é utilizada
Permite que o conteúdo e o layout de uma página seja separado do design visual e os elementos de apresentação.
Porque usar css? Cascading Style Sheets (css) sobrepõe as características padrões dos browsers São usadas para melhorar e controlar a aparência de uma página web. Porque usar css? Permite que o conteúdo
CSS: Cascading Style Sheets (folhas de estilo) Pimentel, Morganna BSI - UNIRIO DPW
CSS: Cascading Style Sheets (folhas de estilo) Pimentel, Morganna BSI - UNIRIO 1 CSS: ementa Backgrounds Bordas Margens Padding height e width Box model outline 2 / 18 CSS: Backgrounds
CSS CASCADING STYLE SHEET
CSS CASCADING STYLE SHEET CURSO TÉCNICO DE INFORMÁTICA MODALIDADE SUBSEQÜENTE DESENVOLVIMENTO WEB 1 PROF. ALEXANDRO DOS SANTOS SILVA 1 SUMÁRIO Conceito Sintaxe básica Tipos de folhas de estilos 2 1 CSS
Desenvolvimento WEB1 Aula 03 Profa Wanessa Machado do Amaral
Desenvolvimento WEB1 Aula 03 Profa Wanessa Machado do Amaral Surgimento do CSS Na aula passada tivemos uma breve introdução ao CSS Os documentos web, cada vez mais sofisticados e extensos, estavam fugindo
SIMULADOS & TUTORIAIS
SIMULADOS & TUTORIAIS TUTORIAIS HTML Como utilizar cabeçalhos e elementos de cabeçalhos de página em HTML Copyright 2013 Todos os Direitos Reservados Jorge Eider F. da Silva Proibida a reprodução deste
Aula 4 Modelo CSS. Efeito cascata. Ordem em cascata. Declarações normais e importantes. Exemplo. Especificidade de um seletor 30/08/2013
Efeito cascata Aula 4 Modelo CSS Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Fontes das folhas de estilo Autor Usuário Agente do usuário
Posicionamento e Layout com CSS
Posicionamento e Layout com CSS Esquemas de posicionamento: absolute e relative Construção de layouts com divs e regras CSS Existem quatro tipos de posicionamento em CSS: estático, relativo, absoluto
Programação para Internet
Universidade Federal de Uberlândia Faculdade de Computação Programação para Internet Curso de Sistemas de Informação Prof. Dr. Daniel A. Furtado Módulo 3 HTML com CSS 2 CSS Cascading Style Sheets É uma
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I Prof. Dr. Daniel Caetano 2012-2 Objetivos Apresentar o CSS como substituto dos parâmetros visuais do HTML Apresentar a tag DIV Capacitar para a
Desenvolvimento Web. Professor: Bruno E. G. Gomes
Instituto Federal de Educação Ciência e Tecnologia Curso Técnico Integrado em Informática Campus Currais Novos Desenvolvimento Web CSS Conceitos básicos parte I Professor: Bruno E. G. Gomes 2013 Introdução
Criação dum site. Na última aula chegamos a esta página. Marco Soares
Criação dum site Na última aula chegamos a esta página 1 Estilo para as hiperligações do menu Vamos redefinir o aspeto da tag relacionada com as hiperligações (links) Vamos definir um estilo para a tag
Treinamento em CSS. Índice
Nível: Básico Horas: 2 Treinamento em CSS Índice Índice...1 Introdução...2 Formantando documentos...2 O que é CSS?...2 Por que utilizar CSS?...2 Separando o sistema em camadas...3 Vinculando um arquivo
Respostas - RESUMO: Questionário CSS. 1) O padrão CSS nasceu para tentar minimizar quais problemas ligados à gestão de conteúdos na web?
Faculdade de Informática de Taquara Disciplina: Autoria e Design na Internet I Profa. Flavia Pereira de Carvalho Respostas - RESUMO: Questionário CSS 1) O padrão CSS nasceu para tentar minimizar quais
CSS. Karen Frigo Busolin
CSS Karen Frigo Busolin O que é CSS? Significa Cascading Style Sheets Estilos define como mostrar elementos HTML Estilos foram adicionandos no HTML 4.0 Estilos na solução de problemas HTML nunca deve a
Aula 3. Imagens. <img src="foto.jpg" />
Aula 3 Imagens Para inserir uma imagem na página utilizamos a tag
Aplicativos móveis com HTML5
Aplicativos móveis com HTML5 Preparando o ambiente de desenvolvimento O código HTML pode ser escrito em qualquer editor de texto comum. Você pode utilizar o editor padrão do seu sistema operacional (Bloco
QUEM FEZ O TRABALHO?
Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA 1 QUEM FEZ O TRABALHO? Com as tagsaprendidas hoje, faça uma página HTML sobre você com as seguintes informações: Seu nome
Informática Parte 21 Prof. Márcio Hunecke
Escriturário Informática Parte 21 Prof. Márcio Hunecke Informática CSS 3 É no CSS (Cascading Style Sheets) que se define estilos para páginas web com efeitos de transição, imagem, e outros, que dão um
INTRODUCAO DESENVOLVIMENTO E DESIGN DE WEBSITES CSS INTRODUÇÃO E MANIPULANDO FONTES
INTRODUCAO DESENVOLVIMENTO E DESIGN DE CSS INTRODUÇÃO E MANIPULANDO FONTES Introdução CSS significa Cascading Style Sheetes (Folhas de Estilo em Cascata). Não seria ótimo fazer layouts na sua página sem
PROGRAMAÇÃO PARA INTERNET. Prof.: Jean Carlo Mendes
PROGRAMAÇÃO PARA INTERNET Prof.: Jean Carlo Mendes carlomendes@yahoo.com.br http://www.jeancarlomendes.com.br HTML Tabelas - As tabelas em HTML são criadas através das tags e - Algumas
Fábio Borges de Oliveira. HTML HyperText Markup Language
Fábio Borges de Oliveira HTML HyperText Markup Language Iniciando Código É a primeira tag de um documento HTML, nas primeiras versões dos browsers essa tag era obrigatória. Propriedade que
Posicionamento, dimensões e outros elementos de HTML5 e CSS3
R o q u e F e r n a n d o G l a u c i o D a n i e l Te c h n o E d i t i o n E d i t o r a L t d a Posicionamento, dimensões e outros elementos de HTML5 e CSS3 Posicionamento, dimensões e outros elementos
INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO
INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO CSS - Cascading Style Sheets Folhas de estilo em cascata Para cada estilo deve ser definido uma regra CSS Cada regra CSS deve utilizar
Produção de sites com Joomla! 2.5
Produção de sites com Joomla! 2.5 Trabalhando com templates Paulo César Castro Escola de Comunicação - UFRJ Sumário Mudando o template Instalando outros templates 6 Visualizar posições nos templates 8
CSS Folha de Estilo em Cascatas
O que é CSS? CSS é a abreviatura para Cascading Style Sheets. Folha de Estilos em Cascata. CSS é uma linguagem para estilos que define o layout de documentos HTML. Por exemplo, CSS controla fontes, cores,
Escola Secundária c/ 3º Ciclo de Ferreira Dias. CURSOS PROFISSIONAIS Ano Letivo 2012 / Atividade 6
Atividade 6 Nesta ficha deve executar um conjunto de instruções sobre uma folha de cálculo no computador do laboratório e submete-la para o seguinte endereço de email: tic.profissionais@gmail.com 1. A