All Articles Dreamweaver
خلق النص العظمى مع CSS3 في دريمويفر
David Smith on Wed, February 29th 0 comments
Want to create great looking text in Dreamweaver, but feeling stifled by the CSS styles panel? David Smith comes to the rescue with CSS style tips which will set free your inner designer!

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

حتى في هذه المقالة ايم ذاهب الى تبين لكم بعض المغلق لإضافة إلى أساليب الخاص في Dreamweaver التي من شأنها خلق عظيم حقا بعض التصاميم.

دعونا نبدأ من خلال خلق علامة الدرجة التي سوف تحتوي على هذا النمط هائلة حول لإنشاء.


الخطوة 1 - إضافة الدرجة AP

بدءا من وثيقة HTML فارغة فتح لوحة إدراج وحدد لها تخطيط. من تخطيط خيارات اختيار رسم AP الدرجة.

Div drawn

شعبة رسمها


استخدام أداة لرسم الدرجة ا ف ب (والذي هو مجرد بطاقة الدرجة مع نمط رقم # تطبيقها تلقائيا تحتوي على موقف والمعلمات حجم). استخدام لوحة ملكية في حجم الدرجة AP مع الطول: 400px والعرض: 400px.


الخطوة 2 - اسم الدرجة AP

فتح لوحة عناصر AP وإعادة الاسم لAPDiv1 إلى MyStyle. فتح لوحة النمط المغلق، وسوف تقوم حد ذاته أن إعادة تسمية الدرجة AP أيضا إعادة أسماء MyStyle نمط معرف. هذا هو النمط الذي سيتم تحريره.


الخطوة 3 - البحث في قانون CSS

التحول الى وجهة النظر انقسام بحيث يمكنك رؤية كل من الصورة وكنت قد خلق رمز. انتقل إلى أعلى إلى القسم وسوف ترون قسما من أبرز رمز الوردي الذي يقول MyStyle # {}. هذا هو المغلق الخاص بك وجميع الإعدادات لأنه أنت على وشك خلق سيجلس في الفترات الفاصلة بين البلدين {}.


الخطوة 4 - إضافة بعض المحتويات

لتوفير الوقت والطباعة، النسخ واللصق عن فقرة من النص في الدرجة من خلال النقر على الدرجة ا ف ب تعادل في طريقة عرض التصميم، وبالتالي فإن المؤشر تصبح نشطة وملحة قيادة-V للصق.


إضافة حد 3px على طول الطريق حول بإضافة هذا السطر من التعليمات البرمجية بين {}:

الحدود: 3px صلب # 999؛


الخطوة 5 - جولة في الزوايا

إضافة هذه الأسطر من التعليمات البرمجية إلى النمط المسمى MyStyle # لإنشاء تدوير زوايا 20px في مجموعة من برامج التصفح:

بكت، الحدود، دائرة نصف قطرها: 20.0px؛

MOZ-الحدود، دائرة نصف قطرها: 20.0px؛

-O-للحدود دائرة نصف قطرها: 20.0px؛

MS-الحدود دائرة نصف قطرها: 20.0px؛

حدود دائرة نصف قطرها: 20.0px؛


متعود دريمويفر عرض هذه الزوايا حتى نراهم حفظ الصفحة ومعاينة في مستعرض.

rounded corners

زوايا مدورة


TIP: زيادة حجم دائرة نصف قطرها نصف بالضبط من العرض الخاص والارتفاع (حتى في هذه الحالة 200px) ومعاينة مرة أخرى .... يا تحصل على دائرة الكمال!


الخطوة 6 - التدرج الخلفية

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

gradient background

التدرج الخلفية


سوف التعليمات البرمجية التالية إنشاء هذه الخلفية الانحدار:

لون الخلفية: # 666666؛

الخلفية صورة:-MOZ الخطية، الانحدار (أعلى، # 666666، # 333333 40.0٪)؛

الخلفية صورة:-بكت الخطية، الانحدار (أعلى، # 666666، # 333333 40.0٪)؛

الخلفية صورة:-O-الانحدار الخطي (أعلى، # 666666، # 333333 40.0٪)؛

الخلفية صورة: MS-الانحدار الخطي (أعلى، # 666666، # 333333 40.0٪)؛

الخلفية صورة: الانحدار الخطي (أعلى، # 666666، # 333333 40.0٪)؛


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


الخطوة 7 - تعزيز النص

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

drop shadow

شبح الهبوط


ويضيف هذا الرمز كان لون الظل والإسقاط:

اللون: # FFFFFF؛

النص الظل: 2px 2px 3px # 000000؛


الخطوة 8 - تحسين الخط؟

وأضاف أخيرا أنا أفضل الخط وبعض الحشو، لإنشاء بعض المساحة حول النص.

Better text

أفضل نص


بإضافة هذه الأسطر:

الخط الوزن: طبيعي؛

مواءمة النصوص: غادر؛

الخط بين أفراد الأسرة: جورجيا، الرقيق؛

حجم الخط: 18.0px؛

خط الطول: 140٪؛

الحشو: 10px؛


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

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



Related Videos
Comments (0)

You must be logged in to comment.

EDM Production Tips
Logic Pro X 402
Dream It. Do It.
Do you want to learn EDM Production Tips?
Yes, I want to learn!
No Thanks, I just want to read the article.
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: