curso de psd para html x css
TRANSCRIPT
Curso de PSD para html & CSS
Aula 01HTML 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?
É, se você gosta de adrenalina, aventura e adora fortes emoções, então nem ligue para o padrão. Quando você resolver visualizar sua página num celular, na TV ou em algum Mac da vida, seu coração baterá forte. Sem falar no cliente, que você chamará de chato pois ele usa o Firefox.
Agora, se você quiser fazer páginas consistentes. bem visualizadas em qualquer plataforma ou navegador, siga o padrão estabelecido pelo W3C. Não tem por onde escapar, isso já é algo estabelecido e que não tem volta.
3. E como vou saber que estou criando minhas páginas utilizando o padrão?
Utilizando o Validador do W3C . Veja mais em nossa vídeo-aula.
4. Quer dizer que HTML 4.01 e padrão é a mesma coisa?
Bem, quando dizemos "html padrão" é a última versão aprovada. Como a última versão é a 4.01, logo ela é a padrão. Mas existem outros padrões que falaremos nas próximas aulas.
5. Quando será lançado o HTML 5?
Talvez, nunca. Pois não se escreve mais páginas HTML como se escrevia antigamente. Hoje o novo padrão utilizado para se fazer páginas é o XHTML que veremos na próxima aula.
6. Ué, então porquê estamos vendo HTML 4.01?
Porquê é necessário entendermos primeiro o HTML 4.01 para chegarmos ao XHTML. Sem entender o HTML 4.01 e seus padrões, você não irá compreender bem o XHTML.
7. Vem cá, se eu bancar o engraçadinho e dizer ao navegador que a página é HTML 4.01 mas ao programar, não seguir o padrão?
No primeiro erro o navegador descobre e entra no método Quirks mode. E o resultado disso é um navegador interpretando de uma maneira e o outro de outra maneira, ou seja, sua página ficará de um jeito em um e de outro jeito em outro navegador.
Dever de casa
Aqui está nosso primeiro dever de casa. A idéia é em cada aula termos um novo PDF contendo os exercícios da aula correspondente. Se você desejar, poderá imprimir e guardar. Os exercícios são compostos de perguntas, joguinhos e outras tarefas de fixação. As respostas só serão reveladas na próxima aula.
Divirta-se-> Exercícios da Aula 01
XHTML – aula 2
Na aula de hoje iremos conhecer o XHTML ( Extensible Hypertext Markup Language ), a nova geração do HTML, uma versão mais enxuta, com mais recursos e mais compatibilidade com inúmeros dispositivos.
Na nossa vídeo-aula, irei mostrar a transformação de um HTML em XHTML validado pelo W3C. Depois disso só iremos trabalhar com XHTML e CSS ( que iremos conhecer na próxima aula ).
Sem Frescura
1. Ví o vídeo e não entendi direito o que é esse atributo xmlns. Dá pra me explicar direito que troço é esse?
Bem, esse assunto é um pouco confuso mesmo, mas vamos lá. Com o XML você pode criar qualquer linguagem. Por exemplo:
<table>
Lendo a tag acima, você logo pensou que se refere a um HTML, 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. Se você acessar através do navegador o identificador que utilizamos no XHTML ( http://www.w3.org/1999/xhtml/ ) você irá perceber que nesse endereço se encontra todas as referências sobre o XHTML.
2. Sim, mas isso é uma URL, não é um identificador. Quando você diz identificador, me vem a cabeça um rótulo, um nome comum de identificação.
É, nem tudo nessa vida é igual ao que parece, não é mesmo? Por exemplo, se você pegar um convite de casamento e ler "Traje: Passeio Completo" você pensa no quê? Você passeando, com seu cachorro, de bermudão, camiseta e uma chinela havaiana no pé? É, olhando apenas o nome jamais pensaríamos em alguém de terno e gravata. E o traje esporte então? Nunca vi ninguém jogando bola de camisa de botão e calça de brim.
Portanto o item identificador (xmlns) na realidade é uma URL que informará todos os dados referentes aquela linguagem XML.
3. Porquê, mesmo sendo um XHTML, a página começa com um <html> ?
Porquê se começasse com um <xhtml>, todos aqueles navegadores antigos, do Netscape ao Internet Explorer 5, não entenderiam o que é aquilo. O XHTML tem que ser compatível com todos os navegadores antigos, por isso não se alterou esse elemento raiz.
Dever de casa
Aqui está nosso segundo dever de casa com as respostas dos exercícios da primeira aula.
Divirta-se-> Exercícios da Aula 02
Até a próxima!
Aula 03 – Conhecendo o Css
Conhecendo o CSS
Chegou a hora da diversão. Finalmente chegamos no tão aclamado CSS, o responsável pelas cores, formas e visual de um site. CSS significa Cascading Style Sheet, significando em Português Folha de Estilo em Cascata. Podemos definí-lo como um mecanismo simples para adicionar estilos (p.ex., fontes, cores, espaçamentos) aos documentos Web.
Na nossa vídeo-aula de hoje iremos começar a entender o que é o CSS e o que ele faz. Então vamos logo ao que interessa. Senta que lá vem a história!
Sem Frescura
1. Vem cá, Bruno, 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. Vocês verão que podemos definir que todo parágrafo, por exemplo, dentro de uma determinada camada div irá se comportar de uma forma diferente dos demais <p>. Nas próximas aulas iremos ver isso.
2. Afinal, tem uma lista de propriedades que eu posso usar num elemento? Tenho que decorar todos?
Não se preocupe em decorar nada. Com o tempo você acaba decorando por tanto, se você não é masoquista, então o ideal é que você adquira um livro de CSS ou então na internet mesmo encontramos boas referências. Aqui está uma delas: http://www.abpsoft.com/criacaoweb/cssguiaref.html
3. Porquê eu não faço essa parada toda dentro do XHTML logo, porquê tenho que separar?
Ao utilizar o CSS separado do XHTMl, isso irá facilitar muito la na frente. Bastará modificar o CSS para mudar o visual de todo o site. Aliás, na próxima aula iremos colocar todo nosso CSS em um arquivo separado, aguarde e confie. ;)
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.
Divirta-se-> Exercícios da Aula 03
ATENÇÃO: fiz uma pequena modificação no exercício da aula 02. Faltou a imagem do Astrogildo no html. Aproveite e pegue a atualização clicando aqui.
Até a próxima!
Aula 04Conhecendo o CSS - Parte II
Dando continuidade ao assunto CSS, iremos ver na aula de hoje a importância de separar o CSS do XHTML e como colocá-lo em um arquivo externo.Vamos logo ao que interessa. Senta que lá vem a história!
Não se esqueça!
O conteúdo presente nas CSS se chamam regras. 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.
O seletor irá apontar em qual elemento a regra será aplicada.
Não se esqueça que no final do valor de cada propriedade deve ser terminado com um ponto-e-vírgula.
As propriedades e valores de uma regra sempre deverão vir entre chaves { }.
Para selecionar um elemento XHTML basta colocá-lo como seletor no CSS, sem os sinais de < e >.
Você pode selecionar múltiplos elementos XHTML em seu CSS, colocando como seletores e separando com vírgulas.
Para incluir uma folha de estilo ( CSS ) dentro de uma página, basta adicionar a tag <style>.
Para sites maiores, com muitas páginas, recomenda-se utilizar uma folha de estilos dentro de um arquivo externo (.css).
Para vincular o arquivo externo CSS à sua página, basta utilizar o elemento <link>.
Fique atento a herança. Se algum estilo for adicionado ao elemento <body>, todos os elementos contidos em <body> herdarão a mesma propriedade.
Caso não deseje que algum elemento não se comporte da maneira definida em <body> basta criar uma regra específica, utilizando o elemento como seletor no seu CSS.
Para adicionar classes para diferenciar elementos semelhantes.
No CSS, utilize ".nomedaclasse" para definir a regra como uma classe.
No XHTML, utilize no elemento escolhido a tag "class=nomedaclasse", 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.
Divirta-se-> Exercícios da Aula 04
Até a próxima!
Aula 5Aula 05 - CSS: Fontes e Cores
CSS: Fontes e Cores
Dando continuidade ao assunto CSS, iremos nos aprofundar nas propriedades de fontes e cores. Veremos também como é formado o código hexadecimal. Vamos logo ao que interessa. Senta que lá vem a história!
Sem Frescura
1. Por que em alguns casos vejo fontes descritas na propriedade font-family, entre aspas? Por exemplo: "Trebuchet MS"?
Sempre que você for citar fontes na propriedade font-family que tenha mdois nomes, você deve colocar entre aspas. Por exemplo, a fonte Arial é um nome único, não vem acompanhado por nenhum outro nome. Já "Courier New" não, é um nome composto por duas palavras, "Courier" e "New", logo é exigido que o nome completo fique entre aspas.
2. Então coloco ali em font-family uma lista de fontes seguindo uma prioridade?
Sim, ele serve como lista de prioridades para a fonte. Primeiro você coloca a que realmente você deseja que apareça, a mais adequada, bonita, já a segunda fonte que você for citar é a que pode substituir a primeira fonte, caso não haja a primeira fonte no sistema do usuário.
3. Mas, vem cá, eu nunca vi essa tal fonte serif e sans-serif. Acho que não tem no meu computador...
Opa, não, serif e sans-serif não são nomes de fonte. São apenas dois estilos de fonte, serifada e não serifada. Acontece que ao especificar isso no seu CSS, o navegador irá interpretar que ali está sendo pedido uma fonte sem serifa ou serifada de acordo com o padrão do navegador.
4. Existe regra pra escolher entre sans-serif e serif?
Tecnicamente não. A escolha é visual. Porém, estudando a teoria do design e da tipologia podemos notar diferenças importantes nesses dois estilos, referentes a imagem e sentimento. No Curso de Design Web e no Curso de Identidade Visual abordamos esse assunto.
5. E quanto ao tamanho das fontes, se eu colocar um tamanho de fonte em body, isso quer dizer que mudo o tamanho de todas as fontes?
Exatamente. Imagina o body como uma caixa e os demais elementos dentro dessa caixa. Tudo que você fizer na caixa principal, no caso o body, irá influenciar em tudo que está dentro dessa caixa. No caso, todas as fontes de todos os elementos contidos no body irão ser alterados. É a lei da herança. O filho puxa ao pai. ;)
6. Qual a diferença entre "em" e "%"?
São maneiras diferentes de fazer a mesma coisa. Ambos trabalham com tamanho relativo. Use a que você preferir. Eu prefiro a porcentagem pois estou mais habituado com ela.
7. Notei que h1 tem um tamanho, h2 outro e por aí vai. Afinal, 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. H2 é 150%, h3 120%, h4 100%, h5 90%, h6 60%.
8. E se no body eu usar um tamanho em porcentagem? 90% por exemplo.
Se você fizesse isso, o navegador iria considerar que o tamanho da fonte deve ser 90% relativo ao tamanho padrão do navegador. Isso pode variar mas normalmente esse tamanho padrão é de 16px. Logo, 90 % seria um tamanho igual a 14px.
9. No vídeo você fala em três formas de especificar cores. Mas só falou de duas formas. Qual a terceira?
Não falei a terceira só para você vir aqui me perguntar. :) A terceira forma que é muito difícil de se ver por aí é o rgb ( 0, 0, 0 ). Onde cada número corresponde a uma tonalidade de cor no padrão RGB. Exemplo rgb ( 299, 109, 35 ).
10. Como combinar a melhor cor? A melhor harmonia?
Isso é algo bem complexo para se responder em poucas linhas. Esse assunto diz respeito a teoria de cores, que aprendemos não só na psiicologia como também no design e comunicação visual. No Curso de Design Web temos algumas aulas somente a respeito de cor. O professor recomenda. ;)
11. 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, sendo que se você quiser uma cor específica para a borda, pode utilizar o border-color.
Resumão!!!
O uso do CSS irá facilitar sua vida no controle de tudo que diz respeito a aparência de fontes, podendo mudar o seu tipo, cor, tamanho e estilo.
A propriedade fonte-family é o conjunto de fontes que compartilham características comuns.
As famílias de fontes são: serifa, sem serifa, monoespaçada, cursiva e fantasia. As fontes com e sem serifa são as mais utilizadas.
As fontes designadas em font-family só serão vistas se os visitantes do seu site tiverem a fonte especificada instalada em seus sistemas.
Na listagem de fontes de font-family sempre coloque o estilo ( sans-serif ou serif ) para garantir que o navegador coloque uma fonte padrão no mesmo estilo das demais, caso ele não encontre as outras fontes instaladas no computador do visitante.
Existem 4 formas de especificar o tamanho das fontes: em pixels (px), em escala (em), porcentagem (%) ou palavra-chave (small, medium, large, etc).
Ao especificar o tamanho da fonte em pixels, você está dizendo ao navegador quantos pixels deverá ter a altura de suas letras.
Já em escala ( em) e porcentagem (%), são tamanhos relativos, sendo portanto um tamanho relativo ao tamanho da fonte do elemento anterior.
O uso do tamanho relativo é bom pois irá facilitar a manutenção de suas página. Bastará mudar um valor para mudar todos os outros tamanhos de fonte especificados em seu CSS.
O uso de palavras-chave é interessante quando você deseja que o tamanho seja escalonado pelo navegador e pelo próprio usuário, podendo diminuir ou aumentar seu texto.
Para colocar seu texto em negrito, use a propriedade CSS font-weight
Para texto inclinado ou itálico, utilize a propriedade font-style
As cores utilizadas no CSS são resultado do padrão RGB, nada mais que a mistura das cores vermelho, verde e azul ( Red Green Blue).
Essa é básica mas não se esqueça: a mistura de 100% de vermelho, verde e azul tem como resultado o branco.
Já a mistura de 0% de vermelho, verde e azul tem como resultado o preto.
As CSS tem 17 cores pré-definidas incluindo black, white, red, blue e green.
Os códigos hexadecimais possuem 6 dígitos e cada dígito pode ser de 0 a F. Os primeiros dois dígitos representam os tons de vermelho, os dois segundos os tons de verde e os dois últimos os tons de azul.
Para sublinhar um texto, utilize a propriedade text-decoration.
Dever de casa
Aqui está nosso dever de casa contendo também as respostas dos exercícios da última aula.
Divirta-se-> Exercícios da Aula 05
Até a próxima!
Aula 06 - CSS: Caixas
CSS: Caixas
Hoje iremos aprender mais sobre caixas, margens, bordas e enchimentos. Prepare-se, estamos a um passo das divs e do nosso PSD. Vamos logo ao que interessa. Senta que lá vem a história!
Sem Frescura
1. Ei Bruno! Ei! Po! Qual a diferença entre margin e padding, mano?
Bem, "mano", a propriedade margin nada mais é que a margem externa. Você irá utilizar quando quiser dar um espaço entre um elemento e outro da página. Já o padding é a margem interna ou enchimento. Será o espaço entre a borda da caixa e o conteúdo da página, que pode ser um texto, imagem ou tabela.
2. 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. Mas aí prevalece as regras do design, nada de texto colado em borda, ok? Somente se a sua criação exigir isso, mas texto colado em borda, sem o uso de padding, denota amadorismo. No Curso de Design Web falamos mais o porquê disso.
3. Fessô, fessô! Existe estilo pro padding e margin sem ser somente o tamanho do espaço?
Não, só tem o tamanho mesmo. Nada de pintar o espaço do enchimento ou qualquer outra firula. O espaço do enchimento e da margem são transparentes, logo herdará a cor
do fundo do elemento que contem o margin ou padding.
Estilos de Borda
Agora você vai conhecer os 8 estilos de borda que você poderá usar como valor da propriedade "border-style".
Este aqui é o estilo "solid", uma moldura normal, linhazinha reta, sem efeitos.
Este é o estilo "double", duas linhas apaixonadas que resolveram se "ajuntar".
Já o "groove" parece uma ranhura, uma pequena depressão.
O estilo "outset" dá uma idéia de 3D, um botão.
Já o estilo "dotted" parece um luminoso com luzinhas redondas
O estilo "dashed" parece um picote, de recorte, todo tracejado
O estilo "inset" é o contrário do "outset", obviamente. Se assemelha a um botão pressionado.
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.
Divirta-se-> Exercícios da Aula 06
Até a próxima!
Aula 07 - IDs e CSS
CSS: IDs e DIVs
Hoje é dia de começar a trabalhar com Divs. Antes iremos conhecer um outro atributo, o ID. Ele é bem parecido com o class, mas você entenderá a diferença entre ID e Class assistindo a nossa vídeo-aula de hoje. Então senta, senta que lá vem a história!
Sem Frescura
1. Ah, eu vou continuar usando class pois não vi diferença entre class e id...
É, se você for uma pessoa desorganizada, que deseja ter seu código todo esculhambado, então vá em frente. Utilizar o id quando o elemento for único evitará alguns problemas, principalmente quando você necessitar posicioná-lo. Veremos mais sobre isso lá na frente.
2. Posso usar uma classe dentro de um id?
Pode. Você poderá usar uma classe dentro de um id. Um exemplo: #id .nomedaclasse. Iremos trabalhar muito com isso quando começarmos a montar o layout. Aguarde.
Resumão ão ão ão (Caixas e IDs)
Para controlar a exibição dos elementos, as CSS o encaram sempre como caixas. Toda caixa possui área de conteúdo, enchimento, borda e margem, sempre opcionais.
O conteúdo do elemento se encontra na área de conteúdo.
O enchimento é importante para destacar o conteúdo, criando em volta da área uma moldura transparente.
A borda é importante para deixar claro uma separação visual do conteúdo. Porém, borda não é obrigatório.
A margem é o espaço externo cuja finalidade é separar os elementos da página
Ao utilizar fundo no elemento, seja em cor ou imagem, este irá aparecer por trás do conteúdo e enchimento, nunca atrás da margem.
A largura de um enchimento ou margem pode ser definido em pixels ou porcentagem.
Já a borda pode ser definido em thin, medium, thick ou em pixels.
Há oito estilos diferentes para as bordas, solid, double, groove, outset, dotted, dashed, inset e ridge
Na CSS você poderá definir em uma linha todas as definições de enchimento, margem e borda ou então definílos separadamente.
Para aumentar a separação das linhas de texto, utilize a propriedade "line-height"
Para utilizar imagem como fundo do elemento, 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.
Utilize class quando você for utilizar esta regra para muitos elementos.
Utilize o ID quando você for utilizar esta regra para um elemento, sem necessidade de repetição.
No CSS, você deverá identificar um id utilizando o símbolo #.
Um id poderá ter várias classes.
Dever de casa
Aqui está nosso dever de casa contendo também as respostas dos exercícios da última aula.
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, cá pra nós, tá muito feio. Ele me pediu que mudasse o layout, deixasse mais bonitinho e é isso que iremos fazer na aula de hoje. Vejam a preparação de um layout com 3 linhas ( topo, conteúdo e rodapé ) com duas colunas ( coluna do menu e coluna central ). Na próxima aula veremos a montagem desse layout utilizando XHTML e CSS, onde você poderá tirar algumas dúvidas e aprender coisas novas sobre o assunto.
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.
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!
Aula 09 - Layout 3x2 - Recorte - Parte I
Layout de 3 linhas e 2 colunas O Recorte - Parte I
Êêêê! Chegou o grande dia! A hora de recortar o layout do nosso querido Astrogildo! Bem, foi um pouco trabalhoso. Por isso dividimos em dois "programas". Nessa primeira parte irei recortar o layout e montar, ficando bem visualizado no Firefox. Já na próxima aula irei continuar, 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" ( é, estou falando do Internet Explorer mesmo ;) ). Então vamos lá, mãos a obra!
Então senta, 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.
Divirta-se-> Exercícios da Aula 09
Até a próxima!
Aula 10 - Layout 3x2 - Recorte - ParteII
Layout de 3 linhas e 2 colunas O Recorte - Parte II
Agora vamos continuar o que começamos na última aula. Hoje iremos aprender como utilizar vários estilos numa página só, procurando resolver a incompatibilidade com Internet Explorer. Iremos aprender também como deixar a div flutuando pela página. Então senta, senta que lá vem a história!
Download do Layout
Veja o index.html e o css desta aula. Download aqui.
Pegando um atalho: sintetizando a propriedade
Essa dica é para você que deseja economizar tempo. Você já deve ter notado que em algumas aulas utilizei uma forma diferente de dizer os valores de padding, margin, font ou background. Por exemplo, ao invés de criar um margin-top: 8px, margin-left: 10px, margin-bottom: 8px, margin-right: 10px, coloquei tudo numa linha só, resumindo num simples margin: 8px 10px 8px 10px. Vou mostrar para você como funciona isso.
Primeiro veja um exemplo de sintese para padding. O jeito "formal" de se dizer os valores de enchimento é assim:
padding-top: 10px;padding-right: 20px;padding-bottom: 15px;padding-left: 5px;
Podemos resumir isso tudo numa linha só, seguindo a ordem top, right, bottom, left. No nosso exemplo, ficaria assim:
padding: 10px 20px 15px 5px;
Note que não foi necessário colocar vírgula entre os valores, apenas espaços. Para vc decorar essa ordem, basta lembrar do relógio abaixo:
Viu? Agora ficou fácil de decorar. ;)
Atalho para border
O atalho para border é mais fácil pois não precisa seguir uma ordem. Veja o exemplo:
border-width: thin;border-style: solid;border-color: #f8f8f8;
Você poderá resumir assim:
border: solid thin #f8f8f8;
ou então:
border: thin solid #f8f8f8;
Enfim, não importa a ordem.
Atalho para fundos
Funciona como no border, onde a ordem não importa. Veja o exemplo:
background-color: white;background-image: url(imagens/astrogildo.jpg);background-image: repeat;
Com o atalho, ficaria assim:
background: white url(imagens/astrogildo.jpg) repeat-x;
Atalho para fontes
No caso das fontes, voc~e deverá seguir a ordem:
font: fonte-style font-variant font-weight font-size/line-height font-family;
Vamos a um exemplo:
font-size: 16px;font-family: Verdana;line-height: 1.6em;
Então, com o atalho, ficaria assim:
font: 16px/1.6em Verdana;
OBS: Na dúvida, se você ainda se sentir inseguro ao utilizar essa atalho ou se estiver
tendo problemas de compatibilidade com o navegador, utilize a forma convencional de descrever os valores da propriedade.
Leituras complementares
Entenda mais sobre as Falsas Colunas ( Faux Columns ): Neste excelente tutorial de Maurício Samy, você entenderá melhor como funciona as falsas colunas. O texto mostra com muitos exemplos o porquê da necessidade dessa técnica. http://www.maujor.com/tutorial/lay2col-faux-colunm.php.
Resumão ão ão ão (Caixas e IDs)
Utilizamos os elementos <div> para agruparmos várias seções, dividindo o layout em áreas. Comumente acabam substituindo as antigas tabelas, organizando as informações no formato de caixa.
Antes de recortar o layout, tente identificar suas seções lógicas ( topo, colunas, rodapé...). Isso vai facilitar a montagem lá na frente.
Use o <div> para agrupar elementos que utilizam estilos em comum.
Agrupar divs semelhantes numa div só pode lhe ajudar na organização do conteúdo.
"Width" é uma propriedade que define a largura da área de conteúdo de um elemento
Para encontrar a largura total de um elemente, some a área de conteúdo ao seu enchimento, borda ou margem que for adicionada.
Uma vez definida a largura, ela ficará fixa e não irá se auto-ajustar ao restante do layout. Ao menos que se utilize uma largura em porcentagem.
A propriedade "text-align" poderá ser utilizado para alinhar textos e conteúdo em linha.
É possível utilizar seletores descendentes, ou seja, que estejam dentro de uma determinada div. Por exemplo: #dir h1 {...}
Você pode sintetizar algumas regras. Por exemplo, ao invés de utilizar margin-top, margin-right, margin-bottom e margin-left, você pode utilizar apenas a propriedade "margin" e atribuir os valores na sequência padrão ( top, right, bottom, left ). Exemplo:margin: 20px 10px 20px 10px.
Esses atalhos podem ser utilizados nas propriedades padding, margin, border, font e background.
Existem quatro valores para a propriedade position: static, absolute, fixed e relative
O posicionamento padrão é o static. Isso faz com que o elemento fique um embaixo
do outro.
O posicionamento "absolute" faz com que a div flutue pela página, podendo posicioná-lo em qualquer ponto do layout. Seu posicionamento é em relação ao topo e a margem esquerda. Já se a div estiver agrupada em outra div, o posicionamento será em relação a margem esquerda e topo desta div.
Utilizamos as propriedades top, right, bottom e left para posicionarmos divs absolutos, fixos e relativos.
Para colocar divs absolutos um em cima dos outros, utilizamos a propriedade z-index.
Dever de casa
Aqui está nosso dever de casa contendo também as respostas dos exercícios da última aula.
Divirta-se-> Exercícios da Aula 10
Até a próxima!
Aula 11 - Layout de 3 linhas e 3 colunas do Hades Junior
Layout de 3 linhas e 3 colunas do Hades Junior O Recorte - Parte I
Êêêba! Chegou a hora de montar o layout de 3 colunas e 3 linhas! Ficou curioso? Então senta, 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, irei disponibilizar todos os arquivos aqui! ;)
QUIZ CSS!
Agora vamos nos divertir? Então bora responder este quiz do Maujor, respondendo 10 perguntas básicas sobre CSS. Imagino que a essa altura você já saiba responder as 10 questões perfeitamente. Não me faça pagar mico, hein? Aluno meu tem que sair daqui expert. 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 - Parte II
Agora sim, 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. Será que deu certo?. Bora ver? Então senta, 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, irei disponibilizar todos os arquivos aqui! ;)
Layout: fixo, líquido/fluído ou elástico?
Veja nesse texto do português Ivo Gomes ( www.ivogomes.com ) os pontos positivos e negativos do layout fixo e do layout fluído.
Ao conceber ou redesenhar um website, 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.Um layout líquido ou fluído permite que a página se adapte à largura do ecrã do utilizador, 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.
Layout Fixo
Pontos positivos:
O webdesigner tem controle sobre a forma como a informação é apresentada; As linhas de texto têm uma largura fixa e curta, o que facilita a leitura de texto no
video;
Pontos negativos:
Num video com uma resolução grande, o website fica encostado a um dos lados ou centrado na página, com muito espaço disponível à sua volta;
Menor acessibilidade, uma vez que o layout não se adapta às necessidades do utilizador;
Layout Líquido/Fluído
Pontos positivos:
Maior acessibilidade. Os conteúdos adaptam-se melhor à resolução de video do utilziador;
Os conteúdos ocupam toda a área visível do video, permitindo transmitir mais informação;
Deixa de haver espaço vazio à volta do website;
Pontos negativos:
Maior dificuldade na leitura de linhas de texto demasiado longas; Perde-se o controle sobre o posicionamento de alguns elementos na página;
Não se pode dizer que um dos layouts seja melhor do que o outro porque ambos são opções válidas, dependendo do contexto do website que estamos a desenvolver. No entanto, existe um ponto intermédio: o layout elástico.
Layout Elástico
Este tipo de layout é uma mistura do layout fixo com o layout líquido/fluído. Ou seja, a largura da página é extensível até um certo ponto a partir do qual se torna fixa. 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. A partir dos 800px para baixo ou dos 1280px para cima (valores de exemplo), a largura não se altera e a página funciona como uma página com layout fixo.
Isto permite ter, ao mesmo tempo, controle dos elementos na página por parte do webdesigner e controle da largura da janela por parte do utilizador, eliminando assim alguns pontos negativos identificados nos dois tipos de layouts anteriores.
Outro fator interessante é o fato de, 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. Ao aumentar o tamanho do texto no browser (Firefox: CTRL+), a largura da página irá aumentar na mesma escala. Desta forma, o website irá aumentar a sua largura máxima consoante o tamanho do texto!
Para conseguir este efeito, basta definir a largura máxima da página em unidades “EM”. Desta forma, a largura da página irá comportar-se da mesma forma como o tamanho do texto, ou seja, responde aos comandos do utilizador para aumentar ou diminuir o seu tamanho.
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. Caso a largura da janela seja inferior a 1024px, a página mantém-se fixa e o texto aumenta.
Dever de casa
Agora sim, as respostas corretas da aula 10! ;)
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 - Parte Final
Finalmente finalizamos o layout do Hades Junior e ainda passamos pelo W3C. 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!
Aula 15
Análise do Desafio Final
Aqui está a análise do nosso desafio final! Senta, senta que lá vem a história!
Palavras Finais
Assista o vídeo para ouvir minhas palavras finais sobre o curso. ;)
Download do Layout Recortado
Faça o download do layout e minha proposta clicando aqui
Dever de casa - 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ê, brincar com você, deixar correr solto o que a gente quiser, afinal, em qualquer faz de conta a gente apronta e é bom ser moleque enquanto puder.
Sucesso!
Para o alto e Avante!
Prof. Bruno Tibúrcio