دورة تصميم استايل للجيل الثالث من منتديات vb

[احسـ العالم ـاس]

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

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

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

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

في هذه الدوره ان شاء الله سنتعلم سويا كيف نصمم الاستايل عن طريق احد برامج التصميم
ثم كيف نركب الاستايل على موقعنا ( سواء كان موقع مجاني او موقع مدفوع او على الاباتشي السيرفر المحلي)
وسيكون الشرح على تركيب الاستايل على السيرفر المحلى (الاباتشي)
اولا : البرامج الضرورية لعمل الاستايل
1- برنامج الفوتشوب
2- برنامج فرونت بيج
3- حمل المرفق في اخر الموضوع (عباره عن ملف الفوتوشوب مقطع وجاهز للعمل عليه ) ملاحظه تستطيع عمل استايل خاص بك وتقطعه ويكون هذا الملف مجرد مرشد لك
خطوات العمل
بداية سنقوم بعمل تصميم للاستايل عن طريق الفوتوشوب بشرط ان تكون مساحة العمل العرض 779 بكسل X ارتفاع 310 بكسل



يتبع

[احسـ العالم ـاس]

طبعا التصميم له شروط والشروط تكمن في تقسيم (تقطيعه عن طريق الفوتوشوب) وسيكون التقسيم كالتالي:


اولا : قم باستخدام اداة القطع المؤشر عليها بالاحمر
ثم قم بتقسيم مساحة العمل كما هو موضح
لاحظ ان التقسيمات 1و2و3و4
تمثل راس صفحة المنتدى الهيدرHEADER
اما 5 و 7 فهي عبارة عن الاطارات التي تكون في يمين ويسار صفحة المنتدى
القطاع رقم 6 هي عبارة عن المنتدى ( اي الاقسام وخلافه)
القطاعات 8 و 9 و 10 و 11 هي اسفل صفحة المنتدى يعني الفوتر FOOTER
ملاحظة مهمه :
القطاع رقم 2 و 9 عبارة عن صورة قابلة للتمدد بشكل افقي (بمعنى ان تكرارها يمثل تمدد للصورة فقط )
القطاع رقم 5 و 7 عبارة عن صورة قابلة للتمدد بشكل عمودي (بمعنى ان تكرارها يمثل تمدد للصورة فقط وليس تكرارا )
ستفهم معنى التمدد الافقي والراسي عند التطبيق على الفرونت بيج
الان بعد الانتهاء من التقطيع قم بحفظ العمل عن طريق
file>save for web
ثم اختر حفط واختر Save as type: HTML and images
سيتم حفظ الصوره كصفحة هوتميل مع مجلد اميج اسمه images
سنتفق جميعا على حفظ الصوره باسم net
ثم نذهب للمكان الحفظ ونغير اسم مجلد الصور من images الى alfnooon كما في الصوره التالية :

[احسـ العالم ـاس]

الآن افتح صفحة net عن طريق كلك يميني ثم اختر تحرير ستجد ان الصفحه انفتحت في الفرونت بيج ثم اختر من اسفل الصفحه تعليمات برمجية واذا كانت الواجهه للبرنامج
انجليزية اختر من اسفل الصفحه HTML
وقم بسمح كل ماهو موجود في الصفحة ثم قم باختيار طريقة عرض تصميم كما هو موضح في الصوره التالية :

الان اختر توسيط ثم اختر من التبويب جدول ادراج جدول عدد صفوفه 3 وعدد اعمدته 4
ثم قم بتظليل الخليتين التي في المنتصف واعمل دمج لها انظر للصورة

[احسـ العالم ـاس]

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



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


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



الان ركز معي شوي
الصور 4 و 3 و 1 و 11 و 10 و 8 قم بادراجها عن طريق ادراج ثم صورة ثم صورة من ملف
اما الصور الخلايا المظلله بالازرق فقم بضغط كلك يميني على كل خليه ثم قم باختيار خصائص الخلية حدد العرض 100% ثم اشر على استخدام صورة خلفية
كما هو موضوح واضغط على زر استعراض وقم باستعراض الصورة ثم تطبيق ثم موافق

الان قم بحفظ الصفحه وسمها اي اسم وسنكون بكذا انتهينا من الدرس الاول


<-------- نهاية الدرس الاول \---------->

[ابوراكان]

مشكور على هاذا الانجاز احساس العالم والله يوفقك ويعطيك الف عافيه على الموضوع الحلو

[احسـ العالم ـاس]

<-------- بداية الدرس الثاني \--------------->

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



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



1- اداة ادراج الرابط ستجدها في شريط تحرير الصورة (عرض> اشرطة ادوات> صورة )
2- اذهب لكلمة الرئيسية سيتحول المربع الا قلم قم برسم حدود للكلمة كما هو موضح
3- بعد رسم الحدود ستفتح لك نافذة ادراج رابط توجه للمستطيل المرقم برقم 3 في الصورة والصق الرابط فيه
4- هذا الزر خاص بالتلميح الذي ترغب في ان يظهر بمجرد انتضار الماوس على الزر ( اختياري)
5- الاطار الهدف من هنا تسطيع اختيار فتح الرابط في صفحة مستقله او في نفس الصفحة
الان قم بعمل الخطوات مع كل كلمة موجودة في الهيدر وسأعطيك روابط كل صفحات المنتدى بالترتيب ماعليك سوى نسخ ولصق الرابط
الروابط

الرئيسية :

$vboptions[forumhome].php?$session[sessionurl]

المكتب :

usercp.php?$session[sessionurl]

البحث ::

search.php?$session[sessionurl]

التسجيل :

register.php?$session[sessionurl]

التعليمات :

faq.php?$session[sessionurl]

قائمة الاعضاء :

memberlist.php?$session[sessionurl]

التقويم :

calendar.php?$session[sessionurl]

للخروج :

login.php?$session[sessionurl]do=logout

الان انتهينا من عمل الجدول والخطوه القادمه هي تحميل الاستايل المرفق في نهاية الدرس هذا وبعد تحميله ركب الاستايل على منتداك سواء كان على النت
ام على السيرفر المحلي
ميزة الاستايل المرفق انه لايحتوي الا على صورة واحده وهو خالي تماما من الاضافات ولا يوجد به سوى اللون الابيض
الان بعد تحميل الاستايل ستجد ان الاستايل موجود عندك باسم استايل الفنون
الان اذهب لمجلد صور الاستايل alfnooon الموجود بداخل مجلد منتداك الرئيسي (عادة يكون اسمه vb )
وادرج جميع الصور 1.2.3,4,5,6,7,8,9 في مجلد alfnooon
بعد الانتهاء من ادراج جميع الصور داخل مجلد صور الاستايل وتحميل الاستايل ضع المؤشر في منتصف الجدول واخر توسيط كما هو موضح في الصورة
التالية:

[احسـ العالم ـاس]

الان من اسفل الصفحه في الفرونت بيج اختر تبويب (تعليمات برمجية ) للنسخه العربية او HTML في النسخه الانجليزية
سوف تظهر الصفحه عندك بالشكل التالي :



قم بمسح المنطقة الملونه في الصوره باللون الوردي
انسخ جميع الموجود في المنطقة الخضراء وضعه في صفحه جديده وسمها الصفحه الثانية ( لاتنسى ان تمسح جميع الاكواد الموجودة في الصفحة الجديدة )
ماتبقى في الصفحة وهو المنطقة المظللة باللون الاصفر سمه الصفحة الاولى
الان توجه للوحة تحكم المنتدى واختر
الاستايلات والقوالب > ضبط الاستايلات > اضغط على كلمة اذهب التي امام استايل الفنون كما في الصورة التالية :




ستفتح لك صفحة القوالب المشتركة
في المربع الاول هو المربع الخاص بتمبلت الهيدر (header ) رائس الصفحة
في المربع الثاني هو المربع الخاص بتمبلت (headinclude ) لا يهمنا هنا
في المربع الثالث هو المربع الخاص بتمبلت الفوتر(footer ) اسفل الصفحة
الان انسخ كل مابداخل تمبلت الفوتر (footer ) والصقة في صفحة جديده سمها الصفحة الثالثة ملاحظة مهمه ( قبل لصق التمبلت في الصفحة تاكد انك مسحت كل الاكواد الموجودة في الصفحة )
الان اذهب للصفحة التي سميناها الصفحة الثانية وانسخ مابداخلها والصقة في الصفحة الثالثة اخر شي بعد كود </script>
كما هو موضح في الصورة :



