الدرس الثاني البداية مع Google Web Designer

  • screen-shot-2013-09-30-at-10-26-32-am
  • انشاء مستند جديد
  • إعداد البيئة
  • تحديد العناصر ونقلها
  • استيعاب الصفحات
  • إضافة مكونات
  • اختصارات لوحة المفاتيح

إنشاء مستند جديد

بعد تنزيل Google Web Designer، يمكنك بدء إنشاء مستندات جديدة من خلال تحديد ملف جديد من القائمة ملف.

 

في مربع الحوار ملف جديد، اختر نوع الإعلان أو الملف الذي تريد إنشاءه.

بالنسبة إلى الإعلانات:

  1. حدد البيئة الإعلانية التي تريد أن يعمل فيها الإعلان. يتوافق Google Web Designer مع بيئتي AdMob وDoubleClick.
  2. اختر عنوانًا للإعلان (اختياري). سيظهر هذا العنوان في عنصر العنوان داخل الإعلان أو مستند HTML.
  3. عين الأبعاد للإعلان. يتم إدراج الأحجام الشائعة في القائمة المنسدلة. إذا كنت تريد استخدام حجم ليس مدرجًا، فحدد مخصص من القائمة المنسدلة، ثم أدخل العرض والارتفاع يدويًا.
  4. اختر اسمًا للإعلان (مطلوب). سيتم استخدام هذا الاسم باعتباره اسم ملف الإعلان أيضًا.
  5. اختر المكان الذي تريد حفظ الملف فيه. يمكنك إدخال مسار الموقع الذي تريد حفظ الملف فيه، أو النقر على رمز البحث للانتقال إلى موقع معين.
  6. حدد وضع الرسم المتحرك الذي تريد استخدامه. يتيح لك الوضع السريع إمكانية تحريك الإعلان مشهدًا بعد مشهد، بينما يتيح لك الوضع  المتقدم إمكانية تحريك عناصر فردية على مخططها الزمني الخاص. عند تحديد الوضع السريع، يمكنك اختيار الانتقال إلى الوضع المتقدم لاحقًا، ولكن لن تتمكن من الانتقال من الوضع المتقدم إلى الوضع السريع.

بالنسبة إلى HTML أو CSS أو جافا سكريبت أو XML:

  1. حدد نوع الملف الذي تريد إنشاءه. يمكن استخدام Google Web Designer لإنشاء ملفات HTML وCSS وجافا سكريبت وXML.
  2. اختر عنوانًا للمستند (HTML فقط). يظهر هذا العنوان في علامة العنوان في HTML.
  3. اختر اسم المستند (مطلوب). سيتم استخدام هذا الاسم باعتباره اسم ملف الإعلان أيضًا.
  4. اختر المكان الذي تريد حفظ الملف فيه. يمكنك إدخال مسار الموقع الذي تريد حفظ الملف فيه، أو النقر على رمز البحث للانتقال إلى موقع معين.

 

 

إعداد البيئة

تغيير العرض

تتيح لك قائمة العرض في Google Web Designer إمكانية اختيار الكيفية التي تريد عرض الجزء الرئيسي بها، والكيفية التي تريد عرض العناصر بها.

عرض الشبكة الثلاثية الأبعاد

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

عرض القواعد

عند تحديد عرض القواعد في قائمة العرض، تكون المسطرتان الأفقية والرأسية مرئيتين. يمكن لأدوات قياس المسافات مساعدتك في تحديد مكان العناصر في إعلاناتك ومستندات HTML5 تحديدًا دقيقًا.

عرض علامات العناصر والخطوط التمهيدية

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

الالتقاط

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

 

تحديد العناصر ونقلها

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

لنقل عنصر ما أو عناصر على الجزء الرئيسي:

  1. انقر على أداة التحديد في شريط الأدوات.
  2. حدد عنصرًا من خلال النقر عليه أو رسم تظليل بالتحديد حوله.
  3. يمكنك، إن أردت النقر على shift وتحديد عنصر آخر لإضافته إلى التحديد.
  4. انقر على العناصر المحددة واسحبها.

لدفع عنصر ما أو عناصر على الجزء الرئيسي:

  1. انقر على أداة التحديد في شريط الأدوات.
  2. حدد عنصرًا أو عناصر من خلال النقر عليه أو رسم تظليل بالتحديد حوله.
  3. يمكنك، إن أردت النقر على shift وتحديد عنصر آخر لإضافته إلى التحديد.
  4. ادفع العنصر المحدد باستخدام مفاتيح الأسهم. تؤدي كل ضغطة زر إلى دفع العنصر حتى بكسل واحد. استخدم مفتاح shift مع مفاتيح الأسهم لنقل التحديد بمقدار 10 بكسل.
لا يمكن تحديد العناصر التي يتم قفلها في قسم الطبقات من المخطط الزمني للرسم المتحرك. 

عندما يتم تحديد التحكم في النقل ضمن لوحة خيارات الأداة، ستتيح لك أداة التحديد أيضًا تغيير الحجم والتدوير لتحديداتك.

يمكنك أيضًا محاذاة عدة عناصر وتوزيعها على الجزء الرئيسي باستخدام عناصر التحكم الاختيارية في لوحة خيارات الأداة.

 
عنصر التحكم الوصف

محاذاة للأعلى

لمحاذاة العناصر في تحديدك مع العنصر الأعلى.

عندما يتم تحديد محاذاة مع الجزء الرئيسي تتم محاذاة العناصر لأعلى الجزء الرئيسي.


محاذاة المركز الرأسي

لمحاذاة المراكز الرأسية للعناصر في التحديد مع المركز الرأسي للتحديد.

عندما يتم تحديد محاذاة مع الجزء الرئيسي تتم محاذاة العناصر للمركز الرأسي للجزء الرئيسي.


محاذاة للأسفل

لمحاذاة العناصر في تحديدك مع العنصر الأسفل.

عندما يتم تحديد محاذاة مع الجزء الرئيسي تتم محاذاة العناصر لأسفل الجزء الرئيسي.


محاذاة لليسار

لمحاذاة العناصر في تحديدك مع العنصر الأيسر.

عندما يتم تحديد محاذاة مع الجزء الرئيسي تتم محاذاة العناصر للحافة اليسرى من الجزء الرئيسي.


محاذاة للمركز الأفقي

لمحاذاة المراكز الأفقية للعناصر في تحديدك مع المركز الأفقي من التحديد.

عندما يتم تحديد محاذاة مع الجزء الرئيسي تتم محاذاة العناصر مع المركز الأفقي للجزء الرئيسي.


محاذاة لليمين

لمحاذاة العناصر في تحديدك مع العنصر الأيمن.

عندما يتم تحديد محاذاة مع الجزء الرئيسي تتم محاذاة العناصر مع الحافة اليمنى من الجزء الرئيسي.


التوزيع لأعلى

لتوزيع المسافات في الحافة العليا من العناصر في تحديدك بشكل متساوٍ داخل مستطيل التحديد.

عندما يتم تحديد محاذاة مع الجزء الرئيسي ، يتم توزيع المسافات للحواف العليا من العناصر بشكل متساوٍ داخل حدود الجزء الرئيسي.


توزيع المركز الرأسي

لتوزيع المسافات في المراكز الرئيسية من العناصر في تحديدك بشكل متساوٍ داخل مستطيل التحديد.

عندما يتم تحديد محاذاة مع الجزء الرئيسي يتم توزيع المسافات للمراكز الرأسية من العناصر بشكل متساوٍ داخل حدود الجزء الرئيسي.


التوزيع لأسفل

لتوزيع المسافة للحواف السفلية من العناصر في تحديدك بشكل متساوٍ داخل مستطيل التحديد.

عندما يتم تحديد محاذاة مع الجزء الرئيسي يتم توزيع المسافات للحواف السفلية من العناصر بشكل متساوٍ داخل حدود الجزء الرئيسي.


