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

    MovableType5インストールしました。チカッパ編

    前回MT4からのアップデートを試みたが見事に失敗したので再チャレンジ。…

  2. WEB制作関連

    写真を効果的に魅せる6つのjQueryギャラリー

    どんな情報を見せるにしても欠かせない画像を効果的に見せられるjQuer…

  3. WEB制作関連

    レトロなデザインのWEBサイトまとめ

    レトロな雰囲気を持ったデザインのWEBサイトのまとめです。 (…

  4. WEB制作関連

    ユニークなレイアウトのWEBサイト40個

    自由なレイアウトで独特の世界観を表現しているWEBサイトのまとめを紹介…

  5. WEB制作関連

    404エラーページ作成のススメ

    通常サイトにアクセスしていてページが削除されていたり、タイプミスなどで…

  6. WEB制作関連

    jQuery+CSSで実現する効果的な演出20選

    CSSをで制御して様々な演出をしているjQueryプラグインのまとめで…

  1. 話題・トレンド

    あなたは分かる?LEGOで表現した超有名絵画
  2. 話題・トレンド

    iTuneからの重大発表、その後。
  3. LifeHack・仕事術

    忙しい相手にもすぐに返答してもらえるメール術
  4. 話題・トレンド

    CGのようなストップモーションがカッコいい
  5. 話題・トレンド

    2011年の振り返りと2012年の展望を考えてみた。
PAGE TOP
Top