Curso de PSD para html & CSS Aula 01

HTML 1 ao 4.01
Queridos alunos, vamos começar nossa saga pelo HTML. Esta aula é composta de uma vídeo-aula, onde explico um pouco da história do HTML até chegar ao HTML 4.01 e seus detalhes. Para muitos alunos esta aula servirá como uma pequena revisão, já para outros espero esclarecer muitas dúvidas. Após o vídeo, você encontrará um texto complementar que auxiliará você a fixar o que foi apresentado em nossa vídeo-aula. Disponibilizei também a primeira parte de nossa apostila de exercícios, no formato PDF que se encontra no final desta página. As respostas dos exercícios serão revelados na próxima aula.

Quirks Mode: quando o navegador não sabe que HTML é esse
Você gostaria de ser um navegador? Eu gostaria. Se fosse para ser um Amyr Klink ou um Jaques Costeau, viajando para lugares paradisíacos desse planeta, sem dúvida seria um navegador muito feliz. Agora, navegador de internet, nem pensar! Coitado dos navegadores. Firefox, Internet Explorer, Safari e Opera que o digam. Não é fácil ter que interpretar tantos códigos fora do padrão. Hoje temos muitas páginas utilizando diversas versões de HTML misturando-se o antigo com o novo. Sem falar nos erros de marcação. Mesmo assim, o trabalho de todo navegador é exibir a página, sempre da melhor forma. Na época da guerra entre Netscape e Internet

Explorer, no final do século passado, cada empresa tratou de inventar o seu tipo de código html. Resultado: lixo. E esse lixo vem sendo utilizado até hoje, mesmo com o advento do W3C e a padronização do HTML. Muitos ficam com raiva dos coitados dos navegadores que tentam exibir essa lixarada da melhor forma mas muitas vezes não conseguem exibir do mesmo jeito que o outro navegador amigo. O correto mesmo é nós, webdesigners e programadores, deixarmos de utilizar uma série de códigos ultrapassados. Já que muitos não seguem um padrão de programação html, os navegadores precisam ter dois conjuntos de regras para exibir páginas HTML. Quando o navegador apela para as regras antigas, é ativado um processo chamado Quirks Mode. Porém, quando não é indicado a versão HTML utilizada, o navegador interpreta que aquela página pode conter várias versões de HTML e por isso entra no modo Quirks, fazendo com que certos elementos não sejam interpretados de acordo com os padrões mas de acordo com o conjunto de regras do próprio navegador. Resultado: sua página fica uma caca e então a culpa recai sobre o coitado do navegador. Por isso não se esqueça: diga ao navegador a versão de HTML que você está utilizando. Assista mais sobre isso na nossa vídeo-aula.

Sem Frescura
1. Afinal, que porcaria é essa que você chama de padrão? Calma, calma, não priemos cânico. "Padrão" ou "HTML Padrão" é o HTML que segue a risca o padrão de programação estabelecido pelo W3C . Resumindo, alguns caras se reuniram e começaram a estabelecer regras para o html. Quando burladas, a programação HTML deixa de seguir o padrão. Hoje o padrão estabelecido por essa rapaziada que formam o que chamamos de W3C, é o HTML 4.01. No próprio site do W3C você pode encontrar todas essas regras. 2. Ah, mas eu faço o HTML no Dreamweaver, fica cheio de lixo mesmo, mas e daí, aparece legal no Internet Explorer, porquê eu tenho que me importar com isso?

