دورة روابط لتصميم الإستايلات [ جميع الدروس rawabet]

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

راح ننطلق بعمل دروس تعليم تصميم الستايل من الصفر حتى النهائية

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

راح نتعلم كذا شغله بالتصميم

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

بسم الله نبداء

الدرس الاول [ طريقة تصميم ستايل من البداية ]
نفتح برنامج الفتوشوب

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

راح نتعلم شغله حلوه بالفتوشوب تساعدك كثير بترتيب تصميمك

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

انتهينا من انشاء الحافظات

نطلق الان بالبداء بالعمود الاول

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
الي مو عارف يضيف ليرة يعلمنا ونقوله

هنا طريقة الاضافة
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

قم باختيار اداة تدرج الون كما هو موضح بالصوره
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

هنا طريقة تدرج الون انت تتحكم بالشغله هذي
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

بعد كذا على التحديد قم بسح اداة التدرج
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

بعطي للعمود كذا لمسه عن طريق الشرح بالصوره التاليه
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

انتهينا الان من العمود
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

نروح الان وننسخ الحافظه الي باسم العمود التالي

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

هنا شكل الحافظات بعد الانتهاء
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

وهنا بعد التحسين
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

نفس الطريقه راح نطبقها على الفولدر
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

نرسم مستطيل ونضيف له الاضافات الي حابب ان تكون موجوده
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

منقول

يتبعـــ

الدرس الثاني [ طريقة تقطيع الستايل الهيدر+ الاعمدة + الفوتر]

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

نظره سريعه عن الستايل وكيف راح يكون تقطيع

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

كيف راح تبداء التقطيع ؟؟

الاجابه : راح نقوم بتقطيع الستايل الى ثلاث خانات

1- الجزء العلوي من الستايل ( الهيدر )2- الجزء الاوسط من الستايل ( الاعمده )3- الجزء السفلي من الستايل (الفوتر )

شوف الصوره قسمتها حسب التوزيع الي ذكرنه

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

الهيدر : عدد الصور خمس
زاويه يمين +زاويه يسار + صوره تجميله يمين + صور تجميليه يسار + تمدد

الاعمده :
عمود يمين + عمود يسار

الفوتر:
زاويه يمين +زاويه يسار + صوره تجميله يمين + صور تجميليه يسار + تمدد

نحتاج لمعرفة ما الاداوات الي تساعدنا على التقطيع ...

فقط راح نستخدم اداة المربع ( التحديد ) ومقاسات القص ووضحتها لك بالصوره

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

شوف الصوره
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

وتروح تسوي لصق من خلال نفس طريقة القص بس بدل حرف ( X ) نضغط ( V )

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

يجب التركيز المقاسات لو تختلف باكسل واحد راح يخرب شغلك كله

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

وهنا شكل الستايل بعد التقطيع
عدد الصور الي تم تقطيعها 12 صوره شاهد المثال

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

__________________

الدرس الثالث [ طريقة توزيع الستايل بالفرنت بيج وتركيبه على المنتدى]

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

ماذا نحتاج لنبداء ؟؟

1- برنامج الفرنت بيج

2- برنامج appserv..

حيث أن البرنامج يحتوي على قواعد بيانات MySQL +
سيرفر Apache + مترجم php وذلك يختصر الوقت من تنزيل أكثر من برنامج ..ومن
خلاله راح نقوم بتركيب منتدى على جهازك

يمكنك تحميل البرنامج من الرابط التالي :-
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

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

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

نبداء الدرس بعد تجهيز المتطلبات كامله

شكل الستايل بعد التقطيع
عدد الصور الي تم تقطيعها 12 صوره شاهد المثال
الي مايعرف التقطيع يرجع للموضوع التالي
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

نروح نفتح برنامج الفرنت بيج
Microsoft Office FrontPage

تابع معي الصور الشرح غالبيته داخل الصوره

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

