Carregar apresentação
A apresentação está carregando. Por favor, espere
1
CSS ETEC Vasco Antônio Venchiarutti - Extensão na EE A. S. Gandra Professor: Robson / Madureira Disciplina: Desenvolvimento e Design de Web Sites II Turma: 1º M1 2015
2
Agenda Introdução; Website Layouts; CSS; Referências. 2
3
Website Layouts A maioria dos sites têm colocado o seu conteúdo em várias colunas; Ex.: Formatado como uma revista ou jornal; Várias colunas são criadas usando ou elementos; CSS são usados para posicionar elementos, ou para criar fundos ou olhar colorido para as páginas; Mesmo que seja possível a criação de layouts agradáveis com tabelas HTML, as tabelas foram projetados para apresentar dados tabulares - não como uma ferramenta de layout. 3
4
Website Layouts 4
5
5 Main Title of Web Page Menu HTML CSS JavaScript Content goes here Copyright © Sua Empresa 1.html
6
O que é CSS? CSS - C ascading S tyle S heets (Folha de Estilos em Cascata); CSS é uma linguagem para estilos que define o layout de documentos HTML; Ex.: CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos, etc.; Diferença entre CSS e HTML: HTML é usado para estruturar conteúdos. CSS é usado para formatar conteúdos estruturados. 6
7
Benefícios do uso de CSS Controle do layout de vários documentos a partir de uma simples folha de estilos; Maior precisão no controle do layout; Aplicação de diferentes layouts para servir diferentes mídias (tela, impressora, etc.); Emprego de variadas, sofisticadas e avançadas técnicas de desenvolvimento. 7
8
Benefícios do uso de CSS Controle do layout de vários documentos a partir de uma simples folha de estilos; Maior precisão no controle do layout; Aplicação de diferentes layouts para servir diferentes mídias (tela, impressora, etc.); Emprego de variadas, sofisticadas e avançadas técnicas de desenvolvimento. 8
9
CSS Por exemplo queremos por uma cor de fundo vermelha para a página web: HTML: CSS: body {background-color: #FF0000;} Esquema CSS: 9
10
Método 1: In-line (o atributo style) 10 Exemplo Esta é uma página com fundo vermelho
11
Método 2: Interno (a tag style) 11 Exemplo body {background-color: #FF0000;} Esta é uma página com fundo vermelho
12
Método 3: Externo (link para uma folha de estilos) 12 Meu documento...
13
CSS index.html style.css 13 Meu documento Minha primeira folha de estilos body { background-color: #FF0000; }
14
Exemplos CSS3 Exemplo 1 (Borda) ; Exemplo 2 (Perspectiva); Exemplo 3 (Efeito de sombra); Exemplo 4 (Animação). 14
15
Exercício 1 15 index.html Aula DDW I Texto style.css body { background-color: #FFCC66; background-image: url("butterfly.gif"); } h1 { color: #990000; background-color: #FC9804; }
16
Teste no seu CSS e veja o resultado: 16 ValorDescrição Background-repeat: repeat-xA imagem se repete na horizontal background-repeat: repeat-yA imagem se repete na vertical background-repeat: repeat A imagem se repete na tanto na horizontal como na vertical background-repeat: no-repeatA imagem não se repete Background-attachment: scrollA imagem rola com a página Background-attachment: fixedA imagem é fixa background-position: 2cm 2cm A imagem é posicionada a 2 cm da esquerda e 2 cm para baixo na página background-position: 50% 25% A imagem é centrada na horizontal e a um quarto (25%) para baixo na página background-position: top right A imagem é posicionada no canto superior direito da página
17
Referências HTML.NET. Tutorial CSS. Disponível em:. Acesso em: 15 ago. 2012. K19. Desenvolvimento Web com HTML, CSS e JavaScript. Disponível em:. Acesso em: 01 jul. 2013. W3C. CURSO DE CSS3. Disponível em:. Acesso em: 15 ago. 2012. W3SCHOOLS. CSS3 Tutorial. Disponível em:. Acesso em: 15 ago. 2012. 17
Apresentações semelhantes
