criação dum site
TRANSCRIPT
![Page 1: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/1.jpg)
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
![Page 2: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/2.jpg)
Criação dum site
Crie um site
Marco Soares 2
![Page 3: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/3.jpg)
Criação dum site
Escolha uma pasta para o site e uma pasta para as imagens
Marco Soares 3
![Page 4: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/4.jpg)
Criação da primeira página do site
A página principal do site será chamada index.html
Marco Soares 4
![Page 5: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/5.jpg)
Criação da primeira página do site
A primeira coisa a fazer é guardar logo a página como index.html
Marco Soares 5
![Page 6: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/6.jpg)
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
![Page 7: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/7.jpg)
Modificar as propriedades da página
Vamos modificar as propriedades da página
Marco Soares 7
![Page 8: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/8.jpg)
Painel files
Repare que pode agora ver a estrutura do seu site no painel FILES
Marco Soares 8
![Page 9: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/9.jpg)
Modificar as propriedades da página
Vamos modificar a cor de fundo
O tipo e tamanho de letra
Marco Soares 9
![Page 10: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/10.jpg)
Modificar as propriedades da página
Repare que ao definir as propriedades da página, o Dreamweaver criou estilos CSS
Marco Soares 10
![Page 11: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/11.jpg)
Modificar as propriedades da página
A tag body é que define a parte principal duma página web
Marco Soares 11
![Page 12: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/12.jpg)
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
![Page 13: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/13.jpg)
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
![Page 14: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/14.jpg)
Criar divs
Vamos criar o div através do botão:
Marco Soares 14
![Page 15: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/15.jpg)
Criar divs
Vamos identificar o div com o nome contentor
Marco Soares 15
![Page 16: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/16.jpg)
Criar divs
Criei como que uma caixa (a parte em amarelo)
Marco Soares 16
![Page 17: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/17.jpg)
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
![Page 18: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/18.jpg)
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
![Page 19: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/19.jpg)
Criar um estilo css para o div
Com o div selecionado, vamos criar um novo estilo
Marco Soares 19
![Page 20: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/20.jpg)
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
![Page 21: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/21.jpg)
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
![Page 22: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/22.jpg)
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
![Page 23: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/23.jpg)
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
![Page 24: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/24.jpg)
Formatar fundo dum div
Vamos também mudar a cor de fundo do div para branco
Marco Soares 24
![Page 25: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/25.jpg)
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
![Page 26: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/26.jpg)
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
![Page 27: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/27.jpg)
Inserir divs dentro do div principal (contentor)
Vamos agora inserir um div e chamá-lo topo
Marco Soares 27
![Page 28: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/28.jpg)
Inserir divs dentro do div principal (contentor)
Cá está a janela de criação do div
Marco Soares 28
![Page 29: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/29.jpg)
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
![Page 30: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/30.jpg)
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
![Page 31: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/31.jpg)
Inserir imagem no div topo
Inserir imagem, pode arrastar do painel files ou através do botão
Marco Soares 31
![Page 32: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/32.jpg)
Inserir imagem no div topo
Marco Soares 32
![Page 33: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/33.jpg)
Inserir imagem no div topo
Em seguida, vamos apagar o texto que o dreamweaver coloca por definição dentro do div
Marco Soares 33
![Page 34: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/34.jpg)
Inserir imagem no div topo
Agora já não temos o texto no div topo
Marco Soares 34
![Page 35: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/35.jpg)
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
![Page 36: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/36.jpg)
Criação dum div para a navegação
Marco Soares 36
![Page 37: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/37.jpg)
Criação dum div para a navegação
Repare que o código está a ficar um pouco confuso
Marco Soares 37
![Page 38: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/38.jpg)
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
![Page 39: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/39.jpg)
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
![Page 40: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/40.jpg)
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
![Page 41: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/41.jpg)
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
![Page 42: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/42.jpg)
Inserir hiperligações no div nav
Selecionamos os parágrafos e clicamos no botão Unordered List nas propriedades:
Marco Soares 42
![Page 43: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/43.jpg)
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
![Page 44: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/44.jpg)
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
![Page 45: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/45.jpg)
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
![Page 46: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/46.jpg)
Inserir mais 3 divs
Repare como fica o código se inserir corretamente os divs
Marco Soares 46
![Page 47: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/47.jpg)
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
![Page 48: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/48.jpg)
Inserir uma imagem dentro de cada div
Veja o código que resulta da inserção das imagens nos divs
Marco Soares 48
![Page 49: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/49.jpg)
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
![Page 50: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/50.jpg)
Diminuir o tamanho apresentado das imagens
Marco Soares 50
![Page 51: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/51.jpg)
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
![Page 52: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/52.jpg)
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
![Page 53: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/53.jpg)
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
![Page 54: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/54.jpg)
Criação de estilo css para o primeiro div com imagem
Marco Soares 54
![Page 55: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/55.jpg)
Criação de estilo css para o primeiro div com imagem
Vamos centrar o conteúdo que está dentro do div
Marco Soares 55
![Page 56: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/56.jpg)
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
![Page 57: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/57.jpg)
Criação de estilo css para o primeiro div com imagem
Marco Soares 57
![Page 58: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/58.jpg)
Criação de estilo css para os restantes divs com imagem
Vamos agora fazer o mesmo para os restantes divs
Marco Soares 58
![Page 59: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/59.jpg)
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
![Page 60: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/60.jpg)
Criação do div base
Marco Soares 60
![Page 61: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/61.jpg)
Criação do div base
Marco Soares 61
![Page 62: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/62.jpg)
Criação do div base
Vamos definir o fundo igual à cor verde da imagem no topo
Marco Soares 62
![Page 63: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/63.jpg)
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
![Page 64: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/64.jpg)
Resultado
Marco Soares 64
![Page 65: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/65.jpg)
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
![Page 66: Criação dum site](https://reader033.vdocuments.mx/reader033/viewer/2022041421/62521e42a7f89b48713fe857/html5/thumbnails/66.jpg)
Resultado
Marco Soares 66