Блог бурчащего Burnis`а

здесь я не буду писать почему верстать нужно блочно, и в каких случаях имеет смысл верстать таблицей. об этом позже.
многие начинающие сайтостроители задаются вопросом: Как сверстать свой мега супер сайт? то-есть вот придумали Вы картинку, нарисовали её (в Фотошопе,Флеше, Пэйнте) а дальше..как её представить элементарно в 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 файл) мы с Вами и ручками сможем сделать ;-)