شرح كيفية تقطيع وتركيب الاستايل على الاسكربتات ,التطبيق على مركز ترايدنت لرفع الملفات

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

كثرة الطلبات على شرح كيفية تركيب الاستايلات على الاسكربتات كمراكز رفع الملفات - والسباقات وغيرها من الاسكربتات

فحبيت اقدم لكم شرح مبسط لكيفية تركيب احد الاستايلات على اسكربت رفع الملفات لترايدنت

وهنا الناتج النهائي للاستايل بعد تركيبه على الاسكربت

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

فتقريبا الفكرة واحدة

ففي المنتديات نتوجه من لوحة التحكم << الاستايلات والقوالب ونبحث عن قوالب الهدر والفوتر والفورم هوم ونقوم بتعديلها

اما في الاسكربتات والمجلات فتكون التعديلات داخل مجلد الاسكربت او المجلة

في الغالب يكون المجلد المسؤل عن الاستايلات باسم templates او styles

لناخذ نظرة سريعة على هذا المجلد ومايحتويه من ملفات

راح يكون المثال الذي نطبق عليه الشرح هو اسكربت traidnt-up-v1 ترايدنت لرفع الملفات الاصدار الاول

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

ندخل مجلد styles

راح نحصل في داخله مجلد اخر باسم traidnt-des

وهو المجلد المسؤل عن الاستايل الافتراضي المقدم مع الاسكربت

غالبا يكون باسم def

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

فراح نقوم بنسخ هالمجلد ومن ثم لصقه باسم اخر

وراح يكون المجلد الجديد هو المسؤل عن استايلك الجديد والذي راح نعتمد فيه كافة التعديلات

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

ندخل المجلد ahmod (طبعا الاسم راح يختلف على حسب مانت سميته)

في الغالب وليكون الشرح عمومي لكافة الاسكربتات

راح تحصل ملف خاص بالهدر باسم header

وملف اخر باسم footer وهو خاص بالفوتر

وملف الصفحة الرئيسية باسم main او form على حسب اصدار الاسكربت

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

----------

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

التقطيع يعتمد اساسا على جعل الهدر - الفوتر في جدول لحالهم

بمعنى الهدر في جدول لحاله يختلف تماما عن جدول الفوتر

ليسهل التركيب بعد ذلك

هذه صورة الاستايل المفترض تركيبه على الاسكربت

بإستخدام اداة ال Crop الموضحة نقوم بقص الهدر فقط

كما موضح بالصورة

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

بعد قص الهدر لحاله نبدا بالتقطيع

كما موضح هالاستايل لا يحتوى على نقطة تمدد لذلك راح يكون التقطيع حر شوي
(في حالة الاستايلات المتمددة فقط نضع نقطة التمدد في تقطيعه لحالها)

انا قطعت بالشكل التالي

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

بعد ذلك نقوم بحفظ باسم (انتبه لا تسوي حفظ لاجل لا يحفظ فوق التصميم الاساسي ويطير عليك التصميم)

لذلك نقوم بحفظ باسم ونحفظ ملف psd للهدر بالتقطيع الخاص به لاجل لو احتجنا نعدل على اي شئ مستقبلا

بعدها حفظ للويب باسم header.html

بنفس الطريقة نقص الفوتر ونقوم بتقطيعه وحفظه footer.html

ثم نقوم بقص الاطارات وايضا نقوم بتقطيعها وتوزيعها (التوزيع المعتاد الذي تستخدمه لتقطيع الاطارات للمنتديات ولا يوجد اي اختلاف)

نتوجه الحين لكيفية توزيع الهدر - الفوتر

بعد الحفظ راح نتوجه للمجلد الذي تم حفظ فيه الملفات

نفتح ملف header.html بواسطة الدريم ويفر

راح يظهر لنا التالي

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

الاكواد المظللة باللون الاسود نقوم بحذفها ليتبقى لنا جدول الهدر فقط من بداية الوسم الى نهايته

ماعلينا الحين الا توسيط الجدول وتعديل الاتجاه

والطريقة كالتالي

نروح على كلمة table ثم كلك ييمين واختيار edit table

كما موضح

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

التعديل الاول خاص لعمل المحاذاة التوسيط

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

ثم نتوجه الى التعديل الاخر لتعديل اتجاه الجدول

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

بعدها حفظ

