السلام عليكم ورحمة الله تعالى وبركاته،في هذه الفقرة سوف نتعرف و إياكم عن طريقة إنشاء معرض للصور على مدونات بلوجر وذلك بالإستعانة بخاصية إنشاء الجداول ،سبق وأن قمنا بشرح كيفية إنشاء الجداول ،فيمكنك مراجعة الموضوع لإستيعاب هذه الخاصية أكثر لاأننا سوف نستعملها هذه المرة في تنسيق الصور جنبا إلى جنب مع إمكانية التعديل على القياسات كما نشاء.
وهذا مثال على معرض للصور , الذي نريد إنشاءه .
ملاحظة : يمكنك إستعمال محرر النصوص wordpad لتسهيل عميلية النسخ واللصق
وهذا مثال على معرض للصور , الذي نريد إنشاءه .
- المرحلة الأولى:
في هذه المرحلة يجب تحديد روابط الصور التي سوف نقوم بإدراجها ضمن معرض الصوروذلك بإضافة كل رابط في هذا الكود لنستعمله في المرحلة الثانية.
نقوم بتغيير مالون باللون الأحمر برابط الصورة وما لون باللون الأزرق بإسم الصورة وما لون باللون الوردي بقياسات طول وعرض الصورة.<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>
والآن لإضافة سطر تاني يضم نفس عدد الخانات وهو العدد 4 كما في المثال السابق نقوم بإضافة جميع الأوسمة الموجودة بين <TABLE> و </TABLE> بعد الوسم </TR> ليصبح الكود على هذا الشكل .
وكما تلاحظ أن الوسم <TR> و</TR> هما المسؤولان عن عمل أسطر أفقية<TABLE> <TR> <TD> </TD> <TD> </TD> <TD> </TD> <TD> </TD> </TR> <TR> <TD> </TD> <TD> </TD> <TD> </TD> <TD> </TD> </TR></TABLE>
لتكون النتيجة على هذا الشكل :
أما لإضافة عنوان لمعرض الصور ،قم بإضافة هذا السطر بعد الوسم <TABLE> مع إدخال العنوان في المكان المحدد
ولإضافة إطارات للصور نقوم بإضافة هذا السطر داخل الوسم <TABLE> ليصبح على هذا الشكل<caption>ضع العنوان هنا</caption>
ولأي إستفسار المرجوا ترك تعليقاتكم أسفل الموضوع.<TABLE cellspacing=0 cellpadding=3 width="80%" border=1 bordercolor="#0000ff">
شارك هذه الصفحة :
|
0 التعليقات:
إرسال تعليق