Como formatar código HTML usando o Dreamweaver

Na vida de um desenvolvedor visual FRONTEND é comum pegar códigos bem bagunçados sem formatação, ou seja - conteúdo escrito em uma linha só. Mas é fácil de resolver isso usando o DREAMWEAVER. Estou usando nesse exemplo a versão CS6 do software.

Exemplo de código sem formatação:

<div class="container" style="margin-top: 50px;">
<div class="sixteen columns">
<div class="homepage_content section clearfix image_with_text image-text--align-center">
<div class="eight columns image_column alpha animate_left animated fadeInLeft"><img src="//cdn.shopify.com/s/files/1/2571/9378/files/loja3.jpg?v=1529098091" alt=" class=" lazyload--fade-in="" lazyautosizes="" lazyloaded="" data-sizes="auto" /></div>
<div class="seven columns content_column offset-by-one omega text-align--center">
<h1 style="font-size: 29px; font-weight: 400; line-height: 1em; letter-spacing: 3px; margin-bottom: 3px;">ORLANDO - FLORIDA</h1>
<h3 style="font-size: 20px; font-weight: 400; line-height: 1em; letter-spacing: 1px; margin-bottom: 19px;">FLORIDA MALL</h3>
<p style="font-size: 18px; margin-bottom: 5px; line-height: 1.5em;">8001 SOUTH ORANGE BLOSSOM TRAIL<br /> UNIT 856 <i>(OPPOSITE GAP)</i><br /> ORLANDO, FL32809<br /> (+1) 321-236-7943<br /> <br />MON - FRI: 10AM - 9PM<br /> SAT: 10AM - 10PM<br /> SUN: 12PM - 8PM</p>
</div>
</div>
</div>
</div>

Para realizar a formatação de forma automática é simples. Abra seu arquivo HTML no DREAMWEAVER e vá em COMMANDS > APPLY SOURCE FORMATTING.

Esse é o resultado.

<div class="container" style="margin-top: 50px;">
  <div class="sixteen columns">
    <div class="homepage_content section clearfix image_with_text image-text--align-center">
      <div class="eight columns image_column alpha animate_left animated fadeInLeft"><img src="//cdn.shopify.com/s/files/1/2571/9378/files/loja3.jpg?v=1529098091" alt=" class=" lazyload--fade-in="" lazyautosizes="" lazyloaded="" data-sizes="auto" /></div>
      <div class="seven columns content_column offset-by-one omega text-align--center">
        <h1 style="font-size: 29px; font-weight: 400; line-height: 1em; letter-spacing: 3px; margin-bottom: 3px;">ORLANDO - FLORIDA</h1>
        <h3 style="font-size: 20px; font-weight: 400; line-height: 1em; letter-spacing: 1px; margin-bottom: 19px;">FLORIDA MALL</h3>
        <p style="font-size: 18px; margin-bottom: 5px; line-height: 1.5em;">8001 SOUTH ORANGE BLOSSOM TRAIL<br />
          UNIT 856 <i>(OPPOSITE GAP)</i><br />
          ORLANDO, FL32809<br />
          (+1) 321-236-7943<br />
          <br />
          MON - FRI: 10AM - 9PM<br />
          SAT: 10AM - 10PM<br />
          SUN: 12PM - 8PM</p>
      </div>
    </div>
  </div>
</div>

Bem mais fácil de ler né?