CRIAÇÃO DE SITES WEB CEFOSAP

Transcrição

1 Manual de Formação CRIAÇÃO DE SITES WEB CEFOSAP

2 ÍNDICE INTRODUÇÃO... 5 O QUE É O SHAREPOINT?... 5 FUNCIONALIDADE... 5 INICIAR O SHAREPOINT... 7 AMBIENTE DE TRABALHO E OS SEUS ELEMENTOS... 8 MENUS... 9 FERRAMENTAS DO SHAREPOINT CRIAÇÃO DE UM SITE (WEB) PLANEAMENTO DE UM WEB SITE FECHAR UM WEB SITE ABRIR UM WEB SITE FERRAMENTAS DE GESTÃO DE FICHEIROS GESTÃO DE PÁGINAS WEB CRIAR UMA NOVA PÁGINA WEB MENU FICHEIRO / BOTÃO NOVA PÁGINA VISTA DE LISTA DE PASTAS VISTA DE WEB SITE GUARDAR A PÁGINA WEB ALTERAR O NOME A UMA PÁGINA WEB FECHAR UMA PÁGINA WEB DUPLICAR UMA PÁGINA WEB IMPRIMIR UMA PÁGINA WEB PRÉ-VISUALIZAR UMA PÁGINA WEB ELIMINAR UMA PÁGINA WEB ELIMINAR UM WEB SITE EDIÇÃO E FORMATAÇÃO DE PÁGINAS WEB FORMATAÇÃO DA PÁGINA ( HEAD E BODY) TIPO DE LETRA PARÁGRAFOS LINHA HORIZONTAL LISTAS LIMITES E SOMBREADOS TABELAS CRIAR UMA TABELA PROPRIEDADES DE UMA TABELA TAMANHO LIMITES FUNDO PROPRIEDADES DE UMA CÉLULA ESQUEMA LIMITES FUNDO IMAGENS POSICIONAMENTO DAS IMAGENS (HTML) ALINHAMENTOS ESPECIAIS (HTML) INSERIR FICHEIRO DE VÍDEO (HTML) INSERIR UMA IMAGEM PROPRIEDADES DE UMA IMAGEM

3 GERAL ASPECTO ACTIVAR A BARRA DE FERRAMENTAS IMAGENS ADIÇÃO DE SOM DE FUNDO HIPERLIGAÇÕES EFEITOS BOTÃO INTERACTIVO PAINEL ROLANTE FRAMES PROPRIEDADES DAS FRAMES TABELAS DE ESQUEMA E BARRAS DE HIPERLIGAÇÕES TABELAS DE ESQUEMA BARRAS DE HIPERLIGAÇÕES PUBLICAÇÃO DAS PÁGINAS NUM SERVIDOR WEB PUBLICAR UM WEB SITE GESTÃO E ACTUALIZAÇÃO DO CONTEÚDO DE UM WEB SITE APLICAÇÃO EXISTENTE NO SERVIDOR APLICAÇÃO FTP EXISTENTE NO NOSSO COMPUTADOR ÁREA DE ADMINISTRAÇÃO PROGRAMADA DENTRO DO NOSSO SÍTIO WEB

4 INTRODUÇÃO A Internet é um meio de transmissão de dados, que veio revolucionar os sistemas de informação, despertando o interesse de todos. Com a Internet obtém-se muita informação de forma rápida, eficiente e barata relativamente à quantidade de informação disponível. No entanto, o interesse do utilizador comum em relação à Internet ultrapassou o mero uso de páginas de informação criadas por outros, crescendo o apetite de criar a sua própria página pessoal. Programar em HTML (Hyper Text Markup Language), linguagem que permite construir páginas para a WWW (World Wide Web), mesmo não exigindo grandes conhecimentos de programação, torna-se pouco apetecível ao utilizador comum. No mesmo sentido, o utilizador que programa com facilidade em HTML, herda uma tarefa difícil e trabalhosa, à medida que a complexidade das páginas vai aumentado. Esta situação é característica e torna-se mais complicada nas Intranets existentes no seio de organizações, pela necessidade da sua contínua gestão e actualização. O QUE É O SHAREPOINT? Como conceito básico, o Sharepoint não é mais que uma ferramenta de software de edição e gestão de sites (conjunto de páginas WWW), vocacionado para Internet (a rede mundial) ou para Intranets (redes existentes no interior de organizações, como empresas ou outras instituições). Sendo proveniente da Microsoft, o Sharepoint está integrado na família dos produtos OFFICE, no enquadramento de uma estratégia para aproximar o mundo da Internet e o ambiente Windows. Assim os utilizadores familiarizados com a família dos produtos OFFICE, terão uma maior facilidade em trabalho esta ferramenta, pois funciona segundo uma filosofia semelhante. FUNCIONALIDADE Podemos considerar dois tipos de público alvo do Sharepoint: o utilizador comum com poucos conhecimentos e o profissional da Web. Devido à simplicidade do funcionamento do Sharepoint, este constitui uma boa resposta para o utilizador comum que pretende criar a sua página pessoal, permitindo assim o uso generalizado desta ferramenta. O Sharepoint integra todas as funcionalidades necessárias para desenvolver um site de uma forma simples e intuitiva, utilizando os templates e wizards (modelos para páginas e assistentes). Por outro lado, o Sharepoint constitui igualmente uma boa ferramenta para o utilizador profissional (o público alvo por excelência do Sharepoint), que tem por missão a edição e gestão de um conjunto de páginas com algum volume e complexidade. Terá maior facilidade na manutenção dos sites, suprimindo problemas relacionados com o carácter permanentemente mutante da Web, originando incoerências resultantes do desaparecimento de links de ligação ou alteração do seu endereço, etc. 5

