تصميم مواقع الانترنت من الصفر حتى الاحتراف - الصفحة 8

ملفي الشخصي · [ **10-09-2008** ]

الاخ سنو اشكرك فعلا لتثبيتك الموضوع .. واتمنى للجميع الاستفادة ..

توقفنا سابقا مع تمرين صفحة منسقة بالجداول استعملنا بها بعض السمات التي مرت معنا واضفنا اليها شيء جديد وهو تداخل الجداول .. اي انني استطيع ان ابني جداول بداخل جدول وهذه مهمة جدا جدا لان لا يخلو تصميم من الجداول المتداخلة ..
لنشرح الكود السابق الذي استعملناه ..
قمنا بفتح مستند نصي بلغة ال html حددنا عنوان ال title ب The first page اقفلنا ال head

كود HTML:

<html> <head> <Title>The first page</Title> </head>

افتتحنا ال body واخترنا الخلفية صورة فكان لا بد اذا من استعمال سمة background وقلنا انها خاصة للخلفياتت التي نستعمل بها صور .. وكانت الصورة اسم الصورة 1 وامتدادها هو jpg فوضعناها هكذا
1.jpg وضعناهم في داخل وسم ال body هكذا :

كود HTML:

<body background=1.jpg>

ثم بدأنا العمل بالجداول افتتحنا وسم الجدول table حددنا بداخله سمة ال border بعرض 2 ثم ال CELLSPACING وهي كما قلنا انها المساحة المحصورة بين الخلايا والاعمدة هنا جعلت قيمتها صفر اي انها خامدة ولا اريد استعمالها الان CELLSPACING=0 ثم ال CELLPADDING وهي تحدد مساحة الخلية كما راينا سابقا وحددتها هنا ب 15 .. CELLPADDING=15 وهي المسؤولة طبعا عن اعطائي هذا الفاصل الجميل المتناسق في مساحة الخلايا .. ثم حددت ال WIDTH وهو عرض الجدول وحدته بالنسبة المئوية من قيمة الصفحة فجعلته 90% من اجمالي قيمة الصفحة ..
ثم جعلت للجدول هذا خلفية صورة فكان لابد من استدعاء السمة BACKGROUND واخترت لها الصورة التي اسمها 9 وامتداها هو فتكون النتيجة هكذا BACKGROUND=9.jpg ثم حددت بعض جهات الحدود التي اريد اظهارها واعطائها الوانا فاخترت ال borderColorDark واعطيته لون #76B291 وال bordercolorlight واعطيته قيمة اللون #D1E1D8 ( راجع التمرين الخاص بهذه السمات ان كنت قد نسيتها لترى عمل كل منهما ) .. ثم حددت الاتجاه الداخلي لمحتويات الجدول بالتوسط align=center

ليصبح كود هكذا :

كود HTML:

<table BORDER=2 CELLSPACING=0 CELLPADDING=15 WIDTH="90%" BACKGROUND="9.jpg" borderColorDark="#76B291" bordercolorlight="#D1E1D8" align="center" >

ثم افتتحنا ال tr واتبعناها ب ال td

كود HTML:

<tr> <td>

من غير ان نغلق ايا منهما ابتدائنا بداخلهما ببناء جدول جديد .. قريب من معطيات الجدول الاساسي الول لكن فيه بعض التغيير بالسمات التاية .. ال CELLPADDING هنا جعلت قيمتها ال 12 وال WIDTH جعلتها بالقيمة المئوية وقيمتها 100% اي التمدد الكلي داخل الجدول الاساسي بحيث يحتل المساحة كاملة وال BACKGROUND اخترت لها الصورة 1 وهي نفس الصورة التي استعملتها في الخلفية الاساسية للصفحة ..
ليصبح الكود هكذا :

كود HTML:

<table BORDER=2 CELLSPACING=0 CELLPADDING=12 WIDTH="100%" BACKGROUND="1.jpg" borderColorDark="#76B291" bordercolorlight="#D1E1D8" align="center" >

ثم افتتحت ال tr و td الخاصتين بالجدول هذا الاخير

كود HTML:

<tr> <td>

ثم بداخلهما اخترت ان افتتح جدول اخر ويكون الجدول الثالث في الصفحة والجدول الثاني داخل الجدول الاساسي واخترت له نفس معطيات الجدول الاول وغيرت فقط ب نسبة ال CELLPADDING=10 جعلت قيمتها 10 والخلفية طبعا اخترت لها الصورة التي اسمها 3 وامتدادها jpg :

كود HTML:

<table BORDER=2 CELLSPACING=0 CELLPADDING=10 WIDTH="100%" BACKGROUND="3.jpg" borderColorDark="#76B291" bordercolorlight="#D1E1D8" align="center" >

ثم افتتحت للجدول الاخير tr و td

كود HTML:

<tr> <td>

ثم افتتحت ال div حتى يحيط بالاشياء التي ساضعها في داخل هذا الجدول وحددت الاتجاه بداخله وهو التوسط

كود HTML:

<div align="center">

ثم افتتحت السمة <p> والتي ستحيط بكتلة النص الذي ساكتبه افتتحت وسم الخط font استدعيت السمة face لتحديد نوع الخط واخترته Chiller قد لايكون نوع الخط هذا موجود عندك في الجهاز فهو من الخطوط الاضافية التي قمت بانزالها وبالتالي فمن الممكن ان لا يراها جهازك لانها غير موجودة عندك .. قم باختيار نوعية خط موجودة في جهازك عوضا عنها .. ثم حجم الخط size حددته بالرقم 7 لون الخط color اعطيته قيمة #547562
اغلقت الوسم وكتبت كلمة jordan weather ثم قمت باقفال وسم الخط font ووسم ال p

