Download - AD1_CPW_2014_2_Gabarito
Fundao CECIERJ - Vice Presidncia de Educao Superior a Distncia
Curso de Tecnologia em Sistemas de ComputaoDisciplina Criao de
Pginas de WEB Gabarito AD1 2 semestre de 2014. Observaes
importantes:
1.Estaavaliaoconsistenodesenvolvimentodositedeumalivraria,ondeo
usurio pode comprar livros no formato impresso ou e-book.
2.Asimagensutilizadasnaspginasdeexemploestarodisponveispara
download na plataforma em breve.Voc podeutilizar outras imagens
desde que respeite o layout estabelecido em cada questo.
3.Aresoluodomonitorouotamanhodajaneladonavegadorondeas
pginasseroexibidasnotemimportncia.Nasfigurasilustrativasdas
questes,ajaneladonavegadorfoidimensionadaparaexibirumefeito
visualquesuapginadevereproduzir,quandodimensionadadeforma
semelhante. 4.Fazer as ADs muito importante, no apenas pela nota,
mas principalmente
pelaexperinciaquepermitirummelhordesempenhonasavaliaes
presenciais.OsassuntosabordadosnaADpodemcairnaprovapresencial mesmo
no tendo sido abordados nos vdeos ou no material escrito.
5.ATENO:Aavaliaoindividual.Casoexistamduasoumais
implementaesexcessivamentecoincidentes,independentedequalquer
motivo, todas as avaliaes envolvidas recebero nota ZERO!
6.NoseroaceitostrabalhosAPENASempapel.Sedesejaroalunopode
TAMBMentregarumalistagemdasuaavaliao.imprescindvelqueo tutor receba
todos os arquivos que compem o site. A entrega destes arquivos deve
ser feita atravs da plataforma na forma de um arquivo de extenso
zip. Oarquivozipdeveconterosarquivoshtml,csseosarquivosdeimagem
individualizados (e no tudo junto num arquivo pdf). 7.No sero
aceitos trabalhos em arquivos de texto DOC ou PDF. Os arquivos
HTML, JS ou CSS devem estar individualizados (mesmo que agrupados
num ZIP) para que o tutor possa testar seu site. PGINA COM LAYOUT
BASEADO EM TABELA
1.EscrevaocdigonecessrioparacriarestapginamostradanaFig.1.O
posicionamentodoselementosnapginadeveserfeitoutilizandoumatabeladebordas
invisveis. Os textos da pgina devem utilizara fonte verdana ou,
casoeste no esteja presente (como no Linux), o fonte liberation
(fonte mostrado na figura). As referncias
domenuapontamrespectivamenteparaaspginas:bondeler.html,generos.html,
formatos.html,cadastro.htmlecompras.html.Oslinksdomenuestonumalistano
numerada, com cada item indicado por um crculo vazado (circle). A
seleo de um link
devecausaraaberturadapginacorrespondenteemumanovajaneladonavegador(ou
novo tab). Use uma tag para as informaes de localizao (endereo,
telefone e e-mail). Uma imagem no formato PNG (bondeler_tira.png)
foi utilizada para o logotipo
dalivrariaexibidonocantosuperioresquerdodapginaAscoresutilizadasforam:
Fundo-#FFF077,Texto-#0000FF,Link-#0000FFeLinkVisitado-#0000AA. [1,5
pontos] Bonde Ler Via literria 234
Tel: (21) 1234-5678
[email protected]
O livro que voc procura est aqui!
- Inicial
Generos
Formatos
Cadastro
Compras O maior acervo de livros da internet, com osmelhores
preos.
Encomende seu livro e ns enviamos pelo correio
ou faa download da verso e-book PGINA COM CSS E ESTRUTURA
HTML5
Ofuturochegouaoseusite.LeiaotextoCaminhoatoHTML5disponibilizadona
seo textos da segunda semana para que voc possa implementar uma
nova verso de
suapginainicialetodasasdemaispginasdotrabalho.recomendveltambmque
voc tenha lido o material Folhas de Estilo. 2.Faa uma nova
implementao da pgina inicial da loja, desta vez utilizando as novas
tagsdeestruturadoHTML5(Fig.2).Aaparnciadeveserdefinidaporestilos
armazenados em um arquivo de extenso css (no devem ser usada na
pgina atributos e
tagsobsoletas).Paraestapginaforamcriadascincoclassesdeestilo:ender,apres,
imgLogo e sobimagem. Alm disso, as tags , , , e
tiveramsuaaparnciamodificada.Adescriodoestiloquedeveseraplicadoaestas
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. [2 pontos] Arquivo CSS: /* * Estilo Geral */
body { color: #0000FF; font-size: 16px; background-color: #FFF077;
font-family: verdana,liberation; } a:link{ color:#0000FF;
text-decoration:none; } a:visited { color:#0000AA;
text-decoration:none; } ol, ul { line-height: 200%;} /* * Estilo
Sees */ header {display:block;margin-bottom: 1px; } nav {
display:block;width: 20%;float: left; } section {
display:block;width: 77%; float: right; } /* * Estilo Header */
.ender { float: right; text-align: right; font-size:12px;
line-height: 150%;} img.imgLogo { padding-bottom:
15px;border-bottom: 3px solid; margin-bottom: 6px; } .sobimagem {
color: #008030; font-weight: bold; } /* * Estilo Nav */ nav ul {
color: #0000FF; margin-top: 30px; list-style-type: circle;}
/*************************************** * Estilo Seo Apresentao */
div.apres { text-align: center; } Arquivo HTML: Via literria
234
Tel: (21) 1234-5678
[email protected]
O livro que voc procura est aqui!
- Inicial
Gneros Formatos Cadastro Compras O maior acervo de livros da
internet, com osmelhores preos.
Encomende seu livro e ns enviamos pelo correio
ou faa download da verso e-book VRIOS TIPOS DE LISTA 3.A
Fig. 3 mostra a pgina que ser aberta quando o link Gneros for
selecionado na pgina da segunda questo. A pgina utiliza os mesmo
estilos da questo anterior, com os
acrscimosdaclasselistaGeneros(listanumrica)earedefiniodoestilodatag
- quando dentro de listaGeneros. A descrio destes novos estilos est no quadro3 e eles devemseradicionadosaoarquivoCSSusadonaquestoanterior.Apenasointeriorda tag section foi modificado em relao pgina da segunda questo [1,5 pontos] Acrescentar no Arquivo CSS: /*************************************** * Estilo Seo Generos */ .listaGeneros { color: #008030; border:2px solid #005500;margin:30px 10px 10px 10px; padding: 10px 10px 10px 50px; background-color: #FFFFFF; } .listaGeneros ul { color: #880088; list-style-type: square;} Arquivo HTML:
- Literatura Estrangeira
- A Menina que Roubava Livros
- A Culpa das Estrelas
- Literatura Brasileira
- Capites da Areia - Ed. Bolso
- Um Certo Capito Rodrigo
- Histria
- Maldita Guerra
- Gnero Ttulo Formato
- Impresso Digital
- Literatura
Estrangeira A Menina Que Roubava Livros R$ 26,80 R$ 22,41 - A Culpa das Estrelas R$ 19,80 R$ 16,92
- Literatura
Brasileira Capites da Areia - Ed. Bolso R$ 14,50 --- - Um Certo Capito Rodrigo R$ 29,00 R$ 18,53
-
Histria Maldita Guerra R$ 77,00 --- FORMULRIOS COM NOVOS ELEMENTOS Nossositeterminacomduaspginasdeformulrio.Paracria-los,devemosutilizaros elementoseparaorganizarosseuscamposlogicamenteepara compor o seu visual. No devemos esquecer tambm os elementos para ligar os textos de identificao com os campos do formulrio. Oposicionamentodoscamposdoformulriosemprefoiumatarefacomplicada. Antigamente, utilizavam-se tabelas sem bordas para fazer este posicionamento e definir o layout.A tendncia hoje em dia evitar o uso de tabelas para posicionamento e utilizar CSS para este fim.Nosnossosformulriosdevemostambmutilizar,semprequepossvel,osnovos elementospresentesnoHTML5,mesmoquenemtodososnavegadoresestejam atualmentepreparadosparaaproveitartodoopotencialdesteselementos.Est disponibilizado na seo textos da quinta semana (Formulrios) material para que voc possa implementar seus formulrios com as novidades do HTML5. DICA IMPORTANTE: No esquea que o atributo nome deve estar definido em todos os elementos do formulrio. 5.AFig.5mostraointeriordatagsectiondapginaqueserabertaquandoolink Cadastroforselecionadonapginadasegundaquesto.Apginautilizaasmesmas coreseestilosdefinidosparaaspginasdasquestesanterioresealgunsnovosestilos. Utilizando tags como , , , , e,faaoformulriodemodoqueoposicionamentodeseuselementosseja como o mostrado na figura. Apenas o interior da tag section foi modificado em relao pgina da segunda questo. A descrio dos novos estilos est no quadro 5 e eles devem ser adicionados ao arquivo CSS usado na questo anterior. [1,5 pontos] Acrescentar no Arquivo CSS: /*************************************** * Estilo Formulrio Cadastro */ fieldset { margin: 20px 10px 0px 10px; }
.botoes { margin:20px 10px 0px 10px; text-align: right; }
.fsLinha { width: 470px; margin-bottom: 6px; }
.colPri { float: left; width: 90px; display: block; } .elemDir { float: right;display:block; }
.inpGrande{width: 370px;} .inpMedio{width: 120px;}
.numDD {width:30px;} .numQD {width:50px;}
.fsEsq { float: left; display: inline; margin: 0px 0px 0px 0px; } .fsDir { float: right; display: inline; margin: 0px 0px 0px 0px; } Arquivo HTML: Identificao E-mail: Senha: Confirme: Dados Pessoais Nome: Endereo:
Telefone: Celular: Nacimento: / / Sexo: Masculino Feminino 6.AFig.6mostraointeriordatagsectiondapginaqueserabertaquandoolink Comprasforselecionadonapginadasegundaquesto.Apginautilizaasmesmas coreseestilosdefinidosparaaspginasdasquestesanterioresealgunsnovosestilos. Utilizandotagscomo, , , , , , , e , faa o formulrio de modo que oposicionamentodeseuselementossejacomoomostradonafigura.Definaoatributo readonlynocampovalor.Apenasointeriordatagsectionfoimodificadoemrelao pgina da segunda questo. Para esta pgina foram criadas novas classes de estilo, muito parecidascomascriadasparaoformulrioanterior,mascomalgumadiferena principalmenteemtermosdelargura.Adescriodasnovasclassesdeestilosestno quadro6eelesdevemseradicionadosaoarquivoCSSusadonaquestoanterior. [1,5 pontos] Acrescentar no Arquivo CSS: /*************************************** * Estilo Formulrio Compras */
.fsEsqCompras { float: left; display: inline; } .fsDirCompras { float: right; display: inline; } .linhaCompras { width: 500px; margin-bottom: 6px; }
.colPriCompras { float: left; width: 86px; display: block; }
.inpEmail {width: 200px;} Arquivo HTML: Identificao E-mail: Senha:
Se voc ainda no tem cadastro clique aqui! Lista de
Compras e Pagamento Impresso E-book A Menina que Roubava Livros A
Culpa das Estrelas Capites da Areia - Ed. Bolso Um Certo Capito
Rodrigo Maldita Guerra
Dados do Carto Bandeira: Visa Master Amex
Validade: /
Nmero:
Valor: R$