السلام عليكم ورحمة الله وبركاته
بعد شرح طريقة تنصيب setup البوابة العربية المجلة السهلة
شرح طريقة تنصيب setup سكربت البوابة العربية - المجلة السهلة
اقدم لكم شرح طريقة تنصيب setup ستايل style او قالب template للبوابة العربية شرح طريقة بالصور
شرح طريقة بالفيديو ايضا كيفية التعديل على القوالب
الفيديو
http://www.youtube.com/watch?v=YQEjKvY22YM
و اليوم ان شاء الله سوف اقوم بشرح طريقة تصميم للمجلة العربية , على حسب علمي بها و خبرتي البسيطة بها .
قبل أن نبدا بالدرس مفصل , حبيت أن اذكر الجميع بأن المجلة العربية , مجلة عربية 100% و مجاني freeة و مفتوحة للجميع , و الجميع يستطيع تحميلها .
برنامج البوابة العربية الأصدار 3.0 الرسمي رقم V3.0 11-6-2014 - البوابة العربية
1- التجهيزات :
قبل بداية الدرس مفصل يجب ان يكون جهازك مجهز ببعض البرامج اللازمة , و قد استخدمت هذه البرامج التالية :
برنامج Adobe PhotoShop CS
برنامج Microsoft FrontPage
برنامج Notepad + +
برنامج Apache Server
نسخة من سكربت برنامج المجلة العربية
و يجب ان تكون لديك معرفه بهذه البرامج و قد سبق لك ان تعاملت معها مع اي سكربت .
مقدمة الدرس مفصل :
المجلة تستخدم نظام Template System او بمعنى اخر ان كل قالب template له وظيفة في التحكم بالمظهر بلغة الـ HTML . بالإضافة الى اللغة النمطية CSS .
في هذا النظام تم توحيد الشكل العام لجميع صفحات البرنامج في قالب template واحد لكي يسهل على المستخدم تعديل جميع الصفحات مرة واحدة كما يمكن التحكم في استخدام العمود الأيسر عند إنشاء صفحات في البرنامج .
وفي ما يلي توضيح أقسام الصفحة من خلال الصورة التالية حيث قسمت الصفحة إلى خمسة أقسام
رأس الصفحة أو Headr
العمود الأيمن وسط الصفحة العمود الأيسر
ذيل الصفحة أو Footer
رأس الصفحة :
و هو في أعلى المتصفح و هو ثابت في جميع الصفحات .
العمود الأيمن :
ثابت ويحتوي على قوائم يمكن التحكم بها ونقلها الى العمود الايسر أو اخفاء بعض من القوائم في صفحات مختلفة .
العمود الأيسر :
يمكن إخفاء هذا العمود وجميع القوائم الموجودة فيه على حسب الحاجة كما يمكن التحكم بالقوائم تماما مثل العمود الأيمن .
وسط الصفحة :
ويتغير بناءه بناء على البرنامج المعروض ومكان التواجد على سبيل المثال :
في الصفحة الرئيسية تظهر مجموعة من الأخبار بإيجاز ولكن عند عرض تفاصيل الخبر يتغير وسط الصفحة ويظهر خبر واحد بالكامل .
ذيل الصفحة :
في اسفل المتصفح و هو ثابت يظهر في جميع الصفحات .
و لمشاهدة المزيد من المعلومات حول نظام القوالب راجع الصفحة التالية .
http://www.arabportal.net/index.php?action=pages&id=14
أول خطوة :
أول خطوة هو تصميم الاستايل style الذي تريد وضعه في المجلة .
و انا قد سبق و قمت بتصميم ستايل style لمنتديات الـ vb و سوف استخدمه نفس الاستايل style للمجلة العربية و هذه صورة التصميم
طبعا ً بعد التصميم يجب علينا نقص الصور لكي نضعها في استايل style المجلة العربية .
طبعا القص يكون على حسب ما تريد لكنه في غالب الاحيان يتكون راس الصفحة من أربع صور و ذيل الصفحة من 4 صور ايضا ً مستثنيين صورة العمود .
كما نلاحظ في الصورة التالية قص الصور
و الأرقام تمثل :
1-الصورة اللتي تقع على يسار التصميم
2-الصورة اللتي تقع في وسط التصميم
3-الصورة اللي تقع على يمين التصميم
4-صورة خلفية التمدد و يجب مراعاة التمدد في التصميم
و نطبق نفس العمل في الفوتر
الآن طريقة التركيب install في الفرنت بيج ثم تحويله الى المجلة , تابعوا خطوة بخطوة .
افتح الفرونت بيج و امسح التعليمات البرمجية منه و اصنع جدول 3×3 تم ركب الصور فيه ليظهر لك الناتج التالي :
ملاحظو مهمة : يجب وضع الصور عكس اماكنها , مثلا ً لو تريد الصورة اليمنى تظهر في اليمين يجب عليك وضعها في اليسار و هكذا .
ثم انتقل الى التعليمات البرمجية و سوف ترى هذا الكود code التالي :
الكود code المظلل سوف نضعه في الهيدر header او رأس الصفحة
و الكود code الغير مظلل سوف نضعه في ذيل الصفحة او الفوتر .
ملاحظات : يجب عليك مراعات مسارات الصور لدديك و ضبطها حسب ماتريد . و كما قلت سابقا ً يجب عليك وضع الصور عكس مكانها .
هكذا قد أتممنا اول خطوة و هي تركيب install الاستايل style في الهيدر header و الفوتر .
الخطوة التالية هي التعديل على القوالب .
: : القوالب : :
اولأ في قائمة القوالب العامة و شروحات القوالب :
1- قالب template announcement
هذه القالب template وظيفته هو اضافة كلام في الصفحة الرئييسية او صورة او اي شي تريد و الصورة التالية سوف توضح لك :
2- قالب template body_msg
هذه القالب template بعد ان يسجل العضو تسجيل الدخول تظهر له متحوى القالب template
3- قالب template del_msg
هذه القالب template اذا كنت تريد حذف مشاركة
4- قالب template error_msg
و هو لعرض صفحات الخطا , مثلا عضو يريد حذف مشاركة او زيارة خبر غير موجود و الى اخره
5- قالب template form_main و هو من قوالب المنتدى forum و تعديله لا يهمنا
6- قالب template guestbook_table
و هو عرض سجل الزوار
7- قالب template guestbook_tools
و هو قالب template لصورة اضف توقيع و انصحك بعدم تغييرها
8- قالب template index_block
ايضا ً هذا القالب template لا يهمنا
9- قالب template Index_main
هذه القالب template تستطيع التحكم بلون الخلفية و الصورة التالية تشرح طريقة بعض القوائم :
$left_menu للتحكم بظهور و اختفاء القائمة اليسرى في الصفحة الرئيسية
$right_menu للتحكم بظهور و اختفاء القائمة اليمنى في الصفحة الرئيسية
$pagehd الهيدر header
$pageft الفوتر
$ads_head ظهظر الاعلانات تحت الهيدر header
$index_middle هذه لظهور الاخبار , فإن مسحته او غيرته فالاخبار لن تظهر لديك
$ads_foot ظهور الاعلانات في الفوتر تحت الاخبار
10- قالب template index_table
و هو قالب template عرض الاخبار في الصفحة الرئيسية , و تستطيع فيه وضع الصور التجميلية , و يجب ان تلاحظ ان هذه القالب template فقط فيث الصفحة الرئيسية وليس في صفحة عرض الاخبار.و ايضا ُ يجب ان تلاحظ ان تضع الصور التجميليه عكس مسارها , مثلا ً لو اردت الصورة اللي باليمين وشعها يمين , يجب ان تضعها في اليسار و هكذا .
11- قالب template Login_main
و هو قالب template تسجيل الدخول و تستطسع التعديل عليه بشرط عدل تغيير المتغييرات
12- قالب template popup_msg
لعرض اي رسالة سواء كانت راسلة خطا او رسالة بإغلاق الموقع
13- قالب template post_tools
و هو قالب template ادوات الموضوع "اضف موضوع" و اضف تعليق" و انصحك بعدم التغيير عليها
14- قالب template search_form
قالب template البحث , ايضا ً تستطيع وضع صور تجميليه مع مراعاة عكس مسارها .
15- قالب template s_view_topic_comment
قالب template عرض التعليقات في الموضوع او الخبر .
16- قالب template table_cat_link
الصورة التالية توضح وظيفة القالب template
17- قالب template table_cat_module
نفس الوظيفة السابقة .
18- قالب template uploadfile
و هو قالب template يظهر في المرفقات اذا كان هناك ملف مرفق راح يظهر هذه الجدول .
19 و اخر قالب template و هو form_code
و هو للـ BBCODE لا تغير عليه شي .
و الآن سوف نعدل في قائمة البلوك "قوالب القوائم" و راح تجدها في اخر لوحة التحكم
1- قالب template blockmenu و هو اللذي يهمنا
تعديل هذه القالب template سهل , ان كنت تريد وضع صور تجميلية على البلوك افتج جدول من 3 اعمدة و ضع فيها التالي
{block_head} تستطيع وضع الصور التجميلية هنا
{block_center}
تستطيع وضع الصور التجميلية هنا
{block_head} >> هو لعرض عنوان البلوك
{block_center} >> و هو لعرض محتوى البلوك
و للمزيد حول تصميم البلوك يرجى مراجعه الصفحة التالية .
بهكذا قد نكون انتهينا من تصميم الاستايل style للصفحة الرئيسية فقط
و الآن سوف نتفرع لبقية القوالب
ملاحظة : كل التعديلات على هذه القوالب تجريها بالفرونت بيج حسب ذوقك و على حسب الاستايل style الخاص بك .
والآن مع قوالب :.: قوالب الأخبار :.:
1- قالب template news_cat
و هو لعرض التالي
و عادة ً لا نغيرها
2- قالب template news_cat_tools
و هو صورة اضافة خبر جديد , و ايضا ً لا نغيره .
3- قالب template news_comment_table
و هو قالب template التعليق على الموضوع , تستطيع التعديل عليه كما شئت دون تغيير المتغييرات .
4- قالب template news_list_pagenum
و هو ايضا ً لعرض خيارات الخبر و ما شابه.
5- قالب template news_table
و هو قالب template عرض الموضوع , و يجب التعديل عليه ,لأنه تصميمه الاساسي غير متناسق , و التعدل عليه يكون باضفة صور تجميلية , تنسيق الجداول و العرض , و طريقة التعديل اكيد تكون بالفرونت بيج , و يجب ان نلاحظ ان لا نغير شي من المتغيرات مثل $title هذه لعرض العنوان و الى اخره , و اذا كنتم تريدون شرح طريقة عن كل نتغير و وظيفته سوف اشرح طريقةه لكم في المنتدى forum او راسلوني عبر البريد . و سوف نتناول في درس مفصل خاص كيفية اضافة الصور التجميلية و تنسيق الجداول لبعض القوالب المهمة .
6- قالب template news_topic_list
و هو قالب template عرض الاخبار و لكن ليس في الرئيسية و لا في عرض الخبر , بل في قسم الخبر , مثلا لديك قسم الاخبار العامة و ضغطت عليه , القالب template يظهر هنا و الصورة توضح اكثر
و الآن و انتهينا من قوالب الاخبار .
- قوالب المنتدى forum
هذه القوالب لن تهمنا كثيرا ً , لأن الغالبية لا ستخدم برنامج المنتدى forum المرفق مع المجلة .
- قوالب مركز التحميل
1- قالب template download_cat
و هو يظهر حينما تدخل في صفحة download.php
2- قالب template download_cat_tools
و هو لعرض ايقونة اضف برنامج في صفحة التحميل .
3- قالب template download_comment_table
و هو قالب template التعليقات على برنامج التحميل , اي اذا حذفت كود code هذه القالب template , التعليقات لن تظهر في الصفحة , و تستطيع تنسيق هذا القالب template مثل تنسيق قالب template news_comment_table لكن بتعديل المتغييرات .
4- قالب template download_list
و هو قالب template عرض البرامج او محتويات التحميل و يكون على الرابط التالي مثلا ً download.php?action=list&cat_id=8
تستطيع تغييره و اضافة الصور التجميلية و ما الى ذالك .
5- قالب template download_list_pagenum
لعرض بعض خيارات مركز التحميل , لا تعدل فيه شي .
6- قالب template download_table
هذه القالب template يظهر لين تطق على تفاصيل في التحميل , الصورة التالية توضح المقصود
7- قالب template download_topic
لا تعدل عليه .
و هكذا و قد انتهينا من شرح طريقة قائمة قوالب مركز التحميل .
و الآن مع قوالب دليل المواقع , و كلها 3 قوالب :
1- قالب template link_cat
حين دخلو لصفحة link.php وظيفة الهاك product هو عرض الاقسام . لذا لا تقم بتغيير شي .
2- قالب template link_cat_tools
و هو زر اضافة موقع جديد و ايضا لا تقسم بتغييره .
3- قالب template link_list
و هو القالب template الخاص لعرض الموقع المضاف في دليل المواقع , و عدل عليه بما شئت و اضافة الصور التجميلية و هكذا .
و هكذا انتهينا من شرح طريقة قوالب دليل المواقع .
و الآن مع قوالب الاعضاء
1- قالب template members_link
يظهر هذه القالب template حين دخولك في صفحة members.php?action=cp و الصورة التالية توضح لك المقصود
2- قالب template member_cp
و هو قالب template المعلومات التي تظهر في صفحة members.php?action=cp
3- قالب template member_info
و هو لعرض معلومات العضو , اذا احد مثلا ً يبغي يشوف الملف الشخصي للعضو , يظهر له محتويات القالب template هذه , و يكون رابط الصفحة هذه مع تغيير رقم العضو members.php?action=info&userid=1 الرقم 1 هو رقم العضو .
4- قالب template pm_list_table
و هو قالب template الرسائل الخاصة , اي القالب template يعرض محتويات الصفحة pm.php و تستطيع التعديل عليه كما شئت دون تغيير المتغييرات
5- قالب template pm_msg_list
و هو يعرض الرسائل الخاصة القادمة اليك .
6- قالب template pm_msg_table
و هو قالب template عرض الرسالة الخاصة , مثلا اذا احد الاعضاء ارسل لك رسالة و تريد عرضها , هذا القالب template هو القالب template الخاص بعرض الرسالة .
7- قالب template register_policy
و هو قالب template التبيه للتسجيل و الصورة التالية توضح اكثر , وتستطيع وضع قوانين التسجيل او تنبيهات او اي شي تريد
8- قالب template show_members
و هو قالب template عرض الاعضاء , اي حين دخولك لصفحة members.php يعرض محتويات القالب template .
هكذا انتيهنا من شرح طريقة جميع القوالب , و بعد تعديلك لجميع القوالب , نستطيع ان نقوول بان الاستايل style تم تصميمه 99.9% و الباقي فقط الـ CSS
و هو مثلا ً تعديل السكرول باار و بعض الخلفيات و نوع الخط و حجم الخط و ما الى ذالك .
و الآن مع هدية بويوسف
الهدية عبارة عن تصميم مميز للمجلة العربية ,
اتمنى ان يعجبكم التصميم و تنسيقه .
طريقة التركيب install :
فقط ارفع المجلدات الى المجلد الرئيسي لصفحة المجلة
ثم استدعي ملف prof-style.theme من لوحة التحكم
و لتحميل التصميم على الرابط التالي
من هنا
او من المرفقات
اتمنى منكم عدم حذف حقوق التصميم .
و في الختام اتمنى انني شرح طريقةت الدرس مفصل بشكل سليم و لا يوجد اي اخطاء .
اتمنى منكم الدعاء لي و لوالدي بالتوفيق .
الموضوع منقول من الاخ ابو يوسف
[درس مفصل] كيفية تصميم ستايل style للمجلة العربية ..شرح طريقة &
تحيااتي للجميع
prof-stlyle-arabic-portal.zip (887.9 كيلوبايت, عدد مرات المشاهدة 0 مرة) [/TR]
رد مع اقتباس