كود HTML:

<p><font face="Chiller" size="7" color="#547562">jordan weathe</font></p>

بعد ذلك نفس العملية السابقة مع بعض التغييرات التي اخترتها في نوع الخط كتبت كلمة yasminah

كود HTML:

<font face="Edwardian Script ITC" size="7" color="#D79798">yasminah</font>

ثم ابتدات بفتح جدول اخر هذا الجدول بصورة العرض في متصفحك لن تراه لاني قمت باخفاء حددوه ال border جعلت قيمتها صفر فهو لن يظهر للعيان في حالة عرض الصفحة وجعلت عرضه 80% وال cellpadding جعلتها 40

كود HTML:

<table class="text01" width="80%" border="0" cellspacing="0" cellpadding="40" align="center">

بالنسبة للسمة class دعها الان ستمر معنا لاحقا ان شاء الله ولايهم حتى لو انك لم تضفها الى الجدول ..

ثم افتتحنا ال tr وال td الخاصة بالجدول الاخير داخل ال td حددنا الاتجاه وهو التوسط :

كود HTML:

<tr> <td align="center">

ثم ادرجت الصورة داخل وسم img وحددت ارتفاع الصورة وعرضها ومن ثم اغلقت وسم ال td واتبعته باغلاق وسم ال rt واتبعته باغلاق وسم ال table الاخير :

كود HTML:

<img border="0" src="4.jpg" width="150" height="85"></td> </tr> </table>

بالنسبة لشرح وسوم الصور والصور سيمر معنا بالدرس التالي ان شاء الله بالتفصيل ..

والان ستبدأ عملية اغلاق الوسوم التي لم اغلقها بعد
ونبدأ باغلاقها بشكل عكسي اي الاخير نغلقه اولا كما رايت في اغلاق الوسم الاخير ..
نغلق ال td وال tr والtable الخاصتين بالجدول ما قبل الاخير
ونتبعها ايضا باغلاقات الجدول الذي قبله والذي قبله وهكذا حتى نتاكد من اقفال وسوم جميع الجداول التي قمنا بانشائها :

كود HTML:

</tr> </table> </div> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </body> </html>

عندما نفتح الجدول نضع ال table اولا ثم ال tr ثانيا ثم ال td ثالثا لكن في عملية الاغلاق تكون عكسية بحيث نغلق td اولا ثم ال tr ثانيا ثم ال table ثالثا هكذا ..
طبعا نصيحة لك دائما عندما تفتح وسوم حتى لاتضيع كم وسم يجب اغلاقه في النهاية قم من البداية بفتح الوسم واضف الى جانبه وسم الاغلاق ومن ثم باعد بينهما بالسبيس وضع المحتويات التي تريد بينهما وهكذا ..
الان انتهينا ان شاء الله من الجداول .. اتمنى ان تكون قد وصلت كاملة .. ومن لديه سؤال فاليتفضل ..
وسننتقل في الفقرة التالية الى موضوعين اخرين تماما وهو الوصلات التشعيبية والصور

تحياتي للجميع

ملفي الشخصي · [ **10-10-2008** ]

السلام عليكم جميعا ..
فقرتنا اليوم سهلة جدا جدا وهي ربط الصفحات بعضها ببعض .. مثلا عندما تدخل الى اي موقع تجد ايقونات مكتوب عليها عناوين الايقونات هذه تقودك الى صفحات اخرى ربما في نفس الموقع وربما في مواقع اخرى .. هذا ما نسميه بمراسي النص التشعبي Hypertext Anchors ..
المعرّف <A> هو المسؤول عن انشاء مراسي النص التشعبي
the <a> tag-creating hypertext anchors
وهو معرّف حاوٍ اي يحتاج الى معرّف <> بداية والى معرّف نهاية </> يقوم بتعريف ما ستعرضه صفحة ويب عندما ينقر المستخدم على النص المحتوى الذي يظهر ضمن معرف البداية والنهاية ..
لنرى ذلك بطريقة عملية .. انقر على اللينك التالي ستظهر لك صفحة ستجد بداخلها كلمة "انقر هنا للدخول الى منتديات طقس الاردن " مجرد نقرك على الكلمة ستنقلك الصفحة الى صفحة منتديات طقس الاردن :

http://www.freewebtown.com/jordan_am/yasminah19.htm

لنلقي نظرة الى الشيفرة التي استخدمناها هنا :

كود HTML:

<html> <head> <title>Hypertext</title> </head> <body> <a href="http://forum.arabiaweather.com/index.php"> انقر هنا للدخول الى منتديات طقس الاردن </a> </body> </html>

انظر كم هي بسيطة وبعيدة عن التعقيد في داخل المعرّف body قمنا بفتح وسم معرّف المرساة
<a> وضعنا معه في نفس الوسم السمة href وهي لتحديد صفحة الويب التي سيتم جلبها عندما ينقر المستخدم على النص المحتوى .. اتبعناها باشارة = ثم علامتي الاقتباس " " توجهت الى موقع طقس الاردن ونسخت اللينك في الاعلى كما هو ووضعته ضمن علامتي الاقتباس

كود HTML:

