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

1. ما هي القوائم ؟
2. انواع القوائم .
3. ضابط الاختلاف .
4. بعض الأفكارو الحيل .

ما هي القوائم؟

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

الكل منا يعرف كود html الخاص بعرض قائمة عادية وهو كالتالي :

<ul>
	<li>عنوان</li>
	<li>عنوان</li>
	<li>عنوان</li>
</ul>

وهو كود عادي جدا ، يصلح لعمل قائمة متسلسلة ، و افتراضيا تكون عمودية

انواع القوائم .

من ناحيتين ، من ناحية الترتيب ، ومن ناحية التنسيق،

اما من ناحية الترتيب ، فهي تنقسم إلى :

• مرقمة : تكون على الصيغة التالية :

  <ol>
  	<li>عنوان</li>
  	<li>عنوان</li>
  	<li>عنوان</li>
  </ol>

  يمكنني ان اتحكم في العدد الذي تبدأ منه بإضافة العنصر start :

  <ol start="3">
  	<li>عنوان</li>
  	<li>عنوان</li>
  	<li>عنوان</li>
  </ol>

  و كذلك نوع الترتيب ، هل هو رقمي أم أبجدي بإضافة العنصر type

  <ol type="1" start="1">
  	<li>عنوان</li>
  	<li>عنوان</li>
  	<li>عنوان</li>
  </ol>

  و بتغيير قيمة type الى 1 سنحصل على ترتيب رقمي ، و a أو A للترتيب الأبجدي اللاتيني ، و i أو I للترتيب الأبجدي الروماني

• غير مرقمة : وهي القوائم التي لا يوجد بها ترتيب في جانب العناوين ، وتكتب هكذا :

  <ul>
  	<li>عنوان</li>
  	<li>عنوان</li>
  	<li>عنوان</li>
  </ul>

  افتراضيا ، تكون بجانب كل عنوان نقطة صغيرة ، يمكن التحكم في لونها و إظهارها من عدمه ، يمكن كذلك تغيير نوع النقطة بتغيير قيم العنصر Type :

  <ul type="disc">
  	<li>عنوان</li>
  	<li>عنوان</li>
  	<li>عنوان</li>
  	<li>عنوان</li>
  </ul>

  إلى disc للنقط السوداء ، او square لمربعات صغيرة ، أو circle لنقط فارغة ، عبارة عن دوائر

التقسيم من ناحية التنسيق ، وهذا الذي يهمنا بعد هذه المقدمة ، وهو الذي سنحتاجه بكثرة مشاريعنا :

• قوائم عمودية : قوائم عناوين يكون بعضها تحت بعض ، كما هو الحال في عناوين المدنة جانبا ( القيمة الافتراضية للقوائم )
• قوائم أفقية : و هي عبارة عن عناون بعضها بجانب بعض في مستوى واحد ، كما هو الشأن في رأس المدونة في العناوين الأفقية ،
• قوائم أفقية عمودية : وهو خليط من القوائم العمودية و الأفقية ، حيث نحاول ان نستغل المساحتين ، الأفقية و العمودية لمكان معين من الصفحة ، انظر مثال

ضابط الاختلاف .

و أنا أقصد به الضابط في الاختلافات بين القوائم من نوع التنسيق ، سنأخد مثالا لذلك ، لدينا هذا الكود الخاص بقائمة عناوين عادية :

<ul>
	<li>عنوان</li>
	<li>عنوان</li>
	<li>عنوان</li>
</ul>

طبعا و بعد التنسيقات التي ستعملها من ألوان و border و مأثرات ، فإن الضابط لتتحكم في قائمتك من ناحية الاتجاه – أفقي أم عمودي – وهو قيم الخاصية float من كود css

ul li {
	float: right;
}

فإذا اعطيتم للـ float أي من right أو left فسيتم اعتبار هذه القائمة أفقية ، و البدأ من الاتجاه سيكن على حسب ما اعطيتها من اتجاه ، اما لو تم تجاهل الـ float و لم يتم اعطاؤها أي قيمة ، فهنا قائمتنا افتراضيا ستكون عمودية
طيب ماذا عن النوع الثالث وهو الخليط بين النوعين الفارط ذكريهما ؟؟
سأحاول شرح طريقة العمل في المثال السابق ، طبعا الاختلاف في التنسيق css :

ul {
	padding: 0;
	margin: 0;
	list-style: none; /* لنزع النقط السوداء الافتاضية بجانب العناوين */
	width:125px ; /* هنا العرض الاجمالي لكل القائمة  */
	border: 1px solid #ccc;
	font: 12px tahoma;
}
ul li {
	padding: 5px 10px;
	margin: 0 2px;
	float: right; /* اعتبارها أفقية مبدئيا */
	width : 36px;/* تحديد عرض كل قائمة على حدى */
	border-bottom: 1px solid #ddd;
}

لاحظ القيم التي بجانبها تعليق هي التي تميز هذا النوع من القوائم ، وما بقي هي فقط تنسيقات شخصية ، يمكنك استبدالها بما يصلح لك ، مع مراعاة العرض و الـ padding و margin حتى لا تخرج عن العرض المحدد أولا فتصبح القائمة عمودية بحتة .

بعض الأفكارو الحيل .

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

• حاول أن تجعل الفواصل بين القوائم ظاهرة و بينة ، ولا تجعلها مشتركة ابدا ، حتى لا يتوهم و يتم جمع أكثر من عنوان في عنوان واحد
• لا تستعمل القوائم بغير كود القوائم ، نعم هناك من يستعملها بغير الكود المخصص لها وهو ul او ol ، هناك من يستعملها بروابط عادية و يفصلها بعوارض مثل ( – ) أو هذه ( | ) كقوائم أفقية ، طبعا بغض النظر من ناحية الأرشفة التي يتضرر منها صاحب هذه القوائم ، فإن هذه الطريقة أصبحت تقليدية ولا تعطيك الحق للتحكم بقائمتك جيدا ، لذلك حاول أن تجتنب مثل هذه القوام التقليدية و التنسيقات القديمة ، و انتقل إلى بدائل لها في css ، مثلا border سواء على اليمين أو في الاسفل ، على حسب النوع ،

  ul li {
  	border-bottom: 1px solid #ddd; /* للقوائم العمودية */
  	border-right : 1px solid #ddd; /* للأفقية */
  }

• طبعا لا تنسى مراعاة الخطوط في قوائم و انواعها ، فلهذا تاثير كبير جدا جدا على نفسية الزائر ، يمكنك ان تزداد معرفة بهذا من هنا
• مراعاة قيم margin و padding على حسب نوع القائمة التي تعمل عليها ، يتجنب الالتصاق بين العناوين
• التوازي في التموضع ، وذلك باجتناب أمر position في القوائم ، حتى تبقى قائمتك متوازية ، إلا في بعض الحالات التي يكون فيها التصميم يستدعي استعمال هذا الأمر

آمل ان تكون قد استفدت ولو شيئا قليلا مما سطرته ، و السلام عليكم ورحمة الله وبركاته

هذه التدوينة نُشرت في السبت, 19 ديسمبر, 2009 عند 7:42 م و مصنفة تحت تصنيف css , xhtml, تطوير. يمكنك متابعة أي تعليقات عبر رابط RSS 2.0. يمكنك ترك تعليق, أو تعقيب من مدونتك.
الوسوم :css, أفكار, تنسيق, ضوابط, قائمة, قواعد