AULA 12 - TABELAS, IMAGENS E HIPERLINKS
-
Upload
joao-gabriel-de-carvalho -
Category
Education
-
view
179 -
download
3
description
Transcript of AULA 12 - TABELAS, IMAGENS E HIPERLINKS
![Page 1: AULA 12 - TABELAS, IMAGENS E HIPERLINKS](https://reader033.fdocuments.net/reader033/viewer/2022051016/55726472d8b42a761d8b4fbb/html5/thumbnails/1.jpg)
Curso prático - Web Design
Profº João Gabriel de Carvalho.
![Page 2: AULA 12 - TABELAS, IMAGENS E HIPERLINKS](https://reader033.fdocuments.net/reader033/viewer/2022051016/55726472d8b42a761d8b4fbb/html5/thumbnails/2.jpg)
O Dreamweaver é um editor profissional, que projeta e gerencia sites e aplicativos para a Internet.
Os recursos de edição visual do Dreamweaver permite adicionar rapidamente imagens, textos e funcionalidades aos seus documentos sem a necessidade de saber programar em HTML.
Adobe Dreamweaver
![Page 3: AULA 12 - TABELAS, IMAGENS E HIPERLINKS](https://reader033.fdocuments.net/reader033/viewer/2022051016/55726472d8b42a761d8b4fbb/html5/thumbnails/3.jpg)
Novo site
Antes de começar o desenvolvimento, é necessário definir a local da pasta do website, assim é possível manter todos os arquivos organizados.
Para definir um novo site:– Acesse o menu “Site” e clique em “New Site”.
Para editar um site em desenvolvimento:– Acesse o menu “Site” e clique em “Manage Sites”.
![Page 4: AULA 12 - TABELAS, IMAGENS E HIPERLINKS](https://reader033.fdocuments.net/reader033/viewer/2022051016/55726472d8b42a761d8b4fbb/html5/thumbnails/4.jpg)
Novo Site – Pasta raiz
Nesta janela é possível definir um nome e o local onde os arquivos do site ficarão armazenados.
![Page 5: AULA 12 - TABELAS, IMAGENS E HIPERLINKS](https://reader033.fdocuments.net/reader033/viewer/2022051016/55726472d8b42a761d8b4fbb/html5/thumbnails/5.jpg)
Novo Site – Pasta imagens
Em “Local Info” é possível definir a localização da pasta com todas as imagens do site, o ideal é criá-la dentro da pasta raiz.
![Page 6: AULA 12 - TABELAS, IMAGENS E HIPERLINKS](https://reader033.fdocuments.net/reader033/viewer/2022051016/55726472d8b42a761d8b4fbb/html5/thumbnails/6.jpg)
Painel de visualização
No Dreamweaver é possível visualizar o documento desenvolvido de três formas distintas:– “Code” permite a visualização do código fonte da
página.– “Design” permite a visualização da aparência da
página.– “Split” permite visualizar o código fonte e a
aparência da página ao mesmo tempo através de uma janela dividida.
![Page 7: AULA 12 - TABELAS, IMAGENS E HIPERLINKS](https://reader033.fdocuments.net/reader033/viewer/2022051016/55726472d8b42a761d8b4fbb/html5/thumbnails/7.jpg)
Painel de visualização
![Page 8: AULA 12 - TABELAS, IMAGENS E HIPERLINKS](https://reader033.fdocuments.net/reader033/viewer/2022051016/55726472d8b42a761d8b4fbb/html5/thumbnails/8.jpg)
Tabela
Tabela é o cruzamento de linhas e colunas que formam as células, este recurso pode ser utilizado para estruturar os elementos inclusos na página.
Para criar uma tabela:– Acesse o menu “Insert” e clique em “Table”– Ou pelo teclado, utilize a combinação CTRL+ALT+T
![Page 9: AULA 12 - TABELAS, IMAGENS E HIPERLINKS](https://reader033.fdocuments.net/reader033/viewer/2022051016/55726472d8b42a761d8b4fbb/html5/thumbnails/9.jpg)
Tabela
Na janela “Table” é possível definir a quantidade de linhas, colunas, a largura da tabela e borda e espaçamento de cada célula.
![Page 10: AULA 12 - TABELAS, IMAGENS E HIPERLINKS](https://reader033.fdocuments.net/reader033/viewer/2022051016/55726472d8b42a761d8b4fbb/html5/thumbnails/10.jpg)
Imagens
As imagens costumam ser utilizadas para adicionar interfaces gráficas (como botões de navegação), apelo visual (por exemplo: fotografias) ou elementos de design interativos.
Para inserir imagens no documento:– Acesse o menu “Insert” e clique em “Image”– Ou use a combinação pelo teclado CTRL+ALT+I
![Page 11: AULA 12 - TABELAS, IMAGENS E HIPERLINKS](https://reader033.fdocuments.net/reader033/viewer/2022051016/55726472d8b42a761d8b4fbb/html5/thumbnails/11.jpg)
Imagens
Na Janela “Select Image Source” é possível localizar a imagem que será adicionada ao site e no lado direito é exibido uma pré-visualização do arquivo.
![Page 12: AULA 12 - TABELAS, IMAGENS E HIPERLINKS](https://reader033.fdocuments.net/reader033/viewer/2022051016/55726472d8b42a761d8b4fbb/html5/thumbnails/12.jpg)
Hiperlinks
Uma das principais atrações da Internet é a apresentação de documentos com o conceito de hipertexto, ou seja, uma página que se liga a outras por meio de conexões especiais chamadas hiperlinks.
Para inserir hiperlinks em objetos da páginas– Selecione o texto ou a imagem, acesse o menu
“Insert” e clique em “Hiperlink”.
![Page 13: AULA 12 - TABELAS, IMAGENS E HIPERLINKS](https://reader033.fdocuments.net/reader033/viewer/2022051016/55726472d8b42a761d8b4fbb/html5/thumbnails/13.jpg)
Hiperlinks
Uma dica interessante é selecionar o objeto que deseja transformar em hiperlink (texto ou imagem) e clicar sobre a propriedade correspondente, no painel inferior do programa.
![Page 14: AULA 12 - TABELAS, IMAGENS E HIPERLINKS](https://reader033.fdocuments.net/reader033/viewer/2022051016/55726472d8b42a761d8b4fbb/html5/thumbnails/14.jpg)
Esta apresentação já se encontra disponível para download em:
http://slideshare.net/jao1gabriel