اشترك في قناتنا ليصلك جديدنا

اشترك في قناتنا على اليوتيوب ليصلك جديدنا

كذلك الاعجاب بصفحتنا على الفيسبوك

طريقة توزيع الستايل بالفرنت بيج وتركيبه على المنتدى

طريقة توزيع الستايل بالفرنت بيج وتركيبه على المنتدى


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

الموضوع: طريقة توزيع الستايل بالفرنت بيج وتركيبه على المنتدى

  1. #1
    هكر مبتديء Array
    تاريخ التسجيل
    Feb 2010
    المشاركات
    39

    افتراضي طريقة توزيع الستايل بالفرنت بيج وتركيبه على المنتدى



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


    ماذا نحتاج لنبداء ؟؟


    1- برنامج الفرنت بيج



    2- برنامج appserv..


    حيث أن البرنامج يحتوي على قواعد بيانات MySQL + سيرفر Apache + مترجم php وذلك يختصر الوقت من تنزيل أكثر من برنامج ..ومن خلاله راح نقوم بتركيب منتدى على جهازك


    يمكنك تحميل البرنامج من الرابط التالي :-
    http://kent.dl.sourceforge.net/sourc...in32-2.4.0.exe


    وهنا شرح التركيب
    http://www.rawabetvb.com/vb/showthread.php?t=58828


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


    نبداء الدرس بعد تجهيز المتطلبات كامله


    شكل الستايل بعد التقطيع
    عدد الصور الي تم تقطيعها 12 صوره شاهد المثال
    الي مايعرف التقطيع يرجع للموضوع التالي
    http://www.rawabetvb.com/vb/showthread.php?t=39334





    نروح نفتح برنامج الفرنت بيج
    Microsoft Office FrontPage


    تابع معي الصور الشرح غالبيته داخل الصوره





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



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






    بعد اختيار خصائص الجداول راح يعطينا مربع للخصائص الصفحة





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





    عملية انشاء الجداول سهله ومايحتاج تفصيل فيها كثير
    انظر للنتيجه في الصوره التاليه



    نحتاج الان لاخفاء حدود الجداول وتوسيطها داخل الصفحه والطريقه هذي من خلال الضغط على خصائص الجدول





    بيظهر مربع خصائص الجدول كل الي عليك انك تعدل عليه مثل ماهو بالصوره التالية






    شدحيلك معي شوي الدرس هذا يبي شوي صبر لاهميته


    الان انتهينا من الجداول .. وهذي نتيجة العمل السابق
    :o




    اهااااا....... الان جينا لزبده الدرس وهو توزيع الصور بالفرنت بيج


    انا وضعت صوره للصور وهي مقطعه


    ملاحظه بسيطه :
    التوزيع بيكون ادراج صوره او وضع خلفيه


    وسبق وضحنا لكم هذا بالدرس الثاني اذا تذكرون الصوره التاليه



    يعني بيكون توزيع الصور حسب الرسم التوضيح هذا شاهد معي التوزيع





    طريقة ادارج الصوره يكون من خلال اداة الادارج الموضحه لكم هنا





    بيكون توزيعنا للصور حسب الشرح الي بالصوره التاليه ونسميها الصورة (توزيع المرحله الاولى)
    راح ندرج زوايا الهيدر والفوتر باستخدام ادراج صورة





    بيصبح لدي بهذا الشكل







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





    بيفتح لنا مربع خصائص الخليه


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





    في الاخير بيكون عندي النتيجه بهذا الشكل






    الان من الخليه الي في منتصف التوزيع قم بشد الاطراف يمين ويسار





    في الاخير بيكون الشكل التالي



    يبقى عندي توزيع الصور التجميليه وهي اربع صور وراح نوزعها على النحو التالي


    الهيدر بيكون صوره تجميليه يمين وصوره تجميليه يسار
    الفوتر بيكون صوره تجميليه يمين وصوره تجميليه يسار


    شاهد التوزيع للصور التجميليه بهذا الرسم التخطيطي الي كان بالدرس الثاني





    الصور التجميليه راح نضيفها هالمره باستخدام ادراج صوره





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


    طريقة التقسيم بيكون وضع المؤشر في وسط الهيدر وضغط الماوس يمين وختيار تقسيم الخلايا

    بيفتح مربع صغير نقوم تحويله الى ثلاثه



    بكذا قسمنا الخليه الى ثلاث خلايا في الهيدر الان نقوم بادراج الصور التجميليه يمين ويسار ونترك المنتصف للتمدد


    ونفس الي سويته على الهيدر تطبقه على الفوتر


    وبكذا يكون هذه نتيجة العمل





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


    اضغط على الزاويه اليمين للهيدر ضغطه وحده وراح تحدد معك



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



    طبق هذه العمليه للصوره التجميليه بالهيدر الي باليمين وبعدها انتقل للفوتر ونفس العمليه للجهة اليمن طبق عليها هذه الطريقه


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






    بعد الانتهاء من المحاذاة للصور بيكون فيه فراغات بين كل صور





    للتخلص منها عليك الضغط على كل صوره ضغطتين متتاليتين او اذا يدك مو خفيفه على الماوس اضغط على الصوره ضغطه وحده وختر خصائص الصوره


    بيفتح لنا مربع





    طبق هذه العمليه لجميع الصور الي سويت لها محاذه


    وبكذا يكون انتهيت من التوزيع بالفرنت بيج وهذي نتيجة التطبيق



    وش باقي نقول واصل شوي خل اعضائك يفرحون بتصميمك مابقى غير القليل


    الان ننقل التصميم للهيدر طبعاً بعد رفع ملف الصور لمجلد المنتدى


    قبل التركيب يتطلب منا التعديل على مسار في الفرنت بيج نتقل الى تعليمات برمجية



    بيفتح لنا الاكود البرمجيه للستايل



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



    الان انتقل ليقونة التصميم وضع مؤشر الماوس في الوسط وختر اداة المحاذة



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






    الان نقوم بالدخول لوحة التحكم الخاصه لمنتداك


    وتبع الصور



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






    الان هنا يتم وضع كود الفرنت بيج للجزئين الي قمنا بتوزيعهم


    في قالب header
    ابحث عن <!-- logo -->
    راح تحصلها في البدايه وفي المنتصف انسخ الكود الموجود بينها وقم بازالته ..



    نرجع للفرنت بيج وننسخ الجزء العلوي
    ونلصقه مكان الكود الي قمنا بمسحه بين <!-- logo -->



    ناخذ كود الجزء الثاني السفلي من الفرنت بيج



    ننزل تحت لـــ footer


    في أخر القالب نلصق الكود الي جزئنه بالفرنت بيج



    ننزل تحت ونسوي حفظ
    وروح وشوف المنتدى سوى تحديث
    فيه بعض المسات البسيطه الي لازم نعملها
    بتلاحظ وجود فراغات في اطراف الستايل



    طريقة الازالة سهله
    نروح للستايل وتعديل



    وضع خواص css المحدده بالمربع الاحمر الى الرقم صفر



    اعمل حفظ
    مبروك الان احنا كملنا درس تصميم ستايل



  2. #2
    هكر متميز Array الصورة الرمزية Next dream
    تاريخ التسجيل
    Jan 2010
    الدولة
    مقبرة الموت
    المشاركات
    582

    افتراضي رد: طريقة توزيع الستايل بالفرنت بيج وتركيبه على المنتدى

    زش هاذا الابداع



    يعطيك الف الف عافيه


