髭仙人の漫ろ歩き
Dreamweaver
............................ unworldly man go for a ramble in the internet world ...
ワークベースの概要 (ガイドツアー)
 Dreamweaver 4 の視覚的なインターフェイス


 Dreamweaver 4 の視覚的なインターフェイスを使用すれば、簡単にWebサイトを作成できます。
 Dreamweaverのウインドウ、パネル、豊富なツールを駆使して、オリジナルのWebページをデザインすることが可能です。

・ドキュメントウインドウ
 Dreamweaverの主要なワークスペースで、ファイルの作成や編集を行う。

・オブジェクトパネル

 ページに画像、特殊文字、フォームエレメント、フレーム、FlashムービーなどのHTMLエレメントやアセットを追加できます。

・プロパティ
 オブジェクトの属性を設定、編集。

・フローチングパネル
 ページに追加したエレメントの微調整や、カスケーディングスタイルシート(CSS)、JavaScriptビヘイビア、テンプレートなどのアイテムの操作に使用。

……………………………………………………………………………………………………………………

 Dreamweaverは柔軟性に優れたツール


 Dreamweaverは柔軟性に優れたツールで、作業環境を自在に設定でき、目的に応じて、デザインビュー/コードビューの表示を切り替えたり、画面を分割してデザインとコードの両方のビューを表示することも可能です。

 Dreamweaverはワークスペースを簡単に制御できます。ドキュメントウインドウのランチャーバーまたはキーボードショートカットを使って、パネルやインスペクタの表示/非表示を切り替えることもできます。

 パネルの配置や構成は、必要に応じて変更することもできます。

 
サイトのプランニング (ガイドツアー)  
 サイトウインドウの利用


 プランニングでは、対象となるWebユーザーの想定、ブラウザやプラグインに関する問題などの技術的な要件の決定、アセットの要件、サイトの構成など、サイトの最終的な目標を決定するための情報収集を行います。

1.ローカルサイトの定義
 ローカルサイトとは、サイトに使用するファイルを格納するフォルダ
 ・空のフォルダをローカルサイトとして定義し、ファイルをそのフォルダに移動
 ・既存のフォルダをローカルサイトとして定義

2.ローカルサイトの構造を設定
 サイトウインドウの右側の領域で、ファイルやフォルダを追加、削除、移動、および名前の変更などの操作を行い、サイト構造を設定。

 ファイルを移動する際は、サイトウインドウを使用するとドキュメント内のリンクが壊れるのを防ぐことができます。

 サイトウインドウでファイルおよびフォルダを変更すると、ローカルドライブ上のオリジナルのサイトフォルダは自動的に更新されます。

……………………………………………………………………………………………………………………

 サイトウインドウのサイトマップを表示


 Dreamweaverのサイトウインドウでは、サイトの構造を視覚的に確認することができます。


 
Webページのデザイン (ガイドツアー)  
 ページの外観のデザイン


 新機能のレイアウトビューでは、ページデザインやデザインの変更が簡単に行えます。
 また、HTMLテーブルの描画ツールを使用してページのレイアウトを指定し、コンテンツを追加します。

手順
 ・レイアウトテーブルを描画






 ・レイアウトセルを描画





 ・イメージの挿入

……………………………………………………………………………………………………………………

 レイアウトビュー


 コンテンツエリアを移動またはサイズ調整して、ページレイアウトを簡単に変更することができます。

 

 

 

……………………………………………………………………………………………………………………

 ページのデザイン(フレーム)


 異なるタイプのWebページを作成するには、「オブジェクト」パネルを使用します。
 例えば、フォームやフレームを使用したページなどをデザインできます。

手順
 ・オブジェクトパネルのフレームを選択







 ・フレームパネルから目的のフレーム挿入タイプを選択



 

……………………………………………………………………………………………………………………

 ページのデザイン(テーブル)


 オブジェクトパネルは、テーブルやれいやーを用いたページをデザインするのに大変便利です。


……………………………………………………………………………………………………………………

 HTMLコードを使用して


 Dreamweaverのコードエディタの便利な機能として、下記のようなもの我あります。

・コードエディタでは、ワードラップや行番号の表示などを設定できるので、作業環境を思いどおりカスタマイズできます。さらに、シンタックスをカラー別に表示できるので、コードのチェックに役立ちます。

・ほかのアプリケーションで作成したHTMLドキュメントを読み込んで編集することもできます。DreamweaverのRounddrip HTML機能では、コードを再フォーマットすることなく、HTMLドキュメントを読み込みます。

・Dreamweaverには、ドキュメントウインドウでの作業時にオブジェクト単位でHTMLコードにアクセスできるクイックタグ編集機能もあります。

