ビジュアル環境で複雑な Web ページを作成したいプロの Web ページ作成者にとって、Dreamweaver は Web ページ編集ツール市場に徐々に登場し、プロが Web ページを作成するための最良の選択肢となっています。現状から判断すると、Dreamweaver の組み込み機能はますます豊富、充実、充実していると言えます。ここでは、バージョン 4.0 でのアプリケーションのヒントをいくつか紹介したいと思います。
1. Web ページをより柔軟にする Web 開発者によっては、以下で紹介する手法をリキッドと呼びますが、ここではこの手法をストレッチ (柔軟な拡張手法) と呼びます。これは、訪問者のブラウザウィンドウのサイズが変化したときに、Web ページのサイズを調整できる技術です。そのため、ウィンドウが大きすぎると空白がなくなり、ウィンドウが小さすぎると空白が表示されます。下に移動するバーはエッジに表示されません。実際、ほとんどの単純な Web ページはブラウザ ウィンドウのサイズに応じてページ サイズを自動的に調整しますが、Web ページ内でさまざまなフレームやテーブルが使用されている場合、Web ページのサイズを自動的に調整することは困難になります。柔軟に調整可能。通常、Web デザイナーは、固定列幅のフレームと GIF 画像を間隔として組み合わせて Web ページをデザインします。この方法では、Internet Explorer を使用している場合でも、Mac を使用している場合でも、ページ サイズは固定され、暴走することはありません。 Dreamweaver 4.0 を使用すると、柔軟に自動的に調整される Web ページを簡単にデザインできます。やり方は？
オブジェクト パレットのボタンを使用して Web ページを開き、レイアウト ビューに切り替えます。このとき、各列の上のボックスの中央に小さなドロップダウン矢印があり、フレキシブル表示を設定する列の上にある小さな矢印を選択します。次に、「列を柔軟に表示」(列を自動ストレッチする) を選択します。 (列幅の自動調整を 1 列に制限するように設定します) このとき、列ボックスの上に列幅を示す元の数値の代わりに波線が表示されます。 Dreamweaver は、固定レイアウトの空の画像ファイルを自動的に作成します。この空の画像ファイルは、列の上にある 2 つの長い空のテーブルで表されます。このようにして、レイアウトが自動的に埋められ、フレキシブル レイアウトの設定が完了します。 (初めて空の画像ファイルを追加すると、組み込みの画像ファイルを使用するかどうかを尋ねるダイアログ ボックスが表示されます。最良の効果を得るには、Dreamweaver に画像ファイルを自動的に生成させることをお勧めします。そうでない場合は、レイアウトを埋めるために空の画像ファイルを使用する必要はありません。)
2. パーソナライズされたカラーパレットを作成する Dreamweaver 4.0 の新しいアセットパネルは、画像、テンプレートなどのファイルタイプに応じてファイルを管理できる新しいツールです。 .、Web サイトを編集するとき 新しい Web サイトを定義すると ([サイトを選択] · [新しいサイト])、すべてのタイプのコンポーネントが [アセット] パネルの適切なボックスに自動的に追加されます。この新しいアセット パネルのプロパティ コントロール パネルにはカラー ボックスもあり、テキストの色、背景の色、リンクの色など、Web サイトで使用されるすべての色が保存されます。ユーザー向けにカスタマイズされたウェブサイト向けのカラーパレットです。 [アセット] パネルをアクティブにして (最初に [ウィンドウ]、次に [アセット] を選択)、左側にある小さな色のスクロール バーを選択するだけで、Web サイトのさまざまな色のオプションが表示されます。もちろん、選択した特定のテキストにこれらの色を適用することもできます。色を選択した場合でも、画面上にはその色の 16 進数値と 3 色の対応コード (RGB) が表示されます。パレット ツールバーを小さくしたい場合は、特定の色だけをパレットのお気に入りに追加することもできます。選択した色を強調表示し、ウィンドウ内の「お気に入りに追加」というボタン (右下のボタン) を選択するだけで完了です。
3. ポップアップ メニュー ナビゲーション システムの作成 本来、ポップアップ メニュー ナビゲーション システムの作成には JavaScript 構文のスキルが必要ですが、Dreamweaver/Fireworks Studio がインストールされていれば簡単に作成できます。まず Fireworks を起動し、画像を選択し、[ポップアップ メニューの設定] ダイアログ ボックスで [挿入・ポップアップ メニュー] を選択します。項目の名前を入力し、プラス ボタンを選択してプロジェクトを追加できます。ポップアップメッセージボックスでは、項目に使用するテキストやリンクの設定など、引き続き詳細な設定を行うことができます。もちろん、サブメニューを追加したり、次のレベルの設定を並べ替えたりすることもできます。完了したら、「次へ」を選択して、色、フォントなどの設定を続けます。メニューが完了したら、HTML 構文をプレビューし、画像をプレビューできます。次に、「完了」を選択します。このとき、元のパターンにマウスを移動すると、メニューシステムの内容の一覧が表示されます。 作成したファイルをエクスポートすると、Fireworks は Dreamweaver に必要なすべての HTML、JavaScript、および画像ファイルを自動的に生成します。
4. 画像ファイルを動かしてみよう！
Dreamweaver/Fireworks Studio を同時にインストールしている場合は、これら 2 つの製品の完璧な組み合わせに驚かれることでしょう。プロのグラフィック デザイナーでなくても、Web ページをデザインするときに、GIF 画像ファイルをより鮮明にするために一部の GIF 画像ファイルを変更したいことがあります。 Dreamweaver を使用すると、誰にも頼まなくてもアニメーションを作成できます。標準ウィンドウで変更するイメージを選択し、プロパティ インスペクターで [編集] ボタンを選択します。 Dreamweaver のインストールに Fireworks が含まれている場合、Fireworks は Dreamweaver のデフォルトの画像エディタであり、画像は自動的に Fireworks にロードされます。 (よく見ると、Fireworks 画面に「Dreamweaver から編集中」などのテキストやグラフィックが表示され、Dreamweaver から画像を編集できることがわかります。) さて、Fireworks で編集する画像を選択し、[変更] を選択します。アニメイト ·アニメイトセレクション。 次に、アニメーションダイアログボックスで、アニメーションのフレーム数、アニメーションの動きの方向、透明度などを選択して設定を完了します。また、「フレーム」ツールバーを選択して移動速度を設定したり、「オブジェクト」パネルを選択して設定を変更したりすることもできます。ファイルをエクスポートするには、最適化ツールバーを選択し、ファイル タイプとしてアニメーション GIF を選択するだけです。完了後、Fireworks は最適化された設定で画像を自動的にエクスポートし、GIF 画像ファイルを自動的に更新して、更新された画像ファイルを Dreamweaver に表示します。 「ファイル」→「ブラウザでプレビュー」を選択すると、作成したばかりの素敵な画像をブラウザでプレビューできます。
5. ボタンに点滅効果を持たせる Dreamweaver では、Flash プログラムがなくても、点滅効果を持つ Flash ボタン オブジェクトを作成できます。バージョン 4.0 には、いくつかの異なる形式のボタンを作成できるいくつかの組み込み Flash ボタン オブジェクトがあります。 「挿入」→「インタラクティブ画像」→「Flash ボタン」を選択して、どの組み込みボタンが使用できるかを確認します。マウスを使用して、ダイアログ ボックスで使用するボタン フォームをポイントし、それがブラウザーでどのように機能するかを確認することもできます。マウス カーソルを使用して、使用するボタン フォームを選択し、ボタン上のテキスト、フォント、色、リンクなどのパラメータ、またはカスタマイズしたファイル名を順番に入力します。 「OK」を押します。次に、SWF ファイルが生成され、Web ページに自動的に配置されます。完成したファイルをクリックすると、プロパティ インスペクターにファイルのプロパティが表示されます。ファイル属性を表示する場合、ファイル属性リストを展開すると、再生ボタンが表示されます。これを選択すると、ブラウザを開かずにボタンの点滅効果をプレビューできます。
6. フロー テキストを作成する フロー テキストを Web ページに追加するのは、先ほど紹介した Flash ボタンを追加するのと同じくらい簡単です。同様に、Flash をインストールする必要はなく、Dreamweaver 4.0 が提供する新機能を使用して簡単にインストールできます。通常、HTML 構文を使用して Web ページを作成するが、インタラクティブ メディアの経験がない Web ページ作成者は、Flash 形式でコンパクトなフロー テキストを簡単に作成できます。 Macromedia によると、インターネット ユーザーの 97% は Flash 効果を使用して Web ページを表示できるため、この新機能により、互換性の問題を追加することなく、Web ページの閲覧や Web ページの読者にインタラクティブ性を追加することができます。 [挿入] · [インタラクティブ画像] · [Flash テキスト] を選択し、環境設定 (効果を変更するテキスト、フォント スタイル、フォントの色、フォント サイズなど) を 1 つずつ入力します。
7. キーボード ショートカットの変更 Dreamweaver では、ユーザーがインターフェイスを非常に柔軟にカスタマイズできます。たとえば、ユーザーはプログラムを作成したり、オブジェクトを追加したりすることでメニューを変更できます。 Dreamweaver にはキーボード ショートカット エディターと呼ばれるグラフィカル インターフェイスがあるため、キーボード ショートカットを変更する専門家である必要はありません。[編集] > [キーボード ショートカット] を選択するだけで、ダイアログ ボックスが読み込まれ、変更可能なショートカット キーのリストが表示されます。使い慣れた設定値にキーを素早く変更できます。ショートカット キーを変更するには、[現在のセット] および [コマンド] リストのドロップダウン メニューを使用し、既存のコマンドの中から変更したいコマンドを見つけて、現在のショートカット キーを選択するだけです。クイック キー リストに表示されます。キーのリストにあります。さらに、クイック キー設定を追加する場合は、プラス ボタンを選択し、キーボードで使用する新しいクイック代表キーを入力し、変更を選択します。同時に、ショートカット キーを選択し、削除キー (マイナス) を選択してショートカット キーを削除することもできます。
8. サイト ウィンドウの列幅をリセットするには、サイト ウィンドウから [表示] · [ファイル ビュー列] を選択するだけで、サイト ビューを表示するときの列幅のサイズと表示をカスタマイズできます。名前の列を選択し、上下の矢印を使用してサイズを変更するか、「フィールドを表示」チェックボックスをオフにして列を非表示にします。さらに、プラス ボタンを選択して列を追加し、独自の列名を作成することもできます。さらに、ドロップダウン メニューから既存のノートを選択することで、列をデザイン ノートに関連付けることができます。
9. 元の Web ページ ファイルを読んで、プロパティまたはブラウザの互換性を確認するために O'Reilly コード リファレンス (ウィンドウ · リファレンス) を開くと、デフォルトのウィンドウに小さなフォントでリファレンス設定が表示されます。ただし、ウィンドウの右上隅 (閉じるボタンのすぐ下) にある右ボタンを押すと、一連のドロップダウン メニューが表示され、元のドキュメントのフォント サイズ (小、中、および小) を選択できます。大きい）。 。大きなフォントを選択すると、元の HTML ファイルを表示するときに虫眼鏡を持って画面を見る必要がないため、目に負担がかかりません。
10. 新しい Flash ボタンを追加する 上記では、20 種類のプリセット ボタンを使用して Dreamweaver で Flash ボタンを作成する方法を説明しました。この方法では、追加のファイルやプログラムをインストールする必要はありません。以下に Fireworks ボタンをインストールする方法もあります。この拡張機能はヒント 5 と同じ効果があります。 Exchange for Dreamweaver (Dreamweaver 拡張機能交換センター) に移動し、キーワード検索「InstaGraphics Extensions for Dreamweaver」を入力して、この 577K ファイルをダウンロードします。 Dreamweaver に切り替え、「コマンド」→「拡張機能の管理」を選択し、「ファイル」→「拡張機能のインストール」を選択してインストールを開始します。 Dreamweaver が再アクティブ化されると、Surfboard や Bulletbar を含む 6 つの斬新で興味深いボタン タイプが表示されます。現時点では、[挿入] → [インタラクティブ画像] → [Fireworks Button] コマンドを使用するだけで、クールなボタンを作成できます。コマンドを使用することもできます。 ・箇条書きを画像に変換する と コマンドを使用する ・テキストを画像に変換する 上記のどちらの方法でも、Fireworks を自動的に実行できます。
11. Web ページに「お気に入りに設定」機能を追加し、Exchange で検索すると、お気に入りに追加の拡張機能が見つかります。この小さなファイルは 3K しか占有せず、ダウンロード時間はそれほど長くはかかりません。次に、同じ手順に従って拡張機能マネージャーからファイルをロードします (コマンド · 拡張機能の管理、ファイル · 拡張機能のインストール)。次に、Dreamweaver を再アクティブ化します。この新しくロードされた拡張ファイルにより、Dreamweaver に新しい機能が追加されます。この「お気に入りに追加」機能を Web ページに追加すると、インターネット ユーザーが Web サイトにアクセスしたときに、ワンクリックで Web サイトをブラウザのお気に入り (または個人のブックマーク) に簡単に追加できます。さらに、お気に入りのショートカットの名前と、お気に入りのショートカット名の前に表示される小さなアイコンをカスタマイズすることもできます (通常、IE のお気に入りのショートカットの前にある小さなアイコンは IE のデフォルト値です。この機能は、Windows メニューの [動作] パネルを選択し、IE 機能のドロップダウン メニューでこのオプションを選択するだけです。クールな
グラフを作成したいのですが、Web ページのソース コードを入力するのに時間を費やす必要がありますか? Form Builder 拡張機能には、Exchange からダウンロードできる既製のフォームが用意されています。国、性別、婚姻状況、年齢層、その他のカテゴリなどのフィールドを含むフォームを即座にコピーするには、この小さな (わずか 11K) ファイルを Exchange からダウンロードし、拡張機能マネージャーを使用してインストールします (コマンド · 拡張機能の管理)。 · 拡張機能のインストール) 次に、Dreamweaver を再起動して、[挿入] · [FormBuilder] を選択すると、ダイアログ ボックスが表示され、該当するすべての形式メニューが表示されます。