01 mas ao programar.01 para chegarmos ao XHTML. Não tem por onde escapar. Sem entender o HTML 4. então nem ligue para o padrão. nunca. Quando será lançado o HTML 5? Talvez. isso já é algo estabelecido e que não tem volta. Ué. 3. Hoje o novo padrão utilizado para se fazer páginas é o XHTML que veremos na próxima aula. se você quiser fazer páginas consistentes. Mas existem outros padrões que falaremos nas próximas aulas. siga o padrão estabelecido pelo W3C. ou seja. seu coração baterá forte. E como vou saber que estou criando minhas páginas utilizando o padrão? Utilizando o Validador do W3C . E o resultado disso é um navegador interpretando de uma maneira e o outro de outra maneira. Como a última versão é a 4. Vem cá. Quando você resolver visualizar sua página num celular. 4. 7. não seguir o padrão? No primeiro erro o navegador descobre e entra no método Quirks mode. 6.01 e padrão é a mesma coisa? Bem. logo ela é a padrão. na TV ou em algum Mac da vida. Sem falar no cliente. Agora. bem visualizadas em qualquer plataforma ou navegador.01? Porquê é necessário entendermos primeiro o HTML 4. Veja mais em nossa vídeo-aula. . Pois não se escreve mais páginas HTML como se escrevia antigamente. se eu bancar o engraçadinho e dizer ao navegador que a página é HTML 4.01. se você gosta de adrenalina.01 e seus padrões. aventura e adora fortes emoções. que você chamará de chato pois ele usa o Firefox. quando dizemos "html padrão" é a última versão aprovada. sua página ficará de um jeito em um e de outro jeito em outro navegador. então porquê estamos vendo HTML 4. você não irá compreender bem o XHTML.É. Quer dizer que HTML 4. 5.

