Внедрение дизайна сайта в SiteEdit

В этом уроке мы познакомимся с версткой дизайна в программе SiteEdit, простыми словами – как превратить обычный эскиз дизайна сайта в виде картинки в работоспособный сайт.

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

 

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

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

В нашем случае структура выглядит примерно так:



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

Поясним по скриншоту. Мы добавляем первый слой, который будет помогать нам центровать сайт по середине экрана. Далее в нем пойдут другие слои, служащие для разделения частей сайта относительно друг друга. Поскольку наши блоки имеют разное оформление (шапка, блок меню, содержательная часть и подвал), они будут заключены в отдельные слои. Таблица же поможет нам разделить область содержания на 2 колонки – вспомогательную и основную.

Теперь рассмотрим, что нужно сделать для построения структуры сайта в программе SiteEdit.

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

«Оформление – редактирование карты дизайна» (здесь создается структура)

 

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

Для начала нам нужно избавиться от старой структуры и тех элементов, которые уже имеются на экране. Для быстрого выделения всех элементов нажимаем комбинацию клавиш «Ctrl+A», затем клавишу «Delete». При этом все удаляется и перед нами белеет чистый лист.

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



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

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

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

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



Устанавливайте количество строк и колонок, как нужно вам. Ширина 100% вверху редактора означает, что таблицы растянется на всю ширину того блок, в котором она заключена. По умолчанию все таблицы «резиновые». У таблицы будут установлены границы в виде обрамления сплошной линией. Можете оставить для наглядности и убрать в конце работы. Но я всегда убираю их сразу, чтобы не смущали. Границы можно убрать, сменив 1 на 0 у параметра «Рамка» в верхней правой части редактора.

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

Итак, после установки слоев, таблицы и вложенных внутрь элементов у нас получается такая картинка:



Поясним. Мы добавили один общий слой, в который вложили слой шапки, слой меню, слой содержания, слой подвала.

• Слой шапки включает в себя: логотип, заголовок сайта
• Слой меню включает универсальное меню
• Слой содержания включает таблицу из одной строки и двух колонок, В левой – глобальный контент, в правой: заголовок страницы, вводный текст страницы, завершающий текст страницы
• Слой подвала включает слой с блоком Copyright, Кнопку технологии SiteEdit, Слой с блоком статистики

При установке или перемещении элементов в карте дизайна не допускайте пробелов и пропусков на другую строку, т.е. старайтесь не нажимать на клавиатуре клавиши «Пробел» и «Enter». Эти отступы будут вам мешать настраивать дизайна и добавят нежелательные промежутки. Для удаления таких отступов можно проделать такую процедуру:

Ставите курсор рядом с элементом, и нажимаете «BackSpace» или «Delete», в зависимости от того, где вы хотите удалить отступ – спереди или сзади. Если удаляется сам элемент, то значит отступа не было, можете нажать «Ctrl+Z», чтобы вернуть действие назад.

Построив структуру в визуальном редакторе, мы будем искать в ней элементы с помощью дерева дизайна уже в обычном режиме настройки. Но, т.к. программа создает названия элементов на английской языке, многим будет непонятны заголовки, к пример: DIV17, Table03, Tr02. Поэтому, давайте назовем наши созданные элементы по-русски, как нам было бы понятнее. Это делать необязательно, поэтому некоторые могут смело пропустить данный шаг.

Переименовать элементы можно именно в карте дизайна. Нажмем клавишу «F4», открыв дерево дизайна. В карте дизайна здесь нет лишних элементов, но есть наша созданная структура. Все элементы находятся в одном главном BODY (этот элемент чаще всего остается неизменным). Все, что вложено внутри него – это и есть наши добавленные слои, таблицы, функциональные блоки, расположенные в древообразной структуре.

Выделите слой в дереве дизайна, в поле «Имя» поменяйте название на привычное вам. К примеру – «Общий слой», после нажмите кнопку «Применить», что справа от поля. Если вы новичок, лучше не меняйте поле «ID».



