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

ما هي HTML؟

هي لغة ترميز تستخدم للرمز إلى العناصر الموجودة في صفحة الويب, آخر نسخة
ثابتة هي HTML 4.01 والنسخة القادمة التي يتم العمل عليها حالياً وتطويرها
هي HTML 5.

ما هي XHTML؟
هي HTML ولكن مضاف إليها تطابق شروط الـ XML, آخر نسخة ثابتة هي XHTML 1.1
والنسخة القادمة التي يتم العمل عليها وتطويرها حالياً هي XHTML 2.0.

ما هي CSS؟

هي لغة تنسيق أنماط تستخدم لشرح تصميم الموقع وبمعنى آخر يتم تلوين وتنسيق
عناصر الرموز في لغة الترميز XHTML.

النسخة الأخيرة من هذه اللغة هي CSS 2.1 ويتم العمل والتطوير على CSS 3
والتي تحتوي أيضاً على مميزات إضافية جديدة قادمة.

وسنشرح بعض التفاصيل الأخرى مع لغة XHTML هنا.
مالفرق بين XHTML و HTML؟
الفروقات شبه بسيطة جداً XHTML هي HTML العادية لكن باختلافات بسيطة حيث X
تعني Extensible أي ممتدة لـ XML لتوافق وتطابق المعايير الخاصة بها بلغة
XML. وهذه من أهم الفروق في XHTML :

العناصر في XHTML يجب أن تكون حروف صغيرة (lowercase) أي
وليس
العناصر في XHTML يجب أن تكون مرتبة أي لا تكون هناك
عناصر متداخلة على بعضها أي example وليس example
العناصر
في XHTML يجب أن تكون مغلقة بإحكام في مكانها الصحيح وحتى لو كان عنصر
بدون محتوى,كـ وليس
XHTML يجب أن يحتوي
على عنصر واحد فقط رئيسي, كـ واحد فقط

هل استخدم XHTML أو HTML؟

قد يكون طبعاً XHTML في أغلب الأوقات بالفروقات التي تكون أفضل من HTML في
سهولة تطويرها وغيرها من الفروقات, ولكن في بعض الأحيان قد تتطلب
لاستخدام HTML عادية, ولكن في معظم الأوقات لن تواجه أي مشاكل.

هل أتعلم XHTML أو CSS أو كليهما؟
تأتيني أسئلة كثيرة بهذا الخصوص, هاتين اللغتين إذا كنت تنوي تصميم وتطوير
مواقع إنترنت بشكل جدي فيجب عليك تعلم كليهما, مع العلم أنهما سهلة جداً
كل ما عليك هو ممارستها بشكل بسيط حتى تعتاد عليها, بشكل مختصر يجب عليك
تحديد العناصر اللازمة في الموقع باستخدام (XHTML) وبطريقة أخرى تحديد
ألوان وتنسيق العناصر باستخدام (CSS).
كل ما سبق هو شرح نظري والآن سنقوم بتطبيق عملي بسم الله نبدأ… في هذا
الدرس سيتم شرح طريقة عمل موقع باستخدام XHTML و CSS معاً بشكل جيد.
إلى التطبيق

سنتعلم تطبيق وإنشاء صفحة بالشكل التالي باستخدام اللغتين XHTML و CSS:

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

فلنقل أننا سنقوم بتصميم موقع خاص بالتعريف عن الرسول صلى الله عليه وسلم,
فنبدأ بإنشاء المجلد الخاص بالموقع مثلاً في سطح المكتب باسم
(prophet_muhmmad_pbuh):

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

وسنبدأ الآن بإنشاء صفحة جديدة بوضع رموز الموقع أو عناصر الموقع بلغة
XHTML وذلك باستخدام أي محرر ويمكنك استخدام Notepad++ كما تم استخدامه في
دورة الـبي اتش بي أو استخدام المفكرة بأقل تقدير أو استخدام برامج متقدمة
مثل برامج متقدمة مثل MS Expression Web أو Adobe Dreamweaver أو MS
Sharepoint Designer الذي تم الإعلان عن نشره مجاناً.

الصيغة الرئيسية لكل صفحة ويب هي :

كود HTML:
<html>
<head>
<title>عنوان الموقع</title>
</head>
محتوى الموقع
<body>
</body>

</html>

