**تعلم تصميم ستايل أحترافى لمنتديات Vb -شرح مفصل بالصور-** [الأرشيف]

capitaine

09-05-2007, 11:50 AM

http://www.des-ksa.com/up/images/s-style-p-5/13.gif

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

ملحوضة هامة:الصور كثيرة لذلك يرجى الانتظار لحين تحميلها جميعها

لاصحاب خدمة الانترنت البطيئة اوقفو تحميل هذه الصفحة وحملو الكتاب من هنا:
http://www.sendspace.com/file/w4l1l3

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

( اللهم لاعلم لنا الا ماعلمتنا )

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

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

افتح برنامج الفوتوشوب بالضغط مرتين على ايقونة البرنامج ( دبل كليك )
http://www.des-ksa.com/up/images/s-style-p/1.gif

اختر من قائمة ملف .. جديد .. كما تلاحظ
http://www.des-ksa.com/up/images/s-style-p/2.gif

أضبط الأعدادات كما تلاحظ بالصوره .. عرض 770 وارتفاع 500 بالبكسل
http://www.des-ksa.com/up/images/s-style-p/3.gif
الحين نختار لونين متناسقين واحد خفيف والثاني ثقيل .... وباللون الخفيف نلون الخلفيه .. كما بالصوره
http://www.des-ksa.com/up/images/s-style-p/4.gif

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

http://www.des-ksa.com/up/images/s-style-p/5.gif

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

http://www.des-ksa.com/up/images/s-style-p/6.gif

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

http://www.des-ksa.com/up/images/s-style-p/7.gif

http://www.des-ksa.com/up/images/s-style-p/8.gif

http://www.des-ksa.com/up/images/s-style-p/9.gif

يطلع شكل الدائره كما بالصوره

http://www.des-ksa.com/up/images/s-style-p/10.gif

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

http://www.des-ksa.com/up/images/s-style-p/11.gif

تطلع نافذه اكتب اي اسم واضغط اوكي

http://www.des-ksa.com/up/images/s-style-p/12.gif

الان اعمل شكل ثالث كما فعلت ... ووزع الدوائر كما تلاحظ بالصوره التاليه واحده فوق وأثنتان تحت يمين ويسار .

http://www.des-ksa.com/up/images/s-style-p/13.gif

نحول الاشكال الى صور لنتعامل معها بشكل افضل اتبع الصوره للتحويل ..

http://www.des-ksa.com/up/images/s-style-p/14.gif

الحين تابع الصوره التاليه وراح نشرحها بالارقام الموضح .. وهي لتغيير شكل الدوائر من الداخل

http://www.des-ksa.com/up/images/s-style-p/15.gif

1. نحدد الدائره الى بنعدل شكلها
2. نختار اداة التعبئه
3. من فوق نختار باترين بدل التعبئه
4. نضغط على الزر هذا لتختار نوع الباترين
5. نختار الباترين الي يعجبنا ونعمل تعبئه للدائره به

راح يطلع الشكل هذا لنا بعد التعبئه للدائرتين

http://www.des-ksa.com/up/images/s-style-p/16.gif

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

http://www.des-ksa.com/up/images/s-style-p/17.gif

نختار الصوره الى نبي ونضغط على فتح

http://www.des-ksa.com/up/images/s-style-p/18.gif

نجعل الصوره فوق جميع التصاميم والمهم فوق الدائره الرئيسيه ثم نتبع الصوره التاليه لدمج الصوره مع الدائره او نضغط الاختصار ctrl + g

http://www.des-ksa.com/up/images/s-style-p/19.gif

راح تندمج بهذا الشكل

http://www.des-ksa.com/up/images/s-style-p/20.gif

باقي تعديل الألوان للصوره .. نتبع الصوره التاليه لتعديل الألوان او نضغط الاختصار ctrl + u

http://www.des-ksa.com/up/images/s-style-p/21.gif

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

http://www.des-ksa.com/up/images/s-style-p/22.gif

يطلع هذا الشكل

http://www.des-ksa.com/up/images/s-style-p/23.gif

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

http://www.des-ksa.com/up/images/s-style-p/24.gif

نرسم مستطيل من تحت الدوائر الى رسمناها ونجعله بالترتيب تحتها

http://www.des-ksa.com/up/images/s-style-p/25.gif

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

http://www.des-ksa.com/up/images/s-style-p/26.gif

هذا الجزء الاول رسم البنر بعده الفوتر وبعده التقطيع والتوزيع والتلوين ونخلص ^_^
ــــــــــــــــــــــــــــــــــــــــــــــــــ ــــــــــــــــــــــــــــــــــــــــــــــــــ ــــــــــــــــــــــــــــــــــــــــــــــــــ ــــــــــــــــــــــــ

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

ولاحد يستعجل راح تتعلمون كل شي عن الستايلات والتصاميم ان شاء الله .. وارجع اقول اهم شي التطبيق انا راح ارفق مع كل درس ملف مفتوح ترجعله اذا اخطيت ولاتخلي اعتمادك الكلي عليه ... لازم تعتمد على نفسك قبل كل شي
بعد هالمقدمه الحلوه نبداء الدرس ^_^
طبعا بالدرس الاول رسمنا البنر ... والحين درسنا عن الفوتر والأعمده يمين ويسار .. البنر ( الجزء العلوي ) .. الفوتر ( الجزء السفلي ) الأعمده يمين ويسار ( ماتبي شرح مفهومه )
الحين نرسم مربع تحت كما تشاهد بالصوره

http://www.des-ksa.com/up/images/s-style-p-2/1.gif

نعطي المستطيل الي رسمنا الخيارات الى تعلمت بالدرس الاول .. تابع الصور .. مع العلم اذا ماعجبك الشكل عدل على كيفك ..

http://www.des-ksa.com/up/images/s-style-p-2/2.gif

http://www.des-ksa.com/up/images/s-style-p-2/3.gif

http://www.des-ksa.com/up/images/s-style-p-2/4.gif

والحين نعمل تنقيط للشكل مثل ماتعلمنا اول ....

http://www.des-ksa.com/up/images/s-style-p-2/5.gif

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

نرسم 3 دوائر .. مثل البنر . لازم يكون في تناسق . واحده فوق واثنين تحت كما تلاحظ بالصوره التاليه

http://www.des-ksa.com/up/images/s-style-p-2/6.gif

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

http://www.des-ksa.com/up/images/s-style-p-2/7.gif

نرسم عامودين يمين ويسار كما تلاحظ .. ونعدل اشكالها مثل ماعدلنا على الفوتر قبل شوي

http://www.des-ksa.com/up/images/s-style-p-2/8.gif

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

http://www.des-ksa.com/up/images/s-style-p-2/9.gif

بعد مارسمنا ... يكون الستايل جاهز للتقطيع .. وهذا الشكل النهائي

http://www.des-ksa.com/up/images/s-style-p-2/10.gif

يمكن يسئل شخص يقول .. طيب ابي اضيف مربع العشر مواضيع ؟؟؟؟؟؟؟؟؟؟
اقوله اصبر وراح نضيفه ... مو الحين .. بالدروس القادمه راح يكون في درس عن هالسؤال
اهم شي تابع الدروس مثل ماهي وراح يبين لك كل شي ..
ابي تطبيق للدرس والي يطبق نفس الدرس مافي مانع يحاول يخترع شي جديد .. بس لاتبعد عن الفكره الاساسيه للدرس او الشكل العام لان في منطقة تمدد راح نشرحها بالدرس القادم مع التقطيع
ــــــــــــــــــــــــــــــــــــــــــــــــــ ــــــــــــــــــــــــــــــــــــــــــــــــــ ــــــــــــــــــــــــــــــــــــــــــــــــــ ــــــــــــــــــــــــ
الدرس الثالث
لتصميم الستايل الاحترافي وهي تقطيع الستايل
راح نستمر بالدروس وراح نخلي الوقت بين كل حلقه والثانيه مده قصير .... يعني الدرس الرابع راح ينزل قريب .. نبي تطبيق على شان انزل الدرس بسرعه وماله داعي نطول لاني احس انه يسبب خمول للاعضاء
نبدء الدرس

