スポンサーサイト

一定期間更新がないため広告を表示しています

Dreamweaverのデザインビューを使い倒すために覚えてきたいこと

 

タグの閉じ忘れみたいな単純なミスを減らすには手動の入力を減らすことに尽きます!
僕は細かいことが非常に苦手で、最初に業務でHTML書いたときは閉じ忘れやaltの抜けが多くて泣きそうになったことが何度あったことか><
おかげで、今ではほとんど原稿をHTMLに流し込むときはミスなく進められています。

なるべく手入力でHTMLを書くことを減らすにはZen Codingも使っていますが、Dreamweaverのデザインビューも使用します。今日はDreamweaverでなるべくタグを書かない原稿の流し方を紹介します。

デザインビューのメリット

デザインビューのいいところは、原稿をペーストしたときにとりあえずpで囲ってくれること。基本的にコードは壊しません。
自分でコーディングすることが少なくなるのでタグの閉じ忘れやリンクの貼りミスのような打ち間違いで起こるミスを減らすことができるようになります。また段落から見出しに変更したりスタイルを当てていくと、ビューに反映されるので作業自体も見ていて楽しくなります。地味なモチベーションアップです。

デザインビューとコードビューを使い分けよう

僕の場合は共通箇所をモックと同じように再現してから、Dwのテンプレートで一気に量産体制に入ります。ここで初めてデザインビューを使ってます。さすがに細かいdivが固まっているような場所はデザインビューでは選択しにくいので、コードビューがメインになります。
なんでもコードビュー、なんでもデザインビューとせずに、使い分けることで効率があげられるものだと考えています。

プレーンテキストをペーストしたときの基本原則

これが一番覚えていただきたいところです!例えば、下の場合はペーストするとこのようになります。

Excelの表を表としてペーストする場合

Excelでサイトの原稿がまるっとやってくることはありませんが、表だけがExcelでやってくるということはあります。

Excelの原稿

Excel原稿の場合、上下左右の配置が指定されていたり、セルが合成されてたりという空のセルが入っています。これをデザインビューにペーストしてみます。

デザインビューでペーストしたとき

Excelから通常ペーストをすると、セルの幅や背景色、配置を合成など、再現性を保つために、セルの中に色々な情報がHTMLで書かれています。

これだと整形しにくいので、ペーストするときに[Shift+Ctrl+V](Macの場合は[Shift+コマンド+V])でペーストスペシャルから[構造(段落、リスト、テーブルんなど)付きテキスト]を選択して、[OK]を押します。

これでだいぶすっきりしました。しかし、まだまだ残っているテーブルやセルスタイルをしている不要なものを削除していきます。

ペーストしたときに付いた余計なタグを削除する

1.幅や高さを削除

エクセルをそのまま貼り付けると、widthやheightやらが入ってしまいますが、これはデザインビューから一気に消すことができます。

これでtd要素についているwidth要素は消すことができますが、col要素のwidth属性は消えません。こっちはコードビューでこっそりと消しておきます。

2.表のthにしたいところはヘッダーにチェック

Excelでペーストした表ではthなるものがありませんので、自分でthにします。セルを選択してプロパティパネルの[ヘッダー]にチェックをすると、thに置き換えます。

Wordファイルをペーストする場合

Wordは見出しやリストをそのままペーストします。僕はWordで原稿をいただくことはめったにありませんが、Wordの場合は文章のアウトラインをしっかりしておけば、そのままペーストすることができます。

ペーストするWord原稿

ペースト後のデザインビュー

タグの整形をする

ペーストし終わってからもある程度の整形はデザインビューからやることができます。入り組んだメニューがない場合には、コードビューで整形するよりもこちらのほうが便利です。

要素の選択はプロパティパネルの上についてるタグセレクターから

デザインビューでも要素を選択するときは、ドラッグで範囲指定をすることもできますが、プロパティパネル上にあるタグセレクターから選択することができます。

<div></div>の間をコードビューでもデザインビューでもp要素の開始タグから終了タグまでを選択した状態にします。これと後ほど紹介するクイックタグ挿入でid、class名を入れていくことが多いです。

単一のclassをあてるときはプロパティパネルの[スタイル]を選択

単一のスタイルを当てるときにはスタイルを選択します。クイックタグ挿入に比べると使用頻度が低いですが、テーブルのセル一つ一つにクラスを振らないといけないような場面には活躍しています。

複数のclassやCSSで定義していないclassはクイックタグで挿入

上に書いてあるようにステータスバーから要素を選択して、[Ctrl+T]でクイックタグ編集ができるようになっています。わざわざコードビューで編集箇所を探すより早くて便利です。これでCSSのid名やclass名を振っていきます。もちろん他の属性を手入力で入れていくことも可能です。

プロパティパネルの[スタイル]はCSSで定義してないクラスや、複数のクラスは当てることができないので、こちらからささっと挿入してます。

divはクイックタグ入力で挿入

デザインビューから文字を選択してクイックタグ入力をすると、折り返しタグを入力ができるようになっています。選択して、[Ctrl+T]で<div>と入力すると、選択した範囲を<div>で囲ってくれます。終了タグを気にしなくてもいいので大変便利です。

altはプロパティパネル

画像のaltは画像を選択し、プロパティパネルの中にある[代替]に入力します。空にするときはプルダウンから選べます。

画像の挿入はファイルパネルからドラッグアンドドロップ

画像を挿入するときはファイルパネルやアセットパネルからドラッグアンドドロップでHTMLに<img>を挿入します。

オススメなのがアセットパネルのほうです。僕も普段はファイルパネルから挿入していきますが、アセットパネルでは特定の画像を「お気に入り」として登録しておくことができます。何度も頻繁に使う画像を挿入するときには便利です。
動画では「pic01.jpg」をお気に入りに登録して、お気に入りから画像を流し込んでいる様子です。

