تصميم ستايل بتقنية css الجزء الثاني

http://upload.traidnt.net/upfiles/GOI01744.gif

بسم الله الذي لاحول ولاقوه لنا الابه , سبحان الله من قالها
متيقن بها , فهي نور للقلب الذي يبحث عن الراحة والطمئنينة .

http://upload.traidnt.net/upfiles/n1F79531.gif

دَعِ الأَيّـــامَ تَـفـعَلُ مــا تَـشـاءُ -- وَطِـب نَـفساً إِذا حَـكَمَ القَضاءُ

[ الجزء الثاني ] من تصميم ستايل بتقنية css

ملاحظة :: لمن لم تظهر عنده الصور في المستقبل يوجد كتاب بالمرفق بصيغة pdf


للعودة الى الجزء الاول فضلا .. ارعص هون

او توجهه الى نفس القسم وابحث عن الجزء الاول مع احترامي لكم .

( نكمل بمشيئة الله وقدرتة )

الحين احنا قمنا بكتابة اكواد الهيدر والفوتر وكل يء تمام التمام

نروح لمعاينة نضغط على split في نفس البرنامج ونشوف ايش سوينا

شوف المثال 100% شغلنا صح


http://upload.traidnt.net/upfiles/F1Z78425.gif



الحين سنقوم بعمل الروابط للستايل الى هم التسجيل - والتحكم - والرئيسية للموقع .

تيب اول شيء الاكواد هذ سوف نحتاجها ... لاعطاء الروابط امر قو الذهاب الى الصفحة المعينة ماعلينا .. همنا الان طريقة عمل روابط الستايل

قبل ذالك هذ هي اكواد الاوامر لكل من التسجيل والتحكم والرئيسية

الرئيسية ---- هو index.php
التحكم --- هو usercp.php
التسجيل -- هو register.php


نتابع الان عمل الروابط ويلزمنا بعض الانتباه للدرس .

http://upload.traidnt.net/upfiles/3qg78465.gif

فهمتوا الصورة السابقة وش تقول

يعني لما عملنا الهيدر هو الهيدر كم صورة ؟؟؟ اخالك تقول 4 صح نعم 4 صور
تيب الحين انت تصميم الزرارات في اي صورة صممتهم طبعا رح تقول في الصورة 2 للهيدر الى هي على اليسار صح ولا ... اكيد صح ونص وثلاث ارباع ..

الحين نروح لكودنا الى عملناه للهيدر والفوتر في درسنا السابق
ونروح على اخر الكود حق الصورة 2 للهيدر الى هي للمتغير h2 تذكرتوا ولسى شوفوا الصورة


http://upload.traidnt.net/upfiles/3qg78465.gif

خلينا الان من الرابط الاول اي الجزءالاول من الكود كما وصفناه سابقا

ونروح الى كود الكلاسات الى عملناها للهيدر والفوتر
شوف المثال لاحظ معي سنقوم بكتابة وسم جديد الروابط بين المتغير h2 الى يرمز للصورة الثانية للهيدر صورة اليسار الى صممنا عليها الزرارات botton
http://upload.traidnt.net/upfiles/Opl78511.gif




اول مانبدأ تبعا قلنا الكتابة للروابط بين الكودين السابق ذكرهما في الصور السابقة
نبدأ بكتابة قوس اصغر اكبر بالرياضيات وهو هكذ > وذالك بالضغط على shift+ حرف ز
ثم نكتب حرف a ثم مسافة بالمسطرة وبشكل تلقائي يعطينا البرنامج كلمات نختار class

http://upload.traidnt.net/upfiles/Hkg78551.gif


الحين نبغى اسم للرابط الاول " متغير " وسوف اقوم بكتبة مثلا k
تابع معي ثم مسفة ونختار href
http://upload.traidnt.net/upfiles/7FC78572.gif




طبعا الروابط مثلا الرئيسية سميناه k1
وكذالك الحال مع بقية الروابط التحكم k2
التسجيل k3 وهكذا بامكانك وضع اكثر من رابط وعمل اكثر من زرار

الحين بعد اختيار الامر href سيقوم البرنامج بطرح خيار الى هو pick ULR
علشان نضع بة الامر الي هو index.php تم ذكر الاسماء سابقا
فنختارة سيظهر لنا مربع حوار بالشكل التالي



http://upload.traidnt.net/upfiles/pu578871.gif
نضع الرابط ثم موافق بعد ذالك نضغط على مسافة من لوحة المفاتيح ثم نكتب title سيظهر لنا بشكل تلقائي طبعا الكلمة من البرنامج ونكتب بين قوسين بالعربي الرئيسية




http://upload.traidnt.net/upfiles/Wf778900.gif
ثم نختمها بالقوس اكبر اصغر وهذا بالضغط على shift + حرف ز ينتج الشكل >
وبشكل تلقائي يعطينات البرنامج باقي الوسم الى هو </a>


