Produzir um site com as funções mais comuns.

Planejamento

O primeiro passo é o planejamento do site, para tanto descreva o que pretende mostrar e faça a diagramação, um rascunho de um projeto gráfico de cada página, definindo para onde cada link irá apontar. Pense em uma página de abertura, e como esta será apresentada graficamente, posição de imagens e textos, cores, links, etc.

Iniciando o FrontPage Express

Para abrir o programa, clique no botão INICIAR. Aponte o cursor até PROGRAMAS e clique sobre FrontPage Express. Você notará que a área de edição segue o padrão Windows e é muito parecida com um editor de textos.

Segundo Plano

Existem várias formas de se iniciar uma página, optamos por começar pelo segundo plano, ou seja a área sobre a qual os demais itens serão montados.

Para tal, clique sobre a área branca da página com o botão direito do mouse. Na janela que se abre, aponte para PROPRIEDADES DA PÁGINA e clique.

Na guia SEGUNDO PLANO, há duas possibilidades de compor o segundo plano:

1. Cor: pré-definida ou cor personalizada. Escolha a cor e dê OK, sua página assumirá a cor escolhida.

2. Imagem: habilite o check box "IMAGEM DE SEGUNDO PLANO", em seguida clique em PROCURAR, na janela que se abre opte por PROCURAR novamente. Abrirá então, uma tela com as pastas do seu computador, localize a pasta com as imagens, selecione a imagem desejada e clique em ABRIR.

Lembre-se que quanto maior o tamanho da imagem, maior será o tempo de carregamento da mesma, é aconselhável então escolher imagens leves que "baixem" mais rapidamente.

Obs.: O mesmo procedimento pode ser feito com células de uma tabela, na qual cada célula poderá ter um fundo distinto, como veremos adiante.

Textos

Observaremos a seguir que na digitação e na formatação de um texto esse é tratado como se estivéssemos em um editor de textos. Digita-se o que se deseja e em seguida seleciona-se o texto a ser formatado, em seguida clicando com o botão direito do mouse sobre essa área, opta-se por PROPRIEDADES DA FONTE, onde é possível alterar tamanho, cor, estilo, efeito e tipo de fonte. Da mesma forma para as PROPRIEDADES DO PARÁGRAFO.

Salvando sua Página

Clique sobre o ícone de gravação (salvar). Na caixa que aparece, digite o título da página, em seguida clique na opção COMO ARQUIVO. Escolha a PASTA na qual você irá salvar os arquivos do seu site. Como sugestão de nome do arquivo, de preferência utilize nomes com 08 (oito) caracteres minúsculos, sem acentos, cedilhas, etc. Podemos também aceitar o nome sugerido pelo próprio programa que tomará como base o título da página. Porém se essa for sua página inicial, é importante saber que a mesma deve ser salva com o nome index.html, pois é o nome padrão de reconhecimento de páginas de entrada de um site. 

Definido o nome do arquivo, clique na opção SALVAR e na mensagem que surge clique SIM.

Para visualizar a página abra o browser e no menu ARQUIVO, ABRIR, botão PROCURAR, localize sua PASTA e clique sobre o arquivo (htm ou html) que foi criado. É bom lembrar que ao trabalhar com o FrontPage Express há a necessidade de mantermos o navegador aberto para que possamos visualizar como a página realmente está ficando, pois muitas vezes o que nos é mostrado no editor não se apresenta da mesma forma no browser (apesar deste ser um editor de páginas do tipo "WYSIWYG").

Outro detalhe é que toda modificação feita no editor, para ser visualizada no browser, deve ser salva e ao visualizar a página no navegador é necessário dar um refresh para que a mesma seja atualizada.

Hiperlink

Escreva na página seu nome, selecione-o e clique no ícone  (criar ou editar hiperlink) na barra de ferramentas, na janela que se abre. O programa traz as opções do tipo se hiperlink a ser criado, se para uma homepage (http), se para um e-mail (mailto), etc. Outra opção é escrever diretamente o endereço no campo URL, para páginas que já se encontram na WEB.

Porém, para simplificar o trabalho, optamos pela alça NOVA PÁGINA. Observe que seu nome já aparece no título da página a ser criada e a URL também. Se aceitar o proposto, será criada a sua nova página. Salve a mesma.

Agora faremos um hiperlink de retorno a primeira página. Escreva algo que identifique um link de volta à página inicial, selecione-o e clique sobre o botão CRIAR OU EDITAR HIPERLINK. Escolha agora a alça ABRIR PÁGINAS. Observe que lá estará a sua página inicial listada. Clique sobre a mesma selecionando-a e em seguida OK, na mensagem que surge clique SIM.

Imagens

