Curso Criando um Site do Zero - Aula 12 - Páginas Internas I

Nesta vídeo aula criaremos a página interna do nosso website. Para tanto faremos uma cópia da index.php e renomearemos para sobrenos.php. Podemos fazer a cópia visto que vários códigos da página inicial se repetirão na sobrenos.php.

O primeiro passo é modificar o title, a description e a keywords.

Excluiremos as divs de slides, uma vez que nas páginas internas não teremos slideshow e sim um banner. Nesse sentido criaremos a div ind-banner.

<div class="ind-banner">
    <picture>
        <source media="(max-width: 480px)" srcset="../images/mobile-bannersobrenos.jpg">
        <source media="(min-width: 481px) and (max-width: 768px)" srcset="../images/tablet-bannersobrenos.jpg">
        <source media="(min-width: 769px)" srcset="../images/desktop-bannersobrenos.jpg">
        <img src="../images/mobile-slide3.jpg" alt="Banner Sobre Nós - WEF Veículos" title="Banner Sobre Nós - WEF Veículos">
    </picture>
</div>

Apagaremos também as divs de anúncios, uma vez que nas páginas internas não haverão anúncios.

Após isso desenvolveremos nossos banners. Os banners devem ser desenvolvidos em um programa de designer. No caso utilizei o CorelDraw. Eu selecionei alguns tamanhos de imagens que julgo ser interessantes para utilização no website.

No CorelDraw utilizaremos a ferramenta powerclip para posicionar as imagens dentro dos elementos geométricos. Exportaremos como jpg cada uma das fotos (mobile, tablet e desktop).

Dentro das tags main, criaremos a parte do texto responsivo.

<div class="TextoResponsivo">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias aliquam autem dolores ex fugit illum maxime molestias nisi, nobis nostrum pariatur provident rerum, tempora vel veritatis voluptates. Nostrum, qui.<br>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum distinctio dolores, earum ex excepturi, facere ipsam iure modi molestias nisi perspiciatis sapiente sed soluta tempora vitae. Asperiores ex officiis voluptatum!<br>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi, asperiores delectus distinctio dolor ea facilis illum impedit inventore natus tempora unde, vero. Consectetur eligendi enim error maxime quasi veritatis.
</div>

Na próxima aula estilizaremos nosso banner, nosso texto responsivo e aprenderemos a colocar os plugins do Facebook.