5 E porque a construção do site não termina com a sua publicação, mas deve estar em permanente manutenção ( para manter os seus clientes assíduos), o Sharepoint presta um grande auxilio ao permitir fazer uma gestão da própria estrutura do site: nomeadamente com a sua função de testar a integridade do conjunto de páginas, incluindo os links para o exterior. Esquema gráfico de disposição organizativa das páginas (com várias modalidades), o que torna muito simples a gestão do site. Mecanismos automáticos de teste dos links que o site contém. Excelente editor WWW que permite a colocação de texto, imagens e objectos multimédia de forma transparente, dispensado a necessidade de conhecimento da linguagem HTML. Servidor WWW de teste, que permite o teste das páginas de uma forma 100% real. Funcionalidades que se podem adicionar aos servidores WWW para assim conseguir uma integração perfeita entre o produto de gestão e edição. Um Site é um conjunto de páginas estruturadas hierarquicamente e ligadas entre si. A primeira página (topo da hierarquia) tem o nome INDEX. Aos conjuntos de páginas que constituem o Site, o Sharepoint designa por WEB. Deste modo, utilizador pode criar e gerir Webs (Sites) e/ou criar e editar Páginas Web. 6

6 INICIAR O SHAREPOINT Abra o menu Iniciar/ Programas e clique em Microsoft Office e de seguida em: O Sharepoint fornece um conjunto de ferramentas que administra a estrutura do seu Site, pois possui uma Barra designada Vistas, que se situa em baixo. Desde a edição da página, passando pela organização dos ficheiros e pastas (referente a esse Web site), ou a uma lista de tarefas prioritárias, ou ficheiros órfãos. O Sharepoint actualiza todas as referências a esse ficheiro para manter as hiperligações, encontra ficheiros obsoletos, actualiza e repara hiperligações (links),e publica o site quando pronto. 7

7 AMBIENTE DE TRABALHO E OS SEUS ELEMENTOS Nota: O local para onde as setas apontam inclui toda a área delimitada pela linha a vermelho 01 Barra de título Mostra o nome da aplicação e a localização da página web actual no disco 02 Botões de controlo da janela Mostra os botões Minimizar, Maximizar e Fechar 03 Ajuda 04 Barra de menus Podemos escolher as mais diversas opções para executar as funcionalidades da aplicação 05 Barra de ferramentas Padrão Mostra botões que executam as operações mais frequentes 06 Barra de ferramentas comum Mostra botões da barra de ferramentas Padrão e da barra de ferramentas Formatação 07 Barra de visualização Inclui a lista de pastas e o painel de navegação 08 Barra de seleção de páginas web e do sítio web 09 Área de construção da página web 10 Barra de seleção de modos de visualização da página web Modo Estrutura Mostra a página web em modo de previsão (como se estivesse a ser vista num browser) Modo Dividir Mostra a página web em modo de previsão e em modo de código de HTML Modo Código mostra a página web em modo de código de HTML 11 Barra de estado Área de informações e mensagens 8

8 MENUS Deve utilizar os menus da barra de menus para procurar, funcionalidades extra que não estão disponibilizadas nas barras de ferramentas visíveis. 9

9 As opções dos menus estarão disponíveis / indisponíveis consoante os objectos seleccionados a cada momento. 10

10 FERRAMENTAS DO SHAREPOINT Página Nova - criar nova página Clicando na seta : Página - criar nova página Web - criar novo site Pasta - criar nova pasta Abrir - abrir página Clicando na seta : Página - abrir página Web - abrir site Guardar - guardar página Publicar Web - publicar site Lista de Pastas - ver ou não Lista de Pastas Imprimir - imprimir página Pré- Visualizar no Browser - visualizar página no navegador Ortografia Cortar Copiar Colar Pincel de formatação Copiar formatações Anular - voltar para última acção Repetir - refazer próxima acção Inserir Componente Inserir Tabela Inserir imagem a partir de um Ficheiro Hiperligação - Criar hiperligação Actualizar Parar Mostrar marcas de formatação - exibir todas as marcas Ajuda do Microsoft Office Sharepoint Designer Sharepoint clicando na seta : Mais botões - adicionar ou remover ícones 11