Para inserir uma imagem (foto, figura, gif animado), posicione o cursor no local desejado. 

Em seguida, clique no ícone  INSERIR IMAGEM. Na janela clique em PROCURAR. Encontre a pasta com a imagem que deseja. Selecione a mesma e clique em ABRIR. Essa será inserida na página. Para redimensioná-la, clique sobre a imagem, aparecerá um contorno com nós de redimensionamento.

Para criar um hiperlink em uma imagem, selecione-a e siga os mesmos procedimentos de criação de links vistos anteriormente.

Com relação às imagens, um dado importante: o editor de páginas pode ser visto como um software que possibilita a montagem da página, não incorpora as imagens e outros arquivos inseridos. Para que as mesmas funcionem adequadamente é necessário que os arquivos inseridos (imagens, sons e outros) estejam na mesma pasta em que se encontram os arquivos htm ou html, gerados no FrontPage Express. Isto porque para disponibilizarmos a página na rede, esta deve ser acompanhada dos arquivos inseridos, caso contrário estes não aparecerão.

Tabelas

Nas páginas, as tabelas são de grande utilidade, pois é a forma mais prática de apresentar textos e outros objetos em colunas. A maioria das páginas atuais utilizam esse recurso. Na barra de ferramentas localize o ícone INSERIR TABELA e escolha o número de células que desejar. É um processo muito parecido como inserir tabela no Word.

Caso a tabela não esteja aparecendo, clique sobre o ícone  MOSTRAR/OCULTAR. Em seguida, sobre a tabela clique com o botão direito do mouse e escolha PROPRIEDADES DA TABELA. Habilite a opção ESPECIFICAR LARGURA e EM PORCENTAGEM, digite o valor que você definir como largura para sua tabela em relação à página.

Podemos também definir o ALINHAMENTO da tabela dentro da página, especificar se queremos BORDAS aparentes, mudando o valor deste box, caso contrário deixamos o valor "zero" para tabela sem bordas. Aplicar uma cor ou imagem de PLANO DE FUNDO para a tabela. Tudo definido, clique em OK.

Agora é só posicionar o cursor dentro da tabela, na célula desejada, e digitar o texto ou inserir imagens.

Podemos ainda configurar cada célula separadamente. Clique sobre a célula desejada com o botão direito do mouse e em PROPRIEDADES DA CÉLULA. Especifique o alinhamento horizontal e vertical e largura da célula, imagem de segundo plano, etc.
 

Som

Para que sua página ao ser exibida execute uma música, clique com o botão direito sobre uma área qualquer da página e escolha a opção PROPRIEDADES DA PÁGINA. Na janela que se abre, localize na alça GERAL a opção SOM DE FUNDO. Clique no botão PROCURAR, localize o som (mid ou wav, de preferência), clique em ABRIR. Configure quantas vezes será executado no box LOOP ou assinale ININTERRUPTO se for o caso.

Inserindo Letreiro Digital

Na barra de MENUS, clique em INSERIR, LETREIRO DIGITAL, Aparecerá a seguinte janela:

Escreva o letreiro na caixa de texto. Defina a DIREÇÃO, VELOCIDADE, COMPORTAMENTO E ALINHAMENTO. Assinale CONTINUAMENTE, OK.

Para formatar o tamanho, fonte, cor do letreiro digital:

Dê um clique em cima do letreiro digital, na BARRA DE MENUS, escolha FORMATAR, FONTE, faça as alterações e OK.

Obs.: Esses letreiros só serão visualizados no browser Internet Explorer, pois o Netscape não permite sua visualização.

Um pouco de HTML

Algumas correções muitas vezes são necessárias, para que se possa colocar sua página na rede e esta funcione adequadamente.

• Correção de títulos

Para alterar o título de sua página, abra-a. Na BARRA DE MENUS, clique em EXIBIR, HTML. Altere a seguinte linha de seu código html:

De: <title>Página normal sem título</title>

Para: <title>Título que você definir</title>

• Correção de links de figuras 

Localize e altere os links das figuras de sua página. Abra a página que será alterada. Na BARRA DE MENUS, clique em EXIBIR, HTML. Altere a seguinte linha de seu código html:

De: <p><img src="file:///C:/... .../arquivo.gif" width="75"height="100"></p> 

ou: <p><img src="file:///A:/... .../arquivo.gif" width="75"height="100"></p>

Para: <p><img src="arquivo.gif" width="75"height="100"></p>

Observe o procedimento acima em todas as figuras das páginas que você construir, pois caso contrário o browser não buscará as imagens no mesmo diretório onde se encontra a página.
 

Exercício

Fazer uma página simples, usando os recursos do software e as imagens e textos da pasta da aula.
Diagramação livre.

Textos

Imagens