Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > с чего начать верстку этого дизайна?


Автор: privat 8.9.2008, 16:18
Привет. Мне надо сверстать шаблон вот такой как в приложеном файле. Подскажите пожалуйста с чего начать... и как его лучше верстать дивами или таблицами? 

Автор: ksnk 8.9.2008, 16:29
privat, Чем привык. Если ничем не привык, а дизайн резиновый - можно начать с таблиц ;-)

Автор: privat 8.9.2008, 16:36
можно таблицами, ими наверное проще будет....?? тогда мне надо изображение порезать в фотошопе?

Автор: bars80080 8.9.2008, 17:30
да чем привык, тем и режь.

есть такой большой совет: не спрашивать, а делать. учится получится только на своих ошибках.

Автор: privat 8.9.2008, 17:35
а как его правильно порезать надо? там ведь закругленные углы?

Автор: ksnk 8.9.2008, 17:53
privat, Лучше полазить по сайтам и посмотреть как делают все остальные, и не набивать собственных шишек на ровном месте. 

Обычно, загогулистые границы с ровным фоном режут в таблицу 9x9.  
1.1 - левый верхний размером X на X  
1.2 - верхний средний - размером 1 на X. 
1.3 - верхний правый - размером X на X. 
2.1 - средний левый - размером X на 1. 
2.2 - средний средний - размером 1 на 1.  или просто номер цвета указывать, хотя лучше файлом.
2.2 - средний правый - размером X на 1. 
2.1 - нижний левый - размером X на X. 
2.2 - нижний средний - размером 1 на X. 
2.2 - нижний правый - размером X на X.

Если фон несколько менее равномерный - 1 заменить на Y smile 

Выводится все это добро - той-же таблицей, 9x9 в каждой ячейке которой выставлены бякграунды. центральные ячейки выводятся с background-repeat: repeat-x &&|| repeat-y .При этом можно сэкономить и разместить угловые элементы в одном файле, при выводе использовать background-position, но гемороя немного больше, чем пользы.

Автор: NightGoblin 9.9.2008, 15:29
В принципе, этот дизайн можно сделать при помощи четырёх основных элементов <div> (хотя можно и <table>). Уголки и границы -- это всё настолько изъезженная тема, что решений тут масса. Как вариант -- делается картинка, "вырезающая" кругом белым снаружи и оставляющая прозрачный фон внутри; дальше вешается в 4 разных <div>а с установленным overflow:hidden и заданной позицией фона. В случае с верхней и нижней рамкой, можно использовать PNG с альфа-каналом (с ними не очень здорово работает IE версии <6, но заставить можно, и готовые решения уже есть) или создать GIF с иллюзией псевдо-антиалиасинга, добавив по краю тёмно-жёлтую границу.

Лично я бы начал с разметки самих разделов, а потом сделал фон и границы с уголками.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)