Você está na página 1de 57

INSTITUTO DO E MPREGO E FORMAO PROFISSIONAL

CRIAO DE PGINAS WEB ndice


INTRODUO ................................................................................. 4
O QUE O F RONTPAGE? ........................................................................................ 4 F UNCIONALIDADE ................................................................................................ 4

INICIAR O F RONTPAGE ..................................................................... 6


CRIAO DE UM WEB SITE ..................................................................................... 8 F ECHAR UM WEB SITE ........................................................................................... 9 ABRIR UM WEB SITE............................................................................................. 9

CRIAR UMA PGINA WEB ................................................................ 10


VISTA PGINA.................................................................................................. 10 VISTA PASTA ................................................................................................... 11 VISTA NAVEGAO ............................................................................................ 12

EDIO E FORMATAO DE PGINAS WEB ............................................ 14


OPES DA VISTA PGINA .................................................................................... 14
VI SUALIZAR C DIGO S HTML NA PGINA ACTUAL................................................................................ 14 VI SUALIZAR O HTML DA PGINA ACTUAL.......................................................................................... 14 P R -VISUALIZAR A PGINA ACTUAL ................................................................................................. 15

F ORMATAO DA PGINA ( HEAD E BODY).................................................................. 15 T IPO DE LETRA ................................................................................................. 17 PARGRAFOS ................................................................................................... 17 INSERIR CARACTERES ESPECIAIS ............................................................................ 19 LINHA HORIZONTAL ........................................................................................... 20 LISTAS .......................................................................................................... 20 LIMITES E SOMBREADOS ...................................................................................... 22 IMAGENS........................................................................................................ 23 T ABELAS ........................................................................................................ 26

APLICAR ESTILOS DE PA RGRAFO AO S TTULO S................................................................................... 18 REPETIR A FO RMATAO DO PARGRAFO CO M O 'PINCEL DE FO RMATAO '.................................................. 19

INSE RIR UMA IMAGEM ................................................................................................................. 24 P RO PRIEDADES DE UMA IMAGEM ..................................................................................................... 24 C RIAR UMA TA BELA .................................................................................................................... 27 P RO PRIEDADES DE UMA TABELA ..................................................................................................... 27 P RO PRIEDADES DE UMA CLULA ..................................................................................................... 29 HO VER BUTTO N ......................................................................................................................... 32 E FEITO S DINMICO S ................................................................................................................... 33

HIPERLIGAES................................................................................................ 30

FRAMES ...................................................................................... 35
CRIAR F RAMES ................................................................................................. 36 PROPRIEDADES DAS FRAMES.................................................................................. 38

LIMITES PARTILHADOS E NAVEGAO ................................................. 39


LIMITES PARTILHADOS......................................................................................... 40 BARRA DE NAVEGAO ........................................................................................ 41

T EMAS........................................................................................ 44 CRIAR UM FORMULRIO ................................................................... 48


PERSONALIZAR O FORMULRIO ............................................................................... 48 PROPRIEDADES DO F ORMULRIO ............................................................................. 50

ORGANIZAR OS FICHEIROS DO WEB SITE.............................................. 51

INSTITUTO DO E MPREGO E FORMAO PROFISSIONAL


CRIAR UMA PASTA NOVA .......................................................................................51 ELIMINAR F ICHEIROS OU PASTAS .............................................................................52 GERAR UM RESUMO DO SITE...................................................................................52 SUBSTITUIR TEXTO NAS PGINAS .............................................................................53

PUBLICAR O WEB SITE .................................................................... 56

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL

INTRODUO
A Internet um meio de transmisso de dados, que veio revolucionar os sistemas de informao, despertando o interesse de todos. Com a Internet obtm-se muita informao de forma rpida, eficiente e barata relativamente quantidade de informao disponvel. No entanto, o interesse do utilizador comum em relao Internet ultrapassou o mero uso de pginas de informao criadas por outros, crescendo o apetite de criar a sua prpria pgina pessoal. Programar em HTML ( Hyper Text Markup Language ), linguagem que permite construir pginas para a WWW ( World Wide Web), mesmo no exigindo grandes conhecimentos de programao, torna-se pouco apetecvel ao utilizador comum. No mesmo sentido, o utilizador que programa com facilidade em HTML, herda uma tarefa difcil e trabalhosa, medida que a complexidade das pginas vai aumentado. Esta situao caracterstica e torna-se mais complicada nas Intranets existentes no seio de organizaes, pela necessidade da sua contnua gesto e actualizao.

O QUE O FRONT PAGE?


Como conceito bsico, o FrontPage no mais que uma ferramenta de software de edio e gesto de sites (conjunto de pginas WWW), vocacionado para Internet (a rede mundial) ou para Intranets (redes existentes no interior de organizaes, como empresas ou outras instituies). Send o proveniente da Microsoft, o FrontPage est integrado na famlia dos produtos OFFICE, no enquadramento de uma estratgia para aproximar o mundo da Internet e o ambiente Windows. Assim os utilizadores familiarizados com a famlia dos produtos OFFICE, tero uma maior facilidade em trabalho esta ferramenta, pois funciona segundo uma filosofia semelhante.

FUNCIONALIDADE
Podemos considerar dois tipos de pblico alvo do Front Page : o utilizador comum com poucos conhecimentos e o profissional da Web. Devido simplicidade do funcionamento do FrontPage , este constitui uma boa resposta para o utilizador comum que pretende criar a sua pgina pessoal, permitindo assim o uso generalizado desta ferramenta. O FrontPage integra todas as funcionalidades necessrias para desenvolver um site de uma forma simples e intuitiva, utilizando os templates e wizards (modelos para pginas e assistentes). Por outro lado, o FrontPage constitui igualmente uma boa ferramenta para o utilizador profissional (o pblico alvo por excelncia do FrontPage ), que tem por misso a edio e gesto de um conjunto de pginas com algum volume e complexidade. Ter maior facilidade na manuteno dos sites, suprimindo problemas relacionados com o carcter permanentemente mutante da Web, originando incoerncias resultantes do desaparecimento de links de ligao ou alterao do seu endereo, etc. E porque a construo do site no termina com a sua publicao, mas deve estar em permanente manuteno ( para manter os seus clientes assduos), o FrontPage presta um grande auxilio ao permit ir fazer uma gesto da prpria estrutura do site: nomeadamente com a sua funo de testar a integridade do conjunto de pginas, incluindo as hiperligaes para o exterior.

Pgina 4

Manual de Criao de Pginas Web

INSTITUTO DO E MPREGO E FORMAO PROFISSIONAL


Esquema grfico de disposio organizativa das pgi nas (com vrias modalidades), o que torna muito simples a gesto do site. Mecanismos automticos de teste das hiperligaes que o site contm. Excelente editor WWW que permite a colocao de texto, imagens e objectos multimdia de forma transparente, dispensado a necessidade de conhecimento da linguagem HTML. Servidor WWW de teste, que permite o teste das pginas de uma forma 100 % real. Funcionalidades que se podem adicionar aos servidores WWW para assi m conseguir uma integrao perfeita entre o produto de gesto e edio.

Um Site um conjunto de pginas estruturadas hierarquicamente e ligadas entre si. A primeira pgina (topo da hierarquia) tem o nome INDEX.

Aos conjunto de pginas que constituem o Site, o FrontPage designa por WEB. Deste modo, utilizador pode criar e gerir Webs (Sites) e/ou criar e editar Pginas We b.

Para tirar o mximo partido do FrontPage, recomenda-se que instale o Microsoft Internet Explorer. Quando o Internet Explorer se encontra instalado, o FrontPage disponibiliza a pr-visualizao avanada de pginas e temas. De momento, os restantes browsers no suportam estas funcionalidades adicionais

Manual de Criao de Pginas Web

Pgina 5

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL

INICIAR O FRONTPAGE
Abra o menu Inic iar/Programas e clique em Microsoft FrontPage .

Item Separador de pgina

Barra de ttulo Barra de menus

Caixa 'Faa uma pe rgunta'

Fechar a pgina Barras de deslocame nto Barra de estado

