Ширина сайта в adobe muse
Обновлено: 07.07.2024
Начальная настройка сайта в Adobe Muse СС 2015.1
Начальная настройка сайта.
Этот видеоурок у нас больше для новичков, хотя, может быть, и продвинутые пользователи программы Adobe Muse смогут найти в нем дополнительную полезную информацию. Урок посвящен настройке сайта, при создании нового сайта в программе Adobe Muse в версии 2015.1.
Начальная настройка сайта. Гибкость.
При создании нового сайта у нас в этой версии появляется новое меню настроек, которое выглядит немного иначе, хотя множество настроек в них те же самые. Давайте сразу приступим. Здесь у нас первым делом в первом блоке открывается вот такое миниатюрное окошко настроек, и мы здесь можем выбирать либо «Гибкое значение ширины» либо «Постоянную ширину сайта». Ранее в программе можно было создавать сайты только с постоянной шириной. В версии 2015.1 появилось значение «Гибкое значение ширины». Мы теперь можем делать сайты с адаптивной резиновой версткой.
Начальная настройка сайта. Ширина и высота сайта.
Следующее окошко это «Максимальная ширина страницы» сайта. Оно говорит само за себя, устанавливается в пикселях и по умолчанию равно 960 пикселям. Это значение на сегодняшний день является оптимальным для множества устройств. «Столбцы» и «Средник» в данных настройках предназначены у нас для установки сетки сайта для удобства верстки. Здесь мы можем установить количество столбцов, например, 12 и установить «Средник». Средник – это расстояние между столбцами.
Далее у нас идут дополнительные настройки, раскрыв которые мы получаем еще дополнительные несколько полей. Для «Гибкого значения ширины» мы устанавливаем также «Минимальную ширину» сайта точно также в пикселях. Ориентируясь на минимальное устройство, на котором будет просматриваться данный сайт. В окошке рядом вы выстраиваем «Минимальную высоту» страницы. При настройке 500 пикселей, высота страницы не может быть больше 500 пикселей. Все очень просто.
Начальная настройка сайта. Настройка полей и отступов.
Далее идут настройки «Полей» для того, чтобы немного отгородить основной контент сайта сверху, снизу, слева и справа. Мы можем редактировать эти значения все вместе, либо отдельно, если снимем значок замочка, тогда мы можем редактировать их отдельно. Далее мы редактируем значения «Отступов». Отступы нужны нам для визуализации того, как будет смотреться страницы нашего сайта на фоне браузера. Для этого мы выставляем здесь еще некоторые значения.
Например, отступ сверху 20, снизу 20 поставим и слева тоже, например, поставим 20 пикселей. Здесь вы можете выставить и 50, и 100 – это уже как вам будет удобнее. Дополнительно есть такая настройка, которая выравнивает все содержимое либо «По центру» либо выравнивает «По левому краю» автоматически. В большинстве случаев основной контент имеет смысл выравнивать по центру, вторая опция используется довольно-таки редко.
Начальная настройка сайта. Разрешение графики и язык сайта.
Ниже идет блок настроек «Разрешение» сайта. По умолчанию стоит «Стандартное», вы также можете выставить значение «HDPI» для дисплеев с высоким разрешением, если вы ориентируетесь на то, что ваши пользователи будут просматривать ваш сайт на высококачественных устройствах с высоким разрешением просмотра.
В списке рядом вы сможете выбрать «Язык» сайта для проверки орфографии и локализации мини-приложений программы. Обычно это касается мини-приложений для соцсетей. Кнопки мини-приложений будут либо на русском языке, либо на другом языке, который вы выберете.
Начальная настройка сайта. Нижний колонтитул (футер).
Ниже стоит флажок «Фиксировать нижний колонтитул». Если мы уберем этот флажок, то элементы нижнего колонтитула будут размещены прямо на странице. Если этот флажок стоит, тогда элементы нижнего колонтитула будут располагаться в отдельном блоке. Для того, чтобы создать сайт нажимаем кнопку «ок» .
Начальная настройка сайта. Просмотр настроек.
Если мы сделаем сейчас кое-какую заливку браузера и сделаем заливку страницы, то вы увидите, что вот это у нас область браузера – область рабочего стола, на котором лежит лист нашего сайта. И уже на этом листе мы располагаем весь контент: картинки и текст для сайта.
На этом все, дорогие друзья. На этом урок закончен. Надеюсь, вы нашли в нем много полезного. Подписывайтесь на мой канал, ставьте лайки и пишите комментарии внизу как обычно. А на этом я прощаюсь с вами. До следующих видеоуроков!
Начните работу в Adobe Muse. Узнайте, как работать с файлами .muse, настраивать параметры страниц, добавлять значки сайта и многое другое.
После входа в приложение запускается рабочая среда Adobe Muse. Отобразится экран приветствия Adobe Muse. Выполните одно из следующих действий:
- Нажмите «Создать новый», чтобы создать сайт.
- Нажмите «Открыть» и перейдите к существующему файлу .muse на вашем компьютере.
При выборе пункта для создания нового сайта появится диалоговое окно «Новый сайт». Выберите параметр «Гибкое значение ширины», чтобы включить адаптивный макет, или параметр «Постоянная ширина», чтобы включить альтернативный макет. Окно содержит поля, позволяющие настроить максимальную ширину страницы, столбцы и значение средника.
Настройки можно изменить в любое время в меню «Файл» > «Свойства сайта».
По окончании нажмите кнопку «ОК», чтобы закрыть диалоговое окно.
В верхней части отображаются ссылки на различные разделы интерфейса: «План», «Дизайн» и «Опубликовать».
Более подробную информацию об использовании интерфейса приложения и проектировании веб-сайтов с помощью Adobe Muse см. в руководствах «Начало работы с Adobe Muse» и «Создание первого веб-сайта с помощью Adobe Muse».
При разработке веб-сайтов в других приложениях, таких как Dreamweaver, вы создаете на компьютере папку, содержащую вложенные папки с файлами всего содержимого сайта. Управление всем набором элементов и обеспечение правильной работы всех ссылок сайта может представлять сложности.
Также можно создать файл .muse и опубликовать временный сайт. А затем предоставить коллегам общий доступ к файлу .muse. Они могут открыть его, выбрав меню «Файл» > «Сохранить как», и вносить изменения в свою копию, в то время как вы будете продолжать работать со своей копией. При этом изменения коллег будут сохраняться в новом опубликованном ими временном сайте. Однако при таком рабочем процессе две версии сайта не будут синхронизированы — ваша версия файла .muse не будет обновляться изменениями, внесенными коллегами, и наоборот.
При каждом внесении значительных изменений в существующий веб-сайт рекомендуется всегда сохранять копию файла .muse с помощью меню «Файл» > «Сохранить как». При создании нового файла .muse немного измените его имя и храните все копии файла .muse в одной папке на компьютере. Таким образом, если клиенту больше понравится первоначальная версия сайта, вы всегда сможете открыть соответствующий файл .muse с предыдущим дизайном и опубликовать его, чтобы вернуть сайт к прежнему виду.
Также рекомендуется чаще сохранять файл .muse во время работы. В случае сбоя приложения Adobe Muse при его следующем запуске обычно открывается восстановленная версия файла .muse с последними изменениями. В этом случае сразу сохраните восстановленную версию файла .muse, а затем приступайте к редактированию. Обязательно сохраняйте файлы .muse в безопасном месте и создайте их резервные копии, поскольку каждый файл содержит целый веб-сайт. Если вы потеряете файл .muse и у вас не будет резервной копии, вы не сможете восстановить файл .muse, загрузив файлы сайта, размещенные на сервере.
Большинство веб-дизайнеров предпочитают сохранять файлы .muse с описательными именами, например my_site_v1.muse и my_site_v2.muse. Также в имя файла .muse можно добавить дату его создания, чтобы было легче найти более старую версию, например my_site_2012-4-13.muse и my_site_2012-4-30.muse. Называть файлы можно любым удобным для вас способом.
Выполните следующие действия, чтобы создать новый сайт и определить свойства сайта.
Улучшенные функции Adobe Muse CC 2014.3 | Февраль 2015 г.
Adobe Muse теперь поддерживает дисплеи HiDPI, работающие под управлением Windows. При использовании устройств HiDPI под управлением Windows вы заметите значительное повышение четкости интерфейса Adobe Muse.
HiDPI является аббревиатурой High Dots Per Inch. Этот термин служит для обозначения экранов с высокой плотностью пикселей или просто с высоким разрешением. Благодаря такой плотности пикселей текст и графика отображаются с более высокой степенью детализации, чем на обычных дисплеях. Например, дисплеи Retina компании Apple, которыми оснащаются устройства iPhone, iPad, iPod touch, некоторые устройства под управлением Windows и многие другие, позволяют отображать текст и графику в высоком разрешении.
В приложении Adobe Muse можно создавать версии сайтов, которые будут отображаться на экранах с высоким разрешением (HiDPI), таких как дисплеи Retina компании Apple.
Воспользоваться преимуществами HiDPI в приложении Muse очень просто.
- Установите для параметра разрешения значение HiDPI
- Создайте изображения, размер которых будет, по крайней мере, в два раза больше того, который используется для их отображения на сайте
При отправке или экспорте версии HiDPI сайта из приложения Muse генерируемый код будет включать как обычные, так и увеличенные в 2 раза изображения, а также будет автоматически определять, какие изображения следует использовать при просмотре сайта на дисплее HiDPI или на стандартном дисплее.
В меню выбора разрешения в диалоговом окне нового сайта имеется возможность выбрать стандартное разрешение или HiDPI (высокое разрешение).
Настройку разрешения можно изменить после создания сайта, выбрав пункт меню Файл > Cвойства сайта .
Чтобы реализовать в своем сайте поддержку всех возможностей HiDPI, в ресурсах сайта должно храниться достаточно данных для их отображения в высоком разрешении. Для отображения в формате HiDPI размер ресурса должен не менее чем в два раза превышать размер, в котором он будет отображаться на сайте.
Создать изображения увеличенного размера достаточно просто. Для этого размер такого ресурса должен не менее чем в два раза превышать свой размер, в котором он будет отображаться на экране. Например:
При помещении ресурса HiDPI на холст веб-страницы приложение Adobe Muse оптимизирует такое изображение, уменьшая его размер до 50%. Это позволяет не только упростить работу над дизайном сайта, но и сделать ее более эффективной. На панели «Ресурсы» такие изображения помечаются значком «2x». Обратите внимание, что Adobe Muse сохраняет данные исходного ресурса, чтобы отображать его с высокой плотностью пикселей при просмотре на экране HiDPI. Растрированный текст, так же как и эффекты, выходные данные которых являются изображениями, будет автоматически генерироваться приложением Adobe Muse в размере 2x и в стандартном размерах при публикации или при экспорте.
Чтобы убедиться в том, что ресурсы имеют размер 2x (т. е. содержат достаточно данных для отображения в высоком разрешении), откройте панель «Ресурсы» ( Окно > Ресурсы ). Если в ресурсе хранится достаточно данных, рядом с ним отображается значок «2x». Если такой значок отсутствует, то в ресурсе нет достаточно данных для отображения в высоком качестве и он будет отображаться в стандартном разрешении.
Экспорт изображений HiDPI
В особых случаях Adobe Muse не экспортирует изображение в высоком разрешении, т. е. изображение с данными 2x. Когда масштаб изображений изменяется для заполнения по размерам контейнеров (например, для страниц с фоновыми изображениями, слайд-шоу, отображаемых во весь экран и т. д.), приложение Adobe Muse не экспортирует версию HiDPI такого изображения при публикации сайта. В частности, в указанных ниже сценариях экспортируется только стандартная версия изображения.
- Ширина 100%: По размеру/масштабировать с заполнением
- Полноэкранные слайд-шоу: По размеру/масштабировать с заполнением
- Фоновое изображение для окна браузера или страницы: По размеру/масштабировать с заполнением
Благодаря дисплеям HiDPI посетители сайта могут просматривать графическое веб-содержимое высочайшего качества, используя больше данных изображения. Размер сайта с увеличенными в 2 раза изображениями в четыре раза превышает размер сайта с изображениями стандартного разрешения. Для просмотра изображений HiDPI посетителям требуется загружать в четыре раза больше данных. Чтобы ускорить отображение сайтов HiDPI, приложение Muse экспортирует как ресурсы HiDPI, так и ресурсы стандартного разрешения. Сначала загружаются ресурсы стандартного разрешения, тогда как ресурсы HiDPI загружаются постепенно поверх своих стандартных версий.
Несмотря на то что подход с постепенной загрузкой ресурсов удобен для многих посетителей сайта, это может оказаться проблематичным для тех, кто использует тарифный план, учитывающий объем загружаемого трафика или ограниченное подключение либо для пользователей, для которых установлены квоты на загрузку содержимого из Интернета. Для таких посетителей целесообразно добавить на сайт виджет с кнопкой включения и отключения режима HiDPI. Если на странице имеется такая кнопка, то сначала загружается версия страницы в стандартном разрешении, и кнопка HiDPI будет отображаться в выключенном положении. После нажатия посетителем кнопки HiDPI для всех страниц, на которых она имеется, начнется загрузка изображений HiDPI. Это будет продолжаться до тех пор, пока посетитель сайта не отключит режим HiDPI, не закроет браузер или не очистит кэш файлов cookie. При просмотре страниц, на которых нет кнопки включения и отключения режима HiDPI, на дисплеях HiDPI или Retina всегда будут загружаться изображения HiDPI. При просмотре сайта на обычном дисплее эта кнопка будет недоступна, и загружаться будут только изображения в стандартном разрешении.
В этом уроке вы научитесь создавать, настраивать и сохранять новый проект сайта в программе Adobe Muse. Узнаете об особенностях настройки проекта в программе Adobe Muse. Узнаете об основных настройках сайта для удобства работы и правильного отображения на большинстве различных устройств.
Это просто потрясающая программа по созданию подписных страниц, посадочных страниц, лэндинг-пэйдж, портфолио, презентаций, несложных продающих мини-сайтов, вебинарных комнат и т.д.
Программа не требует особых знаний языков программирования, имеет понятных, интуитивный и минималистичный интерфейс и представляет собой, по большей части, графический редактор веб-страниц.
Свежую версию программы Adobe Muse вы всегда можете скачать бесплатно с официального сайта компании Adobe и пользоваться ей в течении 30 дней без каких-либо ограничений. По истечении 30 дней для дальнейшего использования вам все же придется купить эту замечательную программу.
Начало. Создание нового сайта.
Итак, приступим. Это наш первый урок, в котором мы рассмотрим вопросы по созданию и настройке проекта. Открываем программу Adobe Muse, заходим в меню File -> Новый сайт.
Перед нами открылось окно, в котором программа предлагает нам настроить макет и содержимое сайта.
Именно в данном окошке мы и будем делать начальную настройку сайта.
Настроки проекта. Выбор Макета сайта.
Выбираем начальный макет, который зависит от устройства, для которого мы хотим создать сайт. Это может быть компьютер, планшет или телефон. Я буду создавать макет для персонального компьютера, поэтому оставляю здесь значение по умолчанию. Забегая вперед, скажу, что после того, как вы полностью создадите один из начальных макетов, вы сможете сделать макет для двух других устройств на основе уже созданного, что конечно очень удобно.
В данном примере я задам значение в 1020 пикселей. Минимальная высота страницы зависит от того, насколько минимально длинной вы хотите ее сделать. Высота страницы может быть в один экран компьютера, например, 1080 пикселей при формате экрана Full HD или 7000 или 9000 пикселей, если у вас длинная продающая страница. Здесь мы выставляем именно минимальное значение. Если наша страница по ходу верстки окажется больше, то этот параметр автоматически увеличится на нужную величину. В любой момент вы сможете этот параметр изменить, вернувшись к настройкам проекта. Тут все зависит только от ваших предпочтений. Сейчас я выставляю значение в 1080 пикселей, так как считаю, что страницы моего сайта должны быть размером минимум в один экран формата Full HD.
Мы переходим к настройке полей и отступов. С настройкой полей и отступов все очень просто. Для удобства и наглядности верстки я расставляю все значения на 0 пикс.
Далее переходим к параметрам столбцов. Эти параметры нужны нам для удобства верстки. Я выставляю средник 0 пикс., количество столбцов 12, ширина 85. Как видим, ширина посчиталась программой автоматически, как деление 1020 пикс на 12.
Сохранение проекта.
Давайте сохраним наш проект: зайдем в меню File -> Сохранить сайт, выберем, куда сохранить, назовем его Website1. Так пускай и будет по умолчанию. Сохраним куда-нибудь себе на жёсткий диск до следующего урока.
В этом уроке мы рассмотрели основные настройки проекта в программе Adobe Muse. В следующем уроке мы рассмотрим основные возможности программы по работе с блоками и изображениями.
Читайте также: