سجل في المعهد لتفعيل روابط التحميل

للتسجيل اضغط على الزر التسجيل
ندعم منتديات vBulletin بتقنية Css3
A L 6 W E R
   [ 1 ]
26-01-2011, 12:14 AM
تابعني على facebook
تابعني على twitter
تابعني على google plus
تابعني على youtube
معهد المطوّر
1
تواصل معي مباشرة
الصورة الرمزية لـ AlM6weR
AlM6weR
متواجد
[ مؤسس معهد المطوّر ]

اسمي : فخري الحاتم - أبو محمد , من : الرياض , أهتم بـ البرمجة - تطوير المواقع .
عضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركة
تاريخ الإنضمام07-06-2010 عدد المشاركات7,943 تقييم المستوى17984 الدولةsaudi arabia
الإعجابات التي قدمها للأعضاء 290   تم شكره 760 مرة في 581 مشاركة
افتراضي دورة تصميم ستايل بتقنية css الجزء الثاني





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





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

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

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






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

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

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

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


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



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

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

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





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

ونروح الى كود الكلاسات الى عملناها للهيدر والفوتر
شوف المثال لاحظ معي سنقوم بكتابة وسم جديد الروابط بين المتغير h2 الى يرمز للصورة الثانية للهيدر صورة اليسار الى صممنا عليها الزرارات botton





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




الحين نبغى اسم للرابط الاول " متغير " وسوف اقوم بكتبة مثلا k
تابع معي ثم مسفة ونختار href





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

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





نضع الرابط ثم موافق بعد ذالك نضغط على مسافة من لوحة المفاتيح ثم نكتب title سيظهر لنا بشكل تلقائي طبعا الكلمة من البرنامج ونكتب بين قوسين بالعربي الرئيسية




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




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




وهكذا مع البقية لاتنسى تغيير المتغير في كل مرة من k1- k2 -k3

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




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

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




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

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

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

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

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




اكمل العمل مع الرابط الثاني التحكم والثالث التسجيل بنفس الطريقة السابقة
ابدا بحرف 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 لاحظ الاكواد المظللة










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







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



تابع معي







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






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






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


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



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


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


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





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






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






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


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







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






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







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







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




ثم نضغط حفظ



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



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






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





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





ثم ننزل تحت في الاخر نلقى خيار التصاريف الصندوق الاخير نضع الكود هذا داخلة




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






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


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


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


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





وها نحن


شوف الصورة





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


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


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

يتبع في موضوع آخر ..




كلمات البحث - معهد المطور

ارشفة, ستايل, كود, هاك, html, css, java, BBcode, seo, php, JavaScript, Product, Style




توقيعي



عَنْ جُوَيْرِيَةَ بنت الحارث، أم المؤمنين رضي الله عنها؛ أَنَّ النَّبِيَّ صلى الله عليه وسلم خَرَجَ مِنْ عِنْدِهَا بُكْرَةً، حِينَ صَلَّى الصُّبْحَ وَهِيَ فِي مَسْجِدِهَا، ثُمَّ رَجَعَ بَعْدَ أَنْ أَضْحَى، وَهِيَ جَالِسَةٌ، فَقَالَ:
((مَا زِلْتِ عَلَى الْحَالِ الَّتِي فَارَقْتُكِ عَلَيْهَا؟)) قَالَتْ: نَعَمْ، قَالَ النَّبِيُّ صلى الله عليه وسلم: ((لَقَدْ قُلْتُ بَعْدَكِ أَرْبَعَ كَلِمَاتٍ، ثَلَاثَ مَرَّاتٍ، لَوْ وُزِنَتْ بِمَا قُلْتِ مُنْذُ الْيَوْمِ لَوَزَنَتْهُنَّ:
سُبْحَانَ اللهِ وَبِحَمْدِهِ عَدَدَ خَلْقِهِ، وَرِضَا نَفْسِهِ وَزِنَةَ عَرْشِهِ، وَمِدَادَ كَلِمَاتِهِ)).



   [ 2 ]
26-01-2011, 01:06 AM
9
عضو معهد المطور
ندعم جميع منتديات
الجيل الثالث بتقنية CSS3
الشامخه
غير متواجد
[ مطوّر مشارك ]

اسمي : •»وَمآتَوْفٍيقيٍ اٍلآ بآللـہ«• , من : غَايةُ عُمرِى [ جَنةً ] فِيها أسِـير..| , أهتم بـ آلتصميمـ..وآلقرآءهـ..| .
عضو لدية أكثر من 1500 مشاركةعضو لدية أكثر من 1500 مشاركةعضو لدية أكثر من 1500 مشاركةعضو لدية أكثر من 1500 مشاركةعضو لدية أكثر من 1500 مشاركة
تاريخ الإنضمام08-06-2010 عدد المشاركات1,754 تقييم المستوى1953 الدولةsaudi arabia
  تم شكره 7 مرة في 7 مشاركة
