dreamweaver CS6, Notas de estudo de Cultura

Baixe dreamweaver CS6 e outras Notas de estudo em PDF para Cultura, somente na Docsity!

Desenvolvida exclusivamente para o Apostilando.com por

Marcos Paulo Furlan

ÍNDICE

INTRODUÇÃO

O Dreamweaver é não só outra ferramenta de visual de HTML. Ele faz o que todos os melhores editores fazem: cria tabelas, edita quadros e alterna facilmente da visualização de páginas para visualização HTML. Mas o Dreamweaver vai além dos outros editores para permitir criar animações e páginas dinâmicas (DHTML). O Dreamweaver suporta completamente as folhas de estilo em cascata (CSS), bem como camadas e comportamento de Javascript. Ele também inclui sua própria ferramenta de animação DHTML. E um cliente FTP repleto de recursos, que incluem mapas visuais do site, está embutido dentro dele. Quando iniciar o Dreamweaver pela primeira vez, você verá uma janela principal, que permite a você criar documentos estáticos (HTML) e dinâmicos como Coldfusion, PHP, ASP, ASP. NET e arquivos CSS.

Nessa tela, você tem na esquerda os documentos abertos recentemente ou abrir um arquivo existente. Na tela central, podemos definir os tipos de arquivos a serem criados. Na tela da direita ele apresenta alguns templates.

Embora não seja um pré-requisito para utilizar o Dreamweaver, é de extrema importância que ao criar um site você tenha uma base da linguagem HTML. Pois mesmo para o entendimento do que será apresentado durante essa apostila, para muitas coisas ele será necessário.

PROJETO DE UM SITE

No Dreamweaver podemos editar páginas HTML únicas como podemos gerenciar sites, ou seja, controlar todo o projeto que está sendo feito, o que é recomendado para a construção de seu site. Na tela que se abre na coluna do meio temos a opção Site do Dreamweaver Clique nessa opção. Ele vai abrir um assistente de criação do ambiente site.

Nessa etapa você deve dar um nome ao seu site e a pasta em seu computador onde serão salvos os arquivos a serem utilizados. Dê um nome ao seu site e clique na opção Servers. Clique no sinal de mais (+) para definirmos o servidor. Se você ainda não possui um servidor, pode pular esta etapa. Você pode também montar todas as suas página e somente depois enviar os arquivos para o seu servidor usando um programa de FTP.

view - em sua máquina) e Remote view (em seu servidor). 3
Permitem conectar / desconectar com seu servidor. 4
Permitem dar um Refresh (recarregamento) em sue site. Isso é útil caso você venha a editar algum arquivo de site fora do Dreamweaver, situação comum com imagens e animações flash. 5
Permitem baixar de seu servidor arquivo para alteração local. 6
Permitem subir para seu servidor algum arquivo local. 7
Permitem dar check out em um arquivo 8
Permitem dar check in em um arquivo 9
Permitem expandir a tela de site, ele vai mostrar duas colunas, a da esquerda são sua máquina e a da direita o seu servidor. Caso seja necessário alterar qualquer configuração de seu site, basta clicar no Menu Site, Gerenciar Sites.

CRIANDO DOCUMENTOS

O Dreamweaver CS6 tem entre suas propriedades a possibilidade de se criar sites dentro de padrões da W3C (www3c.org) que é órgão que cuida das especificações técnicas de desenvolvimentos de tecnologias aplicadas à web sites. Então ao se criar uma página HTML, ele vai criar ela no padrão XHTML, que é um padrão que permite uma validação correta para suas páginas.

XHTML é uma reformulação da linguagem HTML (Hypertext Markup language) baseada na XML (Extensible Markup Language). Em termos de sintaxe, a XHTML não é tão tolerante como a HTML. Isso ocorre porque a XHTML utiliza as rígidas regras de XML para realizar as marcações em um documento. Por padrão a XHTML separa a TAG (elemento que permite definir qual comando será utilizado) e as propriedades para a mesma. Você pode através da tela de abertura criar seu documento HTML, ColdFusion, PHP, etc..., como pode também clicar na opção “Mais...”, embaixo de todas.

Essa opção abre a possibilidade de se criar os diversos tipos de documentos, além de utilizar um tipo de layout, na direita da tela têm a opção de escolha do tipo de documento HTML, o padrão é “ XHTML 1.0 Transitional ”, mas você pode escolher outro tipo de documento. Para saber mais sobre XHTML (http://pt.wikipedia.org/wiki/XHTML). Ao Clicar em Criar, ele cria seu primeiro documento HTML.

Podemos definir a fonte dos mesmos tamanho, cód. do link (forma como ele vai aparecer na página), Rollover links (muda a cor do texto quando link ao se passar o mouse sobre ele), Visited Links (cor a ser mostrada em links já visitados pelo visitante de seu site), Active Links (cor do texto a ser mostrada quando clicado sobre o link). Underline Style: é como deve ser aplicado o sublinhado em seus links, no caso da imagem está para ser mostrado conforme o mouse passar pelo link. A terceira Categoria Títulos é relativa à formatação dos títulos de sua página (O HTML permite a configuração e utilização de até 6 tipos de títulos)

A guia Titulo / Codificação, como o próprio nome diz é referente ao título da página (o mesmo que aparece na janela de seu navegador) e a codificação do HTML a ser utilizada.

A última guia é referente à imagem de rastreamento. Ao se clicar em OK, ele retorna a página do Dreamweaver, você pode observar que no topo da janela aparece como documento não salvo o tipo de documento.

Case Sensitive (diferenciem maiúsculas de minúsculas), ou seja, Arquivo e diferente de ARQUIVO e diferente de arquivo.

Publicando seu arquivo

Para publicar o arquivo recém criado, você pode na aba files clicar no botão

Put File(s). Ele mostra a tela de conexão.

Ao término ele mostra ao lado do arquivo enviado um aviso em verde. Caso queira, você pode montar todo o seu site e depois enviá-lo para teste. Caso queira pode também usar um programa de FTP Externo ao Dreamweaver.

Para poder ver o arquivo publicado, clique onde está escrito “Local view” e escolha “Remote View”.

Você pode também ter uma janela onde fique fácil de arrastar arquivos de uma janela para outra. Basta clicar no último botão da aba.

erros de sintaxe de código, comunicação com o servidor de hospedagem, previsão do documento no navegador, recarregamento da página (opção interessante quando a mesma foi manipulada fora do Dreamweaver com o documento aberto), opções de visualização de componentes auxiliares na página, Visual Aids.

Formas de visualização

No Dreamweaver é possível trabalha com seu documento de três formas:

Design : Essa forma é a que mais se aproxima dos editores de textos comuns, pois é toda visual, bastando inserir conteúdos no documento e digitar os textos.

Dividir : Essa opção divide a sua tela em duas partes, sendo a de cima a página sendo vista através de códigos e a parte de baixo de forma design.

Código : Essa opção vai mostrar o seu documento sendo visto através da codificação HTML, quando se tem conhecimento de códigos HTML, em algumas situações essa forma de visualização se torna mais rápida e pratica.

Visualização do Documento

É sempre importante ao desenvolver um site que ele tenha um comportamento semelhante nos principais navegadores (Internet Explorer e Firefox), como o Dreamweaver também da suporte ao device Central que permite ver seu site em celulares. Para poder ver como ficará a sua página, basta clicar no botão Visualizar/Debug in Browser.

Ao clicar na opção Editar Lista de Navegadores, você pode definir qual o navegador de prioridade, adicionar ou remover navegadores, etc.

Painéis

O Dreamweaver como os demais programas Adobe® possuem para a maioria de seus comandos painéis, posicionadas á direita da tela.

Para este tipo de mudança será necessário trabalharmos com CSS que será visto posteriormente.

No desenvolvimento de sites atualmente, não se formata mais o texto diretamente em sua TAG de chamada exemplo (texto , cria-se um estilo para a fonte e aplica-se esse estilo na fonte (se o estilo for somente a uma palavra ficaria _<span style= “font-family: Arial”

texto_ ), recurso que era possível até a versão CS3 do Dreamweaver. Na opção formato podemos definir se será somente texto ou terá atribuições de cabeçalho (veremos posteriormente). Temos a opção de atribuir um link ao texto (assunto a ser visto posteriormente). O uso de marcadores e recuos. Através do Menu Texto temos outras opções de formatação como: Estilos variados de formatação como, por exemplo, sublinhado, ênfase, citação etc.

Localizar e Substituir

O Dreamweaver pode pesquisar seu documento e localizar um pedaço de texto especifico. Ele também pode substituir uma Sting de texto por outra. Para localizar um pedaço de texto em seu documento, clique no Menu Editar, Localizar e Substituir.

Parágrafos e Layout

A unidade básica de texto em HTML é o parágrafo. Enquanto o parágrafo é o nome específico de texto incluído pela tal

, os parágrafos podem ser mais amplamente definidos como qualquer bloco de texto especificamente formatado. Os tipos de parágrafos incluem itens de lista, texto pré-formatado e divisões.

Parágrafos e Quebras de linha

Na HTML existe uma diferença entre parágrafos HTML, com os parágrafos utilizados em um editor de Textos como o Microsoft® Word® por exemplo. Na HTML o parágrafo faz um espaçamento duplo entre um parágrafo e outro e permite por padrão os alinhamentos, esquerdo (padrão), centro, direita e justificado. Já as quebras de linhas apenas quebram a linha na posição e o que vier depois da quebra será colocado na próxima linha, como um parágrafo de editor de textos.