CSSの基本を身にAdobe Dreamweaver

html とCSSの基本事項のチュートリアルAdobe Dreamweaver

このチュートリアルでのCSSを使用することの概念を導入するために設計さAdobe Dreamweaverおよび html ウェブでは、 CSSを理解していないとしているWebデザイナーのためのデザイン. カスケードスタイルシートのCSSの略で、あなたのWebページとWebページのコンテンツにスタイルを追加するためのシステムです.

このCSSをどのようにCSSを使用しての基本的な感情を持つはずのチュートリアルを読んだ後Dreamweaver. このチュートリアルでは、空白の文書を作成する, CSSのスタイルを作成する, 単3形をページに挿入部, 画像を挿入, し、迅速なナビゲーションメニューを作成して割り当てるCSSのプロパティは、ページ内の要素に. このチュートリアルのスクリーンショットだと、プログラムで使用されるAdobe Dreamweaver CS3.

アブラハムchaffin Creativecow.net, カンブリア, アメリカ合衆国カリフォルニア © 2007 Creativecow.net. 版権所有.

html ドキュメント:
あなたの仕事を始めるに保存し、新しい空白の文書を作成する. 今までそうだと私はすぐに時間が時間（ cntrl +のショートカットを使用して保存することができますから、常に何かのドキュメントを保存する傾向がある）. 空白の文書を作成するときにDreamweaverお客様のウェブページのコンテンツをすでにしている, あなただけのデザインモードで表示されないことができます. （ cntrl + 〜 ）デザインモードやコードモードまたは[表示]メニューに移動 コードや表示メニューの切り替えを デザインは、ショートカットを使用できるが、コンテンツを表示するには.

このようにするべきだと表示されます。:

このフレームワークの始まりです html 文書は、多くのタグを構築されています. それぞれのタグの始まりのように見えます この し、各タグの終了 ように見える/この. 文書全体の構成されている html その上 タグのように見えます html xmlns = " http://www.W3.org / 1999/xhtml " xmlns 、それを修飾している. 終了タグは、文書の一番下 / html. との間での開始と終了 html タグが2つの主要なタグは head タグと 体 タグです. head タグは、見ていないですが、多くの重要な部品や修飾の 体 タグの要素がどのようなことになります。用品. の 体 タグ内のコンテンツを実際に表示されているコンテンツをお使いのブラウザを介している.

CSSの要素:
任意の要素の前には、 CSSスタイルを作成して挿入. を押す（シフト+ F11キーを押し）は、 CSSスタイルのフレームか、メニューを変更する のCSSスタイルに行くトグル. 右下にアイコンがほとんどですが見えるように . これまでのâ € œnew ruleâ €ダイアログボックスのCSSをもたらす. の 体 タグ用のCSSのルールを割り当てて起動し、背景色をオフにするのではなく、白い純白. "セレクタのタイプを選択します"タグ" "ラジオ. "タグ"ドロップダウンメニューから"セレクタ"体を選択してください. "唯一"の" "ラジオで" OK "をクリック定義この文書を選択してください.

" OK "をクリックした後にDreamweaverあなたにコードを追加します html 体 タグを使用して、 CSSを変更する準備を進めファイル.

これも場合は、カテゴリの列の"背景"を選択しますと、背景色の選択が非常に薄い黄色を選択するかを定義することができます"対話ウィンドウの体には、 " CSSのルールを定義されます ＃ ffffccを押して入力 " OK "を.

実行" OK "を押すDreamweaverボディは、 CSSを変更する セレクタ 背景を挿入することで色 プロパティ と 値 ＃ ffffcc.

ある場合は、体のセレクタに割り当てることができるか、それは、 CSSスタイルのフレームを使用して他の多くのプロパティを変更できるようにしている:

部のタグ:
リターン（ cntrl + 〜 ）の表示を設計するとの[挿入]メニューに行く でタグを挿入部をレイアウトオブジェクト 部タグ, これは、 â € œinsert部多賀€ダイアログボックスが表示されます. （部のタグは、 WebページのCSSを使用して設計のさまざまな要素を保持するために、最もよく使われているタグ;ている画像などの, 本文, やビデオ.)

"タグを挿入部の最初のフィールド"ダイアログボックスが挿入されます: 競技場. これは、ここでは、 divタグは、指定のフィールドに挿入される予定です html ページ. デフォルトでは"最後にどこにカーソルが置かれたWebページに挿入できるようになるには、 divタグを挿入ポイントを意味する"で設定します. また、 "タグの開始後に"または"タグの終わりまでに"事業部を別の場所でのタグの場所を選ぶことができます.

次の場合は、 "クラスを見つける:"フィールドでは、 CSSのルールは、直接に関連する分野です. をCSSのクラス"などの前にはピリオドでは、セレクタをしている.クラス". クラスは、 Webページの多くの項目には、プロパティまたはプロパティを割り当てるために使用されます. を割り当てることができますので、まだ何もない私たちのクラスは、この文書で定義されている. の" ID:のIDがないため、我々のCSSで定義されている"フィールドは空白になっています. IDを1つの項目には、 Webページのプロパティまたはプロパティを割り当てるには、 CSSのコードでは、シャープ記号の前にしている"のように使用されている＃番号". これらをクリックして"新しいCSSスタイル以来、私たちがどちらも"と我々は新しいルールを定義する.

