العاب قص شعر/العاب دبابات/العاب كرة قدم/العاب مكياج/العاب سيارات سباق/العاب سبونج بوب/العاب ماريو/العاب تلبيس/العاب اكشن نار/ adslsolutionsالعاب مغامرات/العاب ذكاء/العاب اطفال/العاب طبخ بنات/العاب باربي/العاب بن تن/العاب بوس/العاب تلوين/العاب ديكور


العودة   نادى الاتصالات والتقنية > اقسام التصميم والتطوير > منتدى تطوير وإدارة وتصميم المواقع

إضافة رد
 
أدوات الموضوع طريقة عرض الموضوع
قديم 06-08-2010, 07:36 PM   #1
انا غيييير
عضو نشيط
 
تاريخ التسجيل: Jun 2010
المشاركات: 40
افتراضي دورة تصميم استايل vCard3 و تركيبه بالكامل إنشاء الجداول و تركيبها في السكربت




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

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




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



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


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


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


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


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




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

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

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



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


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


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


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


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


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


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


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

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


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

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


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



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

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



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


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


أي ما بين :

رمز Code: ${htmlbody}
و :

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


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


أي ما بين :

رمز Code: </table>
و :

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

من الأعلى :


من الأسفل :


تابعونا في الحلقات القادمة لتنسيق الألوان و الأقسام




من مواضيعي في المنتدي

انا غيييير غير متواجد حالياً   رد مع اقتباس
إضافة رد

أدوات الموضوع
طريقة عرض الموضوع

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

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة

الانتقال السريع

المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر رد
دورة تصميم استايل غير متمدد انا غيييير منتدى تطوير وإدارة وتصميم المواقع 0 06-08-2010 08:14 PM
دورة تصميم استايل vCard3 و تركيبه بالكامل تنسيق الاستايل CSS انا غيييير منتدى تطوير وإدارة وتصميم المواقع 0 06-08-2010 07:39 PM
دورة تصميم استايل vCard3 و تركيبه بالكامل تقطيع الاستايل انا غيييير منتدى تطوير وإدارة وتصميم المواقع 0 06-08-2010 07:34 PM
دورة تصميم استايل vCard3 و تركيبه بالكامل انا غيييير منتدى تطوير وإدارة وتصميم المواقع 0 06-08-2010 07:33 PM
شرح تصميم استايل منتدى بالفيديو ابو عمر منتدى تطوير وإدارة وتصميم المواقع 0 06-05-2010 04:35 PM


الساعة الآن 12:36 PM.


dsl.adslsolutions.net