أكاديمـيـة العرضـة الجنوبيــة - ربـاع - عرض مشاركة واحدة

أضغط هنا · 22/09/2004, 08:11 PM

تابع ...

يمكنك أيضا تحديد عرض الحاشية حول الصورة أو المسافة بين الصورة النصوص المحيطة عن طريق الخاصية hspace.
توجد أيضا خاصية alt للصور، وهي تستخدم لوصف الصورة، بحيث أن النص الذي تضعه في الخاصية alt سيعرض بدلا من الصورة حتى إتماما تحميلها، وكذلك إذا لم يجد المتصفح الصورة، وهذه النصوص أيضا تظهر في مربع التلميح ToolTip عند التأشير بالفأرة على الصورة.
خرائط الصور
في بعض الأحيان تجد أن هنالك صورة عليها أكثر من بقعة ساخنة Hot Spots بوصلات مختلفة، هذه الصور يتم تقسيمها إلى مناطق مثل الخريطة، وما يلي هو كيفية عمل ذلك.
تتكون الخريطة الصورية من جزئين، الخريطة والصورة، حيث نقوم بتصميم الخريطة وإعطائها إسما، ثم نكتب هذا الإسم في خاصية usemap للصورة.
في البداية نشرح كيفية تكوين الخريطة لصورة مثل هذه الصورة

فإذا إردنا تقسيم الصورة السابقة فسيكون التقسيم (الخريطة) كالتالي

أي بحيث يشير كل حزء من الأجزاء الثلاثة إلى أحد أقسام الموقع الإفتراضي، مهمتنا الآن هي رسم الخريطة السابقة وتحديد البقع الساخنة والوصلات عليها، ويتم ذلك باستخدام الوسم map، ونحدد إسم الخريطة بالخاصية name، ونقوم بوضع الأشكال بين وسمي الفتح والإغلاق للوسم map، والأشكال تكون في صورة وسوم area مفردة، نقوم بتحديد الشكل عن طريق الخاصية shape، ثم نقوم بتحديد الوصلة بالخاصية href ونحدد إحداثيات الشكل بالخاصية coords، ويختلفكل شكل عن الآخر بطريقة كتابة إحداثياته، والأشكال ثلاثة هي :
· circle : وهو شكل الدائرة، وتكون إحداثياته عبارة عن الإحداثي السيني للمركز ثم الإحداثي الصادي للمركز ثم نصف القطر (x, y, radius).
· rect : وهو شكل المستطيل، وتكون إحداثياته عبارة عن الإحداثي السيني للركن أعلى اليسار ثم الإحداثي الصادي له ثم الإحداثي السيني للركن المقابل أدنى اليمين ثم الإحداثي الصادي له (x1, y1, x2, y2).
· poly : وهو شكل المضلع، ويمكنك باستخدامه رسم الأشكال المكونة من عدة قطع مستقيمة، وتكون إحداثياته عبارة عن الإحداثي السيني ثم الصادي للنقطة الأولى ثم الثانية وهكذا حسب ما تشاء من النقط (x1, y1, x2, y2, .. xn, yn).
ويجب أن تعرف أيضا أن نقطة أعلى اليسار هي نقطة الصفر، وكلما تنزل إلى الأسفل تزداد قيمة الإحداثي الصادي وكلما اتجهت إلى اليسار تزداد قيمة الإحداثي السيني.
لمعرفة الإحداثيات المطلوبة نستخدم أي برنامج للرسم مثل Adobe Photoshop أو Paint Shop Pro .
في مثالنا السابق تم حساب الإحداثيات وكانت النتيحة كالتالي :
<img src="/images/sample2.gif" usemap="#mymap">
<map name="mymap">
<area shape="rect" href="http://www.jokes.com/"
coords="6,10,67,44">
<area shape="circle" href="http://www.story.com/"
coords="121,93,27">
<area shape="poly" href="http://www.download.com/"
coords="37,90,73,105,59,129,15,129,4,105">
</map>

ستلاحظ الآن أن الصورة مقسمة إلى عدة مناطق ساخنة كل منها يشير إلى وصلة مختلفة، عند النقر على أحدها يظهر حوله إطار أسود، يمكنك إزاله هذا الإطار والتحكم بسماكته بالخاصية border في الوسم shape، تستطيع أيضا أن تحدد alt مختلف لكل قسم من الصورة باستخدام الخاصية alt في الوسم shape.
<img src="/images/sample2.gif" usemap="#mymap" border="0">
<map name="mymap">
<area shape="rect" href="http://www.jokes.com/"
coords="6,10,67,44"
border="0" alt="Be Happy">
<area shape="circle" href="http://www.story.com/"
coords="121,93,27"
border="0" alt="Enjoy!">
<area shape="poly" href="http://www.download.com/"
coords="37,90,73,105,59,129,15,129,4,105"
border="0" alt="Best Downloads">
</map>

تنظيم الـمـحتوى
يمكنك تنظيم المحتوى في لغة HTML في عدة أشكال، يمكنك مثلا وضعه في صورة قائمة مرتبة، أو في صورة شجرة (مخطط هرمي) وأهم أنواع تنظيم المحتوى هي الجداول.
يمكنك عمل القائم المرتبه باستخدام الوسم ol والغير مرتبة ul بحيث توضع البنود بينهما وكل بند يحدد بالوسم li، ويمكنك تحديد نوع الترقيم في القوائم المرتبة بالحروف أو بالأقام العربية أو الرومانية وغيرها عبر الخاصية type وتأخذ أحد القيم التالية :
1 : 1, 2, 3, 4, ..
a : a, b, c, d, ..
A : A, B, C, D, ..
i : i, ii, iii, iv, ..
I : I, II, III, IV, ..
وفي القوائم الغير مرتبة :
· circle :
o
· square :
§
· disc :
·
ويمكن وضع قائمة داخل قائمة لتشكيل المخططات الهرمية.
<ul type="circle">
<li>Pepsi
<li>Crash
<li>7 Up
</ul>

<ol type="I">
<li>Windows (85%)
<li>Linux (10%)
<li>Mac (3%)
<li>Other (2%)
</ol>

<ol>
<li>American Companies
<ol>
<li>Microsoft
<li>General Motors
</ol>

<li>German Companies
<ol>
<li>Dubian
<li>BMW
<ul>
<li>6 Class
<li>7 Class
</ul>
</ol>
</ol>

الجداول
تعتبر الجداول من أهم مكونات صفحات HTML، وجميع التصاميم الإحترافية تستفيد من الجداول لتصميم الصفحة وتوزيع الكائنات عليها وتشكيلها في القالب الذي يريدونه، يتم إدراج الجدول بالوسم table وداخل الجدول يجب إدراج صفوف tr وداخل الصفوف توجد البيانات td، يمكن وضع إطار للجدول بالخاصية border حيث نحدد فيه سماكة الإطار المطلوب 0 تعني دون إطار، القيمة الإفتراضية للإطار هي 0.
<table border="1">
<tr>
<td>First Row - First Data
<td>First Row - Secound Data
</tr>
<tr>
<td>Secound Raw - First Data
<td>Secound Raw - Secound Data
</tr>
</table>

يمكنك أيضا التحكم بالمسافة بين الخلايا بواسطة الخاصية cellspacing، والمسافة بين الحدود الداخلية للخلايا ومحتويات الخلايا بواسطة الخاصية cellpadding.
<table cellspacing="10" cellpadding="20" border="1">
<tr>
<td>First Cell</td>
<td>Secound Cell</td>
</tr>
</table>

يمكن التحكم بعرض الجدول بالخاصية width وارتفاعه بالخاصية height وكلاهما يأخذ قيما مطلقة أو نسب مؤية، ويمكن استخدام هذه الخصائص في الخلايا td أيضا وعند إعطاء الخلايا قيما نسبية فإنها تحسب بالنسبة للصف الذي هي فيه.
<table width="100%" height="100%" border="1">
<tr>
<td width="100" height="40%">First Cell
<td width="100%" height="40%">Secound Cell
</tr>
<tr>
<td width="100" height="60%">First Cell
<td width="100%" height="60%">Secound Cell
</tr>
</table>

يمكن التحكم بلون خلفية الجدول بالخاصية bgcolor ويمكن تعيين صورة في الخلفية بالخاصية background، يمكن استعمال هذه الخواص في الخلايا td أيضا، وعند تعيين قيمة bgcolor للجدول مختلفة عن قيمة أحد الخلايا فإن لون الخلية سيطغى على لون الجدول في تلك الخلية، لأن الخلية موجودة فوق الجدول في ترتيب الطبقات.
<table border="1" background="sample.gif" width="90%" height="80%">
<tr>
<td bgcolor="Yellow">First Cell
<td>Secound Cell
</tr>
</table>

يمكن التحكم بمحاذاة محتوى الخلية أفقيا بالخاصية align ورأسيا بالخاصية valign، في الخاصية align القيمة left تعني محاذاة لليسار و rigth لليمين و center بالمنتصف و justify للضبط الكلي تجعل الأسطر مساوية في الطول، أما الخاصية valign فتأخد القيمة top للأعلى، bottom للأسفل middle للمنتصف.
<table border="1" width="90%" height="80%">
<tr>
<td align="right" valign="bottom">First Cell
<td align="left" valign="top">Secound Cell
</tr>
</table>

يتبع ...