1. ハイパーリンクの下線を削除し、マウスホバー時に変色を実現します。
デフォルトでは、DreamWeaver でデザインされた Web ページのハイパーリンクには下線が付いており、見た目はあまり美しくありません。この迷惑な下線を削除するには、HTML ソース コードにコードを手動で追加するという方法が多くの新聞や雑誌で紹介されています。実際、DreamWeave ではリンクの下線を簡単に削除できます。まず、DreamWeaver のドキュメント ウィンドウにランダムなリンクを作成します。このリンクには下線が付いていることがわかります。この下線を削除するにはどうすればよいですか?
1. メニュー バーの [テキスト] | [CSS スタイル] | [スタイル シートの編集...] をクリックして (またはショートカット キー Ctrl+shift+E を押して)、スタイル シートの編集を表示します。 (スタイルシートの編集)ダイアログウィンドウ。
2. [新規] をクリックし、[新しいスタイル] ダイアログ ボックスで [CSS セレクターを使用] ボタンをクリックします。
3. [セレクター] フィールドに「a」と入力し、[OK] をクリックします。
4. [CSS スタイル定義] ダイアログ ボックスが表示されるので、Type クラスの装飾で [なし] をオンにし、[OK] をクリックし、[完了] をクリックします。ドキュメント ウィンドウでリンクの下線が消えていることがすぐにわかります。では、マウスを上に置いたときにリンクの色を変更するには、上記の手順の最初と 2 番目の手順を繰り返すにはどうすればよいでしょうか。次に、「セレクター」の横にあるドロップダウン矢印をクリックし、「a:hover」を選択して、「OK」をクリックします。表示される [a: hover のスタイル定義] ダイアログ ボックスで、Type クラスの色から任意の色を選択し (たとえば、赤を選択)、[OK] をクリックし、[完了] をクリックして完了します。 F12 を押してプレビューし、リンク上にマウスを置きます。先ほどの「ホバーのスタイル定義」ダイアログ ボックスで、背景色を緑として選択します。ハイパーリンク上にマウスを置くと、リンクが赤になるだけでなく、背景も緑になります。実際、先ほど説明した CSS スタイル定義ダイアログ ボックスを使用して、さらに特殊な効果を実現することもできます。興味のある方は検討してみてください。
2. 再利用可能な外部 CSS スタイル シートを作成します。DreamWeaver
を使用して特定の Web ページに CSS スタイルを作成した後、そのスタイルを別の Web ページに適用する場合、CSS スタイルを再作成する必要はありません。外部 CSS スタイル シート ファイル (外部 CSS スタイル シート) を作成すると、今後、このスタイル シート ファイル内のスタイルを自由に呼び出すことができます。管理を容易にするために、まず、サイトが存在するフォルダー内に CSS という名前の新しいフォルダーを作成します。このフォルダーは、外部スタイル シート ファイル (拡張子は css) を配置するために特別に使用されます。
1. ドキュメント ウィンドウで Ctrl+shift+E を押して、[スタイル シートの編集] ダイアログ ウィンドウを表示します。
2. [リンク] をクリックします。
3. ポップアップの [外部スタイル シートのリンク] ダイアログ ボックスで、[参照] をクリックし、作成した CSS フォルダーを見つけます。
4. [スタイルシート ファイルの選択] ウィンドウの [ファイル名] 列に、「*.css」と入力します (* は任意の名前を指定できます)。この時点では、実際には CSS フォルダーにスタイル シート ファイルが存在しないことに注意してください。 「ファイル名」フィールドに入力した内容が、新しい外部スタイルシートファイルの名前になります。たとえば、「title.css」と入力し、[選択] | [OK] をクリックします。
5. [スタイルシートの編集]ダイアログウィンドウに、title.css（リンク）が追加されるので、ダブルクリックします。
6. ポップアップ「title.css」ウィンドウで、「新規」をクリックします。
7. [新しいスタイル] ダイアログ ボックスで、[カスタム スタイル (クラス) の作成] ボタンをクリックします。
8. [名前] 列に名前 (myheadline など) を入力し、[OK] をクリックします。
9. 以下の「title.css の .myheadline のスタイル定義」ダイアログボックスで、フォントや色などの各種設定を行い、完了したら「OK」をクリックします。新しいスタイルを作成する場合は、もう一度 [新規] をクリックし、手順 6、7、8、9 を繰り返し、最後に [保存]、[完了] をクリックすると、外部スタイル シート ファイル title.css が作成されます。 title.css 内のすべてのスタイルは、メニュー バーの [TEXT] | [CSS Styles] サブメニューにリストされます。他の Web ページでこの title.css を呼び出す場合は、上記の手順 1 ～ 3 を繰り返し、[スタイルシート ファイルの選択] ウィンドウの [ファイル名] 列に title.css を入力します。 「選択」 | 「ok」 | 「完了」をクリックすると、title.css のすべてのスタイルが Web ページのメニューバーの「テキスト」 | 「CSS スタイル」サブメニューに表示され、適用できるようになります。この Web ページにこれらのスタイルを追加します。