اندازه ثابت سلول های Word. طراحی ثابت

ولاد مرژویچ

اصطلاح "طراحی ثابت" برای اشاره استفاده می شود صفحه آراییکه بر اساس لایه ها ایجاد می شود عرض داده شده... انتخاب عرض بستگی به جهت روی دارد وضوح مشخصمانیتور کاربر بنابراین، برای وضوح 1024x768 پیکسل، اندازه جدول نباید بیش از 1000 پیکسل باشد. این عرض با کم کردن عرض نوار اسکرول عمودی و حاشیه پنجره مرورگر از 1024 به دست می آید. برای همه کاربران، سایتی که بر اساس چنین طرح بندی ساخته شده است به درستی نمایش داده می شود، اما اگر رزولوشن های بزرگمعلوم می شود خیلی زیاد است فضای خالی... از آنجایی که محبوب ترین وضوح در بین کاربران اینترنت 1024x768 است، توسعه دهندگان سایت بر اساس آن هدایت می شوند و از عرض کل لایه ها 900-1000 پیکسل استفاده می کنند.

با طراحی ثابت، بلوک مواد معمولا در لبه سمت چپ یا در مرکز صفحه نمایش قرار می گیرد. آخرین گزینهترجیحاً، پس زمینه های وسیع اطراف در وضوح بالای مانیتور چندان قابل توجه نیستند (شکل 1).

برنج. 1. معمولی شبکه مدولاربا طراحی ثابت

عناوین عددی استفاده شده در این شکل: 1 - عنوان سایت. 2 - لایه سمت چپ، معمولا شامل عناصر ناوبری است. 3 - لایه سمت راست، حاوی محتوای صفحه است. 4 - "پانویس"، همان پایین صفحه وب، معمولا در آن قرار می گیرد اطلاعات تماسو دکمه های مختلف

برای ایجاد طرح بندی نشان داده شده در شکل. 1، شما باید در مورد برخی از نکات اولیه فکر کنید - عرض کل همه عناصر چقدر خواهد بود. جایی که طرح قرار می گیرد - در مرکز صفحه یا در لبه سمت چپ. چه رنگ ها و فونت هایی استفاده خواهد شد و غیره مراحل قبل از نوشتن کد در زیر توضیح داده شده است.

عرض لایه

اولین قدم تعیین عرض کل عناصر بصری صفحه وب است. همانطور که در بالا ذکر شد، این مقدار توسط خود طراح بر اساس جمع آوری اولیه داده های مربوط به کاربران آینده سایت تعیین می شود. اگرچه اکثر طراحان عرض را که "از فانوس" نامیده می شود، بر اساس راحتی خود تنظیم می کنند. بنابراین در مثال 1 با استفاده از همین اصل، عرض همه لایه ها 750 پیکسل است.

بنابراین، کل عرض مشخص است، اکنون باید آن را به دو قسمت تقسیم کنیم. لایه مشخص شده با شماره 2 (شکل 1) برای منو رزرو شده است، عرض آن باید حداقل باشد، اما برای خواندن راحتمتن بیایید آن را به یک عدد گرد تبدیل کنیم، به عنوان مثال 200 پیکسل. همه چیز دیگر با محتوا اشغال خواهد شد.

ارتفاع لایه ها

ارتفاع لایه بسته به محتوای آن به صورت پویا تغییر می کند. اگر می خواهید ارتفاع لایه را خودتان تنظیم کنید، می توانید از ویژگی height استفاده کنید و ارتفاع را بر حسب پیکسل، درصد یا موارد دیگر تنظیم کنید. واحدهای CSS... لطفاً توجه داشته باشید که با این رویکرد، محتوای لایه همیشه با لبه بالایی آن تراز است، بنابراین نباید ارتفاع زیادی را تعیین کنید (مثال 1).

مثال 1. تنظیم ارتفاع لایه

به همین ترتیب، ارتفاع یک لایه را می توان با padding با تغییر مقدار padding-top و padding-bottom تغییر داد (مثال 2). اما این روش کمتر تطبیق پذیر است.

مثال 2. تنظیم ارتفاع لایه با استفاده از padding

