الدرس الثالث انشاء المحتوى وتعديله في برنامج Google Web Designer ( الجزء الاول )

إضافة علامات

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

لإنشاء علامة:

  1. انقر على أداة العلامات  في لوحة الأدوات. 
  2. حدد نوع العلامة من لوحة خيارات الأداة.

     

     

     

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

لدمج علامة داخل علامة أخرى:

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

 

الرسم باستخدام أداة القلم

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

لرسم خطوط مستقيمة:

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

 

 

يمكنك رسم منحنى من خلال إنشاء نقاط ارتساء وسحبها لإنشاء مقابض تحكم يمكن من خلالها تشكيل المنحنى. يحدد طول مقابض التحكم واتجاهها درجة الانحناء.

لرسم خطوط منحنيات:

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

 

 

 

لرسم مسار مغلق، أنشئ شكلاً باستخدام أداة القلم. لإغلاق الشكل، اجعل النقرة الأخيرة على نقطة الارتساء الأولى.

إضافة نقاط ارتساء أو إزالتها

 

 

 

 

 

 

يمكنك إضافة نقاط ارتساء أو إزالتها من المسارات باستخدام خيارات أداة القلم  في شريط الخيارات. 

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

لإزالة نقاط من المسار، حدد مؤشر إزالة النقطة، ثم انقر على النقطة التي تريد إزالتها. سيتغير المسار بحيث يتناسب مع النقاط المتبقية.

 

إضافة نص

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

لإضافة نص إلى مستند HTML أو الإعلان:

 

 

 

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

خيارات أداة النصوص

 

 

 

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

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

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

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

    لإضافة شكل إلى مشروعك:

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

    اسحب مع النقر على Shift باستخدام أداة الشكل لتقييد الرسم.

    • الشكل البيضاوي – التقييد بشكل مستدير
    • المستطيل – التقييد بشكل مربع
    • الخط – التقييد بزيادة زاوية 45 درجة

    إضافة لون إلى عنصر ما

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

    بكرة الألوان

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

    • حدد لونًا من بكرة الألوان. انقر في الدائرة الخارجية لتحديد درجة اللون وانقر في الوسط لتحديد التلوين الخفيف المطلوب أو الظل. استخدم شريط تمرير ألفا لتغيير مستوى شفافية اللون الذي اخترته. 
    • اختر خياري لوحة الألوان أو درجة الانحدار من أعلى نافذة بكرة الألوان.

    لوحة الألوان

    تتيح لك لوحة الألوان تغيير الألوان للعنصر المحدد. 

    تعيين الألوان في لوحة الألوان:

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

    • لتبديل الألوان بين التعبئة والشطب، انقر على الزر تبديل الألوان .


    التدرجات

    التدرج هو تعبئة متعددة الألوان يتغير بها كل لون تدريجيًا إلى اللون الذي يليه. ويمكن لـ Google Web Designer إنشاء نوعين من التدرجات.
    • التدرجات الطولية لتغيير اللون من اليسار إلى اليمين.
    • التدرجات نصف القطرية لتغيير اللون بشكل مكثف من المركز. 
    يمكنك ضبط التدرجات من خلال تغيير عدد الألوان التي تتضمنها، ومدى صلة التغيير من لون إلى لون آخر.

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

    • انقر على علامة لون لتغيير لونها.
    • اسحب علامة اللون لتغيير مسافة الانتقال.
    • انقر على شريط التدرج لإضافة علامة لون جديدة.
    • اسحب علامة لون من لوحة التدرج لإزالتها.

    المصدر جوجل

     

     

 

 

الكاتب Geek4Arab

Geek4Arab

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

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