All Articles Dreamweaver
تعلم CSS في ملف دريمويفر الجزء 1 : مطورة عناصر 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

تعلم كيفية العمل مع المغلق هو في غاية الأهمية لبناء المواقع المعاصر. انها واحدة من تلك الأشياء التي كنا ، نحن والمصممين ، وتضطر إلى الاحتماء والتعلم في مرحلة ما. وحتى بعد أن تتقن الأساسيات ، لا يزال هناك مجال للنمو والتوسع. يمكنك التعرف على خصائص جديدة أو كيفية تحقيق نتائج محددة ، ويمكنك اكتشاف تقنيات المغلق لحفظ ك "ن الهزيل يعني ممكن.

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 والأساليب ، والمصور والأنماط... كلمة هيك مايكروسوفت حتى والأساليب. النمط هو ببساطة عبارة عن مجموعة من خيارات التنسيق. على سبيل المثال ، قد يكون لدينا أسلوب يسمى "التركيز" ، وضمن التركيز قمنا بتعيين الخط ، وبحجم ، ولون. عند هذه النقطة ، يمكننا أن نبدأ بتطبيق التركيز طوال الوثيقة لدينا ، وبطبيعة الحال ، أي وقت مضى حيث نستخدمها ، ونحن سوف تحصل على نفس الخط والحجم واللون المستخدمة. إذا نعود وإجراء تغيير على نمط التركيز الأصلي ، ثم التنسيق التحديث على الفور في أي وقت مضى حيث تم استخدامه في الوثيقة لدينا.

هذه هي الطريقة أساليب العمل التقليدية. ومع ذلك ، CSS يأخذ هذه الفكرة إلى أبعد من ذلك. بدلا من العمل مع الأنماط داخل صفحة واحدة فقط ، مع المغلق يمكنك تطبيق مجموعة من القواعد لديك مجموعة من الصفحات -- أو لجميع أنحاء صفحات موقعك. تحرير واحدة من القواعد الخاصة بك ، وهذا التغيير سوف تموج عبر الموقع بأكمله بأسرع ما يمكنك اختيار "ملف

الآن هذه هي القوة!

وهناك عدد قليل نقاط سريعة أخرى قبل أن ننتقل. أولا ، يتم استخدام مصطلح "نمط" ومصطلح "القاعدة" بشكل متبادل في Dreamweaver والمغلق. أحيانا سوف دريمويفر استخدام مصطلح "نمط" ، وتارة أخرى أنها سوف تستخدم "القاعدة". خلط العديد من المستخدمين الجدد لهذا دريمويفر وتحمل نتحدث عن شيئين مختلفين. انها ليست كذلك! الأنماط والقواعد هي الشيء نفسه.

الثانية ، ويشار إلى قائمة من القواعد على أنها ورقة النمط. يمكن إما أن يكون موجودا أوراق الأنماط داخل صفحة HTML معينة (وهذا ما يسمى ورقة نمط الداخلية) أو حفظه كملف منفصل خارج صفحاتك (وتسمى ورقة نمط خارجية). هناك أشياء كثيرة بارد يمكنك القيام به مع اسلوب صحائف ، ونحن نتحدث عنها بالتفصيل أكثر من ذلك بكثير في دريمويفر CS5 101 : كور دريمويفر CS5 .

الآن أن نفهم كيف أنماط العمل ويكون لها معنى ما هي أوراق الأنماط حول كل شيء ، ينبغي أن نناقش هذين النوعين من الأنماط الأولية CSS يمكننا العمل مع : تعريف عناصر HTML ، والقواعد الطبقية. كل قوي جدا ، ولها استخدامات محددة. دعونا نلقي نظرة.

مطورة نظرة على عناصر HTML

تعريف عنوان دعونا عناصر HTML الأولى. هذا هو النوع المفضل من نمط لأن ما يفعلونه هو اتخاذ عادي ، HTML مملة واسحبه من العصر الحجري في القرن 21 مع خطوط قليلة من التعليمات البرمجية. ولله الحمد بالنسبة لنا ، دريمويفر ستكون القيام بجميع رفع الأحمال الثقيلة ، لذلك إذا كنا لا نريد ، ونحن لم يكن لديك لمعرفة أي رمز.

مع إعادة تحديد عناصر 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

في مربع الحوار قاعدة جديدة المغلق الذي يظهر ، اختر علامة (يعيد تعريف عنصر HTML) من القائمة المنسدلة نوع محدد أسفل القائمة.

الخطوة 3

في الحقل اسم محدد ، اكتب في اسم عنصر HTML الذي تريد السيطرة.

عندما كنت اكتب في اسم العنصر ، ومن المؤكد أن يستبعد أقواس زاوية. وبعبارة أخرى ، إذا أردت السيطرة "

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

بدلا من كتابة اسم للعنصر ، يمكنك اختيار من القائمة يطير بها على الجانب الأيمن من الحقل اسم محدد.

الخطوة 4

من القائمة المنسدلة تعريف القاعدة في الجزء السفلي من مربع الحوار ، اختر إذا كنت ترغب في حفظ قاعدة البيانات الجديدة في ورقة نمط الداخلي (هذا المستند فقط) أو ورقة نمط خارجية (ورقة نمط جديد ملف). أو ، إذا كان لديك بالفعل ورقة نمط خارجية تعلق على الصفحة الخاصة بك ، يمكنك اختيار لحفظه هناك عن طريق اختيار اسمها.

انقر فوق موافق.

الخطوة 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

عند الانتهاء من ذلك ، انقر فوق موافق.

عند الانتهاء من إنشاء الخاص تعريف عنصر HTML ، كل تواجدات عنصر HTML على صفحة تحمل الآن على التنسيق الذي تقوم بتعيينها في مربع الحوار تعريف القاعدة CSS. ليس هناك حاجة لتطبيق التنسيق الخاص بك إلى أي شيء ، لأنك إعادة شيء بالفعل قيد الاستخدام. ليس ذلك فحسب ، ولكن يجب عليك ان تذهب الى الوراء وادخال هذا العنصر إلى صفحة HTML الخاص في مرحلة ما على الطريق ، وسوف تكون أيضا تحت سيطرة المغلق الخاص بك. انها وسيلة قوية جدا وفعالة جدا في العمل.

على الرغم من أن هذا هو مجرد مقدمة موجزة للعمل مع إعادة تحديد عناصر HTML ، ونأمل يمكنك ان ترى مثل هذا السبب في انهم جزء مهم من أدوات مصمم ويب. انهم من السهل جدا للعمل مع ، أيضا. عزف قاب قليلا معهم في Dreamweaver لمدة 10-20 دقيقة ، وأنا متأكد من أنك سوف تصل إلى سرعة معهم.

الآن ، وأنا حريصة على مواصلة دينا نظرة على CSS في Dreamweaver وهذا النقاش حول هذين النوعين القاعدة الأولية ، والانضمام لي في ذلك الجزء 2 حيث سنقوم نلقي نظرة على العمل مع النظام الطبقي. أراك هناك!

لا نستطيع انتظار الجزء 2؟ ليس لديك إلى! تحقق من هذا البرنامج التعليمي دريمويفر في غضون ذلك ، مع دروس أكثر تقدما قريبا!

Comments (0)

You must be logged in to comment.

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: