X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close

無料プレミアムアクセス

プレミアムハブの記事、プロジェクトファイルとから、各チュートリアルビデオの最初の10%の私たちのライブラリ全体にアクセスするオンラインチュートリアルのライブラリを

今すぐ無料アカウントを作成しよう!

DreamweaverでCSSを使用したイメージのロールオーバーを作成する
Google翻訳で翻訳さ

最近再開発訪問BBCのホームページを 、あなたはCSSが同じ画像(あなたがそうであるように2つのバージョンを挿入し、最初に作成することなく、非常に単純な画像のロールオーバーを作成するために使用する方法の非常に良い例が表示されます。 )ロールオーバーを挿入します。この記事では、我々はすべてのロールオーバー効果を有効にするために同じCSSを利用した画像で構成されたナビゲーションバーを作成します。


ステップ1 - 画像を収集します。

IVEは、サイズが非常によく似た3つの画像を選択した。 Photoshopを使って私が72 dpiの解像度でH 200ピクセルで、各画像W 300ピクセルを作りました。本当にしかしここで問題なのは、イメージがお互いにサイズが一貫していることです。

3 images


ステップ2 - ナビゲーションバーを含むようにdivを作成

、[挿入]パネルを開き、レイアウトに設定し、Drawの絶対位置のDiv]オプションを選択します。

AP Div


あなたのページに絶対位置のDivを描画し、930px V 220pxのサイズを設定するには、プロパティパネルを使用しています。


ステップ3 - 3枚の画像を挿入します。

彼らが水平に整列されるように、それらの間のギャップなしで、絶対位置のDivへ順番に各イメージをドラッグします。

lined up images


ステップ4 - ナビゲーションバーという名前のクラスを作成します。

ロールオーバーに何が起こるかを制御するためにCSSを使用すると、すべてのロールオーバー、テキストや画像が同じにスタイリングすることを意味します。そのような状況を避けるために、まず、各画像に添付するクラススタイルを作成します。

null


[CSSスタイル]パネルで、新しいCSSルールを作成し、クラスへの型を設定し、それをナビゲーションバーに名前を付けます。左を作成するスタイルのボーダーオプションを使用して、


ステップ5 - クラススタイルを適用する

各画像を選択し、ナビゲーションバーと呼ばれるクラスにそれぞれを設定するには、[プロパティ]パネルで、クラスのドロップダウンメニューを使用します。

class applied


ステップ6 - ホバー化合物のスタイルを作成します。

今すぐ適用するロールオーバーのスタイルを設定することができます。

compound


スタイルに名前を付けます:ホバー(1:マウスが上にあるときにホバースタイルは、リンクのスタイル設定を制御します)。


ステップ7 - 透明性を作成します。

エフェクトを終了し、ロールオーバー時の画像が50%に不透明度をフェードさせるには、コードビュー(またはにおいは好みに応じ分割)に切り替えて、見つける:コードの先頭の近くに記載されているホバーパラメータ。

code view


50%の不透明度の変更を作成するために化合物のスタイルに次のコードを追加します。

{

フィルタ:アルファ(不透明度= 50);

不透明度:0.5;

}


ステップ8 - 作成リンク

最初の画像を選択し、リンクを作成するには、[プロパティ]パネルでリンクフィールドを使用して、挿入してみてくださいhttp://www.macprovideo.com/hubを 、例えばそれに。

link made


彼らはすべてのリンクになるように、すべての3つの画像に対してこの手順を繰り返します。


ステップ9 - ページをテストします。

最後に、ページファイルを保存

rollovers


不透明度の変化と境界線が明るく表示するには、各画像の上にロールバックします。

許クール?


David Smith

David Smith | Articles by this author

David Smith is Scotland's most qualified Apple and Adobe certified trainer. Having completed his education at Edinburgh College of Art's BAFTA winning Film School, David moved straight into TV production, first as a Vision Mixer then quickly becoming, at the age of just 24, a director of live TV studio productions. In 2001 he moved into Higher Education where he became a lecturer in TV Production, specializing in post-production and live studio production. During this time, and working with the support of the BBC, Channel 4 and independent production companies, David was instrumental in the design, development and implementation of industry-approved vocational courses across Scotland's Colleges. In 2006, after working closely with Apple Computers to create a unique multimedia studio for education at the Music and Media Centre in Perth, David became Scotland's first Apple-Certified Trainer for Pro Apps. This led on to David forming the first Apple Authorized Training Centre for Education, north of Manchester. In 2008 David made the move to full time training and joined the ranks at Academy Class, Ltd. where he continues to train industry professionals as a certified trainer across the Adobe Creative Suite and Apple Pro Apps range.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2017 macProVideo.com
a division of NonLinear Educating Inc.
Link