در این حالت ارتفاع لایه مجموع حاشیه های بالا و پایین و ارتفاع محتوایی است که در مرکز عمودی قرار می گیرد.

اگر ارتفاع محتوای یک لایه بیشتر از ارتفاع آن باشد که توسط ویژگی height مشخص شده است، مرورگر ابعاد لایه را بدون تغییر می‌گذارد و محتوا در بالای آن قرار می‌گیرد.

تراز وسط

اگر نیاز باشد که چیدمان را در سمت چپ پنجره تراز کنید، نیازی به انجام کاری ندارید، این اثر خود به خود اتفاق می افتد. اما برای اینکه چیدمان در مرکز پنجره مرورگر باشد، یک لایه اضافی دیگر کمک خواهد کرد که به عنوان یک اسکلت عمل می کند و تمام لایه های دیگر را شامل می شود. بگذارید آن را ظرف بنامیم و استایل زیر را برای آن بنویسیم (مثال 3).

مثال 3. تراز وسط

ویژگی های margin-right و margin-left با ارزش خودکارتراز لایه را در مرکز صفحه وب قرار دهید. در همان انتخابگر، عرض کل همه لایه ها را نیز نشان می دهیم.

تراز راست چین بندی صفحه وب معمولاً هرگز انجام نمی شود - از تراز وسط یا چپ استفاده می شود.

تورفتگی یک صفحه وب

افقی و بالشتک عمودیاز لبه مرورگر تا محتوای صفحات وب در مرورگر پیش فرض تعبیه شده است. با این حال، می توانید مقدار این ویژگی ها را با تورفتگی کم و بیش به دلخواه تغییر دهید. به عنوان مثال، می توانید تورفتگی را از لبه بالای پنجره به عنوان صفحه تنظیم کنید یا حتی آن را به طور کلی حذف کنید.

تورفتگی ها توسط ویژگی ها تنظیم می شوند حاشیه CSSو بالشتک برای انتخابگر BODY. وجود دو ویژگی به جای یکی، دوباره به علایق مرورگرهای مختلف نیاز دارد، حاشیه - اینترنت اکسپلورردر حالی که padding از Opera و Firefox می آید. ترکیبی از ویژگی های مختلف تضمین می کند که صفحه وب در آن نمایش داده می شود مرورگرهای مختلفهمینطور خواهد بود.

شما می‌توانید با ویژگی‌های margin-top، margin-bottom، margin-right و margin-left، لایه‌های جداگانه را از لبه‌های مختلف صفحه نمایش کنترل کنید، که بر این اساس فاصله از لبه‌های بالا، پایین، راست و چپ پنجره مرورگر را تغییر می‌دهد. . قبل از استفاده از آنها، باید ویژگی margin را صفر کنید (مثال 4).

مثال 4. تغییر لایه بالایی از لبه مرورگر

رنگ ها

CSS چندین گزینه برای تعریف متن و رنگ پس زمینه یک لایه دارد. ویژگی color رنگ متن را در لایه مشخص می کند و پس زمینه رنگ پس زمینه را مشخص می کند (مثال 5).

مثال 5. تغییر رنگ

رنگ پس‌زمینه لایه منو در مثال سبز تیره و رنگ متن سفید است.

هنگام تقلید از پروژه دیگری (یا فقط طراحی یک شبکه طرح بندی)، بسیاری با یک معضل مواجه شدند - استفاده از یک عرض طرح ثابت یا یک شبکه "لاستیکی" که با اندازه پنجره مرورگر سازگار است.

هر کدام از این راه حل ها مزایا و معایب خاص خود را دارند، من می خواهم روی معایب تمرکز کنم، زیرا معمولاً بین دو شر است که باید دقیقاً در بازتاب معایب این تصمیمات بین دو شر یکی را انتخاب کرد.

شبکه طرح عرض ثابت

طرح به ابعاد افقی 960-980 پیکسل هدایت می شود (به طوری که در اکثر دستگاه ها در اکثر وضوح ها همه چیز گنجانده شده است)، که با اندازه های بزرگ پنجره افقی به نوعی سرد - نازک به نظر می رسد. نوار عمودیمحتوای مفید صفحه و حاشیه های بیهوده عظیم فضای تلف شده در طرفین.

شبکه طرح "لاستیک" به عرض پنجره

باز هم، با اندازه‌های بزرگ پنجره‌های افقی، مشکل دیگری وجود دارد: خطوط متن بسیار طولانی می‌شوند و خواندن آن‌ها آنطور که می‌خواهیم راحت نیست.
یکی دیگر از مشکلات رایج این راه حل این است که حاشیه های جانبی برای اندازه های بزرگ پنجره های افقی دیگر از نظر بصری با ابعاد افقی عناصر سازگار نیستند، که همچنین هنگام نگاه کردن به چیدمان، راحتی را اضافه نمی کند.

من می خواهم یک راه حل ساده پیشنهاد کنم - محدود کردن حداقل اندازه افقی به یک مقدار ثابت در پیکسل، و حداکثر نسبی به عنوان درصدی از عرض پنجره. این خیلی عادی است. با وسایل ساده 2 نسخه دیگر از مشخصات CSS.

به روز رسانی:من می‌خواهم این نکته را متذکر شوم که ما در مورد جلوه کلاسیک لاستیک و در مورد تطبیق با تمام وضوح‌ها صحبت نمی‌کنیم، بلکه فقط در مورد طیف معقولی از وضوح‌ها صحبت می‌کنیم که چیدمان برای آن طراحی شده است. در مثال های زیر، این یک محدوده وضوح کلاسیک دسکتاپ با اندازه افقی 1024 پیکسل یا بیشتر است.

باز هم تاکید می کنم:این پست در مورد راه حلی برای همه انواع دستگاه ها و همه محدوده های وضوح صحبت نمی کند. در چارچوب یک طرح، این کار در اصل قابل حل نیست.، برای حل آن به روشی دیگر، چندین طرح مورد نیاز است. مگس جداگانه، کتلت جداگانه.

یک کانتینر طرح بندی ایجاد کنید:
...
ما آن را با یک کد سبک ساده تزئین می کنیم:
div.page-container (عرض حداقل: 960 پیکسل؛ حداکثر عرض: 75 درصد؛ حاشیه: 0 خودکار؛ بالشتک: 0؛)
با این حال، این راه حل ممکن است برای کسی کافی به نظر نرسد، زیرا با اندازه پنجره های افقی بسیار بزرگ، مشکلات طول خطوط دوباره ظاهر می شود. این با یک تکنیک اضافی به همان اندازه ساده حل می شود: ایجاد یک ظرف خارجی اضافی در داخل ظرفی که قبلاً توضیح داده شده و محدود کردن آن حداکثر عرضمقدار ثابت (از نظر ذهنی به نظر می رسد که مقادیر در محدوده 1400-1600 پیکسل مناسب ترین هستند). باز هم، ما فقط استفاده می کنیم ابزارهای CSS 2.0. چنین راه حلی به جای آنچه در نظر اول پیشنهاد شده است اضافه کردن سادهعرض ها بر حسب درصد برای کانتینر اصلی نیز در اینترنت اکسپلورر کار می کنند، که تا نسخه 9 مشخصات همزمان مقادیر را درک نمی کند.

تکمیل HTML:
...

و CSS را کمی تغییر دهید:
div.page-container (حداکثر عرض: 75٪؛ حداقل عرض: 960 پیکسل؛ حاشیه: 0 خودکار؛ padding: 0;) div.page-container-inner (حداکثر عرض: 960 پیکسل؛ حداکثر عرض: 1600 پیکسل؛ حاشیه : 0 خودکار؛ بالشتک: 0؛)
همانطور که می بینید، راه حل بسیار ساده و به اندازه کافی همه کاره است، می توان آن را برای هر عنصر بلوکی اعمال کرد.

