Criando um Site Passo a Passo: Parte 6

Na matéria anterior (Criando um Site Passo a Passo: Parte 5), vimos como montamos o mapa do site e a estrutura (wireframe) básica do layout da CarlosHPS Vídeo-Locadora. Agora, veremos como iniciar o desenvolvimento da 1ª página do site utilizando o Dreamweaver e alguns conceitos de Tableless (XHTML e CSS).

1 – Organização

Estou utilizando a versão CS3 do Dreamweaver para desenvolver o site, portanto é essencial para a organização do projeto, que definamos a criação 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 diretório específico para os arquivos do projeto, juntamente com as pastas “imagens” e “scripts”.

Fig. 01: Criação do site no Dreamweaver

Fig. 01: Criação do site no Dreamweaver

2 – Estudando a Estrutura do Layout

Ao observarmos o layout, podemos dividi-lo em blocos horizontais de modo a facilitar a distribuição e organização do nosso código. Vejamos a descrição breve de cada setor:

Fig. 02: Partes do Layout - Blocos DIV

Fig. 02: Partes do Layout – Blocos DIV

#geral – Bloco onde todo o conteúdo será criado.

#topo – Bloco onde inseriremos o menu, logotipo e a chamada principal do site.

#conteudo – Bloco onde colocaremos o conteúdo do site juntamente com a barra lateral direita.

#rodape – Bloco da base do site.

3 – Criando o Código Básico

No Dreamweaver (ou outro editor html/editor de texto), vamos criar a estrutura básica de qualquer página HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
    <head>
           <title></title>
    </head>
<body>
    CONTEÚDO
</body>
</html>

Dando o título ao site e inserindo as principais tags <DIV> que representam os blocos de conteúdo, nosso código ficará assim:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title></title>
</meta>
</head>
<body>
<div id="geral">
     <div id="topo">
          <h2>Topo do Site</h2>
     </div>   <!-- Fim do bloco #TOPO -->
     <div id"conteudo">
          <h2>Conteúdo do Site</h2>
     </div>   <!-- Fim do bloco #CONTEUDO -->
     <div id="rodape">
          <h2>Rodapé do site</h2>
     </div>   <!-- Fim do bloco #RODAPE -->
</div>   <!-- Fim do bloco #GERAL -->
</body>
</html>

4 – Inserindo o CSS

Como estamos iniciando ainda, para ir vendo os resultados assim que construímos o site, vamos criar a nossa folha de estilos paralelamente. O básico está aí embaixo. Apenas criei o essencial para facilitar a visualização dos blocos.

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
33
34
35
36
37
38
39
/*************************************************************************************
Nome do Layout: CarlosHPS Vídeo-Locadora
Descrição: Código desenvolvido para o layout do site fctício CarlosHPS Vídeo-Locadora
Versão: 1.7
Criado em: 27/06/2008 | Caldas Novas – Goiás
Atualizado em: 05/08/2012
Autor: CarlosHPS Webdesigner
*************************************************************************************/
/*Formatação básica do layout
****************************/
body {
background-color:#252525;
color: #fff;
font: 11px "Trebuchet MS", Calibri, Verdana, Arial;
margin:0px;
padding:0px;
}
/*Formatação bloco GERAL
****************************/
#geral {
     background-color: #81A49A;
}
/*Formatação bloco TOPO
****************************/
#topo {
     background-color: #7CA9B6;
}
/*Formatação bloco CONTEUDO
****************************/
#conteudo {
     background: #FF9900;
}
/*Formatação bloco RODAPE
****************************/
#rodape {
     background: #A94A4A;
}

Agora, vamos vincular este arquivo (salvo como estilo.css) à página criada anteriormente (salva como index.html).

1
2
<title>CarlosHPS Vídeo-Locadora</title>
<link href="scripts/estilo.css" rel="stylesheet" type="text/css">

Vejamos o resultado no navegador:

Fig.03: Exibição nos navegadores F.Fox 3.0 e IE 7.0

Fig.03: Exibição nos navegadores F.Fox 3.0 e IE 7.0

Uma observação conceitual: ID é um identificador único de elemento HTML, isto é, ele não pode ser utilizado por nenhum outro elemento. As classes seguem o mesmo propósito das ID’s, não podem conter caracteres especiais, espaços e cedilhas.

Criando Site Passo a Passo – Parte 06 – Site Modelo

Download dos arquivos-fonte do tutorial Criando Site Passo a Passo – Parte 06

Bom, pessoal, disponibilizei o arquivo gerado neste artigo e no próximo tutorial, Criando um Site Passo a Passo: Parte 7, vamos inserir e formatar o menu além de iniciarmos a inserção das imagens.

Até lá.

CarlosHPS Webdesigner 8)

Anúncios

Deixe um comentário

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