1) Criar o código HTML para construir a página representada pela imagem abaixo.

Tamanho: px

Começar a partir da página:

Download "1) Criar o código HTML para construir a página representada pela imagem abaixo."

Maria das Neves Martins Valverde
8 Há anos
Visualizações:

1 1) Criar o código HTML para construir a página representada pela imagem abaixo. 2) Código HTML puro (criar arquivo index.html): <title>brasil Motores Motores diesel para uso automotivo, veicular, marítimo, agrícola e industrial</title> <ul> <li><a href="index.html">home</a></li> <h2>os melhores motores<br />diesel do Brasil</h2> <p>brasil Motores é líder no mercado brasileiro de motores baseados em tecnologia diesel.</p> <h2>ampla gama de tamanhos e<br />potências</h2> <p>de 2,5 a 9 litros e de 50 a 375 cv de potência (veicular, agrícola, industrial e marítimo).</p> <a href="produtos.html"> conheça nossa linha completa de motores</a> <p><img src="motor home.jpg" alt="imagem de um motor diesel" /></p> 1

html">home</a></li> <h2>os melhores motores<br />diesel do Brasil</h2> <p>brasil Motores é líder no mercado brasileiro de motores baseados em tecnologia diesel.

2 3) Desejamos o seguinte layout div TUDO (envolve todo o conteúdo) div TOPO (título e menu e links) div PRINCIPAL (texto Os melhores motores... etc. e link conheça nossa linha completa de motores ) RODAPÉ ( Copyright... ) Alteração no código HTML para inclusão das DIVs que permitirão a geração do layout indicado acima. Inclua as DIVs a seguir nas linhas adequadas do arquivo index.html <div id="principal"> <div id="rodape"> 2

e link conheça nossa linha completa de motores ) RODAPÉ ( Copyright.

3 4) Formatação e Layout da página (tags HTML e div s) Usando CSS: A. Preparar o arquivo index.html: I. Incluir a indicação do arquivo CSS em head do arquivo index.html : II. Incluir id na lista não ordenada (lista com links) para poder fazer referência no arquivo CSS: id="menu" B. Criar o arquivo.css: Explicação 1: Atenção para as configurações da lista não ordenada (menu) para que fique em linha: Explicação 2: Atenção para as configurações para criar gradiente com duas cores: background-image: linear-gradient(to top, white, purple); Obs.: to right, to left, to bottom Gradiente com mais de duas cores: background-image: linear-gradient(to top, white, purple, yellow); 3

css: Explicação 1: Atenção para as configurações da lista não ordenada (menu) para que fique em linha: Explicação 2: Atenção para as configurações para criar gradiente

4 Copie o código CSS a seguir e complete as lacunas (salve com o nome correto): body { :#ccc; /* cor do fundo padrão cinza claro */ :#333; /* cor da fonte quando não especificado ou texto direto no body */ margin: 0; padding: 0; : 12px Verdana, Arial, Helvetica, sans serif; #tudo { : 980px; /* largura */ : 0 auto; /* zero e auto divide proporcionalmente o que sobra dos 980px */ :#fff; /* fundo branco */ { :58px; :#f60; /* um tipo de vermelho\laranja para o fundo */ #topo { font size: 28px; /* sem este parâmetro estaria no tamanho padrão do h1 */ { /* fundo e altura do menu */ :red; height: 21px; # li { display: inline; /* os itens da lista ficam em linha e não abaixo do anterior */ text transform: uppercase; /* converte a fonte em maúsculo */ font weight: bold; /* negrito */ # a { : white; /* o texto indicativo do link na cor branca */ : 13px; /* sem este atributo estaria usando 12px definido no body */ right:18px; /* para aumentar a distância entre os itens do menu (links) */ text decoration: ; /* retira o sublinhado indicativo de link */ # a: { /* configuração específica para quando o cursor ficar sobre o item */ color: black; background color: #FFF68F; 4

$branco */ { :58px; :#f60; /* um tipo de vermelho\laranja para o fundo */ #topo { font size: 28px; /* sem este parâmetro estaria no tamanho padrão do h1 */ { /* fundo e altura do menu */ :red; height:$

5 #principal { background image: (to top, white, orange); /* o item acima cria um fundo em gradiente do branco ao laranja (no topo/top) */ : center; : 580px; /* altura da div chamada principal */ h2 { : 20px; /* mudando o tamanho padrão do h2 na div principal */ : 10px; /* padding (enchimento) faz o texto não ficar grudado no topo da div principal */ { /* colocar o conteúdo dos parágrafos da div principal em negrito */ font : ; #principal { : 40px; /* faz um arredondamento nos cantos da caixa */ transform: rotate(5deg); /* faz uma rotação de 5 graus na imagem */ { text align: ; /* nesta div o texto fica alinhado pela direita */ : 18px; background:#f60; C. Crie as 3 páginas restantes (chamadas no menu). ATENÇÃO: Note nas três páginas que apenas o conteúdo da div principal é alterado. Tudo é remontado, menu, rodapé, etc. (desta vez não utilizamos iframe). A. Arquivo quemsomos.html: <title>brasil Motores Motores diesel para uso automotivo, veicular, marítimo, agrícola e industrial</title> <ul id="menu"> <li><a href="index3.html">home</a></li> <div id="principal"> <h1>em CONSTRUÇÃO</h2> <h3>(quem SOMOS)</h3> <img src="emconstrucao.jpg"> 5

principal em negrito */ font : ; #principal { : 40px; /* faz um arredondamento nos cantos da caixa */ transform: rotate(5deg); /* faz uma rotação de 5 graus na imagem */ { text align: ; /* nesta div

6 <div id="rodape"> B. Arquivo produtos.html: <title>brasil Motores Motores diesel para uso automotivo, veicular, marítimo, agrícola e industrial</title> <ul id="menu"> <li><a href="index3.html">home</a></li> <div id="principal"> <h1>em CONSTRUÇÃO</h2> <h3>(produtos)</h3> <img src="emconstrucao.jpg"> <div id="rodape"> C. Arquivo contato.html: <title>brasil Motores Motores diesel para uso automotivo, veicular, marítimo, agrícola e industrial</title> <ul id="menu"> <li><a href="index3.html">home</a></li> 6

7 <div id="principal"> <h1>em CONSTRUÇÃO</h2> <h3>(contato)</h3> <img src="emconstrucao.jpg"> <div id="rodape"> D. Abra o arquivo index.html no Firefox, faça testes de navegação pelo menu e analise o resultado. 7

Documentos relacionados

Posicionamento e Layout com CSS

Posicionamento e Layout com CSS Esquemas de posicionamento: absolute e relative Construção de layouts com divs e regras CSS Existem quatro tipos de posicionamento em CSS: estático, relativo, absoluto