11 Estilos de Formatação Fonte - tipo de letra Tamanho Fonte - Tamanho do tipo de latra Negrito Itálico Sublinhado Alinhar à esquerda Centrar Alinhar à direita Numeração - inserir lista numerada Marcas - inserir lista com marcas Diminuir Avanço Aumentar Avanço Realçar Texto - inserir cor de fundo atrás do texto Cor do tipo de letra (Automático) Vistas - MODOS Página - exibe as Páginas do Site. Sempre que abrir uma página estará neste modo de visualização. Lista de Pastas - exibir ou não Lista de Pastas do Site. Pasta - exibe as Pastas e Ficheiros do Site. Permite copiar, cortar, eliminar, mudar o nome e criar pastas e ficheiros html. Relatórios exibe relatórios sobre o Site. Navegação - exibe Organograma do Site. Hiperligações - exibe lista de links da cada página seleccionada. Web Site Remoto permite gerir o web site remoto. 12

12 CRIAÇÃO DE UM SITE (WEB) PLANEAMENTO DE UM WEB SITE Antes de se criar a página ou sítio Web tem que se pensar muito bem no que fazer. O planeamento da página ou do sítio Web é a primeira tarefa a executar antes de utilizar o Microsoft Sharepoint Designer. As fases da criação de um sítio web são as seguintes: Fase 1 Definir os objectivos do sítio web Trata-se de identificar os objectivos do sítio web Para quê? Qual o propósito ou finalidade do sítio web? Os sítios web têm objectivos diferentes. Ex: Um sítio web pode ter um objectivo educativo ou comercial O Objectivo de um site, quer seja pessoal ou profissional, determina a sua estrutura e o seu aspecto visual Fase 2 Caracterizar o público-alvo Para quem? Para que tipo de utilizadores é que eu vou criar o sítio web? Para qualquer pessoas em geral, ou para um determinado tipo de utilizadores? 13

13 Fase 3 Identificar os conteúdos a publicar O quê? Que informação deve conter? Que conteúdos é que eu pretendo incluir ou publicar no sítio web? Trabalhos pessoais, imagens, conteúdos multimédia, ligações a outros documentos ou sites, etc. Fase 4 Identificar os recursos a utilizar Como? Como será produzido? Que recursos ou meios é que são necessários para a construção do sítio web? o A nível de software De criação de páginas web De tratamento de imagens De tratamento conteúdos multimédia (animação, som, vídeo) o Que tecnologia será utilizada na sua construção? Páginas estáticas Páginas dinâmicas (Ex: linguagem PHP, Flash) o o Onde será colocado? Na Internet Na intranet Localmente no nosso computador Qual o espaço máximo que poderá ocupar? 1 Gb? Fase 5 Estruturação geral do web site Trata-se de pensar o sítio em termos gerais ou de estrutura (não ainda em relação aos detalhes) Fazer um esquema das páginas que vão integrar o site Organizar o sítio (site) por secções Definir as relações ou ligações entre as páginas e/ou secções Arquitectura do sítio web o Forma como será apresentado o Tipo de navegação entre as páginas Como será actualizado? o FTP o Área de administração Fase 6 Construir o sítio web Construir as páginas de acordo com o que foi estipulado nas fases anteriores Formatação e melhoramento das páginas web o Escolha de cores, fundos e formas o Tipos de letras o Formatação de fotografias e ilustrações 14

14 Fase 7 Publicar o sítio web Consiste em transferir as páginas web que o constituem o sítio web para um servidor o Na Internet (Web) o Numa intranet local o Num computador local Fase 8 Gerir o sítio web Consiste em efectuar as alterações que se revelarem necessárias nas páginas que constituiem o sítio web Actualizar conteúdos, hiperligações, etc. Para melhor definir o que pretende para o seu site elabore, em papel, a estrutura do seu site (web). Ao longo deste manual iremos utilizar o CEFOSAP como exemplo: O CEFOSAP - Centro de Formação Sindical e Aperfeiçoamento Profissional. Existem cursos de Línguas (Inglês, Espanhol, Alemão...), Informática (Windows, Office, Internet, Criação de Páginas...) e Outros (Higiene e Segurança, Direito, Gestão e Contabilidade). As inscrições poderão ser on-line (através de formulário). A estrutura seria a seguinte: 15

15 Para criar um Web site, execute os seguintes passos: 1. Abra o menu Ficheiro/Novo e clique em Web. Ou, na barra de ferramentas Padrão, clique no botão Novo e seleccione Web. 2. Escolha um modelo (tema) para aplicar às suas páginas web. No exemplo optou-se por um Web site em branco. 3. Escreva o local onde pretende criar o seu Web site. O Sharepoint irá sugerir:c:\os meus Documentos\My Webs\ Clique no botão OK. FECHAR UM WEB SITE 1. Abra o menu Ficheiro. 2. Clique um Fechar Site. ABRIR UM WEB SITE 1. Abra o menu Ficheiro/Abrir web. 2. Abra a pasta que contém o seu Web site. O Sharepoint mostra o último web site aberto. 3. Clique em Abrir. Ou Ficheiro/Webs Recentes 16

