ASP.NET Control Layout

Question

Я немного новичок в ASP.NET. На самом деле, я маргинальный программист на VB / SQL, который наконец справляется со временем. Но с новой технологией приходит новая головная боль. А именно: макет.

У меня не получается, что чертова страница ASP.NET выглядит хорошо. В режиме конструктора я могу вставить несколько таблиц, поиграть с выравниванием, разместить элементы управления, и все это будет выглядеть красиво и аккуратно, пока я не нажму F5. Тогда у меня есть мусор в браузере. Я немного знаю HTML, но попытка создать простую форму с несколькими (скажем, 15) элементами управления выглядит довольно невозможной.

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

Так как, могу я спросить, КАК проектировать хороший интерфейс в ASP.NET?

Нужна ли мне помощь стороннего инструмента WYSIWYG? Нужна ли пересадка мозга? Должен ли я забыть о программировании на всю оставшуюся жизнь и согласиться перекусить бургером в местном кафе быстрого питания?

Любая помощь или советы или ссылки, или что-либо еще будет принята с благодарностью!

Спасибо, Jason

Answer 1

VS конструктор для MS есть о чем поговорить - на самом деле это бесполезно. Вы должны понимать, что происходит в коде и как работает html / css.

Хорошее место для начала - свойство css: display. У каждого элемента есть это свойство (явное или неявное), и он является основным игроком на поле. Если вы можете это понять, следующая важная вещь касается ширины / высоты, поля и отступов. После этого приходит float и как он все меняет. Если вы знаете эти вещи, то можете легко создавать макеты HTML / CSS.

Answer 2

Иногда подбрасывание гамбургера, вероятно, является предпочтительным выбором карьеры, когда дело доходит до HTML и CSS.Это ужасно, слишком сложно для того, чего вы хотите достичь, и занимает 90% вашего времени, занимаясь макетом, выравниванием панелей, изображений и текста.И это все равно будет выглядеть не так хорошо, как сайт веб-дизайнеров.Если вы действительно хотите сэкономить время, попробуйте использовать MS MVC.Они, по крайней мере, пытались скрыть дизайн от разработчика до некоторой степени, но MVC трудно изучить, если вы пришли из Win-формы или традиционного направления ASP.NET.

Что касается рекомендаций для дизайнеров WYSIWYGЯ не согласен с другими участниками.VS дизайнер не идеален, но для абсолютного новичка вы должны начать где-нибудь.По крайней мере, вы можете перетаскивать элементы управления на форму и беспокоиться о разметке и всех неловких моментах позже - НЕ используйте CSS для начала - вы будете разочарованы и рассержены этим.Это мощный инструмент в правильных руках, но для остальных из нас, которые являются разработчиками, а не веб-дизайнерами, это болезненный и длительный процесс.Просто получите что-то, что работает, хотя это будет выглядеть ужасно.Когда у вас есть что-то разработанное, вы можете применять CSS постепенно, пока вы создаете уверенность.Конечно, вы могли бы просто потом отдать свою оценку хорошему веб-дизайнеру и позволить им справиться с задачей, пока вы беспокоитесь о коде позади, бизнес-объектах и ​​доступе к данным.Это программистская часть, не балующаяся HTML и CSS.Конец Silverlight - печальный день для всех, так как он обещал прекратить все время, потраченное впустую на борьбу с CSS.

Firebug в порядке, пока вы не посмотрите на свой сайт в IE, тогда он снова развалится.Я склонен использовать комбинацию дизайнера VS, IE Chrome и Firebug, поскольку все они имеют проблемы и проблемы.Самая важная проблема - убедитесь, что вы устанавливаете поддержку браузера в визуальную студию, особенно если вы хотите, чтобы ваш сайт выглядел так, как вы хотите в IE10 и более поздних браузерах Chrome и Firefox.Тогда у вас есть надежда на то, что то, что вы разработали в VS, по крайней мере позиционирует себя в более поздних браузерах.

Answer 3

Единственный способ по-настоящему разработать веб-страницы - это изучить HTML и CSS.Период.НЕ используйте дизайнеров WYSIWYG (например, дизайнера VS или Dreamweaver).Если вы программист, вы должны программировать, а не WYSIWYGing (по крайней мере, для HTML).

Используйте основные браузеры (IE, FireFox, Chrome, Safari), чтобы проверить свои макеты и убедиться, чтомакет вы хотите.Я НАСТОЯТЕЛЬНО рекомендую Firebug (дополнение для FireFox) - это ЧРЕЗВЫЧАЙНО полезно, потому что вы можете поработать со стилями и HTML до тех пор, пока не сделаете все правильно.

Answer 4

это интересно, и я бы хотел помочь.В конечном итоге содержимое ASP.NET отображается в формате html (я уверен, что вы, возможно, хорошо это знаете), вы можете щелкнуть правой кнопкой мыши на своей странице и сделать «просмотр исходного кода», чтобы увидеть, что будет отображаться, например, если у вас был gridview asp.netкоторый будет отображаться в виде таблицы html, вы можете найти идентификатор таблицы asp.net gridview / html и затем использовать идентификатор или, если вы указали CssClass в элементе управления, определите свой набор css для приукрашивания или расположения элементов управленияна вашей странице asp.net.

Также, если вам не нравится идея «просмотра исходного кода», если вы находитесь в Internet Explorer 7+, вы можете использовать Инструменты разработчика (в опциях), чтобы узнать,что такое html за какой контроль.В Firefox вы можете установить плагин под названием «Firebug» и использовать его, чтобы узнать html-разметку, за которой контролируется asp.net.

Надеюсь, что вышеприведенное поможет.

Answer 5

Это не будет похоже на большую часть ответа, но только мои 0,02 доллара: Дайте Asp.Net MVC попытку. Это намного проще в использовании и намного более удобно для дизайнеров. Под «дружественным дизайном» я подразумеваю, что довольно просто использовать программу типа DreamWeaver для создания фактического дизайна представлений, а затем пометить ее либо Razor , либо использовать стандартная разметка Webforms - при сохранении кода полностью отдельно.

На ваше рассмотрение (оба примера взяты из блога Скотта Гатри, ссылка выше) ...

Веб-формы Asp.Net

<ul id="products">
    <% foreach(var p in products) { %>
        <li><%= p.Name %> ($<%= p.Price %>)</li>
    <% } %>
</ul>

Бритва

<ul id="products">
    @foreach(var p in products) {
        <li>@p.Name ($@p.Price)</li>
    {
</ul>

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

Это соответствует вашей цели - «идти в ногу со временем» и одновременно облегчать дизайн. Честно говоря, единственными редакторами WYSIWYG в стеке MS, которые я когда-либо использовал с некоторым успехом, являются Expression Blend и разработчики для Visual Basic и WinForms.