Criação dum site. Na última aula chegamos a esta página. Marco Soares

Transcrição

1 Criação dum site Na última aula chegamos a esta página 1

2 Estilo para as hiperligações do menu Vamos redefinir o aspeto da tag relacionada com as hiperligações (links) Vamos definir um estilo para a tag <a> mas somente quando para a que aparece dentro do div nav 2

3 Estilo para as hiperligações do menu Vamos mudar a cor da letra para um azul escuro Type->color-> # Mudar o texto para ficar um pouco mais pequeno, para 90% 3

4 Estilo para as hiperligações do menu Vamos retirar o sublinhado das hiperligações do menu 4

5 Estilo para as hiperligações do menu 5

6 Estilo para as hiperligações do menu, estado: hover Pode-se considerar 4 estados para cada hiperligação: a:link -> não visitado, ou seja o estado inicial a:visited -> visitado a:hover -> quando se passa por cima a: active -> quando está ativo ou seja que foi clicado Vamos criar um estilo para quando se passa por cima das hiperligações do menu 6

7 Estilo para as hiperligações do menu, estado: hover Clicamos na seta e escolhemos o a:hover 7

8 Estilo para as hiperligações do menu, estado: hover Alteramos de forma a que o estilo funcione, mas só dentro do div nav 8

9 Estilo para as hiperligações do menu, estado: hover Vamos mudar a cor da letra para um vermelho, poderíamos escolher um vermelho diretamente, mas como eu quero uma cor específica e neste caso sei o código da cor, posso colocar diretamente o código da cor 9

10 Estilo para as hiperligações do menu, estado: hover Vamos também configurar outras opções no estilo de acordo com o que tínhamos definido para a tag <a> 10

11 Estilo para as hiperligações do menu, estado: hover Faça o preview da página no browser e Vai ver que ao passar o rato por cima das hiperligações, a cor muda conforme o que fizemos para o estilo a:hover 11

12 Repetir o menu de hiperligações no div base Vamos agora copiar o código html da lista <ul> de forma a repetir o menu de hiperligações no div base em baixo Vou selecionar o código, repare que aparece no inspetor de tags, a tag <ul> selecionada 12

13 Repetir o menu de hiperligações no div base 13

14 Repetir o menu de hiperligações no div base Vamos copiar e colar o código no div base 14

15 Repetir o menu de hiperligações no div base 15

16 Repetir o menu de hiperligações no div base Repare que no entanto, não está a aparecer da mesma forma que o menu do topo, isto deve-se ao facto dos estilos estarem todos aplicados para funcionarem dentro do div nav 16

17 Repetir o menu de hiperligações no div base Para resolver esta situação, vamos duplicar os estilos e aplicá-los ao div base Vamos fazer isso, a todos os estilos realçados na imagem do diapositivo anterior Clicamos com o botão direito do rato em cima do estilo e escolhemos Duplicar no menu que aparece 17

18 Repetir o menu de hiperligações no div base Depois de duplicar, alteramos o nome, por exemplo, o #nav ul passa para #base ul 18

19 Repetir o menu de hiperligações no div base Fazemos o mesmo para os restantes estilos, e ficamos com o menu igual 19

20 Repetir o menu de hiperligações no div base Repare nos estilos originais e os que foram duplicados Podia ter simplesmente usar o estilo sem estar dentro do div Mas assim, permite que mais tarde possamos alterar por exemplo o menu de baixo de forma a que fique diferente Experimente alterar #base a:hover 20

21 Exercício Experimente a alterar/criar os estilos a:hover, a:active, a:link e a:visited adicionando bordas, backgrounds (fundos) para o menu de hiperligações Crie hiperligações para todas as opções do menu Duplique a página principal e crie uma página para cada opção do menu Crie e faça upload do seu site em 21