16 FERRAMENTAS DE GESTÃO DE FICHEIROS Escolher Web Site \ 1 Nota: O local para onde as setas apontam inclui toda a área delimitada pela linha a vermelho 1 Barra de visualização do sítio web Vista de Pastas o Mostra as pastas com os ficheiros do nosso sítio web o Pode ser utilizada para abrir, copiar, renomear e eliminar ficheiros Vista de Web site remoto o Sincroniza ficheiros entre o teu sítio web e um sítio web remoto Vista de Relatórios o Mostra toda a informação relativa Ficheiros (nome, título, na pasta, tamanho, tipo, data modificação) Conteúdo partilhado (Modelos web dinâmicos, páginas principais, páginas personalizadas, hiperligações das folhas de estilo) Problemas (páginas não ligadas, páginas lentas, hiperligações, erros de componentes) Fluxo de trabalho (Estado da revisão, atribuído a, categorias, estado da publicação) Utilização (estatísticas do nosso sítio web que só funcionam num servidor que suporte analise de utilização) Vista de Navegação o Permite construir ou ter uma visão em árvore da estrutura hierárquica do sítio web Vista de Hiperligações o Mostra todas as hiperligações na páginas web 17

17 GESTÃO DE PÁGINAS WEB CRIAR UMA NOVA PÁGINA WEB Existem 3 modos de se criar uma página web, utilizando: Menu Ficheiro / Botão Nova página Vista de Lista de Pastas Vista de Web Site MENU FICHEIRO / BOTÃO NOVA PÁGINA Clique em Pastas: 1. Abra o menu Ficheiro/Novo. 2. Clique em Página ou simplesmente clique no botão Nova Página que se encontra na barra de ferramentas de Padrão. VISTA DE LISTA DE PASTAS 18

18 VISTA DE WEB SITE Clique em Web Site: GUARDAR A PÁGINA WEB Abra o menu Ficheiro e clique em Guardar ou simplesmente use o botão. Todos os web sites tem uma página web principal conhecida com página web principal (home page). Pode ter os nomes de: o Default.htm o Index.htm 19

19 Pode definir um título para a página, utilizando o botão Alterar título. Ao fazer alterações nas suas páginas web deverá ter o cuidado de ir guardando as mesmas. 20

20 ALTERAR O NOME A UMA PÁGINA WEB Para alterar o nome de uma página web deve: FECHAR UMA PÁGINA WEB Para fechar uma página web deve: 21

21 DUPLICAR UMA PÁGINA WEB Para duplicar uma página web deve: De seguida deve renomear o ficheiro duplicado. 22

22 IMPRIMIR UMA PÁGINA WEB Para imprimir uma página web deve: E de seguida: Irá aparecer a janela de diálogo da impressora pré-definida no seu computador, onde poderá decidir como que imprimir a página anteriormente seleccionada. 23

23 PRÉ-VISUALIZAR UMA PÁGINA WEB Para pré-visualizar uma página web, no browser deve: ELIMINAR UMA PÁGINA WEB Para eliminar uma página web deve: 24

24 ELIMINAR UM WEB SITE Para eliminar um web site deve: 25

25 EDIÇÃO E FORMATAÇÃO DE PÁGINAS WEB FORMATAÇÃO DA PÁGINA ( HEAD E BODY) Abra o menu Formatar/ Fundo ou tecla direita do rato e Propriedades da página. Título da página (equivalente ao elemento Title) Imagem de fundo e marca de água para personalizar o fundo da sua página Cores de fundo e cor do texto da sua página Cores das hiperligações da sua página 26

26 É importante definir o tipo de caracteres que iremos utilizar na(s) página(s). Estas são as opções para caracteres portugueses. TIPO DE LETRA Esta formatação é bastante semelhante às outras aplicações. Tipo de letra (tenha em atenção o tipo de letra que está a utilizar pois o visitante do seu site poderá não 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, Itálico ou Negrito e Itálico). Tamanho do tipo de letra (terá apenas 7 tamanhos diferentes); Normal equivale ao tamanho 3 (12 pto.). Efeitos. Espaçamento entre caracteres. Espaçamento (Expandido ou comprimido) Posição (Superior ou Inferior). 27

27 PARÁGRAFOS Abra o menu Formatar e clique em Parágrafos. Avanços Alinhamentos Espaçamentos Ou utilize os botões da barra de ferramentas de formatação: 28

28 LINHA HORIZONTAL 1. Posicione o cursor no local onde pretende inserir a linha. 2. Abra o menu Inserir/Html/Linha Horizontal. O Sharepoint 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 poderão ser numeradas (OL) ou não numeradas (UL). Poderá utilizar os botões numeração ou marcas. Para efectuar avanços utilize os botões. Abra o menu Formatar e clique em Marcas e numeração. 29

29 Para utilizar uma imagem como marca efectue os seguintes passos: 1. Abra o menu Formatar/Marcas e numeração. 2. Clique no separador Marcas de Imagens. 3. Seleccione Especificar imagem e clique no botão Procurar. 4. Escolha a imagem, seleccione o ficheiro e clique em OK. 30