<a href="http://forum.arabiaweather.com/index.php">

ثم خارج حدود الوسم وقبل معرّف الاغلاق للوسم كتبت جملة انقر هنا للدخول الى منتديات طقس الاردن
ثم اغلقت المعرّف a :

كود HTML:

انقر هنا للدخول الى منتديات طقس الاردن </a>

الكود كاملا هكذا :

كود HTML:

<a href="http://forum.arabiaweather.com/index.php"> انقر هنا للدخول الى منتديات طقس الاردن </a>

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

http://www.freewebtown.com/jordan_am/yasminah20.htm

هنا قمت بربط صفحتين في نفس الفايل الذي اعمل فيه لاحظ معي الكود الذي استعملته

كود HTML:

<a href="yasminah11.htm">click here!</a>

هو نفس الكود السابق لكن الذي اختلف فيه اني قمت بوضع اسم الصفحة فقط yasminah11.htm طبعا مع امتدادها وهو .html عند الضغط على كلمة click here! قام بنقلي الى الصفحة المحددة ..

هذا اذا كانت الصفحات في نفس الفايل لكن ماذا لو اردت ان اجلب صفحة من فايل اخر موجود داخل الفايل الذي اعمل .. كثيرا ما نستخدم في عملية التصميم عدة فايلات متداخلة نوع من التنظيم لملفات الموقع على سبيل المثال لدي بداخل الفايل الذي اعمل به ملف الصور images واردت ان اجلب صورة من داخله او صفحة فيجب علي تحديد مسار الملف فيصبح الكود كالتالي :

كود HTML:

<a href="images/yasminah107.jpg">click here!</a>

هنا جلبت صورة من داخل فايل ال images فقمت بتحديد المسار ومن ثم وضع اشارة / وتسمية الصور التي اريد

كود HTML:

"images/yasminah107.jpg"

ماذا لو كان الفايل الذي اريد جلب صفحة منه في ارتباط تشعيبي خارج حدود الفايل الذي اعمل فيه كل ما علي اضافته لتحديد المسار هو /..
على سبيل المثال هنا اردت احضار صفحة من فايل اسمه mysite واردت من داخله صفحة اسمها index.htm فيكون المسار كالتالي :

كود HTML:

<a href="../mysite/index.htm">click here!</a>

وهكذا ... لا اعتقد انه صعب . كل ما عليك هو التدريب والمحاولة ..
حتى نلتقي في الفقرة التالية لكم مني اطيب التحايا .

ملفي الشخصي · [ **10-22-2008** ]

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

http://www.freewebtown.com/jordan_am/yasminah22.htm

الجملة الاولى " انقر هنا 1 " ان قمت بالنقر عليها فانها ستاخذك الى الى منتديات طقس الاردن ولكن بصفحة اكسبلورر منفصلة ..
لو نظرنا الى الشيفرة المسؤولة عن هذه العملية لوجدناها كتبت هكذا :

كود HTML:

<a target="_top" title= منتدى href="http://forum.arabiaweather.com/index.php">انقر هنا</a></font><a href="http://forum.arabiaweather.com/index.php">

وطبعا الذي يهمنا من السيفرة السابقة هو هذه الكلمة التي جاءت بعد معرّف ال a :

كود HTML:

a target="_blank"

نلاحظ المعرّف target يتم استخدامها لتحديد الايطار الهدف ضمن صفحة ويب نحن هنا اخترنا الايطار الهدف هو blank مسبوقا بالشخطة السفلية _ وهو تعني ان الايطار الهدف مستقل فتخرج صفحة الاكسبلورر المحددة بايطار مستقل منفصل عن الصفحة الاصلية .. مع انها هذه الايام استعمالاتها اصبحت محدودة لانها تسبب نوعا ما ارباك لمتصفحي الويب .. لكنها مفيدة في بعض المواضع كعرض البوم الصور عندما تخرج الصورة كبيرة في ايطار مستقل عائم وستاتي معنا لاحقا ان شاء الله بموضوع الايطارات .
ايضا عد الى نفس الصفحة قم بتمرير الماوس على العناوين الموجودين في الصفحة فستجد انه يخرج لك عنوان بجانب الماوس انقر هنا الاولى يكتب بجانب الماوس منتدى والثانية يكتب بجانب الماوس كلمة عنوان .. المسؤول هنا هو معرّف

كود HTML:

title= منتدى

title اي اننا اضفنا للنص التشعبي هذه عنوان شرح للموجود داخل النص التشعبي يظهر عند تمرير الماوس عليه .

طيب كلمة " انقر هنا 2 " التي في صفحة ان ضغطنا عليها يخرج لنا صندوق الايميل جاهز للتعبئة والارسال مضاف اليه تلقائيا عنوان المرسل اليه .. وانا قمت بكتابة عنوان وهمي طبعا هو فقط للتجربة ..
اذا القينا نظرة على الشيفرة الموجودة وجدناها هذه :

كود HTML:

<a href="mailto:1234567@mail.com" title= عنوان>انقر هنا</a>

الذي يهمنا فيها والجديد هو كلمة

كود HTML:

mailto:

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

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

ملفي الشخصي · [ **10-23-2008** ]