Divirta-se-> Exercícios da Aula 01 XHTML – aula 2 Na aula de hoje iremos conhecer o XHTML ( Extensible Hypertext Markup Language ). correto? Mas e se isso fosse uma tag ligado a um XML sobre o assunto móveis? Como é que o navegador saberia que isso se trata de um XML e não de uma tag HTML? Por isso é necessário indicar para o navegador que tipo de XML você irá utilizar. Sim.org/1999/xhtml/ ) você irá perceber que nesse endereço se encontra todas as referências sobre o XHTML. . poderá imprimir e guardar. Ví o vídeo e não entendi direito o que é esse atributo xmlns. uma versão mais enxuta. Sem Frescura 1. Se você desejar. Dá pra me explicar direito que troço é esse? Bem. mas isso é uma URL. Por exemplo: <table> Lendo a tag acima. Na nossa vídeo-aula. com mais recursos e mais compatibilidade com inúmeros dispositivos. joguinhos e outras tarefas de fixação.Dever de casa Aqui está nosso primeiro dever de casa. Com o XML você pode criar qualquer linguagem. me vem a cabeça um rótulo. A idéia é em cada aula termos um novo PDF contendo os exercícios da aula correspondente. Se você acessar através do navegador o identificador que utilizamos no XHTML ( http://www. um nome comum de identificação. você logo pensou que se refere a um HTML. a nova geração do HTML. mas vamos lá. As respostas só serão reveladas na próxima aula. irei mostrar a transformação de um HTML em XHTML validado pelo W3C. Os exercícios são compostos de perguntas. Quando você diz identificador. não é um identificador. esse assunto é um pouco confuso mesmo.w3. 2. Depois disso só iremos trabalhar com XHTML e CSS ( que iremos conhecer na próxima aula ).

O XHTML tem que ser compatível com todos os navegadores antigos. Dever de casa Aqui está nosso segundo dever de casa com as respostas dos exercícios da primeira aula. mesmo sendo um XHTML. Portanto o item identificador (xmlns) na realidade é uma URL que informará todos os dados referentes aquela linguagem XML. com seu cachorro. do Netscape ao Internet Explorer 5. camiseta e uma chinela havaiana no pé? É. a página começa com um <html> ? Porquê se começasse com um <xhtml>. por isso não se alterou esse elemento raiz. de bermudão. 3. Porquê. todos aqueles navegadores antigos. nem tudo nessa vida é igual ao que parece. se você pegar um convite de casamento e ler "Traje: Passeio Completo" você pensa no quê? Você passeando. não é mesmo? Por exemplo. não entenderiam o que é aquilo. olhando apenas o nome jamais pensaríamos em alguém de terno e gravata. Divirta-se-> Exercícios da Aula 02 Até a próxima! . E o traje esporte então? Nunca vi ninguém jogando bola de camisa de botão e calça de brim.É.

. Com o tempo você acaba decorando por tanto. se você não é masoquista. Finalmente chegamos no tão aclamado CSS.html . Então vamos logo ao que interessa.abpsoft. então o ideal é que você adquira um livro de CSS ou então na internet mesmo encontramos boas referências. Afinal. Nas próximas aulas iremos ver isso.Aula 03 – Conhecendo o Css Conhecendo o CSS Chegou a hora da diversão. dentro de uma determinada camada div irá se comportar de uma forma diferente dos demais <p>. Podemos definí-lo como um mecanismo simples para adicionar estilos (p.ex. Aqui está uma delas: http://www.com/criacaoweb/cssguiaref. CSS significa Cascading Style Sheet. fontes. o responsável pelas cores. por exemplo. e se eu quiser fazer dois parágrafos mas cada uma com fontes diferentes? Como é que faz se só tem um <p>??? É possível sim e irei mostrar para vocês como é que isso acontece. Na nossa vídeo-aula de hoje iremos começar a entender o que é o CSS e o que ele faz. Vocês verão que podemos definir que todo parágrafo. 2. Senta que lá vem a história! Sem Frescura 1. formas e visual de um site. espaçamentos) aos documentos Web. significando em Português Folha de Estilo em Cascata. cores. Vem cá. tem uma lista de propriedades que eu posso usar num elemento? Tenho que decorar todos? Não se preocupe em decorar nada. Bruno.

Porquê eu não faço essa parada toda dentro do XHTML logo.3. Aliás. Divirta-se-> Exercícios da Aula 03 ATENÇÃO: fiz uma pequena modificação no exercício da aula 02. aguarde e confie. . porquê tenho que separar? Ao utilizar o CSS separado do XHTMl. isso irá facilitar muito la na frente. Aproveite e pegue a atualização clicando aqui. Bastará modificar o CSS para mudar o visual de todo o site. Até a próxima! . na próxima aula iremos colocar todo nosso CSS em um arquivo separado. Faltou a imagem do Astrogildo no html.) Veja também: Elementos HTML: todos os elementos HTML que você poderá alterar utilizando como um seletor CSS Tabela de Cores CSS: veja 504 cores com seus códigos hexadecimais e seus nomes oficiais que podem ser utilizados no seu CSS Caracteres Especiais: veja todas as entidades dos caracteres especiais para você utilizar em seu XHTM Dever de casa Aqui está nosso terceiro dever de casa com as respostas dos exercícios da segunda aula.

iremos ver na aula de hoje a importância de separar o CSS do XHTML e como colocá-lo em um arquivo externo. com muitas páginas. Não se esqueça que no final do valor de cada propriedade deve ser terminado com um ponto-e-vírgula.css). Cada regrinha irá fornecer um estilo para o elemento XHTML especificado. A regra é composta de um ou mais seletores acompanhados de propriedades e seus valores. Para incluir uma folha de estilo ( CSS ) dentro de uma página. Para sites maiores. Caso não deseje que algum elemento não se comporte da maneira definida em <body> basta criar uma regra específica. Senta que lá vem a história! Não se esqueça! • • • • • • • • • • • • O conteúdo presente nas CSS se chamam regras. O seletor irá apontar em qual elemento a regra será aplicada. Para adicionar classes para diferenciar elementos semelhantes. sem os sinais de < e >. Para vincular o arquivo externo CSS à sua página. basta utilizar o elemento <link>. recomenda-se utilizar uma folha de estilos dentro de um arquivo externo (.Aula 04 Conhecendo o CSS . utilizando o elemento como seletor no seu CSS. • • . basta adicionar a tag <style>. Fique atento a herança.Vamos logo ao que interessa.Parte II Dando continuidade ao assunto CSS. colocando como seletores e separando com vírgulas. Se algum estilo for adicionado ao elemento <body>. As propriedades e valores de uma regra sempre deverão vir entre chaves { }. Você pode selecionar múltiplos elementos XHTML em seu CSS. Para selecionar um elemento XHTML basta colocá-lo como seletor no CSS. todos os elementos contidos em <body> herdarão a mesma propriedade.

Divirta-se-> Exercícios da Aula 04 Até a próxima! Aula 5 Aula 05 .• • No CSS. utilize no elemento escolhido a tag "class=nomedaclasse". No XHTML.nomedaclasse" para definir a regra como uma classe. sem utilizar ponto antes do nome da classe. Dever de casa Aqui está nosso dever de casa contendo também as respostas dos exercícios da última aula.CSS: Fontes e Cores . utilize ".

Vamos logo ao que interessa. 4. A escolha é visual. Opa. o navegador irá interpretar que ali está sendo pedido uma fonte sem serifa ou serifada de acordo com o padrão do navegador. caso não haja a primeira fonte no sistema do usuário. Existe regra pra escolher entre sans-serif e serif? Tecnicamente não. a mais adequada. ele serve como lista de prioridades para a fonte. "Courier" e "New". Já "Courier New" não. Por exemplo. . iremos nos aprofundar nas propriedades de fontes e cores. eu nunca vi essa tal fonte serif e sans-serif. São apenas dois estilos de fonte. serif e sans-serif não são nomes de fonte. referentes a imagem e sentimento. serifada e não serifada. Acho que não tem no meu computador. não. Acontece que ao especificar isso no seu CSS. Por que em alguns casos vejo fontes descritas na propriedade font-family. logo é exigido que o nome completo fique entre aspas. estudando a teoria do design e da tipologia podemos notar diferenças importantes nesses dois estilos. entre aspas? Por exemplo: "Trebuchet MS"? Sempre que você for citar fontes na propriedade font-family que tenha mdois nomes. Veremos também como é formado o código hexadecimal. Senta que lá vem a história! Sem Frescura 1. Mas. bonita. Então coloco ali em font-family uma lista de fontes seguindo uma prioridade? Sim.. 2. Primeiro você coloca a que realmente você deseja que apareça. No Curso de Design Web e no Curso de Identidade Visual abordamos esse assunto.. já a segunda fonte que você for citar é a que pode substituir a primeira fonte. vem cá. 3. a fonte Arial é um nome único. você deve colocar entre aspas. é um nome composto por duas palavras. não vem acompanhado por nenhum outro nome. Porém.CSS: Fontes e Cores Dando continuidade ao assunto CSS.

Mas só falou de duas formas. 7.) 11. 109. 8. irá influenciar em tudo que está dentro dessa caixa. 0 ). isso quer dizer que mudo o tamanho de todas as fontes? Exatamente. h3 120%. Afinal. 0. pode utilizar o border-color. Por que color e não font-color? Essa propriedade corresponde a cor do primeiro plano. então ele vai mudar a cor do texto e da borda. Ambos trabalham com tamanho relativo. :) A terceira forma que é muito difícil de se ver por aí é o rgb ( 0. Imagina o body como uma caixa e os demais elementos dentro dessa caixa. No vídeo você fala em três formas de especificar cores. h4 100%. que aprendemos não só na psiicologia como também no design e comunicação visual. . Como combinar a melhor cor? A melhor harmonia? Isso é algo bem complexo para se responder em poucas linhas. 9. E quanto ao tamanho das fontes. Isso pode variar mas normalmente esse tamanho padrão é de 16px. 35 ). 10. Qual a terceira? Não falei a terceira só para você vir aqui me perguntar. h2 outro e por aí vai. Use a que você preferir. Eu prefiro a porcentagem pois estou mais habituado com ela. 90 % seria um tamanho igual a 14px. Logo. qual o tamanho padrão desses títulos? Isso vai depender do navegador mas normalmente o h1 é 200% maior que o tamanho de fonte especificado em body. sendo que se você quiser uma cor específica para a borda. . H2 é 150%. h5 90%. O professor recomenda. Se você fizesse isso. E se no body eu usar um tamanho em porcentagem? 90% por exemplo.) 6. No Curso de Design Web temos algumas aulas somente a respeito de cor. Exemplo rgb ( 299. O filho puxa ao pai. No caso. É a lei da herança. h6 60%. no caso o body. o navegador iria considerar que o tamanho da fonte deve ser 90% relativo ao tamanho padrão do navegador. Resumão!!! .5. todas as fontes de todos os elementos contidos no body irão ser alterados. Tudo que você fizer na caixa principal. Qual a diferença entre "em" e "%"? São maneiras diferentes de fazer a mesma coisa. Esse assunto diz respeito a teoria de cores. Notei que h1 tem um tamanho. se eu colocar um tamanho de fonte em body. Onde cada número corresponde a uma tonalidade de cor no padrão RGB.

verde e azul tem como resultado o preto. O uso do tamanho relativo é bom pois irá facilitar a manutenção de suas página. As CSS tem 17 cores pré-definidas incluindo black. verde e azul tem como resultado o branco. red. O uso de palavras-chave é interessante quando você deseja que o tamanho seja escalonado pelo navegador e pelo próprio usuário. são tamanhos relativos. etc). Os códigos hexadecimais possuem 6 dígitos e cada dígito pode ser de 0 a F. tamanho e estilo. em escala (em). cursiva e fantasia. podendo diminuir ou aumentar seu texto. As fontes com e sem serifa são as mais utilizadas. utilize a propriedade font-style As cores utilizadas no CSS são resultado do padrão RGB. white. large. Na listagem de fontes de font-family sempre coloque o estilo ( sansserif ou serif ) para garantir que o navegador coloque uma fonte padrão no mesmo estilo das demais. medium. A propriedade fonte-family é o conjunto de fontes que compartilham características comuns. cor. use a propriedade CSS font-weight Para texto inclinado ou itálico. As famílias de fontes são: serifa. blue e green. • • • • • • • • • • • • • . os dois segundos os tons de verde e os dois últimos os tons de azul. caso ele não encontre as outras fontes instaladas no computador do visitante. sendo portanto um tamanho relativo ao tamanho da fonte do elemento anterior. verde e azul ( Red Green Blue). Já a mistura de 0% de vermelho. Os primeiros dois dígitos representam os tons de vermelho. podendo mudar o seu tipo. você está dizendo ao navegador quantos pixels deverá ter a altura de suas letras. Existem 4 formas de especificar o tamanho das fontes: em pixels (px). utilize a propriedade text-decoration. Já em escala ( em) e porcentagem (%). Bastará mudar um valor para mudar todos os outros tamanhos de fonte especificados em seu CSS.• • • • • O uso do CSS irá facilitar sua vida no controle de tudo que diz respeito a aparência de fontes. nada mais que a mistura das cores vermelho. sem serifa. Ao especificar o tamanho da fonte em pixels. porcentagem (%) ou palavra-chave (small. Para sublinhar um texto. Para colocar seu texto em negrito. Essa é básica mas não se esqueça: a mistura de 100% de vermelho. As fontes designadas em font-family só serão vistas se os visitantes do seu site tiverem a fonte especificada instalada em seus sistemas. monoespaçada.

Senta que lá vem a história! Sem Frescura 1. Ei Bruno! Ei! Po! Qual a diferença entre margin e padding. estamos a um passo das divs e do nosso PSD.Dever de casa Aqui está nosso dever de casa contendo também as respostas dos exercícios da última aula. bordas e enchimentos. Vamos logo ao que interessa.CSS: Caixas CSS: Caixas Hoje iremos aprender mais sobre caixas. mano? . Prepare-se. margens. Divirta-se-> Exercícios da Aula 05 Até a próxima! Aula 06 .

"mano". que pode ser um texto. uma moldura normal. Estilos de Borda Agora você vai conhecer os 8 estilos de borda que você poderá usar como valor da propriedade "border-style". duas linhas apaixonadas que resolveram se "ajuntar". Este é o estilo "double". Mas aí prevalece as regras do design. imagem ou tabela. sem o uso de padding. a propriedade margin nada mais é que a margem externa. No Curso de Design Web falamos mais o porquê disso. um botão. O espaço do enchimento e da margem são transparentes. O estilo "outset" dá uma idéia de 3D. Fessô. Mas o padding é obrigatório sempre que tiver uma caixa visível graças a uma cor de fundo ou borda? Não é obrigatório. sem efeitos. só tem o tamanho mesmo. Já o "groove" parece uma ranhura. de recorte. 2. denota amadorismo. 3. logo herdará a cor do fundo do elemento que contem o margin ou padding. todo tracejado . Você irá utilizar quando quiser dar um espaço entre um elemento e outro da página. nada de texto colado em borda. uma pequena depressão. Já o estilo "dotted" parece um luminoso com luzinhas redondas O estilo "dashed" parece um picote. Este aqui é o estilo "solid". Já o padding é a margem interna ou enchimento. Será o espaço entre a borda da caixa e o conteúdo da página. ok? Somente se a sua criação exigir isso.Bem. linhazinha reta. fessô! Existe estilo pro padding e margin sem ser somente o tamanho do espaço? Não. mas texto colado em borda. Nada de pintar o espaço do enchimento ou qualquer outra firula.

. Antes iremos conhecer um outro atributo. senta que lá vem a história! Sem Frescura 1. eu vou continuar usando class pois não vi diferença entre class e id. . Se assemelha a um botão pressionado.. Ele é bem parecido com o class.O estilo "inset" é o contrário do "outset". Divirta-se-> Exercícios da Aula 06 Até a próxima! Aula 07 . obviamente. mas você entenderá a diferença entre ID e Class assistindo a nossa vídeo-aula de hoje. Ah. o ID.IDs e CSS CSS: IDs e DIVs Hoje é dia de começar a trabalhar com Divs. O "ridge" parece uma moldura de quadro Dever de casa Aqui está nosso dever de casa contendo também as respostas dos exercícios da última aula. Então senta.

inset e ridge Na CSS você poderá definir em uma linha todas as definições de enchimento. utilize a propriedade "background-image" Utilize as propriedades "background-position" e "background-repeat" para definir a posição e o comportamento de repetição da imagem do fundo. este irá aparecer por trás do conteúdo e enchimento. sempre opcionais. se você for uma pessoa desorganizada. Você poderá usar uma classe dentro de um id. Utilizar o id quando o elemento for único evitará alguns problemas. Iremos trabalhar muito com isso quando começarmos a montar o layout. então vá em frente. borda não é obrigatório. Já a borda pode ser definido em thin. O enchimento é importante para destacar o conteúdo. Para aumentar a separação das linhas de texto. criando em volta da área uma moldura transparente. Aguarde. Veremos mais sobre isso lá na frente. 2. Há oito estilos diferentes para as bordas. Posso usar uma classe dentro de um id? Pode.nomedaclasse. double. seja em cor ou imagem. dotted. Resumão ão ão ão (Caixas e IDs) • • • • • • • Para controlar a exibição dos elementos. A borda é importante para deixar claro uma separação visual do conteúdo. margem e borda ou então definílos separadamente. A margem é o espaço externo cuja finalidade é separar os elementos da página Ao utilizar fundo no elemento. borda e margem. Utilize class quando você for utilizar esta regra para muitos elementos. medium. • • • • • • • • . enchimento. as CSS o encaram sempre como caixas. principalmente quando você necessitar posicioná-lo. O conteúdo do elemento se encontra na área de conteúdo. que deseja ter seu código todo esculhambado. Toda caixa possui área de conteúdo. solid. A largura de um enchimento ou margem pode ser definido em pixels ou porcentagem. groove. Porém.É. dashed. Um exemplo: #id . nunca atrás da margem. outset. utilize a propriedade "line-height" Para utilizar imagem como fundo do elemento. thick ou em pixels.

Dever de casa Aqui está nosso dever de casa contendo também as respostas dos exercícios da última aula. onde você poderá tirar algumas dúvidas e aprender coisas novas sobre o assunto. sem necessidade de repetição. cá pra nós. tá muito feio. deixasse mais bonitinho e é isso que iremos fazer na aula de hoje. Divirta-se-> Exercícios da Aula 07 Até a próxima! Aula 08 Layout de 3 linhas e 2 colunas Vamos então começar logo o que interessa! O layout do Astrogildo. Ele me pediu que mudasse o layout. No CSS. Um id poderá ter várias classes.• • • Utilize o ID quando você for utilizar esta regra para um elemento. . Vejam a preparação de um layout com 3 linhas ( topo. você deverá identificar um id utilizando o símbolo #. Na próxima aula veremos a montagem desse layout utilizando XHTML e CSS. conteúdo e rodapé ) com duas colunas ( coluna do menu e coluna central ).

Download aqui A resolução das questões da aula 07 serão disponibilizados na aula 09 onde teremos mais exercícios em nossa apostila Até a próxima! .Dever de casa Que tal tentar recortar o layout apresentado hoje? Topa o desafio? Então faça o download do layout. tente recortar e compare com as próximas aulas onde irei recortar e montar o layout do Astrogildo.

Aula 09 .Layout 3x2 Recorte .Parte I .

Então senta.) ).ParteII Layout de 3 linhas e 2 colunas O Recorte . foi um pouco trabalhoso. senta que lá vem a história! . mãos a obra! Então senta. Então vamos lá.Parte II Agora vamos continuar o que começamos na última aula.Layout 3x2 Recorte . ficando bem visualizado no Firefox. Iremos aprender também como deixar a div flutuando pela página. mostrando como colocar o logotipo do site vazado e como criar uma folha de estilo destinado a navegadores que nos dão um certo "trabalho" ( é. Divirta-se-> Exercícios da Aula 09 Até a próxima! Aula 10 .Parte I Êêêê! Chegou o grande dia! A hora de recortar o layout do nosso querido Astrogildo! Bem. senta que lá vem a história! Dever de casa Aqui está nosso dever de casa contendo também as respostas dos exercícios da última aula. estou falando do Internet Explorer mesmo . procurando resolver a incompatibilidade com Internet Explorer.Layout de 3 linhas e 2 colunas O Recorte . Hoje iremos aprender como utilizar vários estilos numa página só. Nessa primeira parte irei recortar o layout e montar. Por isso dividimos em dois "programas". Já na próxima aula irei continuar.

vamos montar pra valer o layout do Hades! Na última aula você pode ver que escolhi o formato de layout fluído para que o site possa se adaptar a qualquer resolução. respondendo 10 perguntas básicas sobre CSS. Não me faça pagar mico. Então clique aqui para fazer o Quiz e boa sorte! Até a próxima! Aula 12 Layout de 3 linhas e 3 colunas do Hades Junior O Recorte . Um layout líquido ou fluído permite que a página se adapte à largura do ecrã do utilizador. Imagino que a essa altura você já saiba responder as 10 questões perfeitamente. líquido/fluído ou elástico? Veja nesse texto do português Ivo Gomes ( www. Bora ver? Então senta. irei disponibilizar todos os arquivos aqui! .Download do Layout Recortado Será que consegui concluir a montagem do site? Assista o vídeo! Quando eu concluir. irei disponibilizar todos os arquivos aqui! .) QUIZ CSS! Agora vamos nos divertir? Então bora responder este quiz do Maujor. normalmente coloca-se sempre esta dúvida: o layout vai ser fixo ou líquido? Um layout fixo permite ter mais controle sobre o website porque as páginas terão sempre a mesma largura e os conteúdos irão comportar-se sempre da mesma maneira.Parte II Agora sim. senta que lá vem a história Download do Layout Recortado Será que consegui concluir a montagem do site? Assista o vídeo! Quando eu concluir. Será que deu certo?. Ao conceber ou redesenhar um website.) Layout: fixo. hein? Aluno meu tem que sair daqui expert. .ivogomes. ocupando todo o espaço visível em vez de ficar encostada a um canto ou centrada como acontece com os layouts fixos. Ambas as soluções têm os seus pontos positivos e negativos.com ) os pontos positivos e negativos do layout fixo e do layout fluído.