اول شي نطلع الشبكه وهذى فايدتها انها تعطيك تقطيع سليم بنسبة 98% والنسبه هذى كافيه علينا
نتبع الصوره التاليه لأظهار الشبكه

http://www.des-ksa.com/up/images/s-style-p-3/1.gif

نختار أداة التقطيع ونبداء نقطع الستايل على حسب التحديد الى تلاحظه بالصوره التاليه

http://www.des-ksa.com/up/images/s-style-p-3/2.gif

لارقام 1 و 2 و 3 و 4 باللون الاحمر هي الزوايا طبعا العرض يكون نفس الشي للجميع والارتفاع يكون متساوي بين 1 و 3 .. وبين 2 و 4
الارقام 5 و 6 باللون الازرق هي منطقة التمدد ولازم يكون العرض نفس الشي
الارقام 7 و 8 باللون الاخضر الصور الاساسيه وهي الي تحمل اسم الموقع وبعض العبارات للمنتدى او اي شي على مزاجك
الارقام 9 و 10 باللون الاصفر هي منطقه التمدد للأسفل وهذى لازم يكون الارتفاع نفس الشي
مشروحه بالتفصيل الممل .. بس في اضافه هنا بسيطه وهي التمدد للاسفل وهذا لمسه للستايل الاحترافي
نكمل ..
بعد التقطيع نروح نحفظ عملنا على شان يكون جاهز لتوزيعه على الفرونت بيج
نتبع الصور التاليه للحفظ

http://www.des-ksa.com/up/images/s-style-p-3/3.gif

http://www.des-ksa.com/up/images/s-style-p-3/5.gif

وبكذا قطعنا الستايل وباقي التوزيع والتركيب والصور الجماليه .. وراح يتم ادراجها بشكل متتابع ان شاء الله
ــــــــــــــــــــــــــــــــــــــــــــــــــ ــــــــــــــــــــــــــــــــــــــــــــــــــ ــــــــــــــــــــــــــــــــــــــــــــــــــ ــــــــــــــــــــــــ
الدرس الخامس
توزيع الستايل على الفرونت بيج
المطلوب .. برنامج فرونت بيج عربي 2003
نبدء

افتح البرنامج بالضغط على ايقونتة

http://www.des-ksa.com/up/images/s-style-p-4/1.gif

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

http://www.des-ksa.com/up/images/s-style-p-4/2.gif

ارجع للتصميم واضغط بالزر الايمن باي مكان بالصفحه واختار خصائص الصفحه

http://www.des-ksa.com/up/images/s-style-p-4/3.gif

غير اتجاه الصفحه الى يمين يسار

http://www.des-ksa.com/up/images/s-style-p-4/4.gif

ادرج جدول بـ 3 صفوف و 3 أعمده

http://www.des-ksa.com/up/images/s-style-p-4/5.gif

اضغط داخل الجدول بالزر الايمن وختار خصائص الجدول

http://www.des-ksa.com/up/images/s-style-p-4/6.gif

أضبط الأعدادات كما تلاحظ بالصوره

http://www.des-ksa.com/up/images/s-style-p-4/7.gif

ندرج الزوايا للستايل .. اضغط داخل الخليه التي بالزاويه اليمنى فوق وختر ادراج صوره

http://www.des-ksa.com/up/images/s-style-p-4/8.gif

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

http://www.des-ksa.com/up/images/s-style-p-4/9.gif

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

http://www.des-ksa.com/up/images/s-style-p-4/10.gif

نضغط استعراض ونحدد الخلفيه وهي التمدد ونضغط موافق

http://www.des-ksa.com/up/images/s-style-p-4/11.gif

ينتج عندنا هذا الشكل بعد ادراج الزوايا والشد وعمل منطقة التمدد
اضغط على الصور لتشاهدها بالشكل الطبيعي

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

http://www.des-ksa.com/up/images/s-style-p-4/13.gif

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

http://www.des-ksa.com/up/images/s-style-p-4/14.gif

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

http://www.des-ksa.com/up/images/s-style-p-4/15.gif

واذا لم تكن ظاهر عندك اختار .. عرض .. اشرطة ادوات .. صوره

http://www.des-ksa.com/up/images/s-style-p-4/16.gif

الحين نروح للرئيسيه ونضغط ونسحب ..

http://www.des-ksa.com/up/images/s-style-p-4/17.gif

وأول ماتتركها راح يظهر تلقائياً مربع الارتباط التشعبي .. ضع رابط الرئيسيه ثم موافق

http://www.des-ksa.com/up/images/s-style-p-4/18.gif

والروابط كالتالي ...
الرئيسيه $vboptions[forumhome].php?$session[sessionurl]
المكتب usercp.php?$session[sessionurl]
التسجيل register.php?$session[sessionurl]
البحث search.php?$session[sessionurl]
التعليمات faq.php?$session[sessionurl]
قائمة الأعضاء memberlist.php?$session[sessionurl]
التقويم calendar.php?$session[sessionurl]
خروج login.php?$session[sessionurl]do=logout
راسلنا sendmessage.php

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

http://www.des-ksa.com/up/images/s-style-p-4/19.gif

1 - نحدد كل الكود .. ماعدا اسم المجلد الذي به الصور مع اسم الصوره
2 - نضغط على هذا الزر وهو البحث
3 - نختار استبدال ونترك مربع استبدال بـ فاضي تماماً
4 - نضغط على استبدال الكل

وهكذا يكون الستايل شغال على اي منتدى
الان نحدد البنر والفوتر كما بالصوره لنعرفها ونركبها بالدرس القادم وسيكون شاملا ان شاء الله على تركيب المنتدى وتغيير الوانه مع الازرار والجماليات .. التي يسئل عنها الكثيررررررررر

http://www.des-ksa.com/up/images/s-style-p-4/20.gif

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

http://www.des-ksa.com/up/images/s-style-p/2.gif

نختار المقاسات كما تشاهد

http://www.des-ksa.com/up/images/s-style-p-5/1.gif

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

http://www.des-ksa.com/up/images/s-style-p-5/3.gif

والان .. نختار لون خفيف ولون ثقيل ولازم تنسق الالوان يعني تكون مقتبسه من نفس لون الستايل ... طبعا بعد مانحدد اللون ناخذ الكود الخاص به كما تلاحظ بالصوره

http://www.des-ksa.com/up/images/s-style-p-5/4.gif

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

وراح ننسخ ثلاث مجلدات من مجلد الـ images الموجود داخل vb وهي مجلد buttons و misc و statusicon
وسيكون شكل المجلد كما يلي .

أضغط على الصوره لتراها بالشكل الطبيعي

http://www.des-ksa.com/up/images/s-style-p-5/5.gif

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

http://www.des-ksa.com/up/images/4-style-m/6.gif

نذهب الى الأستايلات ثم ضبط الستايلات ....... كما بالصوره

http://www.des-ksa.com/up/images/4-style-m/7.gif

نختار الستايل المراد التعديل عليه .. وليكن الرئيسي . ثم نضغط على أذهب :

http://www.des-ksa.com/up/images/4-style-m/8.gif

الان نشاهد الصور ونضيف البنر المحدد سابقا والفوتر كلا في مكانه كما هو موضح بالصوره .

http://www.des-ksa.com/up/images/4-style-m/9.gif

ننزل شوي ونغير كلمة images المحدده الى اسم مجلد الصور عندنا وليكن مثلاً des-ksa وهذه المجلدات هي التي تحوي الأزرار العامه للمنتدى كما تلاحظ بالصوره

http://www.des-ksa.com/up/images/s-style-p-5/6.gif

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

بس قبل لاابداء راح اعطيك بعض الاشياء الي لازم تعرفها ... عندنا الشكل # والي هو الشبكه لازم يكون قبل كود اللون على شان يشتغل الكود وطريقة كتابته اضغط شيفت Shift مع رقم 3 وبعده ضع كود اللون .. وهذا مثال : #A35D5D
الشي الثاني لازم تعرف كيف تغير كود اللون بصوره وهي القطعه الي حفظناها قبل شوي وانا حفظتها بأسم bb وطريقة تشغيلها بدل كود اللون . نضع هذا الكود بدل كود اللون #D6BBBB url(des-ksa/bb.gif) repeat-x top left
شرح سريع لهذا الكود .... اول شي الرابط des-ksa/bb.gif كما هو واضح اسم المجلد الخاص بصور الستايل بعده اسم الصوره وهي القطعه المحفوظه عندنا ... الكود D6BBBB وهذا كود اللون الخفيف وسبب وضعه اذا كان المربع
اكبر من الصوره المحفوظه يتم استكمال النقص بهذا اللون

وعندنا لون اضافي للستايل بعد وهو الأسود ورقم الكود #000000 وهذا لكي يعطي الستايل بعض التمير للاقسام والاشياء الرئيسيه
واخر شي وهو نوع الخط ونضع هذه الانواع بنفس الشكل يعني انسخ وألصق arial,verdana,helvetica,sans-serif
وراح يبين كل شي معك عند التطبيق ... تابع .

الان نبداء وطبق مثل ماتشوف

http://www.des-ksa.com/up/images/s-style-p-5/7.gif
http://www.des-ksa.com/up/images/s-style-p-5/8.gif
http://www.des-ksa.com/up/images/s-style-p-5/9.gif
http://www.des-ksa.com/up/images/s-style-p-5/10.gif
http://www.des-ksa.com/up/images/s-style-p-5/11.gif
http://www.des-ksa.com/up/images/s-style-p-5/12.gif
http://www.des-ksa.com/up/images/s-style-p-5/13.gif
http://www.des-ksa.com/up/images/s-style-p-5/14.gif
http://www.des-ksa.com/up/images/s-style-p-5/15.gif
http://www.des-ksa.com/up/images/s-style-p-5/16.gif
http://www.des-ksa.com/up/images/s-style-p-5/17.gif
http://www.des-ksa.com/up/images/s-style-p-5/18.gif
http://www.des-ksa.com/up/images/s-style-p-5/19.gif
http://www.des-ksa.com/up/images/s-style-p-5/20.gif
http://www.des-ksa.com/up/images/s-style-p-5/21.gif
http://www.des-ksa.com/up/images/s-style-p-5/22.gif
http://www.des-ksa.com/up/images/s-style-p-5/23.gif
http://www.des-ksa.com/up/images/s-style-p-5/24.gif
http://www.des-ksa.com/up/images/s-style-p-5/25.gif
http://www.des-ksa.com/up/images/s-style-p-5/26.gif
http://www.des-ksa.com/up/images/s-style-p-5/27.gif
http://www.des-ksa.com/up/images/s-style-p-5/28.gif
http://www.des-ksa.com/up/images/s-style-p-5/29.gif
http://www.des-ksa.com/up/images/s-style-p-5/30.gif

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

