All Articles Dreamweaver
Dreamweaverのチュートリアルのパート1でCSSを学ぶ:HTML要素を再定義
Geoff Blake on Tue, February 8th | 0 comments
Learning how to work with CSS is absolutely critical to building contemporary websites. It's one of those things that we, as designers, have to hunker down and learn at some point. And even after you

CSSを操作する方法を学ぶことは現代的なウェブサイトを構築することが不可欠です。それは、我々は、デザイナーとして、ダウン前かがみになるとどこかの時点で学ばなければならないというものの一つです。そして、あなたは基本をマスターした後も、成長と拡大の余地はまだあります。あなたは、新しいプロパティまたはどのように特定の結果を達成するために学ぶことができ、リーン"nの意味、可能な限りあなたのCSSを維持するためのテクニックを発見することができます。

In this tutorial post, we'll be taking a look at the fundamentals of working with CSS in Dreamweaver. You'll learn about two primary rule types, how to create them, and how to begin applying them throughout your site.

スタイルな動作を理解する

最初のオフ、私はあなたに聞いている、あなたの他のアプリケーションのいくつかのスタイルについて知っていますか? InDesignのスタイルを持っている、イラストレーターのスタイルを持って...一体であってもMicrosoft Wordはスタイルがあります。スタイルは、単に書式設定オプションの集合です。例えば、我々は"、強調"と呼ばれるスタイルがあるかもしれませんし、強調の中で我々は、フォント、サイズ、および色を設定している。この時点で、我々はドキュメント全体に強調を適用し始めることができます、そしてもちろん、これまで我々はそれを使用する場所、我々は、使用されている同じフォント、サイズ、および色を得られます。我々は戻って、元の強調スタイルに変更を加える場合、それが私たちの文書で使われているからどこまで、その後の書式設定は即座に更新されます。

これは、スタイルは伝統的にどのように動作するかです。ただし、CSSはさらにこの考え方をとります。またはあなたのサイト全体のすべてのページへ - 1つのみではなく、ページ内のスタイルの操作、CSSを使って、自分のページのグループへの一連のルールを適用することができます。あなたのルールのいずれかを編集し、そしてその変化が早くて、"ファイルを選択できるようにして、サイト全体でリップルなります

今それがパワーだ!

先に進む前に他の少数の速いポイント。最初に、用語" スタイル "および用語" のルールは、"Dreamweaverで、CSSで同じ意味で使用されています。時にはDreamweaverが使用するだろうという用語は、"スタイル、"と他の回が使用されます"ルールを。"多くの新しいユーザーは、このと仮定し、Dreamweaverの二つの異なる事柄について話すことで混乱してしまいます。そうではありません!スタイルとルールは同じものです。

第二に、ルールのリストは、スタイルシートと呼ばれています。スタイルシートは、特定のHTMLのページ(これは内部スタイルシートと呼ばれる)内に配置するか、ページの外側に別のフ​​ァイル(外部スタイルシートと呼ばれる)として保存することができます。そこでは、スタイルシートで行うことができます多くのクールなものがあり、我々は、はるかに詳細にそれらについて語るDreamweaverのCS5 101:コアDreamweaver CS5

今私たちはスタイルが動作し、スタイルシートの存在意義の感覚を持っているか理解することが、我々は我々が働くことができるCSSスタイルの2つの主要なタイプを議論する必要があります:HTML要素、およびクラスのルールを再定義。それぞれは非常に強力であり、そして特定の用途があります。それでは見てみましょう。

を見ると、HTML要素を再定義

レッツのアドレスは、最初のHTML要素を再定義。どのような彼らのやっていることは単純な、退屈なHTMLを取ると、わずか数行のコードで石器時代から21世紀にドラッグであるため、これはスタイルの私の好きな​​タイプです。有難いことに私たちのために、Dreamweaverによって我々はしたくないそうなら、我々は任意のコードを参照する必要はありません、すべての重労働を行うことになるだろう。

