مقالات ذات وسم ’CSS‘

بالصوت والصورة: كيف تُقطّع صورة إلى موقع

في هذه التدوينة المرئية، سأقوم بشرح كيفية تقطيع الصورة خطوة بخطوة، إلى موقع متكامل باستخدام CSS وXHTML.

هذا الدرس مدته ساعة وربع الساعة تقريباً 1:16:00، وقد حرصت بما أستطيع على أن يكون سهلاً ومفهوماً، سواء للمبتدئين أو للمحترفين.

قاعة العار: مواقع لا تستخدم لون للخلفية

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

على غرار قاعة الشهرة أو Hall of fame، في هذا المعرض، سنعرض المواقع التي دخلت وبكل جدارة في قاعة العار أو Hall of shame لإعادة لون خلفياتها.

لتتحكم في حجم خطوط صفحتك هناك أربع طرق-أذكرها إجمالا ثم أفصل-:

  1. باستخدام البيكسل
  2. بالنسبة المئوية
  3. بالتناسب
  4. بالكلمات(keywords)

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

أولاً: فكرة الموقع

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

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

الموقع يقدم فائدة وهو متخصص في البرامج العربية والمعربة، لكنه يعاني أيضاً من التشتت سواء في التخصص أو التصميم، وهذه مشاكل أراها في الموقع:

هذه بعض الخصائص في css تتيح لك التحكم بأجزاء من النص لا يمكنك الوصول إليها عادة.

قبل قراءة هذا المقال، إن لم تكن تعرف معنى class وid فسيساعدك هذا الدرس. بعد قراءته سنكمل معاً.

تنسيق النص حسب الخواص (attributes)

لنفرض أن لديك هذا الكود:

تصميم صفحات الويب أصبح في الوقت الحالي ليس مجرد كتابة شيفرات برمجية، بل تعدى هذا المعنى بكثير وأصبح فن بحد ذاته، من اختيار العناصر المناسبة التي لها مدلوليتها في المكان المناسب، كاستخدام <p> للفقرات، <h1> للعناوين المهمة، إلى اختيار الهيكلة المناسبة لمحركات البحث، وضع المحتوى مثلا في المقدمة قبل قائمة التصفح.

كتابة CSS قد يكون كابوساً لمن ﻻ يعرف الأساسيات من ناحية تموضع العناصر، الفرق بين عناصر HTML المختلفة. في هذا المقال سأحاول تلخيص 10 نصائح لكتابة CSS بشكل أحسن وأرتب.