Tecnologias da Informação e Comunicação

Tamanho: px

Começar a partir da página:

Download "Tecnologias da Informação e Comunicação"

Vasco Sales Palhares
7 Há anos
Visualizações:

1 Cria um diretório na tua pen de nome Web. Abre o Dreamweaver. Tecnologias da Informação e Comunicação Cria um novo ficheiro HTML. Grava o ficheiro como primeira.html. 1

2 Muda a vista para Split para que possas ver o código e o seu resultado em simultâneo no ecrã. Começa por alterar a cor de fundo da tua página. Na parte direita do ecrã com o botão do lado direito do rato escolhe a opção Page Properties. Em background color escolhe a cor que pretendes para o fundo da tua página. Escreve do lado direito a seguinte frase. A minha primeira página em Dreamweaver Sublinha a frase anterior e com o botão do lado direito do rato escolhe a opção Paragraph Format Heading 1. Volta a sublinhar a frase mas agora em Align escolhe Center para centrar o texto. 2

3 Vamos agora mudar o tipo de letra. Para isso volta a sublinhar o texto e na opção Font Courier New. Na janela que aparecer dá o nome.titulo ao seletor CSS. Este seletor class pode ser aplicado aos elementos que pretenderes na tua página. Altera a cor das letras no menu Format Color. Escolhe uma cor. Associa ao estilo CSS titulo que criaste anteriormente. Adiciona o seguinte texto formatado como na figura seguinte. Vamos agora inserir uma linha horizontal. Começa por aceder ao menu Window e certifica-te que a opção Insert está marcada. 3

Na barra lateral do lado direito do ecrã irá surgir um novo menu. Seleciona a opção Horizontal Rule para inserir uma linha horizontal. Insere também de seguida uma imagem através do mesmo menu.

4 Na barra lateral do lado direito do ecrã irá surgir um novo menu. Seleciona a opção Horizontal Rule para inserir uma linha horizontal. Insere também de seguida uma imagem através do mesmo menu. Escolhe a imagem fornecida no Website da disciplina de nome dreamweaver.png. Uma nova janela irá surgir após a escolha da imagem onde deves escrever Dreamweaver na caixa de Alternate Text. Este será o texto que irá aparecer quando passas o rato por cima da imagem. 4

Redimensiona a imagem para 200x200 (na barra de menu inferior) e centra a imagem no ecrã. Vamos agora utilizar uma imagem para o fundo da página em vez de uma cor.

5 Redimensiona a imagem para 200x200 (na barra de menu inferior) e centra a imagem no ecrã. Vamos agora utilizar uma imagem para o fundo da página em vez de uma cor. Para isso acede de novo a Page Properties e na opção Background Imagem escolhe a imagem disponível no website da disciplina de nome back.jpg. Como deves ter reparado o fundo ficou apenas preenchido na parte superior esquerda. Isto acontece porque não mandamos repetir o fundo. Volta a Page Properties e na opção Repeat escolhe Repeat. Desta forma irá repetir para os lados e para baixo. 5

Basicamente podes pensar nas tabelas como um móvel de prateleiras em que podes arrumar vários objetos.

6 Com este background deixou de se ler bem algumas letras. Muda para que no final a página tenha o seguinte aspeto. Agora vamos aplicar ao mesmo website uma estrutura de tabelas. Basicamente podes pensar nas tabelas como um móvel de prateleiras em que podes arrumar vários objetos. Em web as tabelas podem servir para a estrutura de um site ajudando-te a organizá-lo. Para inserir uma tabela acede ao menu lateral direito e escolhe a opção Table. Escolhe uma tabela de 2 linhas e 1 coluna, com borda de 1px e largura de 80%. 6

Arrasta o conteúdo para as células respetivas. Tecnologias da Informação e Comunicação Clica sobre a tabela com o botão do lado direito do rato e no menu de baixo irão surgir as opções da tabela.

Coloca o cursor do rato na primeira célula e no menu inferior muda a cor (background) para preto. Altera agora o fundo da célula de conteúdo para uma cor à tua escolha.

7 Arrasta o conteúdo para as células respetivas. Tecnologias da Informação e Comunicação Clica sobre a tabela com o botão do lado direito do rato e no menu de baixo irão surgir as opções da tabela. Altera o Align para o centro e a Border para zero. Desta forma a tabela ficará centrada no ecrã e a borda da tabela irá desaparecer, parecendo que não existe. Coloca o cursor do rato na primeira célula e no menu inferior muda a cor (background) para preto. Altera agora o fundo da célula de conteúdo para uma cor à tua escolha. Como dá para perceber o site tem falta de partes fundamentais que fazem parte da maioria dos websites que consultas na Internet. Falo da zona de menu e rodapé. Começa por colocar o cursor na célula de conteúdo. Com o botão do lado direito do rato escolhe opção Table Insert Column. 7

8 Como deves ter reparado a nova coluna afetou também a zona de título. Será necessário unir as células no título. Para isso seleciona as duas células e com o botão do lado direito do rato escolhe a opção Table Merge Cells. Coloca o cursor do rato na nova célula (menu) e muda a sua largura para 130px no menu inferior em Width. Vamos agora inserir o rodapé. Mantém o cursor do rato na célula de menu e com o botão do lado direito escolhe a opção Table Insert Rows or Columns. Escolhe as seguintes opções para que a nova linha da tabela seja acrescentada na parte inferior (below) da tabela. Une também as células para o rodapé. Obtém a página final com o seguinte aspeto. 8

9 Nota: Para alinhar o texto na vertical seleciona-se a célula em questão e no menu inferior na propriedade Vert escolhe-se Top caso se pretenda o texto alinhado acima. Guarda o teu trabalho. 9

Documentos relacionados

Criação de estilos CSS

Em primeiro lugar vamos inserir um parágrafo Marco Soares 1 Criação de estilos CSS Para começar, crie um site novo e uma página inicial para testes chamada index.html Vamos começar por criar alguns estilos