dependendo do contexto do website que estamos a desenvolver. eliminando assim alguns pontos negativos identificados nos dois tipos de layouts anteriores. . No entanto. Layout Elástico Este tipo de layout é uma mistura do layout fixo com o layout líquido/fluído. a largura da página é extensível até um certo ponto a partir do qual se torna fixa. Isto permite ter. o website fica encostado a um dos lados ou centrado na página. Os conteúdos ocupam toda a área visível do video. Pontos negativos: • • Num video com uma resolução grande. controle dos elementos na página por parte do webdesigner e controle da largura da janela por parte do utilizador.Layout Fixo Pontos positivos: • • O webdesigner tem controle sobre a forma como a informação é apresentada. o que facilita a leitura de texto no video. As linhas de texto têm uma largura fixa e curta. Pontos negativos: • • Maior dificuldade na leitura de linhas de texto demasiado longas. Layout Líquido/Fluído Pontos positivos: • • • Maior acessibilidade. A partir dos 800px para baixo ou dos 1280px para cima (valores de exemplo). Os conteúdos adaptam-se melhor à resolução de video do utilziador. Menor acessibilidade. ao mesmo tempo. permitindo transmitir mais informação. com muito espaço disponível à sua volta. Ou seja. uma vez que o layout não se adapta às necessidades do utilizador. existe um ponto intermédio: o layout elástico. Perde-se o controle sobre o posicionamento de alguns elementos na página. Na prática. isto significa que podemos ter uma página que tenha uma largura mínima de 800px e uma largura máxima de 1280px. Não se pode dizer que um dos layouts seja melhor do que o outro porque ambos são opções válidas. Deixa de haver espaço vazio à volta do website. a largura não se altera e a página funciona como uma página com layout fixo.