التوزيع لليسار

لتوزيع المسافات للحواف اليسرى من العناصر في تحديدك بشكل متساوٍ داخل مستطيل التحديد.

عندما يتم تحديد محاذاة مع الجزء الرئيسي يتم توزيع المسافات للحواف اليسرى من العناصر بشكل متساوٍ داخل حدود الجزء الرئيسي.


توزيع المركز الأفقي

لتوزيع المراكز الأفقية من العناصر في تحديدك بشكل متساوٍ داخل مستطيل التحديد.

عندما يتم تحديد محاذاة مع الجزء الرئيسي يتم توزيع المسافات للمراكز الأفقية للعناصر بشكل متساوٍ داخل حدود الجزء الرئيسي.


محاذاة لليمين

لتوزيع المسافات للحواف اليمنى من العناصر في تحديدك بشكل متساوٍ داخل مستطيل التحديد.

عندما يتم تحديد محاذاة مع الجزء الرئيسي يتم توزيع المسافات للحواف اليمنى من العناصر بشكل متساوٍ داخل حدود الجزء الرئيسي.


توزيع مسافة رأسيًا بتساوٍ

لنقل العناصر في التحديد بحيث تصبح المسافة الرأسية بينها متساوية.

عندما يتم تحديد محاذاة مع الجزء الرئيسي يتم نقل العناصر في التحديد لتصبح المسافة بينها متساوية وحتى تتناسب معها على مستوى الجزء الرئيسي.

لاستخدام مسافة سلبية إذا كان إجمالي أحجام العناصر المحددة أكبر من الحجم الرأسي للتحديد.

توزيع مسافة أفقيًا بتساوٍ

لنقل العناصر في التحديد بحيث تصبح المسافة الأفقية بينها متساوية.

عندما يتم تحديد محاذاة مع الجزء الرئيسي يتم نقل العناصر في التحديد لتصبح المسافة بينها متساوية وحتى تتناسب معها على مستوى الجزء الرئيسي.

لاستخدام مسافة سلبية إذا كان إجمالي أحجام العناصر المحددة أكبر من الحجم الأفقي للتحديد.

تغيير الطبقات

يكون مستوى كل عنصر في Google Web Designer مستقلاً بذاته في حزمة تتضمن جميع العناصر. تغطي العناصر الأقرب من قمة الحزمة العناصر أسفل منها. ولتغيير طبقة كل عنصر، يمكنك تحديد العنصر باستخدام أداة التحديد واستخدام أزرار الطبقات التالية:

زر الطبقة الوصف

إحضار إلى الأمام

لإحضار العنصر المحدد إلى الأمام بمقدار موضع واحد.


إرسال إلى الخلف

لإرسال العنصر المحدد إلى الخلف بمقدار موضع واحد.


إحضار إلى المقدمة

لإحضار العنصر المحدد إلى المقدمة.


حجب في الخلف

لحجب العنصر المحدد في الخلف.

استيعاب الصفحات

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

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

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

لإضافة صفحة جديدة إلى إعلانك:

  1. انقر على مؤشر الصفحة  أسفل الجزء الرئيسي.
  2. إذا كانت هناك عدة أحجام للصفحة في إعلانك، فحدد صفحة بحجم يساوي الصفحة التي تريد إنشاءها.
  3. في قائمة الصفحات المنبثقة، انقر على زر إضافة صفحات .
  4. اختر اسمًا للصفحة الجديدة في لوحة الخصائص.

لتكرار صفحة ما في الإعلان:

  1. انقر على مؤشر الصفحة  أسفل الجزء الرئيسي.
  2. حدد الصفحة التي تريد تكرارها.
  3. في قائمة الصفحات المنبثقة، انقر على زر تكرار صفحات . سيؤدي هذا إلى إنشاء نسخة من الصفحة الحالية، بما في ذلك العناصر والمكونات والرسوم المتحركة.
  4. اختر اسمًا للصفحة الجديدة في لوحة الخصائص.

