شرح عمل قالب للمبتدئين جداااا

قم بوضع مشاكلك مع القوالب هنا و كذلك تصميماتك لجوملا! أو تصميماتك بوجه عام

Moderators: sherif, General Support Moderators

User avatar
sherif
Joomla! Ace
Joomla! Ace
Posts: 1560
Joined: Fri Jan 12, 2007 12:15 am
Location: Dikirnis , Egypt :: دكرنس ، مصر
Contact:

شرح عمل قالب للمبتدئين جداااا

Post by sherif » Tue Sep 18, 2007 1:14 am

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

مقدمة بسيطة لكن هامة :
من يريد التخصص فى عمل القوالب يلزمه معرفة لغة html وأكواد ال css وبعض أكواد php
ثم يتعقد الأمر عند احتياجه لإستخدام أدوات مساعدة مثل الفوتوشوب و الدريم ويفر و امتداداتهما
اذا فالموضوع يلزمه دراسة وافية و جدية و ارادة قوية و تعاون مع الآخرين .....
تريد خطوات سريعة لتصبح مصمم قوالب محترف ؟ عفوا لا يوجد !!!

الشرح :
سنشرح الأكواد و نضعها فى صفحة بيضاء خالية من أى تصميم لكى نفهم ماذا تفعل هذه الأكواد أولا .
يتكون قالب جملة من صفحة html مضاف إليها أكواد php الخاصة بجملة ، ويكون الإسم الإفتراضى(والإلزامى) لصفحة القالب
هو index.php ، وخطوات العمل هى أن نصمم صفحة html مناسبة ثم نضع فيها الأكواد بشكل منظم
انتهاءا بعمل ملف css لتحسين شكل الصفحة واضفاء اللمسات الجمالية عليها .
والآن خذ نفس عميق و تحمل هذا الجزء الممل و الضرورى جدا لأى شخص ينوى تصميم قالب .
تعالوا نتعرف على أكواد جملة أولا :
1- كود الهيدر header :
فى بداية كل قالب جملة لابد أن تجد هذا الكود القياسى (تم تعديله بعد مداخلة أخى HHوالرجوع للصفحة الرسمية لجملة )

Code: Select all

<?php defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl" lang="<?php echo _LANGUAGE; ?>" xml:lang="<?php echo _LANGUAGE; ?>"

<head>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<?php
if ($my->id) { initEditor(); } ?>
<?php mosShowHead(); ?>
<?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>" ; ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.ico\" />" ; ?>
</head>
يمكنك نسخه كما هو ووضعه مع تجاهل الشرح التالى ، أما من يريد التعرف عليه أكثر فإليه التفاصيل :
هذا الكود وظيفته منع الوصول المباشر إلى الصفحة من خارج السيرفر

Code: Select all

<?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );?>
هذه بادئة قياسية لتمكين برنامج المتصفح من تمييز نوعية الصفحة ,واللغة المستخدمة فيها و أنها مطابقة للمواصفات والتعامل معها بما يناسبها
والجزء dir="rtl مضاف لإعلان أن الصفحة ذات اتجاه من اليمين إلى اليسار لتناسب اللغة العربية .

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl" lang="<?php echo _LANGUAGE; ?>" xml:lang="<?php echo _LANGUAGE; ?>"
كود html القياسى الذى يشير إلى بداية منطقة رأس الصفحة ( الهيدر)

Code: Select all

<head>
الكود التالى يختبر ما اذا كان الزائر للموقع مسجل كعضو أم لا ، فان كان مسجل يتم تحميل محرر النصوص مقدما فى الخلفية لأغراض التسريع

Code: Select all

<?php if ( $my->id ) { initEditor(); } ?>
كود يخبر المتصفح أنها صفحة html قياسية كما يخبره بنوعية تشفير الصفحة والذى يستخرجه أصلا من ملف اللغة لجملة! باستخدام المتغير _iso

Code: Select all

<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
كود خاص بجملة ووظيفته تحميل meta tags مثل العنوان والوصف و الكلمات المفتاحية .. إلخ
وهى التى يقوم بتحميلها من الإعدادات العامة للموقع global settings

Code: Select all

<?php mosShowHead(); ?>
وهذا الكود وظيفته اخبار برنامج المتصفح عن اسم القالب الحالى ومسار ملف ال css الخاص به و مسار أيقونة الموقع favicon

Code: Select all

<?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>" ; ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.ico\" />" ; ?>
كود html القياسى الذى يعلن انتهاء منطقة الهيدر .

Code: Select all

</head>
والآن إلى أكواد أماكن المحتويات و الموديولات و مكونات القالب ( بعض الأكواد ، البقية ستأتى لاحقا) :
وهى التى نجدها فى منطقة جسم الصفحة :

.....
2- كود اسم الموقع

Code: Select all

<?php echo $mosConfig_sitename;?>
3- كود التاريخ

Code: Select all

<?php echo mosCurrentDate(); ?>
4- كود مسار التصفح pathway

Code: Select all

<?php mosPathWay(); ?>
5- كود الموضع top

Code: Select all

<?php mosLoadModules ( 'top' ); ?>
6- كود الموضع "يسار"

Code: Select all

<?php mosLoadModules('left');?>
7- كود الموضع "يمين"

Code: Select all

<?php mosLoadModules('right');?>
8- كود موضع "المحتوى" (موضوعات الموقع)

Code: Select all

<?php mosMainBody();?>
9- كود خانة البحث داخل الموقع

Code: Select all

<form action="index.php" method="post">
  <div align="center">
    <input class="inputbox" type="text" name="searchword" size="15" value="<?php echo _SEARCH_BOX; ?>"  onblur="if(this.value=='') this.value='<?php echo _SEARCH_BOX; ?>';" onfocus="if(this.value=='<?php echo _SEARCH_BOX; ?>') this.value='';" />
    <input type="hidden" name="option" value="search" />
  </div>
</form>
حسنا ، ماذا تعنى هذه الأكواد ؟؟ ببساطة شديدة هذه الأكواد هى التى تجعل أى صفحة html عادية تصبح قالبا لجملة
فبوضعها فى الأماكن المناسبة من الصفحة يكتمل شكل القالب و يصبح جاهزا للإستعمال فورا مع جملة
تريد توضيح أكثر ؟ حسنا تعالى نجمع ما ذكرناه من أكواد و نضعهم فى صفحة html ونرى النتيجة !!
لنفتح صفحة بيضاء ونضع فى أولها كود الهيدر الموضح أعلاه فى رقم 1 و المنتهى بالتعليمة

ثم نضع باقى الأكواد من 2 إلى 9 فى منطقة جسم الصفحة أى بين التعليمتين

Code: Select all

<body> ..... </body>
وأخيرا نقوم باتمام هذا التسلسل بتعليمة الختام

Code: Select all

</html>
ليصبح مخطط شكل كود الصفحة كما يلى :

Code: Select all

<!-- 1 --> .............. كود الهيدر بالكامل طبعا  ......</head>
<body>
<!-- 2 --><?php echo $mosConfig_sitename;?> 
<!-- 3 --><?php echo mosCurrentDate(); ?>
<!-- 4 --><?php mosPathWay(); ?>
<!-- 5 --><?php mosLoadModules ( 'top' ); ?>
<!-- 6 --><?php mosLoadModules('left');?>
<!-- 7 --><?php mosLoadModules('right');?>
<!-- 8 --><?php mosMainBody();?>
<!-- 9 --><form action="ind ........... كود خانة البحث بالكامل طبعا  ...... </form>

