al7rbi
30-11-2011, 05:39 صباحاً
بسم الله الرحمـٌن الرحيم
الأن ليرن نت تقدم درس توزيع هيدر بالـcss
متطلبات الدرس
برنامج اكسبريشن ويب (لتحميل برنامج المستخدم في الدرس (http://www.learnnt.net/vb/showthread.php?t=304))
فوتوشوب الإصدار الـ8 عربي أو اي اصدار يناسبك
سيرفر الأباتشي في حالة تريد تصميم هيدر استايل منتدى
http://l-nt.net/fwasl.png
المهم نبدأ في الدرس
أول شئ نفتح الفوتوشوب مقاس 777× 800 كما موضح بالصوره
http://l-nt.net/01/CaptureWiz068.png
والأن نقوم بتصميم هيدر انا صممت هيدر بسيط فقط لتوضيح فكره التصميم والتقطيع وهاذ الهيدر الي صممته
http://l-nt.net/01/CaptureWiz069.png
الأن للتقطيع التقطيع يكون صوره يمنى ويسرى و نقطة تمدد كما موضح بالصور
http://l-nt.net/01/CaptureWiz070.png
تكون النقطة الي في الوسط هي نقطة التمدد المهم نتابع
بعد التقطيع نقوم بالحفظ وهي كـ التالي ملف > حفظ للويب والأفضل ان الصيغه تكون jpeg كما موضح بالصور
http://l-nt.net/vb/images/statusicon/wol_error.gifلـتكبيــر الــصورهـ إضغــط هنــا, حجم الصورهـ قبل التصغيـر984x698.http://l-nt.net/01/CaptureWiz071.png
وبعد ان نضغط علي حفظ تطلع لنا قائمة ونقوم بتغيير الإسم للإنجليزي ونقوم بحفظها في اي مكان تبيه وإذا كنت حاب توزع الهيدر للأستايل يكون الحفظ في داخل مجلد المنتدى الي متبت علي الأباتشي كما موضح بالصور
http://l-nt.net/01/CaptureWiz072.png
وبعد ان نقوم بالحفظ نلاحظ انه الصور انحفظت داخل مجلد اسمه images وإذا طلع لك الأسم صور بالعربي مافي مشكله غيره انجليزي
http://l-nt.net/fwasl.png
والأن إنتهينا من تصميم و تقطيع و حفظ الهيدر والخطوه التالية هي التوزيع ويتم التوزيع علي الإكسبريشن ويب اول شئ نقوم بفتح البرنامج وتطلع صفحة متل هاي
http://l-nt.net/vb/images/statusicon/wol_error.gifلـتكبيــر الــصورهـ إضغــط هنــا, حجم الصورهـ قبل التصغيـر1024x768.http://l-nt.net/01/CaptureWiz073.png
الأن نقوم بالتوزيع
أول شئ ننتقل للمنطقة مابين منطقة الـ
<title>Untitled 1</title>
و
</head>
نحط الماوس مابين المنطقتين وقم بتغيير اللغه إالي الأنجليزية ونضغط علي شفت + حرف واو بالعربيه مع العلم انه اللغه إنجليزية لرسم هاذ الرمز >
وبعد كتابه هاذ الرمز تطلع لنا قائمة نختار منها style وما نحرك الماوس ولا شئ بعد اختيار القائمة style نقوم بالضغط علي زر المسطره ( سبيس ) وتطلع لنا قائمة اخرى نختار منها type وبعد أختيار type مباشره تطلع قائمة فيها خيار وحيد وهو ****/css ونقوم بإختياره وبعد ان نقوم بإختياره مباشره نقوم بالضغط علي شفت + حرف ز بالعربيه مع العلم انه اللغه تكون إنجليزية وذلك لكتابه هاذ الرمز > وإغلاق الكود
وفي النهاية هاذ الكود الي يطلع لك
كود PHP:
<style type="****/css">
</style>
وبالصور
http://l-nt.net/vb/images/statusicon/wol_error.gifلـتكبيــر الــصورهـ إضغــط هنــا, حجم الصورهـ قبل التصغيـر758x536.http://l-nt.net/01/CaptureWiz074.png
والأن نقوم بوضع الكلاسات وهي كـ التالي
نقوم بوضع الماوس مابين المنطقتين الي كتبناهم وهذا توضيع
كود PHP:
<style type="****/css">
سنقوم بكتابة الكلاسات هنا
</style>
المهم نكتب في هاي المنطقة دوت وهي نقطة شفت + ز بالعربيه ومع العلم ايضا انه اللغ مازالت إنجليزية
وبعدها نقوم بكتابة أي حرف متلا m بالإنجليزيه
وبعدها نقوم بالضغط علي شفت + حرف ج بالعربيه مع العلم انه اللغ مازالت إنجليزية لنكتب القوس {
وحين نقوم بكتابته تطلع لنا قائمة نختار منها
background-image
وبعد إختيار هاد الخيار من القائمه يطلب منك توجيهه للصوره الي تبيها ونحن سنقوم بتوجيهه الي صوره التمدد الي تم تقطيعها في الفوتوشوب كما في الصوره
http://l-nt.net/vb/images/statusicon/wol_error.gifلـتكبيــر الــصورهـ إضغــط هنــا, حجم الصورهـ قبل التصغيـر778x494.http://l-nt.net/01/CaptureWiz075.png
والأن بعد ان دللناه علي مكان الصوره نقوم مباشرة بكتابه هاذ الكود ; وهو عن طريق الضغط علي حرف ك بالعربيه مع العلم انه اللغ مازالت إنجليزيه
( ودايما في الدوره بعد إختيار اي اختيار من القائمة المطلوبه دايما بعد الأختيار نقوم بالضغط علي الرمز ; )
والأن بعد ان اخترنا الرمز المذكور تطلع قائمة اخرى ونختار منها
background-repeat
وبعد اختيار هاذ الإختيار وهو خاص بالتمدد تطلع لنا قائمة اخرى نختار منها
repeat-x
وهي للتمدد العمودي
وأيضا متل ما ذكر سابقا دايما نختار الرمز ; بعد كل اختيار لتطلع لنا قائمة اخرى نختار منها
****** وهو الإرتفاع وبعد الإختيار تطلع لنا قائمة اخرى نختار منها أول خيار وهو إختر طولا وأدخل ارتفاع نقطة التمدد ويتم معرفته بالأتي
ندهب لمجلد الي حفظنا في الصور المقطعه ونضغط علي كلك يمين ومت ثم خصائص ومن ثم ملخص ويضهر بنا الأرتفاع كما موضع بالصور
http://l-nt.net/01/CaptureWiz076.png
والأن نقوم بإدخال الأرتفاع والي هو طلع معي 192 الي الإكسبريشن
والأن نقوم بكتابه هاذ الرمز ; والدي تم توضيحع سابقا لتطلع قائمة أخرى نقوم بتجاهلها ونضغط علي اي مكان اخر بالبرنامج لتختفي
والأن تم وبحمد الله إنشاء نقطة التمدد وفي النهايه هاذ الكوود الكامل للواجهه الي يطلع بعد توزيع نقطة التمدد
كود بلغة 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"> <head> <**** *******="****/html; charset=utf-8" **********="*******-Type" x-undefined /> <title>Untitled 1</title> <style type="****/css"> .m{ background-image:url('file:///C:/********s and Settings/Administrator/Desktop/ليرن نت/images/learnnt-al7rbi-ly_03.jpg'); background-repeat:repeat-x; ******:192px; } </style> </head> <****> </****> </html>
http://l-nt.net/fwasl.png
والأن نقوم بتوزيع الصوره اليمنى وهي كـ الاتي
ندهب لسطر جديد تحت كل الكود بتاع الكلاس m ونقوم بكتابه كلاس جديد وهو متلا m2 ومتل m بالضبط نقوم بضغط . ( دوت ) وبعدها نقوم بكتابه m2 وبعدها شفت + حرف ج بالعربيه
لتطلع لنا قائمة ومتل في حالة m نقوم بدله علي الصوره اليمنى
ومن ثم نضغط علي زر خرف ك بالعربيه مع العلم انه اللغه مازالت إنجليزية لتطلع لنا قائمه أخرى ونختار منها ****** وطبا هاذ الأرتفاع ويكون متل نقطة التمدد والي هو طلع معاي 192
والأن نقوم بكتابه الرمز ; مره اخرى لتطلع لنا قائمة أخرى نختار منها ***** وهو العرض للصوره ويتم معرفته متل ما تم معرفه فرتفاع نقطة التمدد لكن في هاي المره ننظر للعرض مو للإرتفاع كما موضح بالصور
http://l-nt.net/01/CaptureWiz077.png
والأن نقوم بكتابه العرض وهو الي طلع معاي 291
والأن بعد كتابه العرض مبارشه نقوم بكتابه الرمز ; مره اخرى لتطلع لنا قائمه نختار منها float وهي خاصة للمحاذاه ونختار منها right وهاي للمحذاه جهية اليمين ونكتب الرمز ; مره اخرى
والأن تم وبحمد الله توزيع صوره الهيدر اليمنى
http://l-nt.net/fwasl.png
وإختصار للشرح للصوره اليسرى وهي متل خطوات الصوره اليمن بالضبط كل الي تغيره هو الإسم بدلا m2 متلا إختار m3 و عرض وطول الصوره والأهم عند إختيار الخيار float نقوم بإختيار left في بدال اليمين وهي للمحذاه جهة اليسار
وهاذ الكود النهائي للواجهه بأكملها الي يطلع معي
كود بلغة 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"> <head> <**** *******="****/html; charset=utf-8" **********="*******-Type" x-undefined /> <title>Untitled 1</title> <style type="****/css"> .m{ background-image:url('file:///C:/********s and Settings/Administrator/Desktop/ليرن نت/images/learnnt-al7rbi-ly_03.jpg'); background-repeat:repeat-x; ******:192px; } .m2{ background-image:url('file:///C:/********s and Settings/Administrator/Desktop/ليرن نت/images/learnnt-al7rbi-ly_05.jpg'); ******:192px; *****:291px; float:right; } .m3{ background-image:url('file:///C:/********s and Settings/Administrator/Desktop/ليرن نت/images/learnnt-al7rbi-ly_01.jpg'); ******:192px; *****:219px; float:left; } </style> </head> <****> </****> </html>
وطبعا انا حطيت مجلد الصور داخل مجلد اسمه ليرن نت في سطح المكتب لكن انت إختر اي مكان تبيه
والأن أتممنا نص العمل في التوزيع الأن باقي إستدعاء الكلاسات وهو كـ التالي
نروح مابين منطقة
<****>
و
</****>
ونقوم بكتابه الرمز < وهو تم توضيحه في بدايه الشرح وهو بالضغط علي شفت + واو بالعربيه مع العلم انه اللغه بعد إنجليزيه
وحين الضغط تطلع لنا قائمة نختار منها div وبعد الإختيار تضغط علي سبيس لتطلع قائمة اخرى نختار منها class والأن يطلعو لنا قوسين ونكتب بينهم أول شئ وهو اسم كلاس نقطة التمدد والي هو m وهاذ توضيح للأقواس
كود PHP:
class="m"
وبعد كتابه أسم الكلاس ننتقل الي جانب الصور الأيمين ونضغط علي شفت + ز مع العلم انه اللغه بعد إنجليزيه
ليطلع لنا الكود </div>
ويتم إغلاق الكلاس
والأن تحت هاذ الكود الي عملناه بأكمله وهو
كود PHP:
<div class="m"></div>
نقوم بتكراره مرتين اسفله وهم للصوره اليمنى واليسرى ولكن في الكود الثاني نقوم بتغيير اسم الكلاس الي m2 وهو اسم الصوره اليمنى ونفس الشئ لليسرى نقوم بتسميتها m3 وهاذ كود للتوضيح الناتج النهائي للاكواد مابين
<****>
و
</****>
كود PHP:
<****>
<div class="m"></div>
<div class="m2"></div>
<div class="m3"></div>
</****>
والأن شبه كلمنا والحمد الله والأن الي أخر خطوه وهي هاي
نقوم بقص هاذ الكود </div> من الكلاس
<div class="m"></div>
ليصبح
<div class="m">
ونقوم بلصقة في اخر جزء كما موضح بالصور
http://l-nt.net/vb/images/statusicon/wol_error.gifلـتكبيــر الــصورهـ إضغــط هنــا, حجم الصورهـ قبل التصغيـر798x606.http://l-nt.net/01/CaptureWiz079.png
http://l-nt.net/fwasl.png
والأن نقوم بأخر خطوه وهي الاتي وهي نقوم بالتضليل علي الكود
كود PHP:
file:///C:/********s and Settings/Administrator/Desktop/ليرن نت/
وهو راح يختلف عندك المهم ضلل جميع الكود لإحدى الكلاسات ضلله بأكملة إلا إسم مجلد الصور وإسم الصوره كما موضح بالصور
http://l-nt.net/vb/images/statusicon/wol_error.gifلـتكبيــر الــصورهـ إضغــط هنــا, حجم الصورهـ قبل التصغيـر798x606.http://l-nt.net/01/CaptureWiz080.png
وبعد التضليل نقوم بكلك علي زر الماوس الأيمن ومن الخيارات نختار إستبدال
لتطلع قائمة متل الاتي
http://l-nt.net/01/CaptureWiz081.png
الجهه اليمنى يكون فيها الكود واليسرى خليها فاضيه والأن نقوم بالضغط علي replace all والأن نقوم بحفظ العمل الي جانب مجلد الصور
وننظر لعملنا النهائي
http://l-nt.net/01/default.html
والأن تمممممم وبحمد الله توزيع الهيدر بتقنية css ومطابق للمواصفات القياسية
التحقق من هنا (http://validator.w3.org/check?uri=http%3A%2F%2Fl-nt.net%2F01%2Fdefault.html&charset=%28detect+automatically%29&doctype=Inline&group=0)
ولتحميل ملف psd والواجهه من هنـــأ (http://l-nt.net/01/m-g3.zip)
أو هــنا (http://upload.traidnt.net/dld67H49172.zip.html)
http://l-nt.net/fwasl.png
مـلـحـوظة :- إذا كان الهيدر للإستايل فانه الاكواد الي مابين ال
<****>
و
</****>
نقوم بلصقهم في الهيدر
وأما الأكواد الي مابين
<style type="****/css">
و
</style>
نقوم بلصقهم في معرفات css الاضافية للغستايل
ثمن الدرس ثمن الدرس الدعاء لي والدعاء لشهداء ليبيا بالجنه وحسن المصير
والسلام عليكم ورحمة الله وبركاته
أخوكم al7rbi-ly
ليرن نت - للخدمات التطويرية (http://l-nt.net/)
الأن ليرن نت تقدم درس توزيع هيدر بالـcss
متطلبات الدرس
برنامج اكسبريشن ويب (لتحميل برنامج المستخدم في الدرس (http://www.learnnt.net/vb/showthread.php?t=304))
فوتوشوب الإصدار الـ8 عربي أو اي اصدار يناسبك
سيرفر الأباتشي في حالة تريد تصميم هيدر استايل منتدى
http://l-nt.net/fwasl.png
المهم نبدأ في الدرس
أول شئ نفتح الفوتوشوب مقاس 777× 800 كما موضح بالصوره
http://l-nt.net/01/CaptureWiz068.png
والأن نقوم بتصميم هيدر انا صممت هيدر بسيط فقط لتوضيح فكره التصميم والتقطيع وهاذ الهيدر الي صممته
http://l-nt.net/01/CaptureWiz069.png
الأن للتقطيع التقطيع يكون صوره يمنى ويسرى و نقطة تمدد كما موضح بالصور
http://l-nt.net/01/CaptureWiz070.png
تكون النقطة الي في الوسط هي نقطة التمدد المهم نتابع
بعد التقطيع نقوم بالحفظ وهي كـ التالي ملف > حفظ للويب والأفضل ان الصيغه تكون jpeg كما موضح بالصور
http://l-nt.net/vb/images/statusicon/wol_error.gifلـتكبيــر الــصورهـ إضغــط هنــا, حجم الصورهـ قبل التصغيـر984x698.http://l-nt.net/01/CaptureWiz071.png
وبعد ان نضغط علي حفظ تطلع لنا قائمة ونقوم بتغيير الإسم للإنجليزي ونقوم بحفظها في اي مكان تبيه وإذا كنت حاب توزع الهيدر للأستايل يكون الحفظ في داخل مجلد المنتدى الي متبت علي الأباتشي كما موضح بالصور
http://l-nt.net/01/CaptureWiz072.png
وبعد ان نقوم بالحفظ نلاحظ انه الصور انحفظت داخل مجلد اسمه images وإذا طلع لك الأسم صور بالعربي مافي مشكله غيره انجليزي
http://l-nt.net/fwasl.png
والأن إنتهينا من تصميم و تقطيع و حفظ الهيدر والخطوه التالية هي التوزيع ويتم التوزيع علي الإكسبريشن ويب اول شئ نقوم بفتح البرنامج وتطلع صفحة متل هاي
http://l-nt.net/vb/images/statusicon/wol_error.gifلـتكبيــر الــصورهـ إضغــط هنــا, حجم الصورهـ قبل التصغيـر1024x768.http://l-nt.net/01/CaptureWiz073.png
الأن نقوم بالتوزيع
أول شئ ننتقل للمنطقة مابين منطقة الـ
<title>Untitled 1</title>
و
</head>
نحط الماوس مابين المنطقتين وقم بتغيير اللغه إالي الأنجليزية ونضغط علي شفت + حرف واو بالعربيه مع العلم انه اللغه إنجليزية لرسم هاذ الرمز >
وبعد كتابه هاذ الرمز تطلع لنا قائمة نختار منها style وما نحرك الماوس ولا شئ بعد اختيار القائمة style نقوم بالضغط علي زر المسطره ( سبيس ) وتطلع لنا قائمة اخرى نختار منها type وبعد أختيار type مباشره تطلع قائمة فيها خيار وحيد وهو ****/css ونقوم بإختياره وبعد ان نقوم بإختياره مباشره نقوم بالضغط علي شفت + حرف ز بالعربيه مع العلم انه اللغه تكون إنجليزية وذلك لكتابه هاذ الرمز > وإغلاق الكود
وفي النهاية هاذ الكود الي يطلع لك
كود PHP:
<style type="****/css">
</style>
وبالصور
http://l-nt.net/vb/images/statusicon/wol_error.gifلـتكبيــر الــصورهـ إضغــط هنــا, حجم الصورهـ قبل التصغيـر758x536.http://l-nt.net/01/CaptureWiz074.png
والأن نقوم بوضع الكلاسات وهي كـ التالي
نقوم بوضع الماوس مابين المنطقتين الي كتبناهم وهذا توضيع
كود PHP:
<style type="****/css">
سنقوم بكتابة الكلاسات هنا
</style>
المهم نكتب في هاي المنطقة دوت وهي نقطة شفت + ز بالعربيه ومع العلم ايضا انه اللغ مازالت إنجليزية
وبعدها نقوم بكتابة أي حرف متلا m بالإنجليزيه
وبعدها نقوم بالضغط علي شفت + حرف ج بالعربيه مع العلم انه اللغ مازالت إنجليزية لنكتب القوس {
وحين نقوم بكتابته تطلع لنا قائمة نختار منها
background-image
وبعد إختيار هاد الخيار من القائمه يطلب منك توجيهه للصوره الي تبيها ونحن سنقوم بتوجيهه الي صوره التمدد الي تم تقطيعها في الفوتوشوب كما في الصوره
http://l-nt.net/vb/images/statusicon/wol_error.gifلـتكبيــر الــصورهـ إضغــط هنــا, حجم الصورهـ قبل التصغيـر778x494.http://l-nt.net/01/CaptureWiz075.png
والأن بعد ان دللناه علي مكان الصوره نقوم مباشرة بكتابه هاذ الكود ; وهو عن طريق الضغط علي حرف ك بالعربيه مع العلم انه اللغ مازالت إنجليزيه
( ودايما في الدوره بعد إختيار اي اختيار من القائمة المطلوبه دايما بعد الأختيار نقوم بالضغط علي الرمز ; )
والأن بعد ان اخترنا الرمز المذكور تطلع قائمة اخرى ونختار منها
background-repeat
وبعد اختيار هاذ الإختيار وهو خاص بالتمدد تطلع لنا قائمة اخرى نختار منها
repeat-x
وهي للتمدد العمودي
وأيضا متل ما ذكر سابقا دايما نختار الرمز ; بعد كل اختيار لتطلع لنا قائمة اخرى نختار منها
****** وهو الإرتفاع وبعد الإختيار تطلع لنا قائمة اخرى نختار منها أول خيار وهو إختر طولا وأدخل ارتفاع نقطة التمدد ويتم معرفته بالأتي
ندهب لمجلد الي حفظنا في الصور المقطعه ونضغط علي كلك يمين ومت ثم خصائص ومن ثم ملخص ويضهر بنا الأرتفاع كما موضع بالصور
http://l-nt.net/01/CaptureWiz076.png
والأن نقوم بإدخال الأرتفاع والي هو طلع معي 192 الي الإكسبريشن
والأن نقوم بكتابه هاذ الرمز ; والدي تم توضيحع سابقا لتطلع قائمة أخرى نقوم بتجاهلها ونضغط علي اي مكان اخر بالبرنامج لتختفي
والأن تم وبحمد الله إنشاء نقطة التمدد وفي النهايه هاذ الكوود الكامل للواجهه الي يطلع بعد توزيع نقطة التمدد
كود بلغة 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"> <head> <**** *******="****/html; charset=utf-8" **********="*******-Type" x-undefined /> <title>Untitled 1</title> <style type="****/css"> .m{ background-image:url('file:///C:/********s and Settings/Administrator/Desktop/ليرن نت/images/learnnt-al7rbi-ly_03.jpg'); background-repeat:repeat-x; ******:192px; } </style> </head> <****> </****> </html>
http://l-nt.net/fwasl.png
والأن نقوم بتوزيع الصوره اليمنى وهي كـ الاتي
ندهب لسطر جديد تحت كل الكود بتاع الكلاس m ونقوم بكتابه كلاس جديد وهو متلا m2 ومتل m بالضبط نقوم بضغط . ( دوت ) وبعدها نقوم بكتابه m2 وبعدها شفت + حرف ج بالعربيه
لتطلع لنا قائمة ومتل في حالة m نقوم بدله علي الصوره اليمنى
ومن ثم نضغط علي زر خرف ك بالعربيه مع العلم انه اللغه مازالت إنجليزية لتطلع لنا قائمه أخرى ونختار منها ****** وطبا هاذ الأرتفاع ويكون متل نقطة التمدد والي هو طلع معاي 192
والأن نقوم بكتابه الرمز ; مره اخرى لتطلع لنا قائمة أخرى نختار منها ***** وهو العرض للصوره ويتم معرفته متل ما تم معرفه فرتفاع نقطة التمدد لكن في هاي المره ننظر للعرض مو للإرتفاع كما موضح بالصور
http://l-nt.net/01/CaptureWiz077.png
والأن نقوم بكتابه العرض وهو الي طلع معاي 291
والأن بعد كتابه العرض مبارشه نقوم بكتابه الرمز ; مره اخرى لتطلع لنا قائمه نختار منها float وهي خاصة للمحاذاه ونختار منها right وهاي للمحذاه جهية اليمين ونكتب الرمز ; مره اخرى
والأن تم وبحمد الله توزيع صوره الهيدر اليمنى
http://l-nt.net/fwasl.png
وإختصار للشرح للصوره اليسرى وهي متل خطوات الصوره اليمن بالضبط كل الي تغيره هو الإسم بدلا m2 متلا إختار m3 و عرض وطول الصوره والأهم عند إختيار الخيار float نقوم بإختيار left في بدال اليمين وهي للمحذاه جهة اليسار
وهاذ الكود النهائي للواجهه بأكملها الي يطلع معي
كود بلغة 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"> <head> <**** *******="****/html; charset=utf-8" **********="*******-Type" x-undefined /> <title>Untitled 1</title> <style type="****/css"> .m{ background-image:url('file:///C:/********s and Settings/Administrator/Desktop/ليرن نت/images/learnnt-al7rbi-ly_03.jpg'); background-repeat:repeat-x; ******:192px; } .m2{ background-image:url('file:///C:/********s and Settings/Administrator/Desktop/ليرن نت/images/learnnt-al7rbi-ly_05.jpg'); ******:192px; *****:291px; float:right; } .m3{ background-image:url('file:///C:/********s and Settings/Administrator/Desktop/ليرن نت/images/learnnt-al7rbi-ly_01.jpg'); ******:192px; *****:219px; float:left; } </style> </head> <****> </****> </html>
وطبعا انا حطيت مجلد الصور داخل مجلد اسمه ليرن نت في سطح المكتب لكن انت إختر اي مكان تبيه
والأن أتممنا نص العمل في التوزيع الأن باقي إستدعاء الكلاسات وهو كـ التالي
نروح مابين منطقة
<****>
و
</****>
ونقوم بكتابه الرمز < وهو تم توضيحه في بدايه الشرح وهو بالضغط علي شفت + واو بالعربيه مع العلم انه اللغه بعد إنجليزيه
وحين الضغط تطلع لنا قائمة نختار منها div وبعد الإختيار تضغط علي سبيس لتطلع قائمة اخرى نختار منها class والأن يطلعو لنا قوسين ونكتب بينهم أول شئ وهو اسم كلاس نقطة التمدد والي هو m وهاذ توضيح للأقواس
كود PHP:
class="m"
وبعد كتابه أسم الكلاس ننتقل الي جانب الصور الأيمين ونضغط علي شفت + ز مع العلم انه اللغه بعد إنجليزيه
ليطلع لنا الكود </div>
ويتم إغلاق الكلاس
والأن تحت هاذ الكود الي عملناه بأكمله وهو
كود PHP:
<div class="m"></div>
نقوم بتكراره مرتين اسفله وهم للصوره اليمنى واليسرى ولكن في الكود الثاني نقوم بتغيير اسم الكلاس الي m2 وهو اسم الصوره اليمنى ونفس الشئ لليسرى نقوم بتسميتها m3 وهاذ كود للتوضيح الناتج النهائي للاكواد مابين
<****>
و
</****>
كود PHP:
<****>
<div class="m"></div>
<div class="m2"></div>
<div class="m3"></div>
</****>
والأن شبه كلمنا والحمد الله والأن الي أخر خطوه وهي هاي
نقوم بقص هاذ الكود </div> من الكلاس
<div class="m"></div>
ليصبح
<div class="m">
ونقوم بلصقة في اخر جزء كما موضح بالصور
http://l-nt.net/vb/images/statusicon/wol_error.gifلـتكبيــر الــصورهـ إضغــط هنــا, حجم الصورهـ قبل التصغيـر798x606.http://l-nt.net/01/CaptureWiz079.png
http://l-nt.net/fwasl.png
والأن نقوم بأخر خطوه وهي الاتي وهي نقوم بالتضليل علي الكود
كود PHP:
file:///C:/********s and Settings/Administrator/Desktop/ليرن نت/
وهو راح يختلف عندك المهم ضلل جميع الكود لإحدى الكلاسات ضلله بأكملة إلا إسم مجلد الصور وإسم الصوره كما موضح بالصور
http://l-nt.net/vb/images/statusicon/wol_error.gifلـتكبيــر الــصورهـ إضغــط هنــا, حجم الصورهـ قبل التصغيـر798x606.http://l-nt.net/01/CaptureWiz080.png
وبعد التضليل نقوم بكلك علي زر الماوس الأيمن ومن الخيارات نختار إستبدال
لتطلع قائمة متل الاتي
http://l-nt.net/01/CaptureWiz081.png
الجهه اليمنى يكون فيها الكود واليسرى خليها فاضيه والأن نقوم بالضغط علي replace all والأن نقوم بحفظ العمل الي جانب مجلد الصور
وننظر لعملنا النهائي
http://l-nt.net/01/default.html
والأن تمممممم وبحمد الله توزيع الهيدر بتقنية css ومطابق للمواصفات القياسية
التحقق من هنا (http://validator.w3.org/check?uri=http%3A%2F%2Fl-nt.net%2F01%2Fdefault.html&charset=%28detect+automatically%29&doctype=Inline&group=0)
ولتحميل ملف psd والواجهه من هنـــأ (http://l-nt.net/01/m-g3.zip)
أو هــنا (http://upload.traidnt.net/dld67H49172.zip.html)
http://l-nt.net/fwasl.png
مـلـحـوظة :- إذا كان الهيدر للإستايل فانه الاكواد الي مابين ال
<****>
و
</****>
نقوم بلصقهم في الهيدر
وأما الأكواد الي مابين
<style type="****/css">
و
</style>
نقوم بلصقهم في معرفات css الاضافية للغستايل
ثمن الدرس ثمن الدرس الدعاء لي والدعاء لشهداء ليبيا بالجنه وحسن المصير
والسلام عليكم ورحمة الله وبركاته
أخوكم al7rbi-ly
ليرن نت - للخدمات التطويرية (http://l-nt.net/)