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


لإضافة الشريط Formatting إلى البيئة ASP.NET ننقر بزر الفأرة الأيمن بين أشرطة القوائم ، لتظهر لنا قائمة نختار منها Formatting ليظهر الشريط التالي بين الأشرطة في أعلى الصفحة .

و هذه هي القائمة format و الفقرات التي سوف نتطرق لها :


1_ Foreground Color…من هذا العنصر يمكن تحديد لون الخط في الفقرة paragraph أو في div أو في الخلية أو في الصفحة كاملة أو ... الخ ، عند النقر عليه يظهر مربع حوار انتقاء اللون نختار منه اللون المطلوب .

و يمكن عمل ذلك عن طريق الشريط Formatting

2_ Background Color .....من هذا العنصر يمكن تحديد لون تظليل الخط في الفقرة paragraph أو في ال div أو في الخلية أو في الصفحة كاملة أو ... الخ ، .عند النقر عليه يظهر مربع حوار انتقاء اللون مثل الذي يظهر عند النقر على Foreground Color نختار منه اللون المطلوب لتغيير لون تظليل النص ، و هذه صورة لنص في الصفحة تم تظليله باللون الأحمر .
و يمكن عمل ذلك عن طريق الشريط Formatting


3_Font …من هذا العنصر يمكن تحديد تنسيقات الخط ، عند النقر عليه يظهر مربع الحوار التالي :

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

1_ Font : لتحديد نوع الخط المختار .
2_ Font Style : لتحديد تنسيق الخط هل عريض أم مائل أم مائل و عريض.
3_ Size : لتحديد حجم الخط .
4_ Color : لتحديد لون الخط .
5_Effects : لتحديد التأثيرات على الخط مثل :

Underline : لتسطير الخط ، overline : لوضع خط فوقه ،Strike through : يتوسطه خط ، strong : خط عريض ،Emphasis : خط مائل ، superscript : خط صغير علوي مثل الأس و غيرها من التنسيقات الشهيرة .و يمكن العثور على الكثير من التنسيقات السابقة عن طريق شريط Formatting

4_ Paragraph …من هذا العنصر يمكن تحديد تنسيقات الفقرات ، عند النقر عليه يظهر مربع حوار الفقرات التالي :
وفيه مجموعة من التنسيقات أهمها :

1_ Alignment : لتحديد محاذاة الفقرة إما في يمين الصفحة أو وسطها أو يسارها .
2_Direction : لتحديد اتجاه النص في الفقرة إما من اليمين الى اليسار ، أو من اليسار إلى اليمين .

5_ Bullets and Numbering …من هذا العنصر يمكن عمل تعداد نقطي أو رقمي في الصفحة ، عند النقر عليه يظهر مربع
الحوار التالي

في هذا المربع ثلاثة تبويبات هي :

1_ Picture Bullets : وهو التبويب المعروض في الصورة السابقة ، يمكن من هذا التبويب عمل تعداد نقطي كل نقطة عبارة عن صورة ، وهناك بعض النقاط المهمة في هذا التبويب و المرقمة في الصورة .
A . عن طريق هذا البند يمكن اختيار الصورة التي سوف تظهر كنقطة .
B . لتحديد اتجاه الفقرة ، من اليمين إلى اليسار أو العكس .

2_Plain Bullets : و يمكن من هذا التبويب عمل تعداد نقطي ، و الصورة التالية توضح هذا التبويب و في هذا التبويب البنود التالية و المرقمة في الصورة :

1= لاختيار نوع التعداد النقطي .
2= لاختيار اتجاه التعداد النقطي

و يمكن عمل تعداد نقطي عن طريق الشريط Formatting

3_Numbers : يمكن من هذا التبويب عمل تعداد رقمي ، و الصورة التالية توضح هذا التبويب ، و في هذا التبويب البنود التالية و المرقمة في الصورة :
1= لاختيار نوع التعداد الرقمي .
2= لاختيار اتجاه التعداد الرقمي .
3=لتحديد العدد أو الحرف الذي يبدأ منه العد .