Descrio Uma forma fcil de seleccionar a pgina pretendida quando existem vrias pginas abertas. Apresenta o nome da pgina actual e a respectiva localizao no Web site. Contm menus, tais como Ficheiro, Editar, Ver e Inserir, e constitui o ponto de partida para muitas das tarefas que ir realizar no FrontPage. Para localizar mais informaes sobre um procedimento no FrontPage, escreva uma pergunta na caixa Faa uma pergunta , que acede ao sistema de ajuda online. Este boto fecha a pgina que est a ser actualmente visualizada. Permitem mover a pgina de modo a apresentar uma seco diferente. Representa o estado de uma tarefa actual. Por exemplo, a barra de estado poder apresentar o texto "A obter Index.ht m" durante a abertura da home page ou mostrar o destino de uma hiperligao quando mover o cursor do rato por cima de uma hiperligao no painel Normal. Manual de Criao de Pginas Web

Pgina 6

INSTITUTO DO E MPREGO E FORMAO PROFISSIONAL


Painis de v istas da pgina Representam os diferentes painis da rea de trabalho. Por exemplo, o painel Normal corresponde ao local onde ir realizar a maior parte do trabalho desta iniciao. Os outros painis disponveis so: painel HTML e painel Pr-visua lizao. Mostra o estado de uma aco actual. Fornece uma estimativa do tempo que ir decorrer at um utilizador conseguir visualizar a pgina num Web browser. Um painel existente nos programas do Office XP que disponibiliza comandos utilizados com frequncia. A respectiva localizao e dimenso reduzida permitem a utilizao destes comandos ao mesmo tempo que trabalha com os ficheiros. Apresentadas por predefinio. Fornecem um acesso fcil aos comandos que ir utilizar com maior f requncia no FrontPage. O que ir visualizar na janela principal do programa depende da vista actualmente seleccionada. Os cones da barra Vistas disponibilizam diversas formas de visualizar as informaes na pgina ou Web site.

Indicador de progresso Tempo de transfernc ia estimado Painel de tare fas

Barras de ferramentas Padro e Formatao Barra Vistas

possvel personalizar a rea de trabalho atravs da apresentao de barras de ferramentas adicionais ou da alterao dos botes nelas contidos. No menu Ver, aponte para Barras de fe rrame ntas e, em seguida, seleccione as barras de ferramentas que pretende visualizar. Para adicionar ou remover botes das barras de ferramentas, clique em Pe rsona liza r.

MODOS de VISUALIZAO Pgina - exibe as Pginas do Site. Sempre que abrir uma pgina estar neste modo de visualizao. Lista de Pastas - exibir ou no Lista de Pastas do Site.

Pastas - exibe as Pastas e Ficheiros do Site. Permite copiar, cortar, eliminar, mudar o nome e criar pastas e ficheiros html.

Relatrios exibe relatrios sobre o Site.

Navegao - exibe Organograma do Site.

Hyperlinks - exibe lista de hiperligaes da cada pgina seleccionada.

Tarefas - exibe as anotaes de tarefas pendentes.

Manual de Criao de Pginas Web

Pgina 7

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL


CRIAO DE UM WEB SITE
Um Web site consiste no conjunto formado por uma home page e as respectivas pginas, grficos, documentos, multimdia e outros ficheiros associados. Os Web sites so armazenados num serv idor Web ou na unidade de disco rgido de um computador. Os Web sites baseados no FrontPage tambm contm ficheiros que suportam funcionalidades especficas do FrontPage, alm de permitirem que os Web sites sejam abertos, copiados, editados, publicados e administrados com o FrontPage. Quando guardar as pginas num Web site, o FrontPage poder gerir automaticamente as hiperligaes, organizar f icheiros e pastas, manter hiperligaes dinmicas e verificar a ortograf ia de todas as pginas do assim como gerar relatrios que indiquem os problemas existentes nas ficheiros. Ao longo deste manual iremos utilizar o IPFEL como exemplo: O IPFEL um Instituto de Lnguas e Informtica. Existem cursos de Lnguas (Ingls, Francs, Alemo, Italiano...), Informtica (Office, Programao, Criao de Pginas, Design grfico, redes...) e Outros (Contabilidade, Jnior e Workshop). As inscries podero ser on-line (atravs de formulrio). A estrutura seria a seguinte: e reparar barras de Web site, pginas e

Para criar um Web site, execute os seguintes passos:


1. No menu Ficheiro, clique em Fechar para fechar a pgina actual. 2. No menu Ficheiro, aponte para Novo e, em seguida, clique em P gina ou We b. O FrontPage apresenta o painel de tarefas Nova p gina ou Web. Aqui, poder optar entre vrios modelos e assistentes de Web sites, especificar o local onde pretende guardar o Web site e especificar um nome para o mesmo. 3. Em Novo a partir de um modelo , clique em Mode los de Web site . 4. Clique em Web de uma pgina e, em seguida, prima TAB. Se premir a tecla TAB, mover a seleco para o campo onde ir especificar o nome e a localizao do novo Web site. 5. Na caixa Especifique a loca lizao da nova web , por <unidade >:\Os meus docume ntos\As minhas webs\Site IPFEL . exemplo:

<unidade > representa o disco rgido local; regra geral, a unidade C:\ ou D:\. O FrontPage cria um Web site novo intitulado "SiteIPFEL" e apresenta o respectivo nome e localizao na barra de ttulo na parte superior da janela do programa FrontPage. Uma vez que ir trabalhar com vrios f icheiros no Web site, o FrontPage tambm apresenta a Lista de pastas , na qual poder ver os ficheiros e pastas existentes no Web site actual, de forma semelhante aos ficheiros e pastas do Microsoft Windows Explorer. Manual de Criao de Pginas Web

Pgina 8

INSTITUTO DO E MPREGO E FORMAO PROFISSIONAL

6. Se a Lista de pastas no estiver visvel, efectue o seguinte procedimento: Na barra de ferramentas Padro, clique na seta que se encontra direita de Activar/Desactivar painel e, em seguida, clique em Lista de pastas .

FECHAR UM WEB SITE


1. Abra o menu Fic heiro. 2. Clique um Fechar Web.

ABRIR UM WEB SITE


1. Abra o menu Ficheiro/Abrir web. 2. Abra a pasta que contm o seu Web site. O Frontpage mostra o ltimo web site aberto. 3. Clique em Abrir.

Manual de Criao de Pginas Web

Pgina 9

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL

CRIAR

UMA

PGINA WEB

Existem 3 modos de se criar uma pgina web utilizando:

VISTA PGINA
Clique em Pgina na barra das Vistas : Ou No Painel das tarefas , na sec o Novo, clique em P gina em branco Clique no boto Cirar uma nova pgina norma l que se encontra na barra de ferramentas de Padro.

Guardar a pgina Web Abra o menu Fic heiro e clique em Guardar ou simplesmente no boto .

Pgina 10

Manual de Criao de Pginas Web

INSTITUTO DO E MPREGO E FORMAO PROFISSIONAL


VISTA PASTA
Clique em Pastas na barra das Vistas : Clique no boto Criar uma nova pgina normal que se encontra na barra de ferramentas de Padro.

O Frontpage ir sugerir o nome index, na medida em que ainda no existe uma Home Page . Ou Pressione a tecla ENTER para aceitar o nome do ficheiro Digite o nome e a extenso ( htm ou html) que pretende para o novo ficheiro (pgina).

Poder ainda utilizar a tecla direita do rato para criar uma nova pgina ou uma nova pasta.

Para abrir a pgina efectue um duplo clique sobre o ficheiro que pretende abrir.

Manual de Criao de Pginas Web

Pgina 11

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL


VISTA NAVEGAO
A vista Navegao mostra uma representao grfica da estrutura do Web site. Uma vez que criou um Web site de uma pgina, o FrontPage designou-a automaticamente como sendo a ho me page do Web site, condio esta indicada por um cone de pequenas dimenses em forma de casa .

Ainda na vista Navegao, o FrontPage apresenta igualmente a barra de ferramentas Navegao. Poder arrastar a barra de ferramentas Navegao para qualquer parte do ecr.