السلام عليكم ورحمة الله وبركاته
سنتابع حديثنا في التصميم واليوم سننتقل ان شاء الله الى مجموعة جديدة وهي الالوان والصور وخرائط الصور .. ولكن .. اقرا المقدمة التالية التي لابد منها واحفظ ما فيها :
لعل الكلام في هذا المجال مستفيض وبامكاني ان اختصره بتعريف المعرّف img الخاص بالصور وبعرضها وان الشرح هنا قد يكون لمن هم اعلى من مستوى المبتدأ في التصميم .. لكن بما اننا قد اتخذنا العنوان من الصفر حتى الاحتراف فلا بد ان اورد بعض نقاط مهمة وسوف احاول ايجازها ان شاء الله متخذة بعين الاعتبار انك مازلت في البداية ..
لا تكاد تخلو صفحة ويب من الصور .. ولكن هناك بعض النصائح في موضوع الصور يجب اخذها في عين الاعتبار حتى لا تقع مستقبلا في المشاكل الخاصة بهذا القسم ..
دائما اعتمد على استخدام النسخ الصغيرة من الصور كل ما امكن ذلك : فالصور تعتمد على الاحجام وعدد الالوان التي تحويها فإن كانت كبيرة جدا فبالتأكيد هي ستحتاج الى وقت كبير لجلبها الى متصفح المستخدم .. اضف الى ذلك انه لدينا موضوع مهم وهو الالوان وعدد الالوان في كل جهاز فان كان المستخدم يستخدم جهاز يملك عدد الوان اقل من جهازك فبالتأكيد انه لن تظهر عنده الصورة بنفس الجودة التي تظهر في جهازك .. فان كانت لديك صورة كبيرة عالية التحليل في صفحتك قم دائما بانشاء صورة مصغرة من نفس هذه الصورة منخفضة التحليل وضعها في الصفحة ثم اربط الصورة المصغرة بنص تشعبي ان ضغطت عليها اخذتك الى صفحة منفصلة تعرض فيها الصورة الكبيرة .. وذلك ضمن تطبيق قاعدة اوردناها سابقا " تذكر انك لست الوحيد الذي يطالع صفحتك " .. وحتى لا ترهق اجهزة المستخدمين لصفحتك في قضاء وقت طويل لجلب الصورة الى الصفحة ..

حاول قدر المستطاع من اختزال الصور واوردها عندما تكون ضرورية فقط .. فامتلاء الصفحة بالصور "باستثناء المواقع التي تهتم باللوحات او التصوير الفتوغرافي" .. تجعل الغير يعتقد ان صفحتك انشأت بلا هدف .. وبالتالي ستؤدي الى تطفيش الزبائن كما يقال عن موقعك وعدم العودة اليه مرة اخرى .. فمثلا بالامس ذهبت الى موقع مخصص لعرض السيارات بكل الموديلات لكن ابقيت الصفحة معروضة في الجهاز لمدة ساعة تقريبا ولم يظهر لي في النهاية سوى موديل واحد او موديلين للسيارات وكل ما اريد ان انتقل الى فرع اخر في الموقع طبعا اقع في ذات المطب .. بالنهاية اغلقت الموقع وبالتاكيد لن اعود اليه مجددا .. فهنا وقع المصمم بخطأ نعتبره فادح جدا لان الصور عطلت الموقع تماما مع ان قدرات الجهاز الذي معي رائعة الا انه احدث ارباكا كبيرا له .. فكان يجب ان ينشا صفحات نسميها بصفحات الجاليري يضيف فيها صور مصغرة للسيارة جدا المعروضة وعندما اضغط على موديل سيارة ما تخرج لي صورتها المكبرة وتفاصيلها بصفحة منفردة ... " دائما دائما دائما فكر بقدرات اجهزة المستخدمين " .
هناك سمة سنمر عليها في حديثنا وهي السمة alt قم دائما باستخدامها .. تستطيع من خلالها كتابة شرح موجز لماهية الصورة يكون في مكان الصورة اذا مررت الماوس على مكان الصور بحالة لم تظهر لديك تعطيك شرح عن الصورة هذه وتذكر ان هناك مستخدمين يفضلون الدخول المواقع يعطلون خاصية رؤية الصور في المواقع .. فتكون رؤيتهم للموقع نصوص فقط .. وطبعا حاول ان توجز بشرح الصورة فلا تضف الصورة باعتبارها شريطا اعلانيا بل بوصف الرسالة التي تريد ايصالها الى المستخدم .

قم دائما بتحديد طول وعرض الصورة من خلال السمتين width و height كلما كان ذلك ممكنا ..
لماذا افعل ذلك ..؟! لان متصفحات ويب تقرا اللغة البرمجية للصفحة وتحجز المساحة الصحيحة من الشاشة لعرض الصورة قبل ان يتم جلب الصورة مما يؤدي الى عملية الاسراع في جلب الصورة .

بما ان الصفحة العشوائية التي تخلو من الاناقة كما يقول المثل الشائع " العين مكيال " لا تجعل المستخدم يعود اليها مجددا بعكس الصفحات المنمقة الانيقة التي تحفر فورا في ذاكرة المستخدم لانها راقت للعين والجهاز معا فاعمد دائما الى استخدام السمات التي تحسن من شكل عرض الصور في الصفحة كسمة ال border وغيرها من السمات الجمالية التي ستمر معنا لاحقا في هذا القسم المهم ان شاء الله ..

سنتكلم ايضا عن انواع الصور المعتمدة ان شاء الله لكن هنا في المقدمة اقول لك اعتمد دائما ان تكون صورك jpg و gif ..

نتابع في الفقرة التالية ان شاء الله حديثنا ..