يجب دائماً عملها وعادة ما يتم إنشاءها مباشرة تلقائياً بمجرد إنشاء صفحة
جديدة في برامج متقدمة مثل MS Expression Web أو Adobe Dreamweaver.
لا ننسى فقط في الصيغة الرئيسية أن نتأكد بأن العنصر html يحتوي على
الخاصية dir=”rtl” وهذه الخاصية تجعل الصفحة من اليمين إلى اليسار للغة
العربية.
سنبدأ الآن بكتابة عنوان الموقع ومن ثم إضافة العناصر الرئيسية للموقع
داخل العنصر body أي بجسم الصفحة والعناصر هي (الجزء العلوي من الموقع وما
يحتويه + قائمة جانبية + عنوان الصفحة + محتوى الصفحة + الجزء السفلي من
الموقع وما يحتويه) وذلك كالتالي :

كود HTML:
<div id="header">
<h1>محمد صلى الله عليه وسلم</h1>
<h4>موقع تعريفي عن الرسول الكريم</h4>
</div>
ستجد أن ما تم إضافته هو أولاً
وهذا العنصر يسمى div اختصاراً لـ division ومعناه قسم, فعند تحديد قسم
أو جزء معين فنستخدم div مثل تحديد الجزء الأسفل أو الجز الأوسط أو الجزء
العلوي.
وتم إعطاء هذا القسم العلوي اسم header للتعرف عليه عند تلوينه بالـ CSS
وتم كتابة الخاصية id لإعطاءه اسم وهناك خاصية أخرى لإعطاء اسم باسم
class, سيتم استخدامها بعد قليل وشرح الفرق بينهما, هنا أريدك أن تعرف فقط
بأن كل قسم يجب أن يحمل اسم خاص به للتعريف به لأننا داخل body سنستخدم
أكثر من قسم كالقسم العلوي والقسم السفلي وقسم محتوى الصفحة الذي هو القسم
الأوسط…الخ
بعدها أضفنا

عادة ما يتم كتابة h1 في أي عنوان رئيسي وذلك لأنه يعني فقرة بخط رئيسي
أول header1 وهناك header2 و header3 و header4 وتم استخدام العنوان
الرئيسي رقم 4 لكتابة شرح مختصر عن الموقع أو الشعار النصي للموقع وذلك
لأنه عنوان رئيسي لا نحتاج لتكبيره فـ 1 تعني كبير جداً و 2 أصغر و 3 أصغر
.. الخ
انتهينا من شرح الكود البسيط السابق في لغة الـ XHTML حيث سيكون داخل body
بهذه الطريقة

كود HTML:
<html>
<head>
<title>محمد صلى الله عليه وسلم</title>
</head>
<body>

<div id="header">
<h1>محمد صلى الله عليه وسلم</h1>
<h4>موقع تعريفي عن الرسول الكريم</h4>
</div>

</body>

</html>
فنقوم بحفظ الصفحة في مجلد (prophet_muhmmad_pbuh) باسم index.htm
ولماذا تم تسميته index؟ وذلك لأنه الصفحة هي الصفحة الرئيسية ودائماً يجب
أن يكون اسم الصفحة الرئيسية index لماذا؟ لأن عند فتح موقع http://www.example.com
فإنه يتم فتح index مباشرة لأنه هو الصفحة الرئيسية.

فبعد الحفظ وفتح الصفحة ستظهر النتيجة كالتالي :

تصميم موقع خاص بالتعريف عن الرسول صلى الله عليه وسلم Pm2%281%29

الآن تقريباً فهمنا XHTML, أريد أن نفهم CSS قبل عرض العناصر المتبقية للـ
XHTML

طرق استخدام الـ CSS

لكي نقوم باستخدام لغة CSS هناك 3 طرق
1/ أن ننشئ ملف جديد باسم style.css في المجلد (prophet_muhmmad_pbuh) *
هذه افضل طريقة معتمدة بالمعايير القياسية العالمية
2/ أن نكتب الـ CSS داخل ملف الـ HTML أي مباشرة على ملف index.htm ولكن
داخل الوسم وداخل وسم يكتب كالتالي (

)
3/ أن يتم كتابة الـ CSS داخل سطور الـ HTML على كل عنصر كالتالي (
)
نحن سنعتمد الطريقة الأولى والأفضل وسنكتب داخل ملف الـ style.css التالي :

كود HTML:
#header {
padding:20px;
background:url(images/header_bg.gif);
border:3px green solid;
}