</body>
</html>
وتكون النتيجة أن الموقع يعمل بكامل وظائف جملة تماما ، ويبقى أن نقوم بترتيب المواضع وتجميلها ليصبح مظهره لائقا
وليس بهذا الشكل العشوائى الغير منظم (( انظر الصورة المرفقة )) ، وهنا تأتى الخطوة التى يجب البدء بها
وهى أن نتعلم كيفية عمل تصميم معقول ثم نضع فيه هذه الأكواد بما يناسب التصميم
انتهى هذا الجزء - أى أخطاء وردت هنا قابلة للتصحيح من الأخوة المحنكين طبعا و مستعد للتعديل
كل عام و انتم بخير
You do not have the required permissions to view the files attached to this post.
Last edited by sherif on Tue Oct 23, 2007 5:46 am, edited 1 time in total.

User avatar
sherif
Joomla! Ace
Joomla! Ace
Posts: 1560
Joined: Fri Jan 12, 2007 12:15 am
Location: Dikirnis , Egypt :: دكرنس ، مصر
Contact:

Re: شرح عمل قالب للمبتدئين جداااا

Post by sherif » Tue Sep 18, 2007 7:01 am

السلام عليكم
بعد أن تعرفنا على بعض الأكواد المطلوبة لعمل موقع جملة ، وفهمنا وظيفة هذه الأكواد بالمثال السابق
ونتج عن مثالنا موقعا سليما من الناحية الوظيفية ، ولكن مشوه الشكل من الناحية التنظيمية و الجمالية
فإن أبسط ما يمكن أن نفعله الآن هو مثال على انشاء عدة جداول ووضع الأكواد فيها ليكون الموقع منظما
وبافتراض أننا نريد تصميم قالب مكون من ثمانية مناطق مختلفة كما يلى وبالترتيب:
1- هيدر أو رأس صفحة كى يظهر فيه اسم الموقع أو صورة استهلالية فى رأس القالب
2- مساحة بعرض الصفحة يظهر فيها التاريخ ، 3- مسار التصفح pathway ، ثم 4- خانة البحث
5- جانب أيمن يحتوى قوائم الموقع و ما تحتها من موديولات
6- مساحة رئيسية تتوسط الصفحة لعرض المحتوى و الموضوعات
7- جانب أيسر يحتوى موديولات اضافية
8- قاع الصفحة لوضع موديول الأخبار السريعة

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

ملاحظة هامة : جميع القيم والأرقام و النسب الواردة فى المثال ليست ذات أهمية خاصة ، بل مجرد اجتهاد وكل مصمم
يستطيع تجربة عدة قيم إلى أن يختار ما يعجبه و يتناسب مع الشكل الذى يرغب فى الوصول له ،
((يعنى موش اختراع ذرى ولا لوغاريتمات ، افهم المثال و غير القيم براحتك ، واتعرف على النتايج ، و اختار اللى يعجبك .))

أول شيئ يجب عمله هو ما تعلمناه فى الموضوع السابق ، نفتح صفحة خالية تماما و نبدأ بوضع كود هيدر جملة المنتهى بتعليمة
</head>
بعد ذلك سيكون عملنا كله فى منطقة جسم الصفحة أى محصور بين التعليمتين
<body> .... </body>
** الجداول الرئيسية : ننشئ جدول من خلية واحدة عرضه ليس محدد ولكن نسبى بمقدار 100%
وعرض حدوده يساوى صفر أى أن الحدود غير مرئية ، ولون خلفيته رمادى EBEBEB#
الكود اللازم لعمل ذلك كما يلى

Code: Select all

<table width="100%" border="0">
  <tr>
    <td bgcolor="#EBEBEB"> </td>
  </tr>
</table>
ثم نكرر نفس العملية 3 مرات ليصبح لدينا 4 جداول متراصة فوق بعضها ، لها نفس الخواص
ليكون الكود النهائى بالشكل التالى :

Code: Select all

<body>
<!-- (1)جدول -->
<table width="100%" border="0">
  <tr>
    <td bgcolor="#EBEBEB"> </td>
  </tr>
</table>

<!-- (2)جدول -->
<table width="100%" border="0">
  <tr>
    <td bgcolor="#EBEBEB"> </td>
  </tr>
</table>

<!-- (3)جدول -->
<table width="100%" border="0">
  <tr>
    <td bgcolor="#EBEBEB"> </td>
  </tr>
</table>

<!-- (4)جدول -->
<table width="100%" border="0">
  <tr>
    <td bgcolor="#EBEBEB"> </td>
  </tr>
</table>
</body>
ويكون شكل الجداول كما هو موضح فى الصورة المرفقة

- يتبع -
You do not have the required permissions to view the files attached to this post.

User avatar
sherif
Joomla! Ace
Joomla! Ace
Posts: 1560
Joined: Fri Jan 12, 2007 12:15 am
Location: Dikirnis , Egypt :: دكرنس ، مصر
Contact:

Re: شرح عمل قالب للمبتدئين جداااا

Post by sherif » Tue Sep 18, 2007 7:13 am

معنا الآن 4 جداول
الأول سيكون لعرض اسم الموقع ، نتركه كما هو
الثانى يظهر فيه التاريخ ، ومسار التصفح pathway وخانة البحث ، اذن مطلوب 3 أعمدة
لن نقسم الجدول نفسه بل سننشئ داخله جدول آخر له نفس خواص الجداول السابقة و مكون من ثلاث أعمدة
العامود الأيمن و الأيسر عرض كل منهم نسبى بمقدار 30% والأوسط غير محدد ، و الجميع لون خلفيتهم D6D6D6#

Code: Select all

<!-- (2)جدول -->
<table width="100%" border="0">
  <tr>
    <td bgcolor="#EBEBEB">

<!-- (2-1)جدول -->
	<table width="100%" border="0" bgcolor="#D6D6D6">
      <tr>
<!-- العامود الأيسر -->
        <td width="30%"> </td>
<!-- العامود الأوسط -->
        <td> </td>
<!-- العامود الأيمن -->
        <td width="30%"> </td>
      </tr>
    </table></td>
  </tr>
</table>
الجدول الثالث سيحتوى :
- جانب أيمن يحتوى قوائم الموقع و ما تحتها من موديولات
- مساحة رئيسية تتوسط الصفحة لعرض المحتوى و الموضوعات
- جانب أيسر يحتوى موديولات اضافية
اذا مطلوب ثلاث أعمدة ومرة أخرى :لن نقسم الجدول نفسه بل سننشئ داخله جدول آخر له نفس خواص الجداول السابقة
و مكون من ثلاث أعمدة العامود الأيمن و الأيسر عرض كل منهم نسبى بمقدار 18% والأوسط غير محدد ، و الجميع لون خلفيتهم #C1C1C1
*** وبما أن هذا الجدول سيحتوى عدة كائنات مختلفة الخواص و الأشكال و الأحجام
مما قد يجعل احدها يزيح الآخر لأسفل الصفحة سنقوم باضافة تعليمة valign="top" ووظيفتها جعل ارتساء محتويات الجدول دائما لأعلى .

Code: Select all

<!-- (3)جدول -->
<table width="100%" border="0">
  <tr>
    <td bgcolor="#EBEBEB">

<!-- (3-1)جدول -->
	<table width="100%" border="0" bgcolor="#C1C1C1">
      <tr>
<!-- العامود الأيسر -->
        <td width="18%" valign="top"> </td>
<!-- العامود الأوسط -->
        <td> </td>
<!-- العامود االأيمن -->
        <td width="18%" valign="top"> </td>
      </tr>
    </table></td>
  </tr>
</table>
الجدول الرابع سيحتوى : موديول الأخبار السريعة ، اذا لندعه و شأنه
هكذا انتهى تصميم الجداول طبقا للكائنات و الموديولات التى ستوضع فيها .
انظر الصورة المرفقة
-- يتبع --
You do not have the required permissions to view the files attached to this post.

User avatar
sherif
Joomla! Ace
Joomla! Ace
Posts: 1560
Joined: Fri Jan 12, 2007 12:15 am
Location: Dikirnis , Egypt :: دكرنس ، مصر
Contact:

Re: شرح عمل قالب للمبتدئين جداااا

Post by sherif » Tue Sep 18, 2007 7:24 am

بعد ان انتهينا من تصميم جداول القالب ، حان الوقت لوضع أكواد جملة فى مواضعها ، تلك التى قرأنا عنها فى أول الموضوع
وحيث أننا قلنا سابقا أن القالب مكون من ثمانية مواضع أو مناطق مختلفة اذا سنجهز الثمانية أكواد المختصة بكل منها
1- رأس صفحة 2- التاريخ 3- مسار التصفح 4- خانة البحث 5- جانب أيمن 6- المحتوى 7- جانب أيسر 8- موديول الأخبار السريعة
أولا رأس الصفحة ، و يقع فى الجدول الأول ، ونضع الكود فيه كما يلى :

Code: Select all

<!-- (1)جدول -->
<table width="100%" border="0">
  <tr>
    <td bgcolor="#EBEBEB">

	<!-- بداية كود اسم الموقع -->
	<?php echo $mosConfig_sitename; ?>
	<!-- نهاية الكود -->

	</td>
  </tr>
</table>
ثانيا التاريخ ومسار التصفح و خانة البحث وموقعهم فى الجدول الثانى ، كل منهم فى عامود ولكن .....
لاحظ أن الكود سيبدأ بترتيب عكسى لما ذكرناه ، أى أننا نبدأ بيسار الجدول و ننتهى عند اليمين لذلك يتم وضع
كود خانة البحث أولا

Code: Select all

<!-- (2)جدول -->
<table width="100%" border="0">
  <tr>
    <td bgcolor="#EBEBEB">

<!-- (2-1)جدول -->
	<table width="100%" border="0" bgcolor="#D6D6D6">
      <tr>
<!-- العامود الأيسر -->
        <td width="30%">

	<!-- كود خانة البحث -->
	<form action="index.php" method="post">
          <div align="center">
            <input class="inputbox" type="text" name="searchword" size="15" value="<?php echo _SEARCH_BOX; ?>"  onblur="if(this.value=='') this.value='<?php echo _SEARCH_BOX; ?>';" onfocus="if(this.value=='<?php echo _SEARCH_BOX; ?>') this.value='';" />
            <input type="hidden" name="option" value="search" />
          </div>
        </form>
	<!-- نهاية كود خانة البحث -->
        </td>

<!-- العامود الأوسط -->	
        <td>
	<!-- كود مسار التصفح -->
	<?php mosPathWay(); ?>
	<!-- نهاية كود مسار التصفح -->
	</td>
<!-- العامود الأيمن -->	        
	<td width="30%">

	<!-- كود التاريخ -->
	<?php echo mosCurrentDate(); ?></td>
	<!-- نهاية كود التاريخ -->
      </tr>
    </table></td>
  </tr>
</table>
ثالثا : جانب أيمن ، والمحتوى ، و جانب أيسر ، وموقغهم فى الجدول الثالث ، وبنفس الطريقة التى
أتمننا بها الجدول الثانى فكلاهما يحوى جدول من ثلاث أعمدة

Code: Select all

<!-- (3)جدول -->
<table width="100%" border="0">
  <tr>
    <td bgcolor="#EBEBEB">

<!-- (3-1)جدول -->
	<table width="100%" border="0" bgcolor="#C1C1C1">
      <tr>

<!-- العامود الأيسر -->
        <td width="18%" valign="top">
	<!-- كود الموضع يسار -->
	<?php mosLoadModules ( 'left' ); ?>
	<!-- نهاية كود الموضع يسار -->
	</td>

<!-- العامود الأوسط -->        
	<td>
	<!-- كود المحتوى -->
	<?php mosMainBody(); ?>
	<!-- نهاية كود المحتوى -->
	</td>

<!-- العامود الأيمن -->        
        <td width="18%" valign="top">

	<!-- كود الموضع يمين -->
	<?php mosLoadModules ( 'right' ); ?>
	<!-- نهاية كود الموضع يمين -->
	</td>

      </tr>
    </table></td>
  </tr>
</table>
رابعا وأخيرا : موديول الأخبار السريعة فى قاع الصفحة ، وسنضع هنا كود الموضع top ، وهو فى الجدول الرابع

Code: Select all

<!-- (4)جدول -->
<table width="100%" border="0">
  <tr>
    <td bgcolor="#EBEBEB">

	<!-- كود الموضع top-->
	<?php mosLoadModules ( 'top' ); ?>
	<!-- نهاية كود الموضع top-->

</td>
  </tr>
</table>
بهذا نكون انتهينا من وضع أكواد جملة فى الأماكن التى أردناها واصبح الموقع أكثر تنظيما وأحسن فى الشكل ، انظر الصورة المرفقة

وللحديث بقية


You do not have the required permissions to view the files attached to this post.

User avatar
ta3ab
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Thu Sep 06, 2007 3:30 pm

Re: شرح عمل قالب للمبتدئين جداااا

Post by ta3ab » Tue Sep 18, 2007 5:28 pm

بارك الله فيك وجزاك الله خير يارب

تسلم هالايادي يا جعلها للجنه يارب

شرح ممتاز ووافي الله يعطيك العافيه ما قصرت والله

اكمل ما بدأت به على بركة الله وسنكون تلاميذك المتابعين لك

User avatar
emakki
Joomla! Ace
Joomla! Ace
Posts: 1686
Joined: Fri Dec 01, 2006 9:26 am
Location: Centreville, Virginia
Contact:

Re: شرح عمل قالب للمبتدئين جداااا

Post by emakki » Wed Sep 19, 2007 9:13 am

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

بارك الله فيك وقد تم تثبيت الموضوع لفائدته
Live and learn.. No matter what you earn..Money or knowledge.. From market or college..
_______
http://alhost.org هل تبحث عن إستضافة؟ مقارنة بين أفضل شركات الإستضافة
http://alhost.me دليل ومعاينة شركات الاستضافة العربية

User avatar
sherif
Joomla! Ace
Joomla! Ace
Posts: 1560
Joined: Fri Jan 12, 2007 12:15 am
Location: Dikirnis , Egypt :: دكرنس ، مصر
Contact:

للمبتدئين جداااا بعض الأدوات

Post by sherif » Thu Sep 20, 2007 9:46 pm

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

شكرا اخى إيـــاد :-*على مرورك الكريم و تثبيت الموضوع
وشكرا أخى ta3abعلى متابعتك و تشجيعك
السلام عليكم
عدنا مرة أخرى لنستكمل مابدأناه ، وجاء الدور الآن على الأدوات الأساسية التى لا غنى عنها لأى مستخدم كى يتمكن من تصميم قوالب جملة و التعديل فيها بسهولة
و مراجعة و رؤية نتيجة التعديلات أولا بأول ، وصولا إلى الشكل الذى يرضاه فى النهاية قبل رفع القالب إلى سيرفر الموقع فعليا ،
و سنتسخدم هنا المثال السابق للقالب الذى اعددناه و كيفية رؤيته يعمل على جهازك .

وسنبدأ هنا بأداه هامة و حتمية ، وهى السيرفر الشخصى أو المحلى الذى يتم تنصيبه على جهاز المستخدم
حتى يتمكن من تشغيل موقع جمله على جهازه الشخصى لأغراض التجربة و التطوير و التعديل و تصميم القوالب .
البرنامج الذى اخترناه هو jsas والإسم اختصار لعبارة joomla! stanalone server من موقع joomla solutions
والنسخة الأخيرة وقت كتابة هذا الشرح هى jsas 1.10.2

التحميل : من الرابط التالى على الموقع الرئيسى لإضافات و مشروعات جملة joomlacode
http://joomlacode.org/gf/download/frsre ... 1.10.2.exe
سيتم تنزيل ملف اسمه jsas-setup_1.10.2.exe ضعه فى فولدر مميز حتى لا يضيع فى الزحام .

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

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

الزر الرئيسى الأول : run joomla وواضح من اسمه انه يفتح صفحة فى برنامج المستعرض لتعاين منها الموقع نفسه ( الواجهة الأمامية لزوار موقعك)
الزر الرئيسى الثانى : run myjsas وهو خاص بانشاء أكثر من موقع فى نفس الوقت وأقصى عدد مسموح به هو خمس مواقع
طبعا بخلاف الموقع الأصلى الذى يأتى جاهزا مع البرنامج .

الأزرار الأربعة فى أسفل النافذة :
home : يعيدك الى نافذة البداية للبرنامج .
admin : بالضغط عليه يظهر فى النافذة اليمنى قوائم التحكم فى البرنامج و ملحقاته و هى :

open joomla admin : يفتح لوحة التحكم لموقع جملة ، و اسم الدخول admin وكلمة المرور admin أيضا .
jsas config : خاص بالتحكم فى الحرف المستخدم للدرايف الافتراضى بمعنى :
عندما يبدأ هذا البرنامج فى العمل ينشئ درايف وهمى هو أصلا فولدر ، و يظهر هذا الدرايف فى نافذة mycomputer فى الويندوز ، والحرف الإفتراضى هو W:
وهذا الخيار يسمح لك بتعديل ذلك لو كان يتعارض مع الويندوز الخاصة بجهازك .
my jsas : وظيفته مكررة و سبق شرحها .
phpmyadmin : غنى عن التعريف ، اسم المستخدم root و بدون كلمة سر .
apache log files : رسائل سيرفر الأباتشى و سجلات وتاريخ التشغيل .
php inviroment : مواصفات و اعدادت معلومات تنصيب php على هذا السيرفر .
server config: مواصفات واعدادات سيرفر الأباتشى ويلاحظ أنه يعمل على بورت 85 و ليس 80
حتى لا يتعارض مع أى برنامج اخر يستخدم هذه البورت على جهازك
restart mysql : لإعادة تشغيل سيرفر mysql بسبب التوقف أو العطل أو بعد عمل تعديلات .
restart apache : لإعادة تشغيل سيرفر apache بسبب التوقف أو العطل أو بعد عمل تعديلات .
jsas simple backup : لعمل نسخ احتياطى لفولدر http_root بالكامل .

الزر الثالث فى النافذة اليسرى : docs يفتح فى النافذة اليمنى على 3 اختيارات
about , license , readme
ومن نافذة readme نستطيع قراءة مايلى :
IMPORTANT INFO :
Database host : LOCALHOST
Database Username : root
Database Password : (without password)
Path of the Joomla dir : DRIVELETTER:\www\Joomla
URL to the Joomla!: http://localhost:85/joomla
Logon to the preinstalled Joomla:
Username : admin
Password : admin (can be changed in admin)
الزر الرابع فى النافذة اليسرى : Browse يعرض محتويات الفولدر الذى يمثل root لموقع جملة
وذلك من خلال اكسبلورر الويندوز و المسار الإفتراضى هو :
C:\Program Files\JSAS\http_root\www
*********************************************

طريقة الإستعمال :
- من خلال زر open joomla admin على اليمين ندخل على لوحة التحكم للموقع
وكلمة السر كما سبق و يمكن تعديلها .
- ومن خلال زر run joomla على اليسار نستعرض الموقع و نراجع التغييرات .
- ومن خلال الزر Browse نستطيع الوصل الى ملفات الموقع كبديل عن السى بانل أو ال ftp .
- وبالنسبة لتصميم القوالب بالذات سيكون تعاملنا دائما مع الفولدر :
C:\Program Files\JSAS\http_root\www\joomla\templates
حيث يمكننا وضع القوالب و تصميمها و اجراء التعديلات عليها ثم مراجعتها من خلال صفحة الموقع .

تعديلات سريعة ومفيدة :
1- اذهب الى ملف glopal.php فى فولدر جملة الرئيسى و فى السطر رقم 24 منه ستجد :
define( 'RG_EMULATION', 1 );
قم بتعديلها الى :
define( 'RG_EMULATION', 0 );
الهدف هو انهاء مشكلة الرسالة الأمنية الحمراء الظاهرة فى أسفل لوحة التحكم .

2- اذهب الى لوحة التحكم و قم باضافة المكون (كموننت) joomlaXplorer
ومن خلاله اذهب الى ملف htaccess.txt فى فولدر جملة الرئيسى ، وافتحه و أضف ما يلى فى أخر الملف :
AddDefaultCharset windows-1256
ثم احفظه وبعد ذلك أعد تسميته الى .htaccess لاحظ النقطة فى بداية الإسم .
الهدف : انهاء مشكلة السيرفر مع اللغةالعربية .

3- من صفحة التحكم اذهب الى موديولات الموقع site modules وأضف علامة بجوار كل من :
JoomlaSolutions.com Templates
Template Chooser
JS Flash Nav
Other Menu
ثم من أعلى الصفحة اضغط زر Unpuplish
الهدف : اخفاء هذه الموديولات التى لن ترغب فى ظهورها فى تصميم موقعك غالبا ( انت حر ).

**** والآن نريد أن نرى قالبنا الوليد يعمل على جملة ، و نريد ذلك الآن و بسرعة .
حسنا ، سنستعمل احد القوالب الموجودة فعلا و نعدل عليه بسرعة لنضع قالبنا مكانه .
الخطوات :

من زر Browse افتح فولدر جملة و انتقل الى فولدر القوالب :
C:\Program Files\JSAS\http_root\www\joomla\templates
ستجد 3 فولدرات لثلاث قوالب ، افتح فولدر القالب الافتراضى :
js_thinking_jsas
امسح الملفات : index.php , js_stuff.php
وباستخدام النسخ و اللصق ضع ملف قالبنا index.php هناك ( الملف مرفق بهذا الشرح للتسهيل )
ثم فى نفس الموضع انتقل الى الفولدر css ومنه افتح الملف template_css.css وامسح كل ما فيه واتركه خاليا و احفظه فى مكانه كما هو .
عاين الموقع الأن فى المستعرض ستجد قالبنا يعمل مكان القالب الأصلى و يمكننا بدا العمل فى تحسينه .
*** وعند استعراض الموقع فى المستعرض ستجد ضمن قوائم الموقع قائمة اسمها My Jsas
ومنها تصفح بعض المعلومات المصورة و المفيدة عن البرنامج نفسه .
- انتهى شرح السيرفر الشخصى jsas .
وقبل ختام هذا الموضوع نشير إلى أداتين أخريين هما :
برنامج المفكرة المتقدم notepad++
رابط التحميل :
http://downloads.sourceforge.net/notepa ... g_mirror=0

برنامج التقاط و اعداد الألوان و درجاتها وأرقامها :
رابط التحميل :
http://home.hccnet.nl/s.j.francke/software/cpick.zip
---------------------
استكشف هذه الأدوات الثلاثة ، واستعد للموضوع القادم .
و مازال .... للحديث بقية
You do not have the required permissions to view the files attached to this post.
Last edited by sherif on Mon Sep 24, 2007 2:48 pm, edited 1 time in total.

HH
Joomla! Guru
Joomla! Guru
Posts: 605
Joined: Fri Dec 29, 2006 11:57 pm
Contact:

Re: شرح عمل قالب للمبتدئين جداااا

Post by HH » Fri Sep 21, 2007 3:34 pm

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

بارك الله فيك يا شريف وشكرا لتثيت الموضوع من المدراء

فقط للتوضيح، أنتا تتكلم عن قوالب 1.0 وليس 1.5 صح  :)

إستمر على بركة الله
Me = Wonder + Ponder
http://www.hichamaged.net/

User avatar
sherif
Joomla! Ace
Joomla! Ace
Posts: 1560
Joined: Fri Jan 12, 2007 12:15 am
Location: Dikirnis , Egypt :: دكرنس ، مصر
Contact:

Re: شرح عمل قالب للمبتدئين جداااا

Post by sherif » Fri Sep 21, 2007 8:19 pm

شكرا لمرورك و تشجيعك أخى هشام ، ملاحظتك فى محلها و قمت بالتعديل فى أول الموضوع وأضفتها ، اللهم وفق الجميع لما فيه الخير

DR-NET
Joomla! Apprentice
Joomla! Apprentice
Posts: 41
Joined: Wed Jul 05, 2006 5:35 am

Re: شرح عمل قالب للمبتدئين جداااا

Post by DR-NET » Sat Sep 22, 2007 10:27 am

فعلا شرح أكثر من رائع

يعطيك الف عافية

storm4design
Joomla! Apprentice
Joomla! Apprentice
Posts: 45
Joined: Tue Jun 05, 2007 6:41 pm
Contact:

Re: شرح عمل قالب للمبتدئين جداااا

Post by storm4design » Mon Sep 24, 2007 11:22 pm

بارك الله فيك اخوي على الشرح الرائع ...

و الله يجعله في ميزان حسناتك و بشكر المشرفين على التثبيت

3adi
Joomla! Apprentice
Joomla! Apprentice
Posts: 44
Joined: Fri Aug 18, 2006 4:43 pm

Re: شرح عمل قالب للمبتدئين جداااا

Post by 3adi » Tue Sep 25, 2007 12:38 am


شرح قيم ومتميز ومفصل

زادك الله علماً وعملاً طيباً

وبارك الله فيك أخي الفاضل

HH
Joomla! Guru
Joomla! Guru
Posts: 605
Joined: Fri Dec 29, 2006 11:57 pm
Contact:

Re: شرح عمل قالب للمبتدئين جداااا

Post by HH » Tue Sep 25, 2007 12:56 am

السلام عليكم
عندي إضافتين بخصوص بداية ملف القالب

الأولي: مشاكل الإكسبلورر + كود ما قبل الترويسة
إضافة بخصوص ما قبل الترويسة أو Header وهي صممت لتحل مشاكل متصفح الإكسبلورر

يوجد مشكلة في متصفح ميكروسوفت العتيد -أو العنيد كما تحبون- تسمى "quirks mode" وهي ببساطة أن المتصفح -إذ لم يجد القيمة صحيحة- يتعامل مع الصفحة على أنها صفحة غير قياسية

المهم هذه المشكلة لكي تحل لابد من أن يكون كود الهيدر على النحو التالي

Code: Select all

<?php defined( '_VALID_MOS' ) or die( 'Restricted access' );
// needed to seperate the ISO number from the language file constant _ISO
$iso = explode( '=', _ISO );
// xml prolog
echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
هذه القيم بقوم المتصفح بجلبها من ملف اللغة المتعرف عليه  + ملف الكونفيجيوريشن

وطبعا بادئة dir="rtl" لتحويل إتجاه القالب ليكون من اليمين إلي اليسار

الثانية: مشاكل الإكسبلورر + كود ما بعد الترويسة
في جملة بيكفي بأن تضع المتغير والمتصفح يتعرف عليه

Code: Select all

<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
هذه القيم بقوم المتصفح بجلبها من ملف اللغة المتعرف عليه  + ملف الكونفيجيوريشن

وهذا الكود يغني عن


إن شاء الله خيرا
Me = Wonder + Ponder
http://www.hichamaged.net/

aziz4web
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Sat Aug 25, 2007 1:10 am

Re: شرح عمل قالب للمبتدئين جداااا

Post by aziz4web » Wed Sep 26, 2007 8:03 pm

بحق لساني عاجز عن شكرك على هذه الخدمة الذهبية

شكرا ً والف شكر نتمنى مواصلتك

والبدء في شرح css
ومابعدها

تحيه من القلب للقلب

Ln X
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Sun Sep 30, 2007 1:35 am

Re: شرح عمل قالب للمبتدئين جداااا

Post by Ln X » Sun Sep 30, 2007 11:30 pm

يعطيك العافية على الشرح

ماشيه معك تمام بإنتظار البقية :-[

HH
Joomla! Guru
Joomla! Guru
Posts: 605
Joined: Fri Dec 29, 2006 11:57 pm
Contact:

Re: شرح عمل قالب للمبتدئين جداااا

Post by HH » Sat Oct 13, 2007 1:02 am

السلام عليكم

إن شاء الله موفق في الشرج وعسي تستطيع البدء في موضوع الـ CSS

عندي إضافة جديدة على مبدأ أنا أضيف
:)

لحل مشاكل الإكسبلورر العنيد مع القوالب العربية يمكن إستبدال هذا الكود

Code: Select all

<html xmlns="http://www.w3.org/1999/xhtml">
بهذا الكود

Code: Select all

<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo _LANGUAGE; ?>" xml:lang="<?php echo _LANGUAGE; ?>">
الفكرة أنه يقوم بقراءة محتويات اللوكال أو Locale
والنتيجة أنك عندما تتصفح التمبليت في إكسبلورر من خلال view source كالتالي


فجملة قرأ القيم الموجودة في ملف اللوكال
Control Panel ---> Global Configuration ---> Locale

بالمناسبة ليست كل القوالب ينفع معها إضافة طريقة dir="rtl" لأنه توجد بعص القوالب تعتمد علي functions

التوفيق إن شاء الله
Me = Wonder + Ponder
http://www.hichamaged.net/

User avatar
sherif
Joomla! Ace
Joomla! Ace
Posts: 1560
Joined: Fri Jan 12, 2007 12:15 am
Location: Dikirnis , Egypt :: دكرنس ، مصر
Contact:

شرح تشكيل القالب بالسى اس اس

Post by sherif » Wed Oct 24, 2007 10:20 pm

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

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

عملية استخدام ال css تتطلب منا كتابة تلك الأكواد فى ملف محدد يلحق على القالب ، اسم الملف هو template_css.css ويكون موجود بالفولدر css ضمن ملفات القالب.
لنتعرف أولا على ماهية ال css وكيفية استخدامها مع أى صفحة html :
باختصار شديد ، عندما تكتب نص ما فى صفحة html ثم تريد تشكيله بأن تجعل لونه أحمر و سمكه ثقيل ، وأن يكون مائلا .. ، فماذا نفعل ؟
الطبيعى و المعروف للجميع تقريبا هو أن تفتح صفحة ال html نفسها و تبدأ فى وضع الأكواد التى تحقق ما نريده فمثلا لتحديد نوع الخط المستخدم :

Code: Select all

<font size="3" face="Times">
..... Text .....
</font>
ولكن مع زيادة احتياجات المستخدمين وتضخم حجم الصفحات أصبح من المتعب جدا اعادة فتح الصفحة باستخدام برنامج ما لإضافة كود أو تعديل لآخر ،
و نشأت فكرة ال css بأن نصمم الصفحة على هيئة بلوكات أو أقسام و نعطى لكل قسم منها اسم تعريفى لها و هو ما يعرف بالكلاس class
ثم بدلا من تكرار الاكواد 50 مرة لخمسين عنصر داخل الصفحة ، فقط نضعهم ببساطة فى قسم واحد و نسميه مثلا section1 ،
و تتم هذه التسمية داخل html نفسها ، باستخدام الكود : [ltr]
class="section1"
[/ltr]
ثم نذهب الى ملف ال css وهو مجرد ملف نصى نضع فيه الاسم .section1 كعنوان جانبى للقسم المشار اليه ، و نضع تحت هذا العنوان كل ما يلزم من أكواد لازمة لنا .

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

Image
وكان شكل الجداول فى قالبنا كما هو فى هذه الصورة أيضا

Image

و كمرحلة أولى نريد وضع صورة فى بداية الصفحة لتعطى الشكل الجمالى و كسائر المواقع و عادة ما يسميها الجميع هيدر الموقع ، اذا ليكن ، اسمها هيدر header .
كنا قد صنعنا أول جدول فى القالب ليحتوى اسم الموقع ، سنستعمل نفس الجدول لوضع صورة ، وكما نتذكر حددنا عرضه بواقع 100% أى أن قالبنا مطاطى و مرن ،
كلما قام المستخدم بتغيير حجم النافذة يتمدد القالب أو ينكمش لملائمة ذلك ، فلو وضعنا صورة ثابتة الأبعاد لفشلت فكرة المرونة ،
اذا لابد من عمل صورة مرنة هى الأخرى حتى تنجح الفكرة ، ولكن كيف ؟




قمت ببحث سريع فى محرك بحث
و أحضرت أول صورة قابلتنى سهلة التعديل ،
و جعلت ارتفاعها 180 بكسل و عرضها 270 بكسل ،
ونسميها header.jpg

Image








ثم باستخدام برنامج بسيط مثل irfanView
قطعت من الناحية اليمنى جزءا طوليا
عرضه 6 بكسل و طبعا بنفس ارتفاع الصورة أى 180 بكسل ،
و نسمى هذه الصورة الصغيرة header_bg

Image




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

الخطوات :
أولا : نقوم بتعديل بسيط على الجدول الأول فى ملف القالب index.php بجعل عرض الحدود = صفر ، و المسافة البادئة داخل الخلايا = صفر ، واخفاء الحدود بجعلها = صفر

Code: Select all

<table width="100%" border="0" cellpadding="0" cellspacing="0">
ثانيا : نقوم بتسمية الخلية الوحيدة لهذا الجدول بالإسم هيدر

Code: Select all

<td class="header">
ثالثا : نضع رابط الصورة الأصلية للهيدر داخل هذه الخلية ، مع جعل ارتسائها لليسار ، وارتفاعها 100% لتظهر بالكامل ، و جعلها بدون أى هوامش حولها .

Code: Select all

<img src="/templates/rhuk_solarflare_ii/images/header.jpg" align="left" height="100%" margin="0px">
ملاحظة : بالنسبة لرابط الصورة ، المفروض طبعا أننا نستخدم السيرفر الشخصى طبقا للمثال الذى نعمل عليه منذ البداية ، وقد يكون البعض يعمل على موقع بالفعل ، المهم أننا سنضع الصورة فى فولدر images الخاص بالقالب الذى نستخدم ملفاته الفارغة كما سبق شرحه أيا كان موقعه ، لذلك يتم تعديل رابط الصورة حسب اسم القالب الذى تستخدمه انت.

===ليكون شكل كود html للجدول بعد التعديل كما يلى ===

Code: Select all

<!-- (1)جدول -->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
        <td class="header">
        <img src="/templates/rhuk_solarflare_ii/images/header.jpg" align="left" height="100%" margin="0px">
	<!-- بداية كود اسم الموقع -->
	<?php echo $mosConfig_sitename; ?>
	<!-- نهاية الكود -->

	</td>
  </tr>
</table>
رابعا : نفتح ملف css والذى يفترض أنه فارغ تماما لأننا مسحناه فى المثال السابق و سنبدأ بوضع اسم الكلاس بالصيغة التالية :
.header{ }
لاحظ شكل هذه الأقواس المميزة المستخدمة ، يتبع ذلك أن نضع أكواد التشكيل للقسم هيدر بين هذين القوسين وكل كود يشغل سطر و ينتهى بفاصلة منقوطة كما يلى :
.header{
سنبدأ بعمل خلفية للجدول ووضع رابط صورة الخلفية ( لاحظ أن جميع الصور التى تستخدم فى القالب تكون كلها فى الفولدر images
background-image: url(../images/header_bg.jpg);
الكود التالى ليجعل صورة الخلفية متكررة ، x تعنى أفقيا وللعلم فان y تعنى رأسيا ، أما none فلا تكرار .
background-repeat: repeat-x;
ارتساء صورة الخلفية يبدأ من اليمين
background-position: right;
ارتفاع صورة الخلفية 179 أنقصناها واحد بكسل حتى تنسجم مع الصورة الأصلية عند التكرار
height:179px;
لا هوامش
margin: 0px;
بما أن اسم الموقع موجود فى نفس هذه الخلية و سيظهر فوق الخلفية فقمنا بتشكيله هو الآخر بحجم خط 50 بكسل
font-size: 50px;
وابتعاد عن اليمين بمسافة 10 بكسل
padding-right: 10px;
تذكر أن تغلق القوس
}
=== ليكون كود تشكيل الهيدر بالكامل كما يلى : ===
.header{
background-image: url(../images/header_bg.jpg);
background-repeat: repeat-x;
background-position: right;
height:179px;
margin: 0px;
font-size: 50px;
padding-right: 10px;
}
احفظ الملف و شاهد القالب لترى أن الهيدر المرن قد اكتمل و يعمل جيدا .
Image
يتبــــــــع

User avatar
sherif
Joomla! Ace
Joomla! Ace
Posts: 1560
Joined: Fri Jan 12, 2007 12:15 am
Location: Dikirnis , Egypt :: دكرنس ، مصر
Contact:

Re: شرح عمل قالب للمبتدئين جداااا

Post by sherif » Wed Oct 24, 2007 10:57 pm

المرحلة الثانية : هى عمل خلفية و تشكيل للجدول الثانى المحتوى على البحث و مسار التصفح و التاريخ
ليصبح على هيئة شريط مميز تحت هيدر الموقع
صورة الجدول قبل التشكيل:
Image
سنقوم باستخدام صورة صغيرة مع تكرارها أفقيا ، عرض الصورة 20 بكسل وارتفاعها 60 بكسل وأسميتها bar_bg وصنعتها باستخدام برنامج بسيط أيضا ..

Image
سنستخدم الإسم أو الكلاس bar لتمييز هذه المنطقة لذا وجب التعديل فى ملف القالب مرة أخرى .
الخطوات :
أولا : نقوم بتعديل بسيط على الجدول الثانى فى ملف القالب index.php بجعل عرض الحدود = صفر ، و المسافة البادئة داخل الخلايا = صفر ، واخفاء الحدود بجعلها = صفر

Code: Select all

<table width="100%" border="0" cellpadding="0" cellspacing="0">
ثانيا : ثم على الجدول الموجود بداخله (2-1) بجعل عرض الحدود = صفر ، و المسافة البادئة داخل الخلايا = 5 لتترك مسافة معقولة بين حد الخلية و بداية النص، واخفاء الحدود بجعلها = صفر

Code: Select all

<table width="100%" bgcolor="#D6D6D6" border="0" cellpadding="5" cellspacing="0">
ثالثا : ثم باضافة الإسم bar فى الخلية الأساسية له

Code: Select all

<tr class="bar" >
===ليكون شكل كود html للجدول بعد التعديل كما يلى ===

Code: Select all

<!-- (2)جدول -->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td bgcolor="#EBEBEB">

<!-- (2-1)جدول -->
	<table width="100%" bgcolor="#D6D6D6" border="0" cellpadding="5" cellspacing="0">
      <tr class="bar" >
<!-- العامود الأيسر -->
        <td width="30%">
        ........................... الخ بدون تعديل
رابعا : نفتح ملف ال css مرة أخرى ونضع اسم الكلاس bar بعد القوس الأخير للكلاس السابق header
.bar{
نعمل خلفية لخلية الجدول ووضع رابط صورة الخلفية
background-image: url(../images/bar_bg.gif);
تكرار الصورة افقيا
background-repeat: repeat-x;
أغلق القوس
}
=== ليكون كود تشكيل الشريط بالكامل كما يلى : ===

Code: Select all

.bar{
	background-image: url(../images/bar_bg.gif);
	background-repeat: repeat-x;
}
احفظ الملف و شاهد القالب لترى أن الشريط المرن قد اكتمل و يعمل جيدا .
Image
يتبـــــع

User avatar
sherif
Joomla! Ace
Joomla! Ace
Posts: 1560
Joined: Fri Jan 12, 2007 12:15 am
Location: Dikirnis , Egypt :: دكرنس ، مصر
Contact:

Re: شرح عمل قالب للمبتدئين جداااا

Post by sherif » Wed Oct 24, 2007 11:23 pm

المرحلة الثالثة : هى تشكيل مسار التصفح ثم القوائم الرئيسية و الفرعية للموقع :
وهنا سنستخدم كلاسات جاهزة مع جملة لا تحاج منا للتعديل فى ملف القالب .
كلاسات مسار التصفح:
.pathway { }
a.pathway:link, a.pathway:visited { }
a.pathway:hover { }
صورة لتوضيح الكلاسات بالنسبة لأوضاع مسار التصفح
Image
الخطوات :
هذا الكلاس يتحكم فى تشكيل مسار التصفح فى حالته العادية
وكذلك يحدد خواصه الافتراضية مالم نغيرها فى كلاسات تالية له
.pathway {
نوع الخط المستخدم : ايريال او تاهوما حسب الموجود عند الزائر
font-family: arial, tahoma;
تشكيل الخط : ليس فوقه خط ، ليس تحته خط ، ليس له لمعان ...الخ
text-decoration: none;
حجم الخط: 16 بكسل
font-size: 16px;
سماكة الخط : غليظ
font-weight: bold;
ارتفاع السطر:20 بكسل
line-height: 20px;
لون الخط : أسود
color: #000000;
يبعد عن اليمين بمقدار : 4 بكسل
padding-right: 4px;
أغلق القوس
}
هذا الكلاس يتحكم فى تشكيل مسار التصفح عندما يكون نشطا و يعمل كرابط
a.pathway:link, a.pathway:visited {
لون الرابط : أزرق
color: blue;
حجم الخط: 16 بكسل
font-size: 16px;
يبعد عن اليمين بمقدار : 4 بكسل
padding-right: 4px;
أغلق القوس
}
هذا الكلاس يتحكم فى تشكيل مسار التصفح (عندما يكون نشطا و يعمل كرابط ) عند مرور مؤشر الماوس فوقه
a.pathway:hover {
لون الرابط : أزرق
color: blue;
حجم الخط: 16 بكسل
font-size: 16px;
يبعد عن اليمين بمقدار : 4 بكسل
padding-right: 4px;
تشكيل الخط : تحته خط
text-decoration: underline;
أغلق القوس
}
يتبــــع

User avatar
sherif
Joomla! Ace
Joomla! Ace
Posts: 1560
Joined: Fri Jan 12, 2007 12:15 am
Location: Dikirnis , Egypt :: دكرنس ، مصر
Contact:

Re: شرح عمل قالب للمبتدئين جداااا

Post by sherif » Wed Oct 24, 2007 11:52 pm

كلاسات القوائم الرئيسية :
a.mainlevel:link, a.mainlevel:visited { }
a.mainlevel:hover { }
#active_menu { }
#active_menu:hover { }
هذا الكلاس يتحكم فى تشكيل القوائم فى شكلها العادى عند رؤية الزائر لها أول مرة (link) وكذلك شكلها بعد زيارته لها (visited)
أى أن الشكلين سيكونان بنفس التنسيق بلا فرق
a.mainlevel:link, a.mainlevel:visited {
عرض القوائم : 170 بكسل
width : 170px;
ارتفاع كل قائمة : 29 بكسل
line-height: 29px;
بداية ارتساء الخط : من اليمين
text-align:right;
طريقة العرض لجميع القوائم: بلوك لا يتجزأ
display : block;
تشكيل تأثيرات الخط : بلا
text-decoration : none;
الحجم
font-size : 16px;
السمك
font-weight : bold;
نوع الخط
font-family: arial, tahoma;
اللون : أبيض ( هذا هو النص المكتوب فى القوائم)
color : #FFFFFF;
الحد العلوى لكل قائمة :أبيض ثابت(هذا سيظهر كخط فاصل بين كل قائمة و ما يليها للتجميل)
border-top : 1px solid #ffffff;
الحد الأيمن لكل قائمة: أخضر داكن
border-right : 4px solid #083C20;
لون خلفية كل قائمة: أخضر متوسط
background-color : #0F9450;
مسافة بادئة قبل النص المكتوب فى القائمة
text-indent : 10px;
}
هذا الكلاس يتحكم فى تشكيل القوائم عند مرور مؤشر الماوس فوقها
a.mainlevel:hover {
font-size : 16px;
font-weight : bold;
لون النص يتحول الى اسود
color : #000000;
text-indent : 10px;
الحد الأيمن للقائمة يتغير لونه الى الأخضر الفاتح
border-right : 4px solid #33FF00;
}
هذا الكلاس يتحكم فى شكل القائمة النشطة
#active_menu {
يكون لون خلفيتها أخضر داكن ( كتمييز لها عن باقى القوائم)
background-color : #083C20;
font-weight : bold;
color : #ffffff;
الحد الأيمن للقائمة النشطة يكون لونه احمر
border-right : 4px solid #FF0033;
}
هذا الكلاس يتحكم فى شكل القائمة النشطة عند مرور مؤشر الماوس فوقها
#active_menu:hover {
يتغير لون النص الى اسود
color : #000000;
يتغير لون الخلفية الى رمادى فاتح جدا
background-color : #E3E3E3;
}
صورة تبين الكلاسات المتحكمة فى شكل القوائم الرئيسية:
Image

