شبكة و منتديات الديناصور web design

دورة تصميم ستايلات للVb
www.alshaba7.net/vb/
bahrain2009

بعد الإنتهاء من تصميم لستايل في الفوتوشوب

اختر هذه الأداة

وقصص لستايل بالطريقة التالية

ثم اختر file من القائمة العلوية وثم save for web

سيضهر لك التالي اضغط على save

ثم افتح برنامج لفرونت بيج

وبعدها اختر كلمة code من الأسفل

ثم ارجع لصفحة designe وكون جدول

بعد ذلك اضغط على الجدول رايت كلك table properties

وغير المعلومات إلى المعلومات التالية

الآن اضغط في اي مكان رايت كلك ثم page properties

وغير none إلى right to left to left

بعد الإنتهاؤ اضغط على زر ok
-
حدد ال3 مربعات الوسطية

واضغط عليهم رايت كلك marge cells

الحين افتح الملف الي خزنته قبل شوي من save for web بالفرونت بيج ورتب الصور
عند الإنتهاء من ترتيب الصور ستلاحض مشاكل مثل

الحل بسيط
كل صور على حسب اتجاهة خلها على اتجاها مثلاً الي على اليمين يمين والي على اليسار يسار من هذي الدوات

والعمودين اضغط عليهما دبل كلك وثم general

ثم امسح العمود واضغط رايت كلك cell properties مكانه

ضع علامة صح امام use background picture والصق مانيخته قبل قليل واضغط على ok
وافعل الشيئ نفسه للعمود الثاني
واذهب لأعلى الأٍستايل حيث المشاكل اضغط دبل كلك على الصورة العلوية

وثم احذف الصورة واضغط رايت كلك cell properties

ضع صح اما use background picture والصق مانسخته واضغط ok
واضغط رايت كلك cell propeties أيضاً على المكانين اليمين واليسار مكان ضهور الون الابيض

وضع علامة الصح والصق مانسخته مرة اخرى
وافعل الشيئ نفسه في الأسفل

النهاية اقتربت اختر صفحة code من الأسفل وانسخ كل المكتوب فيها

الأن افتح محرر النصوص note pad

والصق مانسخته
ثم اختر edit replace من القائمة العلوية

وفي اول خانة اكتب images/
في ثاني خانة اكتب اسم مجلد الصور ثم /

بعد الإنتهاء اضغط replace All و انسخ المكتوب في محرر النصوص والصقه فس صفحة code في لفرونت بيج وارجع لصفحة design
وضع الماوي في اي مكان في الوسط

وارجع لصفحة code

ولا تحرك الماوس إلى اي مكان من مكان الماوس

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

واضهب لمجلد الصور images الذي خزنه الفوتوشوب مع ملف الhtml وانسخ الصور الموجودين داخل images واعمل ملف جديد داخل مجلد المنتدى الرئيسي بالأسم الذي اخترته لمجلد الصور والصق الصور فيه
وشاهد النتيجة

اولاً ادخل على لوحة تحكم المنتدى admincp
واختر الأنماط والقوالب ثم إدارة النمط

ثم اختر لستايل ثم من القائمة المنسدلة اختر css رئيسي

الحين بتشوف اشياء شبه معقدة لاكن بعد ماتكمل الدرس بدقول سهله
1- الجسم ( خلفية الصفحة )

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

هذه هي الإجابة
بعد كتابة كود الون في مكانه في css رئيسي اضغط على حفض css

وستلاحض تغير لون الخلفية في المنتدى

طوف ثاني شي وروح لثالث شي

4- حدود الجدول

المكان المقصود هو حدود الجدول الخطوط المحاط بها الجدول

5-اشرطة الصنف

في هذا المكان اكتب
#5C7099 url(مجلد الصوراسم الصورة.الإمتداد) repeat-x top left
الصورة المرادة هي غير موجودة عليك ان تكونها ويجب ان تكون المقاسات الطول 50 والعرض 40وستكون هذه الصور في هذا المكان

6-رأس الجدول

7-نهاية الجدول

في المكان المحدد بالأحمر الصق هذا مع إجراء التعديلات
#5C7099 url(مجلد الصوراسم الصورة.الإمتداد) repeat-x top left
والباقي مايحتاج لشرح لئني شرحته مرتين من قبل
والمكان المقصود بنهاية الجدول هو

8- الون المتناوب الأول

هنا فقط اكتب كود الون
والمكان المقصود هو

9- الون المتناوب الثاني

والمكان المقصود هو

10- محرر wysiwyg

اكتب كود لون في المكان المحدد بالأحمر ويجب ان يكون الون فاتح والمكان المقصود هو

11- حقول الإدخال

في المكان المحدد أكتب كود لون ولاتنسى إضافة # في البداية
والمكان المقصود

12-الأزرار

إذ لاتريد تغيير لون الأزرار تستطيع تركه كما هو والأزرار التي سيتغير لونها

طوف كل شيئ حتى تصل إلى محيط الوحة

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

والوحة نفس الي قبلهة بس المكان المقصود هو

والحين اشقح ل التحكم بالقوائم المنبثقة

هني تقدر تحط كود لون او صورة إذا صورة تذكر هذا الكود
#5C7099 url(مجلد الصوراسم الصورة.الإمتداد) repeat-x top left
--------------------------------------------
الحين انتهيت من مرحلة الcss باقي شي واحد ويكتمل لستايل

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

وبعدين متغيرات النمط

والحين غير روابط اهم ملفين والي هم buttons و statusicon إلى
اسم مجلد الصور/statusicon
اسم مجلد الصور/buttons

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

آخر خطوة هي إخراج ملف الxml و ملف الصور
طبعاً ملف الصور بكون في المنتدى انسخه وملف الأكس ام ال من

ثم تحميل

اكتب اسم لستايل في المكان المحدد بالأحمر في الصورة التالية

وبعد الإنتهاء اضغط على تحميل

ومبرووووووووووووووووك انتهيت من تصميم لستايل
واي استفسار انا حاضر


اعلانات نصية	:: برامج :: طع طع :: حصن العرب ::