الحين صار جدول الهدر جاهز للإستبدال مباشرا

نتوجه الى ملفات الاسكربت ونقوم بفتح ملف header.html

طبعا الصور لن تظهر لان مساراها غير معدل

راح نعدل مسار الصور بشكل مؤقت لاجل تظهر لدينا ونقدر نعدل

اضغط Ctrl+f

ثم ابحث عن

{stylepath}/

واستبدلها بفراغ واجعل الاستبدال في كافة الملف

كما موضح بالصورة التالية

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

الحين نرجع نلاحظ الصور ظهرت والحمد لله

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

مثل الرئيسية - الاحصائيات وغيرها

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

رمز PHP:

<table align="center" cellpadding="0" cellspacing="0" border="1" width="776">

<tr>

<td align="center"><a href="index.php">الرئيسيةa>td>

<td align="center"><a href="index.php?page=rules">الشروطa>td>

<td align="center"> <a href="index.php?page=adv">الاعلاناتa>td>

<td align="center"><a href="index.php?page=statistics">الاحصائياتa>td>

<td align="center"><a href="index.php?page=contactus">الاتصال بناa>td>

tr>

table>

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

بعد الانتهاء

نروح نضغط على اي صورة من التصميم ثم تحديد الوسم من اسفل صفحة الدريم ويفر

الصورة توضح كل شئ

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

كذا حددنا جدول الهدر

نروح التعيلمات البرمجية راح نلاحظه محدد كما ملاحظ

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

نقوم بحذف هذه الاكواد ثم نتوجه الى ملف الهدر الخاص بنا

الملف اللى عدلنا عليه من شوي الاتجاه والمحاذاة

ننسخ كافة الاكواد من التعيلمات البرمجية

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

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

اتمنى تكون الفكرة وصلت

طبعا ماراح يظهر لنا صور لان المسار في حاجة الى تعديل

لا تهتم وكمل

الحين شنو باقي في صفحة الهدر ؟

الجدول الخاص بلاعلانات

لو حاب تحذفه احذف

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

انا عن نفسي حذفته

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

ماعليك الا انك تعدل الجدول محل الجدول

فقط لا غير بدون زيادة او نقصان

فقط تعديل مسار الصور

تتذكر فوق لما بحثنا عن {stylepath}/ واستبدلناها بالفراغ

راح نعكس العملية

نبحث عن
رمز PHP:

images/

ونستبدله بالتالي

رمز PHP:

{stylepath}/images/

وبنفس الطريقة نجعل الاستبدال في كافة انحاء المجلد كما فعلنا فوووق

كذا مبروك عليك الهدر صار تمام

نعمل حفظ

نرجع لملفات الاسكربت

داخل مجلد الاستايل الخاص بنا راح تحصل فيه مجلد images

نقوم بنسخ صور الهدر الخاص بنا داخله

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

الحين حلو نروح للسيرفر الشخصي ونسوي معاينة للهدر

بس لحظة !! للحين ماغيرنا الاستايل

نحتاج لتفعيل الاستايل الخاص بنا كاستايل افتراضي للاسكربت

وهي من ملف الكونفج

نفتح ملف الكونفج الخاص بلاسكربت

رمز PHP:

//الاستايل الافتراضي

$style="traidnt-des";

نضع اسم المجلد الخاص بلاستايل

انا وضعت

رمز PHP:

//الاستايل الافتراضي

$style="ahmod";

طبعا ها يعتمد على تسميتك للملف من البداية

للعلم : طريقة تغيير الاستايل الافتراضي للاسكربتات تختلف من اسكربت لاخر

فبعض الاسكربتات يتم التغيير من لوحة تحكم الاسكربت والاخر يتوجب عليك حفظ المجلد باسم def

فهي ليست قاعدة اساسية ان يكون التغيير من ملف الكونفج ! لذا وجب التنويه

نروح للاسكربت ونسوي معاينه وراح تشوف قالب الهدر الخاص بك تمام التمام

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

الحين بنفس الطريقة اللى عدلنا فيها الهدر ووزعناه واستبدلنا الملفات نسويها في الفوتر

دون اي اختلاف

الحين نشوف الصفحة الرئيسية

ماشاء الله الهدر والفوتر تمام التمام

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

الحين ناقص تعديل الاطار

الاطارات قمنا بتوزيعها وتقطيعها مثل اطارات المنتديات بالضبط

