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

т       

НАЦИОНАЛЬНЫЙ ФОНД ПОДГОТОВКИ КАДРОВ.
ИНФОРМАТИЗАЦИЯ СИСТЕМЫ ОБРАЗОВАНИЯ.


Курс создан по технологии
"Конструктор школьных сайтов".

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

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

 

 

 

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

 

 

 

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

 

 

 

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

 

 

 

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

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

 

 

 

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

 

 

 

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

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

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

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

 

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

 

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

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

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

 

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

 

 

 

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

 

 

 

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

 

 

 

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

 

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

 

 

 

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

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

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

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

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

 

 

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

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

 

 

 

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

 

 

 

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

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

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

 

 

 

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

 

 

 

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

 

 

 

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

 

 

 

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

 

 

 

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

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

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

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

 

 

 

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

 

 

 

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

 

 

 

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

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

 

 

 

И вертикали.

 

 

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

 

 

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

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

 

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

 

 

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

 

 

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

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

 

 

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

 

 

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

 

 

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

 

 

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

 

 

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

 

 

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

 

 

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

 

 

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

 

 

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

 

 

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

 

 

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