DESENVOLVIMENTO DE SITES
Turma:
Professor:
Aula: Pág: Data:
Anderson
9279
06 26/09/201340-48
@CSS
@Criar um layout (css) t...
@O estilo CSS permite que você retire da marcação
HTML toda a formatação (apresentação) do
documento WEB. Quem vai determi...
@controle total sobre a apresentação do site a partir de
um arquivo central;
@ agilização da manutenção de design do site;...
@ Declaração CSS é o fragmento de uma regra CSS dentro dos
colchetes { }. A declaração CSS compõe-se de duas partes: a
pro...
@As propriedades abaixo mostram as variações para as
fontes:
@• color:...................cor da fonte
@• font-family:........
@ <html>
@ <head>
@ <style type=”text/css”>
@ <!--
@ h1 {color: #FF0000;}
@ h2 {color: #00FF00;}
@ p {color: rgb(0,0,255);...
@ <html>
@ <head>
@ <style type=”text/css”>
@ <!--
@ h2 {font-family: arial, helvetica, serif;}
@ p {font-family: sans-ser...
@ <html>
@ <head>
@ <style type=”text/css”>
@ <!--
@ p {
@ font: italic small-caps bold 14px
@ “Comic Sans MS”, sans-serif...
@ <html>
@ <head>
@ <style type=”text/css”>
@ <!--
@ p {padding: 20px 40px 80px 5px;}
@ -->
@ </style>
@ </head>
@ <body>
...
@ <html>
@ <head>
@ <style type=”text/css”>
@ <!--
@ p {margin: 20px 40px 80px 5px;}
@ -->
@ </style>
@ </head>
@ <body>
@...
@USANDO DIVS
@Em HTML a tag <div> define um elemento do
tipo bloco. Um elemento bloco - ou container -
é como se fosse uma...
@Eu quero inserir uma notícia no meu site. Quero
que essa notícia tenha um título e abaixo do título
uma imagem junto com ...
@Também podemos reparar que foram usadas
duas “coisas” chamadas id e class.
@A tag <div>, em geral, não tem nenhum
signifi...
@ #noticia{
@ width: 400px;
@ font-family: arial, sans-serif;
@ }
@ .titulo{
@ font-size: 24px;
@ color: #FF0000;
@ font-w...
@O box model (modelo das caixas), em CSS,
descreve os boxes (as caixas) geradas pelos
elementos HTML. O box model, detalha...
@Um elemento pode ser ‘flutuado’ à esquerda
ou à direita com uso da propriedade float. Isto
significa que o box e seu cont...
@ Se desejamos que um texto seja posicionado em volta de uma
figura, basta flutuarmos a imagem.
@Floats podem ser usados para construir
colunas em um documento. Para criar as
colunas estruturamos as colunas no código
H...
@<div id=”column1”>
@<p>Haec disserens qua de re agatur
@et in quo causa consistat non videt...</p>
@</div>
@<div id=”colu...
@A seguir, definimos a largura de cada coluna.
Por exemplo 33% e declaramos float: left; para
cada uma das colunas:
@#column1 {
@float:left;
@width: 33%;
@}
@#column2 {
@float:left;
@width: 33%;
@}
@#column3 {
@float:left;
@width: 33%;
@}
@A propriedade clear é usada para controlar o
comportamento dos elementos que se seguem
aos elementos floats no documento....
@A regra geral é: se clear, for por exemplo
definido both para um box, a margem superior
deste box será posicionada sempre...
No Site do Cedaspy, entrar com login e senha:
Alterar a turma: 9279 Código Acesso: 123
Acessar o Provão Alunos – Setembro ...
Dream 06
Dream 06
Próximos SlideShares
Carregando em…5
×

Dream 06

342 visualizações

Publicada em

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
342
No SlideShare
0
A partir de incorporações
0
Número de incorporações
62
Ações
Compartilhamentos
0
Downloads
13
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Dream 06

  1. 1. DESENVOLVIMENTO DE SITES Turma: Professor: Aula: Pág: Data: Anderson 9279 06 26/09/201340-48 @CSS @Criar um layout (css) tableless @Atividades
  2. 2. @O estilo CSS permite que você retire da marcação HTML toda a formatação (apresentação) do documento WEB. Quem vai determinar cores, formas, tipos e tamanhos, posicionamento e em fim todo o “visual” da página são as CSS.
  3. 3. @controle total sobre a apresentação do site a partir de um arquivo central; @ agilização da manutenção de design do site; @ saída para diferentes tipos de mídia a partir de uma versão única de HTML; @ redução do tempo de carga dos documentos Web; @ elaboração de documentos consistentes com as aplicações de usuários futuras; @ aumento considerável na portabilidade dos documentos Web.
  4. 4. @ Declaração CSS é o fragmento de uma regra CSS dentro dos colchetes { }. A declaração CSS compõe-se de duas partes: a propriedade e o valor. Uma regra CSS pode conter várias declarações separadas por um ponto-e-vírgula.
  5. 5. @As propriedades abaixo mostram as variações para as fontes: @• color:...................cor da fonte @• font-family:..........tipo de fonte @• font-size:.............tamanho de fonte @• font-style:............estilo de fonte @• font-variant:.........fontes maiúsculas de menor altura @• font-weight:.........quanto mais escura a fonte é (negrito) @• font:....................maneira abreviada para todas as propriedades
  6. 6. @ <html> @ <head> @ <style type=”text/css”> @ <!-- @ h1 {color: #FF0000;} @ h2 {color: #00FF00;} @ p {color: rgb(0,0,255);} @ --> @ </style> @ </head> @ <body> @ <h1>Cabeçalho com letras vermelhas</h1> @ <h2>Cabeçalho com letras verdes</h2> @ <p>Parágrafo com letras azuis</p> @ </body> @ </html>
  7. 7. @ <html> @ <head> @ <style type=”text/css”> @ <!-- @ h2 {font-family: arial, helvetica, serif;} @ p {font-family: sans-serif;} @ --> @ </style> @ </head> @ <body> @ <h2>Família por nome: arial, helvetica, serif;</h2> @ <p>Família genérica: sans-serif;<p> @ </body> @ </html>
  8. 8. @ <html> @ <head> @ <style type=”text/css”> @ <!-- @ p { @ font: italic small-caps bold 14px @ “Comic Sans MS”, sans-serif; @ } @ --> @ </style> @ </head> @ <body> @ <p>Parágrafo em declaração única</p> @ </body> @ </html>
  9. 9. @ <html> @ <head> @ <style type=”text/css”> @ <!-- @ p {padding: 20px 40px 80px 5px;} @ --> @ </style> @ </head> @ <body> @ <p>Um espaçamento superior de 20px, @ um espaçamento direito de 40px, @ um espaçamento inferior de 80px @ e um espaçamento esquerdo de 5px</p> @ </body> @ </html>
  10. 10. @ <html> @ <head> @ <style type=”text/css”> @ <!-- @ p {margin: 20px 40px 80px 5px;} @ --> @ </style> @ </head> @ <body> @ <p>Uma margem superior de 20px, uma margem direita de 40px, @ uma margem inferior de 80px e uma margem esquerda de 5px</p> @ </body> @ </html>
  11. 11. @USANDO DIVS @Em HTML a tag <div> define um elemento do tipo bloco. Um elemento bloco - ou container - é como se fosse uma caixinha, com textos grandes e imagens. Ele se difere do elemento do tipo linha - ou inline - que é o caso da tag <span>.
  12. 12. @Eu quero inserir uma notícia no meu site. Quero que essa notícia tenha um título e abaixo do título uma imagem junto com o texto da notícia, eu poderia fazer assim: . @<div id=“notícia”> @<span class=“titulo”>Notícia de hoje</span> @<div class=“texto”> @Texto da notícia com imagem @</div> @</div>
  13. 13. @Também podemos reparar que foram usadas duas “coisas” chamadas id e class. @A tag <div>, em geral, não tem nenhum significado em HTML, é apenas um elemento do tipo bloco e só. Se for adicionado uma class ou id a ela, poderá estilizar a sua <div> através do CSS com base no nome que você deu à class ou id dessa <div>.
  14. 14. @ #noticia{ @ width: 400px; @ font-family: arial, sans-serif; @ } @ .titulo{ @ font-size: 24px; @ color: #FF0000; @ font-weight: bold; @ } @ .texto{ @ color: #CCCCCC; @ font-size: 11px; @ }
  15. 15. @O box model (modelo das caixas), em CSS, descreve os boxes (as caixas) geradas pelos elementos HTML. O box model, detalha, ainda, as opções de ajuste de margens, bordas, padding e conteúdo para cada elemento.
  16. 16. @Um elemento pode ser ‘flutuado’ à esquerda ou à direita com uso da propriedade float. Isto significa que o box e seu conteúdo são deslocados para a direita ou para a esquerda do documento (ou do bloco container).
  17. 17. @ Se desejamos que um texto seja posicionado em volta de uma figura, basta flutuarmos a imagem.
  18. 18. @Floats podem ser usados para construir colunas em um documento. Para criar as colunas estruturamos as colunas no código HTML usando <div> como mostrado a seguir:
  19. 19. @<div id=”column1”> @<p>Haec disserens qua de re agatur @et in quo causa consistat non videt...</p> @</div> @<div id=”column2”> @<p>causas naturales et antecedentes, @idciro etiam nostrarum voluntatum...</p> @</div> @<div id=”column3”> @<p>nam nihil esset in nostra @potestate si res ita se haberet...</p> @</div>
  20. 20. @A seguir, definimos a largura de cada coluna. Por exemplo 33% e declaramos float: left; para cada uma das colunas:
  21. 21. @#column1 { @float:left; @width: 33%; @} @#column2 { @float:left; @width: 33%; @} @#column3 { @float:left; @width: 33%; @}
  22. 22. @A propriedade clear é usada para controlar o comportamento dos elementos que se seguem aos elementos floats no documento. @A propriedade clear pode assumir os valores left, right, both ou none.
  23. 23. @A regra geral é: se clear, for por exemplo definido both para um box, a margem superior deste box será posicionada sempre abaixo da margem inferior dos boxes flutuados que estejam antes dele no código.
  24. 24. No Site do Cedaspy, entrar com login e senha: Alterar a turma: 9279 Código Acesso: 123 Acessar o Provão Alunos – Setembro 2013, Marcar os módulos que já foram realizados no máximo 02. Senha Provão: provaalunos Atividade prática Dreamweaver Elaborar uma página com 02 boxes utilizando texto, imagem no CSS Boas Atividades

×