M19 Ficha de Trabalho 01 Bootstrap - resolvido

•

Engenharias

0

Paulo Reis

19/08/2021

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Você viu 3, do total de 24 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Você viu 6, do total de 24 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Você viu 9, do total de 24 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Programação I

55.933 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

M19 opção 5
Ferramentas de Desenvolvimento de Páginas Web
PSI 3º ano
2TGPSI - Paulo Reis - Agrupamento de Escolas da Batalha
Ficha de Trabalho 1:
 Criação de um Website empresarial usando o Bootstrap
Objetivos:
 Aplicar as noções básicas para desenvolvimento web.
 Utilizar uma framework web para estilização de conteúdo.
 Estruturar projetos de interligação tecnológica.
3
0) Iniciar o servidor web local.
 Iniciar o serviço Apache. (Esta opção pode estar 
definida automaticamente mas para desempenho 
da máquina está em modo manual)
 Executar como administrador o Control
XAMPP para ter acesso a todas as 
funcionalidades do servidor web (Apache) .
4
1) Criar na plataforma XAMPP um novo website com o nome empresa.
 Criar dentro dessa pasta uma 
nova pasta com o nome 
pretendido (empresa).
 Localizar a pasta 
c:\xampp\htdocs
5
2) Copiar as pastas css e js da distribuição Bootstrap descarregada para empresa.
6
3) Criar uma página com o nome index.hml usando um editor de código:
7
 Criar a estrutura do ficheiro HTML usando o exemplo anterior sobre o Bootstrap.
8
 Abrir no Browser para verificar se o website está a responder corretamente.
9
4) Definir os elementos HTML da página inicial segundo o modelo proposto.
10https://www.w3schools.com/bootstrap4/bootstrap_grid_basic.asp
• Usamos o sistema de grade 
do Bootstrap que é 
construído com flexbox e 
permite até 12 colunas na 
página.
• Vamos agrupar colunas para 
criar colunas mais largas.
https://www.w3schools.com/bootstrap4/bootstrap_grid_basic.asp
11
<!DOCTYPE html>
<html>
<head>
<title>The XPTO Corporation</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">banner</div>
</div>
<div class="row">
<div class="col-sm-12">menu</div>
</div>
<div class="row">
<div class="col-sm-8">texto</div>
<div class="col-sm-4">imagem</div>
</div>
<div class="row">
<div class="col-sm-12">footer</div>
</div>
</div>
</body>
</html>
12
• O Bootstrap 4 usa um padrão font-
size de 16 pixels e line-height
1,5. O padrão font-family é 
"Helvetica Neue", Helvetica, Arial, 
sans-serif. Além disso, todos os <p>
elementos têm margin-top: 0 
e margin-bottom: 1rem (16px por 
padrão).
https://www.w3schools.com/bootstrap4/bootstrap_typography.asp
https://www.lipsum.com/
https://www.w3schools.com/bootstrap4/bootstrap_typography.asp
https://www.lipsum.com/
13
https://getbootstrap.com/docs/4.0/utilities/colors/
https://getbootstrap.com/docs/4.0/utilities/colors/
14
https://br.freepik.com/
5) Criar uma pasta com o nome images para guardar os nosso conteúdo multimédia:
IMPORTANTE: 
usar imagens que estejam livre de 
direitos autorais (Creative Commons) 
ou usar a declaração de licença no site.
https://search.creativecommons.org/
https://www.techtudo.com.br/dicas-e-
tutoriais/2018/04/como-pesquisar-imagens-livre-
de-direitos-autorais-no-google.ghtml
https://br.freepik.com/
https://search.creativecommons.org/
https://www.techtudo.com.br/dicas-e-tutoriais/2018/04/como-pesquisar-imagens-livre-de-direitos-autorais-no-google.ghtml
15
https://getbootstrap.com/docs/4.0/content/images/
• Para fazer imagens responsivas adicionar uma 
classe .img-fluid à tag <img>. A imagem será 
então dimensionada de forma adequada para o 
elemento pai.
• A classe .img-thumbnail molda a imagem em 
uma miniatura (com bordadura).
https://getbootstrap.com/docs/4.0/content/images/
16
5) Construir um menu ou barras de navegação no website:
https://www.w3schools.com/bootstrap4/bootstrap_navs.asp
• Para criar um menu horizontal simples adicionar a classe .nav a um elemento <ul>, seguido 
de .nav-item para cada <li> e adicione a classe .nav-link aos links.
https://www.w3schools.com/bootstrap4/bootstrap_navs.asp
17
6) Criar uma nova página com o nome galeria.html para estruturar da seguinte forma:
18
 Copiar o conteúdo HTML da página inicial (index.html), alterando a grade de conteúdo para 12.
19
 Guardar na pasta images um conjunto de novas imagens para usar. 
 Preferencialmente as imagens devem ter o mesmo tamanho. Usar uma 
ferramenta de edição de imagem que permita redimensionar e recortar.
https://www.microsoft.com/pt-pt/p/paint-3d/9nblggh5fv99?activetab=pivot:overviewtab
https://picresize.com/
https://resizeimage.net/
500 x 333 
pixels
https://www.microsoft.com/pt-pt/p/paint-3d/9nblggh5fv99?activetab=pivot:overviewtab
https://picresize.com/
https://resizeimage.net/
20
 Incluir uma galeria de 
imagens (Carousel).
https://www.w3schools.com/bootstrap4/bootstrap_carousel.asp
https://www.w3schools.com/bootstrap4/bootstrap_carousel.asp
21
 Não esquecer de incluir as referências para os 
plugins do Bootstrap baseados em JavaScript! 
 Foi adicionado um style para ajustar 
responsivamente o slideshow.
22
7) Corrigir as ligações para as páginas.
23
Existe mais para descobrir no Bootstrap.
24