Exemplo 5 Construção de um site básico (I)

Tamanho: px

Começar a partir da página:

Download "Exemplo 5 Construção de um site básico (I)"

Victor Camelo das Neves
8 Há anos
Visualizações:

1 Vamos começar por criar um ficheiro html novo. MCM

2 Vamos definir algumas características do nosso site em Page Properties: Modify > Page Properties ou No fundo da página clicar em Page Properties MCM

3 No primeiro separador, Appearance, definimos: Page font Verdana Size 12 Fazemos Apply MCM

4 No separador Links definimos: Tipo de fonte Verdana Size 12 As cores que se pode ver na imagem para link por visitar, link visitado, rollover link. Definimos também que fiquem sempre sublinhados. MCM

5 No separador Title/Encoding definimos o nome do site. Finalizamos o Page Properties fazendo Apply e OK. MCM

6 Gravamos este ficheiro como a nossa página principal ou homepage com o nome: index.html Atenção: criámos previamente uma pasta só para guardar todos os ficheiros do site (neste caso chama-se site_ex_02). MCM

7 Vamos inserir uma tabela que vai ser a base do nosso site. Insert > Table MCM

8 Abre-se esta janela onde definimos a nossa Tabela. Neste caso vamos criar uma tabela com: - 4 linhas -1 coluna - largura de 760 pixeis - Border = 0 (zero) Fazemos OK. MCM

9 Obtém-se: Repare-se que se tem a tabela seleccionada. MCM

10 Mantendo a tabela seleccionada, vamos centrá-la na página: Align > Center MCM

11 Obtém-se: MCM

12 Na primeira linha desta tabela iremos, mais adiante, inserir uma imagem. Para já escrevemos imagem nessa linha. MCM

13 Vamos alinhar o texto desta célula para o centro: Horz > Center Obtém-se: MCM

14 Nas linhas restantes da tabela escrevemos o nome das áreas correspondentes que, depois, iremos construir: menu principal, corpo central e rodapé. Do mesmo modo, centramos todas as células. MCM

construir: menu principal, corpo central e rodapé.

15 Agora, vamos seleccionar o texto Menu principal e clicamos na tecla Delete e apagamos. Otém-se: MCM

16 Com o cursor aqui posicionado, vamos inserir uma nova tabela dentro desta célula. (Esta nova tabela vai servir de base ao menu principal do nosso site.) Fazemos Insert > Table MCM

17 Fazemos Insert > Table Agora, vamos inserir uma tabela com: - 1 linha - 5 colunas pixeis de largura - Border = 0 (zero) Fazemos OK. MCM

18 Obtém-se: Ou, deseleccionando a nova tabela: MCM

19 Dentro de cada célula da nova tabela escrevemos os títulos do menu principal. Neste caso, p.ex., Home, Página 1, Página 2, Quem somos e Contacto. Repare-se que se tem uma largura total de 760 pixeis e, agora, vamos ter de dividir esta largura por 5. Tem-se então 152 pixeis para cada célula. MCM

20 Com o cursor posicionado em cada uma destas células, vamos atribuir os 152 pixeis em cada uma delas. No fundo da página, nas propriedades da tabela, atribuimos a W (width-largura) o valor 152 (pixeis). Fazemos o mesmo para as cinco células. MCM

No fundo da página, nas propriedades da tabela, atribuimos a W

21 Obtém-se: Agora, vamos centrar o conteúdo de cada uma destas células. Como fizemos anteriormente, no painel de propriedades ao fundo da página, fazemos Horz > Center. Desta vez, podemos seleccionar todas as células duma só vez: Com a tecla SHIFT pressionada, clicamos em cada uma das referidas células. MCM

22 Depois de termos centrado o conteúdo de todas esta células, obtém-se: MCM

23 Agora, no rodapé já podemos escrever os títulos do menu principal: MCM

24 Na linha superior vamos inserir a nossa imagem de topo. Apagamos o texto que lá estava e, com o cursor posicionado dentro da linha, Fazemos Insert > Image. Atenção: previamente já criámos uma subpasta para Imagens, dentro da pasta já criada para guardar todo o site. MCM

25 Dentro da pasta Imagens está a imagem que vamos usar para o topo deste site. Chama-se topo. Atenção, tem de estar: URL pastadeimagens/imagem ou, neste caso imagens/topo.jpg Relative to: Site Root MCM

26 Obtém-se: Gravamos este ficheiro (index.html) e pre-visualizamos no browser: MCM

Documentos relacionados

Imagens - Formatos. GIF (Graphics Interchange Format) JPEG (ou JPG) (Joint Pictures Experts Graphis)

Imagens - Formatos. GIF (Graphics Interchange Format) JPEG (ou JPG) (Joint Pictures Experts Graphis) Imagens - Formatos GIF (Graphics Interchange Format) - Muito popular na web. - Permite ter um máximo de 256 cores. - Indicado para cartoons, logos, imagens com áreas transparentes e animações. JPEG (ou