网站极限改造,第 5 部分 (共 7 部分)





5.00/5 (4投票s)
添加少量 C# 代码隐藏和更多 HTML。
直接开始(与 Calaveras County Frog 别无二致)
在本系列的第五部分,我将继续对网站进行一些必要的调整和扩展。根据我在现有网站上找到的措辞(“我们的地区包括从斯托克顿到马德拉以及从索诺拉到特蕾西的中加州。”),我将主页上的内容更改为
自 1971 年以来,为加州圣华金河谷莫德斯托和梅塞德之间的 99 号公路走廊提供服务...更改为
服务中加州,从斯托克顿到马德拉,从索诺拉到特蕾西根据他们主页上的信息,我又添加了一个菜单项,即
<li><a runat="server" href="~/VGB">VGB Pool and Spa Safety Act</a></li>
...然后添加了这个新页面,并将他们主页上的文本转移到了该页面上。
这次,在添加 Web 窗体时,我选择“添加”>“新建项”>“带母版页的 Web 窗体”,并选择 Site.Master
(而不是 Site.Mobile.Master
)。
对于编码者来说,这是一小步
接下来,我将现有网站主页上的“关于我们”文本复制到“关于”页面。完成此操作后,我注意到他们提到自 1971 年开始营业,然后说已经营业了 38 年。显然,这有点过时了,所以我将数字改为 42 年,因为现在是 2013 年。
不过,“正确”的做法是添加一些代码,从当前年份中减去 1971 年并显示该值,这样今年就会显示 42 年,明年就会显示 43 年,依此类推。因此,我将此代码添加到 About.aspx.cs 文件中,放在 Page_Load()
事件处理程序上方
private const int BUSINESS_GENESIS = 1971;
protected int yearsInBusiness = DateTime.Now.Year – BUSINESS_GENESIS;
我本来可以只加一行代码就搞定
protected int yearsInBusiness = DateTime.Now.Year - 1971;
……直接将年份添加到计算中,但我喜欢遵循史蒂夫·麦康奈尔(Steve McConnell)在其开创性编程书籍《Code Complete》中的建议,为除(有时)0 和 1 之外的所有数字使用常量。如果你不知道原因,并想知道——请阅读这本书;书中充满了对编码者的绝佳建议。事实上,一个不熟悉并遵循《Code Complete》原则的程序员,就像一个……(请用你自己的话填空,填一个恰当的比喻——我想你明白我的意思(无双关之意))。
此外,我还更改了 About.aspx 中 H3 标签内的文本,从
……在过去的 42 年里,我们帮助了成千上万的人……...
...For the past <% =yearsInBusiness %> years we've helped thousands...
……这样 42(或任何计算结果)就会替换变量名。关于页面现在看起来是这样的
功能上可用,但很单调;在完成之前,我一定会回来尝试给它一些活力、魅力或任何其他东西。但目前,我将满足于它既无聊又实用的状态。
演讲的一个巨大飞跃
我用同样的方法处理 VGB 页面,将现有网站主页上的文本复制到该新页面。
我着手对联系页面做同样的处理,但注意到默认的联系页面比其他页面设置得好一些。这是微软提供的模板(省略了第一行,这与其他页面的内容非常相似)
<asp:Content ID="BodyContent"
ContentPlaceHolderID="MainContent" runat="server">
<h2><%: Title %>.</h2>
<h3>Your contact page.</h3>
<address>
One Microsoft Way<br />
Redmond, WA 98052-6399<br />
<abbr title="Phone">P:</abbr>
425.555.0100
</address>
<address>
<strong>Support:</strong>
<a href="mailto:Support@example.com">Support@example.com</a><br />
<strong>Marketing:</strong>
<a href="mailto:Marketing@example.com">Marketing@example.com</a>
</address>
</asp:Content>
因此,以此为起点,我将 Hartt's Pool Plastering 的现有文本的各个部分复制过来,使其最终变成
<asp:Content ID="BodyContent"
ContentPlaceHolderID="MainContent" runat="server">
<h2>Contact Hartt's Pool Plastering</h2>
<h3>Request More Information</h3>
<p>Use this link to contact our Sales Department to get more information about our company,
products, or services.</p>
<address>
Hartt's Pool Plastering & Construction<br />
Turlock, CA 95380<br />
<abbr title="Phone">P:</abbr>
209.668.2550
<abbr title="Fax">F:</abbr>
209.664.1955
</address>
<aside>please <a href="mailto:sales@replaster.com">email us</a></aside>
Contact
页面现在看起来是这样的

我见过更糟的。不过,所有这些页面(关于、VGB 和联系)都需要一些工作来使它们在视觉上更具吸引力,但“花哨的部分”将留到最后。
我更改了菜单项的顺序:主页、图片、联系、VGB、泳池和水疗安全法、关于
……并删除了“推荐”页面,因为他们那里没有。
结局
在这期精彩绝伦的网站极限改造的下一部分中,我将深入研究图片页面,并可能在其中添加一个 jQuery UI 小部件,例如轮播,以“幻灯片放映”的方式展示各种图片。我可能还会使用选项卡小部件将它们细分为不同的类别。到那时再见!
顺便说一句,请原谅我使用了这个奇怪且难以发音的词“peroration”(结局),但我最近一直在读威廉·萨菲尔(William Safire)的书《Lend Me Your Ears: Great Speeches in History》(借我你的耳朵:历史上的伟大演讲),并因此对它产生了免疫,因为威廉总是热衷于使用这个词。