:: الهيدر المتمدد ::

[أميرة القطيف]

سلالالالام

أولا : نصمم الهيدر الذي نريده و نراعي أن يكون فيه منطقة تمدد

ما المقصود بمنطقة التمدد و ما فائدتها ؟!
أول شي خلونا نشوف نماذج لهيدرز متمددة و اخرى لغير متمددة
هيدر غير متمدد
http://www.up.aitaroun.com//uploads/images/aitaroun.comefcec2ffc3.jpg
http://www.up.aitaroun.com//uploads/images/aitaroun.comb3331acd55.jpg
متمدد
http://www.up.aitaroun.com//uploads/images/aitaroun.coma0874c5387.jpg

http://www.up.aitaroun.com//uploads/images/aitaroun.comd4bcb9651e.jpg

اتوقع الحين انكم عرفتم الفرق

الهيدر المتمدد:
يكون بطول الشاشة اما الغير متمدد يكون بحجم معين يحدده المصمم ..
الهيدر الغير متمدد:
بسيطة شغلته خلاص المصمم بحدد عرض للهيدر و بيطلع بدا الحجم ما بيتغير , لكن المتدد كيف صار بعرض الشاشة ؟ و المقاسات تختلف من شاشة الى اخرى ؟؟

الحين نجي نتفحص الهيدر المتمدد عشان نعرف السر

صورة التمدد هي صورة صغيرة جدًا قد لا تتجاوز 10 بكسل في اغلب الستايلات
http://www.up.aitaroun.com//uploads/images/aitaroun.com506223306e.jpg
نلاحظ انها كبيرة جدًا,, اذا كيف اقول انها صغيرة ؟؟؟؟؟
في الحقيقة انها بهذا الحجم تقريبا
http://www.up.aitaroun.com//uploads/images/aitaroun.com9d60f7e1a0.jpg
ولكن بعد تكرارها عدة مرات تتصبح بهذا الشكل
http://www.up.aitaroun.com//uploads/images/aitaroun.comb38fa12ccc.jpg
كيف نختار منطقة التمدد ؟
نختار منطقة لو كررناها ما تتأثر مثل السابقة
انظروا كيف تصير لو كانت ما تناسب
http://www.up.aitaroun.com//uploads/images/aitaroun.com29713b0f0a.jpg
نلاحظ انه في الاعلى صار مو متناسق
الحين اتوقع الكل عرف كيف الهيدر المتمدد صح ؟؟؟؟؟
اذا في أي سؤال اطرحوه و انشاء الله اجيب عليه
و الان سأقوم بعمل درس لطريقة عمل الهيدر المتمدد بطريقتين
1. الفرونت بيج
2. كتابته بال html
وبعد انتهائي سأضعه
تحياتي

[زلزال]

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

[أميرة القطيف]

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

العفووو

ان شا الله انتهي قريبا من الدرس الاخير

شكرا لمرورك اخي زلزال

[أميرة القطيف]

سلام عليكم

نعــــود من جديد

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

بما ان وقتي ضيق بعتبر هذا الهيدر الي استخدمه :D
http://www.up.aitaroun.com//uploads/images/aitaroun.com980aca0fd6.jpg[/URL]
منطقة التمدد الي اخترتها المحددة باللون الاحمر
http://www.up.aitaroun.com//uploads/images/aitaroun.com86ac43965a.jpg (http://www.up.aitaroun.com//uploads/images/aitaroun.com980aca0fd6.jpg)
نجي الحين الى القص بواسطة برنامج الفوتوشوب بهذه الاداة

http://www.up.aitaroun.com//uploads/images/aitaroun.com2923e371df.jpg

نقوم بقص الصورة بهذا الشكل

http://www.up.aitaroun.com//uploads/images/aitaroun.come94c36c39e.jpg
(http://www.up.aitaroun.com//uploads/images/aitaroun.com2923e371df.jpg)
المناطق باللون الوردي هي الصور و المنطقة باللون الازرق هي منطقة التمدد و توضع كـ خلفية

و الان نحفظ الصور المقطعة عن طريق file ثم save for ***

حطوا نوع الصور png-8

بعدين save

بيطلع مربع حوار جديد تختاروا اسم الصور و في save as type حطوا Images only )*.png)

بعدين ok

ونخلص مرحلة الفوتوشوب

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

نتجه الى برنامج الفرونت بيج

أول شي نروح الى التعليمات البرمجية و نمسح كل شي فيها

بعدين نرجع الى التصميم

نعمل جدول من صف واحد وثلاث اعمدة مثل مافي الصورة
http://www.up.aitaroun.com//uploads/images/aitaroun.com1f2ee39638.jpg

بيطلع لينا مثل هيك

http://www.up.aitaroun.com//uploads/images/aitaroun.comfdf47abbe8.jpg

بعدين نضغط بزر الفأرة الأيمن على الجدول ونختار خصائص الجدول

نحط نفس القيم المحطوطة في الصورة