بعد حفظها يجب
علينا استدعاء الملف داخل ملف index.htm وذلك عن طريق كتابة الكود التالي
داخل العنصر :

كود HTML:
<head>
****** http-*****="Content-Type" content="text/html; charset=utf-8" />
<title>محمد صلى الله عليه وسلم</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>

الآن ستظهر
النتيجة كالتالي :

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

جميل هاه؟, طبعاً استخدمنا في أكواد لغة CSS حدود خضراء
وخلفية بالصورة الموضحة أمامكم مع مسافة داخلية تساوي 20 بكسل أو نقطة
فقط, فهذا هو التصميم للموقع باستخدام CSS وذلك للعنصر header فقط.
نرجع إلى إكمال
عناصر الموقع بإضافة قائمة جانبية للموقع بأكواد XHTML كالتالي :

كود HTML:
<div id="header">
<h1>محمد صلى الله عليه وسلم</h1>
<h4>موقع تعريفي عن الرسول الكريم</h4>
</div>

<ul class="side_menu">
<li>
<h2>القائمة الرئيسية</h2>
<ul>
<li>مولده ونشأته</li>
<li>دعوته</li>
<li>حياته في المدينة</li>
<li>أهم غزواته</li>
<li>عام الوفود</li>
<li>حجة الوداع</li>
<li>وفاته</li>
<li>معجزاته</li>
<li>زوجات الرسول بالترتيب</li>
<li>أولاده</li>
<li>أسماؤه</li>
</ul>
</li>
</ul>

أحب
أضيف نقطة مهمة بعد مشاهدة هذا الكود, وهي النقطة التي تتعلق بجمال الكود
ونظافته من الشوائب وكذلك توزيع وترتيب الأكواد باستخدام XHTML و CSS
بشكل مستقل, بعض المطورين يقومون بجعل صفحة htm تحتوي على جميع خصائص
التصميم وتكون مشوه كثيراً فلذلك هنا يمكنك ملاحظة مدى جودة التعامل مع
المعايير القياسية وأفضلية تطويرها.
عموماً كذلك
هناك نقطة أخرى تتعلق بأكواد XHTML حيث يمكنك اختيار العناصر المناسبة لك,
أقوم شخصياً بكتابة صيغة العناصر التي يتم عملها من قبل مطورين عالميين
ومراجعة الأكواد في مواقعهم لمشاهدة أفضل الطرق لتصميم المواقع. فلذلك
أأمل أن تعجبكم الصيغة المطروحة باستخدام
وغيرها من
العناصر.
طبعاً كل عنصر
يرمز باختصار لشيء فـ ul يرمز إلى unorderd list أي قائمة غير مرتبة
بأرقام وهي القائمة التي نريد استخدامها في موقعنا لذلك تم استخدامها.
تم استخدام
class للتعريف عن العنصر بدل id وذالك لأن class هي خاصية تعريف تستخدم
عندما يكون العنصر يستخدم عدة مرات وليس لمرة واحدة فالـ id هو تعريفي
لشيء واحد أما القائمة الجانبية فهي متكررة لذلك يتم وضعها في class وسيتم
إضافة قائمة جانبية متكررة أخرى بعد قليل.
الآن يمكنك
مشاهدة نتيجة ما تم إضافته بالـ XHTML

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

الآن لتنسيق هذا الجزء بالـ CSS يتم ذلك من خلال ملف
style.css الذي تم استدعاءه قبل قليل, فنضيف فيه التالي :

كود HTML:
.side_menu, .side_menu h2, .side_menu li, .side_menu li ul, .side_menu li ul li {
list-style:none; margin:0px; padding:0px;
}

.side_menu {
width:180px;
}

.side_menu h2 {
margin:10px 0 0 0;
padding:4px 0;
border-bottom:1px gray dotted;
color:#999999;
}

.side_menu li ul li {
border-bottom:1px green solid;
padding:5px 0;
font-weight:bold;
color:#006600;
}

لتصبح النتيجة كالتالي :

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

الآن انهينا القائمة الجانبية والتي مع العلم والفائدة المهمة يمكنك إعادة
استخدامها بنفس التصميم بشكل ممتاز سواء قائمة جانبية على اليمين أو
اليسار دون الحاجة لإعادة كتابة أكواد التصميم الخاصة بها التي تم كتابتها
بالـ CSS وهنا تكمن قوة CSS ويتم إعادة استخدام القائمة بالطريقة التالية
:

كود HTML:
<ul class="side_menu">
<li>
<h2>القائمة الرئيسية</h2>
<ul>
<li>مولده ونشأته</li>
<li>دعوته</li>
<li>حياته في المدينة</li>
<li>أهم غزواته</li>
<li>عام الوفود</li>
<li>حجة الوداع</li>
<li>وفاته</li>
<li>معجزاته</li>
<li>زوجات الرسول بالترتيب</li>
<li>أولاده</li>
<li>أسماؤه</li>
</ul>
</li>
</ul>

<ul class="side_menu">
<li>
<h2>مواقع صديقة</h2>
<ul>
<li>موقع رسول الله</li>
<li>صيد الفوائد</li>
<li>طريق الإسلام</li>
<li>الشبكة الإسلامية</li>
</ul>
</li>
</ul>

والنتيجة :

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

ستلاحظون أن القائمة بدون روابط فيجب علينا إضافة الروابط
الخاصة بصفحات القائمة وذلك بالعنصر كالتالي :

كود HTML:
<ul class="side_menu">
<li>
<h2>القائمة الرئيسية</h2>
<ul>
<li><a href="birth.htm">مولده ونشأته</a></li>
<li><a href="message.htm">دعوته</a></li>
<li><a href="life.htm">حياته في المدينة</a></li>
<li><a href="ghzoat.htm">أهم غزواته</a></li>
<li><a href="wofod.htm">عام الوفود</a></li>
<li><a href="heja.htm">حجة الوداع</a></li>
<li><a href="wafatah.htm">وفاته</a></li>
<li><a href="mojezat.htm">معجزاته</a></li>
<li><a href="wifes.htm">زوجات الرسول بالترتيب</a></li>
<li><a href="children.htm">أولاده</a></li>
<li><a href="names.htm">أسماؤه</a></li>
</ul>
</li>
</ul>

<ul class="side_menu">
<li>
<h2>مواقع صديقة</h2>
<ul>
<li><a href="http://www.rasoulallah.net">موقع رسول الله</a></li>
<li><a href="http://www.saaid.net">صيد الفوائد</a></li>
<li><a href="http://www.islamway.com">طريق الإسلام</a></li>
<li><a href="http://www.islamweb.net">الشبكة الإسلامية</a></li>
</ul>
</li>
</ul>

فبعد
إضافة الروابط ستلاحظون أن الروابط ظهرت :

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

ولكن تغير شكل الموقع بالروابط, وذلك لأننا أضفنا العنصر فلكل عنصر في XHTML يحتوي على تنسيق خاص به بشكل افتراضي
فتنسيق a هو اللون الأزرق وخط أسفل النص, يمكننا تحرير ذلك من خلال جعل
أي رابط في الموقع يحتوي على الخصائص الخاصة بنا كقالب فبمجرد إضافة أي
رابط في الموقع داخل العناوين وغيرها نريد أن يكون اللون الأخضر وبدون خط
أسفل النص بالكود التالي :

كود HTML:
a {
color:#006600;
text-decoration:none;
}

ليظهر بصورته الطبيعية التي نريدها كالتالي :

الأن
نريد أن نضيف محتوى الصفحة أولاً يجب علينا إدخال القائمتين الجانبيتين
إلى قسم جانبي ومن ثم نضيف قسم الصفحة كالتالي :

[center] تصميم موقع خاص بالتعريف عن الرسول صلى الله عليه وسلم Pm8

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

جداً عمليه سهلة
وواضحة, بعد ذلك يجب علينا تنسيق أماكنها باستخدام لغة CSS وذلك بكتابة
الكود التالي :

كود HTML:
#side_right {
width:180px;
float:right;
}

#content {
margin-right:180px;
padding:10px
}

لتظهر
النتيجة كالتالي :

تصميم موقع خاص بالتعريف عن الرسول صلى الله عليه وسلم Pm9%281%29

وبهكذا قد قمنا
بتصميم قالب بسيط جداً وجميل للموقع باستخدام الـ XHTML و الـ CSS ويمكنك الرجوع للرابطين السابقين لمعرفة
عناصر وخصائص اللغتين لاستخدامها في موقعك.
عموماً نكمل
الدرس لآخره بإضافة محتوى الصفحة بشكل مناسب وذلك داخل القسم
بكتابة الكود
التالي

كود HTML:
<div id="content">
<h2>الصفحة الرئيسية</h2>
<div class="content_post">
مرحباً بكم في الصفحة الرئيسية للموقع التعريفي عن رسول الله صلى الله عليه وسلم,
نتشرف بزيارتكم دائماً ويمكنكم التواصل معنا للمساعدة والمشاركة في تطوير الموقع
بأي شكل كان,
الحمد لله الذي أوضح لنا سبيل الهداية، وأزاح عن بصائرنا ظلمة الغواية،
والصلاة والسلام على النبي المصطفى والرسول المجتبى، المبعوث رحمة للعالمين، وقدوة
للمالكين،
وعلى آله وصحبه ومن تبعهم بإحسان إلى يوم الدين, أيها المسلمون: إن من خير ما بذلت
فيه الأوقات،
و شغلت به الساعات هو دراسة السيرة النبوية العطرة، والأيام المحمدية الخالدة، فهي
تجعل المسلم كأنه
يعيش تلك الأحداث العظام التي مرت بالمسلمين، وربما تخيل أنه واحد من هؤلاء
الكرام البررة التي قامت على عواتقهم صروح المجد ونخوة البطولة.
</div>
<h2>لماذا أسس الموقع؟</h2>
<div class="content_post">
أوجب الله سبحانه وتعالى على المؤمنين طاعته والإقتداء بهديه واتِّباع سُنَّته و
توقيره
ومحبته صلى الله عليه وسلم فوق محبة الآباء والأبناء والأزواج والعشيرة ،
والتجارة والأموال ، وأوعد من تخلف عن تحقيق ذلك بالعقاب ،
فقال سبحانه وتعالى : { <span class="ayat">قُلْ إِنْ كَانَ ءابَاؤُكُمْ
وَأَبْنَاؤُكُمْ وَإِخْوَانُكُمْ وَأَزْوَاجُكُمْ
وَعَشِيرَتُكُمْ وَأَمْوَالٌ اقْتَرَفْتُمُوهَا وَتِجَارَةٌ تَخْشَوْنَ كَسَادَهَا
وَمَسَاكِنُ
تَرْضَوْنَهَا أَحَبَّ إِلَيْكُمْ مِنَ اللَّهِ وَرَسُولِهِ وَجِهَادٍ فِي
سَبِيلِهِ فَتَرَبَّصُوا
حَتَّى يَأْتِيَ اللَّهُ بِأَمْرِهِ وَاللَّهُ لا يَهْدِي الْقَوْمَ
الْفَاسِقِينَ</span> } التوبة: 24.
</div>
</div>

وكذلك كتابة
التنسيق الخاص بالعناصر من خلال الـ CSS كالتالي

كود HTML:
#content h2 {
margin:0px;
border-bottom:2px green solid;
padding:5px 0;
margin-bottom:5px;
}

#content .content_post {
font-family:Tahoma;
font-size:10pt;
line-height:16pt;
text-align:justify;
}

.ayat {
color:#009900;
}

لتكون النتيجة
النهائية كالتالي

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

[/center]

في الأول
من درس توزيع واجهة موقع باستخدام css و html

تطرقنا إلى عمل جزء علوي وقائمة جانبية
واحدة تحتوي على عدة قوائم داخلية وجزء محتوى في وسط الصفحة فقط ولكن
طبعاً بالتفصيل الممل واعتماداً على المعايير القياسية وبالاكواد والصور
والمصدر, يمكنك مشاهدة الشكل السابق في الجزء الأول وكيف سنقوم بتطويره
وتعلم المزيد من هذه اللغتين الرائعتين والمهمتين في عالم تطوير وتصميم
المواقع والتطبيقات.

نود أن نكمل
الدرس لنحاول أن نتطرق إلى النقاط التالية:

إضافة قائمة جانبية ثانية إلى اليسار (Left Side)
إضافة جزء سفلي (Footer)
إضافة قائمة علوية
(Header Menu)
إضافة قائمة سفلية (Footer Menu)

وسنتطرق إلى
المزيد من النقاط الأخرى كعمل إطارات وعمل أزرار بخلفية جميلة وعند تمرير
الفأرة يتم تغيير صورة الخلفية بأفضل طريقه وغيرها الكثير والكثير…
سأركز على عمل
شكل كهذا

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

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

