Criação dum site

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