صمم موقعك الإلكتروني سريعاً القوائم - الدرس الثامن

القوائم

تعلمنا في الدرس السابق كيفية إنشاء الجداول، أما اليوم سنتعلم كيفية إدراج قوائم سواء أكانت القوائم ذات قيم رقمية أو رمزية والتي تسمى Ordered List أو القوائم التي تعتمد على الأشكال والتي تسمى Unordered List.
في البداية علينا أن نفهم أن أي قائمة تتكون من وسمين أساسيين وسم لنوع القائمة و وسم لكل قيمة داخل هذا القائمة فإذا كانت القائمة مكونة من أربع نقاط أو قيم بالتالي ستكون الشيفرة لها هي خمس أوسمة لنبدأ معاً.

Ordered List:

وسم هذا النوع من القوائم هو <ol> وهو وسم له بداية ونهاية وأيضا يحتوي خصائص سنذكرها لاحقا، بين وسم البداية و وسم النهاية لهذا الوسم سنضع القيم والتي تسمى List Item ووسمها <li> وهي أيضا لها بداية ونهاية نضع النقطة التي نريد إدراجها بينهما لاحظ المثال.

إن القيمة التلقائية لنوع Ordered List  هي الأرقام باللغة الإنجليزية وسيبدأ العد من أول رقم طبيعي وهو 1 لكن هل يمكننا أن نقوم بالتغير على هذه الخواص؟ الجواب: نعم.

خصائص Ordered List:

1- type: وهي خاصية لتحديد نوع القوائم وتأخذ القيم التالية :(1,i,I,a,A)

2- start: وهي لتحديد من أي قيمة سوف يبدأ التعداد هل هو من الرقم 2 او من الرقم 6 او من الحرف B او من الحرف c إلى أخره وتأخذ قيمة رقمية فإذا كنا نريد أن يبدأ التعداد من الحرف c على سبيل المثال ستكون قيمة الخاصية هي 3 لان c بالأحرف للغة الإنجليزية هو الحرف الثالث ومثال ذلك:

هنا حولنا نوع القائمة إلى تعداد اللاتيني.

أما هنا فقد حولنا النوع الى أحرف كبيرة ولكن يبدأ التعداد من الحرف الثاني لذلك كانت خاصية start تساوي 2.

خصائص Unordered List:

وهي لإدراج قوائم شكلية من خلال وسم <ul> وهو وسم له بداية ونهاية  لاحظ الشيفرة

هل يمكنن تغير شكل القائمة ؟ نعم من خلال خاصية type والتي تأخذ عدة قيم هي:(square,circle,disk) لنقم بتجريبها.

هل بأمكانا أن ندرج قائمة من قائمة أخرى ؟ نعم لاحظ الشيفرة.

لاحظ كيف تم وضع القائمة الثانية كاملاً بين وسمي البداية والنهاية للقيمة التي نريد أن ندرج تحتها القائمة الجديدة وهي هنا  القيمة ((الكيماء)).

ويمكننا ان ندرج اي نوع قوائم داخل أي نوع أخركذلك، وايضا يمكننا ان نحول القوائم الى روابط تتبع الشيفرة التالية:

لقد تم إضافة وسم الرابط <a> بين وسمي البداية والنهاية للقيمة <li> وتم وضع القيمة مثل الكيمياء الفيزياء الأحياء بين وسمي البداية والنهاية للوسم الروابط أما خاصية href فيمكننا أن نجعلها إما URL لموقع خارجي أو لمنطقة معينة في الصفحة راجع درس الروابط

عادةً ما تستخدم هذه القوائم لعمل Main Menu للمواقع الإلكترونية فمثلا موقع رعد له هذه القائمة

سنتعلم ذلك معا في الدورة الجديدة Macromedia Dreamweaver 8.0 إن شاء الله فكونوا معنا... إلى لقاء جديد