dreamweaver criação do primeiro site - marcosoares.com · dreamweaver cs3 que é a versão que...
TRANSCRIPT
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
Criar um novo documento de html (página web)
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
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
Criar um novo documento de html (página web)
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
Criação da página inicial
Marco Soares 18
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
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
Criação da página inicial
Basta colocar o nome index.html e guardar
Marco Soares 21
Criação da página inicial
Marco Soares 22
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
Criação da página inicial
A primeira coisa que vamos fazer é dar um título ao site
Marco Soares 24
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
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
Criação da página inicial
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
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
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
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
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
Formatação de texto
Podemos formatar o tamanho de outra forma, por exemplo
Marco Soares 37
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
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
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
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
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
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
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
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
Alinhamento de imagem
Marco Soares 64
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
Alinhamento de imagem
Marco Soares 66
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
Alinhamento de imagem
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
Modificar o fundo da página
Irá aparecer a janela
Vamos clicar no ícone da cor de fundo
Marco Soares 70
Modificar o fundo da página
Posso escolher uma destas cores
Ou ainda mais cores, clicando em
Marco Soares 71
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
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
Modificar o fundo da página
Marco Soares 74
Modificar cor do texto
Vamos modificar a cor do texto todo da página
Marco Soares 75
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
Modificar cor do texto
Vamos resolver a situação das cores
Marco Soares 77
Modificar cor do texto
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
Modificar cor do fundo
Marco Soares 80
Modificar cor do fundo
Marco Soares 81
Modificar cor do fundo
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
Criação de estilos CSS
Marco Soares 106
Criação de estilos CSS
Supondo que este parágrafo é o mais importante, vamos dar-lhe o formato heading1
Marco Soares 107
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
Criação de estilos CSS
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
Criação de estilos CSS
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
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
Criação dum estilo tag
Aparece a janela onde definimos o formato do estilo
Marco Soares 116
Criação dum estilo tag
Vamos modificar algumas coisas na categoria Type e carregamos em Apply para ver o resultado
Marco Soares 117
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
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