Confecção de Webpages

Licenciamento de Uso
Este documento propriedade intelectual 2002 do Centro de Computao da Unicamp e

distribudo sob os seguintes termos:

1. As apostilas publicadas pelo Centro de Computao da Unicamp podem ser
reproduzidas e distribudas no todo ou em parte, em qualquer meio fsico ou eletrnico,
desde que os termos desta licena sejam obedecidos, e que esta licena ou referncia a
ela seja exibida na reproduo.

2. Qualquer publicao na forma impressa deve obrigatoriamente citar, nas pginas
externas, sua origem e atribuies de direito autoral (o Centro de Computao da
Unicamp e seu(s) autor(es))

3. Todas as tradues e trabalhos derivados ou agregados incorporando qualquer
informao contida neste documento devem ser regidas por estas mesmas normas de
distribuio e direitos autorais. Ou seja, no permitido produzir um trabalho derivado
desta obra e impor restries sua distribuio. O Centro de Computao da Unicamp
deve obrigatoriamente ser notificado (treinamentos@ccuec.unicamp.br) de tais trabalhos
com vista ao aperfeioamento e incorporao de melhorias aos originais.

Adicionalmente, devem ser observadas as seguintes restries:
A verso modificada deve ser identificada como tal
O responsvel pelas modificaes deve ser identificado e as modificaes datadas
Reconhecimento da fonte original do documento
A localizao do documento original deve ser citada
Verses modificadas no contam com o endosso dos autores originais a menos que
autorizao para tal seja fornecida por escrito.

A licena de uso e redistribuio deste material oferecida sem nenhuma garantia de qualquer
tipo, expressa ou implcita, quanto a sua adequao a qualquer finalidade. O Centro de
Computao da Unicamp no assume qualquer responsabilidade sobre o uso das informaes
contidas neste material.

ndice

O que quer dizer Redes e Internet ?................................................................................................ 1
Internet .......................................................................................................................................... 1
Home Page, Pginas Web, Site, HTML, Hipertexto, Tags?............................................................ 2
O que quer dizer HTML? .............................................................................................................. 2
Hipertexto...................................................................................................................................... 2
Pginas Web................................................................................................................................. 2
Home Page ou Pgina principal ................................................................................................ 2
preciso estar conectado para visualizar a pgina que criei? ................................................... 3
Os Navegadores (browser) .......................................................................................................... 3
Servidor Web................................................................................................................................ 3
Para criar uma pgina, voc precisa:........................................................................................... 3
Editores Grficos .......................................................................................................................... 3
As Tags do HTML ......................................................................................................................... 4
Estrutura bsica em html.................................................................................................................. 4
Criando seu primeiro documento Html............................................................................................. 5
Meta informaes <meta>................................................................................................................ 6
Exerccio ........................................................................................................................................... 7
Principais Tags ................................................................................................................................. 8
Trabalhando com paleta de cores.................................................................................................. 11
Atributos <body>......................................................................................................................... 11
Trabalhando com tabelas ............................................................................................................... 12
Trabalhando com frames................................................................................................................ 15
Segundo exemplo de frame....................................................................................................... 16
Frames........................................................................................................................................ 17
Principais Tags ........................................................................................................................... 17
Eliminao das bordas dos frames:........................................................................................... 17
Eliminao do espao ente os frames:...................................................................................... 17
Atributos <frame>....................................................................................................................... 18
Margem:...................................................................................................................................... 18
Barra de rolagem:....................................................................................................................... 18
Eliminao da barra de rolagem ................................................................................................ 18
Trabalhando com Formulrios ....................................................................................................... 19
Mapeamento de Imagens............................................................................................................... 20
Mapas Clicveis.......................................................................................................................... 20
Cdigo HTML.............................................................................................................................. 20
O formato da rea (SHAPE) podem ser .................................................................................... 20
Fases na construo de um site .................................................................................................... 21
Dica de como organizar e estruturar a navegao de um site.................................................. 21
Veja aqui alguns exemplos de navegao: ............................................................................... 22
Prxima etapa do planejamento................................................................................................. 24
Composio de uma equipe na construo de um Website: .................................................... 24
Como utilizar o Editor Netscape Composer................................................................................... 25
Como utilizar a Barra de Ferramentas de Composio ............................................................ 26

Construindo uma Pgina utilizando o Editor Netscape Composer ........................................... 27
Criando um diretrio para edio........................................................................................... 27
Criando um novo documento (nova pgina) .......................................................................... 27
Como utilizar as Propriedades da pgina .................................................................................. 27
Objetos a serem usados na edio............................................................................................ 29
Os principais recursos ou objetivos a serem trabalhados pelo editor so: ............................... 29
Como utilizar a Barra de Ferramentas de Links ........................................................................ 31
Os principais recursos ou objetos a serem trabalhados pelo editor so:.................................. 32
Como utilizar a Barra de Ferramentas de Image Properties ..................................................... 32
Horizontal Line............................................................................................................................ 33
Tabela (configuraes especficas) ........................................................................................... 33
Salvando um arquivo.................................................................................................................. 35
Visualizando a pgina ................................................................................................................ 35
Como transferir sua pgina (dados) via WSFTP para o servidor:................................................. 36
Como usar: ................................................................................................................................. 36
Dicas:.............................................................................................................................................. 39
Escolha o tema de sua pgina ................................................................................................... 39
Faa o seu site com qualidade e simplicidade .......................................................................... 39
Crie uma pasta e diretrios para salvar seus arquivos.............................................................. 39
Procure um provedor de pginas na Internet ............................................................................ 39
Divulgue o seu site ..................................................................................................................... 39
Referncia Bibliogrfica.................................................................................................................. 40

ltima atualizao em 10/01/2003

Confeco de Web Pages - Bsico

Diviso de Servios Comunidade Centro de Computao - Unicamp
1

O que quer dizer Redes e Internet ?

Para que voc possa entender o que e como funciona a Internet necessrio primeiro
compreender o que uma rede de computadores. Uma rede de computadores consiste,
na forma mais simples de sua definio, na conexo de diversos computadores por meio
de cabos e outros tipos de hardware. Podendo trocar dados entre si.

A interao entre computadores envolve a movimentao de muitos dados, mas difcil
de se mover muitas coisas, incluindo-se dados, atravs de uma longa distncia. Ento a
interao de computadores normalmente comea com computadores no mesmo escritrio
ou no mesmo prdio conectados a uma rede local.

Saiba mais sobre estrutura e funcionamento da Internet
(http://www.ccuec.unicamp.br/treinamentos/naveg40/oqueeh1.html)

Internet

uma interconexo de diversas redes atravs de linhas de alta capacidade chamadas
Backbones, construdos para comportar o grande trfego de informaes que circulam na
Internet. um local pblico e no pertence nem operada por nenhuma empresa.


2
Home Page, Pginas Web, Site, HTML, Hipertexto, Tags?

Vamos entender melhores o que cada termo deste quer dizer, j que os pronunciamos
tantas vezes.

O que quer dizer HTML?

HTML (Hypertex Markup Language) que significa Linguagem de Marcao de Hipertexto.
Esta e uma linguagem dedicada construo de pginas Web.

Hipertexto

o conceito que possibilita a "navegao" entre segmentos de texto independentemente
de sua seqncia linear ou de sua localizao, o leitor salta de uma informao a outra,
no necessariamente numa ordem seqencial.

Essa linguagem tem como finalidade bsica formatar o texto exibido e criar ligaes entre
as pginas da Web, criando assim documentos com o conceito de hipertexto.

Pginas Web

As pginas so documentos de hipertexto. Esto gravados em servidores da Internet
podem ser acessadas em qualquer parte do mundo. Uma pgina WEB tambm pode ser
chamada de home page. Ao iniciar o browser, ser carregada uma pgina definida na
configurao do programa como pgina inicial.

Home Page ou Pgina principal

A pgina de entrada ou pgina inicial.
Uma apresentao da Web um conjunto de pginas Web estruturadas sobre um
determinado contedo, este contedo aquilo que voc est colocando na Web.
Informaes, textos , imagens, ilustraes, programas, textos histricos, diagramas,
jogos, etc. Tudo isso contedo. Esta apresentao, como outras, ficam armazenadas
em um local chamado Site.


3
preciso estar conectado para visualizar a pgina que criei?

Para que o contedo de um documento HTML possa ser formatado e exibido na Internet
devemos usar um programa chamado browser, o navegador. Ele l o contedo do
arquivo, interpreta os comandos e exibe sua pgina.

O browser funciona independente de se estar conectado a Internet. A melhor forma de se
trabalhar desenvolvendo uma pgina HTML off-line, desconectado. Primeiro voc cria
as pginas em seu computador e as testas por meio do browser. Depois, deve coloc-las
em um servidor Web para que outras pessoas tambm possam visualiz-la.

Os Navegadores (browser)

Para visualizar toda informao disponvel na Internet necessrio um Browser,
navegador. H vrios disponveis no mercado. Os mais conhecidos so o Internet
Explorer e Netscape Navigator.

Servidor Web

So computadores equipados com software que permite "servir" a uma rede de
computadores. Quanto mais potente o servidor maior e melhor poder ser a rede por ele
atendida.

So mquinas de alta capacidade, com grande poder de processamento e conexes
velozes. Podemos usar como exemplo a mquina Obelix, que atende a Unicamp.

Para criar uma pgina, voc precisa:

ter conhecimentos bsicos da linguagem html ;
de um editor de textos para gerar o cdigo fonte;
de um browser para visualizar as pginas.

Editores Grficos

O uso dos editores permitem que o autor crie uma pgina sem conhecer os cdigos da
linguagem HTML, o cdigo pode ser escrito usando o mais simples editor de texto, como
o bloco de notas do Windows. Porm a forma mais prtica e produtiva utilizar um editor
HTML.
H vrios no mercado como: FrontPage da Microsoft, Netscape Composer,
Dreamweaver da Macromedia, GoLive da Adobe, etc.

4

As Tags do HTML

As pginas HTML so documentos textos que podem ser editados em qualquer editor de
texto simples (Notepad, por exemplo). Os arquivos HTML padro possuem extenso .htm
ou .html e seus comandos so chamandos de Tags, que informa ao navegador como ser
formatada a pgina.

As Tags, so marcas padres utilizadas para fazer todas as indicaes necessrias ao
browser.

Tags so os elementos do Html encarregados de realizar esta formatao da qual estou
falando. So com estes comandos, ou melhor, com estas tags que voc, por exemplo,
far com que uma fonte fique na cor vermelha, ou mesmo que esta fonte seja Arial ou
Verdana.

Existem diversas tags, muitas mesmo, e cada uma possui uma funo diferente. Ou seja,
no World voc possui o boto centralizar , no Html voc possui a Tag <center>, no
World voc possui o boto Italico , em Html voc possui a Tag <I>

Como em qualquer linguagem, os comandos tm uma sintaxe prpria e seguem algumas
regras:

As Tags aparecem sempre entre os sinais de "menor que" (<) e "maior que" (>).
As Tags so geralmente usadas aos pares, sendo que a Tag de finalizao
precedida de uma barra (/).

Basicamente tudo o que voc for fazer com a html necessitar de cdigo, tag. Todo
documento Html possue um cdigo fonte, que na verdade a pgina em si, s que com
todas as tags visveis.

E o melhor disso tudo que voc pode, por exemplo, ver como esta pgina foi feita sem
nenhuma dificuldade. Clique com o boto direito do mouse sobre a pgina e escolha a
opo "Visualizar Cdigo Fonte".

Estrutura bsica em html

<HTML></HTML> Envolvem todas as sees de um documento (HEAD e BODY).
<HEAD></HEAD> Contm parmetros de configurao do documento.
<TITLE></TITLE> ttulo da Home Page
<BODY></BODY> Contm o contedo da Home Page


5

Criando seu primeiro documento Html

Vamos criar o primeiro documento Html. Para isso abra seu Notepad ou seu editor de
textos preferido e vamos construir nossa primeira pgina Html de exemplo, veja o cdigo:

<html>
<head>
<title> Minha primeira pgina</title>
</head>
<body>
<p>
Aqui voc insere textos, imagens, tabelas, etc. </p>
</body>
</html>

Aps ter digitado estas tags em seu editor salva o documento, porm coloque neste a
extenso ".html", voc pode escolher ento a opo salvar como e ento colocar
"pagina.html" como o nome deste arquivo.

Agora vamos visualiz-lo em seu navegador. Pronto, criamos nossa primeira pgina de
internet, claro que este um exemplo simples, mas basicamente assim que funciona
o Html.

Todo documento Html possui uma estrutura bem parecida, ou seja, ele sempre vai possuir
o incio do documento, marcado pela tag <html>, um cabealho marcado pela tag
<head>, o corpo marcado pela tag <body> e finalmente o final do documento marcado
pela tag </html>.

Vimos o exemplo anterior que, a primeira parte importante em um documento Html o
cabealho. Nele estaro contidas informaes importantes sobre a pgina, como por
exemplo o ttulo dela e inclusive informaes que so chamadas de Meta Informaes,
pois esto contidas dentro das chamadas Meta Tags.

<html>
Esta a primeira tag de um documento Html, com ela que voc diz ao navegador que
al comea a pgina.

<head>
Com a tag <head> que voc diz ao navegador que a partir dela estaro algumas
informaes importantes sobre sua pgina como ttulo e meta informaes.

<title>
Dentro das tags<title> ... </title> voc colocar o ttulo da sua pgina, que aquele texto
que aparece no topo da janela do navegador, olhe para o topo desta janela para ver o
ttulo.


6

Meta informaes <meta>

Meta tags so cdigos html, esses cdigos ajudam alguns sites de busca, como Altavista
e vrios outros, a encontrar o seu site mais rapidamente. Esses cdigos organizam as
informaes que os sistemas de busca precisam para mostrar a sua pgina em um
resultado de busca feita por um usurio. Esse cdigo contm informaes sobre o ttulo,
palavras-chave e descrio do seu site.

As tags ficam entre os comandos <head> e </head>, que ficam bem no topo da pgina.
Eles podem ser colocados em todas as pginas do seu site, somente nas principais, ou
ainda s na pgina inicial.

Esta meta usada para informar quem o autor da pgina, voc pode por exemplo caso,
queira, informar seu nome e tambm seu email.
Exemplo: <meta name="author" content="Magali Bracellos -magali@ccuec.unicamp.br">

Insere a descrio da pgina que aparecer em alguns sistemas de buscas. Pequena
porque esta deve conter por volta de 255 caracteres, ou seja, uma breve descrio.
Exemplo: <meta name= "description" content="descricao do seu site">

Esta tag meta usada para indicar a alguns sites de busca palavras chave (keywords)
que podem ser usadas para identificar o contedo do seu site. Elas so separadas por
uma vrgula (,).

Exemplo:
<meta name= "
keywords
" content="Palavras-chave sempre por vrgula">


7

Exerccio

Vamos fazer agora nossa segunda pgina, com um cabealho bem completo.
Abra de novo seu editor e vamos l :

<html>
<head>
<meta name= "author" content="Magali Bracellos - magali@ccuec.unicamp.br">
<meta name= "description" content="descricao do seu site">
<meta name= "keywords
" content="Palavras-chave sempre separadas somente por espaos em
branco">
<title> Criando um cabealho mais completo</title>
</head>
<body>
<p>
Neste segundo exerccio criamos um cabealho mais completo.</p>
</body>
</html>

Aps ter digitado o cdigo acima em seu editor, siga o mesmo processo, salve-o com a
extenso ".html" e ento abra-o em seu navegador para ver o resultado. Aparentemente
no haver nada de muito novo, mas para os sites de busca como o Google, Altavistae
outros... por exemplo, seu site j poder ser cadastrado sem problemas, pois ele j
possui algumas das informaes necessrias.

8

Principais Tags


9


10


11

Trabalhando com paleta de cores

Os valores para as cores devem ser escritos no padro Hexadecimal. Para obter uma lista
de cores Hexadecimais, aqui est :

Paleta com 216 cores hexadecimais.

Atributos <body>

Exemplo:

<body bgcolor="#000000" text="#FFFFFF" background="fundo.gif" link="#EEEEEE"
alink="#EEEEEE" vlink="#EEEEEE">

bgcolor= "valor" - Cor do fundo da pgina

text= "valor" - Cor do texto padro

link= "valor" - Cor dos links

alink= "valor" - Cor dos links acionados

vlink= "valor" - Cor dos links j visitados

12

Trabalhando com tabelas

As tabelas so elementos essenciais para o posicionamento preciso dos objetos na
pgina. So formadas de linhas, dentro da linhas so inseridas clulas com contedo.
Veja abaixo os tags bsicos:


13


14


15
Trabalhando com frames

Frames ou quadros permitem a diviso da tela de exposio do browser em diferentes
reas onde pode-se apresentar diferentes pginas. Isso possibilita, por exemplo, que se
determine uma rea da tela para ser a pgina principal e outras reas para menus ou
links. Isso usado de maneira coordenada pode ser de grande ajuda na navegabilidade
pelas pginas de seu site.

O Netscape Composer no apresenta facilidades para a criao de Frames por isso
neste treinamento a estrutura dos frames dever ser definida usando outros editores (
Word, Notepad, WordPad, ... )

O primeiro passo para se criar uma estrutura usando frames definir o Frameset ou
conjunto de frames, que indica como ser estruturado cada quadro na tela em termos de
linhas (rows) e colunas (cols) , e quais pginas devero ser apresentadas em cada um
desses quadros.

Num primeiro exemplo vamos dividir a tela em duas reas : um menu lateral e uma rea
principal ocupando a maior parte da tela.

<frameset cols="100 , * ">
<frame src= menu.html name = "area-menu">
<frame src= apresentacao.html name="area-principal">
</frameset>

No exemplo acima temos a tela dividida em duas reas, definidas por duas colunas
verticais.
A primeira , com tamanho de 100 pixels , recebeu o nome de area-menu e nela estamos
apresentando a pgina menu.html. A segunda ocupa o restante da tela ( indicado por
"*" ), recebeu o nome de area principal, e nela estamos apresentando inicialmente a
pgina apresentacao.html.

16

Segundo exemplo de frame

Num segundo exemplo vamos definir uma estrutura com trs reas : topo, menu lateral, e
rea principal. Para tanto basta acrescentarmos o exemplo anterior como um subconjunto
de frames nesta nova estrutura.

<frameset rows = " 60 , * ">
<frame src= topo.html name = "area-topo">
<frameset cols="100 , * ">
<frame src= menu.html name = "area-menu">
<frame src= apresentacao.html name="area-principal">
</frameset>
</frameset>

No exemplo acima temos a tela dividida em em trs reas distintas : duas linhas, ou
faixas horizontais, a primeira com 60 pixels recebeu o nome de area-topo e apresenta a
pgina topo.html; a segunda faixa se divide em outro conjunto de frames desta vez em
colunas verticais, a primeira com 100 pixels recebeu o nome de area-menu e apresenta a
pgina menu.html e a segunda ocupando o restante da tela, recebeu o nome de rea
principal e apresenta a pgina apresentacao.html.

17

Frames

Ainda podemos definir atributos em nosso Frameset que controlam a visualizao e
navegao coordenada entre os frames.

Principais Tags

<frameset><frameset> - Determina o incio e o fim de um frame. Deve ser usado
juntamente com os parmentros cols (frame na vertical) ou rows (frame na horizontal).

cols="valor,valor" - Determina o nmero de regies verticais da pgina. Deve ser
indicado juntamente com uma lista de valores. Cada valor especifica a largura de cada
frameset e pode ser definido em pixels, percentual ou asterisco.

rows="valor,valor" - Determina o nmero de regies horizontais da pgina. Deve ser
indicado juntamente com uma lista de valores. Cada valor especifica a largura de cada
frameset e pode ser definido em pixels, percentual ou asterisco.

border = "valor" - Determina a espessura da linha divisria que aparece entre os
framesets. Sendo que x o valor da borda em pixels.

Eliminao das bordas dos frames:

< FRAMESET src = ... FRAMEBORDER="NO" >

Eliminao do espao ente os frames:

< FRAMESET src = .... FRAMEBORDER="NO" BORDER="0" >

bordercolor = "cor" - Determina a cor da linha divisria que aparece entre os framesets.


18

Atributos <frame>

src = "pgina.htm" - Determina a pgina ou arquivo que ser carregado na regio
correspondente.

name = "nome" - Determina um nome ao frameset correspondente. O nome de vital
importncia
na utilizao dos frames.

noresize - Deixa a linha do frameset esttica. Os navegadores permitem que o visitante
altere a posio dos frames. Para tanto o atributo

< FRAMESET src = ... NORESIZE>

Margem:

marginheight = "valor" - determina as margens direita e esquerda do frame

marginwidth = "valor" - determina as margens superior e inferior do frame

Barra de rolagem:

scrolling = "valor" - Determina o aparecimento ou no da barra rolagem. Os valores
podem ser yes (com barra de rolagem), no (sem barra de rolagem) ou auto (barra de
rolagem s aparecer quando o contedo da pgina ultrapassar o tamanho do
frameset.

Eliminao da barra de rolagem

< FRAMESET src = ... SCROLLING = "NO" >

19

Trabalhando com Formulrios

<html>
<head>
<title>exemplo</title>
</head>
<body bgcolor="#FFFFFF">
<form name="" action="mailto:mail@provedor.com.br" method="post">
nome:
<br><input type="text" name="nome">
<p>email:
<br><input type="text" name="email">
<p>Gostou de meu site?
<br><input type="radio" name="gostou" value="sim" checked>Sim
<br><input type="radio" name="gostou" value="no">No
<p>Envie sugestes:
<br><textarea name="textfield" cols="50"></textarea>
<p><input type="submit" value="enviar"><input type="reset" value="limpar"
name="Reset"></form>
</body>
</html>


20
Mapeamento de Imagens

Mapas Clicveis

Mapas Clicveis em uma pgina so figuras que permitem a associao de reas desta
figura com links para diferentes URLs. Estes mapas podem ser definidos de diferentes
maneiras; neste treinamento estaremos apresentando um mtodo bastante simples
usando Client-Side imagemap.

Cdigo HTML

<MAP NAME=menu>

<AREA SHAPE=rect COORDS= "151,7,221,20" HREF=menu1.html>
<AREA SHAPE=rect COORDS= "526,57,593,67" HREF=http://www.unicamp.br>
</MAP><IMG Border=0 SRC="nome da imagem. gif ou jpg" USEMAP="#menu" >

No exemplo acima a diretiva MAP est definindo a criao do mapa e informando seu
nome. A diretiva REA informa o formato,SHAPE, da rea "sensvel" , suas coordenadas,
COORD, e o endereo da URL associada.

O formato da rea (SHAPE) podem ser

RECT - retngulo - coordenadas x1,y1 , x2,y2

CIRC - crculo - coordenadas x,y e raio r

POLY - polgono - coordenadas x1,y1 , x2,y2 , x3,y3 , ...

A Diretiva <IMG ... USEMAP= ...> associa a defio do Mapa Imagem.
As Coordenadas podem ser obtidas utilizando softwares de tratamento de imagens, como
o Paint Shop Pro ( http://www.jasc.com )

21

Fases na construo de um site

1 Fase: Organizao da Informao

2 Fase: Conceituao do site e definio da estrutura de navegao

3 Fase: Montagem do Site

4 Fase: Testar localmente

5 Fase: Disponibilizar o site

Dica de como organizar e estruturar a navegao de um site

01- Que pretendemos divulgar em nosso site? Que tipo de contedo voc pode
apresentar na Web?

Exemplo:
Informaes pessoais
Publicaes como jornais, revistas;
Perfis da empresa como:
histrico da empresa; segmento da empresa; clientes, parceiros, etc...

02- Estabelecer objetivos:

Voc deve perguntar-se o que os leitores vo estar procurando no site.
O que voc deseja realizar com a apresentao do site.
Antes de comear entrar com cdigos ou imagens voc deve pensar o que voc quer
colocar em sua pgina
Como ser estruturada? Ela est adequada ou no ao meu pblico alvo?
Ao desenvolver um site para uma empresa ou pessoas importante que voc colha
junto ao seu cliente seus objetivos, idias, a forma que imagina sua pgina, etc.
Assim, ficar bem mais fcil de comear seu trabalho.

03- Divida o seu contedo em tpicos:

Crie uma lista com os principais tpicos, a princpio no importa a ordem. Esta uma
forma de comear a se organizar.

Sua lista poder ter quantos tpicos desejar (...+ vai de leve)

dica >> (cuidado!! seu leitor poder se cansar e se perder em meio a tantas opes)

22

04- Quais as quetes que devo levantar com relao a organizao e navegao de
um site?

Ser que os leitores conseguem navegar pelo contedo de cada tipo de estrutura para
encontrar as informaes de que precisam.
Como ter certeza de que os leitores conseguem se localizar nos meus documentos
(contexto) e achar o caminho de volta at uma posio conhecida.

Ao ler estas questes suas informaes se encaixariam em cada uma?

Veja aqui alguns exemplos de navegao:


23


24

Prxima etapa do planejamento

Sua apresentao da Web consiste em determinar o contedo que ser apresentado em
cada uma das pginas e criar alguns vnculos (links) simples que possibilitem a
navegao por essas pginas.

1. Coloque cada tpico em uma pgina, mas se tiver um grande nmero de tpicos, a
manuteno e vinculao podem se tornar maante.

2. Defina bem a forma de navegao entre as pginas. Se houver formas alternativas,
torne a navegao para os leitores a mais intuitiva possvel.

3. Tome cuidado com o que ser incluindo na home page, lembre-se, ela ser a porta da
sua apresentao.

4. Tenha sempre em mente seus objetivos. Procure no se distanciar deles.

Dica importante:
A disposio de imagens, textos, vdeos, etc. Tudo que voc deseja colocar em sua
pgina precisa ser colocado de forma agradvel ao leitor. Da abordarmos, de forma
geral, a diagramao. Esta palavra vem do mundo dos impressos. Trata-se da disposio
de elementos que compem uma pgina. Deve ser observado o tamanho das fontes,
disposio das imagens, forma como o texto ser apresentado, etc. Uma boa
diagramao tambm garante o retorno do internauta.

Composio de uma equipe na construo de um Website:

a) Analistas de sistemas (com experincia em gerncia de Informao), responsvel pela
organizao da informao;

b) Design Grfico, responsvel pelo projeto grfico;

c) Programadores, que, dependendo do tipo de site, podem ser programadores HTML,
Java, JavaScript, CGI, etc;

A equipe dever ter um coordenador, responsvel em fazer o trabalho fluir de forma
eficiente, dentro de um cronograma aproveitando o mximo de cada profissional. Depois
do site construdo surgir uma outra pessoa: o WebMaster, que ser responsvel pela
administrao do site. muito haver o acmulo de funes por membros da equipe. Mas
importante definir o papel de cada na construo do site.

25

Como utilizar o Editor Netscape Composer

Este treinamento pretende descrever algumas ferramentas disponveis dos mdulos do
pacote Netscape Comunicator diz respeito construo de pginas para o WWW e dar
dicas sobre a construo dessas pginas, utilizando o Netscape Composer. Se voc no
possue o Netscape Communicator instalado em seu computador, h sites na Internet que
permitem fazer o download de verses atualizadas e ainda permitem a opo de idioma.

Veja aqui: Netscape Brasil Download
(http://ftp.unicamp.br/pub/netscape/communicator/english/4.78/windows/windows95
_or_nt/complete_install/).

Este editor, embora apresente algumas limitaes e restries, permite a criao e
manuteno de pginas sem que seja necessrio profundos conhecimentos da linguagem
HTML.

Dentro dessa interface vamos abordar as funes bsicas como a Barra de Ferramentas
de Composio, Barra de Ferramentas de Formatao , Propriedades da Pgina , Links,
Imagens e Tabelas .


26

Como utilizar a Barra de Ferramentas de Composio


27
Construindo uma Pgina utilizando o Editor Netscape
Composer

Criando um diretrio para edio

Para organizar a edio dos arquivos bem como para facilitar o envio dos arquivos para o
Servidor WEB, importante criar uma pasta (diretrio), podendo ser criado dentro da
pasta Meus Documentos. Como sugesto, crie uma pasta chamada site.

Criando um novo documento (nova pgina)

A partir do Netscape Navigator, clique em File, New, Blank Page. O editor de pginas
Netscape Composer abrir uma pgina em branco e a partir de agora, tudo que for
colocado nesta pgiana estar automaticamente sendo convertido para a liguagem
HTML.

No caso do servidor WEB da UNICAMP, a primeira pgina de um determinado assunto,
seja uma pgina pessoal ou qualquer outro tem especfico, deve possuir como nome
index.html ou index.htm . As demais pginas acessadas a partir desta, podero possuir
quaisquer outros nomes.

Como utilizar as Propriedades da pgina

Para modificar as propriedades da pgina, basta clicar em Format e Page Colors and
Properties. possvel fazer as modificaes indicadas ao lado:


28
Normal Text: cor do texto normal. Link Text: cor do texto do link. Active Link Text: cor
do texto do link enquanto est sendo Followed Link Text: cor do texto do link j visitado.

PS: Pode-se alterar as definies existentes clicando sobre os botes que mostram
as cores usuais do Netscape.

Clicando em Colors and Background, pode-se selecionar uma imagem (.gif ou .jpg)
para ser usada como fundo da pgina.

Para escolher a imagem clique sobre Choose File...

Clicando em General, pode-se atribuir um ttulo para a pgina, o/os nome/s do/s
autores e a sua descrio.


29

Objetos a serem usados na edio

Editores de texto como o MS-Word, Word Perfect, etc, possuem diversos recursos para a
produo de textos. No caso de um editor HTML, estes recursos so bem mais simples,
pois visam criar mecanismos simples e de fcil acesso.

Os principais recursos ou objetivos a serem trabalhados pelo
editor so:

Texto
A edio de texto feito diretamente sobre a rea logo abaixo do menu de opes do
editor. Um texto pode ter atributos como Fontes, Cores, Tamanhos, etc (semelhanto ao
Word). Um texto tambm pode ser um link, que acesse um trecho desta pgina (Target),
ou at mesmo um outro site. Para cri-lo, basta selecionar o texto e pressionar o boto
direito do mouse sobre o mesmo, e selecionar o item Create link using Selected e
informar o caminho e nome do arquivo a ser chamado.

Clicando sobre a seta, abre-se a caixa com a barra de rolagem que possibilita alterar o
tipo do pargrafo e/ou cabealho. No exemplo, foi selecionado o pargrafo normal.


