AD1- CPW
Por: Rosângela Freires • 2/3/2016 • Trabalho acadêmico • 1.876 Palavras (8 Páginas) • 855 Visualizações
PÁGINA COM LAYOUT BASEADO EM TABELA
1. Escreva o código necessário para criar esta página mostrada na Fig. 1. O posicionamento dos elementos na página deve ser feito utilizando uma tabela de bordas invisíveis. Os textos da página devem utilizar a fonte “verdana” ou, caso este não esteja presente (como no Linux), o fonte “liberation” (fonte mostrado na figura). As referências do menu apontam respectivamente para as páginas: MalaComAlca.html, Mochila.html, Viagem.html, Acessorios.html e Compras.html. Os links do menu estão numa lista NÃO numerada, com cada item indicado por um quadrado (square). A seleção de um link deve causar a abertura da página correspondente em uma nova janela do navegador (ou novo tab). Use uma tag <address> para as informações de localização (endereço, telefone e email). Junto com o texto de apresentação aparece a imagem MalaRodas.png centralizada. As cores utilizadas foram: Fundo - #3C1808, Texto - #F3EDA3, Link - #FFFF33 e Link Visitado - #F3EDA3. [1,5 pontos]
2.
Fig. 1 – Página do Site da loja Mala Com Alça
PÁGINA COM CSS E ESTRUTURA HTML5
O futuro chegou ao seu site. Leia o texto “Caminho até o HTML5” disponibilizado na seção “textos” da primeira semana para que você possa implementar uma nova versão de sua página inicial e todas as demais páginas do trabalho. É recomendável também que você tenha lido o material “Folhas de Estilo”.
2. Faça uma nova implementação da página inicial da loja, desta vez utilizando as novas tags de estrutura do HTML5 (Fig. 2). A aparência deve ser definida por estilos armazenados em um arquivo de extensão css (não devem ser usadas na página atributos e tags obsoletas). Para esta página foram criadas cinco classes de estilo: ender e apres. Além disso, as tags <body>, <header>, <nav>, <section>, <ol>, <ul> e <a> tiveram sua aparência modificada. A descrição do estilo que deve ser aplicado a estas classes e tags está no quadro 1 logo abaixo. No quadro 2 é mostrado o estilo das tags de estrutura para produzir o posicionamento mostrado na figura. [1,5 pontos]
Fig. 2 - Página do site na nova implementação
DICA: As tags <hr/> foram substituídas pela definição de bordas. DICA: A página precisa conter as novas tags header, nav e section (não necessariamente nesta ordem).
<body> Cor de fundo #3C1808, cor de texto #F3EDA3, tamanho de fonte de 16px e fontes Verdana e Liberation.
<a> Sem sublinhado, cor de link #FFFF33 e link visitado #F3EDA3.
<ol> e <ul> Espaçamento entre as linhas (line-height) de 200%
<ul> dentro de <nav>
Cor de texto #F3EDA3, quadrado como caractere de início de elemento de lista e margem superior de 30px.
ender Informações de localização (endereço, telefone e e-mail). Texto alinhado a direita, tamanho de fonte 16px, espaçamento entre as linhas (line-height) de 150% e elemento todo colado na direita da janela (float com valor right).
apres Alinhamento de texto centralizado (center).
Quadro 1 – Classes de Estilo da Página
header { display:block; margin-bottom: 1px; } nav { display:block; width: 20%; float: left; } section { display:block; width: 77%; float: right; }
Quadro 2 – Estilo das divisões padrão da página
VÁRIOS TIPOS DE LISTA
3. As Fig. 3 e 4 mostram a página que será aberta quando os links “Mochila” e “Acessórios” forem selecionados na página da segunda questão. Em todas as páginas a partir de agora foi acrescentado um logo à esquerda do header (arquivo MalaRodasPeq.png). As páginas utilizam os mesmo estilos da questão anterior, com o acréscimo da classe imgLogo. A descrição deste novo estils está no quadro 3 e ele deve ser adicionado ao arquivo CSS usado na questão anterior. [2 pontos]
Fig. 3 – Página do Link Mochila
Fig. 4 –Página do Link Acessórios
imgLogo Borda inferior solida e com 3px, margem inferior de 6px e espaçamento do conteúdo com a borda inferior da célula (paddingbottom) de 15px.
Quadro 3 - Classes de Estilo da Imagem à Esquerda do Header
TABELA COMUM COM JUNÇÃO DE CÉLULAS
4. A Fig. 5 mostra o interior da section da página que será aberta quando o link “Viagem” for selecionado na página da segunda questão. Esta página utiliza os mesmo estilos da questão anterior, com os acréscimos de alguns estilos de tabela. A apresentação das máquinas é feita utilizando uma tabela com bordas de acordo com o estilo definido como tabInfo. A tabela têm células td e th modificadas conforme o contexto e, além da classe linTH (utilizada nas células de título do topo da tabela), foram também definidas as classes colTH (utilizada nas células de título da primeira coluna) e preco (utilizada para pintar os preços de vermelho). Apenas o interior da tag section foi modificado em relação à página da segunda questão (header e nav permanecem como na questão anterior, como mostra a fig. 5). A descrição destes novos estilos está no quadro 4 e eles devem ser adicionados ao arquivo CSS usado na questão anterior. [1,5 pontos]
Fig. 5 – Interior do Section da página do Link Viagem
tabInfo Borda sólida e fina (DICA: border-collapse com valor collapse), margem superior de 6px, cor de fundo #FFFFFF, cor de texto #573218 e fontes arial e ubuntu.
ESTILOS DENTRO DE tabInfo
<td> e <th> Borda de 2px, sólida e de cor #664422. Espaçamento do conteúdo com a borda da célula (padding) variável (6px 12px 6px 12px).
linTH Cor de texto #FFFFFF, cor de fundo #907968, alinhamento vertical de texto no meio da célula (vertical-align com valor middle) e alinhamento horizontal de texto centralizado.
colTH Cor de texto #573218, cor de fundo #EACEAC e alinhamento de texto a esquerda.
preco Cor de texto #CC0000, texto em negrito (bold) e alinhamento vertical de texto no meio da célula (middle).
Quadro 4- Classes
...