/* ***** styling for 'big' usernames on postbit etc. ***** */
.bigusername { font-size: 14pt; }
/* ***** small padding on 'thead' elements ***** */
td.thead, div.thead { padding: 4px; }
/* ***** basic styles for multi-page nav elements */
.pagenav a { text-decoration: none; }
.pagenav td { padding: 2px 4px 2px 4px; }
/* ***** define margin and font-size for elements inside panels ***** */
.fieldset { margin-bottom: 6px; }
.fieldset, .fieldset td, .fieldset p, .fieldset li { font-size: 11px; }
/* ***** don't change the following ***** */
form { display: inline; }
label { cursor: default; }
.normal { font-weight: normal; }
.inlineimg { vertical-align: middle; }
html
{
scrollbar-base-color: #A35D5D;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #D6BBBB;
}

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

http://www.des-ksa.com/up/images/s-style-p-5/31.gif

الان ننزل الى اخر شي ونضغط حفظ

http://www.des-ksa.com/up/images/s-style-p-5/32.gif

باقي علينا صور الازرار والصور الخاصه بالمواضيع الجديده والقديمه والمقفله .. وهي صور بمقاس 30x30 بأمتداد gif طبعا استبدل الصور الاصليه بالجديده وبنفس الأسم والامتداد
وهي بالمجلدات buttons و misc و statusicon
نبداء بالـ statusicon

http://www.des-ksa.com/up/images/s-style-p-5/33.gif

وهذا مثال بعد تغيير الصور

http://www.des-ksa.com/up/images/s-style-p-5/34.gif

الان مجلد misc

http://www.des-ksa.com/up/images/s-style-p-5/35.gif

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

http://www.des-ksa.com/up/images/s-style-p-5/36.gif

وهذي صوره بعد تعديل الأزرار ..

http://www.des-ksa.com/up/images/s-style-p-5/37.gif

وطبعا تقيس عليها باقي الاشياء اذا حبيت تغير مثلا الاسهم او الرموز الصغيره ... شي يرجع لذوق المصمم
............
والان .. تتوقع وش باقي ؟؟؟ يعتبر الستايل جاهز بالوقت الحالي .. ولاكن اذا حبيت تجعل ستايلك اكثر احترافيه تابع الدرس الاخير وهو البرواز للأقسام الرئيسيه .. مع طريقة حفظ الستايل ومجلد الصور ونشره بالانترنت
ــــــــــــــــــــــــــــــــــــــــــــــــــ ــــــــــــــــــــــــــــــــــــــــــــــــــ ــــــــــــــــــــــــــــــــــــــــــــــــــ ــــــــــــــــــــــــ
بسم الله
درس اليوم هو الأخير من سلسلة تصميم ستايل أحترافية للمنتديات .
وهو بعنوان تصميم و تركيب البرواز لأقسام الستايل الأحترافيي . وحفظ الستايل الاحترافي
والدرس مثل ماهو واضح .. عباره عن 3 أقسام . تصميم البرواز . وتركيب البرواز . حفظ الستايل
وراح نوزع البرواز على الأقسام الرئيسيه فقط . يعني بالواجهه على الاقسام . وعلى النفبار وهو العنوان العلوي . وهذا المهم . وراح تتضح الصوره بعد متابعة وتطبيق الدرس تابع ...
-----------------------------
القسم الاول . تصميم البرواز لأقسام الستايل
اول شي نفتح صفحه جديده

http://www.des-ksa.com/up/images/s-style-p/2.gif

نختار المقاسات كما تشاهد

http://www.des-ksa.com/up/images/s-style-p-6/1.gif

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

http://www.des-ksa.com/up/images/s-style-p-6/2.gif

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

http://www.des-ksa.com/up/images/s-style-p-6/3.gif

نرسم نفس الاعمده الي بالستايل والكل اكيد يعرفها .. وتقدر تغير على كيفك . بس على شان تناسق الستايل في درسنا نرسم نفس الأعمده

http://www.des-ksa.com/up/images/s-style-p-6/4.gif

نختار أداة التقطيع .. ونقطع البرواز الى 6 قطع متناسقه ولاحظ القطعتين الي بالنص . راح تكون منطقة تمدد للبرواز

http://www.des-ksa.com/up/images/s-style-p-6/5.gif

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

http://www.des-ksa.com/up/images/s-style-p-6/6.gif

وهذي صورة مجلد البرواز داخل مجلد ستايلنا

http://www.des-ksa.com/up/images/s-style-p-6/7.gif

انتهى الجزء الأول وهو تصميم البرواز
-----------------------------
القسم الثاني تركيب البرواز على الستايل
نذهب الى لوحة تحكم المنتدى .... كما بالصوره ....... رقم 1 وهو على حسب موقعك .. وبعدها ندخل الاسم والرقم للمشرف العام كما بالرقم 2

http://www.des-ksa.com/up/images/4-style-m/6.gif

نذهب الى الأستايلات ثم ضبط الستايلات ....... كما بالصوره

http://www.des-ksa.com/up/images/4-style-m/7.gif

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

http://www.des-ksa.com/up/images/s-style-p-6/8.gif

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

http://www.des-ksa.com/up/images/s-style-p-6/9.gif

انزل وراح تلقى تمبليت بأسم FORUMHOME اضغط عليه دبل كليك

http://www.des-ksa.com/up/images/s-style-p-6/10.gif

يفتح التمبليت ... انسخ كل الكود الي داخله

http://www.des-ksa.com/up/images/s-style-p-6/11.gif

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

http://www.des-ksa.com/up/images/s-style-p-6/12.gif

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

http://www.des-ksa.com/up/images/s-style-p-6/13.gif

نضغط بالزر الايمن داخل الجدول ونختار خصائص الجدول

http://www.des-ksa.com/up/images/s-style-p-6/14.gif

نضع خصائص الجدول كما تلاحظ

http://www.des-ksa.com/up/images/s-style-p-6/15.gif

الان كما تعلمنا نعمل ادراج للزوايا يمين ويسار ... وبالنص نعمل خلفيه لكي تتمدد .. ولاكن هنا نقطه مهمه .. اذا اردت ان تدرج الصوره اليمنى ضع اليسرى مكانها .. يعني ادرجها بالعكس .. لاحظ الصوره ؟؟

http://www.des-ksa.com/up/images/s-style-p-6/16.gif

الحين البرواز السفلي .. نضغط بالمكان المحدد بالصوره

http://www.des-ksa.com/up/images/s-style-p-6/17.gif

ونعمل ادراج صف و3 اعمده . وخصائص الجدول نفس السابق وندرج الصور كما تعلمنا ... ماله داعي نعيد . نفس ماعملنا سابقاً
بقي علينا حذف الروابط الغير مفيده وجعلها تعمل على اي منتدى .. نرجع الى تعليمات برمجيه ... ولاحظ الكود المحدد ... نقوم بحذفه كما تعلمنا سابقا بالضغط على بحث ثم استبدال الكل ..

http://www.des-ksa.com/up/images/s-style-p-6/18.gif

الحين ننسخ الكود الي بالتعليمات البرمجيه . داخل الفرونت بيج والي عدلنا عليه ... ونعمل له لصق مكان الكود الأول بتمبليت FORUMHOME ونحفظ
.. نذهب الى التمبليتات ... وننزل تحت الي ان نجد التمبليت الثاني وهو navbar شاهد الصوره

http://www.des-ksa.com/up/images/s-style-p-6/19.gif

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

http://www.des-ksa.com/up/images/s-style-p-6/20.gif

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

http://www.des-ksa.com/up/images/s-style-p-6/21.gif

نضغط على رقم 1 رفع وتحميل ملف الستايل
ثم رقم 2 نختار الستايل الذي قمنا بالتعديل عليه وليكن مثلا الأساسي
ثم رقم 3 نضغط على تحميل ملف الستايل .. وسيتم حفظه بصيغة xml والان اجمع ملف الستايل مع مجلد الصور .. وعند التركيب الصق مجلد الصور داخل vb مباشره .. وسيعمل الستايل بشكل سليم 100% ان شاء الله
-----------------------------

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

نسألكم الدعاء له

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