الأصدقاء، مرحبا بالجميع. اليوم سنواصل إنشاء لافتات في برنامج جوجلمصمم الويب بتنسيق HTML5، مع تأثير ثلاثي الأبعاد.

وهذا أمر مفهوم، يتم عرض اللافتات التي تم إنشاؤها في html5 و css3 على أي شاشة، سواء على أجهزة الكمبيوتر وأجهزة التلفزيون والأجهزة المحمولة. لا يمكن قول الشيء نفسه عن لافتات الفلاش.

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

ونظرا لحقيقة أن الأجهزة المحمولة تستخدم بشكل متزايد لعرض موارد الإنترنت، فهذا مهم للغاية.

لقد وصفت بالفعل العنصر الرئيسي وموضعه على الموقع في المقالة السابقة. لذا سأهتم اليوم بإنشاء تأثير ثلاثي الأبعاد وإعدادات دورية (متكررة). سننظر أيضًا في العديد من إعدادات "الأحداث".

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

التحضير لإنشاء لافتة ذات تأثير ثلاثي الأبعاد.

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

لإنشاء تأثير ثلاثي الأبعاد عالي الجودة، تحتاج أولاً إلى قطع الفراغات في Photoshop، والتي ستحتاج لاحقًا إلى ضمها إلى Google Web Designer.

على سبيل المثال، قمت بإعداد الفراغات التالية:

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

ملحوظة: إذا كنت مهتمًا بعملية إنشاء مثل هذه الفراغات، فاكتب عنها في التعليقات.

من المهم أيضًا التفكير في التكوين العام للشعار والنص. وهذا يحدد كيفية النظر إلى اللافتة ككل.

إنشاء كائن ثلاثي الأبعاد في Google Web Designer.

لذلك، قياسا على المقالة السابقة، قم بتشغيل المحرر وإنشاء مشروع جديد.

يتضمن التأثير ثلاثي الأبعاد صورة مركبة، أي صورة تتكون من عدة قطع موجودة في الإسقاط المطلوب.

يجب دمج هذه الصور المتعددة إما في مجموعة أو وضعها في كتلة DIV. وسيكون فلان على حق. لكن من الملائم بالنسبة لي العمل مع جانب DIV.

الخطوة 1: إنشاء كتلة DIV.

لذلك، لإنشاء كتلة DIV، حدد في اللوحة اليسرى "أداة وضع العلامات (د)".

تأكد من تعيين معرف. وضبط الأحجام باستخدام القسم "ملكيات"في اللوحة اليمنى.

الآن أنت بحاجة إلى تحديد الكتلة. للقيام بذلك، في اللوحة اليسرى حدد "أداة التحديد (الخامس)"وانقر نقرًا مزدوجًا فوق زر الماوس الأيسر الموجود على إطار كتلة DIV. وسوف يتغير اللون إلى اللون الأحمر.

الخطوة 2. ترتيب الصور.

والآن تبدأ العملية الأكثر صعوبة. تحتاج إلى كشف جميع عناصر صورة واحدة.

لدي العناصر التالية تحت تصرفي:

- الجانب العلوي.

- الجانب (يتكون من ثلاثة أجزاء منفصلة).

أولاً، ضع الجانب العكسي (الخلفي) من الصورة وقم بمحاذاته مع المنتصف والحافة العلوية للشعار.

أضف الجانب الأمامي بنفس الطريقة. قم بالمحاذاة والتحويل على طول المحور Z.

نظرًا لأن عرض الجانب هو 4 بكسل (بكسل)، فقد قمت بنقل الجانبين الأمامي والخلفي على طول المحور Z بمقدار 2 بكسل و-2 بكسل. سيوفر هذا فجوة بين الصور.

ملاحظة: راجع لقطات الشاشة لمعرفة أرقام الإزاحة الدقيقة.

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

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

والخطوة التالية هي اصطفاف الزاوية اليسرى العليا.

الآن الجزء المركزي من الجانب.

والزاوية السفلية على الجانب الأيسر.

تأكد من محاذاة جميع العناصر الجانبية عند 90 0 على طول المحور Y.

