SiteEdit
       Рус  Eng

On-line руководство
по созданию сайтов

Кроссбраузерность

Категории:

Подстройка сайта под браузеры

Отступы

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

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

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

  1. Если вы сдвигаете информацию с помощью вкладки "Расположение текста" на определенную величину, то уменьшайте ширину или высоту этого элемента ровно на столько, на сколько пикселей задаете отступ. К примеру: ширина элемента 500 пикселей. Вы задаете отступы на вкладке "Расположение текста" слева и справа по 25 пикселей. Ширину этого элемента нужно, соответственно, уменьшить на 50 пикселей. Получится 450 пикселей. Тот же самый принцип применяйте, если задайте отступы сверху и снизу для элемента, имеющего ограниченную высоту (заданную в пикселях).
  2. Либо вы можете зайти внутрь элемента, которому задан жесткий размер, и сдвигать его вложенное информационное содержание (если у вас это отдельный блок: контент, слой и т.д.) с помощью вкладки "позиционирование", задавая отступы.
Данное правило используйте, когда настраиваете меню. Основные настройки задаются "Пункту меню", поэтому здесь есть такие же два варианта отступов: либо с помощью вкладки "Расположение текста", либо задание отступов для вложенного пункта "Текст" с использованием вкладки "Позиционирование".

На ниже представленном рисунке представлен пример задания отступов в меню. Настраиваем "Пункт меню". Изначально загрузили фоновое изображение и выставили жесткие размеры: 200 пикселей по ширине и 50 пикселей по высоте, исходя из размеров картинки. Затем задали отступы для внутреннего содержания с помощью вкладки "Расположение текста": слева и сверху по 15 пикселей. На рисунке видим, что отступы добавили нежелательные свободные промежутки справа и снизу пунктов меню, как раз на 15 пикселей. Данные промежутки могли бы сдвигать соседние элементы сайта.



НЕПРАВИЛЬНО!!


Поэтому у "Пункта меню" нужно уменьшить ширину и высоту ровно на столько, на сколько мы задали отступы сверху и слева. Т.е. получается ширина уже не 200, а 185 пикселей, высота не 50, а 35 пикселей. На рисунке ниже мы это видим. По выделению красной рамки объекта можно судить, существуют ли нежелательные отступы.



ПРАВИЛЬНО!!


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

Ошибки при работе в текстовом редакторе

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


Вставка текста

Вставляя текст из стороннего источника, правильней использовать вкладку "HTML" текстового редактора. Особенно это касается вставки текста из программы Word. Если вы привыкли использовать вкладку "Текст", можете воспользоваться инструментом "Фильтр" после вставки текста из "Word". Он убирает часть лишнего кода. Фильтр не позволяет убрать весь лишний код на 100%, но помогает решить проблемы сторонних настроек. В этом случае то оформление, которое мы задали для сайта ранее с помощью дерева дизайна, недействительно. Приоритет будет у настроек, заданных непосредственно в текстовом редакторе. В некоторых случаях лишние настройки могут испортить дизайн текстовой части сайта.

На рис.1 мы видим информацию, вставленную из программы "Word" на вкладку "Текст".
На рис.2 мы видим, как выглядит информация, вставленная из программы "Word" на вкладку "Текст" без обработки. Уточним, что черный текст - это наша полезная информация, цветной текст - лишние настройки. В данном случае тексту присвоено совершенно другое начертание, нежели то, которое задавали мы для всего сайта: другой размер + лишние отступы.
На рис.3 мы видим, как выглядит информация, вставленная из программы "Word" на вкладку "Текст" после обработки ее фильтром. 80% лишних настроек удалено программой SiteEdit. Но все равно остались лишние настройки.


Рис 1. Вставленный текст из программы "Word" без обработки
(использование вкладки "Текст")



Рис 2. Вставленный текст из программы "Word" без обработки
(использование вкладки "Текст")



Рис 3. Вставленный текст из программы "Word" с обработкой фильтром
(использование вкладки "Текст")


Более правильный и профессиональный подход - работа на вкладке "HTML". Вставляя текст из программы "Word" или другого стороннего источника, используйте включенную вкладку "HTML". Это позволит полностью избавиться от всех настроек дизайна. После чего будет нужно самостоятельно настроить лишь те настройки, которые нам необходимы (например, разграничить текстовые части отступами, добавить ссылки, выделить жирным важные слова и т.д.).


Рис 4. Вставленный текст из программы "Word"
(использование вкладки "HTML")



Рис 5. Вставленный текст из программы "Word" после настроек дизайна вручную
(использование вкладки "HTML")


На рис. 4 мы видим информацию, вставленную из программы "Word" на вкладку "HTML". Настроек дизайна нет.
На рис. 5 мы видим информацию, вставленную из программы "Word" на вкладку "HTML" после задания ей настроек дизайна вручную.


Вставка изображений

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

1 способ. Если у вас есть раздел или запись, к которой нужно прикрепить одно изображение. Для этого нужно использовать стандартный инструментарий. Зайдем в текстовый редактор. Снизу есть панель "Добавить файл рисунка". Для больших изображений рекомендуется ставить галочку рядом с заголовком "Изменить ширину до". Сразу определим, какие конечные размеры рисунка нам нужны, и выставим их в полях справа под заголовком. Первый размер - для превью изображения (картинка в кратком описании записи), второй размер - полное изображение (картинка при просмотре в подробном описании записи). Второй размер выставлять не обязательно, если исходный размер картинки позволяет расположить ее в области, рассчитанной для информационной части сайта.


Рис. Вставка изображения с помощью панели "Добавить файл рисунка"

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

На нижепредставленных рисунках мы видим последовательность действий по добавлению изображения непосредственно в текст. Вы можете добавлять рисунок как с помощью вкладки "Текст", так и с помощью вкладки "HTML". Ошибки не будет. После того, как рисунок вставлен, вы можете настроить его отображение или расположение. Кликните правой кнопкой мыши по рисунку (удобней это сделать, находясь на вкладке "Текст") и в меню выберите "Рисунок". В открывшемся окне, пользуясь вкладкой "Расположение", можно задать отступы и расположение картинки. Если зададим параметр "left", картинка будет располагаться по левому краю, а текст будет "обтекать" справа.


Рис. Вставка изображения непосредственно в текст


Рис. Вставленный в текст рисунок


Рис. Настройка вставленного в текст рисунка

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


Рис. Выделение изображений записей


Размер текста

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


НЕПРАВИЛЬНО!!



ПРАВИЛЬНО!!


Правильней задавать размер текста на вкладке "HTML".


Рис. Увеличенный элемент текста

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



Мы еще задали цвет тексту и прописали параметр в этом же теге, получился такой код:



Где: "26px" - точный размер текста в пикселях, color="#BF0000" - задание цвета, между скобок - наша информация
Вверх

Настройка дизайна текста

Весь текст сайта правильней настраивать, выделяя пункт BODY и задавая ему настройки. Здесь можно открыть вкладку "Шрифт", задать начертание, размер и цвет текста. Все текстовое содержание сайта настроится. Но много настроек не задавайте, только самые основные. При необходимости вы можете настроить разделы и записи, выделить заголовки, назначить отступы.

Основные ошибки при настройке дизайна текста:

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

Работа с таблицами

Объясним правила настройки таблиц. Это информация актуальна для тех пользователей, которые используют для построения дизайна сайта именно таблицы. Таблица сама по себе стабильна и надежна в плане структурирования информации. Наполнение, содержащееся в ячейках таблицы, уже не "разлетится". Но необходимо еще правильно проставить размеры в таблице, не допуская ошибок.

"Резиновые" таблицы - изменяющие свой размер в зависимости от ширины экрана. Для данной таблицы указан размер в процентах. Для того чтобы таблица вела себя адекватно, проставьте размеры ячейкам и колонкам таблицы, оставив одну колонку без размера. За счет "свободной" колонки таблица как раз будет растягиваться на тот размер, который прописан всей таблице.


ПРАВИЛЬНО!!



НЕПРАВИЛЬНО!!


Из вышестоящих рисунков видно, как правильно проставлять размеры в таблицах. Как видим на верхнем рисунке, в одной колонке нет размера по ширине. При общем размере таблицы 100% и проставленных размерах в других колонках свободная колонка (без размера) занимает все оставшееся место. Вся таблица свободно растягивается. На нижнем рисунке размеры проставлены всем колонкам. Это не критичная ошибка, но в этом случае легко ошибиться в расчетах. На примере показано, что сумма величин колонок больше 100. А общая ширина таблицы как раз 100%.

63 + 22 + 25 = 110

Данный размер будет конфликтовать с общим размером для всей таблицы "100%".

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

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


НЕПРАВИЛЬНО!!



ПРАВИЛЬНО!!


СМОТРЕТЬ следующий урок
Вверх
Copyright © Edgestile Company, 2004
тел.:  8 (495) 229-45-50, 8 (812) 612-2642, 8 (34241) 9-83-08
e-mail:  info@siteedit.ru - общие вопросы
icq: 268-447-867 - общие вопросы
все контакты
Официальный сайт CMS Siteedit Получить сайт Тест-драйв интернет магазина