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

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

ý أهمية الصور في تصميم الصفحات .

ý استخدام رمز الصور IMG Tag .

ý عناصر الرمز IMG .

ý عرض الصورة وارتفاعها .

ý الحدود .

ý محاذاة الصور .

ý محاذاة الصورة متعددة .

ý ارتباط الصور .

أهمية الصورة في تصميم الصفحات :

شهدت عدة آلاف من صفحات ويب من خلال إنترنت ولم أكد أري صفحة واحدة تخلو من صورة أو صور . ووجدت أن الصور لها تأثير بصري علي المشاهدين ، حتى الصفحات التي تعتمد علي النصوص TextPages أيضا لا تخلو من الصور ، ولعل الصور إضافة معتبرة حتى لتلك الصفحات ، ووجد صفحات ممتلئة بالصور وعبارات محدودة بين الصور ، بينما الصور المتحركة التي تجذب قطاعا عريضا من زائري إنترنت . وسوف يكون التركيز علي استخدام رمز الصور IMGTag والعناصر المستخدم مع هذا الرمز مع تسليمنا أن هناك أساليب أخري أكثر نقدمها لمعالجة الصور داخل الصفحة التي تقوم بتصميمها .

استخدام رمز الصور IMG Tag :

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

يجب تخصيص مجلد للصور داخل المجلد الرئيسي لسهولة التعامل مع الصور ويسمي هذا المجلد Images ، فسوف نكتب برنامج لإدراج صورة في داخل مجلد Images ويكون البرنامج هكذا :

<HTML>

<HEAD>

<TITLE> Images </TITLE>

</HEAD>

<BODY>

</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) لهذا العنصر فالكتب هذا الرمز ويكون هكذا :

تستخدم التجربة السابقة ونضع حدود حول الصورة بتعديل البرنامج ليصبح الأمر كالتالي :

الرقم الذي نضعه يدل علي سمك الخط المستخدم كإطار حول الصورة فكلما زادت قيمة الرقم كلما كان حجم الخط سميكا .

محاذاة الصور : عنصر محاذاة 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

<P> Testing of image alignment Text Middie

<P> Testing of image alignment Text Baseline

<P> Testing of image alignment Text Absbottom

<P> Testing of image alignment Text Textop

</BODY>

</HTML>

التعليق :

تحتاج إلي هذا العنصر لإضافة إرشاد أو تعليق يفيدنا معين ويتم عرض إذا وضع المؤشر فوق الصورة لحظة ويكون شكل الرمز هكذا

المسافات الأفقية والعمودية :

يوجد عندنا نص وصورة بجوار النص فأننا نحتاج أحيانا للفصل بين النص والصورة بترك مسافة بين الصورة والنص . نقوم بعمل تجربة ، نكتب البرنامج الأتي نفتح Notpad في صفحة جديدة نكتب فيه :

<HTML>

<HEAD>

<TITLE> Texting Images </TITLE>

</HEAD>

<BODY>

<H4> The Beginnings of Tragedy <BR> of The History Play and of Comedy . <BR> The Development of The Theatre <BR>

</H4> </DIV>

The specimens of plays extant form the sixteenth century are

</BODY>

</HTML>

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

نضيف علي كود الصورة الأمر Hspace=50

محاذاة صور متعددة :

رمز الصورة يتم إدراجه في موضع الذي يكتب فيه من البرنامج والعلاقة بين الصورة والنص كما أن ديناميكية تنفيذ الأمر نجعل المستعرض يقوم بترتيب الصور و النصوص المكتوبة داخل صفحة ويب التي نقوم بتصميمها .

لكي نقوم بأدراج عده صور في الصفحة الواحدة فأننا نكتب رمزا لكل صورة ونراعي أن يكون الرمز في الموضع الذي نرغبه من النص . لعمل ذلك نكتب في نفس البرنامج السابق ونضيف علية الرمز الأتي ، وهو عبارة عن شعار ويكون بعد <DIV ALIGN=CENTER> نكتب :

نقوم بحفظ البرنامج بعد التحديث والشعار الجديد

ارتباط الصور :

لا يختلف الارتباط Link سواء كان ارتباط عنوان نص أو صورة أو حتى جزء من صورة أو خريطة فرز الارتباط واحد هو >………<A والنسبة للصورة قم بإدراج رمز الارتباط قبل رمز الصورة مباشرة ، نضيف صورة نستخدمها للعودة إلي الصفحة الرئيسية HomePage ونضيف الرمز في نهاية البرنامج قبل </DIV> ويكون .

نحفظ الملف ثم نقوم بتشغيله من المستعرض

تنبيه هام جدا :

a. هناك رمز يسمي <HR> يستخدم لتحكم الأفقي .

b. يمكن استخدام الجداول لإدراج الصور داخل خلايا الجدول ويمكن للقوائم الأنماط التي تمكنك من التحكم في موضع الصور .

bohot

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

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

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

إرسال تعليق

المتابعون