FC2ブログ
『WEB標準の日』 レポート9
セッションの最後は株式会社アンカーテクノロジーの神森勉さんによる『DreamWeaver8/Contribute3を使ったWEB標準実装ガイド』です。

オーサリングツールの問題点
・HTMLが本来の働き(仕様)を失い「ホームページ制作言語」のようになってしまった
・CSSの表示が正確ではない(レンダリングが不十分)

オーサリングツールの利点
・大量ページを効率的に作成出来る
・ブラウザでのプレビューの前に、ある程度ビジュアルを確認出来る

オーサリングツールの普及に伴いHTMLは本来の使われ方ではなく、ビジュアル重視の使われ方をするようになってきました。そこで今一度、HTMLを本来の仕様に従って使いましょう! という考えになったのです。これがいわゆる「WEB標準」の考え方です。

さて、いよいよすぐにでもWEB制作で使える小技集に入りたいと思います。

●テキストエディタのテキストをDreamWeaverで使用する方法●
1.テキストエディタでテキストを作成します。
2.その際テキストとテキストの間は1行空けるようにします。
3.テキストを打ち終わったら、テキストを選択し、コピーします。
4.DreamWeaverを起動し、新規ファイルの「デザインビュー」にペーストします。
5.コードビューを見てみると、テキストが<p></p>タグで囲まれています。
6.見出しなど必要に応じてマークアップをしていきます。

★解説★
ここで大事なのは、2のテキストとテキストの間は1行空けるという箇所です。これをきちんと行うと<p></p>タグで囲まれます。しかし1行空けずにペーストしてしまうと、最初と最後は<p>タグで囲まれますが、途中は全て<br />タグになってしまいます。
これではその後のマークアップの際に「修正」という手間が掛かってしまいます。それは避けましょう!

★マークアップの仕方★
見出しなどをマークアップしていく時に覚えておくと便利な技です。
通常マークアップする箇所にカーソルを立て、画面下のプロパティパネルのフォーマットからフォーマットを選択して行うと思いますが、もっと簡単な方法です。
マークアップする箇所にカーソルを立てます。そして「Ctrl」+1を押します。すると見出し1とマークアップされます。こっちの方が便利です。ショートカットを覚えましょう!

ショートカット一覧(Windows版 DreamWeaver8の場合)
h1→Ctrl+1
h2→Ctrl+2
h3→Ctrl+3
h4→Ctrl+4
h5→Ctrl+5
h6→Ctrl+6
p →Ctrl+Shift+p
キャンセル→Ctrl+0


●WordのテキストをDreamWeaverで使用する方法1●
工程はテキストエディタの時と同じです。
1.テキストは1行空きで打っていきます。
2.テキストを打ち終わったら、選択しコピーします。
3.DreamWeaverの「デザインビュー」にペーストします。
4.テキストが<p></p>タグで囲まれます。
5.必要に応じてマークアップしてきます。

●WordのテキストをDreamWeaverで使用する方法2●
DreamWeaver側でマークアップをしてもいいのですが、Wordには便利な機能があります。Word側でマークアップしてDreamWeaverにコピーする方法です。
1.テキストを打ちます。
2.Word側で必要に応じてマークアップを行います。
3.テキストを選択して、コピーします。
4.DreamWeaverの「デザインビュー」にペーストします。
5.するとWord上でマークアップした通りに、DreamWeaver上でもコードがマークアップされています。

●FireWorksのテキストをDreamWeaverで使用する方法●
次にFireWorks上でページを構成(レイアウト)している方に便利な方法です。
1.FireWorksのテキストを選択します。
2.テキストとテキストは1行空けるようにします。
3.テキストを選択し、コピーします。
4.DreamWeaverの「デザインビュー」にペーストします。
5.するとテキストが<p></p>で囲まれます。
6.必要に応じてマークアップしていきます。

★解説★
背景、テキスト、画像などをfireWorks上で配置してページレイアウトを行っている方にはかなり使えるネタだと思います。
FireWorksの利点は、そのソフト一つでレイアウト、ボタンの作成、スライスなどが出来てしまうことです。自分も今後FireWorksでのページレイアウトに挑戦してみようと思っています。
スポンサーサイト



コメント
この記事へのコメント
「HowTo」らしきものをやったはずの、神森氏のレポートが、何故かレポートの分量が一番少ないなぁ~。
そこを逐一書き起こすのは、難しいのかな?やっぱり。
2006/08/02(水) 07:41:37 | URL | BOSS #-[ 編集]
昨日How Toの前までしかレポートをまとめきれませんでした。途中で力尽きてしまい…
今日の夜か明日中にはHow Toの箇所もまとめてアップいたします。「おぉ~、使える」と思ったネタもかなりありましたので…
もうしばらくお待ちください。
2006/08/02(水) 10:12:24 | URL | あつのすけ #-[ 編集]
コメントを投稿する
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
トラックバック
この記事のトラックバックURL
この記事へのトラックバック