Instituto Superior de Engenharia do Porto Licenciatura em Engenharia Informática Computadores e Sistemas. Dreamweaver MX. Projecto Relatório Final

Transcrição

1 Instituto Superior de Engenharia do Porto Licenciatura em Engenharia Informática Computadores e Sistemas Dreamweaver MX Projecto Relatório Final Paulo Jorge Oliveira Taveira i Setembro 2003

2 Agradecimentos Após todo o trabalho desenvolvido neste projecto desde meados de Fevereiro, não poderia deixar passar em branco a oportunidade de agradecer a todos aqueles que foram uma verdadeira ajuda ao longo do tempo. Em primeiro lugar quero agradecer à minha namorada, Diana Ribeiro, por todo o apoio, incentivando-me e ajudando a ultrapassar as dificuldades. Foi uma ajuda preciosa. Agradeço também a Miriam Rodrigues pela colaboração, nomeadamente pela troca de ideias relativas aos nossos projectos. Quero agradecer também à minha família e aos meus amigos Nuno Rocha, Angelina Moreira, Carlos Sampaio, Sérgio Nogueira, Nuno Dias e Paulo Almeida, Cláudia Moreira, Cláudia Gouveia, Ricardo Ledo e Lúcia Flores pela paciência e disponibilidade manifestada nos períodos mais complicados deste projecto. A terminar, devo agradecer ao Eng. Carlos Vaz de Carvalho, o meu orientador, pela disponibilidade, pelos conselhos e pela ajuda que me deu.

3 Introdução

4 1 Desde a época do Renascimento que o conhecimento tem um lugar importante na sociedade, reflectindo-se na indústria, comércio, no diaa-dia. Os tempos evoluíram de tal forma que no mundo actual, o conhecimento pode fazer a diferença. O presente dá indícios de que no futuro será importante a rapidez e eficácia da aquisição desse mesmo conhecimento. O e-learning parece ser o meio de concretização dessa previsão: num estudo recente, 66% dos inquiridos afirmaram usar, ou planear usar, um portal de aprendizagem num futuro próximo. De momento o mercado do e-learning é já bastante lucrativo para os pioneiros. Está previsto que o mercado de treino on-line cresça ao ponto de atingir os 11,5 biliões de dólares este ano (2003). Será então este o tema do relatório apresentado, onde será abordado o e-learning e apresentado um curso on-line de Dreamweaver MX. O relatório será dividido em seis capítulos com os seguintes conteúdos: 1. Introdução Uma breve introdução ao conteúdo deste relatório. 2. Abordagem ao Projecto O segundo capítulo contém uma introdução ao projecto, detalhando os seus objectivos. 3. e-learning Neste capítulo será feita uma introdução ao e-learning com destaque para o seu conceito, a sua importância, as suas aplicações, uma relação entre vantagens e desvantagens, bem como os seus factores de sucesso, terminando com uma breve descrição da situação actual em Portugal. 4. Desenvolvimento de um curso de e-learning O quarto capítulo aborda assuntos relacionados com o desenvolvimento de cursos de e-learning, nomeadamente os gestores de conteúdo, os formatos, os standards e as plataformas. 2

5 5. Curso on-line de Dreamweaver MX Para o quinto capítulo estão reservados os comentários referentes ao curso de e-learning. Será iniciado com uma introdução, passando de seguida para os tópicos abordados e os textos apresentados no curso. Este capítulo termina com a minha explicação das escolhas e decisões feitas durante a elaboração deste projecto, estabelecendo uma relação óbvia entre o curso e o e-learning. 6. Conclusão Este relatório termina no sexto capítulo com um balanço do projecto. 3

6 Abordagem ao Projecto 4

7 Introdução Em Fevereiro de 2003, data em que escolhi o tema do meu projecto, decidi basear-me em alguns dos temas propostos da área de e- Learning, pretendendo algo que fosse da minha área de conhecimento. Surgiu então a ideia de elaborar um curso de e-learning sobre o Dreamweaver MX. O Dreamweaver MX é uma ferramenta que uso diariamente, a qual aprendi sozinho sem consulta de livros e da Internet. Foi então uma aprendizagem intuitiva, baseada na descoberta. Foram estas as razões que tornaram aliciante a ideia de um curso de Dreamweaver pois, além de ser uma área do meu interesse e conhecimento, poderia ainda aprofundar mais esses conhecimentos e transmiti-los a todos aqueles interessados em iniciar-se nesta área Objectivos O objectivo do meu projecto é aprofundar o conhecimento sobre o e- Learning e aplicar esses novos conhecimentos na criação de um curso on-line de Dreamweaver MX. O curso teria de ser projectado de forma a obedecer a algumas das regras do e-learning. O curso tem como objectivo o ensino do Dreamweaver destinado a pessoas inexperientes em web-design e, consequentemente, pessoas que nunca tenham tido conhecimento sobre este software. O objectivo deste curso consequentemente ao ensino além do Dreamweaver, sendo necessário fazer a introdução aos conceitos de HTML, Layers, JavaScript, etc., completando portanto um conjunto de temas relacionados com o web-design e proporcionando uma aprendizagem o mais completa possível. 5

8 e-learning 6

9 História do e-learning O ensino aberto à distância (EAD) é uma forma de ensino com longa tradição nos Estados Unidos e Europa, desde o século XIX. O ensino por correspondência foi, até aos anos 50, a forma mais comum de EAD. A partir daí, a evolução tecnológica introduziu o uso da difusão por rádio e TV, cassetes áudio e vídeo e transmissão via satélite. O maior impulso ao EAD verificou-se nos anos 90, em que as redes de computador surgiram como a nova tecnologia de ponta do ensino à distância. A proliferação desta tecnologia permitiu uma interacção mais ágil e flexível, possibilitando a distribuição dos conteúdos em diversos formatos. Hoje em dia, a Internet tem o maior papel no ensino à distância devido ao facto de estar presente na maioria das universidades, empresas e residências. Temos então a actual forma do e-learning. Correspondência Rádio, TV, K7, Satélite Redes de computador / Internet Séc. XIX - anos 50 anos anos Definição de e-learning De toda a evolução histórica, a aprendizagem é a menos afectada pelo desenvolvimento tecnológico nos últimos 50 anos. Os métodos de aprendizagem de hoje, são muito idênticos aos de há 50 anos atrás. A tecnologia está agora a começar a afectar esta área. A capacidade de adaptação e aprendizagem nunca foi tão requerida como o é na economia do século XXI. Essa necessidade pode ser satisfeita pelas tecnologias on-line de uma forma rápida e eficaz. O e-learning não se resume à simples disponibilidade de cursos on-line. Trata-se de um novo conjunto de recursos, interactividade, apoio à 7

10 aprendizagem e estruturação de actividades de aprendizagem. Esta é a definição de Elliot Masie, guru de e-learning nos EUA. A elearnity, uma empresa criada em 1996, coloca-se na frente do pioneirismo neste mercado. A sua definição de e-learning: O e-learning é uma combinação de serviços e tecnologia, ao dispor da aprendizagem, de forma a fornecer uma aprendizagem de alto valor, em qualquer lugar, em qualquer altura. Talvez a junção destas duas definições seja mais apropriada para definir o e-learning. No entanto, talvez esta ainda não seja a mais correcta. Existe quem sobreponha ao em qualquer lugar, em qualquer altura uma restrição à oferta. Estes consideram importante a eficiência e eficácia da distribuição dos conteúdos, distribuindo o conteúdo certo ás pessoas certas. Isto porque se deve tomar em consideração as capacidades e conhecimentos existentes do aluno, sendo estes variáveis de pessoa para pessoa. Estamos então em posição de definir o e-learning como: Um conjunto de recursos composto por interactividade, apoio à aprendizagem e estruturação de actividades de aprendizagem, disponíveis para a pessoa certa, no local certo e na altura certa Importância do e-learning Os desafios Países e organizações necessitam de se adaptar às demandas que a economia da Internet está a gerar, para estarem sempre à frente de um mercado cada vez mais competitivo. Os países precisam de educar os seus cidadãos. As empresas necessitam de formar os seus colaboradores. Os Institutos Educacionais necessitam de oferecer programas inovadores. 8

11 As oportunidades Na era da informação, as oportunidades de aprendizagem aumentam o tempo que se pode utilizar para aprender - da infância à vida adulta. As nossas habilidades e conhecimentos precisam de ser constantemente actualizados para nos sentirmos com capacidade de enfrentar as novas tecnologias e desafios. O e-learning permite: Saber mais e aprender mais rapidamente com menores custos. Aproveitar o poder da informação e do conhecimento. O e-learning nos negócios Com as evoluções tecnológicas a sucederem-se diariamente, as organizações esforçam-se para preparar melhor os seus empregados. O treino à distância agrupa a possibilidade de treinar com alta qualidade, a custos mais baixos do que o treino convencional. É forte a percepção de como é vantajoso adaptar o funcionário às novas condições de trabalho (ou nova função), não sendo desperdiçados investimentos anteriores na sua formação. Benefícios para os negócios: Melhorar a produtividade. Incrementar a capacidade de lucro. Aumentar a fidelidade do colaborador. O e-learning na Educação A necessidade de níveis educacionais cada vez mais altos e de competências mais específicas têm impulsionado os cursos à distância. Voltados primariamente para a área de negócios, estes cursos relacionam-se directamente à necessidade de uma formação contínua do indivíduo para manter-se apto ao trabalho. Benefícios para Educação: Variadas fontes de informação. Aumentar o acesso para estudantes tardios. Melhorar a qualidade. Adopção rápida das novas informações e novos programas. 9

12 3.4. Aplicações e necessidades do EAD (Ensino à Distância) Inicialmente o EAD era apenas utilizado na educação de alunos. Actualmente, a sua aplicação estendeu-se ao treino nas empresas Educação superior A necessidade de níveis educacionais cada vez mais altos e de competências mais específicas têm impulsionado os cursos à distância. Voltados primariamente para a área de negócios (MBAs), estes cursos relacionam-se directamente à necessidade de uma formação contínua do indivíduo para manter-se apto ao trabalho Treino nas empresas Com as evoluções tecnológicas a sucederem-se diariamente, as organizações esforçam-se para preparar melhor os seus empregados. O treino à distância alia a possibilidade de treinar com alta qualidade, a custos mais baixos do que o treino convencional. É forte a percepção de que é vantajoso adaptar o funcionário às novas condições de trabalho (ou nova função), não sendo desperdiçados investimentos anteriores na sua formação Características O e-learning tem características muito próprias à filosofia descrita acima: - Personalizado. O programa de estudo pode (e deve) em alguns casos ser personalizado para o aluno. Analisando os objectivos do aluno e as capacidades e conhecimentos, os cursos podem ser gerados dinamicamente (on-the-fly). Deste modo, não só o aluno verá a sua aprendizagem facilitada com conteúdos ao alcance das suas capacidades e gerados de acordo com os seus conhecimentos, como também evitará despender tempo com conteúdos que já conhece. Isto será possível através de objectos de aprendizagem reutilizáveis. 10

13 - Interactivo. Hoje em dia a aprendizagem baseada em tecnologia é simplesmente uma extensão da tradicional aprendizagem baseada em livros de texto o utilizador lê os conteúdos de um ecrã em vez de uma folha. A interactividade está a mudar essa forma de aprendizagem antiquada. A interactividade tornará a aprendizagem mais rápida, mais intuitiva e mais fácil. Por exemplo, o hiper-texto permite que o utilizador clique numa palavra desconhecida para obter uma definição através do link para uma página ou um pequeno clip de vídeo explicativo. Pode até em casos ser possível a assistência imediata de um instrutor ou de interacção com outros alunos. - Just-in-Time. O actual sistema de aprendizagem baseia-se num modo just-in-case, isto é, o aluno aprende em sessões e locais pré-definidos. O e-learning traz uma nova perspectiva a esta área, pois permite que a aprendizagem tome lugar no momento em que o aluno pretende e no local em que este pretende. Desta forma, a aprendizagem toma lugar no momento em que é necessária, resolvendo de imediato o problema do aluno. - Actual. Enquanto que nos sistemas antigos de ensino recorrente à tecnologia o conteúdo ficava desactualizado (por exemplo, CD-ROMs), o ensino on-line permite que se esteja sempre actualizado pois é muito fácil para o instrutor acrescentar/remover conteúdos on-line sempre que tal seja necessário para manter o curso actualizado. - Centrado no utilizador. Com o advento do e-learning, o utilizador passa a dispor de um modo de aprendizagem que se baseia primariamente nas necessidades do utilizador e não apenas naquilo que o instrutor sabe Vantagens e desvantagens O e-learning traz inúmeras vantagens, tantas que minimizam as desvantagens Vantagens As suas vantagens mais significativas são: - Maior qualidade e valor do conhecimento. Conseguido pelo melhor acesso do aluno e combinação de conteúdo ajustado ao utilizador, colaboração e interacção com outros alunos e apoio on-line pelo instrutor 11

14 - Menores custos de aprendizagem. Conseguidos através da redução de viagens, custos de subsistência e tempo fora do posto de trabalho. - Maior flexibilidade e capacidade de resposta. O aparecimento de novos requisitos de negócios tem resposta com a rápida criação de nova e aprendizagem para uma audiência distribuída. - Independência no espaço. O aluno não precisa de se deslocar até ao local do curso. O acesso aos conteúdos pode-se dar em diferentes locais em casa, no trabalho ou em salas especificamente destinadas a ensino à distância. - Independência no tempo. Não há obrigatoriamente um horário específico para o acesso à instrução. Os alunos podem realizar as tarefas cada qual no seu ritmo, permitindo uma melhor adaptação visual. Problemas circunstanciais (trânsito, doenças, exigências do trabalho, etc.) têm menor impacto no andamento dos cursos à distância do que nos convencionais. - Flexibilidade de formatos. Possibilidades amplas de formato (incluindo multimédia), que enriquecem o material oferecido. Adaptável ao assunto: se o conteúdo é teórico, textos podem ser o meio mais adequado; se o conteúdo for técnico, pode ser ensinado através de vídeo, com grandes vantagens. Manter os alunos actualizados dispensa uma logística de distribuição de materiais, apenas renovando-se os conteúdos armazenados nos servidores. - Interactividade. As separações no espaço e no tempo não implicam uma falta de interacção. Diversos sistemas podem prover o contacto eficiente entre alunos e professores; correio electrónico, fóruns de discussão, ambientes de aula virtuais, vídeo-conferência. É reduzido o efeito de características pessoais na interacção raça, cor, religião e outros aspectos não influem na interacção aluno/aluno ou aluno/instrutor Desvantagens - Ausência de relação humana formador/aluno; - Conteúdos mais generalistas; - Contingência tecnológica largura de banda e terminais; - Exige alguns conhecimentos tecnológicos; 12

15 - Reduzida confiança neste tipo de estratégias educativas; - Custos elevados dos cursos e do material; - Pressupõe a utilização de um computador ligado à Internet Factores de sucesso - Autonomia. Capacidade de determinar quando e o que quer fazer. Tipicamente um adulto é capaz de lidar com a ausência física de um instrutor e de horários pré-estabelecidos de estudo, conduzindo sua formação baseando-se em seus objectivos. Estes objectivos, profissionais ou não, devem determinar a escolha dos cursos, uma vez que isto diminui as taxas de desistência e aumenta o seu aproveitamento. - Apoio do empregador. Ao acontecer numa empresa, é importante que ela suporte esta actividade, oferecendo: Condições físicas (equipamentos, local); Uma parcela do tempo do trabalho para sua realização. Deve-se considerar o treino como um investimento, a fim de obter melhores condições de se manter num mercado competitivo e globalizado. Há que ter em conta também os objectivos do empregado na empresa, visando maximizar o aproveitamento dos cursos oferecidos ao indivíduo. - Apoio da família. Um curso à distância requer tanto ou mais tempo e esforço do que um convencional. O aluno deve ser informado desta necessidade e negociar com a sua família espaço suficiente para que realize a contento suas actividades. Isto tende a prover uma maior taxa de sucesso, agregando a unidade familiar em torno de um objectivo, facilitando a criação de condições de estudo e de execução de tarefas relativas ao curso. 13

16 - Outras influências. Alunos que tenham aplicação, imediata ou prevista, do conteúdo dos cursos no seu trabalho tendem a ser mais bem sucedidos. Os cursos que permitem maior controlo por parte do aluno são mais adequados do que aqueles que possuem um alto nível educacional; cursos directivos tendem a ser mais bem vistos por alunos de menor escolarização. O feedback dos instrutores é de grande importância para a manutenção da motivação. A ausência ou baixa qualidade do feedback estão fortemente relacionados com desistências e baixo aproveitamento Situação em Portugal O uso do e-learning em Portugal é na sua maioria direccionado para a formação profissional, em que os custos são suportados pelos alunos, existem ainda poucas instituições que recorrem a financiamentos da Comunidade Europeia. Contudo, tem-se notado o crescimento na área do Ensino Superior, existem já algumas Universidades em Portugal que já adoptaram o e- Learning, tais como a Universidade de Aveiro, a Universidade Aberta, a Universidade Católica, o Instituto Superior de Engenharia do Porto, o Instituto Politécnico de Bragança. 14

17 Desenvolvimento de um curso de e-learning 15

18 4 Como já aqui foi mencionado, a aprendizagem on-line não é nova. Há mais de 10 anos que usamos programas de treino baseado em computador (CBTs) em várias formas. No entanto, a experiência vinda dos CBTs ensinou-nos que o sucesso de um curso de e-learning adequado necessita de algo mais que apenas dispor de conteúdo online, sejam CBTs ou páginas HTML. Nesta secção discutimos alguns aspectos do e-learning fundamentais para o desenvolvimento de um curso com sucesso. A aprendizagem on-line deve ser projectada para funcionar como isso mesmo, não apenas uma apresentação de slides forçados a um ambiente on-line. Em muitos casos, os cursos on-line têm menos conteúdo que os seus equivalentes cursos de salas de aula. O conteúdo deve ser consistente e dividido em secções de tamanhos planeados de modo a facilitar a aprendizagem e a concentração. Em algumas situações, o modo como o utilizador navega pelos conteúdos deve ser desenhado de modo a ser definido pelo aluno, em vez de ser definido pelo instrutor. Devemos ainda ter em consideração que os alunos são menos toleráveis em termos de consistência do interface e usabilidade do que com o conteúdo propriamente dito. Deixar a navegação pelos conteúdos ao critério do utilizador é uma forma de lidar com as diferentes competências dos diferentes utilizadores. Uma outra forma é a definição de perfis de utilizador ajustados à sua competência, facilidade de aprendizagem, habilidades e conhecimentos Gestores de Conteúdo Quando uma empresa implementa um programa de e-learning, esta precisa não só dos cursos em si, mas também de uma aplicação que administrará o acesso e disponibilidade de cada curso, a matricula e acompanhamento de aproveitamento de cada aluno, e a geração de relatórios sobre todas estas actividades para a gerência da empresa. 16

19 LMS e LCMS são aplicações baseados em bancos de dados que fazem todas estas e outras tarefas. LMS é a abreviação de Learning Management System e LCMS é Learning Content Management System. Um LMS é uma aplicação que faz a gestão das actividades dos alunos de e-learning via Internet/Intranet. Este permite o controle das matrículas, dos pagamentos dos cursos quando houver, do andamento de cada aluno nas lições, dos resultados de avaliações, etc. Um LCMS controla a disponibilização do conteúdo dos cursos na Internet/Intranet, permite a sua navegação, etc. Há aplicações que englobam tanto funções de LMS como de LCMS e geralmente são chamadas simplesmente de LMS ou, em português, de gestor de conteúdo. Existem fornecedores de LMS/LCMS de todos os portes e preços, nacionais e estrangeiros. Certos LCMS também permitem aos seus utilizadores criarem conteúdo para e-learning. O problema das ferramentas de autoria é que a grande maioria de seus utilizadores não são especialistas em conteúdo, nem em design, nem em multimédia, então acabam produzindo cursos do tipo texto on-line e que podem tornar o processo de aprendizagem enfadonho e pouco estimulante. Uma empresa ou universidade deve considerar com cuidado esta opção, porque muitas vezes, se torna mais um caso de "o barato sai caro e ineficiente" Fóruns e portais de aprendizagem Um portal é definido como um ponto de acesso, via Web, a um conjunto de serviços. Um portal de aprendizagem é então uma agregação de serviços e produtos de aprendizagem disponíveis num único (e coerente) ponto de acesso. O portal disponibiliza serviços tais como: - Catálogo dos cursos disponíveis; - Serviço de registo; - Acesso a registos de actividade pessoal; - Acesso a registos organizacionais; - Perfis pessoais; - Informação pessoal; - Fóruns de aprendizagem; - Apoio educacional; - Aprendizagem on-line. 17

20 Os fóruns de aprendizagem disponibilizam apoio geral ou especifico aos alunos, dando-lhes acesso a outros alunos e instrutores. São ambientes assíncronos com discussões baseadas em texto. No caso dos canais de conversação (chats) estaremos então perante ambientes síncronos Formatos de e-learning Existem duas formas primárias de interacção nos cursos on-line: síncrona e assíncrona. Se integrarmos as ferramentas síncronas em ambientes assíncronos, então temos o modelo de aprendizagem independente Interacção Síncrona SSL (Synchronous Shared Learning) A SSL é o formato de e-learning mais próximo do ensino tradicional. A interacção síncrona implica a presença on-line em simultâneo das partes (aluno-aluno(s) ou aluno(s)-instrutor) comunicando em tempo real. Este tipo de interacção é possível devido a um leque de soluções síncronas, tais como canais de conversação (chats), voz, partilha de aplicações, etc. Elementos técnicos do SSL - Processo de registo. Permite ao aluno registar-se nas sessões. - Vídeo uni-direccional. Permite aos alunos ver o instrutor em directo ou em streams de gravações. - Áudio uni ou bi-direccional. Permite aos alunos ouvir o instrutor ou, no caso bi-direccional, o aluno fazer-se ouvir. - Partilha de aplicações. Permite aos membros do grupo, em localizações diferentes, trabalhar em aplicações ao mesmo tempo. - Power Point. A maior parte das aplicações permite ao instrutor mostrar slides do Power Point. 18

21 - Whiteboarding. Permite ao instrutor tirar notas em tempo real ou apontar no ecrã. - Questionário. O instrutor pode fazer questões aos alunos e obter uma resposta imediata dos alunos que terão uma lista de repostas para escolher. - Hand Raise. Um aluno que tenha uma questão, pode clicar num botão que indicará ao instrutor que existe um aluno com dúvidas. O instrutor dará então a oportunidade ao aluno de fazer a sua pergunta via áudio ou por escrito. - Chat. Permite aos alunos falar em privado com outros alunos ou com o instrutor. - Testes. Permitem aos instrutores testar os alunos acerca do material apresentado. - Tracking. Permite ao instrutor acompanhar o progresso do aluno. Este método tem a vantagem de que a aprendizagem e o feedback são imediatos e portanto mais rápidos. A desvantagem é que o sistema resulta bem para sessões de uma hora no máximo, mas não tem tanta praticabilidade no caso de períodos mais longos, pois a concentração diminui e a aprendizagem acompanha o declínio da curva de concentração do aluno. Além disso, por vezes é difícil marcar os horários em que essas sessões devem decorrer. Por fim, outra desvantagem é o domínio da língua escolhida, pois em tempo real, em alguns casos, não é tão fluente falar ou escrever uma língua que não a nativa Interacção Assíncrona ASL (Asynchronous Shared Learning) Quando a comunicação entre as partes se processa ao longo do tempo e não em tempo real, então estamos perante o modo de interacção assíncrono. Exemplos desta forma de interacção são os fóruns de discussão, onde os tópicos são criados e questões levantadas, esperando que alguém em posse do saber responda a essas questões. Este modelo é utilizado normalmente para votações, inquéritos, etc. 19

22 Elementos do ASL: - Processo de registo. Permite ao aluno registar-se nas sessões. - Tracking. Permite ao instrutor acompanhar o progresso do aluno. - Capacidades multimédia. Se o aluno apenas tivesse texto para ler, o ASL seria muito aborrecido. Som, vídeo e animação, enriquecem o processo de aprendizagem. - Assistência por peritos. Como neste formato não existe um instrutor em directo para responder questões, existem formulários pré-definidos, nos quais os alunos colocam as suas dúvidas a um perito que responderá às mesmas rapidamente, se não imediatamente. - Fóruns de discussão. Já aqui foi discutida a função e vantagens dos fóruns no processo de aprendizagem. - Exercícios de simulação / Laboratórios virtuais. Permite ao aluno testar aquilo que aprendeu quando mais lhe convier. - Testes. Permitem aos instrutores testar os alunos acerca do material apresentado. Obviamente a maior vantagem deste modelo reside na flexibilidade de horários, pois encaixa no dia de cada um, processando-se ao ritmo do aluno. Consequentemente, a desvantagem óbvia está na duração das actividades, que se processam ao longo de períodos de tempo maiores e não suporta uma resposta imediata em casos em que o tempo urge e-learning independente IEL (Independent e-learning) Como aqui foi mencionado, o e-learning independente é resultante da fusão entre os sistemas síncronos e os assíncronos. Este formato chamase independente porque não existem turmas virtuais nem um instrutor. Funciona como uma experiência just-in-time. O Lotus LearningSpace é uma das ferramentas que suportam este modo de interacção. 20

23 4.4. Plataformas Até há pouco tempo quando um membro duma instituição pretendia oferecer um curso à distância, ou simplesmente oferecer conteúdos de complemento às aulas tradicionais, este ou esta, para além de ser perito no conteúdo a divulgar, teria ainda que ser capaz de conceber de raiz toda uma estrutura que originaria o site onde iria divulgar o seu curso. Todo este processo, quando realizado sem ajuda de profissionais, implicava o investimento de muitas e muitas horas. Primeiro teria que passar por um processo de aprendizagem sobre o funcionamento das ferramentas de edição de páginas Web, tarefa que já não exigindo o conhecimento de programação HTML, podia levar várias horas para os menos habituados a estas coisas dos computadores. Depois de dominadas algumas funcionalidades dessas ferramentas, havia ainda uma série de coisas a considerar. Desde opções de imagem, opções dinâmicas e toda uma série de novas opções multimédia, fóruns, chats, que implicam antes de mais muitas horas on-line a aprender com o que os outros têm feito. Desenvolver tudo isto de raiz e sem ajuda pode queimar por completo a tal ideia inovadora dos conteúdos on-line. Em Portugal, regra geral é este ainda o processo habitual, com os professores desenvolver a título individual as suas páginas de apoio à sua cadeira, envolvendo recursos não institucionais e diferentes tipos de tecnologias. Todo este esforço, talvez possa no futuro ser considerado como a necessária fase de iniciação. Esta fase ficará marcada pelo fraco aproveitamento das tecnologias existentes, com um produto caracterizado pela digitalização, sem tratamento prévio, das velhas sebentas, que são distribuídas pelos alunos em formato PDF nos ditos cursos on-line. Cientes dos altos retornos esperados no mercado do e-learning, várias empresas de desenvolvimento de software têm vindo a desenvolver software específico para a gestão e desenvolvimento de cursos on-line, ao qual tem sido atribuída a designação de plataformas de e-learning. Duma maneira geral a filosofia destas aplicações é permitir aos utilizadores, professores e alunos, que com um mínimo de tempo de aprendizagem possam usufruir de tudo o que a tecnologia tem para oferecer. Assim, as instituições adquirem a plataforma que é normalizada pelos serviços de informática ou por grupos de trabalho, tendo em vista a definição da imagem que se pretende transmitir e do 21

24 tipo de funcionalidades a disponibilizar. Depois os professores (só) têm que aceder à Internet e mediante uma palavra-chave fazer uso do espaço que a instituição lhes oferece. Espaço esse que já vem com as tais normalizações, tendo o professor apenas que preencher os espaços em branco para implementar o seu curso on-line. Se por um lado se perde alguma liberdade na construção das páginas, por outro ganhase em termos de facilidade de gestão e desenvolvimento, com a grande vantagem de deixar de ser uma iniciativa individual e passando a ser uma questão de imagem de marca da instituição Características comuns Criam um ambiente integrado para cada disciplina em que só os elementos inscritos têm acesso. Permitem elaborar conteúdos de suporte sem necessidade do docente ter conhecimentos de programação. Possibilitam a elaboração de testes interactivos (fornecem imediatamente feedback ao aluno) com registo de resultados para cada aluno. Dispõem de diversas ferramentas de comunicação com todos os alunos (i.e. anúncios de interesse geral) ou selectivamente (i.e. tirar uma dúvida). Tornam possível a comunicação aos alunos de trabalhos/projectos a realizar e a recepção pelo sistema desses mesmos trabalhos/projectos (i.e. ficheiro) de forma integrada. Asseguram uma zona do aluno na qual ele pode dispor de página pessoal, fóruns próprios, etc Exemplos Web-CT O Web-CT é um programa desenvolvido pela University of British Columbia, que permite a criação de ambientes educacionais baseados na Web. 22

