верстка страниц (для новичков) - очень быстрый способ

здесь я не буду писать почему верстать нужно блочно, и в каких случаях имеет смысл верстать таблицей. об этом позже.
многие начинающие сайтостроители задаются вопросом: Как сверстать свой мега супер сайт? то-есть вот придумали Вы картинку, нарисовали её (в Фотошопе,Флеше, Пэйнте) а дальше..как её представить элементарно в html ?
Оно вроде и понятно, мол разрезать на картинки и дальше в блокноте или любом WYSWYG редакторе (Dream Weaver,HtmlPad FisherMan - эти две имхо делают наименьшее количество ненужного мусора)
но ведь как получается..то шапка сдвинется на пиксель вниз..то еще чего. и когда новичок начинает это все делать...получаются какие-то лишние пробелы..или наложения.
можно ли этого всего избежать, если вы к примеру знаете в чем проблема, но вам просто лень разбираться.
Да, есть решение в таком мутном способе :-D
об этом позаботилась компания Adobe разработав свой Photoshop
к примеру мы вставляем картинку (которую нам нужно сверстать в хтмл) а Фотошоп
и разбиваем её на Slice Tool(K) - тоесть указываем на какие кусочки разбить наши будущие гифки или пнг или джепеги.
у меня полилось вот так:

дальше просто делаем File-Jump To Image Ready
нам покажет свой дружелюбный интерфейс это чудо программа
дальше здесь можно колдовать (Output Settings - HTML...) - генерировать верстку таблицами или CSS (по ID или по классам) ...
и в конце выбрать Save Optimized As - HTML AND IMAGES
в итоге у нас получилось самая быстрая верстка.
конечно в целях экономии трафика и времени загрузки рекомендуется сохранять все как для WEB (save for web).
так же таким способом как Вы сами видите у нас абсолютно все сохранится как картинки.
естественно это не очень хорошо....но, наша цель то ведь была просто сверстать, так что бы ничего друг на друга не наезжало..(когда картинка достаточно сложная бывает трудно сходу в блокноте её сверстать без потери дизайнерского смысла)
остальное (сделать все картинки фоном а по ним сверху текст и все их атрибуты вынести в отдельный *.css файл) мы с Вами и ручками сможем сделать ;-)

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

вы полностью правы...

я просто это показал для новичков как можно быстро что то

сделать и увидеть.

Дальше уже идет другой процесс...

позицицинирование етс.. 

Submitted byВиктор (не проверено)on апреля 9, 2010 - 18:35

Неплохо, все доступно и понятно! Вообщем мне понравилось буду сам пробовать

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

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

Добавить комментарий

Содержимое данного поля является приватным и не предназначено для показа.

Filtered HTML

  • Допустимые HTML-теги: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type='1 A I'> <li> <dl> <dt> <dd> <h2 id='jump-*'> <h3 id> <h4 id> <h5 id> <h6 id>
  • Строки и абзацы переносятся автоматически.
  • Адреса веб-страниц и email-адреса преобразовываются в ссылки автоматически.