Relación de Ejercicios en DreamweaverDescripción completa
Manual Exercicios
Descrição completa
Dreamweaver
Introduccion a dreamweaver. Para que te vayas haciendo una idea de cómo funciona Dreamweaver, vamos a crear una página web sencilla, con varios estilos de texto, una imagen y un enlace a o…Descripción completa
Pengembangan bahan pembelajaran berbasis webDeskripsi lengkap
Curso basisco del Dreamweaver CS6Descripción completa
Descripción completa
Manual de funciones Basicas de DreamweaverDescripción completa
Descrição: estatística descritiva, teste de hipótese, distribuições de probabilidade
Descripción: Manual Avanzado de DreamWeaver SENA - IDETP
Descripción: BASE DE DATOS PARA DREAMWEAVE
Panduan Belajar Website PHP MySQL dengan Dreamweaver CS/8. Tutorial Dreamweaver. Panduam Membuat Website Sendiri. Pemrograman PHP Otodidak. Blejar PHP dan MySQL dengan Dreamweaver. Koneksi W…Full description
Descrição completa
Exercicios autocadFull description
EXERCÍCIOS RUÍDO CONTÍNUO OU INTERMITENTEDescrição completa
Descrição completa
Grupo Unicenter
Instituto de Formação
Exercício I- Tags Quais são as tags HTML para as listas ordenadas e para as listas não ordenadas? Listas ordenadas
Limita lista numerada
Limita lista ordenada alfabeticamente
Limita lista ordenada com I, II, III
Níveis da lista
Listas não ordenadas, com bullet
limita a lista
níveis da lista
2
Grupo Unicenter
Instituto de Formação
Exercício II- A minha primeira página Para começar vamos abrir um novo documento em branco e seleccionar uma nova página HTML. Como foi abordado nas aulas o Adobe ® Dreamweaver® CS3 permite criar diferentes tipo de páginas, o HTML é o formato mais comum na construção de páginas web.
Grave a página através do meu File > Save As > index.html. Caso se carregue no link More (assinalo a azul na imagem acima), ou se aceder ao menu File > New surge um interface mais completo, onde podemos já definir algumas pré-formatações das páginas em branco.
3
Grupo Unicenter
Instituto de Formação
Na coluna do Layout podemos escolher quantas colunas queremos, se queremos cabeçalho e roda pé, se são fixas ou ajustáveis. Vamos escolher uma página de uma coluna fixa, centrada e com cabeçalho e rodapé. Temos a nossa primeira página rapidamente criada!
4
Grupo Unicenter
Instituto de Formação
1 2 3
4
5
Para editá-la melhor é necessário compreender o código htlm. Os estilos e as css também são muito importantes, já que com elas podemos criar blocos de formação e elas são essenciais no que diz respeito à acessibilidade das páginas web. Vamos gravar o ficheiro com o nome exercicio1.htlm. mantenha na vista de design e para editar o texto basta carregar nele e substituir. Criou uma página semelhante à seguinte apresentada:
O número 1 3 e 4 correspondem a também a cabeçalhos, tags que o html já contém pré-definidas, o número 2 ao cabeçalho e o nº 5 ao rodapé da página.
Quais são as tags correspondentes ao número 1, 3 e 4?
5
Grupo Unicenter
Instituto de Formação
1.2: Faz a correspondência entre as duas colunas:
Titulo da página
Coluna
Delimita um ficheiro html
Hiperligação
Parágrafo
Linha
Quebra de linha
Corpo da página
Inserir imagens Inserir imagens é bastante simples, para tal coloca-se o cursor no sitio onde se quer colocar a imagem e acede-se ao menu Insert > Image, e escolhe a imagem escolhida. As imagens devem de ter uma pasta especifica e irem devidamente tratadas e com os tamanhos correctos para o Dreamweaver, para tal faça uso de uma ferramenta de tratamento e edição de imagens como por exemplo o Abode Photoshop.
6
Grupo Unicenter
Instituto de Formação
Após escolhermos o ficheiro pretendido surge uma caixa de dialogo na qual podemos introduzir o Alt da imagem, que surgirá quando o rato passar por cima da mesma ou em caso da imagem n poder ser disponibilizada. Este parâmetro é muito importante no que diz respeito a questões de acessibilidade.
Na caixa de propriedades da imagem podemos definir alguns parâmetros, nomeadamente o seu alinhamento, estilo, tamanho, hiperligação, ou redefinir a sua localização.
Qual é a tag HTML correspondente à inserção de uma imagem?
Grave novamente o ficheiro.
Criar uma hiperligação Neste ponto vamos criar uma hiperligação para uma página existe na Internet. Para tal seleccionamos o campo de texto pretendido, e na caixa das propriedades, no campo link digitamos o url pretendido, ou então vamos buscar o ficheiro para o qual queremos criar a ligação. Vamos então seleccionar a palavra Unicenter no rodapé da página e colocar no link o url para a página da Unicenter: http://www.unicenter.pt
7
Grupo Unicenter
Instituto de Formação
Vamos pré-visualizar a nossa página, como ela iria ficar se estivesse on-line, para tal clicamos no botão de pré-visualização ou na tecla F12. Como foi dito no início do exercício, esta página tem já formatações pré-definidas através de CSS. Para alterar as mesmas vamos abrir o painel das CSS, e podemos escolher uma por uma e ditar os diversos componentes. São vários os parâmetros que podemos definir através das css: a cor de fundo, do texto, o tipo de letra, alinhamento, tamanho da área… Para melhor entender este ponto consultar o módulo das CSS presente no manual. Ter em atenção os botões all e current, o primeiro mostra todos os estilos presentes nas páginas, o segundo diz respeito ao estilo seleccionado no momento.
Formate à vontade a sua página, mude a cor de fundo do cabeçalho e rodapé, coloque o texto com um aspecto que considere agradável, vamos puxar pela imaginação!
8
Grupo Unicenter
Instituto de Formação
Para inserir uma imagem de fundo basta seleccionar no painel das css a área à qual quer associar a imagem e adicionar a propriedade background image e escolher a imagem pretendida. Como se pode analisar na imagem ao lado. A imagem poderá ou não repetir-se, Vamos adicionar uma imagem de fundo ao body, para tal carregamos na css body e na propriedade background-image vamos buscar a imagem fundo.gif, na pasta das imagens. Também utilizando este painel, podemos formatar a área que quisermos, o mesmo acontece com o tipo de letra e cores, basta seleccionar a área pretendida e alterar as propriedades ou adicionar alguma nova propriedade. Após configurar alguns parâmetros a página ficou com o seguinte aspecto.
1.6. O que entende por uma css e enumere algumas vantagens?
9
Grupo Unicenter
Instituto de Formação
Exercício III- Elementos Este exercício pretende solidificar os conceitos relativos à disposição dos elementos no ambiente de trabalho. Como foi abordado temos os vários tipos de vistas code, design e ambos, acessíveis na barra de ferramentas do documento.
2.1. Explique a diferença entre estes tipos de vistas? 6
1 2
3
4 5
2.2. Faça a legenda da imagem?
2.3. Enumere os diferentes separadores existentes na barra insert.
10
Grupo Unicenter
Instituto de Formação
2.4. Que cuidados deve de ter na gestão de um site?
2.5. Porque é que se diz que o Dreamweaver é um programa WYSIWYG?
