الجزء الثالث من تصميم ستايل بتقنية css الحديثة , كما قلت ان تصميم ستايل بتقنية css هي طريقة لاخراج موقعك من " المواقع القديمة الطراز " ..الى موقع حديث الطراز كما ويوجد كتاب في المرفق للشرح بصيغة pdf لمن لاتظهر ... - انصح الجميع بالعودة الى الجزء الاول والثاني , لكي يستوعب الجزء الثالث بكل دقة . درسنا اليوم هو تكملة للستايل وتطاير الأطار ..مع بعض التعديلات الأخرى ان شاء الله الحين قم بفتح برنامج Microsoft Expression Web 2 او الدريم ويفر -- ونتوجهه الى code سنجد كود جاهز في البرنامج ريد الزيادة علية ونكتب هذا الوسم لاحظ الصور
طبعا كتبنا بين الوسم والوسم هذا الوسم ولاحظ ان البرنامج يساعدنا بشكل تلقائي في كتابة الكلمات , نكمل كتابة الكود
ثم نختار text/css
ونختمها بالقوس او الاشارة التالية <
الوسم سيضاف بشكل تلقائي بعد كتابة الاشارة > الحين الكود اصبح جاهز في البرنامج قلنا سلفا ان الكود في البرنامج مقسم الى قسمين [ الاول للاكواد ويوضع لاحقا في التصاريف css [ والجزء الثاني للاكلاسات ] ويكتب داخل الجسم body لاحظ اين سنكتب كود التصاريف
الحين نقوم بكتابة الاكواد [1] حق الكلاسات اولا [2] حق التصاريف css واتمنى مراجعة الجزء الاول لان شرح الخطوات الاولى فيه - احنا عندنا في مجلد الستايل 6 سته صور للأطار --- وفي هذا الجزء اعطينا المتغيرات التالية المتغير a يعني الصور 1-2-3 الصور الثلاث العلوية للاطار المتغير b يعني الصور 1-2-3 الصور الثلاث السفلية للاطار المتغير d وهو حدود + خلفية الاطار لاحظ الكود جاهز بعد كتابة الأكواد كاملة المثال التالي ..
- ألحين اكيد فهمت الكود كامل ... لاني شرحت الكود في الجزء الاول الوسم في الكلاسات الى هولاحظ الdiv تكون تحت الوسم وليس بجانبة كما في الوسوم الاخرى .. هذة للحدود والخلفية للمتغير d هكذا - يصبح الكود جاهز حق الاطار .. العملية سهلة ولاتحتاج لحجهد كبير - الحين سنقوم بعمل اختبار للأطار لنعرف ان التطاير للفورم هوم والنافبار وغيرها بانة داخل حدود الستايل - ملاحظة في الجزء الاول للكود اي في التصاريف لانكتب الأ المتغير d1 فقط كما في الكود السابق - الطريقة نقوم بكتابةsampl11111111111هذا الكود البسيط الى بالون الاحمر اكتب اي شيء وليكن عينة samplll وتتم الكتابة بين وسم الحدود والخلفية بالشكل التالي :
لاحظ الان نتيجة الكود وكيف هو خارج حدود الأطار
كيف نقوم بمعالجة الأمر ... سهل جدا بسيطة نروح للمتغير d1 الى هو كود التصاريف للحدود والخلفية الكود1 d
الحين نروح الى المعاينة ونشوف
للمعلومة .. فقط
الأن نعمل جديد للبرنامج ونروح الموقع او المنتدى ونجيب " قالب النافبار " navbar من الستايل الى سويناه .. ونحطة في البرنامج ومن البرنامج نروح الى design ونظلل الكود كما في المثال لكي عرف التطاير للقالب
الحين بعد تظليل الكود وهو في design نرجع الى code
لاحظت المثال السابق ان الكود حق النافبار هذا سنقوم بقصة وادراجة داخل كلاسات كود الأطار الي عملناه سابقا - بعد قص كود النافبار نقوم بأدراجة داخل
ثم نقوم بنسخ كود الاطار مع النافبار ولكن فقط من بداية الكلاسات body الى اخر body يعني لنوضح بصورة اكثر
ونقوم بارجاعة الى كود النافبار
الأن انتهينا من قالب النافبار نروح نضيفة في المنتدى + ننسخ كود التصاريف css
ونهايتة هنا
في تصاريف الستايل css .. - الأن نعمل معاينة للمنتدى بعد اضافة كود التصاريف وتطاير النافبار والنتيجة....
نقوم بتعديل لون الخلفية كما اخترتها في الكود + تصفير خواص اس سي سي الاضافية
والحين باقي الحدود للاطار لكي يكون متناسق مع النافبار وكما قلت هذة الاضافة اختيارية وليست اجبارية
الحين نروح نعاين المنتدى ونشوف وش سار بالنافبار
100% هذا هو الاطار وتطاير النافبار وكذالك الحال مع بقية القوالب لناخذ صورة مع الهيدر
ممتاز الى الأن بى الحين الفروم هوم ...وباقي القوالب الاخرى نروح نحصل القالب حق الفورم هوم من المنتدى
كيف نعرف التطاير في الفروم هوم نضع اشاره الماوس بين الرقمين 6 هناا 5 ونضغط على الزر الي فوق كما في الصورة سيقوم البرنامج بتظليل الكود كيف نعرف التطاير في الفروم هوم نضع اشاره الماوس بين الرقمين 6 هناا 5 ونضغط على الزر الي فوق كما في الصورة سيقوم البرنامج بتظليل الكود
نقص كود الفورم هو المشار الية في المثال التالي ونضعة في كلاسات الاطار ثم نعيدة الى كود الفورم هوم مرة اخرى والحين الاحصائيات نفس السلافة نضغط عى الصورة لمعرفة تطاير الاحصائيات
وهذ البداية والنهاية لة
نضعه في كلاسات كود الاطار ثم نعيدة الى مكانة في كود قالب الاحصائيات في الفروم هوم وثم بعد ذالك نضعة في المنتدى بعد التطاير ... والنتيجة
وايضا الاحصائيات
- الى الأن ممتاز جدا فري نايس الحين نقوم بأدراج 4 مجلدات للاستايل بعد التعديل عليها بالون المناسب للستايل وهي كالمثال التالي : قمت بتلوين الصور بما يناسب الستايل
نروح الى css الرئيسية للستايل ونغير مسار بعض الصور الى اسم الستايل بدل كلمة images نضع اسم الستايل
وباقي الاكواد ايضا نقوم بتغييرها وهي تقريبا 4 . ايضا نتوجهه الى
ونقوم بتغيير بعض الاسماء الى اسم الستايل كما في المثال التالي
----------- والنتيجة للاستايل --------
---------------- بقي الخطوط المتوافقة --------------- من
ليست هناك تعليقات:
إرسال تعليق