الخميس، 27 مارس، 2014

تعلم استخدام الصور في الصفحات



استخدام الصور في الصفحات
ý      أهمية الصور في تصميم الصفحات .
ý      استخدام رمز الصور IMG Tag  .
ý      عناصر الرمز IMG .
ý      عرض الصورة وارتفاعها .
ý      الحدود .
ý      محاذاة الصور .
ý      محاذاة الصورة متعددة .
ý      ارتباط الصور .

أهمية الصورة في تصميم الصفحات :
شهدت عدة آلاف من صفحات ويب من خلال إنترنت ولم أكد أري صفحة واحدة تخلو من صورة أو صور . ووجدت أن الصور لها تأثير بصري علي المشاهدين ، حتى الصفحات التي تعتمد علي النصوص TextPages أيضا لا تخلو من الصور ، ولعل الصور إضافة معتبرة حتى لتلك الصفحات ، ووجد صفحات ممتلئة بالصور وعبارات محدودة بين الصور ، بينما الصور المتحركة التي تجذب قطاعا عريضا من زائري إنترنت .     وسوف يكون التركيز علي استخدام رمز الصور IMGTag والعناصر المستخدم مع هذا الرمز مع تسليمنا أن هناك أساليب أخري أكثر نقدمها لمعالجة الصور داخل الصفحة التي تقوم بتصميمها .
استخدام رمز الصور IMG Tag :
نستخدم الرمز IMG  لكي نتمكن من إدراج صورة داخل الصفحة التي نقوم بتصميمها ، ويتميز هذا الرمز بأنه رمز بداية فقط <IMG> وليس له رمز إغلاق ، كما يتميز بأنه يحتاج إلي العنصر SRC لكي نقوم بتحديد اسم الصورة وموقعها كما يمكن إضافة عناصر أخري تتعلق بحجم الصورة ويكفي استخدام عنصر SRC مع الرمز فقط لكي نقوم بإدراج الصورة مثل < IMG SRC=AA.BMP> لكي نقوم بإدراج الصورة .
يجب تخصيص مجلد للصور داخل المجلد الرئيسي لسهولة التعامل مع الصور ويسمي هذا المجلد Images ،   فسوف نكتب برنامج لإدراج صورة في داخل مجلد Images ويكون البرنامج هكذا :

<HTML>
<HEAD>
<TITLE> Images </TITLE>
</HEAD>
<BODY>
<IMG SRC=”Images/A.gif”>
</BODY>
</HTML>
نحفظ هذا البرنامج ثم نعرضه باستخدام المستعرض
عناصر الرمز IMG :
هناك عدد من العناصر تستخدم مع رمز الصور Img attributes تمكننا من التحكم في الصور التي تعرضها في صفحتنا :
v   SRC =***   يستخدم هذا العنصر في تحديد موقع الصورة واسمها ونوعها مثلا أسم المجلد ثم أسم الصورة متبوعة بنوعها مثل “JPG,GIF,BMP” .
v WIDTH =***   يستخدم هذا العنصر لتحديد عرض الصورة والقيمة التي توضع هنا هي عدد من البكسل Pixels .
v  HEIGHT =***   يستخدم هذا العنصر مع العنصر Width لتمكين المستعرض من المعرفة المسبقة لمساحة الصورة .
v    BORDER =***   لوضع حدود حول الصورة أو لإلغاء الحدود Border =0 .
v    ALIGN =***   لمحاذاة الصورة أفقيا أو رأسيا .
v  ALT =description    يستخدم هذا العنصر لإضافة تعليق للصورة يتم عرضه إذا وضعت المؤشر فوق الصورة .
v    HSPACE =***   لإضافة مسافات أفقية حول المحور الأفقي للصورة .
v    VSPACE =***    لإضافة مسافات رأسية حول المحور الرأسي للصورة .
عرض الصورة وارتفاعها      Width, Height :
استخدام هذين العنصرين ليس لهما تأثير علي حجم أو مساحة الصورة ، فسوف يتم تحميل الصورة بحجمها الأصلي وكل ما في الأمر أن هذين العنصرين يتحكمان في الصورة أثناء عرضها في الصفحة ، والنتيجة أن زائر الصفحة قد ينتظر وقتا طويلا حتى يتم تحميل الصورة بكاملها ثم يري في النهاية صورة أما باهته غير واضحة أو صغيره ضئيلة لا تتناسب مع هذا الوقت .
ننصح مصممي الصفحات أن يستخدموا الحجم الحقيقي وتضع القيم الحقيقية للصورة في هذين العنصرين حتى يقوم المستعرض باتخاذ الإجراء المناسب لتقليل وقت التحميل وأيضا لعرض الصورة بالجودة الأصلية .
الحدود Border :
يستخدم هذا العنصر في وضع حدود أو إطار حول الصورة أو الحذف الإطار إذا وضعنا قيمة (5) لهذا العنصر   فالكتب هذا الرمز ويكون هكذا :
<IMG SRC = “ ***/ ****.BMP”  BORDER=”5”>
تستخدم التجربة السابقة ونضع حدود حول الصورة بتعديل البرنامج ليصبح الأمر كالتالي :
<IMG SRC = “ ../Imegas/ A.GIF”  BORDER=”6”>
الرقم الذي نضعه يدل علي سمك الخط المستخدم كإطار حول الصورة فكلما زادت قيمة الرقم كلما كان حجم الخط سميكا .
محاذاة الصور :   عنصر محاذاة Alignment Attribut
يوجد العديد م العناصر للتحكم في موضع الصورة أفقيا مثل المحاذاة لليمين أو لليسار ، والوضع الافتراضي للمحاذاة الأفقية هو جهة اليسار ، ويوجد قيم للتحكم مثل رأسيا تعني أعلي أو وسط أو اسفل الصفحة ونوضح في الجدول محاذاة الصور .
قيمة العنصر
الوظيفة
قيمة العنصر
الوظيفة
Left
موضع الصورة إلي اليسار (افتراضي) .
Textop
موضع مجاور للصورة لأعلي .
Right
موضع الصورة إلي اليمين .
Absmiddle
في منتصف الصورة
TOP
موضع الرأسي الأعلى .
Baseline
أسفل الصفحة
Middle
موضع الرأسي في منتصف الصفحة .
Absbottom
أسفل الصورة
Bottom
موضع الرأسي أسفل الصفحة .


نكتب هذا البرنامج للتوضيح هذه العناصر نفتح صفحة جديدة من برنامج Notepad ثم نحفظها .
<HTML>
<HEAD>
<TITLE> Align Images </TITLE>
</HEAD>
<BODY>
<P> <H3> Alignment attribut  محاذاة الصور </H3>
<P> Testing of image alignment Text  Top
<IMG SRC = “ ../Images/ A0.GIF”  BORDER=0  ALIGN=TOP>
<P> Testing of image alignment Text  Middie
<IMG SRC = “ ../Images/ A0.GIF”  BORDER=0  ALIGN=Middie>
<P> Testing of image alignment Text Baseline
<IMG SRC =“ ../Images/A0.GIF” BORDER=0  ALIGN= BASELINE>
<P> Testing of image alignment Text Absbottom
<IMG SRC =“ ../Images/A0.GIF”BORDER=0 ALIGN=Absbottom >
<P> Testing of image alignment Text Textop
<IMG SRC = “ ../Images/ A0.GIF”  BORDER=0  ALIGN= Textop >
</BODY>
</HTML>
التعليق :
تحتاج إلي هذا العنصر لإضافة إرشاد أو تعليق يفيدنا معين ويتم عرض إذا وضع المؤشر فوق الصورة لحظة ويكون شكل الرمز هكذا
<IMG SRC=”../IMAGES/A6.JIF” BORDER=0 ALT=”تجربة “>

المسافات الأفقية والعمودية :
يوجد عندنا نص وصورة بجوار النص فأننا نحتاج أحيانا للفصل بين النص والصورة بترك مسافة بين الصورة والنص .  نقوم بعمل تجربة ، نكتب البرنامج الأتي نفتح Notpad في صفحة جديدة نكتب فيه :
<HTML>
<HEAD>
<TITLE> Texting Images </TITLE>
</HEAD>
<BODY>
<DIV ALIGN= CENTER>
<H4> The Beginnings of Tragedy <BR> of The History Play and of Comedy . <BR> The Development of The Theatre <BR>
</H4> </DIV>
<DIV ALIGN=Just>
<IMG SRC=”../IMAGES/A7.JIF” BORDER=1ALT=”تجربة “ ALIGN=Right >
The specimens of plays extant form the sixteenth century are
</BODY>
</HTML>
قمنا باستخدام بعض عناصر التنسيق البسيطة نقوم بحفظ البرنامج ومن خلال نافذة المستعرض
نضيف علي كود الصورة الأمر Hspace=50
محاذاة صور متعددة :
رمز الصورة يتم إدراجه في موضع الذي يكتب فيه من البرنامج والعلاقة بين الصورة والنص كما أن ديناميكية تنفيذ الأمر نجعل المستعرض يقوم بترتيب الصور و النصوص المكتوبة داخل صفحة ويب التي نقوم بتصميمها .
 لكي نقوم بأدراج عده صور في الصفحة الواحدة فأننا نكتب رمزا لكل صورة ونراعي أن يكون الرمز في الموضع الذي نرغبه من النص .  لعمل ذلك نكتب في نفس البرنامج السابق ونضيف علية الرمز الأتي ، وهو عبارة عن شعار ويكون بعد <DIV ALIGN=CENTER> نكتب :
<IMG SRC=”../IMAGES/A8.GIF” BORDER=”0” WIDTH=”312” HEIGHT=”57” ALIGN=”RIGHT” HSPACE=”0” ALT=”اختبار”>
نقوم بحفظ البرنامج بعد التحديث والشعار الجديد
ارتباط الصور :
لا يختلف الارتباط Link سواء كان ارتباط عنوان نص أو صورة أو حتى جزء من صورة أو خريطة فرز الارتباط واحد هو >………<A  والنسبة للصورة قم بإدراج رمز الارتباط قبل رمز الصورة مباشرة ، نضيف صورة نستخدمها للعودة إلي الصفحة الرئيسية HomePage ونضيف الرمز في نهاية البرنامج قبل </DIV> ويكون .
<A HREF=King 13.HTML> <IMG SRC=”../IMAGES/A9.GIF” BORDER=”0” ALIGN=”LEFT” HSPACE=”0” ALT=”العودة إلي الصفحة”>
نحفظ الملف ثم نقوم بتشغيله من المستعرض
تنبيه هام جدا :
a.      هناك رمز يسمي <HR> يستخدم لتحكم الأفقي .
b.      يمكن استخدام الجداول لإدراج الصور داخل خلايا الجدول ويمكن للقوائم الأنماط التي تمكنك من التحكم في موضع الصور .

ليست هناك تعليقات:

إرسال تعليق