Вёрстка большого количества страниц

[SNIGOWYK]

Приветствую жителей форума!

У меня к вам есть вопрос. Дело в том, что я изучаю вёрстку недавно и столкнулся с очень неприятной проблемой.

Мне нужно было сверстать большое количество страниц одного сайта. На каждой странице было разное размещение информации. И для каждой страницы одинаковое положение и наполнение было только у шапки сайта и у подвала.

Предположим, на главной была шапка, потом шёл блок со слайдером и подвал. На другой была шапка, две колонки (текст и форма обратной связи) и подвал. На третей опять шапка, после неё две колонки с новостями, которых в каждой колонке должно было быть по три штуки и для других страниц новостей должны были прикрутить скрипт, чтобы можно было листать новости на той же странице. То есть на каждой странице была совершенно разная структура контейнера и совершенно разные стили ссылок, разные отступы между параграфами, разные стили заголовков и т.д.

Когда я понял, что у меня растёт основной CSS-файл я попробовал решить эту проблему таким образом: создал основной файл common.css, к нему начал подключать остальные файлы:

@import url("reset.css");
@import url("layout.css");
@import url("header.css");
@import url("footer.css");
@import url("widget-list.css");

В layout.css я записал основные правила, а в widget-list.css импортировал все стили для разных страниц (home-widget.css, projects-widget.css, gallery-widget.css, news-widget.css, about-widget.css).

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

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

<!--#include virtual="inc/header.html"-->
<!--#include virtual="inc/footer.html"-->

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

Когда я спросил у человека (дизайнера-фрилансера) курирующего этот проект, но ничего не понимающего в вёрстке, на каком движке всё это будет реализовано, он ответил, что движок будет только для страниц с формами. Это при том, что на сайте должна быть регистрация пользователей с разными правами, личный кабинет с возможностью менять данные и видеть разные разделы сайта и т.д. Но меня куратор успокоил сказав, что это всё сделает программист за один день.

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

Даже если бы мне ответили, что будет Joomla - меня бы это мало утешило из-за моих проблем с вёрсткой.

С проектом я распрощался, 7 страниц из 10, убив на это неделю и бессонные ночи, подключив разные скрипты для слайдера и fancybox-a и получив за это 100$, испорченное настроение и пропавшее желание верстать вообще.

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

Но дело не в деньгах. Дело в том, что я действительно хочу научиться верстать и неплохо верстаю одиночные страницы бесплатных шаблонов (учитывая семантику, кроссбарузерность, группировку стилей и т.д.). И начиная проект искренне хотел сделать очень хорошую вёрстку для своего портфолио.

Не могу понять почему так всё произошло. Из-за того, что куратор взял на себя слишком сложный проект (не имея представления, как его реализовать) и тем самым не обеспечив меня никаким ТЗ, дав только исходники .tif с названиями слоёв типа "Layer 101 copy", да ещё и местами слитых, так что вырезать ничего нельзя.

Либо же это только моя неопытность и неправ только я взявшись за сложный по-моим меркам проект?

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

Очень много вопросов и пишу всё скомкано и совершенно без настроения. Но, надеюсь, суть понять можно.

Посоветуйте, пожалуйста, как научиться верстать не "кошерный" примерчик одной странички, а действительно нелёгкий для новичка проект?

[strange_atom]

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

Таким заказчикам нужно сразу отказывать. Они, как правило, платить готовы мало, а требуют много и вчера.

[Николя223]

соболезную)) но в чём вы верстали)) во многих редакторах - есть поиск. всё быстро и удобно.

то что вы- шапку так вставляли, это не есть гуд)) это все проще на PHP прописывается.

Не стоит падать духом из - за одной неудачи)) опыт со временем придёт)))

P.S: а с плохим настроем на победу нельзя ничего "кошерного" написать

Вспоминаю как я первый сайт на юкозе делал... вот там до головной боли доходило - месяц не спал)))

[ShumNo]

вполне нормально когда на сайте есть 10-20 шаблонов расположения контента, я бы даже сказал что когда сайт не является блогом то шаблон один на все виды контента это не есть гуд, правда если этот шаблон не навинчен условиями

[SNIGOWYK]

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

Подскажите, пожалуйста, а где можно посмотреть примеры хорошего полноценного ТЗ для верстальщика, чтобы иметь представление?

но в чём вы верстали)) во многих редакторах - есть поиск. всё быстро и удобно.

то что вы- шапку так вставляли, это не есть гуд)) это все проще на PHP прописывается.

Верстал в Sublime Text 2, но файлов расплодилось так много, что я просто запутался в какой вкладке и какое название класса нужно искать...

Делать инклуды было моим "веолсипедом", чтобы если мне скажут поменять пункт в меню шапки не пришлось редактировать все html-файлы. Но, насколько я себе представляю работу верстальщика, он должен отдавать чисто html + css, ни о каких инклудах, а тем более php речи быть не может?! Но если у него есть также задача натянуть это всё на движок тогда может быть и php...но когда я просил дать мне возможность пообщаться с программистом, мне говорили сделать только вёрстку, а программист прикрутит всё за полчаса. Но как я могу сделать гибкую вёрстку если я не имею представления на что её будут натягивать? Мне на проект дали 5 дней, а программисту на всё про всё день.