Ao lado da barra Vistas, o FrontPage apresenta a Lista de pastas opcional, da mesma forma que o fez na vista Pgina .

Na barra Vistas clique em Navegao: Clique no boto que se encontra na barra de ferramentas de Padro. Ou Utilize a tecla direita do rato Para mudar o nome s pginas, utilize a tecla direita do rato sobre a pgina cujo nome pretende mudar e clique em Mudar o nome .

Pgina 12

Manual de Criao de Pginas Web

INSTITUTO DO E MPREGO E FORMAO PROFISSIONAL

Para criar os nveis seguintes proceda de igual modo.

No separador da Lista das Pastas poder visualizar tambm o Painel de Navegao.

Manual de Criao de Pginas Web

Pgina 13

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL

EDIO E FORMATAO DE PGINAS WEB


OPES DA VISTA PGINA
Durante a criao da home page, trabalhou exclusivamente na vista Pgina normal; no entanto, existem trs formas diferentes de acordo com as quais poder optar por visualizar a pgina actual.

VISUALIZAR CDIGOS HTML NA PGINA ACTUAL


Na vista Pgina , clique em Mostra r sepa radores no menu Ve r.

O FrontPage mostra representaes grficas de cdigos HTML padro para a pgina actual. Esta apresentao revela-se til para as pessoas que pretendem saber o local onde os cdigos HTML so colocados enquanto esto a criar as respectivas pginas. Para ocultar os cdigos, volte a clicar em Mostrar sepa radores no menu Ver.

VISUALIZAR O HTML DA PGINA ACTUAL


Na vista Pgina , clique no boto HTML que se encontra no fim da pgina. Isto faz com que o FrontPage apresente o cdigo HTML criado at aquele momento enquanto o utilizador criava a home page. Os Web browsers descodificam estas instrues de forma a apresentar a pgina. O painel HTML foi concebido para os programadores experientes da Web e criadores de pginas Web que desejem personalizar o HTML criado pelo FrontPage.

Pgina 14

Manual de Criao de Pginas Web

INSTITUTO DO E MPREGO E FORMAO PROFISSIONAL

Se pretender def inir as suas preferncias relativamente forma como o FrontPage ir gerar o cdigo HTML, clique em Opes de pgina no menu Ferramentas e, em seguida, clique no separador Cdigo HTML. Se no tiver experincia em termos de HTML, no necessita de introduzir alteraes neste local. Clique em Cancelar para fechar a caixa de dilogo Opes de p gina . Clique no boto Normal que se encontra no fim da pgina para regressar ao painel Normal.

Enquanto est a trabalhar no painel HTML, poder utilizar diversos comandos de menu e botes de barra de ferramentas semelhana do que faz no painel Normal.

PR-VISUALIZAR A PGINA ACTUAL


Clique no boto Pr-visualizao que se encontra no fim da pgina.

Caso no tenha o Microsoft Internet Explorer instalado no computador, o separador Prvisualizao no ser apresentado, no podendo pr-visualizar as pginas desta forma. Para mais informaes, consulte a seco "Antes de comear".
Observar a pgina no painel Pr-visua lizao constitui uma forma rpida e cmoda de ver o modo como determinados elementos (incluindo anima es, clips de filmes, tabelas e listas) iro ser apresentados num Web browser. Clique no boto Normal que se encontra no fim da pgina para regressar novamente ao painel Norma l.

FORMATAO DA PGINA ( HEAD E BODY)


Abra o menu Formatar/Fundo ou tecla dire ita do rato e Proprie dades da
pgina.

Manual de Criao de Pginas Web

Pgina 15

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL

Pgina 16

Manual de Criao de Pginas Web

INSTITUTO DO E MPREGO E FORMAO PROFISSIONAL


TIPO DE LETRA
Esta formatao bastante semelhante s outras aplicaes. Tipo de letra (tenha em ateno o tipo de letra que est a utilizar pois o visitante do seu site poder no ter esse tipo de letra instalado no computador utilize preferencialmente os seguintes tipos de letra: Times, Arial, Verdana, Helvetica ou Courier); Default Font equivale ao tipo de letra Times... Estilo (Negrito, Itlico ou Negrito e Itlico). Tamanho do tipo de letra (ter apenas 7 tamanhos diferentes); Normal equivale ao tamanho 3 (12 pto.). Efeitos . Espaamento e ntre caracteres . Espaamento (Expandido ou comprimido) Posio (Elevado ou rebaixado).

PARGRAFOS
Abra o menu Formatar e clique em
Pargrafo.

Manual de Criao de Pginas Web

Pgina 17

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL


Ou utilize os botes da barra de ferramentas de formatao:

APLICAR ESTILOS DE PARGRAFO AOS TTULOS


1. Clique na lista Estilo na barra de ferramentas Formatao e altere a definio Norma l para Ttulo 3. 2. O FrontPage aplica o estilo Ttulo 3 linha de texto actual. O tamanho do texto no afectado, mas o texto passa a ser apresentado a negrito. 3. Os estilos de ttulo contidos na lista Estilo baseiam-se em normas de HTML. Um ttulo de nvel 1 constitui o estilo de texto maior possvel disponvel para pginas Web, sendo um ttulo de nvel 6 o mais pequeno.

A lista Estilo tambm pode conter estilos de folhas de estilo em cascata (CSS, Cascading Style Sheets); no entanto, o tpico CSS no abrangido por esta iniciao.

Pgina 18

Manual de Criao de Pginas Web

INSTITUTO DO E MPREGO E FORMAO PROFISSIONAL

REPETIR A FORMATAO DO PARGRAFO COM O 'PINCEL DE FORMATAO' O FrontPage disponibiliza um mtodo cmodo de copiar os estilos de formatao de uma seleco de texto para outra bastando, para tal, clicar num boto. 1. Seleccione o pargrafo que contm a formatao que pretende utilizar para aplicar noutro pargrafo. 2. Clique em Pince l de formatao na barra de ferramentas Formatao.

3. Clique no rato para arrastar o ponteiro do Pincel de formatao ao longo do texto onde pretende aplicar as formataes do pargrafo anteriormente seleccionado.

possvel repetir a formatao de texto em mais do que uma seleco de texto fazendo duplo clique no boto Pincel de formatao depois de seleccionar o formato que pretende copiar. Seleccione as vrias localizaes de texto para as quais pretende copiar a formatao e, em seguida, volte a clicar no boto Pincel de formatao quando tiver terminado.

INSERIR CARACTERES ESPECIAIS


1. Clique para inserir o cursor do rato logo a seguir s letras MSN na hiperligao que acaba de criar. 2. No menu Inserir, clique em Smbolo. O FrontPage apresenta a caixa de dilogo Smbolo. Aqui, poder selecc ionar e inserir caracteres especiais no ponto de insero. Poder inserir vrios smbolos enquanto esta caixa de dilogo estiver aberta. 3. Na caixa de dilogo Smbolo, seleccione o smbolo, clique em Inserir e, em seguida, clique em Fecha r.

O FrontPage insere o smbolo a seguir s letras MSN. Poder utilizar o comando Smbolo para inserir caracteres que poder no conseguir escrever directamente atravs do teclado.

Manual de Criao de Pginas Web

Pgina 19

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL


LINHA HORIZONTAL
1. Posicione o cursor no local onde pretende inserir a linha. 2. Abra o menu Inserir/Linha horinzonta l. O Frontpage ir inserir uma linha de cor cinzenta com tamanho 100%. 3. Efectue um duplo clique sobre a linha para visualizar as suas propriedades.

LISTAS
As listas podero ser numeradas ( OL) ou no numeradas ( UL). Poder utilizar os botes Numerao (para numerar) ou . Marcas (para

marcas). Para efectuar avanos utilize os botes

Abra o menu Formatar e clique em Ma rcas e Numerao.

Pgina 20

Manual de Criao de Pginas Web

INSTITUTO DO E MPREGO E FORMAO PROFISSIONAL

