Ol, pessoal.Continuando a srie Criando um Site Passo-a-Passo, aps termos visto alguns conceitos importantes, vamos colocar a mo na massa a partir de agora.Simularemos aqui, a criao de um site para uma locadora de vdeo, ok? Ento vamos l.1 BRIEFINGNome da Empresa CarlosHPS Vdeo-LocadoraRamo de Atividade Vdeo LocadoraPontos Fortes: Atendimento Promoes constantes Entrega em domiclio Catlogo virtualObjetivo: Disponibilizar o acervo de DVDs da CarlosHPS Vdeo-Locadora aos seus clientes e usurios em geral da Internet.Este seria um breve resumo do briefing da empresa. De posse dessas informaes, faz-se uma pesquisa de no mnimo 10 sites concorrentes ou no, do mesmo ramo de atividade para se ter uma noo do que j se aplica na web. Sem esquecer de tambm solicitarmos ao cliente, peas publicitrias, manual de identidade visual e tudo o que for possvel para a complementao do nosso conhecimento da empresa.2 MAPA DE SITE (Sitemap)Como tambm foi visto na 3 parte desta srie (Criando um Site Passo-a-Passo: Parte 3), aps esta pesquisa, criamos um esquema que ser manuseada e compreendida pelo cliente e pela equipe envolvida na implementao do projeto.Um mapa de site a representao grfica da estrutura de um website, do ponto de vista da distribuio do contedo atravs de pginas e do caminho mais simples (links) a ser percorrido pelo usurio para chegar pgina desejada.Vejamos como ficou o mapa da CarlosHPS Vdeo-Locadora:

Fig. 01: Mapa do site da CarlosHPS Vdeo-Locadora3 WIREFRAMEDigamos que seja o primo pobre do layoutrsrsO wireframe um esqueleto; uma estrutura simples que nos auxilia na produo do site, tornando o processo mais gil, padronizada e eficiente. Seu maior objetivo determinar onde cada contedo se encaixar no site, levando em considerao o grau de importncia com relao aos demais objetos que comporo o layout como um todo.Complicado?N nada!Veja o exemplo do wireframe bsico do nosso projeto:

Fig. 02: Wireframe bsico da CarlosHPS Vdeo-LocadoraLembrando que uma estrutura bsica. Caso haja necessidade, podemos detalhar mais. Fica a critrio da situao. isso a, pessoal.O site a ser montado ter este layout:

Fig. 03: Layout do site da CarlosHPS Vdeo-LocadoraQuem desejar criar seu prprio mapa de site e wireframe e quiser me enviar pra eu dar uma olhadinha, fiquem vontade.Prximo artigo (Criando um Site Passo a Passo: Parte 6), veremos sobre o fatiamento do layout da CarlosHPS Vdeo-Locadora e como montar sua estrutura bsica em HTML e CSS.At l.Na matria anterior (Criando um Site Passo a Passo: Parte 5), vimos como montamos o mapa do site e a estrutura (wireframe) bsica do layout da CarlosHPS Vdeo-Locadora. Agora, veremos como iniciar o desenvolvimento da 1 pgina do site utilizando o Dreamweaver e alguns conceitos de Tableless (XHTML e CSS).1 OrganizaoEstou utilizando a verso CS3 do Dreamweaver para desenvolver o site, portanto essencial para a organizao do projeto, que definamos a criao do site no aplicativo. Contudo, voc poder usar qualquer outro editor HTML ou at mesmo um editor de textos como o Bloco de Notas. O importante mesmo criar um diretrio especfico para os arquivos do projeto, juntamente com as pastas imagens e scripts.

Fig. 01: Criao do site no Dreamweaver2 Estudando a Estrutura do LayoutAo observarmos o layout, podemos dividi-lo em blocos horizontais de modo a facilitar a distribuio e organizao do nosso cdigo. Vejamos a descrio breve de cada setor:

Fig. 02: Partes do Layout Blocos DIV#geral - Bloco onde todo o contedo ser criado.#topo - Bloco onde inseriremos o menu, logotipo e a chamada principal do site.#conteudo - Bloco onde colocaremos o contedo do site juntamente com a barra lateral direita.#rodape - Bloco da base do site.3 Criando o Cdigo BsicoNo Dreamweaver (ou outro editor html/editor de texto), vamos criar a estrutura bsica de qualquer pgina HTML:?123456789101112131415

CONTEDO

Dando o ttulo ao site e inserindo as principais tags que representam os blocos de contedo, nosso cdigo ficar assim:?12345678910111213141516171819202122

Topo do Site

Contedo do Site

Rodap do site