لحذف صفحة من إعلانك:

  1. انقر على مؤشر الصفحة  أسفل الجزء الرئيسي.
  2. حدد الصفحة التي تريد حذفها.
  3. في قائمة الصفحات المنبثقة، انقر على زر حذف صفحات . سيؤدي هذا إلى حذف الصفحة الحالية.

لتعيين صفحة باعتبارها الصفحة الرئيسية:

  1. انقر على مؤشر الصفحة  أسفل الجزء الرئيسي.
  2. في قائمة الصفحات المنبثقة، انقر بزر الماوس الأيمن على الصفحة التي تريد أن تكون هي الصفحة الرئيسية.
  3. حدد الصفحة الرئيسية من القائمة المنبثقة. يتم تمييز الصفحة الرئيسية برمز الصفحة الرئيسية .

الصفحات والأحداث

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

يمكن أيضًا للصفحات إرسال الأحداث التالية إلى صفحات أخرى أو إلى بيئات إعلانية:

الحدث الوصف
التدوير إلى الوضع العمودي لإرسال حدث عندما يتم تدوير الجهاز الجوّال من الاتجاه الأفقي إلى الاتجاه العمودي.
التدوير إلى الوضع الأفقي لإرسال حدث عندما يتم تدوير الجهاز الجوّال من الاتجاه العمودي إلى الاتجاه الأفقي.
اهتزاز لإرسال حدث عندما يكتشف جهاز الجوّال وجود اهتزاز.
اكتمل التحميل لإرسال حدث عند اكتمال تحميل الإعلان.

 

إضافة مكونات

تعد المكونات وحدات معدة مسبقًا تتيح لك إضافة وظائف محددة إلى إعلاناتك.

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

يتوافق Google Web Designer مع المكونات التالية:

اختصارات لوحة المفاتيح

يمكن تحديد العديد من الأدوات باستخدام اختصارات لوحة المفاتيح، كما هو الحال في العديد من أوامر القائمة ملف وتعديل.

 

  Windows Mac

أوامر مفتاح القائمة ملف

ملف جديد Ctrl+N Cmd+N
فتح ملف Ctrl+O Cmd+O
إغلاق ملف Ctrl+W Cmd+W
إغلاق الكل Ctrl+Alt+W Cmd+Opt+W
حفظ Ctrl+S Cmd+S
حفظ باسم Ctrl+Shift+S Cmd+Shift+S

تعديل أوامر مفتاح القائمة

تراجع Ctrl+Z Cmd+Z
إعادة Ctrl+Y Cmd+Shift+Z
قص Ctrl+X Cmd+X
نسخ Ctrl+C Cmd+C
لصق Ctrl+V Cmd+V
لصق خاص Ctrl+Shift+V Cmd+Shift+V
تحديد الكل Ctrl+A Cmd+A

أوامر مفاتيح لوحة الأدوات

أداة التحديد V V
أداة تدوير العناصر الثلاثية الأبعاد W W
أداة نقل العناصر الثلاثية الأبعاد G G
أداة العلامات D D
أداة القلم P P
أداة النصوص T T
أداة شكل المستطيل R R
أداة الشكل البيضاوي O O
أداة الشكل الخطي L L
أداة دلو التلوين/أداة زجاجة الحبر K K
أداة زجاجة الحبر K K
أداة تدوير الجزء الرئيسي الثلاثي الأبعاد M M
أداة اليد H H
أداة يد النقل الثلاثية الأبعاد H+Alt H+Opt
أداة التكبير/التصغير Z Z

أوامر مفاتيح أداة النصوص

عريض Ctrl+B Cmd+B
مائل Ctrl+I Cmd+I
تسطير Ctrl+U Cmd+U

أوامر عامة

إلغاء تحديد الكل Esc Esc
معاينة Ctrl+Enter Cmd+Enter

المصدر جوجل

 

 

 

 

 

 

 

 

الكاتب Geek4Arab

Geek4Arab

مواضيع متعلقة

التعليقات مغلقة