ملفي الشخصي · [ **10-23-2008** ]

ولنا ايضا مقدمة مع الالوان ..
قبل ان نبدا في موضوع انشاء الصور في صفحة ويب لا بد لنا ايضا من ان نعرج على موضوع مهم وهو موضوع الالوان وكيف تستخدم الحواسب الالوان .
للتقريب اكثر اقول : كثيرا ما يقوم بعض الاشخاص بتصميم صفحة ويب وتبدو رائعة على حواسبهم ولكن قد يفاجأ البعض منهم عند عرضها على جهاز اخر باختلاف كبير قد تبدو مرعبة احيانا حتى البعض يقول ان احد ما بالتاكيد قام استبدال صفحتي بصفحة اخرى !!! لم يقم احد باستبدال الصفحة ولكن المشكلة تكمن في الالوان .. يتضمن كل نظام تشغيل حاسب روتينات موسعة عملها فقط هو انتاج النص المعروض والصور على الشاشة .. وطبعا كل حاسب يعرض هذه النصوص ضمن امكانية الخطوط المتوفرة لذلك الحاسب ، وهذا ايضا ينطبق على الالوان فكل حاسب يعرض الصفحة التي امامه ضمن حدود لوحة الالوان في داخله palette .. الحاسب يقوم باستخدام الالوان المتاحة في لوحته ويحاول ان يرسم اللون المطلوب على الشاشة .. فالحواسب المختلفة تملك احجام لوحات الوان مختلفة فمثلا قد يكون حاسبك يوجد فيه لوحة الوان كبيرة تنتج عدد كبير من الالوان فتقوم باختيار اللون الاحمر .. حاسب اخر لا يملك تلك الامكانية من الالوان فيقوم بعملية تعديل قيمة اللون الى لون اخر يعتبره الحاسب الثاني قريب للون المحدد فينتجه احمر بدرجة اخرى كهذا على اعتبار بوجهة نظر لوحة الوانه انه اقرب الالوان الى اللون المطلوب وهكذا ..
يقع معظم الحواسب ضمن احد ثلاث انواع رئيسية للوحات الالوان فمنها من يعرض 256 لونا ومنها 65,536 لونا .. ومنها 16.7 مليون لون . اجملا الحواسب الحديثة اغلبها يملك امكانية جيدة في لوحة الالوان .. فاذا علينا هنا عندما نقوم بعملية التصميم ان نختار الالوان الفعالة التي لا تختلف اختلاف كبير بين حاسب واخر على حسب امكانياته .. اذا ما العمل ؟!
اليك النصيحة التالية : حتى تخرج بصفحة ويب احترافية صممها بحيث لا تستخدم اكثر من 256 لون .. وهو ما يعتبر لوحة الالوان العالمية لويب . لكن من هم هءلاء الالوان ؟ّ!
لن ادخل في تعقيدات اكثر واكثر حول الالوان وكيفية حسابها حتى تخرج بالنتيجة المطلوبة لكن اعلم ان الالوان قسمين اما ان تقوم بتحديد اللون باسمه مثل RED و BLACK الخ .. فهي تصف نوعا معينا من الاحمر او الاسود او غيره وهناك عدد كبير لا حصر له من اسماء الالوان . ممكن مع الوقت ان ندرجها في موضوع اخر ان شاء الله . القسم الثاني وهو الاهم هي تحديد القيمة الرقمية للون فالقيم الرقمية هي عادة اكثر من اسماء الالوان المتوفرة في لوحة الوانك وتعطيك المجال للوصول الى مجال اوسع من الالوان المتوفرة في لوحة تحكم الالوان في حاسبك فلو كانت لوحتك ذات 256 لون فانها ستصبح اضعاف مضاعفة مع القيم الرقمية للون وهو ما يسمى بنظام الاعداد الست عشرية .
فما هي قيم الالوان للوحة الامنة ؟! الالوان الامنة هي جميع القيم الست عشرية التي تشكل الثلاثية ازرق اخضر احمر والتي تحوي اي تراكيب من الاعداد : 00, و 33, و 66, و CCو , FF فهي التي تعطيكي صفحات على كل الحواسب مماثلة تماما للتي انشاتها انت على حاسبك .
كنت قد اوردت في بداية هذه الحلقات سكريبت بسيط نخرج منه بعض قيم الالوان الست عشرية على هذه اللينك :

http://www.freewebtown.com/jordan_am/color.htm
كذلك تجدها في علبة الوان برامج كالفرونت بيج والفوتوشوب بحيث تختار اللون الموجود ويقوم البرنامج باعطائك القيمة الست عشرية له .

القيم الست عشرية للالوان تعطيك حدود اوسع لاختيار الوانك وتعطيك للون الواحد تدرجات كثيرة فمثلا قد تجد للون الرمادي ما يقارب 250 لون متدرج منه قم باختيارها في تصاميمك وانت ممكن ان تكون قد اعتدت عليها من خلال تماريننا هنا لاني كنت اقوم باستعمالها حتى تعتاد عليها .. فالقيم هذا عبارة عن ارقام وحروف محددة ترجمت اللون الاساسي ..
اجمالا القيم الست عشرية اغلب الاجهزة قادرة على قرائتها فلو اخترت انا لونا متدرجا من اللون الرمادي الجهاز الاخر المحدود الامكانية بلوحة الوانها فان لم تعطي اللون المحدد تماما وهو المفترض .. فستقوم بالتاكيد بادراج لون قريب جدا له بحيث لا تشعر بفرق كبير سوى انك احيانا تطلق كلمة ان الالوان في هذا الجهاز باهتة نوعا ما ولكن لم تتغير درجات اللون نفسه كثيرا .. لن نتوغل اكثر في هذا الموضوع وكيفية حساب القيم الست عشرية ولكن كان من الضروري ان نعرج عليه لان الصور بالنهاية هي عبارة عن مجموعة الوان مع بعضها البعض ..

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

