الويب العربي - الدرس الخامس : دورة تصميم استايل للمبتدئين

اهلا ومرحبا بحضراتكم في

الدرس الخامس : دورة تصميم استايل للمبتدئين

انتهينا من الدرس تقطيع التصميم والحمد لله واصبح لدينا 6 قطع

اليوم ان شاء الله سوف نتناول طريقة تركيب هذه القطع بالفرونت بيج

ولكن قبل البدء عليكم بجمع الصور في مجلد واطلق عليه اي اسم

وانا اطلقت عليه rafek-n

ملحوظه :

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

اولا جميعنا نسطب برنامج الفرونت بيج الخاص بنا ثم نفتحه كأي برنامج عادي

وبعد فتح البرنامج .. نتجه الى اداة ادراج جدول وندرج 3 خلايا راسي كالتالي :

ليكن شكلهم بالصفحه كالتالي ان شاء الله :

في اي منطقه بداخل الجدول نضغط كليك يمين بالماوس لتظهر لنا هذه القائمه

نختار منها خصائص الجدول لتظهر لنا قائمه كل ما يهمنا منها وضع القيم التاليه

ليصبح الشكل النهائي كالتالي ان شاء الله :

اي عمل بعد الان نقوم به يجب قبله عمل توسيط من اداة التوسيط هذه

يلا نقف في الخليه الاولى بالجدول ونضغط توسيط ليكن مؤشر الماوس كالتالي :

ثم ندرج 2 خليه افقي من اداة ادراج الجداول كالتالي :

ثم نقف في اي منطقه منهما ونختار خصائص الجدول

ثم نعطي نفس القيم هذه

ليكن الشكل كالتالي باذن الله

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

ثم نقف بمؤشر الماوس في الخليه اليمنى الصغيره هذه ثم توسيط

ثم ندرج صورة من اداة ادراج الصور كالتالي:

لنختار الصورة المسماه باسم h-r كالتالي :

ليكن شكلها كالتالي باذن الله :

الان نتجه الى الخليه اليسرى ونعلم بالماوس فيها ثم نضغط توسيط

وندرج جدول مكون من 4 خلايا كالتالي :

ليكن الشكل كالتالي باذن الله :

الان نسحب الفاصل بين الخليتين الى اقصى اليسار بقدر المستطاع كالتالي :

ثم نقف بمؤشر الماوس في الخليه العلوية اليسرى وندرج الصورة المسماه باسم h-b1 كالتالي :

ليكن شكلها كالتالي باذن الله :

وفي الخليه اللي تحتها نوسط ثم ندرج الصورة المسماه باسم h-b2

ليكن شكلها كالتالي باذن الله :

الان نقف بمؤشر الماوس في الخليه العلوية اليمنى من الجدول الاخير

ثم نقوم بتوسيط ونضغط كليك يمين ثم نختار خصائص الخليه كالتالي :

ثم من زرار استعراض نختار الصورة المسماه h-b1 ليكن الامتداد ظاهر كالتالي :

ويكن شكلها كالتالي باذن الله :

ونكرر ما فعلناه هذا مع الخليه اللي تحتها ونختار الصورة المسماه باسم h-b2

ليكن الشكل كالتالي باذن الله :

الان نقوم بوضع مؤشر الماوس في اخر خليه في الجدول الرئيسي ثم توسيط

ثم كليك يمين وخصائص الخليه ثم نختار الصورة المسماه باسم f-b لتكن شكلها كالتالي باذن الله :

ثم ندرج صورة بنفس الخليه المسماه باسم logo كالتالي :

ليكن الشكل النهائي كالتالي باذن الله :

الان نعمل توسيط ثم كليك يمين في الخليه اللي بوسط الجدول الرئيسي

ونختار خصائص الصفحه كالتالي :

من قائمه عام ..نكتب الان اسم الصفحه كالتالي :

(معهد رفيق الخير)

من قائمه تنسيق .. نضغط على زرار استعراض :

ثم نختار الصورة المسماه باسم back كالتالي :

ثم من قائمه خيارات متقدمه .. نجعل جميع الهوامش قيمتها
(0) صفر كالتالي :

ليكن الشكل النهائي كالتالي باذن الله :

نقوم الان بحفظ العمل على هيئه index من زرار الحفظ هذا :

ثم تحفظ ملف الاندكس بجانب مجلد الصور كالتالي ان شاء الله :

ليكونا هكذا :

حتى اذا شاهدنا الاندكس نراها كالتالي باذن الله تعالى

ولنا لقاء اخر مع تكمله درس الفرونت بيج ان شاء الرحمن

.:ليس بالضروري ان مانقدمه من دورات هو الاصح وانما هو احد الطرق الصحيحه:.