[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.55,0:00:02.41,Default,,0000,0000,0000,,Estou criando uma \Npágina para o Hopper,
Dialogue: 0,0:00:02.41,0:00:04.55,Default,,0000,0000,0000,,um dos nossos "avatars"\Naqui no Khan Academy.
Dialogue: 0,0:00:04.55,0:00:09.81,Default,,0000,0000,0000,,Ela tem uma imagem, alguns \Nlinks legais e um parágrafo.
Dialogue: 0,0:00:11.03,0:00:15.89,Default,,0000,0000,0000,,Acho que essa imagem do Hopper \Nficaria melhor ao lado do parágrafo,
Dialogue: 0,0:00:15.89,0:00:19.85,Default,,0000,0000,0000,,então irei recortar e colar aqui embaixo.
Dialogue: 0,0:00:21.32,0:00:24.00,Default,,0000,0000,0000,,Isso não ficou tão bom quanto\Neu esperava que ficasse.
Dialogue: 0,0:00:24.00,0:00:26.36,Default,,0000,0000,0000,,O texto começa em baixo da imagem.
Dialogue: 0,0:00:26.37,0:00:29.17,Default,,0000,0000,0000,,Eu esperava que o texto\Nficasse envolta da imagem,
Dialogue: 0,0:00:29.17,0:00:31.11,Default,,0000,0000,0000,,como em um jornal ou uma revista.
Dialogue: 0,0:00:31.64,0:00:34.70,Default,,0000,0000,0000,,Iremos precisar de uma nova \Npropriedade do CSS para isso: {\i1}float{\i0}.
Dialogue: 0,0:00:34.70,0:00:38.18,Default,,0000,0000,0000,,É uma maneira de flutuar dentro ou\Nao redor de outros elementos,
Dialogue: 0,0:00:38.18,0:00:40.58,Default,,0000,0000,0000,,e é perfeito para envolver \Na imagem com o texto.
Dialogue: 0,0:00:40.85,0:00:45.37,Default,,0000,0000,0000,,Então nós vamos em cima para \Nnossa regra {\i1}pic{\i0}, e dizemos: {\i1}float{\i0}.
Dialogue: 0,0:00:45.37,0:00:48.56,Default,,0000,0000,0000,,Para o valor, precisamos decidir se\Nqueremos que a imagem flutue
Dialogue: 0,0:00:48.56,0:00:50.69,Default,,0000,0000,0000,,para o lado esquerdo \Nou para o lado direito.
Dialogue: 0,0:00:51.06,0:00:53.01,Default,,0000,0000,0000,,Vamos tentar para a esquerda.
Dialogue: 0,0:00:53.01,0:00:55.17,Default,,0000,0000,0000,,Ótimo. Perfeito.
Dialogue: 0,0:00:56.56,0:00:57.79,Default,,0000,0000,0000,,Não tão perfeito,
Dialogue: 0,0:00:57.79,0:01:01.10,Default,,0000,0000,0000,,porque o texto está muito perto da imagem.
Dialogue: 0,0:01:01.10,0:01:02.97,Default,,0000,0000,0000,,Lembra qual propriedade devemos usar
Dialogue: 0,0:01:02.97,0:01:05.43,Default,,0000,0000,0000,,para separar o texto da imagem?
Dialogue: 0,0:01:05.43,0:01:08.26,Default,,0000,0000,0000,,É parte do modelo caixa, \No qual nós acabamos de aprender.
Dialogue: 0,0:01:08.26,0:01:09.55,Default,,0000,0000,0000,,{\i1}Margin{\i0}.
Dialogue: 0,0:01:09.55,0:01:11.94,Default,,0000,0000,0000,,Vamos adicionar um \Npouco de "{\i1}margin: direita{\i0}"
Dialogue: 0,0:01:11.94,0:01:14.16,Default,,0000,0000,0000,,e "{\i1}margin: baixo{\i0}" a essa imagem.
Dialogue: 0,0:01:14.16,0:01:15.100,Default,,0000,0000,0000,,para dar um espaço para isso respirar.
Dialogue: 0,0:01:20.91,0:01:22.72,Default,,0000,0000,0000,,Está muito melhor.
Dialogue: 0,0:01:23.47,0:01:26.41,Default,,0000,0000,0000,,Nós também podemos flutuar \Nelementos que não são imagens.
Dialogue: 0,0:01:27.00,0:01:29.90,Default,,0000,0000,0000,,Como, por exemplo, se quiséssemos\Numa barra lateral.
Dialogue: 0,0:01:29.90,0:01:31.49,Default,,0000,0000,0000,,E essa lista de links?
Dialogue: 0,0:01:31.49,0:01:35.77,Default,,0000,0000,0000,,Podemos pegar essa \Nlista e flutuar para a direita.
Dialogue: 0,0:01:35.77,0:01:38.93,Default,,0000,0000,0000,,Então vamos adicionar uma \Nregra para "{\i1}#hopper-links{\i0}",
Dialogue: 0,0:01:38.93,0:01:41.18,Default,,0000,0000,0000,,e flutuar isto para a direita.
Dialogue: 0,0:01:41.61,0:01:44.74,Default,,0000,0000,0000,,Está flutuando, mas ele \Nestá ocupando muita largura,
Dialogue: 0,0:01:44.74,0:01:47.13,Default,,0000,0000,0000,,mais do que eu esperava.
Dialogue: 0,0:01:47.24,0:01:51.25,Default,,0000,0000,0000,,vamos restringir a largura para 30%
Dialogue: 0,0:01:52.41,0:01:55.85,Default,,0000,0000,0000,,então isso sempre irá tomar 30% da página,
Dialogue: 0,0:01:55.85,0:01:59.07,Default,,0000,0000,0000,,e o resto da página irá completar\No resto com os 70%.
Dialogue: 0,0:01:59.07,0:02:02.70,Default,,0000,0000,0000,,Geralmente, sempre que flutuamos um \N"{\i1}div{\i0}", temos que dar uma largura.
Dialogue: 0,0:02:02.70,0:02:05.42,Default,,0000,0000,0000,,Caso o contrário, "{\i1}div{\i0}" \Ntentará tomar todo o espaço,
Dialogue: 0,0:02:05.42,0:02:07.67,Default,,0000,0000,0000,,e nada poderá envolver em torno dele.
Dialogue: 0,0:02:07.67,0:02:11.67,Default,,0000,0000,0000,,Parece que isso também precisa \Nde um pouco de "{\i1}margin: esquerda{\i0}".
Dialogue: 0,0:02:12.61,0:02:13.56,Default,,0000,0000,0000,,Pronto.
Dialogue: 0,0:02:14.71,0:02:19.07,Default,,0000,0000,0000,,Agora, note que o rodapé na parte inferior\Nda informação de contato para Hopper.
Dialogue: 0,0:02:19.07,0:02:22.74,Default,,0000,0000,0000,,Ele está fazendo essa coisa \Nestranha, sobrepondo a barra lateral.
Dialogue: 0,0:02:22.74,0:02:24.46,Default,,0000,0000,0000,,E isso é porque está "envolvendo".
Dialogue: 0,0:02:24.46,0:02:26.39,Default,,0000,0000,0000,,Não queremos que o nosso rodapé envolva, \N
Dialogue: 0,0:02:26.39,0:02:29.19,Default,,0000,0000,0000,,porém, queremos que sempre esteja na parte\Nde baixo de tudo,
Dialogue: 0,0:02:29.19,0:02:30.83,Default,,0000,0000,0000,,porque é um rodapé.
Dialogue: 0,0:02:30.100,0:02:34.32,Default,,0000,0000,0000,,Para fazer com que não envolva, \Npodemos usar a propriedade "{\i1}clear{\i0}",
Dialogue: 0,0:02:34.32,0:02:36.51,Default,,0000,0000,0000,,e colocar "{\i1}clear:both{\i0}".
Dialogue: 0,0:02:38.80,0:02:40.94,Default,,0000,0000,0000,,Poderíamos usar \N"{\i1}clear:left{\i0}" ou "{\i1}clear:right{\i0}"
Dialogue: 0,0:02:40.94,0:02:42.87,Default,,0000,0000,0000,,se apenas não quiséssemos que envolvesse
Dialogue: 0,0:02:42.87,0:02:45.15,Default,,0000,0000,0000,,elementos flutuantes da direita\Nou da esquerda.
Dialogue: 0,0:02:45.15,0:02:48.17,Default,,0000,0000,0000,,Normalmente não queremos \Nque envolva nenhum elemento flutuante,
Dialogue: 0,0:02:48.17,0:02:50.16,Default,,0000,0000,0000,,então dizemos "{\i1}clear:both{\i0}".
Dialogue: 0,0:02:50.49,0:02:52.75,Default,,0000,0000,0000,,Isso está começando a \Nparecer uma página real.
Dialogue: 0,0:02:52.75,0:02:55.48,Default,,0000,0000,0000,,Temos a área principal,\Na barra lateral, o rodapé.
Dialogue: 0,0:02:55.48,0:02:58.59,Default,,0000,0000,0000,,Na verdade, agora você \Nsabe as propriedades do CSS
Dialogue: 0,0:02:58.59,0:03:00.93,Default,,0000,0000,0000,,que a maioria dos layouts \Nque as páginas possuem.
Dialogue: 0,0:03:00.97,0:03:04.79,Default,,0000,0000,0000,,Ponha junto alguns divs com largura, float\Naltura, preenchimento, margem e clear,
Dialogue: 0,0:03:04.79,0:03:07.79,Default,,0000,0000,0000,,e todos os tipos de layouts para páginas\Nao seu alcance.
Dialogue: 0,0:03:07.79,0:03:09.00,Default,,0000,0000,0000,,Traduzido por [Gabriel Mello Fernandes]\NRevisado por [Fernando dos Reis]