Criando um Site Passo a Passo: Parte 6

Série: “Criando um Site Passo-a-Passo.”

 

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:

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

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.

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

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

[box type=”info”] 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.[/box] [wpdm_file id=22 title=”true” desc=”true” ]

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)


Posts Relacionados
Comentários ( 53 )
  1. amaral do nascimento
    1 de julho de 2008 at 22:10
    Responder

    🙂

  2. Giselle
    17 de julho de 2008 at 13:51
    Responder

    :tongue: Muito bom!!!

  3. fabio
    9 de setembro de 2008 at 0:22
    Responder

    Não consegui fazer com que o navegador ficasse com a mesma formatação…

    Por gentileza, poderia postar todo o código final que ficou na pagina do Dreamweaver para que possa estudar onde que eu errei?

  4. CarlosHPS Webdesigner
    9 de setembro de 2008 at 0:51
    Responder

    Fabio,

    Posta seu código aqui que eu dou uma olhada pra você.

    CarlosHPS Webdesigner

  5. Fábio
    9 de setembro de 2008 at 11:24
    Responder

    CarlosHPS Vídeo-Locadora

    #GERAL {
    background-color:#009900;
    Topo do Site
    #TOPO {
    background: #33CCFF;
    Conteúdo do site
    #CONTEUDO {
    background: #FF9900;
    Rodapé do site
    #RODAPE {
    background: #CC0000;

  6. CarlosHPS Webdesigner
    9 de setembro de 2008 at 11:40
    Responder

    Fábio,

    Não sei se percebeu, mas existe uma “lógica de programação” no CSS.

    Quando você abre uma “chave” => {
    para inserir atributos a uma classe do CSS, é preciso fechá-la logo em seguida, colocando-a assim: => }

    Ou seja, criado o parâmetro:

    #RODAPE {
    background: #CC0000;

    Faltou após o ; (ponto e vírgula) a chave fechando o processo, }

    Feche todos que estão abertos, salve a página e atualize-a no navegador e veja se funciona. Se não funcionar, dê-me um toque novamente.

    CarlosHPS

  7. johnny
    17 de setembro de 2008 at 20:14
    Responder

    MUITO BOM ESSE TUTORIAL, TERIA COMO MANDAR COMPLETO PARA MIM COMPREENDER MELHOR COMO SE CRIA UM SITE

  8. CarlosHPS Webdesigner
    17 de setembro de 2008 at 20:31
    Responder

    Olá, johnny

    Tutoriais são feitos para estudar mesmo. Se seguir passo a passo desde o início, conseguirá montar este site tranquilamente.

    CarlosHPS

  9. rich
    4 de novembro de 2008 at 11:15
    Responder

    Boa dia !!!, muito bom esse tutorial, parabéns.

    Sou publicitário e um dos meus professores sempre dizia:
    Tudo o que você aprender não se esqueça de ensinar…..

    Valeu !!!

  10. CarlosHPS Webdesigner
    4 de novembro de 2008 at 12:21
    Responder

    Olá, Rich

    Fico feliz em ver um comentário de um profissional do ramo publicitário. Obrigado mesmo.

    O que faço apenas é viver a Internet em sua essência: compartilhando conhecimentos.

    Um abraço.

    CarlosHPS 8)

  11. Amanda
    5 de março de 2009 at 15:23
    Responder

    Nossa taah impossivel eu baixei o programa TopStyle CSS e too tentandoo fazeer faz um tempão, eu coloco o codigo salvo como index e qndo eu abro a pagina soh aparecem as palavras dos codigos que eu digitei assim: < !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> Conte?  oq eu faço?:cry:

  12. CarlosHPS Webdesigner
    7 de março de 2009 at 11:12
    Responder

    Amanda,

    Pelo que eu sei, este programa não trabalha com códigos html. Recomendo que faça tudo no bloco de notas, senão, não vai funcionar mesmo.

    Atenciosamente,

    CarlosHPS Webdesigner 8)

  13. adriano
    12 de abril de 2009 at 0:18
    Responder

    estou com muitas duvidas muitas msm tam como vc me ajudar meu msn é lordjackhacker@hotmail.com

    vlw

    • CarlosHPS Webdesigner
      12 de abril de 2009 at 16:18
      Responder

      Quais dúvidas, Adriano?
      Poste-as aqui, por gentileza.

      Abração.

      CarlosHPS Webdesigner 8)

  14. Charles
    18 de maio de 2009 at 9:42
    Responder

    Bom dia carlos, sou iniciante e estou planejando um site para o meu pequeno negócio, mas estou com uma dificuldade nesta primera parte de criação…após criar o doc html e css, vc instrui a vincula-los e logo em seguida vizualiza-los no navegador… ora, não vejo nada semelhante com a figura (fig. 03). Acho que não entendi alguma parte que antecede estes comandos…Pode me ajudar? Obrigado por compartilhar conosco seus preciosos conhecimentos. “Não é tão fácil encontrar pessoas dispostas a compartilhar conhecimnetos profissionais sem onerosidade. Parabéns.” Charles.

    • CarlosHPS Webdesigner
      30 de maio de 2009 at 12:01
      Responder

      Olá, Charles
      Desculpa a demora na resposta…
      Você, na página html, vinculou o arquivo CSS?

  15. Rafael
    3 de julho de 2009 at 10:39
    Responder

    o código html (que vem antes do topico Inserindo o CSS) não está aparecendo. Você poderia postar novamente? Obrigado
    Qlqr coisa, me envie por email.

    • CarlosHPS Webdesigner
      4 de julho de 2009 at 19:03
      Responder

      Olá, Rafael
      Agradeço pela observação. Obrigado. 😉
      Já fiz a correção. Este problema sempre ocorre quando atualizo o plugin que gera a formatação do código.
      Abração.

      CarlosHPS Webdesigner 8)

  16. Cindy
    28 de julho de 2009 at 15:32
    Responder

    Oi Carlos…Tudo bem?
    Faço facul de sistemas de Informação. Tô pegando uma disciplina agora que é técnicas de programação web. Estamos vendo html, dreamweaver…tô achando um máximo!!! Fui achar de dizer pro meu chefe isso! Ele quer q eu faça o site da empresa. É uma pequena empresa de informática, manutenção de micro e recarga de cartuchos, entre outros. Um site simples, porém bem atual!!!
    Mas gostaria mto da sua ajuda!
    Cindy
     

  17. Victor
    28 de julho de 2009 at 17:41
    Responder

    Olá carlos, estou seguindo o tutorial , porém não estou conseguindo o resultado que aparece na Fig 03. que são as barrinhas “azul” “amarelo” e “vermelho” , elas realmente aparecem daquela forma?

    Seu tutorial é magnifico !

  18. Karla Guimaraes
    31 de julho de 2009 at 11:17
    Responder

    Bom dia!!!

    Carlos, fiz todo o processo, mas a minha página não está com a formatação, 1º digitei o codigo em html, depois abri uma nova pagina em css, salvei com a extensão .css
    não sei a onde que está o erro, se vc puder me ajudar agradeço

    karla

  19. Thiago Melo
    5 de agosto de 2009 at 11:32
    Responder

    Ola Carlos tudo bem?
    Então, está dando um problema no meu projeto, está com o mesmo problema que o do Victor, não está aparecendo aquelas divisões coloridas.

    Qual o meu erro?
    Obrigado e Parabéns pelo Tutorial !!!!!!
     

  20. Elisa
    11 de novembro de 2009 at 13:12
    Responder

    Olá!!!!!
    Depois de 3 semanas fazendo e refazendo o site, consegui o resultado quase esperado, achei todos os meus erros, mas agora não consigo achar as imagens dos filmes para inserir no site, pode me indicar onde esta!

    No mais as dicas são ótimas!!!!!

    • CarlosHPS Webdesigner
      14 de novembro de 2009 at 9:58
      Responder

      Oi, Elisa
      Se você continuar a série, verá que as imagens estão disponíveis para download.

      Abraços.

      CarlosHPS Webdesigner 8)

  21. Alexander Chiozzi
    8 de janeiro de 2010 at 6:48
    Responder

    simplesmente magnífico, muito bem explicado, primeira vez que deixo um comentário em algum lugar hehehe, parabéns

    • CarlosHPS
      8 de janeiro de 2010 at 13:01
      Responder

      Alexander

      Sinto-me horado em saber que fui o primeiro. Isso mostra que estou no caminho certo.
      Obrigado. 🙂

      CarlosHPS Webdesigner 8)

  22. Diego Miranda
    24 de janeiro de 2010 at 15:56
    Responder

    Carlos só tenho a agradecer a você depois que descobri este tutorial to conseguindo asimilir muito mais so web,cara obg por toda a ajuda,mas tenho uma dúvida ainda ja fiz tudo o que dis neste tutorial mas a formatação da página como a “figura 3” ela fica em branco ñ aparece as cores .se você poder me ajudar agradeço.
    abras..

    • CarlosHPS
      27 de janeiro de 2010 at 8:32
      Responder

      Oi, Diego
      Que bom que você está apreciando meu blog. Fico muito feliz em saber 🙂
      Bom, quanto a este problema… recomendo que feche e abra o programa novamente, pois às vezes pode ter “estourado” a memória do seu computador e algumas funções não foram carregadas totalmente no FW. Se persistir, re-instale o programa. Se mesmo assim o erro continuar, recomendo entrar em contato com o suporte da Adobe, isso se o aplicativo for original 😉
      Boa sorte.

      CarlosHPS Webdesigner 8)

  23. Gilveson S.A
    2 de fevereiro de 2010 at 11:15
    Responder

    Ola meu amigo Carlos, parabens pelo trabalho, ja vi muitos sites mais igual ao seu é o primeiro! gostaria de tirar uma duvida, estou usando o Mozilla Firefox versão 3.5.7 e quando visualizo a pagina ele não exibe as DIV’s #Geral #Topo e #contéudo,
    mais quando eu visualizo na pagina do Internet Explorer ele exibe. vai os dois codigos abaixo (esses eu peguei do menu exibir / Codigo fonte

    FIREFOX

    Topo do Site

    Conteúdo do Site

    Rodapé do Site

    ===============================

    INTERNET EXPLORER

    Topo do Site

    Conteúdo do Site

    Rodapé do Site

    • CarlosHPS
      6 de fevereiro de 2010 at 15:33
      Responder

      Oi, Gilveson
      Os códigos não apareceram… manda novamente.

  24. rafaellacostabrisola
    18 de maio de 2010 at 21:17
    Responder

    Carlos, como vincular uma pagina se puder me dar essa forcinha rsrs.
    obrigada 😀

    • CarlosHPS
      10 de junho de 2010 at 11:33
      Responder

      Oi, Rafael
      Como assim: “vincular”?
      Você quis dizer: criar um link para outra página, isso?
      CarlosHPS Webdesigner 8)

  25. Rafaella
    28 de junho de 2010 at 10:39
    Responder

    vincular qe eu digo é vincular a pagina estilo com a index, como você explica no tutorial obrigada 😀

  26. Rodrigo
    18 de novembro de 2010 at 5:07
    Responder

    Carlos eu não sei como vincular o css no index.html.

    Olha se eu fiz o certo

    Área Vip


    Topo do Site


    Conteúdo do Site


    Rodapé do site

    Na hora de vizualizar no navegador não aparece cor. Tem como me dar uma luz?

    • CarlosHPS
      28 de dezembro de 2010 at 15:21
      Responder

      Rodrigo,

      Não sei se conseguiu inserir todo o código, mas pelo que colocou aqui não deu para ver direito seu problema.

      Recomendo que refaça o tutorial do zero, ok?!

      Abraços.

      CarlosHPS Webdesigner 8)

  27. Henrique
    19 de janeiro de 2011 at 5:38
    Responder

    Olá Carlos,bom dia,boa tarde ou boa noite..

    Estava vendo o tutorial e fui seguindo,sou iniciante e tenho um “sonho” de ter meu proprio site feito por mim claro,e o meu não mostrou as cores como a imagem acima..oq pode ter sido ?

    • CarlosHPS
      18 de julho de 2011 at 14:49
      Responder

      Oi, Henrique
      Isso se deve a diversos fatores, entre eles:

      Configuração do seu monitor
      Tipo de aplicativo o qual você está utilizando, pois se não configurou corretamente a exibição de cores, pode dar muita diferença
      etc

      Espero ter ajudado. Boa sorte.

      CarlosHPS Webdesigner 8)

  28. Alison Alves
    31 de março de 2011 at 15:43
    Responder

    Olá Carlos primeiramente, queria parabenizalo pelo tutorial, realmente excelente

    e deixar aqui uma observação que a

    Esta faltando o sinal de ” = ” depois de “id” algo que pode vir trazer complicações para quem esta iniciando.

    Bom é isto, Parabéns pelo Tutorial e Site

  29. Jonathan
    27 de maio de 2011 at 6:31
    Responder

    Boas Carlos,
    um pai de um amigo meu pediu-me para tentar fazr-lhe um site para a sua pequena empresa.
    Escrevi, seguindo o tutorial, estas linhas de código:
    HTML:

    FACASAL

    Topo do site

    Conteudo do site

    Rodape do site

    CSS:
    body {
    background-color:252525;
    color:213821382138;
    font:”Trebuchet MS”, Arial, Helvetica, sans-serif;
    margin:0px;
    padding:0px;
    }
    #GERAL {
    background-color:009900;
    }
    #TOPO {
    background-color:33CCFF;
    }
    #CONTEUDO {
    background-color:FF9900
    }
    #RODAPE {
    background-color:CC0000;
    }
    Este link contém a imagem do resultado das linhas de código digitas anteriormente:
    http://imageshack.us/f/69/passo6a.jpg/
    O resultado não era suposto ser este, consegue ajudar-me?
    Boas continuação e parabéns por todo o trabalho desenvolvido neste blog, parabéns mesmo!

    • Jonathan
      27 de maio de 2011 at 6:35
      Responder

      Não sei porqué mas não aparecem as linhas de código html, fica aqui um print screen com as linhas:
      http://imageshack.us/f/805/htmla.jpg/

      • CarlosHPS
        18 de julho de 2011 at 16:15
        Responder

        Oi, Jonathan
        Você inventou moda, rapaz…rsrs
        você colocou: <fa ID... no lugar de <DIV ID... Isso não existe, moço…rsrs
        DIV é uma tag obrigatória e sem substituição. Muda lá.
        Boa sorte.

        CarlosHPS Webdesigner 8)

  30. Eliane
    2 de junho de 2011 at 21:48
    Responder

    Olá Carlos, que bom que ainda existem pessoas no mundo iguais a você – sempre prontas para compartilhar seus conhecimentos, sem se ater apenas ao financeiro. Parabéns. Um abraço, Eliane.

    • CarlosHPS
      18 de julho de 2011 at 16:17
      Responder

      Ai, Eliane
      Chego a me emocionar (sério mesmo). Obrigado, viu?!
      Grande abraço e valeu pela força.

      CarlosHPS Webdesigner 8)

  31. Não funciona
    8 de agosto de 2011 at 19:34
    Responder

    Boa noite Carlos,

    Sou totalmente inexperiente em desenvolver sites, estou lendo o seu tutorial como base e, infelizmente, nao consigo fazer o seu exemplo rodar corretamente!!!

    O meu codigo fonte – INDEX é:

    CarlosHPS Vídeo-Locadora

    Topo do Site

    Conteúdo do Site

    Rodapé do Site

    e o arquivo do estilo é:
    /*
    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
    Criado em: 27/06/2008 | Caldas Novas – Goiás
    Atualizado em: 25/12/2010
    Autor: CarlosHPS Webdesigner
    */

    /*Formatação básica do layout
    ****************************/
    body {
    background-color:#252525;
    color: #213821382138;
    font: 11px “Trebuchet MS”, Calibri, Verdana, Arial;
    margin:0px;
    padding:0px;
    }
    /*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;
    }

    Porem nao consigo fazer a pagina ficar com o estilo nem nada, so aparece:

    Topo do Site
    Conteúdo do Site
    Rodapé do Site

    QQ ajuda e bem vinda

    Abraços

    • Não funciona
      8 de agosto de 2011 at 21:00
      Responder

      O codigo index é:

      .
      .
      .
      .
      .
      .CarlosHPS Vídeo-Locadora
      .
      .
      .
      .
      .
      .
      .
      .
      . Topo do Site
      .
      .
      . Conteúdo do Site
      .
      .
      . Rodapé do Site
      .
      .
      .
      .
      .

  32. re
    24 de setembro de 2014 at 16:01
    Responder

    Olá Carlos, seu site é maravilhoso. Parabéns!
    Preciso de uma orientação sua, fiz o download do arquivo-fonte mas a pasta imagem está vazia. Só tem os scripts na pasta. Porém no link fala que são 305 arquivos. São só os scripts mesmo ou deu erro na hora de baixar o arquivo?

  33. Edmilson Oliveira
    2 de fevereiro de 2015 at 14:30
    Responder

    Meu Amigo ja estou procurando explicações assim há tempos e encontrei através de um pdf de um monstro chamado CarlosHPS. Desculpe o monstro mas é porque sua metodologia é muito boa e sua didática e excepcional, você é demais cara parabéns e o meu muito obrigado. Agora vou conseguir construir uma página ou varias. quando fica pronta te envio pra ver como ficou, mas vou ficar estudando mais com vc.
    Será que ninguem tentou criar um aplicativo educacional que edite html e com um enter ele simule a pg da internet criado por ele mesmo seria bom. valeu mano.

  34. hélio
    16 de outubro de 2015 at 8:58
    Responder

    muito bom o site parabéns!
    estou com dúvida na hora de vincular o arquivo .css com o .html
    hora que eu vinculo-os no phpeditor
    tudo certo fica colorido mais na hora de manda-lo para web no filezilla abro a página e não esta colorido o que eu faço?

    • CarlosHPS Webdesigner
      CarlosHPS Webdesigner
      10 de fevereiro de 2016 at 10:39
      Responder

      Hélio,
      Quando vinculamos arquivos localmente, para eles funcionarem online, é preciso permanecer a mesma estrutura de pastas, nomenclatura, no servidor. Do contrário, pode dar errado sim. Dê um printscreen na tela e deixa eu dar uma olhada.

Deixe uma resposta
Captcha Clique para atualizar o código