1 00:00:03,780 --> 00:00:07,090 Hora de passar para o próximo exercício. 2 00:00:07,090 --> 00:00:10,005 Neste exercício, vamos lidar com imagens, 3 00:00:10,005 --> 00:00:13,660 como incluir imagens em nossas páginas da web 4 00:00:13,660 --> 00:00:21,030 e como podemos fazer uso do objeto de mídia em nossa página web. 5 00:00:21,040 --> 00:00:23,240 Como o primeiro passo, 6 00:00:23,240 --> 00:00:27,890 vá para suas instruções de exercício e baixe o arquivo image.zip 7 00:00:27,890 --> 00:00:34,550 e salve-o na sua pasta de confusão. 8 00:00:35,890 --> 00:00:42,360 E então descompacte o arquivo para obter uma pasta chamada, img, 9 00:00:42,360 --> 00:00:44,210 e dentro dela você 10 00:00:44,210 --> 00:00:49,175 vai encontrar algumas imagens que vamos fazer uso deste exercício. 11 00:00:49,175 --> 00:00:53,115 Todas as imagens estão no formato png nessa pasta. 12 00:00:53,115 --> 00:00:58,785 Agora vamos trabalhar para adicionar algumas imagens à página. 13 00:00:58,785 --> 00:01:02,310 Primeiro, vamos adicionar o logotipo do nosso restaurante. 14 00:01:02,310 --> 00:01:06,360 Então, indo para a página index.html, no Jumbotron, 15 00:01:06,360 --> 00:01:11,130 você verá a segunda div aqui tem o col-sm. 16 00:01:11,130 --> 00:01:17,295 Então, nós vamos corrigir isso adicionando a esta div, 17 00:01:17,295 --> 00:01:24,030 e alinhar auto centro a esta div. 18 00:01:24,030 --> 00:01:26,620 Agora, a esta div, 19 00:01:26,620 --> 00:01:28,515 vamos adicionar uma imagem. 20 00:01:28,515 --> 00:01:33,790 Então, deixe-me usar a imagem com a fonte, img. 21 00:01:33,790 --> 00:01:40,710 Já colocamos a pasta de imagens que contém as imagens em nosso projeto. 22 00:01:40,710 --> 00:01:49,150 Então, a partir daí, adicionarei o arquivo logo.png como a imagem aqui. 23 00:01:49,150 --> 00:01:58,140 Além disso, vou adicionar a classe como fluido de imagem, para 24 00:01:58,140 --> 00:02:06,410 que esta imagem seja automaticamente responsiva e se adapte ao tamanho da tela. 25 00:02:07,160 --> 00:02:09,634 Vamos salvar as alterações. 26 00:02:09,634 --> 00:02:14,810 Vamos aplicar a mesma alteração para a página aboutus.html 27 00:02:14,810 --> 00:02:19,855 e também a página contactus.html no Jumbotron. 28 00:02:19,855 --> 00:02:23,350 Agora, quando você olhar mais de perto sua página web, 29 00:02:23,350 --> 00:02:26,350 você vai descobrir que no Jumbotron, 30 00:02:26,350 --> 00:02:29,210 logo após este texto, 31 00:02:29,210 --> 00:02:34,120 você vai ver a imagem do nosso restaurante inserido lá dentro. 32 00:02:34,120 --> 00:02:36,905 Em seguida, vamos para a barra de navegação, 33 00:02:36,905 --> 00:02:41,750 e então onde temos isso para a marca navbar, 34 00:02:41,750 --> 00:02:47,915 eu vou substituir essas palavras para o restaurante pelo logotipo correspondente. 35 00:02:47,915 --> 00:02:57,650 Então, essas palavras eu vou substituir isso por img, 36 00:02:57,650 --> 00:03:03,280 e fonte é logo.png. 37 00:03:03,280 --> 00:03:13,750 Além disso, eu vou especificar um atributo de altura de 30, 38 00:03:14,310 --> 00:03:20,950 e um atributo de largura de 41 para este logotipo. 39 00:03:20,950 --> 00:03:28,530 Este tamanho é adequado para a marca navbar lá. 40 00:03:28,530 --> 00:03:30,330 Então, vamos salvar as alterações. 41 00:03:30,330 --> 00:03:35,895 Eu vou fazer a mesma mudança na página aboutus.html, 42 00:03:35,895 --> 00:03:39,745 e também na página contactus.html. 43 00:03:39,745 --> 00:03:41,790 Olhando para a página web agora, 44 00:03:41,790 --> 00:03:44,900 você verá que o nome do restaurante foi 45 00:03:44,900 --> 00:03:49,835 substituído pelo logotipo do restaurante em tamanho pequeno lá. 46 00:03:49,835 --> 00:03:53,280 Agora você vê que quando você navega para a página Sobre, 47 00:03:53,280 --> 00:03:56,720 você verá a imagem que está sendo incluída lá 48 00:03:56,720 --> 00:03:59,700 e, da mesma forma, na página Contato, 49 00:03:59,700 --> 00:04:04,995 você verá que a imagem foi atualizada voltando para a página principal. 50 00:04:04,995 --> 00:04:07,080 Agora, o que vamos fazer, 51 00:04:07,080 --> 00:04:13,980 é usar um objeto de mídia no lugar dessas descrições que temos aqui, 52 00:04:13,980 --> 00:04:19,095 e então usar o objeto de mídia para substituí-los 53 00:04:19,095 --> 00:04:25,370 pela descrição e também uma imagem a ser incluída. 54 00:04:25,370 --> 00:04:29,890 Isso dá uma visão melhor da nossa página web. 55 00:04:29,890 --> 00:04:32,725 Então, vamos em frente e fazer essa mudança. 56 00:04:32,725 --> 00:04:37,695 Para fazer uso do objeto de mídia em nossa página index.html, 57 00:04:37,695 --> 00:04:40,555 vamos para a primeira linha de conteúdo aqui. 58 00:04:40,555 --> 00:04:44,930 E aí mesmo na segunda div, 59 00:04:44,930 --> 00:04:51,380 vou apresentar um novo desenvolvimento com a mídia da classe, 60 00:04:51,380 --> 00:04:57,500 e colocar o conteúdo dentro dessa div lá, 61 00:04:57,500 --> 00:05:01,245 fechando a div. 62 00:05:01,245 --> 00:05:04,940 Agora, dentro desta div, 63 00:05:04,940 --> 00:05:10,820 vou apresentar uma imagem para ser usada lá. 64 00:05:10,820 --> 00:05:14,840 Aqui eu entro e digo classe de imagem, 65 00:05:14,840 --> 00:05:20,120 e para usar uma imagem em um objeto de mídia, 66 00:05:20,120 --> 00:05:26,820 precisamos aplicar algumas classes relacionadas flexão adicionais aqui, 67 00:05:26,820 --> 00:05:31,545 então eu aplico o d-flex, e depois mr-3. 68 00:05:31,545 --> 00:05:40,035 Então, M significa margem direita com o número 3. 69 00:05:40,035 --> 00:05:43,625 Isso dá margem suficiente à direita desta imagem, de 70 00:05:43,625 --> 00:05:53,205 modo que a descrição é ligeiramente separada da imagem na página web. 71 00:05:53,205 --> 00:05:59,370 E então eu usarei miniatura de imagem para esta imagem, 72 00:05:59,370 --> 00:06:08,650 e então também usarei o auto-centro de alinhamento para a imagem, 73 00:06:08,650 --> 00:06:16,350 e então digite a fonte da imagem, que é img, 74 00:06:16,350 --> 00:06:23,570 e você pode procurar 75 00:06:23,570 --> 00:06:30,680 o nome da imagem na pasta img, 76 00:06:30,680 --> 00:06:34,340 e deixe-me dar-lhe uma alternativa lá, 77 00:06:36,240 --> 00:06:39,005 e fechar a imagem. 78 00:06:39,005 --> 00:06:43,465 Isso agora incluirá a imagem no meu objeto midi. 79 00:06:43,465 --> 00:06:49,830 Além disso, eu vou criar o corpo de mídia para esta imagem, 80 00:06:49,830 --> 00:06:56,840 dizendo corpo de mídia div classe, 81 00:06:56,840 --> 00:07:06,055 e, em seguida, fechado este h2 e p que contém a descrição dentro deste div lá. 82 00:07:06,055 --> 00:07:10,365 Então, deixe-me recuar o conteúdo lá, 83 00:07:10,365 --> 00:07:16,395 e depois fechar essa div aqui. 84 00:07:16,395 --> 00:07:23,395 Com isso, minha descrição está dentro do corpo da mídia. 85 00:07:23,395 --> 00:07:25,430 Além deste h2, 86 00:07:25,430 --> 00:07:30,955 vou introduzir uma classe como mt-0. 87 00:07:30,955 --> 00:07:37,785 Com isso, esta classe diz margem superior zero. 88 00:07:37,785 --> 00:07:44,940 Este título será alinhado ao topo deste objeto de mídia específico aqui. 89 00:07:44,940 --> 00:07:48,120 Com essas alterações, vamos salvar as alterações e, 90 00:07:48,120 --> 00:07:51,705 em seguida, ir e dar uma olhada rápida em nossa página web. 91 00:07:51,705 --> 00:07:53,930 Indo para a nossa página web, 92 00:07:53,930 --> 00:07:56,980 você notará imediatamente a mudança na página da web. 93 00:07:56,980 --> 00:08:00,115 Agora você pode ver que há uma posição de imagem aqui, 94 00:08:00,115 --> 00:08:03,650 e então a descrição 95 00:08:03,650 --> 00:08:08,375 que estava anteriormente nesse local foi posicionada corretamente aqui. 96 00:08:08,375 --> 00:08:13,280 Compare isso com as duas linhas restantes, 97 00:08:13,280 --> 00:08:17,290 e agora você começa a ver como o objeto de mídia nos ajuda 98 00:08:17,290 --> 00:08:23,545 a transformar isso em algo mais vibrante. 99 00:08:23,545 --> 00:08:30,270 Eu vou fazer a mesma coisa na terceira fila aqui. 100 00:08:30,270 --> 00:08:38,155 A segunda linha será deixada como um exercício para você na tarefa. 101 00:08:38,155 --> 00:08:40,680 Indo para o terceiro exercício, 102 00:08:40,680 --> 00:08:48,730 vou aplicar uma mudança semelhante a esta terceira linha para introduzir o objeto de mídia aqui. 103 00:08:48,730 --> 00:08:51,595 Deixe-me apresentar o objeto de mídia lá, 104 00:08:51,595 --> 00:08:54,240 e então a esta div, 105 00:08:54,240 --> 00:08:57,115 entrar no objeto de mídia, 106 00:08:57,115 --> 00:09:01,290 e então introduzir a imagem que eu vou usar aqui. 107 00:09:01,290 --> 00:09:05,410 Eu uso a classe como D-flex MR-3. 108 00:09:05,410 --> 00:09:08,830 Se você estiver posicionando a imagem para o lado direito, 109 00:09:08,830 --> 00:09:14,060 então você precisa dar uma margem como ml-3 para ela. 110 00:09:14,060 --> 00:09:20,560 Além disso, eu vou adicionar na classe miniatura de imagem para isso, 111 00:09:20,560 --> 00:09:26,005 e então também dizer, alinhamento auto-centro. 112 00:09:26,005 --> 00:09:31,010 Estas são as aulas que vou adicionar a esta imagem. 113 00:09:31,010 --> 00:09:35,670 E então, vamos especificar a fonte desta imagem, 114 00:09:35,760 --> 00:09:46,880 img e alberto.png, e então eu vou especificar a alternativa. 115 00:09:52,060 --> 00:09:57,400 E depois disso, este H2 e H4 e o P, 116 00:09:57,400 --> 00:10:07,140 vou fechá-los dentro de uma div media-body aqui, 117 00:10:07,760 --> 00:10:11,845 fechando a div do corpo da mídia. 118 00:10:11,845 --> 00:10:17,845 Agora completamos o objeto de mídia na terceira linha. 119 00:10:17,845 --> 00:10:19,230 Vamos salvar as alterações 120 00:10:19,230 --> 00:10:22,700 e, em seguida, dar uma olhada em nossa página da Web em seguida. 121 00:10:22,700 --> 00:10:25,480 Agora, dando uma olhada em nossa página web, 122 00:10:25,480 --> 00:10:30,685 você vai notar que nós temos a descrição prato lá. 123 00:10:30,685 --> 00:10:32,760 Agora, se você mover para a terceira linha, 124 00:10:32,760 --> 00:10:37,705 você verá como a terceira linha também foi redefinida. 125 00:10:37,705 --> 00:10:40,425 Observe o uso da mídia esquerda, o 126 00:10:40,425 --> 00:10:45,210 que significa que a imagem está posicionada no lado esquerdo neste objeto de mídia 127 00:10:45,210 --> 00:10:52,230 e, em seguida, a página do meio da mídia posiciona a imagem no meio da descrição. 128 00:10:52,230 --> 00:10:55,760 Você também pode usar a parte superior da mídia e 129 00:10:55,760 --> 00:11:01,970 a parte inferior da mídia, para alinhar a imagem à parte superior e inferior desta descrição. 130 00:11:01,970 --> 00:11:05,185 Com isso, completamos este exercício. 131 00:11:05,185 --> 00:11:12,970 Neste exercício, analisamos o uso de imagens e objetos de mídia em nossa página web. 132 00:11:12,970 --> 00:11:14,535 Este é um bom momento, novamente, 133 00:11:14,535 --> 00:11:16,365 para fazer um bom comentário, 134 00:11:16,365 --> 00:11:19,960 com a mensagem, imagens e mídia.