Верстка в ASP NET MVC.
![](/MVC_Markup/Html-markup-1.png)
Стоит верстка такой формы на открытом рынке 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 тычков мышкой за вдвадцатеро большие деньги, но именно поэтому работа верстальщика должна быть максимально быстрой и четкой. Если вы будете раздумывать больше пол-секунды куда дальше тыкнуть в инструменте, чтобы сделать нужную вам операцию - то скоро поймете, что экономически выгоднее выйти на улицу и пособирать вокруг дома пустые банки и бутылки - так заработаете больше.
Итак, погнали - открываем результат работы дизайнера в фотошопе и разрезаем его слайсером:
![](/MVC_Markup/Html-markup-2_1.png)
Результат передаем в ImageReady:
![](/MVC_Markup/Html-markup-3_1.png)
![](/MVC_Markup/Html-markup-4_1.png)
В ImageReady для этой простейшей задачки ничего не делаем, а сразу вызываем предпросмотр результата:
![](/MVC_Markup/Html-markup-5_1.png)
![](/MVC_Markup/Html-markup-6_1.png)
Бегло проверяем Фаербагом разрезку на отсутствие ошибок - вроде все нормально. (заодно посмотрите инструменты верстальщика).
![](/MVC_Markup/Html-markup-7_1.png)
![](/MVC_Markup/Html-markup-8_1.png)
![](/MVC_Markup/Html-markup-9_1.png)
![](/MVC_Markup/Html-markup-10_1.png)
![](/MVC_Markup/Html-markup-11_1.png)
![](/MVC_Markup/Html-markup-12_1.png)
![](/MVC_Markup/Html-markup-13_1.png)
![](/MVC_Markup/Html-markup-14_1.png)
Открываем в файловой системе то, что родил ImageReady:
![](/MVC_Markup/Html-markup-15_1.png)
![](/MVC_Markup/Html-markup-16_1.png)
![](/MVC_Markup/Html-markup-17_1.png)
![](/MVC_Markup/Html-markup-18_1.png)
![](/MVC_Markup/Html-markup-19_1.png)
![](/MVC_Markup/Html-markup-20_1.png)
![](/MVC_Markup/Html-markup-21_1.png)
Копирую в папку проекта нарезку (учтя, что папка Images у меня в проекте уже есть и она используется для других целей):
![](/MVC_Markup/Html-markup-22_1.png)
![](/MVC_Markup/Html-markup-23_1.png)
![](/MVC_Markup/Html-markup-24_1.png)
Чуток подправляю пути, импортирую папку с рисунками в проект:
![](/MVC_Markup/Html-markup-25_1.png)
![](/MVC_Markup/Html-markup-26_1.png)
![](/MVC_Markup/Html-markup-27_1.png)
Отлично. Нарезка уже в студии. Теперь перенесем нарезку на странички ASP.NET MVC.
![](/MVC_Markup/Html-markup-28_1.png)
![](/MVC_Markup/Html-markup-29_1.png)
![](/MVC_Markup/Html-markup-30_1.png)
![](/MVC_Markup/Html-markup-31_1.png)
Проверям master-page проекта. Выбрасываем из него все лишнее, кроме @RenderBody().
![](/MVC_Markup/Html-markup-31_1.png)
Вносим HTML резинового дизайна - чтобы вертикальная полоса с собственно сайтом располагалась посреди сколь угодно широкого экрана. Это можно было бы вставить и на плашку - но для странички с отображением ошибок это может быть неудобно.
![](/MVC_Markup/Html-markup-32_1.png)
Опять чуток подправляем пути к рисункам, чтобы студия не ругалась для формата файла vbhtml.
![](/MVC_Markup/Html-markup-33_1.png)
Теперь попробуем внести код сайта в верстку. Начнем с поля для ввода (кнопку пока закоментируем).
![](/MVC_Markup/Html-markup-34_1.png)
![](/MVC_Markup/Html-markup-35_1.png)
Обратите внимание на мою ошибку. Из-за обьектного экстремизма в MVC все атрибуты CSS оказываются тупо строками. Я ошибся и вбил вместо равно двоеточие. Вот результат который я увидел на экране из-за этой ошибки.
![](/MVC_Markup/Html-markup-36_1.png)
![](/MVC_Markup/Html-markup-37_1.png)
![](/MVC_Markup/Html-markup-38_1.png)
Поэтому правильным методом может быть только ссылка на внешний класс. Тогда по крайней мере вы будете гарантированы от подобных адских ошибок - на поиск которых можно потратить неограниченное количество времени.
![](/MVC_Markup/Html-markup-39_1.png)
![](/MVC_Markup/Html-markup-40_1.png)
Так, запускаем - проверяем, уже лучше. Размер шрифта явно маловат- увеличиваем.
![](/MVC_Markup/Html-markup-41_1.png)
![](/MVC_Markup/Html-markup-42_1.png)
Отлично, мы много добились. Страничка запускается, верстка не расползается. Первое поле ввода уже есть. Теперь можно приступать к изгтовлению Rollover-кнопки.
Смотрим какой открыть рисунок и открываем его.
![](/MVC_Markup/Html-markup-43_1.png)
![](/MVC_Markup/Html-markup-44_1.png)
Теперь следите за руками - ловкость рук и никакого мошенничества - ролловер готов.
![](/MVC_Markup/Html-markup-45_1.png)
![](/MVC_Markup/Html-markup-46_1.png)
![](/MVC_Markup/Html-markup-47_1.png)
![](/MVC_Markup/Html-markup-48_1.png)
![](/MVC_Markup/Html-markup-49_1.png)
![](/MVC_Markup/Html-markup-50_1.png)
![](/MVC_Markup/Html-markup-51_1.png)
![](/MVC_Markup/Html-markup-52_1.png)
![](/MVC_Markup/Html-markup-53_1.png)
![](/MVC_Markup/Html-markup-54_1.png)
![](/MVC_Markup/Html-markup-55_1.png)
Теперь навесим ролловер на кнопку. Навешивать рисунок будем на имеющийся тег <td>
![](/MVC_Markup/Html-markup-56_1.png)
![](/MVC_Markup/Html-markup-57_1.png)
![](/MVC_Markup/Html-markup-58_1.png)
Запускаем, проверяем - наблюдаем чудо - форма работает!
![](/MVC_Markup/Html-markup-59_1.png)
Напоследок выполним в Dreamweaver маленькую косметическую операцию - соберем со всех элементов стили, разбросанные по страничке в одно место. Здесь я использую Дрим просто потому, что знаю как это быстро сделать. Для простейшей формы в одну кнопку он в принципе не нужен. Но для более сложных версток он незаменим.
Переносим в него страничку (ибо формат vbhtml он не понимает) и собираем стили.
![](/MVC_Markup/Html-markup-60_1.png)
![](/MVC_Markup/Html-markup-61_1.png)
![](/MVC_Markup/Html-markup-62_1.png)
![](/MVC_Markup/Html-markup-63_1.png)
![](/MVC_Markup/Html-markup-64_1.png)
![](/MVC_Markup/Html-markup-65_1.png)
![](/MVC_Markup/Html-markup-66_1.png)
![](/MVC_Markup/Html-markup-67_1.png)
![](/MVC_Markup/Html-markup-68_1.png)
Как вы понимаете, для реальной странички даже этот сбор тегов вручную был бы достаточно обременительным. Второй инструмент, который совсем не был задействован при верстке этой элементарной странички в одну кнопку - это Web Debeloper. Но это инструмент веcьма полезный - в нем удобно также смотреть журнал ошибок CSS, в нем удобные линейки и многое другое. А ДИВ-ные верстки я вообще не могу делать без него.
Вот пример моей верстки на DIV-ах. Основной момент при верстке на дивах - это порядок дивов, чтобы увидеть кто для кого является родительским дивом (и от кого будет выполняться absolute-позиционирование). Ведь все DIV-ы разбросаны в исходном виде весьма прихотливо - какие-то на master-page, какие-то в контролах, какие-то статически располодены на страничках, какие-то порождаются динамически (в LITERAL в ASP.NET или в ACTION в MVC). И стоит написать ABSOLUTE (а без него не получится сверстать на ДИВАах ровно ничего) - как порождаемый ДИВ выстроится относительно тега-родителя. В исходном виде найти родительский DIV найти практически невозможно - лично я ищу его с помощью Web Developer:
![](/MVC_Markup/Html-markup-69_1.png)
![](/MVC_Markup/Html-markup-70_1.png)
Но дивные верстки выполняются иначе и этого вопроса в этом кратком введении в тему верстки мы касаться не будем.
Перед выкладкой сайта на хостинг, надо обязательно проверить верстку во всех браузерах, хотя для простейшей табличной верстки с одной кнопкой это выглядит тоже слегка излишним (однако при проверке можно заметить, что даже в описанной здесь проcтейшей форме Опера курсор не выставляет в HangUp).
В заключение я хотел бы порекомендовать начинающим верстальщикам несколько книжек, которыя мне иногда помогают (помимо онлайновых справок). Ведь все перечисленные выше замечательные инструменты лишь позволяют ускорить ту или иную задуманную операцию. В конце концов HTML можно писать и в нотепаде (только при работе с таким сервисом простейшая описка - пример которой я показал выше - может вызвать многочасовый ступор). Но перед тем, как выполнять инструментами верстальщика какую-то операцию - надо видеть в голове макет страницы и понимать досконально все возможности CSS, которыми этот макет можно реализовать. Например на указанной простейшей страничке мне потребовалось натянуть rollover на кнопку постбека - надо четко понимать, что натянуть rollover по hover возможно только на родительский тег для тега <input type="submit"> (и чтобы при этом форма ушла по постбеку). А если вы плохо знаете CSS и вообще не понимаете куда приткнуть ролловер в этом случае - то что вы будете делать всеми описанными инструментами?
Левая книжка - она сделана как бы для начинающих. Но в ней есть такие перлы! Например я узнал именно из нее, что если опустить перед тегом <html тег <DOCTYPE - то любой Internet Explorer (даже восьмой) будет отображать так, как отображал бы страничку IE пятый. И наряду с пережевываением элементарных вещей - вся эта книга пересыпана подобными перлами. Вторая книга самая занудная и подробная, например если я путаюсь кто является тегом-родителем, то список правил для поиска тега-родителя я смотрю именно там. Третья книга - это сборник чрезвычайно полезных рецептов. Например именно из нее я узнал, как убрать рамку вокруг линка-рисунка, которую показывает FireFox при клике. Таких отличных рецептов в ней - 244. Единственный недостаток этой замечательной книги - она издана на туалетной бумаге.
![](/MVC_Markup/ДевидМакфарланд.png)
![](/MVC_Markup/ЭрикМайер.png)
![](/MVC_Markup/КристоферШмитт.png)
![](http://forum.vb-net.com/GetTopicCount.png?id=E3A6C398-639D-49DF-8DAB-A7C3EFA5DBD1)
<SITEMAP> <MVC> <ASP> <NET> <DATA> <KIOSK> <FLEX> <SQL> <NOTES> <LINUX> <MONO> <FREEWARE> <DOCS> <ENG> <CHAT ME> <ABOUT ME> < THANKS ME> |