Як використовувати параметри макета на панелі властивостей CSS Dreamweaver

У верхній частині панелі «Властивості конструктора CSS» ви знайдете властивості CSS, які зазвичай використовуються для створення макетів сторінки. Ви використовуєте ці параметри для визначення висоти, ширини, вирівнювання, позиціонування та інтервалу. Ці параметри ідеально підходять для створення макетів сторінок зі стилями класів і ідентифікаторів, щоб виконувати такі дії, як вирівнювання зображень і розташування

теги для створення багатостовпцевих макетів.

Ви можете використовувати параметри макета на панелі властивостей CSS, щоб встановити ці значення:

• Ширина: вкажіть ширину для будь-якого елемента, розміри якого можуть бути вказані, наприклад a

  тег. Параметри розміру: піксель (px), точка (pt), піка (pc), відсоток (%), em, rem, ex і ch.

• Висота: вкажіть висоту для будь-якого елемента, розміри якого можуть бути вказані.

  • Мінімальна та максимальна ширина: вкажіть мінімальну та максимальну ширину для

    теги та інші блокові елементи. Ці параметри корисні, коли ви вказуєте ширину у відсотках від вікна браузера. Наприклад, ви можете встановити ширину дизайну на 80 відсотків вікна браузера, а потім встановити максимальну ширину 1000 пікселів, щоб запобігти розтягуванню макета більше ніж 1000 пікселів.

  • Мінімальна та максимальна висота: вкажіть мінімальну та максимальну висоту для

    теги та інші блокові елементи.

  • Поля: встановіть кількість простору навколо елемента. Поля можна використовувати для створення простору між краєм елемента та іншими елементами на сторінці, наприклад, між зображенням і текстом або між двома

    теги. Ви можете встановити поле окремо для верхнього, правого, нижнього та лівого. Заповнення вимірюється в пікселях, точках, дюймах, сантиметрах, міліметрах, піках, емс, екс та відсотках.

  • Заповнення: встановлює кількість простору в межах елемента. Наприклад, ви можете використовувати відступ, щоб створити простір між межами a

    тег та його вміст. Ви можете налаштувати відступ окремо для верхнього, правого, нижнього та лівого. Заповнення вимірюється в пікселях, точках, дюймах, сантиметрах, міліметрах, піках, емс, екс та відсотках.

    Налаштування відступів та інтервалів між полями може бути складним. Коли ви додаєте поля та відступи до елемента, наприклад зображення або

    тег, ви збільшуєте загальний розмір цього елемента та кількість місця, яке він потребує в макеті.

• Позиція. Параметр «Позиція», доступний у нижній частині розділу «Макет» панелі «Властивості», змінює спосіб розташування елементів на сторінці. Позиціонування може кардинально змінити те, як елементи на рівні блоків (такі як таблиця, список, заголовок, абзац і

  теги) відображаються у браузері.

  • Успадкування: вам не потрібно вказувати цей параметр за замовчуванням. Якщо не вибрано інший параметр, кожен елемент успадковує позиціонування свого батьківського елемента.

  • Статичний: розмістіть вміст на його місці в потоці документа. За замовчуванням усі елементи HTML, які можна розташувати, є статичними.

  • Абсолютний: використовуйте верхню та ліву координати, щоб керувати положенням елемента відносно верхнього лівого кута вікна браузера або верхнього лівого кута елемента, який містить елемент.

  • Виправлено: розташувати елемент відносно верхнього лівого кута браузера. Вміст елемента, який використовує фіксоване позиціонування, залишається незмінним, навіть якщо користувач прокручує сторінку вниз або через неї.

  • Відносний: використовуйте позицію відносно точки, куди ви вставляєте елемент на сторінку, або відносно його контейнера.

    

  • Float: вирівнювання елементів, таких як зображення та

    теги, ліворуч або праворуч від сторінки чи іншого контейнера, що спричиняє обтікання тексту чи інших елементів. Клацніть піктограми в полі Float, щоб вказати такі чотири параметри: Успадкувати, Праворуч, Ліворуч або Немає.

  • Очистити. Запобігайте перекриванню плаваючого вмісту області ліворуч або праворуч або з обох боків елемента. Цей параметр корисний, коли плаваючий елемент, наприклад a

    тег, який використовується для створення бічної панелі, перекриває інший елемент на рівні блоку, наприклад тег, який використовується для створення нижнього колонтитула сторінки.

  • Overflow-x та -y: вкажіть браузеру, як відображати вміст елемента, якщо контейнер, наприклад

    тег, не може вмістити всю висоту або ширину елемента. Варіанти переповнення є

  • Видимий: зберігайте вміст, наприклад зображення чи текст, видимим, навіть якщо він виходить за межі визначеної висоти чи ширини контейнера.

  • Приховано: відріжте вміст, якщо він перевищує розмір контейнера. Цей параметр не передбачає смуг прокрутки.

  • Прокрутка: додайте смуги прокрутки до контейнера незалежно від того, чи перевищує його вміст розмір елемента.

  • Авто: смуги прокрутки відображаються лише тоді, коли вміст контейнера перевищує його межі.

• Відображення: вказує, чи потрібно відображати елемент у браузері або як. Наприклад, ви змінюєте позиціонування невпорядкованого списку з горизонтального на вертикальне, вибираючи «Вбудований» або приховує елемент, роблячи його невидимим, вибираючи «Немає». Ви можете використовувати параметр «Відображення» з мовою сценаріїв, щоб динамічно змінювати відображення елементів.

• Видимість: контролюйте, чи відображатиме браузер елемент. Доступні параметри видимості

  • Успадкування: елемент має видимість елемента, в якому він міститься (за замовчуванням).

  • Видимий: елемент відображається.

  • Прихований: елемент не відображається.

  • Згорнути: для використання з таблицями HTML. Згортання можна використовувати, щоб видалити стовпець або рядок, не впливаючи на решту макета таблиці.

• Z-індекс: контроль положення елемента на Z-координаті, який контролює порядок укладання елементів відносно один одного. Елементи з більшим номером перекривають елементи з меншим номером.

• Непрозорість: контроль рівня непрозорості для елемента від 0,0 (повністю прозорий) до 1,0 (повністю непрозорий). Наприклад, якщо ви введете .5 у поле непрозорості, непрозорість елемента буде зменшено до 50 відсотків.