dreamweaver criação do primeiro site - marcosoares.com · dreamweaver cs3 que é a versão que...
TRANSCRIPT
![Page 1: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/1.jpg)
Dreamweaver – criação do primeiro site
Nesta UFCD estamos a utilizar o Dreamweaver CS3 que é a versão que está disponível na escola
Atualmente já existe a versão CC
As versões anteriores à CC são:
CS6
CS5
CS4
Marco Soares 1
![Page 2: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/2.jpg)
Primeiro ecrã ao abrir
Marco Soares 2
![Page 3: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/3.jpg)
Criar um novo documento de html (página web)
Uma das formas de criar um site é começar logo a criar um novo documento de HTML
Marco Soares 3
![Page 4: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/4.jpg)
Criar um novo documento de html (página web)
Aparece uma janela com um documento vazio
Marco Soares 4
![Page 5: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/5.jpg)
Vistas
Repare que existem 3 formas de trabalhar
Code (Mostra somente o código em html)
Design (Mostra a vista de estrutura)
Split (Mostra a vista de estrutura e código simultaneamente
Marco Soares 5
![Page 6: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/6.jpg)
Criar um novo documento de html (página web)
Outra opção para criar um ficheiro novo é carregar em File->new
Que quer dizer Ficheiro->novo
Marco Soares 6
![Page 7: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/7.jpg)
Criar um novo documento de html (página web)
Marco Soares 7
![Page 8: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/8.jpg)
Criação dum site
Vamos chamar de página a um documento de html e site a um conjunto de páginas
A melhor forma de termos um site organizado e o envio para um servidor facilitado, é usando a opção do Dreamweaver de criação de sites
Marco Soares 8
![Page 9: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/9.jpg)
Criação dum site
Para criar um site basta selecionar no menu Site -> New Site
Marco Soares 9
![Page 10: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/10.jpg)
Criação dum site
Ao escolher a opção de criar um novo site, aparece a janela de configuração do site
Marco Soares 10
![Page 11: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/11.jpg)
Criação dum site
Para um melhor controlo da configuração do site, vamos utilizar a configuração avançada
Marco Soares 11
![Page 12: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/12.jpg)
Criação dum site
Vamos dar um nome ao site e escolher uma pasta onde vão ficar todos os ficheiros do seu site (Local root folder)
Marco Soares 12
![Page 13: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/13.jpg)
Criação dum site
Escolha também a pasta dentro da pasta raiz onde vão ficar as imagens
Marco Soares 13
![Page 14: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/14.jpg)
Criação dum site
Criando uma pasta para as imagens, além do seu site ficar mais organizado, ao inserir uma imagem, o Dreamweaver coloca-a automaticamente na pasta das imagens
E as hiperligações para as imagens ficam corretas mesmo após enviar o site para um servidor
Marco Soares 14
![Page 15: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/15.jpg)
Criação dum site
Em alguns servidores web como é o caso dos servidores web em sistemas Linux, há diferenciação entre maiúsculas e minúsculas, assim, convém ativar a caixa de verificação
Use case sensitive link checking
Marco Soares 15
![Page 16: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/16.jpg)
Criação dum site
Ao criar um site, vai aparecer no grupo de painéis Files o site criado e se passar o cursor do rato, consegue ver a pasta que escolheu para root folder
Marco Soares 16
![Page 17: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/17.jpg)
Criação da página inicial
Vamos agora criar um novo ficheiro html
Podemos usar a opção da janela inicial como já vimos
Marco Soares 17
![Page 18: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/18.jpg)
Criação da página inicial
Marco Soares 18
![Page 19: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/19.jpg)
Criação da página inicial
Convém guardar logo a página de forma a que o Dreamweaver possa gerir melhor as hiperligações
Geralmente dá-se o nome de index.html à primeira página do nosso site, pois a maioria dos servidores web estão configurados para abrir essa página quando coloca o endereço dum site
Marco Soares 19
![Page 20: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/20.jpg)
Criação da página inicial
Para guardar a página basta ir ao menu File -> Save
Ou então utilizar o atalho pelo teclado: Ctrl + s
Marco Soares 20
![Page 21: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/21.jpg)
Criação da página inicial
Basta colocar o nome index.html e guardar
Marco Soares 21
![Page 22: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/22.jpg)
Criação da página inicial
Marco Soares 22
![Page 23: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/23.jpg)
Criação da página inicial
Repare que ao guardar, o nome do ficheiro aparece no cabeçalho e no painel Files
Marco Soares 23
![Page 24: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/24.jpg)
Criação da página inicial
A primeira coisa que vamos fazer é dar um título ao site
Marco Soares 24
![Page 25: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/25.jpg)
Criação da página inicial
Repare que ao alterar o documento, aparece um * que indica que o ficheiro tem alterações e ainda não foi gravado
Marco Soares 25
![Page 26: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/26.jpg)
Criação da página inicial
Há medida que criamos a nossa página na vista de estrutura/design, o Dreamweaver constrói o código HTML necessário
Se clicarmos na vista Split podemos ver a vista de estrutura em baixo e o código em cima
Marco Soares 26
![Page 27: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/27.jpg)
Criação da página inicial
d
Marco Soares 27
![Page 28: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/28.jpg)
Adição de título a uma página
Por exemplo, ao adicionar o título à página o Dreamweaver criou o código html (tag)
Marco Soares 28
![Page 29: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/29.jpg)
Adição de título a uma página
O título não aparece no própria página html, mas costuma aparecer no topo do browser
O título é importante porque se adicionarem a página aos favoritos do browser, é o título que fica por defeito guardado
Vamos pré-visualizar a página em um Browser para ver o resultado
Marco Soares 29
![Page 30: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/30.jpg)
Pré-visualização em um Browser
Marco Soares 30
![Page 31: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/31.jpg)
Pré-visualização em um Browser
Repare que pode escolher o browser para pré-visualizar a página
Convém até testar em vários browsers e em vários resoluções de ecrã, para nos certificarmos que quem visitar o nosso site fica satisfeito com o que vê
Em vez de escolher no menu o browser, pode usar a tecla de atalho F12 que chama o Browser por defeito, neste caso, o chrome
Marco Soares 31
![Page 32: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/32.jpg)
Pré-visualização em um Browser
Neste caso, como o documento tinha sido alterado e não guardado o Dreamweaver pergunta se queremos guardar
Marco Soares 32
![Page 33: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/33.jpg)
Pré-visualização em um Browser
Repare que o titulo que adicionamos à página aparece no cabeçalho do separador do browser google chrome
Marco Soares 33
![Page 34: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/34.jpg)
Criação do corpo duma página
Podemos agora começar a inserir texto na nossa página
Marco Soares 34
![Page 35: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/35.jpg)
Criação do corpo duma página
Repare que o texto que adicionou fica dentro da tag <body>
Marco Soares 35
![Page 36: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/36.jpg)
Formatação de texto
Agora podemos começar a formatar o nosso texto
selecionamos o texto
Vamos até ao inspetor de propriedades em baixo que está relacionado com o que selecionamos
e podemos por exemplo escolher o formato heading1, heading2, heading3, … Marco Soares 36
![Page 37: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/37.jpg)
Formatação de texto
Podemos formatar o tamanho de outra forma, por exemplo
Marco Soares 37
![Page 38: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/38.jpg)
Formatação de texto
Os tamanhos são diferentes aos que está habituado a utilizar para o word, porque o word está otimizado para impressão
A melhor forma de configurar tamanhos na web é de forma relativa pois as páginas podem ser vistas em resoluções de ecrã diferentes
Marco Soares 38
![Page 39: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/39.jpg)
Formatação de texto
Uma boa opção é utilizarmos os headings para formatação
Os títulos mais importantes serão heading1, os subtítulos heading2 e por aí adiante
Mais tarde vamos aprender a configurar estes formatos heading através de estilos CSS
Marco Soares 39
![Page 40: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/40.jpg)
Formatação de texto
Vamos escolher o formato heading1 para o primeiro parágrafo e dar um ENTER
Repare que o Dreamweaver colocou o texto dentro da tab <h1>
Repare que cada tag tem sempre um início e um fim
Como deu um ENTER, foi criado um parágrafo com um carácter vazio
Cada tag normalmente tem um início e um fim, por exemplo <h1> </h1>
Marco Soares 40
![Page 41: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/41.jpg)
Vista de estrutura/design
Nesta fase, vamos voltar à vista de estrutura/design
Marco Soares 41
![Page 42: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/42.jpg)
Inserir imagem
Vamos agora inserir uma imagem na nossa página
Existem várias formas de inserir imagens, nesta fase vamos ver três maneiras
Insert -> Image
Ou o atalho Ctrl+Alt+I
Ou
Marco Soares 42
![Page 43: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/43.jpg)
Inserir imagem
Aparece a janela seguinte
Como ainda não tenho imagens dentro da pasta, vou buscar a outro local que o Dreamweaver automaticamente copia a imagem para dentro da pasta das imagens Marco Soares 43
![Page 44: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/44.jpg)
Inserir imagem
Depois de escolher a imagem, aparece uma janela onde pode definir o texto que aparece se o browser não suportar imagens
Marco Soares 44
![Page 45: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/45.jpg)
Inserir imagem
Marco Soares 45
![Page 46: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/46.jpg)
Inserir imagem
Depois de fazer refresh (atualizar) o painel Files poder ver que a imagem foi transferida para a pasta das imagens
Marco Soares 46
![Page 47: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/47.jpg)
Formatar texto
Vamos colocar o cursor à frente da imagem e dar um ENTER e em seguida adicionar dois parágrafos
Vamos em seguida selecionar o primeiro parágrafo e mudar o tipo de letra
Marco Soares 47
![Page 48: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/48.jpg)
Formatar texto
No inspetor de propriedades, escolhemos o tipo de letra que queremos
Marco Soares 48
![Page 49: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/49.jpg)
Formatar texto
Repare que não aparece um tipo de letra, mas vários, pois se um computador não possuir primeiro tipo de letra, tenta o segundo e por aí adiante
Também é possível criarmos o nosso conjunto de tipos de letra
Marco Soares 49
![Page 50: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/50.jpg)
Formatar texto
Selecionamos Edit Font List…
Marco Soares 50
![Page 51: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/51.jpg)
Formatar texto
Basta escolher os tipos de letra que queremos e clicar na dupla seta
Marco Soares 51
![Page 52: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/52.jpg)
Formatar texto
Em seguida escolhemos o grupo de tipos de letra que criámos para o texto selecionado
Marco Soares 52
![Page 53: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/53.jpg)
Formatar texto
Repare que ao fazer estas alterações ao texto, o Dreamweaver criou um estilo CSS chamado style1 para as formatações que fizemos
Marco Soares 53
![Page 54: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/54.jpg)
Estilos CSS
Anteriormente, tanto o conteúdo dum ficheiro html como a forma eram feitos em html
Atualmente a forma é separada do conteúdo
Em que os estilos CSS tratam do formato (cores, alinhamentos, tipos de letra, transparências, posições, …)
Mais à frente vamos entender melhor os estilos CSS
Marco Soares 54
![Page 55: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/55.jpg)
Estilos CSS
Repare como fica aplicado o estilo CSS no código html
Marco Soares 55
![Page 56: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/56.jpg)
Estilos CSS
Vamos ver como fica a definição do estilo CSS no código
A definição de estilos começa pela tag <style> que fica dentro da tag <head>
E veja o estilo style1
Marco Soares 56
![Page 57: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/57.jpg)
Imagens em páginas HTML
As imagens devem ser otimizadas para a web de forma a não serem pesadas para as páginas não demorarem uma “eternidade” a carregar
Para isso é boa ideia converter as imagens para o formato compactado JPEG/JPG se for uma imagem com muitas cores (milhares/milhões)
Ou então para GIF ou PNG se a imagem tiver poucas cores (este último formato é melhor)
Marco Soares 57
![Page 58: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/58.jpg)
Imagens em páginas HTML
Deverá ter em atenção que JPG não suporta transparências (a cor de fundo da imagem é fixa não se adaptando ao fundo onde está)
Marco Soares 58
![Page 59: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/59.jpg)
Imagens em páginas HTML
Para reduzir o peso (ou seja o espaço que ocupa em disco) duma imagem, deverá utilizar um editor de imagem como por exemplo o GIMP ou o PhotoShop
Pode fazer o seguinte à imagem:
Reduzir a largura e altura da imagem
Reduzir a resolução (pixels/inch) (pixéis por polegada) – 72 é o suficiente
No caso do gif pode por exemplo reduzir o número de cores da imagem
Alguns editores de imagem têm uma opção de otimização da imagem para a web
Marco Soares 59
![Page 60: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/60.jpg)
Formatar imagem
Neste momento, apesar de não ser a melhor solução, vamos modificar a largura e altura da imagem diretamente no Dreamweaver
Vamos arrastar o canto inferior direito para cima no sentido diagonal esquerda
Marco Soares 60
![Page 61: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/61.jpg)
Formatar imagem
Repare que a imagem já está mais pequena
E que a largura e altura foram modificadas no inspetor de propriedades
Marco Soares 61
![Page 62: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/62.jpg)
Alinhamento de imagem
Uma coisa importante é posicionar os elementos onde nós queremos em uma página web
Isso pode ser conseguido eficazmente através de estilos CSS
Neste momento, vamos utilizar o processo antigo de alinhamento
Marco Soares 62
![Page 63: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/63.jpg)
Alinhamento de imagem
Vamos alinhar a imagem à esquerda, selecionamos a imagem
e no inspetor de propriedade em baixo, clicamos no align e escolhemos o tipo de alinhamento
Marco Soares 63
![Page 64: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/64.jpg)
Alinhamento de imagem
Marco Soares 64
![Page 65: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/65.jpg)
Alinhamento de imagem
Repare que a imagem ficou à esquerda, mas o texto ficou muito perto da imagem
Podemos resolver a situação do texto estar muito próximo alterando o espaçamento horizontal da imagem no inspetor de propriedades
Marco Soares 65
![Page 66: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/66.jpg)
Alinhamento de imagem
Marco Soares 66
![Page 67: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/67.jpg)
Alinhamento de imagem
Um dos problemas de resolver o espaçamento desta forma, é que é adicionado 10 pixéis dos dois lados, à esquerda e à direita
Mais pra frente vamos ver que através de CSS (Cascading Style Sheets) podemos controlar exatamente onde fica o espaço se à esquerda ou se à direita
Marco Soares 67
![Page 68: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/68.jpg)
Alinhamento de imagem
Vamos agora alinhar a imagem à direita
Marco Soares 68
![Page 69: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/69.jpg)
Modificar o fundo da página
Vamos agora modificar o fundo da página web
Vá a Modify -> Page Properties…
Ou faça Ctrl+ J
Ou
Marco Soares 69
![Page 70: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/70.jpg)
Modificar o fundo da página
Irá aparecer a janela
Vamos clicar no ícone da cor de fundo
Marco Soares 70
![Page 71: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/71.jpg)
Modificar o fundo da página
Posso escolher uma destas cores
Ou ainda mais cores, clicando em
Marco Soares 71
![Page 72: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/72.jpg)
Modificar o fundo da página
Nesta última opção podemos escolher uma cor e afinar essa cor, na barra da direita
Marco Soares 72
![Page 73: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/73.jpg)
Modificar o fundo da página
Repare que ao carregar na botão da Background color o cursor fica no formato de conta-gotas
Pode utilizar essa função para por exemplo colocar o fundo igual à cor do cão, bastando clicar em cima do cão
Marco Soares 73
![Page 74: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/74.jpg)
Modificar o fundo da página
Marco Soares 74
![Page 75: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/75.jpg)
Modificar cor do texto
Vamos modificar a cor do texto todo da página
Marco Soares 75
![Page 76: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/76.jpg)
Modificar cor do texto
Deve ter cuidado para as cores de forma que se consiga ler bem o texto
Uma regra é contrastar, ou seja texto claro em fundos escuros e vice-versa
Marco Soares 76
![Page 77: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/77.jpg)
Modificar cor do texto
Vamos resolver a situação das cores
Marco Soares 77
![Page 78: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/78.jpg)
Modificar cor do texto
Pode arrastar o slider da direita e configurar a cor do texto para ficar mais escura
Marco Soares 78
![Page 79: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/79.jpg)
Modificar cor do fundo
Vamos agora configurar a cor de fundo para ficar mais clara
Marco Soares 79
![Page 80: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/80.jpg)
Modificar cor do fundo
Marco Soares 80
![Page 81: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/81.jpg)
Modificar cor do fundo
Marco Soares 81
![Page 82: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/82.jpg)
Modificar cor do fundo
Marco Soares 82
![Page 83: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/83.jpg)
Propriedades da página
Além das alterações que fizemos, podemos por exemplo, colocar uma imagem de fundo para a página toda
Marco Soares 83
![Page 84: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/84.jpg)
Aplicar cores a texto
Apesar de termos configurado uma cor para o texto todo da página, podemos especificar textos com outros formatos
Basta selecionar e aplicar uma cor diferente no inspetor de propriedades, por exemplo
Marco Soares 84
![Page 85: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/85.jpg)
Aplicar cores a texto
Marco Soares 85
![Page 86: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/86.jpg)
Estilos CSS no código
Vamos dar uma vista de olhos no código html e repare nos estilos aplicados
Marco Soares 86
![Page 87: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/87.jpg)
Estilos CSS no código
Marco Soares 87
Repare na definição dos estilos
![Page 88: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/88.jpg)
Hiperligações
A WWW (World Wide Web) é feita de sites com páginas que podem chamar outras páginas através de hiperligações em inglês link ou hyperlink
As hiperligações podem ser para marcas dentro da própria página, para outras páginas do mesmo site ou para páginas de outros sites
Vamos fazer duas hiperligações para duas páginas dentro do nosso site
Vamos primeiro criar as duas páginas Marco Soares 88
![Page 89: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/89.jpg)
Hiperligações
Os nomes das páginas não devem ter caracteres especiais de forma a não ter problemas com os servidores web
Vamos começar por criar a página cao.html com uma imagem e a própria imagem será uma hiperligação para a página inicial: index.html
Podemos fazer as hiperligações de várias formas
Marco Soares 89
![Page 90: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/90.jpg)
Página cao.hml
Crie uma página chamada cao.html e guarde-a logo
Marco Soares 90
![Page 91: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/91.jpg)
Hiperligações
Uma das maneiras é colocar o nome da página diretamente
Marco Soares 91
![Page 92: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/92.jpg)
Hiperligações
Outra forma é usar o ícone point to file e arrastar para a página que se pretende
Marco Soares 92
![Page 93: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/93.jpg)
Hiperligações
Outra forma é clicar no ícone Browse for File e depois escolher na janela que aparece a página que pretendemos
Marco Soares 93
![Page 94: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/94.jpg)
Hiperligações
Outra forma é clicar com o botão direito em cima da imagem e escolher Make Link
Marco Soares 94
![Page 95: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/95.jpg)
Hiperligações
Ainda outra forma é selecionar a imagem e clicar em:
Marco Soares 95
![Page 96: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/96.jpg)
Hiperligações
Outra forma:
Marco Soares 96
![Page 97: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/97.jpg)
Página gato.html
Depois da hiperligação estar feita, crie outra página chamado gato.html, insira uma imagem com uma hiperligação para o index.html
Repare como ficou o site
Marco Soares 97
![Page 98: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/98.jpg)
Hiperligações em texto
Vamos abrir o index.html e criar duas hiperligações para cao.html e gato.html
Selecione o texto cães e faça a hiperligação
Faça o mesmo para o texto gatos
Marco Soares 98
![Page 99: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/99.jpg)
Hiperligação para um site
Vamos fazer uma hiperligação para um site ao clicar na imagem do index.html
Marco Soares 99
![Page 100: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/100.jpg)
Resultado final
Marco Soares 100
![Page 101: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/101.jpg)
Estilos CSS
Marco Soares 101
![Page 102: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/102.jpg)
Estilos CSS
Em programas como o word utiliza-se estilos para se formatar texto e manter o documento uniforme (os títulos com o mesmo tipo de letra e tamanho por exemplo)
Por exemplo para alterar os títulos principais dum documento do word bastava modificar uma vez o estilo Título1 e todos os títulos com este estilo ficavam com o mesmo formato
Marco Soares 102
![Page 103: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/103.jpg)
Estilos CSS
Através do Dreamweaver podemos aplicar estilos CSS aos conteúdos das nossas páginas web de forma a formatá-los ao nosso gosto
Os estilos vão permitir separar o formato do conteúdo
Permitem ainda que uma página possa ser formatada em vários estilos para dispositivos diferentes (telemóveis, tablets, …)
Marco Soares 103
![Page 104: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/104.jpg)
Estilos CSS
Atualmente os estilos CSS vieram substituir as tabelas na função de estruturação das páginas
Antigamente criava-se as tabelas para alinhar os conteúdos e uníamos algumas células para se chegar à estrutura que queríamos
Atualmente utiliza-se CSS e contentores de conteúdo chamados DIVs
Marco Soares 104
![Page 105: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/105.jpg)
Criação de estilos CSS
Para começar, crie um site novo e a primeira página index.html
Vamos começar por criar alguns estilos simples
Em primeiro lugar vamos inserir um parágrafo
Marco Soares 105
![Page 106: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/106.jpg)
Criação de estilos CSS
Marco Soares 106
![Page 107: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/107.jpg)
Criação de estilos CSS
Supondo que este parágrafo é o mais importante, vamos dar-lhe o formato heading1
Marco Soares 107
![Page 108: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/108.jpg)
Criação de estilos CSS
Vamos agora criar um estilo para alterar o formato da tag <h1> heading1
Começamos por abrir o painel dos CSS
Marco Soares 108
![Page 109: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/109.jpg)
Criação de estilos CSS
Repare que neste momento não tem nenhum estilo CSS definido
Marco Soares 109
![Page 110: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/110.jpg)
Mostrar painel de estilos CSS
Se por alguma razão não aparecer o painel CSS, certifique-se que está ligado
Marco Soares 110
![Page 111: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/111.jpg)
Criação de estilos CSS
Marco Soares 111
Para criarmos um estilo vamos clicar no botão New CSS Rule
![Page 112: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/112.jpg)
Tipos de estilos CSS
Aparecem 3 tipos de estilos possíveis
Class
Tag
Advanced (Ids)
Marco Soares 112
![Page 113: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/113.jpg)
Tipos de estilos CSS
Estilos class
São aplicados a qualquer parte duma página e começam por um ponto
Estilos tag
Modificam o formato duma tag
Estilo id
Usado para um estilo de um único elemento
Marco Soares 113
![Page 114: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/114.jpg)
Criação dum estilo tag
Vamos começar por criar um estilo tag aplicado à tag <h1> heading1
Marco Soares 114
![Page 115: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/115.jpg)
Criação dum estilo tag
Depois de escolhermos a tag que queremos aplicar um estilo, definimos onde fica guardado o estilo
Para um site, convém escolher um novo ficheiro que pode ser usado em várias páginas
Neste momento para facilidade de aprendizagem vamos utilizar o próprio documento html para guardar os estilos
Marco Soares 115
![Page 116: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/116.jpg)
Criação dum estilo tag
Aparece a janela onde definimos o formato do estilo
Marco Soares 116
![Page 117: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/117.jpg)
Criação dum estilo tag
Vamos modificar algumas coisas na categoria Type e carregamos em Apply para ver o resultado
Marco Soares 117
![Page 118: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/118.jpg)
Criação dum estilo tag
Repare que à esquerda vemos um menu que começa com style com um estilo, o h1 e podemos ver o que configuramos em baixo
Marco Soares 118
![Page 119: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/119.jpg)
Exercício
Crie um documento em html com 5 parágrafos
Escola
Secundária
Antero
Quental
Configure cada parágrafo para heading1, heading2, heading2, heading4 respetivamente
Crie um estilo diferente para cada tag Marco Soares 119
![Page 120: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/120.jpg)
Exercício
Insira uma imagem no documento
Investigue na Internet e descubra como se cria um estilo class no Dreamweaver e como se pode aplicar a uma imagem para inserir uma borda (border)
Marco Soares 120
![Page 121: Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que está disponível na escola ... usar a tecla de atalho F12 que chama o Browser por](https://reader035.vdocuments.pub/reader035/viewer/2022062317/5c04302809d3f2ff398b4bd7/html5/thumbnails/121.jpg)
Exercício
Altere o estilo da tag h1 do exercício do site dos animais
Marco Soares 121