Данную операцию проделайте со всеми остальными слоями и таблицей. Названия лучше давать самые обычные и универсальные (слой текстов, слой шапки и т.д.). Выделяемый элемент будет подсвечен красной рамкой на экране, так что вам не составит труда определить ему название. Вот такая картинка получилась после выполнения данной задачи:



Сохраняем изменения в карте дизайна, нажав на кнопку «Сохранить» в нижней части экрана.

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



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

Для удаления старых настроек дизайна открываем панель CSS клавишей F3, ставим курсор в поле, нажимаем комбинацию клавиш «Ctrl+A», далее клавишу «Delete», при этом весь набор css стилей удаляется. Жмем кнопку «Сохранить CSS» на данной панели. Теперь можете закрыть напель той же клавишей F3, чтобы не мешала. Чтобы изменения, сделанные в панели css, применились к проекту, нажмите правой кнопкой мыши на иконку с зелеными стрелочками «Обновить страницу» и кликните левой кнопкой мыши на выпавший пункт «Обновить параметры css редактора».

Должна получиться такая картинка:



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

Откроем дерево дизайна F4, выделим пункт BODY, и на вкладке «Позиционирование» установим число «0» в самой левой колонке у параметры «Отступы». Затем перейдем в дереве в пункт «Тэги / Все элементы», и установим также значение «0» в том же самом поле. Теперь можно начать задавать наши настройки.

Основываясь на нашем эскизе, установим общие настройки текстов для всего сайта. Правильней сначала задать такие настройки в пункте BODY, т.к. все, что содержится в нем, унаследует эти настройки. Заходим на вкладку «Шрифт», задаем цвет, размер и начертание текста (выбирая нужный шрифт). Согласно нашему эскизу, межстрочный интервал чуть больше, чем есть сейчас, поэтому пропишем и его. Данный интервал можно прописывать в таком виде (к примеру: 1.4). Остальные графы здесь лучше оставить пустыми. Более индивидуальные вещи мы будем задавать уже у конкретных элементов.

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

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



В других случаях, когда рисунок повторять не нужно, ставьте значение «no-repeat» у пункта «Повторение», либо устанавливайте повторение по конкретной оси координат.

Теперь отцентруем наш сайт, относительно ширины экрана. Выделим самый первый слой, который идет после пункта BODY и перейдем на вкладку «Позиционирование». Здесь необходимо задать размеры ширины слоя (можно задавать как в процентах, так и в пикселях). В нашем случае Размер задан жесткий в пикселях (размеры в процентах обычно задаются «резиновым» сайта). Теперь прописываем значение «auto» в самой левой колонке у пункта «Отступы». Если все правильно сделали, сайт должен расположиться по центру вашего экрана.


Чтобы сайт не прилипал к краям экрана, зададим отступы сверху и снизу (слева и справа задавать в нашем случае не нужно, ведь эти отступы будут появляться автоматически). Зададим небольшие значения, как это показано на эскизе дизайна (задаем напротив пункта «Отступы»).

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

Логотип можно загрузить через верхнее меню «Редактировать / Логотип сайта». Выбираем в проводнике нужную картинку, загружаем.

Заголовок сайта также изменим. Чтобы изменить, можно найти его в том же меню или кликнуть 2 раза по имеющемуся названию «заголовок сайта». Откроется текстовый редактор. Напишем реальный заголовок сайта.



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

Настроим дизайн заголовка сайта. Для этого находим в дереве дизайна элемент заголовка «siteTitle», заходим на вкладку «Шрифт» и задаем размер, цвет, вес шрифта (если нужно – начертание, наклон и т.д.).

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

Автоматический поиск элемента на экране

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

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

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



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

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



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



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



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

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

