Уроки по работе с программой SiteEdit Разработка и описание: Дизайн студия компании Edgestile 2009 г. Создание дизайна сайта



Скачать 115.34 Kb.
Дата04.07.2013
Размер115.34 Kb.
ТипУрок
Компания Edgestile

Уроки по работе с программой SiteEdit
Разработка и описание: Дизайн студия компании Edgestile

2009 г.

Создание дизайна сайта
Содержание
- Заголовки сайта

- Логотип сайта

- Переименовывание пунктов дерева дизайна

- Загрузка фоновых изображений

- Дополнительные разделы

После построения карты сайта нам необходимо насытить наш будущий сайт графикой и минимальным наполнением.

Основные инструменты для редактирования и создания дизайна сайта:

Клавиша F4 – открытие панели «дерево дизайна»

Клавиша F9 – включение режима иконок редактирования
Заголовки сайта
Начнем по порядку. Пропишем заголовок, подзаголовок. Для этого вы можете два раза кликнуть мышкой на объект (к примеру заголовок), либо нажать (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

Логотип сайта
Заходим в верхнее меню "Редактировать\логотип сайта", В открывшемся окне "вставить рисунок" загружаем изначально заготовленный рисунок с диска (логотип должен быть уменьшен до необходимых размеров), жмем "Сохранить"


Рис. 13

Размеры логотипу выставлять не обязательно! Если вы выделите в дереве дизайна логотип и зайдете на вкладку "Позиционирование" удалите общую ширину и высоту логотипа. В противном случае ваш рисунок будет искажаться.
Совет: Для быстрого поиска в дереве дизайна необходимой ячейки или элемента сайта зажмите Ctrl и, нажмите левой кнопкой мыши на ту ячейку, в которой расположен нужный вам блок. Проверьте, чтобы дерево дизайна было активно (F4).
Рис. 15

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

Зайдите в карту дизайна 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. В подвале обычно располагаются счетчики (блок статистики), контактная информация, ссылки на программы.

Дополнительные разделы
Блок 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


Уроки выложены на сайте www.help.siteedit.ru

Похожие:

Уроки по работе с программой SiteEdit Разработка и описание: Дизайн студия компании Edgestile 2009 г. Создание дизайна сайта iconУроки по работе с программой SiteEdit Разработка и описание: Дизайн студия компании Edgestile 2009 г. Работа с картой дизайна
Попробуем создать сайт туристической компании. Рассмотрим на примере уже разработанного дизайна. Представим, что у нас на руках уже...
Уроки по работе с программой SiteEdit Разработка и описание: Дизайн студия компании Edgestile 2009 г. Создание дизайна сайта iconБриф на создание уникального дизайна сайта, Web-студия «Интернет-клиент»
Заказчику и его целевой аудитории. Это не всегда достижимо, ведь требования
Уроки по работе с программой SiteEdit Разработка и описание: Дизайн студия компании Edgestile 2009 г. Создание дизайна сайта iconКоммерческое предложение на разработку веб-сайта Общие положения Мы предлагаем Вам создание сайта «под ключ»
Мы предлагаем Вам создание сайта «под ключ» – комплексную услугу, включающую в себя разработку графического дизайна, техническую...
Уроки по работе с программой SiteEdit Разработка и описание: Дизайн студия компании Edgestile 2009 г. Создание дизайна сайта iconОзнакомится с правилами формирования стоимости предварительной сайта
Разработка сайта включает этапы: дизайн, сборка системы управления сайтом, верстка и программная реализация, отгрузка и настройка...
Уроки по работе с программой SiteEdit Разработка и описание: Дизайн студия компании Edgestile 2009 г. Создание дизайна сайта iconТех задание на создание сайта Сайт необходим для сбора отзывов о компаниях-работодателях. Структура сайта
Администратор сайта добавляет Регионы, Города и компании-работодатели
Уроки по работе с программой SiteEdit Разработка и описание: Дизайн студия компании Edgestile 2009 г. Создание дизайна сайта iconУчебное пособие по курсу «дизайн интерьера»
Теоретические основы дизайна интерьера. Как создать современный интерьер? Сущность дизайна. Дизайн для потребителя. Определение
Уроки по работе с программой SiteEdit Разработка и описание: Дизайн студия компании Edgestile 2009 г. Создание дизайна сайта iconНазвание вашей компании
Разработка дизайна логотипа (разработка 10 индивидуальных вариантов логотипов*), без персонажа
Уроки по работе с программой SiteEdit Разработка и описание: Дизайн студия компании Edgestile 2009 г. Создание дизайна сайта iconЛекция №8 веб-дизайн
Очень важно удостовериться, что цветовая схема дизайна сайта находится в соответствии с контентом и целевой аудиторией проекта. Вы...
Уроки по работе с программой SiteEdit Разработка и описание: Дизайн студия компании Edgestile 2009 г. Создание дизайна сайта icon«Web- проектирование и Web-дизайн. Пакет FrontPage2003. Управление Web-сайтом»
Цель работы: Ознакомление с основами Web-проектирования и Web-дизайна. Формирование навыков использования пакета FrontPage 2002/2000...
Уроки по работе с программой SiteEdit Разработка и описание: Дизайн студия компании Edgestile 2009 г. Создание дизайна сайта iconРуководство пользователя стр. Содержание Модуль «Макеты дизайна сайта» 2
...
Разместите кнопку на своём сайте:
ru.convdocs.org


База данных защищена авторским правом ©ru.convdocs.org 2016
обратиться к администрации
ru.convdocs.org