Сайт - это зеркало вашего бизнеса
Наши Новости
02.04.13
Перенос серверов компании Webmedia.ru
14.09.12
Вебстудия Webmedia повышает цены на создание сайтов
02.11.11
Отмена перехода на летнее и зимнее время
Погода в Москве
Наш курс:
1 у.е. = 30 руб.
Курс ЦБ
1 USD = 30.7196 руб.

Враг.Ру - новости, катастрофы, катаклизмы, происшествия

Dr. Creator - free software download
 
Пробки

 

Пробки на Яндекс.Картах

 

Статьи и обзоры

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

дополнительный пиксель «расползание»

Чтобы избежать этого эффекта, нужно разбить крайний ряд (колонку) на все минимальные деления по вертикали (горизонтали). Например, вот так:

Тогда дополнительный ряд уйдет и равновесие будет восстановлено.

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

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

Вид при разрешении экрана 1024x768

Вид при разрешении экрана 1280x1024

Как видно из рисунков, происходит удлинение правой части равномерно, при этом создается впечатление, что дизайн как бы «продолжается». Достигается это созданием специальной колонки с краю (для выровненного влево дизайна – с правого края, для выровненного вправо – с левого, а для центрального – с обоих, но чаще всего центральный дизайн не «растягивают»). Этой колонке ставится width=”100%” и подбирается соответствующий циклический background (см. параграф «резка циклических элементов»). Аналогично с продолжением элементов вниз (например, когда содержание очень длинное, левая колонка должна «протягиваться» до самого конца.

К сожалению Image Ready не умеет ставить width, height в процентные величины, поэтому мы применяем «полу-ручной» метод. В HTML коде слайса, помимо циклического background добавляем в начало следующий текст:

width=”100%”>

После чего нам останется только удалить оригинальный width в этом <TD> элементе, и оригинальную закрывающую скобку >.

Также, чтобы дизайн начал растягиваться, необходимо убедится, что на всех остальных уровнях вложенности (всех уровнях, в который вложен наш) проставлен width=”100%”, включая и главную таблицу (самый верхний уровень).

Зацикливание background.

Бывает ситуация, когда у вас background залит каким-то однообразным повторяющимся рисунком. Этот рисунок (pattern) называется «зацикленным», так как если его повторять много раз, его повторения будут сливаться.

Классический способ.

зацикленный паттерн незацикленный паттерн

Как сделать рисунок зацикленным.

Классический способ заключается в следующей последовательности операций

  1. Выберите кусок, который вы хотите зациклить.
  2. Скопируйте и создайте новый файл по ширине и высоте в два раза больше;
  3. Разместите изображение в левом верхнем углу;
  4. Сделайте копию Layer и выполните операцию Edit -> Transform -> Flip Vertical;
  5. Переместите новый Layer вниз от оригинального рисунка

  1. Объедините Layers;
  2. Сделайте копию вновь полученного объединенного Layer;
  3. Сделайте операцию Edit->Transform->Flip Horizontal и расположите Layer справа от оригинального.

Pattern готов. Для проверки сделайте: Select All, Edit-> Define Pattern. Создайте новый рисунок (800x600) сделайте Edit->Fill->Use Pattern.

Неклассический способ.

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

Начало точно такое же. Выделяем участок, переносим его на рисунок в два раза больший по размерам. Делаем 2 копии Layer. Размещаем их справа и снизу:

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

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

Теперь необходимо обозначить те части рисунка, которые подлежать замене.

Для этого нужно временно отключить два дополнительных Layer и поставить границы вокруг измененного поля.

Для удобства воспользуемся Guide Lines (см. рис.)

Теперь нужно выделить и переместить измененные участки на левый и верхний край рисунка. Делается это с помощью включения остальных Layers и операции Edit->Copy Merged. Переместив полоски в левый верхний угол, нужно объединить их с оригинальным Layer.

Остается подправить небольшой участок, полученный при перемещении полосок в левый верхний угол. Сделать это можно инструментами Blur, Smudge или Clone. После этого выделяем оригинальный прямоугольник, который теперь и является Pattern-ом.

Интеграция с DSite.

Использование стилей CSS.

Использование CSS сейчас применяется все больше и больше. Более того, многие из атрибутов, используемых нами в HTML (таких, например, как background) не существует в стандарте, и по науке их следует располагать именно в css. С помощью CSS становится возможным многое, что раньше делалось через резку графики.

Например, нарисовать тонкую горизонтальную линию (см. рисунок в параграфе «Когда не избежать лесенки»):

hr.hline{border : 1px solid #2B8CBE;height : 1px; width : 100%;}

Далее в HTML коде нужно написать:


Включение стилей в HTML.

Одним из способов применить CSS файл к HTML нужно написать внутри тэга <HEAD> следующий код:

Где mpgstyle.css – имя файла со стилями.

Очень хороший и к тому же бесплатный редактор стилей – программа TopStyle (найти ее можно здесь http://www.bradsoft.com/).

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

Когда не избежать лесенки.

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

Верстка в ImageReady

Верстка в Image Ready

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

Однако, есть одно но… Image Ready – инструмент хороший, но все таки остается всего лишь инструментом, и некоторые детали необходимо делать вручную.

Конечно можно сверстать и всю страницу, если вы не обладаете достаточными навыками в работе с HTML – однако профессионалам рекомендуется обрабатывать с помощью Image Ready только сложные куски шаблона со сложной графикой – например шапку дизайна, а весь основной HTML верстать вручную, используя его вспомогательные функции. В любом случае благодаря Image Ready многие “ручные” работы сводятся к минимуму без потерь в качестве.

В приведенном ниже примере показано, каким образом Image Ready поможет сделать из дизайна конечный шаблон.

Этап первый. Первоначальное деление.

Вначале нужно разделить дизайн по вертикали на горизонтальные блоки. Как правило дизайн можно разбить на такие, довольно независимые участки. Этими участками чаще всего становятся: Шапка, Центральное наполнение, Подвал. Иногда требуется несколько уровней вложенности, например, вертикальное меню и баннеры под ним, новостная лента в правой части и баннер под лентой и т.п..

На рисунке показан дизайн, поделенный на три слайса. Каждый слайс оформляется как Текстовый и для начала мы напишем туда комментарий:

- Caption { -->

В дальнейшем внутрь этого текста мы поместим необходимый фрагмент HTML кода.

Для каждого из этих слайсов мы должны сделать операцию Duplicate Image.

В данном примере у нас получится три копии файла со следующими названиями:

tece_caption.psd, tece_central.psd, tece_down.psd.

В каждом из этих файлов нужно оставить только один слайс. Делается это очень просто тремя операциями:

  1. выделяем нужный слайс;
  2. Select -> Create Selection from Slice;
  3. Image -> Crop;

Теперь работа ведется с каждым файлом в отдельности.

Этап второй. Резка циклических элементов.

Не секрет, что основа любой оптимизации – удаление повторяющихся частей. Для Web дизайна это особенно важно.

Первоначально картинка содержит 1 слайс, тот который остался после операции Crop.

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

К сожалению Image Ready не обладает встроенными возможностями создавать циклические элементы, поэтому мы делаем следующее.

Разбиваем изображение на слайсы, назначая оптимальные методы оптимизации для каждого слайса. Здесь нужно заметить, что необходимо работать в окне Optimized, чтобы видеть как теряется качество отображаемого слайса. Выбирать формат оптимизации нужно следующим образом: малоцветная картинка – GIF, полноцветная – JPEG, если из слайса в слайс картинка перетекает, нужно осторожно сочетать GIF и JPEG, так как в этом случае могут стать видны границы рисунков. На данном изображении мы применили следующее разбиение на 5 слайсов:

Небо мы оптимизировали как JPEG, остальное – как GIF. Сочетание 1 и 2 слайса должно пройти безболезненно, так как фон там достаточно светлый. Если же 1 слайс оптимизировать как GIF, он будет занимать в 5 раз больше места (10 Кб против 2 Кб).

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

Select-> Save Selection с именем, как мы назовем в дальнейшем файл, например, tece_caption_hline.

Далее мы делаем операции:

1. Copy Merged;

2. Create New File (имя tece_caption_hline);

3. Paste;

4. Save Optimized. Кладем его в папку images, оптимизируем как GIF (так он получается меньше всего).

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

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

Для проверки делаем сохранить оптимизированный HTML и смотрим результат:

Этап третий.

Теперь наша задача вставить готовую шапку в основной файл. Для этого мы открываем основной файл и делаем следующие операции:

  1. В файле tece_caption.psd выполняем: Edit->Copy HTML Code -> For All Slices;
  2. В файде tece.psd выбираем нужный слайс, и в его содержание (в котором тоже должен быть установлен вышеупомянутый флажок Text is HTML) делаем операцию вставки.

Для проверки делаем Save Optimized HTML.

Аналогично поступаем со всеми остальными частями. Эти части, в свою очередь, могут быть поделены еще на несколько вложенностей, при этом производятся те же операции, с очередностью изнутри - наружу. То есть сначала обрабатывается самая внутренняя часть, например, пункт меню, потом таблица со всеми пунктами меню, затем часть центральной панели, куда вставлено меню и т.д..

Примечание Первое. Как избежать «стягивающих элементов».

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

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

В HTML он выглядит следующим образом:

Данная картинка дает представление о том как порезан данный дизайн, однако слайсы 10, 12 и 13, как раз составляющие «лестницу», нужно будет вынести в отдельную таблицу.

Это можно сделать как описано в первом параграфе или аккуратно поправить сам HTML код:


Just a simple content

Андрей Ефимов



Читайте также:
  • Создание и продвижение сайтов как способ сокращения рекламных бюджетов компаний
  • Стелс-реклама
  • Поговорим об Интернет-браузерах.
  • Ищите, и разум вас не покинет - поиск по интернету...
  • Антикризисные Методы Рекламы
  • Выбираем подрядчика для создания сайта
  • Преимущества эксклюзивного сайта
  • Готовые отраслевые решения
  • Национальные особенности рекламы в Интернет
  • Раскрутка сайта как залог успеха
    1  2  » 
    Готовые сайты

    Купить готовый сайт
    Готовый отраслевой сайт
    Дополнительно
    Нереализованные дизайны
    DSite - описание
    Наши вакансии
    Поиск маршрута в метро
    Программа телевидения
    E-Time
    Хранитель экрана
    Регистрация
    Статьи и обзоры
    14.02.11

    Создание и продвижение сайтов как способ сокращения рекламных бюджетов компаний

    03.11.10

    Компания Webmedia предлагает услугу, не имеющую аналогов в Рунете.

    03.06.10

    Поговорим об Интернет-браузерах.

    создание сайтов


     

    Версия для печати

     
    Тел. : (495) 518-82-03
      Создание сайта  Наши работы  Наши клиенты  Контакты