دورة تصميم المواقع على الفرونت بيج (1/4) مقدمة.

[تعلتل]

هذا الشرح منقول

بسم الله الرحمن الرحيم.

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




وسيتم التطرق في هذه الدورة إلى أهم الأمور التي تساعدنا على بناء مواقع تعريفية، وكيف نستخدم التصميم الذي تم تقطيعه في الدورة السابقة (جرافكس تصميم المواقع) وذلك تسهيلاً للدرس حتى يستوعبه المبتدئون واختصاراً للوقت، وذلك من خلال الدروس التالية:

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

قبل البدء في الدرس أرجو مراجعة الدرس الأول من دورة جرافكس تصميم المواقع.
دورة جرافكس تصميم الموقع. الدرس(1/4): مقدمة.

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

افتح موقع عرب فور هيلب ثم اذهب إلى ملف(file) --> حفظ باسم (Save as)واحفظ الملف
بالنقر على الملف بزر الفأرة الأيمن ثم اختر تحرير. يفتح معك الموقع في الفرونت بيج وحاول معرفة فكرة التصميم ..




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



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



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

طبعاً يجب أن تكون أسما ملفات الصور باللغة الانجليزية وبدون مسافات.

كما ينبغي أن نعرف كيف نتعرف على أبعاد الصورة (الطول والعرض) وهناك طريقتين لذلك:
الأولى هي وضع مؤشر الفأرة على الصورة بدو الضغط على أي زر من أزرار الفأرة وسيظهر لك مربع أصفر به أبعاد الصورة.



أو بالنقر على الصورة بزر الفأرة الأيمن ثم خصائص ثم اختيار لسان التبويب ملخص ثم النقر على زر متقدم.. وبهذا نعرف الطول والعرض.



سنعرف على أهمية أبعاد الصور في الدرس القادم -بإذن الله تعالى-

[يونس]

شكرا لك