Для начала пункту меню задается тип контейнера или выравнивание (в зависимости от ситуации). Чаще применяется значение «Left» у пункта «Выравнивание». Только тогда пункт ведет адекватно при задании ему размеров и отступов.

Для задания размеров пункту могут использоваться жесткие размеры по высоте (но лишь в случаях, когда это нужно для подстройки под конкретный фон с твердой высотой). В нашем случае достаточно указать отступы пункту меню – вкладка «Расположение текста», указываем отступы слева, справа, сверху и снизу. Если отступ одинаковый со всех сторон, его можно указать у пункта «Внутренний отступ»



Теперь настроим оформление самих текстов. Зайдем на вкладку «Шрифт» и зададим цвет, размер, начертание текста и другие параметры согласно эскизу дизайна.



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



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

Для того, чтобы визуально видеть пункты, которые будут выпадать (раскрываться), нам нужно создать имитацию вложенных страниц друг в друга. Пока у нас нет наполнения и мало страниц, можно создать несколько тестовых и вложить их в одну или в две страницы. Для этого воспользуйтесь инструментом списка страниц F11. Для нашего тестового проекта я создал 3 страницы. Чтобы поместить их в родительскую страницу, можно выделить эти страницы (с помощью «Ctrl» или «Shift»), затем взять мышкой эти страницы и навести на ту, в которую мы хотим их вложить. Далее они окажутся в ней, изменения в списке страниц можно сохранить. Теперь, наводя курсором на пункт меню (в которой есть страницы), они будут выпадать снизу.



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

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



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

Теперь нам нужно решить, как будут выглядеть пункты при наведении курсора. Наводя курсор на пункты, мы видим неточность – пункт подсвечивается разной шириной, и получается некрасиво. Это происходит потому, что у пунктов 1го уровня ширина не задана, поэтому ширина подстраивается под величину текста.

Вы можете использовать 2 варианта:

• Либо указывайте жесткую ширину пункту меню 2го уровня (в пикселях)
• Либо не используйте для пунктов меню 2го и т.д. уровней оформление, предполагающее выделение данного пункта целиком (граница, фоновый цвет или изображение). Как альтернативу, можно использовать подчеркивание текста, замена цвета текста, жирность и т.д.

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



Также уберем преобразование текста в большие буквы для 2го уровня. Чаще всего размер текста более мелкий у нижеследующих уровней от 1го. Для того, чтобы убрать ранее заданный параметр, нужно поставить значение «none».

Остальные нижеследующие уровни будут наследовать стиль 2го уровня, а значит – вести себя, как нам нужно. На этом настройка меню закончена.

Далее настроим подложку содержательной части. Для нее мы добавили слой. Выделяем его, назначаем отступ снизу, чтобы не слипался с подвалом. Устанавливаем границу по периметру (чтобы не подбирать цвет границы, можно скопировать его со слоя меню, тем более что стиль элементов как правило одинаков). На вкладке «Фон» устанавливаем светлый фон (в нашем случае белый). Текст будет смотреться достаточно четко за счет контраста.

Теперь установим отступы текста относительно границ слоя, чтобы не "слипались".

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

 

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

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

Блок Copyright включается через верхнее меню программы «Редактировать / Дополнительные разделы / Блок Copyrights». В открывшемся окне дописываем к существующей надписи название компании или хозяина сайта (если нужно, пишем год), сохраняем.



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

Счетчик добавляется также через пункт меню «Редактировать / Статистика», в открывшемся окне вам потребуется добавить html код счетчика (который вам выдаст ресурс, на котором вы будет е регистрировать счетчик).



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

Выделим слой подвала, укажем границу (но уже не по периметру, а только сверху). Цвет и стиль границы укажем такой же, как у других блоков. Установим отступ у общего слоя подвала – установим сверху, но по желанию, можно добавить и отступ снизу.



