-
Notifications
You must be signed in to change notification settings - Fork 0
/
layout_css_2.html
executable file
·226 lines (206 loc) · 9.43 KB
/
layout_css_2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="HTML,CSS" />
<meta name="author" content="Alexandre Gomes de Lima" />
<link href='http://fonts.googleapis.com/css?family=Inconsolata:400,700' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="estilos/aulas.css" />
<title>IFRN/DIATINF/Design Web: Layout CSS - parte 2</title>
</head>
<body>
<div id="tudo">
<header id="cabecalho">
<img src="imagens/logo_ifrn.png"
alt="IFRN"
id="logoifrn" />
<h3 class="cabecalho">
Diretoria Acadêmica de Gestão e Tecnologia da Informação
</h3>
<h3 class="cabecalho">
Disciplina de Design Web e Arquitetura da Informação
</h3>
</header>
<article id="conteudo">
<h1>Layout CSS - parte 2: layout de duas colunas</h1>
<p>
Nesta aula veremos como utilizar as propriedades CSS na criação de uma página com
duas colunas utilizando layout fixo e layout flexível. Nos dois casos, o objetivo será
deixar a página com o layout da figura abaixo:
</p>
<figure>
<img src="layout_css_parte_2/layout_final.png"
alt="Layout desejado para as áreas da página: header no topo da página, nav como coluna esquerda, article como coluna direira e todos estes dentro do div com id tudo" />
</figure>
<p>
O código HTML a seguir será a nossa marcação base:
</p>
<pre class="html">
<body>
<div id="tudo">
<header>
</header>
<article>
</article>
<nav>
</nav>
</div>
</body>
</pre>
<h2>Layout Fixo</h2>
<p>
Vamos adotar os seguintes requisitos para nossa página com layout fixo:
</p>
<ul>
<li>Página centralizada na janela do navegador.</li>
<li>Área de conteúdo com largura igual a 760px.</li>
<li>Coluna principal (elemento <span class="html">article</span>) posicionada à direita e com 560px de largura.</li>
<li>Coluna de navegação (elemento <span class="html">nav</span>) posicionada à esquerda e com 180px de largura.</li>
<li>Espaço entre as colunas igual a 20px (760px - 560px - 180px).</li>
</ul>
<figure>
<img src="layout_css_parte_2/esquema01.png"
alt="Esquema com as larguras de header, nav, article e da margem entre nav e article.">
</figure>
<p>
Aqui cabe uma observação: a propriedade <span class="html">width</span> se refere à área de conteúdo
do elemento de bloco, não incluindo margens, bordas e afastamento (<span class="html">padding</span>).
Portanto, devemos subtrair o valor de <span class="html">padding</span> desejado das larguras das
colunas. Adotando os respectivos valores de 8px e 4px para os afastamentos de
<span class="html">article</span> e <span class="html">nav</span>, teremos os seguintes
resultados:
</p>
<ul>
<li>Largura da coluna principal: 560px - (8px + 8px) = <b>544px</b></li>
<li>Largura da coluna de navegação: 180px - (4px + 4px) = <b>172px</b></li>
</ul>
<figure>
<img src="layout_css_parte_2/esquema02.png"
alt="Esquema com as larguras espaçamentos e margens.">
</figure>
<p>
Para posicionar os elementos <span class="html">article</span> e <span class="html">nav</span>
no sentido horizontal, basta utilizar a propriedade <span class="html">float</span>. Aqui, temos duas
opções: utilizar o valor <span class="html">left</span> para os dois elementos e
utilizar margens laterais para ajustar o espaço entre eles, ou usar os valores <span class="html">left</span>
para <span class="html">article</span> e <span class="html">right</span> para
<span class="html">nav</span>. Vamos utilizar a segunda opção por esta exigir uma menor
quantidade de configurações.
</p>
<p>
O código a seguir apresenta os estilos necessários ao nosso layout fixo.
O resultado pode ser visualizado no
<a target="_blank" href="layout_css_parte_2/exemplo1.html">exemplo 1</a>. Observe que a largura
dos elementos não é alterada quando a janela é redimensionada ou quando o usuário aumenta
o tamanho padrão de fonte.
</p>
<pre class="html">
#tudo{
width: 760px;
margin: auto;
padding: 0;
}
header{
background-color: silver;
}
article{
float: right;
width: 544px;
padding: 8px;
background-color: pink;
}
nav{
float: left;
width: 172px;
padding: 4px;
background-color: yellow;
}
</pre>
<h2>Layout flexível</h2>
<p>
Para migrar o exemplo para um layout flexível, teremos que adotar unidades relativas nas
larguras dos elementos. Assim, para que a página acompanhe
o redimensionamento da janela, iremos adotar medidas em porcentagem. Vamos partir das
medidas anteriores para determinar os novos valores:
</p>
<ul>
<li>Largura de <span class="html">article</span>: 544 ÷ 760 = <b>72%</b></li>
<li>Largura de <span class="html">nav</span>: 172 ÷ 760 = <b>23%</b></li>
</ul>
<p>
Também teremos que utilizar
porcentagem na largura do elemento <span class="html">#tudo</span>. No entanto, queremos evitar
colunas muito largas no caso de janelas largas e margens entre <span class="html">#tudo</span> e
a janela no caso de janelas estreitas. Para evitar as margens, podemos utilizar o valor de 100%
na largura do elemento, e para evitar as colunas largas basta adotar um valor para a propriedade
<span class="html">max-width</span>. Por tratar-se de um layout flexível, devemos adotar uma unidade
relativa para a largura máxima de <span class="html">#tudo</span>. O uso da unidade <span class="html">em</span>
garante que o elemento acompanhará o tamanho da fonte utilizada no conteúdo. Para determinar o
valor de <span class="html">max-width</span>, basta converter a largura em <span class="html">px</span>,
adotada para <span class="html">#tudo</span> no layout fixo, para <span class="html">em</span>.
Como a maioria dos navegadores adota 16px como tamanho padrão de fonte, adotaremos 16px = 1em.
Assim, a largura máxima de <span class="html">#tudo</span> será igual a 47,5em (760 ÷ 16).
</p>
<p class="lembrete">
Lembre que 1em é igual ao tamanho de fonte definido para o elemento. Portanto, se um elemento
usa um tamanho de fonte igual a 12px, este será o valor de 1em.
</p>
<p>
Para impedir que as colunas tornem-se muito estreitas, ocasionando em sobreposição ou quebra dos
blocos, vamos adotar o valor de 35em para a propriedade <span class="html">min-width</span>.
</p>
<p>
O código a seguir mostra as propriedades e os valores adotados para o nosso layout flexível.
O resultado pode ser conferido no <a target="_blank" href="layout_css_parte_2/exemplo2.html">exemplo 2</a>.
Redimensione a janela do navegador durante a visualização para observar o comportamento do
layout flexível.
</p>
<pre class="html">
#tudo{
<strong>width: 100%;
max-width: 47.5em;
min-width: 35em;</strong>
margin: auto;
padding: 0;
}
header{
background-color: silver;
}
article{
float: right;
<strong>width: 72%;</strong>
padding: 8px;
background-color: pink;
}
nav{
float: left;
<strong>width: 23%;</strong>
padding: 4px;
background-color: yellow;
}
</pre>
<h2>Exercícios</h2>
<div class="exercicios">
<p>
1) Utilize as técnicas de layout flexível para escrever uma página de acordo com o layout
exibido na figura abaixo.
</p>
<img src="layout_css_parte_2/exercicio1.png" alt="Layout desejado para o exercício 1."/>
<p>
2) Utilize as técnicas de layout fixo para escrever uma página de acordo com o layout
exibido na figura abaixo. Insira figuras nos locais das caixas com o texto IMAGEM.
</p>
<img src="layout_css_parte_2/exercicio2.png" alt="Layout desejado para o exercício 2."/>
</div>
<h2 class="referencias">Referências</h2>
<ul>
<li class="referencia">
SILVA, Maurício Samy. <em class="referencia">Construindo sites com CSS e (X)HTML: sites controlados
por folhas de estilo em cascata</em>. São Paulo: Novatec, 2008.
</li>
</ul>
</article>
</div>
</body>
</html>