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ディレクターなら参考にしたい手書きの画面設計書

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

  2. WEB制作関連

    紙のテクスチャが素敵なWEBデザイン35個

    紙のテクスチャを用いたWEBデザインのまとめです。…

  3. WEB制作関連

    「jQuery逆引きマニュアル 」の読者モニターをやってみた vol.01

    「jQuery逆引きマニュアル Webデザインの現場で役立つ基本と実践…

  4. WEB制作関連

    MT4.2でブログ記事に関連記事一覧を表示

    サイト内回遊を高めるために有効な関連記事表示。これを自分のブログに…

  5. WEB制作関連

    カッコいいグランジ風のフォント45個まとめ

    グランジ系フォントのまとめです。個人利用向け中心ですが好みのものが多か…

  6. WEB制作関連

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

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

  1. 話題・トレンド

    思わず笑みがこぼれてしまう写真たち
  2. 話題・トレンド

    即興で曲がつくれちゃうツール「Orpheus」
  3. WEBディレクターズマニュアル

    WEBディレクターの為のEXCEL術(3)作業が捗る小技10選
  4. WEB制作関連

    デザイナーなら必ずダウンロードしたいグラフィティなフォント25選
  5. WEB制作関連

    色とWEBデザイン -あお編-
PAGE TOP
Top