Design Gráfico Introdução ao Web Design Prof° Ms. Claudio Benossi Aula 07 Introdução ao Web Design Prof° Ms. Claudio Benossi Aula 07.

Apresentação em tema: "Design Gráfico Introdução ao Web Design Prof° Ms. Claudio Benossi Aula 07 Introdução ao Web Design Prof° Ms. Claudio Benossi Aula 07."— Transcrição da apresentação:

1 Design Gráfico Introdução ao Web Design Prof° Ms. Claudio Benossi Aula 07 Introdução ao Web Design Prof° Ms. Claudio Benossi Aula 07

2 Trabalhando com Com a finalidade de desenvolvermos layouts mais complexos, precisamos discutir sobre a propriedade position. Esta propriedade possui diversos valores possíveis.

3 static.static { position: static; } o valor static é o valor padrão de todos os elementos HTML. Um elemento com position: static; não se posiciona de maneira especial, seria o mesmo que dizer que o elemento não tem posição definida ou então que um elemento com o atributo position definido seria posicionado.

4 relative.relative1 { position: relative; }.relative2 { position: relative; top: -20px; left: 20px; background-color: white; width: 500px; }

5 relative relative se comporta igualmente ao static, a menos que se adicione propriedades extras no estilo do elemento.

6 relative Definindo as propriedades top, right, bottom, e left em um elemento position:relative o ajustamos em relação à posição atual dele. Outros conteúdos não vão se ajustar para se encaixarem em qualquer espaço deixado por esse elemento.

7 fixed Um elemento fixo - fixed - é posicionado relativamente ao "viewport", isso significa que ele sempre ficará no mesmo lugar mesmo que haja rolagem na página. Assim como o relative, as propriedades top, right, bottom e left também são utilizadas.

8 fixed Um elemento fixo não deixa espaço vazio onde ele seria inserindo normalmente no documento.

9 absolute O valor absolute é o mais complicado. Este valor se comporta como o fixed, porém tendo como referência a posição do elemento relativo mais próximo de onde está contido, ao invés do viewport. Se um elemento position:absolute não possuir elementos ancestrais posicionados relativamente, ele utilizará o body como referência.

10 absolute Aqui está um simples exemplo:.relative { position: relative; width: 600px; height: 400px; }.absolute { position: absolute; top: 120px; right: 0; width: 300px; height: 200px; }

11 Trabalhando com Nosso objetivo hoje, e trabalhar com posicionamento das tags. Para isso vamos iniciar uma nova página HTML e um novo arquivo CSS. Local: c:\seu nome\aula_04 Arquivos: aula04.html Local: c:\seu nome\aula04\css Arquivos: estilo.css

12 Trabalhando com

13 Primeiro vamos criar um no HTML: Trabalhando com posicionamento<div>

14 Trabalhando com Primeiro vamos inserir uma formatação para este no arquivo CSS: ! @charset "utf-8"; /* CSS Document */ div#principal { background:#666; width:900px; height:400px; }

15 Trabalhando com Para visualizar o resultado, salve o arquivo e selecione a opção Visualizar no Navegador

16 Trabalhando com Agora vamos criar um segundo dentro do

17 Trabalhando com Agora vamos inserir formatação no segundo @charset "utf-8"; /* CSS Document */ div#principal { background:#666; width:900px; height:400px; } div#secundario { background:#3F0; width:800px; height: 120; }

18 Trabalhando com Agora vamos inserir formatação no segundo @charset "utf-8"; /* CSS Document */ div#principal { background:#666; width:900px; height:400px; } div#secundario { background:#3F0; width:800px; height: 120px; }

19 Trabalhando com

20 Agora vamos Trabalhar com POSITION para isso vamos modificar o arquivo CSS: div#principal { background:#666; width:900px; height:400px; float:right; } div#secundario { background:#3F0; width:800px; height: 120px; position:fixed; top:5px; left: 50px; }

21 Trabalhando com

22 modificar o arquivo CSS: div#principal { background:#666; width:900px; height:400px; float:right; margin-top:400px; } div#secundario { background:#3F0; width:800px; height: 120px; position:fixed; top:5px; left: 50px; }

23 Trabalhando com

24 Dessa forma é possível observar que o está fixo na página: div#principal { background:#666; width:900px; height:400px; float:right; margin-top:400px; } div#secundario { background:#3F0; width:800px; height: 120px; position:fixed; top:5px; left: 50px; }

25 Trabalhando com Agora vamos ver a POSITION RELATIVE, para isso vamos modificar o arquivo CSS: div#principal { background:#666; width:900px; height:400px; float:right; } div#secundario { background:#3F0; width:800px; height: 120px; position:relative; top:5px; left: 50px; }

26 Trabalhando com

27 Agora vamos ver a POSITION RELATIVE, para isso vamos modificar o arquivo CSS: div#principal { background:#666; width:900px; height:400px; float:right; } div#secundario { background:#3F0; width:800px; height: 120px; position:relative; top:5px; left: 50px; }

28 Trabalhando com

29 Agora vamos ver a POSITION RELATIVE, para isso vamos modificar o arquivo CSS: div#principal { background:#666; width:900px; height:400px; float:right; } div#secundario { background:#3F0; width:800px; height: 120px; position:absolute; top:5px; left: 50px; }

30 Trabalhando com