الان راح يكون لدينا صفحه بيضاء
نتقل بعدها للتصميم مثل ماهو موضح لك بالصوره التالية
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

بعد اختيار خصائص الجداول راح يعطينا مربع للخصائص الصفحة

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

عملية انشاء الجداول سهله ومايحتاج تفصيل فيها كثير
انظر للنتيجه في الصوره التاليه
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

بيظهر مربع خصائص الجدول كل الي عليك انك تعدل عليه مثل ماهو بالصوره التالية[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

شدحيلك معي شوي الدرس هذا يبي شوي صبر لاهميته[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

الان انتهينا من الجداول .. وهذي نتيجة العمل السابق
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

اهااااا....... الان جينا لزبده الدرس وهو توزيع الصور بالفرنت بيج

انا وضعت صوره للصور وهي مقطعه

ملاحظه بسيطه :
التوزيع بيكون ادراج صوره او وضع خلفيه

وسبق وضحنا لكم هذا بالدرس الثاني اذا تذكرون الصوره التاليه[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

يعني بيكون توزيع الصور حسب الرسم التوضيح هذا شاهد معي التوزيع

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

طريقة ادارج الصوره يكون من خلال اداة الادارج الموضحه لكم هنا

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

بيصبح لدي بهذا الشكل

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

الان نجي لوضع الاعمده والتمدد الخاص بالهيدر والفوتر
وهذي الطريقه باستخدام خصائص الخليه
نضع الماوس داخل خلية التمدد الي موضحينا لكم في التوزيع الي باسم ( توزيع المرحله الاولى )

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

الان من الخليه الي في منتصف التوزيع قم بشد الاطراف يمين ويسار

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

في الاخير بيكون الشكل التالي
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

يبقى عندي توزيع الصور التجميليه وهي اربع صور وراح نوزعها على النحو التالي

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

شاهد التوزيع للصور التجميليه بهذا الرسم التخطيطي الي كان بالدرس الثاني

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

نقوم بتقسيم خلية التمدد للهيدر والفوتر الى ثلاث خلايا اضافيه قبل ادارج الصور التجميليه

طريقة التقسيم بيكون وضع المؤشر في وسط الهيدر وضغط الماوس يمين وختيار تقسيم الخلايا
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
بيفتح مربع صغير نقوم تحويله الى ثلاثه
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

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

وبكذا يكون هذه نتيجة العمل

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

اضغط على الزاويه اليمين للهيدر ضغطه وحده وراح تحدد معك
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

قم بتوجيه المحاذه للجه اليمين باستخدام اداة المحاذه
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

بعد الانتهاء من المحاذاة للصور بيكون فيه فراغات بين كل صور
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

طبق هذه العمليه لجميع الصور الي سويت لها محاذه

وبكذا يكون انتهيت من التوزيع بالفرنت بيج وهذي نتيجة التطبيق
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

وش باقي نقول واصل شوي خل اعضائك يفرحون بتصميمك مابقى غير القليل

الان ننقل التصميم للهيدر طبعاً بعد رفع ملف الصور لمجلد المنتدى

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

بيفتح لنا الاكود البرمجيه للستايل
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

نحتاج لتعديل بسيط لمسار الصور كلها فيصبح لدينا بهذا الشكل
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

الان انتقل ليقونة التصميم وضع مؤشر الماوس في الوسط وختر اداة المحاذة
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

الان نقوم بالدخول لوحة التحكم الخاصه لمنتداك

وتبع الصور
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

بعدها تفتح لنا صفحة التحكم بالستايلات
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

في قالب header
ابحث عن 
راح تحصلها في البدايه وفي المنتصف انسخ الكود الموجود بينها وقم بازالته ..
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

نرجع للفرنت بيج وننسخ الجزء العلوي
ونلصقه مكان الكود الي قمنا بمسحه بين 
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

ناخذ كود الجزء الثاني السفلي من الفرنت بيج
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

ننزل تحت لـــ footer

في أخر القالب نلصق الكود الي جزئنه بالفرنت بيج
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

ننزل تحت ونسوي حفظ
وروح وشوف المنتدى سوى تحديث
فيه بعض المسات البسيطه الي لازم نعملها
بتلاحظ وجود فراغات في اطراف الستايل
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

طريقة الازالة سهله
نروح للستايل وتعديل
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

وضع خواص css المحدده بالمربع الاحمر الى الرقم صفر
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

اعمل حفظ
مبروك الان احنا كملنا درس تصميم ستايل

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

نبداء العمل

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

نقوم بتصميم اطارات حسب ذوقك انا قمت بالعمل التالي

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

قم بتقطيع الستايل باستخدام التول

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

عمل تقطيع للاطار بشكل منتظم ومتساوي

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

وعمل حفظ للعمل Save for Web

راح يفتح معك مربع التقطيع وحفظ العمل على هيئة صفحة html مع مجلد الصور مقطعه حسب التقطيع الي وضحنها بالخطوه الاولى

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

بعد الحفظ راح يكون عندنا صفحة html ومجلد خاص بها images

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

نفتح مجلد الصور وهذا هو اهم شي نحتاجه

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

الان نبداء بعمل التطاير لجميع القوالب

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

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

اعادة بسيطه للعمل

ماذا نحتاج لنبداء ؟؟

1- برنامج الفرنت بيج
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
نروح نفتح برنامج الفرنت بيج
Microsoft Office FrontPage

تابع معي الصور الشرح غالبيته داخل الصوره

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

الان راح يكون لدينا صفحه بيضاء
نتقل بعدها للتصميم مثل ماهو موضح لك بالصوره التالية
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

بعد اختيار خصائص الجداول راح يعطينا مربع للخصائص الصفحة

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

عملية انشاء الجداول سهله ومايحتاج تفصيل فيها كثير
انظر للنتيجه في الصوره التاليه
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

بيظهر مربع خصائص الجدول كل الي عليك انك تعدل عليه مثل ماهو بالصوره التالية[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

شدحيلك معي شوي الدرس هذا يبي شوي صبر لاهميته[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

الان انتهينا من الجداول .. وهذي نتيجة العمل السابق
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

اهااااا....... الان جينا لزبده الدرس وهو توزيع الصور بالفرنت بيج

انا وضعت صوره للصور وهي مقطعه

ملاحظه بسيطه :
التوزيع بيكون ادراج صوره او وضع خلفيه

وسبق وضحنا لكم هذا بالدرس الثاني اذا تذكرون الصوره التاليه[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

يعني بيكون توزيع الصور حسب الرسم التوضيح هذا شاهد معي التوزيع

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

طريقة ادارج الصوره يكون من خلال اداة الادارج الموضحه لكم هنا

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

بيصبح لدي بهذا الشكل

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

قبل التركيب يتطلب منا التعديل على مسار في الفرنت بيج نتقل الى تعليمات برمجية

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

بيفتح لنا الاكود البرمجيه للستايل
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

نحتاج لتعديل بسيط لمسار الصور كلها فيصبح لدينا بهذا الشكل
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

الان انتقل ليقونة التصميم وضع مؤشر الماوس في الوسط وختر اداة المحاذة
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

الدرس الخامس تطاير قالب
FORUMHOME +
FORUMDISPLAY

اتمنا منك تكون عارف طريقة الشرح الرابع

نبداء العمل

تطاير القالب في الرئيسية يحتاج تعديل على ثلاث قوالب
FORUMHOME
forumhome_forumbit_level1_nopost
forumhome_forumbit_level2_post

افتح قالب FORUMHOME

وبحث عن

كود PHP:


<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
<if condition="$show['guest']">

<tr>
<td class="tcat" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><phrase 1="$vboptions[bbtitle]">$vbphrase[welcome_to_the_x]</phrase></td>
</tr>
<tr>
<td class="alt1" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>">
<phrase 1="faq.php?$session[sessionurl]" 2="register.php?$session[sessionurl]">$vbphrase[first_visit_message]</phrase>
</td>
</tr>

</if>
<tr align="center">
<td class="thead"> </td>
<td class="thead" width="100%" align="$stylevar">$vbphrase[forum]</td>
<td class="thead" width="175">$vbphrase[last_post]</td>
<td class="thead">$vbphrase[threads]</td>
<td class="thead">$vbphrase[posts]</td>
<if condition="$vboptions['showmoderatorcolumn']">
<td class="thead">$vbphrase[moderator]</td>
</if>
</tr>
</thead>
$forumbits
<tbody>
<tr>
<td class="tfoot" align="center" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><div class="smallfont"><strong>
<a href="forumdisplay.php?$session[sessionurl]do=markread">$vbphrase[mark_forums_read]</a>
   
<a href="showgroups.php?$session[sessionurl]">$vbphrase[view_forum_leaders]</a>
</strong></div></td>
</tr>
</tbody>
</table>

استبدله بالتالي

كود PHP:


<if condition="$show['guest']">
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
<tr>
<td class="tcat" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><phrase 1="$vboptions[bbtitle]">$vbphrase[welcome_to_the_x]</phrase></td>
</tr>
<tr>
<td class="alt1" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>">
<phrase 1="faq.php?$session[sessionurl]" 2="register.php?$session[sessionurl]">$vbphrase[first_visit_message]</phrase>
</td>
</tr>
</thead>
</table>
</if>


$forumbits

وحفظ القالب

افتح قالب forumhome_forumbit_level1_nopost

احذف كل القالب وضع مكانه الكود التالي

كود PHP:

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">

كود PHP:

[RIGHT]<tbody>
<tr>
<td class="tcat" colspan="<if condition="$vboptions[showmoderatorcolumn]">6<else />5</if>">
<a style="float:$stylevar

" href="#top" onclick="return toggle_collapse('forumbit_$forumid')"><img id="collapseimg_forumbit_$forumid" src="$stylevar[imgdir_button]/collapse_tcat{$collapseimg_forumid}.gif" alt="" border="0" /></a>
<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]">$forum[title]</a>
<if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>
<if condition="$show['subforums']"><div class="smallfont"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></if>
</td>
</tr>
</tbody>
<if condition="$childforumbits">
<tbody id="collapseobj_forumbit_$forumid" style="{$collapseobj_forumid}">
<tr align="center">
<td class="thead" width="35"> </td>
<td class="thead" align="$stylevar">$vbphrase[forum]</td>
<td class="thead" width="200">$vbphrase[last_post]</td>
<td class="thead" width="65">$vbphrase[threads]</td>
<td class="thead" width="65">$vbphrase[posts]</td>
<if condition="$vboptions['showmoderatorcolumn']">
<td class="thead" width="120">$vbphrase[moderator]</td>
</if>
</tr>
$childforumbits
</tbody>
</if>
</table>
[/RIGHT]

[right][right]اعمل حفظ

افتح قالب forumhome_forumbit_level2_post

[right]احذف كل القالب وضع مكانه الكود التالي

كود PHP:

<tr align="center">

[/right]

كود PHP:

[RIGHT]<td class="alt2" width="35"><img src="$stylevar[imgdir_statusicon]/forum_$forum[statusicon].gif" alt="" border="0" /></td>
<td class="alt1Active" align="$stylevar" id="f$forum[forumid]">
<div>
<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]"><strong>$forum[title]</strong></a>
<if condition="$show['browsers']"><span class="smallfont">(<phrase 1="$forum[browsers]">$vbphrase[x_viewing]</phrase>)</span></if>
</div>
<if condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>
<if condition="$show['forumsubscription']"><div class="smallfont"><strong><a href="subscription.php?$session[sessionurl]do=removesubscription&f=$forum[forumid]">$vbphrase[unsubscribe_from_this_forum]</a></strong></div></if>
<if condition="$show['subforums']"><div class="smallfont" style="margin-top:$stylevar[cellpadding]px"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></if>
</td>
<td class="alt2" width="200" nowrap="nowrap">$forum[lastpostinfo]</td>
<td class="alt1" width="65">$forum[threadcount]</td>
<td class="alt2" width="65">$forum[replycount]</td>
<if condition="$vboptions['showmoderatorcolumn']">
<td class="alt1" width="120"><div class="smallfont">$forum[moderators] </div></td>
</if>
</tr>
$childforumbits
[/RIGHT]

وعمل حفظ

الان يهمني التركيز

راح نرجع الان بالذاكره لقالب التطاير الي احنا صلحنها في الدرس الرابع

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

اتوقع كلنا عرفنا القصد من كود التطاير

ابيك الان تفتح قالب forumhome_forumbit_level1_nopost

ونسخ كل شي فيه وضعه وسط قالب التطاير

وهنا توضيح بالصوره

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

وعمل حفظ

يتبع... لنفس الدرس

يبقى علي ارجع لقالب FORUMHOME

وابحث عن

[right]
كود PHP:

كود PHP:

[RIGHT]<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
<tr>
<td class="tcat" colspan="2">$vbphrase[whats_going_on]</td>
</tr>
</thead>
$template_hook[forumhome_wgo_pos1]
<if condition="$show['loggedinusers']">

<tbody>
<tr>
<td class="thead" colspan="2">
<a style="float:$stylevar

" href="#top" onclick="return toggle_collapse('forumhome_activeusers')"><img id="collapseimg_forumhome_activeusers" src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_forumhome_activeusers].gif" alt="" border="0" /></a>
<a href="online.php$session[sessionurl_q]">$vbphrase[currently_active_users]</a>: $totalonline (<phrase 1="$numberregistered" 2="$numberguest">$vbphrase[x_members_and_y_guests]</phrase>)
</td>
</tr>
</tbody>
<tbody id="collapseobj_forumhome_activeusers" style="$vbcollapse[collapseobj_forumhome_activeusers]">
<tr>
<td class="alt2"><a href="online.php$session[sessionurl_q]"><img src="$stylevar[imgdir_misc]/whos_online.gif" alt="$vbphrase[view_whos_online]" border="0" /></a></td>
<td class="alt1" width="100%">
<div class="smallfont">
<div style="white-space: nowrap"><phrase 1="$recordusers" 2="$recorddate" 3="$recordtime">$vbphrase[most_users_ever_online_was_x_y_at_z]</phrase></div>
<div>$activeusers</div>
</div>
</td>
</tr>
</tbody>

</if>
$template_hook[forumhome_wgo_pos2]
<tbody>
<tr>
<td class="thead" colspan="2">
<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumhome_stats')"><img id="collapseimg_forumhome_stats" src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_forumhome_stats].gif" alt="" border="0" /></a>
<phrase 1="$vboptions[bbtitle]">$vbphrase[x_statistics]</phrase>
</td>
</tr>
</tbody>
<tbody id="collapseobj_forumhome_stats" style="$vbcollapse[collapseobj_forumhome_stats]">
<tr>
<td class="alt2"><img src="$stylevar[imgdir_misc]/stats.gif" alt="<phrase 1="$vboptions[bbtitle]">$vbphrase[x_statistics]</phrase>" border="0" /></td>
<td class="alt1" width="100%">
<div class="smallfont">
<div>
$vbphrase[threads]: $totalthreads*
$vbphrase[posts]: $totalposts*
$vbphrase[members]: $numbermembers<if condition="$show['activemembers']">*
<span title="<phrase 1="$vboptions[activememberdays]">$vbphrase[within_the_last_x_days]</phrase>">$vbphrase[active_members]: $activemembers</span>
</if>
</div>
<div><phrase 1="member.php?$session[sessionurl]u=$newuserid" 2="$newusername">$vbphrase[welcome_to_our_newest_member_x]</phrase></div>
$template_hook[forumhome_wgo_stats]
</div>
</td>
</tr>
</tbody>
$template_hook[forumhome_wgo_pos3]
<if condition="$show['birthdays']">

<tbody>
<tr>
<td class="thead" colspan="2">
<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumhome_birthdays')"><img id="collapseimg_forumhome_birthdays" src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_forumhome_birthdays].gif" alt="" border="0" /></a>
$vbphrase[todays_birthdays]
</td>
</tr>
</tbody>
<tbody id="collapseobj_forumhome_birthdays" style="$vbcollapse[collapseobj_forumhome_birthdays]">
<tr>
<td class="alt2"><a href="calendar.php?$session[sessionurl]do=getday&day=$today&sb=1"><img src="$stylevar[imgdir_misc]/birthday.gif" alt="$vbphrase[view_birthdays]" border="0" /></a></td>
<td class="alt1" width="100%"><div class="smallfont">$birthdays</div></td>
</tr>
</tbody>

</if>
$template_hook[forumhome_wgo_pos4]
<if condition="$show['upcomingevents']">
<tbody>
<tr>
<td class="thead" colspan="2">
<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumhome_events')"><img id="collapseimg_forumhome_events" src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_forumhome_events].gif" alt="" border="0" /></a>
<if condition="$show['todaysevents']">$vbphrase[todays_events]<else /><phrase 1="$vboptions[showevents]">$vbphrase[upcoming_events_for_the_next_x_days]</phrase></if>
</td>
</tr>
</tbody>
<tbody id="collapseobj_forumhome_events" style="$vbcollapse[collapseobj_forumhome_events]">
<tr>
<td class="alt2"><a href="calendar.php$session[sessionurl_q]"><img src="$stylevar[imgdir_misc]/calendar.gif" alt="$vbphrase[calendar]" border="0" /></a></td>
<td class="alt1" width="100%"><div class="smallfont">$upcomingevents</div></td>
</tr>
</tbody>
</if>
$template_hook[forumhome_wgo_pos5]
</table>
<br />


[/RIGHT][/RIGHT][/RIGHT]

[right]

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

رجعه لقالب FORUMHOME

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

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

مثال على الدرس

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

قم بتحديد نقاط الانحنائات بالاطراف للمستطيل مثل ماهو موضح لك بالصوره التالية

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

الان ركز شوي معي هنا الصعوبه

الان حان دور التحكم في النقاط بالماوس حاول تقوم بسح النقاط للاسفل والتوازن بعمل الانحنائات

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

بيكون لدينا الطبقات بالشكل التالي

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

نروح للطبقه الاخيره ونغير درجة الون
وبالاسهم الي بالكيبوووورد نختار السهم الي تحت يعني نسحب الطبق الاخيره للاسفل

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

وبنفس الطريقه حاول تغير في الانحنائات للطبقه الاخيره

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

حول الطبقات الى
Rasterize Layer

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

الان من ادوات ليرى ستايل قم بتدعيل المنحنيات بوضع حدود وغيره من المسات الي في اداة اليرى ستايل

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

في النهائيه بيكون عندي هيدر جميل طبعاً راح اعطيكم جزاء من العمل

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

منقول للفائدة

* عدد المساهمات : 688 تاريخ التسجيل : 23/06/2009

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

يعطك العافية انت ايضاً

بارك فيك واحسن اليك لمرورك الطيب

احترااااااااامي

* عدد المساهمات : 688 تاريخ التسجيل : 23/06/2009

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

وانت مليون صحه وعافيه

» شرح كامل لتصميم الهيدرا للاستايلات لمنتدياتvb تعلم تصمم استايل
» حصريا جميع مسلسلات رمضان