Перейти к содержимому
  • Блок 2 - Планирование сайта и его просмотр

    Вы узнаете все о управлении страницами сайта. Познакомитесь с шаблонами страниц. Изучите макетную сетку. Научитесь работать с фоном сайта.

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

    1. Главные настройки сайта

      5 4, 25, 6, 20, 3, 26, 27, 28, 29 4, 2, 31, 6, 20, 32, 3 https://creatura.club/uploads/monthly_2015_12/2.1.1_%D0%93%D0%BB%D0%B0%D0%B2%D0%BD%D1%8B%D0%B5_%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B8_%D1%81%D0%B0%D0%B9%D1%82%D0%B0.mp4.ec38afdd0ca506e541b9ebc1f2713803.mp4 3 До 5 минут Скрыть https://creatura.club/uploads/ Низкая сложность Скрыть

      Урок – главные настройки сайта. Этот урок посвящён главным настройкам сайта при создании нового проекта в программе Adobe Muse. Запускаем приложение Adobe Muse,   и перед нами сразу появляется окно приветствия. Для того чтобы нам создать новый сайт,  необходимо нажать на значок "Сайт" в разделе "Новый сайт" окна приветствия, либо зайти в меню "Файл" - "Новый сайт". Перед нами появится окно настроек сайта, где мы видим также небольшой разворачивающийся список с дополнительными настройками. Давайте сразу его откроем. 

      Не пугайтесь большому количеству настроек, сейчас мы рассмотрим все их подробнее. Первый блок настроек касается настройки ширины сайта и разбивки ширины сайта на столбцы. Здесь мы же можем выбрать, каким будет наш макет сайта. Либо он будет с гибким значением ширины, либо с постоянной шириной. Эти два значения отличаются лишь дополнительным параметром "минимальная ширина" в дополнительных настройках сайта. Максимальная ширина страницы сайта устанавливает ширину сайта для всех страниц. По умолчанию стоит 960 пикселей. Столбцы позволяют нам разделить ширину сайта для удобства вёрстки, и при значении два столбца и более нам доступен также параметр "Средник". "Средник" – это расстояние между столбцами. 

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

      В следующем блоке мы можем указать значение полей и отступов сайта. Поля определяют область полезного содержимого на странице сайта. А параметры отступа сайта определяют некое поле вокруг основной области контента и позволяют нам просматривать сайт на фоне браузера. Справа доступна также настройка "Выравнивание сайта". Здесь мы можем выбрать выравнивание сайта по центру или по левому краю. И также есть такой значок, который позволяет редактировать параметры полей либо все вместе сразу, либо отдельно каждое поле, если значок снят. 

      В нижнем блоке можно указать разрешение сайта. Доступные два параметра:  стандартное или High DPI. High DPI – это настройка для мониторов с высоким разрешением. Такие, как Retina компании "Apple". Настройки языка сайта позволяют нам выбрать язык для проверки орфографии и локализации мини-приложения stml  на сайте.  После осуществления всех настроек вы нажимаете на кнопку "Oк" и можете приступать к дальнейшему созданию сайта. А на этом данный урок закачивается. Вам необходимо будет выполнить задания и пройти небольшой тест к этому уроку, чтобы перейти к следующему. 

      • 16 комментариев
      • 7 130 просмотров
    2. Добавление и удаление страниц сайта

      6 4, 25, 6, 20, 3, 26, 27, 28, 29 4, 2, 31, 6, 20, 32, 3 https://creatura.club/uploads/monthly_2015_12/2.1.2_%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B8_%D1%83%D0%B4%D0%B0%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5_%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86_%D1%81%D0%B0%D0%B9%D1%82%D0%B0.mp4.7b08f8ffd568ea7db2bd7304765d6e74.mp4 6 До 10 минут Скрыть https://creatura.club/uploads/ Низкая сложность Скрыть

      Урок добавления и удаления страниц сайта.

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

      Третий орган управления это размер. Он предназначен для уменьшения и увеличения размера миниатюр в режиме план.

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

      Страницы бывают двух видов: страницы верхнего уровня, расположенные в верхнем ряду, и дочерние страницы. Это все страницы, расположенные ниже этого уровня. То есть вот эти три страницы, у нас страницы верхнего уровня, эти две созданные страницы – это наши дочерние страницы. Мы можем создавать дочерние страницы, нажав значок «+» рядом  с миниатюрой страницы, либо, нажав правую кнопку мыши на миниатюре страницы, выбрав создать страницу того же уровня. Либо, нажав правую кнопку мыши и выбрав создать дочернюю страницу. Когда мы нажимаем создать дочернюю страницу, страница появляется снизу. Когда мы нажимаем создать страницу того же уровня, страница появляется на том же уровне, на котором расположена страница, на которой мы нажимаем правую кнопку мыши.

      Вы можете менять структуру своего сайта, просто перемещая миниатюры страниц по уровням или в пределах одного уровня с места на место, зажав левую кнопку мыши на миниатюре и перемещая ее до тех пор, пока рядом с соседней миниатюрой не появится специальная подсветка. Это делается вот так: мы берем миниатюру, тянем и до тех пор, пока не появится специальная подсветка, затем отпускаем кнопку мыши. Таким образом, мы можем перемещать страницу между уровнями, с уровня на уровень, меняя схему своего сайта. Давайте я уменьшу масштаб. Миниатюра самой главной страницы сайта всегда расположена в левом верхнем углу. Эта страница сайта показывается первой, когда кто-нибудь будет заходить на ваш сайт.

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

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

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

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

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

      • 0 комментариев
      • 4 004 просмотра
    3. Свойства отдельных страниц

      7 4, 25, 6, 20, 3, 26, 27, 28, 29 4, 2, 31, 6, 20, 32, 3 https://creatura.club/uploads/monthly_2015_12/2.1.3_%D0%A1%D0%B2%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%B0_%D0%BE%D1%82%D0%B4%D0%B5%D0%BB%D1%8C%D0%BD%D1%8B%D1%85_%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86.mp4.6d18285e813bd174e8c6f1d54abca10a.mp4 5 До 5 минут Скрыть https://creatura.club/uploads/ Низкая сложность Скрыть

      В этом уроке мы поговорим о свойствах отдельных страниц. Давайте откроем программу, мы находимся в режиме "План сайта". Свойства любой страницы в режиме "План" можно вызвать очень просто. Нажимаем правую кнопку "мыши" на миниатюре и выбираем пункт "Свойства страницы". Я пока не буду этого делать, а покажу вам ещё один способ. В других режимах свойства страницы можно вызывать из основного меню "Страница", "Свойства страницы". В режиме "План" этот способ не работает. Поэтому я нажимаю правой кнопкой мыши на миниатюре и выбираю пункт "Свойства страницы". Перед нами появляется вот такое окно. И мы видим, что оно нам уже знакомо.

      Оно почти такое же, как и окно общих настроек сайта при создании нового проекта. Здесь отсутствует пункт выбора "Разрешение", но присутствует пока не активная кнопка "Сброс". Программа Adobe Muse устроена так, что все страницы перенимают свои свойства и настройки из основного шаблона сайта, его общих свойств и настроек. Это как раз те настройки сайта, которые осуществляются при создании нового сайта в программе Adobe Muse. При изменении настроек страницы или применении к ней шаблона основные настройки сайта перестают действовать на данную страницу. Страница как бы приобретает свою индивидуальность, особенность. Так вот, для того, чтобы страница снова приняла основные настройки сайта, в настройках страницы существует кнопка "Сброс".

      Давайте, я сейчас попробую изменить, например, минимальную высоту страницы – поставлю пять тысяч. И мы видим, что кнопка "Сброс" тут же стала активной. Страница приняла свои индивидуальные свойства, с минимальной высотой пять тысяч пикселей. В настройках сайта при этом минимальная высота стоит 500 пикселей. Если я сейчас нажму кнопку сброс, то страница вернёт свои свойства такие же, как и в настройках сайта. А кнопка "Сброс" снова стала неактивной. Далее. В настройках страницы есть три раздела. Первый раздел "Макет" мы уже сейчас только что рассмотрели. Он такой же, как и в свойствах сайта. Поэтому не будем на нём останавливаться подробно.

      Следующий раздел – это раздел «Метаданные». Раздел настроек «Метаданные» предназначен для общего описания страницы сайта, добавления к странице ключевых слов и html-кода при необходимости. Следующий раздел сайта, раздел "Параметры", включает в себя блок "Параметры страницы", блок «Web-шрифты» и блок "Полосы прокрутки в браузере". Здесь вы можете задать имя страницы, которое будет отображаться в плане сайта.

      Далее вы можете указать заголовок страницы, который будет отображаться в строке заголовков в закладке браузера. Флажок установки названия заголовка таким же, как и на странице. Если этот флажок убрать, вы можете писать своё имя заголовка страницы. Имя файла. В настройках главной страницы сайта это поле редактировать нельзя. Главная страница сайта всегда будет называться "index.html". В настройках остальных страниц сайта обязательно необходимо убирать флажок как имя страницы и прописывать здесь имя файла английскими символами без пробелов. Вместо пробелов можно использовать знаки "тире" или нижнего подчёркивания.

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

      Следующий пункт "Параметры меню" предлагает несколько вариантов включения страницы в меню сайта. Включить страницу с гиперссылкой, исключить страницу из меню вообще, либо включить страницу без гиперссылки.

      Следующий пункт "Экспорт страницы". Для главной страницы этот флажок убирать нельзя. Главная страница всегда должна публиковаться на сервере, т.к. она показывается первой при заходе на сайт. Далее у нас настройки набора символов веб-шрифтов, настройка отображения полос прокрутки в браузере автоматически либо всегда. А также есть возможность добавить к странице значок сайта. Блок настроек веб-шрифты и полосы прокрутки в браузере мы рекомендуем оставлять по умолчанию. Если вы захотите добавить значок сайта, то следует помнить, что картинка, которую вы будете добавлять в качестве значка сайта, должна быть квадратной. На этом мы заканчиваем урок "Свойства отдельных страниц".

      Выполните задания к этому уроку, пройдите специальный тест и переходите дальше. Возникшие вопросы задавайте на форуме digitalmakers.ru.

      • 6 комментариев
      • 3 532 просмотра
    4. Что такое шаблоны страниц

      8 4, 25, 6, 20, 3, 26, 27, 28, 29 4, 2, 31, 6, 20, 32, 3 https://creatura.club/uploads/monthly_2015_12/2.1.4_%D0%9F%D0%BE%D0%BD%D1%8F%D1%82%D0%B8%D0%B5_%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D0%BE%D0%B2_%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86.mp4.eccf4e30207b032d90268f410c8b4fa9.mp4 5 До 5 минут Скрыть https://creatura.club/uploads/ Средняя сложность Скрыть

      Следующий наш урок это понятие шаблонов страниц. Открываем программу Adobe News, мы находимся снова в режиме «План сайта». И вторая часть режима «План» находится у нас внизу. Здесь расположены шаблоны. Шаблон является вспомогательным элементом при создании страниц сайта и не входит в состав страниц сайта после публикации. Но он играет очень важную функцию при создании, особенно, многостраничных сайтов в Adobe Muse. Главное назначение шаблона – способствовать единообразному оформлению страниц и ускорить процесс верстки сайта. Шаблоны позволяют быстро применить настройки сразу к нескольким страницам сайта. Причем, при дальнейшем изменении шаблона, изменения произойдут на всех страницах сайта, к которым был применен шаблон.

      Давайте рассмотрим это на конкретном примере. Я создам несколько страниц, нажимая «+» возле миниатюры страницы. Сейчас шаблон А применен ко всем страницам данного сайта. И если я сейчас изменяю шаблон А, например, создам на нем графический элемент в виде блока, то мы увидим, что автоматически этот шаблон, примененным к этим страницам, воздействует на все эти страницы. И на всех этих страницах появляется точно такой же графический блок. Таким образом, если в самом начале создания сайта создать один общий дизайн шаблона, а также включить в него все текстовые и графические элементы, которые являются общими для нескольких страниц. Например, логотип, панель навигации, верхняя, нижняя части сайта и другие элементы, то в последствие, нам не нужно будет создавать заново все эти элементы на каждой странице. Достаточно будет просто применить шаблон к странице.

      Для того чтобы открепить влияние шаблона на страницу, нажимаем правую мыши на миниатюре страницы и выбираем «Шаблоны без шаблона». Т.о., мы видим, что влияние шаблона А на страницу, которая без шаблона, уже не производится. И графического элемента, который есть в шаблоне А, на этой странице уже нет. Давайте удалю применение шаблона из нескольких страниц для наглядности. Точно таким же образом можно снова применить шаблон к странице. Нажимаем правую кнопку мыши на миниатюре страницы сайта, идем в Шаблоны и выбираем Шаблон А. Мы видим, что шаблон А снова применился к данной странице и графический элемент, который есть в шаблоне А, теперь есть и в странице, к которой мы только что применили данный шаблон.

      Применить шаблон к странице можно также простым перетаскиванием миниатюры шаблона на миниатюру страницы. Т.е. мы берем, зажимаем левую кнопку мыши на шаблоне и тащим его на миниатюру страницы до того момента, когда страница подсветится специальным цветом. Отпускаем левую кнопку мыши и видим, что шаблон А применился к данной странице таким способом.

      Что мы можем сделать еще? Давайте я удалю пару страниц. Мы можем создать страницу сразу из шаблона. Для этого мы точно также берем, зажимаем левой кнопкой мыши на шаблоне, на миниатюре шаблона и перетаскиваем его в поле страницы. Мы видим, что загорелся возле страницы вот такой индикатор. Как только он появился, мы отпускаем кнопку мыши и видим, что у нас создалась страница, к которой сразу применен шаблон А. И если мы сейчас нажимаем «Создать новую страницу», находясь возле миниатюры этой страницы, она сразу же будет создавать новую страницу с примененным шаблоном А. Если же к нашей странице не был применен шаблон и мы нажимаем рядом с ней для создания новой страницы на плюсик, то у нас создается страница без применения шаблона. Т.е., свойства страницы, от которой создается дополнительная страница, будет с таким же шаблоном или без шаблона.

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

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

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

      • 8 комментариев
      • 2 974 просмотра
    5. Добавление и удаление шаблонов

      9 4, 25, 6, 20, 3, 26, 27, 28, 29 4, 2, 31, 6, 20, 32, 3 https://creatura.club/uploads/monthly_2015_12/2.1.5_%D0%94%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B8_%D1%83%D0%B4%D0%B0%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5_%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D0%BE%D0%B2.mp4.0e0b3b97c90d56c306a97db6abc064c4.mp4 4 До 5 минут Скрыть https://creatura.club/uploads/ Средняя сложность Скрыть

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

      Вы смотрите наш следующий урок "Добавление и удаление шаблонов страниц".

      Давайте сразу зайдём в программу Adobe Muse, создадим новый сайт, ок. И сразу попадаем в режим «Пана сайта». Как вам уже известно, вид режима "План" разделён на две части. Верхняя часть предназначена для работы с миниатюрами страниц сайта. Нижняя – для работы с миниатюрами шаблонов страниц.

      В этом видеоуроке речь пойдёт о добавлении и удалении шаблонов. По сути, добавление шаблонов осуществляется так же, как и добавление страниц сайта – нажатием на значок "+" возле миниатюры шаблона слева или справа. Через контекстное меню, нажав правой кнопкой мыши на миниатюре шаблона, выбираем "Создать страницу шаблон". Либо заходим в главное меню программы, страница, добавить новую страницу, шаблон. Точно так же, как и со страницами, вы можете менять положение шаблонов, перемещая миниатюры шаблонов влево или вправо, зажав левую кнопку мыши до тех пор, пока не появится специальная подсветка. Шаблоны можно менять местами.

      Так же мы видим, что у каждого шаблона есть подпись "Без шаблона". Что это значит? Это значит, что мы можем применить шаблон "А" к шаблону "Д", скажем так. Вот, например, если у нас есть шаблон "А" и шаблон "Д", то мы можем перетащить шаблон "А" на шаблон "Д" до появления подсветки самой миниатюры. И отпускаем левую кнопку "мыши". И видим, что шаблон "Д", к шаблону "Д" применён теперь шаблон "А". Это видно по надписи снизу. Точно также мы можем применить шаблон "А" и к другим шаблонам. Так же вы можете дублировать шаблоны страниц через контекстное меню, нажав правой кнопкой "мыши" на миниатюре шаблона. И выбираем "Дублировать страницу". Таким образом, создаётся полный дубликат шаблона со всеми его настройками и содержимым. Мы видим, что мы создали шаблон "Д" – копия, и к нему применён шаблон "А". Т.е. шаблон "Д" – копия полностью перенял все настройки шаблона "Д".

      Удаление любого шаблона осуществляется так же, как и удаление страницы – двумя способами. Нажатием на «Х» в верхнем правом углу миниатюры шаблона, либо в контекстном меню по нажатию правой кнопки мыши на шаблоне – удалить страницу.

      Следует помнить, что если вы удаляете страницу сайта, то это практически никак не сказывается на оформлении других страниц сайта. Но если вы удаляете шаблон, который применён к нескольким страницам сайта – то на этих страницах будут удалены все элементы, которые были настроены в шаблоне.

      Давайте откроем новый сайт и рассмотрим это поподробнее. Допустим, у нас есть три страницы, к которым применён шаблон "А". Я создам ещё один шаблон и применю его к двум последним страницам. Т.е. у нас теперь к первой странице применён шаблон "А", и к двум другим страницам применён шаблон "Б". И давайте, я теперь изменю шаблон "Б". Нарисую на нём некий графический блок с заливкой. Пускай будет оранжевый. Мы видим, что автоматический шаблон, настройки шаблона "Б" применились ко второй и третьей странице. И если мы сейчас просто удаляем шаблон "Б", то все настройки шаблона, которые были применены ко второй и третьей странице – тоже удаляются из этих страниц. На этом урок по добавлению и удалению шаблонов закончен.

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

      • 3 комментария
      • 2 962 просмотра
    6. Что такое сетка сайта

      10 4, 25, 6, 20, 3, 26, 27, 28, 29 4, 2, 31, 6, 20, 32, 3 https://creatura.club/uploads/monthly_2015_12/2.1.6_%D0%A7%D1%82%D0%BE_%D1%82%D0%B0%D0%BA%D0%BE%D0%B5_%D1%81%D0%B5%D1%82%D0%BA%D0%B0.mp4.aa154633f4d506e796d1553eb6ecc70b.mp4 8 До 10 минут Скрыть https://creatura.club/uploads/ Средняя сложность Скрыть

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

      Как вы, наверное, уже догадались, речь пойдет о настройке таких параметров, как количество столбцов и величина средника. Естественно, мы не сможем не затронуть понятие максимальной ширины страницы. Именно эти параметры отвечают за настройку сетки. Кстати, если у вас сайт уже создан (допустим, сайт у вас уже создан), настроить сетку сайта вы всегда сможете, зайдя в меню «Файл» – «Свойства сайта». Мы попадаем, в принципе, в такие же настройки. Здесь у нас есть и столбы, и средники, и максимальная ширина страницы.

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

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

      Теперь, как вы видите, наша сетка состоит из 2-х столбцов одинаковой ширины и средника в 20 пикселей. Если мы изменим количество столбцов на 3, то мы получим сетку из 3-х столбцов и уже 2-х средников по 20 пикселей.

      Далее все то же самое. Увеличиваем количество столбцов и автоматически между ними добавляются средники. Каждый средник по 20 пикселей. Следует заметить, что все столбцы создаются одинаковой ширины. Точно так же, как и средники все одинаковой ширины. Притом, если мы сейчас начнем изменять размер средника, то программа автоматически рассчитает и изменит ширину всех столбцов. Вы видите, что ширина столбцов уменьшается, а ширина средника при этом увеличивается. Все происходит равномерно. Если выставим средник равным 0 сейчас, то все столбцы сетки как бы примыкают друг к другу, то есть, расстояние между столбцами как бы равно 0. Мы можем добавлять столбцы до тех пор, пока их ширина не достигнет минимальной ширины в 10 пикселей.

      Как вы видите, максимальная ширина страницы у нас 960, средник у нас 0 и столбцов – 96. То есть каждый столбец у нас занимает ровно 10 пикселей. Но оптимально для сайта размером 960 пикселей использовать сетку, например, из 12 столбцов. При ширине сайта 960 пикселей каждый столбец получается шириной по 80 пикселей. Это при том, если средник равен 0. Если мы средник начнем выставлять больше, то столбцы наши тоже уменьшаются.

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

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

      Второй пункт, который отвечает за сетку – это «Наложение сетки». Сейчас данный пункт отключен, если его включить, то каждый столбец у нас закрашивается вот таким полупрозрачным розовым цветом. Здесь, в принципе, все просто: если пункт отключен, здесь галочки нет; если пункт включен (вот включен пункт «Наложение сетки»), то стоит вот такая галочка напротив него. Отключаем пункт наложения сетки. Хотя, пускай пока останется. Сейчас я вам покажу «Файл» – «Свойства сайта». Смотрите: пункт «Отображение сетки» удобен при использовании сетки со средниками. Когда у нас сетка настроена таким образом, что у нас есть и столбцы, и средники между ними, то использование параметра «Наложение сетки», в принципе, удобно, поскольку их цвета отличаются. Если же мы не хотим использовать средники, то отображение сетки мало чем будет полезно, поскольку все столбцы сольются просто в один розовый цвет, в заливку. Поэтому если мы работаем только со столбцами (нажимаю «ОК»), то нам лучше отключить наложение сетки и включить направляющие. Таким образом, нам будет удобно верстать сайт по данной сетке.

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

      Следует отметить и это очень важно, что сетка сайта является именно вспомогательным инструментом. И все ее элементы: направляющие линии, закрашенные столбцы и средники – не публикуются при выгрузке сайта на сервер. Сетка используется исключительно для удобства работы в программе Adobe Muse при верстке сайта.

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

      • 19 комментариев
      • 3 853 просмотра
    7. Типовые сетки сайтов

      11 4, 25, 6, 20, 3, 26, 27, 28, 29 4, 2, 31, 6, 20, 32, 3 https://creatura.club/uploads/monthly_2015_12/2.1.7_%D0%A2%D0%B8%D0%BF%D0%BE%D0%B2%D1%8B%D0%B5_%D1%81%D0%B5%D1%82%D0%BA%D0%B8_%D1%81%D0%B0%D0%B9%D1%82%D0%B0.mp4.ad217127fc0bd54efa82209c869e5ad1.mp4 6 До 10 минут Показывать https://creatura.club/uploads/monthly_2016_01/Tipovyie_setki_saytov_ot_muse.digitalmakers.ru_zip.2824f530a7f7950090b57e1cd17bf1bc Низкая сложность Скрыть

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

      Давайте я открою программу, создам новый сайт, жму ОК, зайду сюда Файл/Свойства сайта. Количество столбцов сетки сайта подбирается исходя из того, какой именно сайт вы хотите создавать, насколько сжато преподносить информацию на сайте и насколько много будет на сайте мелких элементов, которые нужно будет выравнивать по горизонтали относительно друг друга. Чем большее количество столбцов используется в сетке, тем более сжато будет восприниматься информация на сайте. Что касается ширины сайта, максимальная ширина страницы состоит 960 пикселей. Здесь основной критерий выбора – это ширина экрана устройства, на котором будут просматривать сайт большинство пользователей.

      Ширина сайта должна быть меньше ширины экрана этих устройств. Т.е., если у нас максимальная ширина страницы 960 пикселей, то это значение должно быть, чем ширина экрана устройств, а котором будет просматриваться сайт. Что же касается величины средника, то для создания сайта в Adobe Muse мы в последнее время практически полностью отказались от использования средников. Поэтому, в превалирующем большинстве случаев, мы выставляем его значение на 0 и все типовые сетки, о которых далее пойдет речь, в них средника не будет. Исключение для использования средника могут составлять сетки для создания информационных сайтов или сайтов интернет-магазинов.

      Итак, основные размеры типовых сеток сайта следующие, для ширины сайта 960 пикселей, которые установлено в программе по умолчанию. Оптимальным решением будет использование 12 столбцов. Средник, как я уже говорил, мы выставляем на 0. Поля сайта мы обычно тоже выставляем на 0. Для ширины 1024 пикселя, самым удобным будет создание 16 столбцов. И для ширины 1120 пикселей тоже будет удобным создание сетки сайта с использованием 16 столбцов.

      Для ширины сайта 1200 пикселей это последнее максимальная ширина страницы, которую мы рекомендуем использовать, удобно использовать 20 столбцов. Сайты, построенные с использованием указанных выше типовых размеров сеток, прекрасно будут смотреться, как на стационарных больших мониторах, так и на современных ноутбуках без появления горизонтальной прокрутки страницы. Размер ширины экрана самых популярных современных ноутбуков на сегодняшний день, составляет 1366 пикселей. Максимальный размер ширины типовой сетки из вышеназванных, 1200 пикселей. Как вы видите, это меньше ширины экрана ноутбука.

      Если же вы четко уверены, что сайт будут только на мониторах с относительно большим разрешением экрана, то можете создавать сайты на основе типовых сеток с большей шириной сайта. Например, 1280, 1460, 1920 пикселей. Но эти размеры уже не такие популярные. При том, если у вас самого монитор с маленьким разрешением экрана, это совсем не значит, что вы не должны делать сайты с максимальной шириной страницы больше 1200 пикселей. Если вы четко уверены, что ваш сайт будут просматривать люди на мониторах с большим разрешением, то смело можете делать сайты с большей шириной страницы.

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

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

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

      • 15 комментариев
      • 3 691 просмотр
    8. Особенности режима просмотр

      12 4, 25, 6, 20, 3, 26, 27, 28, 29 4, 2, 31, 6, 20, 32, 3 https://creatura.club/uploads/monthly_2015_12/2.2.1_%D0%9E%D1%81%D0%BE%D0%B1%D0%B5%D0%BD%D0%BD%D0%BE%D1%81%D1%82%D0%B8_%D1%80%D0%B5%D0%B6%D0%B8%D0%BC%D0%B0_%D0%9F%D1%80%D0%BE%D1%81%D0%BC%D0%BE%D1%82%D1%80.mp4.9d97a65d044bfb6a0ddcb73a260392fb.mp4 5 До 5 минут Скрыть https://creatura.club/uploads/ Низкая сложность Скрыть

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

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

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

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

      Другим способом просмотра является просмотр через меню «Файл», «Предварительный просмотр страницы в браузере», либо предварительный просмотр сайта в браузере. Эти две функции отличаются тем, что, нажав предварительный просмотр страницы в браузере, в браузере будет показываться только отдельная страница. Если вы нажмете предварительный просмотр сайта в браузере, то для просмотра выгрузится весь сайт, со всеми его страницами. Давайте нажмем предварительный просмотр страницы в браузере, происходит некий просчет, и мы попадаем в браузер. В данном случае в «Google Chrome», где мы видим точно такую же картину, как мы видели во встроенном браузере программы Adobe Muse.

      Таким образом, у нас есть два способа просмотра страниц создаваемого нами сайта, чтобы оценить дизайн и размещение элементов на странице и проверить работу интерактивных элементов страниц, либо не выходя за пределы программы «Adobe Muse», либо в стороннем браузере. Основные плюсы режима просмотра в программе «Adobe Muse» это то, что нам не нужны сторонние программы просмотра, сторонние браузеры и нам не нужно каждый раз делать экспорт сайта из программы в HTML для того, чтобы просмотреть его в каком-то другом браузере. То есть вот эти две функции, они помогают нам это сделать.

      Так же плюсы в том, что у нас есть быстрая возможность просмотреть и скорректировать работу интерактивных элементов страницы и дизайна в целом, не выходя из программы «Adobe Muse». Следует отметить, что встроенный в «Muse» браузер не всегда корректно отображает элементы, анимацию страниц. Поэтому мы все же рекомендуем использовать для просмотра функцию Файл, Предварительный просмотр страницы или сайта в браузере. Также во время работы вам придется довольно часто переключаться между режимами дизайн и просмотр, поэтому для работы и удобства вы можете использовать горячие клавиши.

      Например, если вы находитесь в режиме «Дизайн» и хотите переключиться на режим «Просмотр, вы можете нажать сочетания клавиш Ctrl+P, если вы используете операционную систему «Windows», либо клавиши command+P, если работаете на «Mac». Когда вы закончили предварительным просмотром, вы можете вернуться снова в режим «Дизайн», кликнув на кнопку вверху панели, либо нажав сочетания клавиш Ctrl+I, либо command+I, если вы на «Mac» работаете.

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

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

      • 4 комментария
      • 2 678 просмотров
    9. Просмотр сайта на разных устройствах

      13 4, 25, 6, 20, 3, 26, 27, 28, 29 4, 2, 31, 6, 20, 32, 3 https://creatura.club/uploads/monthly_2015_12/2.2.2_%D0%9D%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0_%D1%83%D1%81%D1%82%D1%80%D0%BE%D0%B9%D1%81%D1%82%D0%B2_%D0%B4%D0%BB%D1%8F_%D0%BF%D1%80%D0%BE%D1%81%D0%BC%D0%BE%D1%82%D1%80%D0%B0.mp4.f5ad82aee49e505f25ba9e6630a70527.mp4 4 До 5 минут Скрыть https://creatura.club/uploads/ Низкая сложность Скрыть

      Из этого урока вы узнаете некоторые нюансы по настройке устройств для просмотра.

      Заходим сразу файл в Adobe Muse и, допустим, у нас есть готовый сайт, который у нас сверстан в трех версиях. У нас есть компьютерная версия сайта, планшетная версия сайта и версия сайта для телефона. Давайте снова перейдем к версии компьютера. И все дело в том, что разработчики программы очень грамотно продумали свой режим просмотра. Добавили очень интересные функции, о которых пойдет речь далее.

      Используя компьютер или ноутбук для создания сайтов, естественно, мы можем просмотреть создаваемый нами сайт, двумя способами, нажав режим Просмотр для того, чтобы просмотреть сайт во встроенном браузере Adobe Muse либо нажав «Файл» - «Предварительный просмотр страницы в браузере». Тогда мы просматриваем наш сайт в стороннем браузере. Я закрываю.

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

      При том, в режиме просмотра в программе Adobe Muse, у нас есть еще некоторые настройки. Эти настройки распложены вверху, и мы можем выбрать размер окна просмотра. Сейчас у нас стоит размер, такой же, как у iPad, вот этот размер. Мы можем выбрать также различные другие устройства и посмотреть, как будет выглядеть наш сайт на самых топовых популярных устройствах.

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

      Далее есть кнопка «Обновить». Если вы делаете какие-то обновления в режиме «Дизайн» и потом хотите быстро просмотреть то, что у вас получилось, вы нажимаете кнопку «Обновить» для того, чтобы просто обновить данную страницу. И есть еще небольшая Справка. Если вы нажмете на нее, то вам здесь выскочит такая подсказка, что в режиме «Просмотра» не моделируется работа реальных устройств. Чтобы проверить оформление на реальных устройствах, рекомендуется опубликовать проект на временном сайте Adobe Bisiness Catalyst. Это еще одна функция, которую предоставляет компания Adobe, но о ней чуть позже.

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

      Если он находится в горизонтальном положении. Мы можем прокручивать колесико мышки, здесь работают все интерактивные элементы, но этот режим просмотра, опять же, не является полноценным режимом моделирования мобильного устройства. Все моделирование здесь заключается только в том, что у нас меняется размер этого окошка. Мы можем посмотреть, как будет выглядеть на iPhone 6s, iPhone 6s+, Nokia Lumia, Samsung Galaxy S5. И также можем переключаться между режимами.

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

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

      • 7 комментариев
      • 3 907 просмотров
×