النتائج 1 إلى 6 من 6

الموضوع: الدرس المنتظر(شرح+حصري) كيفية تلائم تصميم الصفحات + الستايل في جميع متصفحات الانترنت

  1. #1
    الصورة الرمزية Losha
    Title
    نبض جديــد
    تاريخ التسجيل
    04- 2006
    المشاركات
    82

    Smile الدرس المنتظر(شرح+حصري) كيفية تلائم تصميم الصفحات + الستايل في جميع متصفحات الانترنت



    ( شرح+حصري )
    توزيع الهيدر و الفوتير وكافة الصور التجمليه وتلافى كافة الأخطاء لأى متصفح
    +++============+++

    بعد بحث في جميع المواقع التطويرية
    لم أجد أي شرح أو طريقة تفيد لكي نتلافى أخطاء التصميم أو التركيب أو تقصيص الإستايل .
    ووكأن هذه الطريقة مفتاح النجاح لبعض المصممين
    لكي لا يظهروها للبعض ويتميزوا بها ..
    أو تتم بطريق المصادفة من المصمم بدون علمه بانها الطريقه الصحيحه


    الشكر موجه لكلاً من قدم لي المساعده في إخراج هذا الدرس بالشكل الذي ترونه وحتى يستفيد منه الجميع


    • قال تعالى : (وتعاونوا على البر والتقوى ولا تعاونوا على الإثم والعدوان)
    • (المائدة أية 2) صدق الله العظيم
    • وقول الرسول عليه أفضل الصلاة و السلام ((من كتم علماً.. الجمه الله يوم القيامة بلجامِ من نار ))

    +++============+++

    نبدأ بإذن الله

    توزيع الهيدر و الفوتير وكافة الصور التجمليه وتلافى كافة الأخطاء لأى متصفح

    +++============+++

    شرح كيفية تلائم الستايل في جميع متصفحات الانترنت

    يوجد طريقتان لتلافى خطأ التوزيع عبر المتصفح
    الطريقة الأولى التحديد بحجم الخليه ولأنها تحتاج بال طويل وشرح قوى وتركيز
    أتيت لكم بالشرح الأسهل لكى يتم التعرف عليه بكل سهولة من جميع الفئات
    -------
    قبل بدا الشرح عليك بتحميل إحدى المتصفحات الأتية

    أو



    بعد تحميل إحدى المتصفحات هذه
    عليك الان تتصفح هذا الإستايل
    http://www.losha.net/vb/index.php?styleid=1
    بفضل الله لن يحدث اى خلل معك والصورة ثابتة مكانها كما ينبغى

    الان نتوجه ونتصفح هذا الإستايل
    http://www.omman.net/vb/index.php
    سوف تعلم ما الفرق
    ولمن لم يرد العناء فى التحميل للمتصفحات وأكتفى بما عنده
    فلك الفرق
    أضغط على الصورة المصغرة لكى ترى الفرق

    الصورة الأولى للتصميم بدون أخطاء على اى متصفح

    الصورة الثانية وطبعاً التوزيع لى وكان قبل تعلمى اماكن الأخطاء


    الأن نجهز العدة ونأتى بترمس شاى
    نلاحظ كثيراً في معظم الإستايلات أنها تتشوه شكليا عندما نقوم بتغيير المتصفح من الأكسبلورر Internet Explorer الى متصفح أخر مثل fireFox أو Opera

    المشكله تكمن في إستخدام أزرار المحاذاه والتوسيط وغيرها في الفرونت بيج عند تصميم الستايل

    حل هذه المشكله هو عدم أستخدام هذه الأزرار نهائيا و تحريك الصور يدويا عن طريق الأكواد


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

    بعد إنشاء الخلايا الخاصه بالتصميم .. نضع الصوره وفي الشرح وضعنا العمود الأيسر بدون الضغط على المحاذاه لليمين


    الان نقوم بالضغط مره واحده على الصوره حتى نقوم بمعرفة أمتدادها
    ننتقل الى صفحة الأكوادا بتحديد إنقسام


    نضع على يسار إمتداد الصوره هذا الكود

    كود PHP:
    <div align="left"
    فيكون هكذا



    ثم نضع هذا الكود في أخر إمتداد الصوره
    كود PHP:
    </div
    فيكون هكذا


    بكل بساطه رابط الصوره الفعلي هكذا

    كود PHP:
    <img border="0" src="Losha.Net/fraree/Stayle/fraree_02.gif" width="226" height="157"
    قمنا بتعديله الى
    كود PHP:
    <div align="left"> <img border="0" src="Losha.Net/fraree/Stayle/fraree_02.gif" width="226" height="157"></div

    فكان الناتج هو انتقال الصوره الى الجزء الايمن وهو المطلوب



    نكرر هذه العلميه على كل الأجزاء المراد تحريكها في الخلايا

    وهذه هي اكواد المحاذاه للجوانب والتوسيط

    فتم التوسيط بهذا الكود بالإضافه قبل وبعد

    قبل كود الصورة
    فى التوسيط

    كود PHP:
    <div align="center"
    بعد كود الصورة
    كود PHP:
    </div
    بكده تحكمنا فى طريقة العرض

    يعنى الصورة التى تحتاج يسار نغير


    كود PHP:
    <div align="left"
    نهاية كود الصورة
    كود PHP:
    </div
    يمين

    كود PHP:
    <div align="right"
    نهاية كود الصورة
    كود PHP:
    </div
    وطبعا فى جميع الصور الهيدر والفوتير

    والصور التجميلية التى تختص فقط بالتقطير وليس الصور العلويه والسفلية


    وبكده يكون الإستايل والحمدلله فى الصدارة بلا كلام
    وصل اللهم وسلم على سيدنا محمد وعلى اله وصحبه وسلم

    في النهاية
    وأى سؤال بإذن الله أخوكم حاضر يله بالتوفيق والخير نلتقى

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

    وفي ختام هذا الشرح أدعوا الله لي ولكم ولوالدينا ولمن أحببناه في الدنيا
    بالهداية والصلاح في الدنيا وأن يجمعنا جميعاً في الفردوس الأعلى ....

    سبحانك اللهم وبحمدك , أشهد أن لا اله إلا أنت أستغفرك وأتوب إليك
    أخوكم فى الله

    Ali Losha


    لتحميل الدرس لمن لم تظهر عندة الصور

    Download

    لمن أردا نقل الدرس بالكامل

    Download





    ملحوظه
    أختلفت الطرق إلى الوصول للحل الصحيح
    ولاكن هذا أسهلهم
    هناك من يمر بموضوعك ويكون في أشد الحاجة إليه ويمنعه ضيق
    الوقت من الرد عليه ويكتفي بالدعاء:lulu125: لك في ظاهر الغيب

    ( فأجعل هذا هو هدفك الذي تطمح أليه )

    رابط الدرس الأصلى

  2. #2
    الصورة الرمزية الحسين
    Title
    نبض جديــد
    تاريخ التسجيل
    02- 2006
    المشاركات
    27
    شكرا لك أخي لوشا على الشرح الوافي

    في انتظار التطبيق بحول الله تعالى

  3. #3
    الصورة الرمزية عاشق السمراء
    Title
    "رجل عادي جدا"
    تاريخ التسجيل
    05- 2002
    المشاركات
    21,307
    مساااااااااااااء جميل!!

    يطيب لنا هذا الشرح منك !!

  4. #4
    الصورة الرمزية naifzzzz
    Title
    نبض جديــد
    تاريخ التسجيل
    01- 2005
    العمر
    47
    المشاركات
    15
    بارك الله فيك حبيبي لوشا

  5. #5
    الصورة الرمزية Almusafer
    Title
    نبض جديــد
    تاريخ التسجيل
    04- 2007
    العمر
    54
    المشاركات
    1
    السلام عليكم

    رغم اني ما أفهم كثير في هالشغلات المعقدة

    إلا أني أحببت اشكرك على هالجهد

  6. #6
    الصورة الرمزية خلود
    Title
    نبض متألـق
    تاريخ التسجيل
    04- 2003
    المشاركات
    3,905
    يزاك الله خير اخويه
    مشكور ويعطيك العافيه

معلومات الموضوع

الأعضاء الذين يشاهدون هذا الموضوع

الذين يشاهدون الموضوع الآن: 1 (0 من الأعضاء و 1 زائر)

ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •  

RSS RSS 2.0 XML MAP HTML