اليوم ، أصبحت مواقع الويب أكثر ديناميكية وتفاعلية. تتمثل إحدى طرق إضفاء الحيوية على الموقع في إدراج رسوم متحركة مثل صور متحركة. صور متحركة هي صور متحركة قصيرة ومتكررة تنقل المشاعر بشكل مثالي وتجذب انتباه المستخدمين.
إدراج جيف في صفحة ويب هو عملية بسيطة التي يمكن القيام به مع بضعة أسطر من التعليمات البرمجية. واحدة من عناصر هتمل الأساسية المستخدمة لإدراج الصور هي العلامة. لإدراج جيف ، حدد المسار إلى ملف جيف على الخادم في السمة سرك.
يمكنك أيضا إضافة سمات أخرى إلى العلامة لتحديد حجم الصورة المتحركة والنص البديل والمعلمات الأخرى. بفضل هذه السمات ، ستتمكن من التحكم بشكل أفضل في عرض الصور المتحركة على موقع الويب الخاص بك.
- كيفية إضافة جيف إلى هتمل
- تعرف على كيفية تضمين الصور المتحركة على موقع الويب الخاص بك
- الخطوة 1: إعداد جيف
- الخطوة 2: احفظ الصورة المتحركة على الخادم الخاص بك
- الخطوة 3: استخدم العلامة لإدراج الصورة المتحركة
- الخطوة 4: إضافة سمات للتحكم في الرسوم المتحركة
- الخطوة 5: اختبر الصورة المتحركة في المتصفح
- سؤال وجواب
- كيف يمكنني إدراج جيف في هتمل?
- هل يمكنني استخدام أي جيف لتضمين في هتمل?
- هل يمكنني تغيير حجم جيف إدراجها في هتمل?
- ما هو البرنامج الذي يجب استخدامه لإنشاء ملف جيف?
- هل من الممكن إدراج جيف مع الرسوم المتحركة في هتمل?
- هل من الممكن لتسريع أو إبطاء الرسوم المتحركة من جيف إدراجها في هتمل?
كيفية إضافة جيف إلى هتمل
باتباع هذه الخطوات البسيطة ، يمكنك بسهولة إضافة جيف إلى صفحة هتمل الخاصة بك:
- قم بتنزيل الصورة المتحركة على جهاز الكمبيوتر الخاص بك.
- إنشاء مجلد لتخزين جميع الصور الخاصة بك.
- انقل الصورة المتحركة التي تم تنزيلها إلى المجلد الذي تم إنشاؤه.
- افتح مستند هتمل في محرر نصوص.
- الصق الكود التالي في علامة مستند هتمل الخاص بك:
| كود | الوصف |
|---|---|
| هذا الرمز إدراج جيف على صفحة هتمل الخاص بك. يستعاض عن "مسار الصور المتحركة/اسم الصور المتحركة".جيف "إلى المسار الفعلي إلى جيف الخاص بك وإضافة وصف جيف إلى السمة "ألت". |
بعد الانتهاء من كل هذه الخطوات ، احفظ مستند هتمل وافتحه في متصفح. يجب أن تشاهد جيف المضافة على صفحة هتمل الخاص بك.
تعرف على كيفية تضمين الصور المتحركة على موقع الويب الخاص بك
ما الذي يمكن أن يجعل موقع الويب الخاص بك أكثر إثارة للاهتمام وجاذبية? الصور المتحركة! يمكن للرسوم المتحركة جذب انتباه الزوار وإضافة ديناميكيات إلى صفحتك. في هذه المقالة ، سننظر في كيفية إدراج صورة متحركة متحركة على موقع الويب الخاص بك.
الخطوة 1: ابحث عن صورة متحركة مناسبة
قبل أن تبدأ ، سوف تحتاج إلى صورة متحركة متحركة. يمكنك استخدام محرك البحث للعثور على صورة متحركة حول الموضوع الذي تحتاجه. إيلاء الاهتمام لحجم جيف بحيث ليست كبيرة جدا ، حتى لا تبطئ تحميل صفحتك.
الخطوة 2: احفظ الصورة المتحركة على جهاز الكمبيوتر الخاص بك
عندما تعثر على صورة متحركة مناسبة ، انقر بزر الماوس الأيمن عليها وحدد "حفظ الصورة باسم...". حدد مسار واسم الملف الذي تريد حفظ الصورة المتحركة تحته.
الخطوة 3: إنشاء مجلد للصور
لتنظيم المحتوى الخاص بك ، قم بإنشاء مجلد منفصل على خادم الويب أو الاستضافة لتخزين جميع الصور ، بما في ذلك الصور المتحركة. سيساعدك هذا في إدارة الصور بسهولة في المستقبل.
الخطوة 4: أدخل صورة متحركة على صفحتك
.
أمثلة:
. في المثال الثاني ، سيتم تحميل جيف من مصدر بعيد مع عنوان ورل المحدد.
لتقديم وصف نصي للصورة للأشخاص الذين يستخدمون قارئات الشاشة.
، على سبيل المثال:
وهكذا ، عند النقر على جيف ، سيتم إعادة توجيه المستخدم إلى عنوان ورل المحدد.
الخطوة 5: الاختبار والتحسين
لا تنس اختبار صفحتك مع إدراج صورة متحركة متحركة. تأكد من أن يتم عرض جيف بشكل صحيح ولا تبطئ تحميل الصفحة.
إذا كانت الصورة المتحركة الخاصة بك كبيرة جدا وتبطئ تحميل الصفحة ، فيمكنك تحسينها. هناك أدوات مختلفة لضغط صور متحركة دون فقدان الجودة ، على سبيل المثال ، تينيبنغ أو Ezgif.com . تأكد من أن جيف الخاص بك هو الحجم المناسب والجودة لموقع الويب الخاص بك.
الآن لديك كل ما تحتاجه لإدراج صورة متحركة متحركة على موقع الويب الخاص بك. استخدامها لإضافة بعض الحياة والتفاعل إلى صفحتك!
الخطوة 1: إعداد جيف
قبل إدراج جيف في صفحة هتمل ، سوف تحتاج إلى إعداد جيف نفسها. فيما يلي بعض التوصيات لإعداد الصور المتحركة بنجاح:
- حدد الصورة المتحركة المناسبة التي تريد استخدامها على صفحتك. إيلاء الاهتمام لحجمها والقرار.
- تحسين جيف لتقليل حجمها وتحسين أداء تحميل الصفحة. استخدام برامج خاصة لتحسين متحركة ، مثل أدوبي فوتوشوب أو أدوات الإنترنت.
- احفظ الصورة المتحركة بالتنسيق الصحيح. بالنسبة إلى الصور المتحركة ، فإن التنسيق الأكثر شيوعا هو جيف (تنسيق تبادل الرسومات).
قبل المتابعة إلى الخطوة التالية ، تأكد من تحسين الصورة المتحركة الخاصة بك وأن الحجم والدقة المطلوبين لصفحتك.
الخطوة 2: احفظ الصورة المتحركة على الخادم الخاص بك
بعد تحديد الصورة المتحركة المناسبة لصفحة الويب الخاصة بك ، تحتاج إلى حفظها على الخادم الخاص بك. للقيام بذلك ، اتبع الخطوات التالية:
- قم بإنشاء مجلد على الخادم الخاص بك حيث سيتم تخزين الصورة المتحركة.
- الحصول على الوصول إلى الخادم عن طريق عميل بروتوكول نقل الملفات ، على سبيل المثال ، فايلزيلا.
- حدد ملف جيف على جهاز الكمبيوتر الخاص بك واسحبه إلى مجلد على الخادم.
- تأكد من تحميل الصورة المتحركة بنجاح على الخادم.
الآن بعد أن تم حفظ الصورة المتحركة على الخادم الخاص بك ، فأنت على استعداد للانتقال إلى الخطوة التالية — إضافتها إلى صفحة الويب الخاصة بك.
لإدراج صورة متحركة
الآن أن لديك رابط إلى جيف وقمت بتكوين العرض باستخدام كس ، يمكنك المضي قدما في إنشاء ترميز هتمل لإدراج جيف على صفحة ويب.
، وهي العلامة الأكثر شيوعا لإدراج الصور.
هنا مثال:
يشار إلى المسار إلى جيف. يمكنك استخدام المسارات النسبية أو المطلقة اعتمادا على مكان جيف الخاص بك.
يوفر وصفا نص الصورة المتحركة. سيتم عرض هذا النص إذا لم يتم تحميل الصورة المتحركة أو للمستخدمين الذين يستخدمون قارئات الشاشة.
لإدراج صورة متحركة على صفحة ويب:
من المهم أيضا ملاحظة أنه يجب عليك تحديد المسار إلى الصورة المتحركة باستخدام الخطوط المائلة العكسية الصحيحة ، اعتمادا على نظام التشغيل:
- .
- .
انها بسيطة جدا وفعالة.
في الخطوة التالية ، سننظر في سمات إضافية لتكوين السلوك وعرض صور متحركة على صفحة ويب.
الخطوة 4: إضافة سمات للتحكم في الرسوم المتحركة
بعد إضافة ملف جيف إلى صفحة ويب ، يمكنك تخصيص الرسوم المتحركة لذلك باستخدام سمات مختلفة.
فيما يلي بعض السمات الأساسية التي يمكن استخدامها للتحكم في الرسوم المتحركة المتحركة:
- التشغيل التلقائي: تسمح هذه السمة بتشغيل الصورة المتحركة تلقائيا فور تحميل الصفحة.
- حلقة: مع هذه السمة ، يمكنك تعيين الرسوم المتحركة حلقات من جيف بحيث يستمر للعب إلى أجل غير مسمى.
- عناصر التحكم: تضيف هذه السمة عناصر تحكم (تشغيل ، إيقاف مؤقت ، إلخ. حتى يتمكن المستخدم من التحكم في تشغيله.
- ابدأ: باستخدام هذه السمة ، يمكنك تحديد النقطة التي يجب أن يبدأ تشغيلها في الرسوم المتحركة المتحركة.
- النهاية: تسمح لك هذه السمة بتعيين نقطة النهاية في الرسوم المتحركة المتحركة ، وبعد ذلك ستتوقف.
لإضافة هذه السمات إلى الصورة المتحركة الخاصة بك ، ما عليك سوى لصقها في العلامة وتحديد القيم كما هو موضح أدناه:
| السمة | القيمة |
|---|---|
| من التشغيل التلقائي | التشغيل التلقائي |
| حلقة | حلقة |
| الضوابط | الضوابط |
| ابدأ | 0 |
| النهاية | 10 |
على سبيل المثال ، إذا كنت تريد جيف للعب تلقائيا من لحظة 1 وحلقة إلى أجل غير مسمى ، إدراج التعليمات البرمجية التالية:
آمل أن تساعدك هذه السمات في إنشاء رسوم متحركة مثيرة للاهتمام ويمكن التحكم فيها لصورك المتحركة.
الخطوة 5: اختبر الصورة المتحركة في المتصفح
بعد إضافة الرمز بنجاح لإدراج الصورة المتحركة على صفحة الويب الخاصة بك ، تحتاج إلى اختبار النتائج في المتصفح. وهذا سوف يساعد على التأكد من أن يتم عرض جيف بشكل صحيح ويعمل بشكل صحيح.
للقيام بذلك ، اتبع الخطوات التالية:
- افتح صفحة الويب الخاصة بك في متصفح بالنقر فوق عنوان ورل الخاص به أو فتح ملفه المحلي.
- تأكد من تحميل الصفحة بالكامل في المتصفح.
- تحقق من عرض الصورة المتحركة على الصفحة وتشغيلها دون مشاكل. في حالة وجود أخطاء أو عرض غير صحيح ، ارجع إلى الخطوات السابقة وتأكد من إدخال الرمز بشكل صحيح.
- اختبر الصورة المتحركة عن طريق تحريك مؤشر الماوس فوقها. إذا كان يجب أن تبدأ جيف اللعب ، تأكد من أنه يلعب كما هو متوقع.
- تحقق من تشغيل الصورة المتحركة تلقائيا ، إذا تم تحديدها في الكود. إذا كان يجب تشغيل جيف تلقائيا عند تحميل الصفحة ، تأكد من أنه لا.
سيساعدك اختبار الصورة المتحركة في المتصفح على التأكد من عرضها وتشغيلها بشكل صحيح على صفحة الويب الخاصة بك. إذا ظهرت مشاكل ، يمكنك العودة إلى الخطوات السابقة وإجراء جميع الفحوصات اللازمة.
سؤال وجواب
كيف يمكنني إدراج جيف في هتمل?
لإدراج جيف في صفحة هتمل ، استخدم العنصر وحدد المسار إلى ملف جيف في السمة سرك. على سبيل المثال:
هل يمكنني استخدام أي جيف لتضمين في هتمل?
نعم ، يمكنك استخدام أي جيف إذا كان لديك الحق في استخدامه. تحتاج إلى التأكد من أن لديك إذنا لاستخدام الصورة المتحركة ، وأن الصورة المتحركة لا تنتهك حقوق النشر أو القيود الأخرى التي قد تنطبق.
هل يمكنني تغيير حجم جيف إدراجها في هتمل?
نعم ، يمكنك تغيير حجم الصورة المتحركة باستخدام سمات العرض والارتفاع للعنصر. على سبيل المثال: . يرجى ملاحظة أنه عند تغيير حجم الصورة المتحركة ، قد تتغير نسبها.
ما هو البرنامج الذي يجب استخدامه لإنشاء ملف جيف?
هناك العديد من البرامج التي تسمح لك بإنشاء صور متحركة. بعض البرامج الشعبية هي أدوبي فوتوشوب ، الأعرج ، صانع GI على الانترنت. يمكنك اختيار برنامج حسب احتياجاتك ومستوى خبرتك في تحرير الصور.
هل من الممكن إدراج جيف مع الرسوم المتحركة في هتمل?
نعم ، صور متحركة هي بحكم التعريف الصور المتحركة. يمكنك إدراج جيف مع الرسوم المتحركة في هتمل باستخدام العنصر وتحديد المسار إلى ملف جيف في السمة سرك.
هل من الممكن لتسريع أو إبطاء الرسوم المتحركة من جيف إدراجها في هتمل?
لا ، لا يمكنك تغيير سرعة الرسوم المتحركة من جيف دون تغيير ملف جيف نفسه. صور متحركة لها سرعة تشغيل ثابتة ، والتي يتم تحديدها عند إنشائها. إذا كنت بحاجة إلى تغيير سرعة الرسوم المتحركة من جيف ، سيكون لديك لتغيير ملف جيف نفسه باستخدام برامج خاصة.