A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

Atividade 5 Objetivos: Conhecer as regras CSS width, margin-left:auto e margin-left:right e verificar que elas não funcionam no IE a menos que coloquemos.

Apresentações semelhantes


Apresentação em tema: "Atividade 5 Objetivos: Conhecer as regras CSS width, margin-left:auto e margin-left:right e verificar que elas não funcionam no IE a menos que coloquemos."— Transcrição da apresentação:

1 Atividade 5 Objetivos: Conhecer as regras CSS width, margin-left:auto e margin-left:right e verificar que elas não funcionam no IE a menos que coloquemos uma tag no alto da página (mesmo que não saibamos direito o que ela significa). Atividade 6 Objetivo: Brincar um pouco com as cores, antes de compreender totalmente os aspectos técnicos envolvidos. O exemplo vai consistir em mudar a propriedade color de e background-color de Atividade 7 Objetivo: Montar uma barra de navegação horizontal. Conhecer as tags e

2 Atividade 5 Partiremos do arquivo teste02.html, usado na atividade 4. Salve-o como teste03.html. A regra CSS que utilizamos era: body { font-size: 18px; } Que define que o tamanho da fonte é 18px. Vamos acrescentar uma regra a mais: body { font-size 18px; width: 800px; } width em inglês significa largura. Estamos definindo uma largura de 800px para o corpo de nossa página web.

3 Teste no Internet Explorer – não vai funcionar. Teste em qualquer outro navegador – funciona. Isso é normal em desenvolvimento web. Cada empresa lança seu navegador com características próprias. Para que a propriedade width funcione no IE, adicione a seguinte tag no alto da página: Pode copiar e colar, não é necessário digitar tudo isso. Também falaremos sobre o significado desta tag no futuro; por enquanto, basta saber que é uma tag que informa ao navegador qual versão de HTML estamos usando. Agora que nosso tem uma largura, podemos centralizá-lo na tela. Acrescente mais duas linhas de CSS: body { font-size:18px; width: 800px; margin-left:auto; margin-right:auto; }

4 margin-left signifca margem esquerda e margin-right significa margem direita. auto siginifica automático Estamos dizendo ao navegador que: 1) deixe nosso com uma largura de 800px 2) crie margens à esquerda e à direita de um tamanho automaticamente ajustado ao tamanho da tela. Quer entender melhor? Deixe apenas margin-left: auto (apague a linha margin-right. O navegador vai criar uma margem à esquerda de um tamanho automaticamente ajustado, de modo a jogar o para a direita. Deixando apenas margin-right:auto, o navegador vai... ah, você já pegou a idéia.

5 Atividade 6 Vamos trocar a cor de fundo do. Insira mais uma linha de código, de modo que nosso CSS para o body fique assim: body { font-size:18px; width: 800px; margin-left:auto; margin-right:auto; background-color:darkgray; } A página (o body, o corpo da página), deve ficar cinza escuro (darkgray). Agora vamos mudar a cor de texto do título: insira uma linha a mais no CSS do para que ele fique assim: h1 { font-size:700%; text-align:center; color:white; }

6 Se tudo deu certo até aqui, sua página deve estar com esta aparência:

7 Dê uma olhada nas páginas da w3schools.com: - CSS colors - CSS colors names Lá você vai encontrar listas enormes de opções de cores. Algumas representadas por números (antecedidos por # como #001122) e outras representadas por nomes como black ou red. Experimente trocar darkgray e white por alguns nomes ou números destas listas. Por exemplo: body { font-size:18px; width: 800px; margin-left:auto; margin-right:auto; background-color:blue; } h1 { font-size:700%; text-align:center; color:#CC3300; } Mais adiante falaremos mais sobre os aspectos técnicos deste tipo de código.

8 Atividade 7 Vamos incluir uma pequena barra de navegação no alto da página. Insira dentro da tag o seguinte código: Pagina inicial Sobre mim Contato Verifique na apostila o significado destas tags. Elas representam uma lista. Uma lista não-ordenada. ul significa unordered list. Cada uma das tags são um list item, um item da lista. Experimente trocar ul por ol como no exemplo abaixo: Pagina inicial Sobre mim Contato ol significa ordered list. O navegador vai colocar números na frente de cada uma das.

9 Em nossa barra de navegação vamos usar uma lista não ordenada. Em vez de números, o navegador coloca bolinhas na frente das. Sua página deve ter ficado assim:

10 Agora o truque vai ser aplicar CSS para que esta lista fique com a aparência de uma barra de navegação. Vamos começar tirando as bolinhas da frente das. Insira o seguinte código CSS em seu arquivo (não se esqueça que todos os códigos CSS têm de estar dentro da tag ). ul{ list-style:none; } Estamos dizendo que, para nossa ul, não queremos nenhum estilo (none). Agora vamos centralizar a lista na tela. Acrescente mais esta linha: ul{ list-style:none; text-align:center; }

11 Sua página deve ter ficado assim:

12 O próximo passo é fazer as ficarem uma ao lado da outra, em vez de uma em cima da outra. Vamos portanto inserir um código CSS para as li: li { display: inline; } Estamos dizendo ao navegador que exiba as enfileiradas, em linha (inline). O resultado deve ser:

13 Finalmente vamos dar um espaço entre as, usando um código CSS que já utilizamos no, o margin-right. Insira mais esta linha: li { display: inline; margin-right: 50px; } E o resultado será:

14 Pausa!! Nosso curso está bastante focado em faça isso, agora faça aquilo. É porque está no começo. O melhor a fazer neste ponto é reler o primeiro slide - onde estão os objetivos de cada atividade - e avaliar o quanto você atingiu estes objetivos. Com o avançar das aulas vamos esclarecendo e detalhando mais os conceitos. Também vamos nos preparar para ferramentas mais avançadas do que o simples bloco de notas.


Carregar ppt "Atividade 5 Objetivos: Conhecer as regras CSS width, margin-left:auto e margin-left:right e verificar que elas não funcionam no IE a menos que coloquemos."

Apresentações semelhantes


Anúncios Google