يتبــــع
Last edited by sherif on Wed Oct 24, 2007 11:56 pm, edited 1 time in total.

User avatar
sherif
Joomla! Ace
Joomla! Ace
Posts: 1560
Joined: Fri Jan 12, 2007 12:15 am
Location: Dikirnis , Egypt :: دكرنس ، مصر
Contact:

Re: شرح عمل قالب للمبتدئين جداااا

Post by sherif » Thu Oct 25, 2007 12:08 am

كلاسات القائمة الفرعية "قوائم المستوى الثانى":
a.sublevel:link, a.sublevel:visited { }
a.sublevel:hover { }
a.sublevel#active_menu { }
a.sublevel#active_menu:hover { }
التفاصيل مشابهة تماما للقوائم الرئيسية
a.sublevel:link, a.sublevel:visited {
display: block;
text-align: center;
text-decoration : none;
font-family: Arial, sans-serif;
font-weight : bold;
font-size: 16px;
color: #000000;
line-height: 25px;
background: #C0FDC2;
}
a.sublevel:hover {
color: #3C1208;
background: #cccccc;
text-decoration: none;
font-weight: bold;
}
a.sublevel#active_menu {
color: #000000;
text-decoration: none;
background: #F0FFF0;
border-right : none;
border-left : 4px solid #FF0033;
}
a.sublevel#active_menu:hover {
color: #000000;
background: #cccccc;
}
وهذه صورة توضح كلاسات القوائم الفرعية و ارتباطها بالتحكم فيها:
Image
وهذا رابط لمشاهدة المثال بعد تنفيذه على موقع مجانى للمعاينة
http://sakafy.freehostia.com/
ومرفق هنا ملف السى اس اس وكذا ملف صفحة القالب بعد التعديل الأخير
وللحديث بقـــية
You do not have the required permissions to view the files attached to this post.
Last edited by sherif on Thu Oct 25, 2007 12:17 am, edited 1 time in total.

User avatar
ascii
Joomla! Apprentice
Joomla! Apprentice
Posts: 8
Joined: Sat Dec 30, 2006 2:41 am

Re: شرح عمل قالب للمبتدئين جداااا

Post by ascii » Mon Dec 24, 2007 1:49 pm

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

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

:-[

User avatar
sherif
Joomla! Ace
Joomla! Ace
Posts: 1560
Joined: Fri Jan 12, 2007 12:15 am
Location: Dikirnis , Egypt :: دكرنس ، مصر
Contact:

اللهم استجب و تقبل آآآمين

Post by sherif » Mon Dec 24, 2007 5:38 pm

شكرا على مرورك الكريم
أسعدنى أن أرى من استفاد من الموضوع
أدعو لك بمثل مادعوت لى به
واللهم استجب و تقبل
آآآآآمين

Arabicfree1430
Joomla! Apprentice
Joomla! Apprentice
Posts: 19
Joined: Fri Dec 07, 2007 10:14 pm

Re: شرح عمل قالب للمبتدئين جداااا

Post by Arabicfree1430 » Thu Jan 03, 2008 8:38 am

عظيــــــــــــــــم....... بوركت أخي على هذا الجهد الراااااااااائع
معاكم دوما

qimporte
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Sat Sep 08, 2007 10:05 pm

Re: شرح عمل قالب للمبتدئين جداااا

Post by qimporte » Fri Jan 11, 2008 4:00 am

بارك الله فيك أخي. شرح رااااائع ! أتمنى أن تكمل بإبداع آخر. جزاك الله خيرا

Arabicfree1430
Joomla! Apprentice
Joomla! Apprentice
Posts: 19
Joined: Fri Dec 07, 2007 10:14 pm

Re: شرح عمل قالب للمبتدئين جداااا

Post by Arabicfree1430 » Mon Jan 21, 2008 1:12 am

لم أستطع ان أمر على الموضوع دون أن أشكرك أخي


ما شاء الله عليك

الله يزيدك من علمه
معاكم دوما

Mansour
Joomla! Apprentice
Joomla! Apprentice
Posts: 11
Joined: Sat Jun 03, 2006 5:10 pm

Re: شرح عمل قالب للمبتدئين جداااا

Post by Mansour » Mon May 05, 2008 10:21 pm

ما شاء الله شرح رائع

جعل الله هذا العمل في ميزان حسناتك

ألف شكر

intelmakers
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Sun May 04, 2008 9:48 pm

Re: شرح عمل قالب للمبتدئين جداااا

Post by intelmakers » Thu May 08, 2008 11:15 am

مشكووووور اخى شريف

almokatah
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Mon Apr 14, 2008 9:20 pm

Re: شرح عمل قالب للمبتدئين جداااا

Post by almokatah » Mon May 26, 2008 10:58 pm

كفيت ووفيت موضوع ممتاز جدا جدا جدا للمبتدئين

alsabildz
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Sat Jul 05, 2008 11:01 am
Contact:

Re: شرح عمل قالب للمبتدئين جداااا

Post by alsabildz » Sat Jul 05, 2008 12:28 pm

جزاك الله كل خير


Locked

Return to “القوالب و التصميم”