الآن أنت بحاجة للنسخ الطبقة المرغوبةولصقه مرة أخرى، وإعادة تسميته وتغيير معلمات الموقع، حتى نحصل على عناصر الجانب الأيمن.

للقيام بذلك، حدد صورة في اللوحة السفلية - اضغط على مجموعة المفاتيح CTRL + C (نسخة) والصق النسخة المكررة CTRL + V.

لنبدأ بنفس طريقة الجانب الميداني من الأعلى إلى الأسفل، ولكن فقط للجانب الأيمن.

الغطاء الأيمن العلوي.

لم أقم بعمل الجزء السفلي لأنه غير ظاهر في الصورة.

لقد انتهى العمل الأصعب. الآن يمكنك البدء في إعداد الرسوم المتحركة. كعرض توضيحي مرئي، دعونا نقوم بتدوير الصورة.

إنشاء تأثير التدوير في Google Web Designer.

الخطوة الأولى هي الخروج من كتلة DIV، التي تحتوي على كافة عناصر الصورة. أي أننا عملنا داخل كتلة تحتوي على صور محددة، والآن سنحتاج إلى العمل مع جميع الصور في وقت واحد، وإدارة كتلة DIV.

للبدء، انقر على زر DIV في اللوحة السفلية.

لذلك، في الشاليه الزمني، بالنقر فوق زر الفأرة الأيمن، يمكنك إنشاء إطارين رئيسيين. يجب أن يبدو مثل هذا:

تم ضبط موقع الإطار الأصلي على مقياس Y على -90 0 .

قمنا بتعيين الإطار الرئيسي الأول (الثاني) على مقياس Y على 0 0 .

اضبط الإطار الرئيسي الثاني (الثالث على التوالي) على 90 0 على مقياس Y.

يمكنك التحقق من النتائج. للقيام بذلك، انقر فوق الزر يلعب.

صحيح أن صورتنا ستحدث ثورة واحدة فقط. لكي تدور الصورة باستمرار أو تقوم بعدة دورات، تحتاج إلى تكوين معلمات التدوير.

إعداد ركوب الدراجات في Google Web Designer.

يتيح لك البرنامج تكوين العديد من خيارات التكرار (التكرار). بهذه الطريقة يمكنك إعداد تكرار لجميع عناصر الشعار أو لكل عنصر على حدة.

يمكنك أيضًا قصر الدورة على عدد التكرارات أو جعلها لا نهائية.

في اللوحة السفلية، بجانب كل عنصر هناك رموز "القلعة"، "العين"، "السهم العكسي".

لذلك، لتكوين الدورية، تحتاج إلى النقر فوق الرمز "السهم العكسي".واختر إما عددًا محدودًا من التكرارات أو خيارًا لا نهاية له.

اخترت تكرار الرسوم المتحركة إلى ما لا نهاية. لأنه في المستقبل أريد تكوين "الأحداث"بحيث يتوقف التدوير عند تحريك الماوس ويستمر بعد إزالة المؤشر.

يوقف التدوير عند تحريك الماوس فوق الشعار.

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

وفي الخطوة التالية تختار كمستقبل « الصفحة1". لن يكون هناك خيارات أخرى هناك.

والخطوة الأخيرة هي تحديد الاختصار الذي قمت بإنشائه في المرحلة الأولية.

حفظ الأحداث والتحقق. سيتوقف تدوير الشعار عند تحريك الماوس فوق الإطار الذي تم إنشاء الاختصار فيه.

استئناف التدوير بعد تحريك مؤشر الماوس بعيدًا.

للتأكد من استمرار التدوير بعد تحريك المؤشر إلى الجانب، قم بإعداد حدث آخر.

تم تكوينه بشكل مشابه للإصدار السابق، مع وجود اختلافين فقط.

تم اختيار الحدث "الماوس"— « خروج الماوس".

الحدث - تراجع الماوس

وكإجراء "الجدول الزمني" — « تبديل اللعب".

الإجراء - متابعة

الآن أصبح شعارنا ذو التأثير ثلاثي الأبعاد جاهزًا. ويمكنك التوصل إلى أي عدد تريده من التأثيرات المختلفة.

