[ الدرس السابع ] :: تصميم التأطير + تقطيعة + تركيبة في المنتدي ..

[ الدرس السابع ] :: تصميم التأطير + تقطيعة + تركيبة في المنتدي ..

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

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

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

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

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

ونصمم التأطير ..

فكرة التصميم مثل تصميم الهيدر والفوتر

اطراف و صور تجميلية و نقطة تمدد

الكل يصمم التأطير ويرفق لي صورة الاستايل كامل باهيدر والفوتر والتأطير ..

وهذا صورة لي استايلي كامل بالهيدر والفوتر والتأطير ..

تم تصغير هذه الصورة. إضغط هنا لرؤية الصورة كاملة. الحجم الأصلي للصورة هو 801 * 496.

بعد ماصممنا نقص الاطارات .

اول نحدد الاطارات فقط مثل ماهو واضح

تم تصغير هذه الصورة. إضغط هنا لرؤية الصورة كاملة. الحجم الأصلي للصورة هو 780 * 114.

ثم نجزء جزء علوي وجز سفلي

هذا الجزء العلوي

تم تصغير هذه الصورة. إضغط هنا لرؤية الصورة كاملة. الحجم الأصلي للصورة هو 780 * 60.

وهذا الجزء السفلي

تم تصغير هذه الصورة. إضغط هنا لرؤية الصورة كاملة. الحجم الأصلي للصورة هو 780 * 61.

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

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

تم تصغير هذه الصورة. إضغط هنا لرؤية الصورة كاملة. الحجم الأصلي للصورة هو 872 * 560.

الان انتهينا من القص ..

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

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

تم تصغير هذه الصورة. إضغط هنا لرؤية الصورة كاملة. الحجم الأصلي للصورة هو 1092 * 86.

والقالب الثاني FORUMHOME والمقصور بالفروم هوم ..

اقسام المنتدي واحصائيات المنتدي

تم تصغير هذه الصورة. إضغط هنا لرؤية الصورة كاملة. الحجم الأصلي للصورة هو 1065 * 332.

اول نبدا نركب على قالب النافبار ..

نذهب الى لوحة تحكم المنتدي

من الإستايلات والقوالب >البحث في القوالب

ثم نختار اسم الاستايل ونبحث عن navbar

ثم ننسخ كود القالب كامل ونلصقة في الفرونت بيج ..

نفتح الفرونت بيج وننتقل الى تعليمات البرمجة وحدد الكل ونحذف ثم نلصق كود النافبار ثم ننتقل من تعليمات البرمجة الى التصميم والنتيجة

تم تصغير هذه الصورة. إضغط هنا لرؤية الصورة كاملة. الحجم الأصلي للصورة هو 903 * 564.

الان نركب الجزء العلوي من التأطير في القالب ركزو معي ..

تم تصغير هذه الصورة. إضغط هنا لرؤية الصورة كاملة. الحجم الأصلي للصورة هو 930 * 322.

وتصبح النتيجة

تم تصغير هذه الصورة. إضغط هنا لرؤية الصورة كاملة. الحجم الأصلي للصورة هو 948 * 304.

ثم نضغط بزر الفاره في اي مكان من الجدول اللى انشئناه ونختار خصائص الجدول ونطبق الاعدات التالية ..



نعدل المحدد باللون الاحمر فقط ..

وتصبح النتيجة

تم تصغير هذه الصورة. إضغط هنا لرؤية الصورة كاملة. الحجم الأصلي للصورة هو 931 * 270.

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

تم تصغير هذه الصورة. إضغط هنا لرؤية الصورة كاملة. الحجم الأصلي للصورة هو 930 * 295.

كذا انتهينا من الجز العلوي نركب الجز السفلي من القالب ..

تم تصغير هذه الصورة. إضغط هنا لرؤية الصورة كاملة. الحجم الأصلي للصورة هو 939 * 413.

والنتيجة

تم تصغير هذه الصورة. إضغط هنا لرؤية الصورة كاملة. الحجم الأصلي للصورة هو 922 * 371.

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



نعدل المحدد باللون الاحمر فقط ..

وتصبح النتيجة

تم تصغير هذه الصورة. إضغط هنا لرؤية الصورة كاملة. الحجم الأصلي للصورة هو 925 * 363.

الان نركب صور الجزء السفلي طريقت التركيب الصور نفس الطريقة السابقة والنتيجة

تم تصغير هذه الصورة. إضغط هنا لرؤية الصورة كاملة. الحجم الأصلي للصورة هو 932 * 399.

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

ونحذف ماقبل اسم مجلد الاستايل مثل طريقة الهيدر والفوتر ..ثم نحدد ونقص ثم من قائمة تحرير > بحث

نختار استبدال ونبحث عن file:///C:/camel/www/vb/ ونستبدلة ..

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

تم تصغير هذه الصورة. إضغط هنا لرؤية الصورة كاملة. الحجم الأصلي للصورة هو 1088 * 209.

الان انتهينا من قالب النافبار والحمد لله . .

الان نبحث عن قالب FORUMHOME وننسخة في الفرونت بيج النتيجة ..

تم تصغير هذه الصورة. إضغط هنا لرؤية الصورة كاملة. الحجم الأصلي للصورة هو 1140 * 638.

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

تم تصغير هذه الصورة. إضغط هنا لرؤية الصورة كاملة. الحجم الأصلي للصورة هو 1141 * 396.

تم تصغير هذه الصورة. إضغط هنا لرؤية الصورة كاملة. الحجم الأصلي للصورة هو 1129 * 494.

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

تم تصغير هذه الصورة. إضغط هنا لرؤية الصورة كاملة. الحجم الأصلي للصورة هو 1061 * 527.

كذا انتهينا والحمد لله من التأطير ..

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

الرابط

:: إضغط هنا للتحميل ::


وبتوفيق للجميع ..