COMO EDITAR OS ARQUIVOS HTML NO DREAMWEAVER

Tutoriais > Personalize o seu template> Edição dos arquivos HTML no Dreamweaver

Abrir o arquivo HTML
Para abrir o arquivo HTML com o editor você deverá selecionar Arquivo/Abrir (File/Open) no menu superior e em seguida procurar na pasta onde os arquivos estão salvos.

Abrir o arquivo HTML

Outras maneiras de abrir o arquivo, como copiar e colar podem causar danos à estrutura do HTML e por isso não são recomendadas.

Mudar o Texto
Um template para web é inútil sem conteúdo, assim a primeira coisa a ser feita é incluir o seu próprio texto. Para modificar o texto em HTML no editor é muito fácil.
Quando você abrir o arquivo HTML do template pela primeira vez, irá notar que todos os blocos de texto estão preenchidos com palavras em latim antigo “Lorem ipsum dolor sit amet...” Tudo o que você tem que fazer é substituí-los pelo seu próprio texto.

Modo de Edição Visual no Dreamweaver

Modo Normal no FrontPage

Todos os editores HTML profissionais possuem o modo de edição visual, assim você não precisa se preocupar com a linguagem HTML. Poderá editar o seu texto e visualizar como o site ficará quando publicado, em tempo real.
Para ativar esta opção no Dreamweaver, você deverá selecionar View/Design no menu superior. Para o Microsoft FrontPage, clique Normal na parte inferior da janela. É possível digitar o texto diretamente no editor de HTML ou copiar e colar de outros documentos ou de projetos anteriores.

Inserir Links
A estrutura de links é uma parte fundamental do projeto de um site. É importante você saber como adicionar links no seu template. Este procedimento é muito simples se você usa um editor de HTML.
Se usar o Macromedia Dreamweaver, selecione o texto ou imagem que deseja inserir um link. Vá à janela de propriedades (pressione CTRL+F3 se não conseguir visualizá-lo). Nesta janela você verá a caixa de inserção de links. Digite nessa caixa o endereço desejado.

Caixa de Inserção de Links

Os usuários do Microsoft FrontPage devem proceder da seguinte maneira. Clique com o botão direito do mouse no texto ou imagem selecionados e selecione Hyperlink… no menu. Digite a url na Caixa de Endereços.
Se você possui conhecimentos do código HTML, poderá adicionar os hiperlinks diretamente no código HTML.

Caixa de Endereços

Mudar as fontes e a cor do texto
Para melhorar o visual do seu futuro web site, talvez você precise modificar o estilo das fontes e a cor do texto.
Se você utiliza o Microsoft FrontPage verá a barra de ferramentas de texto na parte superior. Lá você poderá alterar a cor do texto, estilo e tamanho da fonte, tornar o texto em negrito, itálico, etc.

Barra de Ferramentas de Texto do FrontPage

Se for um usuário Macromedia Dreamweaver, poderá alterar as propriedades de texto no painel de propriedades. Se não consegue visualizar este painel, selecione Window/Properties no menu superior.

Painel de Propriedades do Dreamweaver

É fácil modificar pequenas porções de texto. Mas se decidir por exemplo mudar a cor do texto em toda a página, é recomendado utilizar CSS (Cascade Style Sheets) ou Folhas de Estilo.
Você pode utilizar as CSS para modificar os atributos de texto de toda página ou de uma tag específica. O uso das Folhas de Estilo é recomendado pelo padrão W3C http://www.w3.org/ para futura compatibilidade com novas versões de diferentes browsers. Há duas formas de fazê-lo, pode utilizar o editor de estilos do seu software de edição ou inserir a CSS diretamente no código HTML.
Se você utiliza o Macromedia Dreamweaver MX 6 basta teclar Ctrl+Shift+E abrir o editor de CSS ou selecionar Text/CSS styles/Manage Styles… no menu superior.
Se você utiliza o Macromedia Dreamweaver MX 2004. Você verá uma lista dos estilos usados no template. Dê um clique duplo no estilo que quer editar. Depois modifique as opções na janela pop-up.
Se você for usuário do Microsoft FrontPage, selecione Format/Style… no menu superior. Dê um clique duplo no estilo que deseja alterar. Selecione a opção Fonte clicando no botão Formatação na parte inferior da janela. Agora você pode modificar todas a propriedades do texto. Se possuir conhecimentos do código HTML, pode inserir o estilo dentro da tag. Por exemplo, se você deseja modificar a cor do link para vermelho, basta inserir o seguinte código na tag de referência:
<>style=”color:FF0000”>Texto.

Adicionar Imagens
Para tornar o seu site único você pode substituir as imagens incluídas no template pelas suas próprias, ou incluir imagens adicionais.
Para substituir uma imagem existente por uma outra de sua escolha você deve fazer o seguinte. Copie a sua imagem para a pasta de imagens do template.
Se você é um usuário do Microsoft FrontPage dê um clique duplo na imagem que deseja alterar. Na caixa de diálogo que aparece, clique em General. Existe um campo com o nome da imagem e o botão Browse... do lado direito. Clique neste botão para procurar a imagem que deseja inserir.

Propriedades de Imagem do FrontPage

Para os usuários do Macromedia Dreamweaver a tarefa é mais fácil. Dê um duplo clique na imagem que deseja alterar e procure a nova imagem a ser inserida.
Se desejar alterar a imagem diretamente no código HTML você deve substituir o valor do atributo de imagem src:
Antes: <img src="images/logo.jpg">
Depois: <img src="images/novo_logo.jpg">
Para adicionar uma imagem ao seu template, copie-a para a pasta de imagens do.
Se você é um usuário do Macromedia Dreamweaver deve clicar em Insert/Image… no menu superior e selecionar a imagem desejada.
Por outro lado se utiliza o Microsoft FrontPage clique em Insert/Picture/From File… e selecionar a imagem.