loulou ange
11-01-2013, بتوقيت غرينيتش 03:51 PM
http://www.dzbatna.com/images/icons/iconrote.gif ط´ط±ط* ط¨ط±ظ…ط¬ط© ظˆطھطµظ…ظٹظ… ظ…ظˆظ‚ط¹ظƒ ط®ط·ظˆظ‡ ط¨ط®ط·ظˆظ‡ ط¨ظپظƒط±ط© ظ†ط¸ط§ظ… ط§ظ„ظ‚ظˆط§ظ„ط¨ ط¨css+php (http://www.dzbatna.com/t1572364/)
بسم الله الرحمن الرحيم
http://i50.tinypic.com/2cfp2es.jpg
http://i49.tinypic.com/14ba8l.jpg
نعود معكم أعضاء موقعنا الكرام , وفى هذا الدرس مفصل سوف نشرح طريقة بالتفصيل كيف يمكنك ان تنشأ موقع بسيط مستخدما فيه الcss,بحيث يكون تصميم منظم , بل والأجمل من ذلك سوف تتعلم فى هذا الدرس مفصل كيف تستخدم php, حتى تجعل صفحات الموقع على هيئة قالب template, يمكنك فيما بعد التطوير عليه بكل سهوله وبدون تعقيد..........
اولا خلونا نشوف النتائج النهائيه لموقعنا:
1-قبل تنسيق وتنظيم الصفحة بcss+php
http://i43.tinypic.com/2cz8vpy.png (http://www.advphp.com/tuts/7r/scratch/index.html)
2-بعد تنسيق الصفحة ب css+php
http://i43.tinypic.com/2cz8vpy.png (http://www.advphp.com/tuts/7r/final/index.php)
اولا: التخطيط لكيفية بناء الموقع:
كما عودناكم دائما انك لابد ان تضع برأسك ماذا ستفعل, لان التخطيط هو أهم شىء فى ان يخرج موقعك بصورة جيده.
لذلك أنا أحضرت ورقه وقلم ووضعت براسى شو بدى أسوى , وهذا هو المخطط اللى راح نبنى على أساسه موقعنا.......
http://i46.tinypic.com/2iulx5.jpg
تمام , من الصورة يتضح أنا بحاجه للاتى بالترتيب على حسب ما راح نبدأ به خطوه خطوه.......
1-انشاء ملف index.html >> وبه كود code تصميم الصفحة ككل مقسمة كبلوكات (هيدر-ناف بار-فوتر-قائمة جانبيه -قائمة المقالات)
2-انشاء ملف style.css >> وبه كود code css اللى بواسطته راح نقسم صفحتنا الى هذه البلوكات السابقه.
3-انشاء مجلد images >> وبداخله صور التصميم للموقع
4-انشاء مجلد includes >>وبداخله الملفات الأتيه :
-ملف header.php >> وبه راح نقتطع كود code الهيدر header من ملف index ,ونضعه به , حتى يسهل التعديل عليه فيما بعد
-ملف nav.php >>وبه راح نقتطع كود code الناف بار من ملف index,ونضعه به,حتى يسهل التعديل عليه فيما بعد
-ملف sidebar.php >> وبه راح نقتطع كود code القائمة الجانبية من ملف index,ونضعه به , حتى يسهل التعديل عليه فيما بعد
-ملف footer.php >> وبه راح نقتطع كود code الفوتر من ملف index ونضعه به , حتى يسهل التعديل عليه فيما بعد
5-انشاء مجلد variables >> وبداخله ملف أكواد php, التى راح نضعها حتى نجعل الموقع أكثر ديناميكيه وحركه أكثر
والملف هو
-ملف variables.php
بهيك أعتقد سوينا تخطيط جيد فيما راح نفعله, لذلك دعنا ننطلق بناءا على هذا المخطط العمل فى الطريق لانهاء برمجة وتصميم موقعنا بكل سهوله ان شاء الله ...
1-انشاء ملف index.html
اولا: فى ملف index, راح نسوى 5 div , اى 5 بلوكات , بحيث كل بلوك يشمل جزء معين من الصفحة ..
-div للصفحة وكل واسمه wrapper
-بداخل div ال wrapper, راح نسوى div للاتى:
-div للهيدر واسمه header
-div للناف بار واسمه nav
-div للمقالات واسمه content
-div للقائمة الجانبية واسمه sidebar
-div للفوتر واسمه footer
وهذا هو الكود code فى مبدئيا قبل ان نكمل عليه
رمز Code:
<div id="wrapper"> <div id="header"></div> <div id="nav"></div> <div id="content"></div> <div id="sidebar"></div> <div id="footer"></div> </div>
نستكمل الان لنقوم بملأ كل div بما يناسبه, الى ان يحين تعديله وتقسيمه بcss .....
1-div الheader >>راح نضع به عنوان الموقع
2-div الnav >>راح نضع لنكات الموقع الرئيسية
3-div الcontent >>راح نضع به المقالات
4-div الsidebar >>راح نضع به لنكات القائمة الجانبيه
5-div الفوتر >>راح نضع به حقوق الموقع
بحيث يكون الكود code أصبح كالأتى...
رمز Code:
<div id="wrapper"> <div id="header"> <h2>عالم مطورى الويب لتعليم البرمجة والتصميم</h2> </div> <div id="nav"> <a href="#">الرئيسية</a> <a href="#">المنتــدى</a> <a href="#">الــصــور</a> <a href="#">الاستضافة HOTING</a> <a href="#">الريسلرات</a> <a href="#">السيرفر SERVERات</a> <a href="#">البرمجة</a> <a href="#">اتـصـل بـنا</a> </div> <div id="content"> <a href="#"><h3>||المقـالات المضافة حديثا||</h1></a> <h3>مقابله شخصيه</h3> <p> مع افتتاح هذ القسم, أحببت ان أضع لكم نماذج اجتهدت فى تعلمها إلى ان وصلت لمرحلة أصبحت فيها من المشهورين فى عالم مطورى الويب, ومن منطلق هذا القسم لأقوم بتشجيعكم على التعلم , بأن أعرض لكم بعض النماذج الناجحة فى مجال البرمجة والتصميم, وكيف كانت مثابرتهم, ومدى الفوائد التى جنوها من ذلك من الحصول على وظائف فى كبرى الشركات وبمبالغ خيالية .وأحببت ان استعرض لكم المبرمجين الأجانب, لان لهم صدى أقوى وواضح , وان شاء الله أحاول بقدر الامكان أن الخص لكم كافة المقابلات الشخصية للمبرمجين , والحمدلله اللغة موجوده بأذن الله, يعنى ما تشيلوا هم... </p> <p> مع افتتاح هذ القسم, أحببت ان أضع لكم نماذج اجتهدت فى تعلمها إلى ان وصلت لمرحلة أصبحت فيها من المشهورين فى عالم مطورى الويب, ومن منطلق هذا القسم لأقوم بتشجيعكم على التعلم , بأن أعرض لكم بعض النماذج الناجحة فى مجال البرمجة والتصميم, وكيف كانت مثابرتهم, ومدى الفوائد التى جنوها من ذلك من الحصول على وظائف فى كبرى الشركات وبمبالغ خيالية .وأحببت ان استعرض لكم المبرمجين الأجانب, لان لهم صدى أقوى وواضح , وان شاء الله أحاول بقدر الامكان أن الخص لكم كافة المقابلات الشخصية للمبرمجين , والحمدلله اللغة موجوده بأذن الله, يعنى ما تشيلوا هم... </p> <p>-------------------------------------------------------------------------------------------------------------------------</p> <h3>مقابله شخصيه ثانيه</h3> <p> مع افتتاح هذ القسم, أحببت ان أضع لكم نماذج اجتهدت فى تعلمها إلى ان وصلت لمرحلة أصبحت فيها من المشهورين فى عالم مطورى الويب, ومن منطلق هذا القسم لأقوم بتشجيعكم على التعلم , بأن أعرض لكم بعض النماذج الناجحة فى مجال البرمجة والتصميم, وكيف كانت مثابرتهم, ومدى الفوائد التى جنوها من ذلك من الحصول على وظائف فى كبرى الشركات وبمبالغ خيالية .وأحببت ان استعرض لكم المبرمجين الأجانب, لان لهم صدى أقوى وواضح , وان شاء الله أحاول بقدر الامكان أن الخص لكم كافة المقابلات الشخصية للمبرمجين , والحمدلله اللغة موجوده بأذن الله, يعنى ما تشيلوا هم... </p> <p>-------------------------------------------------------------------------------------------------------------------------</p> <p> مع افتتاح هذ القسم, أحببت ان أضع لكم نماذج اجتهدت فى تعلمها إلى ان وصلت لمرحلة أصبحت فيها من المشهورين فى عالم مطورى الويب, ومن منطلق هذا القسم لأقوم بتشجيعكم على التعلم , بأن أعرض لكم بعض النماذج الناجحة فى مجال البرمجة والتصميم, وكيف كانت مثابرتهم, ومدى الفوائد التى جنوها من ذلك من الحصول على وظائف فى كبرى الشركات وبمبالغ خيالية .وأحببت ان استعرض لكم المبرمجين الأجانب, لان لهم صدى أقوى وواضح , وان شاء الله أحاول بقدر الامكان أن الخص لكم كافة المقابلات الشخصية للمبرمجين , والحمدلله اللغة موجوده بأذن الله, يعنى ما تشيلوا هم... </p> </div> <div id="sidebar"> <h3>القائــمــه الرئــيسيــه</h3> <li><a href="#">الرئيسية</a></li> <li><a href="#">المنتـدى</a></li> <li><a href="#">الاستفـسارات</a></li> <li><a href="#">المكتبـة</a></li> <li><a href="#">الصـور</a></li> <h3>الخدمـــات الخارجيه</h3> <li><a href="#">أضف لنك</a></li> <li><a href="#">أضف لنك</a></li> <li><a href="#">أضف لنك</a></li> <li><a href="#">أضف لنك</a></li> <li><a href="#">أضف لنك</a></li> <h3>الدعم الفــنى</h3> <li><a href="#">أضف لنك</a></li> <li><a href="#">أضف لنك</a></li> <li><a href="#">أضف لنك</a></li> <li><a href="#">أضف لنك</a></li> <li><a href="#">أضف لنك</a></li> </div> <div id="footer"> <p> <a href="http://advphp.com">تصميم وبرمجة vista-design ©</a></p> </div> </div>
تمام بهيك يكون انتهى ملف index بكل سهوله وبدون اى تعقيد,
طبعا لاتنسى تضيف الكود code داخل وسم html والbody والhead, حتى تكتمل الصفحة بحيث يكون الشكل النهائى مكتمل.....
انتهى ملف index.html
---------------------------------------
2-انشاء ملف style.css
نستكمل معكم مع الجزء الاهم , وهو انشاء ملف التنسيق للصفحة وهو ملف style.css
حتى تفهم هذا الجزء بشكل على أعلى درجه من الفهم, فراح نأخذ الناتج النهائى للناتج وشوف كيف الابعاد والأوامر.
http://i48.tinypic.com/15kr9d.jpg
يمكنك مشاهدة الصورة بحجم أكبر من هــــنـــــا (http://i46.tinypic.com/2py5f0g.jpg)
وهذه هو كود code css ككل قبل أن أشرح طريقةه.
رمز Code:
body { background-color:#fefbea; font-family: "Tahoma", Times, serif; font-size:14px; color:black; margin:0; padding:0; } #wrapper { width:960px; background-image:url(images/bg.jpg); margin:0 auto; border-left:1px solid #ac8e33; border-right:1px solid #ac8e33; } #header { background-image:url(images/bg.jpg); width:960px; height:100px; margin:0 auto 0 1PX; margin-bottom:1px; border-bottom:1px solid #ac8e33; border-top:1px solid #ccc; } #header h2 { direction:rtl; padding:10px; } #nav { width:960px; height:40px; border-bottom:1px solid #ac8e33; } #nav a { font-weight:bold; display: block; float:right; padding:10px; text-decoration:none; background-color: #fbf1d5; } #nav a:hover { background-color:#fce18e; height:20px; } #content { direction:rtl; width:675px; float:left; padding:10px; } #content a{ text-decoration:none; } #sidebar { width:200px; float:right; margin-bottom:25px; } #sidebar a { text-decoration:none; } #sidebar li { list-style:none; text-align:center; } #sidebar h3{ text-align:center; } #footer { clear:both; width:960px; height:135px; border-top:1px solid #ac8e33; } #footer p { direction:rtl; padding:10px; } #footer p a { text-decoration:none; }
وقبل شرح طريقةه , لاتنسى ان تشير لمسار هذا الملف, روح لملفINDEX وبين وسم HEAD اشر لملف CSS كالاتى:
رمز Code:
<link rel="stylesheet" type="text/css" href="/style.css" media="screen" />
تمام : نبدأ نشرح طريقة ملف css خطوه خطوه
1-body : وراح نحدد فيه :
-لون خلفية الصفحة background-color
-نوع الخطوط بالصفحة font-family
-حجم الخطوط font-size
-مسح الحواف العلويه للصفحة , حتى لايوجد اى مسافات margin
ملاحظه تذكرها وضعها بذهنك: فى اى كود code يخص الحواف margin,او المحاذاه الpadding دايما ترتيب الابعاد يكون كالأتى:
علوى-->يمين -->سفلى>>يسار
شو القصد؟
أقولك لو خذنا كود code للحواف كالاتى:
رمز Code:
margin: 2px 3px 4px 10px;
2-->هى بعد الحافة العلويه
3-->هو بعد الحافة اليمنى
4-->هو بعد الحافة السفليه
10-->هو بعد الحافه اليسرى
طب مثلا كان الكود code كالاتى:
رمز Code:
margin: 2px auto;
2-->يقصد بها الحافه العلويه
auto-->يقصد بها الحافه اليمنى, انها قابله للتمدد على حسب عرض الصفحة اللى راح تأخذه
حبيت أنبهكم لهالملاحظه لانها مهمه جدا وراح تواجهها كثير فى شغلك.......
2-wrapper: وراح نحدد فيه
-العرضwidth
-صورة الخلفية background-image
-الحواف margin
-الحد الأيسر والأيمن border-left,border-right
3-header:وراح نحدد فيه
-الطول والعرض width-height
-الحد السفليه border-bottom
-الحد العلوييه border-top
-الحافه العلويه والسفليه margin
ثم بداخل الهيدر header راح نحدد ان النص اتجاهه من اليمين لليسار ولا يوجد حد بأسفل عنوان الموقع
رمز Code:
#header h2 { direction:rtl; padding:10px; }
4-nav:وبداخله راح نحدد
-الطول والعرض
-الحافه السفليه
وبداخل الناف , بالنسبه للنكات الموقع الرئيسية nav a#
راح نحدد فيها
-مهم جدا -->ان تكون على هيئة بلوكات +ان تطفو باتجاه من اليمين لليسار float right & display block
-ونحدد خلفية الأزرار background-color
-والمحاذاه العلويه والتى راح تحدد ارتفاع الزر padding
رمز Code:
#nav a { font-weight:bold; display: block; float:right; padding:10px; text-decoration:none; background-color: #fbf1d5; }
وأيضا, راح نحدد التأثير اللى راح يحدث عند مرور الماوس على الزر nav a:hover#
-اللون اللى راح يأخذه الزر عند مرور الماوس background-color
-وارتفاع التأثير للون على الزر height
رمز Code:
#nav a:hover { background-color:#fce18e; height:20px; }
وكمل وشوف بقية الكود code وراح تجده بسيط وسهل مثل السابق................
انتهى ملف css
----------------------------------------
3-انشاء مجلد images >> وبه ضع صورة الهيدر header وخلفية الصفحة
--------------------------------------
4-انشاء مجلد includes >>>
فى هذا المجلد راح نسوى الملفات الاتيه :
-header.php
-nav.php
-sidebar.php
-footer.php
راح أخذ مثال لملف منهم ونطبق عليه ... وليكن header.php
كما قلنا سابقا , ان هذه الملفات راح نقتطع من ملف INDEX ,كل بلوك ونضعه على حدا
لذلك خذ كود code header من ملف index, وضعه به
رمز Code:
<div id="header"> <h2>عالم مطورى الويب لتعليم البرمجة والتصميم</h2> </div>
وبالمثل فى ملف خذ كل جزء وضعه به ............
-----------------------------
5- انشاء مجلد variables
وبداخله راح نضع ملف الخاص بأكواد الphp
وملفنا راح يكون اسمه variables.php
فائدته:
1-فلنفرض انك أردت ان تسوى جمله php لنحدد به اسم عنوان الموقع فى الهيدر header , بحيث يمكنك التغيير عليها عن طريق هالملف
2-فلنفرض انك أردت ان تسوى جمله php لنحدد به حقوق الموقع والفوتر,بحيث يمكنك التغيير عليها عن طريق هالملف.
نشوف كيف......
1-افتح ملف variables.php وضعه به هالكود code:
رمز Code:
<?php $heading='عالم مطورى الويب لتعليم البرمجة والتصميم'; $footer='تصميم وبرمجة vista-design'; ?>
2-ارجع لملف header.php الموجود بداخل ملف includes
ثم راح نستبدل جمله الهيدر header h2 بأمر php بحيث نقدر نستدعى هالجمله من ملف variables.php
بعد فتح ملف header.php,نستدعى ملف variables.php ثم نعطى أمر الطباعه للامر
بحيث راح يصبح كود code ملف header.php
رمز Code:
<?php include('variables/variables.php'); ?> <div id="header"> <h2><?php echo $heading ?></h2> </div>
بالمثل راح تطبق نفس النظام على بقية الصفحات ...............
أخيرا: افتح ملف index.html حتى نشير لمسار ملفاتنا داخل مجلد includes
بحيث يكون الكود code النهائى لصفحة index كالاتى
رمز Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1256" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="author" content="" /> <link rel="stylesheet" type="text/css" href="/style.css" media="screen" /> <title>عالم مطورى الويب لتعليم البرمجة والتصميم</title> </head> <body> <div id="wrapper"> <?php include('includes/header.php'); ?> <?php include('includes/nav.php'); ?> <div id="content"> <a href="#"><h3>||المقـالات المضافة حديثا||</h1></a> <h3>مقابله شخصيه</h3> <p> مع افتتاح هذ القسم, أحببت ان أضع لكم نماذج اجتهدت فى تعلمها إلى ان وصلت لمرحلة أصبحت فيها من المشهورين فى عالم مطورى الويب, ومن منطلق هذا القسم لأقوم بتشجيعكم على التعلم , بأن أعرض لكم بعض النماذج الناجحة فى مجال البرمجة والتصميم, وكيف كانت مثابرتهم, ومدى الفوائد التى جنوها من ذلك من الحصول على وظائف فى كبرى الشركات وبمبالغ خيالية .وأحببت ان استعرض لكم المبرمجين الأجانب, لان لهم صدى أقوى وواضح , وان شاء الله أحاول بقدر الامكان أن الخص لكم كافة المقابلات الشخصية للمبرمجين , والحمدلله اللغة موجوده بأذن الله, يعنى ما تشيلوا هم... </p> <p> مع افتتاح هذ القسم, أحببت ان أضع لكم نماذج اجتهدت فى تعلمها إلى ان وصلت لمرحلة أصبحت فيها من المشهورين فى عالم مطورى الويب, ومن منطلق هذا القسم لأقوم بتشجيعكم على التعلم , بأن أعرض لكم بعض النماذج الناجحة فى مجال البرمجة والتصميم, وكيف كانت مثابرتهم, ومدى الفوائد التى جنوها من ذلك من الحصول على وظائف فى كبرى الشركات وبمبالغ خيالية .وأحببت ان استعرض لكم المبرمجين الأجانب, لان لهم صدى أقوى وواضح , وان شاء الله أحاول بقدر الامكان أن الخص لكم كافة المقابلات الشخصية للمبرمجين , والحمدلله اللغة موجوده بأذن الله, يعنى ما تشيلوا هم... </p> <p>-------------------------------------------------------------------------------------------------------------------------</p> <h3>مقابله شخصيه ثانيه</h3> <p> مع افتتاح هذ القسم, أحببت ان أضع لكم نماذج اجتهدت فى تعلمها إلى ان وصلت لمرحلة أصبحت فيها من المشهورين فى عالم مطورى الويب, ومن منطلق هذا القسم لأقوم بتشجيعكم على التعلم , بأن أعرض لكم بعض النماذج الناجحة فى مجال البرمجة والتصميم, وكيف كانت مثابرتهم, ومدى الفوائد التى جنوها من ذلك من الحصول على وظائف فى كبرى الشركات وبمبالغ خيالية .وأحببت ان استعرض لكم المبرمجين الأجانب, لان لهم صدى أقوى وواضح , وان شاء الله أحاول بقدر الامكان أن الخص لكم كافة المقابلات الشخصية للمبرمجين , والحمدلله اللغة موجوده بأذن الله, يعنى ما تشيلوا هم... </p> <p>-------------------------------------------------------------------------------------------------------------------------</p> <p> مع افتتاح هذ القسم, أحببت ان أضع لكم نماذج اجتهدت فى تعلمها إلى ان وصلت لمرحلة أصبحت فيها من المشهورين فى عالم مطورى الويب, ومن منطلق هذا القسم لأقوم بتشجيعكم على التعلم , بأن أعرض لكم بعض النماذج الناجحة فى مجال البرمجة والتصميم, وكيف كانت مثابرتهم, ومدى الفوائد التى جنوها من ذلك من الحصول على وظائف فى كبرى الشركات وبمبالغ خيالية .وأحببت ان استعرض لكم المبرمجين الأجانب, لان لهم صدى أقوى وواضح , وان شاء الله أحاول بقدر الامكان أن الخص لكم كافة المقابلات الشخصية للمبرمجين , والحمدلله اللغة موجوده بأذن الله, يعنى ما تشيلوا هم... </p> </div> <?php include('includes/sidebar.php'); ?> <?php include('includes/footer.php'); ?> </div> </body> </html>
ثم فى النهاية , قم بتغيير اسم ملف index.html الى index.php
ومبروك عليك موقع خفيف ولذيذ, بنظام القوالب الرائع
لتحميل ملــــــــــــــــــــــــــفـــــــــــــــــات الدرس مفصل اضغـــــــــــط هــــــــــــــــــــــنــــــــــــــــــــــــــ ـا (http://www.advphp.com/tuts/files/finalsite.rar)
vista-design
www.advphp.com (http://www.advphp.com)
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
بسم الله الرحمن الرحيم
http://i50.tinypic.com/2cfp2es.jpg
http://i49.tinypic.com/14ba8l.jpg
نعود معكم أعضاء موقعنا الكرام , وفى هذا الدرس مفصل سوف نشرح طريقة بالتفصيل كيف يمكنك ان تنشأ موقع بسيط مستخدما فيه الcss,بحيث يكون تصميم منظم , بل والأجمل من ذلك سوف تتعلم فى هذا الدرس مفصل كيف تستخدم php, حتى تجعل صفحات الموقع على هيئة قالب template, يمكنك فيما بعد التطوير عليه بكل سهوله وبدون تعقيد..........
اولا خلونا نشوف النتائج النهائيه لموقعنا:
1-قبل تنسيق وتنظيم الصفحة بcss+php
http://i43.tinypic.com/2cz8vpy.png (http://www.advphp.com/tuts/7r/scratch/index.html)
2-بعد تنسيق الصفحة ب css+php
http://i43.tinypic.com/2cz8vpy.png (http://www.advphp.com/tuts/7r/final/index.php)
اولا: التخطيط لكيفية بناء الموقع:
كما عودناكم دائما انك لابد ان تضع برأسك ماذا ستفعل, لان التخطيط هو أهم شىء فى ان يخرج موقعك بصورة جيده.
لذلك أنا أحضرت ورقه وقلم ووضعت براسى شو بدى أسوى , وهذا هو المخطط اللى راح نبنى على أساسه موقعنا.......
http://i46.tinypic.com/2iulx5.jpg
تمام , من الصورة يتضح أنا بحاجه للاتى بالترتيب على حسب ما راح نبدأ به خطوه خطوه.......
1-انشاء ملف index.html >> وبه كود code تصميم الصفحة ككل مقسمة كبلوكات (هيدر-ناف بار-فوتر-قائمة جانبيه -قائمة المقالات)
2-انشاء ملف style.css >> وبه كود code css اللى بواسطته راح نقسم صفحتنا الى هذه البلوكات السابقه.
3-انشاء مجلد images >> وبداخله صور التصميم للموقع
4-انشاء مجلد includes >>وبداخله الملفات الأتيه :
-ملف header.php >> وبه راح نقتطع كود code الهيدر header من ملف index ,ونضعه به , حتى يسهل التعديل عليه فيما بعد
-ملف nav.php >>وبه راح نقتطع كود code الناف بار من ملف index,ونضعه به,حتى يسهل التعديل عليه فيما بعد
-ملف sidebar.php >> وبه راح نقتطع كود code القائمة الجانبية من ملف index,ونضعه به , حتى يسهل التعديل عليه فيما بعد
-ملف footer.php >> وبه راح نقتطع كود code الفوتر من ملف index ونضعه به , حتى يسهل التعديل عليه فيما بعد
5-انشاء مجلد variables >> وبداخله ملف أكواد php, التى راح نضعها حتى نجعل الموقع أكثر ديناميكيه وحركه أكثر
والملف هو
-ملف variables.php
بهيك أعتقد سوينا تخطيط جيد فيما راح نفعله, لذلك دعنا ننطلق بناءا على هذا المخطط العمل فى الطريق لانهاء برمجة وتصميم موقعنا بكل سهوله ان شاء الله ...
1-انشاء ملف index.html
اولا: فى ملف index, راح نسوى 5 div , اى 5 بلوكات , بحيث كل بلوك يشمل جزء معين من الصفحة ..
-div للصفحة وكل واسمه wrapper
-بداخل div ال wrapper, راح نسوى div للاتى:
-div للهيدر واسمه header
-div للناف بار واسمه nav
-div للمقالات واسمه content
-div للقائمة الجانبية واسمه sidebar
-div للفوتر واسمه footer
وهذا هو الكود code فى مبدئيا قبل ان نكمل عليه
رمز Code:
<div id="wrapper"> <div id="header"></div> <div id="nav"></div> <div id="content"></div> <div id="sidebar"></div> <div id="footer"></div> </div>
نستكمل الان لنقوم بملأ كل div بما يناسبه, الى ان يحين تعديله وتقسيمه بcss .....
1-div الheader >>راح نضع به عنوان الموقع
2-div الnav >>راح نضع لنكات الموقع الرئيسية
3-div الcontent >>راح نضع به المقالات
4-div الsidebar >>راح نضع به لنكات القائمة الجانبيه
5-div الفوتر >>راح نضع به حقوق الموقع
بحيث يكون الكود code أصبح كالأتى...
رمز Code:
<div id="wrapper"> <div id="header"> <h2>عالم مطورى الويب لتعليم البرمجة والتصميم</h2> </div> <div id="nav"> <a href="#">الرئيسية</a> <a href="#">المنتــدى</a> <a href="#">الــصــور</a> <a href="#">الاستضافة HOTING</a> <a href="#">الريسلرات</a> <a href="#">السيرفر SERVERات</a> <a href="#">البرمجة</a> <a href="#">اتـصـل بـنا</a> </div> <div id="content"> <a href="#"><h3>||المقـالات المضافة حديثا||</h1></a> <h3>مقابله شخصيه</h3> <p> مع افتتاح هذ القسم, أحببت ان أضع لكم نماذج اجتهدت فى تعلمها إلى ان وصلت لمرحلة أصبحت فيها من المشهورين فى عالم مطورى الويب, ومن منطلق هذا القسم لأقوم بتشجيعكم على التعلم , بأن أعرض لكم بعض النماذج الناجحة فى مجال البرمجة والتصميم, وكيف كانت مثابرتهم, ومدى الفوائد التى جنوها من ذلك من الحصول على وظائف فى كبرى الشركات وبمبالغ خيالية .وأحببت ان استعرض لكم المبرمجين الأجانب, لان لهم صدى أقوى وواضح , وان شاء الله أحاول بقدر الامكان أن الخص لكم كافة المقابلات الشخصية للمبرمجين , والحمدلله اللغة موجوده بأذن الله, يعنى ما تشيلوا هم... </p> <p> مع افتتاح هذ القسم, أحببت ان أضع لكم نماذج اجتهدت فى تعلمها إلى ان وصلت لمرحلة أصبحت فيها من المشهورين فى عالم مطورى الويب, ومن منطلق هذا القسم لأقوم بتشجيعكم على التعلم , بأن أعرض لكم بعض النماذج الناجحة فى مجال البرمجة والتصميم, وكيف كانت مثابرتهم, ومدى الفوائد التى جنوها من ذلك من الحصول على وظائف فى كبرى الشركات وبمبالغ خيالية .وأحببت ان استعرض لكم المبرمجين الأجانب, لان لهم صدى أقوى وواضح , وان شاء الله أحاول بقدر الامكان أن الخص لكم كافة المقابلات الشخصية للمبرمجين , والحمدلله اللغة موجوده بأذن الله, يعنى ما تشيلوا هم... </p> <p>-------------------------------------------------------------------------------------------------------------------------</p> <h3>مقابله شخصيه ثانيه</h3> <p> مع افتتاح هذ القسم, أحببت ان أضع لكم نماذج اجتهدت فى تعلمها إلى ان وصلت لمرحلة أصبحت فيها من المشهورين فى عالم مطورى الويب, ومن منطلق هذا القسم لأقوم بتشجيعكم على التعلم , بأن أعرض لكم بعض النماذج الناجحة فى مجال البرمجة والتصميم, وكيف كانت مثابرتهم, ومدى الفوائد التى جنوها من ذلك من الحصول على وظائف فى كبرى الشركات وبمبالغ خيالية .وأحببت ان استعرض لكم المبرمجين الأجانب, لان لهم صدى أقوى وواضح , وان شاء الله أحاول بقدر الامكان أن الخص لكم كافة المقابلات الشخصية للمبرمجين , والحمدلله اللغة موجوده بأذن الله, يعنى ما تشيلوا هم... </p> <p>-------------------------------------------------------------------------------------------------------------------------</p> <p> مع افتتاح هذ القسم, أحببت ان أضع لكم نماذج اجتهدت فى تعلمها إلى ان وصلت لمرحلة أصبحت فيها من المشهورين فى عالم مطورى الويب, ومن منطلق هذا القسم لأقوم بتشجيعكم على التعلم , بأن أعرض لكم بعض النماذج الناجحة فى مجال البرمجة والتصميم, وكيف كانت مثابرتهم, ومدى الفوائد التى جنوها من ذلك من الحصول على وظائف فى كبرى الشركات وبمبالغ خيالية .وأحببت ان استعرض لكم المبرمجين الأجانب, لان لهم صدى أقوى وواضح , وان شاء الله أحاول بقدر الامكان أن الخص لكم كافة المقابلات الشخصية للمبرمجين , والحمدلله اللغة موجوده بأذن الله, يعنى ما تشيلوا هم... </p> </div> <div id="sidebar"> <h3>القائــمــه الرئــيسيــه</h3> <li><a href="#">الرئيسية</a></li> <li><a href="#">المنتـدى</a></li> <li><a href="#">الاستفـسارات</a></li> <li><a href="#">المكتبـة</a></li> <li><a href="#">الصـور</a></li> <h3>الخدمـــات الخارجيه</h3> <li><a href="#">أضف لنك</a></li> <li><a href="#">أضف لنك</a></li> <li><a href="#">أضف لنك</a></li> <li><a href="#">أضف لنك</a></li> <li><a href="#">أضف لنك</a></li> <h3>الدعم الفــنى</h3> <li><a href="#">أضف لنك</a></li> <li><a href="#">أضف لنك</a></li> <li><a href="#">أضف لنك</a></li> <li><a href="#">أضف لنك</a></li> <li><a href="#">أضف لنك</a></li> </div> <div id="footer"> <p> <a href="http://advphp.com">تصميم وبرمجة vista-design ©</a></p> </div> </div>
تمام بهيك يكون انتهى ملف index بكل سهوله وبدون اى تعقيد,
طبعا لاتنسى تضيف الكود code داخل وسم html والbody والhead, حتى تكتمل الصفحة بحيث يكون الشكل النهائى مكتمل.....
انتهى ملف index.html
---------------------------------------
2-انشاء ملف style.css
نستكمل معكم مع الجزء الاهم , وهو انشاء ملف التنسيق للصفحة وهو ملف style.css
حتى تفهم هذا الجزء بشكل على أعلى درجه من الفهم, فراح نأخذ الناتج النهائى للناتج وشوف كيف الابعاد والأوامر.
http://i48.tinypic.com/15kr9d.jpg
يمكنك مشاهدة الصورة بحجم أكبر من هــــنـــــا (http://i46.tinypic.com/2py5f0g.jpg)
وهذه هو كود code css ككل قبل أن أشرح طريقةه.
رمز Code:
body { background-color:#fefbea; font-family: "Tahoma", Times, serif; font-size:14px; color:black; margin:0; padding:0; } #wrapper { width:960px; background-image:url(images/bg.jpg); margin:0 auto; border-left:1px solid #ac8e33; border-right:1px solid #ac8e33; } #header { background-image:url(images/bg.jpg); width:960px; height:100px; margin:0 auto 0 1PX; margin-bottom:1px; border-bottom:1px solid #ac8e33; border-top:1px solid #ccc; } #header h2 { direction:rtl; padding:10px; } #nav { width:960px; height:40px; border-bottom:1px solid #ac8e33; } #nav a { font-weight:bold; display: block; float:right; padding:10px; text-decoration:none; background-color: #fbf1d5; } #nav a:hover { background-color:#fce18e; height:20px; } #content { direction:rtl; width:675px; float:left; padding:10px; } #content a{ text-decoration:none; } #sidebar { width:200px; float:right; margin-bottom:25px; } #sidebar a { text-decoration:none; } #sidebar li { list-style:none; text-align:center; } #sidebar h3{ text-align:center; } #footer { clear:both; width:960px; height:135px; border-top:1px solid #ac8e33; } #footer p { direction:rtl; padding:10px; } #footer p a { text-decoration:none; }
وقبل شرح طريقةه , لاتنسى ان تشير لمسار هذا الملف, روح لملفINDEX وبين وسم HEAD اشر لملف CSS كالاتى:
رمز Code:
<link rel="stylesheet" type="text/css" href="/style.css" media="screen" />
تمام : نبدأ نشرح طريقة ملف css خطوه خطوه
1-body : وراح نحدد فيه :
-لون خلفية الصفحة background-color
-نوع الخطوط بالصفحة font-family
-حجم الخطوط font-size
-مسح الحواف العلويه للصفحة , حتى لايوجد اى مسافات margin
ملاحظه تذكرها وضعها بذهنك: فى اى كود code يخص الحواف margin,او المحاذاه الpadding دايما ترتيب الابعاد يكون كالأتى:
علوى-->يمين -->سفلى>>يسار
شو القصد؟
أقولك لو خذنا كود code للحواف كالاتى:
رمز Code:
margin: 2px 3px 4px 10px;
2-->هى بعد الحافة العلويه
3-->هو بعد الحافة اليمنى
4-->هو بعد الحافة السفليه
10-->هو بعد الحافه اليسرى
طب مثلا كان الكود code كالاتى:
رمز Code:
margin: 2px auto;
2-->يقصد بها الحافه العلويه
auto-->يقصد بها الحافه اليمنى, انها قابله للتمدد على حسب عرض الصفحة اللى راح تأخذه
حبيت أنبهكم لهالملاحظه لانها مهمه جدا وراح تواجهها كثير فى شغلك.......
2-wrapper: وراح نحدد فيه
-العرضwidth
-صورة الخلفية background-image
-الحواف margin
-الحد الأيسر والأيمن border-left,border-right
3-header:وراح نحدد فيه
-الطول والعرض width-height
-الحد السفليه border-bottom
-الحد العلوييه border-top
-الحافه العلويه والسفليه margin
ثم بداخل الهيدر header راح نحدد ان النص اتجاهه من اليمين لليسار ولا يوجد حد بأسفل عنوان الموقع
رمز Code:
#header h2 { direction:rtl; padding:10px; }
4-nav:وبداخله راح نحدد
-الطول والعرض
-الحافه السفليه
وبداخل الناف , بالنسبه للنكات الموقع الرئيسية nav a#
راح نحدد فيها
-مهم جدا -->ان تكون على هيئة بلوكات +ان تطفو باتجاه من اليمين لليسار float right & display block
-ونحدد خلفية الأزرار background-color
-والمحاذاه العلويه والتى راح تحدد ارتفاع الزر padding
رمز Code:
#nav a { font-weight:bold; display: block; float:right; padding:10px; text-decoration:none; background-color: #fbf1d5; }
وأيضا, راح نحدد التأثير اللى راح يحدث عند مرور الماوس على الزر nav a:hover#
-اللون اللى راح يأخذه الزر عند مرور الماوس background-color
-وارتفاع التأثير للون على الزر height
رمز Code:
#nav a:hover { background-color:#fce18e; height:20px; }
وكمل وشوف بقية الكود code وراح تجده بسيط وسهل مثل السابق................
انتهى ملف css
----------------------------------------
3-انشاء مجلد images >> وبه ضع صورة الهيدر header وخلفية الصفحة
--------------------------------------
4-انشاء مجلد includes >>>
فى هذا المجلد راح نسوى الملفات الاتيه :
-header.php
-nav.php
-sidebar.php
-footer.php
راح أخذ مثال لملف منهم ونطبق عليه ... وليكن header.php
كما قلنا سابقا , ان هذه الملفات راح نقتطع من ملف INDEX ,كل بلوك ونضعه على حدا
لذلك خذ كود code header من ملف index, وضعه به
رمز Code:
<div id="header"> <h2>عالم مطورى الويب لتعليم البرمجة والتصميم</h2> </div>
وبالمثل فى ملف خذ كل جزء وضعه به ............
-----------------------------
5- انشاء مجلد variables
وبداخله راح نضع ملف الخاص بأكواد الphp
وملفنا راح يكون اسمه variables.php
فائدته:
1-فلنفرض انك أردت ان تسوى جمله php لنحدد به اسم عنوان الموقع فى الهيدر header , بحيث يمكنك التغيير عليها عن طريق هالملف
2-فلنفرض انك أردت ان تسوى جمله php لنحدد به حقوق الموقع والفوتر,بحيث يمكنك التغيير عليها عن طريق هالملف.
نشوف كيف......
1-افتح ملف variables.php وضعه به هالكود code:
رمز Code:
<?php $heading='عالم مطورى الويب لتعليم البرمجة والتصميم'; $footer='تصميم وبرمجة vista-design'; ?>
2-ارجع لملف header.php الموجود بداخل ملف includes
ثم راح نستبدل جمله الهيدر header h2 بأمر php بحيث نقدر نستدعى هالجمله من ملف variables.php
بعد فتح ملف header.php,نستدعى ملف variables.php ثم نعطى أمر الطباعه للامر
بحيث راح يصبح كود code ملف header.php
رمز Code:
<?php include('variables/variables.php'); ?> <div id="header"> <h2><?php echo $heading ?></h2> </div>
بالمثل راح تطبق نفس النظام على بقية الصفحات ...............
أخيرا: افتح ملف index.html حتى نشير لمسار ملفاتنا داخل مجلد includes
بحيث يكون الكود code النهائى لصفحة index كالاتى
رمز Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1256" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="author" content="" /> <link rel="stylesheet" type="text/css" href="/style.css" media="screen" /> <title>عالم مطورى الويب لتعليم البرمجة والتصميم</title> </head> <body> <div id="wrapper"> <?php include('includes/header.php'); ?> <?php include('includes/nav.php'); ?> <div id="content"> <a href="#"><h3>||المقـالات المضافة حديثا||</h1></a> <h3>مقابله شخصيه</h3> <p> مع افتتاح هذ القسم, أحببت ان أضع لكم نماذج اجتهدت فى تعلمها إلى ان وصلت لمرحلة أصبحت فيها من المشهورين فى عالم مطورى الويب, ومن منطلق هذا القسم لأقوم بتشجيعكم على التعلم , بأن أعرض لكم بعض النماذج الناجحة فى مجال البرمجة والتصميم, وكيف كانت مثابرتهم, ومدى الفوائد التى جنوها من ذلك من الحصول على وظائف فى كبرى الشركات وبمبالغ خيالية .وأحببت ان استعرض لكم المبرمجين الأجانب, لان لهم صدى أقوى وواضح , وان شاء الله أحاول بقدر الامكان أن الخص لكم كافة المقابلات الشخصية للمبرمجين , والحمدلله اللغة موجوده بأذن الله, يعنى ما تشيلوا هم... </p> <p> مع افتتاح هذ القسم, أحببت ان أضع لكم نماذج اجتهدت فى تعلمها إلى ان وصلت لمرحلة أصبحت فيها من المشهورين فى عالم مطورى الويب, ومن منطلق هذا القسم لأقوم بتشجيعكم على التعلم , بأن أعرض لكم بعض النماذج الناجحة فى مجال البرمجة والتصميم, وكيف كانت مثابرتهم, ومدى الفوائد التى جنوها من ذلك من الحصول على وظائف فى كبرى الشركات وبمبالغ خيالية .وأحببت ان استعرض لكم المبرمجين الأجانب, لان لهم صدى أقوى وواضح , وان شاء الله أحاول بقدر الامكان أن الخص لكم كافة المقابلات الشخصية للمبرمجين , والحمدلله اللغة موجوده بأذن الله, يعنى ما تشيلوا هم... </p> <p>-------------------------------------------------------------------------------------------------------------------------</p> <h3>مقابله شخصيه ثانيه</h3> <p> مع افتتاح هذ القسم, أحببت ان أضع لكم نماذج اجتهدت فى تعلمها إلى ان وصلت لمرحلة أصبحت فيها من المشهورين فى عالم مطورى الويب, ومن منطلق هذا القسم لأقوم بتشجيعكم على التعلم , بأن أعرض لكم بعض النماذج الناجحة فى مجال البرمجة والتصميم, وكيف كانت مثابرتهم, ومدى الفوائد التى جنوها من ذلك من الحصول على وظائف فى كبرى الشركات وبمبالغ خيالية .وأحببت ان استعرض لكم المبرمجين الأجانب, لان لهم صدى أقوى وواضح , وان شاء الله أحاول بقدر الامكان أن الخص لكم كافة المقابلات الشخصية للمبرمجين , والحمدلله اللغة موجوده بأذن الله, يعنى ما تشيلوا هم... </p> <p>-------------------------------------------------------------------------------------------------------------------------</p> <p> مع افتتاح هذ القسم, أحببت ان أضع لكم نماذج اجتهدت فى تعلمها إلى ان وصلت لمرحلة أصبحت فيها من المشهورين فى عالم مطورى الويب, ومن منطلق هذا القسم لأقوم بتشجيعكم على التعلم , بأن أعرض لكم بعض النماذج الناجحة فى مجال البرمجة والتصميم, وكيف كانت مثابرتهم, ومدى الفوائد التى جنوها من ذلك من الحصول على وظائف فى كبرى الشركات وبمبالغ خيالية .وأحببت ان استعرض لكم المبرمجين الأجانب, لان لهم صدى أقوى وواضح , وان شاء الله أحاول بقدر الامكان أن الخص لكم كافة المقابلات الشخصية للمبرمجين , والحمدلله اللغة موجوده بأذن الله, يعنى ما تشيلوا هم... </p> </div> <?php include('includes/sidebar.php'); ?> <?php include('includes/footer.php'); ?> </div> </body> </html>
ثم فى النهاية , قم بتغيير اسم ملف index.html الى index.php
ومبروك عليك موقع خفيف ولذيذ, بنظام القوالب الرائع
لتحميل ملــــــــــــــــــــــــــفـــــــــــــــــات الدرس مفصل اضغـــــــــــط هــــــــــــــــــــــنــــــــــــــــــــــــــ ـا (http://www.advphp.com/tuts/files/finalsite.rar)
vista-design
www.advphp.com (http://www.advphp.com)
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
