Оформление разделов и записей, настройка дизайна текстовой информации
Разделы и записи
Сначала рассмотрим сайт на простом примере. Сравним его с книгой. Сайт - это такое же законченное произведение, в котором описана и представлена либо визуально, либо текстово, история человека, компании, вещей.
Также Сайт, как и книга, состоит из страниц. Их может быть несколько, либо весьма много, в зависимости от того количества информации, которое должно быть изложено.
Каждая страница в свою очередь состоит из разделов. В программе раздел - это отдельный модуль (функциональная часть, выполняющая определенное действие или комплект действий). На странице раздел может быть один или несколько, смотря из пожеланий создателя.
В каждом разделе есть записи - смысловые информационные блоки. Это могут быть абзацы текста, описание одного товара, услуги, либо изображения. Записей в разделе может быть довольно много.
Рис. Иконки редактирования информации
Иконка "листочек с плюсиком" - добавить новый (объект, страницу, раздел)
Иконка "листочек с карандашом" - редактировать существующий (объект, страницу, раздел)
Красная иконка - заголовок страницы сайта
Желтая иконка - раздел
Зеленая иконка - запись (объект)
Синяя - меню
Белая - переменная, заголовок, подзаголовок сайта, дополнительные разделы
Совет: при заполнении страницы сайта не нужно забывать о том, что страница не должна быть перегружена. Это ведет к медленной загрузке в браузере, а также к плохому восприятию пользователем. Большой объем информации сложно воспринять и обработать в короткое время. А большинство пользователей экономят свое время и деньги. При заполнении текстовой информацией не забудьте подкреплять графикой то, что преподносите. Пользователю легче воспринимать изображение. Это могут быть иконки, дополнительные изображения, рисунки, небольшие анимационные объекты.
Для того чтобы настроить дизайн текстов на сайте, нам нужно добавить информацию. Для начала это может быть любой абзац текста или несколько слов, скопированных друг за другом. В дальнейшем мы легко поменяем эту информацию на нужную.
Включим режим иконок редактирования (F9). Если мы находимся на главной странице, один раздел уже изначально добавлен, но без информации. Нажмем на желтую иконку редактирования раздела (Рис. 27), Либо двойным щелчком мыши на сам заголовок. Откроется текстовый редактор.
Рис. 27
По умолчанию, на главной странице присутствует модуль "Форма новостей", но мы вместо него можем поставить любой другой. Давайте поставим самый распространенный информационный модуль "Текст и рисунок". Для этого зайдем на вкладку "Тип модуля", выберем "Текст/Текст и рисунок". При выборе программа всегда спрашивает, установить ли параметры модуля и оформление по умолчанию. Нажмем "да". Напишем В Заголовке раздела (к примеру) "Создание сайта". В пустое поле поставим скопированный из стороннего места текст (для примера). Теперь добавим записи (одну или несколько). Нажмем правой кнопкой мыши на Заголовок раздела (в левой части редактора) и выберем из списка "Добавить запись". Щелкнув мышкой напротив зеленой иконки на заголовок "Объект", выделим запись, и в правой части экрана пропишем также - Заголовок (к примеру "создание нового проекта") и в пустом поле - Текст (скопируем абзац или два текста).
Рис. 28
У многих модулей есть Краткий и подробный текст. Подробный текст заполняется на рядом расположенной вкладке "Подробно", когда мы заполняем запись. Сюда также необходимо поставить текст (для примера).
Добавим фотографию к этой записи. Обратим внимание на нижнюю часть панели редактора "Добавить файл рисунка". Прежде чем добавить, нажмем галочку "Изменить ширину до" (рис. 28, 29) Данная функция сама сжимает пропорционально рисунок, который мы добавляем, если он очень больших размеров и неоптимизирован должным образом для Интернета.
Рис. 29
Совет: Данный параметр дает возможность оптимизировать фотографии и изображения до нужного размера, не используя сторонних графических программ. В левой ячейке указывается размер превью (небольшое изображение в кратком тексте), в правой ячейке - размер конечного изображения (фотография в подробном описании записи). Высота подгоняется автоматически. Если в правой ячейке ничего не указывать - размер фото останется по умолчанию. Если убрать галочку - фотография установится с реальными размерами.
Итак, ставим галочку, указываем в левой ячейке - 120 (размеры в пикселях), в правой - 500. Нажмем на иконку "загрузить рисунок с диска", выберем фотографию на компьютере (желательно довольно большое изображение, например - с цифрового фотоаппарата).
Рис. 30
Совет: В программе SiteEdit имеется встроенный графический редактор, с помощью которого можно производить поверхностное редактирование фотографии. После добавления рисунка можете зайти на вкладку "Рисунок" и увидеть кнопки "Внешний редактор" напротив превью и большого изображения. Применять графический редактор, как к маленькому, так и к большому изображению, можно по отдельности.
После добавления информации Нажмем "Сохранить" в нижней правой части редактора. Теперь нам нужно задать необходимые настройки текста, т.е. настроить его дизайн. Выключим пока (для удобства) режим иконок F9. Нажмем F4, и в дереве дизайна выберем пункт "Оформление разделов и записей". Раскрываем нужные нам пункты и вносим настройки на вкладке "Шрифт" нижней части программы.
Пункт "Разделы". Заголовок раздела
Цвет: #3c6de1
Размер: 22
Вес шрифта: normal
Начертание: Arial
Текст раздела
Цвет: #808080
Размер: 12
Вес шрифта: normal
Начертание: Arial
Пункт "Записи". Заголовок записи
Цвет: #808080
Размер: 12
Вес шрифта: normal
Начертание: Arial
Вес шрифта: bold
Краткий текст
Цвет: #333333
Размер: 12
Вес шрифта: normal
Начертание: Arial
Рис. 31
Пункт "Просмотр" (чтобы увидеть изменения, нужно нажать ссылку "далее" в любом тексте на сайте, если подробный текст был изначально добавлен). Настройки Краткому и подробному тексту задаем такие же, как и в пункте "Записи".
По такому же принципу настройте Вводный и Завершающий текст страницы (для примера можете внести информацию, щелкнув по красной иконке "редактирование страницы" при включенном режиме F9).
Сделав подобные настройки в пункте "Оформление разделов и записей", мы одновременно настроили сразу несколько модулей, простых по структуре (Текст и рисунок, Форма новостей и т.д.)
Вверх
Также Сайт, как и книга, состоит из страниц. Их может быть несколько, либо весьма много, в зависимости от того количества информации, которое должно быть изложено.
Каждая страница в свою очередь состоит из разделов. В программе раздел - это отдельный модуль (функциональная часть, выполняющая определенное действие или комплект действий). На странице раздел может быть один или несколько, смотря из пожеланий создателя.
В каждом разделе есть записи - смысловые информационные блоки. Это могут быть абзацы текста, описание одного товара, услуги, либо изображения. Записей в разделе может быть довольно много.
Рис. Иконки редактирования информации
Иконка "листочек с плюсиком" - добавить новый (объект, страницу, раздел)
Иконка "листочек с карандашом" - редактировать существующий (объект, страницу, раздел)
Красная иконка - заголовок страницы сайта
Желтая иконка - раздел
Зеленая иконка - запись (объект)
Синяя - меню
Белая - переменная, заголовок, подзаголовок сайта, дополнительные разделы
Совет: при заполнении страницы сайта не нужно забывать о том, что страница не должна быть перегружена. Это ведет к медленной загрузке в браузере, а также к плохому восприятию пользователем. Большой объем информации сложно воспринять и обработать в короткое время. А большинство пользователей экономят свое время и деньги. При заполнении текстовой информацией не забудьте подкреплять графикой то, что преподносите. Пользователю легче воспринимать изображение. Это могут быть иконки, дополнительные изображения, рисунки, небольшие анимационные объекты.
Для того чтобы настроить дизайн текстов на сайте, нам нужно добавить информацию. Для начала это может быть любой абзац текста или несколько слов, скопированных друг за другом. В дальнейшем мы легко поменяем эту информацию на нужную.
Включим режим иконок редактирования (F9). Если мы находимся на главной странице, один раздел уже изначально добавлен, но без информации. Нажмем на желтую иконку редактирования раздела (Рис. 27), Либо двойным щелчком мыши на сам заголовок. Откроется текстовый редактор.
Рис. 27
По умолчанию, на главной странице присутствует модуль "Форма новостей", но мы вместо него можем поставить любой другой. Давайте поставим самый распространенный информационный модуль "Текст и рисунок". Для этого зайдем на вкладку "Тип модуля", выберем "Текст/Текст и рисунок". При выборе программа всегда спрашивает, установить ли параметры модуля и оформление по умолчанию. Нажмем "да". Напишем В Заголовке раздела (к примеру) "Создание сайта". В пустое поле поставим скопированный из стороннего места текст (для примера). Теперь добавим записи (одну или несколько). Нажмем правой кнопкой мыши на Заголовок раздела (в левой части редактора) и выберем из списка "Добавить запись". Щелкнув мышкой напротив зеленой иконки на заголовок "Объект", выделим запись, и в правой части экрана пропишем также - Заголовок (к примеру "создание нового проекта") и в пустом поле - Текст (скопируем абзац или два текста).
Рис. 28
У многих модулей есть Краткий и подробный текст. Подробный текст заполняется на рядом расположенной вкладке "Подробно", когда мы заполняем запись. Сюда также необходимо поставить текст (для примера).
Добавим фотографию к этой записи. Обратим внимание на нижнюю часть панели редактора "Добавить файл рисунка". Прежде чем добавить, нажмем галочку "Изменить ширину до" (рис. 28, 29) Данная функция сама сжимает пропорционально рисунок, который мы добавляем, если он очень больших размеров и неоптимизирован должным образом для Интернета.
Рис. 29
Совет: Данный параметр дает возможность оптимизировать фотографии и изображения до нужного размера, не используя сторонних графических программ. В левой ячейке указывается размер превью (небольшое изображение в кратком тексте), в правой ячейке - размер конечного изображения (фотография в подробном описании записи). Высота подгоняется автоматически. Если в правой ячейке ничего не указывать - размер фото останется по умолчанию. Если убрать галочку - фотография установится с реальными размерами.
Итак, ставим галочку, указываем в левой ячейке - 120 (размеры в пикселях), в правой - 500. Нажмем на иконку "загрузить рисунок с диска", выберем фотографию на компьютере (желательно довольно большое изображение, например - с цифрового фотоаппарата).
Рис. 30
Совет: В программе SiteEdit имеется встроенный графический редактор, с помощью которого можно производить поверхностное редактирование фотографии. После добавления рисунка можете зайти на вкладку "Рисунок" и увидеть кнопки "Внешний редактор" напротив превью и большого изображения. Применять графический редактор, как к маленькому, так и к большому изображению, можно по отдельности.
После добавления информации Нажмем "Сохранить" в нижней правой части редактора. Теперь нам нужно задать необходимые настройки текста, т.е. настроить его дизайн. Выключим пока (для удобства) режим иконок F9. Нажмем F4, и в дереве дизайна выберем пункт "Оформление разделов и записей". Раскрываем нужные нам пункты и вносим настройки на вкладке "Шрифт" нижней части программы.
Пункт "Разделы". Заголовок раздела
Цвет: #3c6de1
Размер: 22
Вес шрифта: normal
Начертание: Arial
Текст раздела
Цвет: #808080
Размер: 12
Вес шрифта: normal
Начертание: Arial
Пункт "Записи". Заголовок записи
Цвет: #808080
Размер: 12
Вес шрифта: normal
Начертание: Arial
Вес шрифта: bold
Краткий текст
Цвет: #333333
Размер: 12
Вес шрифта: normal
Начертание: Arial
Рис. 31
Пункт "Просмотр" (чтобы увидеть изменения, нужно нажать ссылку "далее" в любом тексте на сайте, если подробный текст был изначально добавлен). Настройки Краткому и подробному тексту задаем такие же, как и в пункте "Записи".
По такому же принципу настройте Вводный и Завершающий текст страницы (для примера можете внести информацию, щелкнув по красной иконке "редактирование страницы" при включенном режиме F9).
Сделав подобные настройки в пункте "Оформление разделов и записей", мы одновременно настроили сразу несколько модулей, простых по структуре (Текст и рисунок, Форма новостей и т.д.)
Настройка дизайна кнопок
Почти в каждом модуле присутствуют кнопки. Дизайна кнопок можно настраивать в нескольких местах.
1) Для индивидуальной настройки кнопки конкретного модуля зайдем в пункт "модули" в дереве дизайна F4, найдем нужный нам модуль, выделим пункт кнопки и внесем настройки в нижних параметрах (рис.32)
Рис. 32
2) Для общих настроек дизайна кнопок зайдем в пункт "Оформление разделов и записей" в дереве дизайна F4, затем в пункт "Общие (id) и (class) для сайтов SiteEdit", потом выделим пункт "Свойства кнопок" и внесем настройки в нижних параметрах (для визуальной настройки перейдите в подробное описание записи, допустим в модуле "текст и рисунок" (При это проверьте, чтобы поле "подробный текст" было заполнено) (рис.33)
Совет: В общих настройках дизайна кнопок не нужно задавать отступы, конкретные размеры кнопок, т.к. в некоторых случаях кнопки могут "поломать" дизайна сайта. Можете добавить рисунок, цвет фона кнопки, обрамление, шрифт и расположение текста.
Зададим общие настройки кнопке:
Вкладка "Шрифт":
Начертание: Tahoma
Цвет: #ffffff
Размер: 11
Вес шрифта: normal
Вкладка "Фон":
Цвет: #ffffff
Изображение: knopka_133.gif (возьмите из папки с исходными материалами)
Повторение: no-repeat
Вкладка "Граница":
Здесь можно задать свой цвет и толщину границы. Изначально в программе стоит граница синего цвета толщиной в один пиксель. В нашем случае кнопка имеет рисунок и обрамление (граница) ей не нужна.
УБЕРИТЕ из этой вкладки все параметры, либо напротив пункта "Стиль" поставьте значение "none".
Вкладка "Позиционирование":
Общая ширина: 133
Общая высота: 23
(Размеры вы можете посмотреть, исходя из изображения, которое вы прикрепляете)
Совет: Ширину кнопки можете указать в том случае, если прикрепленное изображение имеет ограниченную ширину и логически завершено. Если Изображение повторяется по оси X, то размер можно не указывать. В этом случае можно поставить отступы от текста на вкладке "Расположение текста", выделив перед этим кнопку.
Рис. 33
Вверх
Рис. 32
2) Для общих настроек дизайна кнопок зайдем в пункт "Оформление разделов и записей" в дереве дизайна F4, затем в пункт "Общие (id) и (class) для сайтов SiteEdit", потом выделим пункт "Свойства кнопок" и внесем настройки в нижних параметрах (для визуальной настройки перейдите в подробное описание записи, допустим в модуле "текст и рисунок" (При это проверьте, чтобы поле "подробный текст" было заполнено) (рис.33)
Совет: В общих настройках дизайна кнопок не нужно задавать отступы, конкретные размеры кнопок, т.к. в некоторых случаях кнопки могут "поломать" дизайна сайта. Можете добавить рисунок, цвет фона кнопки, обрамление, шрифт и расположение текста.
Зададим общие настройки кнопке:
Вкладка "Шрифт":
Начертание: Tahoma
Цвет: #ffffff
Размер: 11
Вес шрифта: normal
Вкладка "Фон":
Цвет: #ffffff
Изображение: knopka_133.gif (возьмите из папки с исходными материалами)
Повторение: no-repeat
Вкладка "Граница":
Здесь можно задать свой цвет и толщину границы. Изначально в программе стоит граница синего цвета толщиной в один пиксель. В нашем случае кнопка имеет рисунок и обрамление (граница) ей не нужна.
УБЕРИТЕ из этой вкладки все параметры, либо напротив пункта "Стиль" поставьте значение "none".
Вкладка "Позиционирование":
Общая ширина: 133
Общая высота: 23
(Размеры вы можете посмотреть, исходя из изображения, которое вы прикрепляете)
Совет: Ширину кнопки можете указать в том случае, если прикрепленное изображение имеет ограниченную ширину и логически завершено. Если Изображение повторяется по оси X, то размер можно не указывать. В этом случае можно поставить отступы от текста на вкладке "Расположение текста", выделив перед этим кнопку.
Рис. 33
Настройка дизайна ссылок
Все ссылки, которые создаются вручную или автоматически программой, можно настроить в одном месте. Откроем дерево дизайна F4. Зайдем в пункт "Тэги/А(ссылки)". На вкладке Шрифт пропишите нужные вам настройки дизайна текстов ссылок. Рекомендую задать только Цвет, начертание и возможно - размер. Отступы в общих настройках ссылок задавать не желательно.
Можете потренироваться на примере ссылки обычного модуля - текст и рисунок, просто добавим подробный текст в запись. Автоматически появится ссылка "далее" под текстом.
СМОТРЕТЬ следующий урок
Вверх
Можете потренироваться на примере ссылки обычного модуля - текст и рисунок, просто добавим подробный текст в запись. Автоматически появится ссылка "далее" под текстом.
СМОТРЕТЬ следующий урок