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

    徹底比較。クロスブラウザのテストツール15個

    HTML5や新しいデバイスの登場で今後も頭を悩まされそうなクロスブラウ…

  2. WEB制作関連

    無料で使えるワイヤーフレーム作成ツールまとめ

    ワイヤーフレームやモックアップを作成する際に利用できるWEBツールのま…

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

    WEBディレクターなら参考にしたい手書きの画面設計書

    様々なアプリケーションを試し、試行錯誤しながらWEBサイトの画面設計を…

  4. WEB制作関連

    使いづらい(!?)けどフリーで高品質なアイコン素材60個

    「汎用性がない。」「何に使うの?」というものもありますが、ピッタリはま…

  5. WEB制作関連

    デザイナーなら必ず知っておきたい国内素材サイト22選

    デザインにはかかせない写真やイラスト、動画などの素材サイトのまとめです…

  6. WEB制作関連

    ダウンロードしておきたい便利なシルエット素材85セット

    人のいろいろな動きから動物、植物や街並みまでモチーフや世界観作りなどに…

  1. LifeHack・仕事術

    シンプルで高機能なタスク管理ツール「todoist」
  2. WEB制作関連

    ここまでできる!HTML5できたゲームまとめ
  3. Design Items

    部屋の中に部屋を作ってしまったアート
  4. 話題・トレンド

    Google検索の新機能「Google Instant」
  5. LifeHack・仕事術

    情報の波にのまれずに整理する方法
PAGE TOP
Top