| دورة تصميم المجلات الإلكترونية هذه الدورة لتعلم الطرق الصحيحة لتصميم المجلات الإلكترونية ملقي الدورة: [vista-design] |
  |
| | LinkBack | أدوات الموضوع | انواع عرض الموضوع |
|
#1
28-08-2009, 08:37 PM
| |||||
| |||||
 [joomla final] درس برمجة قالب مجلة جملة بنفسك من الصفر (أقوى درس فى الدورة)
بسم الله الرحمن الرحيم بهذا الدرس الاخير راح نختم اللقاء مع مجلتنا الرائعة joomla , وبعدها ننتقل لشرح مجلة mkportal هذا الدرس لم يشرح من قبل , والدرس راح يكون لاول مره لاعضاء الدورة فقط فهيا نبدأ طريق برمجة قوالب المجلة من هنا>>>>>>>>>> اولا: اذهب الى مجلد templates الخاص بالقوالب ثم أنشأ ملف جديد وراح نسميه temp_mtwer بداخل مجلد temp_mtwer , راح ننشأ ملفين : 1-ملف templatedetails.xml 2- ملف index.php #صوره 1  1-افتح ملف templatedetails.xml ثم ضع به الكود الأتى: كود: <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN"
"http://dev.joomla.org/xml/1.5/template-install.dtd">
<install version="1.5" type="template">
<name>temp_mtwer</name>
<creationDate>31-01-2009</creationDate>
<author>Nettut Fan</author>
<authorEmail>your@email.com</authorEmail>
<authorUrl>http://www.siteurl.com</authorUrl>
<copyright>You 2009</copyright>
<license>GNU/GPL</license>
<version>1.0.0</version>
<description>temp_mtwer</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>css/template.css</filename>
</files>
<positions>
<position>breadcrumb</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>footer</position>
</positions>
</install> 2-افتح ملف index.php ثم ضع به الكود الأتى: كود: <!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
</head> اشرح الكود: اول عبارة doctyype... هى عبارة مهمه جدا تستخدم فى اى ملف اندكس بالذات وفائدتها انها تحافظ على ابعاد التنسيق بالظبط مثل ما سويناها فى ملفcss ######################### مثال نظرى (للاطلاع فقط): لو افترضنا ان عرض منطقة فى الصفحة الكلى = 500px ال300px فى الcss تقسم كالأتى: width content+padding(lt&rt)+border (lt+rt)+margin(lt+rt) لو وزعنا العرض الكلى 500 على هذه المناطق فراح تكون على سبيل المثال كالاتى: width content=400 px padding=10 px border=10 px margin=5px بهيك راح يكون الاجمالى 500 بكسل نأتى الان لفائدة جملتنا فى بعض المتصفحات كالاكسبلورر القديم يتم اضافة قيمة زياده للمحاذاة padding بدل ما تكون 10 راح تصير مثلا 15 زيادة القيمة راخ تؤثر بالسلب على شكل الصفحة بالكامل من هنا جاءة فائدة الجملة هذه حتى ما تستهبل اى متصفحات وتضيف اى قيمة على كيفها  ####################### نكمل شرح بقية الكود: نأتى لجملة كود PHP: الان نكمل الشرح ننطلق الأن لعمل القالب وتجميله الان راح نضيف للكود السابق فى صفحة index.php الاتى: كود: <jdoc:include type="component" /> كود: <!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" > <head> <jdoc:include type="head" /> </head> <body> <jdoc:include type="component" /> </body> </html> ادلخ للوحة التحكم ثم template manager وراح تجد ان اسم القالب الخاص بنا بعدين اختاره واضغط على default حتى يصير قالبنا هو الأفتراضى #صوره 2  الحين نروح لمتصفحنا ونشوف شكل القالب #صوره 3  واو جميل لسه راح نسوى فيه شغل كثير: الحين راح نتعلم كيف نضيف بوسشن للقالب لو تتذكر كود xml كان فيه الاتى: كود: <positions>
<position>breadcrumb</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>footer</position>
</positions> راح نحدد بوسشن ونخليه يظهر كيف؟ نفتح ملف index.php ونضيف له بوسشن القائمة اليسرى والفوتر كود: <jdoc:include type="modules" name="left" /> كود: <jdoc:include type="modules" name="footer" /> كود: <!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
</head>
<body>
<jdoc:include type="component" />
<jdoc:include type="modules" name="left" />
<jdoc:include type="modules" name="footer" />
</body>
</html> راح نجد موديل اسمه main menu وهو كان مضاف سابقا حتى يظهر القائمة اليسرى # صوره 4  الحين نريد اظهار كود الفوتر على سبيل انه غير موجود من قبل نروح لmodule manager ثم نختار new ثم نختار الfooter #صوره 5  نختار البوسشن footer # صوره 6  نروح نشوف وراح تجد الفوتر موجود # صوره 7  طبعا هالاشياء كانت موجوده لاننا نصبناها لما اخترنا عبارة install simple data واحنا بنصب المجلة >>>>> نكمل ونضيف المزيد من البوسشن والموديلز الحين راح نستخدم ملف css بجانب الملفات السابقة لكن قبل ذلك نريد ان نحدد فى ملف الindex.php كل جزء على حدا حتى فى كود css نحدد الجزء المراد الاختيار وتنفيذ الcss عليه وراح نستحدم تنصيص division مع id لتحديد الجزء بأسم معين يمكننا اختياره لنعدل عليه ولا ننسى ان نشير لمكان ملف css بالامر link يعنى بعد هذا التعديلات راح يصبح كود index.php بهذه الصورة كود: <!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/temp_mtwer/css/template.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"><jdoc:include type="modules" name="top" /> </div>
<div id="sidebar_left" class="float"><jdoc:include type="modules" name="left" /></div>
<div id="content" class="float">
<jdoc:include type="component" />
</div>
<div id="sidebar_right"class="float"><jdoc:include type="modules" name="right" /></div>
<div id="footer" class="clear"><jdoc:include type="modules" name="footer" /></div>
</div>
</body>
</html> الحين فى داخل مجلد القالب temp_mtwer راح نسوى مجلد ونسميه css داخل هذا المجلد نسوى ملف ونسميه template.css # صوره 8  وراح نضيف له هذا الكود الخاص بالتعديل على البوسشن والموديلات كود: * {
padding: 0;
margin:0;
}
ul {
list-style:none;
}
.float {
float: left;
}
.clear {
clear: both;
}
#container {
width:960px;
margin: auto;
}
#header {
background-color:#999999;
height: 150px;
}
#content {
width: 660px;
text-align: center;
}
#sidebar_left {
text-align: center;
background-color:#CCCCCC;
width: 150px;
}
#sidebar_right {
background-color:#CCCCCC;
width: 90px;
}
#footer {
background-color:#999999;
text-align:center;
} الحين نريد مثلا عمل موديل جديد للبحث وتسجيل الدخول راح نطبق نفس الخطوات السابقة نروح لmodule manager ثم new ثم نختار search ومره اخره ل login ونختار البوسشن الخاص بهم وهكذا............   بهيك يكون انتهى درسنا على أمل ان تكونوا عرفتوا طريقة عمل قوالب جملة ببساطة وفى دروس قادمة راح نحاول نتعمق لعمل قالب احترافى من الدرجة الأولى نرجو من الجميع التطبيق تحياتى اخوكم محمد توقيعي عالم مطورى الويب لتعليم برمجة وتصميم المواقع www.advphp.com آخر تعديل بواسطة vista-design ، 28-08-2009 الساعة 08:40 PM |
|
#2
31-08-2009, 10:48 PM
| |||||
| |||||
| |
|
| العلامات المرجعية |
 مواضيع جديدة في قسم دورة تصميم المجلات الإلكترونية |
| |
| أدوات الموضوع | |
| انواع عرض الموضوع | |
|
|
|
المواضيع المتشابهه | ||||
| الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
| قالب الاسلام العظيم لمجلة جملة قالب جديد من صنع جملة تيما ادخل وحمل | kol7aga.net | سكربتات إدارة المحتوى | 1 | 26-12-2009 02:16 AM |
دخول الاعضاء
العرض العادي
