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

    jQueryを利用した演出がかっこいいWEBサイト50個

    多くのプラグインが開発され、様々に活用されているjQueryですが、サ…

  2. WEB制作関連

    横スクロールが印象的な27個のWEBサイト

    横スクロールでコンテンツが展開しているWEBサイトのまとめです。…

  3. WEB制作関連

    商品の魅せ方がお洒落なECサイト25個

    商品の魅せ方が参考になりそうなECサイトのまとめです。 (さら…

  4. WEB制作関連

    インストールされたフォントを一覧できる「wordmark.it」

    自分のPCにインストールされているフォントをブラウザ上で一覧できるWE…

  5. WEBディレクターズマニュアル

    WEBディレクターの為のEXCEL術(1)作業スケジュール

    個人的な感覚値ですが、優秀なWEBディレクターさんは総じてMS Exc…

  6. WEB制作関連

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

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

  1. LifeHack・仕事術

    あなたは何派?無料オンラインストレージサービス18選
  2. 話題・トレンド

    クリエイティブな交通広告を集めてみた。
  3. 話題・トレンド

    Googleファッションショーがかわいいぞ。
  4. iPhone

    ホームボタンを使わずにiPhoneを使用する方法
  5. 話題・トレンド

    Googleで振り返るロンドンオリンピック
PAGE TOP
Top