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制作関連

    ぜひ参考にしたいオシャレで使いやすい22個の管理画面

    WEBアプリなどの管理画面向けのテンプレートのまとめです。&n…

  2. WEB制作関連

    色とWEBデザイン -茶色編-

    色別WEBデザインのまとめです。今回のテーマは「茶色」です。 …

  3. WEB制作関連

    期待感あふれるクリエイティブなComingSoonページ25個

    WEBサイトの公開やサービスの開始などを告知するcoming soon…

  4. WEB制作関連

    フリーで使える布地のテスクチャー50個まとめ

    柄物や布の質感のあるものなど布地のテクスチャのまとめです。 (…

  5. WEB制作関連

    美しいスライドショーが印象的な40個のWEBサイト

    WEBサイトを作る人なら一度は使ったことのあると思うスライドショーです…

  6. WEB制作関連

    色とWEBデザイン -あか編-

    色別WEBデザインのまとめです。今回のテーマは「赤」です。&n…

  1. Design Items

    スタイリッシュな自転車用エアバッグ
  2. Design Items

    カッコいいコンセプトカー 「hussar dakar」
  3. WEB制作関連

    HTML5でできることがひと目で分かるWEBサイトまとめ
  4. 話題・トレンド

    Web Designing 2012年8月号に執筆させてもらいました。
  5. Design Items

    部屋の中に部屋を作ってしまったアート
PAGE TOP
Top