Элементы в подвале будет лучше расположить в строку, т.к. друг под другом они не смотрятся в данной ситуации. Для этого используем вкладку «Поиционирование». Ставим значение «left» у параметра «Выравнивание» и небольшой отступ справа. Данную операцию проделываем со всеми элементами, которые находятся в слое подвала. Т.к. текст у блока Copyright меньшей высоты по сравнению со счетчиками, то смотрится он не так красиво. Отодвинем «блок Copyright» чуть сверху, дабы расположить его по центру относительно высоты счетчика и кнопки Технологии SiteEdit.

Получается такая картинка:



Чаще всего, слой, в котором элементы располагаются в строчку (которым задано выравнивание по левому или правому краю), ведет себя неправильно. Его обводка сворачивается до минимума. Рядом расположенные слои могут также вести себя неправильно, прилипая к данному слою.

Чтобы этого не возникало, можно задать высоту слою, либо добавить ширину и выставить тип контейнера (какой лучше – зависит от дизайна). В нашем случае, слою подвала нужно добавить 100% ширины и тип контейнера «inline-block», после чего слой охватывает правильно все, что в него входит.

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

Для более удобной работы включим режим иконок управления информацией F9. Вкратце об иконках:

Бело-серые – переменные и некоторые заголовки

Синие – навигационное меню

Красная – Заголовок страницы

Желтые - Разделы

Иконки с красной обводкой – глобальные разделы (записи), т.е. сквозные для всех страниц

Зеленые - записи

Иконки с плюсиком - добавить новый элемент
Иконки с карандашиком - редактировать элемент


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

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

Контент-0 считается основным. Чаще всего он добавляется в единственном экземпляре. В нем отображается все подробное содержание, когда мы кликаем на ссылки «подробнее» информационных блоках в других контентах.

Если одного контента недостаточно, можно добавить дополнительные – они будут с цифрой 1,2,3 и выше. Если даже вам не хватило заложенных в программе 6 контентов, вы можете добавить такой же, зайти в режим «Исходного кода» карты дизайна, найти строчку кода с контентом и поменять у него цифру (на любую другую, которая не встречается в карте). Но, как правило, при грамотном построении структуры дизайна 6 контентов чаще всего хватает.

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

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


Вернемся к практике. В нашем примере содержательная часть разбита на 2 вертикальные колонки таблицей. В левой более узкой у нас установлен глобальный контент-1. Мы посчитали, что здесь будет установлен блок новостей, сквозной для всех страниц. В правой боле широкой колонке – заголовок страницы, вводный текст страницы, контент-0 и завершающий текст страницы.



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

 

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

Пока мы не вышли из текстового редактора, можно продолжить работу с разделом. Перейдите на вкладку «Содержание». Заполните (если нужно) заголовок раздела и описание раздела. Я же пока не буду добавлять текст и фото к разделу, а лишь заполню заголовок и сразу перейду к записям.

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



В добавленной записи прописываем заголовок (если требуется) указываем дату (это в случае с модулем новостей).

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

Чаще всего, галочку нужно ставить, и указывать желаемые размеры, до которых уменьшится изображение. Изображение всегда уменьшается пропорционально, а размер указывается для ширины фотографии. Также ест возможность уменьшить только превью-изображение (фото в кратком просмотре), а полное изображение оставить с оригинальным размером (для этого) нужно убрать число из поля справа и оставить его пустым. В нашем же случае фотографии будут большие в исходниках, поэтому укажем оба размера. Размер указывайте, в зависимости от вашего дизайна. Если место позволяет, можно указать размер больше, но такой, чтобы фотография и текст легко умещались в отведенной им области.

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

Теперь о текстовом редакторе. Работает он в двух режимах: «Текст» и «HTML»

Режим «Текст»



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

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

Режим «HTML»



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

Часто используемые тэги выведены в панель иконок управления текстом.

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