Para tornar as suas pginas mais atractivas seleccione Pe rmitir fechar destaques para os pargrafos de nvel superior. Esta aco torna possvel ocultar ou mostrar os subnveis de pargrafos com um simples clique. Digite os seguintes pargrafos: Lnguas Ingls Francs Italiano Alemo Informtica Office 1 Office 2 Pgina 21

Manual de Criao de Pginas Web

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL


Aps as formataes, posicione-se no pargrafo "Lnguas". 1. Abra o menu Formatar/Marcas e Nume rao . 2. Seleccione Permitir fechar desta ques e Inic ialme nte fechados (caso pretenda que os subnveis fiquem ocultos ). 3. Execute os mesmos passos para o pargrafo "Informtica". 4. Clique no separador Preview . 5. Clique no pargrafo Lnguas para mostrar ou ocultar os subnveis.

Para utilizar uma imagem como marca efectue os seguintes passos:


1. Abra o menu Formatar/Marcas e Nume rao. 2. Clique no separador Marcas de imagens. 3. Seleccione Especificar imagem e clique no boto Procurar para seleccionar a imagem

LIMITES E SOMBREADOS
Seleccione os pargrafos que pretende formatar. Abra o menu Formata r/ limites e sombreado:

Pgina 22

Manual de Criao de Pginas Web

INSTITUTO DO E MPREGO E FORMAO PROFISSIONAL

IMAGENS
Quanto maior for a imagem, tanto maior ser o arquivo e mais tempo levar para que ela aparea na sua pgina. Use imagens em gif quando o nmero de cores no for grande ou se precisar de transparncia ou animao. Use imagens em jpg quando o nmero de cores for grande e as variaes de cor forem suaves, como em fotos, mapas, pinturas, etc.. Imagens em gif no h perda de qualidade para imagens planas e h economia de espao no disco, enquanto que jpg h compresso de imagens. Todas as duas extenses tem Interlaced , que faz com que a imagem vai carregando aos poucos e vai se definindo.

Manual de Criao de Pginas Web

Pgina 23

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL


INSERIR UMA IMAGEM
1. Clique no cone Inserir ima gem do fic heiro . 2. Procure a imagem no seu computador, seleccione-a e clique em Inserir.

PROPRIEDADES DE UMA IMAGEM


Clique sobre a imagem com o boto direito do rato e seleccione Proprie dades da imagem .

Pgina 24

Manual de Criao de Pginas Web

INSTITUTO DO E MPREGO E FORMAO PROFISSIONAL

Quando selecciona a imagem surge ferramentas Imagem :

uma

barra

de

ferramentas:

barra

de

Inserir imagem do ficheiro inserir texto sobre a imagem Miniaturizar automaticamente Posio Absoluta Trazer para frente Enviar para trs Girar a imagem para direita , esquerda , horizontal e vertical Mais/Menos Contraste Mais/Menos Brilho Cortar Def inir Cor Transparente Transformar imagem em preto e branco Transformar imagem em cinza e branco Criar boto na imagem Criar Novas Amostras Selecionar imagem para transform-la em imagem mapeada Especifica rea mapeada rectangular Especifica rea mapeada circular Especifica rea mapeada poligonal Especifica rea mapeada sem parte da imagem Restaurar para o tamanho e forma original

Manual de Criao de Pginas Web

Pgina 25

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL


TABELAS
Uma tabela constituda por linhas e colunas de clulas nas quais pode inserir texto e grficos. As tabelas podem ser utilizadas e personalizadas de diferentes maneiras de modo a ficar mais atraentes e fceis de ler: Apresentar informaes num formato de tabulao Esquematizar texto e grficos numa pgina Trabalhar com linhas e colunas Pode definir a altura das linhas e a largura das colunas como uma percentagem do tamanho de toda a tabela, um tamanho especfico em pixels (Pixel: uma unidade de medida utilizada pelo hardware de v isualizao do computador para apresentar imagens no ecr. Estas unidades, que aparecem frequentemente como pequenos pontos, compem as imagens mostradas pelo ecr.), ou definir todas as linhas e colunas com espaos uniformes. Controlar o texto e o esquema da tabela Tambm pode controlar a altura e a largura da tabela. Por exemplo, pode definir a largura da tabela para 80% da largura de toda a pgina (ou largura da frame, se a tabela estiver numa frame). Se um visitante do site redimensionar a janela do browser, o tamanho da pgina e da tabela muda de acordo com as alteraes efectuadas. Em pginas que incluam uma tabela e texto, tambm pode especificar se deseja que o texto seja apresentado volta da tabela. Ao especificar o modo como o texto apresentado dentro de cada clula, pode controlar o espao existente entre o limite e o texto de uma clula e definir o alinhamento vertical e horizontal de texto. Alm disso, o texto de tabela pode ser formatado como qualquer outro texto: pode alterar o estilo de letra, o tamanho, a cor e outros atributos. Def inir especificaes de limites Pode personalizar o modo como os limites so apresentados nas tabelas. Def ina a cor do limite para a tabela inteira ou uma cor do limite diferente para clulas individuais. Pode escolher uma cor para o limite ou, se preferir um aspecto tridimensional, pode escolher duas cores (uma cor clara e uma cor escura). Tambm pode alterar a espessura do limite exterior. Pode escolher imagens e cores de fundo para as tabelas. As cores de fundo podem ser utilizadas para sombrear determinadas colunas ou linhas para adicionar nfase. Pode utilizar imagens de fundo para tornar as tabelas mais atraentes. Pode definir imagens e cores de fundo para determinadas clulas ou para a tabela inteira. Pode atribuir um rtulo ou um ttulo s tabelas, adicionando uma legenda. Uma legenda da tabela colocada por cima ou por baixo da tabela. Tambm pode formatar o texto da legenda. Para dar nfase a determinadas clulas da tabela, pode especific-las como cabe alhos da tabela. Por exemplo, na tabela em baixo, a primeira linha e a primeira coluna contm rtulos. Esto formatadas como cabealhos da tabela, por isso destacam-se do resto da tabela. Por predef inio, um cabealho da tabela formatado como texto a negrito. No entanto, pode modificar o estilo do cabealho da tabela e definir propriedades adicionais para os cabealhos da tabela como, por exemplo, sombreado.

Pgina 26

Manual de Criao de Pginas Web

INSTITUTO DO E MPREGO E FORMAO PROFISSIONAL


CRIAR UMA T ABELA
Clique na ferramenta e arraste quantas linhas e colunas pretender. Ou Tabela > Inserir > Tabe la

PROPRIEDADES DE UMA T ABELA


Clique sobre a tabela com o boto direito do rato > Propriedades da ta bela

Manual de Criao de Pginas Web

Pgina 27

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL

Clique Ve r > Barras de fe rramentas > Tabelas Desenhar Tabela Apagador Inserir Linhas Inserir Colunas Eliminar Clulas Unir Clulas Dividir Clulas Alinhar pela parte superior da clula Centrar Verticalmente na clula Alinhar pela parte inferior da clula Distribuir linhas uniformemente Distribuir c olunas uniformemente Ajustar automaticamente ao c ontedo Cor de Preenchimento Formatao automtica da tabela Preencher para baixo Preencher para direita

Pgina 28

Manual de Criao de Pginas Web

INSTITUTO DO E MPREGO E FORMAO PROFISSIONAL

PROPRIEDADES DE UMA CLULA


Clique com tecla direita Propriedades da clula . do rato sobre a clula que pretende modificar >

Resultado:

Manual de Criao de Pginas Web

Pgina 29

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL


HIPERLIGAES
As hiperligaes so criadas atravs do elemento <a href= .. > ...</a > Hipe rligaes para uma pgina <a href="Cursos.htm">Ir para pgina de cursos</a> Hipe rligaes para um Site <a href="http://www.ipfel.pt">Disney</a> Hipe rligaes para email <a href="mailto:instituto@ipfel.pt">Contacto</a> Hipe rligaes para uma seco dentro da prpria pgina (Marcador). <a href="#Clientes">Clientes</a> .............. <a name="Clientes"></a> Determina para onde ir a hiperligao <a name="..."></a> Determina a hiperligao <a hre f="# ..> Link </a> Outros tipos de Hiperligaes remotos ftp ficheiro em um servidor annimo <a href="ftp://ftp.servidor.pt">link para transferncia de ficheiro</a> file - um f icheiro no seu sistema local, ou em um servidor FTP gophe r - um f icheiro no servidor Gopher ; servidores de ficheiros e informaes <a href="gopher://servidor.pt">link remoto para um servio gopher</a> wais - um ficheiro no servidor WAIS news - um newsgroup da Usenet ; acesso a grupo de notcias telnet - uma ligao com um servidor do tipo Telnelt <a href ="telnet://servidor.pt ">link remoto para um servio telnet</a> Observao : quando usamos o FrontPage e digitamos numa pgina um endereo de um site qualquer e damos espao, ele criar automaticamente a hiperligao ; o mesmo acontece quando digitamos um email e damos espao ele criar automaticamente a hiperligao mailto. 1. Digite o texto ou insira a imagem que ir servir de hiperligao. 2. Seleccione o texto ou a imagem. 3. Abra o menu Inserir e clique em Hipe rligao; Ou utilize o boto Hiperligao que se encontra na barra de ferramentas; Ou ainda C TRL + K. 4. Indique o tipo de hiperligao e clique no boto OK.

Pgina 30

Manual de Criao de Pginas Web

INSTITUTO DO E MPREGO E FORMAO PROFISSIONAL

Para que a hiperligao abra uma nova janela, clique em Frame de destino e seleccione Nova janela .

Manual de Criao de Pginas Web

Pgina 31

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL


HOVER BUTTON Para melhorar o aspecto das
suas hiperligaes, abra o menu Inserir/Compone nt We b. No Tipo de componente seleccione Efeitos dinmicos e escolha Boto de apontar.

Para alterar, efectue um duplo clique sobre o boto. Deve guardar antes de pr-visualizar. Este procedimento envolve ficheiros designados por Applets.
So ficheiros com extenso Class e devem estar no mesmo local da pgina HTML onde foram inseridos. Clique em Vista das Pastas para visualizar esta ficheiros: Fphover.class Fphoverx.class

Pgina 32

Manual de Criao de Pginas Web

INSTITUTO DO E MPREGO E FORMAO PROFISSIONAL

EFEITOS DINMICOS
Outra alternativa so os efeitos dinmicos que podero ser aplicados s hiperligaes, quer sejam texto quer sejam imagens. TEXTO

Pretende-se que as hiperligaes de texto fiquem formatadas a negrito ( Bold) e de


cor verme lha quando o rato se posicionar sobre elas ( mouse over ). 1. Seleccione a hiperligao. 2. Abra o menu Formatar/Efe itos de Dymanic Html.

3. Na barra de ferramentas que surge no ecr: Em Seleccione um evento , seleccione Com o rato a passar; Em Seleccionar um e feito , seleccione Formatao; Em Seleccionar de finies , seleccione Seleccionar o tipo de letra ;

IMAGEM

Devem existir duas imagens. Uma para a hiperligao e outra para o efeito Com o
rato a passar.

Imagem da hiperligao Imagem para o efeito mouse over 1. Insira a imagem e a respectiva hiperligao. 2. Abra o menu Formatar/Efe itos de Dynamic Htm . 3. Na barra de ferramentas que surge no ecr: Em Seleccione um evento , seleccione Com o rato a passar; Em Seleccionar um e feito, seleccione Trocar ima gens ; Em Seleccionar de finies , seleccione Escolhe r imagem .

Manual de Criao de Pginas Web

Pgina 33

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL


Este procedimento ir criar um ficheiro com o nome animate.js. Este ficheiro contm as instrues (em cdigo JavaScript) necessrias para que estes efeitos funcionem.

Pgina 34

Manual de Criao de Pginas Web

INSTITUTO DO E MPREGO E FORMAO PROFISSIONAL

FRAMES
A utilizao de frames uma tcnica muito interessante para organizar e estruturar o contedo de uma pgina HTML, na medida em que facilita a criao de documentos compostos que o utilizador v em janelas diferentes de ntro da janela principal do browser. Apesar de terem sido introduzidas por iniciativa da Netscape , por altura do lanamento da verso 2.0 do Netscape Navigator, actualmente, todos os principais browsers suportam frames. Isto porque as frames constituem, de facto, uma poderosa ferramenta com vrias vantagens para os autores de pginas HTML, tais como: A possibilidade de atribuir a cada frame um URL independente, permit indo que cada uma tenha um contedo independente das outras. Atribuindo nomes nicos a cada frame, possvel que cada link do documento cause a modificao de uma frame especfica. A facilidade de criar f rames estticas compostas pelos elementos que se pretende que sejam sempre visveis. A possibilidade de desenvolver layouts mais sofisticados e funcionais.

Para definir as frames de um documento utilizam-se as tags FRAMES ET e FRAME para dividir a janela principal do browser em reas rectangulares independentes - as frames. Em seguida, a cada frame deve atribuir-se um ficheiro HTML que fornecer o contedo da frame correspondente. A ttulo de exemplo, considere-se o seguinte cdigo, que divide um documento em duas frames horizontais iguais, com contedos diferentes: <HTML> <HEAD> <TITLE>2 Frames Iguais</TITLE> </HEAD> <FRAMESET COLS="50%,*"> <FRAME SRC="doc1.html"> <FRAME SRC="doc2.html"> </FRAMESET> </HTML> Na realidade, um documento com frames basicamente idntico a um documento HTML normal, exceptuando que a tag BODY , neste caso, substituida por um FRAMES ET, que define as vrias frames. Um documento pode ser divido em colunas - usando o atributo COLS, como no exemplo - ou em linhas - usando o atributo ROWS. Mais ainda: uma f rame pode, por sua vez, ser dividida tambm noutras frames verticais ou horizontais: <FRAMESET ROWS="20%,*"> <FRAMESET COLS="25%,*"> <FRAME SRC="doc1.html"> <FRAME SRC="doc2.html"> </FRAMESET> <FRAMESET COLS="50%,*"> <FRAME SRC="doc3.html"> <FRAME SRC="doc4.html"> </FRAMESET> </FRAMESET>

Manual de Criao de Pginas Web

Pgina 35

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL


FRAMESET define a forma de diviso do documento em frames. ROWS="valores" Este atributo recebe uma lista de valores separados por vrgulas. Esses valores definem a dimenso de cada frame vertical (linha) em pixels, percentagens da dimenso total do documento ou valores relativos (com o smbolo *). O nmero total de linhas ser igual ao nmero de valores definidos. COLS="valores" Este atributo segue uma sintaxe igual ao anterior para definir a dimenso de frames horizontais (colunas).

FRAME define as caractersticas de cada frame do documento, nomeadamente, o seu nome, o ficheiro fonte e outras propriedades. NAME="janela" NAME serve para atribuir um nome frame que poder ser utilizado em links para a identificar. SRC="url" SRC descreve o URL do documento que dever fornec er o contedo da frame. SC ROLLING="YES| NO|AUTO" Def ine se a frame dever, ou no, ter barras de deslocamento ("scroll-bars"). O valor AUTO indica ao browser que este que dever tomar a deciso. NORESIZE Este atributo indica que o utilizador no deve ter permisso para alterar manualmente a dimenso da frame.

CRIAR FRAMES
1. Seleccione Ficheiro/Novo/Pgina ou Web . 2. No Painel das tarefas clique em Mode los de p gina . 3. Clique no separador Pgina com frames . 4. Seleccione o tipo de Frame que pretende utilizar e c lique no boto OK.

Pgina 36

Manual de Criao de Pginas Web

INSTITUTO DO E MPREGO E FORMAO PROFISSIONAL


5. Se a pgina existir, clique em Definir p gina inicia l e seleccione o ficheiro que ir constituir a Frame. Se no existir a pgina, clique em Nova pgina .

Se optou por novas pginas, quando guardar, o FrontPage ir pedir o nome para trs ficheiros.

Manual de Criao de Pginas Web

Pgina 37

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL

PROPRIEDADES DAS FRAMES


