طھطµظ…ظٹظ… ط³طھط§ظٹظ„ ط¨طھظ‚ظ†ظٹط© css ط§ظ„ط¬ط²ط، ط§ظ„ط«ط§ظ†ظٹ 2[ ظ„ط§ظٹظپظˆطھظƒظ… ]
بسم الله الذي لاحول ولاقوه لنا الابه , سبحان الله من قالها
متيقن بها , فهي نور للقلب الذي يبحث عن الراحة والطمئنينة .
دَعِ الأَيّـــامَ تَـفـعَلُ مــا تَـشـاءُ -- وَطِـب نَـفساً إِذا حَـكَمَ القَضاءُ
[ الجزء الثاني ] من تصميم ستايل style بتقنية css
ملاحظة :: لمن لم تظهر عنده الصور في المستقبل يوجد كتاب بالمرفق بصيغة pdf
للعودة الى الجزء الاول فضلا .. ارعص هون
او توجهه الى نفس القسم وابحث عن الجزء الاول مع احترامي لكم .
( نكمل بمشيئة الله وقدرتة )
الحين احنا قمنا بكتابة اكواد الهيدر header والفوتر وكل يء تمام التمام
نروح لمعاينة نضغط على split في نفس البرنامج ونشوف ايش سوينا
شوف المثال 100% شغلنا صح
الحين سنقوم بعمل الروابط للستايل style الى هم التسجيل - والتحكم - والرئيسية للموقع .
تيب اول شيء الاكواد هذ سوف نحتاجها ... لاعطاء الروابط امر قو الذهاب الى الصفحة المعينة ماعلينا .. همنا الان طريقة عمل روابط الستايل style
قبل ذالك هذ هي اكواد الاوامر لكل من التسجيل والتحكم والرئيسية
الرئيسية ---- هو index.php
التحكم --- هو usercp.php
التسجيل -- هو register.php
نتابع الان عمل الروابط ويلزمنا بعض الانتباه للدرس مفصل .
فهمتوا الصورة السابقة وش تقول
يعني لما عملنا الهيدر header هو الهيدر header كم صورة ؟؟؟ اخالك تقول 4 صح نعم 4 صور
تيب الحين انت تصميم الزرارات في اي صورة صممتهم طبعا رح تقول في الصورة 2 للهيدر الى هي على اليسار صح ولا ... اكيد صح ونص وثلاث ارباع ..
الحين نروح لكود codeنا الى عملناه للهيدر والفوتر في درس مفصلنا السابق
ونروح على اخر الكود code حق الصورة 2 للهيدر الى هي للمتغير h2 تذكرتوا ولسى شوفوا الصورة
خلينا الان من الرابط الاول اي الجزءالاول من الكود code كما وصفناه سابقا
ونروح الى كود code الكلاسات الى عملناها للهيدر والفوتر
شوف المثال لاحظ معي سنقوم بكتابة وسم جديد الروابط بين المتغير h2 الى يرمز للصورة الثانية للهيدر صورة اليسار الى صممنا عليها الزرارات botton
اول مانبدأ تبعا قلنا الكتابة للروابط بين الكود codeين السابق ذكرهما في الصور السابقة
نبدأ بكتابة قوس اصغر اكبر بالرياضيات وهو هكذ > وذالك بالضغط على shift+ حرف ز
ثم نكتب حرف a ثم مسافة بالمسطرة وبشكل تلقائي يعطينا البرنامج كلمات نختار class
الحين نبغى اسم للرابط الاول " متغير " وسوف اقوم بكتبة مثلا k
تابع معي ثم مسفة ونختار href
طبعا الروابط مثلا الرئيسية سميناه k1
وكذالك الحال مع بقية الروابط التحكم k2
التسجيل k3 وهكذا بامكانك وضع اكثر من رابط وعمل اكثر من زرار
الحين بعد اختيار الامر href سيقوم البرنامج بطرح خيار الى هو pick ULR
علشان نضع بة الامر الي هو index.php تم ذكر الاسماء سابقا
فنختارة سيظهر لنا مربع حوار بالشكل التالي
نضع الرابط ثم موافق بعد ذالك نضغط على مسافة من لوحة المفاتيح ثم نكتب title سيظهر لنا بشكل تلقائي طبعا الكلمة من البرنامج ونكتب بين قوسين بالعربي الرئيسية
ثم نختمها بالقوس اكبر اصغر وهذا بالضغط على shift + حرف ز ينتج الشكل >
وبشكل تلقائي يعطينات البرنامج باقي الوسم الى هو </a>
ترى العملية سهلة لاتحتاج الى ذكاء وفي كل مرة تطبق فيها سستعلم اكثر وتصبح محترف باذن الله
الحين نعمل مثل ماعملنا سابقا للرئيسية نعمل مثلها ايضا كود code للتحكم والتسجيل
وهكذا مع البقية لاتنسى تغيير المتغير في كل مرة من k1- k2 -k3
الحين نرجع للكود code الاول
ونكتب تحت كود code الصورة الثانية الي سنعمل لها ازرارات
هذا الوسم
position:relative
وبعد ذالك نختمة بالفاصلة المنقوطة
بالضغط على حرف ك
الحين نبدأ بالكتابة تكون الكتابة تحت كود code الصورة الثانية
طريقة كتابة الكود code
نكتب اول شيء طبعا تحت قوس الصورة 2 الى هي h2
نكتب حرف a ثم نقطة عادية ثم قوس وذالك بزر من لوحة المفاتيح بالضغط على shift +حرف ج
سيخرج لنا خيار تلقاتي نختار العرض للزر الى هو width ونكتب العرض مثلا 60 بكسل
وبعد ذالك نختمة بالفاصلة المنقوطه بالضغط على حرف ك
ثم مسافة وانتر
ونكتب الارتفاع height مثلا 25 بكسل او اقل حسب الاتفاع الي تبغاه انت ثم فاصلة منقوطة
ومسافة ثم انتر ثم نختار من الستة التلقائية position:relative ونختمها بالفاصلة المنقوطة
ثم تنحدد المحاذاه وذالك باختيار الكلمة مثلا topبعد اختيارها اوحسب المسافة يعني هذا الامر يعود لك انت , مثلا بعد اختيار الامر توب top سنكتب مثلا 130 تفحص الشكل وشوف وين بتروح الرابط وعدل علية من عندك
ثم بعد ذالك نختار المحاذاه مثلا right بكسل 170
واعمل معانية للصورة وذالك بالضغط على [ split ] الى هو خيار في البرامج تحت مع الخياران code و design
واعمل معانية لكل زر بالمحاذاه حتى تصل للمطلوب .
شوف المثال كيف عملناه .
اكمل العمل مع الرابط الثاني التحكم والثالث التسجيل بنفس الطريقة السابقة
ابدا بحرف a ثم المتغير k2 للتحكم وk3 للتسجيل وهكذا
الى ان تنتهي من جميع الروابط
الشكل النهائي لكود code الروابط الجزء الاول للكود code
هو
a.k1{
width:60px;
height:25px;
position:absolute;
top:128px;
right:170px;
}
a.k2{
width:60px;
height:25px;
position:absolute;
top:128px;
right:90px;
}
a.k3{
width:63px;
height:25px;
position:absolute;
top:128px;
right:10px;
}
انتهينا من عمل الهيدر header + الفوتر + روابط الهيدر header - الرئيسية - التسجيل - التحكم
الحين سنقوم بتظليل الاكواد لكي نضعها في الموقع
لاحظ الصورة التالية >> وكيف سنضع الاكواد في المنتدى forum ... انتبه
الكود code الاول في التصاريف css لاحظ الاكواد المظللة
وباقي الكود code الى هي الكلاسات ... في الهيدر header والفوتر
الحين نريد ان نحذف ونغير مسار الصور في الاكواد قبل ادراجها في المنتدى forum ظروري
نعمل مسح مسار الهيدر header والفوتر
تابع معي
يعني من بداية file:// الى ماقبل اسم مجلد الاستايل style الى سميناه في المثال yousef
سنقوم باستبدال الكود code كامل وذالك باتباع التالي
نضغط على استبدال --- ثم استبدال الجميع [ الكل ]
- سيقوم البرنامج باستبدال الاكواد كاملة وتغييرها عند خيار استبدال الكل replace all
سيتم حذف جميع الاكواد على المسار الانف ذكرة في الصور السابقة.
الان نريد عمل ستايل style جديد ووضع الاكواد داخلة ..
الحين نتوجهه الى ... الموقع اما من السيرفر SERVER الشخصي او موقع على النت للتجارب
نروح المتصفح ونكتب localhost/vb لنستدعي الموقع الشخصي طبعا بعد فتح البرنامج للسيرفر SERVER .
ندخل لوحة التحكم
وبعد ذالك نختار التالي
ثم نعمل ستايل style جديد
وذالك باتباع التالي
نقوم بعمل ستايل style جديد ونختار الخيارات التالية
وبعدها نختار من الستايل style الى عملناه جديد القوالب الشائعة
هاهو صندوق الهيدر header يوجد بة كود code اصلي للموقع نقوم بحذف الكود code ونخلي اخر 3 اسطر
نروح برنامج الاكسبرشن وننسخ الاكواد هذة
ثم نضغط حفظ
------------- كود code الفوتر ---
[][][] ---- وكذالك نعمل للفوتر نفس الطريقة السابقة [الاكسبرشن ثم نقوم بادراج كود code الفوتر من برنامج الاكسبرشن الى الموقع بدون حذف اي شيء للكود code
نلصقة في اخر الفوتر بدون حذف اي شيء .
الان من الستايل style الي عملناه نختار هذا الخيار
ثم ننزل تحت في الاخر نلقى خيار التصاريف الصندوق الاخير نضع الكود code هذا داخلة
وثم حفظ نروح الحين نشوف الموقع
والنتجة
لاحظ خفة التصفح وسرعتة
الحين نروح الى هذا الموقع ونفحص الستايل style
ملاحظة سنقوم بفحص الستايل style في كل مرة يعني بعد ما نصمم الاطار يجب فحص الستايل style مرة اخرى
وحتى بعد ماننتهي من التصميم كامل نفحص الستايل style مرة ثالثة لضمان جودة الاستايل style
هذا هو الموقع
http://validator.w3.org/
وها نحن
شوف الصورة
تصميم لاغبار علية 100%
مع العلم اني قمت بفحص الستايل style كامل في هذة الصور يعني مع الاطار والترتيبات الاخرى
حقا ان تقنية css لامثيل لها الى الأن
شكرا لكم , دعواتكم ياطيبين ,
لاتنسونا بدعاؤكم المقبول باذن الله لي ولكم او كما قال الرسول صلى الله علية وسلم
الحديث
عَنْ أَبِي الدَّرْدَاءَ رَضِيَ اللَّهُ عَنْهُ، أَنَّهُ سَمِعَ رَسُولَ اللَّهِ صَلَّى اللَّهُ عَلَيْهِ وَسَلَّمَ يَقُولُ: "مَنْ دَعَا لِأَخِيهِ بِظَهْرِ الْغَيْبِ قَالَ الْمَلَكُ الْمُوَكَّلُ بِهِ: آمِينَ وَلَكَ بِمِثْلٍ".أخرجه مسلم . وأخرجه أيضًا : أبو داود": (إِذَا دَعَا الرَّجُلُ لِأَخِيهِ): أَيْ الْمُؤْمِن (بِظَهْرِ الْغَيْبِ) : أَيْ فِي غَيْبَة الْمَدْعُوّ لَهُ عَنْهُ وَإِنْ كَانَ حَاضِرًا مَعَهُ بِأَنْ دَعَا لَهُ بِقَلْبِهِ حِينَئِذٍ أَوْ بِلِسَانِهِ وَلَمْ يَسْمَعْهُ (قَالَتْ الْمَلَائِكَة آمِينَ): أَيْ اِسْتَجِبْ لَهُ يَا رَبّ دُعَاءَهُ لِأَخِيهِ. فَقَوْلُهُ (وَلَك): اِسْتَجَابَ اللَّه دُعَاءَك فِي حَقّ أَخِيك وَلَك (بِمِثْلٍ) : أَعْطَى اللَّه لَك بِمِثْلِ مَا سَأَلْت لِأَخِيك. قَالَ الطِّيبِيُّ: وَكَانَ بَعْضُ السَّلَف إِذَا أَرَادَ أَنْ يَدْعُوَ لِنَفْسِهِ يَدْعُو لِأَخِيهِ الْمُسْلِم بِتِلْكَ الدَّعْوَة لِيَدْعُوَ لَهُ الْمَلَكُ بِمِثْلِهَا فَيَكُون أَعْوَن لِلِاسْتِجَابَةِ.
.................
ابوذوابة
انتظرونا في الجزء الثالث
1- يوجد كتاب لمن لاتظهر عنده الصور :: بالمرفقات
2- يوجد ملجد به صور الشرح طريقة بالمرفقات
لكم مني كل الود والاحترام
الملفات المرفقة [TR]
book3-style-css.zip (356.8 كيلوبايت, عدد مرات المشاهدة 1950 مرة) [/TR]
[TR]
[TR]
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©
رد مع اقتباس
