[3] دورة تصميم استايل style vCard3 و تركيب installه بالكامل .. إنشاء الجداول و تركيب installها في السكربت

[romaissa]

http://www.dzbatna.com/images/icons/smile.gif [3] ط¯ظˆط±ط© طھطµظ…ظٹظ… ط§ط³طھط§ظٹظ„ vCard3 ظˆ طھط±ظƒظٹط¨ظ‡ ط¨ط§ظ„ظƒط§ظ…ظ„ .. ط¥ظ†ط´ط§ط، ط§ظ„ط¬ط¯ط§ظˆظ„ ظˆ طھط±ظƒظٹط¨ظ‡ط§ ظپظٹ ط§ظ„ط³ظƒط±ط¨طھ (http://www.dzbatna.com/t1122312/)



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

أهلاً بكم في الحلقة الثانية من دورة تصميم استايل style مكتبة الصور (البطاقات) و تركيب installه بالكامل ،،،

* الحلقات السابقة :

[1] الحلقة الأولى .. تصميم الاستايل style و زخرفته (http://www.dzbatna.com/t1111071/)
[2] الحلقة الثانية .. تقطيع الاستايل style (http://www.dzbatna.com/t1114467/)

باسم الله نبدأ :

بعد قيامنا بتقطيع الاستايل style و تجهيز صور القطع بالكامل يجب توافر برنامج الفرونت بيج لدينا لإنشاء الجداول و تركيب install الصور بداخلها و لتنزيل برنامج الفرونت بيج 2003 :

اضغط هنا (http://www.allulu.org/vb/showpost.php?p=11376&postcount=1)

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




http://upload.dzbatna.net/upfiles/dlB51313.gif
و بعد ذلك نقوم بإنشاء صفحة جديدة عن طريق الضغط على زر إنشاء الصفحة كما في الصورة :


http://upload.dzbatna.net/upfiles/dFB51370.gif


و من ثم نقوم بالذهاب إلى منطقة الأكواد للصفحة و نقوم بحذف الكود code الافتراضي للصفحة كما في الصورة :


http://upload.dzbatna.net/upfiles/S7u51427.gif



و بعد ذلك نقوم بالعودة لمنطقة التصميم Design و نضغط بداخل الصفحة بزر الماوس الأيمن و نقوم باختيار Page Properties خصائص الصفحة كما في الصورة :


http://upload.dzbatna.net/upfiles/lrZ51473.gif


و من ثم نقوم بتحديد اتجاه الصفحة من اليمين إلى اليسار كما في الصورة التالية :


http://upload.dzbatna.net/upfiles/XYA51531.gif


بعد ذلك نقوم بإنشاء جدول بثلاثة صفوف و خمسة أعمدة كما في الصورة :


http://upload.dzbatna.net/upfiles/2oW51579.gif



http://upload.dzbatna.net/upfiles/FuC51627.gif


و بعد ذلك سيتم إنشاء الجدول بنجاح .. الآن نقوم بوضع الصور المقطعة كل منها في مكانها المناسب كالتالي :

[1] الصورة العلوية اليمنى المطابقة لعرضها للعامود الأيمن بداخل الخلية اليمنى العلوية
[2] الصورة التي تليها اليمنى أيضاً بداخل الخلية اليمنى التي تليها أيضاً
[3] الصورة المتوسطة بداخل الخلية الوسطى الثالثة
[4] الصورة اليسرى بداخل الخلية اليسرى قبل الأخيرة
[5] الصورة العلوية اليسرى المطابقة لعرضها للعامود الأيسر بداخل الخلية اليسرى العلوية

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


http://upload.dzbatna.net/upfiles/M6l51693.gif


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


http://upload.dzbatna.net/upfiles/Ifr51739.gif


و بعد ذلك نقوم بالضغط بزر الماوس الأيمن على الصورة الوسطى العلوية و نقوم باختيار Cell Properties خصائص الخلية كما في الصورة :


http://upload.dzbatna.net/upfiles/bnD51793.gif


و بعد ذلك نقوم بتحديد العرض إلى 100% و نقوم باختيار صورة التمدد العلوي كخلفية و للتطبيق اتبع ما في الصورة التالية :


http://upload.dzbatna.net/upfiles/2Kn51850.gif


الآن نقوم بتطبيق نفس العمل للمنطقة السفلية بتحديد العرض 100% و صورة التمدد السفلية كخلفية .. بعد ذلك سيكون لدينا الشكل التالي :


http://upload.dzbatna.net/upfiles/eQP51902.gif


الآن نقوم بدمج الأعمدة الثلاثة الوسطى في الصف الثاني عن طريق تظليلهم و من ثم الضغط بزر الماوس الأيمن على التظليل و اختيار Merge Cells دمج الأعمدة كما في الصورة :


http://upload.dzbatna.net/upfiles/Wz551949.gif


الآن نقوم بوضع صورة العامود الأيمن كخلفية للخلية اليمنى في الصف الثاني عن طريق الضغط بداخل الخلية بزر الماوس الأيمن و اختيار Cell Properties خصائص الخلية و نقوم بتحديد العرض (عرض صورة العامود) بالبكسل و صورة العامود كخلفية كما في الصورة :


http://upload.dzbatna.net/upfiles/asQ51993.gif


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


http://upload.dzbatna.net/upfiles/2rL52080.gif




:: نقل الكود code إلى السكربت ::



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

مثال [1] : مجلد الصور اسمه : allulu-style موجود بداخل مجلد السكربت vcard فنكتب المسار كالتالي :

اقتباس
allulu-style/image1.gif

مع مراعاة أن allulu-style هو اسم مجلد صور استايل styleك و image1.gif اسم كل صورة

مثال [2] : مجلد الصور اسمه : allulu-style موجود بداخل مجلد images الموجود بداخل مجلد السكربت vcard فنكتب المسار كالتالي :

اقتباس
images/allulu-style/image1.gif

مع مراعاة أن allulu-style هو اسم مجلد صور استايل styleك و image1.gif اسم كل صورة

و أنا عندي مجلد صور الاستايل style اسمه allulu-style بداخله صور الاستايل style و موجود بداخل مجلد السكربت مباشرة و قمت بتغيير المسارات كما في الصور التالية :


http://upload.dzbatna.net/upfiles/rYG52256.gif


الآن نقوم بالدخول إلى لوحة تحكم السكربت عن طريق الرابط :

اقتباس
http://www.yourdomain.com/vcard/admin

yourdomain = اسم موقعك
.com = الدومين الخاص بك
vcard = اسم مجلد السكربت
admin = لوحة تحكم الإدارة

و من ثم من القائمة اليسرى نقوم بالدخول إلى تحرير القوالب كما في الصورة التالية :


http://upload.dzbatna.net/upfiles/IG952355.gif


و بعد ذلك نقوم بالضغط على تحرير بجانب القالب template page_header .. و من ثم نقوم بنسخ الكود code العلوي من الفرونت بيج من منطقة الأكواد و هو الكود code المظلل كما في الصورة التالية :


http://upload.dzbatna.net/upfiles/t8S52407.gif


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


http://upload.dzbatna.net/upfiles/AES52452.gif


أي ما بين :

رمز Code:
${htmlbody}
و :

رمز Code:
<!-- NAV BAR -->
أي أنه إذا كان هناك أي كود code بينهم فنقوم بحذفه و وضع الكود code الخاص بنا بينهم و من ثم نقوم بالضغط على زر تحديث update لتحديث update القالب template ... بعد ذلك نقوم بنسخ الكود code السفلي الخاص بنا من الفرونت بيج كما في الصورة :


http://upload.dzbatna.net/upfiles/Mm652556.gif


و من ثم نقوم بالضغط على تحرير بجانب القالب template page_footer و نقوم بوضع الكود code السفلي في المنطقة المحددة كما في الصورة التالية :


http://upload.dzbatna.net/upfiles/o5e52614.gif


أي ما بين :

رمز Code:
</table>
و :

رمز Code:
</body>
أي نضعه قبل نهاية كود code المحتوى الكامل body و من ثم نضغط تحديث update لتحديث update القالب template .. و بعد ذلك نذهب للصفحة الرئيسية للسكربت و نجد بأن الاستايل style قد تم تركيب install و تنسيقه بنجاح و لله الحمد كما في الصور التالية :




من الأعلى :


http://upload.dzbatna.net/upfiles/JKp52692.gif


من الأسفل :


http://upload.dzbatna.net/upfiles/ziR52733.gif


تابعونا في الحلقات القادمة لتنسيق الألوان و الأقسام .. أتمنى التوفيق للجميع و إن كان هناك خطأ بالشرح طريقة فالعذر من الله ثم منكم و أي استفسار أنا حاضر إخواني .. أخوكم و محبكم AhMeD http://www.dzbatna.com/images/smilies/icon31.gif






ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)



https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©