Як розташувати елементи в Dreamweaver для створення трьох макетів в одній плавній сітці

Те, що робить плавні макети сітки настільки потужними, так це те, що ви можете змінювати положення та розмір елементів у Dreamweaver, щоб вони розташовувалися по-різному для кожного з трьох макетів, створюючи дизайни, оптимізовані для екранів мобільних пристроїв, планшетів і настільних комп’ютерів. Щоб змінити ширину або положення елемента, ви використовуєте візуальні інструменти Dreamweaver.

Як відредагувати мобільний макет у Dreamweaver

Dreamweaver налаштовує стилі таким чином, щоб вони каскадували кожен з трьох макетів. Це означає, що ви повинні спочатку отримати мобільний дизайн так, як ви хочете. Потім перейдіть до макета планшета та змініть лише ті елементи, які ви хочете по-іншому відображатися на планшеті. Нарешті, перегляньте макет робочого столу. Знову змініть лише ті елементи, які ви хочете відображати інакше.

Щоб відредагувати мобільний макет, дотримуйтесь цих інструкцій.

Виберіть параметр Mobile Size внизу робочої області.

Область робочої області змінюється, щоб відобразити сторінку в мобільному попередньому перегляді, відформатовану з відповідним набором стилів.

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

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

Ви можете копіювати та вставляти текст, а також застосовувати теги HTML і форматування CSS.

Виберіть елемент в області дизайну.

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

Створюйте, редагуйте та застосовуйте стилі до тексту та зображень, як і в будь-якому іншому дизайні сторінки в Dreamweaver.

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

Як відредагувати макет планшета в Dreamweaver

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

Щоб відредагувати макет планшета, дотримуйтесь цих інструкцій.

Виберіть параметр «Розмір планшета» у нижньому правому куті робочої області.

Область робочої області змінюється, щоб відобразити сторінку в попередньому перегляді планшета, відформатовану за допомогою відповідного набору стилів.

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

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

Якщо ви перетягуєте маркер будь-якого елемента плавної сітки зліва направо, ви додаєте простір на полях, що змушує елемент залишатися праворуч від макета. Якщо ви перетягуєте маркер справа наліво, ви змінюєте розмір елемента.

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

Елемент рухається вгору та вирівнюється поруч із елементом над ним.

Щоб перемістити елемент вниз, клацніть стрілку Початок нового рядка.

Примітка. Клацніть кожну з чотирьох піктограм, щоб приховати елемент, перемістити його вгору або вниз, скопіювати або видалити.

Як відредагувати макет робочого столу в Dreamweaver

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

Щоб відредагувати макет робочого столу, дотримуйтесь цих інструкцій.

Виберіть параметр «Розмір робочого столу» у нижньому правому куті робочої області.

Робоча область змінюється, щоб відобразити сторінку в попередньому перегляді на робочому столі, відформатовану відповідним набором стилів.

Виберіть стрілку «Поміняти місцями» посередині будь-яких двох елементів, щоб змінити положення двох елементів.

Елементи Article1 і Article2 можна поміняти місцями, просто клацнувши стрілку «Поміняти місцями» між ними.

Відформатуйте текст, зображення та інші елементи за бажанням для оформлення робочого столу.

Доступні всі інші параметри візуального форматування, описані в макеті планшета.

Виберіть «Файл»→ «Зберегти все», щоб зберегти всі файли в макеті плавної сітки.

Коли ви редагуєте макет плавної сітки, ви вносите зміни до файлу HTML, а також до зовнішньої таблиці стилів. Використання параметра «Зберегти все» гарантує, що ви зберегли всі необхідні файли перед їх попереднім переглядом або публікацією сайту на веб-сервері.

Як перемикатися між макетами в Dreamweaver

Рекомендується розробляти плавні макети сітки в такому порядку: спочатку мобільна версія, потім версія для планшета і, нарешті, версія для настільних комп’ютерів. Однак ви можете перемикатися між цими трьома макетами, уточнюючи свої проекти.

Пам’ятайте про кілька загальних правил і практичних порад:

• Макети плавної сітки створюються за допомогою медіа-запитів, які діють як роздільники між кожним із наборів стилів, які форматують макети для мобільних пристроїв, планшетів і настільних комп’ютерів.

• Коли ви редагуєте стилі, ви повинні подбати про те, щоб редагувати стилі, які відповідають макету, з яким ви хочете працювати.

• Якщо ви переглянете відповідні стилі, які автоматично створюються в режимі перегляду коду, ви побачите, що ширина та інші розміри вказані до четвертої десяткової коми, наприклад, ширина: 48,2758%. Якщо ви зміните ці числа в режимі перегляду коду, Dreamweaver більше не налаштовуватиме їх автоматично.

• Коли ви створюєте стилі, які хочете застосувати до всіх трьох макетів, спочатку виберіть Any Media на панелі @Media на панелі CSS Designer,