فقط لا تنس تعيين حدث للنقر بالماوس وفتح الرابط. لم يتم إنشاء اللافتة من أجل الجمال، أليس كذلك؟

في البداية، قد تبدو هذه العملية معقدة، ولكن بعد بضع لافتات، لن يبدو الأمر كذلك بالنسبة لك.

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

مع أطيب التحيات، مكسيم زايتسيف.

1. بطاقة البانر

وصف:

لافتة تحتوي على رسومات مدمجة ونماذج HTML والعديد من الروابط.

نوع الكود:

الإطار، الملصق، اياكس، التمديد.

مزيد من التفاصيل:

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

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

2. إعداد الشعار

قم بإعداد كود HTML للشعار. يمكن أن يكون هذا أي كود HTML، بما في ذلك HTML 5، وهو تخطيط HTML للشعار الذي يحتوي على أنماط CSSورمز جافا سكريبت. من الأفضل وضع JavaScript وCSS داخل كود HTML الخاص بالشعار، بدلاً من تضمينهما كملفات منفصلة. ومع ذلك، إذا لزم الأمر، يُسمح أيضًا باستخدام ملفات منفصلة. يمكنك استخدام كل من الروابط المطلقة للملفات المحملة في الشعار (صور مختلفة وملفات فلاش) والروابط ذات الصلة.

هام: عند استخدام المسارات النسبية للملفات، من الضروري أن تكون جميع ملفات الشعار موجودة في نفس المجلد الذي يوجد به ملف HTML الذي يتم إعداده. أولئك. لا ينبغي أن تظهر مجلدات إضافيةللصور أو ملفات js أو ملفات الوسائط. يجب أن تتطابق أسماء جميع ملفات الشعارات مع .

ملاحظة: بالنسبة للشعارات المستندة إلى رمز IFrame (الأبعاد)، يجب أن يُسمى ملف HTML الخاص بالشعار بـ Index.html .

ملاحظة: إذا كان الشعار يستخدم نصوصًا برمجية إضافية، فيجب أن يكون اسمها مختلفًا عن script.js . الاسم script.js محجوز للبرنامج النصي للتحكم في الشعار.

3. حساب النقرات في اللافتة

افتراضيًا، لا يتم احتساب النقرات في شعار HTML. لحساب النقرات، يجب عليك إجراء تغييرات على ملف HTML للشعار وفقًا لأحد الإرشادات التالية:

• البرامج الثابتة التي تعمل بنظام النقر للنقر لتصميمات HTML
• يفتح محرر النصوصملف HTML للشعار. قم بتضمين ملف html.js:

  إذا كان الشعار موجودًا على خادم جهة خارجية، فحدد المسار الكامل لملف html.js:

  ملاحظة: ليست هناك حاجة لتنزيل المكون الإضافي html.js أو إنشائه بنفسك. تتم استضافة هذا المكون الإضافي على خوادم AdRiver ويمكنك ببساطة توصيله في الملف المُعد.

• لحساب النقرات واتباع الرابط المحدد في النظام عند تحميل الشعار (حقل رابط الشعار)، استخدم وظيفة ar_callLink. يمكن استدعاء الوظيفة عند أي حدث لأي علامة في رمز الشعار، على سبيل المثال: انتقل إلى موقع الويب

  اذهب إلى الموقع

  المعلمات المحتملة:

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

  جميع المعلمات اختيارية.

• لحساب النقرات على الروابط الموجودة في شعار HTML باستخدام رابط النقر AdRiver

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

يجب أن يتطابق حجم الملفات التي تم تحميلها.

ملحوظة: بالنسبة لشعارات HTML الموجودة على الأكواد مع البرنامج النصي للتحكم. اقرأ المزيد.

4.2. تحميل لافتات HTML باستخدام أكواد الامتداد / الملصق / Ajax باعتبارها لافتات عامة 4.2.1. شعار HTML على الملصق/رمز الامتداد

فك.

