التطوير الثانى لدرس مفصل شرح طريقة برمجة وتصميم موقع ب php+css
http://www.dzbatna.com/images/icons/iconrote.gif ط§ظ„طھط·ظˆظٹط± ط§ظ„ط«ط§ظ†ظ‰ ظ„ط¯ط±ط³ ط´ط±ط* ط¨ط±ظ…ط¬ط© ظˆطھطµظ…ظٹظ… ظ…ظˆظ‚ط¹ ط¨ php+css
عوده من جديد أعضاء وزوار موقعنا الكرام,لقد تأخرت قليلا فى تنزيل الدروس نظرا لانى كنت أجهز لهذا الدرس مفصل لانه من الدروس المهمه, ونظرا لكثرة الطلبات منكم بأن تروا مثل هذا النوع من الشروحات , فقد قررت أن أجعل هذا الدرس مفصل كسلسله سوف نقوم بتطويرها خطوه خطوه من برمجة وتصميم حتى نصل لتصميم وبرمجة موقع متكامل يصلح لكافة الأغراض, وفى هذا الدرس مفصل سوف انتقل معكم للتطوير الثانى
من الدرس مفصل السابق شرح طريقة برمجة وتصميم موقعك خطوه بخطوه بفكرة نظام القوالب بcss+php
وفى هذا التطوير الثانى سوف نقوم بالتحسينات الأتيه للموقع :
وبعد ان ننهى هذا الدرس مفصل سوف تلاحظ الفرق فى التطوير واضحا:
واليكم الناتج النهائى:
الموقع قبل التطوير الثانى:
الموقع بعد التطوير الثانى:
دعونا ننطلق سويا لنرى ما سنقوم بعمله ان شاء الله
أولا فهرس الدرس مفصل:
1-شرح طريقة عمل background للصفحة
2-شرح طريقة عمل background للمقالات داخل wrapper
3-شرح طريقة اعادة توزيع الهيدر header وعمل تصميم له
4-شرح طريقة عمل ناف بار بcss بشكل جذاب
5-شرح طريقة عمل قائمة رئيسية جانبية ب css بشكل جذاب
6-شرح طريقة طريقة عرض المقالات وجلبها من صفحاتها بدون تحميل الصفحة مرة أخرى ب jquery
7-انهاء الشكل النهائى لكود code php استعداد للتطوير الثالث لعمل لوحة تحكم بالمقالات
اولا: شرح طريقة عمل background للصفحة :
-افتح ملف style.css وفى كود code body سوف نقوم بعمل background
وهذا هو كود codeها:
رمز Code:
background-image:url(images/back.jpg) ;
والصوره المستخدمه كخلفيه سوف تكون:
ثانيا:شرح طريقة عمل خلفية للمقالات داخل wrapper
-فى wrapper# سوف نقوم باضافة خلفية كالاتى:
رمز Code:
background-image:url(images/bg.jpg);
وسوف نستخدم الصورة الأتيه:
http://i45.tinypic.com/ynvib.jpg
ثالثا:شرح طريقة اعادة توزيع الهيدر header وعمل تصميم له:
فى header# سوف نقوم بعمل خلفية وهذا هو كود codeها:
رمز Code:
background-image:url(images/header.jpg);
والصورة المستخدمه هى:
شوفتوا الموضوع لحد الأن بسيط
نبدأ ندخل فى الأصعب قليلا..............
رابعا: شرح طريقة عمل ناف بار بcss بشكل جذاب:
1-سوف نقوم بتعديل كود code الناف بار فى الدرس مفصل السابق بحيث يكون طريقة العرض للناف بار
كلست li
وهذا هو الكود code فى صفحة nav.php
رمز Code:
2-نريد ان نضيف التأثير عند مرور الماوس:
نظرا لطول الدرس مفصل سوف اضع لكم كود code css جاهز
رمز Code:
ul#nav{ margin:0; padding:0; list-style-type:none; width:auto; position:relative; display:block; height:40px; text-transform:uppercase; font-size:13px; background:transparent url("images/black.jpg") repeat-x top left; font-family:tahoma,Arial,Verdana,sans-serif; } ul#nav li{ display:block; float:right; margin:0; pading:0; border-right:1px solid #ffffff; } ul#nav li a{ display:block; float:left; color:#ffffff; text-decoration:none; padding:12px 20px 0 20px; height:24px; height:40px; } ul#nav li a:hover{ background:transparent url("images/blue.jpg") repeat-x top left; }
وبالنسبة لخلفية أزرار الناف بار سوف نستخدم صورتين:
صورة black.jpg الخاصة بخلفية الزر, وصورة blue.jpg الخاصة بتغير لون الزر بمرور الماوس عليه
وهما موجودين فى مجلد الصور images
الان شكل الموقع لحين هذه المرحلة سوف يصبح شكله كالأتى:
خامسا-شرح طريقة عمل قائمة رئيسية جانبية ب css بشكل جذاب:
افتح ملف sidebar.php وسوف نقوم بتعديل كود codeه مره أخرى ليصبح كالاتى:
رمز Code:
وسوف نقوم بأضافة تأثير css عليه باستخدام الكود code الاتى:
رمز Code:
.outer{ list-style:none; margin:0px; padding:0px; } #menu { width: 200px; border-style: solid solid none solid; border-color: #94AA74; border-width: 1px; } #menu ul{ list-style:none; margin:0px; padding:0px; } #menu li a { height: 32px; voice-family: "\"}\""; voice-family: inherit; height: 24px; text-decoration: none; font-weight:normal; } #menu li a:link, #menu li a:visited { color: #FFFFFF; display: block; background: url(images/v6.gif); background-repeat:no-repeat; padding: 8px 0 0 50px; } #menu li a:hover { color: #666666; background: url(images/v6.gif) 0 -32px; background-repeat:no-repeat; padding: 8px 0 0 50px; } #menu li a:active { color: #666666; background: url(images/v6.gif) 0 -64px; background-repeat:no-repeat; padding: 8px 0 0 50px; }
وسوف نستخدم خلفية الأزرار الصورة v6.gif
بحيث بعد هذا التعديل سوف يصبح شكل القائمة كالأتى:
سادسا-شرح طريقة طريقة عرض المقالات وجلبها من صفحاتها بدون تحميل الصفحة مرة أخرى ب jquery
طبعا هذا تقريبا هو أهم ما فى الموضوع من تحسين , وأحببت أن أشرح طريقةه باستفاضه لان أحب فن الjquery لانها رائعه بصراحه وتستحق التعب
أولا: ملاحظه هامه جدا قبل البدء:
نظرا لان jquery لها بعض المشاكل مع اللغة العربية, خصوصا فى طريقة التحميل للصفحات بواسطتها وعرضها للغة العربية, لذلك سوف أقدم لكم حلا قاطعا تقدر تستخدمه فى اى تعامل لك مع الjuqery
او اى ملف اخر مسويلك مشكلة فى الترميز
-اولا سوف نقوم بأستخدام notepad++
يمكنك تحميلها من الرابط الاتى اضغط هــــــــنـــــــا
اى صفحة تتعامل بها , اذا واجهتك مشكلة بالترميز وظهور الحروف بأشكال غريبه عليك بعمل الخطوات الاتية :
سوف نستخدم تغيير الencoding لكل الصفحة ب utf-8 ثم نقوم بحفظ الصفحة :
فقط , وبهيك تتخلص من مشاكل الترميز .............
نرجو لموضوعنا بخصوص شرح طريقة تحميل وعرض المقالات بدون تحميل الصفحة
اولأ: ارجع للمثال اللى طورناه وشوف طريقة عرض المقالات, عن طريق الضغط على زر
من أزرار الناف بار حتى تفهم القصد........
ثانيا: لابد ان نفهم الفكرة لهذه الطريقة الرائعه, لذلك أنظر لهذه الصورة لنفهم الفكرة سويا.
هل فهمت فكرة الصورة؟, مو مشكلة نكمل الشرح طريقة وراح تفهم فى الاخر ان شاء الله
1-اولا ارجع لملف nav.php وشوف اننا اعطيناه شكل اللست li
كالاتى كمثال:
رمز Code:
2-ثانيا نستخدم ملف js.js لنضفى تأثير الjquery فى عرض المقالات :
-فى ملف index.php راح نستدعى ملف المكتبة jquery +ملف js.js
رمز Code:
-دعونا نشرح طريقة ملف js.js
فكرته بسيطه وهى اننا سنقوم بعمل التاثير عن طريق احداث تغييرات على الزر
بعد ان قمنا بظبط كود code css والخطوات كالأتى:
اولا: تحميل المقال فقط من الصفحة والذى هو مدرج داخل id اسمه content#
(راجع كود code index.php ) , بحيث يقوم الكود code بجلب مسار الصفحة
رمز Code:
var toLoad = $(this).attr('href')+' #content';
ثانيا: سنقوم بأخفاء المقال الظاهر لك بعد ان يتم ضغط الزر ليتم جلب المقال من الصفحة الذى ضغطت بها زرها
رمز Code:
$('#content').hide('fast',loadContent);
ثالثا: سوف نستخدم تأثير جميل وهو عرض صورة تحميل الصفحة لحين تظهر
اولا: فى كود code css سوف نستخدم الكود code الأتى:
رمز Code:
#load { display: none; position: absolute; left: 30px; /*distance from top edge of image till top edge of wrapper div */ top: 10px; /*right:30px; distance from rt edge of image till rt border of wrapper div */ background: url(images/ajax-loader.gif); width: 54px; height: 55px; text-indent: -9999em; }
طبعا انا كاتب الكلام بالانجلش حتى لا أنسى , وهذا كتابتى وليس نقلا من أحد
والصورة المستخدمة
الحين نرجع لملف js.js مره اخرى ونكمل كتابة الكود code:
بعد عرض الصورة الخاصة بتحميل الصفحة , ووقت يتم تحميلها سوف نقوم بأخفاءها
رمز Code:
$('#load').remove();
وسوف نقوم بأرفاق هذه الصورة باستخدام الكود code الاتى:
رمز Code:
$('#wrapper').append('LOADING...');
رابعا: سنقوم بعمل اخفاء تدريجى لحين تحمل الصفحة الاخرى كالاتى:
رمز Code:
$('#load').fadeIn('normal');
باقى الكود code بصراحة تقدر تضعه مباشرة, لانى أخذت الفكرة من أحد الأسكربتات وطبقتها على هذا الدرس مفصل
وحبيت أشرح طريقةها بعد فهمها وتطبيقها على درس مفصلنا ولله الحمد
وتقدر تشوف التأثير اللى أقصده من خلال هذه الصورة:
بهيك انتهت هذه الجزئيه .......
سابعا: انهاء الشكل النهائى لكود code php استعداد للتطوير الثالث لعمل لوحة تحكم بالمقالات
أريد ان أبشركم بأننا بعد أن وصلنا لهذه المرحلة , فبهيك أصبحت ملفات الموقع مهيئة لان نستخدم الاوامر البرمجية ب php, وهذا ما سوف يتم فعله فى التطوير الثالث ان شاء الله
ترقبوا التطوير الثالث للدرس مفصل, وسوف نقوم فيه بشرح طريقة عمل لوحة تحكم مبسطة للتحكم بعرض المقالات
بالتوفيق
لتحميل التطوير الثانى اضغــــط هــــنا
أخوكم vista-design
https://fbcdn-sphotos-d-a.akamaihd.n...93518507_n.png
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©