この時間を選択し、セレクタの種類として"クラス", のようにタイプ" Coolクラス ", " "のみ"を押して" OK ]を、この文書を選択してください. のクールなブルーの色で、このクラスの背景色を設定したカテゴリの下の"背景"を選択し、何かに＃ 00ccffのように"背景色"を設定して. 今では薄黒い線にカテゴリとして"境界線"をクリックして、をクリックし、ドロップダウンして、幅と黒（ ＃ 000000 ）は、 1ピクセルの色としてのスタイルとして固体を選択すると、境界線の色を設定. を選択した場合や、より創造することができます. 今の我々のルールでは、 "トップのためのカテゴリーの列と型の"ボックス" " 5 "をクリックして、少しのパディングを設定できます: パディング"これはトップだけが、すべての側面を残す場合は、 "すべて"のチェックボックスにも同じことがパディングはないが割り当てられます. を押して" OK "とDreamweaver 3つのプロパティを使用してCSSスタイルタグの中で、新しいクラスのルールを作成する.

あなたの"今も、そのクラスのフィールドcooltag "人口"としている"ダイアログボックス部のタグを挿入する-を押して" OK "とDreamweaverお客様のウェブページには、新しい div タグ内のプレースホルダテキストでコードを記述する.

この事業部私たちのクラスは、私たちには、 divタグとタグの中に割り当てられたすべての要素を作成します.

画像:
現在の画像を挿入し、そこに私たちのクラスを割り当てて.
それ以外の任意の場所には、 divの中に外部のWebページをクリックしてカーソルを置く. [挿入]メニューから のイメージに（ cntrl +とAlt行く）. お使いのコンピュータを押して" OK "を利用した可能性のある画像を選択. " OK "を押すことで、次のダイアログボックスをバイパスすることができます。 Dreamweaverお客様のウェブページにイメージを配置する. 画像の上で右クリックし、メニューのCSSのスタイルから選択 Coolクラス. これは、画像には、事前定義されたクラスが割り当てられますが、色、背景を与える, パディング, と我々が"割り当てられた国境.Coolクラス". Adobe Dreamweaver挿入するコードは、これに似ている必要があります:

CSSの電源:
CSSを強力なものにする能力は帰国して一度にスタイルの変更を加えるとそれはあなたのスタイルに割り当てられているすべての要素の影響を及ぼす. フレームには、 CSSのスタイル" "スタイル"すべてのルールを参照してください.Coolクラス". をクリックして .その背景には、価値にしてCoolクラスセレクタ（ ＃ 00ccff ）カラー. 別の色を選択すると、カラーピッカーを使用して, （ ＃ 66ffff ）など. 現在は正常にCSSを使用しているDreamweaver. が変更されたコードは、 CSSのみに適用されたとされているが、両方の div や img.

簡単なナビゲーションメニューを作成する
私たち離れて休憩し、それをするのナビゲーションリストに div タグ内のコンテンツとは.

独自のライン上にカーソルをinbetween各単語を入力してくださいを押すと、各単語を. すべての単語を選択し、一覧を右クリックしてハイライト ビュレット付きリスト. これで、箇条書きのリストがあるけど、ルールを作成する必要があるので、それにいくつかのスタイルを適用する必要がある.

は、 CSSのボタンをクリックして追加 は、 CSSスタイルのフレームから. リストには、スタイルを割り当てることが、多くの方法があります。, 私たちは新しいクラスのようなもの"と呼んで作成することも." リーstクラスし、それぞれに適用 リー タグ リーをクラス="リーstクラス" 、私たちは皆のためのルールを作成するこの例では リー タグ. セレクタフィールドに"高度な選択"ラジオとタイプ"李". "リストの"李略. " "のみ"を押して" OK ]を、この文書を選択してください.

の弾丸を削除させる, フォントの色を白と重量は、フォントを太字で表示する. の種類のカテゴリは"体重"のドロップダウンと白（ ＃ ffffffを選択からの大胆な選択を選択）は、色と. カテゴリ一覧から" OK "を、 "タイプ"ドロップダウンを押してからなしを選択する. Adobe Dreamweaverに影響を与えることは、 CSSで作成したコードリータグ.

マウスの項目を必要に応じて変更する必要がありますが、適切なナビゲーションメニューを持って. 私たちは行動を追加する必要がありますこれを行うに. [ウィンドウ]メニューに移動 行動（シフト+ F4を）. " "ボタンを、すべてのイベント詳細をクリックしてすべてのイベント詳細 . を確かめるにカーソルを1つのリスト項目での動作は、リストアイテムではなく、何か他にも適用されますので. フィールドの型には、 onmouseover この.クラス名= ' ' Coolクラス. "この"タグに"李"クラスを参照する場合は、クラス名を変更するには、ブラウザに指示 Coolクラス. フィールドタイプでは、 onmouseout この.クラス= '' （その2つのマークではなく引用）. これは、ブラウザの李タグに戻るときは、マウスの動きは、要素のうちのクラス名を返すには何もする. 今、 1つの項目には、リスト内の動作を適用されている.

の挙動を実現する各リストの要素のいずれか、またはコピーと貼り付けのコード内のコードの表示でお客様のカーソルで、前の手順を繰り返す必要がありますすべての要素に適用する. コードビューでは、最終的な結果は次のようにすべき:

前にこのように、通常のナビゲーションのようにリストを超える我々は手にカーソルを設定する必要がありますチュートリアルを終了する.
李は、 CSSスタイルのフレームを選択してください. "李"の"プロパティの一番下にある"との"リンクをクリックしてプロパティを追加して、ドロップダウンリストから"カーソル"を選択した. の値として"ポインタ"を入力する場合は、プリセットされていない.

結論
F12キーを押してチェックして作ってくれた. おそらくそれもかなり見ていないが、 CSSをどのように感じてみる必要がありますDreamweaver作品を html と、ブラウザには.

でプレーし、楽しいと思うようにしてください!