افتح ملف script.js باستخدام محرر النصوص. قم بإجراء تغييرات على الجزء العلوي من البرنامج النصي، مع وضع علامة على أنه كتلة قابلة للتحرير: var ar_width = "240"; فار ar_height = "400"; var ar_gif_pixel = "";

المتغيرات:

عرض البانر. أدخل القيمة الخاصة بك

ارتفاع البانر. أدخل القيمة الخاصة بك

استدعاء عداد طرف ثالث. إذا لم يكن مطلوبا، اترك القيمة فارغة

احفظ ملف script.js

افتح ملف Index.html من الأرشيف باستخدام محرر النصوص. انسخ كود HTML الخاص بالشعار الخاص بك والصقه في ملف Index.html في الموقع المحدد:

إذا كانت اللافتة تستخدم حروف الأبجدية الروسية، إذن

Banner HTML5 هو شعار يعرض محتوى HTML مخصصًا أو صورة. يمكن أن يكون كود HTML هو المعتاد صفحة HTMLمع الأنماط والنصوص. تناسبها في iframe ولها وصول محدودلمحتويات الموقع.

باستخدام قالب "Banner HTML5"، يمكن إضافة لافتة بطريقتين:
1. بعد تحضير الصورة فقط. إن وجود رابط للانتقال إليه في معلمات الشعار ينظم إمكانية النقر على الصورة.
2. بعد إعداد تصميم HTML في المحرر وفقًا للتعليمات: أو.
إذا تمت إضافة كود HTML وصورة إلى الشعار، فسيتم عرض كود HTML.

المعلمات القابلة للتكوين عند إضافتها إلى ADFOX:
- العرض والارتفاع لللافتة.
- أنماط CSS الخاصة بحاوية الشعار.

HTML التطوير الإبداعي

1. قم بمراجعة متطلبات كود HTML

• الحد الأقصى المسموح به لحجم ملف HTML هو 65000 بايت.
• يفضل وضع JavaScript وCSS داخل كود HTML الخاص بالشعار. إذا تجاوز كود HTML الناتج الحد الأقصى للحجم المسموح به، فستحتاج إلى تقليل الكود عن طريق نقل JavaScript وCSS إلى ملفات منفصلة:
  - حفظ كود js وcss في ملفات منفصلة ذات الامتداد .js أو .css؛
  - يجب ألا يتجاوز وزن الملفات 300 كيلو بايت؛
  - تحميل الملفات إلى علامة التبويب "الملفات" الخاصة بالحملة الإعلانية وتضمين الروابط الناتجة للملفات في كود HTML.

  مثال على ربط ملفات js وcss:

  لا يسمح كود HTML باستخدام مسارات الملفات النسبية.

• يمكن أن يحتوي المشروع على ملف واحد فقط بامتداد .html.
• الحد الأقصى المسموح به لعدد الملفات في المشروع هو 50؛
• أنواع الملفات المسموح بها في المشروع: css، js، html، gif، png، jpg، jpeg، svg، json، flv، mp4، ogv، ogg، webm، avi، swf؛
• الحد الأقصى لحجم كل ملف (ينطبق أيضًا على الملفات الموجودة داخل الأرشيف):
  - 300 كيلو بايت؛
  - 1 ميجابايت لملفات الفيديو.
• يجب أن تحتوي أسماء الملفات على أرقام أو أحرف فقط من الأبجدية الإنجليزية، والشرطة السفلية. لا يجوز استخدام الحروف الروسية والمسافات وعلامات الاقتباس والأحرف الخاصة في اسم الملف؛
• لا يمكنك استخدام الحروف الروسية في أسماء المتغيرات والكائنات.
  الاستثناء الوحيد هو النص الموجود على اللافتة.
• تنسيق المشروع النهائي هو أرشيف مضغوط.

متطلبات الصورة

استخدم صورًا عالية الدقة، فهذا سيؤدي إلى تحسين جودة الشعار بشكل كبير جهاز محمولعلى الرغم من أنه سيقلل من سرعة تحميل البانر.

يمكنك استخدام صور SVG. إنها متجهة، مما يعني أنها ستبدو أفضل على جميع الأجهزة - الهاتف المحمول وسطح المكتب. لديهم أيضًا حجم ملف صغير ويمكن تحريكهم.

