用户界面 - ASP.NET 控件布局

Question

我对 ASP.NET 有点陌生。实际上，我是一个被边缘化的VB/SQL程序员，终于与时俱进了。但是，新技术带来了新的头痛。即：布局。

我似乎无法让一个怪胎 ASP.NET 页面看起来不错。在设计模式下，我可以插入一些表格，使用对齐方式，放置控件，它看起来都很好，很整洁，直到我按 F5。然后，我在浏览器中有垃圾。我确实知道一些 HTML，但试图用几个（比如 15 个）控件制作一个简单的表单看起来似乎是不可能的。

表格增长/缩小/扩展，它们在页面上移动我所有的东西，内墙肯定会在设计视图中调整得很有趣。我以为我会居中的控件不再居中，有些东西向右移动，有些东西向左移动。至少可以说令人沮丧！

那么，请问如何在 ASP.NET 中设计一个漂亮的界面？

我需要第三方所见即所得工具的帮助吗？我需要脑移植吗？我是否需要在余生中忘记编程，并在当地的快餐店吃汉堡翻转？

任何帮助或提示或链接或任何内容将不胜感激！

谢谢Jason

Answer 1

VS designer是让MS有话要说的 - 实际上它是没有用的。你需要了解代码中发生了什么以及html/css是如何工作的。

好的起点是css属性：display。每个元素都有此属性集（显式或隐式），它是该领域的主要参与者。如果你能理解这一点，下一个重要的事情是关于宽度/高度、边距和填充。之后是浮动以及它如何修改一切。如果你知道这些东西，那么你可以很容易地创建html/css布局。

Answer 2

这

听起来不像是一个答案，但只是我的 0.02 美元：尝试一下 Asp.Net MVC。 它更易于使用，并且对设计师更友好。 我所说的"设计师友好"是指使用像 DreamWeaver 这样的程序来执行视图的实际设计，然后使用 Razor 或使用标准 Webforms 标记对其进行标记是相当容易的 - 同时保持代码完全独立。

供您考虑（两个样本均取自斯科特·格思里的博客，上面链接）...

Asp.Net Web 窗体

<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>

如您所见，在后一个示例中，在您（和/或设计师）使用单独的工具将设计组合在一起后添加模板会相当容易。

这实现了您"与时俱进"的目标，同时让您轻松进入设计。 老实说，我在MS堆栈中唯一成功使用的所见即所得编辑器是Expression Blend以及Visual Basic和WinForms的设计器。

Answer 3

这很有趣，我想帮忙。 ASP.NET 内容最终呈现为 html（我相信您可能知道），您可以右键单击您的页面并执行"查看源代码"以查看呈现的内容，例如，如果您有一个 asp.net 网格视图，该网格视图将呈现为 HTML 表， 您可以搜索 asp.net GridView/HTML 表的 ID，然后使用该 ID，或者如果在控件上指定了 CssClass，则定义一组 css 以修饰或定位控件 asp.net 页上。

此外，如果您不喜欢"查看源代码"的想法，如果您在Internet Explorer 7+中，则可以使用开发人员工具（在选项中）来了解哪个控件背后的html是什么。在 Firefox 中，您可以安装一个名为"Firebug"的插件，并使用它来了解 asp.net 控制的 html 标记。

希望以上内容对您有所帮助。

Answer 4

真正设计网页的唯一方法是学习HTML和CSS。时期。不要使用所见即所得的设计器（如VS的设计器或Dreamweaver）。如果你是一个程序员，你应该编程，而不是所见即所得（至少对于HTML）。

使用主要的浏览器（IE，FireFox，Chrome，Safari）来检查您的布局，并确保获得所需的布局。我强烈推荐Firebug（FireFox的插件） - 它非常有用，因为您可以修改样式和HTML，直到您正确为止。

Answer 5

有时，

当涉及到HTML和CSS时，汉堡翻转可能是首选的职业选择。 它很糟糕，对于您想要实现的目标来说过于复杂，并且占用了您 90% 的时间摆弄布局、对齐面板、图像和文本。 而且它看起来仍然不如网页设计师网站。如果您真的想节省时间，请尝试使用MS MVC。 他们至少试图在某种程度上隐藏设计内容，但如果你来自Win形式或传统的 ASP.NET 方向，MVC很难学习。

至于对所见即所得设计师的建议，我不同意其他贡献者的观点。 VS设计师并不完美，但对于绝对的初学者来说，你必须从某个地方开始。 至少您可以将控件拖放到窗体上，然后担心标记和以后的所有繁琐部分 - 不要使用 CSS 开始 - 你会对此感到沮丧和愤怒。 它在正确的人手中很强大，但对于我们其他人来说，他们是开发人员而不是网页设计师，这是一个痛苦而耗时的过程。 只要得到一些有效的东西，尽管它看起来很糟糕。 一旦你设计了一些东西，那么你就可以在建立信心的同时一点一点地应用CSS。 当然，你可以把你的分数交给一个好的网页设计师，让他们处理任务，而你担心代码隐藏，业务对象和数据访问。 这是程序员的一部分，而不是弄乱HTML和CSS。 Silverlight的消亡对所有人来说都是悲伤的一天，因为它承诺停止浪费所有时间与CSS战斗。

Firebug是可以的，直到你在IE中查看你的网站，然后它就会再次分崩离析。 我倾向于使用VS designer，IE Chrome和Firebug的组合，因为它们都有问题和问题。最重要的问题是确保将浏览器支持安装到VISUAL STUDIO中 - 特别是如果您希望您的网站看起来像IE10和更高版本的Chrome和Firefox浏览器中一样。 那么你对你在VS中设计的东西有一些希望，至少会在以后的浏览器中定位自己。