Создание дизайна сайта
После построения карты сайта нам необходимо насытить наш будущий сайт графикой и минимальным наполнением.
Основные инструменты для редактирования и создания дизайна сайта:
Клавиша F4 - открытие панели "дерево дизайна"
Клавиша F9 - включение режима иконок редактирования
Основные инструменты для редактирования и создания дизайна сайта:
Клавиша F4 - открытие панели "дерево дизайна"
Клавиша F9 - включение режима иконок редактирования
Перед началом работы!
Заголовки сайта
Логотип сайта
Переименовывание пунктов дерева дизайна
Загрузка фоновых изображений
Дополнительные разделы
Перед началом работы!
Важным моментом перед началом работы над созданием нового сайта Является переключение режима подстройки под браузеры. Нажмите правой кнопкой на сайт, зайдите в "свойства проект" в появившемся окне. В новом окне выберите вкладку DOCTYPE и выберите режим "HTML 4.01"
Сайты, созданные на старых версиях программы SiteEdit, работают в режиме "HTML 4.0"
Сайты, которые вы создаете заново, разрабатывайте в режиме "HTML 4.01", в этом режиме подстройка под основные браузеры (Internet Explorer, Opera, Mozilla) упрощается в разы, т.к. не нужно выгружать в Интернет и даже локально просматривать сайт в окнах браузеров. Большинство неисправностей дизайна видно сразу же в программе.
Вверх
Сайты, созданные на старых версиях программы SiteEdit, работают в режиме "HTML 4.0"
Сайты, которые вы создаете заново, разрабатывайте в режиме "HTML 4.01", в этом режиме подстройка под основные браузеры (Internet Explorer, Opera, Mozilla) упрощается в разы, т.к. не нужно выгружать в Интернет и даже локально просматривать сайт в окнах браузеров. Большинство неисправностей дизайна видно сразу же в программе.
Заголовки сайта
Начнем по порядку. Пропишем заголовок, подзаголовок. Для этого вы можете два раза кликнуть мышкой на объект (к примеру заголовок), либо нажать (F9), открыв режим иконок, и нажать на иконку возле нужного объекта. Откроется текстовый редактор. Вместо существующих слов пропишем нужные и сохраним изменения:
Заголовок сайта: Твоя компания
Подзаголовок сайта: хорошо работаешь - хорошо отдыхаешь
Совет: текстовый редактор работает в двух режимах: Текст и HTML. Рекомендую работать в режиме HTML, т.к. в нем легче определить, где содержится ошибка, если текст построен неправильно. Часто бывает, что копируя информацию из документа Word, и вставляя его в закладку "Текст", появляется куча ненужного "мусора" (лишних настроек, тэгов), которые несут приоритет и ломают всю концепцию дизайна сайта. Работая в режиме HTML, изучите назначения тегов, расставьте, где нужно необходимые элементы - пробелы, пропуски строки, ссылки, цвет. И, в этом случае, вы точно будете уверены, что текст будет таким, каким вы его создали.
Теперь Давайте настроим дизайн заголовков. Нажмем F4, открыв дерево дизайна. Зайдем в закладки "заголовки". Выделяя "заголовок сайта", мы видим снизу еще панель настроек. Включим закладку "шрифт" и поставим необходимые нам значения:
Цвет: #86c510
Размер: 34
Вес шрифта: normal
Начертание: Arial
Рис. 11
Совет: Цвет можно выбрать, щелкнув на иконку палитры цветов, выбрав необходимый цвет, либо, скопировать код цвета вручную, из любого графического редактора (если дизайн в этом случае уже разработан)
Чтобы убрать лишний пробел или поставить свой под заголовком сайта - зайдем на вкладку "Позиционирование" и напротив пункта "Отступы" поставим в левой ячейке "0" (общий отступ). Поставим рядом отступ сверху "40", чтобы заголовок не был "приклеен к верху экрана". Снизу поставим отступ "5".
Совет: На вкладке "Позиционирование" есть пункты "Смещение вниз", "Смещение вправо". Будьте осторожны, задавая здесь какие-либо значения, т.к. данные настройки по разному отображаются в браузерах
Проделаем те же самые действия с подзаголовком сайта:
Вкладка "Шрифт"
Цвет: #395603
Размер: 13
Вес шрифта: normal
Начертание: Arial
Вкладка "Позиционирование"
Отступы общие: 0, слева - 30
Настроим заголовок страницы:
Вкладка "Шрифт"
Цвет: #86c510
Размер: 12
Вес шрифта: normal
Начертание: Tahoma
На вкладке "Фон" установим необходимый рисунок (иконку). Напротив пункта "Изображение" нажмем на иконку "загрузить с диска", откроется проводник, выберем на компьютере нужный нам рисунок. Напротив пункта "Повторение" поставим "no-repeat" (не повторять изображение).
Совет: при создании дизайна и загрузке даже маленьких изображений, их можно "растягивать" по горизонтали или вертикали, поставив параметр "repeat-x", "repeat-y" напротив пункта "повторение" на вкладке "фон". Это дает возможность работать с самыми маленькими изображениями и оптимизировать проект. Поставив параметр "repeat" мы можем зациклить изображение по вертикали и горизонтали одновременно. Это дает возможность получить интересный фон для сайта.
Вкладка "Позиционирование"
Отступы общие: 0, вверху - 5, снизу - 15, слева - 20
Чтобы Текст не перекрывал рисунок, зайдем на вкладку "Расположение текста", поставим параметры напротив пунктов "Горизонтальное выравнивание" - left, "Вертикальное выравнивание" - top.
На этой же вкладке зададим отступы текста:
Сверху - 3
Слева - 17
Рис. 12
Вверх
Заголовок сайта: Твоя компания
Подзаголовок сайта: хорошо работаешь - хорошо отдыхаешь
Совет: текстовый редактор работает в двух режимах: Текст и HTML. Рекомендую работать в режиме HTML, т.к. в нем легче определить, где содержится ошибка, если текст построен неправильно. Часто бывает, что копируя информацию из документа Word, и вставляя его в закладку "Текст", появляется куча ненужного "мусора" (лишних настроек, тэгов), которые несут приоритет и ломают всю концепцию дизайна сайта. Работая в режиме HTML, изучите назначения тегов, расставьте, где нужно необходимые элементы - пробелы, пропуски строки, ссылки, цвет. И, в этом случае, вы точно будете уверены, что текст будет таким, каким вы его создали.
Теперь Давайте настроим дизайн заголовков. Нажмем F4, открыв дерево дизайна. Зайдем в закладки "заголовки". Выделяя "заголовок сайта", мы видим снизу еще панель настроек. Включим закладку "шрифт" и поставим необходимые нам значения:
Цвет: #86c510
Размер: 34
Вес шрифта: normal
Начертание: Arial
Рис. 11
Совет: Цвет можно выбрать, щелкнув на иконку палитры цветов, выбрав необходимый цвет, либо, скопировать код цвета вручную, из любого графического редактора (если дизайн в этом случае уже разработан)
Чтобы убрать лишний пробел или поставить свой под заголовком сайта - зайдем на вкладку "Позиционирование" и напротив пункта "Отступы" поставим в левой ячейке "0" (общий отступ). Поставим рядом отступ сверху "40", чтобы заголовок не был "приклеен к верху экрана". Снизу поставим отступ "5".
Совет: На вкладке "Позиционирование" есть пункты "Смещение вниз", "Смещение вправо". Будьте осторожны, задавая здесь какие-либо значения, т.к. данные настройки по разному отображаются в браузерах
Проделаем те же самые действия с подзаголовком сайта:
Вкладка "Шрифт"
Цвет: #395603
Размер: 13
Вес шрифта: normal
Начертание: Arial
Вкладка "Позиционирование"
Отступы общие: 0, слева - 30
Настроим заголовок страницы:
Вкладка "Шрифт"
Цвет: #86c510
Размер: 12
Вес шрифта: normal
Начертание: Tahoma
На вкладке "Фон" установим необходимый рисунок (иконку). Напротив пункта "Изображение" нажмем на иконку "загрузить с диска", откроется проводник, выберем на компьютере нужный нам рисунок. Напротив пункта "Повторение" поставим "no-repeat" (не повторять изображение).
Совет: при создании дизайна и загрузке даже маленьких изображений, их можно "растягивать" по горизонтали или вертикали, поставив параметр "repeat-x", "repeat-y" напротив пункта "повторение" на вкладке "фон". Это дает возможность работать с самыми маленькими изображениями и оптимизировать проект. Поставив параметр "repeat" мы можем зациклить изображение по вертикали и горизонтали одновременно. Это дает возможность получить интересный фон для сайта.
Вкладка "Позиционирование"
Отступы общие: 0, вверху - 5, снизу - 15, слева - 20
Чтобы Текст не перекрывал рисунок, зайдем на вкладку "Расположение текста", поставим параметры напротив пунктов "Горизонтальное выравнивание" - left, "Вертикальное выравнивание" - top.
На этой же вкладке зададим отступы текста:
Сверху - 3
Слева - 17
Рис. 12
Логотип сайта
Логотип можно поставить двумя способами.
Первый: Зайдем в карту дизайна Ctrl+F3. Кликнем правой кнопкой на блок логотипа и нажмем "Редактировать блок", Открывает окно "вставить рисунок", загружаем изначально заготовленный рисунок с диска (логотип должен быть уменьшен до необходимых размеров), жмем "Сохранить"
Второй: В обычном режиме редактирования заходим в верхнее меню "Редактировать\логотип сайта", Открывает окно "вставить рисунок",, загружаем изначально заготовленный рисунок с диска (логотип должен быть уменьшен до необходимых размеров), жмем "Сохранить"
Рис. 13
Рис. 14
Теперь нам нужно выставить размеры Блока логотипа. Открыв дерево дизайна F4, зайдем в пункт BODY (тело сайта) и найдем нужный нам блок. Все вложенные таблицы, слои, и элементы сайта находятся во вкладке BODY. Раскрывайте нужные пункты и настраивайте тот элемент, который вам необходим (при этом он будет выделяться красной рамкой). Выделив элемент siteLogotype в дереве дизайна, зайдем на вкладку "Позиционирование" и зададим необходимые параметры:
Общая ширина - 111
Общая высота - 110
Отступ сверху - 25
Совет: Для быстрого поиска в дереве дизайна необходимой ячейки или элемента сайта зажмите Ctrl и, нажмите левой кнопкой мыши на ту ячейку, в которой расположен нужный вам блок. Если не получилось с первого раза, нажмите еще раз. Проверьте, чтобы дерево дизайна было активно (F4).
Рис. 15
Вверх
Первый: Зайдем в карту дизайна Ctrl+F3. Кликнем правой кнопкой на блок логотипа и нажмем "Редактировать блок", Открывает окно "вставить рисунок", загружаем изначально заготовленный рисунок с диска (логотип должен быть уменьшен до необходимых размеров), жмем "Сохранить"
Второй: В обычном режиме редактирования заходим в верхнее меню "Редактировать\логотип сайта", Открывает окно "вставить рисунок",, загружаем изначально заготовленный рисунок с диска (логотип должен быть уменьшен до необходимых размеров), жмем "Сохранить"
Рис. 13
Рис. 14
Теперь нам нужно выставить размеры Блока логотипа. Открыв дерево дизайна F4, зайдем в пункт BODY (тело сайта) и найдем нужный нам блок. Все вложенные таблицы, слои, и элементы сайта находятся во вкладке BODY. Раскрывайте нужные пункты и настраивайте тот элемент, который вам необходим (при этом он будет выделяться красной рамкой). Выделив элемент siteLogotype в дереве дизайна, зайдем на вкладку "Позиционирование" и зададим необходимые параметры:
Общая ширина - 111
Общая высота - 110
Отступ сверху - 25
Совет: Для быстрого поиска в дереве дизайна необходимой ячейки или элемента сайта зажмите Ctrl и, нажмите левой кнопкой мыши на ту ячейку, в которой расположен нужный вам блок. Если не получилось с первого раза, нажмите еще раз. Проверьте, чтобы дерево дизайна было активно (F4).
Рис. 15
Переименовывание пунктов дерева дизайна
Раскрывая пункт BODY, вы заметили, что вы названия ячеек, таблиц, колонок заданы по-английски. Эти имена программа выставляет изначально, когда вы создаете новую таблицу. Для тех, кому непривычно искать и редактировать сайт в таком варианте, пункты можно переименовать на русские.
Для этого:
Зайдите в карту дизайна Ctrl+F3, нажмите F4. И, раскрывая пункт BODY, выделяйте и переименовывайте каждый пункт. Необходимые нам значения задаются в ячейке "Имя", что находится чуть выше. Ячейку "ID" ни в коем случае не изменяйте, иначе вы нарушите структуру сайта. Имена пунктам меню лучше задавать нейтральные, т.к потом у вас может возникнуть желание поменять элементы в колонках и ячейках. Там, где стоит значение "#Table" - это таблица, называйте также - Например: Общая таблица, Таблица контента, Левая таблица. В таблице всегда присутствует ячейка - она может не выделяться, если она одна. Ячейка в свою очередь содержит колонки.
Опирайтесь на ту структуру сайта, которые вы задали изначально, определяя, где стоит шапка, где подвал. Когда меняете Имя пункта, нажимайте кнопку "Применить", а не Enter. В этом случае это разные вещи. Переименуйте все пункты дерева дизайна по вышеописанному примеру.
Рис. 16
Рис. 17
Рис. 18
После того, как все будет готово, нажмите внизу кнопку "Сохранить"
Вверх
Для этого:
Зайдите в карту дизайна Ctrl+F3, нажмите F4. И, раскрывая пункт BODY, выделяйте и переименовывайте каждый пункт. Необходимые нам значения задаются в ячейке "Имя", что находится чуть выше. Ячейку "ID" ни в коем случае не изменяйте, иначе вы нарушите структуру сайта. Имена пунктам меню лучше задавать нейтральные, т.к потом у вас может возникнуть желание поменять элементы в колонках и ячейках. Там, где стоит значение "#Table" - это таблица, называйте также - Например: Общая таблица, Таблица контента, Левая таблица. В таблице всегда присутствует ячейка - она может не выделяться, если она одна. Ячейка в свою очередь содержит колонки.
Опирайтесь на ту структуру сайта, которые вы задали изначально, определяя, где стоит шапка, где подвал. Когда меняете Имя пункта, нажимайте кнопку "Применить", а не Enter. В этом случае это разные вещи. Переименуйте все пункты дерева дизайна по вышеописанному примеру.
Рис. 16
Рис. 17
Рис. 18
После того, как все будет готово, нажмите внизу кнопку "Сохранить"
Загрузка фоновых изображений
Вначале работы обязательной деталью является задание цвета для пункта BODY в дереве дизайна (F4). Выделив его, задайте цвет в нижней части панели на вкладке "Фон"
В средней части сайта справа у нас должно располагаться фото. Поставим его. Нажмите F4. Выделите нужный блок (Ctrl+левая кнопка мыши), либо раскройте и найдите в пункте BODY. Выделив нужную ячейку таблицы, зайдем на вкладку "фон" в нижней части экрана, и загрузим уже подготовленное изображение (нужных размеров).
Должен получиться следующий вариант (рис. 19)
Рис. 19
В дальнейшем, можно легко заменить фотографию на другую, изначально подготовив необходимый размер.
Совет: Удалить Фоновое изображение можно легко, стерев из пункта "Изображение" наименование фотографии и нажав "Применить"
Сделаем визуальное отделение "подвала" (нижней части сайта). Откроем пункт BODY и найдем Таблицу подвала. Выделив ее красной рамкой, зайдем на вкладку фон и добавим изначально заготовленный рисунок. Напротив параметра "повторение" поставим "repeat-x". Т.к. сам рисунок представляет собой пару точек, которые мы хотим пустить по всей оси горизонталь и сделать пунктирную линию.
Рис. 20
Затем зайдем на вкладку Позиционирование и поставим отступ сверху - 30, снизу - 30.
Для того, чтобы элементы в таблице подвала не смешивались с рисунком, отодвинем их ниже. Это блок Copyright и меню. Найдем в дереве дизайна таблицу подвала, в частности меню и на вкладке Позиционирование зададим отступ сверху "10", снизу "10". Также это можно сделать для элементов и блоков, которые располагаются под меню и блоков Copyright. В подвале обычно располагаются счетчики (блок статистики), контактная информация, ссылки на программы.
Вверх
В средней части сайта справа у нас должно располагаться фото. Поставим его. Нажмите F4. Выделите нужный блок (Ctrl+левая кнопка мыши), либо раскройте и найдите в пункте BODY. Выделив нужную ячейку таблицы, зайдем на вкладку "фон" в нижней части экрана, и загрузим уже подготовленное изображение (нужных размеров).
Должен получиться следующий вариант (рис. 19)
Рис. 19
В дальнейшем, можно легко заменить фотографию на другую, изначально подготовив необходимый размер.
Совет: Удалить Фоновое изображение можно легко, стерев из пункта "Изображение" наименование фотографии и нажав "Применить"
Сделаем визуальное отделение "подвала" (нижней части сайта). Откроем пункт BODY и найдем Таблицу подвала. Выделив ее красной рамкой, зайдем на вкладку фон и добавим изначально заготовленный рисунок. Напротив параметра "повторение" поставим "repeat-x". Т.к. сам рисунок представляет собой пару точек, которые мы хотим пустить по всей оси горизонталь и сделать пунктирную линию.
Рис. 20
Затем зайдем на вкладку Позиционирование и поставим отступ сверху - 30, снизу - 30.
Для того, чтобы элементы в таблице подвала не смешивались с рисунком, отодвинем их ниже. Это блок Copyright и меню. Найдем в дереве дизайна таблицу подвала, в частности меню и на вкладке Позиционирование зададим отступ сверху "10", снизу "10". Также это можно сделать для элементов и блоков, которые располагаются под меню и блоков Copyright. В подвале обычно располагаются счетчики (блок статистики), контактная информация, ссылки на программы.
Дополнительные разделы
Блок Copyright и некоторые другие элементы сайта изначально скрыты (Авторизация, Поиск и др.). Для того, чтобы их включить, необходимо зайти в верхнее меню "Редактировать\дополнительные разделы", нажать на нужный элемент, и в открывшемся окне снизу поставить галочку "показать" (рис. 21)
Блок Copyright включается также, но нет галочки. Достаточно написать текст после слов "Copyright ©". Напишем (к примеру) "Copyright © My company 2009".
Рис.21
После этого также найдем DIV (слой), в котором содержится блок Copyright в дереве дизайна и зададим ему отступ сверху "10", и слева "20" на вкладке "Позиционирование".
На вкладке шрифт задаем:
Цвет: #666666
Размер: 11
Вес шрифта: normal
Начертание: Arial
Под главным меню в подвале есть блок "ссылка на SiteEdit". Зададим ему такие же настройки, как у блока Copyright. Отступ слева можно задать "5"
Авторизация. Этот блок работает в двух режимах, т.к. должен показывать соответствующие значения и ячейки до того, как пользователь авторизовался или зарегистрировался на сайте, и после авторизации (часть приветствия). Включим блок авторизации, зайдя в верхнем меню в "Редактировать\дополнительные разделы\Блок авторизация", и поставив галочку пока в режиме "Вход авторизации", нажмем "Сохранить" (Рис. 22) После настроек дизайна можно будет зайти сюда же и включить режим "Выход авторизации".
Рис. 22
Настройка дизайна блока авторизации
Откроем F4 и раскроем пункт "Формы (Поиск и Авторизация)". Выделим пункт "Авторизация", и зададим ему размеры на вкладке Позиционирование, ширина 182. Отступы: сверху - 30. На вкладке "Расположение текста" ставим позиционирование "Горизонтальное выравнивание - left", "Вертикальное выравнивание - top". Назначая настройки на этом пункте, мы назначаем общие настройки для двух блоков Выход и Вход Авторизации.
Настраиваем пункт "Страница вход"
Заголовок: (вкладка шрифт)
Цвет: #666666
Размер: 12
Вес шрифта: normal
Начертание: Arial
Заголовок: (вкладка Позиционирование)
Отступ снизу - 5
Тип контейнера: block
Ширина: 100%
Пункт "логин" и "пароль" (настройки одни и те-же)
Вкладка "позиционирование":
Отступы: Сверху 4
Ширина: 120
Высота: 18
Выравнивание: left
Вкладка "шрифт"
Размер: 12
Начертание: Arial
Вкладка "граница"
Толщина линии: 1
Цвет обрамления: #808080
Стиль: Solid
Кнопка
Вкладка "позиционирование":
Отступы: Сверху - 4, Сверху - 4
Ширина:41
Высота: 23
Выравнивание: left
Совет: Если кнопка имеет конкретный рисунок, загруженный как фон, то необходимо указать размеры кнопке во вкладке "Позиционирование", либо задать отступы от Текста во вкладке "Расположение текста"
Вкладка "Граница":
Стиль: none
Вкладка "Шрифт"
Цвет: #ffffff
Размер: 12
Вес шрифта: normal
Начертание: Arial
Вкладка "фон"
Добавляем изначально заготовленный рисунок
Пункт "Запомнить пароль":
Вкладка "Позиционирование":
Ширина 50%
Выравнивание: left
Радиокнопка
Вкладка "Позиционирование":
Выравнивание: left
Отступ сверху - 7
Текст
Вкладка "Позиционирование":
Выравнивание: left
Отступ сверху - 10
Вкладка Шрифт
Цвет: #666666
Размер: 11
Вес шрифта: normal
Начертание: Arial
Ссылка
Вкладка "Позиционирование":
Выравнивание: right
Отступ сверху - 10
Отступ справа - 10
Вкладка Шрифт
Цвет: #666666
Размер: 11
Вес шрифта: normal
Начертание: Arial
Рис. 23
Рис. 24
Рис. 25
Совет: если вы будете в дальнейшем менять ширину отдельных элементов, то общий размер блока также необходимо изменить. Для Блока авторизации, поиска важно указывать общий размер, дабы исключить неадекватное отображение в браузерах
Страницу Выход Авторизации вы сможете настроить по такому же принципу (не забудьте включить в дополнительных разделах этот блок).
Поиск по сайту. Предварительно включим блок. Откроем F4 и раскроем пункт "Формы (Поиск и Авторизация)", далее "Форма Поиск по сайту", он выделится красной рамкой
"Форма Поиск по сайту"
Вкладка "Позиционирование":
Сверху - 5, Справа - 40
Ширина: 180
Заголовок (лишние настройки уберите, те, которые не указаны ниже)
Вкладка "Позиционирование":
Сверху - 5
Выравнивание: left
Вкладка "Шрифт":
Цвет: #666666
Размер: 12
Вес шрифта: normal
Начертание: Arial
Форма
Вкладка "Позиционирование":
Сверху - 2, Справа - 1
Ширина: 80
Высота: 18
Вкладка "Шрифт":
Размер: 12
Вес шрифта: normal
Кнопка
Вкладка "Шрифт":
Цвет: #ffffff
Размер: 12
Вес шрифта: normal
Начертание: Arial
Вкладка "Позиционирование":
Сверху - 3
Ширина: 41
Высота: 23
Должен получиться следующий вариант (Рис. 26)
Рис. 26
Если на сайте предполагается присутствие боковых информационных блоков, нам нужно предусмотреть, как они будут оформлены по дизайну. Текст мы уже настроили. Добавим отступы. Для того, чтобы видеть, что происходит с наполнением, добавим текстовую информацию. Нажмем желтую иконку "Добавить раздел" при включенном режиме (F9), добавим раздел (к примеру "Новости-Форма Новостей") и скопируем часть текста из текстового редактора любой другой программы (к примеру из Word). Слева в боковой колонке чуть ниже Меню у нас поставлен контент-1. В дереве дизайна найдем колонку, в которой находятся меню и контент-1, и зададим отступы контенту-1 слева и справа, используя вкладку "Позиционирование"
Рис. Настройка контента-1
СМОТРЕТЬ следующий урок
Вверх
Блок Copyright включается также, но нет галочки. Достаточно написать текст после слов "Copyright ©". Напишем (к примеру) "Copyright © My company 2009".
Рис.21
После этого также найдем DIV (слой), в котором содержится блок Copyright в дереве дизайна и зададим ему отступ сверху "10", и слева "20" на вкладке "Позиционирование".
На вкладке шрифт задаем:
Цвет: #666666
Размер: 11
Вес шрифта: normal
Начертание: Arial
Под главным меню в подвале есть блок "ссылка на SiteEdit". Зададим ему такие же настройки, как у блока Copyright. Отступ слева можно задать "5"
Авторизация. Этот блок работает в двух режимах, т.к. должен показывать соответствующие значения и ячейки до того, как пользователь авторизовался или зарегистрировался на сайте, и после авторизации (часть приветствия). Включим блок авторизации, зайдя в верхнем меню в "Редактировать\дополнительные разделы\Блок авторизация", и поставив галочку пока в режиме "Вход авторизации", нажмем "Сохранить" (Рис. 22) После настроек дизайна можно будет зайти сюда же и включить режим "Выход авторизации".
Рис. 22
Настройка дизайна блока авторизации
Откроем F4 и раскроем пункт "Формы (Поиск и Авторизация)". Выделим пункт "Авторизация", и зададим ему размеры на вкладке Позиционирование, ширина 182. Отступы: сверху - 30. На вкладке "Расположение текста" ставим позиционирование "Горизонтальное выравнивание - left", "Вертикальное выравнивание - top". Назначая настройки на этом пункте, мы назначаем общие настройки для двух блоков Выход и Вход Авторизации.
Настраиваем пункт "Страница вход"
Заголовок: (вкладка шрифт)
Цвет: #666666
Размер: 12
Вес шрифта: normal
Начертание: Arial
Заголовок: (вкладка Позиционирование)
Отступ снизу - 5
Тип контейнера: block
Ширина: 100%
Пункт "логин" и "пароль" (настройки одни и те-же)
Вкладка "позиционирование":
Отступы: Сверху 4
Ширина: 120
Высота: 18
Выравнивание: left
Вкладка "шрифт"
Размер: 12
Начертание: Arial
Вкладка "граница"
Толщина линии: 1
Цвет обрамления: #808080
Стиль: Solid
Кнопка
Вкладка "позиционирование":
Отступы: Сверху - 4, Сверху - 4
Ширина:41
Высота: 23
Выравнивание: left
Совет: Если кнопка имеет конкретный рисунок, загруженный как фон, то необходимо указать размеры кнопке во вкладке "Позиционирование", либо задать отступы от Текста во вкладке "Расположение текста"
Вкладка "Граница":
Стиль: none
Вкладка "Шрифт"
Цвет: #ffffff
Размер: 12
Вес шрифта: normal
Начертание: Arial
Вкладка "фон"
Добавляем изначально заготовленный рисунок
Пункт "Запомнить пароль":
Вкладка "Позиционирование":
Ширина 50%
Выравнивание: left
Радиокнопка
Вкладка "Позиционирование":
Выравнивание: left
Отступ сверху - 7
Текст
Вкладка "Позиционирование":
Выравнивание: left
Отступ сверху - 10
Вкладка Шрифт
Цвет: #666666
Размер: 11
Вес шрифта: normal
Начертание: Arial
Ссылка
Вкладка "Позиционирование":
Выравнивание: right
Отступ сверху - 10
Отступ справа - 10
Вкладка Шрифт
Цвет: #666666
Размер: 11
Вес шрифта: normal
Начертание: Arial
Рис. 23
Рис. 24
Рис. 25
Совет: если вы будете в дальнейшем менять ширину отдельных элементов, то общий размер блока также необходимо изменить. Для Блока авторизации, поиска важно указывать общий размер, дабы исключить неадекватное отображение в браузерах
Страницу Выход Авторизации вы сможете настроить по такому же принципу (не забудьте включить в дополнительных разделах этот блок).
Поиск по сайту. Предварительно включим блок. Откроем F4 и раскроем пункт "Формы (Поиск и Авторизация)", далее "Форма Поиск по сайту", он выделится красной рамкой
"Форма Поиск по сайту"
Вкладка "Позиционирование":
Сверху - 5, Справа - 40
Ширина: 180
Заголовок (лишние настройки уберите, те, которые не указаны ниже)
Вкладка "Позиционирование":
Сверху - 5
Выравнивание: left
Вкладка "Шрифт":
Цвет: #666666
Размер: 12
Вес шрифта: normal
Начертание: Arial
Форма
Вкладка "Позиционирование":
Сверху - 2, Справа - 1
Ширина: 80
Высота: 18
Вкладка "Шрифт":
Размер: 12
Вес шрифта: normal
Кнопка
Вкладка "Шрифт":
Цвет: #ffffff
Размер: 12
Вес шрифта: normal
Начертание: Arial
Вкладка "Позиционирование":
Сверху - 3
Ширина: 41
Высота: 23
Должен получиться следующий вариант (Рис. 26)
Рис. 26
Если на сайте предполагается присутствие боковых информационных блоков, нам нужно предусмотреть, как они будут оформлены по дизайну. Текст мы уже настроили. Добавим отступы. Для того, чтобы видеть, что происходит с наполнением, добавим текстовую информацию. Нажмем желтую иконку "Добавить раздел" при включенном режиме (F9), добавим раздел (к примеру "Новости-Форма Новостей") и скопируем часть текста из текстового редактора любой другой программы (к примеру из Word). Слева в боковой колонке чуть ниже Меню у нас поставлен контент-1. В дереве дизайна найдем колонку, в которой находятся меню и контент-1, и зададим отступы контенту-1 слева и справа, используя вкладку "Позиционирование"
Рис. Настройка контента-1
СМОТРЕТЬ следующий урок