HTML要素を再定義して、我々は、プレーン、退屈なHTML要素を取って、CSSの制御下に置くことことでしょう。例えば、我々はテーブル、画​​像、見出し、段落、およびページ上に表示される場合があります他のこまごましたものをコントロールすることができます。我々は、HTML要素を再定義するときに何を覚えておく重要なことはつまり、我々はその要素のすべての出現を制御している。たとえば、再定義するCSSルールを作成する場合

, then all
elements on your page are now under the control of your CSS rule. If your redefined
rule resides in an external style sheet, then all tables across your entire site are now all controlled by a single CSS rule.

つまり同じくらい素晴らしい、それはあなたが望むものではありません。あなたは、ただひとつのテーブルを制御し、彼らがいたとして他人を残すしたい場合はどうなりますか?それは、クラスのルールが出番です。我々は、ほんの少しのものになるでしょう。今の場合は、迅速な再定義のHTMLタグを作成してみましょう。

ここでは、再定義のHTMLタグを作成する方法です:

ステップ1

[CSSスタイル]パネルの下部に、 新規CSSルール]アイコンクリックします。

ステップ2

表示される[新規CSSルール]ダイアログボックスで、ドロップダウンメニューセレクタタイプ]ドロップダウンから(再定義するHTML要素) タグを選択してください

ステップ3

セレクタ名のフィールドで、あなたがコントロールするHTML要素の名前を入力します。

は、要素の名前を入力する場合は、角括弧を省略してください。言い換えれば、"あなたが制御したい場合

," you'd simply type in "table."

むしろ要素の名前を入力する代わりに、セレクタ名のフィールドの右側にフライアウトメニューから選択することができます。

ステップ4

あなたが内部スタイルシート(このドキュメントのみ)または外部スタイルシート(新規スタイルシートファイル)に新しいルールを保存したい場合は、ダイアログボックスの下部にルール定義のプルダウンメニューから、選択してください。既にあなたのページに接続された外部スタイルシートを使用している場合や、、、その名前を選択してそこにそれを保存するかを選択できます。

[OK]をクリックします。

ステップ5

In the CSS Rule Definition dialog box that appears, begin applying the CSS formatting that you'd like to use for your new rule.


For example, if you're redefining a table, you may want to apply a background color, a font, margin settings, and so on. As you're working, click Apply in the CSS Rule Definition dialog box to preview your page. Any elements on your page that you've redefined using CSS will update.

ステップ6

作業が終わったら、[OK]をクリックします。

あなたがあなたの再定義、HTML要素を作成し終わったら、ページのHTML要素のすべての出現は、今では、CSSルール定義]ダイアログボックスで設定した書式設定を運ぶ。あなたが既に使われているものを再定義しているので、何かにあなたの書式を適用する必要は、ありません。それだけでなく、前に戻って道をある時点であなたのページにこのHTML要素を挿入する必要があります、それはまたあなたのCSSの制御下になります。それは仕事に非常に強力で非常に効率的な方法です。

これはHTML要素だけを再定義での作業を簡単に紹介ですが、彼らはウェブデザイナーのツールボックスのような重要な部分だなぜ、願わくはあなたが見ることができます。彼らはあまりにも、で動作するようにとても簡単です。ちょうど10-20分間、Dreamweaverで彼らと少しいじくりまわすと、私はあなたがそれらでスピードアップに違いない。

今、私は2つの主要なルールのタイプで私たちのDreamweaverでCSSを見て、この議論を継続することを切望んだけど、私たちは、クラスルールでの作業を見てみましょう第2部で私に参加。そこにあなたを参照してください!

パート2を待つことができないのですか?あなたがする必要はありません!さらに高度なチュートリアルがすぐに来て、その間にこのDreamweaverのチュートリアルをチェック!

Comments (0)

You must be logged in to comment. Login Now

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: