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