انتقالات CSS3 في Dreamweaver CS6

• أبريل 23, 2024

مع إضافة HTML5 و CSS3 ، أصبحت مواقع الويب التفاعلية هي المتوقع. الآن ، مع Dreamweaver^R CS6 ولوحة CSS Transitions الجديدة ، يمكنك إنشاء تأثيرات تفاعلية خاصة بك دون الحاجة إلى كتابة أي كود. الإخراج من هذه العملية هو CSS3 فقط ، بدون جافا سكريبت. لذلك ، لا داعي للقلق إذا قام العارض بتمكين JavaScript. يمكن أن تلعب التحولات التي أنشأتها Dreamweaver في أي متصفح ويب حديث.

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

1. خطوتنا الأولى هي تحديد العنصر الذي نود تطبيق الانتقال عليه. في مثالنا سيكون رابط القائمة.
   
   
2. انقر على Window - CSS Transitions لفتح اللوحة.
   
   
3. في لوحة CSS Transitions ، انقر فوق علامة الجمع لإضافة انتقال.
   
   
4. في مربع الحوار New Transition ، يمكننا استخدام قائمة Target Target للاختيار من الإعدادات المسبقة أو الكتابة باسمنا الخاص بالنقل. دعنا نكتب الاسم.
   
   
5. بعد ذلك ، نحتاج إلى اختيار الإجراء الذي سيؤدي إلى الانتقال. من قائمة Transition On ، اختر Hover بحيث يتم تشغيل الانتقال عندما نضع مؤشر الماوس فوق الرابط. تشمل الخيارات الأخرى ما يلي: نشط ، محدد ، معطل ، مُمكّن ، تركيز ، تحوم ، غير محدد والهدف.
   
   
6. لخيار القائمة ، لدينا خياران. دعنا نختار الأول.
   
   استخدم نفس الانتقال لجميع الخصائص
   استخدام انتقال مختلف لكل الممتلكات
   
   
7. بالنسبة إلى مدة الانتقال وتأخيره ، يمكننا استخدام الثواني أو المللي ثانية. لنقم بتعيين المدة إلى ثانية واحدة والتأخير إلى 0.05 ثانية.
   
   
8. بالنسبة لوظيفة التوقيت ، لدينا عدة خيارات للتخفيف. دعنا نختار تخفيف.
   
   
9. لإضافة خاصية CSS ، انقر فوق علامة الجمع واختر واحدة من القائمة المنبثقة. دعنا نختار لون الخلفية.
   
   
10. بمجرد اختيار العقار ، يمكننا ضبط القيمة النهائية لعملية النقل. وفقًا للخاصية التي اخترناها ، ستقدم لنا قائمة القيمة النهائية القائمة المقابلة لتلك الخاصية. للحصول على لون الخلفية ، نحصل على Color Picker. إذا أضفنا خاصية Font-Weight ، فسنحصل على قائمة بالأوزان المحددة مسبقًا.
    
    
11. أخيرًا ، نحتاج إلى اختيار مكان إنشاء الانتقال. خياراتنا هي هذه الوثيقة فقط أو ملف ورقة أنماط جديد. دعنا نستخدم الأول.
    
    

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

إذا تحققنا من عرض الشفرة ، فسنرى أنه تمت إضافة فئة morph إلى الرابط.

عندما نمرر الماوس فوق الرابط في طريقة العرض Live ، سيتغير لون الخلفية.

لكن ماذا لو احتجنا إلى تعديل المرحلة الانتقالية؟ يمكننا القيام بذلك عبر لوحة CSS Transitions.

1. حدد انتقال a.morph وسيصبح رمز "التحرير" نشطًا (رمز القلم الرصاص).
   
   
2. انقر فوق أيقونة "تحرير" لفتح مربع الحوار "تحرير النقل". هنا يمكننا تغيير القيم حسب الحاجة أو إضافة خاصية جديدة وقيمة نهاية.
   
   

الآن وبعد أن تم إنشاء انتقال morph ، يمكننا تطبيقه بسهولة على عناصر أخرى لأنه متوفر الآن من قائمة Target Target.

* قدمت Adobe نسخة من هذا البرنامج إلي لأغراض المراجعة.

حقوق النشر 2018 Adobe Systems Incorporated. كل الحقوق محفوظة. أعيد طبع (لقطات) شاشة منتج Adobe بإذن من Adobe Systems Incorporated. Adobe و Photoshop و Photoshop Album و Photoshop Elements و Illustrator و InDesign و GoLive و Acrobat و Cue و Premiere Pro و Premiere Elements و Bridge و After Effects و InCopy و Dreamweaver و Flash و ActionScript و Fireworks و Contribute و Captivate و Flash Catalyst و Flash Paper هي / هي إما [a] علامة تجارية مسجلة أو علامة تجارية لـ Adobe Systems Incorporated في الولايات المتحدة و / أو البلدان الأخرى.

تعليمات الفيديو: 8 تكويد الموقع بإستخدام الدريم ويفر مقدمة HTML & CSS (أبريل 2024).