شرح تركيب الهايدر لمجلة mkportal

ابـن غياث · 01-04-2008, 09:18 صباحاً

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

ماراح ارد على اي موضوع من مواضيع المرحله الاولى نهائيا الخاصه بالتصميم

في البدايه نربط ملف css ببرنامج اكسبريشن ومشروحه بالصور في الدرس التالي

http://www.gulfson.com/vb/t76051.html

بعد ربطه بنحتاج نقل الصور الى ملف css

الوسم الناشيئ من تقطيع الاستايل بيكون بالشكل التالي

كود:

div.test1-01 {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 35px;
	height: 27px;
	}

نتبع الطريقه التاليه من خلال البرنامج

مثل ما شاهدتوا نختار الكلاس المطلوب (( تختلف مسمياتها )) وكلك يمين عليها وبعدها نختار Modify style

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

نختار في البدايه Background وبعدها نختار الصوره

بيضاف لوسم css الكود التالي

كود:

background-image: url('images/test1_01.gif');

الوسم كامل للمثال المطروح اعلى

كود:

div.test1-01 {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 35px;
	height: 27px;
	background-image: url('images/test1_01.gif');
}

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

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

كود:

left: 0px;
	top: 0px;

position =التموضع مكان الصوره
absolute= معناها تموضع حر
left= بجانبها رقم صفر 0 معناها الصوره على اليسار بدون مسافات
top= بجابها ايضا رقم صفر 0 معناها الصوره اعلى بدون مسافات
width: 35px= عرض الصوره مهم جداً اذا وضعنا صوره بجانبها نحدد left بنفس عرض الصوره الاولى
height: 27px= ارتفاع الصوره

انتهينا من شرح وضع الصور طيب لو بغينا نضع صوره متمدده ؟؟

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

كود:

div.test1-02 {
	position: absolute;
	left: 35px;
	top: 0px;
	width: 95%;
	height: 27px;
	background-image: url('test1_02.gif');
	right: 25px;
}

هذا الوسم للصوره الثانيه المتمدده لاحظوا العرض width اعطيته نسبه مؤيه بمعنى يكون متمدد بعرض الصفحه وتبدء بعد الصوره الاولى left وهذا عرض الصوره الاولى اللي قلت لكم عليه مهم right عرض الصوره اللي بعدها وايضا مهم والا بتغطي عليه صورة التمدد

الصوره الثالثه راح استغني عنها بالصوره الثانيه حتى اخفف تصفح الاستايل

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

كود:

div.test1-04 {
	
	position: absolute;
	top: 0px;
	width: 25px;
	height: 27px;
	right: 0px;
	background-image: url('test1_04.gif');
}

عند كلامنا عن الصوره الاولى وضحت في المكان وضع الصوره في الزاويه اليسار في الاعلى left الآن تغير المكان وطبيعي يتغير التموضع للصوره right في top كلها واحد اصفار لأننا ما زلنا في تركيب اعلى الهيدر

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

كود:

div.test1-05 {
	position: absolute;
	left: 0px;
	top: 27px;
	width: 100%;
	height: 131px;
	background-image: url('test1_05.gif');
}

اكيد لاحظتوا الاختلاف في الارتفاع top=27 والصور السابقه كلها كانت اصفار معناها ان الصوره الخامسه تجي تحت الصور السابقه كلها

واعطيتها نسبه مؤيه للعرض بمعنى تكون متمدده

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

مثال

كود:

<div class="test1-08"><a href="http://www.ssdaa.com/">
	<img alt="" src="images/test1_08.gif" border="0" /></a></div>

الآن باقي كتابة الوسوم xhtml اسهل من السهل

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

كود:

<div class="test1-01"></div>

test1-01= هذا الكلاس الموجوده فيه الصوره

شكل الصفحه بعد التركيب

http://www.ssdaa.com/sda/t16/hea5.jpg

اللحين نفتح ملف الاستايل tpl_main.php ونبدء في تركيب الصور نبدء مع دالة function open_main

وبعد وسم

كود:

<div style="width: {$mainwidth};">

