Crie um site em ambiente 100% amigável com o editor de páginas HTML gratuito Nvu
O editor de páginas HTML Nvu (pronuncia-se n-view, de new view) veio ao mundo disposto a ser uma alternativa gratuita ao melhor software do gênero, o Dreamweaver, da Macromedia, e a outros programas pagos, como o FrontPage. A empresa responsável pelo projeto Nvu, que tem o código-fonte aberto, é a Linspire (ex-Lindows), que oferece o editor em versões para Windows, Linux e Mac. O Nvu ainda não é rival à altura do Dreamweaver, mas não deixa na mão os usuários que desejam fazer um site HTML estático e não tem a menor intimidade com tags e códigos. O ambiente de trabalho é totalmente amigável, ideal para a criação de sites simples, sem recursos dinâmicos ou necessidade de atualização muito freqüente, como o de um grupo de praticantes de trekking e esportes de aventura, como mostraremos no tutorial a seguir.
1. PÁGINA-MODELO
Antes de começar a criar o site no Nvu, é importante ter em mente como será o layout e ajustar previamente as imagens às dimensões que elas assumirão nas páginas. Feitas essas preliminares, faça o download do Nvu 1.0 em www.info.abril.com.br/download/4155.shtml e instale o programa. Com o editor aberto, a primeira providência é criar um modelo de página com o logotipo do site e um menu com links no topo. Não adianta procurar por templates, pois um dos defeitos do Nvu é justamente a falta de opções de páginas pré-produzidas. Essa página servirá de base para a home page e as páginas internas. Abra o menu Insert, clique em Table, use o mouse para selecionar a opção 2 x 2, que gera uma tabela com duas linhas e duas colunas, e pressione OK. Para criar a área para o logo e os links no topo da página, arraste o mouse para selecionar as duas células da primeira linha, clique com o botão direito e escolha Join Selected Cells. Agora, insira a imagem que ficará no topo da página pressionando o botão Image e apontando onde está o arquivo. Finalize em OK. Clique com o botão direito na célula à esquerda da segunda linha e escolha Table Cell Properties. Entre na aba Table e indique a largura (Width) da coluna com 779 pixels e coloque o valor 0 no campo Border. Em Table Alignment, escolha Center. Vá à aba Cells e ajuste a largura para 150 pixels e, em Background Color, escolha a cor de fundo do menu. Pressione Apply e OK.
2. LOGOTIPO E MENU
Em seguida, entre no menu Image, localize o arquivo com o logo do site e preencha o campo Alternate Text com um texto que será exibido somente quando algum problema impedir o carregamento do arquivo com o logo no browser de um visitante do site. Ainda na caixa Image Properties, acione a aba Link, digite index.html e dê OK. Digite os itens do menu na célula ao lado do logo. Para adicionar os links, selecione o texto, clique em Link na barra de ferramentas e indique para onde o atalho deve apontar. Como as páginas internas do site ainda não foram criadas, digite um nome e depois use esse mesmo nome na página correspondente. Finalize em OK.
3. HOME PAGE
No centro da página vamos criar uma linha a mais na tabela para receber o conteúdo. Para isso, entre em Table, depois em Insert e escolha Row Below. Em seguida, selecione as duas células dessa linha e, pelo botão direito do mouse, use o comando Join Selected Cells para mesclá-las. Por fim, selecione a área central, vá até as propriedades da tabela e determine a cor de fundo. A página- padrão está pronta. Use o botão Save na barra de ferramentas para salvar a página como modelo. Em seguida, entre no menu File e, na opção Save As, salve o arquivo com o nome index.html (home do site). É hora de jogar o conteúdo da home, que, no nosso caso, consistirá em três chamadas com fotos. Para isso, use o comando Insert Table para inserir uma tabela de 2 x 2. Em seguida, retire as bordas da tabela entrando em Table Properties e zerando o campo Border. Dentro de cada célula, coloque o respectivo texto. No nosso caso, como a chamada do lado direito terá uma foto vertical, vamos mesclar as duas células à direita antes de adicionar o texto. Para formatar o texto (fonte, tamanho, cor, estilo etc.) use os recursos disponíveis na barra de ferramentas.
4. FOTOS
Por meio do botão Image, insira as fotos de cada destaque nos locais adequados. Não se esqueça de, depois de localizar a foto dentro da caixa Image Properties, acionar a aba Appearance e acertar o alinhamento da imagem em relação ao texto no campo Align Text to Image. Ao longo do trabalho é importante checar como está ficando o resultado. Para isso, basta apertar o botão Browse para que a página em construção seja visualizada no navegador. Quando todos os elementos estiverem organizados de forma harmoniosa, entre no menu Format, em Page Title and Properties, e preencha os campos correspondentes com o título da página, a descrição e o idioma. Essas informações são vitais para que a página seja localizada e categorizada pelo Google e demais ferramentas de busca da web. Confirme em OK e salve o arquivo.
5. PÁGINAS INTERNAS
Para montar as páginas internas, abra a página- modelo e salve-a com outro nome. No nosso caso, vamos fazer a página trekking.html, que trará uma breve apresentação no alto da página, uma galeria de fotos no lado esquerdo e o texto acompanhado de imagens menores no campo principal. A primeira providência é inserir duas novas linhas abaixo da tabela. Na primeira delas, mescle as células e insira o título do texto e uma breve apresentação. Na linha seguinte, jogue o texto principal na célula à direita e use as ferramentas de formatação de texto de acordo com suas preferências. Depois, insira as imagens relacionadas a cada tópico. Um toque final para destacar o conteúdo principal é inserir uma grade nessa célula. Para isso, use o botão direito para entrar nas propriedades da tabela e, na aba Cells, clique em Advanced Edit. Em seguida, entre em Inline Style. No campo Property, escreva border, e, em Value, digite 1px solid #000. Confirme em OK. Isso colocará uma borda de 1 pixel na cor preta no campo principal da página. Feche a caixa de propriedades pressionando Apply e OK.
6. GALERIA DE IMAGENS
A etapa final é a montagem da galeria de fotos. Na tabela à esquerda, chame a tela de propriedades, entre na aba Cells e, em Content Alignment, assinale Vertical e Top. Assim, o título que você digitar para a galeria vai ficar no alto da tabela. Ainda em Cells, configure a largura (Width) para 250 pixels. Na aba Table, coloque 0 na borda e 3 em padding para aumentar o espaçamento interno entre a borda da célula. Clique em Apply e OK para retornar à janela de trabalho. Depois, é só inserir as fotos e, com a tecla Enter, definir a distância vertical entre cada uma delas. Agora que você já conhece os fundamentos do Nvu, basta criar as outras páginas do site, partindo do seu template personalizado, e depois enviá-las ao serviço de hospedagem de sites em que você possui uma conta. Para isso, é só clicar no botão Publish, na barra de ferramentas do software. Confira como ficou o site feito neste tutorial em www.info.abril.com.br/edicoes/234/nvu.
