Cadeira de Tecnologias de Informação. Ano lectivo 2009/2010. Sites estáticos. Com Expression Web TI2009/10 EWE_1. Filipa Pires da Silva (2009)

Transcrição

1 Cadeira de Tecnologias de Informação Ano lectivo 2009/2010 Sites estáticos Com Expression Web TI2009/10 EWE_1

2 Materiais Estes slides acompanham a construção de um exemplo de um site para o exercício da Rendiauto Assume-se que os alunos tenham previamente criado uma imagem (por exemplo, no Paint), correspondente ao desenho do site. Essa imagem deve ser dividida em pequenas outras imagens que correspondem a cada uma das componentes da imagem principal. TI2009/10 EWE_2

3 Criar um site TI2009/10 EWE_3

4 Criar um site (2) TI2009/10 EWE_4

5 Criar uma Página HTML Devem sempre gravar as páginas a seguir a serem criadas A primeira página que criam deve ter o nome default.html ou index.html Atenção Verifiquem se estão a gravar a página dentro do site que criaram! TI2009/10 EWE_5

6 Criar uma Tracing Image (1) TI2009/10 EWE_6

7 Criar uma Tracing Image (2) Depois de escolher a imagem que vai servir de guia (deverá ser a corresponde nte ao desenho do site completo), colocar a transparênci a a 50% Atenção Esta imagem não irá aparecer no browser! TI2009/10 EWE_7

8 Criar uma Tracing Image (3) TI2009/10 EWE_8

9 Criar uma Layer (1) Seleccionar uma Layer na Toolbox e arrastá-la até ao canto superior esquerdo Redimension ar a Layer de acordo com a imagem a incluir TI2009/10 EWE_9

10 Criar uma Layer (2) Inserir a imagem correspondente (deve ser uma das pequenas imagens que corresponde a uma das partes da imagem do site completo) Atenção Antes de inserirem a imagem, cliquem com o rato dentro da Layer para que deixe de ficar esverdeada TI2009/10 EWE_10

11 Criar uma Layer (3) Devem colocar sempre o texto alternativo TI2009/10 EWE_11

12 Criar uma Layer (4) Devem ajustar a imagem para ficar sobreposta com a de baixo Para tal podem usar as teclas das setas, o rato ou ainda as propriedades das CSS TI2009/10 EWE_12

13 Criar uma Layer (5) Repitam o mesmo processo para as várias imagens Reparem que vão sendo criadas novas Layers organizadas por números. Podem mudar este números para mudar o seu posicionamento Podem mudar o tamanho e posicionamento das imagens através das CSS Ajuda: se não tiverem o painel das Layers visível, vão a Panels no menu em cima e escolhem Layers. TI2009/10 EWE_13

14 Criar uma Layer (6) Para colocarem a imagem que corresponde ao Entrar têm mesmo que mudar o valor do seu posicionamento (Z) Quanto maior o valor de Z, mais para a frente fica TI2009/10 EWE_14

15 Testar no Browser TI2009/10 EWE_15

16 Mudar Propriedades da página Existe ainda a possibilidade de alterar algumas propriedades da página, como o background, o nome, o posicionamento na janela, etc Para verem a janela das propriedades da página, cliquem em qualquer ponto da página e depois vão a File->Properties TI2009/10 EWE_16

17 Ponto da Situação Até agora devemos ter algo idêntico a esta página TI2009/10 EWE_17

18 Criar um Hyperlink TI2009/10 EWE_18

19 Criar um Hyperlink (2) A página para onde criam o hyperlink deve estar previamente criada Ajuda: Testem no browser para verificar se está tudo correcto TI2009/10 EWE_19

20 Criar Outra Página Agora vamos criar a página home de modo similar à página default Criamos: 1 Layer para o background 1 Layer para o header 1 Layer para o background do menu 1 Layer por cada elemento do menu 1 Layer para o body e inserimos as imagens correspondentes TI2009/10 EWE_20

21 Criar o resto do site Vamos criar páginas para cada item do menu e depois criar hyperlinks do item para a respectiva página. Agora é só criarem as páginas à vossa imaginação! TI2009/10 EWE_21

22 Apontamento para as CSS As CSS permitem-nos criar estilos que usamos nas páginas. Por exemplo: Mudar o texto para um estilo criado por nós. TI2009/10 EWE_22

23 Apontamento para as CSS (2) Para aplicar o estilo criado, seleccionar o texto ou o componente desejado e clicar no estilo TI2009/10 EWE_23

24 Apontamento para a Toolbox Na Toolbox estão os vários componentes que podemos usar nas páginas, quer estáticas quer dinâmicas. Agora, toca a experimentar!! Para páginas HTML podemos ver as que estão disponíveis e usálas apenas por drag and drop Os componentes das páginas dinâmicas ficam para a próxima aula TI2009/10 EWE_24