:: مطور :: :: vBulletin ::
|
::الدرس الخامس-استخراج ملفات الاستايل-الصور/xml:: دورة تصميم استايل للمبتدئين
اهلا وسهلا بكم من جديد في آخر درس اللى هو استخراج ملفات الاستايل كلها
حتلاحظون انه الدرس هو مقتبسات....
أي شروحات مقتبسة للمبتدئين كوّنت الدرس وقسم منّي...
والرجاء ذكر المصدر.......يا اخوان الحقوق محفوظة لاول استايل وفوك في بي ما أسامح من ينقل دون ذكر المصدر
بعد الدرس الثالث وهوا تركيب الهيدر والفوتر على الموقع وعمل التمدد
النهاردة فى درسنا تلويين جميع اجزاء الاستايل وفصل الاقسام وتوسيط اسماء الاقسام
وتركيب البارات بتاع الاقسام وايضا الخطوط المتوافقه مع اكسبلورر 7
واستخراج الاستايل على هيئة ملف Xml + ملف صور الاستايل وتركيبة على المنتدى
هنقول بسم الله
اول حاجه تلويين جميع اجزاء الاستايل
وطبعا شرحى مش هيزيد عن شرحى اخونا واستاذنا تركى الودعانى
وهوا درس تلويين جميع اجزاء الاستايل وتركيب البارات ايضا على الاقسام الرئيسية والجداول
درس اخونا تركى على الرابط دا
http://www.traidnt.net/vb/showthread.php?t=498
وطبعا كل واحد فينا عامل استايل بلون فكل واحد فينا يلون استايله حساب الوان الاستايل الى مصممه
بعد التلويين عاوزيين نغير مسارات الصور بتاع الايقوانت علشان تكون متوافقه مع الاستايل بتعنا
وهذا الشرح ايضا لخونا تركى
وايضا انا حطيت صورة للتوضيح كمان
اقتباس:
هذا الجزء هو صور الايقونات للاستايل
نفرض مثلاً انك قمت بعمل استايل واعطية المجلد اسم traidnt حث يحتوي هذا المجلد على الاستايل المقطع
لكي يكتمل الاستايل فلابد ان تضع به عدة مجلدات اساسيه وعددها ثمان مجلدات على النحو التالي:
- * مجلد buttons ( مثال :
)
* مجلد statusicon (مثال :  )
* مجلد attach ( مثال :  )
* مجلد misc ( مثال :  )
* مجلد editor ( مثال :  )
* مجلد polls ( مثال :  )
* مجلد rating ( مثال :  )
* مجلد reputation ( مثال :  )
لكن انتبه : بما انك صممت استايل ووضعت اسمه traidnt فلابد انت يكون مسار مجلدات الصور على النحو التالي :
- * ان كان مجلد الصور مرفوع على مجلد المنتدى مباشره فيجب عليك كتابة المسار التالي :
|
الصورة للتوضييح من خلالها هتفهم احنا عاوزيين ايه بالظبط
ودا درس لخونا عبدالله يجزاه الله كل الخير عن كيفية تصميم وتركـيب الأيقونات للإستايل من عبـد الـلـه
اقتباس:
|
السلام عليكُم ورحمة الله وبركاته كيف الحال إن شاء الله بخير ,.؟
اليوم درس يتساءل عنه الجميع
اللي هو تصميم أيقونات للإستايل
طبعاً لو تفهم الفكرة تقدر تطبق الدرس
بكل سهولة , , , , ,
راح أتطرق له في دراسة مفصله لأني والله فاضي وغايب اليوم . يعني والله حاب أتكلم وأطول بالسوالف وأطلع الواحد
يفهم من هنا 
يعني فاضي حدَّي ^<
خلوني أوضح أول شي فكرتها وأين تــوجـد وبعدين مقاسها
طبعاً المقاس ماهو شرط أنك لازم بالتمام المقاس , لا بس يعني مقاس قريب منها
أنتم حملوا أي إستايل من المعهد
وفكوا الضغط وشوفوا معي , 
طبعاً هذه المجلدات التي لايستغني عنها المصمم
ملاحظة مهمة :: تسمية المجلدات مو تسميها على كيفك
لازم تسميها على اسمها وطبعاً اسمها تحصله بالمجلد نفسه, ,
+
نأخذها وحـده وحـده ,
مجلد statusicon 
أمثلة عليه
هذي حقت إذا كان القسم فيه مشاركه اليوم يحط الأيقونة
الأولى ,, وإذا ماكان فيه مشاركة اليوم يحط الأيقونة الثانية

