(MVC) MVC (2010 год)

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

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

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

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

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

Повторюсь - если вы только учитесь верстке, то начинать надо с безукоризненного владения указанными инструментами (и конечно безукоризненного понимания 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. Единственный недостаток этой замечательной книги - она издана на туалетной бумаге.




Comments ( )
<00>  <01>  <02>  <03>  <04>  <05>  <06>  <07>  <08>  <09>  <10>  <11>  <12>  <13>  <14>  <15>  <16>  <17>  <18>  <19>  <20>  <21>  <22>  <23
Link to this page: //www.vb-net.com/MVC_Markup/index.htm
<SITEMAP>  <MVC>  <ASP>  <NET>  <DATA>  <KIOSK>  <FLEX>  <SQL>  <NOTES>  <LINUX>  <MONO>  <FREEWARE>  <DOCS>  <ENG>  <CHAT ME>  <ABOUT ME>  < THANKS ME>