Верстка в ASP NET MVC.

На этой страничке я на реальном примере шаг-за-шагом покажу сто волшебных кликов мышкой для табличной верстки простейшей формы с одной кнопкой и одним полем ввода в ASP NET MVC.

Стоит верстка такой формы на открытом рынке 100-200 рублей. Проблема верстки состоит в том, что она требует безукоризненного владения инструментами верстки, глубокого знания html, css, браузеров, javascript и много чего еще - а итогом этих чемоданов знаний является зарабатывание денег по рублю за мышиный клик. Поэтому занимаясь работой один рубль за один клик мышки - надо эти клики делать на полном автоматизме (иначе работать дворником может оказаться экономически выгоднее). А если посчитать не только клики, но и буквы CSS, которые я ввел для верстки этой простейшей формы - получится по 50 копеек за символ/клик. Эти расценки относятся к свободному рынку (фриланса). Когда человек сидит целый день в офисе (вареный от усталости) и единственное о чем он думает - какая же жадная сволочь мой начальник - подобная верстка может стоить в десять раз дороже и может занять не час, а рабочий день.

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

На этой страничке я постараюсь показать все основные инструменты, которыми должен виртуозно владеть верстальщик, который делает ручные (без CMS) табличные верстки. Собственно в этом стиле (в основном) верстки делаю и я - но MVC привносит в этот процесс некоторые небольшие особенности.

• MS Visual Studio 2010 - мы верстаем сайт на ASP.NET MVC, если бы это был бы сайт на JAVA или PHP - код был бы в NetBeans или Eclipse.
• Firebug - в моем понимании вещь абсолютно необходимая. Замены, на мой взгляд, не существует. Применяется не только для верстки, но и для любой задачи c Web.
• Web Developer - очень удачно дополняет Firebug - оттеняет все контуры, показывает ошибки, линейки, вложенность DIV-ов и прочее. Некоторые даже ставят этот инструмент на первое место, а Firebug на второе.
• Adobe Fhotoshop - в принципе альтернативы есть (GIMP, что-то делает Paint NET, что-то XnVIEW), но де-факто отраслевой стандарт - фотошоп.
• Adobe ImageReady - для моргающих GIF-ов, для слайса рисунков незаменим, а слайс (нарезка) рисунков - основа табличной верстки.
• Adobe Dreamweaver - при наличии Visual Studio обязательным (для простейших табличных версток) не является. Однако в один клик выполняет многие полезные функции, без которых обойтись трудно.

Повторюсь - если вы только учитесь верстке, то начинать надо с безукоризненного владения указанными инструментами (и конечно безукоризненного понимания CSS и HTML). Если сравнивать оплату за мышиный клик (и время) по сравнению с другой работой описанной н моем сайте step-by-step, например Как сделать SOAP/WSDL-вебсервис на ASP.NET/MONO для вызова его из FLEX - то очевидно, что за работу по подъему даже простейшего web-сервиса никто не возьмется дешевле 10 тыс, следовательно работа верстальщике на открытом оценивается как минимум в 20 раз дешевле работы по программированию. Это конечно несправедливо - там те же самые 50-100 тычков мышкой за вдвадцатеро большие деньги, но именно поэтому работа верстальщика должна быть максимально быстрой и четкой. Если вы будете раздумывать больше пол-секунды куда дальше тыкнуть в инструменте, чтобы сделать нужную вам операцию - то скоро поймете, что экономически выгоднее выйти на улицу и пособирать вокруг дома пустые банки и бутылки - так заработаете больше.

Итак, погнали - открываем результат работы дизайнера в фотошопе и разрезаем его слайсером:

Результат передаем в ImageReady:

В ImageReady для этой простейшей задачки ничего не делаем, а сразу вызываем предпросмотр результата:

Бегло проверяем Фаербагом разрезку на отсутствие ошибок - вроде все нормально. (заодно посмотрите инструменты верстальщика).

Открываем в файловой системе то, что родил ImageReady:

Копирую в папку проекта нарезку (учтя, что папка Images у меня в проекте уже есть и она используется для других целей):

Чуток подправляю пути, импортирую папку с рисунками в проект:

Отлично. Нарезка уже в студии. Теперь перенесем нарезку на странички ASP.NET MVC.

Проверям master-page проекта. Выбрасываем из него все лишнее, кроме @RenderBody().

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

Опять чуток подправляем пути к рисункам, чтобы студия не ругалась для формата файла vbhtml.

