فوفو6
02-10-2010, 08:55 PM
السلامـ عليكمـ ورحمهـ الله وبركاتهـ ,,
~
كيفكمـ اخواني // خواتي.؟
عساكمـ بخير*http://www.traidnt.net/vb/images/smilies/icon30.gif ..
اليومـ حبيت اشرح طريقهـ جدا رائعهـ ..
لجعل الهيدر بيمين او يسار الصفحهـ ..
بعـــــــــــــــــــــــ ـــــــــيدا عن الطرق الأعتياديهـ ..
نبدء بــسم الله ..
~
اولا الطريقه هذي تعتمد على تفكيرك في اخراج الأستايل بشكل غير ..
..
ثانيا نحتاج لعمل اطار جميل عاد انتم تبدعون فيه ويكون خاص للمحتوى ..
بعد مانصمم الأطار ونقوم بتوزيعه مثل اي توزيع راح يكون مثل هذا الشكل ..
,
اضغط ع الصوره للتكبير
http://img638.imageshack.us/img638/7207/capture3j.th.png (http://img638.imageshack.us/img638/7207/capture3j.png)
~
طيب بعد التوزيع علينا نضبط شغلنا للهيدر اللي غالبا مايكون فيه اسم الموقع ..
ولازم نحاول نبدع فيه وبقوه حتى يطلع الشكل رائع مره ..
(طبعا اللي تشوفونه هذا مجرد مثال فقط لا غير حتى توصل الفكره http://www.traidnt.net/vb/images/smilies/shiny01.gif)
ادري طولت كلام ..
نرجع لمحور طريقتنا ..
~
الحين الله يسلمكمـ لازم نتجه الى ..
لوحهـ التحكم > الإستايلات والقوالب > التحكم بالإستايلات > الأستايل المراد التعديل عليه >*CSS رئيسي
..
الحين نشوف الصور اللي راح اضعها وراح يكون فيها الشرح بالترتيب ..
~
1-
http://img192.imageshack.us/img192/5721/headrx.png
2-
http://img29.imageshack.us/img29/2120/righth.png
3-
http://img638.imageshack.us/img638/5503/footerq.png
4-
http://img33.imageshack.us/img33/3251/lefts.png
~
طبعا انا ضبطت الأعدادات على هـ الأرقام ..
كود PHP:
margin: 50px 250px 0px 0px;
padding: 0px;
لينتج لي هذا الشكل ..
اضغط ع الصوره للتكبير
http://img402.imageshack.us/img402/140/capture5y.th.png (http://img402.imageshack.us/img402/140/capture5y.png)
~
طبعا باقي لنا الخلفيهـ ..
حنا بعد مانضبط الأعدادات على اللي يناسبنا ..
نقوم بتصوير كامل الصفحه واخذ مقاس العرض اللي بنخصصه للهيدر ..
اما بالنسبه للطول يفضل ان يكون بهذا المقاس: 1080
طبعا انا على حسب الأعدادات اللي عملتها فوق ..
بعد الحوسه و الحساب طلع لي هذي المقاسات ..
العرض:250
الطول:1080
وبعدين نضع هذا الكود للخلفيه ..
في > خواص CSS الإضافية
مع تغيير مايلزمنا ..
كود PHP:
background-image: url(smp/logo.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top right;
طبعا الكود انا مخليه يمين ..
لو انت مضبط الأعدادات على اليسار تغير الكلمه الى -- left ..
~
النتيجه النهـائيه للدرس
,
http://img96.imageshack.us/img96/4091/capture4w.th.png (http://img96.imageshack.us/img96/4091/capture4w.png)
~
________
منقول
~
كيفكمـ اخواني // خواتي.؟
عساكمـ بخير*http://www.traidnt.net/vb/images/smilies/icon30.gif ..
اليومـ حبيت اشرح طريقهـ جدا رائعهـ ..
لجعل الهيدر بيمين او يسار الصفحهـ ..
بعـــــــــــــــــــــــ ـــــــــيدا عن الطرق الأعتياديهـ ..
نبدء بــسم الله ..
~
اولا الطريقه هذي تعتمد على تفكيرك في اخراج الأستايل بشكل غير ..
..
ثانيا نحتاج لعمل اطار جميل عاد انتم تبدعون فيه ويكون خاص للمحتوى ..
بعد مانصمم الأطار ونقوم بتوزيعه مثل اي توزيع راح يكون مثل هذا الشكل ..
,
اضغط ع الصوره للتكبير
http://img638.imageshack.us/img638/7207/capture3j.th.png (http://img638.imageshack.us/img638/7207/capture3j.png)
~
طيب بعد التوزيع علينا نضبط شغلنا للهيدر اللي غالبا مايكون فيه اسم الموقع ..
ولازم نحاول نبدع فيه وبقوه حتى يطلع الشكل رائع مره ..
(طبعا اللي تشوفونه هذا مجرد مثال فقط لا غير حتى توصل الفكره http://www.traidnt.net/vb/images/smilies/shiny01.gif)
ادري طولت كلام ..
نرجع لمحور طريقتنا ..
~
الحين الله يسلمكمـ لازم نتجه الى ..
لوحهـ التحكم > الإستايلات والقوالب > التحكم بالإستايلات > الأستايل المراد التعديل عليه >*CSS رئيسي
..
الحين نشوف الصور اللي راح اضعها وراح يكون فيها الشرح بالترتيب ..
~
1-
http://img192.imageshack.us/img192/5721/headrx.png
2-
http://img29.imageshack.us/img29/2120/righth.png
3-
http://img638.imageshack.us/img638/5503/footerq.png
4-
http://img33.imageshack.us/img33/3251/lefts.png
~
طبعا انا ضبطت الأعدادات على هـ الأرقام ..
كود PHP:
margin: 50px 250px 0px 0px;
padding: 0px;
لينتج لي هذا الشكل ..
اضغط ع الصوره للتكبير
http://img402.imageshack.us/img402/140/capture5y.th.png (http://img402.imageshack.us/img402/140/capture5y.png)
~
طبعا باقي لنا الخلفيهـ ..
حنا بعد مانضبط الأعدادات على اللي يناسبنا ..
نقوم بتصوير كامل الصفحه واخذ مقاس العرض اللي بنخصصه للهيدر ..
اما بالنسبه للطول يفضل ان يكون بهذا المقاس: 1080
طبعا انا على حسب الأعدادات اللي عملتها فوق ..
بعد الحوسه و الحساب طلع لي هذي المقاسات ..
العرض:250
الطول:1080
وبعدين نضع هذا الكود للخلفيه ..
في > خواص CSS الإضافية
مع تغيير مايلزمنا ..
كود PHP:
background-image: url(smp/logo.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top right;
طبعا الكود انا مخليه يمين ..
لو انت مضبط الأعدادات على اليسار تغير الكلمه الى -- left ..
~
النتيجه النهـائيه للدرس
,
http://img96.imageshack.us/img96/4091/capture4w.th.png (http://img96.imageshack.us/img96/4091/capture4w.png)
~
________
منقول