Curso de Análise e Desenvolvimento de Sistemas (ADS)
Unidade Curricular: Webdesign Professora: Jéssica Zanelato Soares Conteúdo ● Manipulação de imagens; ● CSS - Folhas de Estilo. Manipulação de imagens - GIMP ● Faça o download da imagem do botão que está no AVA ● Abra o GIMP - ferramenta para edição de imagens ○ Abra a imagem Manipulação de imagens - GIMP ● No canto direito, você vai ver as camadas que fazem parte desta imagem (apenas uma) ● Clique com o botão direito e selecione adicionar canal alfa, o que permite trabalharmos com fundo transparente Manipulação de imagens - GIMP ● No canto superior esquerdo, em ferramentas, selecione a varinha mágica ● Depois clique na imagem, selecionando o fundo branco Manipulação de imagens - GIMP ● Para aumentar a precisão da remoção do fundo branco, clique em “Selecionar” > “Aumentar”. 1px é o suficiente neste caso. Clique em OK. Manipulação de imagens - GIMP ● No teclado pressione delete, o fundo branco deverá sumir. Manipulação de imagens - GIMP ● Vamos exportar nossa imagem como PNG para poder utilizar posteriormente. CSS ● CSS: Cascading Style Sheeets (Folhas de Estilo em Cascata); ● CSS define como os elementos HTML serão exibidos na tela; ● CSS controla o layout de diversas páginas ao mesmo tempo ○ No HTML 3.2 a tag <font> surgiu e logo se tornou uma dor de cabeça para os desenvolvedores, pois as definições precisavam ser copiadas para cada página.
● São armazenados em arquivos externos .css.
CSS - Regras ● CSS cria regras aos elementos HTML; ● Utilizamos no header a TAG style para criar nossas folhas de estilo; ● Uma regra contém duas partes: seletor e declaração. CSS - Regras CSS - Google Fonts CSS - Regras ● Podemos especificar vários atributos para vários elementos; ● No exemplo abaixo para as TAGS h1, h2 e h3 definimos a fonte como arial e cor da fonte como blue. CSS ● Para melhor organizar nosso site, podemos inserir as folhas de estilo em um arquivo separado do HTML; ● Para chamar o arquivo CSS na página adicionamos o seguinte comando: ● <link href=“css/nome_arquivo.css” type=“text/css” rel=“stylesheet”/> ■ HREF: arquivo do tipo css; ■ Type: especifica o tipo de documento; ■ Rel: especifica a relação do arquivo HTML com o CSS. CSS CSS - Seletores Seletor Significado Exemplo
Seletor Universal Aplica-se a todas as *{}
TAGs Seleciona todos os elementos da página
Seletor de Texto Seleciona TAGs pelo tipo. h1, h2, h3 {}
Seleciona as TAGs h1, h2 e h3.
Seletor de Classe Seleciona uma TAG cujo o .note{}
atributo class tem o valor Seleciona qualquer TAG cujo atributo class especificado. tenha o valor note.
p.note{} Seleciona todos os parágrafos cujo o atributo class esteja especificado como note
Seletor de ID Seleciona uma TAG cujo #introducao{}
atributo id tem o valor Seleciona a TAG cujo o atributo id tem o valor “introducao”. especificado. CSS - Seletores Seletor Significado Exemplo
Seletor de Filho Seleciona um elemento li>a{}
que é filho direto de outro. Seleciona quaisquer elementos <a> que são filhos de um elemento <li>. Mas os outros elementos <a> não são afetados.
Seletor de Descendente Seleciona um elemento descendente p a {}
de outro elemento que é especificado. Seleciona quaisquer elementos <a> que residem dentro de um elemento <p>.
Seletor de Irmão Adjacente Seleciona um elemento que é o irmão h1 + p {}
próximo de outro. Seleciona o primeiro elemento <p> depois de qualquer elemento <h1>.
Seletor de Irmão Geral Seleciona um elemento que é um h1~p {}
irmão de outro, embora ele não precise Se houver dois elementos <p> que fossem irmãos de um ser o elemento diretamente elemento <h1>, essa regra se aplica aos dois <p>. precedente. CSS - index.html CSS - estilo.css CSS - visualização no navegador Resolvendo com CSS o exercício 3 da aula 3 ● Vamos criar uma página para vender tênis online; ● Nesta página criaremos uma tabela que contenha os campos imagem, nome e preço. HTML CSS Exercício de Fixação ● Crie uma página de contato de funcionários; ● Nesta página utilize uma tabela sem borda e com cores nas linhas alternadas; ● Os campos da tabela são nome, cidade e contato. HTML CSS Exercício de Fixação ● Crie uma página web para venda de livros online; ● A página deverá conter pelo menos 5 livros; ● Deve conter: imagem, título clicável, preço e descrição; ● Exemplos:
