1. 背景分析
ビジュアル環境で複雑な Web ページを作成したいプロの Web ページ制作者にとって、Dreamweaver は Web ページ編集ツールとして徐々に登場し、プロが Web ページを作成するための最良の選択肢となっています。 Macromedia社の調査によると、Dreamweaverは現在70万人以上のユーザーを抱え、Web編集ツールの中でシェア1位にランクされており、「Adobe GoLive」や「NetObjects Fusion」などの競合他社を大きく引き離している。したがって、Dreamweaver のユーザー数は今後も増加すると一般に予想されます。
この圧倒的な普及率の下、Dreamweaver の組み込み機能はますます豊富、充実、充実していると考えられます。今回の紹介では、Web ページ作成者にデザインの高速化、コーディングの容易化、およびより統合された機能を提供する新機能がいくつかあります。さっそく、Dreamweaver のいくつかの機能を上手に活用する方法を紹介します。 4つのテーマに分けて、以下の12の裏技があります。それは、Web ページのデザイン (Dreamweaver には柔軟なページ デザイン機能があります)、他の Macromedia 製品と Dreamweaver を使用する (助けを求めずにアニメーションや画像を作成する)、ユーザー インターフェイスのカスタマイズ (パーソナライズされたユーザー エクスペリエンスを楽しむ)、そして最後に Dreamweaver 拡張機能に参加することです (拡張された高度な機能を Web ページにロードします)。
2. Web ページをデザインするためのヒント
元の HTML 構文を使用して Web ページを一語一語記述する場合でも、Web ページのビジュアル デザインに標準化されたウィンドウを使用する場合でも、次のヒントが役に立ちます。
ヒント 1: Web ページのサイズをより柔軟にする
一部の Web 開発者は、以下で紹介するテクニックを「リキッド」と呼んでいますが、ここでは「エラスティック拡張テクニック」と呼んでいます。これは、訪問者のブラウザウィンドウのサイズが変化したときに、Web ページのサイズを調整する技術です。したがって、ウィンドウが大きすぎると空白がなくなり、上下に移動します。エッジにはバーは表示されません。実際、ほとんどの単純な Web ページはブラウザ ウィンドウのサイズに応じてページ サイズを自動的に調整しますが、Web ページ内でさまざまなフレームやテーブルが使用されている場合、Web ページのサイズを自動的に調整することは困難になります。柔軟に調整可能。通常、Web デザイナーは固定幅のフレームと GIF 画像を組み合わせて Web ページをデザインします。これにより、Internet Explorer を使用するか Netscape Navigator を使用するかにかかわらず、ページ サイズが固定され、暴走することはありません。 Dreamweaver 4.0 を使用すると、柔軟に自動的に調整される Web ページを簡単にデザインできます。やり方は?
★具体的な方法：ツールパレット（オブジェクトパレット）のボタンでWebページを開き、「レイアウトビュー」に切り替えます。このとき、各列の上のボックスの中央に小さなドロップダウン矢印が表示され、フレキシブル表示を設定する列の上にある小さな矢印をクリックします。 「列を自動ストレッチとして設定」を選択します。 （自動調整の列幅を 1 列に制限するように設定します） このとき、列ボックスの上に列幅を示す元の数値の代わりに波線が表示されます。 Dreamweaver により、固定レイアウトの空の画像が自動的に作成され、この空の画像が列の上に 2 つの長い空のテーブルで表示され、レイアウトが自動的に埋められ、フレキシブル レイアウトの設定が完了します。 (初めて空の画像を追加すると、組み込みの画像を使用するかどうかを尋ねるダイアログ ボックスが表示されます。最良の効果を得るには、Dreamweaver に画像を自動的に生成させることをお勧めします。それ以外の場合は、画像を自動的に生成しません。レイアウトを埋めるために空白の画像を使用する必要があります。)
ヒント 2: 個人用パレットを作成する
Dreamweaver の新しい「アセット パネル」(プロパティ コントロール パネル) は、画像やスタイルなどのファイル形式に従ってファイルを管理できる新しいツールです。 , ウェブサイトを編集するとき。
★具体的な方法: 新しいサイトを定義すると ([サイト新しいサイト] をクリック)、すべての種類のオブジェクトが [アセット パネル] の適切なテーブル ボックスに自動的に追加されます。この新しく追加された「アセット パネル」プロパティ コントロール パネルには、テキストの色、背景の色、ハイパーリンクの色など、Web サイトで使用されるすべての色を保存するカラー ボックスもあります。これは、ユーザー向けに調整された Web サイトのナビゲーション カラー パレットです。 「アセット パネル」を起動し (最初に「ウィンドウ」を選択し、次に「アセット」をクリック)、左側にある小さな色のスクロールをクリックするだけで、Web サイトのさまざまな色のオプションが表示されます。もちろん、選択した特定のテキストにこれらの色を適用することもできます。特定の色を選択した場合でも、画面上には色の濃度の 16 進数値と三原色のコントラスト コード (RGB) が表示されます。パレット ツールバーを小さくしたい場合は、特定の色だけをパレットの「お気に入り」に追加することもできます。選択した色を強調表示し、ウィンドウ内の「お気に入りに追加」ボタン (右下のボタン) をクリックするだけで完了です。
ヒント 3: ポップアップ メニュー ナビゲーション システムの作成
本来、ポップアップ メニュー ナビゲーション システムの作成には多くの JavaScript 構文とテクニックが必要ですが、Dreamweaver と Fireworks Studio があれば、簡単かつ迅速に作成できます。
★具体的な方法：まず「Fireworks」を起動し、画像を選択し、「ポップアップメニューの設定」ダイアログボックスで「ポップアップメニューの挿入」をクリックし、項目（項目）の名前を入力してクリックします。 「プラス」ボタンを押して項目を追加します。ポップアップされる情報ボックスでは、プロジェクトで使用するテキストやハイパーリンクの設定など、引き続き詳細な設定を行うことができます。もちろん、サブメニューを追加したり、次のレベルの設定を並べ替えたりすることもできます。完了したら、「次へ」をクリックして、色、フォントなどのさまざまなパラメータ値の設定を続けます。メニューが完了したら、HTML 構文と画像の両方をプレビューできます。もう一度「完了」をクリックします。このとき、元の画像にマウスを移動すると、メニューシステムの内容の一覧が表示されます。作成したファイルをエクスポートすると、「Fireworks」は Dreamweaver で使用する必要のあるすべての HTML、JavaScript、および画像ファイルを自動的に生成します。
ヒント 4: 画像を動かす
Dreamweaver と Fireworks Studio を同時にインストールしている場合は、これら 2 つのソフトウェアの完璧な組み合わせに驚かれるでしょう。プロの画像デザイナーでなくても、Web ページをデザインするときに GIF 画像を変更してより鮮やかにしたい場合があります。 Dreamweaver を使用すると、助けを求めずにアニメーションを作成できます。
★具体的な方法：標準ウィンドウで変更したい画像を選択し、「プロパティインスペクター」の「編集」をクリックします。 「Fireworks」を含めて Dreamweaver をインストールした場合、「Fireworks」は Dreamweaver のデフォルトの画像エディタであり、画像は自動的に「Fireworks」にロードされます。 （よく見ると、Fireworks 画面に「Dreamweaver から編集中」などのテキストやグラフィックが表示され、Dreamweaver で画像を編集できることがわかります。） さて、「」で編集したい画像をクリックします。 Fireworks」で、「アニメーションを変更」「選択範囲をアニメーション化」を選択します。 次に、「アニメーションダイアログ」でアニメーションのフレーム数やアニメーションの動きの方向、透明度などを選択して設定を完了します。 「フレーム」ツールをクリックして移動速度を設定し、「オブジェクト」パネルを選択して設定を変更することもできます。ファイルをエクスポートする場合は、「最適化」ツールバーをクリックし、ファイルの種類で「アニメーション GIF」を選択するだけです。完了後、「Fireworks」は最適化された設定で画像を自動的にエクスポートし、GIF 画像を自動的に更新し、更新された画像を Dreamweaver に表示します。 「ブラウザでファイル プレビュー」をクリックすると、作成したばかりの素敵な画像をブラウザでプレビューできます。
ヒント 5: ボタンに点滅効果を持たせる
Dreamweaver では、Flash がなくても、点滅効果を持つ Flash ボタン オブジェクトを作成できます。 Dreamweaver にはいくつかの組み込み Flash ボタン オブジェクトがあり、いくつかの異なる形式のボタンを作成できます。
★具体的な方法：「インタラクティブ画像フラッシュボタンを挿入」をクリックすると、内蔵ボタンが表示されます。マウスを使用して、ダイアログ ボックスで使用するボタン フォームをポイントし、それがブラウザーでどのように機能するかを確認することもできます。マウス ポインタを使用して、使用するボタン フォームを選択し、ボタン上のテキスト、フォント、色、ハイパーリンクなどのパラメータやカスタム ファイル名を順番に入力します。 「OK」を押します。次に、「SWF」形式のファイルが生成され、Web ページに自動的にインポートされます。完成したファイルをクリックすると、「プロパティ インスペクター」にファイルのプロパティが表示されます。ファイル属性を表示する場合、ファイル属性リストを展開すると「再生」が表示され、ブラウザを開かずにボタンの点滅効果をプレビューできます。
ヒント 6: フロー テキストを作成する
フロー テキストを Web ページに追加するのは、先ほど紹介した Flash ボタンを追加するのと同じくらい簡単です。同様に、Flash をインストールしなくても、Dreamweaver が提供する新機能を使用して簡単に実行できます。一般に HTML 構文を使用して Web ページを作成するが、インタラクティブ メディアの経験がない Web ページ作成者は、Flash 形式でコンパクトなフロー テキストを簡単に作成できます。この新機能により、互換性の問題を追加することなく、Web ページにブラウジングの対話性を追加できます。 ★具体的な方法：「インタラクティブ画像Flashテキストの挿入」をクリックし、効果を変更したいテキスト、フォントスタイル、フォントの色、フォントサイズなどのパラメータ設定を一つずつ入力していきます。
ヒント 7: キーボード ショートカットを変更する
Dreamweaver では、ユーザーがインターフェイスをカスタマイズでき、この設計は非常に柔軟です。たとえば、ユーザーはプログラムを作成したり、オブジェクトを自分で追加したりすることでメニューを変更できます。 Dreamweaver には「キーボード ショートカット エディター」と呼ばれるグラフィカル インターフェイスがあるため、キーボード ショートカットを変更するのに専門家である必要はありません。
★具体的な方法：「キーボードショートカットの編集」をクリックするだけで、ダイアログボックスが読み込まれ、変更可能なショートカットキーが一覧表示され、使い慣れた設定にショートカットキーを変更することができます。ショートカット キーを変更するには、現在のセットとコマンド バーのドロップダウン メニューを使用し、既存のコマンドの中から変更するコマンドを見つけて、現在のショートカット キーを選択します。ショートカット キーのリストに表示されます。リストにあります。また、ショートカットキー設定を追加したい場合は、「プラス」をクリックし、キーボードで使用したい新しいショートカット代表キーを入力し、「変更」をクリックします。同時に、ショートカット キーを選択し、「マイナス」をクリックしてショートカット キーを削除することもできます。
ヒント 8: サイト ウィンドウの列をリセットする
★ 具体的な方法: 「サイト ウィンドウ」から「ファイル ビューの列を表示」をクリックするだけで、サイト ビューの列のサイズと外観が表示されます。フィールド名を選択し、上下の矢印を使用してサイズを変更するか、「フィールドを表示」チェックボックスをオフにしてフィールドを非表示にします。さらに、「プラス」ボタンをクリックして列を追加し、独自の列名を作成することもできます。あるいは、ドロップダウン メニューで既存の「ノート」を選択して、列を「デザイン ノート」に関連付けることもできます。
ヒント 9: Web ページの元のコードを表示する
★ 具体的な方法: プロパティやブラウザの互換性を確認するために「Reilly コード リファレンス」(ウィンドウ リファレンス) を開くと、既定のウィンドウに小さなフォントで「参照設定」の値が表示されます。ただし、ウィンドウの右上隅 (閉じるボタンのすぐ下) にある右ボタンを押すと、ドロップダウン メニューの行が表示され、元のコードのフォント サイズ (小、中、大) を選択できます。大きなフォントを選択すると、元の HTML コードを読むときに虫眼鏡を持って画面を見る必要がないため、目に「悪影響」が少なくなります。
ヒント 10: Flash ボタンを追加する
ヒント 5 では、20 種類のプリセット ボタンを使用して Dreamweaver で Flash ボタンを作成する方法を紹介しました。これは、追加のファイルやプログラムをインストールする必要のない方法です。以下に「Fireworks ボタン」をインストールする別の方法があります。この拡張機能はヒント 5 と同じ効果があります。
★具体的な方法：「Exchange for Dreamweaver」（Dreamweaver拡張機能交換センター）にアクセスし、「InstaGraphics Extensions for Dreamweaver」をキーワード検索して、この約577Kのファイルをダウンロードします。 Dreamweaver に切り替え、「コマンド 拡張機能の管理」を選択し、「拡張機能のファイル インストール」を選択してインストールを開始します。 「Dreamweaver」を再起動すると、「Surfboard」や「Bulletbar」など、6 つの新しい興味深いボタン形式が表示されます。この時点では、「Insert Interactive Images Fireworks Button」コマンドを使用して、クールなボタンを作成するだけです。 「箇条書きを画像に変換するコマンド」と「テキストを画像に変換するコマンド」を使用することもできます。どちらの方法でも「Fireworks」を自動的に実行できます。
ヒント11：Webページに「お気に入りに設定」機能を追加する ★具体的な方法：「Exchange」で検索すると「お気に入りに追加」の拡張機能が見つかります。この小さなファイルは 3K しか占有しないため、ダウンロード時間はそれほど長くはかかりません。次に、同じ手順に従って「拡張機能マネージャー」からファイルをロードします (コマンド 拡張機能の管理、拡張機能のファイル インストール)。次に、Dreamweaver を再起動します。この新しくロードされた拡張ファイルにより、Dreamweaver に新しい機能が追加されます。この「マイ コレクションに追加」機能を Web ページに追加すると、ユーザーが Web サイトを閲覧したときに、ワンクリックであなたの Web サイトをブラウザの「マイ コレクション」に簡単に追加できます。さらに、最も優れている点は、「お気に入り」の名前と、「お気に入り」の名前の前に表示される小さなアイコン (通常は、「お気に入り」の前にある小さなアイコン) もカスタマイズできることです。 IE は IE のデフォルト値です。自分でデザインした小さなアイコンがあると、より眩しくなります）。この機能は、IE 4.0 以降を使用するブラウザのみをサポートしていることに注意してください。 「Windows」メニューの「動作」パネルを選択し、IE 機能のドロップダウン メニューに移動してこの機能をクリックするだけで、この優れた機能を簡単に有効にできます。
ヒント 12: 非常にクールなチャート。
フォームを作成したい場合、Web ページの元のコードをそのまま記述する必要がありますか? 必要はありません。すでに用意されているものがあります。
★具体的な方法: にアクセスしてください。 「フォーム ビルダー拡張機能」を交換してダウンロードします。国、性別、婚姻状況、年齢グループ、その他のカテゴリを含むテーブルを即座にコピーできる既製のテーブルがあります。 Exchange に移動して、この小さな (わずか 11K) ファイルをダウンロードし、「拡張機能マネージャー」 (コマンド 拡張機能の管理、拡張機能のファイル インストール) を通じてインストールします。その後、Dreamweaver を再起動し、[FormBuilder の挿入] をクリックすると、(FormBuilder の挿入) に拡張機能が表示されます。クリックすると、ダイアログ ボックスが表示され、該当する形式のメニューがすべて表示され、非常に便利です。