الشرح الوارد بهذا الموضوع يختص بقوالب جملة الإصدار 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; ?>"
Code: Select all
<head>
Code: Select all
<?php if ( $my->id ) { initEditor(); } ?>
Code: Select all
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
وهى التى يقوم بتحميلها من الإعدادات العامة للموقع global settings
Code: Select all
<?php mosShowHead(); ?>
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\" />" ; ?>
Code: Select all
</head>
وهى التى نجدها فى منطقة جسم الصفحة :
.....
Code: Select all
<?php echo $mosConfig_sitename;?>
Code: Select all
<?php echo mosCurrentDate(); ?>
Code: Select all
<?php mosPathWay(); ?>
Code: Select all
<?php mosLoadModules ( 'top' ); ?>
Code: Select all
<?php mosLoadModules('left');?>
Code: Select all
<?php mosLoadModules('right');?>
Code: Select all
<?php mosMainBody();?>
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 ونرى النتيجة !!
لنفتح صفحة بيضاء ونضع فى أولها كود الهيدر الموضح أعلاه فى رقم 1 و المنتهى بالتعليمة
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>
وليس بهذا الشكل العشوائى الغير منظم (( انظر الصورة المرفقة )) ، وهنا تأتى الخطوة التى يجب البدء بها
وهى أن نتعلم كيفية عمل تصميم معقول ثم نضع فيه هذه الأكواد بما يناسب التصميم
انتهى هذا الجزء - أى أخطاء وردت هنا قابلة للتصحيح من الأخوة المحنكين طبعا و مستعد للتعديل
كل عام و انتم بخير