Смена внешнего вида сайта. Кастомизация шаблонов сайта

т       

Сайт создан по технологии «Конструктор сайтов e-Publish»

 

Смена внешнего вида сайта. Кастомизация шаблонов сайта

Выберем пункт меню «Проект» - «Свойства проекта».

 

 

Выберем пункт меню «Проект» - «Свойства проекта».

 

 

 

Появится окно «Свойства проекта». Мы находимся на вкладке «Основные параметры».

 

 

Появится окно «Свойства проекта». Мы находимся на вкладке «Основные параметры».

 

 

 

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

 

 

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

 

 

 

Выбрав из выпадающего списка «Основная страница сайта», можно сменить страницу, с которой будет стартовать сайт.

 

 

Выбрав из выпадающего списка «Основная страница сайта», можно сменить страницу, с которой будет стартовать сайт.

 

 

 

В поле «Ключевые слова» необходимо ввести ключевые слова (фразы), которые обрабатываются поисковыми роботами, такими как Google, Yandex, Rambler и т.п.

Не стоит вводить более 7 ключевых слов.

 

 

В поле «Ключевые слова» необходимо ввести ключевые слова (фразы), которые обрабатываются поисковыми роботами, такими как Google, Yandex, Rambler и т.п.

Не стоит вводить более 7 ключевых слов.

 

 

 

Перейдем на закладку «Дополнительные параметры».

 

 

Перейдем на закладку «Дополнительные параметры».

 

 

 

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

Можно включить перелистывание страниц страниц проекта. Для этого необходимо поставить галочку напротив пункта «Кнопки последовательного перехода по страницам».

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

Можно включить перелистывание страниц страниц проекта. Для этого необходимо поставить галочку напротив пункта «Кнопки последовательного перехода по страницам».

 

Переключатели между страницами могут быть текстовыми (пометка напротив пункта «Текстовые переключатели» установлена по-умолчанию).

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

Переключатели между страницами могут быть текстовыми (пометка напротив пункта «Текстовые переключатели» установлена по-умолчанию).

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

 

Поставим пометку напротив пункта «Графические переключатели», можно текстовые переключатели заменить на небольшие изображения.

Поставим пометку напротив пункта «Графические переключатели», можно текстовые переключатели заменить на небольшие изображения.

 

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

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

Поставим изображения на переключатели. Щелкнем по первой кнопке «Вставка изображения» для пункта «Перейти на страницу назад»

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

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

Поставим изображения на переключатели. Щелкнем по первой кнопке «Вставка изображения» для пункта «Перейти на страницу назад»

 

В окне проводника укажем изображение и щелкнем по кнопке «Открыть» (не забывайте пользоваться функцией «Эскизы страниц»).

 

 

В окне проводника укажем изображение и щелкнем по кнопке «Открыть» (не забывайте пользоваться функцией «Эскизы страниц»).

 

 

 

Изображения переключателя добавилось в окно просмотра.

 

 

Изображения переключателя добавилось в окно просмотра.

 

 

 

Подобным образом добавим остальные переключатели.

 

 

Подобным образом добавим остальные переключатели.

 

 

 

В случае, если необходимо сделать версию сайта для печати, необходимо поставить галочку напротив пункта «Кнопка печати страницы».

В случае, если необходимо сделать версию сайта для печати, необходимо поставить галочку напротив пункта «Кнопка печати страницы».

 

Здесь тоже можно выбрать текстовой будет кнопка печати

 

 

Здесь тоже можно выбрать текстовой будет кнопка печати

 

 

 

или графической.

или графической.

 

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

Снимем галочку напротив пункта «Кнопка печати страницы».

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

Снимем галочку напротив пункта «Кнопка печати страницы».

 

Для случаев, когда страницы сайта достаточно большие есть функция «Кнопка перехода на верх страницы».

Поставьте галочку напротив пункта «Кнопка перехода на верх страницы».

 

Для случаев, когда страницы сайта достаточно большие есть функция «Кнопка перехода на верх страницы».

Поставьте галочку напротив пункта «Кнопка перехода на верх страницы».

 

 

Выберите текстовая она будет или графическая.

