الدرس الثانى لتصميم الاستيل

[!السيد المصرى!]

السلام عليكم ورحمة الله وبركاته

خلصنا الدرس الاول وهو تصميم الهيدر

اليوم ان شاء الله يكون سهل علينا جميعا

وهو تصميم الفوتر وهيكون مشتاق من الهيدر

مع تقطيع الاستيل وتوزيعه على الفرونت وتركيبه على المنتدى باذن الله

وبذالك نكون خلصنا الاستيل وتركيبه

ويبقا كدا كله تمام ناقص الصور التجمليه للاقسام والقوالب


دى صوره الاستيل بعد ما خلصناه

http://almobile.maktoob.com/org/uploads/0fd7d55ce8.gif


نروح بعد كدا للتقطيع

وان شاء الله يكون التقطيع يكون سهل معانا

ودى الاداه بتاعت التقطيع

http://almobile.maktoob.com/org/uploads/0b3a93dc79.gif

ودى صوره الاستيل بعد التقطيع

http://almobile.maktoob.com/org/uploads/8811a8f298.gif

ملحوظه مهمه

اثناء التقطيع

الاستيل ده ممتد يعنى فيه نقطه تمدد

لاحظ فى منتصف الهيدر والفوتر نقطه التمدد

وهنا طريقه تسيف اجزاء الاستيل من الفوتوشوب

http://almobile.maktoob.com/org/uploads/667a0d1d49.gif

وبكدا يبقا خلصنا شغل الفوتوشوب خلاص

واتسيف الاستيل عندنا

نسمى الله ونكون محضرين برنامج الفرونت بيج

ونسطب البرنامج

ونروح الان اليه

http://almobile.maktoob.com/org/uploads/301a2648bd.gif

بعد ذالك نروح الى التصميم
او اللى بيستخد اصدار 2003 عربى هيلاقى كلمه عادى فى الاسفل على اليسار

وبعدين نفتح جدول

انظر

http://almobile.maktoob.com/org/uploads/7959fccb9a.gif

بعدين كلك يمن على الجدول ونروح على خصائص الجدول

انظر
http://almobile.maktoob.com/org/uploads/bcbf09a0af.gif

بعد ذالك

هيفتح لنا مربع

انظر الصوره

http://almobile.maktoob.com/org/uploads/282372eda3.gif

اهم شىء عندنا الحدود تكون صفر وشوف الاسهم واعمل التطبيق كما هو



بعد ذالك هيكون عندنا الجدول جاهز

نروح فى منتصف الجدول ونضغط كلك يمين ونروح على خصائص الخليه لادراج الخليه

http://almobile.maktoob.com/org/uploads/9b1ba12ecd.gif

بعد ذالك هيفتح لنا مربع لادراج الخليه

انظر

http://almobile.maktoob.com/org/uploads/f6425d44fa.gif

بعد ذالك ادراج الخليه بتعتنا

انظر

http://almobile.maktoob.com/org/uploads/52f20d5bb8.gif

بعد ذالك هيصبح عندنا الجدول بهذا الشكل

http://almobile.maktoob.com/org/uploads/159bb0e57d.gif


بعد كدا

نروح فى نتصف الجدول ونغط كلك يمين ونعمل تقسيمhttp://almobile.maktoob.com/org/uploads/e504cc75a7.gif

بعد كدا هيظهر لنا ايقونه صغيره نعمل بدل 2 يكون رقم 3

انظر الصوره

http://almobile.maktoob.com/org/uploads/6a5bfc8e23.gif

بعد كدا هينقسم عندنا الجدول الى 3 مربعات صغيره

مربع يمين + مربع يسار + مربع وسط

بعد ذالك نعمل ادراج صوره

من هنا

http://almobile.maktoob.com/org/uploads/3b41e68986.gif


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


اللى هما بتوع الهيدر

لصبح هكذا

انظر

http://almobile.maktoob.com/org/uploads/249a407a77.gif

بعد زالك

نذهب الى اخر الفرونت بيج

على تعليمات البرمجه او زى اللى عندى html

هنلاقى اكواد ناخدها ونحتفظ بيها فى تكست ضرورى طبعا

كدا احنا خلصنا الهيدر
http://almobile.maktoob.com/org/uploads/52287aef98.gif
نفس كل الشغل اللى عملنا فى الهيدر

يطبق على الفوتر لانه نفس التقطيع

وبعد ذالك

اذهب الى هذا الموضوع لاستاذى واخوانا عذوووب
http://3deeel.com/vb/thread19704.html
لنجلب ملف الاستيل

طبعا هذا ملف الاستيل للنسخ القديمه

انما للنسخ الجديد

هيقولو هنجيب ملف استيل منين اكيد عندنا الاستيل الافتراضى بتاع المنتدى

واذا مكنش موجود

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

نروح على لوحه تحكم المنتدى

ندخل على رفع ملف استيل

ونحمله بعد ما يتحمل معانا

نروح على التحكم بيه على طريق اذهب

انظر الصوره

http://almobile.maktoob.com/org/uploads/4972284737.gif


بعد ذالك هيفتح امامنا الصوره دى هتلاقى مكتوب اول مربه header

نسمح جميع الاكواد اللى فيه

ونسيب
$spacer_open

$_phpinclude_output


دول بس انظر الصوره
http://almobile.maktoob.com/org/uploads/ceb7759bf3.gif


بعد ذالك احنا عندنا اكواد الهيدر اللى طلعت من الفرونت بيج فى التكست نجلبها الى هنا

ونخلليها اعلى الاكواد دى


$spacer_open

$_phpinclude_output

ويبقا كدا خلصنا الهيدر

نذهب الى المربع الثالث ويسما الفوتر footer

http://almobile.maktoob.com/org/uploads/fa8b88974a.gif

بعد كدا

نضع هنا كود الفوتر

ويبقا كدا كل شىء تمام

ننزل تحت خالص ونضغط حفظ

وهيظر باشكل ده عندنا فى المنتدى

انظر الصوره


http://almobile.maktoob.com/org/uploads/2a349b9668.gif


بعد كدا فاضل عندنا تلوين الcss

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


باذن الله تعالى

اى استفسار او نقطه انا نستها ارجوا وضعها ليتم شرحها من جديد

فاذا اصبت فمن الله واذا اخطات فمن الشيطان

تحياتى لكم

[عاشقة البسس]

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

[نوآرهـ]

مبين على الدرس سهل ..

جآري التنفيذ إن شآ الله..


مشكووور السيـد..


وعسآكـ ع القـوة

[رومانسية القمر]

مشكور سيد ..

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

الله يقويك...

تحيتي,,

[احســاس]

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

[بندر الاحمدي]

http://www.hazza.org/up/uploads/937c812acf.gif (http://www.hazza.org/up)

http://www.hazza.org/up/uploads/5a14ae4d71.jpg (http://www.hazza.org/up)

http://www.hazza.org/up/uploads/96faec0e99.gif (http://www.hazza.org/up)

[نبراس الحياة]

درس جميل ورائع


شـكــ وبارك الله فيك ـــرا لك


لك مني أجمل تحية .

[فارس عديل]

سيد

شكرا على الشرح

لاتحرمنا جديدك