http://www.up.aitaroun.com//uploads/images/aitaroun.com33c723428d.jpg
(http://www.up.aitaroun.com//uploads/images/aitaroun.com1f2ee39638.jpg)
بصير الجدول بهالشكل

http://www.up.aitaroun.com//uploads/images/aitaroun.com4939682c00.jpg

الحين نجي الى اضافة الصور

نحط الماوس على الخلية الاولى بعدين نضغط على http://www.up.aitaroun.com//uploads/images/aitaroun.com18c46c91d6.jpg

ونختار الصورة

بعدين نسوي نفس الشي للخلية الاخيرة

بتصير بهالشكل

http://www.up.aitaroun.com//uploads/images/aitaroun.com2f73c66279.jpg
(http://www.up.aitaroun.com//uploads/images/aitaroun.com18c46c91d6.jpg)
نغير حجم الخلايا بحجم الصورة بالماوس

بتصير بهالشكل

http://www.up.aitaroun.com//uploads/images/aitaroun.comcc2706e6ba.jpg
[URL="http://www.up.aitaroun.com//uploads/images/aitaroun.comcc2706e6ba.jpg"]
بعدين نجي الى منطقة التمدد نضغط باليمين في الخلية الي في الوسط ونختار خصائص الخلية

نختار الصورة الي قلنا عنها صورة التمدد ونحط موافق

بتصير بهالشكل

http://www.up.aitaroun.com//uploads/images/aitaroun.com042714e874.jpg

نضغط بالماوس على الصورة الي على اليسار ونحط اليها محاذاة الى اليسار و الصورة الي على
اليمين الى اليمين بعدين نضغط على

الصورة الاولى و نحط خصائص الصورة

ونحط القيم التالية :

المحاذاة طبعا اخترناها من قبل

والتباعد الافقي :0

و الثانية نفس الشي

وهكذا نكون خلصنا الهيدر و نقدر نرفع الصور و نحطه في اي مكان نريده

في التعليمات البرمجية راح يكون في كتابة بالانجليزي هادي الكتابة هي الي عملناه بالفرونت بيج وتكون بلغة html في الدرس القادم
راح افسر كل رمز فيها ماذا يقصد به

تحيـــــــاتي

[أميرة القطيف]

سلاااااام من جديد

هذا الكود الي يطلع عندنا في التعليمات البرمجية


<div align="center">
<table border="0" width="100%" height="19" bordercolor="#FFDD97"
bordercolorlight="#FFE791" bordercolordark="#FFCC00" dir="rtl" cellspacing="0"
cellpadding="0">
<tr>
<td width="67">
<img border="0" src="images/aitaroun.com_05.png" width="67" height="81" align="right"
hspace="0"></td>
<td background="images/aitaroun.com_03.png">&nbsp;</td>
<td width="516">
<img border="0" src="images/aitaroun.com_01.png" width="516" height="81" align="left"
hspace="0"></td>
</tr>
</table>
</div>



لغة html الاكواد فيها كل tag أو وسم يكون له تاغ بداية وتاغ نهاية

مثلاً :

<div> وسم البداية
</div>وسم النهاية

<body> وسم البداية
</body>وسم النهاية

وسم البداية يكون اسم التاغ بين العلامتين ">" ,"<" و وسم النهاية يكون بينهما بالاضافة الى انه في البداية تضاف اليه "/" و اذا كنا نريد
تنسيق ما بداخل الوسم نضيف التنسيقات بين العلامتين من بعد اسم الوسم

الآن نأتي الى شرح الوسوم

<div> بمثابة الطبقة اي شي نريد وضعه في الموقع نضعه بين هذا الوسم لتحديد موقعه >/div>

في الكود يظهر لنا div بهذه الصورة


<div align="center">


align يعني الاتجاه أو الموقع

هنا محطوط center يعني بالوسط , ممكن ايضا وضع left يعني يسار او وضع right يعني يمين

طبعا بعد ال align نحط = وبعدين نضع القيمة بين( "" )

داخل div في وسم اخر اسمه table

<table> يعني جدول </table>

table في الكود يظهر لنا بهذا الشكل


<table border="0" width="100%" height="19" bordercolor="#FFDD97"
bordercolorlight="#FFE791" bordercolordark="#FFCC00" dir="rtl" cellspacing="0"
cellpadding="0">


border يعني الحدود ومحطوط قيمته 0 يعني ما تبين حدوده
width يعني العرض .. ونقدر نحط اله قيمة بالبكسل او بالنسبة المئوية , هنا وضعنا 100% عشان يكون بحجم كامل الشاشة مهما كانت
مقاساتها ..
height يعني الارتفاع و هنا واضعينه بالبكسل 19
bordercolor يعني لون الحدود و قبل رقم اللون نوضع #
bordercolorlight يعني لون الحدود الفاتح
bordercolordark يعني لون الحدود الغامق
dir هي اختصار لكلمة direction و تعني الاتجاه محطوط قيمتها rtl يعني right to left من اليمين الى اليسار
cellpadding هي المسافة بين الخلايا
cellspacing هي المسافة بين الكتابة و الخلية
عند كتابة الجداول نكتب الصف الاول بجميع اعمدته ثم الصف الثاني كذلك بجميع اعمدته
بداية الصف تكون <tr>و طبعا لها تاغ نهاية و هو </tr>
ولكن قبل ان نغلق الصف نضع بداخله الاعمدة وهي <td> ثم نضع المحتوى الذي نريده ونغلقها </td> نضع الاعمدة التي نريدها ثم
نغلق الصف </tr> واذا اردنا ان نبدأ صف جديد نعمل له مثل الاول
هنا في صف واحد وثلاثة اعمدة
داخل العمود الاول في حجمه ((width))
و محتوى العمود الاول صورة تاغ الصورة هو <img> ولا يوجد له تاغ نهاية
داخل هذا التاغ يجب ان نكتب مسار الصورة و قبل ذلك نكتب src="هنا المسار" ثم كتبنا مواصفات الصورة (( العرض الطول - بالبكسل - جهة الصورة , المسافة المتروكة بين حدود الخلية و الصورة )) في الخلية الي بعدها حطينا لها خلفية عشان تتكرر الصورة و الخلية الي بعدها صورة مثل الخلية الاولى ..
وبكذا نكون خلصنا كتابة الكووود
سلااام عليكم

[أميرة القطيف]

يلا اخي زلزال انتهى الدرس

بانتظار التطبيق