Clique, com a tecla direita do rato, sobre a frame que pretende tratar e seleccione
Propriedades da Frame .

Para retirar o limite que separa as Frames: 1. Clique em Pgina das frames . 2. Desactive a opo Mostrar limites .

Para mudar a pgina HTML de uma Frame, execute os seguintes passos:


1. Clique na Frame cuja pgina pretende mudar. 2. Abra o menu Frames/Proprie dades ou com tecla direita do rato sobre a frame a alterar e clique em Propriedades da fra me . 3. Em Pgina inic ial, clique em Procurar. 4. Seleccione a pgina e clique em OK.

Pgina 38

Manual de Criao de Pginas Web

INSTITUTO DO E MPREGO E FORMAO PROFISSIONAL

LIMITES PARTILHADOS

NAVEGAO

Um limite partilhado uma rea de uma pgina Web que comum a uma ou mais pginas no web site. Um limite partilhado pode ser uma rea na parte superior ou inferior da pgina (semelhante ao cabealho ou rodap da pgina), esquerda ou direita. Utilize limites partilhados para colocar o mesmo contedo em vrias pginas de uma s vez, em vez de editar cada pgina. Por exemplo, para colocar rapidamente um logtipo no incio de cada pgina do web site, estruture as pginas para que tenham o mesmo limite superior e, em seguida, adicione o grfico ao limite superior.

Os limites partilhados so uma forma rpida e fcil de dar um aspect o consistente s pginas. Depois de definir um limite partilhado, pode adicionar-lhe contedo. Em qualquer altura, pode alterar ou remover o contedo num limite partilhado. Em seguida, so apresentados exemplos de formas de utilizar limites partilhados: Adicionar uma faixa da pgina para garantir que cada pgina tenha um ttulo Adicionar o logtipo da empresa Adicionar uma barra de hiperligaes para permitir que os visitantes do site tenham acesso s pginas principais no web site Adicionar um aviso relativo a direitos de autor Adicionar a data e hora da ltima modificao efectuada ao web site Adicionar um endereo de correio electrnico para comentrios como, por exemplo, o endereo do webmaster

Se adicionar as faixas da pgina e barras de ligao a um limite partilhado, as pginas tm de ser adicionadas vista Navegao de modo a serem apresentadas correctamente.
Quando utiliza limites partilhados, apenas tem de modificar o contedo num lugar, de modo a actualizar todas as pginas. Por exemplo, para alterar o aviso relativo a direitos de autor em cada pgina de um web site com 30 pginas, pode faz -lo apenas numa pgina, caso o aviso esteja no interior de um limite partilhado. Pode definir tambm os limites partilhados, de modo a que cada pgina no web site os utilize por predef inio, ou pode definir limites partilhados em pginas individuais. Por exemplo, a predefinio para um web site pode ser a partilha dos limites superiores e inferiores; cada pgina nova tem ento estes limites partilhado s. No entanto, pode desactivar o limite partilhado em determinadas pginas.

Manual de Criao de Pginas Web

Pgina 39

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL


LIMITES PARTILHADOS
1. No menu Formatar, clique em Limites partilhados . 2. O FrontPage apresenta a caixa de dilogo Limites partilhados . Aqui, poder especificar em que stio das p ginas o F rontPage dever inserir os limites partilhados. Uma vez que a estrutura do Web site em questo tem dois nveis de pginas (a home page e as pginas que se encontram abaixo da mesma), ir utilizar dois tipos de limites partilhados e dois tipos de barras de navegao. 3. Na caixa de dilogo Limites pa rtilha dos , certifique-se de que a opo Todas as pginas est seleccionada. 4. Para um limite partilhado horizontal, seleccione a caixa de verificao Supe rior e seleccione a caixa de verificao Incluir botes de navegao existente logo abaixo da mesma. 5. Para um limite partilhado vertical, seleccione a caixa de verificao esquerda e seleccione a caixa de verificao Incluir botes de navegao que se encontra abaixo da mesma.

6. No seleccione as caixas de verif icao direita e Infe rior e, em seguida, clique em OK. O FrontPage cria limites partilhados e barras de navegao predef inidas para todas as pginas do Web site actual. Ter oportunidade de observar o aspecto dos mesmos quando regressar vista Pgina. Pgina 40 Manual de Criao de Pginas Web

INSTITUTO DO E MPREGO E FORMAO PROFISSIONAL

BARRA DE NAVEGAO
1. Clique no separador de pgina relativo ao ficheiro index.ht m. 2. No limite superior da home page , faa duplo clique no texto que indica Edite as propriedades desta barra de hipe rligaes para apresenta r as hipe rligaes aqui.

De momento, a barra de hiperligaes horizontal est definida de modo a estabelecer ligao com pginas localizadas no mesmo nvel. Uma vez que a home page se encontra num nvel parte na estrutura de navegao do Web site em questo, no existem outras pginas no mesmo nvel. Assim sendo, o FrontPage no mostrar outras barras de hiperligaes neste limite partilhado. 3. Na caixa de dilogo Proprie dades da ba rra de hiperligaes , clique em Nvel subordinado, desmarque as caixas de verificao Home page e Pgina principal e, em seguida, clique em OK.

Manual de Criao de Pginas Web

Pgina 41

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL

O FrontPage cria uma barra de navegao com hiperligaes para todas as pginas que se encontram abaixo do nvel da home page.

De realar que a barra de navegao do lado esquerdo ainda contm o mesmo conjunto de hiperligaes que a barra de navegao superior. Nos passos que se seguem, ir remover esta redundncia bvia e formatar a barra de navegao do lado esquerdo de modo a s ser apresentada nas outras pginas para as quais a home page aponta. 4. No limite do lado esquerdo da home page, faa duplo clique na barra de navegao vertical. 5. Na caixa de dilogo Proprie dades da barra de hiperligaes , clique em O mesmo nvel, seleccione a caixa de verif icao Home page e, em seguida, clique em OK. O FrontPage altera a barra de navegao para o texto do marcador de posio Edite as propriedades desta barra de hiperligaes para apresentar as hiperligaes aqui. Este texto s apresentado na vista Pgina enquanto trabalha; no ser apresentado num Web browser. Ao apontar as hiperligaes desta barra de navegao para o mesmo nvel que o da home page est, efectivamente, a remover as hiperligaes do limite do lado esquerdo, visto no existirem outras pginas no mesmo nvel que o da home page. Este procedimento tambm remove a redundncia entre as barras de navegao horizontal e vertical. Pgina 42 Manual de Criao de Pginas Web

INSTITUTO DO E MPREGO E FORMAO PROFISSIONAL

De realar que as alteraes efectuadas na home page s barras de navegao horizontal e vertical so automaticamente reflectidas aqui, assim como nas restantes pginas do Web site.

Por predefinio, todas as pginas da estrutura de navegao do Web site so includas em barras de navegao. Poder seleccionar pginas para as excluir das barras de navegao clicando com o boto direito do rato na pgina na vista Navegao e clicando em Includo nas barras de navegao no menu de atalho.

Manual de Criao de Pginas Web

Pgina 43

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL

TEMAS
Apesar de a adio de imagens, listas, formulrios, limites partilhados e barras de navegao ter conferido s pginas do Web site um aspecto mais uniforme e organizado, poder questionar-se quanto ao que poder fazer com o aspecto algo rido proporcionado pela presena de texto a preto e a azul num fundo branco. Imagine o tempo que no demoraria se tivesse de conceber um esquema de cores para o texto e grficos, alm de criar faixas de pginas grficas, botes de navegao, marcas para listas e texturas de fundo para todas as pginas do Web site. Agora imagine o nmero de grf icos personalizados adicionais que precisaria de criar se mantivesse mais do que um Web site e no quisesse que os Web sites tivessem o mesmo aspecto. O FrontPage inclui mais de 50 temas concebidos por profissionais, com esquemas de cores correspondentes, que poder aplicar a uma ou a todas as pginas do Web site. Um tema composto por elementos de design para marcas, tipos de letra, imagens, botes de navegao e outros grf icos. Quando aplicado, um tema permite conferir s pginas, faixas de pginas, barras de navegao e outros elementos de um Web site um aspecto apelativo e consistente. 1. No menu Formatar, clique em Tema. O FrontPage apresenta a caixa de dilogo Temas. Aqui, poder efectuar a sua escolha com base numa lista de temas que o F rontPage instalou por predef inio, ou optar por instalar o conjunto completo de temas a partir do CD-ROM do F rontPage. Poder efectuar opes quanto ao aspecto do tema, pr-visualizar os elementos temticos e modificar o tema seleccionado. 2. Clique em alguns dos diferentes nomes de temas contidos na caixa de listagem de deslocamento. Quando clicar no nome de um tema, a janela Exemplo do tema apresentar um exemplo dos elementos grf icos contidos no tema seleccionado. Desta forma, poder, em primeiro lugar, pr-visualizar um tema antes de o aplicar a todas, ou apenas algumas, pginas do Web site. Antes de aplicar um tema, poder seleccionar opes de tema que afectam o aspecto dos componentes do tema. Por exemplo, se seleccionar Cores vivas sero aplicadas cores mais vivas ao texto e grf icos, se seleccionar Gr ficos activos animar determinados componentes do tema e se seleccionar Imagem do fundo aplicar um fundo grf ico s pginas do Web site. Tambm poder optar por aplicar um tema como uma folha de estilo em cascata. 3. Em Aplicar o tema a, certifique-se de que a opo Todas as pginas est seleccionada. 4. Seleccione um Tema.

Pgina 44

Manual de Criao de Pginas Web

INSTITUTO DO E MPREGO E FORMAO PROFISSIONAL

5. Clique em OK para aplicar o tema. Uma vez que esta a primeira vez que aplica um tema a um Web site, o FrontPage apresentar uma mensagem informando-o de que, ao aplicar um tema, ir substituir alguma da formatao manual que poder ter e fectuado nas pginas. Nesta iniciao, no foram includas, propositadamente, muitas tarefas de design manual, para que pudesse aceitar esta mensagem e prosseguir com a aplicao do tema.

7. Clique em Sim para aplicar o tema. Tal como possvel observar, a aplicao do tema alterou substancialmente o aspecto da home page. A faixa de pgina e os botes de navegao deixaram de constituir texto simples; so agora grficos.

Manual de Criao de Pginas Web

Pgina 45

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL


Para apresentar botes de navegao gr ficos em todas as pginas 1. Abra outra pgina do seu Web Site. Repare que a pgina herdou o tema e os elementos temticos da home page, mas a barra de navegao vertical situada no limite do lado esquerdo continua a mostrar hiperligaes de texto simples. Por predefinio, as barras de navegao verticais so apresentadas como texto simples, de modo a manterem este aspecto mesmo depois de ser aplicado um tema. Poder alterar facilmente as definies da barra de navegao, mesmo depois de ter sido aplicado um tema. 2. No limite partilhado, faa duplo clique na barra de navegao. 3. No separador Estilo, em Escolha um estilo , clique em Utiliza r tema da pgina e, em seguida, clique em OK. Se no conseguir visualizar Utilizar tema da p gina , desloque-se para o incio da lista de estilos.

O FrontPage altera a formatao da navegao e utiliza os botes grf icos includos no tema. O Web site apresenta agora um aspecto apelativo e profissional.

Alguns temas contm animaes. Quando aplicar um tema, poder seleccionar a opo Grficos activos com vista a activar as animaes da faixa de pgina e os efeitos rollover da barra de navegao, no caso de o tema conter esse gnero de elementos. Para observar os efeitos grficos activos de um tema, aplique o tema e, em seguida, visualize a pgina no separador Prvisualizao, ou clique no comando Pr-visualizar no browser no menu Ficheiro.

Pgina 46

Manual de Criao de Pginas Web

INSTITUTO DO E MPREGO E FORMAO PROFISSIONAL


Para alterar o texto Home, Para cima, Seguinte e Anterior da barra de navegao: Abra o menu Ferramentas/Definies da Web. Clique no separador Navegao.

Manual de Criao de Pginas Web

Pgina 47

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL

CRIAR

UM FORMULRIO

No menu Inserir, aponte para Formul rio e, em seguida, clique em Caixa de texto.

O FrontPage insere um formulrio novo com uma caixa de texto na pgina actual. As linhas a tracejado indicam o limite do formulrio. Por predefinio, o formulrio novo tambm contm os botes Submeter e Repor.

A seguir, ir personalizar o formulrio predef inido, adicionado outros campos de formulrio e rtulos para campos de formulrio, de modo a que os visitantes do site saibam o tipo de informaes que pretende ver introduzidas.

PERSONALIZAR O FORMULRIO
1. Clique no boto Submete r e, em seguida, clique em Centro ferramentas. na barra de

2. Prima a seta para a esquerda para colocar o cursor antes do boto Submeter e prima ENTER. Ao premir ENTER, adiciona uma linha em branco ao formulrio. 3. Na primeira linha, escreva Nome: e, em seguida, prima SHIFT +ENTER. Se mantiver a tecla SHIFT premida enquanto prime ENTER criar uma quebra de linha. As quebras de linha so teis no sentido de diminuir o espaamento entre as linhas de texto quando comparado com o espaamento entre pargrafos padro.

Pgina 48

Manual de Criao de Pginas Web

INSTITUTO DO E MPREGO E FORMAO PROFISSIONAL


4. Coloque o cursor a seguir caixa de texto e prima ENTER.

5. Na linha seguinte, escreva Endereo de correio e lectrnico: e, em seguida, prima SHIFT +ENTER. 6. No menu Inserir, aponte para Formul rio, clique em Caixa de texto uma vez mais e, em seguida, prima ENTER.

7. Na linha seguinte, escreva Comentrios: e, em seguida, prima SHIFT +ENTER. 8. No menu Inserir, aponte para Formul rio e, em seguida, clique em rea de texto. O FrontPage insere um campo de entrada de texto de deslocamento no formulrio. 9. Faa duplo clique na caixa de texto de deslocamento que acaba de inserir. O FrontPage apresenta a caixa de dilogo Proprie dades da caixa de rea texto . Aqui, poder alterar o aspecto da caixa de texto. 10. Na caixa de dilogo Propriedades da ca ixa de rea de texto , altere a Largura em caracteres para 30 e o Nme ro de linhas para 5 e, em seguida, clique em OK.

A caixa de texto de deslocamento aumenta de tamanho, o que encorajar os visitantes a escrever mais do que apenas algumas linhas. Manual de Criao de Pginas Web Pgina 49

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL

PROPRIEDADES DO FORMULRIO
Clique co a tecla direita do rato sobre o formulrio e escolha Propriedades do formulrio.

Pgina 50

Manual de Criao de Pginas Web

INSTITUTO DO E MPREGO E FORMAO PROFISSIONAL

ORGANIZAR OS

FICHEIROS DO

WEB SITE

Agora que o Web site contm vrias pginas e ficheiros, ir utilizar a vista Pastas para os organizar. semelhana do que acontece no Explorador do Windows , a vista Pastas permite-lhe gerir os f icheiros e as pastas do Web site. Poder reordenar as pginas e ficheiros do Web site com segurana sem quebrar as hiperligaes, ttulos de faixas de pginas ou rtulos de botes de navegao. Na vista Pastas , o FrontPage apresenta uma lista hierrquica das pastas existentes no Web site no lado esquerdo do ecr. Se clicar numa pas ta presente na Lista de pastas , visualizar o respectivo contedo no lado direito, no painel Conte do.

Se utilizasse o Explorador do Windows ou outro gestor de ficheiros para mover as pginas e ficheiros de uma pasta para a outra, quebraria as hiperligaes entre as pginas e os elementos das pginas. No entanto, ao manter o Web site na vista Pastas , o FrontPage mantm todas as pginas e hiperligaes do Web site actualizadas de modo a manter o registo das novas localizaes dos ficheiros e pastas que foram movidos.

CRIAR UMA PASTA NOVA


