نحوه ایجاد نمودار دایره ای در اکسل. گوشه های گرد اضافه کردن سطر و ستون
در این مقاله تصمیم گرفتم نحوه ساخت میز با گوشه های گرد را به شما بگویم. مطمئنم در حین گشت و گذار در اینترنت با جداول این چنینی برخورد کرده اید.
من دقیقاً در مورد چنین جداول به شما خواهم گفت. البته، چنین جدولی را می توان به روش های مختلفی ساخت، این روش، که من در مورد آن به شما خواهم گفت، ساده ترین و "زیباترین" است، زیرا اگر چنین جدولی را به روش دیگری بسازید، باید جاوا را مطالعه کنید. و آن را با CSS ترکیب کنید، بنابراین کد شما بسیار دست و پا گیر و پیچیده خواهد شد.
این روش فقط از HTML استفاده می کند، اما باید تصاویر، یعنی گوشه های جدول ایجاد کنیم. برای ایجاد گوشه ها، به فتوشاپ یا هر برنامه گرافیکی دیگری که دوست دارید (حتی MS Point) نیاز داریم، اما برای اینکه بتوانید از پس آن برآیید. در این مقاله به شما خواهم گفت که چگونه آنها را در فتوشاپ بسازید.
بیایید مستقیماً به ایجاد جدول ادامه دهیم. برای ایجاد جدول، Dreamweaver یا هر ویرایشگر HTML دیگری را باز کنید. ما یک سند جدید ایجاد می کنیم یا یک سند از قبل ایجاد شده را باز می کنیم و در آنجا خود جدول را با 3 سطر و 2 ستون ایجاد می کنیم:
به فتوشاپ بروید، ابزار Rounded Rectangle را بردارید و یک مستطیل گرد رسم کنید و شعاع گرد کردن را به اندازه ای که می خواهیم جدول داشته باشد، تنظیم می کنم، آن را روی 30 پیکسل قرار می دهم.
ابتدا لایه پس زمینه و لایه را با تصویر مستطیل متصل کنید، برای این کار کلید Ctrl را در پنل لایه ها فشار داده و نگه دارید، لایه بالا و پایین را انتخاب کنید و Ctrl + E را فشار دهید.
حالا از این مستطیل باید خود گوشه ها را استخراج کنیم، برای این کار ابزار Recatangular Marquee را می گیریم، در پانل بالا Style: Fixed Size را در قسمت های Width و Height انتخاب می کنیم، مقادیر Radius را که در آن مشخص کرده اید بنویسید. مرحله 2. بر روی تصاویر کلیک کنید، یک خط نقطه چین در مقابل شما ظاهر می شود به طوری که گوشه گرد کاملا در مربع قرار گیرد.
Ctrl + C را فشار دهید (برای کپی کردن آنچه در داخل مربع است، یعنی گوشه ما، اکنون باید یک تصویر جدید ایجاد کنیم، تا گوشه ای را که قبلاً کپی کرده بودیم، در آنجا پیست کنیم، برو: File-New...-Ok). و بلافاصله Ctrl + V گوشه ما را بچسبانید
در جدول ایجاد شده، ردیف دوم باید در یک ردیف ترکیب شود، زیرا متن باید در آنجا نوشته شود.
حالا تصاویر (گوشه ها) خود را در جدول خود قرار می دهیم.
تصاویر درج شده (با سمت راست پایین و سمت راست بالا) باید به سمت راست تراز شوند.
حالا مرحله آخر: باید رنگ پس زمینه را هم مانند گوشه ها به جدول بدهید.
باشه الان تموم شد این روش از همه راحت تر است. امیدوارم این مقاله به نحوی به شما کمک کرده باشد و امیدوارم همه چیز را به وضوح توضیح داده باشم. موفق باشید!
مدتهاست که همه از گوشه های مستطیلی سنتی در طراحی وب سایت خسته شده اند. گوشه های گرد مد هستند، که نه با استفاده از تصاویر، بلکه از طریق استایل ها ساخته می شوند، که برای آنها از ویژگی حاشیه-radius استفاده می شود. این ویژگی می تواند یک، دو، سه یا چهار مقدار داشته باشد که با یک فاصله از هم جدا شده اند که شعاع همه گوشه ها یا هر یک را به صورت جداگانه تعیین می کند.
روی میز 1 تعداد متفاوتی از مقادیر و نوع بلوکی که در این مورد به دست می آید را نشان می دهد.
| کد | شرح | چشم انداز |
|---|---|---|
| div (شعاع مرزی: 10 پیکسل؛ ) | شعاع گرد کردن همه گوشه ها به طور همزمان. | |
| div (شعاع مرزی: 0 10 پیکسل؛ ) | مقدار اول شعاع گوشه سمت راست بالا و پایین را تعیین می کند، مقدار دوم شعاع بالا سمت راست و پایین سمت چپ را تعیین می کند. |  |
| div (شعاع حاشیه: 20 پیکسل 10 پیکسل 0؛ ) | مقدار اول شعاع گوشه سمت چپ بالا، دوم - هر دو سمت راست بالا و پایین سمت چپ، و مقدار سوم - سمت راست پایین را تعیین می کند. |  |
| div (شعاع حاشیه: 20 پیکسل 10 پیکسل 5 پیکسل 0؛ ) | به صورت متوالی شعاع گوشه های بالا سمت چپ، راست بالا، پایین سمت راست و پایین سمت چپ را تنظیم می کند. |  |
مثال 1 نحوه ایجاد یک بلوک با گوشه های گرد را نشان می دهد.
مثال 1. گوشه های یک بلوک
HTML5 CSS3 IE 9+ Cr Op Sa Fx
نتیجه این مثال در شکل نشان داده شده است. 1.
برنج. 1. بلوک با گوشه های گرد
اگر شعاع گرد کردن را بیشتر از نصف ارتفاع و عرض عنصر تنظیم کنید، یک اثر جالب به دست می آید. در این صورت یک دایره خواهید داشت. مثال 2 نحوه ایجاد یک دکمه دایره ای با یک تصویر را نشان می دهد.
مثال 2: دکمه گرد
HTML5 CSS3 IE 9+ Cr Op Sa Fx
نتیجه این مثال در شکل نشان داده شده است. 2.
برنج. 2. دکمه گرد
در مرورگر Opera، گرد کردن به
ویژگی border-radius را می توان با ویژگی های دیگر ترکیب کرد، به عنوان مثال، افزودن سایه به یک عنصر. در مثال 3، مجموعه ای از دایره ها ساخته شده است که یکی از آنها با استفاده از box-shadow برجسته می شود. از این مجموعه می توان برای پیمایش در صفحات یا عکس ها استفاده کرد.
مثال 3. درخشش
HTML5 CSS3 IE 9+ Cr Op Sa Fx
نتیجه این مثال در شکل نشان داده شده است. 3.
برنج. 3. در اطراف دایره بدرخشید
با استفاده از حاشیه شعاع می توانید نه تنها یک دایره، بلکه یک بیضی و همچنین یک گرد بیضی شکل برای یک بلوک ایجاد کنید. برای انجام این کار، شما باید نه یک مقدار، بلکه دو مقدار را که با یک اسلش از هم جدا شده اند بنویسید. نوشتن 20px/10px به این معنی است که شعاع افقی فیله 20 پیکسل و شعاع عمودی 10 پیکسل خواهد بود. مثال 4 نشان می دهد که چگونه می توان گوشه های بیضوی ایجاد کرد تا یک عنوان به سبک کمیک به عکس اضافه شود.
مثال 4: بیضی
HTML5 CSS3 IE 9+ Cr Op Sa Fx
نتیجه این مثال در شکل نشان داده شده است. 4.
برنج. 4. استفاده از گوشه های بیضوی
همانطور که در مثال 5 نشان داده شده است، می توانید با افزودن ویژگی border-radius به انتخابگر img، ظاهر گوشه ها را در تصاویر تغییر دهید.
مثال 5: تصاویر
HTML5 CSS3 IE 9+ Cr Op Sa Fx
درود، دوستان! داده های جدولی اغلب در اسناد متنی برای نمایش واضح تر برخی از شاخص ها وجود دارد. و درک کلی از اطلاعات ارسال شده در آنجا به قالب بندی صحیح جدول بستگی دارد. امروز نحوه رسم جدول در Word را بر اساس اندازه ستون ها و ردیف های آن خواهیم فهمید.
قبل از ایجاد جدول، باید در مورد تعداد سطرها و ستون ها تصمیم بگیرید. بعد، جهت صفحه مناسب را انتخاب کنید. برای یک میز گسترده، ترجیحاً چشم انداز، برای یک میز باریک، پرتره را انتخاب کنید.
جدولی را با تعداد مشخصی سلول به هر شکلی که برای شما مناسب است درج کنید. درباره روش های درج جداول
تنظیم اندازه دقیق میز
مرحله بعدی به ما این امکان را می دهد که ابعاد خارجی دقیق جدول را تنظیم کنیم.
باید داخل جدول کلیک کنید تا قابلیت کار با آن فعال شود. اگر هیچ پارامتر اضافی را هنگام درج جدول مشخص نکردید، در عرض کل منطقه متن موجود (در ناحیه مقیاس سفید خط کش افقی) کشیده می شود و ستون های آن به طور خودکار تراز می شوند. در عرض
برای نشان دادن ابعاد دقیق، به خوراک ابزار بروید.
در پنجره ای که باز می شود، در برگه جدولچک باکس را علامت بزنید (که با فلش نشان داده شده است) و عرض جدول مورد نظر را یادداشت کنید. روی OK کلیک کنید.
اگر نمی توانید عرض ستون ها را به اندازه دلخواه تغییر دهید و در هنگام تغییر عرض یکی، عرض ستون دیگر تغییر می کند، در این صورت با برداشتن تیک کادر، این ناراحتی برطرف می شود.
اکنون ابعاد خارجی میز محدود خواهد شد. شما فقط می توانید بر عرض ستون های داخل جدول تأثیر بگذارید.
تنظیم ارتفاع خط
برای اینکه ارتفاع ردیف در کل جدول یکسان باشد، آن را انتخاب کنید. بعد، در نوار ابزار، را انتخاب کنید کار با جداول – Layout – Properties.
در کادر محاوره ای، به تب بروید خطیک تیک در چک باکس ارتفاع قرار دهید و ارتفاع ردیف و حالت مورد نیاز را نشان دهید (با یک قاب قرمز مشخص شده است). کمترین- حداقل مقدار را برای همه ردیف ها تعیین می کند. حداکثر ارتفاع فقط با محتویات سلول ها محدود می شود. بنابراین، ارتفاع سطرها در جدول متفاوت خواهد بود، زیرا به محتوای اطلاعات بستگی دارد. اگر می خواهید ارتفاع ردیف را به شدت محدود کنید، حالت را تنظیم کنید دقیقا.
برای تنظیم ابعاد یک خط، کافیست روی آن راست کلیک کنید تا منوی زمینه باز شود. که از آن یک تیم انتخاب شود خواص جدولبرای تنظیم پارامترهای خط مشخص شده.
تنظیم عرض ستون ها
برای تعیین اندازه یک ستون، روی هر سلولی که در آن قرار دارد کلیک راست کرده و خصوصیات جدول را فراخوانی کنید. به برگه بروید ستون، اندازه عرض مورد نیاز را تنظیم کرده و روی دکمه کلیک کنید ستون بعدییا ستون قبلی،به تعیین اندازه ستون های دیگر در جدول ادامه دهید. سپس روی OK کلیک کنید.
اکنون جدول شما کاملاً با ابعاد مشخص شده مطابقت دارد.
P.S.به درخواست خواننده وبلاگ سرگئی یاکولویچ گربنیوک، من یک صفحه شطرنج در مایکروسافت ورد با استفاده از جدول و مهره های چک کننده با استفاده از شکل خودکار ساختم. این برای ایجاد تصاویری از موقعیت های مختلف چکر ضروری بود. در اینجا پیوند به سند Word است https://yadi.sk/i/O2SmHvyF3Pvujrبرای مشاهده نحوه چیدمان قطعات و گرفتن اسکرین شات از موقعیت با استفاده از که با سیستم عامل ویندوز نسخه 7 و بالاتر ارائه شده است، ویدیو را تماشا کنید.
قابلیت های Word فوق العاده قدرتمند است. گاهی اوقات من خودم از اتفاقی که نمی افتد شگفت زده می شوم.
خواننده محترم! شما مقاله را تا آخر تماشا کرده اید.
آیا پاسخ سوال خود را دریافت کرده اید؟چند کلمه در نظرات بنویسید.
اگر جواب را پیدا نکردید، آنچه را که به دنبال آن بودید نشان دهید.
فرض کنید اطلاعاتی در مورد کارمندان دارید: تعداد معاملات و درآمد. باید داده ها را به صورت بصری مانند نمودار دایره ای نمایش دهید.
در این حالت دایره به معنای مجموع تمام تراکنش ها یا مجموع کل درآمدها یعنی 100% خواهد بود.
هنگام ساخت نمودار دایره ای، اکسل به طور خودکار سهم را محاسبه کرده و آن را در قالب یک تصویر زیبا و بصری ارائه می کند.
دستورالعمل نحوه ایجاد نمودار دایره ای در اکسل 2007 یا 2010
- برای ساختن نمودار دایره ای بر اساس داده های تراکنش، باید محدوده مورد نیاز از مقادیر را انتخاب کنید B3:C8(ستون با نام کامل و ستون با معاملات) مانند شکل. فراموش نکنید که هدر جدول را بگیرید.
- بعد، به بخش بروید درج | نمودارها
- در بخش نمودارها، نمودار دایره ای را انتخاب کنید
- شما باید نوع نمودار دایره ای مورد نظر را از لیست کشویی انتخاب کنید.
تمام - نمودار دایره ای آماده است.
برای نمایش مقادیر در نمودار دایره ای، در هر نقطه از خود دایره کلیک راست کرده و " را انتخاب کنید. امضای داده را اضافه کنید”
اگر نیاز به ایجاد نمودار دایره ای برای ستون دیگری دارید، در مثال ما درآمد است، سپس ابتدا باید ستون هایی را که به ما علاقه مند هستند انتخاب کنید. برای این کار باید این محدوده ها را با نگه داشتن کلید انتخاب کنید Ctrlروی صفحه کلید
در صورت لزوم، امضاهای داده را نیز وارد می کنیم.
مثال‌ها و آموزش‌های زیادی در اینترنت برای گرد کردن گوشه‌های بلوک یا میز وجود دارد، اما قاعدتاً این آموزش‌ها بر اساس استفاده از تصاویر یا استفاده از بلوک‌های اضافی است.
در آموزش امروز به شما نشان خواهم داد که چگونه می توانید گوشه های میز گرد فقط با استفاده از CSS.
نشانه گذاری مستقیم (جدول دوم در چیدمان سلول های ردیف بالا متفاوت است):
| نولا گراویدا. | اورنا اوگ. | Nunc iaculis bibendum. | |
| وستیبولوم تمپور | Laoreet eros semper ut. | ||
| Vivamus quis nisi lacus. | Cras id felis eu purus tempor dictum in at lorem. | facilisis iaculis magna diam id quam. eleifend | Pellentesque cursus, nunc ut facilisis hendrerit |
1. گوشه ها را مستقیماً روی میز گرد کنید (تگ میز).
BCcontentTables( حاشیه: 1 پیکسل جامد #CCCCCC؛ عرض: 100%؛ moz-border-radius: 10px؛ /* Firefox */ -webkit-border-radius: 10px؛ /* Safari، Google Chrome */ -khtml-border-radius : /* KHTML */ -o-border-radius: /* Opera */ -ms-border-radius: 10px */ border-radius: 10px حاشیه: 0.7em خودکار ;
2. هر گونه پس زمینه را از خط اول حذف کنید.
Tr.bCTable_Header (پس زمینه: هیچ؛)
3. با استفاده از pseudo-class:first-child و ترکیب کننده > اولین سلول جدول را انتخاب کنید. گوشه سمت چپ بالای سلول اول را گرد کنید. پس زمینه سطر اول از پس زمینه سلول های این سطر تشکیل شده است.
Tr.bCTable_Header:first-child > td:first-child( border-radius:10px 0px 0 0; -webkit-border-radius:10px 0 0 0; -moz-border-radius:10px 0 0; -ms- border-radius:10px 0 0; -o-border-radius:10px 0 0 0 -khtml-border-radius: 10px 0 0 . پس‌زمینه رنگ: #00843C؛)
4. با استفاده از pseudo-class:last-child و ترکیب کننده > آخرین سلول در ردیف اول را انتخاب کنید. برای آن، گوشه سمت راست بالا را گرد می کنیم.
Tr.bCTable_Header:first-child > td:last-child( border-radius:0 10px 0 0; -webkit-border-radius:0 10px 0 0; -moz-border-radius:0 10px 0 0; -ms- border-radius:0 10px 0 0 -o-border-radius:0 10px 0 0 -khtml-border-radius: 0 10px 0;
5. گوشه های پایین خط آخر را گرد کنید. فراموش نکنید که پس زمینه را از خط آخر حذف کنید. پس زمینه ردیف توسط پس زمینه سلول های آخرین ردیف تنظیم می شود.
BCcontentTables tr:last-child( border-radius:0 10px 10px; -webkit-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; -ms-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; -ms-border-radius 10px -o-border-radius:0 0 10px 10px -khtml-border-radius: 0 0 10px;
6. سپس به قیاس با نقاط 3-4، در آخرین خط گوشه های سلول های اول و بیرونی را گرد می کنیم.
BCcontentTables tr:last-child td(background-color:#F1F1F2;) .bContentTables tr:last-child td:first-child( border-radius:0 0 0 10px; -webkit-border-radius:0 px0; -moz-border-radius:0 0 10px; -ms-border-radius:0 0 0 10px; bContentTables tr:last-child td:last-child (border-radius:0 0 10px 0; -webkit-border-radius:0 0 10px 0; -moz-border-radius:0 0 10px 0; -ms-border- شعاع: 0 10 پیکسل 0; -o-border-radius:0 0 10px 0 -khtml-border-radius: 0 0 10px;
پشتیبانی از مرورگر
شاید خواندن آن مفید باشد:
- پاک کردن فایل های برنامه;
- بررسی عمیق Photos برای Mac - هر آنچه باید در مورد جایگزینی iPhoto و دیافراگم بدانید;
- شبیه ساز تعویض سی دی - می توانید خودتان آن را بسازید؟;
- چگونه می توانم نام خانوادگی خود را در یک مخاطب تغییر دهم؟;
- غیرفعال کردن سرویس "پرداخت آسان" از MTS;
- ایجاد نظرسنجی در تلگرام چگونه در تلگرام لایک کنیم;
- مهندس اصلی دوربین برای Sony Xperia در زمینه توسعه عکاسی موبایل، فناوری‌های Sony و آینده;
- چگونه سیوهای بازی موبایل را به دستگاه دیگری منتقل کنیم؟;