25 Características: Permite a criação da interface (apresentação); Disponibiliza um conjunto de ferramentas para facilitar o aprendizado, a comunicação e a colaboração dos participantes; Possui um conjunto de recursos administrativos que auxiliam o professor no processo de gerir e actualizar o curso. LearningSpace O LearningSpace é um ambiente para a criação de cursos on-line desenvolvido pela Lotus/IBM e possui os seguintes recursos: Schedule, MediaCenter, CourseRoom, Profiles e Assessment Manager Existe ainda o LearningSpace Central que é um módulo multifuncional que contém várias ferramentas valiosas, inclusive: Ferramentas de Gerenciamento de Cursos, Bibliotecas Personalizadas e Ferramentas de Administração. TopClass O TopClass conecta os alunos em treino entre si e com o professor num ambiente integrado, através de Intranet ou Internet. Muitas das características que foram somadas derivam de histórias de sucesso real de seus clientes. A Versão 2.0 contém um bom formulário de inscrição on-line e permite, seja para os estudantes existentes ou para os novos, a possibilidade de se associar em uma ou mais classes. Web Course in a Box A Web Course in a Box é uma ferramenta para criação e administração de cursos baseados na Web (Web-based) desenvolvida pela Virginia Commonwealth University. Possui recursos para criação de páginas pessoais dos alunos, secção de informações sobre as aulas, agenda do curso, auxílio a utilização da ferramenta WCB, fóruns de discussão e exercícios auto corrigíveis; a autoria é feita usando um usando um browser e não requer nenhum conhecimento de HTML ou outras habilidades. O WCB consiste em três componentes: Servidor de WCB, Authoring Ferramentas e WCB curso/páginas (para estudantes) esocrates 23

26 O esocrates oferece uma infra-estrutura completa de Tecnologia da Informação para prover um treino assistido pela Web. O sistema esocrates provê programas, leituras, controle de avaliações, tarefas, e- mail de classe, consulta de grau, controle de contra-senha, boletim, chatroom, inscrição, desenvolvimento de habilidades on-line, montagem de testes on-line, correcção automática de testes e o Sócrates Café com mais de 1000 links educacionais Standards Tal como a maior parte das tecnologias, o e-learning também foi alvo do desenvolvimento de standardização. Para que se consiga uma verdadeira sofisticação em termos de compreensão de entender os objectivos do aluno e atingir esses objectivos com um programa de aprendizagem, é essencial que todos os componentes duma tecnologia baseada em e-learning fale a mesma língua, de modo a garantir a interoperabilidade dos vários produtos e serviços do e- Learning. Os standards do e-learning visam estabelecer regras e domínios, de forma a facilitar e possibilitar a troca de informação de conteúdos educativos e de sistemas de gestão de conteúdos. Os projectos de standards estão a ficar mais maduros e a recolher cada vez mais atenções. Os clientes podem ser influenciados por estes projectos. As vantagens do comprador ao adquirir um sistema que respeite os standards são: Possibilidade de usar conteúdos de qualquer outra pessoa cujos conteúdos também obedeçam ao standard Interoperabilidade dos dados em sistemas diversos de marcas diferentes Precisão e facilidade em encontrar os conteúdos Os standards aplicam-se ao LMS e ao conteúdo de aprendizagem. Os standards para LMS definem especificações para a partilha de dados com outros sistemas, tais como uma biblioteca ou sistemas de informação de estudantes, e ambiente encontrar e executar o 24

27 conteúdo de aprendizagem. Os standards de conteúdo definem especificações acerca de como tornar a informação (meta-dados) sobre os conteúdos visível (tais como nome, autor, objectivos de aprendizagem) e como trocar a informação com o LMS Objectivos Os standards do e-learning estão a ser desenvolvidos perante os seguintes aspectos: Acessibilidade Aceder a componentes pedagógicos de uma localização remota e distribui-los para locais diferentes. Interoperabilidade Usar componentes pedagógicos, desenvolvidos num dado local e com um dado conjunto de ferramentas, num outro local com um outro conjunto de ferramentas. Adaptabilidade Desenvolver conteúdos para necessidades individuais e situacionais. Capacidade de Reutilização Desenvolvimento de objectos de conteúdos capazes de ser utilizados em múltiplas utilizações. Durabilidade Possibilidade de continuar a utilizar componentes pedagógicos quando a tecnologia de base muda, sem a necessidade de os reescrever. Diminuição de custos Aumentar a eficácia significativamente enquanto se reduz o tempo e os custos. Dados e Meta-dados 25

28 Os meta-dados são definidos como sendo a informação acerca da informação. Contêm a descrição dos objectos pedagógicos, tais como autor, assunto, data, preço, etc. Permitem uma melhor indexação dos objectos e, como consequência, uma procura mais fácil e mais rápida. Os standards nesta área permitirão: Especificar um formato universal de descrição dos objectos, especificando os campos a ser usados na descrição e a sintaxe/semântica dos objectos. Facilitar a tradução das línguas dos conteúdos, de forma a estender-se a outras culturas. Conteúdos Os standards relacionados com os conteúdos estão a ser desenvolvidos de forma a indicar aos utilizadores e aos sistemas o que contêm, como podem ser acedidos e a melhor forma de os usar. Serão uma espécie de manual How-to. Estes standards terão como objectivo: Uma linguagem para descrever e referenciar os vários componentes de media, tais como o vídeo, o áudio, animação, etc.) do CBT. Esta medida será útil para estabelecer os meios para a portabilidade dos componentes de um sistema ou ferramenta para outro. Um mecanismo para gerir e adaptar a forma de apresentação das lições, de acordo com as necessidades do aluno, de forma a criar dinamicamente cursos adaptados individualmente. O empacotamento dos conteúdos relativamente ao formato, codificação, ambiente, atributos e interacções. Este tipo de standardização permitirá simplificar a transmissão e a activação dos conteúdos de aprendizagem. LMS e Aplicações Os sistemas LMS funcionarão como um gateway onde o conteúdo entra, sendo transformado em lições baseadas no perfil do aluno e posteriormente apresentadas ao aluno, sendo o seu progresso seguido pelo LMS. Os objectivos deste standard são: 26

29 Permitir que lições e cursos sejam movidos de um sistema de CMI (Computer Managed Instruction) para outro, mantendo a sua facilidade de uso e funcionalidade. Facilitar a implementação das tecnologias de aprendizagem em vários tipos de browsers e sistemas operativos. Estabelecer um protocolo que facilite a comunicação entre as ferramentas que o aluno usa (por exemplo, folhas de cálculo) e o software de aprendizagem. Alunos A aprendizagem deve ser centrada no aluno, nas suas capacidades e conhecimentos, além dos seus objectivos. Estão em desenvolvimento standards que permitirão caracterizar o aluno nestes aspectos, de modo a poder dirigir os conteúdos e a forma como estes são apresentados da melhor forma. Estes standards pretendem: Criar uma linguagem de caracterização do aluno, incluindo atributos tais como conhecimentos, habilidade, estilos de aprendizagem, registos e informação pessoal. Uma forma de identificar os alunos para propósitos de registo. Componentes de sistemas centrados no utilizador que permitirão um processo de aprendizagem vitalícia. Ajudará a desenhar objectivos, planear, executar, acompanhar e documentar os alunos, de forma a ajudar os alunos a atingir os seus objectivos de aprendizagem e ainda obter documentação das competências desenvolvidas Projectos Advanced Distributed Learning Initiative (ADLNet) O Ministério da Defesa Americano e o Gabinete de Política Científica e Tecnológica da Casa Branca lançaram a ADLNet em O seu objectivo é assegurar o acesso a uma educação de elevada qualidade e a materiais didácticos que possam ser adaptados às necessidades individuais do aluno e que tenham disponibilização permanente. Para esse efeito criou o Sharable Content Object Reference Model (SCORM). 27

30 O modelo SCORM está a tornar-se rapidamente na arquitectura standard para sistemas de e-learning. Garante a interoperabilidade entre diferentes sistemas de e-learning e aumenta a reutilização dos objectos de ensino. Para além disso, fornece especificações relativas à representação de estruturas de cursos, ao ambiente de execução (runtime environment), ao lançamento de conteúdos e à criação de registos de meta-dados e aos elementos crus/atómicos do media (raw media elements) para cursos e conteúdos. Este modelo permite acelerar o desenvolvimento em larga escala de software de aprendizagem dinâmica e a custos adequados e desenvolver um enquadramento técnico comum para aprendizagem baseada na Web capaz de promover a concepção de conteúdos de aprendizagem reutilizáveis enquanto objectos instrutivos IEEE Learning Technology Standards Committee (LTSC) O IEEE LTSC desenvolve normas técnicas, recomenda boas práticas e elabora guias para componentes de software, ferramentas, tecnologias e métodos de concepção, que facilitam o desenvolvimento e implementação de componentes e sistemas informáticos de educação e formação. Abrange tópicos que incluem os meta-dados dos objectos de aprendizagem, perfis dos alunos, módulos dos cursos, instruções geridas por computador, localização e armazenamento de conteúdos e definições de competências. O LTSC foi instituído pelo IEEE Computer Society Standards Activity Board. Muitas das normas desenvolvidas pelo LTSC serão avançadas como normas internacionais pelo ISSO/IEC JTCI/SC36 (Tecnologia Informática para a Aprendizagem, Educação e Formação). Em 12 de Junho de 2002, a norma "Standard for Information Technology --Education and Training Systems - Learning Objects and Metadata" (LOM) foi aprovada (IEEE P /D1, Draft Standard for Learning Technology - Learning Object Metadata - ISO/IEC 11404). Esta norma especifica a sintaxe e a semântica a ser usada nos Learning Object Metadata, permitindo assim a partilha e a troca destes objectos, utilizando qualquer tecnologia (ou WBLE). Esta norma, por exemplo irá permitir mais facilmente aos alunos e professores procurar, avaliar, adquirir, e utilizar objectos da aprendizagem; compartilhar objectos da aprendizagem através da tecnologia de suporte aos sistemas da aprendizagem baseados na Web e suportar a segurança e autenticação necessários para a distribuição e o uso dos Learning Object Metadata. 28

31 Global Learning Consortium, Inc (IMS) A Global Learning Consortium, Inc, é um consórcio de universidades, agências governamentais, companhias e outras instituições que desenvolve e promove especificações abertas para as actividades de aprendizagem on-line. Para esse efeito foi criado o Projecto IMS O IMS tem como principais objectivos a definição de especificações técnicas para a interoperabilidade de aplicações e serviços de aprendizagem distribuída e o apoio à incorporação das especificações do IMS nos produtos e serviços à escala mundial. As especificações do IMS incluem o ensino on-line e off-line. Isto significa que os contextos da aprendizagem que beneficiam das especificações do IMS incluem sistemas tais como os WBLE e situações da aprendizagem que envolvem recursos electrónicos off-line, tais como recursos de acesso a um CD-ROM. Por exemplo, a especificação dos meta-dados dos recursos da aprendizagem do IMS beneficia o aluno que procura a informação com uma ferramenta da pesquisa na Web e aquele que procurar através uma enciclopédia num CD-ROM no seu computador. Aviation Industry CBT Committee (AICC) A AICC é uma associação internacional de profissionais de formação de base tecnológica. Esta associação desenvolve directrizes sobre o desenvolvimento, distribuição e avaliação de formação baseada em computadores e tecnologias de formação conexas para a indústria aeronáutica. Os objectivos da AICC são o de auxiliar os operadores de aeronaves no desenvolvimento de directrizes destinadas a promover a implementação económica e efectiva da formação baseada em computador, desenvolver directrizes para permitir a interoperabilidade e proporcionar um fórum aberto para a discussão de tecnologias de formação CBT e outras. Fundação Europeia Ariadne (ARIADNE) A fundação Ariadne resulta de um projecto que tem como objectivo desenvolver conceitos e ferramentas para processos de ensino/aprendizagem baseados nas TIC. Esta associação executa e promove trabalhos cooperativos entre instituições de ensino (mas também empresas), que são incentivadas a optimizar e a partilhar seus processos/recursos de ensino/aprendizagem. Este princípio é possível graças a tecnologia desenvolvida pelo projecto ARIADNE (ARIADNE Project), que é disponibilizada a todos os membros da fundação. 29

32 A Ariadne tem feito contribuições importantes nos standards educacionais (educational standards). O ARIADNE Educational Metadata specification (the 'pedagogical header') foi a mais importante contribuição na criação do standard do IEEE/LTSC LOM. Dublin Core Metadata Initiative (DCMI) A DCMI, é uma organização dedicada a promover a adopção e a divulgação de meta-dados e a desenvolver vocabulários especializados (metadata vocabularies) para descrever os recursos que permitem sistemas mais inteligentes de pesquisa da informação. A missão do DCMI é permitir encontrar recursos usando a Internet. As suas actividades centram-se no desenvolvimento de meta-dados que permite a pesquisa através de vários domínios e na definição de estruturas (framework) para a interoperabilidade de conjuntos de metadados. Uma das actividades da DCMI é o desenvolvimento e distribuição de recursos educacionais e consultadoria e coordenação de actividades com e nas comunidades de meta-dados ligadas ao ensino, para esse efeito criou o DCMI Education Working Group. Este grupo de trabalho tem como objectivo discutir e o desenvolver propostas para o uso do meta-dados na descrição de recursos educacionais O futuro do e-learning A verificar-se a tendência para o incremento da largura de banda, o e- Learning beneficiará de conteúdos multimédia mais ricos e cada vez mais interactivos, sendo distribuídos de forma cada vez mais rápida. As comunicações sem fios, tais como o WAP, permitirão aos utilizadores aceder a programas de e-learning em qualquer lugar até onde possa transportar o seu dispositivo móvel. 30

33 Curso on-line de Dreamweaver MX 31

34 Introdução Depois de sabermos o que é o e-learning, aplicações, implicações, tecnologias, standards, e muitos outros aspectos do e-learning, estamos em posição de definir o curso on-line de Dreamweaver MX. Vejamos em que consiste o curso. O curso de Dreamweaver MX é destinado a pessoas inexperientes em web-design, iniciando-se com uma breve introdução aos básicos do web-design, nomeadamente ao HTML. Após esta fase introdutória ao HTML, uma nova introdução mas, desta vez, ao Dreamweaver. Esta introdução consiste em familiarizar o utilizador com a ferramenta de trabalho. Feitas as introduções, teremos então conteúdos mais importantes sobre a aprendizagem e uso do Dreamweaver. Em cada capítulo serão apresentadas questões de revisão e, em alguns, exercícios A influência do e-learning A primeira fase deste projecto consistiu na aprendizagem do e-learning. Após essa aprendizagem, o passo seguinte consistiu em planear o curso e a forma como o faria. Todo o curso foi projectado de forma a aplicar os conhecimentos adquiridos, de forma a obedecer às regras do e- Learning. Foi portanto com base no e-learning que tomei decisões e fiz opções relativas ao curso projectado, as quais vou explicar neste ponto, de forma a mencionar a relação do curso com o e-learning. Antes de mais, foi necessário identificar os receptores, ou seja, saber a quem se destina o curso e traçar um perfil genérico do utilizador de modo a poder adaptar melhor o curso à generalidade dos utilizadores. O ideal seria traçar vários perfis de utilizador e criar versões do curso adaptadas a cada um dos diferentes perfis algo que começa a surgir actualmente no mercado do e-learning permitindo assim maximizar a eficácia da aprendizagem. Como a duração do projecto é muito curta, então a decisão que tomei foi mesmo criar o curso de forma a servir a todos em geral. 32

35 O site do curso apresenta um índice detalhado dos tópicos do curso, onde cada tema e sub-tema têm uma ligação directa à página referente ao mesmo, sendo então possível a cada tipo de utilizador (cada utilizador tem um grau de conhecimento próprio) avançar ou recuar nos temas conforme a sua vontade. É importante que isso seja possível pois uma das regras mais importantes do e-learning actual consiste em dar liberdade de aprendizagem ao aluno, no seu próprio tempo ao seu ritmo. ( ) não só o aluno verá a sua aprendizagem facilitada com conteúdos ao alcance das suas capacidades e gerados de acordo com os seus conhecimentos, como também evitará despender tempo com conteúdos que já conhece. Capítulo 3 [3.5] Desta forma, a aprendizagem toma lugar no momento em que é necessária, resolvendo de imediato o problema do aluno. Capítulo 3 [3.5] O curso é uma forma de CBT (Computer Based Training) sendo portanto a interacção feita de forma assíncrona (ASL Asynchronous Shared Learning). A comunicação entre as partes processa-se ao longo do tempo e não em tempo real a aprendizagem do aluno processa-se de forma autónoma recorrendo ao site. A forma como o conteúdo do curso é planeado é então um factor capital no sucesso da aprendizagem do aluno. Como já foi mencionado num capítulo anterior, o conteúdo deve ser consistente e dividido em secções de tamanhos planeados de modo a facilitar a aprendizagem e a concentração. Optei por dividir o curso em quatro módulos, onde cada módulo é dividido em quatro partes, com excepção para o último módulo que contem apenas três partes. Cada uma das partes dos módulos termina com questões de revisão que permitem ao utilizador verificar os seus conhecimentos. O ideal seria um formulário a preencher pelo aluno com as respostas ao questionário de forma a ser processado automaticamente num servidor e devolver uma avaliação do conhecimento do aluno. Tal não foi possível dada a escassez do tempo para a elaboração do projecto. Desta forma seria possível ao instrutor seguir a aprendizagem do aluno, podendo retirar conclusões e fazer adaptações no curso de forma a melhorar a sua eficácia. Ainda assim, estes questionários servem pelo menos ao aluno como verificação da sua aprendizagem. 33

36 Sendo o Dreamweaver uma ferramenta de trabalho bastante completa, esta requer alguma prática. Assim sendo, em alguns dos capítulos foram postos exercícios logo antes das questões de revisão, de forma a encorajar o aluno a exercer a prática desta ferramenta e a desenvolver as suas capacidades depois de adquirido o conhecimento. Está provado que os alunos que tenham aplicação, imediata ou prevista, do conteúdo dos cursos no seu trabalho tendem a ser mais bem sucedidos. Devemos ter em consideração que os alunos são menos toleráveis em termos de consistência do interface e usabilidade do que com o conteúdo propriamente dito. Projectei então uma interface simples e prático onde os textos são dispostos de forma a não prolongar demasiado a página de modo a não tornar a sua leitura aborrecida. É muito mais agradável ler uma página com textos curtos do que uma página com textos demasiado longos, onde provavelmente a meio do texto estamos cansados e perdemos a concentração. Além da forma simples como os textos estão dispostos, tentei ao máximo apoiar o texto com imagens que permitam compreender melhor o que foi escrito e facilitar a aprendizagem. Em muitos casos, é mais fácil aprender com uma imagem do que com texto. A popular frase Uma imagem vale por mil palavras aplica-se na perfeição aos cursos CBT. Foram todas estas as razões, opções e decisões tomadas, que estão estreitamente relacionadas com tudo o que aprendi sobre o e-learning. Devo agora referir as questões técnicas da produção do site. Para elaborar este projecto servi-me ao máximo das ferramentas necessárias. O curso foi produzido recorrendo ao Dreamweaver MX, Fireworks MX, Paintshop Pro 8 e MS Word (Office XP). Os textos foram produzidos no Word e apoiados por imagens criadas no Paintshop Pro 8 e optimizadas para a web no Fireworks MX. O Dreamweaver MX facilitou a criação do site na medida em que criei um modelo base das páginas do site (uma espécie de template) e servi-me do mesmo para a criação das páginas do site perfazendo um total superior a 250 páginas. O uso do modelo foi crucial, visto que de outra forma seria demasiado moroso e penoso criar tantas páginas num curto espaço de tempo (alguns dias). Durante a apreciação do texto do curso irá notar o uso de termos em Português Brasileiro, algo que nem sempre agrada a alguns utilizadores dada a diferença existentes para o Português standard. Tal deve-se ao facto de ter optado por criar o curso baseado na versão brasileira do Dreamweaver. Era minha intenção criar o curso numa versão em Português do Dreamweaver, pois seria mais fácil a alguns 34

37 utilizadores compreender a forma como os menus do Dreamweaver se dispões e constituem. Na versão em Inglês seria mais difícil para aqueles que têm dificuldades com a língua Inglesa. O problema surgiu quando me informei das versões existentes do Dreamweaver MX para cada língua e constatei que em Português a única versão é a brasileira. Tive então que optar entre usar a versão em Inglês (a mais usada) ou usar a versão em Português brasileira (menos complicada para quem tem menos conhecimentos da língua Inglesa). A escolha recaiu obviamente na versão em Português, ainda que não se trate do Português standard, que é a nossa língua materna. Julgo que o resultado final está dentro do pretendido nos objectivos por mim delineados à partida Tópicos abordados no curso Neste ponto apresentam-se os tópicos abordados no curso on-line. Podemos ver a estrutura pela qual os conteúdos estão organizados. IMPORTANTE: Os textos do curso são apresentados integralmente nos anexos deste relatório. Módulo 1 Parte I - Introdução ao HTML Media linear Hipermedia Hypertext Markup Language HTML O Documento Básico Objectivo deste capítulo Parte II - Ambiente do Dreamweaver Ambiente Barra de Título Barra de Menu Barra Inserir Barra de Edição Painéis Janela do Documento Barra Inspector de Propriedades Ajustar Preferências Previsão no browser 35

38 Parte III - Gestão de Sites Anatomia de um Site Estrutura da Página Estrutura do Site Raiz do Site Janela do Site Assistente de Definição do Site - Básico Assistente de Definição do Site - Avançado Criar Ficheiros e Pastas Na Janela do Site Reorganizar a Estrutura do Site Parte IV - Anatomia e Propriedades de uma Página Elementos do Cabeçalho (Header) Propriedades da Página Texto, Links, Links Visitados e Links Activos Margem Esquerda Margem Superior Largura da Margem Altura da Margem Codificação do Documento Imagem de Rastreamento e Transparência Inserir Elementos Modificar Atributos dos Elementos Apagar Elementos Módulo 2 Parte I - Formatação de Texto Cabeçalhos Parágrafos Quebras de Linha Réguas Horizontais Espaços entre Caracteres Formatação de Caracteres Opções de Formatação de Caracteres Adicionais Parte II - Listas Elementos das Listas Listas Não-ordenadas <UL> </UL> Listas Ordenadas <OL> </OL> Listas de Definições <DL> </DL> Listas Encadeadas 36

39 Parte III - Âncoras e URLs Elementos do Link Tipos de Link Links Internos Links Locais Links Externos Parte IV - Imagens e Mapas de Imagem Tipos de Imagem Digital: Vectores e Bitmaps Standards de Imagem da Internet Formatos de Imagem Suportados Inserir Imagens Propriedades das Imagens O Painel de Propriedades Imagens de Fundo Mapas de Imagem Criar Mapas de Imagem Módulo 3 Parte I - Tabelas no Dreamweaver Tabelas Inserir uma Tabela Seleccionar Tabelas, Linhas, Coluna e Células Propriedades das Tabelas Propriedades das Linhas, Colunas e Células Importar Tabelas de Dados Inserir uma Barra de Navegação Vista de Layout Parte II - Molduras Introdução às Molduras Estrutura de uma Página de Molduras Criar uma Página de Molduras Propriedades do Conjunto de Molduras Definir as Propriedades das Molduras Molduras na Barra Inserir Vantagens e Desvantagens das Molduras Parte III - Formulários Introdução aos Formulários 37

40 Propriedades de um Formulário Campos de um Formulário Campos de Texto Caixas de Selecção Botões de Rádio Menus de Lista Campo de Arquivos Campo Oculto Botão Campo de Imagem Menus de Salto Parte IV - Elementos Especiais, Plug-Ins e o Painel de Propriedades O Elemento Meta Plug-ins Inserir Ficheiros Flash ou Shockwave Modificar as Propriedades do Plug-in Biblioteca Modelos Criar um Modelo Aplicar um Modelo Criar Regiões Editáveis Módulo 4 Parte I - Folhas de Estilo e Estilos HTML Introdução às Folhas de Estilo Criar Folhas de Estilo no Dreamweaver Aplicar um Estilo ao Conteúdo Modificar Folhas de Estilo Externas Ligar Páginas a uma Folha de Estilos Externa O Reilly Reference Panel Camadas Camadas e CSS Propriedades das Camadas Janela de Camadas Estilos HTML Parte II - Comportamentos e JavaScript JavaScript Comportamentos Adicionar e Remover Comportamentos Eventos e Acções Usar Comportamentos 38

41 Rollovers Abrir Nova Janela do Browser Outros Comportamentos Parte III - Ferramentas de Gestão de Sites Verificar os Links Compatibilidade entre Browsers Procurar e Substituir Transferir o Site para o Servidor Importar e Limpar HTML do Word O Quick Tag Editor Dicas de Código 39

42 Conclusão 40

43 6 Recordando os dois objectivos principais deste projecto, penso que ambos foram atingidos. Adquiri em pouco tempo os conhecimentos sobre o e-learning necessários para criar um curso on-line de Dreamweaver. Apliquei esses conhecimentos dentro do possível, planeei o curso tendo em conta não só esses conhecimentos, como também as restrições como, por exemplo, o tempo de duração do projecto. Devo admitir que eu próprio, já com experiência no Dreamweaver, fui adquirindo novos conhecimentos deste programa, aumentando o meu domínio desta ferramenta. Terminado o site tentei obter feedback de algumas pessoas inexperientes em web-design e o resultado foi razoável. Julgo então ter conseguido pelo menos a eficácia mínima exigida para o site. Embora tenha a certeza que com mais algum tempo seria possível obedecer a mais alguns requisitos importantes do e-learning e portanto elaborar um curso mais eficaz e mais pormenorizado, munido de ferramentas de gestão e avaliação de desempenho dos alunos. Sendo assim, considero positivo o balanço deste projecto e considero atingidos os objectivos a que me propus. 41

44 42

45 Anexos 43

46 7 Textos do Curso Nesta secção serão apresentados integralmente os textos (e imagens) que constituem o curso de e-learning de Dreamweaver MX que foi criado neste projecto. 44

47 MACROMEDIA DREAMWEAVER Módulo 1 Parte I 1.1. Introdução ao HTML Neste capítulo será feita uma introdução aos conceitos de media linear e hipermedia. Abordaremos ainda os conceitos básicos do HTML e da estrutura de um documento. Objectivos Após a conclusão deste capítulo, deverá ser capaz de: Distinguir hipermedia de media linear; Definir HTML; Compreender a estrutura dos elementos HTML; Descrever a estrutura básica de um documento web Media Linear Por media lineares entendem-se os media com um início definido e uma progressão linear até ao fim como, por exemplo, vídeo, áudio, etc. Os livros, por exemplo, são organizados com esta intenção. No entanto, a World Wide Web (WWW) tem uma organização diferente como veremos adiante Hipermedia A característica principal dos hipermedia é o poder de escolha. Os utilizadores simplesmente escolhem o que lhes interessa. Um bom exemplo reside nos CDs áudio, onde poderá escolher, por exemplo, a música 7 e ouvi-la quase instantaneamente. No caso de uma cassete áudio teríamos que percorrer a cassete do local onde se encontra até acharmos o início da música pretendida. 45