1. Na Lista de pastas , clique na pasta onde pretende criar uma nova subpasta. As pastas podem ser expandidas e fechadas na Lista de pastas de modo a apresentar as respectivas subpastas. Clique nos sinais de adio (+) e de subtraco (-) que se encontram ao lado do nome de uma pasta para mostrar ou ocultar as respectivas subpastas. 2. No menu Ficheiro, aponte para Novo e, em seguida, clique em Pasta. 3. Quando o nome temporrio da pasta ( Nova_Pasta ) estiver seleccionado, escreva um novo nome para a pasta e, em seguida, prima ENTER. O nome da pasta nova mudado, podendo agora arrastar e largar ficheiros na mesma.

Manual de Criao de Pginas Web

Pgina 51

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL


ELIMINAR FICHEIROS OU PASTAS
1. Na Lista de pastas , clique com o boto direito do rato na pasta que acaba de criar. 2. No menu de atalho, clique em Eliminar. 3. Na caixa de dilogo Confirmar eliminao , clique em Sim.

GERAR UM RESUMO DO SITE


A vista Relatrios constitui uma ferramenta importante que permite observar o estado e condies globais do Web site antes de o publicar na World Wide Web. possvel gerar relatrios personalizados sobre o Web site em 14 categorias, no mximo.

Na barra Vistas, clique no cone Relatrios

O FrontPage muda para a vista Re latrios . O relatrio predefinido corresponde a Resumo do site . Este relatrio mostra as estatsticas globais das pginas e ficheiros contidos no Web site. Seguem-se alguns relatrios importantes a levar em conta antes de publicar o Web site:

Todos os fiche iros : Esta a quantidade de espao que ter de ter disponvel no servidor Web que ir hospedar o Web site. Pginas lentas : Esta categoria mostra as pginas cuja transferncia se processa de uma forma lenta velocidade de transferncia em questo. Hipe rligaes quebradas : Caso sejam comunicadas hiperligaes quebradas aqui, faa duplo clique na linha Hiperligaes quebra das para ver os detalhes desta categoria. O FrontPage lista as hiperligaes que no foram verif icadas, como, por exemplo, as hiperligaes externas da pgina Hipe rligaes , assim como as hiperligaes que esto quebradas e no funcionam.

Pgina 52

Manual de Criao de Pginas Web

INSTITUTO DO E MPREGO E FORMAO PROFISSIONAL


Hipe rligaes em func iona mento : possvel verif icar se uma determinada hiperligao continua a apontar para um Web site activo clicando no item Hipe rligaes na vista Re latrios .

Para regressar ao resumo do site, clique no boto Re latrios , que se encontra no barra de ferramentas Relatrio, e, em seguida, clique em Resumo do site .

SUBSTITUIR TEXTO NAS PGINAS


O comando Substituir facilita a localizao e substituio de contedo em pg inas seleccionadas ou em todas as pginas do Web site actual. Apesar de poder utilizar o comando para substituir texto na pgina actual na vista Pgina , a utilizao do mesmo em qualquer outra vista do Web site permitir-lhe- substituir texto em todas as pginas (ou em pginas seleccionadas) do Web site actual todo. possvel substituir qualquer tipo de texto que possa ser editado directamente na pgina. No possvel substituir automaticamente outros tipos de texto, como, por exemplo, ttulos de pgina existentes em faixas de pginas ou texto contido em componentes baseados no FrontPage. Para substituir texto em todas as pginas do Web site actua l 1. No menu Editar, clique em Substituir. O FrontPage apresenta a caixa de dilogo Substituir. Aqui, ir indicar a cadeia de texto que pretende encontrar e o respectivo texto de substituio. Poder optar entre substituir o texto em todas as pginas do Web site actual ou em pginas seleccionadas apenas. 2. Clique em Todas as pginas .

Manual de Criao de Pginas Web

Pgina 53

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL


3. Na caixa de dilogo Substituir, escreva o texto que pretende localizar(por exemplo: IPFEL) na caixa Localizar. 4. Na caixa Substituir por, escreva IPFEL Instituto de Lnguas & Informtica .

5. Clique em Localizar na Web. O FrontPage expande a caixa de dilogo Substituir de modo a mostrar a evoluo do processo de procura. O texto de procura que pretende substituir localizado na home page, Index.ht m. Uma vez concluda a operao, o FrontPage apresenta o nmero de ocorrncias encontradas.

6. Clique em Substituir na caixa de dilogo Localizar e substituir. 7. Quando a caixa Terminou a verificao das pginas for apresentada, clique em Volta r lista e, em seguida, clique em Cancela r.

Pgina 54

Manual de Criao de Pginas Web

INSTITUTO DO E MPREGO E FORMAO PROFISSIONAL

Manual de Criao de Pginas Web

Pgina 55

INSTITUTO DO EMPREGO E FORMAO PROFISSIONAL

PUBLICAR O WEB SITE


1. Feche todas as pginas abertas na vista Pgina. 2. No menu Ficheiro, clique em Publicar Web ou clique no boto Publicar Web na barra de ferramentas. O FrontPage apresenta a caixa de dilogo Publicar Web. Aqui, ir especificar o local na World Wide Web ou na intranet da empresa onde pretende publicar o Web site. O fornecedor de servios Internet poder fornecer-lhe estas informaes. Necessita de ter acesso Internet atravs de um fornecedor de servios Internet para poder publicar o Web site na World Wide Web. Se pretender inscrever-se junto de um fornecedor de presena na Web que tenha capacidade para hospedar Web sites compatveis com FrontPage, clique na hiperligao Clique aqui pa ra ma is informaes na caixa de dilogo Publicar destino.

3. Na caixa de dilogo Publicar We b, escreva o URL do servidor Web de destino, (por exemplo, http://exemplo.microsoft.com/~ minhaweb) e, em seguida, clique em Publicar.

O FrontPage publica o Web site actual a partir do comp utador em questo para a World Wide Web ou servidor Web da intranet que especificar.

Depois de publicar um Web site pela primeira vez, poder ignorar a caixa de dilogo Publicar Web utilizando o boto Publicar Web na barra de ferramentas. Este procedimento permite publicar rapidamente todas as actualizaes que tiver efectuado s pginas sem que seja necessrio fornecer informaes sobre a localizao do Web site. Para voltar a visualizar a caixa de dilogo Publicar Web, utilize o comando Publicar Web no menu Ficheiro em vez do boto da barra de ferramentas.
Pgina 56 Manual de Criao de Pginas Web

INSTITUTO DO E MPREGO E FORMAO PROFISSIONAL

Se o FrontPage detectar que est efectuar a publicao num servidor Web que no suporta as extenses de servidor do FrontPage, publicar o Web site actual via FTP (File Transfer Protocol). Se o servidor Web no qual est a publicar o Web site tiver as extenses de servidor do FrontPage instaladas, o Web site ter acesso a todas as funcionalidades dos componentes baseados no FrontPage e dos scripts da Web que poder ter inserido nas pginas. A publicao de Web sites num servidor Web que no tenha as extenses de servidor do FrontPage instaladas poder provocar a desactivao de algumas das funcionalidades contidas nas pginas, como, por exemplo, o formulrio de resposta adicionado. O FrontPage apresentar mensagens de carcter informativo durante o processo de publicao para o alertar acerca de tipo de situao. Durante o processo de publicao, o FrontPage apresenta uma barra de evoluo para indicar o tempo necessrio para transferir o Web site para o servidor Web de destino. A rapidez com que o FrontPage publica o Web site depender da velocidade de ligao em questo, assim como do nmero e complexidade das pginas e ficheiros existentes no Web site.

Por predefinio, quando publica um Web site, so tambm publicados todos os ficheiros e pginas do mesmo. Para impedir a publicao de determinadas pginas ou ficheiros, clique com o boto direito do rato na pgina ou ficheiro numa das vistas do Web site e clique em No publicar.
Assim que o FrontPage tiver publicado o Web site com xito, fornecer uma hiperligao para o Web site novo na caixa de dilogo de confirmao. Clique na hiperligao para abrir o Web site publicado no Web browser.

Manual de Criao de Pginas Web

Pgina 57