ملاحظة: إذا
وجدت صعوبة في مواكبة خطوات الدرس بإمكانك تحميل الملف المفتوح في آخر
الموضوع ومتابعة ومراجعة النقاط لكي تسهل عليك وتتضح
نبدأ بسم الله
سنقوم حالياً بتطبيق الجزء السفلي أولاً وما يسمى بالـ (Footer), يجب عليك
ومتابعة آخر نسخة من عملنا في الجزء الأول لتتابع الجزء هذا, وكل ما
علينا لإضافة Footer هو إضافة الكود التالي في نهاية جسم الصفحة وعندما
أقول في نهاية جسم الصفحة أي أنه قبل لأنه هو جسم الصفحة التي يتم إظهار
فيه المحتوى فيجب علينا دائماً كتابة الأكواد بين الوسمين و والكود هو
كالتالي:

كود HTML:

"footer">

بعدها يمكننا
بكل بساطة عمل أي شي في الجزء السفلي باستخدام CSS وذلك من خلال #footer
مثل إضافة صورة خلفية أو حدود أو تباعد أو نوع الخط أو ألوان الروابط فيه …
إلخ

لنقل أنك قمت
بتصميم هذه الخلفية باستخدام الفوتوشوب باسم footer_bg.gif وحفظتها داخل
مجلد images في موقعي

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

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

حسناً الآن
لدينا صورة الخلفية للجزء السفلي سنقوم بعرضه باستخدام CSS وذلك كالتالي:

كود HTML:
#footer {
background:url(images/footer_bg.gif);
height:56px;
}

اللآن الجزء
السفلي ممتاز بالكود الذي تم كتابته ولكن سترى النتيجة التي لا تسرك
كالتالي:

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

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

تعمدت أن أظهر
هذا الخطأ لكي نتعلم منه دائماً عندما ترى نتيجة سلبية يجب عليك مراجعة
الكود جيداً ويجب طبعاً أن تكون لديك أساسيات ذلك, عموماً هذه الخطوة يجب
عليك فهمها لأنها مهمة في عالم كود الـ XHTML و الـ CSS
عندما أردنا أن
جعل القائمة الجانبية اليمنى والمحتوى بجانب بعض مع أنهما وسوم div التي
دائماً تكون تحت بعض فقد استخدمنا float:right في الدرس الأول والذي يعني
باللغة العربية تعويم فإذا كان أي شي عائم لابد وأن يكون هناك ما يعوم
حوله كالغواصة عندما تعوم ويكون بجانبها أعماق البحر هذا التعويم عند
إضافته يجب أن يتوقف في حدود أنت تحددها لنرى ذلك من خلال الصورة
التوضيحية التالية:

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

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

ستلاحظ أن content يجب أن يكون لديه بجانبه عنصر عائم من حوله وذلك بسبب
أنه يحمل الخاصية float, فيجب عليك إيقافه بعد الإنتهاء منه من خلال إضافة
وسم جديد وإعطاءه الخاصية clear بالـ CSS كالصورة التوضيحية التالية:

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

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

بشكل تطبيقي
الآن نضيف الوسم التالي قبل وسم الفوتر الذي أضفناه قبل قليل:

كود HTML:

"clear">

ليصبح هو والجزء
السفلي كالتالي:

كود HTML:

"clear">

"footer">

الآن نتجه إلى
ملف style.css كما تم توضيحه في الصورة السابقة ونضيف السطر التالي بإمكانك
جعله في آخر سطر أو أي مكان

كود HTML:
.clear {
clear:both;
}

الآن لنرى
النتيجة:

تصميم موقع خاص بالتعريف عن الرسول صلى الله عليه وسلم Htmlcssfooter%281%29

تصميم موقع خاص بالتعريف عن الرسول صلى الله عليه وسلم Htmlcssfooter%281%29

جميل جداً الآن
وطبعاً كل ما قمت بتنسيق الموقع أكثر كل ما كان أفضل فمثلاً هذه المنطقة
يفضل عمل مسافة علوية بسيطة في الجزء السفلي فسأقوم بتعديلها من خلال الـ
CSS

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

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

الكود الخاص
بإضافة مسافة بسيطة في الأعلى من الجزء السفلي (footer) من خلال style.css
كالتالي:

كود HTML:
#footer {
background:url(images/footer_bg.gif);
height:56px;
margin-top:10px;
}

وطبعاً الجزء
الذي أضفناه فقط ( margin-top:10px; ) لتصبح النتيجة كالتالي:

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

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

