WEB制作関連

Word×Dreamweaverで高速コーディングをするワザ

WEBサイトをコーディングする際にMicrosoftのワードで原稿をもらうのが嫌な方も多いのではないでしょうか。

多分、そのままコピー&ペーストをすると意図しないスタイルが入ってしまうからだと思いますが、Wordの機能を利用することで逆にコーディングを高速化する方法をご紹介します。

まず、Wordでスタイルを設定します。

Wordでは以下のように見出しなどのスタイルを選択することができます。

word_01.jpg

原稿を作る際に文字サイズや太字などで装飾せず、このスタイルを利用して大見出し、中見出し・・と設定しながら原稿をつくるようにします。

Dreamweaverの環境設定でペーストに関する設定をします。

 環境設定>コピー/ペーストで 構造付きテキスト を選択します。

これを選択することで<H1><H2><p>といったシンプルなタグは残して、余計な書式を省いてペーストできるようになります。

word_02.jpg

Wordで作成した原稿を流し込みます。

word_03.jpg

このようにスタイルを設定した内容をコピー&ペーストすると以下のようになります。

word_04.jpg

あとはDreamweaver側でclassなどを設定していけば効率的にHTMLを作成することができます。

H1、H2と言われてもよくわからない人でも大見出し、中見出しをつけて情報を整理することはできると思いますので、入稿の形式などをルール化することでより効率的に制作を進められるようになりますね。

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

関連記事

  1. WEB制作関連

    WEB制作者なら必ず入れておきたいFirefoxアドオン50個

    WEB制作に携わる人には重宝するものばかりを集めたFirefoxアドオ…

  2. WEB制作関連

    必ず入れておきたいポピュラーなフリーフォント30選

    どこかで見たことのあるあのフォントを含め、何かと重宝しそうなフリーフォ…

  3. WEB制作関連

    便利なアイコン配布サイト10+1

    アイコンを作成の際に利用する便利なサイトをまとめましたので紹介します。…

  4. WEB制作関連

    今どきなUIデザインサンプル35個

    アプリやWebサービスのインターフェイスに役立ちそうなUIサンプルです…

  5. WEB制作関連

    WEBサイト心理学|アフォーダンス理論

    アフォーダンスとは、もともと知覚用語だったものをドナルド・ノーマンがイ…

  6. WEB制作関連

    WEB制作者なら必ず知っておきたいWEBツール21選

    便利なジェネレータやチェックツールなどWEBサイトを制作する際に重宝す…

  1. LifeHack・仕事術

    仕事を上手に頼む人はやっている。頼み方の6つのコツ
  2. Design Items

    ガジェット好きにはたまらないキッチングッズ25個
  3. Design Items

    かなりカッコいいコンセプトカーが大集合!
  4. WEBマーケティング

    マーケティング心理学|バーナム効果
  5. 話題・トレンド

    schoo(スクー)で授業配信します!
PAGE TOP
Top