Criando um Site Passo a Passo: Parte FINAL

Olá, pessoal.

Então, vamos à conclusão, afinal.

Pré-requisitos

Criando Site Passo a Passo – Parte FINAL – Ícones

Download das imagens dos ícones utilizados para o tutorial Criando Site Passo a Passo – Parte FINAL

Download das ImagensLogin Required

1 – Organização das Div’s

Bom, pessoal, na nossa página index.html criada até aqui, vamos inserir novas divisões que serão responsáveis pelas imagens e títulos da barra lateral do site. Portanto, abramos o arquivo e insiramos o seguinte código:

1
2
3
4
5
</div>   <!--Fim do bloco #FILMES -->
<div id="barra">
     <div id="barra-newsletter"></div>     <!--Fim do bloco #NEWSLETTER -->
     <div id="barra-categorias"></div>     <!--Fim do bloco #CATEGORIAS -->
</div>   <!--Fim da Barra Lateral -->

2 – Inserindo Imagens

Agora, trabalharemos o código CSS para inserirmos as imagens que representarão os blocos criados na index.html.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#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, após estas duas ações, deve ser este:

Fig. 01: Imagens na Barra Lateral do site

Fig. 01: Imagens na Barra Lateral do site

Na barra lateral, a qual trabalharemos agora, existem dois ícones que representam áreas distintas: Newsletter e Catálogo.

3 – Inserindo o Campo de Formulário

Para completarmos o bloco da Newsletter, é preciso inerir um pequeno texto, avisando o usuário que ali ele poderá se cadastrar e um pequeno formulário com dois campos e um botão.

Na página index.html, vamos inserir os seguintes códigos:

1
2
3
4
5
6
7
8
9
<div id="barra-newsletter">
     <form class="form" action="#"> Mantenha-se informado(a) e concorra a prêmios. Assine agora nosso boletim semanal.<br />
          <label for="nome">Nome:</label><br />
               <input id="name" type="text" /><br />
          <label for="email">E-mail:</label><br />
               <input id="email" type="text" /><br />
               <input type="submit" value="OK" />
     </form>
</div>   <!--Fim do bloco #NEWSLETTER -->

E no CSS, inseramos as formatações abaixo:

1
2
3
4
5
6
7
8
9
10
11
12
13
/*Formatação do FORMULÁRIO
*******************************************/
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: Formulário de cadastro

Fig. 02: Formulário de cadastro

Para darmos uma melhoradinha nos campos do formulário e no botão, vamos complementar o código css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
label {
     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 Categorias

Para completarmos a barra lateral, faltam os itens do bloco Categorias. Com isso, vamos inserir o código abaixo na página index.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div id="barra-categorias">
        <div id="categoria-1">
          <ul>
               <li>Ação</li>
               <li>Aventura</li>
               <li>Comédia</li>
               <li>Desenho</li>
               <li>Documentário</li>
               <li>Drama</li>
               </ul>
          </div>   <!--Fim da categoria 1-->
        <div id="categoria-2">
          <ul>
               <li>Épico</li>
               <li>Evengélico</li>
               <li>Ficção</li>
               <li>Guerra</li>
               <li>Infantil</li>
               <li>Romântico</li>
          </ul>
        </div>     <!--Fim da categoria 2-->
        <div id="categoria-3">
          <ul>
               <li>Suspense</li>
               <li>Temporada</li>
               <li>Terror</li>
               <li>Vale Tudo</li>
               <li>Video Club</li>
               <li>Western</li>
          </ul>
         </div> <!--Fim da categoria 3-->
     </div> <!--Fim do bloco #CATEGORIAS -->

Em seguida, vamos formatar a DIV:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#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: Catálogo

Fig. 03: Catálogo

E no CSS, formataremos e melhoraremos o código dos blocos assim:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#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: Catálogo completo

Fig. 04: Catálogo completo

5 – Rodapé

E enfim, chegamos à última seção do site da Locadora – CarlosHPS Vídeos.

Primeiro, salve a imagem abaixo na pasta “imagens”:

rss feed

rss feed

Em seguida, inseramos a Div na página html:

1
2
3
<div id="rodape">
     <div class="rodape-rss"></div>
</div>   <!--Fim do bloco #RODAPE -->

E depois, ajustemos o CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*Formataçăo 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-2011
Todos os direitos reservados a CarlosHPS Webdesigner
Projeto fictício de um site para vídeo-locadora

No html, ficará assim:

1
2
3
4
5
6
7
8
<div id="rodape">
     <div class="rodape-rss">
          <span class="COPYRIGHT"> Copyright © 2008-2011<br>
            Todos os direitos reservados a CarlosHPS Webdesigner<br>
            Projeto fictício de um site para vídeo-locadora
          </span>
     </div>
</div>   <!--Fim do bloco #RODAPE -->

e o CSS, desta maneira:

1
2
3
4
5
6
7
8
9
10
11
.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 Navegadores

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

Exibição do Site no Navegador Opera 11

Exibição do Site no Navegador Opera 11

Exibição do Site no Navegador Safari 5

Exibição do Site no Navegador Safari 5

Exibição do Site no Navegador Firefox 3.6

Exibição do Site no Navegador Firefox 3.6

Exibição do Site no Navegador Internet Explorer 8

Exibição do Site no Navegador Internet Explorer 8

7 – Conclusão

Pessoal, o que foi visto aqui nesta série, foi um breve resumo de como se cria um projeto de um site. Os códigos HTML e CSS, podem e devem ser otimizados, por isso, recomendo que estudem um pouco mais essas duas linguagens que são fundamentais para quem deseja criar sites profissionalmente.

E, por fim, abaixo segue o download do projeto completo.

Espero que tenham gostado e até a próxima.

Criando Site Passo a Passo – Parte FINAL – Site Modelo COMPLETO

Download do site modelo completo com todas as imagens e arquivos do tutorial Criando Site Passo a Passo – Parte FINAL

CarlosHPS Webdesigner 8)

Deixe uma resposta

Faça o login usando um destes métodos para comentar:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s