في الدرس التالي سنقوم بتكملة الدرس وسنتطرق إلى القائمة الجانبية التي على
يسار الموقع لتكون لدينا قائمتين جانبيتين واحدة على اليمين والثانية على
اليسار حيث أن هذه النقطة تم طلبها كثيراً وهي فعلاً نقطه مهمة سنقوم
بتعلمها باستخدام المعايير القياسية وبدون استخدام الجداول بالكامل.

نكمل سلسلة هذه
الدروس وسنشرح كما تطرقنا سابقاً لعمل مثل هذا
الشكل:

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

حيث
انتهينا من عمل الـ Header وهو أول مستطيل في الأعلى وكالك من الجزء
الجانبي الأيمن المستطيل الذي على اليمين وكذلك الـ Footer وهو الجزء
السفلي من الموقع باقي لنا الجزء الجانبي الأيسر والمستطيلان الصغيران
اللذان تحت الهيدر وفوق الفوتر لأي محتوى وهما بسيطان جداً.

فبعد الانتهاء
من العمل سيكون كالتالي:

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

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

بسم الله نبدأ بإنشاء الجانب الأيسر من الموقع وذلك بإضافة العنصر أو الوسم
الخاص بالـ HTML في داخل الـ باسم

وذلك بعد عنصر الجانب الأيمن

:

كود HTML:

"side_left">

"side_menu">

الرعاة الإعلاميون

"side_menu"

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

بعد إضافة العناصر المطلوبة في القائمة الجانبية نقوم بتنسيقها
باستخدام الـ CSS هناك بعض الأجزاء التي عُملت من قبل مثل القائمة ستكون
بشكل أنيق بنفس القائمة الجانبية اليمنى وهنا تكمن قيمة الـ CSS فقط سنقوم
بمواساتها بالجانب الأيسر وذلك من خلال التعديل على ملف style.css أول شي
نضيف هذا الكود:

كود HTML:
img {
border:none;
}
هذا الكود لكي يجعل الحدود لأي صوره فيها رابط بدون حدود بحيث أنه
بطبيعة الحال يقوم بوضع حد كبير جداً في هذه الحالة لا نريده, ثم نكمل
بإضافة:

كود HTML:
#side_left {
float:left;
width:180px;
}
ونقوم بتحرير #content بإضافة margin-left:180px; ليكون كاملاً
كالتالي:

كود HTML:
#content {
margin-right:180px;
margin-left:180px;
padding:10px;
}

فقط
لا غير، الآن شاهد النتيجة:

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

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

جانب
أيسر بالكامل رائع وجميل, حسناً سنقوم الآن بإضافة مستطيل تحت الهيدر
(الجزء العلوي) بالطريقة التالية:

قبل

id=”side_right”> والذي يكون بعد جزء header نضيف التالي :

كود HTML:

"navigation">أنت هنا ( "index.htm">الصفحة الرئيسية )

ثم نتجه إلى ملف style.css ونضيف النمط الخاص بالـ navigation
كالتالي:

كود HTML:
#navigation {
padding:7px;
border:1px solid #a2e9a2;
background:#e9f9e9;
font-family:Tahoma;
font-size:8pt;
margin-top:5px;
}

الآن
نضيف المستطيل الذي أعلى الفوتر بإضافته قبل

كالتالي:

كود HTML:

"footer_menu">
"index.htm">الرئيسية |
"#">من نحن |
"#">ادعمنا |
"#">اتصل بنا |
"#">إلى الأعلى

ثم
نعطيها النمط التالي:

كود HTML:
#footer_menu {
text-align:center;
font-family:Tahoma;
font-size:8pt;
border-top:1px solid #b9e9b9;
padding-top:7px;
margin-top:10px;
}
لتصبح النتيجة النهائية كالتالي:

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

الى هنا انتهى الجزء الأخير من الدرس
ويمكنك تحميل نتيجة الدرس من المرفقات لرؤيتها وتحليل الشيفرة وفهمها

» درس تصميم موقع بالفوتوشوب بالتفصيل الممل
» ملف كامل لبعض الأدعية والأذكار والإستغفارات التى وردت عن الرسول ,
» شرح تثبيث السيرفر المحلي appserv +تجريب التطبيقات عليه
» للمغاربة "موقع هام جدا"
» كيفية انشاء موقع خاص لك على النت مجانا

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

الرعاة الإعلاميون

شاركنا الآن