MANUAL DE CONFECÇÃO DE SITES HPB
Confeccionar seu site é mais tranqüilo que você imagina! O programa que a Business implantou para você é rápido e fácil. Basta seguir estes passos:

1- Digite www.b.com.br/hpb
2- Em Usuario HPB Bulder digite seu login (fornecido pela Business )
3- Em Senha digite sua senha (fornecida pela Business)
4- Clique em Entrar
5- Agora você vai começar a construir sua página.
6- Coloque seu e-mail . Lembre-se : utilize o e-mail que você lê todos os dias.
*Dica: É importante que você se acostume a ler e responder seus e-mails diariamente, para demonstrar rapidez e presteza para seu cliente.

7- Coloque o Título de sua Página.
*Dica: Para ter uma boa posição nos mecanismos de buscas, coloque o nome de sua empresa e palavras chaves relacionadas a ela. Por exemplo:" Pizzaria do Papa restaurante, São Paulo, pizzas , massa, calzones , entregas.”

8- Escolha como será o modelo de sua página (layout):
Veja:
-Menu é o local onde ficarão os links (botões) para as páginas internas dos sites
-Topo é uma página que sempre se mantem (com a logo, por exemplo) mesmo nas outras sub páginas.
-Uma página sem topo é aquela que , ao você clicar no link para uma subpagina , aparecerá somente a subpágina e não a página do topo.
Veja os exemplos de cada tipo de página , para você entender melhor:
a) Menu a esquerda e topo : www.ibdci.com.br
- Sendo , que a página de "Topo" é a faixa superior onde consta
IBDCI _ Instituto Brasileiro do Cidadão"
- Menu : a barra a esquerda onde constam os botões
b) Menu a direita e topo: www.casapropria.b.com.br
c) Menu no meio: www.casadecampo.b.com.br
d) Menu no topo: www.convitesrosa.b.com.br
-Sendo que o menu substitui neste caso , a página de topo
e) Menu a esquerda sem topo : www.lavanderialimpeza.b.com.br
f) Menu a direita sem topo: www.manualdapisicina.b.com.br
g) Menu no rodapé , sem topo: www.manualdamaodeobra.b.com.br

9- Selecione Borda:
A Borda é um "acabamento" dado ao menu e ao topo . Você pode escolher com ou sem borda.
Veja os exemplos:
a) Sem Borda: www.despesasdocasamento.b.com.br
b) Com Borda: www.casapropria.b.com.br
* Dica : Os designers mais modernos estão abolindo a borda. Para dar um ar mais profissional a sua página , experimente retira-la

