[vCard] تركيب install الصور للقوالب header + footer + mainpage .. الحلقة الثانية

[Chakira]

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

أظن أن الوقت كان كافيا للحلقة الأولى في المسلسل لتصميم الصور و الانتهاء منها و الآن انتهينا من التصميم و فقط علينا التركيب install و التغيير في الألوان إن شاء الله

في هذه الحلقة سوف نقوم بالتعديل على القوالب التالية :

1- القالب template header
2- القالب template footer
3- القالب template mainpage

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

في الحلقة الأولى عرفتكم على كيفية الدخول إلى القوالب و الآن راح نلاقي قوالب كثيييير و حالة http://www.dzbatna.com/images/smilies/shiny.gif بس راح نلاقي قالب template header و بجانبه كلمة تحرير نضغط عليها و راح يطلع لنا صندوق الكود code كما في الصورة :


http://www.allulu.org/dros/vcard/02/01.gif

الآن دخلنا للقالب template و لا تنسى يكون الفرونت بيج جاهز و تحذف كود code الفرونت بيج من الأسفل يعني في منطقة الأكواد في الفرونت بيج اللي تكلمنا كثير عنها احذف الكود code و خلي الفرونت بيج على جنب شوي http://www.dzbatna.com/images/smilies/shiny.gif و هذه صورة لمنطقة الأكواد :


http://www.allulu.org/dros/vcard/02/02.gif

ننسخ الكود code كاملا من القالب template و نضعه في منطقة الأكواد في الفرونت بيج و نرجع لمنطقة التحرير في الفرونت بيج و راح يطلع لنا الشكل التالي :


http://www.allulu.org/dros/vcard/02/03.gif

طبعا رأينا بالصورة أنه يجب علينا وضع صورة البانر اللي صممناها و صور قائمة السكربت و نضع الخلفية اللي صممناها لصورة قائمة السكربت و الآن كيفية وضع خلفية لخلية أخبرتكم سابقا في حلقات الفي بي 3 و لكن راح أعيدها هنا و كما في الشكل :


http://www.allulu.org/dros/vcard/02/04.gif

يعني نضغط على خلية القائمة كلك يمين و نختار Cell Properties و نكمل كما في الصورة يعني نضغط على Browse و نختار مسار الصورة و ما ننسى أيضا نضع خلفية قائمة السكربت في الخلية اليسرى المكتوب فيها $dropdownlist و أهم شيء تكون محضر الصور داخل مجلد في مجلد الفي كارد يعني ما يكون المجلد في مكان آخر و أنا كما قلت أسميت المجلد allulu و وضعت به الثمانية صور

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


http://www.allulu.org/dros/vcard/02/05.gif

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


http://www.allulu.org/dros/vcard/02/06.gif

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


http://www.allulu.org/dros/vcard/02/07.gif

الآن قبل كل شيء لازم أقول لكم إنه الروابط التي نضعها كالتالي :

جديد البطاقات : $site_prog_url/newcards.php
الأكثر ترشيحا : $site_prog_url/toprated.php
أفضل البطاقات : $site_prog_url/topcards.php



مساعدة : $site_prog_url/help.php
أخبر صديقك : java******:refer
الرئيسية : $site_prog_url

يعني الرئيسية لما حددناها نضع لها هالرابط $site_prog_url و كل كلمة نحددها نحط لها رابطها و هم 6 كلمات و لما ننتهي منهم نرجع لمنطقة الأكواد اللي راح نشتغل فيها بعض الشيء

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


http://www.allulu.org/dros/vcard/02/08.gif

يعني نحذف من أول الرابط C:// إلى علامة / و يبقى عندنا مثلا : allulu/banner.gif و نسويها مع باقي الصور و توجد طريقة مختصرة و لكن نكتفي بهذه الطريقة أفضل لكم حتى يكون شغلكم دقيق يعني غيرنا روابط 4 صور و صورة خلفية القائمة لأنها متكررة في خليتين غيرنا رابطها مرتين و غيرنا رابط صورة البانر و قائمة السكربت

الآن راح نلاقي في منطقة الأكواد الكود code :

"java******:refer"

استبدل النجوم بكلمة s c r i p t لكن بدون مسافات

نستبدله بالكود code التالي :

"java******:refer(380,270)" onClick="refer(380,270)"

استبدل النجوم بكلمة s c r i p t لكن بدون مسافات

آخر شيء في منطقة الأكواد تحت راح نلاقي SCROLLBAR-FACE-COLOR: و فيها أكواد الألوان نغير فيها على حسب لون شريط التمرير اللي نريده للسكربت و على حسب صورنا ليعطي السكربت شكل تجميلي

آخر شيء ننسخ الكود code بالكامل و نضعه في القالب template بدلا من القديم و نضغط على زر "تحديث update البيانات"

نروح للرئيسية و نشوف عملنا و هو فقط في الأعلى و نتأكد من الروابط و كل شيء و إن شاء الله كل شيء تمام

انتهينا من شيء يعتبر صعب نوعا ما عند المبتدئين لوضع الروابط و غيرها و الآن بجميع القوالب فقط سوف نغير صور و حالة ثانية http://www.dzbatna.com/images/smilies/shiny.gif

الآن ننتقل للقالب template footer و بعد فتحه راح نلاقي كود code صغير بدلا من نقله للفرونت بيج راح نغير الرابط allulu-pink/down.gif إلى allulu/footer.jpg أو على حسب ما إنت مسمي الصورة و امتدادها و امتداد المجلد و اسمه و اللي ما يعرف ينقله للفرونت بيج و نسوي نفس الخطوات اللي سويناها في الاعلى و نسوي تحديث update البيانات

الآن ننتقل للقالب template الهام و هو mainpage و هو سهل الاستعمال (يوجد كتيب طريقة الاستخدام خخخخ http://www.dzbatna.com/images/smilies/shiny.gif ) ننقل كود code القالب template إلى الفرونت بيج بعد مسح كود code الفرونت بيج طبعا

الآن نروح لمنطقة التحرير و راح نلاقي صورتين غير ظاهرات و نسوي كما في الصورة :


http://www.allulu.org/dros/vcard/02/09.gif

الآن من قائمة Format من الأعلى نختار Background كما في الصورة :


http://www.allulu.org/dros/vcard/02/010.gif

و بعدها راح نلاقي الأمر Background و بجانبه اختيار اللون نضغط على اللون و نختار More Colors كما في الصورة :


http://www.allulu.org/dros/vcard/02/011.gif

و فوق على اليمين راح نلاقي فراغ نضع فيه كود code لون الخلفية اللي سويناها و نضغط OK و نحفظ كما في الصورة :


http://www.allulu.org/dros/vcard/02/012.gif

الآن باقي علينا نظلل الجدوال بالكامل و نضغط كلك يمين و نختار Table Properties و نضع خلفية السكربت allulu/back.gif

الآن سوينا الخلفية و حطيناها باقي لنا شي واحد و هو إنه نغير الروابط إلى اسم المجلد مثل allulu/main-middle.jpg و كلنا عارفين كيف كما في الأعلى من منطقة الأكواد و ننسخ الكود code و نضعه في القالب template بدلا من القديم و نضغط "تحديث update البيانات"

و بذلك نكون قد انتهينا من ثلاثة قوالب و باقي القوالب سهلة جدا بإذن الله كلها في الحلقات القادمة دفعات خطوة بخطوة

سبحانك اللهم و بحمدك أشهد أن لا إله إلا أنت أستغفرك و أتوب إليك

أخوكم و مبحكم Allulu http://www.dzbatna.com/images/smilies/icon31.gif




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