المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : الدرس الثالث عشر [ توزيع الستايل في الفرونت بيج + تركيبه على المنتدى ]



هاله الغامدي
05-01-2010, 02:48 AM
السلام عليكم ورحمة الله
صباحكم / مساؤكم الأمل :108:

هذا هو درسنا الأخير بحول الله
لا أخفيكم أنه ثقيل لكن النتيجة ستبرد هذا الثقل :)

سينقسم درسنا لـ 4 أجزاء
1- تركيب الهيدر والفوتر
2- تركيب الإطارات على منطقة الناف بار والأقسام
3- تعديل خصائص css والأيقونات بما يناسب تصميم المنتدى
4- حفظ الستايل بصيغة xml

أحب كثيرًا أن تتمهلوا قبل البدء في التطبيق وأن تراجعوا الفيديو عدة مرات

والتوفيق أرجوه لكم :)

( 1- تركيب الهيدر والفوتر ) (http://www.4shared.com/file/188115153/7ca246e/___online.html)

( 2- تركيب الإطارات على منطقة الناف بار والأقسام ) (http://www.4shared.com/file/188141130/8f1bca75/_____.html)

هاله الغامدي
05-01-2010, 02:49 AM
3- تعديل خصائص css والأيقونات بما يناسب تصميم المنتدى

نتبع الصور وفيها التوضيح لعمل أهم خصائص css

http://haladesigner.files.wordpress.com/2010/03/1.jpg

http://haladesigner.files.wordpress.com/2010/03/2.jpg

في الستايل المتمدد
http://haladesigner.files.wordpress.com/2010/03/3.jpg

مثال
قبل : http://haladesigner.files.wordpress.com/2010/03/30.jpg ............. بعد : http://haladesigner.files.wordpress.com/2010/03/29.jpg

http://haladesigner.files.wordpress.com/2010/03/4.jpg

http://haladesigner.files.wordpress.com/2010/03/5.jpg

http://haladesigner.files.wordpress.com/2010/03/6.jpg

هاله الغامدي
05-01-2010, 02:53 AM
http://haladesigner.files.wordpress.com/2010/03/7.jpg

http://haladesigner.files.wordpress.com/2010/03/8.jpg

http://haladesigner.files.wordpress.com/2010/03/9.jpg

http://haladesigner.files.wordpress.com/2010/03/10.jpg

http://haladesigner.files.wordpress.com/2010/03/11.jpg

هاله الغامدي
05-01-2010, 03:03 AM
http://forum.lahaonline.com/~art/photo/css12.jpg

http://forum.lahaonline.com/~art/photo/css13.jpg

http://forum.lahaonline.com/~art/photo/css14.jpg

http://forum.lahaonline.com/~art/photo/css15.jpg

http://forum.lahaonline.com/~art/photo/css16.jpg

هاله الغامدي
05-01-2010, 03:18 AM
http://forum.lahaonline.com/~art/photo/css17.jpg

http://forum.lahaonline.com/~art/photo/css18.jpg

هذه الخطوة للستايل الغير متمدد ، يمكن لأصحاب الستايل المتمدد إستخدامها

http://forum.lahaonline.com/~art/photo/css19.jpg

أيضًا من متغيرات الستايل نقوم بتعديل أيقونات المنتدى لتناسب التصميم
ننسخ من المجلد الأساسي images المجلدات التالية :
buttons ، misc ، statusicon
ونلصقها بداخل مجلد الستايل الذي نعمل عليه
نقوم بتعديل أيقونات إضافة الرد والتحرير و ......... حسب الستايل
ونحفظها بصيغة gif ونستبدلها بنفس الإسم بالموجودة في مجلد buttons

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

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

http://forum.lahaonline.com/~art/photo/css20.jpg

ونجعله images/............/buttons
مكان النقط نضع إسم الستايل
والكلام ينطبق على بقية المجلدات

هاله الغامدي
05-01-2010, 03:28 AM
نقطة أخيرة :
بعض الستايلات تحتوي على باترن أو ألوان لا تكون موجودة في قائمة الألوان الجاهزة
بالنسبة للألوان :
نفتح الفوتوشوب ومن قائمة الألوان نختار اللون المناسب للستايل
ثم ننسخ الرقم الذي يظهر ونلصقه مكان إما الخلفية أو مكان لون الخط

http://forum.lahaonline.com/~art/photo/css21.jpg

الباترن :
نقوم بحفظ صورة من الباترن في مجلد images مع الستايل المقصوص
ثم نضع المسار للخلفية كالتالي :
url(..vb/...1...../.....2......)1 رقم اللون#
1= إسم الستايل
2= إسم الخلفية

بإختيار حفظ يتم الإعتماد
بكذا ننتهي من خصائص css

هاله الغامدي
05-01-2010, 03:30 AM
4- حفظ الستايل بصيغة xml
في الصورة توضيح للطريقة

http://forum.lahaonline.com/~art/photo/css22.jpg


الواجب :
القيام بالأربع خطوات
ثم وضع مجلد الستايل في ملف مضغوط يكون بإسم المشاركة وإدراجه

دمتم طيبين :)

هاله الغامدي
08-01-2010, 07:42 PM
تركيب الهيدر في الستايل غير متمدد
ومثله في هذا الفوتر

http://arabsh.com/nufqy0on0fuu.html