Теперь попробуем внести код сайта в верстку. Начнем с поля для ввода (кнопку пока закоментируем).

Обратите внимание на мою ошибку. Из-за обьектного экстремизма в MVC все атрибуты CSS оказываются тупо строками. Я ошибся и вбил вместо равно двоеточие. Вот результат который я увидел на экране из-за этой ошибки.

Поэтому правильным методом может быть только ссылка на внешний класс. Тогда по крайней мере вы будете гарантированы от подобных адских ошибок - на поиск которых можно потратить неограниченное количество времени.

Так, запускаем - проверяем, уже лучше. Размер шрифта явно маловат- увеличиваем.

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

Смотрим какой открыть рисунок и открываем его.

Теперь следите за руками - ловкость рук и никакого мошенничества - ролловер готов.

Теперь навесим ролловер на кнопку. Навешивать рисунок будем на имеющийся тег <td>

Запускаем, проверяем - наблюдаем чудо - форма работает!

Напоследок выполним в Dreamweaver маленькую косметическую операцию - соберем со всех элементов стили, разбросанные по страничке в одно место. Здесь я использую Дрим просто потому, что знаю как это быстро сделать. Для простейшей формы в одну кнопку он в принципе не нужен. Но для более сложных версток он незаменим.

Переносим в него страничку (ибо формат vbhtml он не понимает) и собираем стили.

Как вы понимаете, для реальной странички даже этот сбор тегов вручную был бы достаточно обременительным. Второй инструмент, который совсем не был задействован при верстке этой элементарной странички в одну кнопку - это Web Debeloper. Но это инструмент веcьма полезный - в нем удобно также смотреть журнал ошибок CSS, в нем удобные линейки и многое другое. А ДИВ-ные верстки я вообще не могу делать без него.

Вот пример моей верстки на DIV-ах. Основной момент при верстке на дивах - это порядок дивов, чтобы увидеть кто для кого является родительским дивом (и от кого будет выполняться absolute-позиционирование). Ведь все DIV-ы разбросаны в исходном виде весьма прихотливо - какие-то на master-page, какие-то в контролах, какие-то статически располодены на страничках, какие-то порождаются динамически (в LITERAL в ASP.NET или в ACTION в MVC). И стоит написать ABSOLUTE (а без него не получится сверстать на ДИВАах ровно ничего) - как порождаемый ДИВ выстроится относительно тега-родителя. В исходном виде найти родительский DIV найти практически невозможно - лично я ищу его с помощью Web Developer:

Но дивные верстки выполняются иначе и этого вопроса в этом кратком введении в тему верстки мы касаться не будем.

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

В заключение я хотел бы порекомендовать начинающим верстальщикам несколько книжек, которыя мне иногда помогают (помимо онлайновых справок). Ведь все перечисленные выше замечательные инструменты лишь позволяют ускорить ту или иную задуманную операцию. В конце концов HTML можно писать и в нотепаде (только при работе с таким сервисом простейшая описка - пример которой я показал выше - может вызвать многочасовый ступор). Но перед тем, как выполнять инструментами верстальщика какую-то операцию - надо видеть в голове макет страницы и понимать досконально все возможности CSS, которыми этот макет можно реализовать. Например на указанной простейшей страничке мне потребовалось натянуть rollover на кнопку постбека - надо четко понимать, что натянуть rollover по hover возможно только на родительский тег для тега <input type="submit"> (и чтобы при этом форма ушла по постбеку). А если вы плохо знаете CSS и вообще не понимаете куда приткнуть ролловер в этом случае - то что вы будете делать всеми описанными инструментами?

Левая книжка - она сделана как бы для начинающих. Но в ней есть такие перлы! Например я узнал именно из нее, что если опустить перед тегом <html тег <DOCTYPE - то любой Internet Explorer (даже восьмой) будет отображать так, как отображал бы страничку IE пятый. И наряду с пережевываением элементарных вещей - вся эта книга пересыпана подобными перлами. Вторая книга самая занудная и подробная, например если я путаюсь кто является тегом-родителем, то список правил для поиска тега-родителя я смотрю именно там. Третья книга - это сборник чрезвычайно полезных рецептов. Например именно из нее я узнал, как убрать рамку вокруг линка-рисунка, которую показывает FireFox при клике. Таких отличных рецептов в ней - 244. Единственный недостаток этой замечательной книги - она издана на туалетной бумаге.

< THANKS ME>