Com este turorial pretendo passar a todos os conceitos básicos do dreamweaver, este que é o melhor e o mais fácil programa de edição de páginas html da atualidade. Com este tutorial você que não conheçe nada sobre o Dreamweaver, já estará apto à conhecer conceitos avançados desse revolucionário software. Iremos enfatizar os botões e suas características. Vamos ao tutorial:
Área de trabalho
1º Vamos conhecer a área principal do Dreamweaver:
1 - Área do código html - Aqui é onde aparece o código HTML ou aonde você pode digitar o código Html caso você saiba.
2 - Área de edição do Dreamweaver (Projeto) - Nesta área você edita livremente, adiciona tabelas, digita, desenha camadas (Layers), insere links, flashs, tudo o que quiser.
3 - Mostrar a visualização do código - Se este botão estiver apertado ficará aparecendo somente a área do código HTML.
4 - Mostrar as visualizacões de código e do projeto - Se este obtão estiver apertado ficará aparecendo as duas áreas descriminadas nos itens 1 e 2.
5 - Mostrar a visualização do Projeto - Se este botão estiver apertado estará aparecendo somente a área descriminada no item 2.
6 - Visualizar/depurar no navegador - Apertando esse botão aparece um sub-menu com três opções, para usuários iniciante é importante ressaltar simplesmente a primeira opção que é Visualizar em iexplorer que ao ser apertado abre o navegador Internet Explorer para efeito de visualização do andamento do seu projeto.
7 - Opções de visualização - Ao apertar esse botão aparecem um monte de opções auto-explicativas como régua, número de linhas, grade, realçar html incorreto e etc.
8 - Tamanho da janela - Aqui você escolhe o tamanho da janela do Dreamweaver, isso serve só para facilitar a sua visão no programa com relação a resolução do seu desktop. Esse botão não influencia em nada no tamanho da sua página html, é mais para um efeito de conforto ao trabalhar com o programa.
Barra de Ferramentas Comum
1 - Hiperlink - Ao apertar esse botão aparecerá uma caixa onde vc pode escolher nome, arquivo, destino e etc do seu link.
2 - Link de correio eletrônico - ao apertar aparece uma caixa onde você digita o texto e o endereço do link de e-mail que quer fazer link.
3 - Âncora com nome - Âncora é um auxiliar que você coloca em uma certa parte da sua página html e depois coloca um link para essa ancora em outra parte da página, por exemplo eu posso colocar uma âncora em uma palavra no topo dessa página e fazer um link para essa âncora aqui.
4 - Tabela - ao apertar aparece um tela onde você escolhe tamanho, linhas, colunas e etc.
5 - Camada(Layers) - Esse botão desenha os famosos layers pelo qual todos são doidos, realmente usar layers é realmente muito melhor que trabalhar com tabelas. Ao apertar neste botão é só você posicionar o mouse na área do projeto eaonde vc queira que apareça por exemplo os posts do seu template e desenhar. Funciona como desenhar um retangulo no Paint Brush.
6 - Inserir Imagem - Ao apertar esse botão você visualiza uma tela onde vc escolhe a Url da sua imagem, entre outras características.
7 - Alocador de espaço de imagem - serve para você adaptar uma imagem que não cabe em um certo lugar ao tamanho que você desejar e que caiba no espaço que lhe tiver disponível.
8 - Html do Fireworks - serve para colocar um html mostrado pelo Fireworks. Como o Fireworks é um editor de imagens próprio para web ele também visualiza a imagem no IE e fornece o código html para ser enviado para o Dreamweaver. (usuários avançados).
9 - Flash - Serve para colocar um arquivo flash.
10 - Imagem Cambiável - É aquele tipo de link de imaçem onde aparece uma imagem e quando você passa o mouse por cima aparece outra. Funciona como a função Hover de css de links.
11 - Barra de Navegação - Inserir Barra de Navegação, não é interessante para usuários iniciantes.
12 - Régua Horizontal - Serve para inserir aquela barra divisória de dois blocos de textos por exemplo.
13 - Data - Iserir Data e Hora
14 - Dados tabulares - Serve para ajustar parágrafos, não é importante (eu nunca usei).
15 - Comentários - Adiciona comentários ao código html... Esses comentários não aparecem no resultado da página.
16 - Seletor de tags - Muito útil quando você esquece aquela tag super importante e não lembra, você aperta e entra em uma telinha onde você procura e adiciona a tag desejada.
Painel de Propriedades
O painel de propriedades provavelmente já está aberto ao abrir o Dreamweaver. Ele funciona sempre que você sublinha alguma coisa, marca, um texto, uma imagem, uma tabela, um link ou qualquer outra função do Dreamweaver. Portanto se você esta procurando como editar uma tabela (por exemplo) é só você marcar a ordar da tabela com o mouse e as propriedades irão aparecer neste painel. Esta é a aparência principal do painel, ela muda sempre que algo é selecionado dando opções novas opções aos usuários.
1 - Formato - Aqui você pode escolher o formato de parágrafo que todos nós já conhecemos através dos programas do Office.
2 - Fonte - Aqui você escolhe a fonte do seu texto. Geralmente na lista principal estão somente as fontes padrões, se quiser colocar alguma você tem que editar clicando no item editar lista, no mesmo menu de escolha de fonte.
3 - Tamanho - Escolhe o tamanho da fonte.
4 - Cor - Aqui você escolhe a cor do seu texto.
5 - Caixa de código da cor - Ao escolher uma cor o seu código html aparece nessa caixa. Caso a cor que você gostaria de usar não esteja disponível, é só você colocar o código da cor nesse campo que o programa reconhece.
6 - Link - Ao sublinhar um texto, digite nesse campo o url destino do seu link, após isso o seu link está pronto.
7 - Procurar arquivo - Se um texto estiver sublinhado e você quiser fazer link para um arquivo é só apertar nessa pastinha e procurar o arquivo.
8 - Destino - Nesse campo você escolhe se o link vai abrir em uma janela nova (_blank) na mesma janela (_self), em outra janela que já esteja aberta (_parents) e (_top) ao qual vocês me desculpem eu não sei pra que serve. (tentei descubrir mas não consegui).
9 - Da Esq. para a Direita: todos conhecidos, Negrito, Itálico, Alinhar à esquerda, alinhar ao centro, alinhar à direita, Justificar.
Painel Design
Esse painel serve para os estilos css. Com isso você não precisa ficar editando cada frase que você digitar no seu texto. Nele você pode editar por exemplo links, body(corpo da página), fonte, cores e estc (Estes serão direcionados a todo o documento) e os estilos classe que você pode direcionar para uma parte do documento (Ex de estilo classe: você crias o estilo css .div e na parte do documento que você queira usar as características desse estilo é só dentro da tag por exemplo <td valing="top" class="div">...</td>. Você pode colocar ná tag que quiser, como <img...> <div ID="Layer"...> e etc.
1 - Anexar a folha de estilos - Serve para você importar o estilo css de outra página ou de um arquivo externo ao seu documento.
2 - Novo estilo Css - Como o nome já diz, serve para adicionar um novo estilo css.
3 - Design - este painel tem as propriedades para se fazer um bom design em uma página. Desse painel só é importante para os iniciantes a aba Estilos CSS.
4 - Área do painel - Essa é a área do painel onde aparece os estilos classes criados. Clicando duas vezes com o botão esquerdo do mouse você abre essa telinha que nós vemos a seguir:
Nesse painel é aonde você começa a editar os estilos classe.
1 - Link - Fazer link para um estilo em outra página ou em um arquivo esterno ao documento.
2 - Novo - Adicionar novo estilo css ao documento ao apertar esse botão vai aparecer o painel que nós vemos mais abaixo...
3 - Concluído - ao apertar esse botão conclui a edição da página de estilos, claro que isso não impede você de voltar aqui para editar o que você não achou que ficou bom.
4 - Área de estilos - Nessa área ficam listados todos os estilos que você adicionou. Para voltar a edita-lo é só clicar duas vezes no que você deseja editar ou clicar nele uma vez e apertar o botão Editar. Para remover é só clicar no que deseja excluir e apertar o botão Remover.
Essa é a tela onde você define qual é o estilo que quer formatar ou onde você define um estilo classe.
1 - Nome - Nesse campo dependendo da opção assinalada abaixo vai haver opções a serem escolhidas nele.
2- Crial estilo personalizado (classe) - Com esta opção assinalada, na caixa nome você digita o nome do estilo classe ao seu gosto, tem que ficar claro que estilo classe você adiciona aonde você quiser sendo portanto inofensível ao documento inteiro, só vai ser afetado pelo estilo classe aonde você quiser que ele seja afetado. (Aonde você adicionar dentro da tag o class="fulano" lembrando também que você pode colocar qualquer nome (claro aquele que lhe for mais útil) não é preciso saber de cór html pra usar estilo classe.
3 - Redefinir a tag de html - Se esta opção estiver assinalada No campo nome você pode escolher qualquer tag html e editar os seus estilos. Nesse caso o estilo será direcionado a todas as tags iguais no documento inteiro.
4 - Utilizar o seletor de CSS - Com esse selecionado aparece no menu Nome os quatro estilos de link: a:link(link normal), a:active(link quando você aperta sobre o botão do mouse sobre ele), a:hover(link quando o mouse passa por cima dele), e a:visited(Link que já foi visitado por você).
Dica: se você quer mesmo aprender a mexer no Dreamweaver e a fazer templates ou qualquer outro programa, corra atrás entre em layouts shops, baixe templates, entre nos códigos fontes da páginas htmls, estude os efeitos do html, faça testes, pois é assim que se aprende, ninguém aprende com curso ou com os outros explicando. O melhor jeito de aprender é enfiar a cara e fuçar. Muitas pessoas por aí sabe de tudo e nunca fez um curso de html, como eu, oque eu sei eu aprendi fuçando mesmo. Claro que a gente sempre tem uma dúvida, para isso é só você tirar a dúvida com alguém, comigo, com outro dono de layout shop, enfim... Tenho certeza que como aconteceu comigo tem muita gente que não deixa de ajudar, enfim são os usuários que nos dão prestígio. OK?
É isso aí galera, esse tutorial é bem básico espero que ajudem a vocês... Pelo menos com ele vocês já vão poder começar a ter uma bom base desse que é o melhor programa de html que existe. Queria dizer que esse tutorial foi feito por mim, sem a ajuda de nenhum outro turorial e por consequencia levou umas boas horas do meu tempo. Se quiser salvar em seu computador para treinar off-line, tudo bem, só peço para não distribuirem para download e nem disponibilize-o em seu site. Se você aprendeu com esse tutorial link-nos como forma de agradecimento.
0 Comentários