6_Borders and Shading …من هذا العنصر يمكن عمل جميع تنسيقات الحدود و التظليل للصفحة أو لجزء من الصفحة
كجدول أو خلية أو فقرة أو ما شابه ، عند النقر عليه يفتح مربع الحوار التالي :

و يتكون مربع الحوار السابق من تبويبين هما :

1_ Borders : و منه نحدد تنسيقات الحدود للفقرة أو الصفحة أو الخلية أو ما شابه و من هذه التنسيقات التالي :

أ_ Setting : هذا البند لتحديد هل لا تريد حدود و تأخذ القيمة default ، أو حدود في جميع الاتجاهات و تأخذ القيمة Box ، أو حدود في أماكن معينة فقط و تأخذ القيمة custom .
ب_  Style : تحدد نمط الحدود هل خط أو شرطات أو نقاط أو ... الخ
ج_ Color : تحدد لون الحد .
د_ Width : و تحدد عرض الحد بالبكسل .

2_ Shading : وتحدد تظليل الخلايا .

7_ Position .....يحدد هذا العنصر تو ضع الأداة في الصفحة و سنشرح هذا البند في في فقرة  تو ضع الأدوات
في الصفحة

8_Font .....يحدد هذا العنصر بعض تنسيقات الخط الشهيرة مثل تعريض الخط Bold ، إمالة الخط Italic ، تسطير الخط Underline ، جعل الخط علوي صغير superscript ، و جعل الخط سفلي صغير subscript . هذه الصورة توضح هذا العنصر .

9_. Justify ....يمكن عن طريق هذا العنصر عمل محاذاة لعناصر الصفحة إما يميناً ، أو يساراً ، أو في المنتصف ، أو عمل ضبط الأسطر

وضع الأدوات في الصفحة

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

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

1_ باستخدام الجداول Tables : و ذلك بإدراج جداول من نوع HTML في الصفحة ، ثم نضع الأداة في الخلية الموجودة في المكان الذي نريده ، و بذلك ابتعدت الأداة عن طرف الصفحة و وضعت في المكان المطلوب ، و المثال المعروض في الصورة رقم 21 يوضح ذلك .
2_ باستخدام CSS : يمكن تحرير الأدوات باستخدام CSS ، و إذا قمت بذلك يمكنك سحب الأدوات في الصفحة و كأنك في تطبيقات نماذج windows ، لا يتطلب ذلك منك معرفة CSS فهناك نوافذ جاهزة لعمل المطلوب سوف نشرحها الآن .

يمكن عمل هذا التحرير للأدوات بأحد الشكلين التاليين :
a ) تحرير عنصر واحد :

أ- نحدد على العنصر الذي نريد تحريره – تحريره كي يمكن وضعه في أي مكان في الصفحة - . ليكن مثلاً زر Button .
ب - من قائمة Format ننقر على العنصر Position ليظهر مربع الحوار التالي نختار منه Absolute .
ج- الآن أصبح العنصر حراً ، لاحظ الخطين الأفقي و العمودي حول العنصر ، يمكن سحب العنصر عن طريق النقر على المربع الأبيض الموجود أعلى العنصر و المحدد في الصورة نقراً مستمراً ثم السحب إلى أي مكان في الصفحة .

b) تحرير كل الأدوات التي سوف تدرج إلى الصفحة أي أ ن أي أداة سوف تدرج ،تدرج حرةً قابله للنقل إلى أي مكان في الصفحة .يمكن عمل ذلك عن طريق : القائمة Tools ثم Options …ليظهر لنا مربع الحوار options ، نقوم بالخطوات التالية و المر قمة في الصورة التالية :

1_ نؤشر على show all setting لتظهر كل العناصر التي في يسار النافذة .
2_ ننقر على البند HTML Designer ليفتح و تظهر محتوياته .
3_ ننقر على البند الداخلي CSS Styling ، لتظهر محتويات هذا البند على يمين مربع الحوار .
4_ نؤشر على البند الأخير من البنود الظاهرة في يمين مربع الحوار ، ثم النقر على المفتاح OK .

و الآن أي عنصر سوف يدرج إلى الصفحة يمكن تحريكه مباشرة .