30 LIMITES E SOMBREADOS Seleccione os parágrafos que pretende formatar. Abra o menu Formatar/ Limites e Sombreados: Tipo de limite Cor do limite Posição do Limite Largura do limite Espaço do limite ao texto Exemplo de formatação de Limites e Sombreados: 31

31 TABELAS Os comandos Html da tabela são <table>...</table> : border - tamanho do limite cellpadding - regula o espaço do conteúdo e as limites da célula cellspacing - regula o espaço entre as células bgcolor - cor do fundo da tabela ou da célula background - imagem como fundo da tabela ou da célula rows linhas collumns colunas cells células th - célula título tr - nova linha td - nova célula align - especifica o alinhamento da tabela ou células : left ( esquerda ), center ( centro ) e right ( direita ) valign - especifica o alinhamento das células na vertical : top quer dizer que o conteúdo das células de uma mesma linha fica alinhado na parte superior da célula; bottom alinha em relação à parte inferior da célula e middle alinha em relação ao centro da célula colspan - define quantas colunas irá ocupar uma célula em uma tabela irregular rowspan - define quantas linhas irá ocupar uma célula em uma tabela irregular CRIAR UMA TABELA Clique na ferramenta e arraste quantas linhas e colunas. Ou Tabela > Inserir Tabela 32

32 PROPRIEDADES DE UMA TABELA Clique sobre a tabela com o botão direito do rato > Table Properties TAMANHO Alinhamento - alinhamento da tabela Flutuação - alinhamento do texto na tabela Área das células - regula o espaço do limite e célula Espaçamento entre células - regula o espaço entre as células Especificar a Largura regula a largura das células Especificar a Altura regula a altura das células LIMITES Tamanho - Tamanho do limite Cor - Cor do limite FUNDO Cor - Cor de Plano de Fundo da tabela Utilizar imagem de fundo - Usar Figura como Plano de Fundo da tabela 33

33 Barra de ferramentas Imagens Clique Ver > Barras de ferramentas > Tabelas Desenhar Tabela Inserir Linhas Inserir Colunas Excluir Células Unir Células Dividir Células Alinhar à Parte Superior - alinhar texto ou imagem na parte do superior da tabela ou célula Centralizar Verticalmente - alinhar texto ou imagem no meio da tabela ou célula Alinhar à Parte Inferior - alinhar texto ou imagem na parte do inferior da tabela ou célula Distribuir Linhas Igualmente Distribuir Colunas Igualmente Auto-Ajustar Cor de Preenchimento - pintar tabela ou célula PROPRIEDADES DE UMA CÉLULA Clique sobre a célula que queira modificar com o botão direito do rato e escolha Propriedades da célula 34

34 ESQUEMA Alinhamento Horizontal - alinhamento da célula na horizontal Alinhamento Vertical - alinhamento da célula na vertical Linhas abrangidas - define quantas linhas irá ocupar uma célula numa tabela irregular Colunas abrangidas - define quantas colunas irá ocupar uma célula numa tabela irregular Célula do cabeçalho - especifica a Célula Título Sem moldagem - Sem Quebra Automática Especificar a Largura regula a largura da célula Especificar a Altura regula a altura da célula LIMITES Tamanho Espessura do limite Cor - Cor do limite FUNDO Cor - Cor de fundo da célula Utilizar imagem de fundo - Usar imagem como plano de fundo da célula Exemplo de utilização de tabelas: No Sharepoint No Browser 35

35 IMAGENS Quanto maior for a imagem, tanto maior será o ficheiro e mais tempo levará para que ela apareça na sua página. Use imagens em gif quando o número de cores não for grande ou se precisar de transparência ou animação. Use imagens em jpg quando o número de cores for grande e as variações de cor forem suaves, como em fotos, mapas, pinturas, etc.. Imagens em gif não há perda de qualidade para imagens planas e há economia de espaço no disco, enquanto que jpg há compressão de imagens. Todas as duas extensões tem Interlaced, que faz com que a imagem se vá carregando aos poucos e se vá definindo. POSICIONAMENTO DAS IMAGENS (HTML) align="right" align="left" align="top" align="middle" align="bottom" a imagem fica alinhada a direita e o texto flui ao redor da imagem pela esquerda, isto é, várias linhas do texto podem aparecer ao longo da altura da imagem. a imagem fica alinhada à esquerda e o texto flui ao redor da imagem pela direita, isto é, várias linhas de texto podem aparecer ao longo da altura da imagem. Aos usar os alinhamentos left e right, você poderá também adicionar a distância horizontal entre a figura e o texto ao redor (hspace) e a distância vertical entre a figura e as linhas anterior e posterior do texto ( vspace). alinha ao topo o texto. Se a altura da imagem for maior que a altura, aparece um espaço em branco abaixo da linha para compensar a diferença. alinha a linha-base do texto, a linha imaginária que passa por baixo da maioria dos caracteres. Se a imagem for mais alta que o texto, um espaço extra será distribuído acima e abaixo do texto para compensar. alinha a parte inferior da imagem com a linha-base do texto, colocando um espaço extra acima caso a imagem seja maior que o texto. ALINHAMENTOS ESPECIAIS (HTML) align="texttop" align="absmiddle" o topo da imagem fica alinhado com o topo do texto mais alto da linha. Em geral isso é o mesmo que especificar o Top, mas nem sempre. Da mesma forma, se a altura da imagem for maior que a altura da linha, aparece um espaço para compensar alinha o ponto médio da altura da imagem com o ponto médio da altura da linha, também colocando espaços acima e abaixo do texto caso a imagem seja mais alta 36

