السلام عليكم ورحمة الله وبركاته
راح نطلق بعمل دروس تعليم تصميم الستايل من الصفر حتى النهائية
الدرس مطول ويمكن تواجهه صعوبه لو ماتركز او تطمر نقاط ؟
راح نتعلم كذا شغله بالتصميم
في البدايه كل مانحتاج له هو برنامج الفتوشوب للتصميم
وبرنامج الفرنت بيج راح يكون له درس اخر
وبرنامج الفرنت بيج راح يكون له درس اخر
بسم الله نبداء
نفتح برنامج الفتوشوب
عمل جديد
ونقوم بتحديد المقاسات كم هو موضح بالصوره
ونقوم بتحديد المقاسات كم هو موضح بالصوره
راح نتعلم شغله حلوه بالفتوشوب تساعدك كثير بترتيب تصميمك
لحظ ان رسمة الملف هذي تجعل جميع عملك مرتب
راح نحتاج لها بحافظه للعمود الاول وحافظه للعمود الثاني
وكذالك للهيدر والفولدر
راح نحتاج لها بحافظه للعمود الاول وحافظه للعمود الثاني
وكذالك للهيدر والفولدر
انتهينا من انشاء الحافظات
نطلق الان بالبداء بالعمود الاول
الي مو عارف يضيف ليرة يعلمنا ونقوله
هنا طريقة الاضافة
الان نقوم برسم عمود بالجانب الايسر او الايمن بالاداة التاليه
قم باختيار اداة تدرج الون كما هو موضح بالصوره
هنا طريقة تدرج الون انت تتحكم بالشغله هذي
بعد كذا على التحديد قم بسح اداة التدرج
بعطي للعمود كذا لمسه عن طريق الشرح بالصوره التاليه
انتهينا الان من العمود
نروح الان وننسخ الحافظه الي باسم العمود التالي
بيصير عندي كبي للحافظه الاولى نقوم بتحريكها للجهة المقابل من خلال التحريك بالسهم
هنا شكل الحافظات بعد الانتهاء
نبداء ونضيف ليره مثل ماشرحنا في البدايه عن طريقة اضافة اليره
نرسم مستطيل من طرف العمود للطرف الاخر مثل ماهو موضح بالصوره
وهنا بعد التحسين
نفس الطريقه راح نطبقها على الفولدر
نرسم مستطيل ونضيف له الاضافات الي حابب ان تكون موجوده
نظره سريعه عن الستايل وكيف راح يكون تقطيع
قسمت الصوره لعدة الوان تختلف والي تتشابه بالون تكون مقاساتها وحدة
كيف راح تبداء التقطيع ؟؟
الاجابه : راح نقوم بتقطيع الستايل الى ثلاث خانات
1- الجزء العلوي من الستايل ( الهيدر )2- الجزء الاوسط من الستايل ( الاعمده )3- الجزء السفلي من الستايل (الفوتر )
شوف الصوره قسمتها حسب التوزيع الي ذكرنه
الهيدر : عدد الصور خمس
زاويه يمين +زاويه يسار + صوره تجميله يمين + صور تجميليه يسار + تمدد
الاعمده :
عمود يمين + عمود يسار
الفوتر:
زاويه يمين +زاويه يسار + صوره تجميله يمين + صور تجميليه يسار + تمدد
نحتاج لمعرفة ما الاداوات الي تساعدنا على التقطيع ...
فقط راح نستخدم اداة المربع ( التحديد ) ومقاسات القص ووضحتها لك بالصوره
طريقة القص تكون عن طريق استخدام لوحة المفاتيح الخاصه بجهازك
شوف الصوره
الان يبدو ان طريقة القص اصبحت واضحه ... عند القص تقوم باختيار فتح ملف جديد وبدون ماتغير اي مقاسات تعطيه اوكي
وتروح تسوي لصق من خلال نفس طريقة القص بس بدل حرف ( X ) نضغط ( V )
وبكذا قدرنا نقطع الستايل
يجب التركيز المقاسات لو تختلف باكسل واحد راح يخرب شغلك كله
وهنا شكل الستايل بعد التقطيع
عدد الصور الي تم تقطيعها 12 صوره شاهد المثال
الدرس يحتاج منا التركيز حتى مايروح تعبنا في فهم الدروس السابقه فهو الدرس الاهم للوصول للنتيجه وعرض تصميمك على اعضاء منتداك فصلنا الشرح تفصيل طويل حتى نقدر نظهر بنتيجه ونقلل الاسئله في هالموضوع
نروح نفتح برنامج الفرنت بيج
Microsoft Office FrontPage
تابع معي الصور الشرح غالبيته داخل الصوره
الان راح يكون لدينا صفحه بيضاء
نتقل بعدها للتصميم مثل ماهو موضح لك بالصوره التالية
الان نقوم بتحويل الصفحه من اليمين لليسار وذلك لاستخدمنا للغه العربية
بعد اختيار خصائص الجداول راح يعطينا مربع للخصائص الصفحة
نوجه الصفحه من اليمين الى اليسار
الان راح نقوم بأنشاء عدد من الجداول الي بيكون توزيع الصور عليها وعدد الجداول المطلوبه هي 9 جداول
عملية انشاء الجداول سهله ومايحتاج تفصيل فيها كثير
انظر للنتيجه في الصوره التاليه
نحتاج الان لاخفاء حدود الجداول وتوسيطها داخل الصفحه والطريقه هذي من خلال الضغط على خصائص الجدول
بيظهر مربع خصائص الجدول كل الي عليك انك تعدل عليه مثل ماهو بالصوره التالية
شدحيلك معي شوي الدرس هذا يبي شوي صبر لاهميته:)
الان انتهينا من الجداول .. وهذي نتيجة العمل السابق
اهااااا....... الان جينا لزبده الدرس وهو توزيع الصور بالفرنت بيج
انا وضعت صوره للصور وهي مقطعه
ملاحظه بسيطه :
التوزيع بيكون ادراج صوره او وضع خلفيه
وسبق وضحنا لكم هذا بالدرس الثاني اذا تذكرون الصوره التاليه:)
يعني بيكون توزيع الصور حسب الرسم التوضيح هذا شاهد معي التوزيع
طريقة ادارج الصوره يكون من خلال اداة الادارج الموضحه لكم هنا
بيكون توزيعنا للصور حسب الشرح الي بالصوره التاليه ونسميها الصورة (توزيع المرحله الاولى)
راح ندرج زوايا الهيدر والفوتر باستخدام ادراج صورة
بيصبح لدي بهذا الشكل
الان نجي لوضع الاعمده والتمدد الخاص بالهيدر والفوتر
وهذي الطريقه باستخدام خصائص الخليه
نضع الماوس داخل خلية التمدد الي موضحينا لكم في التوزيع الي باسم ( توزيع المرحله الاولى )
بيفتح لنا مربع خصائص الخليه
نقوم بادراج صورة التمدد للهيدر ونطبق الطريقه على تمدد الفوتر وعلى العمود الايمن والايسر
في الاخير بيكون عندي النتيجه بهذا الشكل
الان من الخليه الي في منتصف التوزيع قم بشد الاطراف يمين ويسار
في الاخير بيكون الشكل التالي
يبقى عندي توزيع الصور التجميليه وهي اربع صور وراح نوزعها على النحو التالي
الهيدر بيكون صوره تجميليه يمين وصوره تجميليه يسار
الفوتر بيكون صوره تجميليه يمين وصوره تجميليه يسار
شاهد التوزيع للصور التجميليه بهذا الرسم التخطيطي الي كان بالدرس الثاني
الصور التجميليه راح نضيفها هالمره باستخدام ادراج صوره
نقوم بتقسيم خلية التمدد للهيدر والفوتر الى ثلاث خلايا اضافيه قبل ادارج الصور التجميليه
طريقة التقسيم بيكون وضع المؤشر في وسط الهيدر وضغط الماوس يمين وختيار تقسيم الخلايا
بيفتح مربع صغير نقوم تحويله الى ثلاثه
بكذا قسمنا الخليه الى ثلاث خلايا في الهيدر الان نقوم بادراج الصور التجميليه يمين ويسار ونترك المنتصف للتمدد
ونفس الي سويته على الهيدر تطبقه على الفوتر
وبكذا يكون هذه نتيجة العمل
باقي علينا الان تعديل توجيه محاذاة الصور
وهذي طريقه سهله راح نستخدم فيها اداة المحاذاة
اضغط على الزاويه اليمين للهيدر ضغطه وحده وراح تحدد معك
قم بتوجيه المحاذه للجه اليمين باستخدام اداة المحاذه
طبق هذه العمليه للصوره التجميليه بالهيدر الي باليمين وبعدها انتقل للفوتر ونفس العمليه للجهة اليمن طبق عليها هذه الطريقه
يبقى عندي الجهة اليسار للهيدر والفوتر نطبق عليها الطريقة باستخدام اداة المحاذة لليسار
بعد الانتهاء من المحاذاة للصور بيكون فيه فراغات بين كل صور
للتخلص منها عليك الضغط على كل صوره ضغطتين متتاليتين او اذا يدك مو خفيفه على الماوس اضغط على الصوره ضغطه وحده وختر خصائص الصوره
بيفتح لنا مربع
طبق هذه العمليه لجميع الصور الي سويت لها محاذه
وبكذا يكون انتهيت من التوزيع بالفرنت بيج وهذي نتيجة التطبيق
وش باقي نقول واصل شوي خل اعضائك يفرحون بتصميمك مابقى غير القليل
الان ننقل التصميم للهيدر طبعاً بعد رفع ملف الصور لمجلد المنتدى
قبل التركيب يتطلب منا التعديل على مسار في الفرنت بيج نتقل الى تعليمات برمجية
بيفتح لنا الاكود البرمجيه للستايل
نحتاج لتعديل بسيط لمسار الصور كلها فيصبح لدينا بهذا الشكل
الان انتقل ليقونة التصميم وضع مؤشر الماوس في الوسط وختر اداة المحاذة
نتقل للتعليمات البرمجية
ونلاحظ هذا الشرح المهم لتقسيم الكود البرمجي لجزئين راح ننقل الجزء الاعلاء لنضعه داخل الهيدر بالمنتدى والجزء الاسفل للفوتر ركز في طريقة التقسيم هذه
الان نقوم بالدخول لوحة التحكم الخاصه لمنتداك
وتبع الصور
بعدها تفتح لنا صفحة التحكم بالستايلات
الان هنا يتم وضع كود الفرنت بيج للجزئين الي قمنا بتوزيعهم
في قالب header
ابحث عن
راح تحصلها في البدايه وفي المنتصف انسخ الكود الموجود بينها وقم بازالته ..
نرجع للفرنت بيج وننسخ الجزء العلوي
ونلصقه مكان الكود الي قمنا بمسحه بين
ناخذ كود الجزء الثاني السفلي من الفرنت بيج
ننزل تحت لـــ footer
في أخر القالب نلصق الكود الي جزئنه بالفرنت بيج
ننزل تحت ونسوي حفظ
وروح وشوف المنتدى سوى تحديث
فيه بعض المسات البسيطه الي لازم نعملها
بتلاحظ وجود فراغات في اطراف الستايل
طريقة الازالة سهله
نروح للستايل وتعديل
وضع خواص css المحدده بالمربع الاحمر الى الرقم صفر
نروح نفتح برنامج الفرنت بيج
Microsoft Office FrontPage
تابع معي الصور الشرح غالبيته داخل الصوره
الان راح يكون لدينا صفحه بيضاء
نتقل بعدها للتصميم مثل ماهو موضح لك بالصوره التالية
الان نقوم بتحويل الصفحه من اليمين لليسار وذلك لاستخدمنا للغه العربية
بعد اختيار خصائص الجداول راح يعطينا مربع للخصائص الصفحة
نوجه الصفحه من اليمين الى اليسار
الان راح نقوم بأنشاء عدد من الجداول الي بيكون توزيع الصور عليها وعدد الجداول المطلوبه هي 9 جداول
عملية انشاء الجداول سهله ومايحتاج تفصيل فيها كثير
انظر للنتيجه في الصوره التاليه
نحتاج الان لاخفاء حدود الجداول وتوسيطها داخل الصفحه والطريقه هذي من خلال الضغط على خصائص الجدول
بيظهر مربع خصائص الجدول كل الي عليك انك تعدل عليه مثل ماهو بالصوره التالية
شدحيلك معي شوي الدرس هذا يبي شوي صبر لاهميته:)
الان انتهينا من الجداول .. وهذي نتيجة العمل السابق
اهااااا....... الان جينا لزبده الدرس وهو توزيع الصور بالفرنت بيج
انا وضعت صوره للصور وهي مقطعه
ملاحظه بسيطه :
التوزيع بيكون ادراج صوره او وضع خلفيه
وسبق وضحنا لكم هذا بالدرس الثاني اذا تذكرون الصوره التاليه:)
يعني بيكون توزيع الصور حسب الرسم التوضيح هذا شاهد معي التوزيع
طريقة ادارج الصوره يكون من خلال اداة الادارج الموضحه لكم هنا
بيكون توزيعنا للصور حسب الشرح الي بالصوره التاليه ونسميها الصورة (توزيع المرحله الاولى)
راح ندرج زوايا الهيدر والفوتر باستخدام ادراج صورة
بيصبح لدي بهذا الشكل
الان نجي لوضع الاعمده والتمدد الخاص بالهيدر والفوتر
وهذي الطريقه باستخدام خصائص الخليه
نضع الماوس داخل خلية التمدد الي موضحينا لكم في التوزيع الي باسم ( توزيع المرحله الاولى )
بيفتح لنا مربع خصائص الخليه
نقوم بادراج صورة التمدد للهيدر ونطبق الطريقه على تمدد الفوتر وعلى العمود الايمن والايسر
في الاخير بيكون عندي النتيجه بهذا الشكل
الان من الخليه الي في منتصف التوزيع قم بشد الاطراف يمين ويسار
في الاخير بيكون الشكل التالي
يبقى عندي توزيع الصور التجميليه وهي اربع صور وراح نوزعها على النحو التالي
الهيدر بيكون صوره تجميليه يمين وصوره تجميليه يسار
الفوتر بيكون صوره تجميليه يمين وصوره تجميليه يسار
شاهد التوزيع للصور التجميليه بهذا الرسم التخطيطي الي كان بالدرس الثاني
الصور التجميليه راح نضيفها هالمره باستخدام ادراج صوره
نقوم بتقسيم خلية التمدد للهيدر والفوتر الى ثلاث خلايا اضافيه قبل ادارج الصور التجميليه
طريقة التقسيم بيكون وضع المؤشر في وسط الهيدر وضغط الماوس يمين وختيار تقسيم الخلايا
بيفتح مربع صغير نقوم تحويله الى ثلاثه
بكذا قسمنا الخليه الى ثلاث خلايا في الهيدر الان نقوم بادراج الصور التجميليه يمين ويسار ونترك المنتصف للتمدد
ونفس الي سويته على الهيدر تطبقه على الفوتر
وبكذا يكون هذه نتيجة العمل
باقي علينا الان تعديل توجيه محاذاة الصور
وهذي طريقه سهله راح نستخدم فيها اداة المحاذاة
اضغط على الزاويه اليمين للهيدر ضغطه وحده وراح تحدد معك
قم بتوجيه المحاذه للجه اليمين باستخدام اداة المحاذه
طبق هذه العمليه للصوره التجميليه بالهيدر الي باليمين وبعدها انتقل للفوتر ونفس العمليه للجهة اليمن طبق عليها هذه الطريقه
يبقى عندي الجهة اليسار للهيدر والفوتر نطبق عليها الطريقة باستخدام اداة المحاذة لليسار
بعد الانتهاء من المحاذاة للصور بيكون فيه فراغات بين كل صور
للتخلص منها عليك الضغط على كل صوره ضغطتين متتاليتين او اذا يدك مو خفيفه على الماوس اضغط على الصوره ضغطه وحده وختر خصائص الصوره
بيفتح لنا مربع
طبق هذه العمليه لجميع الصور الي سويت لها محاذه
وبكذا يكون انتهيت من التوزيع بالفرنت بيج وهذي نتيجة التطبيق
وش باقي نقول واصل شوي خل اعضائك يفرحون بتصميمك مابقى غير القليل
الان ننقل التصميم للهيدر طبعاً بعد رفع ملف الصور لمجلد المنتدى
قبل التركيب يتطلب منا التعديل على مسار في الفرنت بيج نتقل الى تعليمات برمجية
بيفتح لنا الاكود البرمجيه للستايل
نحتاج لتعديل بسيط لمسار الصور كلها فيصبح لدينا بهذا الشكل
الان انتقل ليقونة التصميم وضع مؤشر الماوس في الوسط وختر اداة المحاذة
نتقل للتعليمات البرمجية
ونلاحظ هذا الشرح المهم لتقسيم الكود البرمجي لجزئين راح ننقل الجزء الاعلاء لنضعه داخل الهيدر بالمنتدى والجزء الاسفل للفوتر ركز في طريقة التقسيم هذه
الان نقوم بالدخول لوحة التحكم الخاصه لمنتداك
وتبع الصور
بعدها تفتح لنا صفحة التحكم بالستايلات
الان هنا يتم وضع كود الفرنت بيج للجزئين الي قمنا بتوزيعهم
في قالب header
ابحث عن
راح تحصلها في البدايه وفي المنتصف انسخ الكود الموجود بينها وقم بازالته ..
نرجع للفرنت بيج وننسخ الجزء العلوي
ونلصقه مكان الكود الي قمنا بمسحه بين
ناخذ كود الجزء الثاني السفلي من الفرنت بيج
ننزل تحت لـــ footer
في أخر القالب نلصق الكود الي جزئنه بالفرنت بيج
ننزل تحت ونسوي حفظ
وروح وشوف المنتدى سوى تحديث
فيه بعض المسات البسيطه الي لازم نعملها
بتلاحظ وجود فراغات في اطراف الستايل
طريقة الازالة سهله
نروح للستايل وتعديل
وضع خواص css المحدده بالمربع الاحمر الى الرقم صفر
الدرس الرابع[ شرح طريقة التطاير الكلي لجميع القوالب للمنتدى ]
شرح مفصل ومدعوم بالصوره لتسهيل التطبيق للعمل
نبداء العمل
نفتح برنامج الفوتوشوب ونعمل تصميم على حسب الشكل الي تريده بالمقاسات
نقوم بتصميم اطارات حسب ذوقك انا قمت بالعمل التالي
قم بتقطيع الستايل باستخدام التول
عمل تقطيع للاطار بشكل منتظم ومتساوي
وعمل حفظ للعمل Save for ***
راح يفتح معك مربع التقطيع وحفظ العمل على هيئة صفحة html مع مجلد الصور مقطعه حسب التقطيع الي وضحنها بالخطوه الاولى
بعد الحفظ راح يكون عندنا صفحة html ومجلد خاص بها images
نفتح مجلد الصور وهذا هو اهم شي نحتاجه
الان نبداء بعمل التطاير لجميع القوالب
ملاحظه : الي يعرف توزيع الستايل الهيدر والفوتر راح يكون العمل سهل عليه لان نفس طريقة توزيع الهيدر والفوتر راح تستخدم لعمل توزيع الاطارات على الفرنت بيج
1- برنامج الفرنت بيج
نروح نفتح برنامج الفرنت بيج
Microsoft Office FrontPage
تابع معي الصور الشرح غالبيته داخل الصوره
شرح مفصل ومدعوم بالصوره لتسهيل التطبيق للعمل
نبداء العمل
نفتح برنامج الفوتوشوب ونعمل تصميم على حسب الشكل الي تريده بالمقاسات
نقوم بتصميم اطارات حسب ذوقك انا قمت بالعمل التالي
قم بتقطيع الستايل باستخدام التول
عمل تقطيع للاطار بشكل منتظم ومتساوي
وعمل حفظ للعمل Save for ***
راح يفتح معك مربع التقطيع وحفظ العمل على هيئة صفحة html مع مجلد الصور مقطعه حسب التقطيع الي وضحنها بالخطوه الاولى
بعد الحفظ راح يكون عندنا صفحة html ومجلد خاص بها images
نفتح مجلد الصور وهذا هو اهم شي نحتاجه
الان نبداء بعمل التطاير لجميع القوالب
ملاحظه : الي يعرف توزيع الستايل الهيدر والفوتر راح يكون العمل سهل عليه لان نفس طريقة توزيع الهيدر والفوتر راح تستخدم لعمل توزيع الاطارات على الفرنت بيج
1- برنامج الفرنت بيج
نروح نفتح برنامج الفرنت بيج
Microsoft Office FrontPage
تابع معي الصور الشرح غالبيته داخل الصوره
الان راح يكون لدينا صفحه بيضاء
نتقل بعدها للتصميم مثل ماهو موضح لك بالصوره التالية
الان نقوم بتحويل الصفحه من اليمين لليسار وذلك لاستخدمنا للغه العربية
بعد اختيار خصائص الجداول راح يعطينا مربع للخصائص الصفحة
نوجه الصفحه من اليمين الى اليسار
الان راح نقوم بأنشاء عدد من الجداول الي بيكون توزيع الصور عليها وعدد الجداول المطلوبه هي 9 جداول
عملية انشاء الجداول سهله ومايحتاج تفصيل فيها كثير
انظر للنتيجه في الصوره التاليه
نحتاج الان لاخفاء حدود الجداول وتوسيطها داخل الصفحه والطريقه هذي من خلال الضغط على خصائص الجدول
بيظهر مربع خصائص الجدول كل الي عليك انك تعدل عليه مثل ماهو بالصوره التالية
شدحيلك معي شوي الدرس هذا يبي شوي صبر لاهميته:)
الان انتهينا من الجداول .. وهذي نتيجة العمل السابق
اهااااا....... الان جينا لزبده الدرس وهو توزيع الصور بالفرنت بيج
انا وضعت صوره للصور وهي مقطعه
ملاحظه بسيطه :
التوزيع بيكون ادراج صوره او وضع خلفيه
وسبق وضحنا لكم هذا بالدرس الثاني اذا تذكرون الصوره التاليه:)
يعني بيكون توزيع الصور حسب الرسم التوضيح هذا شاهد معي التوزيع
طريقة ادارج الصوره يكون من خلال اداة الادارج الموضحه لكم هنا
بيكون توزيعنا للصور حسب الشرح الي بالصوره التاليه ونسميها الصورة (توزيع المرحله الاولى)
راح ندرج زوايا الهيدر والفوتر باستخدام ادراج صورة
بيصبح لدي بهذا الشكل
الان اصبح كود التطاير جاهز يحتاج منا فقط تعديل مسار الصور الي قمنا بتوزيعها ورفعها على الموقع
قبل التركيب يتطلب منا التعديل على مسار في الفرنت بيج نتقل الى تعليمات برمجية
بيفتح لنا الاكود البرمجيه للستايل
نحتاج لتعديل بسيط لمسار الصور كلها فيصبح لدينا بهذا الشكل
الان انتقل ليقونة التصميم وضع مؤشر الماوس في الوسط وختر اداة المحاذة
خلاص الان كل الي علينا هو فقط التعديل على القوالب كامله وهذا الشرح تطبيقه مره وحده فقط
الدرس الخامس تطاير قالب
FORUMHOME +
FORUMDISPLAY
اتمنا منك تكون عارف طريقة الشرح الرابع
FORUMHOME +
FORUMDISPLAY
اتمنا منك تكون عارف طريقة الشرح الرابع
نبداء العمل
تطاير القالب في الرئيسية يحتاج تعديل على ثلاث قوالب
FORUMHOME
forumhome_forumbit_level1_nopost
forumhome_forumbit_level2_post
افتح قالب FORUMHOME
وبحث عن
FORUMHOME
forumhome_forumbit_level1_nopost
forumhome_forumbit_level2_post
افتح قالب FORUMHOME
وبحث عن
كود PHP:
[LEFT]
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
<tr>
<td class="tcat" colspan="
tr>
<tr>
<td class="alt1" colspan="
<phrase 1="faq.php?$session[sessionurl]" 2="register.php?$session[sessionurl]">$vbphrase[first_visit_message]phrase>
td>
tr>
<tr align="center">
<td class="thead"> td>
<td class="thead" width="100%" align="$stylevar
"
>$vbphrase[forum]td
>
<td class="thead" width="175">$vbphrase[last_post]td>
<td class="thead">$vbphrase[threads]td>
<td class="thead">$vbphrase[posts]td>
condition="$vboptions['showmoderatorcolumn']">
<td class="thead">$vbphrase[moderator]td>
tr>
thead>
$forumbits
<tbody>
<tr>
<td class="tfoot" align="center" colspan="$vboptions ['showmoderatorcolumn']">65 "><div class="smallfont"><strong>
<a href="forumdisplay.php?$session[sessionurl]do=markread">$vbphrase[mark_forums_read]a>
<a href="showgroups.php?$session[sessionurl]">$vbphrase[view_forum_leaders]a>
strong>div>td>
tr>
tbody>
table>
<td class="thead" width="175">$vbphrase[last_post]td>
<td class="thead">$vbphrase[threads]td>
<td class="thead">$vbphrase[posts]td>
<td class="thead">$vbphrase[moderator]td>
tr>
thead>
$forumbits
<tbody>
<tr>
<td class="tfoot" align="center" colspan="
<a href="forumdisplay.php?$session[sessionurl]do=markread">$vbphrase[mark_forums_read]a>
<a href="showgroups.php?$session[sessionurl]">$vbphrase[view_forum_leaders]a>
strong>div>td>
tr>
tbody>
table>
استبدله بالتالي
كود PHP:
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<thead>
<tr>
<td class="tcat" colspan="
tr>
<tr>
<td class="alt1" colspan="
<phrase 1="faq.php?$session[sessionurl]" 2="register.php?$session[sessionurl]">$vbphrase[first_visit_message]phrase>
td>
tr>
thead>
table>
$forumbits
[RIGHT]
[RIGHT]وحفظ القالب
افتح قالب forumhome_forumbit_level1_nopost
احذف كل القالب وضع مكانه الكود التالي
كود PHP:
[LEFT]<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tbody>
<tr>
<td class="tcat" colspan="
<a style="float:$stylevar[right]" href="#top" onclick="return toggle_collapse('forumbit_$forumid')"><img id="collapseimg_forumbit_$forumid" src="$stylevar[imgdir_button]/collapse_tcat{$collapseimg_forumid}.gif" alt="" border="0" />a>
<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]">$forum[title]a>
td>
tr>
tbody>
<tbody id="collapseobj_forumbit_$forumid" style="{$collapseobj_forumid}">
<tr align="center">
<td class="thead" width="35"> td>
<td class="thead" align="$stylevar
"
>$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>
condition="$vboptions['showmoderatorcolumn']">
<td class="thead" width="120">$vbphrase[moderator]td>
tr>
$childforumbits
tbody>
table>
<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>
<td class="thead" width="120">$vbphrase[moderator]td>
tr>
$childforumbits
tbody>
table>
اعمل حفظ
افتح قالب forumhome_forumbit_level2_post
افتح قالب forumhome_forumbit_level2_post
احذف كل القالب وضع مكانه الكود التالي
كود PHP:
[LEFT]<tr align="center">
<td class="alt2" width="35"><img src="$stylevar[imgdir_statusicon]/forum_$forum[statusicon].gif" alt="" border="0" />td>
<td class="alt1Active" align="$stylevar
"
id="f$forum[forumid]"
>
<div>
<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]"><strong>$forum[title]strong>a>
condition="$show['browsers']"><span class="smallfont">(<phrase 1="$forum[browsers]">$vbphrase[x_viewing]phrase>)span>
div>
condition="$show['forumde******ion']"><div class="smallfont">$forum[de******ion]div>
condition="$show['forumsub******ion']"><div class="smallfont"><strong><a href="sub******ion.php?$session[sessionurl]do=removesub******ion&f=$forum[forumid]">$vbphrase[unsubscribe_from_this_forum]a>strong>div>
condition="$show['subforums']"><div class="smallfont" style="margin-top:$stylevar[cellpadding]px"><strong>$vbphrase[subforums]strong>: $forum[subforums]div>
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>
condition="$vboptions['showmoderatorcolumn']">
<td class="alt1" width="120"><div class="smallfont">$forum[moderators] div>td>
tr>
$childforumbits
<div>
<a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]"><strong>$forum[title]strong>a>
div>
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>
<td class="alt1" width="120"><div class="smallfont">$forum[moderators] div>td>
tr>
$childforumbits
وعمل حفظ
راح اعطيك مثال على الدرس
افتح برنامج الفتوشوب
وفتح عمل جديد بمقاس تصميم الستايل
ارسم مستطيل للهيدر وزود المساحه الخارجيه للمستطيل مثل ماهو موضح بالصوره
وفتح عمل جديد بمقاس تصميم الستايل
ارسم مستطيل للهيدر وزود المساحه الخارجيه للمستطيل مثل ماهو موضح بالصوره
الان قم باختيار أداة البن تول
قم بتحديد نقاط الانحنائات بالاطراف للمستطيل مثل ماهو موضح لك بالصوره التالية
الان ركز شوي معي هنا الصعوبه
الان حان دور التحكم في النقاط بالماوس حاول تقوم بسح النقاط للاسفل والتوازن بعمل الانحنائات
بعد ما ضبط معي الشكل للانحنائات وصار مناسب مع التصميم اقوم الان بنسخ الطبقه لثلاث طبقات تابع شرح الصوره
بيكون لدينا الطبقات بالشكل التالي
نروح للطبقه الاخيره ونغير درجة الون
وبالاسهم الي بالكيبوووورد نختار السهم الي تحت يعني نسحب الطبق الاخيره للاسفل
وبالاسهم الي بالكيبوووورد نختار السهم الي تحت يعني نسحب الطبق الاخيره للاسفل
وبنفس الطريقه حاول تغير في الانحنائات للطبقه الاخيره
وبنفس الطريقه للطبقه العلويه نقوم باختيار السهم الي بالكيبورد للاعلاء وسحبها لفوق
حول الطبقات الى
Rasterize Layer
Rasterize Layer
الان من ادوات ليرى ستايل قم بتدعيل المنحنيات بوضع حدود وغيره من المسات الي في اداة اليرى ستايل
في النهائيه بيكون عندي هيدر جميل طبعاً راح اعطيكم جزاء من العمل
انتهى الدرس
ليست هناك تعليقات:
إرسال تعليق