كيفية إنشاء معرض للصور على مدونات بلوجر

12:51 ص

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

• المرحلة الأولى:

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

<A HREF="رابط الصورة" target="_blank" title="إضغط لتكبير الصورة" >
<IMG HEIGHT=50 WIDTH=50 SRC="رابط الصورة" alt="إسم الصورة" /></A>

 نقوم بتغيير مالون باللون الأحمر برابط الصورة وما لون باللون الأزرق بإسم الصورة وما لون باللون الوردي بقياسات طول وعرض الصورة.
 ملاحظة : يمكنك إستعمال محرر النصوص wordpad لتسهيل عميلية النسخ واللصق

• المرحلة الثانية :

في هذه المرحلة سوف نقوم بعملية إدراج الكود السابق(الأكواد التي تضم جميع الصور) في الكود المخصص لإنشاء الجدول ،فالأمر بسيط جدا ما عليك سوى التركيز قليلا عند إدراج الأكواد .حيث نقوم بإدراج كل كود(الكود السابق) بين  <TD> و </TD> ليس العكس .

على سبيل المثال ،إذا أردنا إنشاء جدول يضم سطرا واحدا و4 خانات نستعمل هذا الكود.

<TABLE> <TR> <TD> </TD> <TD> </TD> <TD> </TD> <TD> </TD> </TR> </TABLE>

وتكون النتيجة على هذا الشكل : 

يمكنك إضافة خانات أخرى في نفس السطر ذلك بإضافة الوسمين  <TD> </TD> قبل </TR>  مع إضافة الكود الأول الذي يضم الصورة بين الوسمين ذي اللون الأخضر.
والآن لإضافة سطر تاني يضم نفس عدد الخانات وهو العدد 4 كما في المثال السابق نقوم بإضافة جميع الأوسمة الموجودة بين <TABLE> و </TABLE>  بعد الوسم  </TR> ليصبح الكود على هذا الشكل .

<TABLE> <TR> <TD> </TD> <TD> </TD> <TD> </TD> <TD> </TD> </TR> <TR> <TD> </TD> <TD> </TD> <TD> </TD> <TD> </TD> </TR></TABLE>

وكما تلاحظ أن الوسم <TR> و</TR>  هما المسؤولان عن عمل أسطر أفقية
لتكون النتيجة على هذا الشكل :

وبإتباع نفس الطريقة لإنشاء معرض للصور يضم العدد الذي تريد من الصور

 أما لإضافة عنوان لمعرض الصور ،قم بإضافة هذا السطر بعد الوسم <TABLE> مع إدخال العنوان في المكان المحدد

<caption>ضع العنوان هنا</caption>

ولإضافة إطارات للصور نقوم بإضافة هذا السطر داخل الوسم  <TABLE> ليصبح على هذا الشكل

 <TABLE cellspacing=0 cellpadding=3 width="80%" border=1 bordercolor="#0000ff">

ولأي إستفسار المرجوا ترك تعليقاتكم أسفل الموضوع.