AD1- CPW

...

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 de Estilo da Página Viagem

FORMULÁRIOS COM NOVOS ELEMENTOS

Nosso site termina com duas páginas de formulário. Para cria-los, devemos utilizar os elementos <fieldset> e <legend> para organizar os seus campos logicamente e para compor o seu visual. Não devemos esquecer também os elementos <label> para ligar os textos de identificação com os campos do formulário.

O posicionamento dos campos do formulário sempre foi uma tarefa complicada. Antigamente, utilizavam-se tabelas sem bordas para fazer este posicionamento e definir o layout. A tendência hoje em dia é evitar o uso de tabelas para posicionamento e utilizar CSS para este fim.

Nos nossos formulários devemos também utilizar, sempre que possível, os novos elementos presentes no HTML5, mesmo que nem todos os navegadores estejam atualmente preparados para aproveitar todo o potencial destes elementos. Está disponibilizado na seção “textos” da quinta semana (Formulários) material para que você possa implementar seus formulários com as novidades do HTML5.

DICA IMPORTANTE: Não esqueça que o atributo nome deve estar definido em todos os elementos do formulário.

5. A Fig. 6 mostra a página que será aberta quando o link “Compras” for selecionado na página da segunda questão. A página utiliza as mesmas cores e estilos definidos para as páginas das questões anteriores e alguns novos estilos. Utilizando tags como <label>, <fieldset>, <legend>, <form>, <textarea>, <select>, <option> e <input/>, faça o formulário de modo que o posicionamento de seus elementos seja como o mostrado na figura. A fig. 7 mostra o conteúdo de cada uma das três listas de seleção do formulário. Defina o atributo readonly nos campos dentro do fieldset “selecionado”, na lista de compras e no campo ao lado do label “total”. Apenas o interior da tag section foi modificado em relação à página da segunda questão. A descrição dos novos estilos está no quadro 5 e eles devem ser adicionados ao arquivo CSS usado na questão anterior. [2 pontos]

Fig. 6 – Interior da tag section da página do Link Compras

Fig. 7 – Listas de seleção do formulário

POSICIONAMENTO DE FIELDSETS

<fieldset> Margem variável (20px 10px 0px 10px).

IDENTIFICADORES PARA ELEMENTOS ÚNICOS

fsSelec Utilizado no fieldset de legenda “selecionado”. Largura de 94%, altura de 80px e margem 0px.

txtDesc Campo de entrada de texto readonly no fieldset “selecionado”. Tem largura de 100% e comportamento de elemento de bloco (display com valor block).

lisPedidos Área de entrada de textos para a lista de pedidos. Largura de 260px, altura de 180px e preso ao lado direito do formulário (float com valor right).

POSICIONAMENTO E TAMANHO DE ELEMENTOS DO FORMULÁRIO

botoes Botões de envio e limpeza colocados dentro de um <div> com alinhamento de texto à direita e margem variável (20px 10px 0px 10px).

labVal200Esq Label com elemento de entrada alinhado à esquerda. Largura de 200px, altura de 40px, margem do topo (margin-top) de 15px e preso ao lado esquerdo do formulário (float com valor left).

labVal200Dir Label com elemento de entrada alinhado à direita. Largura de 200px, altura de 40px, margem do topo (margin-top) de 15px e preso ao lado direito do formulário (float com valor right).

Val110Dir Elemento da última coluna grudado à direita do formulário (float com valor right) e com largura de 110px.

Quadro 5 - Classes e identificadores da Página

6. A Fig. 8 mostra o interior da tag section da página que será aberta quando o botão “Continuar” for selecionado na página da questão anterior. A página utiliza as mesmas cores e estilos definidos para as páginas das questões anteriores e alguns novos estilos. Utilizando tags como <label>, <fieldset>, <legend>, <form> e <input/>, faça o formulário de modo que o posicionamento de seus elementos seja como o mostrado na figura. Apenas o interior da tag section foi modificado em relação à página da segunda questão. Para esta página foram criadas novas classes de estilo, muito parecidas com as criadas para o formulário anterior, mas com alguma diferença principalmente em termos de largura. A descrição das novas classes de estilos está no quadro 6 e eles