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

hussooonah

عضو جديد
15 مارس 2009
245
1
0
السلام عليكم ورحمة الله وبركاته اتمنى مساعدتي في تصميم استايل والطريقة السليمه للتقطيع والتركيب بالفتوشوب والصوره بالمرفقات
 

hussooonah

عضو جديد
15 مارس 2009
245
1
0
مشكور استاذي الفاضل وانا في انتظار كل معلومه مفيده منك
 

Alamia

:: محمد الشرقاوى ::, Contributor
Coder/Designer
تفضل اخى الفاضل

بسم الله نبدا

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

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

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

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

support-ar.com-bd4ccba749.gif


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

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

حفظ للويب

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

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

كما بالصورة

support-ar.com-c5b1feef51.gif



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

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

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

support-ar.com-fc974a4cab.gif



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



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

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

support-ar.com-8c9bb50d0d.gif


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

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

كما بالصورة

support-ar.com-ec912eaaa2.gif


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

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

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

ثم نحفظ العمل

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

support-ar.com-47e786bf1d.gif



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

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


support-ar.com-30882de068.gif


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

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

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

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


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

hussooonah

عضو جديد
15 مارس 2009
245
1
0
استاذي الفاضل بالنسبه لصورة الهيدر والفوتر اذا كنت اريد ان تكون بحجم الصفحه سواء تمددت او تقلصت
فما هي الطريقة اذا سمحت




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

Alamia

:: محمد الشرقاوى ::, Contributor
Coder/Designer
واليهمك اخى وموفق ان شاء الله واسف على التاخير

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

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

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

ثم

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

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

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

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

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

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

hussooonah

عضو جديد
15 مارس 2009
245
1
0
السموحة استاذي الفاضل ماقصدت الي قلتلي عليه الكود الي احطه

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

المرفقات

  • هيدر.JPG
    هيدر.JPG
    54.7 KB · المشاهدات: 120
  • فوتر.JPG
    فوتر.JPG
    36.5 KB · المشاهدات: 119

Alamia

:: محمد الشرقاوى ::, Contributor
Coder/Designer
اخى الفاضل ارفق لى كود الهيدر والفوتر

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

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

متابع
 

hussooonah

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

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

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

Alamia

:: محمد الشرقاوى ::, Contributor
Coder/Designer
الازرار لها تقطيع خاص اخى

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

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

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

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


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

hussooonah

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

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

ومشكور

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

Alamia

:: محمد الشرقاوى ::, Contributor
Coder/Designer
اخى الفاضل ارفق لى الكود كما ذكرت لك مسبقا

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

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

hussooonah

عضو جديد
15 مارس 2009
245
1
0
الحمد لله استاذي الفاضل اتممت التركيب بالتعديلات

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

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

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

المرفقات

  • الهيدر.txt
    848 بايت · المشاهدات: 127
  • الفوتر.txt
    406 بايت · المشاهدات: 129

Alamia

:: محمد الشرقاوى ::, Contributor
Coder/Designer
الحمد لله استاذي الفاضل اتممت التركيب بالتعديلات

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

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

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

hussooonah

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

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

Alamia

:: محمد الشرقاوى ::, Contributor
Coder/Designer
تغير طريقة ازرار المنتدى من نحية التصميم زى ما هو موضح عندنا بالدعم العربى زرار مثلا اقتباس


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

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

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

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

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

موفق اخى
 

hussooonah

عضو جديد
15 مارس 2009
245
1
0
مشكور استاذي الفاضل تم تغيير الازرار بنجاح

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

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

hussooonah

عضو جديد
15 مارس 2009
245
1
0
استاذي الفاضل لقد انشأت كل شي وركبت الاستايل على المنتدى

اتمنى ان تراه

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

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

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

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

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

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