36 align="baseline" align="absbottom" o mesmo que align="bottom" alinha a parte da imagem com a parte inferior da linha atual, colocando um espaço extra acima do texto a imagem seja mais alta que ele INSERIR FICHEIRO DE VÍDEO (HTML) dynsrc="arquivo_video.gif" loop =" n" ou "infinitive" start = "fileopen" ou start="mouseover" Indica o arquivo de vídeo a ser carregado. img src="imagem.gif" - deve ser colocado para que os browsers que não aceitam o comando dynsrc possam mostrar uma imagem controls - determina botões para controlar a execução do arquivo de vídeo. Determina quantas vezes o arquivo de vídeo será executado. n é o número de vezes que o arquivo será executado infinitive executa o arquivo indefinidamente. Determina quando o arquivo de vídeo começará a ser executado. INSERIR UMA IMAGEM 1. Clique no botão Inserir imagem a partir de um ficheiro. 2. Abrirá uma caixa de Diálogo : Imagem 3. Procure a imagem no seu computador, seleccione-a e clique Inserir. 4. Clique no botão. 37

37 5. Abrirá uma caixa de diálogo : Guardar ficheiros incorporados. 6. Clique no botão Mudar pasta (pois todas as imagens devem ser guardadas dentro de uma pasta de cada página, para melhor organizar o seu Site). 7. Clique OK e o Sharepoint faz uma cópia automaticamente para seu Site. PROPRIEDADES DE UMA IMAGEM Clique sobre a imagem com o botão direito do rato e seleccione Propriedades da imagem. GERAL Imagem - especifica o nome do arquivo Tipo - especifica a extensão da imagem : gif, jpg ou png Texto Alternativo - Representações Alternativas caso não seja possível apresentar a imagem Hiperligação Localização - especifica o link Frame de destino- especifica o alvo do frame 38

38 ASPECTO Estilo de Moldagem- moldagem do texto em relação a imagem Alinhamento- alinhamento do texto em relação a imagem Espessura do limite - Espessura do limite em volta da imagem Margem Horizontal - espaço na horizontal entre a imagem e o texto ( hspace ) Margem Vertical - espaço na vertical entre a imagem e o texto ( vspace ) Especificar tamanho Permite especificar o tamanho da imagem Largura Permite modificar a largura da imagem Altura Permite modificar a altura da imagem Manter relação altura/largura- manter a proporção entre a altura e a largura ACTIVAR A BARRA DE FERRAMENTAS IMAGENS 39

39 Barra de ferramentas Imagens - Legenda: 1-Inserir imagem a partir de um ficheiro 13-Fechar 2-Trazer para diante 14-Miniaturizar automaticamente 3-Rodar para a esquerda 90º 15-Enviar atrás 4-Inverter na horizontal 16-Rodar para a direita 90º 5-Mais contraste 17-Inverter na vertical 6-Mais luminosidade 18-Menos contraste 7-Recortar 19-Menos luminosidade 8-Cor 20-Definir cor transparente 9-Reamostragem 21-Bisel 10-Ponto activo rectângular 22-Selecionar 11-Ponto activo poligonal 23-Ponto activo circular 12-Opções das barras de ferramentas 24-Realçar pontos activos 25-Restaurar 40

40 ADIÇÃO DE SOM DE FUNDO Pode adicionar-se um som de fundo a uma página web, esse som pode ser do tipo: Ficheiros wave (extensão.wav) Ficheiros sequenciador midi (extensão.midi) Ficheiros realaudio (extensões.ra.ram) Ficheiros de som AIFF (Audio Interchange File Format) (extensões.aif.aifc. aiff) Ficheiros de som AU (extensões.au.snd) Ficheiros de som mp3 (extensão.mp3) Não aparece na lista de ficheiros de som do Sharepoint Designer mas pode-se adicionar como som de fundo 41

