DreamWeaverを熱くする方法

Dreamweaverにホットスポットを追加する

dreamweaverにホットスポットを追加すると、通常、画像内のクリック可能な領域の作成を指します。 これは、単一の「ホットスポット」ツールを介して直接行われるのではなく、画像マップを使用して行われます。 方法は次のとおりです。

1. 画像を挿入します。最初に、「INSERT」メニューを使用してDreamWeaverドキュメントに画像を挿入するか、ドラッグしてドロップします。 プロパティパネル（通常は右側）には、画像マップを作成するオプションが表示されます。 これをクリックすると、画像マップエディターが開きます。
2. ホットスポットの定義：画像マップエディターを使用すると、画像をクリックしてドラッグして長方形、円形、またはポリゴンのホットスポットを定義できます。 各ホットスポットについては、URL（リンクの宛先）を提供する必要があります。
3. リンク属性の設定：画像マップエディター内で、URL、ターゲット（新しいタブまたはウィンドウで開く - 次のセクションを参照）、および各ホットスポットのALTテキストを指定できます。ブラウザでプレビューして、機能をテストします。 画像内の定義された領域をクリックすると、指定されたURLに移動する必要があります。 画像マップはクライアント側であるため、ブラウザはマップデータをレンダリングして処理する必要があることを忘れないでください。これをいくつかの方法で行うことができます：
4. 方法1：挿入ハイパーリンク機能の使用：
テキストまたは画像を選択：

テキストを強調表示するか、ハイパーリンクにしたい画像を選択します。 または、ツールバーのハイパーリンクアイコン（通常はチェーンリンク）を使用することもできます。表示するダイアログボックスにurl：

を入力します。また、オプションでターゲットを指定することもできます（新しいタブまたはウィンドウでリンクを開くには、次のセクションを参照してください）。 DreamWeaverは、選択したテキストまたは画像をハイパーリンクとして自動的にフォーマットします。 たとえば、

は、example.comにリンクする「ここをクリック」というテキストでハイパーリンクを作成します。 これにより、リンクの属性をより詳細に制御できます。

1。 CSSの使用：最も効率的で推奨される方法は、カスケードスタイルシート（CSS）を使用することです。 ハイパーリンク専用のCSSクラスを作成して、リンクに適用できます。これにより、Webサイト全体で一貫したスタイリングが可能になります。 たとえば、

a {
  color: blue;
  text-decoration: underline;
}

a:hover {
  color: red;
  text-decoration: none;
}

このCSSコードスタイルはすべて、すべてのハイパーリンクを青くて下線に入れ、色を赤に変更し、ホバー上の下線を削除します。 このCSSは、htmlドキュメントにリンクされた別のCSSファイルに、またはタグを使用してhtmlの<style></style>セクション内に直接適用できます。インラインスタイリング：

タグ内の

属性を使用して、個々のハイパーリンクにスタイルを直接適用できます。 たとえば、。 ただし、これは一般に、CSSを使用するよりも効率が低く、維持が難しくなります。 DreamWeaver's Properties Panel： CSSほど堅牢ではないが、DreamWeaverのプロパティパネルを使用すると、現在選択されているリンクのテキスト色や下線スタイルなどの基本的なハイパーリンクプロパティを変更できます。 これはマイナーな調整を行うための簡単な方法ですが、CSSは包括的なスタイリングに適しています。ターゲット属性を使用してください：ハイパーリンクを作成する場合（「挿入ハイパーリンク」機能またはマニュアルコーディングのいずれかを使用）、style属性を指定できます。 設定<a></a>は、新しいタブまたはウィンドウでリンクを開きます。 たとえば、<a href="https://www.example.com" style="color: green; font-weight: bold;">Click here</a>またはDreamWeaverのINSERT HyperLinkダイアログボックスを使用して、「_blank」ターゲットを選択します。 JavaScriptを使用します（推奨が少ない）：可能性はありますが、JavaScriptを使用して新しいタブでリンクを開くと、一般に効率が低く、属性は、よりクリーンで広くサポートされている方法です。

以上がDreamWeaverを熱くする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。