كيفية عمل مخطط دائري في إكسل. زوايا مدورة إضافة الصفوف والأعمدة

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

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

تستخدم هذه الطريقة HTML فقط، ولكن سيتعين علينا إنشاء صور، أي زوايا الجدول. لإنشاء الزوايا، سنحتاج إلى Photoshop أو أي برنامج رسومات آخر تفضله (حتى MS Point)، ولكن حتى تتمكن من التعامل معه. سأخبرك في هذه المقالة بكيفية صنعها في Photoshop.

دعنا ننتقل مباشرة إلى إنشاء الجدول. لإنشاء جدول، افتح Dreamweaver أو أي محرر HTML آخر. نقوم بإنشاء مستند جديد أو فتح مستند تم إنشاؤه بالفعل وهناك نقوم بإنشاء الجدول نفسه مع 3 صفوف وعمودين:

انتقل إلى Photoshop، واستخدم أداة Rounded Rectangle Tool وارسم مستطيلًا مستديرًا، واضبط نصف قطر التقريب على نفس الشكل الذي نريد أن يكون عليه الجدول، وقمت بضبطه على 30 بكسل.

أولاً، قم بتوصيل طبقة الخلفية والطبقة ذات الصورة المستطيلة، للقيام بذلك، اضغط مع الاستمرار على مفتاح Ctrl في لوحة الطبقات، وحدد الطبقة العلوية والسفلية واضغط على Ctrl + E.

الآن من هذا المستطيل نحتاج إلى استخراج الزوايا نفسها، ولهذا نأخذ أداة Rectangular Marquee Tool، في اللوحة العلوية حدد النمط: الحجم الثابت في حقلي العرض والارتفاع، واكتب قيم نصف القطر التي حددتها في الخطوة 2. اضغط على الصور، سيظهر خط منقط أمام المربع الخاص بك، حركه بحيث تكون الزاوية المستديرة داخل المربع بالكامل.

اضغط على Ctrl + C (لنسخ ما بداخل المربع، أي الزاوية الخاصة بنا)، الآن نحتاج إلى إنشاء صورة جديدة، من أجل لصق الزاوية التي نسخناها هناك مسبقًا، اذهب إلى: ملف-جديد...-موافق وقم بلصق الزاوية الخاصة بنا على الفور Ctrl + V

في الجدول الذي تم إنشاؤه، يجب دمج الصف الثاني في صف واحد، لأنه يجب كتابة النص هناك.
الآن نقوم بإدخال صورنا (الزوايا) في طاولتنا.

يجب أن تتم محاذاة الصور المدرجة (مع الأسفل الأيمن والأعلى الأيمن) إلى اليمين.
الآن الخطوة الأخيرة: تحتاج إلى إعطاء الجدول لون خلفية بنفس لون الزوايا.

حسنًا، لقد انتهى كل شيء الآن. هذه الطريقة هي الأسهل على الإطلاق. آمل أن يكون هذا المقال قد ساعدك بطريقة ما، وآمل أن أكون قد شرحت كل شيء بوضوح. حظ سعيد!

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

في الجدول يوضح الشكل 1 عددًا مختلفًا من القيم ونوع الكتلة التي يتم الحصول عليها في هذه الحالة.

شفرة وصف منظر
div (نصف قطر الحدود: 10 بكسل؛) نصف قطر التقريب لجميع الزوايا في وقت واحد.
div ( نصف قطر الحدود: 0 10 بكسل؛ ) تحدد القيمة الأولى نصف قطر الزاوية العلوية اليسرى والسفلى اليمنى، وتحدد القيمة الثانية نصف القطر لأعلى اليمين وأسفل اليسار.
div ( نصف القطر الحدودي: 20px 10px 0; ) تحدد القيمة الأولى نصف قطر الزاوية اليسرى العليا، والثانية - كل من الجزء العلوي الأيمن وأسفل اليسار، والقيمة الثالثة - الجزء السفلي الأيمن.
div ( نصف القطر الحدودي: 20px 10px 5px 0; ) يضبط بالتتابع نصف قطر الزوايا العلوية اليسرى واليمنى العلوية والسفلى اليمنى والسفلى اليسرى.

يوضح المثال 1 كيفية إنشاء كتلة ذات زوايا مستديرة.

مثال 1. زوايا الكتلة

HTML5 CSS3 IE 9+ Cr Op Sa Fx

نصف القطر

أنا هو الشكل التكميلي للحالة النصبية لـ I.


وتظهر نتيجة هذا المثال في الشكل. 1.

أرز. 1. كتلة ذات زوايا مستديرة

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

مثال 2: زر دائري

HTML5 CSS3 IE 9+ Cr Op Sa Fx

زر

وتظهر نتيجة هذا المثال في الشكل. 2.

أرز. 2. زر دائري

في متصفح Opera، يتم التقريب إلى