http://upload.traidnt.net/upfiles/54z78927.gif
ترى العملية سهلة لاتحتاج الى ذكاء وفي كل مرة تطبق فيها سستعلم اكثر وتصبح محترف باذن الله
الحين نعمل مثل ماعملنا سابقا للرئيسية نعمل مثلها ايضا كود للتحكم والتسجيل




http://upload.traidnt.net/upfiles/WVP78957.gif
وهكذا مع البقية لاتنسى تغيير المتغير في كل مرة من k1- k2 -k3

الحين نرجع للكود الاول
ونكتب تحت كود الصورة الثانية الي سنعمل لها ازرارات
هذا الوسم
position:relative
وبعد ذالك نختمة بالفاصلة المنقوطة
بالضغط على حرف ك

http://upload.traidnt.net/upfiles/YGc78613.gif


الحين نبدأ بالكتابة تكون الكتابة تحت كود الصورة الثانية

طريقة كتابة الكود

http://upload.traidnt.net/upfiles/6uY78641.gif

نكتب اول شيء طبعا تحت قوس الصورة 2 الى هي h2

نكتب حرف a ثم نقطة عادية ثم قوس وذالك بزر من لوحة المفاتيح بالضغط على shift +حرف ج
سيخرج لنا خيار تلقاتي نختار العرض للزر الى هو width ونكتب العرض مثلا 60 بكسل
وبعد ذالك نختمة بالفاصلة المنقوطه بالضغط على حرف ك
ثم مسافة وانتر
ونكتب الارتفاع height مثلا 25 بكسل او اقل حسب الاتفاع الي تبغاه انت ثم فاصلة منقوطة
ومسافة ثم انتر ثم نختار من الستة التلقائية position:relative ونختمها بالفاصلة المنقوطة

ثم تنحدد المحاذاه وذالك باختيار الكلمة مثلا topبعد اختيارها اوحسب المسافة يعني هذا الامر يعود لك انت , مثلا بعد اختيار الامر توب top سنكتب مثلا 130 تفحص الشكل وشوف وين بتروح الرابط وعدل علية من عندك
ثم بعد ذالك نختار المحاذاه مثلا right بكسل 170
واعمل معانية للصورة وذالك بالضغط على [ split ] الى هو خيار في البرامج تحت مع الخياران code و design

واعمل معانية لكل زر بالمحاذاه حتى تصل للمطلوب .

شوف المثال كيف عملناه .

http://upload.traidnt.net/upfiles/Bvu78665.gif


اكمل العمل مع الرابط الثاني التحكم والثالث التسجيل بنفس الطريقة السابقة
ابدا بحرف a ثم المتغير k2 للتحكم وk3 للتسجيل وهكذا

الى ان تنتهي من جميع الروابط

الشكل النهائي لكود الروابط الجزء الاول للكود
هو

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;
}




انتهينا من عمل الهيدر + الفوتر + روابط الهيدر - الرئيسية - التسجيل - التحكم


الحين سنقوم بتظليل الاكواد لكي نضعها في الموقع


لاحظ الصورة التالية >> وكيف سنضع الاكواد في المنتدى ... انتبه


الكود الاول في التصاريف css لاحظ الاكواد المظللة




http://upload.traidnt.net/upfiles/Y9878714.gif



http://upload.traidnt.net/upfiles/1oE78734.gif



وباقي الكود الى هي الكلاسات ... في الهيدر والفوتر



http://upload.traidnt.net/upfiles/4wK78754.gif




الحين نريد ان نحذف ونغير مسار الصور في الاكواد قبل ادراجها في المنتدى ظروري
نعمل مسح مسار الهيدر والفوتر



تابع معي



http://upload.traidnt.net/upfiles/ZkJ78778.gif




يعني من بداية file:// الى ماقبل اسم مجلد الاستايل الى سميناه في المثال yousef
سنقوم باستبدال الكود كامل وذالك باتباع التالي



http://upload.traidnt.net/upfiles/Izu79022.gif


نضغط على استبدال --- ثم استبدال الجميع [ الكل ]



http://upload.traidnt.net/upfiles/5Qf79045.gif


- سيقوم البرنامج باستبدال الاكواد كاملة وتغييرها عند خيار استبدال الكل replace all


سيتم حذف جميع الاكواد على المسار الانف ذكرة في الصور السابقة.



الان نريد عمل ستايل جديد ووضع الاكواد داخلة ..


الحين نتوجهه الى ... الموقع اما من السيرفر الشخصي او موقع على النت للتجارب


نروح المتصفح ونكتب localhost/vb لنستدعي الموقع الشخصي طبعا بعد فتح البرنامج للسيرفر .



http://upload.traidnt.net/upfiles/avV79070.gif

ندخل لوحة التحكم



http://upload.traidnt.net/upfiles/ZGW79092.gif



وبعد ذالك نختار التالي



http://upload.traidnt.net/upfiles/BQI79114.gif


ثم نعمل ستايل جديد


وذالك باتباع التالي




http://upload.traidnt.net/upfiles/nx779136.gif


نقوم بعمل ستايل جديد ونختار الخيارات التالية



http://upload.traidnt.net/upfiles/n2g79157.gif


وبعدها نختار من الستايل الى عملناه جديد القوالب الشائعة




http://upload.traidnt.net/upfiles/vBQ79179.gif


هاهو صندوق الهيدر يوجد بة كود اصلي للموقع نقوم بحذف الكود ونخلي اخر 3 اسطر




http://upload.traidnt.net/upfiles/ZRe79207.gif


نروح برنامج الاكسبرشن وننسخ الاكواد هذة

http://upload.traidnt.net/upfiles/luq79229.gif

ثم نضغط حفظ


------------- كود الفوتر ---



[][][] ---- وكذالك نعمل للفوتر نفس الطريقة السابقة [الاكسبرشن ثم نقوم بادراج كود الفوتر من برنامج الاكسبرشن الى الموقع بدون حذف اي شيء للكود



http://upload.traidnt.net/upfiles/JU279252.gif


نلصقة في اخر الفوتر بدون حذف اي شيء .



http://upload.traidnt.net/upfiles/VrM79277.gif

الان من الستايل الي عملناه نختار هذا الخيار



http://upload.traidnt.net/upfiles/tqu79327.gif

ثم ننزل تحت في الاخر نلقى خيار التصاريف الصندوق الاخير نضع الكود هذا داخلة
http://upload.traidnt.net/upfiles/BLE78861.gif






وثم حفظ نروح الحين نشوف الموقع
والنتجة


http://upload.traidnt.net/upfiles/XgQ78883.gif




لاحظ خفة التصفح وسرعتة


الحين نروح الى هذا الموقع ونفحص الستايل


ملاحظة سنقوم بفحص الستايل في كل مرة يعني بعد ما نصمم الاطار يجب فحص الستايل مرة اخرى
وحتى بعد ماننتهي من التصميم كامل نفحص الستايل مرة ثالثة لضمان جودة الاستايل


هذا هو الموقع
http://validator.w3.org/





وها نحن


شوف الصورة
http://upload.traidnt.net/upfiles/tDA78955.gif




تصميم لاغبار علية 100%


مع العلم اني قمت بفحص الستايل كامل في هذة الصور يعني مع الاطار والترتيبات الاخرى


حقا ان تقنية css لامثيل لها الى الأن







شكرا لكم , دعواتكم ياطيبين ,


لاتنسونا بدعاؤكم المقبول باذن الله لي ولكم او كما قال الرسول صلى الله علية وسلم
الحديث
عَنْ أَبِي الدَّرْدَاءَ رَضِيَ اللَّهُ عَنْهُ، أَنَّهُ سَمِعَ رَسُولَ اللَّهِ صَلَّى اللَّهُ عَلَيْهِ وَسَلَّمَ يَقُولُ: "مَنْ دَعَا لِأَخِيهِ بِظَهْرِ الْغَيْبِ قَالَ الْمَلَكُ الْمُوَكَّلُ بِهِ: آمِينَ وَلَكَ بِمِثْلٍ".أخرجه مسلم . وأخرجه أيضًا : أبو داود": (إِذَا دَعَا الرَّجُلُ لِأَخِيهِ): أَيْ الْمُؤْمِن (بِظَهْرِ الْغَيْبِ) : أَيْ فِي غَيْبَة الْمَدْعُوّ لَهُ عَنْهُ وَإِنْ كَانَ حَاضِرًا مَعَهُ بِأَنْ دَعَا لَهُ بِقَلْبِهِ حِينَئِذٍ أَوْ بِلِسَانِهِ وَلَمْ يَسْمَعْهُ (قَالَتْ الْمَلَائِكَة آمِينَ): أَيْ اِسْتَجِبْ لَهُ يَا رَبّ دُعَاءَهُ لِأَخِيهِ. فَقَوْلُهُ (وَلَك): اِسْتَجَابَ اللَّه دُعَاءَك فِي حَقّ أَخِيك وَلَك (بِمِثْلٍ) : أَعْطَى اللَّه لَك بِمِثْلِ مَا سَأَلْت لِأَخِيك. قَالَ الطِّيبِيُّ: وَكَانَ بَعْضُ السَّلَف إِذَا أَرَادَ أَنْ يَدْعُوَ لِنَفْسِهِ يَدْعُو لِأَخِيهِ الْمُسْلِم بِتِلْكَ الدَّعْوَة لِيَدْعُوَ لَهُ الْمَلَكُ بِمِثْلِهَا فَيَكُون أَعْوَن لِلِاسْتِجَابَةِ.
.................
ابوذوابة



انتظرونا في الجزء الثالث
1- يوجد كتاب لمن لاتظهر عنده الصور :: بالمرفقات
2- يوجد ملجد به صور الشرح بالمرفقات

لكم مني كل الود والاحترام

http://upload.traidnt.net/upfiles/UzP79449.gif

السلام عليكم ورحمة الله وبركاته