يمكن القول أن الروابط النصية هي أكثر عناصر الصفحة شيوعًا على صفحات الويب. يتم وضع خط تحت أنماط الروابط النصية الافتراضية. وقد يؤدي هذا المظهر غير المتغير إلى رغبة العديد من الأصدقاء في تغييره ليناسب الصفحة بأكملها نتيجة لذلك لقد تم استخدامها على نطاق واسع، ويمكن الآن تحقيق هذه الرغبة بسهولة بالغة. سأقدم لك اليوم كيفية استخدام أوراق الأنماط لإنشاء تأثيرات ارتباطات نصية ملونة. سأقدمه للجميع في الفصول الابتدائية والمتقدمة والمتقدمة. سيتم إكمال جميع تأثيرات نمط الارتباط في محرر الأنماط في Dreamweaver. تأثير تصفح نمط الارتباط كما هو موضح أدناه؛ لتصفح صفحة معينة، يرجى الاطلاع هنا
1. التحضير
سنقوم أولاً بإنشاء نمط رابط أساسي، وستضيف الأنماط الأخرى فئة فئة مخصصة بناءً على ذلك.
1. اضغط على Shift+F11 لفتح لوحة النمط وانقر فوق الزر New Style، كما هو موضح في الشكل 1؛
2. حدد استخدام محدد CSS في خيار الكتابة لإنشاء نمط رابط افتراضي، كما هو موضح في الشكل 2؛
3. كما هو موضح في الشكل 3، قم بتعيين نمط الارتباط الافتراضي على عدم التسطير، والخط على Song Dynasty 9pt، وعدم استخدام ألوان أخرى، وما إلى ذلك. وسنقوم بتعيينه بشكل منفصل لكل فئة لاحقًا.
4. تحديد فئة النمط. يحدد كل نمط من أنماطنا أدناه فئة منفصلة ويخصصها لنص الرابط. الخطوات هي كما يلي: انقر فوق "إضافة" لفتح لوحة نمط التعريف الجديد، وحدد "إنشاء نمط مخصص (فئة)" لتحديد فئة النمط الخاصة بك. كما هو مبين في الشكل 4؛
5. أضف فئة نمط إلى نص الارتباط. حدد نص رابط في Dreamweaver، وحدد التسمية على شريط تحديد التسمية السريعة أسفل النافذة، وانقر بزر الماوس الأيمن فوق التسمية، وحدد Set Class لتعيين النمط المخصص لنص الارتباط، كما هو موضح في الشكل 5؛
6. طريقة أنماط نص الارتباط الأخرى هي نفسها، ولن أقدمها مرة أخرى لاحقًا. في هذا البرنامج التعليمي، يمكن للأصدقاء إنشاء أنماط الارتباط الخاصة بهم لتحديد حالة التمرير. لن أعرضه بعد الآن، فقط أدخل [.t1:hover] مباشرة عندما يُطلب منك التعريف.
2. نمط الارتباط الأساسي
سنكمل هذا الجزء من تأثير الارتباط بالكامل في فئة النوع لمحرر النمط، ولن أخوض في تفاصيل حول كيفية إنشائه وإعداده، وسأعرض لك فقط مخطط اللوحة المكتمل وأعطيك مقدمة مختصرة.
1. الرابط العادي. كما هو مبين في الشكل 6؛
يتم تعيين الروابط العادية في العنصر الأول. النوع في فئة الفئة بمحرر النمط. يحدد اللون لون خط الرابط، ويحدد الديكور نمط التسطير للارتباط، والذي ينقسم إلى الفئات التالية:
تسطير: تسطير تسطير: خط فوقي: يتوسطه خط وميض: سطر وامض لا شيء: لا يوجد تسطير
يتم تحقيق العديد من أنماط الارتباط الأخرى في هذا القسم عن طريق تغيير مجموعة الحدود.
2. لا توجد روابط تحتها خط، كما هو موضح في الشكل 7؛
3. رابط مزدوج تحته خط، كما هو موضح في الشكل 8؛
4. الروابط التي يتوسطها خط، كما هو موضح في الشكل 9؛
3. أنماط الارتباط المتقدمة
بعد ذلك، سأقدم طريقة بديلة لتعريف نمط الارتباط. تستخدم هذه الطريقة بشكل أساسي سمة الحدود في ورقة الأنماط لاستبدال تسطير الروابط العادية، نظرًا لأن الحدود تحتوي على المزيد من معلمات وأنماط التحكم، يمكن تنفيذ بعض الوظائف الخاصة. دعونا نلقي نظرة على اللوحة أدناه، كما هو مبين في الشكل 10؛
يتضمن خيار الحدود ثلاثة أجزاء: العرض (عرض الخط)، واللون (لون الخط)، والنمط (نوع الخط)، ويمكن لكل جزء تعيين معلمات مختلفة لحدود مختلفة. وهذا تأثير مستحيل.
نحتاج إلى تذكير الجميع بأن هناك شرطًا ضروريًا لاستخدام هذه الطريقة لتحديد أنماط الارتباط: يجب تحديد سمة Box في النمط، كما هو موضح في الشكل 11؛
وذلك لأن Border هو عنصر كتلة في النمط، ويجب علينا أولاً تحديد عنصر كتلة قبل أن يتمكن Border من العمل. نحتاج فقط إلى تحديد خيار العرض أو الارتفاع في المربع بشكل تعسفي. يمكنك تجربة القيم المحددة لرؤية التأثير الذي حددته على أنه 0 هنا. دعونا نرى أي نوع من الآثار يمكن تحقيقها.
1. أنماط الارتباط البديلة. الإعدادات كما هو موضح في الشكل 12؛
2. تخصيص لون التسطير يمكننا تحديد لون مختلف للتسطير والنص، وهذا تأثير لا يمكن تحقيقه باستخدام نص الرابط العادي طالما تم تحديد لون الحدود ولون النص بشكل مختلف، كما هو مبين في الشكل 13؛
3. تخصيص مسافة التسطير. يمكننا ضبط مسافة هذا النوع من الخطوط في فئة Box عن طريق تغيير قيمة Padding. في هذا المثال، قمنا بتعيين Padding—Bottom إلى 5pix، كما هو موضح في الشكل 14؛
4. قم بتخصيص طول الكتابة والمحاذاة. علاوة على ذلك، يمكننا أيضًا تحديد طول الخطوط ومحاذاتها بدقة. افتح فئة Box وضبط العرض على 200، كما هو موضح في الشكل 15؛ قم بتعيين محاذاة النص لفئة الكتلة إلى المركز، وهي محاذاة للوسط، كما هو موضح في الشكل 16؛
5. تخصيص تأثير التسطير المزدوج. قم بتغيير النمط في الحدود لتغيير مظهر التسطير، اضبط النمط على مزدوج وأسفل على 3 بيكسل لتحقيق تأثير التسطير المزدوج. كما هو مبين في الشكل 17؛
4. أنماط الارتباط المتقدمة
من خلال الجمع بين التقنيات المقدمة أعلاه، يمكننا أيضًا إنشاء أنماط ارتباط نصية أكثر تعقيدًا ونقدم أدناه ثلاثة أمثلة.
1. تحديد روابط الكتلة. قم أولاً بإضافة لون خلفية للرابط، كما هو موضح في الشكل 18؛
ثم قم بإضافة أربعة حدود للرابط النصي للحصول على رابط نصي مسطح، كما هو موضح في الشكل 19؛
2. تحديد الروابط النصية التي تشبه الزر. قم بتغيير نمط الحدود وحدد Border-Style في البداية، كما هو موضح في الشكل 20؛
حدد خيار العرض والارتفاع في المربع لتحديد عرض الزر وارتفاعه. حدد الحشو بـ 2 بيكسل لإنشاء تباعد 2 بيكسل بين نص الارتباط والزر، كما هو موضح في الشكل 21؛
3. تحديد الروابط النصية ذات التأثير الخاص. تحتوي ورقة أنماط CSS أيضًا على مجموعة من مرشحات التأثيرات الخاصة. يمكننا دمج المرشحات مع المعلمات السابقة لإنشاء أنماط ارتباط خاصة. في هذا المثال، قمت بإنشاء رابط نصي باستخدام مرشح Blur، مع تأثير الحدود. وكما هو مبين في الشكل 22؛
4. تحديد تأثير تبديل الخلفية الثابتة. يهدف هذا المثال إلى تحقيق تأثير تبديل الخلفية عن طريق تعيين صور خلفية مختلفة للحالة العادية وحالة التمرير لنص الارتباط. انظر الصورة أدناه:
5. تأثير تبديل الخلفية الديناميكية. هذا التأثير هو في الأساس نفس المثال أعلاه، فيما عدا أنه يتم تعريف خلفية صورة Gif الديناميكية في حالة التحويم. وتتطلب هذه الصورة القليل من المهارة، وهي ضبط الحلقة على مرة واحدة، وإضافة إطار في النهاية، وضبط وقت الإطار على قيمة أكبر، مثل 10000. يسمح هذا للرسوم المتحركة بالتنفيذ على جانب واحد ثم التوقف. لتحسين سرعة تنفيذ التأثير، نحتاج أيضًا إلى إضافة سلوك Preload /doc/webpage/images/images في Dreamweaver. يتطلب ذلك فتح لوحة السلوك وإضافة سلوك Preload /doc/webpage/images/images، كما هو موضح في الشكل:
يمكننا التحميل المسبق لجميع الصور الأربع المطلوبة لنمطي الارتباط الأخيرين، كما هو موضح أدناه:
5. ملخص
سأقدم العديد من أنماط الروابط، ومع ضبط حالة التمرير لنص الرابط، يمكنك تحقيق تأثيرات جميلة جدًا، يرجى الاطلاع هنا لتصفح صفحة معينة، وآمل أن يتمكن الأصدقاء من إنشاء المزيد من نص الرابط بناءً على ما ورد أعلاه الأفكار. تذكر أن ورقة الأنماط تشبه جبلًا جليديًا يحتوي على كنوز في إنتاج صفحات الويب. واليوم لم نكشف سوى عن زاوية صغيرة من الجبل الجليدي، وهناك المزيد من الكنوز في انتظارك لتكتشفها.