41 HIPERLIGAÇÕES As hiperligações são criadas em Html através do elemento <a href=..>...</a> Links para uma página <a href="cursos.htm">ir para página de cursos</a> Link para um Site <a href=" Link para <a Link para uma secção dentro da própria página <a href="#clientes">clientes</a>... <a name="clientes"></a> Determina para onde irá o link <a name="..."></a> Determina o link propriamente dito <a href="#..> Link </a> Outros tipos de links remotos ftp ficheiro num servidor anónimo <a href="ftp://ftp.servidor.pt">link para transferência de ficheiro</a> file - um ficheiro no seu sistema local, ou num servidor FTP gopher - um ficheiro no servidor Gopher (servidores de ficheiros e informações) <a href="gopher://servidor.pt">link remoto para um serviço gopher</a> wais - um ficheiro no servidor WAIS news - um newsgroup da Usenet ; acesso a grupo de notícias telnet - uma ligação com um servidor do tipo Telnelt <a href ="telnet://servidor.pt ">link remoto para um serviço telnet</a> Observação: quando usamos o Sharepoint e digitamos numa página um endereço de um site qualquer e damos espaço, ele criará automaticamente a hiperligação, o mesmo acontece quando digitamos um e damos espaço ele criará automaticamente a hiperligação mailto. 42

42 Para inserir uma Hiperligação: 1. Digite o texto ou insira a imagem que irá servir de hiperligação. 2. Seleccione o texto ou a imagem. 3. Abra o menu Inserir e clique em Hiperligação; Ou utilize o botão Hiperligação que se encontra na barra de ferramentas; Ou ainda CTRL + K. 4. Indique o tipo de hiperligação e clique no botão OK. Se quisemos uma hiperligação para um sítio web diferente tínhamos que escrever um endereço web Ex: Para que a hiperligação abra uma nova janela, clique em Frame de destino e seleccione Nova janela. 43

43 Marcador - Link para uma secção dentro da própria página 44

44 45

45 EFEITOS BOTÃO INTERACTIVO É um botão que pode mudar a sua cor quando o rato passa por cima Para melhorar o aspecto das suas hiperligações, abra o menu Inserir/Componente/ Botão interactivo. 46

46 Para alterar, efectue um duplo clique sobre o botão. Deve guardar antes de pré-visualizar. Este procedimento envolve a criação de ficheiros criados automaticamente que devem estar no mesmo local da página HTML onde foram inseridos. PAINEL ROLANTE É um painel cujo texto está sempre a andar numa direcção e que quando desaparece num dos lados aparece depois no outro. Para melhorar o aspecto das suas hiperligações, abra o menu Inserir/Componente/ Botão interactivo. 47

47 Deve modificar as várias propriedades de modo a obter o painel rolante desejado. 48

48 FRAMES A utilização de frames é uma técnica muito interessante para organizar e estruturar o conteúdo de uma página HTML, na medida em que facilita a criação de documentos compostos que o utilizador vê em janelas diferentes dentro da janela principal do browser. Apesar de terem sido introduzidas por iniciativa da Netscape, por altura do lançamento da versão 2.0 do Netscape Navigator, actualmente, todos os principais browsers suportam frames. Isto porque as frames constituem, de facto, uma poderosa ferramenta com várias vantagens para os autores de páginas HTML, tais como: A possibilidade de atribuir a cada frame um URL independente, permitindo que cada uma tenha um conteúdo independente das outras. Atribuindo nomes únicos a cada frame, é possível que cada link do documento cause a modificação de uma frame específica. A facilidade de criar frames estáticas compostas pelos elementos que se pretende que sejam sempre visíveis. A possibilidade de desenvolver layouts mais sofisticados e funcionais. Para definir as frames de um documento utilizam-se as tags FRAMESET 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 conteúdo da frame correspondente. A título de exemplo, considere-se o seguinte código, que divide um documento em duas frames horizontais iguais, com conteúdos 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 idêntico a um documento HTML normal, exceptuando que a tag BODY é, neste caso, substituida por um FRAMESET, que define as várias 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 frame pode, por sua vez, ser dividida também 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> 49

49 FRAMESET Define a forma de divisão do documento em frames. ROWS="valores" Este atributo recebe uma lista de valores separados por vírgulas. Esses valores definem a dimensão de cada frame vertical (linha) em pixels, percentagens da dimensão total do documento ou valores relativos (com o símbolo *). O número total de linhas será igual ao número de valores definidos. COLS="valores" Este atributo segue uma sintaxe igual ao anterior para definir a dimensão de frames horizontais (colunas). FRAME Define as características 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á fornecer o conteúdo da frame. SCROLLING="YES NO AUTO" Define se a frame deverá, ou não, ter barras de deslocamento ("scroll-bars"). O valor AUTO indica ao browser que este é que deverá tomar a decisão. NORESIZE Este atributo indica que o utilizador não deve ter permissão para alterar manualmente a dimensão da frame. 1. Seleccione a Vista de pastas. 2. Abra o menu Ficheiro/Novo/Página. 3. Clique na opção Páginas de Frames. 4. Seleccione o tipo de Frame que pretende utilizar e clique no botão OK. 5. Se a página existir, clique em Definir Página Inicial e seleccione o ficheiro que irá constituir a Frame. 6. Se não existir a página, clique em Nova Página. 50

50 Se optou por novas páginas, quando guardar, o Sharepoint irá pedir o nome para três ficheiros. 51

