Abdullhadi JC
05-10-2012, 03:55 PM
http://idata.over-blog.com/3/97/86/24/2/21-446_thumb.gif
بسم الله الرحم الرحيم
نكمل سلسلة هذه الدروس بالجزء الثالث والأخير, وسنشرح كما تطرقنا سابقاً لعمل مثل هذا الشكل:
http://www.tech-wd.com/wd/wp-content/uploads/xhtmlcss2.gif
حيث انتهينا من عمل الـ Header وهو أول مستطيل في الأعلى وكالك من الجزء الجانبي الأيمن المستطيل الذي على اليمين وكذلك الـ Footer وهو الجزء السفلي من الموقع باقي لنا الجزء الجانبي الأيسر والمستطيلان الصغيران اللذان تحت الهيدر وفوق الفوتر لأي محتوى وهما بسيطان جداً.
فبعد الانتهاء من العمل سيكون كالتالي:
http://www.tech-wd.com/wd/wp-content/uploads/2009/10/prophet_muhmmad_pbuh32.gif
بسم الله نبدأ بإنشاء الجانب الأيسر من الموقع وذلك بإضافة العنصر أو الوسم الخاص بالـ HTML في داخل الـ باسم
<div id=”side_left”></div>
وذلك بعد عنصر الجانب الأيمن
<div id=”side_right”></div>:
<div id="side_left">
<ul class="side_menu">
<li>
<h2>الرعاة الإعلاميون</h2>
<ul>
<li><a href="http://www.islamway.com"><img src="images/banner1.gif" /></a></li>
<li><a href="http://www.islamweb.net"><img src="images/banner2.gif" /></a></li>
<li><a href="http://www.gafelh.com"><img src="images/banner3.gif" /></a></li>
</ul>
</li>
</ul>
<ul class="side_menu">
<li>
<h2>شاركنا الآن</h2>
<ul>
<li>يمكنك المشاركة في دعم الموقع لنصرة الرسول صلى الله عليه وسلم ونشر مبادئه وقيمه العالية لتكسب الأجر العظيم من الله حيث الله أمرنا بالاقتداء به والسعي إلى طاعة الله وطاعة رسوله الكريم جعلني الله وإياكم من من يسمعون الكلام ويتبعون أحسنه</li>
</ul>
</li>
</ul>
</div>
بعد إضافة العناصر المطلوبة في القائمة الجانبية نقوم بتنسيقها باستخدام الـ CSS هناك بعض الأجزاء التي عُملت من قبل مثل القائمة ستكون بشكل أنيق بنفس القائمة الجانبية اليمنى وهنا تكمن قيمة الـ CSS فقط سنقوم بمواساتها بالجانب الأيسر وذلك من خلال التعديل على ملف style.css أول شي نضيف هذا الكود:
img {
border:none;
}
هذا الكود لكي يجعل الحدود لأي صوره فيها رابط بدون حدود بحيث أنه بطبيعة الحال يقوم بوضع حد كبير جداً في هذه الحالة لا نريده, ثم نكمل بإضافة:
#side_left {
float:left;
width:180px;
}
ونقوم بتحرير #content بإضافة margin-left:180px; ليكون كاملاً كالتالي:
#content {
margin-right:180px;
margin-left:180px;
padding:10px;
}
فقط لا غير، الآن شاهد النتيجة:
http://www.tech-wd.com/wd/wp-content/uploads/2009/10/prophet_muhmmad_pbuh31.gif
جانب أيسر بالكامل رائع وجميل, حسناً سنقوم الآن بإضافة مستطيل تحت الهيدر (الجزء العلوي) بالطريقة التالية:
قبل <div id=”side_right”> والذي يكون بعد جزء header نضيف التالي :
<div id="navigation">أنت هنا ( <a href="index.htm">الصفحة الرئيسية</a> )</div>
ثم نتجه إلى ملف style.css ونضيف النمط الخاص بالـ navigation كالتالي:
#navigation {
padding:7px;
border:1px solid #a2e9a2;
background:#e9f9e9;
font-family:Tahoma;
font-size:8pt;
margin-top:5px;
}
الآن نضيف المستطيل الذي أعلى الفوتر بإضافته قبل <div id=”footer”> كالتالي:
<div id="footer_menu">
<a href="index.htm">الرئيسية</a> |
<a href="#">من نحن</a> |
<a href="#">ادعمنا</a> |
<a href="#">اتصل بنا</a> |
<a href="#">إلى الأعلى</a>
</div>
ثم نعطيها النمط التالي:
#footer_menu {
text-align:center;
font-family:Tahoma;
font-size:8pt;
border-top:1px solid #b9e9b9;
padding-top:7px;
margin-top:10px;
}
لتصبح النتيجة النهائية كالتالي:
http://www.tech-wd.com/wd/wp-content/uploads/2009/10/prophet_muhmmad_pbuh32.gif
الى هنا انتهى الجزء الأخير من الدرس
ويمكنك تحميل نتيجة الدرس من المرفقات لرؤيتها وتحليل الشيفرة وفهمها
^______________^
انتظروني في دروس جديدة وحصرية
بسم الله الرحم الرحيم
نكمل سلسلة هذه الدروس بالجزء الثالث والأخير, وسنشرح كما تطرقنا سابقاً لعمل مثل هذا الشكل:
http://www.tech-wd.com/wd/wp-content/uploads/xhtmlcss2.gif
حيث انتهينا من عمل الـ Header وهو أول مستطيل في الأعلى وكالك من الجزء الجانبي الأيمن المستطيل الذي على اليمين وكذلك الـ Footer وهو الجزء السفلي من الموقع باقي لنا الجزء الجانبي الأيسر والمستطيلان الصغيران اللذان تحت الهيدر وفوق الفوتر لأي محتوى وهما بسيطان جداً.
فبعد الانتهاء من العمل سيكون كالتالي:
http://www.tech-wd.com/wd/wp-content/uploads/2009/10/prophet_muhmmad_pbuh32.gif
بسم الله نبدأ بإنشاء الجانب الأيسر من الموقع وذلك بإضافة العنصر أو الوسم الخاص بالـ HTML في داخل الـ باسم
<div id=”side_left”></div>
وذلك بعد عنصر الجانب الأيمن
<div id=”side_right”></div>:
<div id="side_left">
<ul class="side_menu">
<li>
<h2>الرعاة الإعلاميون</h2>
<ul>
<li><a href="http://www.islamway.com"><img src="images/banner1.gif" /></a></li>
<li><a href="http://www.islamweb.net"><img src="images/banner2.gif" /></a></li>
<li><a href="http://www.gafelh.com"><img src="images/banner3.gif" /></a></li>
</ul>
</li>
</ul>
<ul class="side_menu">
<li>
<h2>شاركنا الآن</h2>
<ul>
<li>يمكنك المشاركة في دعم الموقع لنصرة الرسول صلى الله عليه وسلم ونشر مبادئه وقيمه العالية لتكسب الأجر العظيم من الله حيث الله أمرنا بالاقتداء به والسعي إلى طاعة الله وطاعة رسوله الكريم جعلني الله وإياكم من من يسمعون الكلام ويتبعون أحسنه</li>
</ul>
</li>
</ul>
</div>
بعد إضافة العناصر المطلوبة في القائمة الجانبية نقوم بتنسيقها باستخدام الـ CSS هناك بعض الأجزاء التي عُملت من قبل مثل القائمة ستكون بشكل أنيق بنفس القائمة الجانبية اليمنى وهنا تكمن قيمة الـ CSS فقط سنقوم بمواساتها بالجانب الأيسر وذلك من خلال التعديل على ملف style.css أول شي نضيف هذا الكود:
img {
border:none;
}
هذا الكود لكي يجعل الحدود لأي صوره فيها رابط بدون حدود بحيث أنه بطبيعة الحال يقوم بوضع حد كبير جداً في هذه الحالة لا نريده, ثم نكمل بإضافة:
#side_left {
float:left;
width:180px;
}
ونقوم بتحرير #content بإضافة margin-left:180px; ليكون كاملاً كالتالي:
#content {
margin-right:180px;
margin-left:180px;
padding:10px;
}
فقط لا غير، الآن شاهد النتيجة:
http://www.tech-wd.com/wd/wp-content/uploads/2009/10/prophet_muhmmad_pbuh31.gif
جانب أيسر بالكامل رائع وجميل, حسناً سنقوم الآن بإضافة مستطيل تحت الهيدر (الجزء العلوي) بالطريقة التالية:
قبل <div id=”side_right”> والذي يكون بعد جزء header نضيف التالي :
<div id="navigation">أنت هنا ( <a href="index.htm">الصفحة الرئيسية</a> )</div>
ثم نتجه إلى ملف style.css ونضيف النمط الخاص بالـ navigation كالتالي:
#navigation {
padding:7px;
border:1px solid #a2e9a2;
background:#e9f9e9;
font-family:Tahoma;
font-size:8pt;
margin-top:5px;
}
الآن نضيف المستطيل الذي أعلى الفوتر بإضافته قبل <div id=”footer”> كالتالي:
<div id="footer_menu">
<a href="index.htm">الرئيسية</a> |
<a href="#">من نحن</a> |
<a href="#">ادعمنا</a> |
<a href="#">اتصل بنا</a> |
<a href="#">إلى الأعلى</a>
</div>
ثم نعطيها النمط التالي:
#footer_menu {
text-align:center;
font-family:Tahoma;
font-size:8pt;
border-top:1px solid #b9e9b9;
padding-top:7px;
margin-top:10px;
}
لتصبح النتيجة النهائية كالتالي:
http://www.tech-wd.com/wd/wp-content/uploads/2009/10/prophet_muhmmad_pbuh32.gif
الى هنا انتهى الجزء الأخير من الدرس
ويمكنك تحميل نتيجة الدرس من المرفقات لرؤيتها وتحليل الشيفرة وفهمها
^______________^
انتظروني في دروس جديدة وحصرية