10- Criando a Página Top
Este passo só irá parecer quando você escolher o layout com página de topo ( Passo 8) , se você escolheu sem Topo irá passar direto para o Menu ( Passo 11)
A página Top é a Página de Topo , que , quando selecionada se mantem em todas as página internas do site.
Na página Top , normalmente é colocado : Sua logomarca e nome da empresa.
-A logomarca ou qualquer outra ilustração que você quiser colocar na página de Top é interpretada pelo programa como "Figura" , portanto , você pode colocar:
a) Figura a Esquerda: Veja o exemplo: www.manualdareforma.b.com.br
b) Figura a Direita : Veja o exemplo: www.especialcasadepraia.b.com.br
c) Somente Texto ( Quando não há qualquer figura). Veja o exemplo : www.ibdci.com.br
d) Somente Figura ( Quando não há nada escrito na página de Top) . Veja o exemplo: www.casapropria.b.com.br
-Escolha a cor de fundo :
Escolha a cor de fundo de sua página Top.
*Dica : A cor de fundo não deve ser semelhante a cor das letras , quando houver texto, pois isso dificultará a visualização.
10a) Escolha a fonte do texto:
"Fonte" nada mais é do que o tipo de letra que você irá usar na sua página Top
Veja que cada um dos tipos de fonte esta escrita na forma da letra escolhida
*Dica : Use em toda a sua página um único tipo de letra ( fonte) . O resultado será um site mais profissional.
*Dica : O tipo de letra (fonte) escolhida deve "combinar" com o assunto de seu site. Assim, por exemplo , se estiver fazendo o site de um escritório de advocacia , ou um consultório , opte pelas fontes mais sóbria ( como a Geórgia , Courier New ou Times New Roman). Já se a página for voltada para o lazer , como em um restaurante , utilize uma fonte mais "divertida" (como a Comic Sans MS , MS Sans Serif ou Verdana ) . Ou ainda páginas voltadas ao publico feminino fontes mais "românticas" ( como a Bookman Old Style).
10b) Escolha o tamanho da Fonte:
Aqui você irá escolher o tamanho da letra .
*Dica: Na página de Top você deve utilizar uma letra maior do que a que irá utilizar nas páginas internas do site . Tente : fonte no. 4 ou 5.
10c) Escolha a cor do texto:
Aqui você irá escolher a cor da letra.
*Dica : Sempre observe que a cor da letra deve contrastar com a cor do fundo. Se forem iguais não será possível ler o texto e se forem de tonalidades parecidas , haverá dificuldade para a visualização pelo Internauta.
*Dica: Você pode escolher as cores básicas da sua logomarca , ou ainda optar por um texto em preto.
10d)Texto:
Na sua página de Top , se você selecionar a opção de Texto , deverá entrar com o texto que quer ver na parte superior de seu site.
*Dica: Normalmente na página de Top é colocado o nome da empresa .
10e) Clique em Avançar
10 f) Imagem de Fundo:
A imagem de fundo é seu "papel de parede" da página Top . Você pode utiliza-la ou não. Se você escolher não utiliza-la , clique em "Nenhuma Imagem de Fundo (apenas cor de fundo) , que neste caso será utilizado somente a cor de fundo já escolhida anteriormente.
Se resolver utilizar um "papel de parede" poderá escolher de seu computador ou as opções do sistema.
*Dica: Na página de Top você pode colocar somente a página de fundo , sem qualquer figura ( opte por apenas texto e não digite nada no local do texto) , utilizando-a como uma "marca da água" . Esta figura pode ser sua logomarca , ou outra qualquer. Veja um exemplo em : www.belezadanoiva.b.com.br
*Dica: Se você for iniciante opte pela opção sem imagem de fundo, o que facilitará seu trabalho.
Depois de escolhido clique em Avançar
10g) Imagem :
Se você optou por uma página Top com imagem , então o sistema irá pedir para que você selecione a imagem que for necessária , em seu computador.
*Dica : O sistema não procura imagens que tenham um espaço no seu nome como por exemplo "rosa vermelha" . Se isso ocorrer grave novamente a imagem com o nome sem o espaço interno como "rosavermelha".
*Dica : A sua imagem poderá ser sua logomarca, ou outra qualquer , ou ainda um gif animado. Você encontra lindas imagens em : www.photos.com ou gifs em www.gifmania.com
10 h) Clique em Avançar
Agora você poderá visualizar sua página , grava-la , refaze-la ou desistir .
Se for optar por visualiza-la , será aberta uma nova página mostrando como ficou sua página top. Se você gostar basta gravar , se não clique em refazer.
10 i) Depois de gravado o programa irá passar a página de confecção do Menu

11- Criando Menu
Nesta página você ira criar a "barra" onde ficarão os botões/links ( endereços ) das páginas internas ao do seu site . Observe na domínio www.convitesrosa.b.com.br , o menu é aquela barra superior onde constam os botões "Home" , "Sobre a Gráfica" Portifolio" , etc...
11a) Layout do Menu :
-Texto Sublinhado : Por exemplo o menu de : www.manualdamaodeobra.b.com.br
-Texto Sem Sublinhado : Por exemplo o menu de : www.manualdareforma.b.com.br
-Texto com Botão : Quando há um botão a esquerda do nome do link. Por exemplo : www.convitesrosa.b.com.br
-Texto em Tabela : Quando os links ficam em uma "tabela" , como por exemplo: www.pizza.b.com.br
*Dica: Seu site ficará com um ar mais profissional se você colocar seu menu com texto em tabela.
11b)Escolha a cor de fundo:
Você irá escolher a cor de fundo do menu.
Dica: Se você quiser que a divisão do menu não apareça pode colocar a cor de fundo na cor de todas as suas outras páginas. Por exemplo: www.pizza.b.com.br
11c) Escolha a Fonte do Texto:
Escolha o tipo de letra ( leia a dica do item 10 a)
Dica: Escolha o mesmo tipo de letra (fonte ) para todo o seu site . Ficará mais profissional
11d) Escolha a Cor do Texto:
Escolha a cor que será escrito o texto dos links ( leia a dica do item 10 d)
11e) Clique em Avançar
11 f) Escolha a Imagem de Fundo ( leia o item 10 f)
Dica: Se você quiser pode dar um "ar" colorido a sua página colocando no fundo do menu uma imagem. Quando colocar esta

imagem , utilize o menu em tabela , para "destacar" o texto nos links . Veja : www.chadepanelaechadebar.b.com.br
11g) Escolha visualizar, gravar ou avançar ( leia o item 10 h)

