الدرس الثانى من درس تكويد تصميم 20 قالب فى واحد ثانية

Losha

:: Coder/Designer ::
Coder/Designer
9 يونيو 2012
27
3
3
Suez
www.youtube.com
السلام عليكم ورحمة الله وبركاتة
والصلاة والسلام على أشرف خلق الله سيدنا محمد بن عبد الله علية أفضل الصلاة والسلام






الرجاء قرائة الموضوع كاملاً وعدم القفز بين السطور لتوضيح ما قد يغيب عنك والإستفادة من إستخدام الشرح لأقصى درجة
الدرس الأول
الدرس الأول من دورة التكويد لعشرين قالب فى واحد ثانية


بسم الله نبدأ الدرس الثانى من درس تكويد تصميم 20 قالب فى واحد ثانية

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



الرجاء قرائة الموضوع كاملاً وعدم القفز بين السطور لتوضيح ما قد يغيب عنك والإستفادة من إستخدام الشرح لأقصى درجة

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

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

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

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


نبدأ على بركة الله

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


فسوف أبدأ بفكرة ندر شرحها أو لا توجد فى الأصل
وهى طريقة البحث والإستبدال السليم

يوجد طريقتان للبحث والإستبدال
1- البحث والإستبدال الثابت .
2- البحث والإستبدال المتغير وهذا هو درسنا
5fW74184.gif
5fW74184.gif
وتصل للجزء الخاص بدرسنا
5fW74184.gif
فعلينا تفعيل متغير أولاً ولشرح وضع متغير
توجة للوحة تحكم المنتدى ثم
التحكم بالإستايلات
5fW74184.gif
خيارات جميع الإستيلات ثم تختار من القائمة
5fW74184.gif
5fW74184.gif
متغيرات الإستبدال


مع الذهاب للمسار الذى أشرنا إلية أعلاه

سوف يظهر لنا الصورة التالية فارغة

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

وهنا أضفنا المتغير
كود:
<!-- UP -->
علينا إجراء نفس الخطوات لإضافة المتغيرات التالية بالتتابع
كود:
<!-- UP -->
<!-- DW -->
<!-- header -->
<!-- footer -->
وهنا كما شاهدتو فى الصورة
تم إضافة أربع رموز أو كما قلنا متغيرات للإستبدال
الصورة التالية توضح








أكتفى بهذا القدر ونلتقى فى التجهيز للدرس الثانى
لأهم المناطق
وسوف يتم التوزيع على أكثر من عشرين قالب
ولكنى لن أقوم بشرح العشرين قالب ولكن بثرد لكم أسمائها فقط
أول شئ القوالب الذى سوف نعدل عليهاhttp://www.traidnt.net/vb/attachment.php?attachmentid=654741&stc=1&d=1343059176


والأن جاء دور التجهيز والتعب الحقيقي
تجهيز التصميم للعملوالتلائم للغة العربية
وسوف أضع درس كمرجع لحفر الجدول كمثال
حفر الجدول لكافة المتصفحات ولاكن اكثر من كود تفضل وتعلم الطريق إلى الإحتراف
تغير أكواد سي اس اس ومعرفة كل جزء منها
إدارة الستايلات - ..:: losha.net ::.. - vBulletin لوحة تحكم المشرف العام
وهنا قمت بشرح لقالب ولكن بطرسقة أشمل وأوسع وضعت الدرس للتذكرة
{ حصري } شرح تأطير جدول SHOWTHREAD+ postbit مع تغير طريقة عرض الموضوع
ومن ما طرحت أعلاه هو تنثيق للتصميم لكون مجهز كامل مكمل لم يتنبقى سوى توزيع اللأوان والصور

5fW74184.gif
أول شئ القوالب الذى سوف نعدل عليها


كود:
FORUMHOME
FORUMDISPLAY
forumhome_forumbit   & forumbit_level1_nopostforumbit فى حالة فصل الأقسام
footer
header
navbar
newreply
newthread
pm_messagelist
register
register_rules
SHOWTHREAD
threadadmin_mergethreads
threadadmin_moveposts
threadadmin_movethread
threadadmin_movethreadsthreadadmin
USERCP
visitormessage_editorvisitormessage
WHOSONLINE
postbit_legacylegacy
postbit
وسوف أقوم بالتعديل وشرح الفكرة فى قالب الفورم هوم
والتطبيق من الأعطاء والمتدربين والخبراء على كافة القوالب الموضوعة ويمكن الإزادة كما تريد
الأن الفكرة تقتضى فى تجهيز التصميم
ومعرفة بداية ونهاية كل جدول كما تعلمنا فى توزيع التصميم على قوالب المنتدى
ويمكن الإستعانة بهذا الدرس
أو إتباع الصورة التالية للتذكير فقط
أول درس من نوعه تعلم تأطير الجداول ونبدأ بالناف بار navbar
{ حصري } شرح تأطير جدول SHOWTHREAD+ postbit مع تغير طريقة عرض الموضوع
(شرح + حصري) توزيع الهيدر +الفوتر+ الأعمدة مختلفة المقاسات توزيع حر

والرموز التى سوف تضاف كما أشرنى فى الدرس السابق هنــــــــــــــــــــــــــا
سنبدأ بتوزيع الوسمان أو الرمزان
كود:
<!-- up -->
<!-- dw -->
والوسم up يرمز للتوزيع العلوى أو التقطير العلوى أى كان تستخدم سواء
هنا لا يهم تقنية الإستخدام سواء إستخدمت table أو div



tanbeh.gif
بالله ركز فى هذه النقطة 100%
الوسم كما وضعناه فى متغيرات الإستبدال لابد أن يوضع كما وضعتناه هناك
ففى درسى الأول وضعت فى الشرح الوسم <!-- UP --> وفى هذا الشرح وضعت الوسم <!-- up -->
وهنا الإختلاف مابين الكابتل والسمول ركزو بالله أنا قاصد هذا للتنبية على حساسية الكتابة والمسافات


الأن أتبعى معى
5fW74184.gif
التحكم بالإستايلات
5fW74184.gif
5fW74184.gif
ثم إتبع معى الخطوات التالية المصورة لإظهار كافة القوالب
bgB49936.gif

ثم الضغط مرة أخرة لظهور كافة القوالب
aVK50235.gif


ومن هنا نضغط فقط على أول حرف من إسم القالب F ونخرج القالب غلى برنامج التكويد
وبدون صور


فى قالب الفورم هوم FORUMDISPLAY
نبحث عن
[/CODE] <!-- sub-forum list -->
كود:
نضيف أسفلة 
[CODE]
<!-- up -->
وهو الرمز المخصص لتوزيع العلوى
نبحث عن
كود:
<br />
<!-- / sub-forum list  -->
نضيف أعلاة

كود:
 <!-- dw -->
وهو الجزء المخصص لتوزيع السفلى
ولا زلنا فى قالب
نبحث عن
كود:
<!-- / controls above thread list -->
نضيف أسفلة
كود:
 <!-- up -->
 [/CODE
]وهو الرمز المخصص لتوزيع العلوى 
نبحث عن
[CODE]
<!-- controls below thread list -->
نضيف أعلاة
كود:
 <!-- dw -->
وهو الجزء المخصص لتوزيع السفلى
نبحث عن
كود:
<!-- Active Users in this Forum (and sub-forums) and Moderators -->

<form action="forumdisplay.php" method="get">
<input type="hidden" name="s" value="$session[sessionhash]" />
<input type="hidden" name="f" value="$forumid" />
<input type="hidden" name="page" value="$pagenumber" />
<input type="hidden" name="pp" value="$perpage" />
نضيف أسفلة
كود:
  <!-- up -->
وهو الرمز المخصص لتوزيع العلوى
نبحث عن
كود:
</form>
<!-- End Active Users in this Forum (and sub-forums) and Moderators -->
نضيف أعلاة
كود:
  <!-- dw -->
وهو الجزء المخصص لتوزيع السفلى
سجل العمل وأحفظ القالب

5fW74184.gif
القالب التالى FORUMHOME فروم هوم رئيسية المنتدى

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

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

لا نستطيع في كل موضوع أن نشرح الأسس والتفاصيل الصغيرة هناك اشياء مفهومة ضمناً لكن يمكن فتح موضوع منفصل للاستفسار عن هذه الأمور .

الدرس القادم والنهائى
سوف يكون الإستبدال النهائى
وكما واضح من هذا الدرس أننى لم أرفق تطبيق لهذا الدرس فعلى أمل وضع تطبيقاتكم

وفى الدرس النهائى سوف يتم وضع الإستايل الديفولت مجهز للعمل بإذن الله مباشرة وسوف يكون هدية لكل المكودين

والله ولى التوفيق

fasl02.gif

وفي ختام هذا الشرح أدعوا الله لي ولكم ولوالدينا ولمن أحببناه في الدنيا
بالهداية والصلاح في الدنيا وأن يجمعنا جميعاً في الفردوس الأعلى ....
1.gif

سبحانك اللهم وبحمدك , أشهد أن لا اله إلا أنت أستغفرك وأتوب إليك
أخوكم فى الله
Ali Losha
4-losha.gif
الدروس برعاية :لوشا لخدمات وتطبيقات الويب



 

Losha

:: Coder/Designer ::
Coder/Designer
9 يونيو 2012
27
3
3
Suez
www.youtube.com
شكراً يا غالي

بس سؤال : أنا ليس لدي خبره بلغة الـ html + css + php هل هذا يؤثر علي في الدرس ؟؟
لا يوجد دخل لسؤالك ودخل بالدرس نهائى
فهذا الدرس للتوزيع السريع لتصاميم منتديات النسخ 3.8
شرفت بمرورك الكريم
 

WebCraker

العبد الفقير إلى الله
طاقم الإدارة
9 مارس 2008
5,645
50
48
Egypt
support-ar.com
بارك الله فيك على الشروحات ياغالى وبانتظار تكملة الشروحات

بس ممكن افهم معنى (( التوزيع )) ؟؟؟

تكويد يعنى ياغالى او تقطيع الاستايل وتركيبه بأختصار