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

[abohmam]

بسم الله الرحمن الرحيم

الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين

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

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


* روابط دروس الدورة:

تصميم واجهة موقع أو استايل للمنتدى (http://www.abc4web.net/vb/showthread.php?t=2291)
تحميل اسكربت vCard3 (http://www.abc4web.net/vb/showthread.php?t=2290)
الدرس الأول (http://www.abc4web.net/vb/showthread.php?t=2289)
الدرس الثاني (http://www.abc4web.net/vb/showthread.php?t=2288)
الدرس الثالث (http://www.abc4web.net/vb/showthread.php?t=2287)
الدرس الرابع (http://www.abc4web.net/vb/showthread.php?t=2285)
:bar:


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

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

اضغط هنا (http://www.abc4web.net/vb/showthread.php?t=619)

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

http://www.abc4web.net/vb/imgcache/7650.abc4web.gif

و بعد ذلك نقوم بإنشاء صفحة جديدة عن طريق الضغط على زر إنشاء الصفحة كما في الصورة :

http://www.abc4web.net/vb/imgcache/7651.abc4web.gif

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

http://www.abc4web.net/vb/imgcache/7652.abc4web.gif

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

http://www.abc4web.net/vb/imgcache/7653.abc4web.gif

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

http://www.abc4web.net/vb/imgcache/7654.abc4web.gif

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

http://www.abc4web.net/vb/imgcache/7655.abc4web.gif

http://www.abc4web.net/vb/imgcache/7656.abc4web.gif

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

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

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

http://www.abc4web.net/vb/imgcache/7657.abc4web.gif

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

http://www.abc4web.net/vb/imgcache/7658.abc4web.gif

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

http://www.abc4web.net/vb/imgcache/7659.abc4web.gif

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

http://www.abc4web.net/vb/imgcache/7660.abc4web.gif

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

http://www.abc4web.net/vb/imgcache/7661.abc4web.gif

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

http://www.abc4web.net/vb/imgcache/7662.abc4web.gif

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

http://www.abc4web.net/vb/imgcache/7663.abc4web.gif

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

http://www.abc4web.net/vb/imgcache/7664.abc4web.gif

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

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



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

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



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

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

http://www.abc4web.net/vb/imgcache/7665.abc4web.gif

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



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

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

http://www.abc4web.net/vb/imgcache/7666.abc4web.gif

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

http://www.abc4web.net/vb/imgcache/7667.abc4web.gif

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

http://www.abc4web.net/vb/imgcache/7668.abc4web.gif

أي ما بين :

${htmlbody}

و :

<!-- NAV BAR -->

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

http://www.abc4web.net/vb/imgcache/7669.abc4web.gif

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

http://www.abc4web.net/vb/imgcache/7670.abc4web.gif

أي ما بين :

</table>

و :

</body>

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

من الأعلى :

http://www.abc4web.net/vb/imgcache/7671.abc4web.gif

من الأسفل :

http://www.abc4web.net/vb/imgcache/7672.abc4web.gif

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

منقـ(مع أجمل تحية للكاتب)ـول

[أبو يوسف]

أجزل الشكر لك اخي ابو همام على جهودك الطيبة

[أبو صخر]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .