Na matéria anterior, 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
Fig. 02: Partes do Layout

marcador#GERAL – Bloco onde todo o conteúdo será criado.
marcador#TOPO – Bloco onde inseriremos o menu, logotipo e a chamada principal do site.
marcador#CONTEUDO – Bloco onde colocaremos o conteúdo do site juntamente com a barra lateral direita.
marcador#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:

<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:

< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>CarlosHPS Vídeo-Locadora</title>
</meta></head>
<body>
<!--Início do bloco #GERAL -->
<div id="GERAL">
 <!--Início do bloco #TOPO -->
   <div id="TOPO"> Topo do Site </div>
   <!--Fim do bloco #TOPO -->
   <!--Início do bloco #CONTEUDO -->
   <div id"CONTEUDO">Conteúdo do Site</div>
   <!--Fim do bloco #CONTEUDO -->
   <!--Início do bloco #RODAPE -->
   <div id="RODAPE"> Rodapé do site </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.

/*
Nome do Layout: CarlosHPS Vídeo-Locadora
URL do Layout: http://www.carloshps.com.br/blog/
Descrição: Código desenvolvido para o layout do site
fictício "CarlosHPS Vídeo-Locadora"
Versão: 1.0
Atualizado em: 27/06/2008 | Caldas Novas - Goiás
Autor: CarlosHPS Webdesigner
*/

/*Formatação básica do layout
 ****************************/
body {
 margin:0px;
 padding:0px;
 background-color:#252525;
 color: #666666;
 font: 11px "Trebuchet MS", Calibri, Verdana, Arial;
}
/*Formatação bloco GERAL
 ****************************/
#GERAL {
 background-color:#009900;
}
/*Formatação bloco TOPO
 ****************************/
#TOPO {
 background: #33CCFF;
}
/*Formatação bloco CONTEUDO
 ****************************/
#CONTEUDO {
 background: #FF9900;
}
/*Formatação bloco RODAPE
 ****************************/
#RODAPE {
 background: #CC0000;
}

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

<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.

Bom, pessoal, no próximo tutorial vamos inserir e formatar o menu além de iniciarmos a inserção das imagens.

Até lá.

CarlosHPS Webdesigner :cool:

Blog Widget by LinkWithin