وقتی سربرگ می سازیم، جدول کلمات، نیاز داریم که هنگام پر کردن سلول ها اندازه آنها تغییر نکند تا جدول حرکت نکند. برای این کار باید نصب کنید اندازه سلول ثابت در جدولکلمه ... نحوه ساخت جزوه در Word را ببینید در مقاله"ایجاد جزوه در Word".
نحوه تغییر ارتفاع ردیف در جدولکلمه.
برای تغییر عرض سطرها، ستون ها، ابتدا باید آنها را انتخاب کنید.
گزینه اول
توصیه می شود در قسمت "تنظیمات صفحه" به تب "Page Layout" و برای قرار دادن در تب "Line" بروید. سایز درسترشته های. در تب "Column" اندازه هر ستون را تنظیم کنید. نحوه سنجاق جدول بهکلمه.
برای جلوگیری از حرکت میز برگه کلمه، در تب "جدول"، دکمه "در اطراف" را فشار دهید. روی دکمه "قرار دادن" کلیک کنید - پارامترهای قرار دادن جدول را پیکربندی کنید.
گزینه دوم.
روی جدول کلیک کنید و در تب "Layout" اندازه سطرها و ستون ها را تنظیم کنید. در قسمت "Cell Size" روی دکمه "AutoFit" کلیک کنید. اگر فشار دهیم " عرض ثابتستون "، سپس عرض ستون با پر شدن سلول تغییر نخواهد کرد. اما، چیز خنده دار این است که در برخی نسخه های Word، یک پنجره کاملاً متفاوت Page Setup. هیچ برگه ردیف و ستونی وجود ندارد.
چگونه ارتفاع و عرض خط را فریز کنیم ستون Word ، در این مورد. ابتدا روی پنل دسترسی سریعدکمه عملکرد "Table Properties" را قرار دهید. فشار دادن دکمه "سفارشی کردن نوار ابزار دسترسی سریع"(دکمه "مثلث با خط تیره"). ما تابع "فرمان های دیگر" را انتخاب می کنیم.

در کادر محاوره ای که ظاهر می شود، روی عملکرد "تنظیمات" کلیک کنید. در بخش پنجره "انتخاب دستورات از:" را تنظیم کنید - "همه دستورات". از لیست، روی فرمان "ارتفاع و عرض سلول" کلیک کنید.

دکمه "افزودن >> را فشار دهید. همه چیز. این دکمه در سمت راست کادر محاوره ای ظاهر می شود. روی "OK" کلیک کنید. در مورد پنل دسترسی سریع در مقاله "باز برنامه مایکروسافتکلمه ".
این دکمه در نوار ابزار دسترسی سریع ظاهر می شود و ویژگی های جدول نامیده می شود. وقتی روی جدول کلیک می کنیم فعال می شود.

جدول را انتخاب کنید، روی دکمه "Table Properties" در تب "Row" کلیک کنید. اکنون ارزش تنظیم ارتفاع خطوط "Auto" را دارد. این بدان معنی است که ارتفاع سلول با تایپ متن بزرگ تغییر می کند.
نیاز داریم ارتفاع ردیف ها را در جدول ثابت کنیدکلمه.
در بخش "ارتفاع ردیف" کادر گفتگو، "دقیقا" را تنظیم کنید. و در خط "Value" عدد ارتفاع خط را قرار می دهیم. اما مقدار به میلی متر نیست. یا ببینید، و در PT. PT یک نقطه است.
1 نقطه = 0.35 میلی متر. ساده تر - ارتفاع ردیف استاندارد در جدول 12pt است. ارتفاع ورق A4 جهت عمودی- 878 pt (29 سانتی متر بدون حاشیه).
بیایید "48 pt" را قرار دهیم. علامت کادر کنار عبارت «Allow line wrapping on را بردارید صفحه بعد».
روی "OK" کلیک کنید. اینجوری معلوم شد

بیایید سلول را پر کنیم.

در اینجا می توانید ببینید که آخرین خط در سلول گنجانده نشده است. اما عرض سلول تغییر نکرده است. ما می‌توانیم به صورت دستی عرض ردیف جدول را با حرکت دادن حاشیه ردیف تنظیم کنیم. مثلا اینجوری

در Word می توانید فرمت فونت، متن، برگه، تصویر، فایل، پسوند فایل (docx، pdf) و غیره را سفارشی کنید. فرمت های Word چیست، چگونه آنها را سفارشی کنیم، مقاله را بخوانید " فرمت ورد ".