Básico
Bom, esse tutorial vai explicar algumas coisinhas básicas sobre o programa Dreamweaver ;)Sumário:
1. Novo Arquivo
2. Code/Código ou Design?
3. Barra de Propriedades
4. Inserindo Imagens
5. Inserindo Tabelas
6. Buscas
1. Novo Arquivo
Quando você entra no Dreamweaver, aparece uma janelinha de boas vindas. Do lado direito vai aparecer "Open a Recent Item / Abrir um Item Recente", que mostra os últimos arquivos que você criou/editou. Para abrí-lo, é só clicar no nome dele. No meio tem o "Create New / Criar Novo", que tambem tem um nome bem sugestivo. Clique em HTML, e vai abrir uma nova página em branco.2. Code/Código ou Design?
Quando você cria um arquivo, pode aparecer uma página em branco ou uma com uns códigos. Calma, não seu pau nem nada, é que o Dreamweaver já cria o HTML da sua página para você :). Se você quer ver como o seu site tá ficando, vá no modo Design (View - Design / Visualizar(?) - Design), se quiser o código, escolha Code/Código, e se quiser metade código e metade design, escolha Split/Dividir(?).IMPORTANTE!
Não confie cegamente na visualização do Dreamweaver, as vezes o seu código pode estar perfeito e ele pode estar te mostrando um mostrinho. Para ver com o seu site realmente está ficando, aperte F12 que ele vai abrir uma janela do seu Browser (IE, Firefox, etc.)
3. Barra de Propriedades
Não vai ter nada na sua página. Para escrever alguma coisa, é só clicar na parte em branco e começar. Mas essa fonte Times tá horrível né? Então, olhe pra parte de baixo da sua tela. Se tiver uma barra escrito Properties ou Propriedades pode pular essa parte, se não, aperte Ctrl+F3. Selecione o seu texto, e mude a fonte (em Font/Fonte), a cor (na caixinha com uma seta), o tamanho (em size/tamanho) e se quer em negrito (B) ou itálico (I). Você tambem pode definir o alinhamento (esquerda, centro, direita, justificado pelas linhazinhas, como no Word.Se você quiser fazer um link, é só clicar na caixinha branca ao lado de Link e por o endereço.
Uma coisa interessante sobre a barra de propriedades: ela muda conforme o item que estiver selecionado. Por exemplo, se você tiver uma imagem, ela vai mostrar outras propriedas que podem ser mudadas, o mesmo acontece com textos, tabelas, etc.
4. Inserindo Imagens
O seu Dreamweaver tem outra barra que tambem facilita muito a vida, uma que fica lá em cima, embaixo de File, Edit, etc (Arquivo, Editar, etc.). Ela tem vários desenhinhos. Se você não tem uma, aperte Ctrl+F2. Agora, procure uma foto com uma arvorezinha no meio, é o 6º item da esquerda pra a direita. Não tem arvore nenhuma? Veja de beem na esquerda está escrito Common/Comum(?). Se não, clique na seta e selecione essa opção. Depois de clicar nessa arvorezinha, é só escolher a imagem que você quiser :)5. Inserindo Tabelas
Para por uma tabela, você usa a mesma barra que você usou para inserir a imagem :). A tabela é o 4º item da lista. Vai aparecer uma janelinha feliz. Explicando as coisas:Table size
Rows: linhas
Columns: colunas
Table widht: largura da tabela, em px ou em %
Border thickness: largura da borda. Se você não quiser borda, coloque 0. Quando você visualizar, vai aparecer um pontilhado, mas não se preocupe: não vai aparecer na net.
Cell padding/spacing:espaçamento entre as células
Header: se você quiser uma célula mais largona prapor títulos, selecione left/esquerda, top/topo ou both/ambos. Se não quiser, none/nenhum
Accessibility
Caption: uma espécie de titúlo que fica à cima da tabela.
Align caption: alinhamento desse título
Quando você tiver acabado, clique em OK.
6. Buscas
Se usa for usar o modo de código, essa dica é muito útil. Sem exagero, isso poupa um tempo enorme. Pra localizar alguma coisa no seu código, aperte Ctrl+F. Vai aparecer uma janela esquisitinha. Em Find/Achar, coloque a palavra/pedaço de código que você quer achar e clique em Find Next. O Dreamweaver vai te mostrar tudo igual àquilo que você digitou. Agora vem a parte legal: sabe quando você usou, por exemplo, uma imagem umas 30 vezes na página, mas no fim você decidou mudá-la? Aperte Ctrl+F, e em Find coloque o endereço da imagem (ex: http://dominio.com/img.gif), e em Replace/Substituir, coloque o endereço da imagem certa (ex: http://dominio.com/img.jpg) e clique em Replace All/Substituir Todas para mudar todas as 30 imagens de uma vez só!Se esse tutorial te ajudar, não esqueça de linkar (:
Tutorial por Vevis - Winter-Dream.com . Não copie sem autorização Dúvidas?
