Desenvolvimento de Conteúdos para a Web
Iniciar a aplicação
Existem várias formas de o fazer, por exemplo:
• através do menu Iniciar, opção Programas, Microsoft FrontPage (ou na versão inglesa: Start, Programs, Microsoft FrontPage);
• através de um atalho criado previamente;
• através do Explorador do Windows, Barra do Office, etc.;
Ambiente de trabalho
O ambiente de trabalho é composto por vários componentes: Barra de título
Título da Aplicação Botões de Acção {minimizar/restaurar/maximizar/fechar}
Barra de Menu
Barras de Ferramentas
Área de trabalho
Pré- visualização construção da página da página arrastando os elementos construção da página
Elaborar uma página
Uma página Web é composta por vários elementos multimédia – texto, imagem, vídeo, som - cada um tem formatações específicas.
Texto
Coloca-se o cursor no local onde se pretende inserir o texto e dá-se início à sua edição. Formatação de texto
Pode formatar-se o texto por vários meios, após se seleccionar o texto (ou parte dele) pode: - aceder-se ao ícone correspondente da barra de ferramentas do texto;
- aceder-se ao menu Formatar opção Fonte e daí escolher o ítem.
Os primeiros três campos dizem respeito ao tipo de texto (heading1 até heading7), tipo de letra e tamanho. Dado que se trata de caixas pull-down estas contêm várias opções que são
visualizadas quando se clica sobre a seta, que se encontra do lado direito da caixa. As opções seguintes dizem respeito ao estilo de texto, B – para colocar o texto seleccionado a negrito, I – para colocar o texto a itálico e U – para colocar o texto sublinhado. (Após se seleccionar o texto só é necessário clicar sobre o ícone, se um dado texto estiver a itálico, para o colocar sem estilo, selecciona-se e clica-se sobre o ícone I para desactivar a opção anteriormente colocada). [Existem outras opções de estilo que podem ser adiocionadas como ícones à barra de
ferramentas, no entanto estão disponíveis nas opções apresentadas em Fonte do menu Formatar].
O conjunto seguinte refere-se ao alinhamento, neste caso as opções são: - alinhado à esquerda
- centrado
- alinhado à direita
Tal como para os estilos, selecciona-se o texto que se pretende formatar e clica-se no +icone de alinhamento. Há ainda outra opção de alinhamento: Justificado – esta opção encontra-se a partir do menu Formatar, opção Parágrafo.
Os ícones que se seguem permitem organizar o texto em forma de lista, quer seja uma lista ordenada (numeração árabe ou numeração romana ou também por ordem alfabética,
permitindo as variantes maiúscula e minúscula) quer seja uma lista não ordenada em que são utilizadas marcas (disco, quadrado, círculo) que também ser personalizadas usando figuras ou desenhos do utilizador.
Após se terem introduzido as marcas estas podem ser alteradas. Coloca-se o cursor numa linha da “lista”, acede-se ao menu Format, opção Bullets and Numbering e escolhe-se uma de entre as opções apresentadas na janela.
Ainda na Barra de Ferramentas do texto, encontram-se 2 ícones que permitem alterar a identação do texto, aumentar ou diminuir a margem (direita). Os dois últimos ícones permitem colocar uma cor de fundo ao texto e atribuir uma cor ao texto. Selecciona-se o texto ou porção do mesmo e clica-se sobre o ícone.
Em relação ao texto também se pode formatar o parágrafo. Selecciona-se o parágrafo que se pretende (basta colocar o cursor numa das linhas do mesmo parágrafo, isto só não é possível quando se pretende afectar mais do que um parágrafo), acede-se ao menu Format opção Paragraph e dão-se os valores qu esse pretendem aplicar.
Opções para marcas
Esta opção permite ao utilizador definir qual o primeiro ítem da lista. Por exemplo, para ordem alfabética, se se pretendesse que o primeiro ítem fosse a letra “g”, então neste campo teria de se inserir 7, dado que a letra “g” é a 7ª do alfabeto.
Opções para marcas
Assinala-se a opção Specify picture e a partir do Browse procura-se o ficheiro de imagem que se pretende colocar como marca.
Espaçamento entre linhas Espaço antes e depois de cada
parágrafo e espaçamento entre palavras Identação à direita e à esquerda do texto. Na caixa à frente: identação da primeira linha de cada parágrafo Alinhamento do texto
Inserção de imagem
Podem inserir-se imagens da galeria do Clipart, guardadas num ficheiro (quer em disco, disquete ou Cd). Após colocar o cursor na área onde se pretende inserir a imagem, acede-se ao menu Insert e escolhe-se a opção Picture e de seguida indica-se o tipo de imagem a inserir.
clipart
(1 – apresentação por temas) (2 – conteúdo de um tema seleccionado)
a partir de um ficheiro (from File)
Formatação de imagens
Clica-se com o botão direito do rato sobre a imagem e escolhe-se a opção “Picture Properties” de entre as opções
apresentadas.
Clicar sobre o ícone para colocar a imagem na página
Inserção de vídeo
Após colocar o cursor na área onde se pretende inserir o vídeo, acede-se ao menu Insert e escolhe-se a opção Picture e dentro desta a opção Video.
As opções associadas ao vídeo referem-se ao número de vezes que este é percorrido, quando é que é iniciado, etc.
Nota:
As opções genéricas também podem ser atribuídas a um ficheiro de vídeo, isto porque para browsers que não suportem vídeos, podem ser mostradas imagens e convém estas estarem definidas. Procede-se da mesma forma como na formatação da imagem, só que neste caso, a imagem só é mostrada como alternativa.
Ficheiro que corresponde à imagem, quando não se sabe a localização exacta, procura-se o ficheiro através do botão “Browse”. O botão “Edit” permite editar a imagem.
“Low-Res” – ficheiro de imagem de resolução inferior que é mostrado na página (quando esta está a ser visulaizada) enquanto a imagem não estiver totalmente carregada. O campo “text” permite inserir uma mensagem de texto que é mostrada nos browsers que não suportem formatos de imagem.
“Loop” – nº de vezes que o vídeo é percorrido; “Loop delay” intervalo de tempo entre cada loop; “Start” – indica quando é que o video é iniciado: “On file open” – assim que se inicia a página; “On mouse over” – quando se passa com o cursor sobre o vídeo. (Estas opções podem ser assinaladas em simultâneo).
Inserção de Tabelas
Coloca-se o cursor no local onde se pretende inserir a tabela e acede-se ao menu Table, opção Insert, subopção Table. Na janela que é apresentada de seguida introduzem-se as opções pretendidas.
Rows – nº de linhas Columns – nº de colunas
Alignment – define o alinhamento do conteúdo de todas as células da tabela (podem ser alteradas individualmente!)
Border Size – define o tamanho dos contornos da tabela (0 – equivale a não ter contorno) Cell pading – define o tamanho da margem interior de cada célula
Cell spacing – espaço entre cada duas células
No caso de se especificar a largura (assinalando a caixa “Specify width”, podem definir-se as medidas de forma absoluta – em pixeis, ou relativa – em percentagem)
Após estarem todas as opções definidas clica-se em Ok, para inserir a tabela na página. Para inserir informação clica-se dentro das células e procede-se normalmente consoante o elemento a tratar.
Formatar Células
Para se formatar uma célula individualmente, selecciona-se a célula e acede-se ou ao menu Table, opção Properties e dentro desta opção Cell, ou clica-se com o botão do lado direito do rato sobre a célula e scolhe a opção Cell Properties do menu.
Horizontal alignment – alinhamento horizontal (esquerda, centro, direita) Vertical alignment – alinhamento vertical (topo, meio, fundo)
Rows spanned – espaço ocupado pela célula em relação às outras células. Isto é, se a célula seleccionada ocupa o espaço ocupado normalmente por duas ou mais células (em linhas) Columns spanned – espaço ocupado pela célula em relação às outras células. Isto é, se a célula seleccionada ocupa o espaço ocupado normalmente por duas ou mais células (em colunas) Borders:
Color - cor do contorno da célula
Ligtht border – cor do contorno mais claro Dark border – cor do contorno mais escuro Background:
Color - cor de fundo da célula
Use Picture Backgrounde – permite introduzir uma imagem como fundo
Outras opções permitem inserir novas linhas e/ou colunas sem ter de refazer toda a tabela, assim como apagar excedentes.
Permite definir a altura e largura de forma relativa ou absoluta. Deve-se ter o cuidado de alterar as medidas, também nas células adejacentes para que a soma da largura e/ou altura dar certa.
Insere uma nova linha abaixo da linha em que e se encontra o cursor. Insere uma nova coluna à direita da coluna em que e se encontra o cursor. Divide a célula em várias na horizontal ou vertical
Define-se o tipo de divisão Nº de divisões que se pretende
Links
Um link é um elemento que, ao se clicar sobre ele, remete para outra página e/ou secção. Podem ser texto (uma letra, palavra, parágrafo, etc.), uma imagem ou outro elemento. Para se definir um link, selecciona-se o elemento que deve servir de link, acede-se ao menu Insert, opção Hyperlink (ou ao ícone correspondente da barra de ferramentas) e definem-se as características na janela que é colocada no ecrã.
Em termos de formatação, podem definir-se as cores para os vários estados de um link. Link – link no seu estado normal
Link activo – quando se clica com o rato
Link visitado – indica que aquele link já foi activado anteriormente
Onde definir? Aceder ao menu Tools opção Page Properties e alterar as definições pretendidas. Indica-se a directoria onde se encontra a página que corresponde ao link
Listagem das páginas que existem na directoria acima indicada
Indica-se o Url da página web que corresponde ao link Para pesquisar uma página na web Para pesquisar os ficheiros no computador Para definir a página em que é visualizado o link
Seleccionar o ítem Background
Para cada estado de link, pode definir-se a cor que se pretende
Frames
As Frames são utilizadas quando se pretende fazer uma divisão estruturada numa página, mantendo por exemplo alguns elementos fixos e alterando outros.
Para construir uma página, usando frames, acede-se ao menu File, opção New e escolhe-se de entre um dos estilos apresentados.
A estrutura de frames, inicialmente escolhida, pode ser alterada. Por exemplo, pode apagar-se uma frame, para isso acede-se ao menu Frame, opção Delete. Ou também dividir uma frame em duas, para isso acede-se ao menu Frame, opção Split e escolhe-se de entre um das opções apresentadas. (Outra forma de aceder a este menu, é através de um clique, com o botão direito do rato, e escolher a opção Split)
É de notar que a cada frame corresponde uma página, assim, supondo que se escolhe a configuração (da figura anterior), tem-se um conjunto de 3 frames – estas correspondem, portanto, a 3 ficheiros. Mas para além destes, há um outro ficheiro (normalmente denominado por index) que contém a informação acerca da estrutura da página. Ou seja, quando se tem um página com n frames, é necessário gravar n+1 ficheiros. No acto de gravar, aparece, inserida na caixa de diálogo correspondente, o desenho relativo à página – estrutura de frames, e é assinalada a azul, a frame que se está a gravar no momento exacto. Para indicar que se está a gravar a página que define a estrutura (index) é assinalada a azul toda a página.
Seleccionar o ítem Frames Pages
Divisão por linhas ou colunas
A nível de formatação, as frames também têm pontos específicos. Selecciona-se uma Frame, acede-se ao menu Frame, opção Frame Option e assinalam-se as opções pretendidas na caixa de diálogo.
Nota:
Na Página 9, na descrição da formatação dos links,indica-se na janela o ítem que corresponde à selecção da página. Quando se trabalha com uma estrutura de frames, este conceito
mantem-se. Se se pretender, por exemplo, que a página associada a um link, seja mostrada na própria frame, ou noutra, basta clicar no botão e escolher a frame correspondente, da figura que é apresentada.
Frame a ser guardada
Nome da Frame (opcional) 1ª página que é mostrada na frame
Dimensões da frame, em pixels ou percentagem Dimensões das margens da frame (em pixels)
Permite (ou não) o redimensionamento da frame por parte do utilizador Definição das scrollbars.
Opções:
If needed – se necessário; Always – sempre;
