Ao projeto inciado na aula anterior, faça as seguintes alterações:

Transcrição

1 Atividade 4 Ao projeto inciado na aula anterior, faça as seguintes alterações: 1. Insira uma cor de fundo na página. 2. Google fonts Se nos basearmos apenas nas fontes que o usuário terá instaladas em sua máquina, teremos poucas opções para enriquecer nosso design. Felizmente, é possível usar uma fonte que não está na máquina do usuário! Podemos pedir para o navegador baixar a fonte necessária para nossa página com algumas linhas de CSS. A Google disponibiliza um serviço gratuito chamado Google Fonts que tem diversas fontes para baixarmos e usarmos em nossos sites. Esse serviço disponibiliza não apenas o arquivo da fonte em si como também o CSS necessário para o navegador baixar a fonte! Vamos, então, enriquecer nosso design! No arquivo CSS, use a fonte "Open Sans Condensed" para os títulos (h1 e h2) e a fonte "Crimson Text" para o texto. Já no cabeçalho do arquivo HTML utilize o código abaixo: <!-- carrega a fonte Crimson Text nas versões normal, itálico e negrito --> <link rel="stylesheet" href=" family=crimson+text:400,400italic,600"> <!-- carrega a fonte Open Sans Condensed na versão negrito, --> <!-- que é a única necessária para os cabeçalhos --> <link rel="stylesheet" href=" family=open+sans+condensed:700"> Em seguida, no arquivo bio.css, podemos usá-las em seus respectivos lugares. 3. Altere os itens do menu de navegação como listado abaixo: Home (link para index.html) Portfólio (link para portfolio.html) Sobre mim (link para bio.html) Blog (link para blog.html) Contato (link para contato.html)

2 4. Observando os links do menu podemos dizer que o site do João da Silva será composto de diversas páginas html. Vamos começar pela página do blog. Crie um novo arquivo blog.html. Nele, deve haver o seguinte texto: Blog O essencial de design responsivo Design responsivo tem ganho cada vez mais atenção como técnica de desenvolvimento de páginas web para dispositivos móveis. Mas como começar? Leia mais <!-- Deve ser um link, como não temos a página podemos usar href= # --> Por que fazer páginas acessíveis? Tem se falado cada vez sobre acessibilidade na web. Há diversas técnicas e diretivas a serem seguidas, inclusive da própria W3C. Mas vale a pena investir nisso? Leia mais <!-- Deve ser um link, como não temos a página podemos usar href= # --> JavaScript não obstrusivo JavaScript é uma linguagem essencial hoje em dia para criar páginas ricas, interativas e dinâmicas. Porém, há alguns cuidados que devem ser tomados ao colocarmos código JavaScript em nossas páginas. Leia mais <!-- Deve ser um link, como não temos a página podemos usar href= # --> Formate o texto usando HTML. Inclua a tag semântica main

3 5.O arquivo bio.css que fizemos terá as regras comuns a todas páginas. Sendo assim, usaremos ele também na página blog.html. Importe-o nessa página. 6.Altere para que o menu de navegação tenha a cor de fundo igual ao do h1, e a cor de texto #F2FFFC. O footer tenha a cor de fundo preta e a cor de texto #F2FFFC.

4 7. No conteúdo principal, a cor para os links deve ser # Observação: esta alteração não deve afetar os links do menu de navegação. Mude a fonte dos links do menu de navegação para usar a fonte "Open Sans Condensed". 8. Podemos controlar o sublinhamento de um texto usando a propriedade text-decoration. Se usarmos o valor none, o texto aparece sem sublinhado; se usarmos o valor underline, o texto aparece sublinhado. Sabendo disso, retire o sublinhado de todos os links do menu de navegação da página bio.html. Retire as marcações da lista do menu de navegação utilizando o atributo list-style. 9. Utilize o mesmo espaço interno utilizado nas citações para as tags footer e nav.

5 10. Para um texto ser agradável de ler, é bom que suas linhas não sejam muito largas. Então vamos aplicar essa ideia à nossa página: deixe o texto de dentro da tag <main> mais estreito, com 720 pixels de largura e centralizado. Para fazer isso, será necessário "embrulhar" o texto, sem a tag <h1>, numa <div>: <main> <h1>sobre mim</h1> <div> <p>moro em São Paulo...</p> <!-- resto do texto --> </div> </main> Essa tag <div> que deverá ter 720 pixels de largura. Para centralizá-la vamos pedir para o navegador redistribuir o espaço que sobra à direita da <div> após definirmos sua largura para 720 pixels. Para isso, usamos o valor auto tanto na margem esquerda como na direita. Não esqueça de fazer o mesmo na página blog.html. 11. Centralize os link do menu de navegação. Nosso objetivo agora é construir o layout abaixo:

6 12. Atribua a propriedade float: right ao menu de navegação e a imagem, e de acordo com seus conhecimentos faça com que fiquem como na imagem abaixo. 13. Agora atribua a propriedade float: left a tag main. Deve ficar assim: Precisamos lembrar que, sempre que transformamos um elemento em float, ele sai do fluxo da página, o que faz com que o resto do conteúdo suba. Neste caso, o rodapé subiu para ocupar o espaço entre os floats que criamos. Para resolver esse problema, basta lembrarmos da propriedade clear. Não queremos nenhum float em nenhum dos lados do nosso rodapé, então podemos declarar: footer { clear: both; }

7 Após isso precisamos alterar o tamanho que os elementos devem ocupar na tela. Se toda a tela tem o valor para a largura de 100%, vamos definir que o main ocupe a largura de 85% e a imagem e a nav ocupe a largura de 15%. 100% IMG MAIN NAV 85% 15% Porém ainda não conseguiremos deixar o layout assim, isto porque Um fato interessante para notar nesse desenho é que a largura e a altura são referentes a o conteúdo apenas. Mas os nossos elementos possuem os outros atributos como Padding, margin e border. Então nossos elementos ocupam um espaço maior do que 85% e 15%. Todas essas regras juntas formam o que chamamos box model ou, em português, "modelo de caixa", do CSS. Podemos dizer para o navegador mudar esse box model por meio da propriedade boxsizing. Portanto podemos inserir esta propriedade na tag nav: box-sizing: border-box;

8 14. Retire o espaço em branco entre o topo do navegador e o conteúdo da página. 15. Insira o menu de navegação e o rodapé na página blog.html.