+
وهذي طبعاً تجدها في يمين الموضوع ( هذي طبعاً بس تلوين وخلاص ) كافي

+
أيقونة إذا كان العضو موجود

وهذي إذا غير موجود ,

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

وأيضاً هذي
متواجد

غير متواجد

المسميات لهُم ,
متواجد => user_online
غير متواجد => user_offline
هذا تقريباً اللي في مجلدstatusicon
-------------------------------------------------------------------------
مجلد buttons
أمثلة عليه مع مسمياتهُم
newthread 
reply

threadclosed
تحفظه بإسم reply_small
+
quote
find
email
home 
forward
edit 
هذي حقت التقييم داخل الموضوع
reputation

وهذي حقت اذا تبي تعطي الواحد إنذار < يكفينا شرها
report

هذا تقريباً اللي في مجلد buttons
------------------------------------------------------------------------------
مجلد misc
أمثلة على المهم فيها صورتين تقريباً مهمة اللي هم موجودين في الناف بار والباقي ارفعه مثل ماهو
1

2

هذا تقريباً اللي تحتاج تعدله في مجلد misc
----------------------------------------------------------------------------
والله أي واحد يفهم الدرس يآجماعة بس يبيله تفكير شوي
اللحين واحد ذكي يقول لي كم مقاس تصميم الأيقونات ؟
المقاس تحديده سهل روح مثلاً لأي أيقونه تبي تعرف مقاسها
مثلاً أيقونة موضوع جديد تقول أبي مقاسها كم ؟
يآقلبي روح للمجلد تبعها اللي هو buttons
وبس خل الماوس تمر فوقها مثال ,.

اللحين تروح للفوتوشوب وتفتح على مقاس
104×40
مثال على المقاس لموضوع جديد

طبعاً تختلف من مقاس لمقاس , أنت المهم إنك عرفت وين المجلدات وشسمها
وما تحتوي وكيف تطلع مقاسها وما هي أسماء الصور فيها ,
وعاد اللحين أنت تصممها من نفسك على حسب المقاس , يعني أنت وإبداعك , ^_*
وفي الأخير ترفع المجلدات الثلاث بعد الانتهاء منها داخل مجلد الإستايل لنفرض أن مجلد الإستايل اسمه Abdullah
يكون مسار الأيقونات كالتالي
vb/Abdullah/buttons
vb/Abdullah/statusicon
vb/Abdullah/misc
vb => مجلد المنتدى الشائع فيه بعض الناس تحطه forum أو forums عادي مو مشكله ,
Abdullah => اسم مجلد الإستايل ,
وأخر شي من لوحة تحكم المنتدى > التحكم بالإستايلات > ومن خيارات القائمة المنسدلة للإستايل اللي تعمل عليه اختر متغيرات الإستايل
وشوف الصور هذي

