التميز خلال 24 ساعة

 العضو الأكثر نشاطاً هذا اليوم   الموضوع النشط هذا اليوم   المشرف المميز لهذا اليوم 
قريبا وجبة خفيفة صحية وشهية تمنحك الطاقة والتغذية التي تحتاجها لمواصلة يومك.
بقلم : غير مسجل
قريبا


صفحة 1 من 2 12 الأخيرةالأخيرة
النتائج 1 إلى 12 من 14

الموضوع: دورة روابط لتصميم الإستايلات [ جميع الدروس rawabet]

  1. #1

    الصورة الرمزية الصـامد
    تاريخ التسجيل
    May 2006
    الدولة
    وطـ YeMeN ـني
    العمر
    38
    المشاركات
    19,274
    معدل تقييم المستوى
    1965

    دورة روابط لتصميم الإستايلات [ جميع الدروس rawabet]

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

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

    الدرس مطول ويمكن تواجهه صعوبه لو ماتركز او تطمر نقاط ؟

    راح نتعلم كذا شغله بالتصميم

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

    بسم الله نبداء

    الدرس الاول [ طريقة تصميم ستايل من البداية ]
    نفتح برنامج الفتوشوب

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

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


    راح نتعلم شغله حلوه بالفتوشوب تساعدك كثير بترتيب تصميمك

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

    لحظ ان رسمة الملف هذي تجعل جميع عملك مرتب
    راح نحتاج لها بحافظه للعمود الاول وحافظه للعمود الثاني
    وكذالك للهيدر والفولدر

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

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

    انتهينا من انشاء الحافظات

    نطلق الان بالبداء بالعمود الاول

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

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


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

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

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

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

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

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

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

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

    نروح الان وننسخ الحافظه الي باسم العمود التالي

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

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

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

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

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

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

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

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

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

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

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



    منقول

    يتبعـــ

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

    أنا حلمي بس كلمة يظل عندي وطن
    لا حروب ولا خراب لا مصايب ولا محن
    خوذوا المناصب و المكاسب لكن خلولي الوطن

  2. #2

    الصورة الرمزية الصـامد
    تاريخ التسجيل
    May 2006
    الدولة
    وطـ YeMeN ـني
    العمر
    38
    المشاركات
    19,274
    معدل تقييم المستوى
    1965

    رد: دورة روابط لتصميم الإستايلات [ جميع الدروس rawabet]

    الدرس الثاني [ طريقة تقطيع الستايل الهيدر+ الاعمدة + الفوتر]

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

    نظره سريعه عن الستايل وكيف راح يكون تقطيع



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

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



    كيف راح تبداء التقطيع ؟؟

    الاجابه : راح نقوم بتقطيع الستايل الى ثلاث خانات

    1- الجزء العلوي من الستايل ( الهيدر )2- الجزء الاوسط من الستايل ( الاعمده )3- الجزء السفلي من الستايل (الفوتر )

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

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

    الهيدر : عدد الصور خمس
    زاويه يمين +زاويه يسار + صوره تجميله يمين + صور تجميليه يسار + تمدد

    الاعمده :
    عمود يمين + عمود يسار

    الفوتر:
    زاويه يمين +زاويه يسار + صوره تجميله يمين + صور تجميليه يسار + تمدد


    نحتاج لمعرفة ما الاداوات الي تساعدنا على التقطيع ...

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

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



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

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

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

    وتروح تسوي لصق من خلال نفس طريقة القص بس بدل حرف ( X ) نضغط ( V )

    وبكذا قدرنا نقطع الستايل

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

    يجب التركيز المقاسات لو تختلف باكسل واحد راح يخرب شغلك كله

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

    وهنا شكل الستايل بعد التقطيع
    عدد الصور الي تم تقطيعها 12 صوره شاهد المثال

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

    أنا حلمي بس كلمة يظل عندي وطن
    لا حروب ولا خراب لا مصايب ولا محن
    خوذوا المناصب و المكاسب لكن خلولي الوطن

  3. #3

    الصورة الرمزية الصـامد
    تاريخ التسجيل
    May 2006
    الدولة
    وطـ YeMeN ـني
    العمر
    38
    المشاركات
    19,274
    معدل تقييم المستوى
    1965

    رد: دورة روابط لتصميم الإستايلات [ جميع الدروس rawabet]

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

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


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


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


    2- برنامج appserv..


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


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




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


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


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


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


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


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


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


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


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


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



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


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


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


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


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


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


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


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


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



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


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



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


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


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


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


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


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


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


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


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


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


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


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




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


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


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


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


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


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


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



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


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


    في الاخير بيكون الشكل التالي
    نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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



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




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


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


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


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


    وبكذا يكون انتهيت من التوزيع بالفرنت بيج وهذي نتيجة التطبيق
    نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي


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


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


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


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


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


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


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


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



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


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


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


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


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


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


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


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


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


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


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


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


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


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

    أنا حلمي بس كلمة يظل عندي وطن
    لا حروب ولا خراب لا مصايب ولا محن
    خوذوا المناصب و المكاسب لكن خلولي الوطن

  4. #4

    الصورة الرمزية الصـامد
    تاريخ التسجيل
    May 2006
    الدولة
    وطـ YeMeN ـني
    العمر
    38
    المشاركات
    19,274
    معدل تقييم المستوى
    1965

    رد: دورة روابط لتصميم الإستايلات [ جميع الدروس rawabet]

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


    نبداء العمل


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


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


    نقوم بتصميم اطارات حسب ذوقك انا قمت بالعمل التالي

    الي يبي يحمل الستايل هذا هو مجاني من هنا
    http://www.rawabetvb.com/vb/showthread.php?t=89052


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


    قم بتقطيع الستايل باستخدام التول


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



    عمل تقطيع للاطار بشكل منتظم ومتساوي



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




    وعمل حفظ للعمل Save for Web


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


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




    بعد الحفظ راح يكون عندنا صفحة html ومجلد خاص بها images


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



    نفتح مجلد الصور وهذا هو اهم شي نحتاجه



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




    الان نبداء بعمل التطاير لجميع القوالب


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


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


    http://www.rawabetvb.com/vb/showthread.php?t=58837


    اعادة بسيطه للعمل


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



    1- برنامج الفرنت بيج
    نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي
    نروح نفتح برنامج الفرنت بيج
    Microsoft Office FrontPage



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




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



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



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



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




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



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



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




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



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



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



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



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



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




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




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




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



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



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



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



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



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



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



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



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



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



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


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


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



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


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


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


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


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


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

    أنا حلمي بس كلمة يظل عندي وطن
    لا حروب ولا خراب لا مصايب ولا محن
    خوذوا المناصب و المكاسب لكن خلولي الوطن

  5. #5

    الصورة الرمزية الصـامد
    تاريخ التسجيل
    May 2006
    الدولة
    وطـ YeMeN ـني
    العمر
    38
    المشاركات
    19,274
    معدل تقييم المستوى
    1965

    رد: دورة روابط لتصميم الإستايلات [ جميع الدروس rawabet]

    الدرس الخامس تطاير قالب
    FORUMHOME +
    FORUMDISPLAY

    اتمنا منك تكون عارف طريقة الشرح الرابع


    نبداء العمل

    تطاير القالب في الرئيسية يحتاج تعديل على ثلاث قوالب
    FORUMHOME
    forumhome_forumbit_level1_nopost
    forumhome_forumbit_level2_post


    افتح قالب FORUMHOME


    وبحث عن


    كود PHP:
    <!-- main -->
    <
    table class="tborder" cellpadding="$stylevar[cellpadding]cellspacing="$stylevar[cellspacing]border="0" width="100%" align="center">
    <
    thead>
        <if 
    condition="$show['guest']">
        <!-- 
    guest welcome message -->
        <
    tr>
            <
    td class="tcat" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><phrase 1="$vboptions[bbtitle]">$vbphrase[welcome_to_the_x]</phrase></td>
        </
    tr>
        <
    tr>
            <
    td class="alt1" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>">
                <
    phrase 1="faq.php?$session[sessionurl]2="register.php?$session[sessionurl]">$vbphrase[first_visit_message]</phrase>
            </
    td>
        </
    tr>
        <!-- / 
    guest welcome message -->
        </if>
        <
    tr align="center">
          <
    td class="thead">&nbsp;</td>
          <
    td class="thead" width="100%" align="$stylevar[left]">$vbphrase[forum]</td>
          <
    td class="thead" width="175">$vbphrase[last_post]</td>
          <
    td class="thead">$vbphrase[threads]</td>
          <
    td class="thead">$vbphrase[posts]</td>
          <if 
    condition="$vboptions['showmoderatorcolumn']">
          <
    td class="thead">$vbphrase[moderator]</td>
          </if>
        </
    tr>
    </
    thead>
    $forumbits
    <tbody>
        <
    tr>
            <
    td class="tfoot" align="center" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><div class="smallfont"><strong>
                <
    a href="forumdisplay.php?$session[sessionurl]do=markread">$vbphrase[mark_forums_read]</a>
                &
    nbsp; &nbsp;
                <
    a href="showgroups.php?$session[sessionurl]">$vbphrase[view_forum_leaders]</a>
            </
    strong></div></td>
        </
    tr>
    </
    tbody>
    </
    table>
    <!-- /
    main --> 



    استبدله بالتالي


    كود PHP:
    <!-- guest welcome message -->
    <if 
    condition="$show['guest']">
    <
    table class="tborder" cellpadding="$stylevar[cellpadding]cellspacing="$stylevar[cellspacing]border="0" width="100%" align="center">
    <
    thead>
    <
    tr>
    <
    td class="tcat" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>"><phrase 1="$vboptions[bbtitle]">$vbphrase[welcome_to_the_x]</phrase></td>
    </
    tr>
    <
    tr>
    <
    td class="alt1" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else />5</if>">
    <
    phrase 1="faq.php?$session[sessionurl]2="register.php?$session[sessionurl]">$vbphrase[first_visit_message]</phrase>
    </
    td>
    </
    tr>
    </
    thead>
    </
    table>
    </if>
    <!-- / 
    guest welcome message -->
    <!-- 
    main -->
    $forumbits
    <!-- /main --> 

    وحفظ القالب



    افتح قالب forumhome_forumbit_level1_nopost




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



    [RIGHT]

    كود PHP:
    <table class="tborder" cellpadding="$stylevar[cellpadding]cellspacing="$stylevar[cellspacing]border="0" width="100%" align="center"
    كود PHP:

    [RIGHT]<tbody>
    <
    tr>
    <
    td class="tcat" colspan="<if condition="$vboptions[showmoderatorcolumn]">6<else />5</if>">
    <
    a style="float:$stylevar[right]href="#top" onclick="return toggle_collapse('forumbit_$forumid')"><img id="collapseimg_forumbit_$forumidsrc="$stylevar[imgdir_button]/collapse_tcat{$collapseimg_forumid}.gif" alt="" border="0" /></a>
    <
    a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]">$forum[title]</a>
    <if 
    condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>
    <if 
    condition="$show['subforums']"><div class="smallfont"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></if>
    </
    td>
    </
    tr>
    </
    tbody>
    <if 
    condition="$childforumbits">
    <
    tbody id="collapseobj_forumbit_$forumidstyle="{$collapseobj_forumid}">
    <
    tr align="center">
    <
    td class="thead" width="35">&nbsp;</td>
    <
    td class="thead" align="$stylevar[left]">$vbphrase[forum]</td>
    <
    td class="thead" width="200">$vbphrase[last_post]</td>
    <
    td class="thead" width="65">$vbphrase[threads]</td>
    <
    td class="thead" width="65">$vbphrase[posts]</td>
    <if 
    condition="$vboptions['showmoderatorcolumn']">
    <
    td class="thead" width="120">$vbphrase[moderator]</td>
    </if>
    </
    tr>
    $childforumbits
    </tbody>
    </if>
    </
    table>
    [/
    RIGHT


    اعمل حفظ





    افتح قالب forumhome_forumbit_level2_post

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




    كود PHP:
    <tr align="center"
    كود PHP:

    [RIGHT]<td class="alt2" width="35"><img src="$stylevar[imgdir_statusicon]/forum_$forum[statusicon].gif" alt="" border="0" /></td>
    <
    td class="alt1Active" align="$stylevar[left]id="f$forum[forumid]">
    <
    div>
    <
    a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]"><strong>$forum[title]</strong></a>
    <if 
    condition="$show['browsers']"><span class="smallfont">(<phrase 1="$forum[browsers]">$vbphrase[x_viewing]</phrase>)</span></if>
    </
    div>
    <if 
    condition="$show['forumdescription']"><div class="smallfont">$forum[description]</div></if>
    <if 
    condition="$show['forumsubscription']"><div class="smallfont"><strong><a href="subscription.php?$session[sessionurl]do=removesubscription&amp;f=$forum[forumid]">$vbphrase[unsubscribe_from_this_forum]</a></strong></div></if>
    <if 
    condition="$show['subforums']"><div class="smallfont" style="margin-top:$stylevar[cellpadding]px"><strong>$vbphrase[subforums]</strong>: $forum[subforums]</div></if>
    </
    td>
    <
    td class="alt2" width="200" nowrap="nowrap">$forum[lastpostinfo]</td>
    <
    td class="alt1" width="65">$forum[threadcount]</td>
    <
    td class="alt2" width="65">$forum[replycount]</td>
    <if 
    condition="$vboptions['showmoderatorcolumn']">
    <
    td class="alt1" width="120"><div class="smallfont">$forum[moderators]&nbsp;</div></td>
    </if>
    </
    tr>
    $childforumbits
    [/RIGHT





    وعمل حفظ





    الان يهمني التركيز





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










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






    اتوقع كلنا عرفنا القصد من كود التطاير





    ابيك الان تفتح قالب forumhome_forumbit_level1_nopost





    ونسخ كل شي فيه وضعه وسط قالب التطاير





    وهنا توضيح بالصوره






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





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





    وعمل حفظ





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

    أنا حلمي بس كلمة يظل عندي وطن
    لا حروب ولا خراب لا مصايب ولا محن
    خوذوا المناصب و المكاسب لكن خلولي الوطن

  6. #6

    الصورة الرمزية الصـامد
    تاريخ التسجيل
    May 2006
    الدولة
    وطـ YeMeN ـني
    العمر
    38
    المشاركات
    19,274
    معدل تقييم المستوى
    1965

    رد: دورة روابط لتصميم الإستايلات [ جميع الدروس rawabet]

    يبقى علي ارجع لقالب FORUMHOME





    وابحث عن





    [RIGHT]
    كود PHP:
    <!-- what's going on box --> 
    كود PHP:

    [RIGHT]<table class="tborder" cellpadding="$stylevar[cellpadding]cellspacing="$stylevar[cellspacing]border="0" width="100%" align="center">
    <
    thead>
     <
    tr>
      <
    td class="tcat" colspan="2">$vbphrase[whats_going_on]</td>
     </
    tr>
    </
    thead>
    $template_hook[forumhome_wgo_pos1]
    <if 
    condition="$show['loggedinusers']">
    <!-- 
    logged-in users -->
    <
    tbody>
     <
    tr>
      <
    td class="thead" colspan="2">
       <
    a style="float:$stylevar[right]href="#top" onclick="return toggle_collapse('forumhome_activeusers')"><img id="collapseimg_forumhome_activeusers" src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_forumhome_activeusers].gif" alt="" border="0" /></a>
       <
    a href="online.php$session[sessionurl_q]">$vbphrase[currently_active_users]</a>: $totalonline (<phrase 1="$numberregistered2="$numberguest">$vbphrase[x_members_and_y_guests]</phrase>)
      </
    td>
     </
    tr>
    </
    tbody>
    <
    tbody id="collapseobj_forumhome_activeusers" style="$vbcollapse[collapseobj_forumhome_activeusers]">
     <
    tr>
      <
    td class="alt2"><a href="online.php$session[sessionurl_q]"><img src="$stylevar[imgdir_misc]/whos_online.gif" alt="$vbphrase[view_whos_online]border="0" /></a></td>
      <
    td class="alt1" width="100%">
       <
    div class="smallfont">
        <
    div style="white-space: nowrap"><phrase 1="$recordusers2="$recorddate3="$recordtime">$vbphrase[most_users_ever_online_was_x_y_at_z]</phrase></div>
        <
    div>$activeusers</div>
       </
    div>
      </
    td>
     </
    tr>
    </
    tbody>
    <!-- 
    end logged-in users -->
    </if>
    $template_hook[forumhome_wgo_pos2]
    <
    tbody>
     <
    tr>
      <
    td class="thead" colspan="2">
       <
    a style="float:$stylevar[right]href="#top" onclick="return toggle_collapse('forumhome_stats')"><img id="collapseimg_forumhome_stats" src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_forumhome_stats].gif" alt="" border="0" /></a>
       <
    phrase 1="$vboptions[bbtitle]">$vbphrase[x_statistics]</phrase>
      </
    td>
     </
    tr>
    </
    tbody>
    <
    tbody id="collapseobj_forumhome_stats" style="$vbcollapse[collapseobj_forumhome_stats]">
     <
    tr>
      <
    td class="alt2"><img src="$stylevar[imgdir_misc]/stats.gif" alt="<phrase 1="$vboptions[bbtitle]">$vbphrase[x_statistics]</phrase>" border="0" /></td>
      <
    td class="alt1" width="100%">
      <
    div class="smallfont">
       <
    div>
        
    $vbphrase[threads]: $totalthreads*
        
    $vbphrase[posts]: $totalposts*
        
    $vbphrase[members]: $numbermembers<if condition="$show['activemembers']">*
         <
    span title="<phrase 1="$vboptions[activememberdays]">$vbphrase[within_the_last_x_days]</phrase>">$vbphrase[active_members]: $activemembers</span>
        </if>
       </
    div>
       <
    div><phrase 1="member.php?$session[sessionurl]u=$newuserid2="$newusername">$vbphrase[welcome_to_our_newest_member_x]</phrase></div>
       
    $template_hook[forumhome_wgo_stats]
      </
    div>
      </
    td>
     </
    tr>
    </
    tbody>
    $template_hook[forumhome_wgo_pos3]
    <if 
    condition="$show['birthdays']">
    <!-- 
    today's birthdays -->
    <tbody>
     <tr>
      <td class="thead" colspan="2">
       <a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('
    forumhome_birthdays')"><img id="collapseimg_forumhome_birthdays" src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_forumhome_birthdays].gif" alt="" border="0" /></a>
       $vbphrase[todays_birthdays]
      </td>
     </tr>
    </tbody>
    <tbody id="collapseobj_forumhome_birthdays" style="$vbcollapse[collapseobj_forumhome_birthdays]">
     <tr>
      <td class="alt2"><a href="calendar.php?$session[sessionurl]do=getday&amp;day=$today&amp;sb=1"><img src="$stylevar[imgdir_misc]/birthday.gif" alt="$vbphrase[view_birthdays]" border="0" /></a></td>
      <td class="alt1" width="100%"><div class="smallfont">$birthdays</div></td>
     </tr>
    </tbody>
    <!-- end today'
    s birthdays -->
    </if>
    $template_hook[forumhome_wgo_pos4]
    <if 
    condition="$show['upcomingevents']">
    <
    tbody>
     <
    tr>
      <
    td class="thead" colspan="2">
       <
    a style="float:$stylevar[right]href="#top" onclick="return toggle_collapse('forumhome_events')"><img id="collapseimg_forumhome_events" src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[collapseimg_forumhome_events].gif" alt="" border="0" /></a>
       <if 
    condition="$show['todaysevents']">$vbphrase[todays_events]<else /><phrase 1="$vboptions[showevents]">$vbphrase[upcoming_events_for_the_next_x_days]</phrase></if>
      </
    td>
     </
    tr>
    </
    tbody>
    <
    tbody id="collapseobj_forumhome_events" style="$vbcollapse[collapseobj_forumhome_events]">
     <
    tr>
      <
    td class="alt2"><a href="calendar.php$session[sessionurl_q]"><img src="$stylevar[imgdir_misc]/calendar.gif" alt="$vbphrase[calendar]border="0" /></a></td>
      <
    td class="alt1" width="100%"><div class="smallfont">$upcomingevents</div></td>
     </
    tr>
    </
    tbody>
    </if>
    $template_hook[forumhome_wgo_pos5]
    </
    table>
    <
    br />
    <!-- 
    end what's going on box -->

    [/RIGHT][/RIGHT][/RIGHT] 






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





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





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






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






    رجعه لقالب FORUMHOME





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

    أنا حلمي بس كلمة يظل عندي وطن
    لا حروب ولا خراب لا مصايب ولا محن
    خوذوا المناصب و المكاسب لكن خلولي الوطن

  7. #7

    الصورة الرمزية الصـامد
    تاريخ التسجيل
    May 2006
    الدولة
    وطـ YeMeN ـني
    العمر
    38
    المشاركات
    19,274
    معدل تقييم المستوى
    1965

    رد: دورة روابط لتصميم الإستايلات [ جميع الدروس rawabet]

    درس جميل ومفيد في جعل تصميمك للستايل من الدرجه الاحترافيه abshb

    مثال على الدرس


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

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



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



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


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


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


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


    الان ركز شوي معي هنا الصعوبه


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


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


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


    بيكون لدينا الطبقات بالشكل التالي


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


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


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



    وبنفس الطريقه حاول تغير في الانحنائات للطبقه الاخيره


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


    وبنفس الطريقه للطبقه العلويه نقوم باختيار السهم الي بالكيبورد للاعلاء وسحبها لفوق


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


    حول الطبقات الى
    Rasterize Layer


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


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


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




    في النهائيه بيكون عندي هيدر جميل طبعاً راح اعطيكم جزاء من العمل


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





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





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

    أنا حلمي بس كلمة يظل عندي وطن
    لا حروب ولا خراب لا مصايب ولا محن
    خوذوا المناصب و المكاسب لكن خلولي الوطن

  8. #8

    الصورة الرمزية حنـان الكـون ~
    تاريخ التسجيل
    Dec 2007
    الدولة
    امريكا شيكا بيكا :)
    المشاركات
    8,674
    معدل تقييم المستوى
    471

    رد: دورة روابط لتصميم الإستايلات [ جميع الدروس rawabet]

    wooooooooooooooooooooooooow
    i'l be Right Back !
    نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي
    .
    .
    عادة العشاق تشتاق ... كيف لو خلي بلادي ؟
    نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي
    مسكنش روحي و الاعماق .. يا نظر عيني و زادي
    .
    .


  9. #9

    الصورة الرمزية نبع الوفاء
    تاريخ التسجيل
    Sep 2008
    الدولة
    بيضاني | غير !
    العمر
    34
    المشاركات
    2,795
    معدل تقييم المستوى
    339

    رد: دورة روابط لتصميم الإستايلات [ جميع الدروس rawabet]

    وآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآ آآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآ آآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآآ آآآآآآآآآآآآآآآو >> شحب صوتي


    الله يبزكـ ويردكـ ويبزكـ ويردكـ <<< وييييييييييينكـ من زمآآآآآآآآن يا زلمة <قلب سـوري هع

    يا حلووو وربي ما قدررر عقللي يستوعب ها العطآآآآآء اقل شي أقول جزآكـ الله الجنة ..نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي
    والعشاء علي ..في حدة بس لين تجي من الريآض .. او لين اجي الى عندكـ نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي

    يا خوي وش اقوووووووووووووووووووووووووووووووووووووووووووووووو ووووووووووووووووول >تخوني العبارات
    الموهيم ذي تبآهـ بسوية ..< وسوي لي توقيع مش في كل موضوع نتراشاكـ

  10. #10

    الصورة الرمزية نورالعين
    تاريخ التسجيل
    Jan 2009
    الدولة
    أحلامـــــــــــــــــــي
    المشاركات
    4,565
    معدل تقييم المستوى
    326

    رد: دورة روابط لتصميم الإستايلات [ جميع الدروس rawabet]

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

  11. #11

    الصورة الرمزية Hanaa
    تاريخ التسجيل
    Jun 2009
    الدولة
    ڜـمْـڛ 6ـُمـ»أَبـۈي♥«ـڕي
    المشاركات
    5,971
    معدل تقييم المستوى
    476

    رد: دورة روابط لتصميم الإستايلات [ جميع الدروس rawabet]

    اوووووووووووه صعبة ~ يبغى لهــآ شغل كثير ودقة ..
    بدري علي ..نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي
    يعطيك العاآآفية ..:: الصامــد ::..



    ~|[..نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي..]|~

    :

    .


    رمضــآآن مبــآرك ع آلجميع نقره لتكبير أو تصغير الصورة ونقرتين لعرض الصورة في صفحة مستقلة بحجمها الطبيعي ..


    .

    :


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

    .

    :

  12. #12
    الصورة الرمزية عمـروس
    تاريخ التسجيل
    Sep 2003
    الدولة
    Saudi Arabia - Jeddah
    المشاركات
    5,835
    معدل تقييم المستوى
    523

    رد: دورة روابط لتصميم الإستايلات [ جميع الدروس rawabet]

    جميل جداً..

    جزيل الشكر لك اخي الصـامد

    مش صعب بس اهم شي يتوفر التالي:
    * الرغبة
    * الوقت (أهم شي)
    * منتدى محلي على (localhost)
    * فوتوشوب
    * فورنت بيج
    توفر هذه الأشياء أهم حاجة.

    أكرر الشكر لك أخي الصـامد على جهودك المبذوله.. وأتمنى للجميع التوفيق
    لم تعد تغريني الدنيا بأكملها
    بزخرفها وبريقها،
    بقصورها وناطحات سحابها،
    الدنيا ذاتها التي لهث الكثيرون خلفها،
    فعمروها اكثر مما عمرتها أمم قبلها،
    متناسيين انها حطام،
    وأنها عند الله لا تساوي جناح بعوضة!
    لم يدركوا يوماً انها ظل زائل لا دوام لة،
    وان احدهم فيها كمسافر أستظل بشجرة ثم راح وتركها!


صفحة 1 من 2 12 الأخيرةالأخيرة

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

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

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

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

  1. الحروز .. بين الخرافة والدين
    بواسطة نشوان بن سعيد الحميري في المنتدى ملتقى حياتنا الدينية
    مشاركات: 10
    آخر مشاركة: 25-12-2010, 10:20 PM
  2. المركز اليمني لحقوق الإنسان يقيم دورة تدريبية حول إتفاقية القضاء على جميع أشكال التم
    بواسطة أخبار التغيير نت في المنتدى ملتقى الأخبار والمنقول
    مشاركات: 0
    آخر مشاركة: 24-03-2010, 08:00 AM
  3. جميع برامج تحويل شكل الويندوز هنا :: روابط مباشرة !!
    بواسطة وســــًٍأآأمـے في المنتدى ملتقى الرقميات
    مشاركات: 2
    آخر مشاركة: 28-09-2008, 09:33 AM
  4. سلسة الدروس في اساسيات الشبكات ( جميع الدروس ) ..
    بواسطة hope في المنتدى ملتقى الرقميات
    مشاركات: 12
    آخر مشاركة: 10-09-2006, 05:33 PM

المفضلات

المفضلات

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

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