المحتوى الشعبي

مناقشة
مناقشة
مناقشة
مناقشة
مناقشة
مناقشة
مناقشة
مناقشة
الفيو
مناقشة
مناقشة
الوصول ممنوع
مناقشة
مشكلة بسيطة
مناقشة
مناقشة
مناقشة
مناقشة
مناقشة

كيفية إضافة الصور في مشاركاتك مستعملاً html

سأشرح بشكل سريع طريقة سهلة لكي تضيف الصور لمناقشاتك و لمشاركاتك على الويب بشكل عام سأستعين بمثال لكيفية إضافة الصور على موقع دروبال عربي
أولاً عليك أن تحضر صورك بحيث تكون خفيفة ليسهل نحميلها
لكي تعمل صور خفبفة أنصحك باستعمال Gimp و هو برنامج مفتوح المصدر و مجاني تستطيع استعماله لعمل صورة احترافية سبق و تكلمت عنه في مدونتي
و تستطيع مشاهدة دروس جمب بالصوت و الصورة على هذا الرابط أو من هنا يعد تحضيرك للصورة عليك أن تضبط حجمها طولها لا يشكل مشكلة لكن عرضها يجب أن لا يتجاوز 580 عنصورة أو بيكسل لكي تبقى ضمن منطقة المحتوى و للمحافظة على مظهر منسجم للصفحة
اصبح عندك صورة عرضها 580 و تريد عرضها عليك أن ترفعها إلى ملف الصور على خادم الويب مضيف موقع دروبال عربي
على استمارة إنشاء المحتوى عندك حقل الملفات المرفقة أفتحها سيظهر لك زر عندما تضغط عليه يوفر لك نافذة لكي تبحث عن الملف الذي تريد رفعه إلى موقع دروبال عربي أختار الصورة التي تريد رفعها و اضغط على أرفق
سترى أن صورتك قد رفعت إلى الموقع
و سيظهر لك الجدول التالي

  • الحجم يعطبك حجم ورن الصورة
  • الوصف يعطيك اسم الصورة و عنوانها على الخادم و هذا ما يهمنا عليك نسخه لأننا سنستعمله لإضافة الصورة إلى المحتوى
  • القائمة لو تركت المربع محدد دروبال تعرض قائمة في الملفات المرفقة في أخر الدرس أو المناقشة
  • و أخيراً أحذف لحذف الصورة

تستطيع أن ترفق عدد غير محدد من الصور
الآن و قد رفعت الصورة إلى الخادم عليك أن تضيفها إلى موضوعك على سبيل المثال سأضيف صورة على الشكل التالي

ملاحظة : لاتنسى أن تختار في نسق الإدخال Fullhtml

<img src="http://www.drupalarabic.com/sites/default/files/exemple.jpg"/>

لاحظ بأني قمت بلصق عنوان الصورة الذي نسخته عندما رفعت الملف و أدخلته في وسم الصور img src=عندما تستعمل هذا الكود الصورة ستظهر كما يلي

الآن أريد أن أعرض الصورة في منتصف الصفحة سأستعمل الكود التالي

<p align="center"><img src="http://www.drupalarabic.com/sites/default/files/exemple.jpg"/></p>

لاحظ بأني لصقت الكود السابق في وسم الفقرة و طلبت أن يكون في منتصف الصفحة p align="center" الصورة ستظهر بالشكل التالي

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

<p align="center"><a href="http://www.itwadi.com/learn_gimp"><img src="http://www.drupalarabic.com/sites/default/files/exemple.jpg"/></a></p>

لاجظ إضافة الوسمhref

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

<p align="center"><a href="http://www.itwadi.com/learn_gimp" target="_blank"><img src="http://www.drupalarabic.com/sites/default/files/exemple.jpg"/></a></p>

لا حظ إضافة الكود target="_blank

أنصحك بان تنشئ جدول بأوسمة html الأكثر استعمالاً ما يتعلق بالصور و الروابط و القوائم و التعامل مع النص لكي تكون مرجع لك عند كل استعمال و ستلاحظ بأنك مع الوقت لن تحتاج لهذة القائمة لأن أوسمة html سهلة الحفظ و على هذا الرابط تجد شرح عن لغة html
و لن تندم على حفظك لأوسمة html لأنك ستستعملها مع css و كل لغات الويب xml كما تستطيع استعماله مع مكتبة جي كويري لتحريك الصور

صورة رشـيد

Lightbox2

ممكن استعمال فئة Lightbox2 لعرض الصور عند استعمال html

developer and designer
Adobe photoshop Expert
Flash applications

آخر المشاركات

 

أوسمة الموقع