Será que eles validaram? Veja com seus próprios olhos! Download do Layout Recortado Agora sim! Faça o download do layout clicando aqui Dever de casa Divirta-se-> Exercícios da Aula 13 Até a próxima! . a largura da página irá aumentar na mesma escala. as respostas corretas da aula 10! . Desta forma. o website irá aumentar a sua largura máxima consoante o tamanho do texto! Para conseguir este efeito.) Divirta-se-> Exercícios da Aula 11 Até a próxima! Aula 13 Layout de 3 linhas e 3 colunas do Hades Junior O Recorte . a largura da página irá comportar-se da mesma forma como o tamanho do texto. Se tiverem um monitor com uma resolução grande (superior a 1024px) podem experimentar aumentar o tamanho do texto agora e verão que a largura desta mesma página irá acompanhar o aumento do texto. ou seja.Outro fator interessante é o fato de. Caso a largura da janela seja inferior a 1024px. num monitor com uma largura muito grande (vamos imaginar um video com 2028px de largura ) o nosso website elástico ocuparia cerca de metade do video e o texto poderia tornar-se demasiado pequeno para se conseguir ler. Dever de casa Agora sim. basta definir a largura máxima da página em unidades “EM”.Parte Final Finalmente finalizamos o layout do Hades Junior e ainda passamos pelo W3C. Ao aumentar o tamanho do texto no browser (Firefox: CTRL+). responde aos comandos do utilizador para aumentar ou diminuir o seu tamanho. a página mantém-se fixa e o texto aumenta. Desta forma.

) Download do Layout Recortado Faça o download do layout e minha proposta clicando aqui . . senta que lá vem a história! Palavras Finais Assista o vídeo para ouvir minhas palavras finais sobre o curso.Aula 15 Análise do Desafio Final Aqui está a análise do nosso desafio final! Senta.

Dever de casa . em qualquer faz de conta a gente apronta e é bom ser moleque enquanto puder. afinal.Versão Completa Estou disponibilizando para vocês a versão completa dos nossos exercícios -> Aqui está! Querido aluno. foi bom estar com você. Bruno Tibúrcio . brincar com você. Sucesso! Para o alto e Avante! Prof. deixar correr solto o que a gente quiser.