الدر الخامس مدورة تصيم الاستايلات

[BlaCk HeArTs]

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


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

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



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

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

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

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

اولا جميعنا نسطب برنامج الفرونت بيج الخاص بنا ثم نفتحه كأي برنامج http://r-khair.net/vb/images/smilies/cool.gif


ومن لم يحمله فعليه تحميله من هنــــــــــــــا (http://r-khair.net/vb/showthread.php?t=320)


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

http://r-khair.net/up/style/normal/lesson5/001.png

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

http://r-khair.net/up/style/normal/lesson5/002.png

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

http://r-khair.net/up/style/normal/lesson5/003.png

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

http://r-khair.net/up/style/normal/lesson5/004.png

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


http://r-khair.net/up/style/normal/lesson5/005.png

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

http://r-khair.net/up/style/normal/lesson5/006.png

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

http://r-khair.net/up/style/normal/lesson5/007.png

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

http://r-khair.net/up/style/normal/lesson5/008.png

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

http://r-khair.net/up/style/normal/lesson5/003.png

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

http://r-khair.net/up/style/normal/lesson5/004.png

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

http://r-khair.net/up/style/normal/lesson5/009.png

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

http://r-khair.net/up/style/normal/lesson5/010.png

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

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

http://r-khair.net/up/style/normal/lesson5/011.png

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

http://r-khair.net/up/style/normal/lesson5/012.png

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

http://r-khair.net/up/style/normal/lesson5/013.png

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

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

http://r-khair.net/up/style/normal/lesson5/014.png

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

http://r-khair.net/up/style/normal/lesson5/015.png

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

http://r-khair.net/up/style/normal/lesson5/016.png

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

http://r-khair.net/up/style/normal/lesson5/017.png

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

http://r-khair.net/up/style/normal/lesson5/018.png

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

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

http://r-khair.net/up/style/normal/lesson5/019.png

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

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

http://r-khair.net/up/style/normal/lesson5/20.png

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

http://r-khair.net/up/style/normal/lesson5/21.png

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

http://r-khair.net/up/style/normal/lesson5/22.png

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

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

http://r-khair.net/up/style/normal/lesson5/23.png

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

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

http://r-khair.net/up/style/normal/lesson5/24.png

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

http://r-khair.net/up/style/normal/lesson5/25.png

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

هذه الصورة تم تصغيرها. اضغط على الشريط لإظهار الصورة كاملة. ابعاد الصورة الاصلية 765x171 وحجمها 6KB.http://r-khair.net/up/style/normal/lesson5/26.png

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

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

http://r-khair.net/up/style/normal/lesson5/27.png

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

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

http://r-khair.net/up/style/normal/lesson5/28.png

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

http://r-khair.net/up/style/normal/lesson5/29.png

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

http://r-khair.net/up/style/normal/lesson5/30.png

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

http://r-khair.net/up/style/normal/lesson5/31.png

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

هذه الصورة تم تصغيرها. اضغط على الشريط لإظهار الصورة كاملة. ابعاد الصورة الاصلية 782x226 وحجمها 6KB.http://r-khair.net/up/style/normal/lesson5/32.png

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

http://r-khair.net/up/style/normal/lesson5/33.png

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

http://r-khair.net/up/style/normal/lesson5/34.png

ليكونا هكذا :

http://r-khair.net/up/style/normal/lesson5/35.png

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

http://r-khair.net/up/style/normal/lesson5/36.png


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

[اسكندر]

الف شكر لك
على الشرح الممتاز

[SecuritY_I.s.s.W]

يعطيك العافية

[أبوعدي]

مشكور أخوي والله يكثر من امثالك في هذا المجتمع