CarlosHPS Blog - Artigos, Tutoriais e Dicas para Designers e Programadores da Web. » Tableless

Como Criar um Topo de Site com Menu CSS: Parte 2

CarlosHPS — Fri, 15 Jan 2010 00:11:26 +0000

Olá, pessoal Na primeira parte deste tutorial, criamos a base do nosso topo, inserindo alguns efeitos simples, porém poderosos quanto ao resultado final. Em sequência, complementaremos o topo colocando o menu principal e dois ícones para o RSS e o Twitter e, em seguida, aplicaremos a técnica sp Leia mais...

Comunidade dos membros do blog e seus trabalhos.

Divulgue seu trabalho.
Faça parte do CarlosHPS Flickr Group

Criando layouts CSS a partir do zero: 1 coluna

CarlosHPS — Sun, 29 Nov 2009 16:10:20 +0000

Atendendo a diversos pedidos, vou iniciar uma nova série denominada "Criando layouts CSS a partir do zero", onde criaremos 4 layouts de uma, duas, três e quatro colunas. :D

Comunidade dos membros do blog e seus trabalhos.

Divulgue seu trabalho.
Faça parte do CarlosHPS Flickr Group

Criando um Site Passo-a-Passo: Parte FINAL

CarlosHPS — Wed, 17 Sep 2008 21:00:03 +0000

Olá, pessoal! Estamos diante da nossa última parte desta série que caiu na graça do povo :D

Comunidade dos membros do blog e seus trabalhos.

Divulgue seu trabalho.
Faça parte do CarlosHPS Flickr Group

Criando um Site Passo-a-Passo: Parte 9

CarlosHPS — Sun, 17 Aug 2008 19:53:05 +0000

Olá, pessoal. Este é nosso penúltimo artigo da série Criando um Site Passo-a-Passo e, finalmente, veremos como ficará o nosso projeto, não é verdade?!

Comunidade dos membros do blog e seus trabalhos.

Divulgue seu trabalho.
Faça parte do CarlosHPS Flickr Group

Criando um Site Passo-a-Passo: Parte 8

CarlosHPS — Thu, 17 Jul 2008 19:27:51 +0000

Em prosseguimento à série “Criando um Site Passo a Passo”, vamos trabalhar, neste tutorial, as áreas central e barra lateral do layout da CarlosHPS Vídeo-Locadora, no que se diz respeito às sua locações e imagens de fundo.

Comunidade dos membros do blog e seus trabalhos.

Divulgue seu trabalho.
Faça parte do CarlosHPS Flickr Group

Criando um Site Passo-a-Passo: Parte 7

CarlosHPS — Mon, 07 Jul 2008 12:05:07 +0000

Em prosseguimento Ã sÃ©rie "Criando um Site Passo a Passo", desenvolveremos neste tutorial a barra de navegaÃ§Ã£o, juntamente com seus itens e inseriremos algumas imagens que comporÃ£o o layout da CarlosHPS VÃdeo-Locadora.

Comunidade dos membros do blog e seus trabalhos.

Divulgue seu trabalho.
Faça parte do CarlosHPS Flickr Group

Criando um Site Passo-a-Passo: Parte 6

CarlosHPS — Sun, 29 Jun 2008 16:25:59 +0000

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

Comunidade dos membros do blog e seus trabalhos.

Divulgue seu trabalho.
Faça parte do CarlosHPS Flickr Group

Criando um Site Passo-a-Passo: Parte 5

CarlosHPS — Wed, 25 Jun 2008 19:25:05 +0000

Olá, pessoal

Continuando a série “Criando um Site Passo-a-Passo“, após termos visto alguns conceitos importantes, vamos colocar a “mão na massa” a partir de agora.

Simularemos aqui, a criação de um site para uma locadora de vídeo, ok? Então vamos lá.

1º – BRIEFING

Nome da Empresa

CarlosHPS Vídeo-Locadora

Ramo de Atividade

Vídeo Locadora

Pontos Fortes:

Atendimento
Promoções constantes
Entrega em domicílio
Catálogo virtual

Objetivo:

Disponibilizar o acervo de DVD’s da CarlosHPS Vídeo-Locadora aos seus clientes e usuários em geral da Internet.

Este seria um breve resumo do briefing da empresa. De posse dessas informações, faz-se uma pesquisa de no mínimo 10 sites concorrentes ou não, do mesmo ramo de atividade para se ter uma noção do que já se aplica na web. Sem esquecer de também solicitarmos ao cliente, peças publicitárias, manual de identidade visual e tudo o que for possível para a complementação do nosso conhecimento da empresa.

2 – MAPA DE SITE (Sitemap)

Como também foi visto na 3ª parte desta série, após esta pesquisa, criamos um esquema que será manuseada e compreendida pelo cliente e pela equipe envolvida na implementação do projeto.

Um mapa de site é a representação gráfica da estrutura de um website, do ponto de vista da distribuição do conteúdo através de páginas e do caminho mais simples (links) a ser percorrido pelo usuário para chegar à página desejada.

Vejamos como ficou o mapa da CarlosHPS Vídeo-Locadora:

Fig. 01: Sitemap do site da CarlosHPS Vídeo-Locadora

3 – WIREFRAME

Digamos que seja o “primo pobre” do layout…rsrs

O wireframe é um “esqueleto”; uma estrutura simples que nos auxilia na produção do site, tornando o processo mais ágil, padronizada e eficiente. Seu maior objetivo é determinar onde cada conteúdo se encaixará no site, levando em consideração o grau de importância com relação aos demais objetos que comporão o layout como um todo.

Complicado? :dizzy:

“Né nada”!

Veja o exemplo do wireframe básico do nosso projeto:

Fig. 02: Wireframe básico da CarlosHPS Vídeo-Locadora

Lembrando que é uma estrutura básica. Caso haja necessidade, podemos detalhar mais. Fica a critério da situação.

É isso aí, pessoal.

O site a ser montado terá este layout:

Fig. 03: Layout do site da CarlosHPS Vídeo-Locadora

Quem desejar criar seu próprio mapa de site e wireframe e quiser me enviar pra eu dar uma olhadinha, fiquem à vontade.

Próximo artigo, veremos sobre o fatiamento do layout da CarlosHPS Vídeo-Locadora e como montar sua estrutura básica em HTML e CSS.

Até lá.

CarlosHPS Webdesigner

Webtutoriais:34547DA3

Comunidade dos membros do blog e seus trabalhos.

Divulgue seu trabalho.
Faça parte do CarlosHPS Flickr Group