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
TABELA COMUM COM JUNO DE CLULAS 4.A Fig. 4 mostra a pgina que ser
aberta quando o link Formatos for selecionado na pgina da segunda
questo. A pgina utiliza os mesmo estilos da questo anterior, com os
acrscimosdeestiloparaastabelas.Aapresentaodoslivrosdisponveisfeita
utilizandoumatabelacombordasdeacordocomoestilodefinidocomotabLivros.A
tabelatmclulastdethmodificadasconformeocontextoetrsnovasclasses:linTH
(utilizada nas clulas de ttulo do topo da tabela), colTH (utilizada
nas clulas de ttulo da primeira coluna) e preco (utilizada para
pintar os preos de vermelho). Apenas o interior da tag section foi
modificado em relao pgina da segunda questo. A descrio destes
novosestilosestnoquadro4eelesdevemseradicionadosaoarquivoCSSusadona
questo anterior.[2 pontos] Acrescentar no Arquivo CSS:
/*************************************** * Estilo Seo Formatos */
#tabLivros { color: #006600; margin-top: 30px; border-collapse:
collapse; background-color: #FFFFFF;font-family: "arial,ubuntu"; }
#tabLivros td, #tabLivros th { border:2px solid #005500; padding:
8px 14px 8px 14px; } th.linTH { color: #FFFFFF; vertical-align:
middle; background-color: #0044AA; } th.colTH { color: #FFFFFF;
text-align: left; background-color: #0088FF; } #tabLivros .preco {
color: #CC0000; vertical-align: middle; } Arquivo HTML:
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; }
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
*/
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