نضيف الاكواد السابقه كلها اللي بداخل وسم body = div

بعدها نفتح جدول ونضيفه اسفلها

كود:

<table style="width:100%;" cellspacing="0" cellpadding="0" >
	<tr>
		<td>&nbsp;</td>
	</tr>

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

كود:

</table>

هذا الجدول الرئيسي للمجله واغلاقه بيكون اخر الاستايل

ارفقت لكم ملف html بداخله وسوم css بالامكان الرجوع لها

وفيه خطأ راح يبان عند تغيير مقاسات الشاشه من يقدر يطلعه ؟؟

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

ابـن غياث · 01-04-2008, 10:03 صباحاً

تصحيح خطأ =

الجدول اخواني نربطه بكلاس

كود:

.test1{
	position: absolute;
	top: 200px;
	right: 0px;
	left: 0px;
}

بيكون ل الجدول

كود:

<table class="test1" cellspacing="0" cellpadding="0" >
	<tr>
		<td>&nbsp;</td>
	</tr>

والملف بعد التعديل في المرفق مازلت انتظر حل الخطأ عند تغيير مقاس الشاشه

ADMIN · 01-04-2008, 10:19 صباحاً

قواك الله ابن غياث وجزاك الله عنا كل خير

GoLdEN QuIlL · 01-06-2008, 07:52 صباحاً

يعطيك العافيه ابن غيااث

ان شاءالله بطبق بس اول شي اتأكد من الدرس اللي قبله

الف الف شكر اخوي

وان شاءالله بنسووي استايلات خطيرة للمجلة من تحت يدك ^_^

دمت بحفظ الرحمن

hadi060 · 01-06-2008, 04:23 مساءً

في الحقيقة مجهودات جابرة أخي ابن غياث، وكان بودي لو أن وقتي وظروفي تسمح بتتبع الدورة أولا بأول، فالعطلة قد ولت، وأنا لا أرتبط حاليا إلا خلال يومي السبت والأحد، ولكن ستكون هناك عطلة قريبة إن شاء الله..
قمت بتحميل جميع الدروس، لأطبق غيابيا (لعدم وجود النت حيث أعمل)، ولحظة الارتباط سأعمل على نشر تطبيقاتي علهي أوفق أخي..
لو طبقت لربما استطعت أن أكتشف الخطأ الذي قلت عليه، ولو أنني أشعر بأن الأمر متعلق بقضية امتداد الصفحة بما أن الخطأ مرتبط ظهوره بمقياس الشاشة.. مجرد تخمين فقط..
بالتوفيق ومني لك أرق تحية..

ابـن غياث · 01-07-2008, 01:56 صباحاً

حياك اخوي admin

GoLdEN QuIlL اتمنى من كل قلبي اوصلكم لبداية الطريق فيكم مبدعين فوق الوصف الله يقدرني اوصلكم المعلومه

هادي عاش من شافك فاقدينك لك فتره لكن عذرك معك وننتظر تطبيقك وحل الخطأ كنت انتظرك تحله ومعك حق المشكله في التمدد على مقاس الشاشات الكبيره على مقاس 800 و 1024 ماراح يبين معك شي

الخطأ والحل موجود في ردي الثاني على الموضوع

GoLdEN QuIlL · 01-07-2008, 10:57 صباحاً

^_^

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

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

دمت بحفظ الرحمن

ابـن غياث · 01-07-2008, 11:11 صباحاً

مدري وش تقصدين بالاستايلات العاديه اذا تقصدين الجداول بخلاص هذا وقتها نستخدمها بس في عرض البيانات اما التصميم css

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

جاري تجهيز تكملة للهايدر

GoLdEN QuIlL · 01-07-2008, 06:12 مساءً

ابن غياث الله يخارجك مني

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

ارفقت لك التطبيق ><

ماكملته كل الدرس قلت اشوف اول لانه اكيد غلط

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

<<<<

الله يعينك علينا اخوي

والعفو منك

دمت بحفظ الرحمن

ابـن غياث · 01-08-2008, 04:57 صباحاً

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

كود:

<-- نكتب التوضيح هنا -->