تنسيقات الصور المقبولة: png، gif، jpg، svg.
الحد الأقصى لوزن الملف الواحد: 300 كيلو بايت.

2. حدد المحرر الذي ستقوم بتطوير تصميم HTML الخاص بك فيه وانقر فوق الارتباط المناسب. قم بإعداد أرشيف باستخدام تصميم HTML وفقًا للتعليمات:

Adobe Animate CC Editor - شعار بزر واحد

Adobe Animate CC Editor - لافتة بأزرار متعددة

1. قم بتنزيل قالب لافتة بعدة أزرار

2. قم بإنشاء مشروع HTML5 Canvas في Adobe Animate (أو افتح مشروعًا موجودًا)

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

أنظر أيضا:

تعليمات لإضافة زر وتعيين اسم المثيل

زر على المسرح الرئيسي

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

2. في مربع الحوار الذي يظهر، حدد النوع: زر، ويمكن ترك الاسم دون تغيير، ثم انقر فوق موافق.

3. قم بتعيين اسم مثيل لهذا الزر حتى يعمل النقر.

4. اكتب الكود الخاص بهذا الزر في الإجراءات:

Window.buttons.push(//اكتب مسارات الأزرار مفصولة بفواصل، وأضفها في البداية this.button1 //نهاية المساحة المخصصة للأزرار)؛

زر متداخل

1. لنفترض أن الزر موجود داخل رمز آخر، على سبيل المثال داخل مقطع فيلم.
في في هذا المثاليُعطى مقطع الفيلم هذا اسم المثيل "الاسم"

2. انقر نقرًا مزدوجًا فوق الاسم داخل الاسم، وسيكون هناك زر متداخل.

3. عند تحديد المسار لمثل هذا الزر في الإجراءات، ستحتاج إلى إضافة اسم المثيل للكائن بعد هذا الذي تم تضمينه فيه:

Window.buttons.push(// اكتب مسارات الأزرار مفصولة بفواصل، وأضفها في البداية this.name.button1 // نهاية المسافة الخاصة بالأزرار)؛

تعليمات لإنشاء أزرار شفافة

1. حدد العنصر المطلوب وقم بتحويله إلى رمز

2. أدخل اسمًا وحدد النوع: زر

3. انقر نقرًا مزدوجًا فوق الرمز للانتقال إليه:

4. أدخل الإطار الرئيسي في إطار الضرب

5. قم بإزالة محتويات الإطارات العلوية والسفلية

6. الزر الشفاف جاهز:

4. أضف طبقة الإجراءات إلى المشروع (سنضيف رمزًا للأزرار إليه)

5. افتح نافذة لكتابة التعليمات البرمجية

Window.buttons.push(// اكتب مسارات الأزرار مفصولة بفواصل، وأضفها في البداية // نهاية المسافة الخاصة بالأزرار)؛ setAdfox();

إذا كان الزر في المشهد الرئيسي، فاكتب اسم المثيل الخاص به مباشرة بعد ذلك، على سبيل المثال

هذا.زر1

إذا كان الزر موجودًا داخل مشهد متداخل، فبعد ذلك اكتب أولاً اسم مثيل المشهد، ثم اسم مثيل الزر:

This.scene_instance_name.button2

مثال على الكود النهائي في طبقة الإجراءات:

Window.buttons.push(// اكتب مسارات الأزرار مفصولة بفواصل، وأضف هذا في البداية this.button1، this.scene_instance_name.button2 // نهاية مسافة الأزرار)؛ setAdfox();

7. الزر الأول في سطر الكود سوف يستدعي الرابط الأول من ADFOX، والثاني - الثاني، وهكذا.

بالإضافة إلى تصميم HTML الإبداعي، قم بتزويد المدير الذي سيضيف الشعار إلى ADFOX بمعلومات حول مدى تطابق الأزرار وأرقام الروابط.

8. افتح خيارات النشر وقم بتوصيل القالب من النقطة الأولى ونشر المشروع عن طريق تحديد الدليل المطلوب.

9. بعد نشر المشروع، قم بأرشفته بصيغة .zip. تصميمك الإبداعي جاهز للتحميل على شعار ADFOX.

محرر جوجل ويب ديزاينر

يمكن استخدام رمز هذا الشعار كأساس عند إنشاء تصميمات الإعلانات في المحرر.

يحتوي القالب على برنامج نصي adfox_HTML5.jsومجموعة من المعلمات للتشغيل الصحيح للانتقالات وعدد الأحداث:
%reference%، %user1%، %eventN%، حيث N هو رقم الحدث من 1 إلى 30.

2. انقر فوق المعالجة.

يتم تعيين جميع الأحداث لعناصر رسوم متحركة محددة من خلال علامة التبويب "الأحداث".

يتم استخدام مكون المنطقة التفاعلية لاستدعاء الإجراءات.
قم بإضافته وحدد منطقة اللمس للحدث → اللمس/النقر (أو "منطقة النقر > اللمس/النقر" في النسخة الإنجليزية).

في علامة التبويب "الرمز المخصص"، حدد استدعاء وظيفة النقر.

2.1 في حالة استخدام زر انتقال واحد:

CallClick();

2.2 إذا كان هناك عدة أزرار انتقالية:

CallClick(n);

حيث ن

2.3 إذا كنت بحاجة إلى تشغيل حدث من رسم متحرك دون انتقال، استخدم الكود التالي:

CallEvent(n);

حيث n هو رقم الحدث الذي يجب استدعاؤه.

ميزة تنفيذ لافتة مطاطية (مطاطية).

بحيث تمتد اللافتة عبر عرض الحاوية التي ستوضع فيها على الموقع، على اللوحة ملكياتبالنسبة للموضع والأبعاد، حدد النسب المئوية بدلاً من وحدات البكسل.

استخدم أيضًا الخيارات "محاذاة إلى الحاوية"و "تخطيط المطاط"على اللوحة العلويةأدوات.
إذا قمت بتمكين Fluid Layout قبل استخدام أي أدوات محاذاة، فعند تغيير حجم الحاوية الأصلية، ستتم محاذاة جميع العناصر مع بعضها البعض ومع أبعاد الحاوية.
في هذه الحالة، يمكنك في نفس الوقت استخدام الأحجام النسبية للعناصر بالنسب المئوية والأحجام المطلقة بالبكسل.

4. نشر المشروع.

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

بعد نشر مشروعك، قم بضغطه بتنسيق .zip. تصميمك الإبداعي جاهز للتحميل على شعار ADFOX.

المحررين الآخرين

1. عد النقرات على اللافتة

لكي يقوم ADFOX بحساب إحصائيات النقرات الخاصة باللافتة، تحتاج إلى كتابة متغير في كود HTML في العلامة وللسمة href:

%banner.reference_user1%

بالنسبة للروابط أيضًا، استخدم السمة الهدف مع المتغير %banner.target% في قيمة السمة.
إذا كانت السمة مفقودة، فسيتم فتح الرابط داخل إطار iframe، أي سيتم فتح الموقع المعلن عنه في مساحة البانر.

مثال على كود HTML لحساب نقرات البانر:

موقع المعلن

في كود HTML الخاص باللافتات التي سيتم وضعها تطبيقات الهاتف المحمول، لحساب النقرات، استخدم الماكرو: %reference%@%banner.user1%

2. حساب النقرات من عدة روابط في البانر

لنفترض أن الشعار يحتوي على عدة روابط للانتقال إليها، مما يؤدي إلى صفحات مختلفة من الموقع المُعلن عنه، ولكل منها تحتاج إلى الحصول على عدد النقرات.

الرابط الأول الرابط الثاني

استبدل قيم سمة href بالمتغيرات %request.reference%@%banner.eventN%، حيث يجب أن يكون N هو رقم الحدث من 1 إلى 28.
على سبيل المثال:

الرابط الأول الرابط الثاني

يجب الإبلاغ عن مراسلات الروابط والمتغيرات إلى المدير الذي يضيف الشعار إلى ADFOX. لأنه عند إضافة شعار، ستحتاج إلى تحديد الرابط الأول للحدث 1، والرابط الثاني للحدث 2.

إضافة لافتة في ADFOX

لإضافة شعار في ADFOX، حدد نوع الشعار المطلوب وقالب "Banner HTML5".

تحديد معلمات الشعار:

الأرشفة باستخدام تصميم HTML5 - قم بتحميل أرشيف .zip مع المشروع، ويجب أن يظل حقل "رمز تصميم HTML5" فارغًا (سيتم ملؤه بمحتويات ملف .html الخاص بمشروعك بعد إضافة الشعار).

كود HTML5 الإبداعي - قم بتحميل أرشيف مضغوط مع المشروع، تم إعداده في محرري HTMLأو قم بلصق كود HTML.

إذا كان هناك عدة روابط في اللافتة، فأضفها في علامة التبويب "الأحداث" في اللافتة، في حقول عنوان URL للانتقال.
برجاء مراجعة مطوري تصميمات HTML للتأكد من تطابق أرقام الارتباطات والأحداث.

الارتباط ببكسل القياس - يتم استخدام بكسل ADFOX افتراضيًا //banners.adfox.ru/transparent.gif، إذا كنت بحاجة إلى تتبع مرات الظهور في نظام جهة خارجية، فاحذف بكسل ADFOX وحدد رابطًا آخر.

عرض التصميم الإبداعي (px أو %) - حدد عرض الشعار.

ارتفاع التصميم (px أو %) - حدد ارتفاع اللافتة.

صورة - تحميل صورة.
شروط عرض التصميمات:
- تمت إضافة كود HTML والصورة - سيتم عرض كود HTML.
- تمت إضافة الصورة - سيتم عرض الصورة.
- تمت إضافة كود HTML - سيتم عرض كود HTML.

اسم سمة فئة حاوية الشعار - حدد اسمًا (أو عدة أسماء مفصولة بمسافة) لسمة فئة حاوية الشعار.

استخدم SafeFrame (نعم | لا) - SafeFrame عبارة عن تقنية تعمل على تغليف الإعلانات في إطار iframe خاص يحتوي على واجهة برمجة تطبيقات صارمة. يمنع SafeFrame الإعلانات التي يتم عرضها داخله من جمع البيانات والتفاعل مع بقية الصفحة خارج SafeFrame.
نعم - تمكين استخدام SafeFrame ومنع الوصول إلى صفحة الويب؛
لا - لا تقم بتمكين الإطار الآمن. رمز الشعار لديه حق الوصول إلى صفحة الويب.

أنماط قالب الشعار - أنماط مخصصة لحاوية الشعار في سطر واحد. إلى جانب النمط: العرض. على سبيل المثال، "الحدود: 1 بكسل أحمر خالص؛". سيتم تجاهل القيم غير الصالحة بواسطة المتصفح.

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

أولاً، دعونا نتعرف على التنسيقات الأكثر شيوعًا عند إنشاء مثل هذه اللافتات:

بشكل عام، هناك عدد لا يحصى من هذه اللافتات، يمكنك التعرف على جميع المتطلبات الفنية والتنسيقات هنا: انقر، لكننا سنستخدم القليل منها فقط، لأن أما الباقي فلم يعد ذا صلة أو يكاد يكرر ما يلي:

لافتات ملء الشاشة - لافتات يمكنك رؤيتها في مترو الأنفاق أو على موقع ويب wifi، وتمتد هذه اللافتات إلى وضع ملء الشاشة، وتحتوي على عداد وزر إغلاق. لإنشاء مثل هذه اللافتات، نقوم ببساطة بإعداد صورة ثابتة أو صورة متحركة بسيطة بتنسيق GIF (لا يزيد حجمها عن 600 كيلو بايت) ثم نخطط كل شيء بتنسيق HTML.

بانر بملء الشاشة

تعد لافتات FullWidth أكثر إثارة للاهتمام بالفعل، ولكنها في الواقع مجرد لافتة HTML5 عادية، وتمتد فقط إلى 100% من عرض الشاشة، ولكن لها ارتفاع ثابت. غالبًا ما تستخدم هذه اللافتات الرسوم المتحركة ويتم إنشاؤها بالفعل في برامج مثل جوجل مصمم الويب, أدوبي إيدج تحريك , أدوبي تحريك سي سي . أنا شخصياً أستخدم Edge Animate بشكل نشط، فهو أكثر ملاءمة وأسرع ولديه القدرة على التحميل بسرعة إلى HTML5. عند إنشاء مثل هذه اللافتات، يتم إنشاء لوحة العمل في البداية مع خيارات لكيفية ظهور هذا الشعار في أحجام الشاشات المختلفة، ويبدو الأمر برمته كما يلي:

لوحة القصة المصورة بعرض 100%

لافتة ذات حجم ثابت أو ثابت - حسنًا، إنها بسيطة جدًا. هنا تقوم فقط بإنشاء تصميم إبداعي أو لوحة عمل وكل ما عليك فعله هو كتابة الكود لحساب النقرات. غالبًا ما أستخدمها لإنشاء مثل هذه اللافتات أدوبي فوتوشوبأو Edge Animate - إذا كانت هذه رسوم متحركة. لا تستخدم GIF هنا أبدًا! لن تتمكن أبدًا من تحميل صورة متحركة بتنسيق GIF يصل حجمها إلى 600 كيلو بايت، وإذا كان وزن الصورة المتحركة أكبر، فلن يُسمح بها. HTML عاديلن يصل وزن اللافتة إلى 200 كيلو بايت، مما يعني أنه يمكنك الإنشاء هنا على أكمل وجه.

لوحة القصة المصورة ذات أبعاد ثابتة

دليل لإنشاء شعار ملء الشاشة وفقًا لجميع القواعد

إنشاء مثل هذا الشعار يعني أن حجمه سيتغير عندما يتغير حجم الشاشة، مما يعني أنه سيشغل مساحة الشاشة بأكملها، شيء من هذا القبيل:

وهذا يعني أن الصورة يجب أن تبدو جيدة على جميع الأجهزة، مما يؤدي إلى استنتاج أنها يجب أن تكون كافية نوعية جيدةوالحجم قريب من المربع ( أحجام ثابتةلا، كل شيء مخلص تمامًا هنا). في هذه اللحظة نحن نركز على الأجهزة المحمولة (الجوال) والأجهزة اللوحية (الأجهزة اللوحية)، لذلك نأخذ مستطيلاً للعرض في الوضع الرأسي (عمودي). انتقل إلى Photoshop وقم بإنشاء مستند بالحجم المطلوب في هذه الحالةهذا هو 536x714:

مصدر Gif لإنشاء شعار ملء الشاشة

لقد قمت بإنشاء صورة GIF من إطارين، وزنها 242 كيلو بايت، ويجب أن يصل وزننا دائمًا إلى 600 كيلو بايت، تذكر هذا. نحتاج الآن إلى تحويل هذا إلى شعار HTML فعلي. نفتح التعليمات الخاصة بإنشاء لافتات FullScreen، ونأخذ منها المتطلبات الفنية ونغلقها، فهي مكتوبة بطريقة خرقاء للغاية. انسَ أمر Flash، لقد مات موتًا بطوليًا، لدينا HTML5 فقط، لذلك نحتاج إلى متطلبات فنية لإنشاء لافتات باستخدام كود Ajax.

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

نفتح ملف HTML من القالب الخاص بي ونرى:

رمز شعار ملء الشاشة القياسي

زر الإغلاق

كيف تتم قراءة النقرة من اللافتة نفسها؟ ولماذا لم ندرج أي روابط للصفحات التي يجب أن يؤدي إليها البانر؟

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

حاوية مع لافتة

في دروس أخرى، سأخبرك بكيفية إنشاء لافتة بعرض شاشة بنسبة 100% مع الرسوم المتحركة وكيفية إنشاء تخطيط وإعداده لتخطيط موقع الويب وفقًا لجميع القواعد.

ملفات من الدرس:

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

عملية إنشاء المزايا

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