Уроки по работе с программой SiteEdit

Компания Edgestile

Уроки по работе с программой SiteEdit

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

2009 г.

Работа с картой дизайна

Содержание

- Подготовка

- Удаление имеющейся карты дизайна

- Основная таблица

- Рабочая таблица

- Таблица шапки

- Содержательная таблица

- Правая таблица

- Таблица подвала

- Работа со слоями (DIV)

- Удаление ненужных границ

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

Рис. 2

Попробуем воплотить в жизнь данный макет.

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

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

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

Посмотрим на примере (рис. 3), как разрезан данный макет.

Рис. 3

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

Удаление имеющейся карты дизайна

Создадим для начала новый проект в программе SiteEdit. Можете повторить действия, описанные в предыдущей главе. Перед нами стандартная карта дизайна (Рис. 1). Зайдем в меню «Оформление\Редактирование карты дизайна» (горячая клавиша Ctrl+F3). Если нам нужна кардинально новая карта дизайна, имеющуюся можно смело удалить.

Совет: Если вы новичок, проводите все действия, находясь на вкладке «Визуальный режим». Режим «Исходный код» хорош для профессионалов. В нем не желательно допускать даже минимальные ошибки.

Чтобы удалить все сразу, нажмите левой кнопкой в любое место карты, затем Ctrl+A (выделение всех объектов) и Delete. Перед глазами должен быть чистый лист. Построение Сайта начинается с таблицы, поскольку они дают возможность легко управлять содержимым сайта и не давать ему расползаться по своей воле. Умелое построение таблиц влияет на одинаковое и правильное отображение сайта в трех основных браузерах – Mozilla, Internet Explorer и Opera.

Основная таблица

Большинство сайтов правильней располагать по центру экрана. Поэтому основные несущие таблицы не забывайте располагать по центру.

Есть два варианта центровки элементов:

1)  В карте дизайна вставляем несущую таблицу и ставим в редакторе таблиц позиционирование элементов внутри таблицы по центру (в редакторе таблицы правый нижний угол: Горизонталньое выравнивание - center). Большинство элементов в этой таблице будут располагаться по центру

2)  В обычный режиме редактирование сайта выделите элементы, который хотите отцентровать (таблица, слой, рисунок) в нижней панели зайдите на вкладку "Позиционирование" и выставьте следующие параметры у пункта "Отступы". Слева: "auto", Справа "auto".

Правой кнопкой мыши кликнем в любое место экрана и в списке выберем "Вставить таблицу". В появившемся окне выставим необходимые параметры (рис. 4)

Рис. 4

В левом верхнем углу поставим напротив пунктов Строки: «1» и Колонки: «1». В правом нижнем углу выставим позиционирование элементов, находящихся в таблице. Напротив ячейки Вертик.: «top» (прижать к верху), напротив ячейки Гориз.: «center» (выровнять по центру)

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

Для данной таблицы больше никаких параметров задавать не нужно. Жмем «ОК». Таблица создана.

Рабочая таблица

Создаем внутри таблицы еще одну. Это будет рабочая таблица нашего сайта, 3 строки, 1 колонка. Вверху стоит размер 100% по ширине (в верхних двух ячейках задается общий размер всей таблицы). Поменяем размер Ширина на 80%, чтобы сайт не был сильно широким и имел свободные границы по бокам. Ставим выравнивание для всех - В нижнем углу - Вертикальное выравнивание «top», Горизонтальное – «left». Жмем «ОК». Таблица создана.

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

Должен получится следующий вариант (рис. 5)

Рис. 5

Таблица шапки

Теперь создаем вложенные таблицы в рабочую таблицу, состоящую из 1 колонки и 3х строк (которую создавали второй). В верхнюю часть – Шапку – Вставляем таблицу шапки, состоящую из 3 колонок и 1 строки. В этой таблице у нас будет располагаться логотип, Заголовок, подзаголовок и блок авторизации. Ставим высоту таблицы примерно 170 пикселей (достаточно поставить просто число без знака %). Ширину можно выставить в процентном соотношении.

Совет: индивидуальные размеры для отдельной строки или колонки указываются в нижней части окна «Редактирования таблицы». Если вверху указано общее значение для всей таблицы 100%, то снизу полагается задавать процентные числа, и оставлять одну колонку без размера. Если размеры жесткие для всей таблице, в этом случае все колонки должны иметь конкретный размер, который в сумме дает общий.

Левая колонка таблицы шапки будет по ширине 25%, правая по ширине – 25%. Среднюю колонку оставим без размера по ширине, для того, чтобы она имела свободу. При общих настройках таблицы (задаются вверху окна) 100% таблица будет растягиваться на положенную ширину, используя свободное пространство. Высоту таблицы шапки ставим приблизительно – 170 (в пикселях).

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

Ставим соответствующее выравнивание для колонок таблицы. Левая – top, center; Средняя – top, left; Правая – top, center.

Совет: Чтобы отредактировать таблицу, поменять ее настройки, нажмите правой кнопкой мыши на нижнюю ее пунктирную границу, и в появившемся списке выберите «Редактировать блок»

Должен получиться следующий вариант (рис. 6)

Рис. 6

Содержательная таблица

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

Выравнивание ставим: Левая – top, center; Правая – top, left. Ширину левой колонки ставим 25%. Жмем «ОК». Таблица создана.

В левой колонке ставим следующие элементы: «Меню-Универсальное меню» и «Content-1» (обычный или глобальный). Для данного случая больше подходит универсальное меню, т. к. высота колонки может меняться, в дальнейшем у нас может возникнуть потребность в многоуровневом меню. Content выбираем глобальный (хотя это может решаться по желанию разработчика).

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

Правая таблица

В правой колонке только что поставленной таблицы ставим еще одну таблицу (3 строки, 1 колонки). В верхней строке будет располагаться фотография. Поскольку мы знаем размеры фото, можно сразу же поставить высоту и ширину ячейки. В Средней строке будет располагаться заголовок и блок поиска, для которых создадим отдельную таблицу (1 строка, 2 колонки, каждая по ширине 50%, выравнивание – в левой колонке – top, left; в правой колонке – top, right), чтобы оба элемента были в противоположных сторонах. В нижней строке будет располагаться основная информация. После этих действий располагаем необходимые нам элементы там, где они должна быть: Заголовок страницы, блок поиска, Начальный текст страницы, Content-0, Завершающий текст страницы

Совет: В любом проекте рядом должен быть Content-0, Перед ним Желательно поставить Начальный текст страницы, после Content-0 ставится Завершающий текст страницы. Начальный и завершающий текст дают возможность располагать на странице дополнительную информацию (акции, объявления, реклама, высказывания). Если не заполнять текст позже в этом блоке, то блок не будет занимать место на странице.

Должен получиться следующий вариант (рис. 7)

Рис. 7

Таблица подвала

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

Левая колонку по ширине выставляем 25%. Общее значение для таблицы по ширине – 100%. Высоту можно выставить по желанию, к примеру – 80. Выравнивание в ячейках – left, top. Жмем «ОК». Таблица создана.

Выставляем необходимые элементы, которые будут располагаться в этой таблице. В левой колонке ставим блок «Copyright». В правой колонке – Меню\Главное меню\Горизонтальное.

Совет: Главное меню является статическим, не имеющим подуровней, и часто, используется как дополнительное.

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

Должен получиться следующий вариант (рис. 8)

Рис. 8

Работа со слоями (DIV)

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

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

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

Продолжим. Блок «Copyright» является одной из переменных, которую желательно также вставить в слой (DIV). Щелкнем правой кнопкой мыши рядом с блоком «Copyright» и выберем из списка «Вставить слой». После установки в нем написан текст, который можно стереть (поставив курсор внутрь блока и удалить текст, так, как мы это делаем в программе Word).

Пример (рис. 9)

рис. 9

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

Должен получиться следующий вариант (рис. 10)

Рис. 10

На данный момент работа по построению общей структуры сайта и наполнению его необходимыми элементами закончена. Нажимаем кнопку «Сохранить».

Удаление ненужных границ

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

1)  В визуальном режиме нажимаем правой кнопкой на нижнюю грань необходимой таблицы, жмем «Редактировать блок». В открывшемся окне в правой части меняем «1» на «0». Жмем Сохранить. Далее продолжаем тоже действие с остальными таблицами. Сохраняем изменения в карте дизайна.

Рис. Границы таблицы 1

2)  В режиме «Исходный код» заходим в верхнее меню: Поиск\Заменить. В открывшемся небольшом окне прописываем: в верхней ячейке - border="1", в нижней значение, на которое меняем - border="0". Жмем ОК. И везде, где встречается это значение, программа сама заменит и тем самым, уберет границы. Сохраняем изменения в карте дизайна (см. Рис. Границы таблицы 1, и рис. Границы таблицы 2).

Рис. Границы таблицы 2

Рис. Границы таблицы 3

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