Как нарезать сайт?

[BRK]

Доброго времени суток!

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

Может кто поможет привести пример того, как нужно эти дела прокручивать? На примере желательно, нечто вроде этого http://www.pastukhova.com/lesson1.php

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

[Иван Шумов]

на сайте куча примеров.... посмотри. за вас никто ничего просто так придуцмывать не будет. поставьте конкретную задачу,

[BRK]

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

http://i002.radikal.ru/0805/a3/3a56d0ffa2dc.jpg

С позиционированием проблем не будет, сместить и поствавить как надо могу, а вот порезать нет. Подскажите как лучше. Даже не как лучше, а как нужно.

[photojabber]

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

2. Ищи однородные области (графический фон или с одним цветом) - если фон графический, то его можно растягивать background-image: url() - так часто делают с градиентными фонами, паттернами...; если же однотонный цвет, напр-р, красный - то пойдет как background-color. Нужно стремиться к уменьшению физических размеров графических беграундов - чтоб быстрее грузилось. В твоем примере - градиент под "Добро пожаловать" - высота его будет равна высоте всей области желтого цвета, а ширина - 1 пиксель. Тянется он проще простого при помощи background-repeat в ЦСС-файле.

3. Бордюры со скругленными краями делаются аналогично п.1 - применяются вложенные div-ы. Внутри базовой формы:

а. левый верхний уголок

б. растягивающийся по горизонтали верхний бордюр

в. правый верхний уголок

г. растягивающийся по вертикали левый бордюр

д. резиновый градиент-фон для текста

е. растягивающийся по вертикали правый бордюр

ж. левый нижний уголок

з. растягивающийся по горизонтали нижний бордюр

и. правый нижний уголок

Все это достигается исключительно ЦСС-ом, без тегов внутри - дабы не мусорить в хтмл-коде.

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

Удачи!

[BRK]

Огромное спасибо, попробую все воплотить.