هدف التطبيق: إنشاء تأثيرات خاصة للنص
برنامج التطبيق: Dreamweaver MX
صعوبة التشغيل: ★★☆☆☆
أداة إنشاء صفحات الويب شائعة الاستخدام لا يستطيع Dreamweaver MX إنشاء صفحات ويب فحسب، بل يمكنه أيضًا استخدام مرشحات CSS لإجراء تأثيرات خاصة بسيطة على النص أو الصور. دعونا نلقي نظرة على بعض الأمثلة لمعرفة كيفية إنشاء نص تأثيرات خاصة في Dreamweaver.
يقومHalo Word
أولاً بتشغيل برنامج Dreamweaver، وإدراج جدول 1×1 في مستند جديد، وتعيين الحد إلى 0، ثم إدخال النص الذي يحتاج إلى تعديل.
انقر فوق "Design → CSS Style" في اللوحة العائمة الموجودة على اليمين لفتح هذه اللوحة العائمة.
الأزرار الأربعة الموجودة في الركن الأيمن السفلي من اللوحة هي: إضافة أنماط CSS وإنشائها وتحريرها وحذفها.
ملاحظة: في Dreamweaver، يمكن استخدام مرشحات CSS فقط على الكائنات ذات قيود المساحة، مثل الجداول والخلايا والصور وما إلى ذلك، ولكن لا يمكن استخدامها مباشرة على النص، لذلك نحتاج إلى وضع النص الذي يجب إضافته بعلامات خاصة التأثيرات الموجودة في الجدول مسبقًا، ثم قم بتطبيق أنماط CSS على الجدول لإنشاء تأثيرات خاصة على النص.
الشكل 1 قم بإنشاء نمط CSS جديد
انقر فوق زر نمط CSS جديد، وسيظهر مربع الحوار الموضح في الشكل 1.
حدد "إنشاء نمط مخصص" لعنصر "النوع"، وحدد "فقط لهذا المستند" لـ "محدد في"، ثم انقر فوق "موافق" ليظهر مربع حوار تعريف نمط CSS (الشكل 2، يمكننا ذلك). تحديد الخط وحجم الخط واللون والمحتويات الأخرى، في هذا المثال نختار الخط ليكون نصًا رسميًا، والحجم ليكون 50 بكسل، واللون ليكون أبيض.
الشكل 2 لتحديد أنماط CSS
لإنتاج تأثيرات نصية، فإن أهم شيء هو الإعدادات الموجودة في لوحة الامتداد (الشكل 3) يتم إدراج جميع مرشحات CSS في المرشح ضمن "التأثيرات المرئية"، والتي يمكن أن تؤدي إلى ذلك النص له تأثير حافة متوهجة. تنسيق بناء الجملة لمرشح التوهج هو: Glow(Color=?, Strength=?)، الذي يحتوي على معلمتين: اللون يحدد لون الهالة. يمكنك استخدام الرموز السداسية العشرية مثل ffffff، أو كلمات مثل Red وYellow. تمثل القوة شدة الإضاءة التي تتراوح من 0 إلى 255. في هذا المثال قمنا بتعيين اللون إلى الأحمر، وكثافة الإضاءة إلى 8، ثم موافق.
الشكل 3 بعد ضبط مرشح التوهج
، سنطبق نمط CSS هذا على الجدول. حرك المؤشر إلى الخلية، وانقر فوق التسمية الموجودة في الزاوية اليسرى السفلية من
نافذة
المستند لتحديد الخلية، ثم انقر فوق النمط الذي تم إنشاؤه حديثًا في لوحة أنماط CSS، وفي هذا الوقت، تتغير التسمية للإشارة إلى نمط CSS تم تطبيقه على الخلية.لا يمكننا رؤية التغيير في نافذة المستند، اضغط على المفتاح F12 للمعاينة في IE، وسيظهر التأثير (الشكل 4).
الشكل 4 ماذا عن تأثير الهالة الكلماتية
، فهو ليس أقل جودة من تأثير المرشح في Photoshop. إن وضع عدد قليل من هذه الكلمات ذات المؤثرات الخاصة على صفحة ويب سيجعل صفحة الويب أكثر جمالاً، ويمكننا أيضًا استخدام مفتاح PrintScreen لالتقاط الشاشة، ثم لصقها وحفظها في برنامج الرسم لجعلها صورة منفصلة.
هناك نوعان من مرشحات CSSلكلمات الظل
التي يمكن أن تنتج تأثيرات ظل على النص، وهما Drowshadow وShadow، وتختلف التأثيرات التي تنتجها قليلاً.
خطوات إنشاء كلمات الظل هي في الأساس نفس خطوات إنشاء كلمات الهالة، كل ما عليك فعله هو إعادة تحديد مرشح في نمط CSS.
بناء جملة عامل التصفية Drowshadow كما يلي: DropShadow(Color=?, OffX=?, OffY=?, Positive=?).
من بينها، يمثل اللون لون الظل، معبرًا عنه برقم سداسي عشري؛ ويمثل OffX وOffY على التوالي مقدار انحراف الظل عن موضع النص، بالبكسل؛ أما الموجب فهو قيمة منطقية، ويمثل 1 إنشاء الظلال لجميع الألوان المعتمة العناصر، 0 تمثل إنشاء ظلال مرئية لجميع العناصر الشفافة.
الشكل 5 تأثير كلمة الظل
على سبيل المثال، إذا تم ضبط الفلتر على DropShadow (اللون=6699cc، OffX=2، OffY=2، Positive=1)، فسيكون التأثير كما هو موضح في الشكل 5.
يوفر لنا مرشحقناع الكلمات
CSS أيضًا وظيفة القناع، والتي يمكنها معالجة جزء النص إلى قناع، إذا تم استخدام صورة مناسبة في الخلفية، فيمكن إنتاج تأثير نص مجوف جميل.
قم بإدراج جدول 1×1 في نافذة المستند، وانقر فوق الملصق الموجود في الزاوية اليسرى السفلية من نافذة المستند لتحديد الجدول بأكمله، ثم حدد صورة مناسبة في صورة الخلفية لمفتش الخصائص (كما هو موضح في الشكل 6)، و ثم أدخل النص المطلوب.
الشكل 6
بعد ذلك نقوم بإضافة مرشح قناع للخلية، الخطوات مشابهة للمثالين السابقين. حدد قناع (اللون=؟) في الفلتر. تحدد هذه المعلمة لون القناع الذي نختاره.
ملحوظة: اختيار لون النص في هذا المثال ليس مهمًا، لأنه سيتم تجويف النص في التأثير النهائي ولن يتم عرض اللون.
الشكل 7 بعد تعيين تأثير كلمة القناع
، قم بتطبيق نمط CSS هذا على الخلية، ثم اضغط على المفتاح F12 لرؤية التأثير (الشكل 7).
ملاحظة: تتم إضافة صورة الخلفية إلى الجدول بأكمله وتتوافق مع التسمية، بينما تتم إضافة نمط CSS إلى الخلية وهو التسمية.
لإنشاء أحرفديناميكية
، نحتاج إلى استخدام مرشح Blur، والذي يُستخدم لإنتاج تأثير التمويه. تنسيق بناء الجملة الخاص به هو Blur(Add=?, Direction=?, Strength=?). المعلمة Add هي قيمة منطقية بشكل عام، عند استخدام المرشح للصور، فإنه يأخذ 0، وعندما يتم استخدامه للنص، فإنه يأخذ 1؛ يمثل الاتجاه اتجاه التمويه، وتمثل الوحدة الزاوية قيمة حركة التمويه، والوحدة هي البكسل. على سبيل المثال، إذا قمنا بتعريف Blur(Add=1, Direction=90, Strength=150)، يمكنك رؤية التأثير كما هو موضح في الشكل 8 في المعاينة.
الشكل 8: تأثير الكلمات الديناميكي
في الواقع، يمكن أيضًا استخدام العديد من المرشحات في CSS لتعديل الصور، مثل مرشح Blur، الذي يمكن أن ينتج تأثيرًا ضبابيًا على الصور. إذا تمكنا من تطبيق هذه المرشحات بمهارة، فيمكننا في بعض الأحيان إنشاء تأثيرات صور جيدة جدًا بدون برامج معالجة الصور الاحترافية.