・コードビューで作業中も、デザインビューでの場合と同じように、ページがブラウザでどのように表示されるかをDreamweaverから直接プレビューできます。

 

 
コンテンツの追加 (ガイドツアー)  
 「アセット」パネル


 「アセット」パネルには、イメージ、Flash,またはその他のムービー、ドキュメント内で定義したHTMLのカラー、外部リンクなど、サイトに使用されているアセットが表示されます。
 ここから必要なアセットを選択し、ドキュメントに自在に追加できます。

……………………………………………………………………………………………………………………

 Flashオブジェクトの追加


 DreamweaverでFlashテキストやFlashボタンを直接作成できます。
 Flashテンプレートを使用すれば、FlashテキストやFlashボタンをページに簡単に追加できます。


 

……………………………………………………………………………………………………………………

 テキストの操作


 Dreamweaverでテキストを追加するには、ドキュメントウインドウに直哲入力する、ほかのドキュメントから読み込む、ほかのドキュメントからコピー&ペーストするなどのさまざまな方法があります。

 Dreamweaverドキュメントでは、さまざまな方法でテキストをフォーマットできます。
 たとえば、「プロパティ」インスペクタを使用して、フォント、行揃え、カラーなどを設定することができます。

 独自のスタイルを作成し、「HTMLスタイル」パネルに登録すれば、クリックするだけでドキュメントに適用できます。

 

……………………………………………………………………………………………………………………

 一貫性のあるスタイルの適用


 サイト内のドキュメントのスタイルに一貫性を持たせるには、カスケーディングスタイルシート(CSS)をドキュメントにリンクさせます。
 CSSを利用すると、HTMLタグの再定義や背景色の追加、テーブルのフォント属性の設定などができます。

 Dreamweaverテンプレートを使用する方法もあります。まず1ページをデザインし、ページ内で変更可能な領域を指定します。次に、そのテンプレートのデザインを使用して新規ページを作成します。ただし、更新できるのは変更可能な領域に対する編集のみである。

 

 

 
インタラクティブ機能の追加 (ガイドツアー)  
 リンクの作成


 Dreamweaverではさまざまな種類のリンクを作成できます。リンクには、サイト内へのリンクと外部サイトへのリンクがあります。

・「プロパティ」インスペクタを使用してリンク先のドキュメントを選択できます。

・「サイト」ウインドウを使用してリンクを作成することもできます。

 

 

・「オブジェクト」パネルを使用して、アンカーリンクまたは電子メール(mailto)リンクの作成もできます。

 

 

……………………………………………………………………………………………………………………

 ビヘイビアの追加


 Dreamweaverの「ビヘイビア」パネルを使用して、インタラクティブ機能を追加するJavaScriptアクションの作成がすばやく行えます。

 「ビヘイビア」パネルでは、ロールオーバーイメージなどのインタラクティブエレメントや、ブラウザやプラグインの検出機能などを追加するJavaScriptアクションを作成できます。

 

 

 ほかにも、ナビゲーションバー、ジャンプメニュー、タイムライン、Flashボタンなどのインタラクティブエレメントが使用できます。

 

 

 
サイトのパブリシュ (ガイドツアー)  
 サイトのテスト


 Dreamweaverには、パブリッシュ前にサイトをテストする方法がいくつかあります。

 作成中のページをブラウザでプレビューすることにより、デザインの確認や、ロールオーバーイメージ、Flashオブジェクト、リンクなどのインタラクティブ機能をテストできます。

 また、コマンドを使用してサイトのリンク変更やリンクチェックを行ったり、サイトレポートを作成してその他の問題を見つけることもできます。

 

 

 

 

……………………………………………………………………………………………………………………

 ファイルの転送


 DreamweaverのFTPコマンドを使用して、ファイルをリモートサーバーへ転送できます。

 Dreamweaverはファイルをリモートサーバーに転送するときに、ローカルサイトフォルダと同じフォルダ構成でコピーします。

 

 

 

 

 

 

……………………………………………………………………………………………………………………

 サイトのメンテナンス


 サイトを共同で作成する場合、Dreamweaverの「チェックイン」、「チェックアウト」オプションを使用すると、1つのドキュメントに同時に複数のユーザーがアクセスできないように制限できます。

 ローカル/サーバー間でのファイルのメンテナンスも、ローカルファイルとリモートファイルを同期できるので簡単です。

 

 

 

 

 

 

……………………………………………………………………………………………………………………

 デザインノート


 デザインノートは、共同作業中のメンバー間のコミュニケーションや、これから行う作業のメモなどに使用します。

 デザインノートは、変更点、決定事項、プロジェクトのステータスなどのトラッキングに使用できるので、Web開発のすべての工程において非常に役立ちます。

 

 


Design by unworldly man Teizo AMMA
Email amma@beach.ocn.ne.jp
URL http://www.t-amma.com/