Você está na página 1de 3

Curso Profissional de Tcnico de Gesto

Mdulo 3: Criao

de pginas Web

Professora: Anabela Cordeiro | NOME: | N.: _____ |Disciplina: TIC

Exerccio n 5 Objectivos:
Criao e Formatao de uma pgina Web: aplicar folhas de estilo, formatar caracteres e pargrafos, inserir tabelas e manipular tabelas, inserir efeitos DHTML, inserir barras de navegao personalizadas e barra com ligaes Anterior e Seguinte, inserir uma galeria de fotografias, inserir um filme em formato flash e inserir imagens programadas.

Tarefa:
1. Crie um novo Web site com o nome Meu_Site, na sua pasta de trabalho. 2. Crie as pginas do site de acordo com a estrutura apresentada na fig1. Figura.1

3. Crie uma folha de estilos em cascata externa com o nome estrada, a partir do modelo Auto-estrada. Faa: Ficheiro >> Novo >> mais modelos de pginas >> separador: Folhas de estilos >>opo autoestrada >> O.K. Guarde a folha de estilos criada com o nome estrada. 4. Aplique a todas as pginas do site a folha de estilos estrada. Para isso ter de fazer uma ligao ao estilo estrada. Assim, seleccione a pgina ndex >> faa formatar >> ligaes folha de estilo >> boto adicionar >> adicionar o ficheiro estrada.css >> opo todas as pginas >> confirmar hiperligaes de folhas de estilo de formatao (boto continuar). 5. Em todas as pginas do site, insira uma tabela com 4 linhas e uma coluna e as seguintes caractersticas: Alinhamento Largura Altura rea das clulas Espaamento entre clulas Tamanho dos limites Quadro.1 Centro 600 pxeis 500 pxeis 1 8 6

Prof Anabela Cordeiro

1C|2011-2012

Pgina 1 de 3

6. Aplique um limite azul-marinho a todas as clulas da tabela e com um alinhamento centrado. 7. Formate todos os pargrafos das pginas com espaamentos antes e depois de 0 pt e entrelinhamento simples. 8. Formate os ttulos de cada pgina do site com o estilo Ttulo 1. Seleccione a 1 clula de cada tabela e aplique as formataes. O Ttulo 1 encontra-se no canto superior esquerdo ao lado do tipo de letra. Por sua vez, aplique um fundo azul-atlntico e defina uma altura de 50 pixis para as respectivas clulas. 9. Com o estilo grfico baseado no tema Dirio, insira na pgina inicial uma barra de navegao com ligaes personalizadas s pginas agenda, fotografias e formulrio (figura1 printscreen). Guarde-a com o nome barra. 10. Nas restantes pginas, insira uma barra de navegao Anterior, Seguinte e Home Page (barra com ligaes Anterior e Seguinte), com um estilo grfico baseado no tema Dirio, a seguir tabela e com um alinhamento ao centro. PAGINA INICIAL 1. Na 1 linha escreva o texto: PGINA INICIAL. No altere a formatao do texto. 2. Na pgina home page (figura 1 printscreen), aplique um fundo branco segunda clula e vermelho quarta clula. 3. Defina uma altura de 25 pxeis para a segunda clula da tabela. 4. A seguir, insira a imagem do ficheiro J0237225.WMF. 5. Por fim, insira uma ligao ao endereo de correio electrnico, meuwebsite@google.pt formatando o texto com a cor branca e um estilo negrito e normal, tal como se encontra no ficheiro printScreen1 na pasta actividade 6. AGENDA 1. Na pgina agenda, faa as respectivas alteraes, para que a tabela esteja de acordo com o apresentado no ficheiro printScreen1. 2. Digite o texto contido nas clulas, aplicando os estilos Titulo 3 e Titulo 5. 3. Aplique um fundo branco nas clulas que contm imagens. 4. Insira uma imagem j0440082.gif. Insira a imagem de um automvel que passagem do rato, alterna com outra imagem diferente sua escolha. Dica: Efeitos DHTML. 5. Por fim, insira o filme em formato flash, que se encontra na pasta da rede. Inserir componente Web >> Controlos avanados >> filme em formato flash. GALERIA DE FOTOGRAFIAS 1. Na pgina fotografias (figura 4). Aplique um fundo vermelho (clula 2) e outro branco (clula 3). Defina uma altura de 25 pixis para as respectivas clulas. 2. Digite o texto contido nas clulas anteriores, aplicando os estilos Titulo 2 e Titulo 3. 3. Insira uma galeria de fotos do clipart na ltima clula e aplique um fundo cinzento-prateado, tal como apresentado na printScreen1.
Prof Anabela Cordeiro 1C|2011-2012 Pgina 2 de 3

Glossrio:
Folha de estilos Uma
folha de estilos em cascata um documento que contm informaes de estilo que podem servir de referncia para vrias pginas da Web. Os estilos definem a aparncia e a formatao do contedo em pginas da Web e permitem que os autores tenham mais controle sobre como o contedo exibido em navegadores." Referncia bibliogrfica:

http://www.nelliemuller.com/_vti_bin/_vti_adm/help/1046/Publish/fpagloss.htm

Prof Anabela Cordeiro

1C|2011-2012

Pgina 3 de 3

Você também pode gostar