Upload
others
View
0
Download
0
Embed Size (px)
Citation preview
Criação dum site
Vamos ver aqui os passos para criação duma página com um
layout através de CSS
Marco Soares 1
Criação dum site
Crie um site
Marco Soares 2
Criação dum site
Escolha uma pasta para o site e uma pasta para as imagens
Marco Soares 3
Criação da primeira página do site
A página principal do site será chamada index.html
Marco Soares 4
Criação da primeira página do site
A primeira coisa a fazer é guardar logo a página como index.html
Marco Soares 5
Criação da primeira página do site
Pode também utilizar a combinação de teclas para guardar (save) CTRL + S
Marco Soares 6
Modificar as propriedades da página
Vamos modificar as propriedades da página
Marco Soares 7
Painel files
Repare que pode agora ver a estrutura do seu site no painel FILES
Marco Soares 8
Modificar as propriedades da página
Vamos modificar a cor de fundo
O tipo e tamanho de letra
Marco Soares 9
Modificar as propriedades da página
Repare que ao definir as propriedades da página, o Dreamweaver criou estilos CSS
Marco Soares 10
Modificar as propriedades da página
A tag body é que define a parte principal duma página web
Marco Soares 11
Modificar as propriedades da página
É possível alterar as propriedades da página através do painel CSS, selecionado os estilos relacionados com o body e clicando na propriedade que se prentende alterar, por exemplo a cor de fundo
Marco Soares 12
Criar divs
Vamos agora aprender a definir um layout para a página
Em primeiro lugar dividimos a página por áreas através da utilização da tag <div>
Os divs são como contentores e que podem ter estilos CSS aplicados
Marco Soares 13
Criar divs
Vamos criar o div através do botão:
Marco Soares 14
Criar divs
Vamos identificar o div com o nome contentor
Marco Soares 15
Criar divs
Criei como que uma caixa (a parte em amarelo)
Marco Soares 16
Criar divs
Vamos clicar na vista Split e ver o que acontece ao código
Repare que foi criada a tag div com conteúdo temporário
Marco Soares 17
Criar divs
Demos o nome de contentor, mas podíamos ter dado outro nome, como principal
Dentro deste div podemos por outros elementos como por exemplo outros divs
Posso criar estilos css para controlar a posição dos divs
Marco Soares 18
Criar um estilo css para o div
Com o div selecionado, vamos criar um novo estilo
Marco Soares 19
Criar um estilo css para o div
Repare que como o div estava selecionado, o dreamweaver foi buscar automaticamente o seu id: contentor
Além disso, como é um estilo do tipo id, automaticamente colocou um cardinal (#) no início
Marco Soares 20
Estilo css para posicionar um div
Vamos definir o estilo de forma a que configuremos a posição do div
Vamos usar a categoria box e definir uma largura (width) de 780 pixéis
Marco Soares 21
Estilo css para posicionar um div
Pretendemos também que o div fique no centro
No entanto, não se pode centrar diretamente um div
O que se faz é obter o mesmo efeito através das propriedades css relacionadas com as margens
Marco Soares 22
Estilo css para posicionar um div
Vamos desligar o Same for all de forma a podermos especificar diferentes opções para cada margem
Marco Soares 23
Formatar fundo dum div
Vamos também mudar a cor de fundo do div para branco
Marco Soares 24
Estilo css para posicionar um div
Repare que como as margens esquerda e direita estão automáticas, o div aparece centrado
Vamos aumentar a janela e vai ver que continua centrado
Marco Soares 25
Inserir divs dentro do div principal (contentor)
Agora que já criámos o div principal que chamámos contentor, podemos começar a inserir outros divs lá dentro
Clicamos dentro do div
Vou abrir a vista Split para me certificar que estou dentro do div
Marco Soares 26
Inserir divs dentro do div principal (contentor)
Vamos agora inserir um div e chamá-lo topo
Marco Soares 27
Inserir divs dentro do div principal (contentor)
Cá está a janela de criação do div
Marco Soares 28
Inserir divs dentro do div principal (contentor)
Repare o que no código foi acrescentado outro div com o id: topo dentro do div contentor
Marco Soares 29
Inserir imagem no div topo
Vamos inserir uma imagem dentro do div topo, a imagem: imagemtopo.png
Descarregue as imagens para utilizar em: http://www.marcosoares.com/profij/tic/2014_02_27/imagens/
Marco Soares 30
Inserir imagem no div topo
Inserir imagem, pode arrastar do painel files ou através do botão
Marco Soares 31
Inserir imagem no div topo
Marco Soares 32
Inserir imagem no div topo
Em seguida, vamos apagar o texto que o dreamweaver coloca por definição dentro do div
Marco Soares 33
Inserir imagem no div topo
Agora já não temos o texto no div topo
Marco Soares 34
Criação dum div para a navegação
Agora, vou clicar no código na linha a seguir ao div, repare que dei um ENTER, para ter a certeza que vou colocar o próximo div no sítio que pretendo
Vamos criar um div chamado nav da mesma forma que criámos os outros
Marco Soares 35
Criação dum div para a navegação
Marco Soares 36
Criação dum div para a navegação
Repare que o código está a ficar um pouco confuso
Marco Soares 37
Criação dum div para a navegação
Vamos dar alguns ENTERs de forma a criar umas linhas vazia e possamos distinguir melhor os divs no código
Marco Soares 38
Inserir hiperligações no div nav
Antes de continuarmos a adicionar divs que vai ser a forma de eu definir e posicionar as várias áreas da página
Vamos inserir as hiperligações, que vão ser o menu de navegação da página, no div que corresponde à área de navegação, a que chamámos nav
Marco Soares 39
Inserir hiperligações no div nav
Vamos agora selecionar o conteúdo do div nav, uma das formas é dar 3 cliques seguidos
E vamos começar a inserir na parte do Design os itens que mais tarde vão ser transformados em hiperligações
Marco Soares 40
Inserir hiperligações no div nav
Repare que ao inserir em baixo no designe depois clicar no código, este aparece atualizado com tags <p> parágrafos para cada item
Em seguida, vamos transformar os parágrafos em uma lista não numerada
Marco Soares 41
Inserir hiperligações no div nav
Selecionamos os parágrafos e clicamos no botão Unordered List nas propriedades:
Marco Soares 42
Inserir hiperligações no div nav
Repare que ficou criada uma tag <ul> (unordered list) e dentro desta tag um <li> (list item) para cada parágrafo
Marco Soares 43
Inserir mais 3 divs
Vamos agora inserir 3 divs, a seguir ao div nav, um para cada motherboard
at
atx-agp
atx-pcie
Marco Soares 44
Inserir mais 3 divs
Insira da mesma forma como fez para os outros
Mas, não se esqueça de colocar depois do div nav
Ao criar cada um, coloque o cursor à frente de cada um antes de inserir outro, para ficarem um depois do outro
Marco Soares 45
Inserir mais 3 divs
Repare como fica o código se inserir corretamente os divs
Marco Soares 46
Inserir uma imagem dentro de cada div
Agora, para cada div, vamos inserir uma imagem dentro
Em primeiro lugar selecionamos o texto por definição que está dentro de cada div
Em seguida inserimos a imagem
Apague o texto
Marco Soares 47
Inserir uma imagem dentro de cada div
Veja o código que resulta da inserção das imagens nos divs
Marco Soares 48
Diminuir o tamanho apresentado das imagens
Embora, a forma mais correta de ajustar o tamanho das imagens, é através dum editor de imagem
Neste momento vamos utilizar o dreamweaver e diminuir o tamanho apresentado das imagens
Marco Soares 49
Diminuir o tamanho apresentado das imagens
Marco Soares 50
Inspetor de tag
Vamos selecionar o primeiro div com a imagem
Repare que em baixo, no inspetor de tag, consegue ver que clicou na imagem que está dentro do div #at, que por sua vez está dentro do div #contentor que por sua vez está dentro do body
Marco Soares 51
Criação de estilo css para o primeiro div com imagem
Vamos agora criar estilos para os divs
Selecionamos o primeiro div e clicamos em New CSS Rule
Marco Soares 52
Criação de estilo css para o primeiro div com imagem
Repare que aparece o nome da imagem, do div #at e do div onde está o #at, o #contentor, deixe só ficar #at
Marco Soares 53
Criação de estilo css para o primeiro div com imagem
Marco Soares 54
Criação de estilo css para o primeiro div com imagem
Vamos centrar o conteúdo que está dentro do div
Marco Soares 55
Criação de estilo css para o primeiro div com imagem
Vamos definir a margem do div que tem a ver com a parte de fora do div
E vamos definir o padding do div que tem a ver com a parte de dentro do div
Vamos também definir o float para left (esquerda) para este div se posicionar à esquerda
Marco Soares 56
Criação de estilo css para o primeiro div com imagem
Marco Soares 57
Criação de estilo css para os restantes divs com imagem
Vamos agora fazer o mesmo para os restantes divs
Marco Soares 58
Criação do div base
Vamos criar um div para a parte de baixo chamado base e vamos criar um estilo para ele
Marco Soares 59
Criação do div base
Marco Soares 60
Criação do div base
Marco Soares 61
Criação do div base
Vamos definir o fundo igual à cor verde da imagem no topo
Marco Soares 62
Exercícios
Altere a propriedade topo das margens do estilo de cada div com imagem de forma a que fiquem em locais diferentes
Altere o estilo do div nav
Box -> padding -> 10
Block -> text-align -> center
Background -> igual à cor da imagem do topo
Marco Soares 63
Resultado
Marco Soares 64
Exercícios
Crie uma classe chamada borda, com o estilo da borda: sólido, width: thin e a cor igual à cor da imagem do cabeçalho
Aplique a classe a cada div
Mude o estilo do último div (base) de forma a que tenha uma altura de 2000 box->height->2000
Apague o texto do div base
Marco Soares 65
Resultado
Marco Soares 66