31 Resumindo: fixed: Deixa o elemento prezo “FIXO”, na posição inserida; absolute: vai fixar utilizando a posição de outro elemento; Relative: utiliza ele mesmo para o seu posicionamento.

32 Trabalhando com Para exercitar vamos desenvolver um layout:

33 Arquivo atividade.html Exemplo DIV

34 Arquivo estilo_atividade.css @charset "utf-8"; /* CSS Document */ * { margin:0; padding:0; border:0;} body { background:#000; padding:5px;} div#principal { background:#999; width:990px; margin:auto; padding:5px;}

35 Resultado:

36 Arquivo atividade.html Exemplo DIV Topo

37 Arquivo estilo_atividade.css @charset "utf-8"; /* CSS Document */ * { margin:0; padding:0; border:0;} body { background:#000; padding:5px;} div#principal { background:#999; width:990px; margin:auto; padding:5px;} div#topo { background:#333; width:990px; height:120px;}

38 Resultado:

39 Arquivo atividade.html Exemplo DIV Topo Menu

40 Arquivo estilo_atividade.css @charset "utf-8"; /* CSS Document */ * { margin:0; padding:0; border:0;} body { background:#000; padding:5px;} div#principal { background:#999; width:990px; margin:auto; padding:5px;} div#topo { background:#333; width:990px; height:120px;} div#menu { background:#333; height: 30px; margin-top: 5px;}

41 Resultado:

42 Arquivo atividade.html Exemplo DIV Topo Conteúdo

43 Arquivo estilo_atividade.css @charset "utf-8"; /* CSS Document */ * { margin:0; padding:0; border:0;} body { background:#000; padding:5px;} div#principal { background:#999; width:990px; margin:auto; padding:5px;} div#topo { background:#333; width:990px; height:120px;} div#menu { background:#333; height: 30px; margin-top: 5px;} div#conteudo { background:#333; height:400px; width:750px; margin-top:5px; margin-bottom:5px; }

44 Resultado:

45 Arquivo atividade.html Exemplo DIV Topo Conteúdo Sidebar

46 Arquivo estilo_atividade.css @charset "utf-8"; /* CSS Document */ * { margin:0; padding:0; border:0;} body { background:#000; padding:5px;} div#principal { background:#999; width:990px; margin:auto; padding:5px;} div#topo { background:#333; width:990px; height:120px;} div#menu { background:#333; height: 30px; margin-top: 5px;} div#conteudo { background:#333; height:400px; width:750px; margin-top:5px; margin-bottom:5px; } div#sidebar { background:#333; height:400px; width:235px; margin-top:5px; margin-bottom:5px; }

47 Resultado:

48 Arquivo estilo_atividade.css @charset "utf-8"; /* CSS Document */ * { margin:0; padding:0; border:0;} body { background:#000; padding:5px;} div#principal { background:#999; width:990px; margin:auto; padding:5px;} div#topo { background:#333; width:990px; height:120px;} div#menu { background:#333; height: 30px; margin-top: 5px;} div#conteudo { background:#333; height:400px; width:750px; margin-top:5px; margin-bottom:5px; float:left; } div#sidebar { background:#333; height:400px; width:235px; margin-top:5px; margin-bottom:5px; float:right;}

49 Resultado:

50 Arquivo estilo_atividade.css @charset "utf-8"; /* CSS Document */ * { margin:0; padding:0; border:0;} body { background:#000; padding:5px;} div#principal { background:#999; width:990px; height: 1000px; margin:auto; padding:5px;} div#topo { background:#333; width:990px; height:120px;} div#menu { background:#333; height: 30px; margin-top: 5px;} div#conteudo { background:#333; height:400px; width:750px; margin-top:5px; margin-bottom:5px; float:left; } div#sidebar { background:#333; height:400px; width:235px; margin-top:5px; margin-bottom:5px; float:right;}

51 Resultado:

52 Arquivo atividade.html Exemplo DIV Topo Conteúdo Sidebar Rodapé

53 Arquivo estilo_atividade.css @charset "utf-8"; /* CSS Document */ * { margin:0; padding:0; border:0;} body { background:#000; padding:5px;} div#principal { background:#999; width:990px; height: 1000px; margin:auto; padding:5px;} div#topo { background:#333; width:990px; height:120px;} div#menu { background:#333; height: 30px; margin-top: 5px;} div#conteudo { background:#333; height:400px; width:750px; margin-top:5px; margin-bottom:5px; float:left; } div#sidebar { background:#333; height:400px; width:235px; margin-top:5px; margin-bottom:5px; float:right;} div#rodape { background:#333; height:80px; clear:both; }

54 Resultado:

55 Arquivo estilo_atividade.css @charset "utf-8"; /* CSS Document */ * { margin:0; padding:0; border:0;} body { background:#000; padding:5px;} div#principal { background:#999; width:990px; height: 1000px; margin:auto; padding:5px;} div#topo { background:#333; width:990px; height:120px;} div#menu { background:#333; height: 30px; margin-top: 5px;} div#conteudo { background:#333; height:400px; width:750px; margin-top:5px; margin-bottom:5px; float:left; } div#sidebar { background:#333; height:400px; width:235px; margin-top:5px; margin-bottom:5px; float:right;} div#rodape { background:#333; height:80px; clear:both; } Excluir a Altura da Div Principal

56 Resultado:

57 Design Digital Dúvidas?