المنطقة الملونه بالاصفر هي المنطقة المنسوخه من تمبلت الفوتر footer
علامة </script> الملونه باللون الازرق نلصق بعدها محتوى الصفحة الثانية
النطقة الملونة بالبرتقالي الشفاف هو محتوى الصفحة الثانية بعد لصقة في الصفحة الثالثة
ولكي اسهل عليك العملية
الصفحة الاولى = محتوى الهيدر header للاستايل الذي ستنشأه
الصفحة الثانية = محتوى الفوتر footer للاستايل الذي ستنشأه
الصفحة الثالثة = محتوى الفوتر footer لاستايل الفنون الذي ستطبق عليه الاستايل المصمم
الصفحة الرابعة = محتوى الهيدر heder لاستايل الفنون الذي ستطبق عليه الاستايل المصمم

[احسـ العالم ـاس]

يتبع الدرس الثاني


الان انسخ كامل تمبلت header الموجود في لوحة تحكم منتداك ( الصفحة التي نسخت منها كود footer )
افتح صفحة جديدة سمها الصفحة الرابعة والصق كامل تمبلت header فيها
بعد ذلك اختر طريقة عرض تصميم من اسفل الصفحة ستجد الكود التالي:


الان قم بنسخ الكود المظلل بالاسود واذهب للصفحة التي سميناها الصفحة الاولى (هيدر التصميم)
ضع المؤشر في الخلية رقم 6 واختر توسيط ثم قم بلصق الكود كما هو مبين في الصورة




الان قم بنسخ كل ماهو موجود في الصفحة الاولى ثم اذهب للوحة التحكم واختر الاستايلات والقوالب > ضبط الاستايلات
> اضغط على كلمة اذهب التي امام استايل الفنون ثم قم بمسح جميع محتوى الهيدر header
والصق محتوى الصفحة الاولى (الذي قمت بنسخة ) فيه
الان اذهب للصفحة التي سميناها الصفحة الثالثة وقم بنسخ كل الكود الموجود داخلها ثم توجه الى
محتوى الفوتر footer (تجده في نفس الصفحة التي وجدت فيها الهيدرheader ) قم بمسح محتوى الفوتر footer
والصق مكانه محتوى الصفحة الثالثة الذي قمت بنسخة
الان انتيهنا من تكوين الهيدر والفوتر في صفحة المنتدى شاهد التغير الان في الاستايل
كل ماتبقى هو معالجة الصفحة وسنتطرق بالتفصيل في الدرس القادم لكيفية
تغير الالوان والخطوط وادراج صور خلفية والتحكم في مقاسات الصفحة

<-------------- نهاية الدرس الثاني \------------------>

[احسـ العالم ـاس]

<-------------- بداية الدرس الثالث \------------------>
درسنا اليوم سيكون عن كيفية تغير الوان وخطوط وجداول الاستايل حتى تتناسب
مع الهيدر والفوتر ونصل في الاخير الى استايل متناسق يحمل هيئته الخاصة
كل ماعليك هو التوجه الى لوحة تحكمك ثم اختيار الستايلات & القوالب ثم ضبط الاستايلات ثم
قم بالضغط على زر اذهب من امام استايل الفنون
طبعا انت تعرف جيدا هذه القائمة لانك قمت بزيارة محتوى الهيدر والفوتر فيها في المره السابقه
توجه الى Sizes and Dimensions
كما في الصوره التالية


لاحظ ان حجم جدول المنتدى هو 100% لتصغير هذا الحجم تسطيع تغيره برقم صحيح بالكسل مثلا 730 او ان تضع نسبه مؤيه
مثلا 95%
طبعا نحن هنا سوف نبقيه بحجمه الافتراضي 100%
ولمشاهدة المنطقه المقصوده بالذكر انضر الى الصورة التالية رعاك الله:





ملاحظة تم تغير الحجم هنا لعدد صحيح هو 730 بكسل وذلك حتى ترى الفرق ولكن نحن سنترك الحجم 100%

[احسـ العالم ـاس]

الان توجه للقائمة التي تحت Image Paths
هذه القائمة هي قائمة روابط الصور التي يعتمد عليها المنتدى ولمعرفة مجلدات هذه الصور افتح مجلد alfnooon ( مجلد صور الاستايل)
وستجد المجلدات التالية بداخله :



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

alfnooon/buttons
alfnooon/statusicon
alfnooon/misc
alfnooon/reputation
اما ماتبقى فستكون روابطها كالتالي:
images/attach
images/editor
images/polls
images/rating
اما بالنسبه لرابط البنر وهو المربع الاول ستجد انه images/misc/vbulletin3_logo_white.gif
لايهمنا هنا سواء اعتمد على مجلد images او مجلد alfnooon لاننا هنا لانعتمد على هذا البنر
شاهد المثال في الصورة التالية