12- Criando Páginas Internas
Agora você vai começar a criar o conteúdo do seu site.
12a) Escolha o Layout:
O seu layout pode ser :
-Somente Texto: Quando você quiser uma página interna somente escrita , sem figuras.
-Uma figura Acima do Texto: Quando você optar por uma figura superior e o texto abaixo . Por exemplo : Você pode colocar a foto de sua sede e colocar uma explicação abaixo.
Ainda você pode escolher uma figura a esquerda , abaixo ou a direita
-Duas figuras e texto no meio : Aqui você poderá colocar duas fotos , dois gifs , um gif e uma logomarca, uma logomarca e uma foto , enfim, duas figuras com o texto no meio.
Dica: Para selecionar uma figura , visite o portal : www.photos.com e um gif . o portal www.gifmania.com
Dica : Pode ser usada uma figura em todos as páginas internas do site , como por exemplo , sua logomarca.
12b) Escolha a cor de fundo de sua página
*Dica: Para não errar escolha branco. Fica clássico e seu texto poderá ser visualizado de forma fácil.
*Dica: Se você quiser dar um ar "colorido" ao seu site você pode escolher cada página interna com uma cor de fundo. Já se você quiser dar um ar mais "sério" escolha uma única cor de fundo para todas as suas páginas internas.
12 c) Escolha a fonte do Texto ( forma da letra) (Leia o passo 10 a).E Escolha o tamanho da fonte ( tamanho da letra). (Leia o passo 10 b)
*Dica : O tamanho 02 é o que dá o ar mais profissional ao seu site. Experimente!
12d) Escolha a cor do texto (Leia o passo 10 c)
12e) Clique em Avançar.
12f) Escolha a imagem de fundo (Leia o passo 10 f)
12g) Clique em Avançar
12 h) Insira a imagem que terá em sua página ( foto, gif, logomarca, etc...- veja passo 10 g)
12i) Digite o texto da sua primeira página
Dica: Normalmente a primeira página é a de apresentação. Então aqui você deve descrever sua empresa, os produtos ou serviços que ela presta, o horário de atendimento , seu e-mail, telefone e endereço.
12j) Nome do Link
Aqui você deverá colocar o nome do link que aparecerá no seu menu
*Dica: A primeira página normalmente , por conter dados importantes, tem como nome "principal" ou "home”
12l) Clique em Avançar
12m)Se você escolheu uma página com duas imagens você deverá escolher a segunda imagem, caso contrario clique em gravar

13- No programa
Pronto, agora você já confeccionou a parte principal de sua página. O programa lhe enviará para a página principal dos controles.
Clique no botão a esquerda escrito "Publica Site" , e deixe seu site DISPONÍVEL para a Internet
Agora clique do botão "Visualiza Site" e veja como ficou seu site.

14- Para Criar Novas Páginas: Clique em NOVA PÁGINA e siga o passo 12
15- Botões Principais:
VISUALISA SITE Aqui você ira ver sua página. Lembre-se : você só conseguirá ver sua página se ela estiver DISPONÍVEL para a Internet . Você coloca-a de forma disponível quando clica em PUBLICAR SITE.
ALTERA LAYOUT Altera o modelo da página , veja o passo 8
PUBLICA SITE Você pode deixar seu site disponível ou indisponível para a Internet . Ou seja: quando você tiver fazendo alterações nele e não quiser que seu visitante veja antes de estar pronto, você pode altera-lo e deixa-lo indisponível para a internet. Quando ele estiver pronto você pode deixa-lo disponível novamente a seus visitantes. Assim quando você quiser deixa-lo disponível, clique neste botão.
ESCONDE SITE Quando você quiser deixar seu site não aparente ( indisponível) na Internet , basta clicar neste botão.Lembre-se : quando o site tiver indisponível você não poderá visualiza-lo.
NOVA PÁGINA Adiciona uma nova página em seu site. Veja o passo 12.
ALTERA PÁGINA Altera uma página que você já criou. Veja o passo 12.
DELETA PÁGINA Quando você quiser apagar de seu site alguma página que tenha construído , basta escolher e deletar.
ALTERA TOPO Altera a página Top de seu site. Veja o passo 10
ALTERA MENU Altera o menu de seu site. Veja o passo 11
SAIR Sai do Hpb.
Pronto! Agora você já tem seu site ! Da forma que você sempre quis! E que pode ser atualizado diariamente! Com dicas novas, alteração de preço, produtos, serviços e muito mais!
Se ficou alguma dúvida ainda : escreva para agente no info@b.com.br !