48 Adaptando este conceito ao texto, obtemos o hipertexto, o que nos permite ser transportados para uma nova localização dentro da mesma página, ou uma nova página, através dum simples clique numa parte pré-definida do texto (hiperligação). Com a divulgação destas tecnologias, as páginas de hipertexto (páginas web) multiplicaram-se e passou a haver a necessidade de estabelecer ligações entre elas. Criou-se então um sistema tipo teia de aranha (spiderweb) de ligações e páginas em computadores distribuídos por todo o mundo. A esse sistema chamamos World Wide Web um sistema onde as páginas se encontram armazenadas em diferentes servidores web e estão ligadas entre si pela Internet. Este sistema só é possível porque as páginas são criadas todas no mesmo formato. Este formato (ou linguagem ) é conhecido como Hypertext Markup Language (HTML), um conjunto de standards internacionais para documentos web. O objectivo seguinte deste curso é introduzi-lo ao formato de uma página HTML, onde irá aprender acerca dos componentes do HTML Hypertext Markup Language HTML O HTML é o conjunto de códigos que caracterizam o formato e aspecto do documento web. Esses códigos necessitam de ser contidos entre < e >, de forma a que os browsers sejam avisados de que um novo código vai ser iniciado. Estes códigos entre parêntesis são formalmente conhecidos como tags. Os códigos HTML estão sempre entre parêntesis e são case-insensitive (não importa se são letras maiúsculas ou minúsculas). O browser necessita de ser informado quando a descrição de um código será iniciada ou terminada. Para tal existe um elemento de abertura e um de fecho. O elemento de fecho distingue-se do elemento de abertura pelo / dentro dos parêntesis, como em </B>, por exemplo, para indicar o fim do texto em negrito. Podemos ver esse exemplo na linha seguinte: <B>Este texto apareceria em negrito no browser</b> A primeira palavra ou letra presente na tag é chamada Elemento. Um elemento é um comando que indica ao browser o que terá a fazer, tal como, por exemplo, <B> para indicar o texto em negrito. 46

49 As palavras que seguem o elemento, até >, são chamadas atributos. Os atributos são uma forma de descrever as propriedades do elemento. Por exemplo, um carro pode ter várias propriedades ou atributos cor, tamanho, número de portas, etc. Da mesma forma, os elementos podem ter propriedades ou atributos. Os atributos são colocados sempre à direita do elemento e são separados por um espaço e seguidos de um sinal de igualdade. O valor do atributo deverá ser colocando entre aspas. Vejamos o exemplo seguinte: <FONT COLOR= BLUE SIZE= +1 >Este texto teria o tamanho 1 e cor azul.</font>. No exemplo, FONT é o elemento, COLOR e SIZE são atributos e BLUE e +1 são valores O Documento Básico Existe um elemento que indica ao browser que o documento que se segue é um documento HTML. Esse elemento é logicamente o HTML. A tag <HTML> indica ao browser o início do documento e </HTML> indicará o fim. Portanto todo o documento é envolvido por estas duas tags. Este elemento contém dois sub-elementos HEAD e BODY. Estes elementos são necessários para formar qualquer documento HTML. <HTML> </HTML> <HEAD> <TITLE>Título do documento</title> </HEAD> <BODY> Corpo do documento </BODY> Objectivo Deste Capítulo Este capítulo teve como objectivo ensiná-lo a aplicar elementos e atributos no desenho das páginas. Foram revistos vários elementos básicos da especificação HTML actual. Nem todas as páginas usam todos os elementos mas, no entanto, é vantajoso o conhecimento destes. 47

50 Questões de Revisão A. O que significa HTML? B. O que é um elemento? C. O que são atributos de um elemento? Sumário Após a conclusão deste capítulo, deverá ser capaz de: Distinguir hipermedia de media linear; Definir HTML; Compreender a estrutura dos elementos HTML; Descrever a estrutura básica de um documento web. Parte II 1.2. Ambiente do Dreamweaver Neste capítulo fazemos uma introdução ao ambiente do Dreamweaver MX. Numa perspectiva simplista, o programa consiste em várias janelas, painéis, objectos, inspectores e ferramentas utilizadas para construir páginas web e gerir sites. Objectivos No final desta secção, deverá ser capaz de: - Identificar os componentes principais do ambiente do Dreamweaver; - Escolher e modificar as preferências do programa Ambiente A principal vantagem do uso do Dreamweaver reside no facto de não ser necessário escrever o código todo à mão como se fazia em tempos não muito distantes. O Dreamweaver faz isso por si de modo fácil, simples e rápido. 48

51 No Windows, pode escolher entre dois layouts distintos: o layout integrado all-in-one-window e o layout flutuante (semelhante ao do Dreamweaver 4). No Macintosh, apenas o layout flutuante está disponível. Para escolher um layout escolha um dos seguintes: Área de trabalho do Dreamweaver MX é uma área de trabalho integrada, na qual todas janelas e painéis estão integrados na janela única da aplicação, com os painéis à direita. Recomendado para a maioria dos utilizadores. Se activar Estilo do Homesite/Coder terá a mesma área integrada mas com os painéis à esquerda à semelhança do Macromedia Homesite e do Macromedia Coldfusion Studio, e com todas as janelas de documento assumindo a vista de código por defeito. Este layout é recomendado a utilizadores dos programas acima referidos. 49

52 Área de trabalho do Dreamweaver 4 é um layout semelhante ao da versão 4 do programa, na qual cada documento tem a sua própria janela flutuante. Os painéis estão juntos mas não estão integrados numa janela maior da aplicação. Se pretender mudar o layout da área de trabalho depois de já ter escolhido: 1. Escolha Editar > Preferências 2. Seleccione a categoria Geral na lista de categorias à esquerda, caso não esteja já seleccionada 3. Clique no botão Alterar área de Trabalho 4. Seleccione um layout e clique em OK. Uma mensagem de alerta surgirá com o aviso de que o novo layout será apresentado apenas depois de reiniciar o programa. 5. Clique em OK para fechar o aviso 6. Clique em OK de novo para fechar as Preferências 7. Reinicie o Dreamweaver. 50