اذا ما قفلتي الكود بيكون عندك اخطاء كثيره لأنك قلتي للمتصفح تجاوز الاكواد وتجاهلها كنها ماهي موجوده اصلا احذفيها او عدلي عليها الصور المرفقه فيها التوضيح

اكواد css لا بد توضع داخل وسم head وايضا وسم الصوره لابد من اغلاقه

عدلي من وسوم css من #saven-29 الى div.saven-29

وسم بداية الصفحه <html> نستبدله بالتالي

كود:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<div id="Table_01"> احذفيه ايضا ما حنا بحاجه له

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

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

01-06-2008, 07:52 صباحاً	#4 (permalink)
GoLdEN QuIlL عضو مستمر تاريخ التسجيل: Nov 2007 المشاركات: 66 معدل تقييم المستوى: 14	رد: شرح تركيب الهايدر لمجلة mkportal يعطيك العافيه ابن غيااث ان شاءالله بطبق بس اول شي اتأكد من الدرس اللي قبله الف الف شكر اخوي وان شاءالله بنسووي استايلات خطيرة للمجلة من تحت يدك ^_^ دمت بحفظ الرحمن من مواضيع GoLdEN QuIlL في المنتدى •●[ ستايل blue-light]●• [متوسط] درس عمل تصميم أو أفاتار مشكلة صغيروونة في ايطارات الاقسام •●乂[ رسالهـ معتقهـ ]乂●• خطأ: لايمكن قرائة ملف الـ Settings.php تأكد من البيانات المدخله

01-06-2008, 04:23 مساءً	#5 (permalink)
hadi060 :: عضو شرف :: تاريخ التسجيل: Aug 2007 الدولة: المملكة المغربية المشاركات: 616 معدل تقييم المستوى: 66319	رد: شرح تركيب الهايدر لمجلة mkportal في الحقيقة مجهودات جابرة أخي ابن غياث، وكان بودي لو أن وقتي وظروفي تسمح بتتبع الدورة أولا بأول، فالعطلة قد ولت، وأنا لا أرتبط حاليا إلا خلال يومي السبت والأحد، ولكن ستكون هناك عطلة قريبة إن شاء الله.. قمت بتحميل جميع الدروس، لأطبق غيابيا (لعدم وجود النت حيث أعمل)، ولحظة الارتباط سأعمل على نشر تطبيقاتي علهي أوفق أخي.. لو طبقت لربما استطعت أن أكتشف الخطأ الذي قلت عليه، ولو أنني أشعر بأن الأمر متعلق بقضية امتداد الصفحة بما أن الخطأ مرتبط ظهوره بمقياس الشاشة.. مجرد تخمين فقط.. بالتوفيق ومني لك أرق تحية.. من مواضيع hadi060 في المنتدى أيقونات التقييم لألبوم الصور ناقصة في نسخة ابن الخليج+ الحل + اقتراحات لتطوير النسخة [تصحيح] خطأ في ملف اللغة الخاص ببلوك التقويم في المجلة.. إلى كل من يحب مجلة Mkportal نسخة ابن الخليج.. استفسار عن أمر يتعلق بغلق المنتدى بوجود المجلة.. [متوسط] درس الكتابة المضيئة.. __________________ دنيا ومنتديات الأمل نبضات القلوب المرهفة والأقلام الواعدة www.alamalnet.com شكرا شبكة ابن الخليج

01-07-2008, 01:56 صباحاً	#6 (permalink)
ابـن غياث :: تطوير مجلة المنتديات :: تاريخ التسجيل: May 2006 المشاركات: 647 معدل تقييم المستوى: 78168	رد: شرح تركيب الهايدر لمجلة mkportal حياك اخوي admin GoLdEN QuIlL اتمنى من كل قلبي اوصلكم لبداية الطريق فيكم مبدعين فوق الوصف الله يقدرني اوصلكم المعلومه هادي عاش من شافك فاقدينك لك فتره لكن عذرك معك وننتظر تطبيقك وحل الخطأ كنت انتظرك تحله ومعك حق المشكله في التمدد على مقاس الشاشات الكبيره على مقاس 800 و 1024 ماراح يبين معك شي الخطأ والحل موجود في ردي الثاني على الموضوع من مواضيع ابـن غياث في المنتدى استايلات اجنبيه لمجلة mkportal النسخه الاسلاميه من مجلة mkportal الدعوه عامه للمشاركه شرح تثبيت الخلفيه في استايل mkportal حل مشكله رفع الصور الى البوم صور mkportal نحو استايلات خاليه من الاخطاء متوافق مع المعايير

