سلسلة دروس html- الدرس الثالث
نبدأ باذن الله الدرس الثالث من لغة تأشيرالنص التشعبي
و هذه روابط للدروس السابقة لمن يحب قرائتها:
الدرس الصفر - الدرس الأول- الدرس الثاني
============================
التعامل مع االرسوميات:
* استخدام الرسوميات في موقعك :
ان أحد السمات المميزة لتصمصيم الوب هي خلق توازن بيم محتويات التصميم و ازمنة التحميل الموافقة لها
* تنسيقات الرسوميات :
تستطيع متصفحات الانترنت معالجة الرسوميات ذات اتنسيق:gif او jpeg
و يمكن لتنسيقات jpeg ان تملك امتدلد قصير هو jpg و لها امتداد اخر غير مشور هو jfif
* انشاء الصور :
توجد ثلاثة طرق تستخدم لانشاء الصورة مرتبة بشكل تنازلي من الصعب للاسهل :
- بناء صورة من البداية عن طريق استخدام احد تطبيقات تحرير الصور مثل paint shop و microsoft image composer
- القيام بمسحها عن طريق الماسحة الضوئية (scaner)
- تسجيلها من الوب
* صور الخلفية :
يمكن تغيير لون الخلفية و ذلك من الوسم :
<body bgcolor=اسم اة رقم اللون>
و لكن لو اردنا وضع صورة كخلفية للصفحة ؟؟!
يوجد نوعان اساسيان من الصور سوف تتم دراستهم هنا و هذه الوسوم التي سوف نضعها في الbody للصفحة :
<body background="اسم الصفحة ">
* التوضع و الرصف :
ان الوسم الاساسي الذي يقوم بتحديد مصدر الصورة هو فاذا لم تكن الصورة في نفس المجلد تذكر بان تقةم بتحديد مسارها.
مثال :
<img src=/imges/filename.jpg>
ان الصورة سوف تتوضع نحو اليسار و لكن ممكن ان نضعها في مكان غير ذلك و ذلك باستخدا م
كما تعلمنا ذلك سابقا في الدرس الثاني.
* رصف الصور مع النص :
يتم اعداد خيار الرصف algin في الوسم و الذي يمكن ان ياخذ احدى القيم التالية :
top
middle
left
bottom
right
و يتم رصف اي نص يلي الوسم مباشرة تبعا لهذا الوسم
مثال :
<img src = filename.jpg algin=top>
يقوم هذا الخيار برصف النص في اعلى الصورة.
كل شيى يلي الوسم يتاثر بخيار الرصف algin بما في ذلك الصور الاخرى من اجل ان تقوم بترتيب الصور و متل النص بشكل دقيق استخدم الجداول التي ساشرحها في دروس قادمة إن شاء الله.
* النص البديل :
يمكن للوسم img ان ياخذ الخيار alt= الذي يقوم باعداد النص الذي يظهر عند عرض الصفحة بدون تحميل الصورة
مثال :
<img src=filename.jpg alt="مثال عن النص البديل" align=texttop>
حيث عندا نضع المؤشر على الصورة يظهر النص.
* الحجم :
يتم عرض الصورة مباشرة بحجمها الطبيعي و لكن يمكننا تغيير هذا الحجم باعداد العرض width و الارتفاع height كما يلي :
<img src=filename.gif width=100 height=165>
كما يمكن اعداد الخيارين height و width بالنسبة المئوية تستخدم هذه الطريقة للصور الكبيرة كصورة شعار الصفحة التي تملىء العرض باكمله...
مثال
<img src=filename.gif width=100%>
* الحدود الخارجية و التباعد :
يقوم الخيار border باعداد السماكة (بالعنصورة)للحدود المحيطة بالصورة حيث يتم تحديد لون لهذه الحدود بواسطة لون النص فاذا اردت الحصول على حد سميك بلون ازرق توجب عليك ان تقوم اولا باعداد لون الخط و ثم اعداد السماكة.
مثال :
<font color=blue>
تقوم المتصفحات بوضع فراغ وحيد بين الصورة و اي نص يليها الامر الذي يبدو غير مريح و مقيد و لكي تقوم بترك فراغ يبلغ عددا من العنصورات حول الصورة استخدم التباعد الافقي hspace و التباعد العمودي vspace
مثال :
<img src=filename.jpg hspace= 50 vspace=40>
* الارتباطات :
يمكن استخدام الصورة كارتباط بنفس الطريقة التي يتم فيها استخدام النص كارتباط كل ما عليك فعله هو وضع وسوم ارساء
<a herf = conect.htm><img src=filename.jpg></a>
* اشرطة التنقل :
يمكنك مساعدة الاخرين على استكشاف موقعك من خلال بناء شريط التنقل و هو عبارة عن مجموعة من الصور او الازرار الرتبطة الى صفحات اخرى و غالبا ما يوجد في اعلى الصفحة بشكل خط افقي و يتم انشائه بعدة وسوم تكتب بالتوالي كما في المثال :
<html> <head><title>الصور</title><head> <body> <centr> <a harf=index.htm><img src=home.gif border=0></a><a herf =map.htm><img src=map.jpg border=0></a> <a herf=books.htm><img src=books.gif border=0></a> </center> </body> </html>
* خرائط الصورة :
يمكتك القيام باعداد ناطق عديدة من صورة واحدة كارتباطات مختلفة و ذلك باستخدام خريطة الصورة و هي كما يلي :
##القسم النظري##
يتوجب عليك اولا ان تقوم باعلام المتصفحات ان تستخدم صورتك كخريطة ثم قم بتسميتها ضمن الوسمimg مع الخيار usemap و لا نتس ان تسيق الاسم باشارة#كم هو مبين بالسطر التالي:
<img src=filename.gif usemap ="#name">
لقد تم تعريف مناطق الخريطة باسطر تمت احاطتها بالوسمين و ستقوم بتحديد اسم الخريطة المشار اليها ضمن الوسم الاول لاحظ هنا ان الاشارة # ليست موجودة هنا :
<map name= name>
بعد ان انجزت ما سبق اصبحت اان مستعدا لتعريف البقعة الفعالة او منطقة الارتباط في الوسميوحد اربع خيارت للشكل shape هي المستطيلrectو الدائرةcircle و المضلع polygon و جميعها تحتاج الى تعريف الاحداثيات الخاصةcoords بها كذلك يحتاج الوسم الى herf انشاء الارتباط مثال :
<area shape =..coords..=herf=...>
و الاحداثيات هي القيم المرجعية للعنصورات و يمكنك اخذها ببرنامج paint shop راقب سطر الحالة و انت تؤشر فترى ارقام هذه هي.
ملاحظة : يجب ان لا يكون اسم الملف مماثلا لاسم المخصص لخريطة الصورةusemap=
##القسم العملي##
@ من اجل مستطيل يتوجب عليك فقط اعطاء احداثيي الزاويتين السفلى اليمنى و العليا اليسرى و اللتين تعطيان بالصيغة "x1,y1,x2,y2"
@ الدائرة تتطلب ثلاثة ارقام هي احداثيات المركز و نصف القطر و تعطى بالصيغة :"x,y,radius"
@ المضلع يستخدم حيثما ينطبق محرر الصورة فعليا على المنطقة الفعلية لانه سياخذ العديد من الاحداثيات بالقد الذي تريده بمعدل احداثي لكل راس من روؤسه.
في المثال المدون الاسفل يوجد اربعة رؤوس فقط
@ الخيار الافتراضي DEFAULT يقوم باعداد ارتبلط الخلفية لاي جزء من الصورة لم يتم تحديده بالاشكال السابقة
مثال :
<HTML> <HEAD><TITLE>خرائط الصورة</TITLE></HEAD> <BODY> <IMG SRC=MAP.GIF USEMAP=#MYMAP BORDER=0> <MAP NAME=MYMAP> <AREASHAPE=RECRDS=77.311.90,23HERF=ARABIA.COM> <AREA SHAPE=CIRCLE COORDS=201,268,21,58 HERF =ARABTEAM2000.COM> <AREA SHAPE=POLYGON COORDS=25.58.88.66 HERF=WWW.HOTMAIL.COM </MAP> </BODY> </HTML>
يمكنك فعل ذلك عن طريق الفرونت بيج انفر هنا لترى
* الخلاصة :
1- يمكنك استخدام الرسوميات لتزيين صفحتك لكن تجعل ومن تحميلها اطول
2- يجب ان تكزن الرسوميات بالتنسيق GIF او JPG
3- يمكن استخدام صورة لوضعها خلفية للصفحة
4- يمكن التحكم بحجم الصورة
5- يمكن اعداد تباعد عامودي و افقي لتحديد الصورة
6- يمكن انشاء الارتباطات من الصورة
7- يمكن استخدام صورة واحدة لعدة ارتباطات
=================================
و بهذا و بعون الله يكون الدرس الثالث قد اكتمل
و في الدرس الرابع سوف يتم شرح تصميم الصفحة
أرجوا ان اكون وفقت في الدرس
ارجوا من كل اخ ان يسأل عن اي امر لا يفهمه كي اجاوبه .
و الله ولي التوفيق