Алгоритм вёрстки

[rus71]

1. Размечаю для резки в фотошопе
2. В дримвевере создаю проект, Html и css
3. Прописываю все основное в css, потом делаю таблицу в html основных частей сайта (футер, контент и т.д)
4. Режу дизайн в фотошопе на отдельные части, убирая слои которые не нужны, (текст и все такое), собираю все картинки в таблицу в дримвевере.
5. Прописываю в css все шрифты и ссылки, блоки.
6. Проверяю во всех браузерах и на разных разрешениях, дорабатываю если отображаеться не правильно.
7. Для проверки валидности пользуюсь плагином для Firefox (HTML Validator)

 

[diesel_666]

В основном получается где-то так:
1. сохраняю графические элементы, которые мне нужны будут, сначала допустим для шапки сайта, в основном это самое сложное в сайте, остальные по ходу надобности. (кто-то писал про склеивание слоев - иногда нужно, но сейчас предпочитаю просто копировать нужный элемент на пустой слой, если он находится в наложении чего-то еще, чтоб его отдельно вырезать.)
2. параллельно пишу html и css в EditPlus (ИМХО намного удобней дримвьювера и быстрей)
3. тест в кривых браузерах, аля IE6+
4. правка, если требуется

Код всегда валидный, т.к. занимаюсь не один год
Кроме CSS, т.к. там затыкаем дыры за мелкософт, которые не смогли сделать правильный браузер.

 

[ruberentis]

Господа верстальщики, поделитесь пожалуйста, как выглядит процесс вашей вёрстки. Интересует в какой последовательности и что вы делаете после получения PSD исходника. Как нарезаете фрагменты дизайна, через какой софт кодете, дорабатываете, тестите и тд.
Понимаю что вопрос покажется глупым, мол есть куча книг и тд. Но меня интересует именно алгоритм вашей вёрстки, т.к. заметил что у каждого верстальщика свой подход.

1. Думаю.
2. Режу в FireFox.
3. Проверяю и допиливаю кроссбраузерность

 

[medicman]

Маленькое добавление про валидность - ее можно проверить в самом Dreamweaver

 

[neanton]

расскажу как это делают профессионалы:
1. Анализируется структура и делается скелет шаблона (резина, не резина, полурезина).
2. Потом начиная от шапки до футера верстаются основные блоки (левый блок, правый, центральный в зависимости от структуры).
3. Затем в детали. Прописываются каждому блоку свои стили и стили для мелочей (текст, картинки, тизеры, иконки, оформление ссылок, картинки меню, подключатся разные скрипты).
4. Затем страница проверяется валидитором (не для валидации как таковой, а вдруг человек пропустил какой-то тег или не дописал размеры допустим).
5. Загружается на сервер и тестируем как это выглядит с рисунками и без.
софт пользуют разный: я пользую Notepad++. Дримвьювер не использую по причине излишней загруженности интерфейса.

 

[Anu]

Хотелось бы добавить, что тестировать удобно в программе IE Collection, в ней есть возможность протестировать под разные версии IE.

 

[neanton]

а я пользую IE Tester, там в одном окне можно все IE запустить

 

[AggreSSor]

2. Режу в FireFox.

Что-то не совсем понял, этот момент. Можно поточнее? Как такое возможно резать в браузере?

 

[diav01ik]

*самая сложная часть верстки это влезть в мозг заказчика, а затем от туда вылезть тем же кем влазил. -)

Во первых: определяемся с тематикой, далее начинаем воплощать мысли в photoshop. Для более-мение красивого дизайна понадобится от часа до бесконечности.

photoshop - учитываем следующее:
1. тип верстки: тибличный, div-овый.
2. прорезиненность. (будет ли ваша страница тянуться по горизонтали, вертикали, либо памятником замрет по центру).
p.s. трудоёмкий процесс: подогнать дизайн под резиновый скилет путем граммотной нарезки в photoshop. Сам скилет страницы должен быть у вас в голове, либо "под рукой." Именно эта часть работы является самой продолжительной, по крайней мере для меня.

Во вторых: вооружаемся Notepad++, TopStyle, браузерами и начинаем писать html css, одновременно выравнивая все под кроссбраузерность. старайтесь повторяющиеся параметры для тегов, текста выносить в css. Дабы не захламлять html код.
лично я сторонник табличной верстки, хоть и порой не брезгую блоками.

вот собственно вся последовательность, пробуйте.

 

[neanton]

старайтесь повторяющиеся параметры для тегов, текста выносить в css

и только на английском, многие движки читая css не понимают русский и сайт начинает конючить.