DESIGNER PASSO A PASSO
Você quer ter idéia para seu site? Como qual a cor que combina e muito mais?
Então papel e caneta na mão , siga os seguintes passos:
1- Vá em www.altavista.com.br ( ou qualquer outro mecanismo de busca) e procure páginas de concorrentes , através de
palavras chaves relacionadas a sua atividade , como "pizza" ,"sorveteria" , "gráfica" ,etc...
2- Entre nas páginas principais e anote os seguintes dados:
a) A cor de fundo : Qual a cor de fundo das páginas?
b) A cor da letra: Veja qual a cor da letra que foi utilizada.
c) Cores principais utilizadas no site: Anote-as.
3- Veja quais as informações que estão no site que você gostou. Dicas de produtos, Localização, Como Chegar, Forma de Prestação de Serviço, etc..Anote todas e pense quais pode utilizar em seu site
4- Veja qual o "formato" do site que você gostou . Tem um menu acima? Tem uma página de Topo? Tem figuras de fundo? Anote qual o formato.
5- Veja o que foi escrito parte superior do site. Como foi colocado o nome da empresa ,endereço e a logomarca. Anote.
6- Agora , com todas estas informações , "desenhe" um projeto do seu site em um papel. Escreva também todas as informações que deverão existir nas páginas internas.
7- Pronto! Com estes dados na mão ficara fácil você fazer o seu site, de forma que ele fique bonito , com um ar profissional e com todos os dados que são importantes!

FOTOS BONITAS E RÁPIDA!
Você não tem uma foto boa do seu produto? Ou quer fotos ótimas ,profissionais e no tamanho ideal para seu site? De uma olhada no www.photos.com
Ê em inglês, mas se você não entende nada de inglês, não se preocupe. Faça assim: vá ao www.google.com.br
A sua direita existe um botão "ferramentas de idioma" que traduz qualquer palavra no portugues para o ingles
.Palavra traduzida você vai para o www.photos.com e coloca no Search a palavra, da um ok e pronto.
Dai para você gravar basta ir com o mouse em cima da foto apertar o botão direito e "salvar como" você pode escolher e dai utilizar esse arquivo na confecção do seu site. É que as fotos também dão um ar profissional para a pagina.
De uma olhada ainda no www.noiva3.b.com.br , que também foi montado no hpb
Para gifs de uma olhadinha no www.gifmania.com

DICAS E PERGUNTAS DE USUÁRIOS
- O Menu com tabela , em vez de com botão fica super legal!
-Se você usar o tamanho de letra no. 2 , e sem borda no layout poderá dar um ar profissional ao seu site.
-Veja as seguintes páginas: www.pizza.b.com.br - www.convitesrosa.b.com.br - www.lavanderialimpeza.b.com.br - www.velasevelas.com.br - www.ibdci.com.br
todas estas páginas foram feitas com o hpb!
P: Quer dizer tem várias outras formas de colocar os layots também ,ok?
R: -Se você quiser colocar um gif animado em vez das fotos também dá . Repare no www.lavanderialimpeza.com.br e veja que lá é tudo gif animado que foram retirados do portal www.gifmania.com , que é em espanhol e ai facilita!!!!!!!!!
P: Esqueci de perguntar o mais importante: parece-me que existe um limite de palavras para o texto. Quando ultrapassa, como faço?
R: -Sim , nessa versão existe mesmo...É que , fica muito grande o texto e o Internauta desiste na metade , se colocar tudo numa página só...você pode dividir o texto em tópicos que podem ser colocados a esquerda , como novas páginas.
P: Como posso alterar parcialmente as letras dos textos e também tamanho; como eu construo outro site; como eu deleto um site e uma página?
R: -Vamos lá:
1º. O programa permite que você faça cada página interna como uma única fonte ( tipo de letra) então o você pode fazer, por exemplo o home, com uma letra , o dicas com outra, o informações com outra. Mas não pode alterar parcialmente dentro destas páginas a letra , ou seu tamanho. Então: cada página com um tamanho e um tipo de letra.
2º. Para você deletar uma página que o você criou no site deve ir no menu a esquerda em deletar página , escolher a página que quer deletar e pronto!
3º.Você. não pode deletar o site inteiro , mas pode deixa-lo indisponível para a internet , quando você clicar esconder site , as pessoas não irão ver o site. Para voltar que ele apareça você . deve colocar em publica site.

Outras dicas:
-Normalmente, dentro de um único site , use sempre os mesmos padrões para as subpáginas . Então: use o mesmo tamanho de letra e a mesma cor de fundo e cor de letra. Fica mais uniforme e da um ar mais profissional.
-De uma olhada nos sites: www.comoorganizarocasamento.b.com.br
-Se você notar em vez de link com botão , coloquei os links com tabela, que também fica bom.