Вернемся к наполнению информацией нашего проекта. Мы добавили картинку, текст. Но, весь текст сильно увеличит запись. Чаще всего в новостях располагают небольшой отрывок текста, а все остальное предлагают почитать в подробном описании. Сделаем также. Оставим в кратком описании Одно или два предложения, а все остальное перенесем в подробную часть (просто вырезав и вставив текст).

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



Теперь мы видим, как располагаются записи данного раздела и сколько места занимает раздел. Поскольку размеров у ячеек таблицы нет, она будет вести себя по принципу: где больше информации – та ячейка и шире. Все это мы сможем настроить позже. Для полной картинки давайте добавим информацию в контент-0, то в правую область сайта.

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

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

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



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



Теперь настроим разделы и записи, чтобы было понятно, где заканчивается один, где начинается другой. Для этого используйте выведенные в дереве дизайна пункты «Оформление разделов и записей». Данные пункты помогут вам настроить разделы и записи для всего сайт и всех модулей в одном месте. Согласно эскизу дизайна, нам потребуется задать больший размер заголовкам разделов, поменять шрифт, задать отступ снизу.



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

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

Сами записи можно отодвинуть друг от друга, задав отступ снизу на вкладке «Позиционирование».



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

Для этого выделяем пункт «Рисунок» (настраиваем одинаково у раздела и у записи), затем на вкладке «Позиционирование» ставим значение «left» у пункта «Выравнивание». Это означает, что данный элемент прижимает к определенному краю области, а все что рядом с ним, пытается расположить в строчку. Поэтому, текст обтекает картинку (если тексту не заданы определенные параметры). У картинки ставим небольшой отступ справа (в случае, если картинка прижата к левому краю), чтобы текст не слипался.



Картинку в подробном описании можно не настраивать, т.к. она наследует настройки картинки в краткого просмотра.

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

Ссылки для всего сайта можно настроить в одном месте. В дереве дизайна находим пункт «Тэги / А (ссылки)» и настраиваем цвет активной ссылки. Цвет посещенной ссылки также настроим или зададим такой же цвет, как и у активной (на ваше усмотрение). По умолчанию ссылки будут подчеркнуты. Вы можете оставить это свойство или придумать свое выделение ссылок. Я же оставлю, но настрою пункт ссылки при наведении курсора так, чтобы подчеркивание убиралось. Для этого выделим данный пункт и на вкладке «Шрифт» поставим и пункта «Подчеркивание» значение «none».

Настроим дизайн кнопок всего сайта. Это можно настроить в одном месте. В дереве дизайна пункт «Оформление разделов и записей / Общие… / Свойства кнопок». Чтобы нам видеть то, что мы настраиваем, включим страницу проекта, где установлен модуль, имеющий кнопку.

Кнопки по умолчанию имеют стандартное оформление, взятое с браузера. Мы же можем их настроить согласно эскизу дизайна или нашим пожеланиям. В моем случае я задаю текстовое оформление кнопке, выбирая шрифт, размер, цвет. Затем убираю границу, устанавливая значение «none» в нижнем поле на вкладке «Граница». Дабы кнопка не была маленькой (а размер ее будет таким, какой в ней текст), я задаю внутренние отступы на вкладке «расположение текста».

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

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

Я решил ограничиться фоном кнопки и задать плюсом рисунок, имитирующий легкое свечение сверху (рисунок светлого градиента с растворением к низу в формате png). Такой рисунок подойдет почти к любому фону и сделает кнопку чуть более объемной. Вы же можете экспериментировать с оформлением как угодно. Рисунок имеет повторящийся светлый градиент, поэтому устанавливаем в пункте «Повторение» значение «repeat-x» (повторять по горизонтали).

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



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

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



Текстовые поля и поля ввода данных можно настроить, зайдя в дереве дизайна в пункт «Тэги». Вы найдете такие элементы как «INPUT» и «TEXTAREA». Чаще всего, оформление этих элементов одинаковое, поэтому можете задавать одинаковые настройки.

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

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

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