Выберем графическую, укажем изображения.

 

 

Выберите текстовая она будет или графическая.

Выберем графическую, укажем изображения.

 

 

 

И поставим графические переключатели.

 

 

И поставим графические переключатели.

 

 

 

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

Перейдем на закладку «Дизайн сайта»

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

Перейдем на закладку «Дизайн сайта»

 

В левой части окна находится список всех доступных дизайнов.

 

 

В левой части окна находится список всех доступных дизайнов.

 

 

 

А в правой их привью.

 

 

А в правой их привью.

 

 

 

Здесь вы можете выбрать другой сайта.

 

 

Здесь вы можете выбрать другой сайта.

 

 

 

Перейдем на закладку «Фоны».

 

 

Перейдем на закладку «Фоны».

 

 

 

На этой закладке мы можем установить различные фоны для нашего сайта.

 

 

На этой закладке мы можем установить различные фоны для нашего сайта.

 

 

 

Добавим фоны на наш сайт.

Для этого поставим галочку напротив пункта, указующего куда добавляется фон.

Например «Добавить фон за страницей».

Добавим фоны на наш сайт.

Для этого поставим галочку напротив пункта, указующего куда добавляется фон.

Например «Добавить фон за страницей».

 

Щелкнем по кнопке «Вставка изображения».

 

 

Щелкнем по кнопке «Вставка изображения».

 

 

 

И, в открывшемся окне проводника, выберем изображение (на забывайте пользоваться функцией «Эскизы страниц») и щелкнем по кнопке «Открыть».

 

 

И, в открывшемся окне проводника, выберем изображение (на забывайте пользоваться функцией «Эскизы страниц») и щелкнем по кнопке «Открыть».

 

 

 

Изображение отобразилось в окне редактора.

 

 

Изображение отобразилось в окне редактора.

 

 

 

Для фонового изображения вы можете выбрать выравнивания.

По горизонтали.

 

 

Для фонового изображения вы можете выбрать выравнивания.

По горизонтали.

 

 

 

И вертикали.

 

И вертикали.

 

 

Так же можно задать параметры повторения фона.

 

Так же можно задать параметры повторения фона.

 

 

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

Например «Gray». Дизайн сайта имеет границы, и окружающий его белый фон можно заменить на изображение.

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

Например «Gray». Дизайн сайта имеет границы, и окружающий его белый фон можно заменить на изображение.

 

На практике это будет выглядеть так:

 

На практике это будет выглядеть так:

 

 

Аналогичным образом установим фоны в заголовок сайта и на страницу.

 

Аналогичным образом установим фоны в заголовок сайта и на страницу.

 

 

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

Обратите внимание на то, что в заголовок сайта мы добавили неоднотонное изображение.

 

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

Обратите внимание на то, что в заголовок сайта мы добавили неоднотонное изображение.

 

 

А для фона на странице – однотонное.

 

А для фона на странице – однотонное.

 

 

Щелкнем по кнопке «ОК» и посмотрим, что у нас получилось.

 

Щелкнем по кнопке «ОК» и посмотрим, что у нас получилось.

 

 

Фоны отобразились на странице сайта.

 

Фоны отобразились на странице сайта.

 

 

Текст заголовка сайта, расположенный на неоднотонном изображении плохо читаем.

 

Текст заголовка сайта, расположенный на неоднотонном изображении плохо читаем.

 

 

А текст, расположенный на однотонном фоне читается без проблем.

 

А текст, расположенный на однотонном фоне читается без проблем.

 

 

Сделаем текст в заголовке сайта читаемым, для этого выделим его.

 

Сделаем текст в заголовке сайта читаемым, для этого выделим его.

 

 

И, щелкнув по кнопке «Цвет фона», установим цвет фона за текстом.

 

И, щелкнув по кнопке «Цвет фона», установим цвет фона за текстом.

 

 

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

 

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

 

 

Щелкнем по кнопке «ОК».

 

Щелкнем по кнопке «ОК».

 

 

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

 

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

 

 

Фон за текстом окрасился и текст стал читаем.

 

Фон за текстом окрасился и текст стал читаем.