نفتح الاطارات التي تم توزيعها ع الدريم ويفر

مثل ماهو واضح مكتوب في اعلى الاطار كلمة حمل ملفاتك ! طبعا الكلمة تتغيير في كل صفحة

فعندك حل من اثنين

اما ان تقوم بتصميم الاطار ويشمل هالكلمة مع مراعاة تغييرها في كل صفحة

او تقوم بإضافتها بشكل يدوي

انا افضل الاضافة بشكل يدوي فهي اسهل

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

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

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

{stylepath}/

لتظهر لنا الصور

ماعلينا الحين الا نسخ الاكواد من الاطار الموجود داخل صفحة form الى الاطار الخاص بنا

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

رمز PHP:

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td align="center"><div id="man" style="filter: alpha(opacity=70); width: 300px; opacity: 0.7; height:20px">

<p align="center">

<INPUT NAME="man" class="input_blur" TYPE="file" onFocus="FadeIn('man',20);this.className='input_focus';" onBlur="FadeOut('man',20);this.className='input_blur'; "size="30" >div>td>

tr>

<tr>{valid}

<td align="center"><b><br/>{allowedtybe}b>

NAME="../../allow.php">td>

tr>

<tr>

<td align="center"><input type="image" src="{stylepath}/images/upload.jpg" name="dd" border="0" style="border: solid 0px;" width="115" height="53" >td>

tr>

table>

الحين مايبقى لنا الا الرابط الخاص بتحميل الملفات

في حالة وضعك للكلمة داخل اطار التصميم (كلمة تحميل)

فعليك استبدال كود الصورة بهذا الكود

رمز PHP:

<input type="image" src="images/form/traidntform_12.jpg" name="dd" border="0" style="border: solid 0px;" width="322" height="64" >

مع تعديل المسار + اسم الصور والابعاد

الحين انتهينا من نقل الاكواد والحمد لله

نقوم بتحديد الجدول الخاص بلاطار من صفحة form كما حددنا جدول الهدر والفوتر قبل

ثم حذف الجدول

ووضع الجدول الخاص بنا محله

ثم استبدال مسارات الصور مرة اخرى

نتوجه للاسكربت للمعاينه

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

ماشاء الله كل شئ تمام

طبعا ماعليك من الخلفية البيضاء والوان الخطوط الغير مضبوطة لان كل ها راح يتم تعديله اثناء تعديل ملف css

كذا الصفحة الرئيسية انتهت والحمد لله

باقي الصفحات الفرعية

الصفحات الفرعية مثلها تماما مثل صفحة الاطار

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

ثم نفتح صفحة الاطار الخاص بنا

نقل البيانات من الاطار القديم الى الاطار الخاص بنا

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

ووضع جدول الاطار الخاص بنا محله

ثم تكرار العملية على كافة الصفحات الفرعية دون اي مشاكل بإذن الله

بعد الانتهاء من كافة الصفحات الفرعية لا يتبقى لنا الا تعديل ملف css

راح تحصله موجود داخل مجلد css

افتحه بالدريم ويفر او بالمفكرة

وعدل على الوان الخطوط وغيرها

وفي النهاية

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

ارجو من الله سبحانه وتعالى ان يكون الشرح انال اعجاب الجميع

وان يكون شرح وافي وكافي

اتمنى تكون الفكرة وصلت لديكم

حاولت بقدر المستطاع جعل الشرح عمومي ليشمل كافة الاسكربتات

اي شئ او اي نقطة غير واضحة ان شاء الله مابقصر معكم

رد: شرح كيفية تقطيع وتركيب الاستايل على الاسكربتات ,التطبيق على مركز ترايدنت لرفع الملفات4/5/2010, 16:29

شكرا

رد: شرح كيفية تقطيع وتركيب الاستايل على الاسكربتات ,التطبيق على مركز ترايدنت لرفع الملفات28/6/2010, 11:52

شكرا

انتقل الى:

صلاحيات هذا المنتدى:

لاتستطيع الرد على المواضيع في هذا المنتدى

موقع متخصص لـ تصوير - تصميم - تصاميم فيديو - مونتاج - مونيتير - برمجة - شبكات

شرح كيفية تقطيع وتركيب الاستايل على الاسكربتات ,التطبيق على مركز ترايدنت لرفع الملفات