Перейти к содержимому

  • Блок 3.1 - Работа с графикой на сайте

    Вы узнаете все работу с картинками и изображениями на сайте. Эти знания резко увеличат Ваши возможности в создании сайтов.

    6 занятий в этой категории

    1. Область контента от область браузера

      14 4, 25, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2015_12/567d860ea66bc_3.1.1..mp4.a0487306af9edccfd3a21ac7355c3cf3.mp4 4 До 5 минут Скрыть https://creatura.club/uploads/ Низкая сложность Скрыть

      Здравствуйте. В этом видеоуроке мы познакомимся с режимом Дизайн программы Adobe Muse и более подробно остановимся на Области контента и Области заливки браузера. Открываем программу, создаем новый сайт. Настроек пока никаких делать не будем. Нажимаем «Ок» и попадаем в режим «План программы». Для того чтобы зайти в режим Дизайн страницы необходимо либо 2 раза кликнуть на миниатюре соответствующей страницы в режиме «План программы». Это основной способ. Либо нажать на кнопку «Дизайн» в верхнем меню программы. В этом случае в режиме «Дизайн» у вас откроется главная страница сайта.

      Итак, мы зашли в режим «Дизайн». В этом режиме перед нами появляется намного больше инструментов, кнопок и различных закладок. Слева расположена панель инструментов программы. Сверху – панель основных текущих настроек элементов. Они будут меняться в зависимости от выбранного элемента страницы.

      Справа расположены дополнительные контейнеры с библиотеками элементов, образцами цветов, списком ресурсов сайта и так далее. В режиме «Дизайн» вы будете проводить практически 80% всего времени при создании страниц сайта. Здесь вы будете создавать и размещать на странице различные графические и текстовые элементы: блоки, формы, виджеты. Так же перемещать, группировать их, настраивать их параметры и т. д.

      «Область контента» и «Область заливки браузера». Что же это такое? Давайте сейчас откроем настройки страницы, вы уже знаете, как это делать. Заходим меню «Страница»—«Свойства страницы». И изменим значения отступов слева и справа, чтобы увеличь дополнительное поле вокруг страницы сайта. Поставим 100. Это дополнительное вспомогательное поле, собственно, и есть область заливки браузера. Слева и справа по 100 пикселей. Я нажму «Ок», и пойдем далее.

      Основным рабочим полем страницы является «Область контента». Область контента страницы – это та область, в которой должна размещаться вся основная полезная информация сайта. По сути, эта область и есть ширина страницы. За границами страницы просто бессмысленно размещать какую-либо информацию. Более простыми словами, область заливки браузера – это как бы ваш стол, а Область контента – это лист бумаги, который лежит у вас на столе. Вы же не станете рисовать у себя на столе вместо того, чтобы рисовать на бумаге. Область заливки браузера – это дополнительное и вспомогательное поле.

      Там могут быть размещены только неосновные элементы страницы. Например, фон страницы. Если нам нужно, чтобы он растягивался при просмотре во всю ширину браузера. Если у нас не выделен ни один элемент на страницы, допустим, у нас есть графический блок какой-то, и он у нас выделен. Так вот, когда у нас не выделен ни один элемент на странице, то в верхнем меню у нас есть 2 опции: «Заливка в браузере» и просто «Заливка». Эти 2 опции позволяют нам назначить цвет области заливки в браузере и области контента. Опять же, повторюсь, если у нас не выделен ни одни элемент на странице.

      Заливку в браузере выберем вот таким цветом. Вы видите, что вся страницы закрасилась этим цветом. Это мы как бы раскрасили наш стол. А с помощью «Заливки», обычной «Заливки», закрасим нашу область контента – наш лист бумаги, на котором мы будем размещать все элементы страницы сайта. Кроме этого вы видите еще здесь область, которая в настройках страницы называется «Поля». Поля относятся к области контента, то есть, к нашему листу бумаги, который лежит на столе.

      На этом, я думаю, уже все стало понятно, и данный урок заканчивается. Вам необходимо будет выполнить задания к этому уроку и перейти к следующему.

      Евгений Зубов,

      • 4 комментария
      • 1 403 просмотра

    2. Два способа размещения графики

      16 4, 25, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2015_12/567d877d56562_3.2.1().mp4.1fb1cf144e337910385f5b37b9c701c6.mp4 3 До 5 минут Скрыть https://creatura.club/uploads/ Низкая сложность Скрыть

      Здравствуйте. В данном уроке речь пойдет о 2-х способах добавления и размещения графических элементов на страницу сайта в программе Adobe Muse. 

      Давайте откроем программу, создадим новый сайт. Зайдем в режим «Дизайн» двойным кликом мышки. В программе существует 2 способа добавления графических элементов на станицу. 

      Первый способ: заходим в меню «Файл», выбираем «Поместить». Перед нами выскакивает окошко, в котором мы должны выбрать файл картинки у себя на компьютере. Выбираем картинку и нажимаем «Открыть». При этом курсор примет вид прямоугольника с иконкой картинки. Выбираем место, куда нам нужно ее разместить, и нажимаем левую кнопку мыши. Все, картинку мы вставили. 

      Второй способ, которым мы можем воспользоваться – это открыть картинку на своем компьютере в любой из папок и просто перетащить ее, зажав левую кнопку мышки, в программу Adobe Muse в режиме «Дизайн». Отпускаем левую кнопку мыши, и у нас появляется точно такая же иконка, как и в первом случае. Выбираем место, куда мы хотим разместить данную картинку, и нажимаем левую кнопку мыши. Все, картинка у нас вставлена.

      И в первом, и во втором случае вы можете добавить не одну картинку, а выбрать сразу несколько картинок. 
      Давайте зайдем снова в «Файл», «Поместить» и выберем, например, не одну картинку, а несколько картинок, зажав Shift или Ctrl. Нажимаю «Открыть», и рядом с курсором у нас появляется количество картинок, которое мы выделили для размещения на данном сайте. Нажимаем левой кнопкой мыши – раз, два. И у нас на сайте разместились уже 2 картинки. Вторая картинка у нас большая, она не помещается на страницу сайта. 

      То же самое вы можете сделать обычным перетаскиванием. Если вы откроете файлы у себя на компьютере и выделите здесь несколько картинок, а затем попробуете их перетащить, то вы сразу увидите, что для копирования, для размещения на сайте у вас есть 2 картинки. Отпускаете левую кнопку мыши и точно таким же образом размещаете картинки на сайте.

      На этом данный урок закончен. Из него вы узнали о 2-х способах добавления картинок на сайт в программе Adobe Muse. Вам необходимо будет ответить на вопросы, выполнить задания для того, чтобы перейти к следующим урокам. 

      Евгений Зубов,

      • 1 комментарий
      • 788 просмотров

    3. Поддерживаемые форматы графики

      17 4, 25, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2015_12/567d883280df1_3.2.2.mp4.28e4c9c2be9aadb60a466d09dda302dc.mp4 5 До 10 минут Скрыть https://creatura.club/uploads/ Низкая сложность Скрыть

      Сегодня мы поговорим о поддерживаемых форматах графики в программе Adobe Muse . Программа поддерживает изображение в форматах .swf  .gif  .jpeg  .png  .svg  .psd . Каждый из этих форматов имеет свои особенности и возможности, а также преимущества и недостатки. Первые 2 формата уже довольно устарели, а что касается формата .swf , то это формат для флэш-анимации, векторной графики, видео и аудио. Формат разработан уже довольно давно  в 1995 году. Эти файлы можно открывать с помощью браузера, при этом в нем должен быть установлен специальный модуль Adobe Flash. В настоящее время многие компании продолжают отказываться от использования данного формата в браузерах, поддержке HTML5. Да и сама компания Adobe прекратила поддержку Adobe Flash Professional для создания флэш-анимации.

      Что касается формата .gif , так это формат хранит данные без потери качества, но при этом использует не более 256 цветов. Долгое время был одним из наиболее распространенных форматов в интернете. Сейчас практически уже не используется. 

      Далее формат .jpeg . Это один из самых популярных графических форматов на данный день. Алгоритм формата позволяет сжимать изображение как с потерей, так и без потери качества. Но при этом меняется размер файла. Чем меньше сжатие, тем больше размер. 

      Следующий формат .png Это растровый формат хранения изображений, который был создан как свободный формат для замены gif . Png хранит графическую информацию в сжатом виде, но это сжатие производится без потерь в отличие от jpeg . Основное преимущества перед jpeg  - это поддержка прозрачного фона изображений. Вот вы видие первое изображение в формате .jpeg Здесь заливка и значок телефона. На второй картинке представлена та же картинка, но без заливки.

      Далее третья картинка формата .svg  - масштабируемая векторная графика. Формат поддерживает как неподвижную, так и анимированную интерактивную графику и является векторным форматом. Самым существенным преимуществом данного формата является возможность увеличивать изображение без потери качества. При этом текст являетя текстом, а не изображением, поэтому его можно выделять и копировать. Текст прекрасно индексируется поисковыми машинами.

      Следующий формат .psd  - формат Photoshop Это растровый формат хранения графической информации, который использует сжатие без потерь. Данный формат создан специально для программы и поддерживает все возможности. Данный формат сохраняет слои и папки слоев, поддерживает прозрачность и полупрозрачность, векторные графические элементы и слои программы Photoshop. Изображение может сжиматься без потери качесвта. Для примера мы разместили здесь 4 картинки в различных форматах и также 3 ручки. Сейчас мы перейдем в "Просмотр"в браузере: "Файл" -" Предварительный просмотр " и попробуем увеличить страницу для того, чтобы посмотреть, как будет увеличиваться каждый из форматов.

      Мы видим, что изображение в формате .jpeg с высокой степенью пикселизации. Вторая картинка имеет прозрачный фон, немного более сглаженное изображение, но довольно мутноватое. Следующий формат .svg - мы видим очень четкие границы, то есть наше изображение при увеличении совсем не потеряло в качестве. Последний формат - .psd немного похож на .png но имеет некоторые элементы, слои, также поддерживает прозрачность. Если мы посмотрим немного ниже, там у нас есть еще 3 картинки. Тоже очень хорошо видно, что первая ручка очень искажена, высокая пикселизация, вторая ручка на прозрачном фоне намного более плавная по краям и отсутствует задний фон. Последняя ручка расположена с очень четкими краями, при увеличении масштаба страницы в браузере изображение совершенно не потеряло свое качество.

      Таким образом форматы .swf и .gif лучше уже не использовать. В настоящее время мы рекомендуем использовать форматы  .jpeg  .png  .svg  .psd  На этом мы заканчиваем данный урок. Выполните задание к данному уроку и переходите к следующему уроку.

      Евгений Зубов,

      • 1 комментарий
      • 819 просмотров

    4. Работа с ресурсами сайта

      19 4, 25, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2015_12/567d88d2d17ff_3.2.3.mp4.4bbb8b2d693a75d9b81e5dce61fe6885.mp4 3 До 5 минут Скрыть https://creatura.club/uploads/ Средняя сложность Скрыть

      В этом видео мы поговорим о панели «Ресурсы» в программе Adobe Muse. При создании сайтов в Adobe Muse все добавленные файлы включаются в список на панели ресурсов. На этой панели есть много полезных функций. Чтобы открыть панель «Ресурсы» нужно зайти в программу. У меня здесь уже открыт подготовленный файл с несколькими импортированными картинками. Так вот, чтобы открыть панель «Ресурсы» зайдите в меню «Окно»—«Ресурсы». Или просто щелкните на вкладку «Ресурсы» на боковой панели. Список файлов в панели можно сортировать по имени, по значкам ошибок или по имени страницы, по возрастанию или убыванию. Каждый заголовок работает как кнопка переключения режима сортировки. Вы видите вот такую стрелочку рядом.

      Каждый размещенный в проекте файл имеет ссылку на исходный ресурс, хранящийся на вашем компьютере. Если вы используете одну и ту же картинку на сайте, то они группируются в разворачивающийся список. При этом исходный файл отображается выше, чем его экземпляры.

      Если вы щелкнете правой кнопкой мыши на ресурс, чтобы вызвать контекстное меню, то увидите параметры, которые можно производить с данным файлом. Мы можем, например, перейти к ресурсу, таким образом, у нас ресурс выделяется, картинка, которую мы выбрали, она выделилась, и программа переместилась в точку нахождения этого ресурса. Если мы выберем другой ресурс, например, вот этот, нажмем «Перейти к ресурсу», то программа перескочит именно к этому ресурсу, этой картинки. Мы можем связать картинку заново с местом, где расположена картинка на компьютере, указать место, где расположена картинка. Например, я могу заново указать эту картинку. Мы можем редактировать оригинал картинки. При этом откроется сторонняя программа для редактирования изображения.

      Следующий пункт – это «Показать в проводнике». Мы можем нажать эту функцию, и программа покажет нам, где расположен наш файл у нас на компьютере.

      Следующий пункт – это «Копировать полный путь». Мы можем скопировать в буфер обмена путь к данной картинке у нас на компьютере.

      И последнее – это «Редактировать свойства изображения». Добавить заголовок и альтернативный текст к картинке. Для тех картинок, которые вставлены в программу с помощью «Вставки» и их нет у нас на компьютере, программа показывает вот такой вот значок. Значок означает вставленное изображение. Если же программа потеряла путь к картинке на компьютере, то она будет продолжать данную картинку, но покажет вот здесь красный значок с восклицательным знаком, который будет указывать на то, что программа потеряла путь к изначальному ресурсу, к изначальной картинке. И картинка будет выглядеть так, как сейчас она есть в программе.

      На этом мы заканчиваем наш урок по работе с панелью «Ресурсы» в программе Adobe Muse. Вам необходимо будет выполнить задания и ответить на вопросы, чтобы перейти к следующему уроку.

      Евгений Зубов,

      • 12 комментариев
      • 771 просмотр

    5. Редактирование любой графики

      15 4, 25, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2015_12/567d8a14cd19f_3.2.4.mp4.7f84c3161fb8c28248c053fac7c9ccc4.mp4 4 До 5 минут Скрыть https://creatura.club/uploads/ Средняя сложность Скрыть

      В этом уроке мы рассмотрим редактирование графики в программе Adobe Muse. Давайте сразу перейдем в программу, я уже открыл новый проект, и добавим сюда картинку. «Файл»—«Поместить», возьмем логотип DigitalMakers.

      Какие манипуляции мы можем произвести с данной картинкой? Первым делом мы можем ее увеличивать и уменьшать, потянув за один из квадратиков, расположенных на выделении данной картинки. При этом она будет увеличиваться пропорционально.

      Второе, что мы можем сделать с данной картинкой, это, зажав клавишу Shift, сжать ее или растянуть в нужную сторону. Точно так же, потянув за один из этих значков квадратиков в нужную нам сторону. Если мы будем тянуть за уголок, то мы сможем растягивать эту картинку в горизонтальном или вертикальном направлении одновременно. Я нажимаю Ctrl+Z, чтобы вернуть все назад.

      Следующая манипуляция, которую мы сможем сделать с данной картинкой – это обрезка. Обрезка у нас доступна по зажатию клавиши Ctrl. Зажимаем клавишу Ctrl и точно так же, потянув мышкой за один из элементов выделения, мы сможем обрезать эту картинку до нужных размеров. Скажем, вот так. Нажимаю Ctrl+Z, возвращаю все обратно.

      Нам также доступны еще функции контекстного меню по правой кнопке мыши. Либо мы можем зайти в меню «Редактировать» и здесь у нас будет также доступно несколько функций: мы можем вырезать данное изображение, можем его точно так же вставить, можем вставить на то же место. Если мы нажмем просто «Вставить», она у нас встанет ровно по центру нашего вида. Если же мы нажмем «Вставить на то же место», то картинка встанет на то место, откуда она была вырезана.

      Чтобы удалить изображение, нам нужно его выделить и нажать клавишу Delete.

      Также дополнительные функции доступны нам по контекстному меню. Мы можем вырезать, копировать картинку, вставить, вставить на то же место, вставить как фоновое изображение, выделить картинки по общему признаку фрейма изображения.

      Если у нас расположены на сайте несколько картинок (давайте я добавлю еще одну такую же, например, у нас их две), и мы хотим выделить все картинки на сайте, то мы выделяем картинку, нажимаем на ней правую кнопку мыши и Выделение по общему признаку. У нас выделяются все картинки, которые размещены в программу данным способом. Не именно одинаковые картинки по содержанию, а одинаковые картинки по способу добавления. Все те картинки, которые мы добавляли через «Файл»—«Поместить».

      Далее, для того, чтобы сдублировать картинку, мы можем зажать на картинке левую кнопку мыши и при этом зажать Alt. Таким образом мы сможем дублировать картинку. Отпускаем левую кнопку мыши, отпускаем Alt, и изображение поместилось в данном месте. Чтобы удалить изображение, выделяем картинку и нажимаем Delete. Выделим нашу картинку и нажмем еще раз правую кнопку мыши.

      Мы можем добавить картинку в библиотеку, сделать подгонку, изменить размер картинки, закрепить на странице, зафиксировать, закрепить картинку, чтобы она не выделялась при редактировании остального контента страницы. Также мы можем скрыть картинку в точке остановки, отменить все использованные стили для данной картинки, сделать картинку элементом нижнего колонтитула, редактировать оригинал картинки, прописать свойства изображения, либо заменить изображение другим. Вот столько функций доступно у нас для редактирования графики в программе Adobe Muse.

      На этом данный урок закончен. Выполните задания, ответьте на вопросы и переходите к следующим урокам.

      Евгений Зубов,

      • 5 комментариев
      • 706 просмотров

    6. Параметры картинок

      18 4, 25, 6, 20, 3, 26, 27, 28, 29 4, 6, 32 https://creatura.club/uploads/monthly_2015_12/567d8b477ef9a_3.2.5().mp4.4b5decb1e0447764d81d74a8be976007.mp4 3 До 5 минут Скрыть https://creatura.club/uploads/ Средняя сложность Скрыть

      Здравствуйте.

      В данном небольшом уроке мы рассмотрим основные параметры графики. Некоторые пользователи принудительно отключают показ изображений на web-страницах с целью экономии трафика или при медленном Интернет-соединении. Пользователи также могут просматривать ваш сайт на старых мобильных устройствах. Или, например, у изображения поменялось имя, или вы его удалили с сервера, или при верстке указан ошибочный путь к изображению.

      Во всех этих случаях браузер просто не будет отображать картинку. На ее месте будет отображаться пустое место или рамка. Можно, конечно, это так и оставить, но в программе Adobe Muse есть возможность настройки параметров графических изображений, и вместо пустого пространства на странице показывать текст, который будет выводиться, если невозможно отобразить само изображение.

      Давайте зайдем в программу Adobe Muse. У меня в проекте уже вставлено графическое изображение, картинка через «Файл»—«Поместить».

      Для того чтобы перейти к настройкам параметров изображения вам необходимо нажать правой кнопкой мыши на него и выбрать во всплывающем контекстном меню «Редактировать свойства изображения». Перед вами появится дополнительное окошко «Свойства изображения», где вы сможете заполнить 2 поля: поле «Подсказка», которое предназначено для вывода всплывающей надписи при наведении курсора мыши на изображение, либо на то место, где оно должно быть размещено и «Альтернативный текст». Альтернативный текст нужен нам для описания изображения для поисковых систем и программ чтения с экрана.

      Давайте заполним эти поля. В поле «Подсказка» напишем «Форум создателей сайтов», в «Альтернативном тексте» напишем, например, «digitalmakers.ru». Нажимаем «Ок». И давайте просмотрим теперь, как это выглядит у нас в браузере. Заходим в меню «Файл»—«Предварительный просмотр страницы» в браузере, теперь мы видим, что при наведении курсора мыши на данное изображение у нас возникает подсказка – «Форум создателей сайтов».

      Если бы у нас в браузере были отключен картинки, давайте зайдем в «Настройки»—«Показать дополнительные параметры»—«Настройки контента», пока сделаем настройку, чтобы картинки браузер не показывал. Нажимаем «Готово». Закрываем «Настройки». Перезагрузим страницу. Все. Теперь браузер не показывает картинки, но при наведении мыши на то место, где она должна была бы быть, у нас возникает подсказка – «Форум создателей сайтов». Закрываем браузер.

      Чтобы я хотел еще отметить? Подсказка появляется раньше, чем загружается картинка на сайте, то есть, даже если картинка просто не успела подгрузиться на сайт, то пользователи при наведении курсора мыши уже смогут прочитать информацию о том, что должно быть на этом месте на сайте.

      На этом мы заканчиваем данный урок. Выполните задания к этому уроку и переходите к дальнейшему обучению.

      Евгений Зубов,

      • 1 комментарий
      • 749 просмотров
×