30
Clicando sobre a seta, abre-se a caixa com a barra de rolagem que possibilita selecionar
a o tipo de fonte. No exemplo, foi selecionada a fonte Comic Sans MS.

a cor da fonte. A opo Other... permite personalizar as cores. O texto alternativo mostra
o cdigo html da cor.

o tamanho da fonte. No exemplo, foi selecionado o tamanho 12.


31

1 - Seleciona o estilo de fonte negrito.
2 - Seleciona o estilo de fonte itlico.
3 - Seleciona o estilo de fonte sublinhado.
4 - Remove todos os estilos do texto selecionado.
5 - Apresenta o texto na forma de lista com marcadores.
6 - Apresenta o texto na forma de lista numerada.
7 - Diminui a indentao.
8 - Aumenta a indentao.
9 - Alinha o texto na margem esquerda da pgina.
Alinha o texto no centro da pgina.
Alinha o texto na margem direita da pgina.

Como utilizar a Barra de Ferramentas de Links

Para chamar uma pgina da rede:
Basta colocar a URL da pgina como mostra a figura.

Para chamar uma pgina do mesmo diretrio:
Basta colocar o nome do arquivo no lugar da URL.

Por exemplo:
teste.html ou teste.html#de
(alm de chamar o arquivo "teste.html" com o caracter "#" chama-se o destino "de").

Para abrir uma caixa de correio:
Basta colocar o e-mail precedido de mailto: no lugar da URL.

Por exemplo:
mailto:bernard@hotmail.com

Target
um local especfico dentro da pgina que est sendo editada, que acessado por um
link dela mesma ou de outras. Para criar um Target, basta clicar no boto Target ou no
menu Insert, Target.

32
Os principais recursos ou objetos a serem trabalhados pelo
editor so:

Imagens (figuras)
A insero de imagens pode ser feita usando o boto Image ou atravs do menu superior,
clicando em Insert, Image. Uma imagem, pode ter como atributos principais: uma posio
especfica de alinhamento, um link, texto alternativo, etc. A criao de links em imagens
semelhante aos links em textos, bastando clicar o boto direito do mouse sobre a
imagem.

Como utilizar a Barra de Ferramentas de Image Properties

Em Image Properties, coloca-se o nome da figura a ser inserida do mesmo diretrio ou a
URL de onde se encontra.

Por exemplo:

http://www.ccuec.unicamp.br/images/foto.gif ou somente foto.gif (arquivo local).
O texto prximo a imagem pode ser alinhado de diferentes formas com vemos na figura
acima.

Clicando em Alt. Text / LowRes., possvel escrever um texto alternativo que aparece
quando o mouse para sobre a imagem. Veja.

33

Horizontal Line

uma linha horizontal usada para dividir, visualmente, sesses de uma pgina. Para
inserir, basta clicar no boto H. Line ou no menu Insert, Horizontal Line.

Tabela (configuraes especficas)

A tabela um recurso bastante interessante para a programao HTML, pois alm da
funo de organizao de dados, pode servir tambm para a organizao de imagens e
textos dentro de uma pgina.

Serve tambm para criar um fundo diferente do padro, para destacar em texto. Uma
tabela possui diversos atributos gerais ou especficos de linhas e/ou clulas. No existe
controle sobre colunas.

Para inserir uma tabela na sua pgina, selecione o menu Insert/Table/Table, conforme
mostrado ao lado. Ou escolha o coneque faz parte da Barra de Ferramentas de
Composio.


34

Em seguida aparecer esta janela:

Para apagar a tabela, d um clique com o boto direito do mouse com o cursor
sobre a mesma e aparecer o menu mostrado abaixo:

Para apagar e inserir linha ou coluna, usa-se este mesmo menu, mudando apenas a
opo a ser selecionada.

35

Salvando um arquivo

Antes de enviar a pgina para o Servidor WEB, esta ter de ser salva, clicando-se em
File, Save.
Se a primeira vez que voc est editando este arquivo, neste momento o sistema pedir
para que seja informado um nome.

Visualizando a pgina

O editor Netscape Composer no totalmente interativo quanto ao produto final de uma
pgina. Certos ajustes de posicionamento de figuras e mesmo de textos, somente sero
bem visualizados utilizando a opo especfica de visualizao, acessado pela boto
Preview. Clique neste boto para ver o resultado finalObs.: Se a pgina ainda no estiver
salva aps a ltima alterao, ser solicitado a salva do arquivo, antes da execuo do
Preview.


36

Como transferir sua pgina (dados) via WSFTP para o
servidor:

O que o WSFTP ?

Para que seja feita a transferncia dos arquivos de sua homepage para o seu espao com
rapidez, voc pode utilizar o sistema conhecido como FTP, "FILE TRANSFER
PROTOCOL", ou seja, Protocolo de Transferncia de Arquivos, que permite o envio de
todos os arquivos desejados de uma s vez.

Para que este processo seja concludo, voc necessitar de um programa de FTP.
O programa que ns indicamos para utilizao o WSFTP, por ser um programa dos
mais fceis de utilizao e pequenos, fazendo com que seu Download no seja to
demorado alm de ser grtis.

No endereo:
ftp://ftp.unicamp.br/pub/simtel.net/win95/inet/ws_ftp32.zip

Como usar:

No campo "Host Name/Address:
" voc coloca o endereo do servidor de FTP

Em "Host Type:" selecione "Automatic detect".

No campo "User ID:
" coloque seu ...... e em "Password:" coloque a sua senha.


37
Depois de preencher estes campos s apertar "OK" e o programa vai iniciar a conexo
com o servidor para que voc possa fazer a transferncia dos arquivos.

Depois de conectado, aparecer outra janela como a que se segue abaixo:

Quando aparecer esta tela necessrio apenas notar que a parte esquerda da janela o
seu "computador" e a direita o nosso "computador".

Agora s ir at o diretrio onde esto os arquivos que deseja transferir, selecione os que
voc quer enviar do lado esquerdo (para selecionar mltiplos arquivos mantenha a tecla
Shift de seu teclado pressionada enquanto faz sua seleo) e clicar na seta que direciona
para a direita "=>", para que os respectivos arquivos sejam transferidos.

Para transferir arquivos do seu diretrio para o seu micro basta voc selecionar eles do
lado direito e apertar a seta que direciona para a esquerda "<="


38

H uma barra de comandos direita da tela onde aparecem os arquivos, por meio dela
podem ser executados os principais comandos para gerenciar os arquivos, os comandos
bsicos so 4:

Detalhes:

Os diretrios so representados pelo cone de uma pasta " ".
Para Abrir um diretrio basta dar dois cliques sobre a pasta desejada.

" " Esta seta permite que voc possa voltar um nvel acima no seu direrrio, por
exemplo, se voc est no diretrio "/principal/graficos/" ao dar 2 cliques na seta voc
volta para o diretrio "principal".

No se esquea de selecionar os arquivos para executar os comandos

Para arquivos .html selecione a opo ASC

Para arquivos .gif, jpg, png, pdf, swf, exe, selecione a opo Binary


39
Dicas:

Escolha o tema de sua pgina

Antes de iniciar um projeto na Internet, voc deve pensar no foco principal de seu site.
Esquematize os principais assuntos a serem tratados e escreva-os em um papel. Lembre-
se que um dos principais motivos para que um usurio visite sua pgina o contedo.

Faa o seu site com qualidade e simplicidade

No construa seu site de qualquer maneira. Os usurios da Internet so exigentes e
responsveis pela navegao, podendo entrar e sair de um site quando desejam. Por
isso, voc deve projetar seu site com qualidade de contedo, imagens e principalmente
com tempos de download rpidos. A usabilidade na Web fundamental para o sucesso
de seu site.

Crie uma pasta e diretrios para salvar seus arquivos

Crie uma pasta principal nica nomeando-a com, por exemplo, o nome do site. Todos as
outras pastas devero ser criadas internamente a pasta principal. Os novos arquivos de
extenso *.html criados devero ser salvos nas sub-pastas. Lembre-se que voc deve
nomear as pastas com letra minscula, assim como os arquivos. Todos os outros
arquivos utilizados, seja ele de imagem, som, mdia, etc. ,tambm sero copiados para as
sub-pastas.

Verifique se todos os links esto funcionando adequadamente.

Procure um provedor de pginas na Internet

Existem vrios servios de hospedagem na Web. Se voc no deseja pagar por ele,
procure pginas que oferecem esse servio gratuitamente. A pgina www.hpg.com.br e
www.starmedia.com.br so exemplos de pginas que oferecem esse tipo de servio.
Mas voc no ter disponveis todos os recursos de hospedagem e certamente seu site
ficar mais lento.

Divulgue o seu site

Para que o mundo da Web tenha conhecimento de seu site, divulgue-o em pginas de
busca, tais como www.cade.com.br, www.seek.com.br, www.yahoo.com.br.

Atualize sempre o seu site.


40

Referncia Bibliogrfica

http://www.construindoseusite.com.br/default.asp

http://members.lycos.co.uk/rabaco/

http://www.estudegratis.com.br/index.phtml

http://www.aisa.com.br/diciona.html

http://www.crieseuwebsite.com/

Colaboradora: Rita de Cssia de Souza

Onde obter ajuda

Para ajud-lo a solucionar dvidas de informtica, utilize o sistema Rau-Tu de perguntas e
respostas, que foi desenvolvido pelo Centro de Computao da Unicamp em conjunto
com o Instituto Vale do Futuro. Tem por objetivo possibilitar que um time de colaboradores
possa responder a perguntas colocadas por qualquer pessoa no site, cobrindo diversas
reas de conhecimento.
Acesse: www.rau-tu.unicamp.br

Confecção de Webpages

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Confecção de Webpages

Загружено:

Авторское право:

Доступные форматы

Licenciamento de Uso

Este documento propriedade intelectual 2002 do Centro de Computao da Unicamp e

Вам также может понравиться