4 Inserindo o CSSComo estamos iniciando ainda, para ir vendo os resultados assim que construmos o site, vamos criar a nossa folha de estilos paralelamente. O bsico est a embaixo. Apenas criei o essencial para facilitar a visualizao dos blocos.?123456789101112131415161718192021222324252627282930313233343536373839/*************************************************************************************Nome do Layout: CarlosHPS Vdeo-LocadoraURL do Layout: http://www.carloshps.com.br/blog/Descrio: Cdigo desenvolvido para o layout do site fctcio CarlosHPS Vdeo-LocadoraVerso: 1.7Criado em: 27/06/2008 | Caldas Novas GoisAtualizado em: 05/08/2012Autor: CarlosHPS Webdesigner*************************************************************************************//*Formatao bsica do layout****************************/body {background-color:#252525;color: #fff;font: 11px "Trebuchet MS", Calibri, Verdana, Arial;margin:0px;padding:0px;}/*Formatao bloco GERAL****************************/#geral {background-color: #81A49A;}/*Formatao bloco TOPO****************************/#topo {background-color: #7CA9B6;}/*Formatao bloco CONTEUDO****************************/#conteudo {background: #FF9900;}/*Formatao bloco RODAPE****************************/#rodape {background: #A94A4A;}

Agora, vamos vincular este arquivo (salvo como estilo.css) pgina criada anteriormente (salva como index.html).?12CarlosHPS Vdeo-Locadora

Vejamos o resultado no navegador:

Fig.03: Exibio nos navegadores F.Fox 3.0 e IE 7.0Uma observao conceitual: ID um identificador nico de elemento HTML, isto , ele no pode ser utilizado por nenhum outro elemento. As classes seguem o mesmo propsito das IDs, no podem conter caracteres especiais, espaos e cedilhas.Criando Site Passo a Passo - Parte 06 - Site ModeloDownload dos arquivos-fonte do tutorial Criando Site Passo a Passo - Parte 06

Download do Arquivo-FonteLogin RequiredBom, pessoal, disponibilizei o arquivo gerado neste artigo e no prximo tutorial, Criando um Site Passo a Passo: Parte 7, vamos inserir e formatar o menu alm de iniciarmos a insero das imagens.At l.Ol, pessoal.Em prosseguimento srie Criando um Site Passo a Passo, desenvolveremos neste tutorial a barra de navegao, juntamente com seus itens e inseriremos algumas imagens que comporo o layout da CarlosHPS Vdeo-Locadora.Pr-RequisitosPara quem est chegando agora, recomendo que veja, pelo menos as outras partes desta srie: Criando um Site Passo a Passo: Parte 6 Criando um Site Passo a Passo: Parte 51 Ajustes Gerais no CSSNa matria anterior, criamos um arquivo css para poder facilitar a visualizao dos blocos de contedo que compem o nosso layout. Portanto, vamos agora, fazer uns pequenos ajustes quanto s larguras e alturas das respectivas reas, e outras coisinhas mais Bloco #geral Esta seo a responsvel pela largura do nosso layout e tambm, do alinhamento geral do contedo. Portanto, inserindo novos atributos ao cdigo, ele dever ficar da seguinte maneira:?12345678/*Formatao bloco GERAL****************************/#geral {background-color:#009900;width: 950px;margin: 0px auto;position: relative;}

Bloco #topoNesta seo conter o logotipo do site e a barra de navegao. Este bloco ter uma altura de 100 px e uma imagem de fundo abaixo.

Vejamos a seguir:?1234567/*Formatao bloco TOPO****************************/#topo{background: #333333 url(../imagens/bg_topo.jpg) repeat-x;height: 100px;position: relative;}

O resultado at agora este:

Fig. 01: Topo alinhado e com imagem de fundo.Div #menuChegou a hora de criarmos a barra de navegao e os itens do menu. bastante simples, obviamente, pra quem conhece um pouco de html. Ento, vamos criar uma dentro da tag

, na pgina index.html e inserirmos uma lista como mostra o cdigo abaixo:?12345678910

• Home
• A Locadora
• Catlogo
• Promoes
• Cadastro
• Fale Conosco

Sendo assim, teremos a seguinte exibio no navegador:

Fig. 02: Menu em lista exibido no navegador.2 Formatao do MenuAgora que demos uma geral nos cdigos, vamos melhorar a barra de navegao. Para isso, basta inserirmos o cdigo abaixo na folha de estilos estilo.css.?1234567891011121314151617181920/*Formatao do MENU****************************/ul#menu {margin:-65px 0px 0px;padding:0px;position:absolute;}ul#menu li {display:inline;margin-right: 20px;}ul#menu li a {color:#F4F4F4;font: 14px Calibri, Verdana, Arial;text-decoration:none;}ul#menu li a.active, ul#menu li a:hover {border-top: 2px dotted #666666;color: #999999;}

A grosso modo, podemos identificar e esclarecer o cdigo da seguinte maneira: ul#menu Responsvel pelo posicionamento do itens do menu ul#menu li - Coloca os itens do menu que se encontram no formato de lista, na horizontal ul#menu li a - Formatao para os links do menu Sendo assim, teremos nossa barra de navegao com a seguinte formatao:

Fig. 03: Barra de menu formatada3 Inserindo logotipoPra concluirmos esta parte, vamos inserir o logotipo da vdeo-locadora:

Primeiramente, vamos colocar a div responsvel pela imagem, adequadamente na pgina index.html:?1234

E em seguida, ajustar o cdigo css:?12345678910111213/*Logotipo****************************/#logotipo {background: url(../imagens/logotipo.png) no-repeat top;clear: both;float: left;height:127px;left: 2px;margin-top: -90px;position: absolute;top: 102px;width:253px;}

Desta feita, obteremos esta configurao no navegador:

Fig. 04: Resultado final da configurao do topo.Bom, pessoal, abaixo segue a formatao da pgina index.html e estilo.css:index.html?1234567891011121314151617181920212223242526272829303132

CarlosHPS Vdeo-Locadora

• Home
• A Locadora
• Catlogo
• Promoes
• Cadastro
• Fale Conosco

Contedo do Site

Rodap do site

estilo.css?12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879/*************************************************************************************Nome do Layout: CarlosHPS Vdeo-LocadoraURL do Layout: http://www.carloshps.com.br/blog/Descrio: Cdigo desenvolvido para o layout do site fctcio CarlosHPS Vdeo-LocadoraVerso: 1.7Criado em: 27/06/2008 | Caldas Novas GoisAtualizado em: 05/08/2012Autor: CarlosHPS Webdesigner*************************************************************************************//*Formatao bsica do layout****************************/body {margin:0px;padding:0px;background-color:#252525;color: #666666;font: 11px "Trebuchet MS", Calibri, Verdana, Arial;}/*Formatao bloco GERAL****************************/#geral {background-color:#009900;width: 950px;margin: 0px auto;position: relative;}/*Formatao bloco TOPO****************************/#topo {background: #333333 url(../imagens/bg_topo.jpg) repeat-x;height: 100px;position: relative;}/*Formatao do MENU****************************/ul#menu {margin:-65px 0px 0px;padding:0px;position:absolute;right:0px;}ul#menu li {display:inline;margin-right: 20px;}ul#menu li a {text-decoration:none;color:#F4F4F4;cursor:pointer;font: 14px Calibri, Verdana, Arial;}ul#menu li a.active, ul#menu li a:hover {border-top: 2px dotted #666666;color: #999999;}/*Logotipo****************************/#logotipo {width:253px;height:127px;background: url(../imagens/logotipo.png) no-repeat top;clear: both;float: left;margin-top: -90px;position: absolute;left: 2px;top: 102px;}/*Formatao bloco CONTEUDO****************************/#conteudo {background: #FF9900;}/*Formatao bloco RODAPE****************************/#rodape {background: #CC0000;}

Na prxima matria, Criando um Site Passo a Passo: Parte 8, inseriremos o contedo central do site.At l, faam o download gerados at aqui.Criando Site Passo a Passo - Parte 07 - Site ModeloDownload dos arquivos-fonte do tutorial Criando Site Passo a Passo - Parte 07

Download do Arquivo-FonteLogin RequiredCarlosHPS Webdesigner 8)Ol, pessoal.Em prosseguimento srie Criando um Site Passo a Passo, vamos trabalhar, neste tutorial, as reas central e barra lateral do layout da CarlosHPS Vdeo-Locadora, no que se diz respeito s sua locaes e imagens de fundo.Pr-RequisitosCriando Site Passo a Passo - Parte 08 - Imagens de FundoDownload das imagens de fundo para o tutorial Criando Site Passo a Passo - Parte 08

Download das ImagensLogin Required1 Criando as sees .filmes e .barraA classe .filmes ser responsvel pela exibio do contedo referente aos lanamentos de filmes e aos mais locados pela locadora. Distribuiremos nela, alm das imagens de fundo, os seus respectivos contedos.O mesmo acontecer com a classe .barra, onde inseriremos um mini formulrio de newsletter e as categorias dos filmes da locadora.Primeiramente, abrindo nosso arquivo index.html, vamos inserir uma ID dentro do bloco #conteudo:?1234Seo Filmes Barra Lateral

2 Diviso da rea central do siteSees definidas, agora vamos dar uma incrementada no nosso cdigo css. Por enquanto vamos somente delimitar suas dimenses e cores para que possamos distinguir bem a locao de cada setor, sem esquecer, de mexer um pouco no rodap pra ficar tudo nos conformes.?123456789101112131415/*Formatao bloco BARRA****************************/.barra {float: right;height: 525px;width: 320px;}/*Formatao bloco FILMES****************************/.filmes {background: #FFFFFF;float: left;height: 525px;width: 630px;}

Feito as alteraes acima, teremos a seguinte formatao no navegador:

Fig. 01: Diviso da rea central3 Criao das classes .lancamento e .topfilmeDe acordo com o layout da locadora, na classe FILMES, conter outras duas classes: LANCAMENTO, que exibir as informaes sobre algum lanamento de filme e TOPFILME, onde ser mostrado os filmes mais alugados pela CarlosHPS Vdeo-Locadora.Classe .lancamentoA classe .lancamento faz parte da DIV filmes, portanto, o cdigo ficar assim:?123456

LANAMENTO Barra Lateral

J no CSS, vamos colocar uma altura de 525px nas classes FILME e BARRA, para melhor visualizar a classe LANCAMENTO.?12345678910111213141516171819202122232425/*Formatao bloco BARRA****************************/.barra {background: #eeeeee;float: right;height: 525px;width: 330px;}/*Formatao bloco FILMES****************************/.filmes {background: #CCFF00;float: left;height: 525px;width: 620px;}/*Formatao bloco LANCAMENTO****************************/.lancamento {background: #0066CC;float: left;height: 163px;margin: 5px;width: 604px;}

Feito isso, teremos a seguinte formatao no navegador:

Fig. 02: Diviso do layout em classesClasse .topfilmeLogo abaixo da seo de lanamento existem mais duas reas destinadas aos 2 filmes mais locados. Denominaremos como TOPFILME e seu respectivo cdigo ficar assim:?12345678

LANAMENTO FILME 01 FILME 02 Barra Lateral

E no CSS:?123456789/*Formatao bloco TOPFILME****************************/.topfilme {background: #FFCC00;float: left;height: 163px;margin: 5px;width: 604px;}

Vejamos o resultado at aqui:

Fig. 03: Insero da classe topfilme4 Imagens de fundoBem, pessoal, a parte menos fcil, digamos assim, foi concluda.Agora, vamos inserir as imagens de fundo para vermos como nosso layout ficar.Vejamos nosso cdigo css como ficou, incluindo os ajustes das cores de fundo:?1234567891011121314151617181920212223242526/*Formatao bloco FILMES****************************/.filmes {background: #FFFFFF;float: left;height: 525px;width: 620px;}/*Formatao bloco LANCAMENTO****************************/.lancamento {background: #000000 url(../imagens/bg_lancamento.jpg) no-repeat;float: left;height: 163px;margin: 5px;width: 604px;}/*Formatao bloco TOPFILME****************************/.topfilme {background: #FFFFFF url(../imagens/bg_top-locacao.jpg) no-repeat;float: left;height: 163px;margin: 5px;width: 604px;}

Observemos o resultado:

Fig. 04: Imagens de fundoUtilizando a mesma linha, para inserirmos as imagens de fundo da barra lateral, precisamos incluir os seguintes cdigos no nosso arquivo css:?12345678910111213141516171819202122232425262728293031323334/*Formatao bloco BARRA****************************/.barra {background: #353535 url(../imagens/bg_barra.jpg) repeat-x center top;float: right;height: 525px;width: 304px;}/*Formatao bloco FILMES****************************/.filmes {background: #FFFFFF;float: left;height: 525px;width: 646px;}/*Formatao bloco LANCAMENTO****************************/.lancamento {background: #000000 url(../imagens/bg_lancamento.jpg) no-repeat;float: left;height: 163px;margin: 5px;width: 646px;}/*Formatao bloco TOPFILME****************************/.topfilme {background: #FFFFFF url(../imagens/bg_top-locacao.jpg) no-repeat;float: left;height: 163px;margin: 5px;width: 646px;}

O resultado obtido ser:

Fig. 05: Fundo da barra lateralBom, terminamos mais uma etapa do processo de criao de um site.Abaixo segue os cdigos criados at aqui.index.html?123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263

CarlosHPS Vdeo-Locadora

• Home
• A Locadora
• Catlogo
• Promoes
• Cadastro
• Fale Conosco

LANAMENTO

FILME 01

FILME 02

Barra Lateral

Rodap do site

estilo.css?123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118/************************************************************************************* Nome do Layout: CarlosHPS Vdeo-LocadoraURL do Layout: http://www.carloshps.com.br/blog/Descrio: Cdigo desenvolvido para o layout do site fctcio CarlosHPS Vdeo-LocadoraVerso: 1.7Criado em: 27/06/2008 | Caldas Novas GoisAtualizado em: 27/09/2012Autor: CarlosHPS Webdesigner*************************************************************************************//*Formatao bsica do layout****************************/body {margin:0px;padding:0px;background-color:#252525;color: #666666;font: 11px "Trebuchet MS", Calibri, Verdana, Arial;} /*Formatao bloco GERAL****************************/#geral {background-color:#009900;width: 950px;margin: 0px auto;position: relative;height: 100%;}/*Formatao bloco TOPO****************************/#topo {background: #333333 url(../imagens/bg_topo.jpg) repeat-x;height: 100px;position: relative;} /*Formatao do MENU****************************/ul#menu {margin:-65px 0px 0px;padding:0px;position:absolute;right:0px;}ul#menu li {display:inline;margin-right: 20px;}ul#menu li a {text-decoration:none;color:#F4F4F4;font: 14px Calibri, Verdana, Arial;}ul#menu li a.active, ul#menu li a:hover {border-top: 2px dotted #666666;color: #999999;}/*Logotipo****************************/#logotipo {width:253px;height:127px;background: url(../imagens/logotipo.png) no-repeat top;clear: both;float: left;margin-top: -90px;position: absolute;left: 2px;top: 102px;}/*Formatao bloco CONTEUDO****************************/#conteudo {background: #FFFFFF;} /*Formatao bloco BARRA****************************/.barra{color:#FFF;float: right;width: 304px;height: 525px;background: #353535 url(../imagens/bg_barra.jpg) repeat-x center top;}/*Formatao bloco FILMES****************************/.filmes{float: left;width: 646px;background: #FFFFFF;height: 525px;}/*Formatao bloco LANCAMENTO****************************/.lancamento{float: left;width: 646px;background: #FFFFFF url(../imagens/bg_lancamento.jpg) no-repeat;height: 163px;margin: 5px;}/*Formatao bloco TOPFILME****************************/.topfilme{float: left;width: 646px;background: #FFFFFF url(../imagens/bg_top-locacao.jpg) no-repeat;height: 163px;margin: 5px;}/*Formatao bloco RODAPE****************************/#rodape {color:#FFF;clear: both;float: left;width: 950px;background: #A94A4A;}

Na prxima matria, Criando um Site Passo a Passo: Parte 09, complementaremos o contedo. E, at l, faa o download dos arquivos gerados at aqui.Criando Site Passo a Passo - Parte 08 - Site ModeloDownload dos arquivos-fonte do tutorial Criando Site Passo a Passo - Parte 08

Download do Arquivo-FonteLogin RequiredAt l.CarlosHPS Webdesigner 8) Ol, pessoal.Este nosso penltimo artigo da srie Criando um Site Passo-a-Passo e, finalmente, veremos como ficar o nosso projeto, no verdade?!Para continuar, iremos completar o contedo central do website da CarlosHPS Vdeo-Locadora.Pr-RequisitosCriando Site Passo a Passo - Parte 09 - ArquivosDownload dos arquivos com o texto do site e das imagens dos filmes do tutorial Criando Site Passo a Passo - Parte 09

Download das ImagensLogin Required1 Inserindo Imagens e Contedos da Seo .lancamentoPrimeiro, devemos criar uma classe especfica para as imagens que representaro cada filme desta seo. Para isso, vamos incluir o seguinte cdigo na nossa folha de estilos:Classe .lancamento-imagem?12345678/*Formatao da imagem da seo LANCAMENTO*******************************************/.lancamento-imagem {background: url(../imagens/filme1.png) no-repeat bottom;height: 154px;margin-top: 10px;width: 126px;}

E inserir esta nova classe na pgina html:?1

O mesmo procedimento dever ser feito para as imagens da seo topfilme, como mostrado a seguir:?123456789101112131415161718192021/*Formatao da imagem da seo LANCAMENTO*******************************************/.lancamento-imagem {background: url(../imagens/filme1.png) no-repeat bottom;height: 154px;margin-top: 10px;width: 126px;}/*Formatao da imagem da seo TOPFILME*******************************************/.topfilme-imagem-1, .topfilme-imagem-2 {height: 154px;margin-top: 10px;width: 126px;}.topfilme-imagem-1 {background: url(../imagens/filme2.png) no-repeat bottom;}.topfilme-imagem-2 {background: url(../imagens/filme3.png) no-repeat bottom;}

E no html, ficar:?1234

O resultado at aqui dever ser este:

Fig. 01: Imagens dos filmes1.1 Ttulos das seesVamos trabalhar agora os ttulos dos filmes e, para isso, complementar o cdigo css com o seguinte script:?1234567891011121314151617/*Formatao bloco LANCAMENTO************************************/.lancamento {background: #FFFFFF url(../imagens/bg_top-locacao.jpg) no-repeat;float: left;height: 163px;margin: 5px;width: 646px;}.lancamento-titulo {color: #333333;clear: both;float: left;font: 20px "Trebuchet MS", Calibri, Verdana, Arial;margin-left: 120px;width: 300px;}

J na pgina html, teremos:?123456

Batman - Cavaleiro das Trevas

Como nas imagens, seguindo o mesmo procedimento acima, teremos o seguinte resultado:

Fig.02: Ttulos da seo #lancamento1.2 Contedos dos filmesBom, pessoal, agora vamos inserir os cdigos abaixo (css e html) para podermos configurar os devidos contedos das sees.Cdigo css:?12345678910.lancamento-conteudo {color: #404040;clear: both;float: left;font: 13px "Trebuchet MS", Calibri, Verdana, Arial;height: 115px;margin-left: 120px;margin-top: 5px;width: 420px;}

Cdigo html:?1234567891011

Batman - Cavaleiro das Trevas

Aps o sensacional "Batman Begins", o Homem-Morcego retorna nessa sequnciaintitulada "The Dark Knight". Vale lembrar que nos quadrinhos, "O Cavaleiro dasTrevas" (traduo do ttulo original do novo longa) o nome da minissrie maiscultuada do personagem e um dos melhores gibis de todos os tempos.

Este o resultado:

Fig. 03: Contedo do filmeCom os cdigos abaixo, completaremos esta seo:index.html?12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182

CarlosHPS Vdeo-Locadora

• Home
• A Locadora
• Catlogo
• Promoes
• Cadastro
• Fale Conosco

Batman - Cavaleiro das Trevas

Aps o sensacional "Batman Begins", o Homem-Morcego retorna nessa seqncia intitulada "The Dark Knight".Vale lembrar que nos quadrinhos, O Cavaleiro das Trevas (traduo do ttulo original do novo longa) onome da minissrie mais cultuada do personagem e um dos melhores gibis de todos os tempos.

O Incrvel Hulk

O cientista Bruce Banner busca desesperadamente uma cura para a radiao gama que envenenou suas clulas eque liberta uma desenfreada fora dentro dele: o Incrvel Hulk. Ele est longe da mulher que ama, dra.Elizabeth Betty Ross e vive como um fugitivo para evitar a perseguio obsessiva de seu inimigo, GeneralThaddeus Thunderbolt Ross.

Sex and the City - O Filme

Quando se trata da tela do cinema, maior definitivamente sinnimo de melhor! Sex and the City - O Filmepromete responder a todas as dvidas que ficaram no ar: ser que Carrie e Big vo finalmente se casar?Samantha vai conseguir se satisfazer com um homem apenas? Charlotte vai engravidar? E quanto a Miranda eSteve, vivero felizes para sempre?

Barra Lateral

Rodap do site

estilo.css?123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174/*Nome do Layout: CarlosHPS Vdeo-LocadoraURL do Layout: http://www.carloshps.com.br/blog/Descrio: Cdigo desenvolvido para o layout do site fictcio CarlosHPS Vdeo-LocadoraVerso: 1.5Criado em: 27/06/2008 | Caldas Novas GoisAtualizado em: 26/12/2010Autor: CarlosHPS Webdesigner*//*Formatao bsica do layout****************************/body {background-color:#252525;color: #666666;font: 11px "Trebuchet MS", Calibri, Verdana, Arial;margin:0px;padding:0px;}/*Formatao bloco GERAL****************************/#geral {background-color:#009900;height: 100%;margin: 0px auto;position: relative;width: 950px;}/*Formatao bloco TOPO****************************/#topo {background: #333333 url(../imagens/bg_topo.jpg) repeat-x;height: 100px;position: relative;}/*Formatao do MENU****************************/ul#menu {margin:-65px 0px 0px;padding:0px;position:absolute;right:0px;}ul#menu li {display:inline;margin-right: 20px;}ul#menu li a {text-decoration:none;color:#F4F4F4;font: 14px Calibri, Verdana, Arial;}ul#menu li a.active, ul#menu li a:hover {border-top: 2px dotted #666666;color: #999999;}/*Logotipo****************************/#logotipo {background: url(../imagens/logotipo.png) no-repeat top;clear: both;float: left;height:127px;left: 2px;margin-top: -90px;position: absolute;top: 85px;width:253px;}/*Formatao bloco CONTEUDO****************************/#conteudo {background: #FFFFFF;}/*Formataao bloco BARRA****************************/.barra {background: #353535 url(../imagens/bg_barra.jpg) repeat-x center top;float: right;height: 525px;width: 304px;}/*Formataao bloco FILMES****************************/.filmes {background: #FFFFFF;float: left;height: 525px;width: 646px;}/*Formatao bloco LANCAMENTO************************************/.lancamento {background: #FFFFFF url(../imagens/bg_top-locacao.jpg) no-repeat;float: left;height: 163px;margin: 5px;width: 646px;}.lancamento-titulo {color: #333333;clear: both;float: left;font: 20px "Trebuchet MS", Calibri, Verdana, Arial;margin-left: 120px;width: 300px;}.lancamento-conteudo {color: #404040;clear: both;float: left;font: 13px "Trebuchet MS", Calibri, Verdana, Arial;height: 115px;margin-left: 120px;margin-top: 5px;width: 420px;}/*Formatao da imagem da seo LANCAMENTO*******************************************/.lancamento-imagem {background: url(../imagens/filme1.png) no-repeat bottom;height: 154px;margin-top: 10px;width: 126px;}/*Formatao da imagem da seo TOPFILME*******************************************/.topfilme {background: #FFFFFF url(../imagens/bg_top-locacao.jpg) no-repeat;float: left;height: 163px;margin: 5px;width: 646px;}.topfilme-titulo {clear: both;color: #333333;font: 20px "Trebuchet MS", Calibri, Verdana, Arial;float: left;margin-left: 120px;width: 300px;}.topfilme-conteudo {clear: both;color: #404040;font: 13px "Trebuchet MS", Calibri, Verdana, Arial;float: left;height: 115px;margin-left: 120px;margin-top: 5px;width: 420px;}.topfilme-imagem-1, .topfilme-imagem-2 {height: 154px;margin-top: 10px;width: 126px;}.topfilme-imagem-1 {background: url(../imagens/filme2.png) no-repeat bottom;height: 154px;margin-top: 10px;width: 126px;}.topfilme-imagem-2 {background: url(../imagens/filme3.png) no-repeat bottom;}/*Formatao bloco RODAPE****************************/#rodape {background: #CC0000;clear: both;float: left;width: 950px;}

Download do Arquivo FinalNa prxima matria, concluiremos o nosso projeto, Criando um Site Passo a Passo: Parte FINAL. E, at l, faa o download dos arquivos gerados at aqui.Criando Site Passo a Passo - Parte 09 - Site ModeloDownload dos arquivos-fonte do tutorial Criando Site Passo a Passo - Parte 09

Download do Arquivo-FonteLogin RequiredCarlosHPS Webdesigner 8)Ol, pessoal.Ento, vamos concluso, afinal.Pr-requisitosCriando Site Passo a Passo - Parte FINAL - conesDownload das imagens dos cones utilizados para o tutorial Criando Site Passo a Passo - Parte FINAL

Download das ImagensLogin Required1 Organizao das DivsBom, pessoal, na nossa pgina index.html criada at aqui, vamos inserir novas divises que sero responsveis pelas imagens e ttulos da barra lateral do site. Portanto, abramos o arquivo e insiramos o seguinte cdigo:?12345

2 Inserindo ImagensAgora, trabalharemos o cdigo CSS para inserirmos as imagens que representaro os blocos criados na index.html.?12345678910111213141516171819202122232425#barra-newsletter {background: url(../imagens/icone1.png) no-repeat top;clear: both;color: #FFFFFF;float: left;font: 40px "Trebuchet MS", Calibri, Verdana, Arial;height: 104px;margin-left: -9px;position: absolute;vertical-align: bottom;width: 313px;}#barra-categorias {background: url(../imagens/icone2.png) no-repeat top;clear: both;color: #FFFFFF;float: left;font: 40px "Trebuchet MS", Calibri, Verdana, Arial;height: 204px;margin-left: -9px;margin-top: 230px;position: absolute;vertical-align: bottom;width: 313px;}

O resultado, aps estas duas aes, deve ser este:

Fig. 01: Imagens na Barra Lateral do siteNa barra lateral, a qual trabalharemos agora, existem dois cones que representam reas distintas: Newsletter e Catlogo.3 Inserindo o Campo de FormulrioPara completarmos o bloco da Newsletter, preciso inerir um pequeno texto, avisando o usurio que ali ele poder se cadastrar e um pequeno formulrio com dois campos e um boto.Na pgina index.html, vamos inserir os seguintes cdigos:?123456789 Mantenha-se informado(a) e concorra a prmios. Assine agora nosso boletim semanal.
Nome:

E-mail:

E no CSS, inseramos as formataes abaixo:?12345678910111213/*Formatao do FORMULRIO*******************************************/form {clear: both;color: #FFFFFF;float: left;font: 13px "Trebuchet MS", Calibri, Verdana, Arial;height: 110px;margin-left: 20px;margin-top: 95px;position: absolute;width: 313px;}

Veremos o seguinte resultado:

Fig. 02: Formulrio de cadastroPara darmos uma melhoradinha nos campos do formulrio e no boto, vamos complementar o cdigo css:?1234567891011121314151617label {display: block;float: left;text-align: left;width: 4em;}input {background: #FCFCFE;border: 1px solid #CCCCCC;color: #666666;}.submit input {background: #FFFFFF;border: 2px dashed #999999;color: #000;padding: 5px;}

4 Inserindo CategoriasPara completarmos a barra lateral, faltam os itens do bloco Categorias. Com isso, vamos inserir o cdigo abaixo na pgina index.html:?1234567891011121314151617181920212223242526272829303132

• Ao
• Aventura
• Comdia
• Desenho
• Documentrio
• Drama

• pico
• Evenglico
• Fico
• Guerra
• Infantil
• Romntico

• Suspense
• Temporada
• Terror
• Vale Tudo
• Video Club
• Western

Em seguida, vamos formatar a DIV:?1234567891011121314#barra-categorias ul {color: #FFFFFF;font: 17px Calibri, Arial, Verdana;list-style: none;text-align: left;}#categoria-1 {clear: both;float: left;left: 10px;margin-left: 10px;position: absolute;top: 100px;}

Feito isso, veremos o resultado assim:

Fig. 03: CatlogoE no CSS, formataremos e melhoraremos o cdigo dos blocos assim:?12345678910111213141516171819202122#barra-categorias ul {color: #FFFFFF;font: 17px Calibri, Arial, Verdana;list-style: none;text-align: left;}#categoria-1, #categoria-2, #categoria-3{clear: both;float: left;margin-left: 5px;position: absolute;top: 100px;}#categoria-1 {left: -25px;}#categoria-2 {left: 85px;}#categoria-3 {left: 180px;}

Resultado at aqui:

Fig. 04: Catlogo completo5 RodapE enfim, chegamos ltima seo do site da Locadora CarlosHPS Vdeos.Primeiro, salve a imagem abaixo na pasta imagens:

rss feedEm seguida, inseramos a Div na pgina html:?123

E depois, ajustemos o CSS:?1234567891011121314/*Formatao bloco RODAPE****************************/#rodape {background: #CC0000;clear: both;float: left;height: 80px;width: 950px;}.rodape-rss {background: url(../imagens/rss.jpg) no-repeat;height: 80px;width: 305px;}

Pronto!Agora s falta o texto dos direitos autorais:Copyright 2008-2011Todos os direitos reservados a CarlosHPS WebdesignerProjeto fictcio de um site para vdeo-locadoraNo html, ficar assim:?12345678

Copyright 2008-2011
Todos os direitos reservados a CarlosHPS Webdesigner
Projeto fictcio de um site para vdeo-locadora

e o CSS, desta maneira:?1234567891011.copyright {clear: both;color: #666666;float: left;font: 12px "Trebuchet MS", Calibri, Verdana, Arial;height: 80px;margin-left: 525px;margin-top: 5px;text-align: right;width: 420px;}

6 Compatibilidade com NavegadoresBom, pessoal, o que fizemos aqui pode ser exibido sem problemas no IE 8, Firefox 3.6, Safari 5 e Opera 11.

Exibio do Site no Navegador Opera 11

Exibio do Site no Navegador Safari 5

Exibio do Site no Navegador Firefox 3.6

Exibio do Site no Navegador Internet Explorer 87 ConclusoPessoal, o que foi visto aqui nesta srie, foi um breve resumo de como se cria um projeto de um site. Os cdigos HTML e CSS, podem e devem ser otimizados, por isso, recomendo que estudem um pouco mais essas duas linguagens que so fundamentais para quem deseja criar sites profissionalmente.E, por fim, abaixo segue o download do projeto completo.Espero que tenham gostado e at a prxima.Criando Site Passo a Passo - Parte FINAL - Site Modelo COMPLETODownload do site modelo completo com todas as imagens e arquivos do tutorial Criando Site Passo a Passo - Parte FINAL

Download do Site CompletoLogin RequiredCarlosHPS Webdesigner 8)