Exercícios em laboratório
Orientações
Estaremos criando no computador do laboratório, uma cópia inteira do site e posteriormente, assim que avançamos no desenvolvimento das páginas, vamos fazendo o upload dos documentos criados.
Para isso, assim como no site remoto, também no computador, devemos ter a mesma preocupação em organizar os documentos em pastas. Neste modo, criaremos inicialmente quatro pastas, css, img, fonts e js. A pasta CSS, conterá os documentos de folhas de estilo, a pasta IMG será o local onde guardaremos nossas imagens, na pasta fonts, futuramente colocaremos os arquivos de fontes que escolheremos para compor o layout do nosso site e por fim, na pasta JS, guardaremos os documentos escritos em javascript. Os documentos escritos em HTML, ficarão na raiz do site, ou seja, fora das pastas.
Claro que você deverá criar a mesma estrutura no site remoto.
Aula 1
Nesta aula e em algumas mais, estaremos nos focando na criação de um documento HTML que servirá de modelo base para todos os documentos do site. Ele será nosso template. O template não contém todos os elementos do site, mas aqueles que são comuns a todos.
Podemos destacar a barra de navegação principal, o cabeçalho com a identidade do site e como nosso site será baseado no design responsivo, teremos uma sessão com artigos e um rodapé.
Vamos criar então os blocos principais do nosso site e o documento CSS para organizar a sua aparência.
O documento html
Explicando o código
A primeira instrução que encontramos no código HTML, na verdade nem é HTML e sua função é indicar ao navegador, qual é a versão da linguagem que o navegador irá interpretar. Neste caso, HTML5.
A tag <!DOCTYPE html> indica para o navegador
que a linguagem é o HTML versão 5.
Em seguida, temos o bloco principal, que agrupa todo o documento
entre as tags <html lang="pt"> e ></html>.
O argumento lang="pt" refere-se à linguagem, no caso o português.
A seguir, encontramos dois blocos principais, que compõe o documento
html, <head>,</head> e
<body> e </body>. O
primeiro bloco, que vai da linha 03 até a linha 18, contém
instruções importantes para a configuração do documento
pelo navegador. A tag <title>configura
o nome do documento na aba do navegador.
A seguir, temos outro grupo de instruções iniciadas pela tag
<meta > que contém informações sobre o tipo
de tabela de caracteres do documento, <meta charset="UTF-8">
e em seguida, duas outras tags <meta > que
descrevem com algumas palavras qual o assunto do documento e o
seu autor. Estas informações são úteis aos sistemas de busca e
classificação da Internet, como o google.
Na linha 09, encontramos uma tag de comentário, usado para inserir informações úteis, para a compreensão do código html, facilitando a sua leitura pelos usuários que desejam ver o código html usados
As três tags <link> que se seguem,
identificam os arquivos de folha de estilo, CSS
que devem ser carregadas pelo navegador, para que ele possa
apresentar o conteúdo do documento no layout desejado.
Este tipo de uso do CSS no documento chama-se CSS Importado.
Podemos ter ainda o CSS In Line, quando aplicamos as regras de estilo
diretamente na tag, no código html. E por fim, temos o CSS Incorporado,
quando escrevemos as regras do CSS agrupadas no interior da tag
<head>.
As versões do Internet Explorer, navegador da Microsoft, anteriores
à versão 9, não reconhecem algumas das novas tags do HTML5, daí uma
biblioteca em javascript, foi desenvolvida para resolver esse
problema. Essa biblioteca é importada diretamente do site do
desenvolvedor e as tags que o importam, encontram-se no código
entre tag de comentário,<!-- -->
O código compreendido entre as tags <!-- -->
são interpretadas pelo navegador entretanto, não são percebidas alterações
visuais na montagem da página e no caso do Internet
Explorer, navegador da Microsoft, o código é interpretado e se
o navegador for de uma versão anterior à 9.0, geralmente ele importa o documento
escrito em javascript, direto do site do desenvolvedor, mas para
agilizar o processo, o arquivo escrito em javascript foi baixado e
publicado no site, na pasta js.
Entre as tags <body> e </body>
inserimos o conteúdo que será montado pelo navegador, primeiro
na memória e em seguida,apresentado na janela. Sim, é entre as tags
<body> e </body> que escrevemos o
conteúdo da página da WEB.
Podemos perceber, cinco blocos de tags <div>
e </div>, cada um deles correspondendo a uma
região do documento, de acordo com um layout pensado anteriormente. O
argumento class, no interior de cada primeira tag <div>
indica que este bloco será apresentado na janela do navegador. seguindo
um conjunto de regras que estão discriminadas em algum dos arquivos de
folhas de estilo, importados pelo navegador e indicado no início do
documento html. No caso do nosso exercício, as regras de cada uma
das tags div, serão encontradas no documento style.css
Aula 2
Nesta aula, vamos inserir os elementos de texto, inicialmente para identificar o nosso site e o nosso propósito. Todo site tem o seu propósito e este deve ser claro desde o início, antes mesmo de editar qualquer código.
Vamos também nos focar na criação de nossa barra de navegação principal do site e para isto, vamos iniciar as nossas regras de estilo, escrevendo o documento style.css
O documento html
O documento css
Explicando o código
Iniciamos a escrita do bloco compreendido entre as tags
<div class="nav">, cuja formatação será
dada por uma classe do CSS. No CSS, podemos definir regras que
podem ser aplicadas a um conjunto de blocos e tags do HTML. Em geral,
uma regra do CSS segue o seguinte esquema:
Neste exemplo, estamos aplicando uma regra, diretamente à uma tag do HTML, no caso, a tag do parágrafo. Cabe ressaltar que quando assim o fazemos, aplicamos a regra à todos os parágrafos do documento. Contudo, se não desejamos que todas as tags de parágrafos sejam formatadas, mas uma específica, em um determinado local do documento, precisaremos de uma classe em CSS, para indicar o local específico.
Assim a regra do CSS para uma classe específica de parágrafo, seguirá o seguinte esquema:
No exemplo, a classe chama-se header. E o que significa? A leitura é feita da direita para a esquerda, assim, todo parágrafo que estiver com a classe chamada header, terá sua fonte com um tamanho de valor large.
Se desejarmos atingir não a uma tag específica, mas a qualquer tag que tiver uma determinada classe, basta seguirmos o seguinte esquema:
No caso, qualquer tag que tiver uma classe chamada header, terá uma borda sólida de 1px na cor azul.
Então, no código HTML, iniciamos incluíndo uma lista entre as tags
<div class="nav">, que vem a ser o bloco
onde colocaremos a barra de navegação do site - por isso a classe
que vai lhe dar o formato recebeu o nome de nav. Inserimos
uma lista não ordenada, contendo links para alguns documentos
do site.
As tags <ul> e </ul> definem
uma lista e as tags <li> e </li> definem
um ítem para a lista. No caso do site, temos 5 ítens em nossa lista
Para conseguirmos navegar pelos documentos de um site ou navegarmos
internamente no mesmo documento, ou ainda, visitar outros sites,
precisaremos de um link. Os links são definidos no HTML pela tag
<a href="#">. Onde href é o argumento da tag a
(âncora), que indica o nome do documento presente no site, a ser aberto,
ou o local no próprio documento, já aberto, ou mesmo um outro site.
Como valor do href, colocamos o endereço do recurso que desejamos visitar, o URL. Por exemplo, se desejamos abrir o site do Google, poderiamos criar o seguinte link:
Em nosso documento, como ainda não definimos os nomes dos documentos do site que abriremos, ao clicarmos nas palavras que servirão de links, então como valor de cada argumento href dos links, colocamos o # (jogo da velha, hash tag,...) que indica uma âncora não definida, para o próprio documento.Neste caso, se visualizarmos a página, em um navegador, veremos o link funcionando, mas se clicarmos no link, ele não nos levará a lugar nenhum, uma vez que não o definimos.
Mas e o CSS?
Então, ficou claro que para criarmos uma lista de links, os desenvolvedores têm usado as tags de listas, pois as mesmas possuem uma característica própria de elementos em sequência, apropriada para a navegação do site.
Entretanto, sua aparência precisa ser totalmente modificada, para que, no nosso caso, tenha a forma de uma barra com botões, comum a todos os aplicativos, que selecione e dê a direção para o usuário escolher as funcionalidades do site.
Em nosso site, agrupamos toda a formatação dos elementos, no arquivo style.css. Na verdade, você não precisa colocar todas as regras no mesmo arquivo, você pode ter quantos arquivos de folhas de estilo quiser.
Nestas aulas aplicaremos a formatação indicada no código, apenas para fins de demonstração do funcionamento do CSS. Entretanto, para uma formatação mais adequada, se faz necessário um estudo de cores e formas prévio, bem como a escolha da tipografia a ser usada no site. Antes mesmo do seu desenvolvimento.
Começamos a formatar o nosso modelo, alterando o funcionamento
da tag <body>, escolhendo uma cor de fundo
para o site. A propriedade background-color nos
permite aplicar uma cor para o fundo do elemento, neste caso,
como estamos escrevendo uma regra para a tag <body>
então todo o documento terá a cor de fundo indicada como o valor
da propriedade. A cor é escrita no formato hexadecimal, contendo
três grupos de dois números, onde cada dois números referem-se
às cores vermelho (red), verde (green) e azul (blue), o conhecido
padrão RGB.
A seguir, definimos duas propriedades, que fazem parte do
box model, modelo de caixa do CSS, onde o valor de margin
indica a distância entre os elementos da página, enquanto que o valor da
propriedade padding, indica a distância do conteúdo de
um elemento para a sua borda.
Em outro momento, estaremos sendo mais específicos quanto ao funcionamento
do box model. Ao definirmos esses valores para a tag
<body> eliminamos um espaço padrão que os navegadores
aplicam ao conteúdo de todas as páginas. Assim temos um maior controle
quanto ao posicionamento dos elementos dentro da página.
Vamos formatar agora a nossa seção do site que contém a sua navegação,
estou me referindo à tag <div class="nav">.
Para darmos a aparência do menu, precisamos definir a classe nav no CSS.
Este primeiro grupo de regras, será aplicada a todos os elementos
que estiverem compreendidos pela classe nav. Assim, ao definirmos
a propriedade text-transform:uppercase;, indicamos que
qualquer elemento de texto, no interior da div, estará em
caixa alta.
A seguir, verificamos a propriedade height:60px; que nos
indica que a div deverá ter 60px de altura. px significa
pixels e é uma das unidades usadas e conhecidas pelos navegadores. Já falamos
anteriormente sobre as propriedades margin e background.
A propriedade border:solid 1px #282828;, faz com que a div
fique envolvida por uma borda delineada por uma linha sólida, de 1px e com a mesma
cor de fundo da div, ficando imperceptível para o usuário, mas presente
para o navegador, que encherga os seus limites.
Agrupadas pela tag <div class="nav"> encontramos mais três tags,
que precisam ter algumas de suas propriedades definidas, assim, o código CSS a
seguir, define essas propriedades. São elas a tag da lista não ordenada
<ul> e os ítens da lista, <li>.
Para que o texto dos ítens da lista não ordenada, fiquem posicionados
no meio da barra de navegação, precisamos acrescentar uma certa distância
da borda superior da div, neste caso, chegou-se à distância de 20px. Assim
como a margem da lista é zero, ou seja colada na borda superior da tag div
então devemos acrescentar uma distância para o preechimento e fazemos isso com
a propriedade padding-top:20px;. Então a propriedade padding
nos dá a distância da borda para o preenchimento.
Agora, para que os itens da lista, que originalmente são elementos
de bloco, fiquem na mesma linha, ao invés de um abaixo do outro, precisamos
da propriedade display:inline;, que modifica o comportamento
do ítem da lista, fazendo com que atue como um elemento de linha, ao invés de um
elemento de bloco.
E para melhorarmos a aparência do menu, aplicamos alguma distância entre
os itens da lista, aumentando o preenchimento, com a propriedade
padding, em todas as direções, ou seja, padding-top,
padding-right, padding-bottom, padding-left.
E o no interior de cada ítem da lista, encontramos a tag do link,
<a href="#"> que transforma o texto que compreende em um link.
Para formatarmos a exibição do link, podemos inicialmente remover a linha
de sublinhado, que históricamente configura um link, para isso, usamos a propriedade
text-decoration:none;. As demais propriedades já foram mencionadas
ao longo deste texto.
Por fim, para criarmos aquele efeito de iluminação ao passar com o mouse sobre um link
vamos nos utilizar de uma subclasse em CSS, no caso do efeito do link,
a subclasse a:hover. Conforme pode ser visto
no código CSS que define as propriedades da subclasse do link, .nav ul li a:hover
apenas mudamos a propriedade de cor de fundo background-color para conseguirmos
o efeito desejado.
Aula 3
Nesta aula, vamos ampliar nosso conhecimento a respeito do box model em CSS, para tanto, vamos configurar nossa banner com a identidade do site.
Vamos precisar de uma imagem de alta definição, para colocarmos na banner e no interior desta banner vamos colocar um cabeçalho de nível 1 e uma mensagem de boas vindas. em um cabeçalho de nível 2
O documento html
O documento css
Explicando o código
Vamos começar pelo modelo de caixa do CSS. Abaixo representado pela figura, onde podemos perceber algumas de suas propriedades.
A primeira informação que nos vem aos olhos é a dimensão da caixa. Neste caso, 950px de largura por 62px de altura. Este é o espaço real ocupado pela caixa. Todo elemento do html, ou seja, toda tag do html, pode ter suas propriedades que definem uma caixa, como esta da figura, definidas.
Toda a definição da sessão do documento que destinamos para apresentar a
identidade do site, está definida no código html pela classe que
denominamos header, em <div class="header"> ... </div>
As propriedades width:950px; e height:62px; definem
respectivamente, largura e altura da caixa. Assim, quando desejamos que um elemento de
nosso documento html, ocupe uma determinada área, podemos definir as suas dimensões.
Entretanto, nem sempre podemos controlar a altura de um elemento, pois ele pode conter muito mais informação que a área definida, por exemplo no caso de um parágrafo contendo muitas linhas de texto.
Observando à direita a informação static a mesma refere-se ao
posicionamento da caixa dentro do fluxo do código html. Existem 4 posicionamentos
possíveis para uma caixa, são eles: position:static;, ou position:fixed;,
ou position:relative;, ou position:absolute;.
O posicionamento do tipo static é o padrão e ele não precisa ser declarado,
. Este posicionamento nos diz que o elemento deve seguir o fluxo do código html, ou seja,
ele vai ficar posicionado exatamente no local onde ele foi escrito no código html.
por exemplo, em nosso código, a div que contém a navegação do site, foi escrita
antes da div que contém a banner com a identidade do site, no caso ambas posicionadas
da forma padrão, ou position:static;.
A posição fixa, ou position:fixed;, como a propriedade já indica, faz
com que a caixa fique fixa em determinada posição, na janela do navegador. Atualmente
podemos verificar o uso de caixas fixas para barras de navegação superiores.
O posicionamento relativo de um elemento, o mesmo é disposto em função de sua posição atual no fluxo do html. Portanto, por exemplo, ao definir um valor superior de 20 pixels e um valor esquerdo de 200 pixels em um cabeçalho posicionado de forma relativa, este cabeçalho move 20 pixels para baixo e 200 pixels a partir da esquerda em relação ao lugar em que ela normalmente apareceria.
O posicionamento absoluto, dado pela propriedade position:absolute;,
permite determinar a localização de um elemento especificando sua posição esquerda,
direita, superior e inferior, em pixels ou em outra unidade válida.
Observando a figura, percebemos também que uma caixa possui três propriedades
que definem seus limites, são elas margin, que define a distância
desta caixa para outro elemento, border,que desenha uma borda ao redor
dos limites da caixa e padding, que define a distância do conteúdo
da caixa para a sua borda.
Percebidas as propriedades da caixa, em CSS, vamos verificar
a nossa primeira instrução, border:solid 1px #aeb6bf;.
que acrescenta à nossa sessão header, uma borda, do tipo solid, com
1px de espessura e com a cor obtida a partir do seu valor hexadecimal.
Em seguida, definimos uma altura para a caixa com height:350px; e
com um preenchimento de 10px, com padding:10px;. Com este comando,
o preenchimento ficará com 10px em todas as suas direções, top, right,
bottom e left. Podemo especificar um valor para cada uma das direções
individualmente, por exemplo, em nosso código, temos a instrução
margin-bottom:48px;, onde especificamos qual a margem, no caso a inferior
e o seu valor, 48 pixels. Colocamos este valor para que o próximo elemento do
código HTML, no caso a sessão conteudo, <div class="conteudo">...</div>
não fique colado na caixa.
Para dar um efeito visual, inserimos ainda, uma imagem como fundo da caixa, com
as propriedades de background-image, background-position,
background-repeat e background-size, definindo o caminho da imagem, a sua posição na
caixa, o seu modo de repetição e o seu tamanho.
O código na cor cinza na figura, precedido de barras duplas, //, estão comentados, assim, eles serão lidos, mas não serão interpretados pelo navegador, não sendo percebidos os seus efeitos na montagem da página. Eles foram inseridos no código, enquanto não se decidia a colocação da imagem como fundo da caixa.
Aula 4
Nesta aula, vamos continuar a ampliar nosso conhecimento a respeito do box model em CSS, para tanto, vamos configurar nossa sessão dos artigos, aplicando também uma técnica de flutuação das caixas para criarmos o efeito do conteúdo com duas colunas. Esse efeito pode ser conseguido também com outra técnica de posicionamento, que comentamos na aula 3.
Em nosso código html, criaremos algumas divs que vão lembrar o funcionamento das tabelas, com linhas e colunas. Todo este estilo será definido pelas regras do CSS e neste caso, precisaremos de três regras: a primeira que chamaremos container, que conterá as linhas e colunas, outra chamada row, que será a linha e, por fim, uma regra chamada column-half que definirá a coluna. Como desejamos ter duas colunas, então, cada coluna deverá ter metade da dimensão total da container.
O documento html
O documento css
Explicando o código
Vamos agora, aplicar os conceitos do box model em CSS e aprender uma das técnicas de criação do layout em colunas. Em nosso exemplo, usaremos a flutuação do elemento. Ao flutuarmos um elemento do HTML, ele deixa de seguir o fluxo normal do seu posicionamento no código HTML, passando a ficar em uma outra camada, indiferente ao posicionamento dos demais elementos. Lembrando o que já falamos, o posicionamento padrão é o estático.
Iniciando pelo código HTML, percebemos que foram criadas
três divs para simularmos uma tabela com duas colunas.
A primeira <div class="container">, envolve
as linhas e colunas. Com isso podemos, dentro desta div, criar
quantas linhas desejarmos, bastando acrescentar uma
<div class="row">. No interior da linha,
incluimos as colunas, com <div class="column-half">.
A coluna foi chamada de column-half para intuir que
a mesma teria metade da dimensão do elemento container.
No interior das colunas, colocamos um link contendo
uma imagem, obtida automaticamente do site
http://lorempixel.com. O link <a href="#">
não nos leva a nenhum documento no momento, por ainda estarmos
definindo o modelo, por isso colocamos a hash-tag #.
A imagem foi gerada com o tamanho da coluna, que em nosso caso
foi de 576 pixels. Na verdade, quando criamos o layout, somos
obrigados a usar alguma matemática básica, para encontrar as
as dimensões ideais para o layout. Mas alguém deve estar se
perguntando como cheguei aos 576 pixels, então vejamos: a nossa
container deverá ter 1200 pixels, assim, 600 pixels seria a metade,
mas se diminuirmos 12 pixels de cada lado, ou um total de 24 pixels,
que servirão de margem entre os elementos, percebemos 600 - 24 = 576.
Daí o valor usado.
Em seguida, colocamos um cabeçalho de nível 3, <h3>
para o título do artigo a ser chamado, seguido de um breve parágrafo
descrevendo o assunto tratado no artigo. Por fim, um link para que
o usuário possa abrir o texto em uma janela, caso deseje ler o artigo.
O conteúdo foi repetido na colunas seguintes.
Mas e o CSS?
Então iniciamos definindo as dimensões que nosso container teria, para
isso, usamos a propriedade width=1200px;, que nos permitiu
assegurar a dimensão da caixa em 1200 pixels.
a propriedade da margin escrita, forma reduzida, faz com que a caixa
seja posicionada no meio da janela do navegador.
A seguir, definimos a largura da coluna, em 576 pixels e as margens
da caixa, com a propriedade margin, escrita de forma reduzida,
onde os valores de cada posição, superior, direita, inferior e esquerda
foram dispostos em sentido horário, em uma só instrução, economizando linhas
de código.
O grande segredo para fazer com que a segunda coluna se posicione à
direita da primeira coluna, e não abaixo, seguindo o posicionamento estático,
padrão do HTML, é fazer a caixa flutuar para a esquerda, o que conseguimos com a propriedade
float:left;.
Se você acompanhou nossas aulas, pode ter percebido que o conteúdo da próxima sessão da página, as divs galeria e rodapé, foram posicionadas à direita das duas colunas, não reconhecendo o posicionamento das colunas recém flutuadas.
Isso acontece pois ao flutuarmos o elemento, este passou para outra camada diferente do fluxo normal do HTML.
Para corrigirmos isso, vamos aplicar a propriedade overflow:hidden;
à div da linha, o que vai fazer com que todo o conteúdo que estiver além dos
1200 pixels definidos no container, seja escondido. Como este conteúdo, faz
parte de outra div, então ela é posicionada corretamente, abaixo da sessão.
Aula 5
Nesta aula, vamos continuar a ampliar nosso conhecimento a respeito do box model em CSS, para tanto, vamos configurar nossa sessão da galeria e usaremos a mesma técnica de flutuação usada na aula 4, para criarmos as duas colunas dos artigos.
Além disto, usaremos pela primeira vez, um conjunto de funções previamente escritas e disponibilizadas na Internet pelos seus criadores de forma gratuita e de livre uso. Para isso, teremos de entrar no site do criador e baixarmos os arquivos indicados, posicionando-os em nossa pasta js.
As funções que estamos falando, nos permitirão colocar alguma interatividade no site. Vamos usar a biblioteca da lightbox, disponível no site http://lokeshdhakar.com/projects/lightbox2/
O documento html
O documento css
Explicando o código
Verificando o código HTML, a galeria de imagens foi inicialmente
compactada entre as tags <div class="galeria">...
</div>, no código, compreendida entre as linhas
82 à 108, onde criamos uma classe chamada galeria.
Aproveitando as classes já definidas na aula 4, quando criamos a sessão
de conteúdo, organizamos a nossa galeria usando a mesma técnica, de simular
uma tabela com linhas e colunas, definidas pelas regras do CSS. Assim,
criamos as divisões: <div class="container"> - que agrupa
as linhas e colunas -, <div class="row"> - que representa
uma linha e agrupa quatro colunas definida por <div class="column-film">
que contém em seu interior, um link, definido pela tag <a href="#">,
e uma imagem, <img src="caminho da imagem">, que será
clicável.
Como estamos criando um template, as imagens foram geradas usando o site lorempixel, que gera imagens aleatórias, o que facilita o trabalho de criação do modelo.
Mas e o CSS?
Então, para a criação da galeria, vamos perceber que as
classes container e row já foram
definidas anteriormente, assim, já sabemos por exemplo que a
largura de nossa galeria terá width:1200px;,
informação que já foi definida na classe container.
Repare que não podemos utilizar a classe column-half
que usamos para a sessão do artigo, pois não queremos duas colunas
dividindo a galeria, mas desejos 4 imagens clicáveis, dispostas
no interior de uma imagem de um rolo de filme. Então precisamos
criar uma nova classe que represente essa coluna, o que fizemos
criando a classe column-film. No Photoshop, eu
editei uma imagem de um rolo de filme e verifiquei as dimensões
da área onde ficaria cada uma das imagens.
Assim, comecei a escrever as dimensões da coluna, indicando
sua largura width:212px; e altura height:296px;
e, em seguida, a margem margin: 0 40px 24px 0;. Mas
tenha em mente que esse ajuste não foi de primeira, ele foi
progressivo, pixel por pixel, na tentativa e erro, até chegar
na melhor posição. E por fim, flutuando a imagem com float:left;
Claro que foi necessário definir também as outras classes,
como o preenchimento da tag da imagem, dentro do link, na
<div> da classe column-film, ou seja,
Agora para colocarmos a imagem de um rolo de filme, por baixo das
miniaturas das imagens, nos links, definimos a altura que a imagem
do rolo de film, na classe galeria, com a propriedade
height:406px;.
E veja agora, como fizemos para definir a imagem de fundo
na linha da nossa galeria. Perceba, que não podíamos alterar a
classe row definida anteriormente, se não iriamos
afetar a sessão artigo, que também usava a classe
row. Neste caso usamos a seguinte regra:
Observe que desejamos neste caso formatar a aparência da
classe row quando estiver dentro da classe
galeria
Usamos as propriedades já conhecidas, de margem e imagem de
fundo, respectivamente, margin e background-image.
A novidade está por conta da propriedade background-repeat. Esta
propriedade controla se a imagem de fundo será repetida até que preencha totalmente
a caixa. Neste caso o valor no-repeat, significa que a imagem
será única, nas suas dimensões reais, sem repetição.
A propriedade background-repeat, possui outros valores,
que permitem a repetição da imagem nos eixos x ou y, desta forma, se
você criar uma imagem contendo um degradê, basta uma fração de alguns pixels
e a sua repetição em um dos eixo, conforme a imagem, para que toda a caixa
apresente o seu degradê. Não há a necessidade de uma imagem imensa,
basta um fragmento.
Melhorando o código criando interatividade
Vamos criar alguma interatividade em nosso documento. E vamos fazer isso aproveitando o conhecimento já criado por diversos especialistas, que compilaram esses conhecimentos em bibliotecas de uma linguagem de programação chamada JavaScript.
Como algumas animações tornaram-se tão comuns na Internet, elas foram agrupadas em bibliotecas de funções, chamada JQuery.
Vamos nos utilizar desse conhecimento que encontra-se livre para o uso e disponível na Internet.
Para a nossa galeria, vamos entrar no site do http://lokeshdhakar.com/projects/lightbox2/ e fazer o download dos arquivos disponibilizado pelo autor. É importante observar que o autor disponibilizou todo o seu trabalho em um único arquivo compactado.
Caso o link do site, não se encontre liberado na sua rede, eu disponibilizei os arquivos que serão usados neste exercício, no link, Clique Aqui!!!
Você deverá: 1-Baixar o arquivo. 2-Descompactar os arquivos. 3-Transferir os arquivos para suas respectivas pastas, ou seja, as imagens para a pasta img, as folhas de estilo, para a pasta css e as bibliotecas de javascript para a pasta js, todas do seu próprio site.
Alterando o código html
Vamos precisar fazer algumas alterações no código html para que as funções de animação funcionem.
A primeira coisa é fazer a ligação do documento
contendo as regras de estilo, lightbox.css. Para
isso, vamos inserir o seguinte código dentro das tags
<head>...</head>.
Este código, aciona as folhas de estilo que serão usadas para configurar a aparência da galeria de imagens e a sua animação.Estas regras foram fornecidas pelo seu criador, mas nada o impede de copiar todo o seu conteúdo e colar na sua folha de estilo já presente no seu site.
Mas não basta a folha de estilo para que a animação funcione. Precisamos fazer com que o navegador conheça as funções necessárias para fazer a animação seja executada corretamente.
Para isto, vamos escrever o seguinte código, ao final do
documento html, bem antes da tag </body>.
Agora seguindo as instruções do autor, vamos alterar as tags que contém os links, dentro da sessão galeria e incluir alguns argumentos, que farão com que a animação seja executada.
Veja abaixo as regras do autor, em inglês e vamos ver a seguir o código alterado no html de nossa galeria.
Veja como ficou o nosso código html, aplicado a apenas uma das imagens de nossa galeria:
Em nosso exercício, alteramos os dois argumentos da tag
<a href="#">, para <a href="img/nome da imagem"
data-lightbox="image-1">, o primeiro argumento, href,
como já sabemos, faz o link buscar a imagem que se encontra na pasta img do site.
O segundo argumento, data-lightbox="image-1" executa a animação
do lightbox, abrindo uma caixa com uma imagem, exemplificado no link abaixo:
Clique aqui para o exemplo do efeito do lightbox.
Sobre
Neste conjunto de exercícios, estaremos desenvolvendo os exemplos realizados em sala de aula, durante nossos encontros presenciais, desenvolvendo um site sobre bandas de rock.
Atenção
Ao escrever o código da folha de estilo, a partir da aula 2, procure fazê-lo aos poucos, não escreva todo o código de uma vez, insira as propriedades uma a uma, testando em seguida, o resultado na página, além de experimentar valores diferentes.
Copyright © 2015 |
Prof. Constantino Neto |
Todos os direitos reservados