образовательный центр

Мастер-страница (шаблон) и контейнеры.

 
Содержание:

Вся правда о мастер-странице
Работа с мастер-страницей
Ширина страницы
Цвет фона и страницы
Работа со шрифтами
Работа с контейнерами
Выводы и рекомендации

 

 

Вся правда о мастер-странице

 

Мастер-страница (другое название "Шаблон") — ключевое понятие HTML5 редактора A5.ru. Главное, что следует знать про мастер-страницу - это то, что все виджеты, находящиеся на ней неизбежно наследуются и показываются на всех других существующих страницах вашего сайта. И это очень хорошо. 

Дело в том, что на 99% существующих сайтах всегда есть виджеты, являющимися общими для всех страниц. Как правило, это шапка сайта (header), в которой есть логотип, слоган, меню и подвал (footer), в котором дублируется меню и контактная информация. 

Работа с мастер-страницей позволяет быстро создавать качественные сайты. Если раньше вам потребовалось делать правки на всех страницах, то сейчас достаточно поправить лишь в одном месте.

 

Работа с мастер-страницей

 

Итак, на любом нашем шаблоне есть мастер-страница. Вот как она выглядит.

 

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

Все виджеты мастер-страницы показываются на других страницах слегка с прозрачностью. Разумеется, такие виджеты нельзя редактировать, двигать на простых страницах.

 

В списке ваших страниц мастер-страница всегда стоит на первом месте. 

 

Как вы понимаете, мастер-страницу нельзя удалить, также как и переименовать :)

Настройки мастер-страницы находятся там же, где настройки любой другой страницы.

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

 

Ширина страницы

 

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

Примечание. Меняя ширину на мастер-странице, вы меняете ее на всех страницах своего сайта (из числа тех, что наследуют ширину).

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

 

Но, опять же, мы не рекомендуем этого делать — так у вас будет меньше шансов испортить единый вид своего сайта :)

 

Цвет фона и страницы

 

Наши постоянные клиенты (а таких больше 300 000) знают, чем отличается цвет страницы от цвета фона по flash-редактору. Примерно похожая логика используется и сейчас. Цвет фона применяется ко всей видимой области вашего сайта, а цвет страницы только на рабочую область — это та область, на которой находятся все виджеты. 

 

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

 

Работа со шрифтами

 

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

Для того, чтобы включить новые шрифты, нажмите на кнопку и выберете те, что вам понравились.

 

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

 

Работа с контейнерами

 

Собственно ради контейнеров и была задумана сущность мастер-страницы.
Контейнер — логически выделенная область вашего сайта. Например, контейнеры в нашем примере это шапка сайта, основная область и подвал. На картинке ниже стрелками показаны границы контейнеров:

 

Вы можете легко редактировать ширину контейнеров за данные ползунки:

 

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

Это примерно те же ощущение, когда переходишь с ОС Windows PC на OS X Apple MacBook — первый день думаешь, о том как же все неудобно, а затем уже не можешь работать ни на чем другом, кроме MacBook. 

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

Скажем вам честно, в 90% случаях трех горизонтальных контейнеров (как на примере) бывает достаточно, поэтому не стоит злоупотреблять количеством создаваемых контейнеров.

Настройки контейнера находятся в том же контекстном меню.

Откроется окно настроек.

 

Вы можете:

  • • Установить цвет фона контейнера
    Для того, чтобы изменить цвет фона, просто кликните на прямоугольник напротив пункта "Цвет контейнера", после чего появится окошко палитры, где вы сможете выбрать цвет. 


     
  • • Настроить прозрачность фона
     
  • • Выбрать в качестве фона  картику
    Для устанвоки фонового изображение контейнера кликните на квадрат под надписью "Фоновая картинка"


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

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


    В нашем случае мы выберем паттерн из библиотеки фонов. Библиотека фонов, как  и библиотека клипартов доступна в редакторе конструктора для всех.


    Вы также можете настроить параметры отображения изображения. 


    Давайте подробнее разберем, что здесь можно настроить:

    Повторение - загруженная вами картинка будет повторяться по горизонтали, вертикали, а если выберете пункт просто "Повторять", то в обоих направлениях.
    Позиция - изменяет расположение картинки, расположенной на фоне.
    Масштаб - как понятно из названия, данная опция масштабирует изображение, т.е. изменяет его размер. Давайте разберем этот пункт подробнее. Тут есть три варианта выбора.
    "Автоматически" - оставляет размер изображения по умолчанию.
    "Перекрыть" - растягивает изображение на весь экран. Если отношения сторон изображения и экрана не совпадают, то изображение автоматически обрезается. 
    "Вместить" - растягивает изображение на ту часть экрана, которую вы выбрали в пункте "Позиция".
    Отображение - тут можно настроить, будет ли изображение прокручиваться вместе со страницей или будет находится статично на одном месте.
     
  •  • Изменить размер котейера.

 

Выводы и рекомендации по статье

 

  1. Мастер-страница очень крутая и полезная вещь. Главное понять суть, а дальше пойдет, как по маслу.
  2. Все виджеты на мастер-страницы показываются на других страницах.
  3. Виджеты с мастер-страницы нельзя редактировать/перемещать.
  4. Мастер-страницу нельзя удалить/переименовать.
  5. Создать страницу, не наследуемую от мастер-страницы пока нельзя.
  6. Установите одинаковую ширину для всего сайта (в районе 1000 пикселей).
  7. Установите один цвет фона и один цвет страницы для всего вашего сайта.
  8. Постарайтесь использовать минимальное число разных шрифтов на своем сайте, а ненужные отключите в настройках мастер-страницы.
  9. Используйте контейнеры при создании сайта — это очень удобно.