ملفي الشخصي · [ **10-23-2008** ]

يبدو انه فاتني الكثير ,,

لي عودة للتعليق على الردود الاخيرة ,,

ملفي الشخصي · [ **10-24-2008** ]

السلام عليكم ورحمة الله وبركاته
الاخ معتصم حمدا لله على السلامة .. بل نحن من فاتنا الكثير من مداخلاتك الطيبة .. بالانتظار ..
الان سنبدأ في تنسيق الصور في صفحات ويب والتعرف على وسائطها ..
jpg او gif او png
ايا كانت خياراتك من تلك التنسيقات فمعها سنبدأ رحلة وسائط الصور في صفحات ويب .. بقيادة الكابتن img ومساعده src .
تتعمل المستعرضات مع عناصر <img> بشكل مختلف عن العناصر الاخرى .. فالمتصفح عندما يقرأ شيفرة اي صفحة ويب ويمر على عناصر مثل h1 مثلا او غيره فهو لن يحتاج الا الى عرضه وهو امر بسيط .. لكن عندما يقرا المستعرض عنصر ال img فستكون قرائته مختلفة اذ سيكون على المستعرض ان يجلب الصورة المحددة في الكود حتى يتم ترجمته على شاشة المستعرض .
لنأخذ مثال عليه حتى نتمكنمن الشرح اكثر .. عند ضغطك على اللينك التالي ستشاهد صفحة فيها صورة وهي مجال تمريننا الان :

http://www.freewebtown.com/jordan_am/yasminah23.htm

قم بحفظ الصورة في فايلك الخاص بهذه التمارين :
http://fwt.txdnl.com/4-10/j/o/jordan_am/12.jpg

واذا القينا نظرة الان على الشيفرة الخلفية للصفحة السابقة نجدها كالتالي :

كود HTML:

<html> <head> <title>تنسيق الصور</title> </head> <body bgcolor="#FFCC66"> <p align="center"> <img src="12.jpg" border="2" width="303" height="280"></p><br><br> </body> </html>

ابتدنا المستند بنص ال html وال head و ال title ثم اغلقنا ال head وافتتحنا ال body حددنا الخلفية بقيمة لون ست عشري من خلال السمة bgcolor

كود HTML:

<html> <head> <title>تنسيق الصور</title> </head> <body bgcolor="#FFCC66">

هيئت المتصفح للفقرة التالية بإني اريد محتواها ان يأخذ محتوها اتجاه التوسط في الصفحة عن طريق الامر التالي :

كود HTML:

<p align="center">

بعدها عند وجد المستعرض المعرّف img فقد تهيأ الان لاستقبال صورة وعرضها على المتصفح حتى يترجم هذا الكود ولنلقي نظرة مقربة :

كود HTML:

<img src="12.jpg" border="2" width="303" height="280">

كما ترى ابتدأت الكود ب بعد فتح القوس > بمعرّف ال img هذا المعرّف يتم استخدامه لاضافة الصور الى المستند ويب . والمعرّف img معرّف خالي اي لا يملك معرّف نهاية او اقفال </> .
ثم السمة src وهي بوصلة القبطان img نحدد فيها موضع ملف الصورة التي سيتم عرضها على صفحة الويب . وبمنى اخر تحدد اسم الملف او عنوان URL لملف الصورة .
اتبعناها طبعا باشارة = لتحديد المكان والاسم وهي هنا بطبيعة الحال موجودة بنفس الفايل فهي = اسم الصورة وهو 12 بالامتداد .JPG ..
طبعا عند تنسيق فايلات اي موقع نقوم عادة بوضع فايل داخل الفايل الاساسي نسميه بالعادة images اي الفايل الخاص بالصور نحفظ بداخله كل الصور الخاصة بهذا الموقع " عندما نبدأ بتصميم موقع لاحقا ان شاء الله سنتعلم كيفية ترتيب الفايلات الداخلية لفايل الموقع " فان كانت الصورة بداخله فيكون عنوان src هو :

كود HTML:

src="images/12.jpg"

حددنا فيها اسم الفايل اولا images متبعا باشارة / وهي اشارة متابعة الامتداد المؤدي الى مكان الصورة ثم اسم الصورة التي بداخله وهي

كود HTML:

12.jpg

وايضا ينطبق اذا كان عنوان الصورة من موقع في الانترنت فعلينا احضار اللينك الخاص بها url ووضعه ضمن هذه السمة فيكون هكذا :

كود HTML:

src="http://fwt.txdnl.com/4-10/j/o/jordan_am/12.jpg"

ال url يمثل المسار الى الصورة ضمن موقع ويب .. مع انه من الافضل لك دائما ان تستخدم المسارات للصور بان تكون موجودة على نفس موقعك وبنفس الفايل الخاص به ..
لماذا ؟! لانه سيكون مشوار طويل على المتصفح عندما يترجم شيفرتك فهوة عند المرور علىهذا اللينك المتضمن url في ال src ان يحضر الصورة من الموقع الاخر اي يستلزم ان يقوم بتحمليها من موقع اخر وهذا قد يعمل عملية تأخير للمستعرض في جلب هذه الصورة اذا عليه ان يقرا شيفرة الصفحة الاخرى التي جلبتها من موقع ويب الاخر حتى يصل الى هذه الصورة ويقوم بترجمتها على الصفحة .