01-07-2008, 10:57 صباحاً	#7 (permalink)
GoLdEN QuIlL عضو مستمر تاريخ التسجيل: Nov 2007 المشاركات: 66 معدل تقييم المستوى: 14	رد: شرح تركيب الهايدر لمجلة mkportal ^_^ يعني اقدر اسويه بالفرونت بيج والا استخدم تركيب الاستايلات العادية ؟ بحاول فيه على نفس طريقة الدرس وان شاءالله اقدر اسويه دمت بحفظ الرحمن من مواضيع GoLdEN QuIlL في المنتدى خطأ: لايمكن قرائة ملف الـ Settings.php تأكد من البيانات المدخله •●乂[ رسالهـ معتقهـ ]乂●• مشكلة صغيروونة في ايطارات الاقسام •●[ ستايل blue-light]●• [متوسط] درس عمل تصميم أو أفاتار

01-07-2008, 11:11 صباحاً	#8 (permalink)
ابـن غياث :: تطوير مجلة المنتديات :: تاريخ التسجيل: May 2006 المشاركات: 647 معدل تقييم المستوى: 78168	رد: شرح تركيب الهايدر لمجلة mkportal مدري وش تقصدين بالاستايلات العاديه اذا تقصدين الجداول بخلاص هذا وقتها نستخدمها بس في عرض البيانات اما التصميم css الفرونت بيج مثل ما ذكرت لك للكتابه فقط تكتبين مثل مافي الصور والامثله في تعليمات برمجيه وتحفظين الصفحه على السيرفر الشخصي تدخلين عليها بالاكسبلورر حتى تشوفين تعديلك جاري تجهيز تكملة للهايدر من مواضيع ابـن غياث في المنتدى درس تصميم البلوكات في مجلة mkportal [hack ] ايقونه بجانب كل قسم في مكتبة الدروس mkportal قاعدة بيانات مكتبة الدروس لمجلة mkportal انشاء ملف css جديد لصور الاستايل درس انشاء قائمة menu في مجلة mkportal

	Sitemap \| Archive \| Tag Could
	<a rel="nofollow" href="http://www.gulfson.com/ads/www/delivery/ck.php?n=a8fdc2c1&cb=INSERT_RANDOM_NUMBER_HERE" target="_blank"><img src="http://www.gulfson.com/ads/www/delivery/avw.php?campaignid=3&source=gulfson&cb=INSERT_RANDOM_NUMBER_HERE&n=a8fdc2c1" border="0" alt="" /></a>

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)

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

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
[شرح] تركيب مجلة MKPortal	بحريني	مجلة المنتديات mkPortal	531	09-27-2008 06:07 صباحاً
أعادةالعرض من جديد ولمدة يومين فقط شركة فهد ديزاين : شركه سعودية ((	فهد ديزاين	تبادل إعلاني و تجاري	5	08-08-2007 11:04 مساءً
خصائص المجلة متعددة المنتديات MKPortal	ADMIN	مجلة المنتديات mkPortal	33	06-04-2007 01:48 مساءً
::.+: فهرس استيلات المجله :+.:: اخر تحديث 7-2-2007	كرم العربي	قسم ستايلات مجلة المنتديات mkPortal Styles	0	12-09-2006 04:19 صباحاً
مطلوب شرح تركيب مجلة MKPortal من غير المنتدى ؟	almjhol	مشاكل وحلول الـ مواقع	3	10-03-2006 06:58 صباحاً

شرح تركيب الهايدر لمجلة mkportal

منتديات شبكة ابن الخليج