ウェブ屋の備忘録

日々の業務で工夫していることや便利なツール、新たに得た知識などを共有しています。

Dreamweaverのデザインビューはかしこい。

こんにちは コーディング中は軽く吐き気を催すTです。 でも綺麗に出来上がると非常に気分の良い作業ですよね。

人それぞれ、コーディングしやすいソフトや方法は違いますが 私はメインでDreamweaverを使用しています。

理由は直感的で使いやすいことの他に、

  • 打ち間違い、閉じ忘れなどの単純なミスが減る
  • だいたいのレイアウトを随時確認しながら作業ができる
  • ミスをしたらタグが黄色く反転してすぐに分かる
  • タグが簡単に修正・挿入できる
    例えば、見出しタグはCtrl+1~6 など

などの理由があります。

f:id:webbibouroku:20160112163242j:plain

私は画面を半分に切って上にコード、下にデザインビューが 見えるようにして両方を使いながらコーディングしているのですが、 (そうしないと何しているか分からない♪) 意外に「デザインビュー」が多機能で効率化が図れるんです。

まず、エクセルやワードと互換性があるため、お客様や営業マンから 受け取ったデータそのまま(orちょっと調整して)コーディングデータに 反映することができます。

例えば、ワード の場合は「デザインビュー」に文章を貼り付けた場合、 「強制改行」(Shift + Enter)されている部分はちゃんと「br」タグに、 普通の改行の場合は「p」タグが挿入されます。 また、Wordでリスト化したものはそのままDreamweaverでもリスト化されます。

エクセルの場合、エクセルで作った表をDreamweaverの「デザインビュー」に 貼り付けて「コードビュー」を見てみてください。 ちゃんと「table」タグが挿入されたコードが出てきています!

特に表周りの作業は便利だと感じます。 「Ctrl + クリック」でセルが選択できたり、(その状態で複数選択も可能) 最終行のセルの入力が終わって「Tab」キーを押すと 下に行が追加されたり。 行の追加は「Ctrl + M」、削除は「Ctrl + Shift + M」で簡単にできます!

こちらの記事が非常に分かりやすいのでご参照ください▼

「Webデザインのタネ」さんより、 Dreamweaverのデザインビューを使い倒すために覚えてきたいこと

http://oshare.jugem.cc/?eid=767

上記サイトの言葉を借りて言うと、 デザインビューってほんと「できる子」なんです。 コーディング中に吐き気がする人にはオススメ♪

デザインの学校 これからはじめるDreamweaverの本[CS6/CS5.5対応版]

デザインの学校 これからはじめるDreamweaverの本[CS6/CS5.5対応版]