افتراضي رد: دورة تصميم ستايل بتقنية css الجزء الثاني


[SIZE="3"][FONT="Arial"]
سلمتْ يمناك ابومحمد.,
هل من الممكن أن توفر برنامج Microsoft Expression Web 2 كاملاً..؟
لكَ جزيل الشكر على ماتقدمه.





   [ 3 ]
26-01-2011, 03:14 AM
تابعني على facebook
تابعني على twitter
تابعني على google plus
تابعني على youtube
معهد المطوّر
1
تواصل معي مباشرة
الصورة الرمزية لـ AlM6weR
AlM6weR
متواجد
[ مؤسس معهد المطوّر ]

اسمي : فخري الحاتم - أبو محمد , من : الرياض , أهتم بـ البرمجة - تطوير المواقع .
عضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركةعضو لدية أكثر من 6000 مشاركة
تاريخ الإنضمام07-06-2010 عدد المشاركات7,943 تقييم المستوى17984 الدولةsaudi arabia
الإعجابات التي قدمها للأعضاء 290   تم شكره 760 مرة في 581 مشاركة
افتراضي رد: دورة تصميم ستايل بتقنية css الجزء الثاني


اشكرك ع المرور الرائع
وفي انتظار تجربتك للدورة ،، مع تمنياتي لك بالتوفيق

وهذا البرنامج الي طلبتيه
http://www.alm6wer.com/vb/showthread.php?t=3044

موفقه ..




   [ 4 ]
12-06-2011, 02:45 PM
1921
الصورة الرمزية لـ قطوة شرازية
قطوة شرازية
غير متواجد
[ مطوّر مشارك ]

اسمي : أم عبدالله ,
تاريخ الإنضمام08-06-2011 عدد المشاركات157 تقييم المستوى0 الدولةkuwait
الإعجابات التي قدمها للأعضاء 25  
افتراضي رد: دورة تصميم ستايل بتقنية css الجزء الثاني


ربي يسسلم يدينك




   [ 5 ]
11-03-2013, 01:08 PM
5280
عضو معهد المطور
ندعم جميع منتديات
الجيل الثالث بتقنية CSS3
ملك الحصريات
غير متواجد
[ مطوّر مشارك ]

عضو لدية أكثر من 1500 مشاركةعضو لدية أكثر من 1500 مشاركةعضو لدية أكثر من 1500 مشاركةعضو لدية أكثر من 1500 مشاركةعضو لدية أكثر من 1500 مشاركة
تاريخ الإنضمام25-02-2013 عدد المشاركات1,543 تقييم المستوى1561 الدولةegypt
الإعجابات التي قدمها للأعضاء 193   تم شكره 3 مرة في 3 مشاركة
افتراضي رد: دورة تصميم ستايل بتقنية css الجزء الثاني


جــزآك الله خير على طرحك القيم و المفيد ..
والله يعطيك العافية ..ونفع بكـ
واثااابكـ جنة الفردوس بغير حساااب ولا سابقة عذاب
وجعله ربى فى ميزااان حسناااتك
امنياتي لك بدوام التألق والابداع
تحياتي لسموك





مواقع النشر (المفضلة)

الكلمات الدلالية (Tags)
الثاني, الجزء, css, بتقنية, تصميم, دورة, ستايل

أدوات الموضوع إبحث في الموضوع
إبحث في الموضوع:

البحث المتقدم


المواضيع المتشابهه للموضوع: دورة تصميم ستايل بتقنية css الجزء الثاني
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
[ شرح ] دورة تصميم ستايل بتقنية css الجزء الاول AlM6weR ستايلات vBulletin 3.8.x 9 25-04-2017 03:50 PM
[ شرح ] دورة تصميم ستايل بتقنية css الجزء الثالث AlM6weR ستايلات vBulletin 3.8.x 1 11-03-2013 01:05 PM
[ Style ] ستايل ترايدنت 2011 باللون الاسود بتقنية css - تصميم شبكة المطور AlM6weR ستايلات vBulletin 3.8.x 8 21-08-2011 07:45 PM
[ Style ] ستايل برتقالي إحترافي بتقنية Css - للنسخ 3.8 - ستايل ممتدد الشامخه ستايلات vBulletin 3.8.x 2 17-01-2011 01:57 PM
إعلان موعد بدأ دورة تصميم الوسائط.. جنونيات حالمه البرامج العامه والشروحات 12 06-09-2010 08:45 PM


الساعة الآن 04:44 PM

RSS RSS 2.0 XML Sitemap1 Sitemap2 HTML Tags اتصل بنا بيان الخصوصية

Powered by vBulletin@Version 3.8.7 .Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
المشاركات والمواضيع تعبر عن رأي كاتبها وليس بالضرورة رأي المطوّر
وجميع الحقوق محفوظة لاصحابها