Литература для фронт-енд разработки сайтов: верстка.

Есть какой-никакой но все же опыт разработки под веб, но бекендов: сервера приложении, собственный микрофреймворк и cms для построения и ведения блогов. Также есть опыт администрирования всего этого дела (в основном Linux и FreeBSD).

Но нету фундаментальных знании верстки и вообще написания с нуля CSS и HTML. Ну и вообще не понимаю, как рисуют прототип в photoshop-e(есть ли профи, что пользуются GIMP-ом?) и самое главное как переносят то, что нарисовали в photoshope в HTML-представление.

Т.е. редактировать CSS и HTML под собственные нужды я могу, а вот проектировать или писать с нулья - нет.

Подскажите, пожалуйста, литературу (желательно на английском языке) по верстке.

p.s. Есть ли в верстке что-нибудь что у проггеров зовется "design patterns"?

1 ответов


Я считаю что вам надо не книгу читать, а видеть в интерактивном виде все.
Для этого есть сайт по обучению в интерактивном виде, например http://www.lynda.com/
Ещё есть вот такой сайт: http://tutsplus.com/tutorials/?q=true&filter_topic=38
Ещё есть курсы "специалиста", но мне там не понравилось как они объясняют Html и CSS.

Просмотрите весь список CSS и HTML тегов с объяснениями и потом уже приступайте к итеративности.

В Photoshop рисует дизайнер, у него цель сделать красиво, а потом верстальщик плюётся как это все сделать.
Что бы научиться делать в Photoshop введите в google поиске free design psd и разбирайте понемногу.
на Dribbble можно почерпнуть много хороших идей.

И не гонитесь за CSS3 и HTML5 - на данный момент от ещё не так актуален, года через 3 будет нарастать по тихоньку. А пока у многих BW старые.


Нужно купить любую самую тоненькую и дешевую книжку по HTML (за пару дней всё будет ясно). А дальше только практика и только практика, там уже всё запомните и будуте удивляться, зачем вообще читали ту маленькую книжку. + попросите знакомого верстальщика научить вас резать макет в Фотошопе (он еще расскажет, какие элементы нужно вырезать целиком, а какие — только маленьнкую часть).

Как таковых «паттернов проектирования» нет, но есть:

  • рекоммендации от Гугла и Яндекса (HTML, CSS) по оформлению HTML/CSS-кода;
  • спрайты (image sprites);
  • CSS-препроцессоры (LESS, SASS, еще Compass, etc.);
  • CSS-фреймворки (Twitter Bootstrap, Blueprint, etc.);
  • стартовые комплекты (HTML5 Boilerplate, etc.);
  • 2-колоночная, 3-колоночная, n-колоночная вёрстка;
  • семантика HTML-разметки;
  • валидность вёрстки (соответствие стандартам);
Ну и плюс JavaScript, но это уже отдельная огромная тема.