53 Barra de Título A barra de título apresenta o título do documento HTML e o nome do ficheiro HTML actual. Tal é processado pela tag <TITLE> </TITLE>, que se posiciona no cabeçalho de um documento HTML. O que quer que se escreva entre as tags <TITLE> é considerado título do documento. Não é necessário atribuir o mesmo nome ao ficheiro HTML (nem convém). Por exemplo, se visitar o site da Macromedia ( e examinar o título do documento HTML na barra de título do seu browser, verá que o título é Macromedia. Em geral, o nome actual do ficheiro difere. O nome do ficheiro da página inicial é normalmente índex.htm. No Dreamweaver, o título do documento é apresentado primeiro, seguido do nome do ficheiro Barra de Menu Esta barra contém os vários menus: Arquivo; Editar; Exibir; Inserir; Modificar; Texto; Comandos; Site; Janela; Ajuda. Estes itens são usados para executar várias tarefas e comandos durante a criação das páginas. Conforme formos avançando, tornar-se-á familiar com a maioria dos itens do menu. Neste momento, não vamos referir todas as opções do menu. Vamos referir as opções de menu quando necessário ao longo do curso. Quando for necessário chamar um item, tal como Arquivo e depois Abrir, esse item será descrito como Arquivo > Abrir Barra Inserir O Dreamweaver MX possui uma barra intitulada Inserir que contém ícones de atalhos para as ferramentas mais comuns do programa, ou seja, aquelas mais utilizadas na construção do site, organizados por separadores de categorias. A categoria dos ícones de atalhos apresentados pode ser mudada clicando no separador da categoria pretendida. 51

54 Barra de Edição Esta barra possui ferramentas que exibem informações do arquivo em edição, tais como, o título, exibição de layout, layout e HTML, e apenas HTML. Além dos modos de exibição, permite também aceder ao gerenciamento de arquivos, previsão no browser, consulta de referência das tags e opções de visualização Painéis Os painéis contêm o controlo da maior parte das funções usadas no Dreamweaver. Podemos manipular o conteúdo criado de várias formas. Estes painéis têm como função tornar disponível rapidamente o acesso às propriedades do conteúdo desenvolvido, de forma a podermos fazer mudanças rapidamente e facilmente. O Dreamweaver MX apresenta os painéis organizados em grupos. Os grupos de painéis apresentados por defeito são os seguintes: Design; Código; Aplicativo; Arquivos; e Respostas. Dentro de cada um dos grupos encontraremos painéis específicos a esse grupo. Se não consegue encontrar um certo painel, inspector ou janela que está marcada como aberta, escolha Janela > Organizar os painéis, de forma a reorganizar todos os painéis abertos. 52

55 Design Neste painel temos as definições dos estilos CSS e HTML, e os seus comportamentos. Código Aqui temos os painéis Inspector de Tags, Trechos e Referência. No Inspector de Tags podemos verificar a disposição e ordenação das tags do documento, onde podemos facilmente ver se alguma tag se encontra incompleta ou errada na sua estrutura. No painel Trechos temos partes de código pré-definidas (como se de partes de um modelo se tratassem) que poderemos usar para a nossa página. Estas partes encontram-se organizadas por categorias e funções. No painel Referência poderemos consultar descrições e referências dos elementos HTML. Funciona como um dicionário de HTML. 53

56 Aplicativo Este grupo de painéis apresenta painéis direccionados para a construção de sites com dados dinâmicos, algo avançado para nos referirmos neste momento. Arquivos Aqui são apresentadas as janelas do Site e Propriedades. A janela do Site permite-nos visualizar e definir o site, bem como a sua estrutura. No painel Propriedades podemos ver as propriedades dos vários componentes do site. Repostas O painel Respostas permite-nos obter respostas às nossas dúvidas através de acesso directo ao site da Macromedia, aceder a tutoriais e ficar a par de novidades relacionadas com o Dreamweaver. 54

57 Janela do Documento A janela do documento corresponde à área de desenvolvimento. É onde a página que está a ser criada ou modificada será exibida na forma WYSIWUG (What You See Is What You Get O que vê é o que terá). Nesta forma a página sairá no browser da mesma forma que é apresentada na janela do documento, com a excepção das linhas e marcas de símbolos visíveis que identificam algum atributo à imagem ou texto. Por exemplo, podemos escrever o texto na janela do documento tal como se escreveria num processador de texto. Podemos inserir imagens, criar tabelas, etc. Mais adiante falaremos da variedade de elementos que podem fazer parte duma página web típica. Selector de Tags O Selector de Tags, no fundo da janela do documento, apresenta um conjunto de tags dependendo da posição do cursor no documento. Conforme começar a criar páginas, a conveniência do Selector de Tags tornar-se-á mais aparente para si. Para escolher uma tag no Selector de Tags, simplesmente clique nela. Tamanho da Janela do Documento O tamanho actual da janela do documento é mostrado na caixa de tamanho da janela. O tamanho da janela do documento pode ser 55

58 alterado, bastando clicar na borda da janela, segurar o botão, arrastar e soltar o botão quando o tamanho for o pretendido. As dimensões são expressas em pixéis. Os monitores de computador são compostos por pontos individuais chamados pixéis. Hoje em dia, os computadores têm um grupo de dimensões fixas desde 640x480 até 1280x1024 ou superior. Os websites devem ser desenhados de acordo a funcionar bem em todas as resoluções a partir de 640x480. Os designers normalmente restringem-se a 640x480 de modo a assegurar que todos podem ver o conteúdo das páginas sem ter que fazer scroll. Tempo Estimado de Download A caixa de indicadora de tempo estimado de download indica o tempo estimado que o utilizador demorará a carregar a página na sua forma actual pela Internet. O tempo estimado varia consoante o conteúdo - quanto mais conteúdo tiver, mais demorado será o download. O tempo depende também da ligação do utilizador, que pode variar desde modems muito lentos a ligações directas à Internet. O Dreamweaver assume por defeito que os utilizadores usam um modem de 28.8Kbs para ligar à Internet. Pode alterar esta definição nas preferências do Dreamweaver, como iremos ensinar mais tarde Inspector de Propriedades O Inspector de Propriedades exibe as propriedades de qualquer dos componentes contidos na página. Por exemplo, quando se trabalha com texto, esta barra apresenta o formato do texto (parágrafo, cabeçalho); a fonte a ser usada, o tamanho, a cor, formatação (como negrito, itálico, alinhamento, lista com marcadores/numeradores e tabulação), link, etc. Tudo o que for inserido na janela do documento terá informações e definições importantes apresentadas na barra do Inspector de Propriedades. 56

59 Ajustar Preferências O Dreamweaver permite que se ajustem as preferências de forma a moldar o ambiente ao nosso gosto. Neste ponto não vamos referir todas as preferências porque algumas delas só podem ser compreendidas depois de conhecer melhor o código HTML e ter iniciado o desenvolvimento de um site com o Dreamweaver. Para aceder às preferências do Dreamweaver seleccione Editar > Preferências. Será então apresentada a caixa de diálogo das preferências. Nessa caixa é apresentada uma lista de categorias. Altere as preferências clicando num dos itens apresentados da lista. Dependendo da categoria escolhida, aparecerão as opções ao lado da lista de categorias. Essas opções podem ser alteradas usando as drop down lists, escolhidas através das caixas de selecção ou introduzindo números ou caracteres nos campos Previsão no Browser Conforme vai criando as páginas, é importante poder certificar-se do resultado final no browser. Quando a janela do documento está aberta, pode pressionar F12 para visualizar a página no browser pré-definido ou CTRL+F12 para a abrir no browser secundário. 57

60 Para designar os browsers (primário e secundário), aceda às preferências (Editar > Preferências) e clique na categoria Visualizar no navegador. Na lista de browsers pode haver, ou não, uma listagem de browsers (dependendo da instalação feita). Para adicionar browsers à lista, clique no botão + e escolha o browser percorrendo o disco até a localização do executável. Escolha o browser na lista de browsers e clique em Navegador primário ou Navegador secundário, conforme a ordem pretendida Questões de Revisão A. Qual a função da Janela do Documento? B. Qual o propósito do Inspector de Propriedades? C. Como se podem modificar as preferências? Sumário Como resultado do estudo deste capítulo, neste momento deverá ser capaz de: Identificar os componentes principais do ambiente do Dreamweaver; Escolher e modificar as preferências do Dreamweaver. 58

61 Parte III 1.3. Gestão de Sites Neste capítulo aprenderá a usar o Painel do Site do Dreamweaver para construir, gerir e manter websites. Objectivos: Depois de completar esta secção, deverá ser capaz de: - Entender como os sites estão tipicamente estruturados; - Criar um website no Painel do Site; - Usar as funções de gestão de sites do Dreamweaver Anatomia de um Site Um website é uma colecção de páginas web. Os sites consistem entre uma a milhares de páginas. Antes de começar a criar páginas web individuais, é importante compreender o contexto ou ambiente entre os quais as páginas funcionam Estrutura da Página Uma página é efectivamente um documento de texto, visto que qualquer editor de texto pode ler um ficheiro HTML. Um documento HTML é uma colecção de código HTML e, potencialmente, código de script, tal como JavaScript (veremos numa fase mais avançada deste curso). Quaisquer imagens ou outros media, tal como Flash ou QuickTime, são referenciados. Quando um ficheiro é referenciado, há efectivamente um link contido no ficheiro HTML para um ficheiro externo. 59

62 Por exemplo, uma página com uma animação Flash consistiria em dois ficheiros o ficheiro HTML e o ficheiro do swf (Flash). O browser leria do ficheiro HTML a referência ao ficheiro swf e apresentá-lo-ia apropriadamente no browser Estrutura do Site É normal um site ser composto por centenas ou mesmo milhares de ficheiros HTML e media. Todos esses ficheiros são armazenados dentro duma pasta. Esta pasta é referida muitas vezes como Raiz do Site ou Pasta Raiz. Imagine a pasta raiz como uma pasta do seu disco. Contidos nessa pasta terá as tais centenas ou milhares de ficheiros necessários ao seu site. No entanto, quanto maior for o site em número de ficheiros, maior será a dificuldade em gerir, produzir e manter o site. Portanto o modo como organiza os ficheiros dentro da pasta raiz é de extrema importância, sendo inteiramente escolha sua. Para contornar o problema, o modo como geralmente se organizam os ficheiros do site é estruturado em várias sub-pastas que espelham a estrutura de navegação do próprio site. Por outras palavras, vamos criar séries de sub-pastas que espelham as categorias que dividem o site em secções distintas. As categorias são normalmente ligadas a botões nas páginas que produzem a navegação pelo site. 60

63 No exemplo apresentado acima temos uma sub-pasta Imagens onde guardamos as imagens, uma sub-pasta Templates onde guardamos os modelos de páginas e na pasta raiz temos os ficheiros 1.1.htm e os ficheiros índex.html Raiz do Site Na raiz do site ou nível do topo da estrutura do site, colocámos o ficheiro HTML que será a home page, ou seja, a página que os visitantes iram encontrar inicialmente. Este ficheiro é normalmente chamado índex.html, índex.htm ou default.htm. O nome atribuído ao ficheiro deve ser escolhido tendo em conta as definições do servidor web onde o site se encontra. Para tal, deve consultar o administrador do servidor. A razão pela qual se processa desta forma é que quando o utilizador entra em, por exemplo, o servidor que armazena o website do ISEP irá procurar um ficheiro por defeito que será a página inicial (home page). Desta forma o utilizador terá simplificada a sua tarefa pois não terá de escrever (e memorizar, se for o caso) algo como O site pode conter inúmeras imagens que, por várias razões, nos pode interessar separar dos ficheiros HTML. Então convém criar também uma sub-pasta para as imagens e armazenar lá todas as imagens comuns a todo o site, tais como botões que aparecem em todas as páginas (em menus de navegação, por exemplo) ou logótipos. Podemos criar outras pastas para outros conteúdos como, por exemplo, Flash. Finalmente, criamos um conjunto de sub-pastas baseadas nas categorias em que o nosso site está dividido de forma a facilitar a organização dos ficheiros HTML que também são numerosos. Estruturar o site desta forma facilitará o nosso trabalho, ajudando a criar os links das páginas e actualizar o seu conteúdo Janela do Site A organização é, como temos estado a ver, um elemento chave do bom web design. Uma das ferramentas mais proeminentemente organizacionais do Dreamweaver é a Janela do Site. Antes de abordarmos a mecânica da construção de páginas individuais, devemos habituarmo-nos a isso. A Janela do Site serve para lhe dar uma visão da estrutura geral do seu site e permite-lhe criar, gerir e aceder a páginas facilmente. 61

64 Antes de começar a construir páginas, deverá criar o site propriamente dito, ou seja, a pasta onde todas as suas páginas e anexos (ficheiros não-html tais como imagens, por exemplo) serão guardados. Criada a pasta, retorne ao Dreamweaver. Para criar, ou definir um site, deve usar a Janela do Site. Para abrir este painel seleccione Janela > Site, ou simplesmente clique na seta do painel Arquivos e no separador Site. Use este painel para gerir, criar e manter o website. O menu drop-down Editar os Sites contém a lista dos seus websites. Como queremos criar um novo site, escolhemos do painel a opção Definir um Site. Aparecerá então no ecrã o assistente de definição de sites. O assistente tem dois separadores básico e avançado. Pode escolher o que melhor se adaptar a si. Para guardar o Mapa do Site como uma imagem, escolha Arquivo > Salvar o mapa do site. Pode então editar a imagem num editor gráfico. Pode usar essa imagem numa apresentação, por exemplo Assistente de Definição do Site Básico O primeiro passo do assistente é atribuir um nome ao site. Este nome irá identificar o site no painel do site. De seguida o assistente questiona se deseja usar uma tecnologia de servidor (tópico avançado que não iremos abordar para já). Escolha Sim ou Não e, no primeiro caso, indique qual a tecnologia do servidor. 62

65 O terceiro passo consiste em indicar ao programa a forma como irá trabalhar com os ficheiros se trabalha com cópias locais e as coloca no servidor quando terminar; se trabalha com os ficheiros directamente no servidor; ou se os trabalha directamente no servidor via FTP ou RDS. Não se esqueça de indicar a pasta onde os ficheiros serão postos. Por fim, o último passo é indicar a forma como se liga ao servidor remoto (nenhuma, FTP, Local/Rede, RDS, Banco de dados ou WebDAV) e os dados necessários a essa ligação. Clique em OK para confirmar a criação do site Assistente de Definição do Site Avançado A organização deste assistente avançado é semelhante à da caixa de diálogo das Preferências organizado por categorias. Vamos começar pela categoria Informações Locais. Nesta categoria indicamos o nome do site e a pasta raiz local. Na opção Actualizar a lista de arquivos locais automaticamente indique se deseja que o Dreamweaver proceda a uma actualização automática de cada vez que copiar ficheiros para a pasta local. 63

66 A pasta padrão para as imagens é o local onde o Dreamweaver guardará as imagens do website. Caso pretenda que seja a pasta raiz, deixe em branco. Na caixa de texto Endereço HTTP", escreva o URL do site quando finalizado. Isto permitirá que o Dreamweaver verifique os links dentro do site. A última opção desta categoria é a activação da cache. É recomendado que active a cache pois torna o desempenho do Inspector de Propriedades e do Painel Arquivos. A cache serve para o programa guardar informações relativas aos ficheiros e propriedades. O Dreamweaver percorrerá todos os ficheiros e fará um registo de todos os links no website. Quando mover um ficheiro ou pasta dentro do website usando a Janela do Site, qualquer link de e para o ficheiro ou ficheiros na pasta será automaticamente actualizado. Não terá que percorrer cada um dos ficheiros para actualizar os links por si próprio. A segunda categoria é Informações Remotas. Aqui indica a forma de acesso ao servidor, tal como foi explicado no assistente básico. Escolha Nenhum se não necessita de pôr as páginas online. Escolha Local/Rede para indicar que o servidor é local, significando que tem acesso directo ao servidor através da rede local. Terá que designar uma pasta e um caminho par a pasta tal como fez com a pasta de raiz local. As pastas remotas e locais neste caso podem ser as mesmas se trabalhar actualizando os ficheiros do website directamente. Escolha FTP quando necessita de transferir o website para um servidor ao qual não tem acesso directo, como por exemplo num ISP. Necessita de fornecer 64

67 ao Dreamweaver o FTP Host e Host Directory, bem como o login e a password. A Host Directory e o Host podem ser obtidos do seu ISP ou administrador da rede. Active Save para guardar a password, de modo a não ter que a introduzir cada vez que acede ao servidor. Caso servidor web esteja sob um Firewall (nas Preferências). Mais uma vez, o ISP ou o Administrador da rede podem fornecer-lhe a informação necessária. O Dreamweaver permite a ligação a SourceSafe ou WebDAV. Estes tipos de bases de dados são normalmente empregues por grandes equipas de design, onde todos necessitam de aceder aos mesmos ficheiros e requerem que se mantenha um registo das mudanças e actualizações que estão a ser feitas. Se está a trabalhar num ambiente colaborativo, onde existem pelo menos duas, se não mais pessoas a desenvolver o website, escolha Activar a devolução e retirada de arquivos e Retirar os arquivos na abertura para que o Dreamweaver lhe indique a si e aos outros quem está a trabalhar em que ficheiros. Assim um utilizador não pode alterar um ficheiro no qual outra pessoa está a trabalhar. De forma a este sistema funcionar, todos terão que partilhar a mesma pasta de raiz local. Na categoria seguinte, Servidor de Teste, indicamos o tipo de tecnologia de servidor com que vamos (caso exista) trabalhar. 65

68 A categoria Encobrindo permite excluir determinados ficheiros e pastas de todas as operações envolvendo o site. Para o fazer, active a opção Activar o encobrimento e de seguida indique quais as pastas e/ou ficheiros que deseja excluir das operações. A categoria seguinte é Design Notes. Num ambiente colaborativo, onde múltiplas pessoas trabalham no mesmo site, pode ser necessário e conveniente passar notas uns aos outros acerca do seu trabalho. Mesmo que seja apenas um único designer, pode ser útil manter notas para si próprio acerca de conteúdos particulares nas páginas. No Dreamweaver, podemos prender notas a páginas individuais ou conteúdos das páginas (tais como filmes do Flash, por exemplo). Para activar as notas de design, clique na caixa Manter as Design Notes. Se 66

69 necessitar de partilhar notas com outros designers, clique na caixa Carregar as Design Notes para Compartilhamento nas definições do site. A penúltima categoria é Layout do Mapa do Site. Aqui vamos configurar o mapa do site. No campo Home Page indique o caminho (ou faça browse clicando na botão da pasta) até à página inicial. Número de Colunas e Largura da Coluna referem-se ao número de páginas a exibir por linha na janela do mapa do site e a largura em pixeis da coluna respectivamente. 67

70 Escolha em Identificadores de Ícones se deseja que as legendas dos ícones das páginas sejam dadas pelos nomes dos ficheiros ou pelos títulos das páginas. Opcionalmente pode activar a exibição/inibição de arquivos ocultos e a exibição de arquivos dependentes para apresentar os ficheiros não- HTML, tais como filmes de Flash e imagens. Finalmente, em Colunas de Exibição de Arquivos, acertamos as opções referentes às colunas com informação sobre os ficheiros. Esta função é especialmente útil se o seu site tem atributos únicos que necessitam de ser seguidos durante o seu ciclo de desenvolvimento. Algumas das opções disponíveis permitem-lhe ajustar o nome de uma coluna, alinhamento e visibilidade. Pode também associar colunas com notas de design, de modo a que a informação possa ser actualizada sempre que a informação na nota seja alterada Criar Ficheiros e Pastas na Janela do Site Pode criar novos ficheiros ou pastas através da Janela do Site. Para isso, simplesmente clique em Arquivo > Novo Arquivo. Um novo ficheiro, por defeito chamado Untitled.htm será criado na pasta actual. Pode então renomear o ficheiro de imediato ou renomear o ficheiro posteriormente ao clicar duas vezes sobre ele. Pode renomear qualquer ficheiro ou pasta no painel e, se houverem links para esse ficheiro ou ficheiros dentro da pasta, o Dreamweaver encarregar-se-á de actualizar automaticamente todos os ficheiros locais com as mudanças. 68

71 Para editar o ficheiro basta clicar duas vezes nele. Uma Janela de Documento será aberta e nela será apresentado o conteúdo. Edite o ficheiro então como normalmente faria. Crie pastas da mesma forma. Clique com o botão do lado direito sob a pasta de raiz do site para criar a pasta directamente debaixo da raiz, ou clique com o botão direito do rato sob qualquer pasta para criar uma sub-pasta a essa pasta. Para abrir e fechar pastas, simplesmente clique no ícone + para expandir e no ícone - para fechar Reorganizar a Estrutura do Site Para reorganizar a estrutura do site, tal como mover ficheiros ou pastas de um local para um outro, simplesmente clique, arraste e largue os ficheiros ou pastas na localização pretendida dentro do site. Ao proceder a essa mudança, o Dreamweaver pergunta (caso a opção tenha sido activada) se pretendemos actualizar um link relativo que muda por causa da nova localização. Clique em Actualizar para o fazer. Se não clicar em Actualizar, o link passa a ficar inválido e terá que o actualizar manualmente. Usar a Janela do Site é essencial ao desenvolvimento, gestão e manutenção das páginas e sites. Existem mais funções adicionais que iremos examinar mais tarde no curso Questões de Revisão A. Quais são as principais vantagens de usar a Janela do Site para criar o website? B. Como atribui a localização remota do site na Janela do Site? Sumário Terminado este capítulo deverá ser capaz de: Entender como são estruturados os websites; Definir um site na Janela do Site; Usar as funções do painel Arquivo. 69

72 Parte IV 1.4. Anatomia e Propriedades de uma Página Nesta secção iremos rever o HTML e a estrutura básica de um documento, ajustaremos propriedades chave da página e examinaremos o processo de colocação dos elementos. Objectivos: No final desta secção deverá ser capaz de: - Descrever a estrutura básica de um documento; - Identificar os sub-elementos do header; - Compreender como inserir elementos nas páginas Elementos do Cabeçalho (Header) <HTML> <HEAD>Contém sub-elementos que definem o cabeçalho: <TITLE>O título da página é o que aparece na lista de favoritos do browser e na barra de titulo do browser (em alguns browsers). O título do seu documento deverá ser pensado de forma a descrever a página o máximo possível.</title> <META>Contém informações, tais como palavras-chave, autor, etc.<meta> <SCRIPT>Aqui coloca-se todo o tipo de scripts, normalmente JavaScript ou VBScript.</SCRIPT> <STYLE>Contém informação de CSS (Cascading Style Sheet). </STYLE> <LINK>Define uma relação com outro objecto na web. Pode ser usado para estabelecer uma ligação a uma folha de estilo ou secção de JavaScript.</LINK> </HEAD> <BODY> 70

73 </BODY> </HTML> Os restantes elementos HTML são colocados entre estas duas tags. Base, Meta, Script, Link e Style são tópicos abordados mais tarde neste curso Propriedades da Página Clique com o botão direito do rato na janela do documento e escolha Propriedades da Página. Surgirá no ecrã uma janela onde poderá definir e modificar as propriedades da página que está a editar. Estas definições são relativas ao HEAD e BODY, nomeadamente título, imagem de fundo, cor de fundo, cores do texto e links, tipo de codificação, trace image, transparência da trace image e informação acerca da pasta actual da página e a localização da raiz do site no disco. As alterações feitas nessa janela reflectir-se-ão automaticamente na janela do documento e consequentemente na página Texto, Links, Links Visitados e Links Activos Pode acertar a cor do texto, links, links visitados e links activos, se clicar na caixa de cores e escolher uma cor da palete de cores apresentada. 71

74 Por defeito, a cor escolhida para o texto pelo Dreamweaver é o preto. Todos os browsers têm as mesmas cores por defeito para as várias cores de link. Se pretende usar os valores por defeito, então é desnecessário especificar as cores do link. No entanto, é sempre necessário especificar a cor de fundo porque as versões antigas do Netscape Navigator e do Internet Explorer têm cores de fundo diferentes das versões actuais. As versões 4.x e superiores assumem o branco por defeito. As versões anteriores assumem o cinzento Margem Esquerda Para definir a distância em pixeis entre os conteúdos e a margem esquerda, introduza um valor no campo Margem Esquerda. Este atributo existe apenas no Internet Explorer. O Dreamweaver adiciona à tag <BODY> o atributo leftmargin. Suponhamos que pretendemos vinte pixeis. O código adicionado pelo Dreamweaver seria o seguinte: <body leftmargin= 20 > Margem Superior Para definir onde o conteúdo da página começa a partir do topo da janela do browser, introduza o valor no campo Margem Superior. Este atributo também é específico ao Internet Explorer. O Dreamweaver adicionará o atributo topmargin ao BODY (vinte seria o número de pixeis que pretendemos de margem): <body topmargin= 20 > Largura da Margem O campo Largura da Margem tem exactamente a mesma função que o campo Margem Esquerda tem, mas aplicada ao Netscape Navigator. O seguinte código será adicionado ao BODY (mais uma vez, se pretendêssemos vinte pixeis): 72

75 <body marginwidth= 20 > Altura da Margem Da mesma forma que o campo Margem Superior, o campo Altura da Margem define onde a página começa a partir do topo. Este atributo é referente ao Netscape Navigator e é adicionado o seguinte código à tag: <body marginheight= 20 > O Dreamweaver apresenta atributos exclusivos a cada um dos browsers, de forma que a página funcionará correctamente em ambos Codificação do Documento Países diferentes e linguagens diferentes usam conjuntos de caracteres diferentes (essencialmente alfabetos diferentes). A codificação do documento consiste nisso mesmo. Neste campo deve escolher entre uma variedade de conjuntos de caracteres que deseja usar na sua página. A definição por defeito é Western (Latin 1), o standard para a maior parte da Europa e América do Norte. A codificação do documento é indicada na tag <META>, assunto abrangido mais tarde neste curso. As tags <META> estão sempre no HEADER dos documentos HTML. O Dreamweaver coloca automaticamente a sua indicação no código HTML do documento. <HEAD> <TITLE>Exemplo</TITLE> <meta http-equiv= Content-type content= text/html; charset=isso > <HEAD> Imagem de Rastreamento e Transparência A Imagem de Rastreamento é uma imagem colocada no documento para servir de referência ao desenho da página. Esta imagem não será apresentada aquando da visualização no browser mas sim aquando da 73

76 sua edição no Dreamweaver. Esta permanecerá no fundo da janela do documento e será uma imagem do aspecto que pretendemos para a página. Assim podemos seguir o layout e posicionar os elementos nas posições exactas. A Transparência da Imagem é definida através duma régua deslizante onde indicamos até que ponto pretendemos (ou não) que a Imagem de Rastreamento seja transparente na janela do documento Inserir Elementos Os elementos ou tags são os componentes que criam a estrutura de um documento HTML. Tabelas, imagens, formulários e plug-ins são apenas alguns dos muitos elementos que uma página pode conter. O Dreamweaver não se refere a esses componentes como elementos, mas antes como objectos, os quais são acedidos ao clicar no ícone que representa a tag, tal como Inserir Imagem, por exemplo; no entanto, é aconselhado que se familiarize com este termo para referência futura. Posicione o cursor na janela do documento onde quer inserir o elemento. Clique no ícone correspondente na barra de menus. Por exemplo, para inserir uma imagem na sua página, clicaria em Inserir Imagem. Em alternativa à barra de menus, pode usar a barra Inserir. No entanto, nem todos os elementos têm o seu botão nas guias. Pode escolher diferentes categorias de guias, conforme o tipo de elemento que deseja Modificar Atributos dos Elementos Se decidir modificar os atributos dos elementos, existem várias formas de o conseguir: 1. Escolha o elemento ou conteúdo que deseja modificar. O Inspector de Propriedades muda para reflectir o actual tipo de elemento que seleccionou. Por exemplo, se escolheu uma imagem no seu documento, o Inspector de Propriedades conterá os atributos aplicáveis à tag <IMG>, tais como a localização da imagem, a largura e altura, e outros atributos que iremos referir mais tarde. 74

77 Em adição, se o elemento pode agir como hyperlink, o Inspector de Propriedades conterá os controles apropriados ao link. 2. Outra forma de modificar as propriedades de um elemento é seleccioná-lo e clicar com o botão do lado direito no elemento e escolher entre vários atributos aplicáveis ao elemento. Por exemplo, o texto é um conteúdo que pode ser afectado por uma variedade de elementos. Se escolher uma linha de texto e clicar com o botão do lado direito do rato na selecção, um menu pop-up surgirá contendo todos os elementos aplicáveis e atributos Apagar Elementos Para apagar elementos também existem várias formas de o conseguir. 1. Escolha o objecto ou ficheiro que deseja remover e pressione a tecla Delete. 2. Escolha o objecto ou ficheiro que deseja remover. Percorra o menu Editar e escolha Recortar. 3. Clique com o botão direito do rato no objecto ou ficheiro que deseja remover. Escolha Recortar no menu pop-up. 75

78 Questões de Revisão A. Como cria o título para um documento HTML? B. Detalhe a estrutura básica de um documento HTML. C. Como insere elementos na janela do documento? D. A cor do link é um atributo pertencente ao elemento <HEAD> ou <BODY>? E. Como muda a cor de fundo, a cor do texto e a cor dos links de um documento HTML no Dreamweaver? Sumário Finalizada esta secção, deverá ser capaz de: Descrever a estrutura básica de um documento; Identificar os sub-elementos do header; Compreender como inserir elementos nos documentos. 76

79 MACROMEDIA DREAMWEAVER Módulo 2 Parte I 2.1. Formatação de Texto Neste capítulo abrangeremos a formatação de texto (ou caracteres). Iremos mencionar cabeçalhos, parágrafos, intervalos de linha, réguas horizontais e melhorar o texto com negrito, itálico e outras opções de formatação. Objectivos Após conclusão deste capítulo, deverá ser capaz de: Enunciar e descrever os diferentes cabeçalhos; Inserir intervalos de linha e parágrafos; Criar uma régua horizontal; Inserir múltiplos espaços entre caracteres; Formatar texto com negrito e itálico; Alterar a cor, tamanho e fonte do texto; Alinhar texto Cabeçalhos Os cabeçalhos <H1> até <H6> são geralmente usados em divisões principais do documento. Não sendo obrigatórios, podem ser dispostos em qualquer ordem mas o resultado obtido é melhor e mais coerente seguindo uma ordem onde <H1> é o nível de cabeçalho mais alto, <H2> o seguinte e por aí em diante. Não convém então saltar níveis, como por exemplo, colocar um <H4> depois de um <H2> sem que antes tenha sido usado um <H3>. O tamanho do texto varia de grande (H1) a pequeno (H6). Como alternativa ao uso destes elementos, podemos usar o <FONT> para alterar o tamanho dos caracteres. Tal é menos prático pois a tag <Hx> tem tamanhos já pré-definidos e portanto consome menos código do que <FONT SIZE= x >. 77

80 Para inserir uma tag <Hx> clique no local do documento onde a pretende colocar (ou seleccione o texto que pretenda colocar como título) e em Formato no Inspector de Propriedades escolha o tamanho desejado. Por exemplo, escreva Exemplo de cabeçalho na Janela do Documento, aplique a tag <H1> a esse texto, o Dreamweaver gera o seguinte código: <H1>Exemplo de cabeçalho</h1> A melhor forma de comprovar a diferença é testar cada um dos elementos Hx ao mesmo tempo Parágrafos A tag <P> </P> serve para adicionar ao texto um espaço antes e depois do texto. Sempre que pressiona a tecla [ENTER] o Dreamweaver colocará o texto entre <P> e </P>. Por exemplo, se escrever Aprender a usar o Dreamweaver é fácil e depois pressionar [ENTER], o Dreamweaver gera o seguinte código: 78

81 <P>Aprender a usar o Dreamweaver é fácil</p> NOTA: Dado que é e fácil usam acentos, o Dreamweaver gera um código onde assinala isso mesmo mas, como ainda não aprendemos aqui, o código aqui apresentado não contém esses códigos especiais para os acentos Quebras de Linha As quebras de linha <BR> decidem onde o texto acabará, dando lugar a outra linha de texto ou outro conteúdo qualquer debaixo da linha actual, ou se continuará até ao fim da janela do browser. A diferença relativamente ao parágrafo está no facto de que quando usamos a tag <P> estamos a deixar uma linha em branco a seguir ao texto e quando usamos a tag <BR> apenas passamos para a linha seguinte, sem deixar uma de intervalo. Vejamos, se escrevermos O Dreamweaver é o melhor programa de edição HTML! e pressionarmos [ENTER] e depois escrevermos Aprender a usar o Dreamweaver é fácil., o resultado gerado pelo Dreamweaver será o seguinte: O Dreamweaver é o melhor programa de edição HTML! Aprender a usar o Dreamweaver é fácil. Se em vez de [ENTER] quisermos colocar uma tag <BR>, podemos fazê-lo de três formas distintas pressionar [SHIFT+ENTER] (a tecla SHIFT e ENTER ao mesmo tempo), seleccionar no menu Inserir / Caracteres Especiais / Quebra de Linha ou clicar no ícone na categoria Caracteres da barra Inserir. Então, se entre as duas frases usarmos um desses três métodos de colocação da tag <BR>, obteremos o seguinte resultado: O Dreamweaver é o melhor programa de edição de HTML! Aprender a usar o Dreamweaver é fácil. Temos então um único parágrafo <P> e duas linhas. Na Janela do Documento é fácil de concluir que se pediu uma linha nova pois o texto 79

82 não vai até ao fim da janela. O Dreamweaver pode apresentar indicações acerca das linhas de intervalo na Janela do Documento. Para tal basta ajustar as preferências (Editar / Preferências) na categoria Elementos Invisíveis e activar a caixa Quebra de Linha. Os Elementos Invisíveis são elementos especiais que afectam a forma como a página é apresentada não são visíveis naturalmente (da forma como o são as imagens e o texto). Ao activar a caixa Elementos Invisíveis, o Dreamweaver apresenta um ícone indicativo da tag <BR> de forma a podermos ver onde colocamos novas linhas Réguas Horizontais O elemento <HR> adiciona uma linha (régua) horizontal no documento. O Dreamweaver é o melhor programa de edição de HTML! Aprender a usar o Dreamweaver é fácil. Para obtermos o resultado apresentado em cima, adicionamos a régua horizontal com um clique no ícone da barra Inserir ou, alternativamente, se no menu Inserir / Régua Horizontal. A régua possui propriedades que podem ser alteradas no Inspector de Propriedades. 80

83 L (Largura) Largura da régua em pixéis ou percentagem da largura do ecrã. Se não especificar uma largura, o Dreamweaver assume 100% por defeito. A (Altura) Altura da régua em pixéis. Alinhar Alinha a régua à esquerda, centro ou direita. O defeito (opção Padrão ) é alinhar ao centro. Sombreado Decide se a régua deverá ter um aspecto 3D ou simples Espaços Entre Caracteres Se já praticou um pouco o texto na Janela do Documento do Dreamweaver, provavelmente já reparou que não é permitido mais que um espaço entre cada caracter. O problema é que por muito que tente aumentar o espaço, o Dreamweaver restringe-o sempre. A solução passa pelo elemento &nbsp (non-breaking space) que permite a introdução de espaços múltiplos entre caracteres, antes ou depois. Escolha no menu Inserir / Caracteres Especiais / Espaço Não Separável ou simplesmente clique no ícone da secção caracteres na barra Inserir. Alternativamente pode usar a combinação de teclas [CTRL+SHIFT+SPACE] para inserir espaços múltiplos Formatação de Caracteres A formatação dos caracteres permite melhorar o visual do texto. Tais modificações ao texto podem ser efectuadas recorrendo ao Inspector 81

84 de Propriedades ou ao menu Texto. As operações de formatação mais comuns estão disponíveis no Inspector de Propriedades. Formato Escolha entre Nenhum, Parágrafo, Cabeçalhos e Pré-formatado. Nenhum remove qualquer tag relativa a texto presente no texto seleccionado. Fontes Escolha na lista o tipo de fonte que pretende. Tente usar fontes que existam nos computadores dos utilizadores. Se os visitantes da sua página não têm essas fontes, então o aspecto da página será significativamente diferente, pois essas fontes serão substituídas por outras fontes contidas no computador do visitante. As fontes apresentadas por defeito na lista do Dreamweaver são normalmente comuns aos visitantes. Pode verificar que as fontes são apresentadas no Dreamweaver em grupos tais como Arial, Helvética, sans-serif. Se o visitante não tiver a fonte Arial no seu computador, o browser tentará usar a próxima fonte nesse grupo, neste caso a Helvética. 82

85 Pode adicionar fontes à lista do Dreamweaver do Inspector de Propriedades ao seleccionar Editar lista na lista de fontes. O código gerado pelo Dreamweaver será (por exemplo): <P><FONT face= Arial, Helvetica, sans-serif >Font Face</FONT></P> O atributo face é usado com o elemento FONT para especificar um tipo de fonte. Tamanho O menu drop-down Tamanho permite-nos alterar o tamanho do texto. O tamanho do texto por defeito é 3. Por essa mesma razão, escolher Nenhum ou 3, produz o mesmo resultado no texto. Se escolher valores positivos, aumenta o tamanho actual uma unidade. Caso escolha negativos, verá o texto subtraído uma unidade ao seu tamanho actual. Por exemplo, se pretender o tamanho 4 para o texto, o Dreamweaver produzirá o seguinte código: <P><FONT face= Arial, Helvética, sans-serif size= 4 >Font Face</FONT></P> Cor do Texto Pode escolher a cor na caixa de cores apresentada se clicar no ícone. Podemos escolher a cor directamente pela palete de cores ou introduzir o valor hexadecimal da cor pretendida na caixa ao lado. 83

86 Negrito <B> </B> Se clicar no ícone Itálico <I> </I> Se clicar no ícone coloca o texto em negrito. coloca o texto em itálico. Por exemplo, se pretender colocar o texto dos exemplos anteriores em itálico, negrito e com cor vermelha, o Dreamweaver produz o seguinte código: <P><B><I><FONT face= Arial, Helvética, sans-serif size= 4 color= #FF0000 >Font Face</FONT></I></B></P> Alinhamento Nas opções de alinhamento temos: os ícones,, e para alinhar o texto à esquerda (por defeito), centro, à direita da página, ou justitficá-lo. O atributo align não é um atributo do elemento <FONT> mas sim do elemento <P>, tal como podemos ver no seguinte exemplo: <P align= center ><I><FONT face= Arial, Helvetica, sans-serif size= 4 color= #FF0000 >Font Face</FONT></I></P> Indent Pode clicar no ícone para tabular o texto seleccionado. O elemento <BLOCKQUOTE> tabula o texto para um determinado espaço no HTML. Se clicar repetidamente nesse ícone adiciona múltiplos elementos <BLOCKQUOTE>. Para remover esses elementos, escolha o texto tabulado e clique no ícone. Exemplo: 84

87 <P><B> O Dreamweaver MX</B></P> <BLOCKQUOTE> <BLOCKQUOTE> <BLOCKQUOTE> <P>É fácil</p> <P>É útil</p> </BLOCKQUOTE> </BLOCKQUOTE> </BLOCKQUOTE> Resultado: O Dreamweaver MX É fácil. É útil Opções de Formatação de Caracteres Adicionais No ponto anterior cobrimos as opções de formatação mais comuns. No entanto existem mais opções, as quais podem ser acedidas no menu Texto / Estilo ou se escolher o texto, clicar com o botão do lado direito sobre essa selecção e escolher Estilo. 85

88 Algumas destas opções já não são suportadas pelos browsers actuais. Por exemplo, as tags <EM> e <STRONG> são idênticas às tags <I> e <B> quando rendidas pelos browsers modernos. Essas tags antigas são então depreciadas numa tentativa de desencorajar o seu uso Exercícios - Exercício 1 No seguinte exercício deverá criar um novo documento, o qual consiste em dois cabeçalhos, algum texto com quebras de linha e uma régua horizontal. Tarefas: 1. Crie uma nova pasta no site chamada exercicios ; 2. Crie um novo ficheiro nessa pasta chamado formatacao.htm ; 3. Dê ao documento o título seguinte, Cabeçalhos, Parágrafos e Intervalos ; 4. Escrever Dreamweaver na Janela do Documento e aplique a tag <H2>. Crie um novo parágrafo; 5. Escreva O Dreamweaver é fácil e útil. Certifique-se que a frase não está formatada com um elemento <Hx>; 6. Escreva A versão MX é a mais actual na linha logo seguida à frase anterior; 7. Crie um novo parágrafo. Escrever Régua Horizontal e aplique a tag <H3>. Crie outro parágrafo; 86

89 8. Escreva As réguas horizontais são separadores visuais standard no HTML. Certifique-se que esta frase não está formatada com uma tag <Hx>; 9. Insira uma régua horizontal. Alinhe à esquerda e reduza o tamanho para 300 pixéis; 10. Guarde o documento. - Exercício 2 Neste exercício deverá construir uma página com fontes que não as fontes por defeito, alterar a cor da fonte, o tamanho, o alinhamento, etc. Tarefas: 1. Crie um novo ficheiro na pasta exercícios chamado formatacao.htm ; 2. Dê ao documento o seguinte título Formatação de Caracteres ; 3. Escreva O Dreamweaver MX é muito bom e na linha seguinte A versão MX é muito prática ; 4. Insira uma régua horizontal, com largura de 300 pixeis e alinhada ao centro; 5. Escreva Tipo de Letra debaixo da régua; 6. Altere o tipo de letra da frase anterior para Arial, Helvética, sans-serif ; 7. Altere a cor da frase para vermelho; 8. Centre a frase; 9. Crie um novo parágrafo; 10. Escreva O Dreamweaver é para: e ponha a negrito; 11. Crie um novo parágrafo; 12. Escreva - Profissionais; ; 13. Insira uma nova linha; 14. Insira - Principiantes. ; 15. Seleccione as duas ultimas linhas de texto e tabule duas vezes; 16. Escolha as últimas duas linhas e coloque o texto em itálico; 17. Altere o texto O Dreamweaver é para: para o tipo de letra Verdana, Arial, Helvética, sans-serif Questões de Revisão A. Como é que os browsers tratam os espaços múltiplos? B. Enuncie uma forma de começar um novo parágrafo. C. Quantos tamanhos para a tag <Hx> existem? 87

90 D. Quando se usa uma quebra de linha? E. Como poderia inserir uma régua horizontal centrada e com largura igual a metade do tamanho da página? F. Porque é que o Dreamweaver tem uma lista de três tipos de fonte quando se escolhe a fonte desejada? G. Qual é o tamanho por defeito do texto em HTML? H. Qual é o elemento usado em HTML para tabular o texto? I. Porque é que é aconselhado usar fontes standard ou por defeito, em vez de usar outros tipos de fontes? Sumário Terminada esta parte, deverá ser capaz de: Enunciar e descrever os diferentes elementos de cabeçalho; Saber quando são criados parágrafos; Inserir quebras de linha onde necessário; Inserir uma régua horizontal; Inserir espaços múltiplos entre caracteres; Formatar texto com negrito e itálico; Mudar a cor, tamanho e tipo de letra do texto; Alinhar texto. Parte II 2.2. Listas Neste capítulo vamos aprender a criar listas em HTML. Objectivos Após conclusão deste capítulo, deverá ser capaz de: Criar uma lista não-ordenada; Criar uma lista ordenada; Criar uma lista de definições; Encadear listas; 88

91 Elementos de Lista Existem actualmente três tipos diferentes de listas possíveis em HTML: não-ordenadas, ordenadas e de definições. Os elementos de lista são compostos por uma ou mais tags <LI>. O conteúdo das listas é demarcado por uma tag de abertura e outra de fecho Listas Não-ordenadas <UL> </UL> As listas não-ordenadas marcam cada item na lista com um. Para criar uma lista deste tipo no Dreamweaver, escreva cada linha e prima ENTER como se da criação de parágrafos se tratasse, para no final seleccionar o texto pretendido e clicar no ícone. O texto será automaticamente tabulado e os serão colocados devidamente. Exemplo: <P>Lista não-ordenada</p> <UL> <LI>Elemento 1</LI> <LI>Elemento 2</LI> <LI>Elemento 3</LI> </UL> Neste exemplo vemos duas tags novas. A tag <UL> </UL> indica uma lista não-ordenada (Unordered List) enquanto a tag <LI> </LI> (List Item) indica cada um dos elementos da lista. O resultado obtido no documento será o seguinte: Lista não-ordenada Elemento 1 Elemento 2 Elemento 3 89

92 Existem dois tipos de marcador diferentes: marcador (por defeito) e quadrado. Para escolher o tipo de marcador pretendido, clique na lista (mas não a seleccione) e depois clique no botão Listar o item do Inspector de Propriedades. As propriedades da lista aparecem no ecrã. Para alterar o tipo de marcador, escolha no menu drop-down Estilo. Para mudar o tipo de marcador de um elemento da lista em particular, escolha Novo estilo. Pode ainda mudar o tipo de lista escolhendo em Tipo de Lista. O tipo de marcador é indicado no código através do atributo type. Exemplos: <UL type= circle > </UL> <UL type= square > </UL> no caso geral. No caso de mudarmos o tipo de marcador de apenas um elemento da lista, então temos, por exemplo: <LI type= square >Elemento 2</LI>. Os tipos de marcadores são apenas suportados nas versões do Internet Explorer 4.0 ou superiores, não estando disponíveis nas versões anteriores Listas Ordenadas <OL> </OL> As listas ordenadas, marcam cada elemento da lista com um número ordenadamente. Por defeito, inicia a marcação em 1 (numeração árabe). Para criar uma lista ordenada faça do mesmo modo que para as listas não-ordenadas, escolha o de lista ordenada. O código gerado é algo do estilo: <P>Lista ordenada</p> 90

93 <OL> <LI>Elemento 1</LI> <LI>Elemento 2</LI> <LI>Elemento 3</LI> </OL> O resultado produzido será o seguinte (para este exemplo): Lista ordenada 1. Elemento 1 2. Elemento 2 3. Elemento 3 As opções de estilo das listas ordenadas permitem que se mude o tipo de numeração entre: Algarismos/Padrão ( ), Romano Minúsculo (i, ii, iii, ), Romano Maiúsculo (I, II, III, ), Alfabeto Minúsculo (a, b, c, ) e Alfabeto Maiúsculo (A, B, C, ). Pode ainda especificar a partir de que número deseja que a ordenação se faça, a qual por defeito começa no número 1. O valor por defeito é sempre um número arábico. Para mudar o número inicial, altere o valor no campo Redefinir a contagem para:. Este valor inicial pode ser aplicado também em particular a um ou mais elementos da lista. Para aceder às opções, proceda da mesma forma que para as listas desordenadas. 91

94 O código gerado usa o atributo type tal como nas listas desordenadas. Assim sendo, podemos também alterar os atributos em particular em apenas um ou mais elementos da lista. Exemplo: <OL type= i > <LI >Elemento 1</LI> <LI type= 1 value= 7 >Elemento 2</LI> <LI>Elemento 3<LI> </OL> Produz o seguinte resultado: i. Elemento 1 7. Elemento 2 viii. Elemento Listas de Definições <DL> </DL> As listas de definições são diferentes das listas ordenadas e das listas não-ordenadas. Cada item da lista contém um termo de definição <DT> (Definition Terms) seguido de uma descrição de definição <DD> (Definition Description). A descrição é automaticamente tabulada e posta na linha seguinte para enfatizar a sua relação com o termo de definição. Para criar uma lista de definição no Dreamweaver, escreva o termo de defnição e prima [ENTER]. Escreva então a descrição e prima [ENTER]. Seleccione ambos e clique com o botão do lado direito sobre eles e escolha Lista / Lista de Definições ou escolha no menu Texto / Lista / Lista de Definições. O Dreamweaver gera, por exemplo, o seguinte código: <DL> 92

95 <DT>Dreamweaver</DT> <DD>É fácil e prático!</dd> </DL> Resultado: Dreamweaver É fácil e prático! Existe apenas uma descrição de definição para cada termo de definição. O Dreamweaver transforma o primeiro parágrafo no termo de definição e o segundo na descrição de definição, o terceiro parágrafo noutro termo de definição e o quarto noutra descrição de definição, etc Listas Encadeadas As listas encadeadas são listas umas dentro das outras. Podem ser obtidas escrevendo o texto todo de uma vez e de seguida seleccionar (no Inspector de Propriedades) o tipo de lista que pretendemos para cada um ou vários items da lista em particular Exercícios - Exercício 1 Criar uma lista não-ordenada 1. Crie um novo documento dentro da pasta exercícios chamado listas.htm ; 2. Ponha o cabeçalho Lists na página; 3. Escreva Lista Não-ordenada e crie um novo parágrafo; 4. Escreva Elemento 1 e crie um novo parágrafo; 5. Escreva Elemento 2 e crie um novo parágrafo; 6. Escreva Elemento 3 e crie um novo parágrafo; 7. Escreva Elemento 4 e crie um novo parágrafo; 8. Seleccione os 4 itens anteriores e transforme-os numa lista nãoordenada; 9. Altere o tipo de marca para quadrados. 93

96 - Exercício 2 Criar uma lista ordenada 1. No mesmo documento anterior, crie um novo parágrafo debaixo da lista desordenada; 2. Escreva Lista Ordenada e crie um novo parágrafo; 3. Escreva Elemento 1 e crie um novo parágrafo; 4. Escreva Elemento 2 e crie um novo parágrafo; 5. Escreva Elemento 3 e crie um novo parágrafo; 6. Escreva Elemento 4 e crie um novo parágrafo; 7. Seleccione os quatro itens e transforme-os numa lista ordenada; 8. Altere o número inicial do terceiro item ( Elemento 3 ) para 7. - Exercício 3 Criar uma lista de definições 1. No documento anterior, crie um novo parágrafo após a lista ordenada; 2. Escreva Listas Encadeadas e crie novo parágrafo; 3. Escreva As listas encadeadas são listas dentro de listas como, por exemplo, uma lista ordenada com sete itens, onde o quinto item contém uma lista desordenada. ; 4. Seleccione o texto que acabou de introduzir nos passos 2 e 3 e transforme-os numa lista de definições. - Exercício 4 Criar uma lista encadeada 1. No documento anterior, crie um parágrafo novo debaixo da lista de definições; 2. Escreva Listas Encadeadas e crie um novo parágrafo; 3. Escreva O ambiente do Dreamweaver contém os seguintes componentes por defeito: e crie um novo parágrafo. Este é um item que não será encadeado. 4. Escreva Janela do Documento e crie um novo parágrafo. Este é um item que será encadeado na lista. 5. Escreva Guias e crie um novo parágrafo. Este item também será encadeado. 6. Escreva Painéis e crie novo parágrafo. Este item será encadeado. 7. Escreva Inspector de Propriedades e crie um novo parágrafo. Este será encadeado. 94

97 8. Escreva O Inspector de Código é prático. e crie um novo parágrafo. Este item já não sera encadeado. 9. Escreva Clique no icone do Inspector de Código e crie um novo parágrafo. Altere o texto para itálico. Este item sera encadeado. 10. Escreva Redimensione o Inspector de Código e crie novo parágrafo. Este item será encadeado. 11. Escreva Mova a scrollbar para cima e baixo e para os lados, para ver o código HTML que o Dreamweaver gera. Este item será encadeado. 12. Escreva A Janela do Site é útil porque: e crie um novo parágrafo. Este item não sera encadeado. 13. Escreva Gere os links de todo o site e crie um novo parágrafo. Este é um item que será encadeado. 14. Escreva Permite ao utilizador organizar os seus web-sites. Crie novo parágrafo. Este item será encadeado. 15. Escreva Funciona como um cliente de FTP para enviar os ficheiros para o servidor e crie um novo parágrafo. Este item será encadeado. 16. Escolha todo o texto que introduziu, excepto Listas Encadeadas e transforme-o numa lista ordenada; 17. Transforme cada um dos itens a ser encadeados numa lista não-ordenada Questões de Revisão A. Quais são os cinco tipos de lista standard no HTML? B. Como muda o tipo de marca dos itens da lista? C. Como se altera o valor inicial de uma lista ordenada? D. O que são as listas encadeadas? Sumário Terminada esta parte, deverá ser capaz de: Criar uma lista não-ordenada; Criar uma lista ordenada; Criar uma lista de definições; Encadear listas. 95

98 Parte III 2.3. Âncoras e URLs Neste capítulo irá aprender acerca de URLs e como os adicionar a âncoras ou links nas suas páginas. Objectivos Após conclusão deste capítulo, deverá ser capaz de: Inserir links em documentos; Definir tipos de links; Definir URL; Elementos do Link A maior parte dos documentos HTML contem ligações (links) para outros documentos localizados na Internet. Estas ligações são definidas por URLs (Uniform Resource Locators), os quais fornecem a localização do ficheiro, nome do ficheiro e o método de acesso. Os links são representados pelos seguintes elementos: <A HREF= > </A> O elemento <A> </A> é chamado âncora. O atributo HREF especifica o URL. Se este atributo tiver um valor, o conteúdo entre as tags <A> </A> será apresentado no browser com uma cor diferente e sublinhado, de forma a indicar que estamos na presença de um link. Se o utilizador clicar nesse conteúdo o browser tentará abrir o ficheiro especificado pelo URL. Quando uma âncora é criada no Dreamweaver, o seguinte código é gerado: <A href= Na página surgirá da seguinte forma: Macromedia 96

99 Neste exemplo, o texto Macromedia representa o link para o ficheiro indicado pelo valor de HREF. Neste caso o valor HREF representa uma ligação para a página da Macromedia Tipos de Link Existem três tipos de links. Vamos ver neste ponto quais são. Links Internos (Bookmarks) São links internos ao documento. Ajudam a navegar por documentos com muito conteúdo dentro deles. Por exemplo, é comum ver sites onde temos um índice alfabético no topo e no fundo da página que contêm ligação para várias secções dessa mesma página. Links Locais (Relativos) São links para documentos no servidor web local. Os links locais são URLs relativos, relacionados com a localização do documento na árvore de directório e a localização do ficheiro a que pretendemos ligar. Por exemplo: /imagens/macromedia.jpg. Links Externos (Absolutos) São ligações a páginas contidas noutros servidores web. Links externos são sempre URL absolutos, tais como Links Internos Para indicar ao browser que pretendemos um link interno precedemos o URL com um #. Essa é a marca indicativa de um bookmark no HTML standard. Passo-a-passo: 1. Seleccione no documento o texto para o qual pretende criar um link. 2. Seleccione no menu Inserir / Âncora Com Nome ou clique no ícone na secção Comuns da barra Inserir. A caixa de diálogo Âncora Com Nome aparece. 97

100 3. No campo Nome da âncora escreva o nome do bookmark. O nome do bookmark pode conter espaços. No entanto, os espaços no nome não são parte da prática do standard HTML. Por exemplo, se pretendesse escolher o texto Macromedia Dreamweaver, seria melhor alterar o nome do bookmark para Dreamweaver apenas. Clique OK quando tiver escolhido um nome. O seguinte código será gerado pelo Dreamweaver: <P>Macrom. name= Dreamweaver ></A></P> Dreamweaver<A 4. Escolha o texto que deseja transformar em link para o bookmark. Por exemplo, queremos um link na palavra programa, então seleccionamos a palavra programa no documento e usamos o Inspector de Propriedades para ligar programa ao bookmark Dreamweaver. Para tal clicamos no campo Link e escrevemos #Dreamweaver. 5. Alternativamente, com o bookmark ainda seleccionados, podemos clicar no ícone Drag-to-file e arrastar o ponteiro do rato, com o botão pressionado, até ao texto que pretendemos. Largamos o botão quando o ponteiro se encontra sobre o ícone da âncora que designa o bookmark. (Este método Drag And Drop também pode ser usado para ligar a outras páginas no site. No final teremos gerado o seguinte código: <P><A href= #Dreamweaver >programa</a></p> 98

101 Links Locais Os links locais são relativos a ligações a documentos dentro da nossa raiz do site. Para criar um link deste tipo, deverá seleccionar o conteúdo que deseja transformar em link e usar o Inspector de Propriedades para especificar a localização da página através do ícone Drag-to-file ou através do ícone browse Links Externos Para criar um link externo seleccione o conteúdo que deseja transformar em link e use o Inspector de Propriedades para introduzir o URL no campo Link. Para , o URL é o endereço de precedido de mailto:. Simplesmente seleccione o conteúdo que deseja para servir de link e escreva mailto: seguido do endereço de desejado no campo Link do Inspector de Propriedades Exercícios Neste exercício irá criar links locais e de Crie um ficheiro chamado links.htm ; 2. Nesse ficheiro escreva WWW ; 3. Deixe uma linha de intervalo e na linha seguinte escreva ; 99

102 4. Deixe outra linha de intervalo e na linha seguinte escreva Indice ; 5. Seleccione WWW e crie um link para o site 6. Seleccione e crie link para support@macromedia.com; 7. Seleccione Índice e crie um link para o ficheiro índex.htm Questões de Revisão A. Relacione bookmark, relativo e absolute com links internos, locais e externos; B. Como cria um link para um no Dreamweaver? C. O que significa URL? Sumário Terminada esta parte, deverá ser capaz de: Inserir links em documentos; Definir tipos de links; Definir URL. Parte IV 2.4. Imagens e Mapas de Imagem Neste capítulo abordamos as imagens e como as colocar nos documentos. Objectivos Após conclusão deste capítulo, deverá ser capaz de: Distinguir entre os formatos gráficos suportados e os formatos gráficos não suportados; Determinar qual formato gráfico é mais apropriado a cada situação; Colocar imagens em páginas; 100

103 Usar o Painel de Propriedades; Usar imagens como links; Criar mapas de imagem Tipos de Imagem Digital: Vectores e Bitmaps Existem dois tipos de imagem digital: mapas de bits (bitmaps) e vectoriais. As imagens bitmap mapeiam a imagem bit a bit. Os ecrãs de computador são constituídos por uma colecção de pontos individuais, vulgarmente conhecidos como pixeis, organizados em colunas e linhas (semelhante a uma grelha) onde cada célula representa cada pixel na imagem. O benefício principal das imagens deste tipo é a cor, tom e textura, reproduzidos de forma fiel. A velocidade do acesso à Internet é uma preocupação importante quando se produz páginas. Quanto menor for o tamanho do ficheiro da imagem, mais rápido será o seu carregamento. Se desenhasse uma imagem bitmap numa grelha, cada pixel é detalhado, isto é, a cada posição da grelha corresponde um valor que indica o prenchimento do pixel. O conjunto de pixeis preenchidos ou não, forma a imagem que obtemos no ecrã. As imagens vectoriais não funcionam desta forma. Os ficheiros vectoriais contêm uma descrição da imagem expressa de forma matemática. Essencialmente, o ficheiro indica ao computador dados acerca da imagem e o computador desenha-a. Por exemplo, a imagem de um círculo em formato vectorial, escrita em Português corrente seria algo parecido com isto: o o Círculo (200px) Cor de preenchimento: gradient 101

104 o o Cores: branco, preto Cor da linha: nenhuma Um dos benefícios das imagens vectoriais é o tamanho do ficheiro, em particular relativamente ao tamanho dos ficheiros de imagens bitmap. O mesmo círculo em formato bitmap, com resolução 320x200, poderia parecer algo assim em Português corrente: Fila 1 o Pixel 1 x 1 é branco o Pixel 2 x 1 é branco o Pixel 3 x 1 é branco o Pixel 4 x 1 é branco, etc. até ao pixel 320 x 1. Fila 2 o o Pixel 1 x 2 é branco Pixel 2 x 2 é branco, etc Descrever o círculo e a cor pixel a pixel é um processo muito mais demorado do que dizer ao computador para desenhar o círculo por si próprio. Outro grande benefício dos gráficos vectoriais é a possibilidade de alterar a escala do gráfico. Os gráficos vectoriais são escaláveis porque temos o computador a desenha-los por nós, significando que o tamanho de uma imagem pode ser aumentado ou diminuído sem perda de qualidade. Como o ficheiro contém uma representação matemática, colocar número diferentes na equação resulta no correcto redimensionamento da imagem, mas apenas se modifica a escala do gráfico, o tamanho do ficheiro físico mantém-se o mesmo. Escalar vectores resulta em imagens perfeitas. Os bitmaps podem ser escalados, mas o aumento da escala degrada a qualidade da imagem porque o computador não tem informação suficiente para criar a nova imagem. O computador simplesmente transforma um pixel em múltiplos pixeis. Por exemplo, se redimensionarmos uma imagem 45x45 para 90x90, cada pixel individual da imagem original será transformado em quatro pixeis na versão redimensionada. Tal processo resulta em perda 102

105 de nitidez na imagem e um amento do espaço físico ocupado pela imagem. A grande desvantagem das imagens vectoriais é a perda de fidelidade na representação de imagens fotográficas, pois as imagens vectoriais descrevem imagens em termos de formas, linhas, curvas, pontos, cores, tamanhos, etc.. Concluímos então que os bitmaps são apropriados para imagens fotográficas e as imagens vectoriais para ilustrações. Actualmente os browsers apenas suportam bitmaps, estando as imagens vectoriais disponíveis através de plug-ins, tais como o do Flash e do emergente formato SVG Standards de Imagem da Internet As imagens bitmap na sua forma mais básica são demasiado pesadas para transferência via Internet. Daí que se tenham desenvolvido várias técnicas que permitem comprimir o tamanho dos ficheiros de imagem. Existem, portanto, vários tipos de ficheiros de imagem diferentes, todos variações descendentes dos bitmaps e vectores. Os sistemas operativos (excepto o Macintosh) geralmente identificam o tipo de ficheiro pela sua extensão do nome de ficheiro. A extensão são as letras (normalmente três) que seguem o nome do ficheiro e separadas do nome do ficheiro por um ponto como, por exemplo, imagem.jpg ou filme.avi. 103

106 Os browsers suportam actualmente três tipos de ficheiro de imagem:.gif (Graphics Interchange Format),.jpg (Joint Photographic Experts Group) e.png (Portable Network Graphics). Cada um destes formatos é um ficheiro do tipo bitmap. Relembramos que os browsers actuais não suportam imagens vectoriais, excepto com o uso de plug-ins Formatos de Imagem Suportados GIF Os ficheiros GIF estão limitados a 256 cores possíveis e usam combinações destas cores para simular cores além dessa limitação. O formato GIF é melhor para imagens tais como logótipos, ícones, botões e outras imagens com cores e tons uniformes. Existem dois tipos de GIFs GIF 89a e GIF 87. O formato GIF 89a permite o uso de transparência e de animação. A transparência é garantida através da escolha de uma das cores que passa a ser transparente quando apresentada, ou seja, escolhemos uma cor contida na imagem e essa cor não será mostrada deixando à vista o que estiver por detrás dessa imagem (por exemplo, a cor de fundo da página). Normalmente o efeito de transparência usa-se para imagens com círculos ou ovais onde o fundo dessa imagem (note que todas as imagens são sempre rectangulares) não será apresentado, dando a sensação de estarmos na presença de uma imagem que não é rectangular. É o caso de muitos botões e logótipos presentes na grande maioria dos sites. Quanto à animação, trata-se de conjuntos de imagens GIF que, com software especial, são concatenadas em sequência num único ficheiro de imagem GIF. Quando essa imagem é carregada, a sequência começa a desenrolar-se, dando a sensação de animação. O grande senão dos GIFs animados está no tempo que demoram a carregar pois, tratando-se de um conjunto de imagens concatenadas numa única, então é praticamente o mesmo que carregar essas imagens em separado uma a uma. JPG, JPEG Este é considerado o melhor formato para fotografias porque os ficheiros JPG contêm milhões de cores. Não existe a opção de transparência mas a vantagem reside na possibilidade de podermos especificar o grau de compressão da imagem de forma a poder obter o melhor compromisso entre qualidade da imagem e tamanho do ficheiro. 104

107 PNG O formato PNG é um novo tipo de ficheiro desenvolvido para a Internet. Existem dois tipos de PNG: PNG-8 e PNG-24 (mas a extensão do nome do ficheiro mantém-se igualmente.png para ambos). Ambos usam o mesmo método de compressão e suportam transparência, com a particularidade de que podemos definir o grau de transparência que pretendemos (é possível ter imagens apenas parcialmente transparentes de forma semelhante aos vidros coloridos). O formato PNG-8 está limitado a 256 cores (8 bits), enquanto que no formato PNG- 24 podemos ter até 16 milhões de cores (24 bits). Sendo um formato muito recente e ainda em desenvolvimento, este não é ainda suportado completamente pelo Netscape Navigator e nem pelo Microsoft Internet Explorer, sendo então o seu uso desaconselhado de momento Inserir Imagens O elemento <IMG> define uma imagem numa página. Coloque o ponteiro do rato no local onde deseja inserir a imagem e clique no ícone do menu da barra Inserir. Alternativamente, pode escolher no menu Inserir / Imagem fazendo aparecer a caixa de diálogo Seleccione a origem da imagem. Procure a pasta onde a imagem está localizada. No campo URL poderá ver o URL ou a localização da imagem. Certifique-se que no campo Relativa a: está seleccionado Documento. Se desejar verificar se a imagem corresponde à que desejava, pode activar a opção Visualizar 105

108 as imagens para ter uma previsão da imagem escolhida. Concluída a operação a imagem será automaticamente inserida na Janela do Documento. Suponhamos que pretendemos inserir a imagem exemplo1.jpg, de dimensão 640x480, no documento. O código gerado pelo Dreamweaver será o seguinte: <IMG src= exemplo1.jpg width= 640 height= 480 > O valor do atributo src corresponde ao caminho ou localização do ficheiro da imagem. Os atributos width e height indicam ao browser as dimensões precisas, em pixeis, da imagem. Note que o elemento <IMG> não tem um correspondente elemento de fecho: </IMG> não existe! Propriedades das Imagens Ao clicar numa imagem terá acesso às propriedades dessa imagem, as quais serão apresentadas no Inspector de Propriedades. As propriedades incluem Nome da Imagem, Largura, Altura, Origem, Link, Borda, Mapa, Alinhamento, etc. Nome da Imagem Neste espaço (ao lado da amostra da imagem), escreva o nome que pretende atribuir à imagem. Este nome será utilizado sempre que necessitar de aceder à imagem através de algum script (assunto abordado mais tarde). Largura (L) e Altura (U) Estes campos indicam a largura e a altura da imagem. Não é aconselhável alterar esses valores introduzidos por defeito pelo Dreamweaver. A solução óptima será usar um programa de processamento gráfico para alterar as dimensões da imagem e voltar a introduzi-la no documento. 106

109 Origem O campo Origem contém o caminho relativo para o local onde se encontra a imagem. Link Para fazer de uma imagem um link (tal como se faz com o texto), procure o ficheiro que pretende através do ícone drag-to-file ou do ícone browse ou escreva um URL no campo Link. Quando os utilizadores clicarem na imagem, o browser abrirá a página designada por si neste campo. Alinhamento Neste campo escolhe qual o alinhamento que pretende para a imagem. Este alinhamento afecta o modo como o texto está alinhado relativamente à imagem, ficando à esquerda ou à direita da imagem. Os tipos de alinhamento são os seguintes: - Padrão: por defeito, o Dreamweaver alinha à esquerda; - Linha de Base: é a linha imaginária onde os caracteres assentam. Note que, por exemplo, para a letra a essa linha fica no fundo do a mas para a letra y a linha de base fica no fundo da parte do y que forma um v. Assim a imagem alinha com a linha de base do texto; - No Alto: o texto alinha com o topo da imagem; - No Meio: o texto alinha com o meio da imagem; - Em Baixo: alinha o texto com a parte de baixo da imagem; - Alto do Texto: o texto alinha com a parte de cima da imagem relativamente ao topo do texto. Por exemplo, o topo da palavra Dreamweaver encontra-se no D ; - No Meio (meio absoluto): alinha o meio do texto com o meio da imagem; - O Mais Abaixo (fundo absoluto): alinha fundo do texto com o fundo da imagem, mesmo abaixo da linha de base no caso de caracteres tais como o Y ; - À Esquerda: o texto alinha à esquerda da imagem; - À Direita: o texto alinha à direita da imagem. ALT O campo ALT indica o nome que será apresentado no local da imagem quando não é possível apresentar a imagem (devido a uma possível falha). Este nome será também apresentado no ecrã junto ao ponteiro do rato sempre que o utilizador passe o ponteiro sobre a imagem. Espaço V / Espaço H Os atributos Espaço V e Espaço H são usados para colocar espaço invisível à volta da imagem. Qualquer outro conteúdo, tal como texto 107

110 por exemplo, é afastado da imagem exactamente o valor, em pixeis, contido nestes atributos. Borda Quando transforma uma imagem em link, o browser coloca uma borda azul à volta da imagem (ou outra cor que tenha designado para cor de link). Para eliminar a borda, basta colocar neste campo o valor 0. Se deseja tornar essa borda visível, então introduza o valor 1. Mapa Este atributo serve para criar esses mapas. Mais tarde abordaremos os mapas de imagem. Editar Clique em Editar para lançar o editor de imagem externo que pode designar na categoria Tipos de Arquivos / Editores nas Preferências. A imagem será aberta nesse editor. Quando retornar ao Dreamweaver, depois de alterada a imagem, essa imagem será apresentada na Janela do Documento. De qualquer forma, não convém usar esta função pois, ao fazê-lo estaria a usar como base uma imagem já editada e comprimida quando, se abrisse a imagem original por processar, então estaria a servir-se de uma imagem com mais qualidade (menos comprimida) e mais espaço de manobra. Redefinir o Tamanho Se clicar em Redefinir o Tamanho, a imagem será redimensionada no documento para as suas dimensões originais. Esta função pode ser útil no caso de ter alterado o tamanho da imagem acidentalmente O Painel de Propriedades Os sites de grande dimensão podem conter centenas ou milhares de imagens, ficheiros de Flash e Shockwave, clips de vídeo e sons. À medida que o site vai evoluindo torna-se difícil saber quais são as imagens e onde estão localizadas. No Dreamweaver, pode gerir e organizar os ficheiros através do Painel de Propriedades. Este painel contém todos os conteúdos necessários ao site que não se trate de ficheiros HTML. O painel propriedades apresenta nove secções: Imagens, Cores, URLs, Flash, Shockwave, Filmes, Scripts, Modelos e Biblioteca. Encontrará cada um representado por um ícone, no qual deve clicar para aceder aos conteúdos. 108

111 Conforme formos progredindo no curso, irá familiarizar-se com os vários tipos de conteúdo que podem ser organizados neste painel. De momento, iremos focar a nossa atenção na parte relativa às imagens. O conteúdo pode ser movido do painel para o documento de três formas distintas: arrastando-o da amostra da imagem para a Janela do Documento, seleccionando-o e arrastando-o da listagem de itens ou seleccionando-o e clicando no botão Inserir no canto inferior esquerdo do painel Imagens de Fundo As imagens de fundo são normalmente usadas para dar alguma textura à página. Use as imagens de fundo com cuidado, lembre-se que as imagens e texto por cima da imagem de fundo podem não ficar bem juntas e até dificultar a leitura. Quando escolhe uma imagem para o fundo, o browser irá repetir essa imagem as vezes necessárias até ter o fundo da página todo preenchido, dando um efeito semelhante a azulejos. Para inserir uma imagem de fundo no Dreamweaver, clique com o botão do lado direito dentro da Janela do Documento e escolha Propriedades da Página. 109

112 Clique em Procurar para indicar qual a imagem que deseja para o fundo. A imagem de fundo será apresentada na Janela do Documento Mapas de Imagem Os mapas de imagem são imagens onde certas áreas do mapa definem links. Se clicar numa região da imagem, que tenha sido definida, o browser transporta-nos até ao URL definido para o link dessa região. Ambos os tipos de mapas de imagem envolvem uma lista de coordenadas que definem as regiões e quais os URLs correspondentes. O ficheiro HTML deverá conter uma secção onde indicamos quais as coordenadas de cada região e qual o link. Na tag <IMG> devemos indicar qual o mapa a usar (atribuímos um nome a cada mapa de imagem, de forma a que a página possa conter mais que um mapa de imagem). <IMG SRC= Imagem.gif USEMAP= #mapa > <MAP NAME= mapa > <AREA SHAPE= RECT COORDS= 9,120,56,149 HREF= whatever.htm > <AREA SHAPE= RECT COORDS= 100,200,156,249 HREF= wherever.htm > </MAP> O atributo SHAPE pode ter os seguintes valores: 110

113 Y2 raio - RECT, ou RECTANGLE: requer quatro coordenadas: X1, Y1, X2 e - CIRC, ou CIRCLE: requer três coordenadas: centrox, centroy e - POLY, ou POLYGON: requer três ou mais pares de coordenadas Criar Mapas de Imagem Para criar um mapa de imagem no Dreamweaver, simplesmente introduza a imagem desejada no documento e seleccione-a. No Inspector de Propriedades escreva o nome que deseja atribuir ao mapa no campo Mapa. Se não atribuir um nome ao mapa de imagem, este não funcionará. Para criar regiões para os links, use a ferramenta rectangular, circular ou poligonal para desenhar a região na imagem. De seguida, atribua um link a essa região, clicando no ícone browse. Pode ainda introduzir um nome no campo ALT. O atributo TARGET será discutido mais tarde. Se desejar mover ou apagar uma região, use o ícone da seta para o fazer e, se for o caso, pressione a tecla [DELETE] para apagar uma região que definiu anteriormente. Clique em OK quando tiver terminado a criação das regiões. Para remover um mapa de imagem, clique no indicador de elementos invisíveis correspondente ao mapa e pressione a tecla [DELETE]. Apagar a imagem não resultaria pois a imagem seria apagada mas o código do mapa de imagem seria mantido no documento Questões de Revisão A. Que tipos de imagens são usadas para compressão JPEG? B. Porque será que tem que ser cuidadoso com o uso de imagens PNG? C. Para que serve o atributo ALT? D. Porque é que é importante especificar a largura e a altura das imagens? E. Como funcionam as imagens de fundo? 111

114 F. Quais são os tipos de formas usadas nos mapas de imagem? Sumário Terminada esta parte, deverá ser capaz de: Distinguir entre formatos gráficos suportados e formatos gráficos não suportados pelos browsers; Determinar qual o tipo de formato gráfico resulta melhor no tipo de imagem que pretende; Adicionar imagens às suas páginas; Usar o Painel de Propriedades; Usar imagens como links; Criar um mapa de imagem. 112

115 MACROMEDIA DREAMWEAVER Módulo 3 Parte I 3.1. Tabelas no Dreamweaver Neste capítulo abrangeremos o uso de tabelas no HTML. Aprenderá quais os usos dados às tabelas, não só para tabelas de dados mas também para o layout avançado, tal como a colocação de texto e gráficos no local exacto e colocação de formulários. Objectivos Após conclusão deste capítulo, deverá ser capaz de: Criar uma tabela; Alterar as propriedades de uma tabela; Editar uma tabela; Modificar uma célula de uma tabela e as suas propriedades; Editar uma tabela em modo avançado; Importar tabelas de dados para o Dreamweaver; Usar o controlo de barra de navegação do Dreamweaver; Usar a vista de layout do Dreameaver Tabelas As tabelas são definidas em termos de linhas e colunas, as quais combinadas formam células. Por exemplo, uma tabela de três linhas e cinco colunas tem 15 células. 113

116 Para definir uma tabela usamos os elementos <TABLE> e </TABLE> combinados com <TR> e </TR> (Table Row Linha de Tabela), os quais definem cada linha, e finalmente <TD> e </TD> que definem cada coluna. As colunas são definidas dentro dos elementos de Linha de Tabela (TR). Criar uma tabela 3x5, geraria um código semelhante ao seguinte: <TABLE width= 100% border= 1 > <TR> <TD> </TD> <TD> </TD> <TD> </TD> <TD> </TD> <TD> </TD> </TR> <TR> <TD> </TD> <TD> </TD> <TD> </TD> <TD> </TD> <TD> </TD> </TR> <TR> <TD> </TD> <TD> </TD> <TD> </TD> <TD> </TD> <TD> </TD> </TR> </TABLE> Temos então três conjuntos de elementos <TR> </TR> (as três linhas) e quinze conjuntos de elementos <TD> </TD> (são cinco colunas a multiplicar por três linhas). Repare que este código traduz-se numa tabela 3x5 vazia, cada célula contém um Espaço Não-Separável ( ). No entanto, as tabelas podem conter os elementos standard do HTML que usamos no corpo da página, tais como texto, imagens, filmes, etc. Normalmente os designers usam as tabelas para facilmente colocarem o conteúdo no local exacto que pretendem. Existe ainda um elemento além destes aqui mencionados relativamente às tabelas. O elemento <TH> </TH> (Table Header Cabeçalho da 114

117 Tabela) funciona da mesma forma mas o texto dentro das células de um elemento <TH> </TH> aparece centrado e em negrito Inserir uma Tabela Para criar uma tabela no Dreamweaver, posicione o cursor no ponto da Janela do Documento onde deseja criar a tabela e clique no ícone Inserir Tabela na barra Inserir. Na caixa de diálogo que então se apresenta, escreva o número de linhas e de colunas que deseja, qual a largura da tabela (em percentagem ou píxeis), a largura da borda da tabela, o preenchimento da célula e o espaçamento entre as células. O preenchimento da célula é o espaço entre a borda da célula e o conteúdo da célula. Para modificar a área de espaço transparente á volta do conteúdo das células incremente ou decremente este valor. O espaçamento entre as células refere-se ao espaço entre cada uma das células. Ao alterar este valor, estará a aumentar ou diminuir o espaço entre as células sem alterar o tamanho das mesmas Seleccionar Tabelas, Linhas, Colunas e Células Para modificar uma tabela, use o Inspector de Propriedades. Seleccionar uma tabela pode ser um pouco difícil por vezes. Para seleccionar uma tabela posicione o ponteiro do rato junto à tabela até que o cursor mude para o ícone e clique. A tabela estará então seleccionada. 115

118 Se mover o ponteiro do rato directamente sobre a tabela, o ponteiro transforma-se numa seta mais espessa. Neste ponto pode seleccionar linhas ou colunas individualmente clicando no rato. Para alterar as propriedades de células individuais, simplesmente clique no seu interior como se fosse editar o texto das mesmas e altere as suas propriedades no Inspector de Propriedades Propriedades das Tabelas Pode alterar todas as propriedades regulares da sua tabela modificando as opções no Inspector de Propriedades. As opções incluem a Identificação da Tabela (nome que serve para identificar uma tabela através de JavaScript), Linhas, Colunas, L (Largura) e U (Altura) em percentagem ou pixeis, Preenchimento da Célula, Espaçamento entre Células, Alinhamento, Borda, Botões de Conversão, Limpar os valores da altura e largura, Cor da Borda, Cor de Fundo e Imagem. Identificação da Tabela O JavaScript requer que tudo o que vai seja manipulado tenha uma identificação atribuída. Use este campo para atribuir um nome à tabela no caso de necessitar. 116

119 Linhas e Colunas Nestes campos escrevemos o número de linhas e de colunas para que o Dreamweaver gere os conjuntos <TR> e <TD> apropriados. Largura (L) Este campo é usado para especificar a largura da tabela, seja em pixéis ou em percentagem. Se o tamanho da tabela não for especificado, o browser pode redimensionar a tabela mas alterando o modo como se apresenta. Para evitar que isso aconteça, convém especificar sempre a largura da tabela. Altura (U) Serve para designar a altura da tabela. No entanto, a tabela é normalmente composta pela altura das várias linhas que contém e portanto é hábito deixar este valor por especificar. Preenchimento da Célula Este campo define o espaço entre o conteúdo das células e a borda das células para a tabela inteira. O valor por defeito é 1. O atributo HTML correspondente a este campo é o cellpadding. Espaçamento entre Células Define o espaço entre as células em pixéis para a tabela inteira. O atributo HTML correspondente a este campo é o cellspacing. Alinhamento No menu Alinhar pode optar entre alinhar a tabela à Esquerda (Padrão), Centro ou Direita. Borda Se desejar uma tabela sem borda, o valor deste campo deverá ser 0. No entanto, na Janela do Documento, a borda continuará presente, de modo a facilitar a vista da tabela. Se atribuir à borda outros valores, então a borda será visível e quanto maior for o valor, mais grossa será. Limpar as Alturas das Linhas e Limpar as Larguras das Colunas Clique no ícone para remover qualquer valor que tenha atribuído às alturas das linhas. Se desejar apagar as larguras que atribuiu às colunas, faça o mesmo com o ícone. Converter as Larguras das Colunas para Pixeis ou para Percentagens Se clicar no ícone converte o valor de qualquer atributo width na tabela, incluindo ambos os elementos <TABLE> e <TD>, de percentagens para pixeis. Se desejar o oposto, clique no ícone. 117

120 Converter as Alturas das Linhas para Pixeis ou para Percentagens Estas opções funcionam da mesma forma que as mencionadas acima, mas adaptadas às alturas das linhas. Imagem de fundo, Cor de Fundo e Cor da Borda Clique no ícone browse ou no ícone drag-to-file se desejar atribuir uma imagem ao fundo da tabela. Pode também seleccionar uma cor para o fundo da tabela e para a borda da tabela (a borda será transparente por defeito) Propriedades das Linhas, Colunas e Células As linhas, as colunas e as células partilham propriedades semelhantes. As opções incluem a união e divisão de células em linhas ou colunas, alinhamento horizontal e vertical, largura, altura, sem quebra, cabeçalho, imagem de fundo, cor de fundo e cor da borda. Estas são as opções que linhas, colunas e células partilham em comum. De facto, quando seleccionamos uma linha ou uma coluna e actuamos sobre ela, estamos apenas a alterar cada uma das células envolvidas de uma só vez. Unir Células Pode seleccionar duas ou mais células (sejam colunas, linhas ou apenas células) e uni-las através deste ícone. No código gerado, os atributos rowspan (linhas) e colspan (colunas) irão indicar ao browser para unir essas células. Por exemplo, se numa tabela 3x5 seleccionarmos a primeira coluna e ordenarmos a união das células, então o código obtido será o seguinte: <TABLE border="1"> <TR> <TD rowspan="3"> </TD> <TD> </TD> <TD> </TD> <TD> </TD> <TD> </TD> </TR> <TR> <TD> </TD> <TD> </TD> <TD> </TD> <TD> </TD> </TR> <TR> 118

121 <TD> </TD> <TD> </TD> <TD> </TD> <TD> </TD> </TR> </TABLE> Note que o primeiro elemento <TR> contém cinco elementos <TD> e os restantes elementos <TR> contêm apenas quatro elementos <TD>. Porquê? Porque o atributo rowspan cria uma coluna que se estende pela dimensão de três linhas. Como a coluna (estendida por três linhas) é especificada no primeiro <TR>, não necessita de ser especificada nos restantes elementos <TR>. Se colocar o cursor do rato dentro de uma célula, clicar e arrastar o rato com o botão pressionado, pode seleccionar uma série de células que não apenas uma linha ou uma coluna de cada vez. Se, por exemplo, seleccionarmos as quatro últimas colunas da linha dois e as uníssemos, o resultado seria o seguinte: Com o seguinte código: <TABLE border="1"> <TR> <TD rowspan="3"> </TD> <TD> </TD> <TD> </Td> <TD> </TD> <TD> </Td> </TR> <TR> 119

122 <TD colspan="4"> </TD> </TR> <TR> <TD> </TD> <TD> </TD> <TD> </TD> <TD> </TD> </TR> </TABLE> Note que a segunda linha contém apenas um elemento <TD>, o qual especifica que esta coluna (a segunda coluna, pois a primeira já foi especificada na primeira célula da primeira linha pelo atributo rowspan ) se estende por quatro colunas. Dividir Células Quando selecciona uma célula apenas, pode dividi-la em duas (ou mais) células em linha ou coluna. Para tal basta seleccionar a célula, clicar no ícone e surgirá uma caixa de opções onde deverá indicar se deseja dividir a célula em linha ou coluna e qual o número de vezes que a pretende dividir. Por exemplo, Se seleccionarmos a segunda célula na primeira linha e a dividirmos em duas colunas, o Dreamweaver transforma a tabela 3x5 em 3x6. A segunda linha agora consiste em duas colunas, uma das quais se estende por cinco colunas em vez de quatro e a terceira linha consiste em cinco colunas na mesma, a segunda das quais se estende por duas colunas pois dividimos essa coluna em duas na primeira linha mas não nas restantes linhas. 120

123 <TABLE border="1"> <TR> <TD rowspan="3"> </TD> <TD> </TD> <TD> </TD> <TD> </TD> <TD> </TD> <TD> </TD> </TR> <TR> <TD colspan="5"> </TD> </TR> <TR> <TD colspan="2"> </TD> <TD> </TD> <TD> </TD> <TD> </TD> </TR> </TABLE> Repare como o Dreamweaver mantém a tabela intacta. O valor do colspan da segunda linha foi alterado de 4 para 5, um colspan foi adicionado à terceira linha para manter o número de células original em 5, pois foi na primeira linha que efectuamos a divisão da célula em duas colunas e não na terceira. A segunda célula da terceira linha é mais larga que as restantes pois o browser apenas foi instruído para criar uma célula com duas colunas enquanto as restantes células contêm apenas uma coluna, apesar da diferença no tamanho. Alinhamento do Conteúdo das Células Quando introduz texto ou posiciona imagens dentro de uma célula, o alinhamento por defeito é à esquerda na horizontal e centro na vertical. O alinhamento horizontal pode ser à Esquerda (Padrão), ao Centro e à Direita. O alinhamento vertical pode ser no alto, no meio (Padrão), em baixo e na Linha de Base. O alinhamento vertical no código HTML é feito através do atributo valign e o horizontal através do atributo align ( halign não existe!). Largura (L) e Altura (U) Neste campo podemos introduzir os valores, em pixeis ou percentagens (para introduzir em percentagens neste caso terá de introduzir manualmente o % ), relativamente à largura e altura das células. Sem Quebra As células irão expandir horizontalmente se introduzir uma palavra maior que o espaço da célula. No entanto, o texto passa para a linha 121

124 seguinte se deixar um espaço. Se activar a opção Sem Quebra no Inspector de Propriedades, impede que o conteúdo do texto siga para a linha seguinte da célula. Ao activar esta opção, o atributo nowrap será aplicado ao elemento <TD>. Cabeçalho Se activar esta opção, converte a coluna ou célula que seleccionou num cabeçalho, ou seja, transforma um elemento <TD> em <TH>. O texto presente na célula será posto em negrito e centrado automaticamente. Imagem de Fundo, Cor de Fundo e Borda Estas propriedades processam-se da mesma forma que as semelhantes mencionadas no ponto Importar Tabelas de Dados O Dreamweaver permite importar dados de uma tabela para o documento. Essa tabela será baseada num ficheiro de texto onde os campos serão delimitados de uma forma identificada, normalmente por espaços ou vírgulas. Assim pode importar ficheiros de Excel ou informação de bases de dados. Para importar dados de uma tabela, clique no ícone da barra Inserir. 122

125 A caixa de diálogo Importar os dados tabulares surge então no ecrã. Clique em Procurar para indicar qual o ficheiro de dados a usar. Escolha o tipo de delimitador dos campos e defina as propriedades da tabela, tais como largura, preenchimento da célula, espaçamento entre as células, borda e a formatação da primeira linha. A tabela será então gerada automaticamente pelo Dreamweaver Inserir Uma Barra de Navegação Uma barra de navegação é um conjunto de botões que permitem navegar pelo site. Esses botões são normalmente dispostos em linha, lado-a-lado, ou em coluna, de cima para baixo. O Dreamweaver pode gerar uma tabela para esses botões automaticamente. Para o fazer, clique no ícone da barra Inserir e verá aparecer a caixa de diálogo Inserir barra de navegação. 123

126 Elementos da barra de navegação Deve criar cada botão separadamente, num programa de processamento de imagem e desenho (fora do Dreamweaver), e colocá-los numa pasta da sua preferência. Cada botão da barra de navegação será considerado um elemento. Para adicionar elementos à barra simplesmente clique no botão +. O botão - é usado quando se pretende remover elementos. Para ordenar os elementos, clique no elemento que pretende mover e de seguida use as setas para cima e para baixo para o mover na ordenação. Nome do elemento O nome do elemento é usado no caso se pretender usar o efeito rollover (quando um botão se transforma sempre que passamos o ponteiro do rato sobre ele). Imagem activa A imagem activa é a imagem do botão no seu estado normal, ou seja, quando o ponteiro do rato não se encontra sobre ela. Imagem sobreposta A imagem sobreposta é a imagem apresentada quando o ponteiro do rato se encontra sobre o botão. Esta imagem toma então o lugar da imagem activa nesse instante, voltando a imagem activa a ser reposta no momento em que o ponteiro do rato sai da área do botão. Imagem inactiva Esta é a imagem apresentada quando o utilizador clica no botão. Imagem sobreposta enquanto estiver inactiva 124

127 Quando o utilizador passa com o rato sobre o botão onde clicou por último, esta imagem será apresentada. Imaginemos um conjunto de botões, onde o botão que foi pressionado altera para uma imagem que transmite a sensação de estar afundado, tal como os botões do tipo on/off das TV s, por exemplo. Se esse botão estiver nesse estado e o utilizador passar o ponteiro do rato por cima desse botão, será esta a imagem sobreposta enquanto estiver inactiva que irá ser apresentada. NOTA: Apenas a imagem activa é necessária. Não tem necessariamente que criar o efeito rollover. Mesmo que pretenda o efeito rollover, não tem que usar os estados todos, basta o estado da imagem activa e o da imagem sobreposta. Alguns dos estados podem não ser compatíveis com browsers abaixo da versão 4.x. Texto alternativo Nesta caixa de texto escreva um nome descritivo para o botão. Este texto aparece no lugar da imagem nos casos em que os browsers não podem apresentar a imagem. Quando tiver clicado, vá para o URL Nesta caixa deve introduzir o URL para o qual o browser se deverá redireccionar se pressionado o botão. na Neste menu deverá escolher em que janela pretende que a página seja aberta se clicar no botão. Este menu só será usado no caso de usar molduras, um assunto que abordaremos mais tarde. Opções Existem duas caixas de opções nesta janela. A primeira, Pré-carregar as imagens, deve ser clicada quando pretendemos que as imagens da barra de navegação sejam carregadas para a memória ao carregar a página. A vantagem consiste no facto de ser mais rápida a visualização pois, caso contrário, o utilizador teria de estar à espera que o browser carregasse a imagem sobreposta à primeira vez que passasse o rato no botão. Estando a imagem na memória desde o inicio, então será apresentada imediatamente quando o utilizador passa o rato sobre o botão. A outra opção, Mostrar a imagem inactiva inicialmente, apresenta a imagem inactiva em vez da imagem activa quando a página é carregada. Inserir 125

128 Neste menu deve escolher entre Horizontalmente e Verticalmente para indicar ao Dreamweaver qual o alinhamento dos botões da barra de navegação Vista de Layout Se ao longo da sua aprendizagem já foi experimentando suficientemente as tabelas no Dreamwever, então já terá notado que em muitos casos não é fácil lidar com as tabelas. Muitas vezes aquilo que vemos na Janela do Documento não é aquilo que é apresentado no browser. O desenho das tabelas é feito muito à base de tentativas de colocar o que pretendemos no local exacto. O Dreamweaver MX incorpora uma solução para lidar com a frustração do trabalho com tabelas a vista de Layout. Esta vista permite-nos colocar o conteúdo no local exacto que pretendemos sem ter que nos preocupar com os acertos e compromissos em termos de linhas e colunas das tabelas. Para activar a vista de Layout clique no separador Layout da barra Inserir e clique no botão Visualização de layout. Quando desejar sair desta vista e passar à vista normal, então clique no botão Visualização padrão. Observe a imagem seguinte, representando o aspecto final de uma página. 126

129 Esta página consiste em quatro imagens colocadas em quatro células de uma tabela. Nesta página existem oito linhas e seis colunas. A borda, o espaçamento entre as células e o preenchimento das células são colocados a zero, de forma a que as várias imagens apareçam juntas sem espaços, dando a sensação de se tratar de uma imagem única. Para obter esta página foi necessário o seguinte layout para a tabela: 127

130 A criação desta tabela da forma tradicional consumiria demasiado tempo e trabalho. A vista de layout tornou o processo muito mais fácil. Ao clicar no botão de visualização de layout surgirá o guia de introdução para a visualização de layout. Active a opção para não voltar a mostrar esse guia sempre que usar a vista de layout. Clique em OK para ir para a vista de layout. Pode começar a desenhar as células imediatamente na Janela do Documento, a tabela será criada automaticamente. Para o fazer, clique no ícone de célula de layout e arraste-o para a Janela do Documento para desenhar a célula. Alternativamente, pode desenhar primeiro a tabela, ou seja, os contornos da tabela, e depois desenhar as células dentro da tabela. Para isso deve clicar no ícone e arrastá-lo para a Janela do Documento. Com a tabela criada, clique no ícone de célula de layout e arraste para dentro da tabela. Não se preocupe para já com as dimensões da tabela e das células é muito fácil ajustar o tamanho da tabela e das células e ajustar a posição das células dentro das tabelas também. 128

131 Com a tabela de layout desenhada na Janela do Documento, devemos desenhar agora as células dentro da tabela. Neste caso sabemos que temos quatro imagens para posicionar dentro da tabela. Vamos então criar nove células, uma de cada vez, colocando cada imagem numa célula e movendo a célula para a posição correcta. Podemos criar uma célula em qualquer parte da tabela pois teremos a certeza de que o Dreamweaver criará as células à volta dela para manter a consistência do desenho da tabela. Vamos, por exemplo, colocar a imagem de cima numa célula. 129

132 A imagem é colocada na célula e a célula expande em largura para acomodar a largura da imagem. No entanto, a altura da célula mantém-se intacta. Clicando na borda da célula veremos os pontos de redimensionamento da célula aparecer. Usamos estes para alterar as dimensões da célula. O passo seguinte seria posicionar a célula dentro da tabela mas no exemplo que estamos a dar já o fizemos antes de colocar a imagem. Esta imagem particular precisa de ser colocada no top da tabela. Para posicionar uma célula clicamos na borda da célula e arrastamo-la mantendo o botão do rato pressionado, ou clicamos e usamos as setas do teclado para a mover. Repetimos o processo para as quatro restantes partes da tabela. Está então concluído o desenho da tabela, pode agora retornar à vista normal Questões de Revisão G. As tabelas são constituídas por linhas e? H. Em que consiste o preenchimento das células e o espaçamento entre as células? I. Como se pode fazer com que duas ou mais células apareçam como uma célula única? J. Como pode fazer com que uma tabela pareça invisível ao utilizador? 130

133 K. Como activa a vista de Layout? L. Tem que criar uma tabela de layout antes de criar uma célula de layout? Sumário Terminada esta parte, deverá ser capaz de: Criar uma tabela; Alterar as propriedades de uma tabela; Editar uma tabela; Modificar uma célula de uma tabela e as suas propriedades; Editar uma tabela em modo avançado; Importar tabelas de dados para o Dreamweaver; Criar uma barra de navegação; Usar a vista de Layout. Parte II 3.2. Molduras É muito comum o uso de Molduras (Frames) na criação de sites. Esta técnica recorre à divisão da página em secções únicas, as quais são tratadas separadamente cada uma no seu ficheiro HTML. Este capítulo aborda esta técnica e as suas vantagens e desvantagens. Objectivos Após conclusão deste capítulo, deverá ser capaz de: Criar uma página com molduras; Trabalhar com os elementos Frameset, Frame e Noframes; Controlar o aspecto do conjunto de molduras através dos atributos das molduras; Definir destinos (targets) correctamente. 131

134 Introdução às Molduras Uma página que recorre a molduras funciona como uma janela que se divide em múltiplas janelas (molduras). Existe um documento - a página que contém o conjunto de molduras (frameset) - que divide a janela do browser em áreas diferentes e indica qual o ficheiro HTML que será apresentado em cada uma dessas áreas. Vamos examinar um exemplo de uma página com três molduras. Uma página deste tipo normalmente contém quatro páginas HTML uma das quatro páginas serve apenas para descrever as divisões da janela em três molduras. Essa página também contém o nome e localização do ficheiro a abrir em cada um, bem como atribui um nome a cada uma das molduras. O browser primeiro carrega a página que contém a informação das molduras. Depois divide a janela em várias partes, uma para cada moldura. Finalmente, o browser carrega para cada uma das molduras a página indicada na página que contém a informação das molduras. As molduras são geralmente usadas para garantir que certos conteúdos estão sempre disponíveis ao utilizador. Por exemplo, se tivermos uma barra de navegação horizontal, é prática comum colocar essa barra 132

135 numa moldura no topo ou na esquerda da janela do browser, estando o conteúdo do site numa moldura inferior. Assim garante-se que o utilizador terá sempre no ecrã a barra de navegação do site, pois ao clicar num dos botões, podemos fazer com que o link abra na moldura por baixo ou ao lado da moldura da barra de navegação Estrutura de uma Página de Molduras Uma página de molduras contém a informação sobre a quantidade de molduras a apresentar, o conteúdo de cada uma delas e o nome de cada uma delas. A estrutura de uma página de molduras é a seguinte: <HTML> <HEAD> <TITLE>Frames</TITLE> </HEAD> <FRAMESET cols= 200,* > <FRAME src= nav.htm name= nav > <FRAME src= body.htm name= conteudo > </FRAMESET> <NOFRAMES> <BODY bgcolor= #FFFFFF > <P>Está página usa Frames, por favor use um browser compatível</p> </BODY> </NOFRAMES> </HTML> Deve ter notado que esta página não tem o elemento <BODY>. Isto é porque esta página não apresenta conteúdo no browser mas serve apenas para definir o conjunto de molduras (frameset). Portanto temos o elemento <BODY> substituído pelo elemento <FRAMESET> que servirá para definir o conjunto de molduras a apresentar, ou seja, define a divisão da janela do browser em várias molduras. Neste exemplo, estamos a dividir a janela em duas colunas, a primeira das quais tem 200 pixéis de largura e a segunda * será dimensionada até ocupar a restante largura da janela. O sub-elemento <FRAME> designa o nome da moldura e especifica a página que será apresentada nessa moldura. Neste caso estamos a indicar que a primeira moldura terá 200 pixéis de largura, o seu nome é 133

136 nav e o ficheiro HTML a apresentar nesse frame é nav.htm. A segunda moldura é chamado conteudo e apresenta o ficheiro body.htm. O elemento <NOFRAMES> serve para o caso de a página estar a ser visualizada num browser antigo que não permita o uso de molduras. Nesse caso, o conteúdo do sub-elemento <BODY> será apresentado no browser. Se o browser permitr molduras, então tudo o que estiver entre <NOFRAMES> e </NOFRAMES> será ignorado Criar uma Página de Molduras Antes de criar uma página de molduras, convém fazer as páginas que irão preencher as molduras, de forma a saber qual o tamanho necessário para cada moldura. Uma vez prontas essas páginas, pode definir o conjunto de molduras na página de molduras. Crie um novo documento. No menu Exibir escolha Auxilios visuais / Bordas da moldura. Esta opção serve para o Dreamweaver apresentar as bordas das molduras na Janela do Documento. Para criar uma moldura pressione a tecla [ALT] enquanto clica e arrasta a borda da moldura existente. Se arrastar a borda superior, criará dumas molduras horizontais. Note que clicando nas bordas das molduras as propriedades das mesmas são apresentadas no Inspector de Propriedades. Se não clicar nas bordas mas sim no interior das molduras, então estará a editar a página HTML que será apresentada nessa moldura como se a estivesse a editar separadamente. Assim sendo, terá de ter cuidado ao gravar as páginas pois, enquanto que o modo de gravação das páginas das molduras é o normal, a forma de gravar a página de molduras é diferente. Para gravar a página de molduras deve ir ao menu Arquivo e escolher Salvar o conjunto de molduras como. Quando clica dentro de uma das molduras, pode escolher Arquivo / Salvar a moldura como e gravar o ficheiro, tal como faria se o editasse em separado. 134

137 Se desejar gravar todos os ficheiros (as molduras e a página de molduras) então pode simplesmente escolher no menu Arquivo / Salvar tudo Propriedades do Conjunto de Molduras Pode aceder às propriedades do conjunto de molduras se clicar na borda de uma das molduras. Essas propriedades serão apresentadas no Inspector de Propriedades. Bordas Pode escolher entre Sim, Não e Padrão para indicar se as bordas devem ser visíveis ou não. O atributo desta opção é frameborder : <frameset cols= 145,339 frameborder= NO > Normalmente a opção usada é a Não, melhorando o aspecto visual da página. Largura da Borda O valor em pixéis posto neste campo define a largura da borda. O seu atributo é framespacing. Tenha em conta que, mesmo que tenha optado por não apresentar a borda da moldura, ela continua lá, sendo portanto o aspecto do site afectado pelo valor da largura da borda. O valor por defeito da largura da borda é 2. Para eliminar o espaço entre as molduras, deve colocar este valor a 0. Por exemplo: <frameset cols= 145,339 frameborder= NO border= 10 framespacing= 0 > Cor da Borda Se a borda for visível, pode atribuir-lhe uma cor. Por defeito, a borda é cinzento claro. O atributo é bordercolor. O código gerado é o seguinte: <frameset cols= 145,339 frameborder= YES bordercolor= #6666FF > 135

138 Coluna/Linha e Unidades No campo Coluna deve escrever o valor da largura de uma coluna ou altura de uma linha. Pode escolher as unidades em que se apresenta esse valor pixéis, percentagem ou relativa. A forma mais precisa de designar uma dimensão é em pixeis. As percentagens não são tão precisas pois são relativas aos tamanhos das outras molduras. Para tornar a moldura relativa ao tamanho da janela do browser, escreva 1 no campo Coluna/Linha e escolha Relativa nas unidades. Pode escolher a moldura à qual está a atribuir as dimensões e unidades clicando na moldura pretendida na representação de molduras do Inspector de Propriedades Definir as Propriedades das Molduras Para definir as propriedades individuais de cada moldura, deve usar a janela Molduras do Painel de Layout Avançado. Para abrir este painel, escolha no menu Janela / Outros / Molduras, ou pressione simplesmente em simultâneo [SHIFT+F2]. Para escolher uma moldura clique dentro da moldura pretendida no painel. Pode então modificar as propriedades no Inspector de Propriedades. Moldura Neste campo deve indicar o nome da moldura. É importante que atribua um nome à moldura para que possa depois fazer com que os links de outras molduras sejam abertos nessa moldura. Por exemplo, no caso de termos uma barra de navegação na moldura chamada nav 136

139 podemos manter essa barra visível, mesmo após clicar nos botões de navegação, se no link atribuído ao botão indicarmos que queremos abrir essa página na moldura conteúdo. Quando atribuímos um destino a um link, temos o menu drop-down Destino onde na lista aparece entre outros, os nomes atribuídos às molduras. Sempre que o utilizador clicar nesse link, o browser abrirá a página na moldura com o nome indicado em Destino. Eis o código gerado pelo Dreamweaver: <A href= a.htm target= content > Origem Aqui deve escrever o URL absoluto ou a página local para indicar qual a página que irá ser aberta na moldura escolhida. Bordas Escolha Sim, Não ou Padrão para definir se as bordas serão visíveis ou não. Paginação Esta opção, vulgarmente conhecida como Scroll, define se o browser irá apresentar uma barra vertical que permitirá ao utilizador percorrer a página verticalmente ou não. As opções são Sim, Não, Automático e Padrão. Se escolher Não, o browser não apresentará a barra de deslocamento. Se escolher Automático, o browser apresentará apenas se for necessário. Note que se escolher Sim, a barra será apresentada mesmo no caso de não ser necessária. O valor por defeito, Padrão, é o mesmo que o Automático. Normalmente as molduras que contêm barras de navegação usam o valor Não : <FRAME src= nav.htm name= nav scrolling= NO frameborder= NO > Sem Redimensionamento Quando as bordas das molduras estão visíveis, é possível clicar sobre elas e arrasta-las para redimensionar a moldura pelo utilizador. Se 137

140 desejar evitar isto, então esta opção deve estar activada. O atributo é noresize e não tem valores a atribuir: <FRAME src= nav.htm name= nav scrolling= NO noresize frameborder= NO > Cor da Borda Por defeito, a cor da borda é cinzento claro. Pode escolher outra cor ao seu gosto. O atributo é bordercolor : <FRAME src= nav.htm name= nav scrolling= NO noresize frameborder= NO bordercolor= #99FFFF > Largura e Altura da Margem Os valores de largura e altura da margem definem, em pixéis, a distância a que a página HTML fica relativamente à borda da moldura (independentemente de a borda ser visível ou não). Os atributos são marginwidth e marginheight. Se, por exemplo, definirmos 5 pixéis para a altura e largura, obtemos o seguinte código: <FRAME src= nav.htm name= nav scrolling= NO noresize frameborder= NO marginwidth= 5 marginheight= 5 > Molduras na Barra Inserir A barra Inserir contém uma secção para molduras chamada Moldura. Se clicar nessa secção terá acesso a 13 conjuntos de molduras prédefinidas. Ao clicar num desses conjuntos, o Dreamweaver irá criá-lo na Janela do Documento e automaticamente atribuir um nome a cada moldura e atributos tais como as bordas, paginação, redimensionamento, etc. 138

141 Vantagens e Desvantagens das Molduras Vantagens - Quando queremos actualizar a barra de navegação, se tivermos uma barra de navegação em cada página, teremos muito trabalho. No entanto, se usarmos uma moldura para a barra de navegação, onde os conteúdos de cada página são apresentados na moldura inferior, poupamos esse trabalho (pois apenas temos que actualizar um ficheiro HTML), bem como o tempo de carregamento da barra de navegação a cada vez que entramos numa nova página do site. Desvantagens - As molduras não funcionam nas versões 2 ou inferiores do Internet Explorer e nas versões 1 do Netscape Navigator. - As molduras não podem ser guardadas como bookrmark no browser porque o bookmark toma nota do URL actual, que no caso é a página do conjunto de molduras Questões de Revisão A. Se uma página de molduras é constituída por duas colunas, quantos ficheiros HTML estará o browser a apresentar? B. Como se acede às propriedades individuais das molduras no Inspector de Propriedades? C. O que é o atributo noresize? D. As molduras podem ser constituídos por colunas e? Sumário Terminada esta parte, deverá ser capaz de: Criar uma página com recorrendo a molduras; Trabalhar com os elementos frameset, frame e noframes; Controlar o aspecto do conjunto de molduras através dos atributos dos elementos das molduras; Definir as janelas de destino dos links. 139

142 Parte III 3.3. Formulários Os formulários permitem que os utilizadores vejam a página com informação dinâmica mas a maior utilidade dos formulários reside no facto de podermos obter informação directamente da pessoa que vê a página e processar essa informação. Este capítulo é inteiramente dedicado aos formulários. Objectivos Após conclusão deste capítulo, deverá ser capaz de: Criar um formulário; Adicionar elementos a um formulário; Introdução aos Formulários Um formulário (form) é um conjunto de campos de dados numa página que são processados num servidor. Os dados são enviados ao servidor quando o utilizador submete o formulário ao clicar num botão ou numa imagem. Os campos são os blocos onde introduzimos o texto. Para inserir um formulário na sua página, escolha a secção Formulários da barra Inserir. Clique no ícone para criar o formulário. Uma caixa desenhada com pontos e traços vermelhos é apresentada na Janela do Documento. Esta caixa delimita a área do formulário, portanto todos os campos pertencentes a este formulário devem ser colocados dentro desta caixa. Os elementos <FORM> e </FORM> delimitam o formulário no 140

143 código HTML. Estes são gerados automaticamente pelo Dreamweaver quando delimita a área do formulário Propriedades de um Formulário Quando cria um formulário, pode usar o Inspector de Propriedades para ver e definir as propriedades do seu formulário. Formulário (nome) O elemento <FORM> contém propriedades invisíveis ao utilizador que são essenciais ao processo. No Inspector de Propriedades, no campo Formulário escreva o nome que pretende atribuir ao formulário. Acção Neste campo escrevemos o URL do script que vai aceitar os dados no servidor e enviar uma resposta de volta ao browser após processamento. Método Os métodos possíveis são POST (por defeito) e GET. Estes valores especificam o método que vai ser usado pelo protocolo HTTP para enviar os dados para o servidor. O método deve ser o mesmo que o previsto no script que processa os dados. Quanto cria um formulário, o Dreamweaver gera o seguinte código: <FORM method= post action= nome= form1 > </FORM> Campos do Formulário Um campo é a caixa onde o utilizador escreve o selecciona a informação a ser enviada. O Dreamweaver permite os seguintes tipos de campos: Campo de Texto 141

144 Campo Oculto Área de Texto Caixa de Selecção Botão de Rádio Grupo de Botões de Opção Menu de Lista Menu de Salto Campo de Imagem Campo de Arquivos Campo de Botão Pode inserir os campos colocando o cursor onde deseja que o campo seja colocado na Janela do Documento e clicando no ícone do campo pretendido Campos de Texto Para criar um campo de texto, clique no ícone. Uma caixa de texto é colocada na Janela do Documento. Clique na caixa de texto para modificar as suas propriedades no Inspector de Propriedades. Campo de texto Neste campo deve inserir o nome da variável a ser enviada para o script. O Dreamweaver atribui o nome textfield por defeito. Largura do caracter Introduza neste campo o comprimento da caixa de texto em termos de caracteres. Nº Max. de Caracteres Escreva neste campo o número máximo de caracteres que o utilizador pode escrever no campo de texto. Por exemplo, se o utilizador quiser escrever um código postal , o número de caracteres é oito (o - também conta). Tipo (Linha Simples, Multi-linha, Senha) 142

145 Aqui deve escolher o tipo de conteúdo da caixa de texto. Se escolher Linha Simples então a caixa de texto terá apenas uma linha. Se escolher Multi-linha a caixa de texto terá várias linhas. Se o campo for uma password então deve escolher Password, pois assim o que escrever na caixa será mascarado por asteriscos. Quebra automática de linha Se usa várias linhas na caixa de texto, pode usar esta opção e escolher entre Padrão (desactivada), Desactivada, Virtual e Física. Valor Inicial Neste campo deve introduzir o valor a ser apresentado por defeito na caixa de texto quando o utilizador abre o formulário. Normalmente este campo é deixado em branco para facilitar a introdução de texto ao utilizador. Quando, por exemplo, cria uma caixa de texto composta de uma linha única, chamada nome, com largura de 20 caracteres e um comprimento máximo de 20 caracteres, o Dreamweaver gera o seguinte código: <FORM method= post action= name= > <input type= text name= nome size= 20 maxlength= 20 > </FORM> Analisando este código vemos que <INPUT> é o elemento que define o campo. Não tem elemento de fecho. O atributo type especifica que tipo de campo pretendemos, O atributo name representa o nome do campo, size e maxlength determinam o tamanho do campo no browser e quantos caracteres os utilizadores podem introduzir respectivamente. Se o campo fosse destinado a conter uma password então o elemento <INPUT> teria o seguinte código: <input type= password name= nome size= 20 maxlength= 20 > Note a substituição de text por password no tipo de campo. Mesmo assim, este campo não deixa de ser do tipo campo de texto. 143

146 Caso se tratasse de um campo de texto de linhas múltiplas, então o código apresentado seria o seguinte: <textarea name= nome cols= 20 ></textarea> Em vez de <INPUT> temos o elemento <TEXTAREA>. A razão desta substituição deve-se ao facto de o <INPUT> não ter uma tag de fecho e o <TEXTAREA> ter. Deste modo, podemos introduzir texto entre a tag de abertura e a de fecho, sendo esse texto apresentado inicialmente no campo. Em vez do atributo size temos o atributo cols para especificar a largura do campo. Quando escolhe um campo de texto de linhas múltiplas o Dreamweaver altera o Inspector de Propriedades para apresentar o campo Número de linhas. Pense nesse campo como sendo o número de linhas que compõem o campo de texto. O Dreamweaver adiciona então o atributo rows ao elemento <TEXTAREA> Caixas de Selecção Para criar uma caixa de selecção, clique no ícone selecção será colocada na Janela do Documento.. Uma caixa de As caixas de selecção permitem ao utilizador seleccionar múltiplas opções como, por exemplo, seleccionar entre uma lista de interesses. Pode alterar as propriedades da caixa de selecção no Inspector de Propriedades depois de a seleccionar. Checkbox Neste campo deve introduzir o nome da variável a ser enviada para o script. Por defeito, o Dreamweaver atribui-lhe o nome checkbox. Valor seleccionado 144

147 Este campo contém o valor da caixa de selecção. Normalmente o valor è 1 para indicar um resultado positivo. Estado inicial Active a opção Seleccionado se desejar que a caixa de selecção esteja inicialmente seleccionada. Caso contrário, deixe a opção ficar em Não seleccionado. Por defeito, o Dreamweaver opta por Não seleccionado. Se, por exemplo, quisermos criar caixas de selecção para indicar interesse em filmes, o código seria algo semelhante a este: <input type= checkbox name= titanic value= 1 >Titanic <input type= checkbox name= et value= 1 >E.T. <input type= checkbox name= super value= 1 >Super-Homem Botões de Rádio Para criar botões de radio, clique no ícone. Um botão de rádio será então apresentado na Janela do Documento. Um conjunto de botões deste tipo permite ao utilizador fazer uma única opção, ao contrário das caixas de selecção. Botão de opção Neste campo do Inspector de Propriedades deve escrever o nome da variável a ser enviada ao script. Por defeito, o nome será radiobutton. É importante que dê o memo nome a todos os botões mas atribuindo valores diferentes. Por exemplo, se pretendermos criar um conjunto de 145

148 botões de rádio para indicar a nossa perícia no Dreamweaver numa escala de um a cinco: <INPUT type= radio name= pericia value= 1 > <INPUT type= radio name= pericia value= 2 > <INPUT type= radio name= pericia value= 3 > <INPUT type= radio name= pericia value= 4 > <INPUT type= radio name= pericia value= 5 > Repare que o valor do atributo type é radio, o nome de cada um é pericia e o valor de cada um dos botões é diferente. Se o utilizador clicar, por exemplo, no botão que indica o nível 5 de perícia, então o valor 5 será passado ao script. Valor seleccionado Escreva um valor neste campo para acompanhar o nome do botão de rádio. Não se esqueça de atribuir um valor diferente para cada botão. Estado inicial Active Seleccionado se desejar ter o botão de rádio seleccionado por defeito quando o utilizador abre o formulário. O utilizador poderá depois desactivar essa selecção clicando no botão ou noutro botão do mesmo conjunto de botões de rádio. Por defeito, a opção será Não seleccionado Menus de Lista Para criar um menu de lista, clique no ícone colocada na Janela do Documento.. Uma caixa de menu é Um menu é uma lista onde o utilizador pode escolher uma opção de entre várias possíveis. No entanto, se no Inspector de Propriedades activar a opção Lista (desactiva-se a opção Menu ) então teremos antes uma lista, semelhante ao menu de lista mas onde o utilizador poderá seleccionar um ou mais itens. 146

149 O utilizador pode seleccionar na lista vários itens se pressionar a tecla [CTRL] enquanto clica nos itens da lista. Por defeito, o Dreamweaver cria um menu de lista. Lista/menu Neste campo deve escrever o nome da variável a ser enviada para o script. Por defeito, o Dreamweaver atribui-lhe o nome select. Tipo Aqui pode optar entre Menu e Lista para criar um menu de lista ou uma lista. Valores da lista Clique no botão Valores da lista para introduzir os valores que irá dar ao utilizador para escolher. Aparecerá então a caixa Listar os valores, onde deverá adicionar itens clicando no botão + ou remover itens clicando no -. A cada um dos itens deve atribuir um identificador e um valor. Pode reorganizar e ordenar os itens clicando nos botões das setas. Clicando em OK, retorna ao Inspector de Propriedades, o qual reflectirá as mudanças que fez quando introduziu novos itens. Para designar itens como inicialmente seleccionados, simplesmente clique no item na lista Seleccionados inicialmente. Suponhamos que pretendemos uma lista de cores. 147

150 O código gerado no Dreamweaver será o seguinte: <P>Cor: <SELECT name= cor > <OPTION value= 1 selected>vermelho</option> <OPTION value= 2 >Amarelo</OPTION> <OPTION value= 3 >Verde</OPTION> </SELECT> </P> Note que a primeira opção tem o atributo selected que indica ao browser que esta opção será escolhida inicialmente. No caso de ter escolhido uma Lista em vez de um Menu de Lista, terá um campo extra no Inspector de Propriedades que será a Altura e uma opção extra que será Selecções Permitir múltiplas. Altura Aqui deve escrever o número de linhas que deseja para a lista. Por defeito é 1. Incrementar esse valor permite ao utilizador ver mais opções na lista. As opções que ficarem fora desse tamanho definido podem ser visualizadas usando a barra de deslocamento. Selecções Permitir múltiplas Active esta opção se desejar que o utilizador possa escolher vários itens da lista. O código gerado pelo Dreamweaver é igual ao da Lista de Menu, excepção ao atributo multiple que é acrescentado ao elemento <SELECT> para indicar que se está na presença de uma lista. 148

151 Campo de Arquivos Como o nome deixa antever, este tipo de campo serve para enviar ficheiros ( arquivos na tradução brasileira) para um servidor. Para criar um campo deste género, clique no ícone. Será colocada na Janela do Documento uma caixa para o nome do ficheiro e um botão Procurar para navegar até ao ficheiro pretendido. Campo de arquivo Aqui coloca-se o nome da variável a ser enviada para o script. Largura dos caracteres O tamanho da caixa de texto no browser. Nº máx. de caracteres O número máximo de caracteres que o utilizador pode escrever. Neste caso, não é recomendado definir um limite para o número de caracteres pois não sabemos o tamanho do nome do ficheiro que o utilizador pretende, o qual pode ser bastante longo. O código gerado pelo Dreamweaver será o seguinte: <P>Enviar ficheiro: <INPUT type= file name= ficheiro enctype= multipart/formdata > </P> O atributo type tem o valor file indicando que se trata de um ficheiro e o atributo enctype serve para definir o tipo de codificação que o servidor pode usar para receber o ficheiro. 149

152 Campo Oculto Este tipo de campos serve para enviar informação ao script que os utilizadores não podem controlar e não necessitam de ver. Para criar um campo destes, clique no ícone. O Dreamweaver coloca um indicador de campo invisível na Janela do Documento. Para modificar as propriedades desse campo, deve clicar no indicador de campo invisível e alterar as propriedades no Inspector de Propriedades. Campo oculto Escreva neste campo o nome da variável a ser enviada ao script. Por defeito, o Dreamweaver atribui o nome hiddenfield. Valor Aqui deve escrever o valor que pretende atribuir ao nome. O programador do script deverá fornecer informação acerca dos nomes e valores dos campos ocultos Botão Os campos de botão são normalmente usados para enviar os dados do formulário para o script, para apagar os dados do formulário ou para usar os dados colhidos no formulário com JavaScript. Para criar um botão, clique no ícone. O Dreamweaver colocará automaticamente o botão na Janela do Documento. 150

153 Botão Coloque neste campo o nome do botão para o script. Se o botão for o botão Enviar, então o nome definido como standard é Submit. Denominação Este campo contém o nome que aparecerá escrito no botão no browser. Acção Escolha entre Enviar o formulário, Redefinir o formulário e Nenhuma. Deve escolher Enviar o formulário se deseja que o botão envie os dados do formulário para o script. Se pretende que o botão apague os dados do formulário, então escolha Redefinir o formulário. Se o botão tem como única finalidade o JavaScript, então escolha Nenhuma. É normal ser apresentado sempre um botão Enviar e um botão Redefinir com os formulários: <INPUT type= submit name= Enviar value= Enviar > <INPUT type= reset name= Redefinir value= Redefinir > Se a nossa opção fosse Nenhuma, então o código seria o seguinte: <INPUT type= button name= Botão value= Botão > Campo de Imagem Os campos de imagem servem para criar botões baseados em imagens, ao contrário dos botões do HTML standard. Os campos de imagem podem ser usados com JavaScript ou VBScript para funções especializadas que estão além dos objectivos deste curso. No entanto, os botões Enviar e Redefinir não podem ser substituídos por imagens no Dreamweaver Menus de Salto Um Menu de Salto é um menu drop-down especializado, no qual pode colocar facilmente links para outras páginas, endereços de , e qualquer outro tipo de conteúdo ao qual se pode criar uma ligação no HTML. O seu uso principal é garantir ao utilizador um método rápido e fácil de saltar para outras páginas, normalmente dentro do seu 151

154 website, o qual é particularmente útil em sites de grande escala. O menu de salto usa JavaScript e portanto pode não ser compatível com todos os tipos de browser e versões. Para inserir um Menu de Salto, clique no ícone salto aparecerá no ecrã.. A caixa Menu de Itens do Menu Adicione e remova itens do menu clicando nos botões + e -, respectivamente. Texto Escreva o nome do item do menu neste campo. Quando tiver seleccionado, vá para o URL Aqui deve colocar o URL do link que pretende para o item. Abrir as URLS em Se usar molduras, deve especificar aqui neste campo o nome da moldura onde pretende abrir o link. Se não, então mantém-se o valor por defeito que é Janela principal. Nome do menu Deve atribuir ao menu de salto um nome para que este funcione. O nome atribuído por defeito pelo Dreamweaver é menu1. Opções Se desejar um botão Ir ao junto ao menu, então deve activar a opção Inserir botão Ir após o menu. Se não activar esta opção, não 152

155 terá botão e portanto o utilizador salta imediatamente para o link onde clicou no menu. Active a opção Seleccione o primeiro item após a alteração da URL se for utilizado um aviso de selecção no menu (como Escolha uma opção ) Questões de Revisão A. Em que situações se usam as caixas de selecção em detrimento dos botões de rádio? B. O que acontece quando descreve um campo de texto como password? Exercícios Neste exercício deve construir um formulário que permita ao utilizador comprar um computador. O formulário inclui os campos Nome, Telefone, , Modelo, Caixa ( branca, preta, metalizada ou transparente ) e as opções Leitor DVD, Gravador CDRW e Gravador DVDRW. 1. Crie um novo ficheiro chamado formulário.htm numa pasta chamada exercícios ; 2. Nesse ficheiro crie um formulário; 3. Escreva Nome: ; 4. Adicione ao lado um campo de texto de linha única e largura de caracteres 30. Dê-lhe o nome nome ; 153

156 5. Crie um novo parágrafo; 6. Escreva Telefone: ; 7. Adicione ao lado um campo de texto de linha única, largura 12, número máximo de caracteres 12 e nome telefone ; 8. Crie um novo parágrafo; 9. Escreva ; 10. Ao lado crie um campo de texto de linha única, largura 50 e nome ; 11. Crie um novo parágrafo; 12. Escreva Escolha o modelo: ; 13. Ao lado crie um menu de lista; 14. Atribua à lista do menu os seguintes itens: AMD XP 1500+, com o valor 1 ; AMD XP 1300+, com o valor 2 ; e Pentium IV 1800, com o valor 3 ; 15. Defina AMD XP como o item seleccionado inicialmente; 16. Crie um novo parágrafom 17. Escreva Caixa: ; 18. Ao lado escreva branca ; 19. Ao lado de branca adicione um botão de rádio com o nome cor e valor 1 ; 20. Ao lado desse botão escreva preta ; 21. Ao lado adicione outro botão de rádio de nome cor e valor 2 ; 22. Ao lado escreva metalizada ; 23. Crie um botão de rádio de nome cor e valor 3 ; 24. Escreva ao lado transparente ; 25. Adicione um botão de rádio de nome cor e valor 4 ; 26. Crie um novo parágrafo; 27. Escreva Opcionais: ; 28. Escreva Leitor de DVD ; 29. Adicione uma caixa de selecção chamada DVD com o valor 1 ; 30. Escreva Gravador CDRW ; 31. Adicione uma caixa de selecção chamada CDRW com o valor 1 ; 32. Escreva Gravador DVDRW ; 33. Adicione uma caixa de selecção chamada DVDRW com o valor 1 ; 34. Crie um novo parágrafo; 35. Crie um botão Enviar ; 36. Crie ao lado um botão Redefinir ; 37. Guarde o ficheiro; 38. Teste-o no browser. 154

157 Sumário Terminada esta parte, deverá ser capaz de: Criar um formulário; Colocar elementos nos formulários. Parte IV 3.4. Elementos Especiais, Plugins e o Painel de Propriedades Neste capítulo aprenderá como usar o elemento META, SSI s, Plug-ins e o Painel de Propriedades. Objectivos Após conclusão deste capítulo, deverá ser capaz de: Adicionar informação relevante para motores de busca da Internet através do elemento Meta; Compreender e usar Plug-ins; Usar o Painel de Propriedades; Usar a Biblioteca do Dreamweaver; Usar Modelos do Dreamweaver O Elemento Meta O elemento <META> é usado para fornecer informação acerca da página aos motores de busca e outros serviços relacionados com a Internet. Pode ser também usado para enviar comandos aos browsers para executar tarefas particulares, tais como refrescar a página actual, substituir a página actual por outra e impedir que o browser coloque a página na sua cache. O elemento <META> coloca-se sempre na secção do cabeçalho da página, ou seja, entre os elementos <HEAD> e </HEAD>. Por defeito, o Dreamweaver coloca a seguinte tag <META> em todos os documentos: <META http-equiv= Content-Type content= text/html; charset=iso > 155

158 O atributo http-equiv envia comandos ao servidor através do browser. Content-Type prepara o servidor para receber uma descrição do tipo de conteúdo ou do tipo de codificação do documento. Neste caso, o documento é do tipo texto/html e usa o conjunto de caracteres iso (Western (Latin1)). O atributo content descreve o tipo de codificação. Pode adicionar elementos <META> de duas formas diferentes - no menu escolher Inserir / Tags do Cabeçalho ou clicar na secção Head da barra Inserir. Meta Clique em Meta para introduzir as propriedades manualmente. No menu drop-down pode escolher entre Nome ou Equivalente em HTTP. Escreva o valor do atributo no campo Valor e o conteúdo no campo Conteúdo. Por exemplo, para impedir que o Netscape Navigator ponha a página na cache, deveria seleccionar Equivalente em HTTP no campo Atributo e escrever Pragma no campo Valor e no-cache no campo Conteúdo. <META http-equiv= Pragma content= no-cache > Palavras-chave Clique no ícone para introduzir palavras-chave que descrevem o conteúdo do seu site. Os motores de busca irão usar esta informação para os seus resultados. No campo Palavras-Chave escreva palavras que descrevem o conteúdo. Exemplo: 156

159 <META name= keywords content= macromedia, dreamweaver, webdesign > Descrição Clique no ícone para escrever uma breve descrição da sua página no campo Descrição. Os motores de busca também usam esta descrição. Exemplo: <META name= description content= Aprenda Dreamweaver rapidamente e facilmente. > Actualizar Clique no ícone para forçar o browser a refrescar ou actualizar o documento após um certo período de tempo ou para obrigar o browser a carregar outra página em vez da actual passado um certo período de tempo. No campo Atraso escreva em segundos o valor que pretende para o período de tempo. Depois opte entre forçar o browser a abrir outra página ou a actualizar a página actual, activando Ir para a URL: ou Actualizar este documento, respectivamente. Exemplo do código para actualizar a página automaticamente a cada 60 segundos: <META http-equiv= refresh content= 60 > Nota: O Netscape Navigator não suporta esta função. 157

160 Base Escolha Base para indicar qual o URL básico ao qual estão relacionados todos os caminhos associados a documentos presentes na página. Se necessário pode indicar qual a moldura a que se destina. Exemplo: <BASE href=.../índex.htm > Link Escolha Link para criar links para ficheiros externos, tais como ficheiros CSS, JavaScript, entre outros. A função Link não é parte do elemento META, mas está sempre posicionado no cabeçalho do documento Plug-ins Os plug-ins não são mais que extensões para os browsers que lhes permitem apresentar vários tipos de media que não são suportados originalmente pelo browser. Por exemplo, imaginemos que os browsers não podiam apresentar imagens em formato JPEG. A única forma de tornar isso possível, seria fazer o download de um programa (o plug-in) que complementaria o browser de forma a poder apresentar as imagens JPEG. Felizmente, os browsers apresentam de origem imagens JPEG. No entanto, isso não é possível para outros media, tais como Flash, Shockwave, Quick Time, RealPlayer, etc. Como resultado, os utilizadores precisam do plug-in apropriado para ver este tipo de media. Actualmente existem dois elementos usados para plug-ins. Eles são o <EMBED> e o <OBJECT>. O elemento <OBJECT> está a tornar-se no método preferido para implantar plug-ins. No entanto, para assegurar compatibilidade a 100% entre browsers e versões diferentes, o Dreamweaver usa ambos os elementos. O elemento <EMBED> e os seus 158

161 atributos são contidos dentro do elemento <OBJECT>. O Dreamweaver tem um suporte de plug-in para Flash e Shockwave Inserir ficheiros Flash ou Shockwave Para inserir ficheiros do Flash (extensão.swf), clique no ícone na barra Inserir. O código do plug-in será automaticamente colocado no documento. Aparecerá então a caixa Seleccione o arquivo, onde deve escolher o ficheiro pretendido. O dreamweaver gera o seguinte código: <OBJECT classid="clsid:d27cdb6e-ae6d-11cf-96b " codebase=" ash/swflash.cab#3,0,0,0" width="300" height="100"> <PARAM name="src" value="flash.swf"> <EMBED src="flash.swf" pluginspage=" type="application/x-shockwave-flash" width="300" height="100"> </EMBED> </OBJECT> Como pode ver no exemplo acima, ambos os elementos estão a ser usados OBJECT para o Internet Explorer e EMBED para o Netscape Navigator. Ambos os elementos funcionam do mesmo modo, embora os seus atributos variem Modificar as Propriedades do Plug-In Clique no plug-in desejado clicando sobre o indicador do plug-in na Janela do Documento. 159

162 As propriedades do plug-in serão então apresentadas no Inspector de Propriedades. As opções variam de acordo com o tipo de plug-in em causa O Painel de Propriedades O Painel de Propriedades ajuda-o a gerir e usar recursos usados no site. Está dividido em nove categorias: Imagens, Cores, URLs, Flash, Shockwave, Filmes, Scripts, Modelos e Biblioteca. Encontrará cada um representado por um ícone, no qual deve clicar para aceder aos conteúdos. Para ver o Painel de Propriedades deve ir ao grupo de painéis Arquivos (à direita da janela do Dreamweaver) e clicar no separador Propriedades. 160

163 Este painel permite-lhe ver rapidamente os diferentes tipos de recursos do site. Além disso, em cada categoria, pode criar uma lista de favoritos seleccionando os recursos desejados numa categoria e clicando no botão (em baixo á direita). Para ver os itens favoritos, clique no botão de rádio Favoritos no topo do painel. Pode organizar os favoritos em pastas. Clique no botão (em baixo) para adicionar uma pasta. Pode criar pastas dentro de outras pastas. Simplesmente arraste os itens para dentro da pasta apropriada Biblioteca Pode usar a biblioteca do Dreamweaver para conteúdos repetitivos ao longo de todo o site. A biblioteca pode ser acedida através do ícone no Painel de Propriedades. Para colocar conteúdo na biblioteca, escolha na Janela do Documento e arraste para dentro da biblioteca. O item será adicionado à biblioteca. Para colocar um item da biblioteca noutro documento, simplesmente posicione o cursor onde deseja inserir o conteúdo e clique no botão Inserir. O conteúdo será adicionado à página. O conteúdo ligado a uma biblioteca não pode ser editado e aparece a amarelo na Janela do Documento, indicando um item da biblioteca. Para editar um item da biblioteca, simplesmente clique duas vezes no item da biblioteca. Uma Janela de Documento será aberta. Edite o conteúdo nessa janela como editaria numa página HTML normal. O 161

164 nome do ficheiro é o nome do item da biblioteca acrescentado da extensão.lbi. Quando tiver acabado de editar o conteúdo, grave o ficheiro. O Dreamweaver pergunta então se deseja alterar todas as instâncias desse item no seu site ou, por outras palavras, pergunta se deseja que essas mudanças que fez sejam reflectidas em todos os ficheiros onde incluiu esse item. Se responder Actualizar então a caixa Actualizar as páginas aparecerá. Escolha Os arquivos que utilizam para os ficheiros que deseja actualizar ou No site inteiro para todos os ficheiros do site que usem esse item da biblioteca. Se clicar em Mostrar o registro terá um sumário das alterações. A biblioteca é um recurso poderoso apresentado pelo Dreamweaver que permite actualizações rápidas e fáceis ao conteúdo de todo o site Modelos Os Modelos do Dreamweaver são páginas que podemos criar para servirem de base à criação de outras páginas. O modelo tem partes que podem ser alteradas e outras que definimos como sendo fixas, não podendo ser alteradas. Normalmente as partes fixas são as partes que são constantes ao longo de todo o site ou então partes que não queremos que sejam alteradas de modo algum. As alterações que fizer ao modelo serão reflectidas nas páginas desenhadas a partir deste o Dreamweaver encarrega-se de actualizar as páginas criadas a partir do modelo que for alterado. Se, por exemplo, tivermos um menu que se apresenta igual ao longo de todo o site, então o modelo será uma óptima ajuda, pois sempre que pretender alterar o menu basta alterar no modelo e o Dreamweaver encarrega-se do resto por si Criar um Modelo Para criar um modelo, primeiro deve criar a página como normalmente faria, colocando o conteúdo que deseja que apareça em todas as suas páginas ou num conjunto de páginas. Uma vez criada a página, em vez de a guardar como um ficheiro HTML normal, deve escolher no menu Arquivo / Salvar como modelo. A caixa Salvar como modelo surge no ecrã. No menu drop-down, escolha o site onde pretende guardar o modelo (no caso de ter mais 162

165 que um site). Qualquer modelo que tenha criado será apresentado na lista dos modelos existentes. Escreva o nome do modelo no campo Salvar como e clique em OK. O ficheiro do modelo é quardado com a extensão dwt (modelo.dwt) numa pasta que o Dreamweaver cria no site chamada Templates. Se aceder à categoria Modelos no Painel de Propriedades, verá que o modelo que criou é apresentado lá Aplicar um Modelo Para aplicar um modelo a uma página, crie um novo documento, escolha o modelo que deseja usar e clique no botão Aplicar. Alternativamente, pode simplesmente clicar com o botão do lado direito sobre o modelo que deseja usar e escolher Nova a partir de modelo. O modelo será aplicado no novo documento. 163

166 Por defeito, todo o conteúdo de um modelo está bloqueado. Cabe-lhe a si designar quais as regiões do modelo que serão editáveis, ou seja, quais as partes do modelo que podem ser modificados quando criar páginas a partir do modelo Criar Regiões Editáveis Para criar uma região editável, ou seja, uma área do modelo que pode ser modificada no documento ao qual o modelo foi aplicado, escolha o conteúdo que deseja tornar editável, clique sobre ele com o botão do lado direito e escolha Nova Região Editável. A caixa Nova região editável surgirá no ecrã. Escreva o nome da região editável. Na Janela do Documento, a área que designou como editável é marcada com o nome que atribuiu à região editável. Infelizmente o indicador visual das regiões editáveis distorce um pouco o aspecto da página apresentada na Janela do Documento. No entanto, a página e o aspecto da página mantêm-se intactos. Quando aplica um modelo a uma página, é apresentada na Janela do Documento uma borda amarela à volta da página e a informação de que está a usar um modelo em particular. 164

167 Pode desligar esses indicadores no menu Exibir / Auxílios visuais / Ocultar todos. As regiões mantêm-se editáveis, simplesmente não vera os indicadores. Por vezes pode pretender desassociar uma página ao modelo que usou de modo a poder modificá-la nas áreas onde o modelo não permite editar. Para desassociar a página ao modelo, escolha no menu Modificar / Modelos / Desconectar do modelo Questões de Revisão A. Qual é a relação entre o atributo http-equiv e o browser? B. Os utilizadores vêem o conteúdo META quando visitam as páginas? C. Quais são as principais vantagens do uso da Biblioteca do Dreamweaver? D. Qual é o principal propósito da criação e uso de modelos? Sumário Terminada esta parte, deverá ser capaz de: Usar elementos META para adicionar informação relevante aos motores de busca da Internet e a quem vê o seu código-fonte; Compreender e usar Plug-ins; Usar o Painel de Propriedades; Usar a Biblioteca do Dreamweaver; Usar modelos do Dreamweaver. 165

168 MACROMEDIA DREAMWEAVER Módulo 4 Parte I 4.1. Folhas de Estilo e Estilos HTML Neste capítulo abordamos as Folhas de Estilo (CSS) e os Estilos HTML, ambas muito úteis e bastante poderosas na criação de páginas HTML. Objectivos Após conclusão deste capítulo, deverá ser capaz de: Compreender as Folhas de Estilo; Criar uma Folha de Estilo externa; Usar camadas (layers); Usar Estilos HTML Introdução às Folhas de Estilo As Folhas de Estilo (CSS Cascading Style Sheets) permitem maior controlo no layout das páginas, dando a possibilidade de colocar o conteúdo na posição pretendida com grande precisão (através das camadas) e aumentando o controle sobre o estilo do texto. Com CSS pode definir o tipo de fonte, controlar o espaçamento e a indentação, etc., de um documento apenas ou do site inteiro. Existem três métodos de aplicação de uma folha de estilo: - Em linha - Folhas de Estilo Encapsuladas - Folhas de Estilo Externas. 166

169 Em linha Este método de aplicação aplica a folha de estilo em linha com o documento. As propriedades da folha de estilo são aplicadas ao conteúdo entre os elementos <BODY> e </BODY>. Por exemplo, pode definir um certo tipo de letra, com certa cor e certo tamanho, para um parágrafo apenas aplicando o código CSS a esse parágrafo. As folhas de estilo definidas através deste método sobrepõem-se às folhas de estilo definidas pelos outros dois métodos. Para criar um estilo usamos os elementos <STYLE> e </STYLE>. Um código em linha típico seria algo semelhante a este: <P STYLE= color:red >Texto com estilo!</p> O texto no browser aparecerá de cor vermelha. No código em linha o elemento <STYLE> é colocado dentro de outro elemento, tal como se fosse um atributo. O valor do STYLE é dividido em duas partes uma propriedade (como cor, por exemplo) e um valor (como red por exemplo). A propriedade e o valor são separados por dois pontos : em vez de um sinal de igualdade =. Como pode verificar, aplicar estilos desta forma, não é muito diferente de usar o elemento <FONT> normalmente: <P><FONT color= red >Este texto tem estilo!</font></p> No entanto, é um modo muito mais curto de o fazer. Folhas de Estilo Encapsuladas Estas folhas de estilo são colocadas no elemento cabeçalho do documento HTML e são aplicáveis apenas a esses documentos. Para usar uma folha de estilo, deve definir um bloco de estilo (definido entre os elementos <STYLE> e </STYLE>). O bloco consiste num conjunto de regras de estilo, onde cada regra define um estilo para um elemento HTML. Exemplo: <STYLE type= text/css > <!-- p { font-family: Arial, Helvetica, sans-serif; font-size: 12pt; color: #FF0000} 167

170 --> </STYLE> O atributo type e o valor text/css são necessários como parte do elemento <STYLE>, excepto com folhas de estilo em linha. Os comentários à volta da dos elementos <STYLE> e </STYLE> são devido ao facto de alguns browsers mais antigos não reconhecerem estes elementos e é por isso que o Dreawmeaver coloca as tags de comentário à volta da informação da folha de estilo. No exemplo acima, verificamos que a informação de estilo começa com um selector. Os selectores identificam o elemento HTML ou grupo de elementos aos quais se referem as definições de estilo. Neste caso, estamos a dizer que o texto contido entre os elementos <P> e </P> no nosso documento terão a fonte Arial, tamanho 12 e será vermelho. A seguir ao selector temos a definição do estilo contida entre chavetas. Essa definição consiste em propriedades seguidas de valores, separadas por dois pontos. Todos os valores devem ser seguidos por um ponto e vírgula. Classe Como já vimos, com CSS podemos redefinir um elemento HTML já existente como selector (foi o caso do exemplo <P> </P>). Além disso, podemos ainda criar os nossos próprios nomes para selectores. A cada um desse selectores chamamos Classe. Desta forma, deixamos que os elementos HTML funcionem na sua normalidade. Por exemplo, suponhamos que pretendemos criar uma classe chamada estilo e associar a um conjunto de estilos: <STYLE type= text/css > <!--.estilo { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12pt; color: #FF0000 } --> </STYLE> Quando temos uma classe, o selector será designado por um. antes do nome da classe. 168

171 Para aplicar uma classe a um elemento, deve simplesmente adicionar a classe a um elemento como no exemplo em baixo: <P CLASS= estilo >Mais texto, ainda mais estilo!</p> Note que o ponto final necessário no selector, aqui não é incluído no valor do nome da classe. Neste exemplo, o texto Mais texto, ainda mais estilo! será formatado com o estilo definido na classe.estilo localizada no <HEAD> do documento. Folhas de Estilo Externas Uma Folha de Estilo Externa é um documento separado que a sua página HTML referencia. A grande vantagem deste método é a mesma dos modelos. Sempre que precisar de alterar alguma coisa num estilo em particular ou num conjunto de estilos de todo o site, não terá de efectuar as alterações em todos os ficheiros que usam o estilo. Bastará alterar o documento da folha de estilo e essa alteração terá reflexo em todas as páginas que estão a usar essa folha de estilo. Para ligar um documento HTML a uma folha de estilo, o link para a folha de estilo deve ser colocado no cabeçalho do documento: <LINK REL= STYLESHEET HREF= styles.css > Neste exemplo, ligamos o documento a uma folha de estilo contida no ficheiro styles.css. A extensão.css é a extensão standard nos ficheiros de folhas de estilo externas. O conteúdo do ficheiro styles.css é simplesmente o selector seguido do conjunto de propriedades e valores, como por exemplo:.estilotexto { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18pt; font-style : italic ; color : #0000CC ; text-indent : 20px } Dentro de qualquer documento HTML no site que inclua o elemento LINK no cabeçalho do documento referenciado a styles.css, o uso da classe estilotexto no documento será sempre aplicada às definições detalhadas em styles.css. Hierarquia de estilos Existe uma hierarquia nas folhas de estilo. Qualquer folha de estilo em linha sobrepõe-se seja a folhas de estilo encadeadas, seja a folhas de estilo externas. As folhas de estilo encadeadas sobrepõem-se às folhas de estilo externas. 169

172 Criar Folhas de Estilo no Dreamweaver Para criar uma folha de estilo, no menu escolha Texto / Estilos CSS / Novo Estilo CSS. Verá aparecer a caixa Novo estilo CSS. Por defeito o Dreamweaver assume que pretende criar uma Classe. Escreva o nome da Classe no campo Nome. Em Tipo escolha Criar estilo personalizado (classe). Se escolher Redefinir a tag de HTML, o campo Nome torna-se num menu de tags. Nesse caso, se pretender mesmo redefinir um elemento, então escolha a tag à qual pretende aplicar o estilo. Por defeito, o Dreamweaver também assume que pretende criar uma folha de estilo externa ( Novo arquivo de folha de estilos no campo Definir em ). Para criar uma folha de estilos encadeada, active a opção Apenas este documento. Usar selector de CSS Pode redefinir a forma como os seus links se apresentam. Active a opção Utilizar o selector de CSS e verá que o campo Nome muda para Selector. Aí será apresentado um menu com os seguintes itens: a:active ; a:hover ; a:link ; a:visited. Estes itens correspondem às propriedades dos links. 170

173 Vamos criar uma classe chamada exemplo numa folha de estilo externa. No campo Nome escreva.exemplo (não se esqueça do ponto). No campo Type opte por Criar estilo personalizado (classe) e no campo Definir em mantenha Novo arquivo de folhas de estilos. Clique em OK. Como vamos criar uma folha de estilo externa, temos então que gravar o ficheiro.css. Dê ao ficheiro o nome exemplo e clique em Guardar. Aparecerá então no ecrã a caixa de definição de estilos. Esta caixa está dividida em várias categorias. Do lado esquerdo temos oito categorias, se clicarmos numa delas, teremos do lado direito os parâmetros associados a essa categoria. 171

174 Neste caso vamos seleccionar o tipo de fonte Arial, Helvetica, sansserif, de tamanho 14 e cor vermelha (#FF0000). Depois de criado o conjunto de definições do estilo, clique em OK. O estilo que criou será apresentado na Janela de Estilos do Painel de Design Aplicar um Estilo ao Conteúdo Para aplicar um estilo a conteúdo na sua página, seleccione o conteúdo e clique no nome do selector na Janela de Estilos. O estilo será aplicado. Por exemplo: <SPAN CLASS= exemplo >Outro exemplo</span> O elemento <SPAN> é usado com os estilos de forma semelhante à tag <P>, para formatar texto dentro do documento HTML. É apenas uma forma de delimitar o conteúdo onde aplicamos o estilo. 172

175 Modificar Folhas de Estilo Externas Pode editar folhas de estilo externas no Dreamweaver. Basta escolher no menu Texto / Estilos CSS / Editar folhas de estilo. A caixa Editar a folha de estilos surge no ecrã. Qualquer selector de folha de estilo encadeada e folhas de estilo externas serão apresentados nessa caixa. Clique duas vezes sobre o item desejado. Uma outra caixa surge no ecrã com a lista de todos os selectores da folha de estilo. 173

176 Escolha o selector que deseja editar. O botão Editar fica activo. Clique nesse botão. Se pretender, pode também clicar no botão Novo para adicionar um estilo à folha de estilos. Em ambos os casos, aparece a caixa de definição de estilos onde pode finalmente efectuar as alterações desejadas Ligar Páginas a uma Folha de Estilos Externa Para ligar uma folha de estilos a uma página, abra essa página e clique no botão na Janela de Estilos CSS no Painel de Design. Verá aparecer a caixa Vincular a folha de estilos externa, onde deverá procurar a folha de estilo e seleccioná-la O Reilly Reference Panel No Painel de Código, verá um separador Referência. Clique nesse separador e terá acesso a uma pequena enciclopédia sobre HTML e CSS. Pode consultar essa enciclopédia para se informar acerca das várias tags, atributos e propriedades do HTML standard. Caso tenha dúvidas sobre CSS, então poderá pesquisar nessa enciclopédia acerca das 174

177 propriedades das folhas de estilo, ver descrições das várias propriedades e saber quais os browsers que as suportam Camadas As camadas (layers) são uma ferramenta de layout poderosa. Com as camadas podemos colocar conteúdo em áreas particulares de uma página com a precisão perfeita de pixéis. A outra grande vantagem das camadas é a possibilidade de poderem sobrepor-se umas às outras. Pode ainda torná-las visíveis ou invisíveis. Estas camadas podem ser facilmente manipuladas recorrendo ao JavaScript, podendo criar efeitos dinâmicos sem grandes problemas. Para criar uma camada no Dreamweaver, clique no ícone na barra Inserir. Desenhe a camada na Janela do Documento, clicando e arrastando e soltando depois o botão do rato. Uma camada será então colocada na Janela do Documento. Para seleccionar uma camada, clique na sua borda. Se desejar mover a camada, seleccione-a e clique na sua borda, arrastando o rato sem soltar o botão do rato. Largue o botão na nova posição que deseja para a camada. Pode ainda redimensionar a camada. Para isso, seleccione a camada e clique num dos quadrados das bordas e arraste-os sem soltar o botão do rato, largando o botão quando tiver atingido a dimensão pretendida. Pode colocar qualquer conteúdo que desejar dentro da camada, desde texto a imagens e clips de vídeo. 175

178 Camadas e CSS Se examinarmos o código gerado para uma camada, podemos ver como as camadas usam propriedades das folhas de estilo em linha, combinadas com o elemento <DIV> para criar áreas únicas numa página. Quando cria uma camada, o Dreamweaver gera o seguinte código: <DIV id= Layer1 style= position:absolute; left:30px; top:33px; width:179px; height:113px; z-index:1 ></DIV> O Dreamweaver usa o elemento <DIV> para distinguir a camada porque o elemento <DIV> é compatível com o Netscape Navigator e também com o Internet Explorer. Normalmente, o elemento <DIV> define um bloco onde o conteúdo é separado por quebras de linha em vez de espaços como acontece com o elemento <P>. No entanto, quando combinado esse elemento com definições de estilo e, mais particularmente, a propriedade posição, as quebras de linha são irrelevantes porque posicionar a camada onde desejar no documento com a precisão perfeita. Note que o código segue o método das folhas de estilo em linha em vez de usar classes. As camadas são distinguidas por IDs, portanto cada camada é única no documento. Por defeito, o Dreamweaver atribuilhes IDs Layerx, onde x é um número, começando pelo 1 e incrementando a cada nova camada. Pode alterar o nome das camadas na Janela de Camadas no Painel de Layout Avançado (pressione F2 para o visualizar). Com o atributo style definimos várias propriedades, onde a mais importante é position. O valor absolute, significa que a posição da camada não é relativa em termos de tamanho actual da janela do browser. A posição absoluta é um certo número de pixéis da esquerda da janela do browser e um certo número de pixéis a contar da parte de cima da janela do browser, neste caso, 30 pixeis da esquerda e 33 pixeis do topo. A largura e altura da camada também é definida em pixéis. Finalmente, o índice-z indica a profundidade da camada, onde os valores mais altos ficando sobrepostos aos valores mais baixos. 176

179 Propriedades das Camadas Para modificar a propriedades de uma camada, clique na camada e altere as propriedades no Inspector de Propriedades. ID da camada Este campo apresenta o nome de identificação da camada e pode ser alterado. E (Esquerda) e A (Topo) Escreva aqui o valor em pixéis para posicionar a camada, da esquerda e topo da janela do browser ou mova a camada arrastando-a com o rato. L (Largura) e U (Altura) Escreva o valor em pixéis para definir o tamanho da camada. Pode também modificar as dimensões da camada arrastando os quadrados da borda da camada. Índice-Z Para alterar a profundidade da camada, escreva um valor numérico. As camadas com valores mais baixos ficam escondidas por detrás das camadas com valores mais altos. Imagem de fundo Aqui pode indicar opcionalmente uma imagem de fundo para a camada. Vis Pode optar entre default (o mesmo que inherit ), inherit, visible e hidden, para definir a visibilidade da camada. Cor de fundo Aqui pode escolher uma cor de fundo para a camada. Tag Opte entre DIV e SPAN. DIV é o valor por defeito porque é compatível com a maioria dos browsers, tal como já aqui foi mencionado. SPAN apenas tem a diferença de não separar o conteúdo com parágrafos mas sim quebras de linha. 177

180 Estouro (Overflow) O estouro ocorre quando a camada se expande para apresentar todo o conteúdo que seja maior que a largura e altura definida. Escolha visible se desejar que a camada se expanda se necessário. Escolha hidden para manter as dimensões da camada de forma fixa. Qualquer conteúdo fora das dimensões da camada ficará invisível e as barras de deslocamento não serão visíveis. Se escolher scroll essas barras serão apresentadas sempre, mesmo que o conteúdo não exceda as dimensões da camada. Para evitar que essas barras sejam apresentadas a não ser nos casos necessários, então escolha auto. Corte E (Esquerda), A (Topo), D (Direita), X (Fundo) Para designar que partes de uma camada são visíveis dentro dos limites da camada, atribua os valores desejados aos campos E, A, D e X Janela de Camadas Para gerir as camadas pode usar a Janela de Camadas. Escolha no menu Janela / Outros / Camadas ou, simplesmente, pressione a tecla [F2]. O painel é composto pela opção de evitar sobreposições, indicador de visibilidade, nome da camada e indicador de profundidade. Para alterar a visibilidade de uma camada, simplesmente escolha a camada clicando no nome da camada e depois na área ao lado (a coluna do indicador de visibilidade). Quando o indicador de visibilidade estiver em branco, significa que a visibilidade está definida para o valor por defeito (o qual os browsers assumem ser inherit ). Quando temos um símbolo de um olho nessa coluna, então significa que a camada está visível. Quando esse olho se apresenta fechado, então a camada está invisível. Se desejar mudar o nome da camada, clique duas vezes no nome. O mesmo se aplica ao valor da profundidade da camada. 178

181 Se não desejar que as camadas se sobreponham, active a opção Evitar sobreposições Estilos HTML O maior problema das CSS é não serem compatíveis com as versões anteriores à 3.0 do Internet Explorer e anteriores à 4.0 do Netscape Navigator. Se está repetitivamente a aplicar uma formatação de texto em particular nas suas páginas, pode criar um Estilo HTML ajustado às suas necessidades. Funciona de certa forma como uma folha de estilo mas com a excepção de que quando altera o estilo, este não irá ser automaticamente actualizado em todos os documentos que o usam automaticamente. Pode ver os estilos HTML na Janela de Estilos HTML no Painel de Design. Poderá ver alguns estilos HTML pré-definidos pelo Dreamweaver. Seleccione na Janela do Documento o texto ao qual pretende aplicar um estilo e clique no nome do estilo na lista da Janela de Estilos. Para criar os seus próprios estilos HTML, aplique a formatação a uma janela de texto seleccionada por si e depois clique no botão da Janela de Estilos HTML para criar o novo estilo. A caixa Definir o estilo HTML surge no ecrã. 179

182 Escreva um nome para o estilo HTML no campo Nome. Indique se deseja que o estilo se aplique a uma selecção ou a um parágrafo. Se desejar adicionar o estilo actual a outros estilos já existentes, active a opção Adicionar ao estilo existente Questões de Revisão F. Quando usa CSS para formatar texto, qual é o melhor método? Porquê? G. Quais são alguns dos potenciais problemas com as folhas de estilo? H. Como usa uma classe nos conteúdos? I. Que tipo de folhas de estilo são as camadas: em linha, encadeadas ou externas? J. Como se altera a visibilidade das camadas? Sumário Terminada esta parte, deverá ser capaz de: Compreender as folhas de estilo (CSS); Criar uma folha de estilo externa; Usar camadas; Usar estilos HTML. 180

183 Parte II 4.2. Comportamentos e JavaScript Neste capítulo verá como usar os comportamentos do Dreamweaver, os quais não são mais do que conjuntos pré-definidos de código JavaScript que podem melhorar consideravelmente as suas páginas. Objectivos Quando completada esta secção, deverá ser capaz de: Compreender a relação do JavaScript com o HTML; Usar os comportamentos do Dreamweaver JavaScript O JavaScript é uma linguagem de script versátil que foi criado para permitir estender as capacidades e funcionalidades das suas páginas para além do HTML standard. Com recurso ao JavaScript poderá tornar as suas páginas dinâmicas, com efeitos de animação, com reacção ao utilizador, etc. O JavaScript faz parte do que é conhecido como HTML Dinâmico (DHTML Dynamic HTML), controlando e modificando os elementos HTML. O código JavaScript deve ser colocado no cabeçalho do documento HTML. As funções ou variáveis que são definidas no cabeçalho podem ser chamadas dentro do corpo do documento. Exemplo: <HTML> <HEAD> <TITLE>Comportamentos e JavaScript</TITLE> <script language= JavaScript > <! 181

184 function MM_checkBrowser(NSvers,NSpass,NSnoPass,IEvers,IEpass,IEnoPass,OBpass,URL,altURL) {//v2.0 var newurl = '', version = parsefloat(navigator.appversion); if (navigator.appname.indexof('netscape ')!= -1) { if (version >= NSvers) {if (NSpass>0) newurl = (NSpass==1)?URL :alturl;} else {if (NSnoPass>0) newurl = (NSnoPass==1)?URL :alturl;} } else if (navigator.appname.indexof('microsoft')!= -1) { if (version >= IEvers) {if (IEpass>0) newurl = (IEpass==1)?URL :alturl;} else {if (IEnoPass>0) newurl = (IEnoPass==1)?URL :alturl;} } else if (OBpass>0) newurl = (OBpass==1)?URL :alturl; if (newurl) { window.location = unescape(newurl); document.mm_returnvalue = false; } } //--> </script> </HEAD> Como pode verificar, o JavaScript é muito diferente do HTML. Este exemplo acima verifica a versão e o tipo de browser e redirecciona automaticamente o utilizador para a página indicada para a versão utilizada. O Dreamweaver gera o código JavaScript necessário atráves dos comportamentos do Dreamweaver. O script será colocado dentro das tags <SCRIPT> e </SCRIPT>. As tags de comentário ( <!-- e --> ) têm como função fazer com que os browsers que não suportam JavaScript ignorem essa parte do código. O atributo language tem o valor JavaScript, o qual informa o browser que o script que se segue é JavaScript Comportamentos As rotinas pré-definidas de JavaScript contidas no Dreamweaver são chamadas Comportamentos. Para aceder a estes comportamentos, escolha no menu Janela / Comportamentos ou pressione as teclas [SHIFT] + [F3]. A Janela de Comportamentos abrirá no Painel de Design. 182

185 Através da Janela de Comportamentos pode controlar estas rotinas, adicionando ou removendo comportamentos, alterando a sua ordem e modificando eventos e acções Adicionar e Remover Comportamentos Clique nos ícones adicionar ou remover para gerir os comportamentos. Existem diferentes tipos de comportamentos. Alguns podem ocorrer automaticamente quando a página é carregada, outros requerem que escolha o objecto ou elemento que deseja controlar, tal como uma camada, por exemplo. A lista de comportamentos disponíveis depende da versão do browser que escolhe no item Mostrar os eventos de. Deve definir o browser que pretende antes de começar a adicionar os comportamentos. 183

186 Eventos e Acções Quando escolhe um comportamento, este será accionado por um evento. Na Janela de Comportamentos, terá o comportamento na coluna Acções e o evento que desencadeia a acção na coluna Eventos. Por exemplo, se decidirmos criar uma camada visível apenas quando o utilizador passa o rato sobre uma imagem: O evento é (onmouseover) e a acção é Mostrar-ocultar as camadas Usar Comportamentos A chave para o uso de comportamentos está na combinação. Podemos combinar uma variedade de comportamentos para obter um comportamento dinâmico na página. Por exemplo, para criar numa página um menu onde ao clicar num botão surge um sub-menu, teremos de posicionar camadas e torná-las visíveis e invisíveis conforme a situação. Para isso teremos de usar um conjunto de comportamentos. Usamos o comportamento Mostrar-ocultar as camadas para tornar as camadas visíveis ou invisíveis em reacção ao comportamento onmouseover do rato. Em primeiro lugar, criamos as camadas e posicionamos as imagens que servirão de botões para o menu. De seguida, devemos tornar visível a camada dos botões do menu e invisível a camada dos botões do submenu. 184

187 O passo seguinte é usar os comportamentos para controlar quando as camadas são visíveis ou invisíveis. Por exemplo, quando passamos o rato no primeiro botão do menu ( Processador ), pretendemos ver o submenu com os processadores. Queremos portanto que a camada desse sub-menu ( cproc ) se torne visível. Para tal, precisamos de escolher a imagem desse botão. Anteriormente teríamos já atribuído um nome a cada uma das imagens dos botões, de forma a podermos manipulá-los através do JavaScript. Com essa imagem já escolhida escolhemos o comportamento Mostrar-ocultar camadas. Escolhemos a camada Layer2 e clicamos em Mostrar. Esta camada é a que contém os botões com os processadores. O evento que desencadeia a acção é o onmousedown. 185

188 Deve ter reparado na imagem acima que o evento apresentado não é (onmousedown) mas sim (onmouseover). Isto é porque por defeito o browser definido em Mostrar os eventos de é 3.0. Se nesse menu alterarmos para um browser mais recente, teremos então a possibilidade de usar o evento onmousedown. Para passarmos o evento de onmouseover para onmousedown, clicamos no evento e no botão que surge ao lado do evento. Escolhemos então esse evento na lista de eventos que surge no ecrã. Repetimos este processo para o segundo botão do menu ( Memórias ) e obtemos o menu pretendido. Ao clicar no primeiro botão temos o submenu Processadores e ao clicar no segundo temos o sub-menu Memórias. 186

189 Rollovers Um dos efeitos mais usados na Internet é o efeito rollover. Com este efeito podemos transformar uma imagem noutra, reagindo a eventos, normalmente do rato. Vemos muitas vezes páginas onde ao passar o rato no botão, este muda o seu texto ou cor. Esse é o efeito que falamos. O Dreamweaver usa os comportamentos para criar rollovers. Na versão em português do Dreamweaver, este feito chama-se Imagem Cambiável. Para criar este efeito, clique na Janela do Documento no local onde deseja posicionar o botão e clique no ícone. A caixa Inserir imagem cambiável surge no ecrã. Atribua um nome à imagem, indique a imagem original (a imagem que é apresentada quando a página é carregada) e a imagem cambiável (imagem que surge quando o evento ocorre). Para que este efeito resulte correctamente, tenha o cuidado de certificar-se que as duas imagens têm as mesmas dimensões. Caso contrário, a segunda imagem será redimensionada, resultando em alguma distorção da mesma. Active a opção Pré-carregar a imagem cambiável para se certificar que a imagem cambiável será carregada para a memória quando a página é carregada, de forma a ser apresentada imediatamente quando o utilizador passa o rato sobre a imagem original. Opcionalmente pode definir um link para a imagem no campo Quando tiver clicado, vá para o URL e um texto alternativo para os casos em que a imagem não pode ser apresentada. 187

190 Abrir Nova Janela do Browser Outro uso comum para o JavaScript é abrir uma nova janela do browser com dimensões fixas, um título particular, sem barra de ferramentas e barras de deslocamento, e sem os botões de navegação do browser. Para abrir uma nova janela do browser através dos comportamentos, simplesmente escolha o conteúdo (texto ou imagem) e escreva # no campo link no Inspector de Propriedades. De seguida deve tornar o link activo, removendo a selecção de conteúdo que fez. Seleccione o conteúdo de novo e escolha Abrir a janela do navegador na Janela de Comportamentos. A caixa Abrir a janela do navegador aparece. Indique a página que quer apresentar na nova janela. Escreva as dimensões (em pixéis) da janela. Active os atributos desejados e escreva um nome para a janela Outros Comportamentos Existem ainda mais comportamentos que aqui não foram abordados. O melhor será experimentar cada um deles. 188

191 Questões de Revisão A. Onde se deve colocar o código JavaScript num documento HTML? B. Porque é que alguns comportamentos ficam disponíveis apenas se escolher eventos para versões 4.0 dos browsers? C. O que é um rollover? D. Quais são os dois passos para definir o link de um documento para abrir numa nova janela do browser? Sumário Terminada esta parte, deverá ser capaz de: Compreender JavaScript relativo ao HTML; Usar os Comportamentos do Dreamweaver correctamente. Parte III 4.3. Ferramentas de Gestão de Sites Neste capítulo aprenderá a usar uma variedade de ferramentas destinadas à gestão de websites. Objectivos Quando completada esta secção, deverá ser capaz de: Usar as ferramentas de gestão de sites do Dreamweaver; Importar e limpar HTML do Word; Usar o Quick Tag Editor Verificar os Links Durante a produção do site pode esquecer-se de actualizar um link que entretanto tenha mudado. O Dreamweaver tem uma ferramenta para verificar se os links contidos no site são válidos. Na Janela do Site, no Painel de Arquivos, escolha no menu Arquivo / Verificar os links. O 189

192 Painel de Resultados será apresentado debaixo do Inspector de Propriedades. Nesse painel, clique no botão e escolha entre Verificar os links neste documento (para o documento aberto na Janela do Documento), Verificar os links no site inteiro Verificar os links quanto a arquivos ou pastas selecciondas no site. Então o Dreamweaver verificará os links e caso algum esteja inválido, este será apresentado no Painel de Resultados Compatibilidade entre Browsers Quando desenvolve um website não terá provavelmente a hipótese e o tempo para testar todas as páginas em browsers diferentes e com versões diferentes. No entanto, as páginas que desenvolveu podem não funcionar correctamente em alguns browsers. Por essa razão deve verificar a compatibilidade da página com vários browsers. Escolha no menu Arquivo / Verificar a página / Verificar os navegadores de destino. A caixa Verificar os navegadores de destino surgirá no ecrã. Nessa caixa deve seleccionar os browsers pretendidos (para seleccionar mais que um, segure a tecla [CTRL] enquanto clica nos itens da lista) e clicar em Verificar. Pode ver os resultados do teste de compatibilidade no Painel de Resultados. 190