アタリ画像からの変更はファイルパネルへ向けてドラッグアンドドロップ

「写真素材がまだ来ない!でも画像がないとレイアウトが成立しない><」てときにはアタリ画像をはめておきます。dummyimage.comがおすすめです。話を戻して、こうやってアタリで挿入した画像はソースの入力欄右の的をドラッグアンドドロップしてファイルパネル内の画像を選択して入れ替えます。

src属性やhref属性のファイル指定の相対パス、ルートパスの指定はサイト定義から設定

一通りドラッグアンドドロップ関係の操作を紹介してみましたが、通常のサイト定義だと「../img/filename.png」というような現在のファイルからの相対リンクとなっています。

これを「/img/filename.png」に変更するには、現在の[サイト設定]を開き[詳細設定]→[ローカル情報]の[相対リンク]のラジオボタンを[サイトルート]のほうにチェックを入れます。PHPやCMSを使うときにはこっちの設定を使ってます。

この設定をしてから再度画像やリンクを挿入すると、「/」から始まる形でsrc属性やhref属性を埋めます。さすがに設定前のものは相対パス形式になっているのでお気を付けください。

単純なリストはとりあえずpでマークアップしてリストボタン

リストにしたいところをpでマークしておいて、あとからプロパティパネルのリストのボタンを押してリストに変換します。<ul><li></li><li></li><li></li></ul>といった形でulとliをセットで囲みます。

入れ子のリストは選択してTabキー

リストの中にリストを入れたいときには、入れ子にしたい箇所を選択して[Tab]キーで階層が一つ下がったリストを作ります。

表のセル選択はCtrl+クリック

表のセルを選択してスタイルを当てるときには、Ctrlを押しながらセルをマウスオーバーすると赤枠でセルが囲まれます。これをクリックするとセルを選択することができます。

また、さらにCtrl+クリックをすると、セルを複数選択することができます。カレンダーの連休の祝祭日のところだけにスタイルを当てたいときに便利です。

デザインビューを使うときに覚えておきたいショートカット一覧(Win)

親要素を選択する Ctrl+[
見出しh1〜h6 Ctrl+1〜Ctrl+6
段落 Ctrl+Shift+p
行の追加 Ctrl+M
行の削除 Ctrl+Shift+M
クイックタグ入力 Ctrl+T

デザインビューで使うショートカットはざっくりと6つです。少ないです。ほとんどはクイックタグ入力で済んでしまうので、多くを覚えなくても済みます。

まとめ:デザインビューとのつきあい方

デザインビューでの作業は、「なにかアクションをしたときに、コードにどのように反映されているのか」を知っておくと、怖いことはありません。デザインビューで大まかに原稿を流して、細かいところはコードビューでやる。今のところ、これが僕の効率化の技の一つです。

これを機会に自分の業務フローに合わせてデザインビューで作業するところ、コードビューで作業するところを見直して効率化を図ってみてはいかがでしょうか。

スポンサーサイト

コメント

  • sodaさん
    無駄に長くDW使ってますが知らないことばかりでした〜。
    デザインビューは、ほとんど確認のためにしか使っていませんでしたがこんなに便利だとは・・。特にtableの<th>に変更するやり方は知って嬉しい知識でした。<td>を<th>に手打ちで変えて、閉じタグの方を変更し忘れるってことがしょっちゅうあるので・・。
    分割画面、左右で分割してるんですね。私はずっと上下でやってますが、左右も試してみようかな。
    勉強になりました!ありがとうございました。
    2012/01/23 10:43 PM
  • rhinoさん
    最近、コーダーとして仕事を始めたので、
    非常に役に立つ、実践向きの内容で勉強になりました!
    特に、表組み周りのことは目から鱗の連続でした。
    2012/01/23 11:14 PM
  • しばっちさん
    >sodaさん
    テーブルまわりはよくお世話になってます^^
    僕も最初tdからthに変更するときにを閉じタグを忘れて、料金表が多いサイトだったので、よく上司に怒られたりしてました(笑)。

    画面分割はそうですね、左右で分割してます。
    CSSを手で書くことがほとんどで、color:#F00みたいに長くてもウィンドウを折り返すことがあまりないので、上下で分割するよりも左右分割のほうがスペースを余すことなく使えるかと思います。

    >rhinoさん
    Dreamweaverのテーブルまわりは個人的に最強だと思ってます!
    記事には書いてませんが、セルの合成・分割もプロパティパネルからできるので、ミスる確率がぐんと下げられると考えてます。
    最後まで読んでいただきありがとうございます!
    2012/01/24 10:23 AM
  • コニさん
    今まではデザインビューをほとんど使っていませんでしたが、こちらの記事を拝見して今日からデザインビューをもっと活用してみようと思います!有益な記事をありがとうございました☆
    2012/01/29 6:31 PM
  • しばっちさん
    >コニさん

    デザインビューは自分のやった操作がコードにどう反映されるかがわかってくると、断然に使いやすくなると思います。分割ビューで使っていくとよりわかりやすいかと思います^^
    2012/01/31 7:19 AM
  • ブースカ★さん
    最近スピードアップのためDWを使い始めて、本はもっているものの、読んでいても手打ちよりどこが便利なんじゃー?
    と思っていましたが、こちらの記事を見て「使えるかも!」
    と希望が持てました。勉強になります。
    ありがとうございました!
    2014/05/23 8:20 PM

このエントリーにコメントする

お名前
必須
メールアドレス
入力されても公開いたしません。
URL
 
コメント
  コメントを送信