الصورة اسمها 12 دوت اي نقطة . ومن ثم jpg وهو نوع تنسيق الصورة .
قبل ان نبدأ بالحديث عن التنسيقات كيف اعرف ماهو نوع تنسيق الصور لدي ..
اتجه الى الصورة المرادة اضغط عليها بمين الماوس ثم اتجه الى خصاص الصورة Properties :

لاحظ معي رقم 1 اظهر لك في اعلى صورة العين تنسيق الصورة وهو jpg رقم 2 هو اسم الصورة ورقم 3 هو نوع تنسيق الصورة وهو JPEG اي JPG .

في الفقرة المستقلة التالية سنتعلم انواع التنسيقات كاملة وفيها سنتعلم كيف بامكانك ان تغير تنسيق صورة الى الصيغة المطلوبة ان كان تنسيقها من ضمن التنسيقات الغير مرغوبة في التصميم في الفقرة التالية ان شاء الله .

نتابع الان شرح الكود السابق ادرجنا ايطار للصورة محيط بها وذلك عن طريق السمة BORDER وكما قلنا سابقا انه لجمالية الصور في اضافة التنسيقات الجميلة للصفحة حددنا عرض الايطار ب 2 بكسل .

كود HTML:

border="2"

وقلنا ايضا سابقا انه من الافضل ان تحدد طول وعرض للصورة فهي تساعد في عملية جلب الصورة بشكل اسرع اذ ان المتصفح يقوم مسبقا بحجز هذه المساحة للصورة مما يسرع في العملية اكثر
هنا حددنا الwidth اي العرض ب 303 بمقدرة بعناصر الصورة اي البكسل والطول height
280 مقدرة بعناصر الصورة اي البكسل ..
في الفقرة التالية لنا وقفة مع التنسيقات انواعها وسمات كل واحدة منها ومواطن الضعف والقوة فيها ان شاء الله .
تحياتي

ملفي الشخصي · [ **10-24-2008** ]

لنتابع
سنلقي نظرة نظرة على تنسيقات ملفات الصور الرئيسية الشائعة وعلى ميزاتهم الفريدة بالاضافة الى نقاط القوة والضعف في كل واحد منهم
يسيطر على على الويب نوعان من ملفات الصور :
تنسيق تبادل الرسومات Graphic Interchange Format واختصارها (gif) .
مجموعة محترفي الصور المترابطة Joint Picture Experts Group واختصارها (jpeg or jpg) .
وكلا النوعين يملك مميزات مرغوبة للاستخدام في ويب .. فالتنسيق gif يعمل بشكل رائع مع الصور ذات الالوان الصلبة القليلة ، والصور ذات الخطوط مثل الشعارات التي نصممها لتوضع في اعلى الصفحة فعندما نقوم بتصميم شعار ما فانه سحتوي على خطوط صغيرة وكتابات واحيانا الوانا فعندما نضغط هذا التصميم ونقوم بتصغير حجمه جدا يجب ان لا يخسر اي شيء من موجودات الصورة ويجب ان يظهر تماما كما قمنا بتصميمة فليس امامنا الا تنسيق gif ليحفظ هذا الشيء لنا .. وكذلك فان gif تتعامل مع قصاصات الفيديو وايضا تتعامل بشكل جيد مع النصوص الصغيرة في الصور وايضا له ميزة هامة جدا هو انه يقوم بضغط ملف الصورة وذلك حتى يختزل حجمها ولكن من دون ضياع اي شيء منها لذلك يعتبر تنسيقا (Format) بدون ضياع (lossless) .. كذلك عندما نقوم بتصميم الصور ذات الخلفية الشفافة فبالتأكيد باننا سنحفظ هذه الصورة بالتنسيق gif لانه يسمح لنا بذلك بينما التنسيقات الاخرى لا يمكن ان نقوم بها بهذا العمل .. وايضا الصور المتحركة فبالتاكيد ان تنسيقها هو ال gif لانها تتدعم الصور المتحركة بعكس التنسيقات الاخرى .. لكن ال gif تستخدم لوحة الالوان الصغيرة ذات ال 265 مما يجعلها غير مناسبة لانتاج صور كبيرة في جودة الصور الفوتوغرافية .
اما ال التنسيق jpg فإنه يعمل بشكل رائع مع الصور ذات الجودة العالية مثل الصور الفوتوغرافية .. يمكنه تمثيل صور مشكلة من 16 مليون لون مختلف على الاكثر .. طبعا لا يمكنه ترجمة اي لون من الوانه بشكل شفاف .. يستخدم تخطيط ضغط افضل من الذي يستخدمه ال gif . ويقوم بانتاج ملفات افضل واصغر حجما من التي يستطيع gif انتاجها هذا بالنسبة للصور الملونة لكن اذا اردنا تنسييق ملفات صور في الاصل تحوي اللونين الابيض والاسود فان مخطط تنسيق الملف jpg لن يكون مناسبا لها عندها تكون ال gif افضل .
ويبقى لدينا تنسيق ملف رسوم الشبكة المحمولة Portable Network Graphice واختصارها هو PNG
هو تم استحداثه في وقت ما ليحل محل تنسيق ال GIF ولكنه فشل لانه غير قادر على دعم تخزين الصور المتحركة لذلك لم يؤدي المهمة التي انتج لالجلها نهائيا وهو أن يحل محل GIF .. ولكنه بشكل عام يملك امكانية ضغط تفوق ال GIF تتراوح بين 10 الى 30 بالمئة .. ويعتمد على لوحة الوان تحوي الوانا حقيقية تفوق ال 16.7 مليون لون وهنا تفوق فيه على الغير وفيه ايضا دعم مخصص لدرجات اللون الرمادي .
الى هنا اعتقد ان هذه النظرة الموجزة على التنسيقات بشكل عام كافية لتأخذ فكرة عنها .
عندما تنشأ صورة وتريد اختيار تنسيقها او تريد تغيير نوع تنسيق صورة تتوجه الى احد برامج الصور كالفوتوشوب مثلا عند ضغطك على ال حفظ الصورة save as تحت كلمة file name يوجد كلمة format اذا اسدلت السهم بجانبها ستظهر لك اختيارات التنسيقات كاملة كما هو موضح في الصورة التالية :