استبدل images بإسم ستايلك مثلاً Abdullah مثل ماقلنا فوق ,
واحـفظ ,
--------------------------------------------------------------------
أتمنى أن تكُون الفكرة وصلتكُم , لأن والله كم واحد يجيني يقول لي كم مقاس الأيقونات ويقول بالله حط درس لها لأن مافيه دروس لها ,
يعني أدري إني عطيت الدرس أكثر من حجمه ,<
بس يعني لتوضيح الفكــرة فقط ,
أتمنى الدعاء لي ولوالديْ بالمغفرة والتوفيق
وهذا وصلى الله وسلم على نبينا محمـد وعلى اله وصحبه أجمعين
أخـوكُم / عـبـد الـلـه
|
وايضا هنا الخطوط المتوافقه مع المتصفح الجديد اكسبلورر 7
اقتباس:
يفضل من مصممي ستايلات المنتديات اعتماد هذه الخطوط في ستايلاتهم حتى لاتسبب مشاكل لعملائهم .
خلفية المنتدى/Body (التخصيص في هذا الستايل)
حجم الخط : 10pt
نوع الخط :tahoma, arial, helvetica,verdana
---------------------------------------------
خلفية الصفحة/Page Background (التخصيص في هذا الستايل)
نجعله فاضي
---------------------------------------------
<td>, <th>, <p>, <li>
حجم الخط : 10pt
نوع الخط :tahoma, arial, helvetica,verdana
--------------------------------------------
حدود الجدول (التخصيص في هذا الستايل)
نجعله فاضي
-------------------------------------------
الأقسام الرئيسية/Category Strips (التخصيص في هذا الستايل)
شكل الخط : bold
حجم الخط : 8pt
نوع الخط : tahoma, arial, helvetica,verdana
-------------------------------------------
رأس الجدول/Table Header (التخصيص في هذا الستايل)
شكل الخط : bold
حجم الخط : 11px
نوع الخط : tahoma, arial, helvetica,verdana
-------------------------------------------
نهاية الجدول/Table Footer (التخصيص في هذا الستايل)
حجم الخط : 8pt
نوع الخط : tahoma, arial, helvetica,verdana
-------------------------------------------
لون التوزيع الأول/First Alternating Color (التخصيص في هذا الستايل)
شكل الخط : bold
حجم الخط : 16px
نوع الخط : arial, helvetica,verdana
-------------------------------------------
لون التوزيع الثاني/Second Alternating Color (التخصيص في هذا الستايل)
شكل الخط : bold
حجم الخط : 16px
نوع الخط : arial, helvetica,verdana
-------------------------------------------
محرر WYSIWYG (يجب أن يكون عادةً متماثل مع 'لون التوزيع الأول/First Alternating Color' أو 'خلفية الكتابة/Input Fields')
حجم الخط : 10pt
نوع الخط : arial, helvetica,verdana
-------------------------------------------
خلفية الكتابة/Input Fields (التخصيص في هذا الستايل)
حجم الخط : 10pt
نوع الخط : tahoma, arial, helvetica,verdana
-------------------------------------------
الأزرار/Buttons (التخصيص في هذا الستايل)
حجم الخط : 12px
نوع الخط : Tahoma,Verdana,Arial,Helvetica,sans-serif
-----------------------------------------
قوائم <select> (التخصيص في هذا الستايل)
حجم الخط : 11px
نوع الخط : tahoma, arial, helvetica,verdana
-----------------------------------------
الخط الصغير (التخصيص في هذا الستايل)
حجم الخط : 11px
نوع الخط : tahoma, arial, helvetica,verdana
-----------------------------------------
لون الوقت (التخصيص في هذا الستايل)
حجم الخط : 11px
نوع الخط : tahoma, arial, helvetica,verdana
-----------------------------------------
نص شريط العنوان/Navbar **************** (التخصيص في هذا الستايل)
شكل الخط : bold
حجم الخط :11px
نوع الخط :tahoma, arial, helvetica,verdana
------------------------------------------
الخط المبرز /Highlighted
شكل الخط : bold
-----------------------------------------
إبراز عنصر السطر الإداري/Inline Moderation Element Highlight (التخصيص في هذا الستايل)
نتركه فاضي
------------------------------------------
محيط اللوحة/Panel Surround (التخصيص في هذا الستايل)
نتركه فاضي
----------------------------------------
اللوحة (الأشكال)/Panel Forms (التخصيص في هذا الستايل)
نتركه فاضي
---------------------------------------
<legend> (التخصيص في هذا الستايل)
حجم الخط : 11px
نوع الخط : tahoma, arial, helvetica,verdana
---------------------------------------
التحكم بالقوائم المنبثقة/Popup Menu Controls (التخصيص في هذا الستايل)
شكل الخط :bold
حجم الخط:11px
نوع الخط :tahoma, arial, helvetica,verdana
--------------------------------------
جسم قائمة الإنبثاق/Popup Menu Body (التخصيص في هذا الستايل)
نتركه فاضي
-------------------------------------
خيار صف قائمة الإنبثاق/Popup Menu Option Row (التخصيص في هذا الستايل)
حجم الخط : 8pt
نوع الخط : tahoma, arial, helvetica,verdanaf
-----------------------------------
خيار سطوع القوائم المنبثقة/Popup Menu Highlighted Option (التخصيص في هذا الستايل)
حجم الخط : 8pt
نوع الخط :tahoma, arial, helvetica,verdana
|
بعد التلوين والخطوط عاوزين نفصل ين الاقسام ونوسط اسماء الاقسام
زى كدا يعنى
يتبع---------------
يتبع
| التوقيع |
|
معهد اول استايل معهد لتطوير موقعك ومنتداك شكرا للأخ ابو الليل شكرا للأخ سكوربيون |
|