Скажите, а как это нужно было реализовать на php? Может я просто чего-то не понимаю.

вполне нормально когда на сайте есть 10-20 шаблонов расположения контента, я бы даже сказал что когда сайт не является блогом то шаблон один на все виды контента это не есть гуд, правда если этот шаблон не навинчен условиями

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

Я думаю публиковать шаблоны будет некорректно, поэтому просто покажу пару примеров.

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

2. Для фото с текстом нужно было подключить именно этот шрифт. Я спросил какой смысл это верстать и подключать только для одного места на сайте дополнительный шрифт. Мне ответили, что это нужно верстать поскольку легче поменять текст в хтмл, чем открыть фотошоп. Тогда я спросил, а что делать, если текст превышает размер области картинки. Мне сказали, что это не мои проблемы. Ну типа да, не мои, но смысл такого "дзена"?

3. В третьем примере видно красивое подчёркивание. Но как и зачем реализовывать такое подчёркивание я так и не догадался. Это уже не говоря о стиле подчёркнутой ссылки.

Это только малая часть моментов, из-за которых происходил разрыв моих шаблонов. Может я не прав.

Edited December 20, 2012 by SNIGOWYK

[ShumNo]

вполне нормально когда на сайте есть 10-20 шаблонов расположения контента, я бы даже сказал что когда сайт не является блогом то шаблон один на все виды контента это не есть гуд, правда если этот шаблон не навинчен условиями

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

Я думаю публиковать шаблоны будет некорректно, поэтому просто покажу пару примеров.

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

2. Для фото с текстом нужно было подключить именно этот шрифт. Я спросил какой смысл это верстать и подключать только для одного места на сайте дополнительный шрифт. Мне ответили, что это нужно верстать поскольку легче поменять текст в хтмл, чем открыть фотошоп. Тогда я спросил, а что делать, если текст превышает размер области картинки. Мне сказали, что это не мои проблемы. Ну типа да, не мои, но смысл такого "дзена"?

3. В третьем примере видно красивое подчёркивание. Но как и зачем реализовывать такое подчёркивание я так и не догадался. Это уже не говоря о стиле подчёркнутой ссылки.

Это только малая часть моментов, из-за которых происходил разрыв моих шаблонов. Может я не прав.

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

Разные фенички так же можно привязать к чему-то и цеплять как угодно это так же не шаблон просто динамические объекты, которые меняются от страницы к странице по определенным правилам.

[SNIGOWYK]

Полностью с вами согласен, это не шаблон. "Разрыв шаблонов" происходил в голове, особенно от того, что описано во втором пункте. А таких пунктов было больше.

Хотя на самом деле это всё частности, меня больше интересует, как научится верстать не одну страничку а проект от начала до конца?

Везде есть примеры вёрстки какого-то элемента, например кнопочки с закруглёнными уголочками на CSS3. Или пример вёрстки одной страницы.

А вот где увидеть, как делается вёрстка от начала и до конца, чтобы не запутаться в классах и т.д.? Как учитывать при вёрстке то, что её будут натягивать на движок, если даже не знаешь какой он будет? Что оставлять в основном макете, а что выносить в дополнительные css-файлы. Должно же это где-то быть показано?!

Или же эти знания можно приобрести только в офисе, в подмастерье у хорошего верстальщика?

Edited December 14, 2012 by SNIGOWYK

[Николя223]

Или же эти знания можно приобрести только в офисе, в подмастерье у хорошего верстальщика? 

только с опытом

и чутьё мне подсказывает, что вам изначально поставили задачу не корректно

Edited December 15, 2012 by Николя223

[ShumNo]

Что оставлять в основном макете, а что выносить в дополнительные css-файлы.

А за чем файл стилей делить на 2 и более части? Наоборот css как и js все пытаются объединить и по возможности сжать для уменьшения запросов и трафика. Даже если они по 100кб - это не размер в наше время

[SNIGOWYK]

только с опытом

и чутьё мне подсказывает, что вам изначально поставили задачу не корректно

Спасибо за комментарий! Не буду унывать, а постараюсь разобраться в появившихся вопросах и приобрету чуточку опыта

А зачем файл стилей делить на 2 и более части? Наоборот css как и js все пытаются объединить и по возможности сжать для уменьшения запросов и трафика. Даже если они по 100кб - это не размер в наше время

Возможно вы правы, но я лично видел такую разбивку css у человека, который не первый год делает доклады на WSD. Вопрос я этот специально не изучал, но посчитал, что это нормальная практика. Надо будет заняться этим вопросом.

В любом случае, спасибо за отзыв!

Edited December 15, 2012 by SNIGOWYK