51 PROPRIEDADES DAS FRAMES Clique, com a tecla direita do rato, sobre a frame que pretende tratar e seleccione Propriedades da Frame. Permite ao utilizador redimensionar as frames Para retirar o limite que separa os Frames: 1. Clique em Página das frames. 2. Desactive a opção Mostrar Limites. Para mudar a página HTML de uma Frame, execute os seguintes passos: 1. Seleccione a frame a alterar. 2. Clique no menu Formatar/Molduras, ou com tecla direita do rato sobre a frame a alterar e clique em Propriedades da Frame. 3. Em Página Inicial, clique em Procurar. 4. Seleccione a página e clique em OK. 52

52 TABELAS DE ESQUEMA E BARRAS DE HIPERLIGAÇÕES TABELAS DE ESQUEMA Poderá editar e formatar individualmente cada página, mas iremos utilizar Tabelas de Esquema. Estas tabelas permitem definir zonas da página que serão partilhadas por todas as páginas (funciona como o cabeçalho e rodapé de um documento do Word). Para aplicar Tabelas de Esquema 1. Abra o menu Tabelas/Tabelas de Esquema. 2. Seleccione as zonas que pretende tornar comuns a todas as páginas. 3. Clique mas várias zonas e escolha no menu formatar, modelo de web dinâmico, gerir regiões editáveis, para nomear todas as zonas que desejar. Esta formatação poderá ser retirada de uma página em particular. BARRAS DE HIPERLIGAÇÕES O Sharepoint possui outra característica bastante importante: São as Barras de Hiperligações. Com elas poderemos, facilmente, ligar as páginas do nosso site, uma vez que estas ligações se baseiam na estrutura construída no modo Navegação. 53

53 Abra uma página (qualquer) do seu site. Para inserir uma Barra de hiperligações: 1. Seleccione o local onde deseja colocar a barra. 2. Clique no menu inserir/componente web e escolha no menu da esquerda a opção barras de hiperligações. 3. Escolha o estilo da barra. 4. Escolha a orientação (horizontal/vertical) da barra. 5. Clique no botão Concluir. 6. Seleccione o tipo de ligações que deseja. 7. Clique no botão OK. 54

54 Barras de Hiperligações Tabelas de Esquema Para eliminar as barras de hiperligações, clique sobre a barra de hiperligações que pretende eliminar e pressione a tecla DELETE. Para alterar a Barra de hiperligações: 8. Efectue um duplo clique sobre a barra de hiperligações que pretende alterar. 9. Seleccione o tipo de ligação que deseja. 10. Escolha o estilo da barra. 11. Escolha a orientação (horizontal/vertical) da barra. 12..Clique no botão OK. No final da todas as páginas optou-se por colocar links para a Home Page, para a página acima e para seguinte ou anterior. Barras de Hiperligações 55

55 1. Posicione o cursor dentro da zona inferior da tabela de esquema. 2. Clique no menu inserir/componente web e escolha no menu da esquerda a opção barras de hiperligações. 3. Escolha o estilo da barra. 4. Escolha a orientação (horizontal/vertical) da barra. 5. Clique no botão Concluir. 6. Seleccione o tipo de ligações Anterior e seguinte e Home page. 7. Clique no botão OK. Para alterar o texto Home page, Para cima, Seguinte e Anterior da barra de Hiperligações: Abra o menu Site/Definições do Site. Clique no separador Navegação. Pode utilizar as Tabelas de esquema para texto, imagens ou hiperligações. 56

56 PUBLICAÇÃO DAS PÁGINAS NUM SERVIDOR WEB Publicar páginas num servidor web significa: Copiar as páginas web do nosso sítio web, alojado no nosso computador, para outro computador. Também podemos publicar o sítio web no nosso computador. Um servidor web é um computador que tem alojado sitios web (sites) e que normalmente pode ser acedido pela internet. Quando escrevemos o nome de sites no Internet Explorer, como por exemplo, estamos a aceder ás páginas web que estão guardadas num servidor web. O Sharepoint Designer tem a capacidade de publicar páginas: Num servidor que suporta as extensões de Servidor do Frontpage ou SharePoint Services. Num servidor que suporta a WebDAV. Num servidor que suporta o protocolo de transferência de ficheiros (FTP). Numa pasta no computador ou rede como web site remoto (opção que vamos utilizar). Extensões de servidor do Frontpage ou Sharepoint Services FTP Estas extensões são pequenas funcionalidades (scripts de servidor) acrescentadas às páginas web básicas. Ex: contadores, formulários que realizam pequenas tarefas automaticamente ou ajudas para a publicação da web. Significa File Transfer Protocol (Protocolo de Transferência de Ficheiros), é uma forma bastante rápida e versátil de transferir ficheiros, sendo uma das mais usadas na internet. WebDAV É um acrónimo de Web-based Distributed Authoring and Versioning, ou Criação e Distribuição de Conteúdo pela Web. É uma extensão do protocolo HTTP para transferência de ficheiros que suporta bloqueio de recursos. Ex: Quando uma pessoa está a editar um ficheiro, ele fica bloqueado, impedindo que outras pessoas façam alterações ao mesmo tempo. 57

57 PUBLICAR UM WEB SITE Para publicar o seu site deve: 58