المواضيع المتشابهه

  1. [مهم] طريقة تنسيق مواضيعك في المنتدى
    بواسطة ASDELY-ScOrPiOn في المنتدى منتدى الالعاب - تحميل العاب
    مشاركات: 29
    آخر مشاركة: 01-02-2013, 07:04 PM
  2. اسرع طريقة لفك الاختراق عن المنتدى
    بواسطة ASDELY-ScOrPiOn في المنتدى تطوير المواقع والمنتديات
    مشاركات: 23
    آخر مشاركة: 12-30-2011, 05:13 PM
  3. درس Css الأول , توزيع الهيدر والفوتر , وكيفية إدارجهم بالمنتدى ..~ صوت وصورة[فديو]
    بواسطة فوفو6 في المنتدى منتدى الإستايلات والتصاميم
    مشاركات: 5
    آخر مشاركة: 11-28-2011, 07:26 PM
  4. طريقة تقطيع الستايل الهيدر+ الاعمدة + الفوتر
    بواسطة فوفو6 في المنتدى منتدى الإستايلات والتصاميم
    مشاركات: 3
    آخر مشاركة: 04-04-2011, 05:11 AM
  5. ابغى طريقة البحث عن ثغرات في المنتدى..
    بواسطة ملكـ الذوق في المنتدى قسم المشاكل والإستفسارات
    مشاركات: 1
    آخر مشاركة: 10-29-2009, 06:07 PM

وجد الزوار هذه الصفحة بالبحث عن:

شرح فتح المواقع المحجوبه بيضاء

تحميل دورة تقطيع و توزيع الاستايل في الفرنت بيج دورة كامله

شرح طريقة توزيع الاستايل

طريقة تقسيم و توزيع استايلات المنتدى

دورة توزيع الاستايل بالجدول

المفضلات

أذونات المشاركة

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