انواع الخطوط

طبعا لا أحد يلزم علينا انواعا معينة من الخطوط ، ولكل أنواعه و مجموعته المفضلة من هذه الخطوط ، باستثناء القواعد التي تكلمنا عنها بالنسبة للغة العربية ، لكن ، عادة حتى تحصل على واجهات متناسقة و جدية نوعا ما ، حاول أن تجعل كل صنف معين من صفحتك بخط معين ، مثلا لو اخترت للعناوين خط times new roman فحاول أن لا تغير الخط في نفس التصنيف وهو العناوين ، كذلك الحال لو استعلمنا خط tahoma في التدوينات ، فمن الخطأ جعل خط آخر في محتوى الصفحات ، ببساطة لأنها من نفس تصنيف التدوينات ، ألا وهو المحتوى

الأحجام

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

الألوان

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

التغيير

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

تنسيق المحتوى

عادة انحراف المحتوى إلى اليمين أو الشمال من المبتعد ، غالبا ما نستعمل

text-align: justify;

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

text-indent: 10px;

10px مثال فقط ، حيث تبعد السطر الأول عن هذا التسيق قليلا لنعلم الزائر بأماكن بداية الفقرات

الكلمات الهامة

نعم ، لتثير انتباه الزائر بأن الكلمة الفلانية مهمة بالنسبة له ، حاول استعمال بعض الخصائص لتثير هذا الانتاه ، مثل

font-style: italic;

أو

font-weight:  bold;

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

التنسيقات

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

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

كتابة selector على jQuery

توجد طريقتان وهي مبينة في السطرين التاليين :

$(selector)
jQuery(selector)

وهكذا اختار أي selector ه داخل صفحة الويب الخاصة بي ، مثال :

$("p").html("content");
jQuery("p a").mouseover();
$("div.class").fadeOut();
$("form#id").fadeIn();

طبعا حتى لا يكون هناك نوع من التكرار ، فجميع الـ selector التي بينتها في مقال css فيمكنني استعمالها هنا ، امثلة :

a[href^=http://]
input[type=text]
div[title^=example]
a[href$=.pdf]
a[href*=fez-soft.net]

وهكذا ،،، يمكنني أن أ ضيف بعض selector التي يمكنك استعمالها في المكتبة الغير مذكورة في مقال css :

li:has(a)

يتم تحديد كل قائمة li بداخلها رابط a ،بحيث يكون المحدد هو Li و ليس a ،وهنا ملاحظة ، فهذا الأمر هو بعكس الأمر التالي : li a ، حيث يتم تحديد كل a داخل li، لذا فالفرق بين الأمرين واضح

• :animated

  حيث يتم تحديد العناصر المتحركة بالحدث animate()

• :button

  تجمع لي جميع عناصر الـ input التالية : ( input[type=submit] , input[type=reset] , input[type=button] , button )

• :checkbox

  و التي عوضت (input[type=checkbox])

• :contains(fez-soft)

  كل عنصر يحتوي على كلمة fez-soft

• :disabled
  :enabled

  يتم تحديد العناصر المفعلة أو الغير مفعلة

• :file

  و التي عوضت الأمر التالي : (input[type=file])

• :header

  تحديد كل العناوين من h1 إلى h6

• :hidden

  تحديد كل العناصر المخفية

• :image

  عوضت التالي : (input[type=image])

• :input

  لكل انواع input

• :not(filter)

  لاختيار العكس ، مثلا لاختيار كل العناصر في input ، باستثناء checkbox يمكنني كتابة :

  input:not(:checkbox)

  نستعملها في تصفية selector و ليس في البحث عنه ، مثال خاطئ :

  :not(p:hidden)

  لأنني حاولت البحث عن عنصر p و ليس تصفيته ، و هنا الكتابة الصحيحة له :

  div p:not(:hidden)

  حيث قمت بتصفية hidden فقط

• :password 
  :radio
  :reset 
  :submit
  :text

  عوضت على التوالي :

  (input[type=radio])
  input[type=reset] , button[type=reset])
  input[type=submit] , button[type=submit]
  input[type=text]

كذلك :

• :selected // لتحديد العناصر التي تم اختيارها في قائمة select
  :visible  // العناصر الغير مخفية

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

:checkbox:checked:enabled

حيث تم تحديد عناصر checkbox المختاره و المفعلة ،

أخيرا ، لم كل هذا ؟؟ و لم كل هذه الاختيارات ، وفي ماذا سأحتاجها ؟؟ ببساطة أخي ، لتطبق عليك حدث معين لتلبية غرضك أو فكرتك في تطبيقك

آمل أن تكون قد استفدت مما قدمته اليوم ، و اعتذر عن قلة الكتابة في الآونة الأخيرة لظروف و السلام عليكم ورحمة الله

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 في القوائم ، حتى تبقى قائمتك متوازية ، إلا في بعض الحالات التي يكون فيها التصميم يستدعي استعمال هذا الأمر

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