スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
『WEB標準の日』 レポート13
大変遅くなりました。WEB標準の日の最後のレポートになります。
最後のセッションはパネルディスカッションで、『WEB標準はビジネスをどう変えるか?』についてでした。

結論はそれ自体では変わらない! でした。

・WEB標準はあくまでWEBの実装技術の一つに過ぎないから
・ブラウザ間でのCSSの解釈の違いがある
・オーサリングツールもCSSを完全にカバーしきれていない
・制作者サイドでのスキルの差


こういった問題点がまだまだ存在します。ですからWEB標準によってビジネスが変わるか? といったらNO! というのが結論でした。

『WEB標準の日』公式サイト内にリンクされている個人ブログ内で、パネルディスカッションに参加された住太陽さんと森田雄さんの『WEB標準』に関する個人的意見が公開されています。ご覧ください。

『WEB標準の日』の全てのセッションと音声データが『WEB標準の日』公式サイトからダウンロードが出来るようになりました。ご利用下さい。

これにて『WEB標準の日』のレポート、終了になります。
スポンサーサイト
『WEB標準の日』 レポート12
神森さんのセッションの続きです。

●Contributeについて●
□問題点□
詳細なソースコントロールができない
DIVタグの挿入ができない
デフォルトのままでは、自由に編集ができてしまうので危険

★解決策★
DreamWeaverのテンプレートを使い、編集可能領域を設定する。簡単なテキストの差し替えなどの作業を行うだけにする。
Contributeを使うことで、スキルの差を多少埋めることができる。

神森さんは『Web Designing8月号』の誌面で、新しい連載を開始されました。DreamWeaverではじめるCSS+XHTML講座です。要チェックです!

神森さんのプレゼン資料(PDF 2.2MB)
音声ファイル(64分 22.1MB)

これにてセッションEのレポート終了です。
『WEB標準の日』 レポート11
HTMLのマークアップの箇所で一つ書き忘れていたものがありました。<p>タグをリストに変換する方法です。

1.リストに変換したい箇所を選択します。

 <p>業務内容</p>
 <p>営業部門</p>
 <p>製造部門</p>

2.選択したらプロパティパネルの「ページプロパティ」ボタンの上の「リスト」ボタンをクリックします。

3.選択した箇所がリストタグに変換されます。

<ul>
 <li>業務内容</li>
 <li>営業部門</li>
 <li>製造部門</li>
</ul>

4.この方法はご存知の方は多いかと思います。ここからは、リストをさらに入れ子にしたい場合、便利な「技」です。

5.入れ子にしたい箇所を選択します。わかりやすい様に「青色」にしてあります。

<ul>
 <li>業務内容</li>
 <li>営業部門</li>
 <li>製造部門</li>

</ul>

6.選択した状態で、先ほどと同じ「リスト」ボタンを押すと、リストが解除されてしまいます。入れ子の状態にはなりません。入れ子にしたい場合は、リストボタンの三つ右にある「テキストインデント」ボタンを押します。するとリストが入れ子状態になります。

7.

<ul>
 <li>業務内容
  <ul>
   <li>営業部門</li>
   <li>製造部門</li>
  </ul>
 </li>
</ul>

使える便利な技です。
『WEB標準の日』 レポート10
昨日の神森さんのセッションの続きです。

●CSSの自動補完機能●
DreamWeaver8からはCSSの自動補完機能が充実しています。
CSSの設定を行うのは、HTMLのマークアップが終了して、divタグで全体のレイアウトを整えた後で行う。
そしてCSSの設定をしたいところ(div ●●のh1)
にカーソルを立て、CSSパネルの新規CSSルールをクリックします。すると自動的に「詳細設定」にチェックが入り、#●● h1などと記述されます。
子孫セレクタなどの設定の際、非常に便利です。

●スニペットの使用●
コードスニペットの機能を使うと、後に再利用するときのために作成したコンテンツを保存することができます。
スニペットにはHTMLだけでなく、CSS、JavaScript、サーバー側のスクリプトなど色々保存ができる。

簡単なスニペットを作成してみましょう。
1.HTMLタグを打ちます。
<div id="footer">
<address>Copyright 2006 All rights reserved.</address>
</div>

2.このコードを選択した状態で、ファイルパネル→スニペットを選択。Windowsなら右クリック、もしくは右上のプルダウンから新規スニペットを選択します。

3.名前は分かりやすい名前「footer:normal」をつけましょう。説明の箇所も「フッター部分コピーライトのみ」などとつけると良いでしょう。

4.スニペットの種類は「ブロックの挿入」にします。「ブロックの挿入」は選択したコードそのものが後に挿入されることになります。
「選択範囲を囲む」は、現在の選択範囲の前・後に挿入するコードを記述します。
OKボタンを押します。

5.スニペットパネル内に今作成したものが出来ていると思います。フォルダなどを作って、わかりやすく保存しましょう。

6.新規ファイルを開き、スニペットパネルから今作成したスニペットを「デザインビュー」のステージ上に、ドラッグ&ドロップします。

7.自動的にfooterが作成されます。

★解説★
スニペットは覚えるとかなり使える機能だと思います。例えばCSSのブラウザの初期化のコードなどを一度作成して、スニペットに登録しておけば、使いまわしがききます。
個人でサイトを作成していく場合には別段問題はありませんが、複数人でサイトを作成する場合には注意が必要です。
スニペットは各自のマシンに登録されています。これを共有ファイルとして使用する場合には、ちょっと面倒な作業があります。
WindowsXPの場合はC:\Document and Setting→[user]→Application Data→Macromedia →DreamWeaver8→Configuration→Snippets内に保存されているので、そこからデータをコピーして、他の作成者のマシンの同じ箇所に保存します。
これで他のマシンでも作成したスニペットが使えます。

続きはまた明日。
『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でのページレイアウトに挑戦してみようと思っています。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。