Новий макет сітки рідини Dreamweaver CS6

• Може 15, 2024

Якщо ви розробляєте прості веб-сайти або складні CMS, у вас завжди виникає це нагальне питання - чи я роблю все можливе, щоб орієнтуватися на всі типи аудиторій та роздільну здатність екрана? Ну, Dreamweaver^R CS6 має нові функції, що полегшують це завдання.

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

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

1. Просто натисніть Файл - Новий макет сітки рідини з меню.
   
   
2. У діалоговому вікні Новий документ ви побачите за замовчуванням для цієї нової адаптивної веб-сторінки. Ширина фіксується для кожного з різних дозволів екрана.
   
   Мобільний 480px
   Таблиця 768px
   Настільний 1232px
   
   
3. У вас є можливість змінити стандартну кількість стовпців та відсоток ширини стовпців для кожної роздільної здатності екрана. За замовчуванням:
   
   5 колонок для мобільних пристроїв - 91%
   8 стовпців планшета - 93%
   10 стовпців на робочому столі - 90%
   
   
4. У робочій області за замовчуванням може відображатися код та подання дизайну. Як ви бачите в дизайні, новий файл вже має один тег div. Ви можете змінити стандартні ідентифікатори та клас для div на панелі властивостей.
   
   Звичайно, для вашої веб-сторінки знадобиться більше одного діва. Таким чином, ми можемо додати більше знаків для заголовка, навігації, основного, бічного та нижнього колонтитулу.
   
   
5. Щоб додати новий div, виберіть Вставити Fluid Grid Layout Div Tag на панелі Вставити.
   
   
6. У діалоговому вікні ви можете назвати ідентифікатор тегу.
   
   
7. Коли ми додамо всі основні значки для нашої сторінки, ми можемо клацнути та перетягнути їх, щоб змінити їх у межах сітки.
   
   

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

Коли ми зберігаємо наш макет, ми отримуємо один файл HTML5 та CSS3, який буде працювати для всіх трьох роздільних можливостей екрана. Якщо ми заглянемо всередину цих файлів, ми зможемо знайти інформацію про те, як працюють файли, щоб створити нашу адаптивну веб-сторінку.

* Adobe надіслала мені копію цього програмного забезпечення для ознайомлення.

Авторські права 2018 Adobe Systems Incorporated. Всі права захищені. Знімки екрана продуктів Adobe перевидано з дозволу Adobe Systems Incorporated. Adobe, Photoshop, альбом Photoshop, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst та Flash Paper є або є [a] зареєстрованою торговою маркою (ими), або торговою маркою (іми) Adobe Systems Incorporated у США та / або інших країнах.

Відео Інструкція: Adobe Indesign CC 2018 #1. Знакомство с программой || Уроки Виталия Менчуковского (Може 2024).