http://fwt.txdnl.com/4-10/j/o/jordan_am/yasminah10.JPG

لنتابع في الفقرة التالية ان شاء حديثنا عن ملفات الصور .
تحياتي

ملفي الشخصي · [ **10-24-2008** ]

نسيت ان اورد ملاحظة في الفقرة السابقة عن تنسيق ال PNG انه يملك ميزات شفافية اكثر من ال GIG ولكن مشكلته انه غير مدعوم في جميع المستعرضات اي انه لا يعمل في المستعرضات الغير مدعومة به مع ان شعبيته تتنامى بسرعة

لنتابع الان
تحدثت في بداية الموضوع من ضمن النصائح ان تضع دائما بديلا للصورة اخذا بعين الاعتبار انك لا تعرف نوعية الاجهزة التي ستمر وتستخدم صفحاتك فقد تكون اجهزة محمولة او قائات الشاشة للمعوقين بصريا او اجهزة لديها خط انترنت بطيء للغاية وهي التي قد تجلب النص فقط من غير الصورة وعندك ايضا الهواتف الخلوية .. امكانك ان تقدم لزوار موقعك اشارة مقتضبة عن المعلومات التي ستوفرها تلك الصورة وذلك طبعا باستخدان السمة altفي داخل وسم ال img
تعطي فيها شرح موجز للرسالة التي تريدها من الصورة تظهر مكان الصورة بحال لم يتم جلبها او حتى ان ظهرت الصورة بمجرد تمرير الماوس عليها يظهر بجانب الماوس شريط الشرح الذي كتبته . الكود التالي هو نفس الذي استخدمناه في تمرينا الخاص السابق اضفنا اليه االسمة alt قم بتعديلها في مستندك واضغط على الريفريش لترى النتيجة :

كود HTML:

<img src="12.jpg" alt="شرح موجز للصورة" border="2" width="303" height="280">

انتبه جيدا للاتي واتقنه فهو يغيب عن اذهان بعض المصممين مما يرهقهم
دائما ما ندرج صور في صفحات الويب ثم نقوم بكتابة نص بجانبها احيانا اريد ان يبدأ النص المدرج بجانب من الحد العلوي للصورة او من الجانب الوسطي للصورة او من الاسفل او اريد النص ان يحيط بالصورة كاملة يأخذ المعرّف img داخل وسمه عدة سمات منها ال aling التي تحدد محاذاة الصورة ال aling تتضمن القيم LIFT و RIGHT هما يقومان بمحاذاة الصورة الى الهامش الايسر او الايمن بينما يتدفق النص حول الصورة اخترت على سبيل المثال المحاذاة left فيصبح الكود هكذا :

كود HTML:

<img src="12.jpg" align=left alt="شرح موجز للصورة" border="2" width="303" height="280" >

لاحظ بداخله ال :

كود HTML:

align=left

وابدأ بالكتابة بجانب الصورة لتصبح هكذا :
http://www.freewebtown.com/jordan_am/yasminah25.htm

انظر كيف ان الصورة اتجهت للهامش اليساري من الصفحة وكيف انني عندما كتبت بجانبها فإن النص احاط بها كاملا .. وكذلك لو اخترت القيمة RIGHT نفس النتيجة باستثناء ان الصورة تتجه الى الهامش اليمني .
كذلك ال aling تحوي القيم التالية top و texttop و middle و absmiddel و baseline و bottom و absbottom .
قم مثلا بتجربة اعطاء السمة aling قيمة ال middle ستجد ان الكتابة بجانب الصورة تبدأ من المحاذاة التي بمنتصف الصورة وهكذا قم بتجربتهم جميعا ...
هناك طبعا سمات اخرى كالفيديو وخرائط الصور سنرجئها الى حين دخولنا في برنامج الفرونت بيج ان شاء الله .
اكتفي بهذا القدر عن الصور ومعرّف ال img لانتقل في الفقرة التالية ان شاء الله الى بحث اخر وهو النماذج Forms.
تحياتي

ملفي الشخصي · [ **10-25-2008** ]

شكرا لك yasminah على الموضوع المميز وعلى الطريقة الرائعه في الشرح

اتمنى لك التوفيق في مجال دراستك/عملك

Best Regards

الاخبــــار
إضافة خبر