اللهم لك الحمد ، ومنك الفرج ، واليك المشتكي ، وأنت المستعان ، ولا حول ولا قوة الا بك .. |
 |
 |  |
| الصحيفة التقنية | الصفحة الرئيسية | مركز تحميل مطور | استخدم ختم مطور | قوِ موضوعك هام | أعلن في مُطِّورْ | شرح السي بانل جديد | افحص البيج رانك | دعم فني مجاني |     |
 |
| |||||||
| دروس تصميم و شروحات مصورة دروس تصميم ، دروس فوتوشوب ، دروس فيديو ، دروس تعليمية ، دروس فلاش |
عزيزي المطور ابتعد عن النقل، ولتكن مواضيعك جديدة وقيمة تعبر عن إبداعك وتميزك
 |
| | LinkBack | أدوات الموضوع | انواع عرض الموضوع |
|
#1
24-02-2011, 03:32 PM
| ||||
| ||||
| توزيع هيدر استايل , واجهه css (مقدم من ليرن نت) سجل دخولك او إضغط هنا للتسجيل بسم الله الرحمـٌن الرحيم الأن ليرن نت تقدم درس توزيع هيدر بالـcss متطلبات الدرس
 المهم نبدأ في الدرس أول شئ نفتح الفوتوشوب مقاس 777× 800 كما موضح بالصوره  والأن نقوم بتصميم هيدر انا صممت هيدر بسيط فقط لتوضيح فكره التصميم والتقطيع وهاذ الهيدر الي صممته  الأن للتقطيع التقطيع يكون صوره يمنى ويسرى و نقطة تمدد كما موضح بالصور  تكون النقطة الي في الوسط هي نقطة التمدد المهم نتابع بعد التقطيع نقوم بالحفظ وهي كـ التالي ملف > حفظ للويب والأفضل ان الصيغه تكون jpeg كما موضح بالصور  وبعد ان نضغط علي حفظ تطلع لنا قائمة ونقوم بتغيير الإسم للإنجليزي ونقوم بحفظها في اي مكان تبيه وإذا كنت حاب توزع الهيدر للأستايل يكون الحفظ في داخل مجلد المنتدى الي متبت علي الأباتشي كما موضح بالصور  وبعد ان نقوم بالحفظ نلاحظ انه الصور انحفظت داخل مجلد اسمه images وإذا طلع لك الأسم صور بالعربي مافي مشكله غيره انجليزي والأن إنتهينا من تصميم و تقطيع و حفظ الهيدر والخطوه التالية هي التوزيع ويتم التوزيع علي الإكسبريشن ويب اول شئ نقوم بفتح البرنامج وتطلع صفحة متل هاي  الأن نقوم بالتوزيع أول شئ ننتقل للمنطقة مابين منطقة الـ <title>Untitled 1</title> و </head> نحط الماوس مابين المنطقتين وقم بتغيير اللغه إالي الأنجليزية ونضغط علي شفت + حرف واو بالعربيه مع العلم انه اللغه إنجليزية لرسم هاذ الرمز > وبعد كتابه هاذ الرمز تطلع لنا قائمة نختار منها style وما نحرك الماوس ولا شئ بعد اختيار القائمة style نقوم بالضغط علي زر المسطره ( سبيس ) وتطلع لنا قائمة اخرى نختار منها type وبعد أختيار type مباشره تطلع قائمة فيها خيار وحيد وهو text/css ونقوم بإختياره وبعد ان نقوم بإختياره مباشره نقوم بالضغط علي شفت + حرف ز بالعربيه مع العلم انه اللغه تكون إنجليزية وذلك لكتابه هاذ الرمز > وإغلاق الكود وفي النهاية هاذ الكود الي يطلع لك كود PHP:  والأن نقوم بوضع الكلاسات وهي كـ التالي نقوم بوضع الماوس مابين المنطقتين الي كتبناهم وهذا توضيع كود PHP: وبعدها نقوم بكتابة أي حرف متلا m بالإنجليزيه وبعدها نقوم بالضغط علي شفت + حرف ج بالعربيه مع العلم انه اللغ مازالت إنجليزية لنكتب القوس { وحين نقوم بكتابته تطلع لنا قائمة نختار منها background-image وبعد إختيار هاد الخيار من القائمه يطلب منك توجيهه للصوره الي تبيها ونحن سنقوم بتوجيهه الي صوره التمدد الي تم تقطيعها في الفوتوشوب كما في الصوره  والأن بعد ان دللناه علي مكان الصوره نقوم مباشرة بكتابه هاذ الكود ; وهو عن طريق الضغط علي حرف ك بالعربيه مع العلم انه اللغ مازالت إنجليزيه ( ودايما في الدوره بعد إختيار اي اختيار من القائمة المطلوبه دايما بعد الأختيار نقوم بالضغط علي الرمز ; ) والأن بعد ان اخترنا الرمز المذكور تطلع قائمة اخرى ونختار منها background-repeat وبعد اختيار هاذ الإختيار وهو خاص بالتمدد تطلع لنا قائمة اخرى نختار منها repeat-x وهي للتمدد العمودي وأيضا متل ما ذكر سابقا دايما نختار الرمز ; بعد كل اختيار لتطلع لنا قائمة اخرى نختار منها height وهو الإرتفاع وبعد الإختيار تطلع لنا قائمة اخرى نختار منها أول خيار وهو إختر طولا وأدخل ارتفاع نقطة التمدد ويتم معرفته بالأتي ندهب لمجلد الي حفظنا في الصور المقطعه ونضغط علي كلك يمين ومت ثم خصائص ومن ثم ملخص ويضهر بنا الأرتفاع كما موضع بالصور  والأن نقوم بإدخال الأرتفاع والي هو طلع معي 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> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" x-undefined /> <title>Untitled 1</title> <style type="text/css"> .m{ background-image:url('file:///C:/Documents and Settings/Administrator/Desktop/ليرن نت/images/learnnt-al7rbi-ly_03.jpg'); background-repeat:repeat-x; height:192px; } </style> </head> <body> </body> </html> والأن نقوم بتوزيع الصوره اليمنى وهي كـ الاتي ندهب لسطر جديد تحت كل الكود بتاع الكلاس m ونقوم بكتابه كلاس جديد وهو متلا m2 ومتل m بالضبط نقوم بضغط . ( دوت ) وبعدها نقوم بكتابه m2 وبعدها شفت + حرف ج بالعربيه لتطلع لنا قائمة ومتل في حالة m نقوم بدله علي الصوره اليمنى ومن ثم نضغط علي زر خرف ك بالعربيه مع العلم انه اللغه مازالت إنجليزية لتطلع لنا قائمه أخرى ونختار منها height وطبا هاذ الأرتفاع ويكون متل نقطة التمدد والي هو طلع معاي 192 والأن نقوم بكتابه الرمز ; مره اخرى لتطلع لنا قائمة أخرى نختار منها width وهو العرض للصوره ويتم معرفته متل ما تم معرفه فرتفاع نقطة التمدد لكن في هاي المره ننظر للعرض مو للإرتفاع كما موضح بالصور  والأن نقوم بكتابه العرض وهو الي طلع معاي 291 والأن بعد كتابه العرض مبارشه نقوم بكتابه الرمز ; مره اخرى لتطلع لنا قائمه نختار منها float وهي خاصة للمحاذاه ونختار منها right وهاي للمحذاه جهية اليمين ونكتب الرمز ; مره اخرى والأن تم وبحمد الله توزيع صوره الهيدر اليمنى وإختصار للشرح للصوره اليسرى وهي متل خطوات الصوره اليمن بالضبط كل الي تغيره هو الإسم بدلا 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> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" x-undefined /> <title>Untitled 1</title> <style type="text/css"> .m{ background-image:url('file:///C:/Documents and Settings/Administrator/Desktop/ليرن نت/images/learnnt-al7rbi-ly_03.jpg'); background-repeat:repeat-x; height:192px; } .m2{ background-image:url('file:///C:/Documents and Settings/Administrator/Desktop/ليرن نت/images/learnnt-al7rbi-ly_05.jpg'); height:192px; width:291px; float:right; } .m3{ background-image:url('file:///C:/Documents and Settings/Administrator/Desktop/ليرن نت/images/learnnt-al7rbi-ly_01.jpg'); height:192px; width:219px; float:left; } </style> </head> <body> </body> </html> والأن أتممنا نص العمل في التوزيع الأن باقي إستدعاء الكلاسات وهو كـ التالي نروح مابين منطقة <body> و </body> ونقوم بكتابه الرمز < وهو تم توضيحه في بدايه الشرح وهو بالضغط علي شفت + واو بالعربيه مع العلم انه اللغه بعد إنجليزيه وحين الضغط تطلع لنا قائمة نختار منها div وبعد الإختيار تضغط علي سبيس لتطلع قائمة اخرى نختار منها class والأن يطلعو لنا قوسين ونكتب بينهم أول شئ وهو اسم كلاس نقطة التمدد والي هو m وهاذ توضيح للأقواس كود PHP: ليطلع لنا الكود </div> ويتم إغلاق الكلاس والأن تحت هاذ الكود الي عملناه بأكمله وهو كود PHP: <body> و </body> كود PHP: نقوم بقص هاذ الكود </div> من الكلاس <div class="m"></div> ليصبح <div class="m"> ونقوم بلصقة في اخر جزء كما موضح بالصور  والأن نقوم بأخر خطوه وهي الاتي وهي نقوم بالتضليل علي الكود كود PHP:  وبعد التضليل نقوم بكلك علي زر الماوس الأيمن ومن الخيارات نختار إستبدال لتطلع قائمة متل الاتي  الجهه اليمنى يكون فيها الكود واليسرى خليها فاضيه والأن نقوم بالضغط علي replace all والأن نقوم بحفظ العمل الي جانب مجلد الصور وننظر لعملنا النهائي Untitled 1 والأن تمممممم وبحمد الله توزيع الهيدر بتقنية css ومطابق للمواصفات القياسية التحقق من هنا ولتحميل ملف psd والواجهه من هنـــأ أو هــنا مـلـحـوظة :- إذا كان الهيدر للإستايل فانه الاكواد الي مابين ال <body> و </body> نقوم بلصقهم في الهيدر وأما الأكواد الي مابين <style type="text/css"> و </style> نقوم بلصقهم في معرفات css الاضافية للغستايل ثمن الدرس ثمن الدرس الدعاء لي والدعاء لشهداء ليبيا بالجنه وحسن المصير والسلام عليكم ورحمة الله وبركاته أخوكم al7rbi-ly ليرن نت - للخدمات التطويرية  |
|
25-02-2011, 03:04 AM
| رقم المشاركة : [2] |
| مطور محترف    | سجل دخولك او إضغط هنا للتسجيل شــكراً ع الدرس الرائع |
| | |
| |
|
25-02-2011, 06:55 PM
| رقم المشاركة : [3] |
| مطور نشيط  | سجل دخولك او إضغط هنا للتسجيل |
| | |
|
| |
|
03-04-2011, 04:28 PM
| رقم المشاركة : [4] |
| :: + مشرف قسم seo و أرشفة المواقع + ::   | سجل دخولك او إضغط هنا للتسجيل شــكراً ع الدرس الرائع |
| | |
|
| |
|
| العلامات المرجعية |
 مواضيع جديدة في قسم دروس تصميم و شروحات مصورة |
| |
| أدوات الموضوع | |
| انواع عرض الموضوع | |
العرض العادي
|
|
