[طلب] مساعدة في تصميم استايل جديد

[hussooonah]

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

 

[Alamia]

محجوز للرد لتنفيذ الشرح المطلوب اخى الفاضل

موفق ان شاء الله

 

[hussooonah]

مشكور استاذي الفاضل وانا في انتظار كل معلومه مفيده منك

 

[Alamia]

تفضل اخى الفاضل

بسم الله نبدا

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

وبعد ذالك سرفق لك تصميمك جاهزا تابع الشرح جيدا وان شاء الله موفق

اولا نفتح برنامج الفوتوشوب ثم ملف فى اعلى القائمة ثم فتح ونختار الوجهة المراد العمل عليها

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

تم فعلانا كما بالصوره دون خطا

نتوجة الى حفظ الملف عن طريق ملف ثم

حفظ للويب

ستظهر لنا قائمة الويب نضغط حفظ ثم

فى خانة File name نكتب اسم الاستايل بللغة الانجليزية على سبيل المثال Alamia

كما بالصورة

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

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

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

قمنا بحذف العمل نتجة الى قائمة عادى بجانب html كما بالصوره



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

ثم نقوم باشاء ثلاث جداول كما بالصوره التالية

وعن طريق صنعة الجداول نقوم بانشاء جداول واحد فقط

ثم نقوم بانشاء ثلاث جداول اخرى

كما بالصورة

ثم نقوم بالضغط على خصائص الجدول عن طريق الوقوف بالموس على الجداول ثم كليك يمين بالماوس

ستظهر لنا قائمة

حدود الجدول صفر متفقين

ثم نحفظ العمل

ثم نقوم بادخل الصورة المطلوبة جيدا الضغط على رقم 4 نتابع كما بالصوره

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

تابع كما بالصوره

1- كود الوسط وليس لنا دخل بة
2- نقوم بحذف هذا الاكود المشار عليها ليكون امتداد الصور /images/Alamia_01.gif بمعنى ان يكون ملجد images داخل مجلد vb الرئسيى
3- ايضاء نقوم بحذفهم كما حصل برقم 2
4- التظليل المشار علية بالاحمر هذا هو الهيدر + الفوتر بمعنى ان نخد هذا الكود الاعلى بمرعة عدم اخذ كود التوسيط المشار علية برقم 1 ثم ننسخة بالهيدر فوق كلمة او كود $spacer_open

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

ثم نحفظ العمل ومن بعد ذالك نقوم بنقل ما بداخل مجلد images داخل مجلد images الموجد داخل مجلد vb الرئيسى

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


وجرب وشوف النتيجة موفق ان شاء الله اخى الفاضل واى استفسار اخر انا جاهز

 

[hussooonah]

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




ومشكووووووووووووووور استاذي الفاضل على الشرح الكاااااااافي والوافي

 

[Alamia]

واليهمك اخى وموفق ان شاء الله واسف على التاخير

بالنسبة لتمدد الاستايل فكل ماعليك وضع هذا الكود

margin: 0px 50px 0px 50px;
padding: 0px;

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

ثم

من القائمة المندسلة التى هى بجانب الاستايل قم بختيار CSS رئيسى

وقم بوضع الكود السابق فى خانة

خلفية المنتدى/Body (التخصيص في هذا الستايل)

خواص CSS الإضافية ضع الكود مع تغير رقم 50 الى ما تريد على حسب عملك

ثم احفظ العمل وشوف النتيجة

موفق ان شاء الله

 

[hussooonah]

السموحة استاذي الفاضل ماقصدت الي قلتلي عليه الكود الي احطه

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

 

[Alamia]

اخى الفاضل ارفق لى كود الهيدر والفوتر

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

وكود الهيدر الذى بالقالب بملف

متابع

 

[hussooonah]

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

اذا انتهيت هل اقطع حتى الازرار لحال لحال

واذا انتهيت اشلون اضيف الروابط الخاصه بالازرار

 

[Alamia]

الازرار لها تقطيع خاص اخى

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

ثم فى برنامج الفرونت بيج يتم الامر هناك

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

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


موفق ان شاء الله

 

[hussooonah]

استاذي الفاضل مانجحت معي طريقة تقطيع الازرار بالفوتوشوب مثل ماقلتلي لكن وجت الدرس في هذا الرابط http://www.altsmeem.com/vb/t8394.html

شرح عمل الازرار

ومشكور

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

 

[Alamia]

اخى الفاضل ارفق لى الكود كما ذكرت لك مسبقا

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

متابع لحين الانتهاء

 

[hussooonah]

الحمد لله استاذي الفاضل اتممت التركيب بالتعديلات

وقد ارفقت اكواد الهيدر والفوتر

انا اتأسف لم تعد عيني تتحمل السهر

سأشاهد الشرح مع شروق الشمس باذن الله

 

[Alamia]

الحمد لله استاذي الفاضل اتممت التركيب بالتعديلات

تمام الحمد لله

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

موفق اخى ان شاء الله

 

[hussooonah]

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

ايضا استاذي الفاضل بلانسبه لتغيير الازرار ماهي الطريقه لتغييرها؟

 

[Alamia]

تغير طريقة ازرار المنتدى من نحية التصميم زى ما هو موضح عندنا بالدعم العربى زرار مثلا اقتباس


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

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

وحفظة بانفس الامتداد وغالبا يكون بامتداد gif ولاتنسى تقوم بتسمية الز الجديد بانفس اسم الزر المراد تغير ثم تقوم برفعة الى المجلد الخاص بة

ثم عمل رفرش للمنتدى ستلاحظ تغير بالز

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

موفق اخى

 

[hussooonah]

مشكور استاذي الفاضل تم تغيير الازرار بنجاح

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

كيف هي طريقة تغيير اللون هل هي عن طريق css رئيسي مثل بقية الالوان بالاستايل

 

[hussooonah]

استاذي الفاضل لقد انشأت كل شي وركبت الاستايل على المنتدى

اتمنى ان تراه

ايضا هناك مشكله صغيره هي اني صممت ازرار خاصة بي مثل اخبرتني سابقا ووضعتها باالاستايل لكن عندما ركبت الاستايل بالمنتدى لم تظهر الازرار مثل ماصممتها:tears:

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

لكن عندما ركبتها على المنتدى الاساسي لم تظهر :tears: فما هي المشكله؟

شاهدت مسار صورة الزر وكانت على مجلد الايميج الاساسي للمنتدى

المشكله اذا قمت باستبدال الازرار ستختفي الازرار الاساسية للمنتدى

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