Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que...

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

Primeiro ecrã ao abrir

Marco Soares 2

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


Aparece uma janela com um documento vazio

Marco Soares 4

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


Outra opção para criar um ficheiro novo é carregar em File->new

Que quer dizer Ficheiro->novo

Marco Soares 6


Marco Soares 7

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

Criação dum site

Para criar um site basta selecionar no menu Site -> New Site

Marco Soares 9

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

Criação dum site

Para um melhor controlo da configuração do site, vamos utilizar a configuração avançada

Marco Soares 11

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

Criação dum site

Escolha também a pasta dentro da pasta raiz onde vão ficar as imagens

Marco Soares 13

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

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

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

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


Marco Soares 18


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


Para guardar a página basta ir ao menu File -> Save

Ou então utilizar o atalho pelo teclado: Ctrl + s

Marco Soares 20


Basta colocar o nome index.html e guardar

Marco Soares 21


Marco Soares 22


Repare que ao guardar, o nome do ficheiro aparece no cabeçalho e no painel Files

Marco Soares 23


A primeira coisa que vamos fazer é dar um título ao site

Marco Soares 24


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


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


d

Marco Soares 27

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

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

Pré-visualização em um Browser

Marco Soares 30


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


Neste caso, como o documento tinha sido alterado e não guardado o Dreamweaver pergunta se queremos guardar

Marco Soares 32


Repare que o titulo que adicionamos à página aparece no cabeçalho do separador do browser google chrome

Marco Soares 33

Criação do corpo duma página

Podemos agora começar a inserir texto na nossa página

Marco Soares 34

Criação do corpo duma página

Repare que o texto que adicionou fica dentro da tag <body>

Marco Soares 35

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


Podemos formatar o tamanho de outra forma, por exemplo

Marco Soares 37


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


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


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

Vista de estrutura/design

Nesta fase, vamos voltar à vista de estrutura/design

Marco Soares 41

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

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

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

Inserir imagem

Marco Soares 45

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

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

Formatar texto

No inspetor de propriedades, escolhemos o tipo de letra que queremos

Marco Soares 48

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

Formatar texto

Selecionamos Edit Font List…

Marco Soares 50

Formatar texto

Basta escolher os tipos de letra que queremos e clicar na dupla seta

Marco Soares 51

Formatar texto

Em seguida escolhemos o grupo de tipos de letra que criámos para o texto selecionado

Marco Soares 52

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

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

Estilos CSS

Repare como fica aplicado o estilo CSS no código html

Marco Soares 55

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

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


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


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

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

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

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


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


Marco Soares 64


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


Marco Soares 66


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


Vamos agora alinhar a imagem à direita

Marco Soares 68

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


Irá aparecer a janela

Vamos clicar no ícone da cor de fundo

Marco Soares 70


Posso escolher uma destas cores

Ou ainda mais cores, clicando em

Marco Soares 71


Nesta última opção podemos escolher uma cor e afinar essa cor, na barra da direita

Marco Soares 72


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


Marco Soares 74

Modificar cor do texto

Vamos modificar a cor do texto todo da página

Marco Soares 75


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


Vamos resolver a situação das cores

Marco Soares 77


Pode arrastar o slider da direita e configurar a cor do texto para ficar mais escura

Marco Soares 78

Modificar cor do fundo

Vamos agora configurar a cor de fundo para ficar mais clara

Marco Soares 79


Marco Soares 80


Marco Soares 81


Marco Soares 82

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

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

Aplicar cores a texto

Marco Soares 85

Estilos CSS no código

Vamos dar uma vista de olhos no código html e repare nos estilos aplicados

Marco Soares 86

Estilos CSS no código

Marco Soares 87

Repare na definição dos estilos

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

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

Página cao.hml

Crie uma página chamada cao.html e guarde-a logo

Marco Soares 90

Hiperligações

Uma das maneiras é colocar o nome da página diretamente

Marco Soares 91

Hiperligações

Outra forma é usar o ícone point to file e arrastar para a página que se pretende

Marco Soares 92

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

Hiperligações

Outra forma é clicar com o botão direito em cima da imagem e escolher Make Link

Marco Soares 94

Hiperligações

Ainda outra forma é selecionar a imagem e clicar em:

Marco Soares 95

Hiperligações

Outra forma:

Marco Soares 96

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

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

Hiperligação para um site

Vamos fazer uma hiperligação para um site ao clicar na imagem do index.html

Marco Soares 99

Resultado final

Marco Soares 100

Estilos CSS

Marco Soares 101

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

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

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

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


Marco Soares 106


Supondo que este parágrafo é o mais importante, vamos dar-lhe o formato heading1

Marco Soares 107


Vamos agora criar um estilo para alterar o formato da tag <h1> heading1

Começamos por abrir o painel dos CSS

Marco Soares 108


Repare que neste momento não tem nenhum estilo CSS definido

Marco Soares 109

Mostrar painel de estilos CSS

Se por alguma razão não aparecer o painel CSS, certifique-se que está ligado

Marco Soares 110


Marco Soares 111

Para criarmos um estilo vamos clicar no botão New CSS Rule

Tipos de estilos CSS

Aparecem 3 tipos de estilos possíveis

Class

Tag

Advanced (Ids)

Marco Soares 112

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

Criação dum estilo tag

Vamos começar por criar um estilo tag aplicado à tag <h1> heading1

Marco Soares 114


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


Aparece a janela onde definimos o formato do estilo

Marco Soares 116


Vamos modificar algumas coisas na categoria Type e carregamos em Apply para ver o resultado

Marco Soares 117


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

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

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

Exercício

Altere o estilo da tag h1 do exercício do site dos animais

Marco Soares 121

Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que...

Documents

Transcript of Dreamweaver criação do primeiro site - marcosoares.com · Dreamweaver CS3 que é a versão que...