用VS2012开发手机网站-有没有完整的新手入门的教程

教程大全 2026-01-28 11:56:11 浏览次

在移动互联浪潮的初期,Visual Studio 2012（简称VS2012）为开发者提供了强大而便捷的手机网站开发环境，尽管如今已有更先进的工具，但掌握其核心开发流程，对于理解Web技术演进和进行旧项目维护依然具有重要意义，本教程将引导您了解如何利用VS2012构建适配移动设备的网站。

环境与项目搭建

确保您已安装Visual Studio 2012，并包含Web开发相关组件，创建移动网站最直接的方式是利用ASP.NET MVC 4项目模板，它内置了对移动开发的友好支持。

这个模板极大地简化了初始配置,让开发者可以专注于业务逻辑和界面实现。

核心开发技术

在VS2012中进行手机网站开发,关键在于掌握响应式布局和移动交互设计。

响应式布局基础

为了让网站在不同尺寸的移动设备上都能良好显示,响应式布局是核心技术，其基础是元标签和CSS媒体查询。

框架选择与利用

虽然可以手写CSS实现响应式,但使用框架能显著提高效率，VS2012的“移动应用程序”模板默认集成了jQuery Mobile，这是一个专门为移动触摸设备优化的UI框架。

特性	手写CSS	jQuery Mobile (VS2012模板)
开发速度	较慢，需大量自定义代码	快速，提供丰富的预制UI组件
UI一致性	依赖开发者设计能力	高度一致，主题化能力强
交互体验	需自行处理触摸事件	内置触摸优化的事件和手势支持
学习曲线	基础CSS知识	需学习框架特定的API和标记约定

利用jQuery Mobile，开发者只需使用简单的属性，就能创建按钮、列表、对话框等移动端常见的界面元素，并且这些元素自动具备触摸友好的尺寸和样式。

调试与测试

VS2012内置的浏览器（如IE10）提供了开发者工具（按F12调用），可以模拟不同设备尺寸和用户代理，方便进行初步的布局和功能调试，模拟器无法完全替代真实设备，强烈建议在真实的iOS、Android和Windows Phone设备上进行测试，以确保网站在各种环境下的兼容性、性能和用户体验。

优化与发布

移动用户对网络速度敏感,因此性能优化至关重要，在发布前，应压缩CSS和JavaScript文件，优化图片大小（使用适当的格式和压缩率），并尽量减少HTTP请求次数，完成开发和测试后，可以使用VS2012的“发布Web”功能，将网站一键部署到远程服务器。

visual basic Express Edition2008(懂VB的请进！！）

Visual Basic 2008 Express Edition是免费（注意，是免费）的的IDE集成开发环境，是Visual Studio的一个子集。在功能上仅限于开发基于的Winform、Console Application、WPF程序，以及包括其他一些基本的功能。其定位是提供给新手和进行简单使用。 VB2008 Express版有中文版本，并且是微软官方免费提供的（，下载时选择中文即可），如果您不是用来进行专业开发，建议下载使用此版本。 Express版占用的硬盘空间也会很少，只有几百M，而Professional版的VS+MSDN要占用将近2G硬盘空间最后，Visual Studio是收费软件，而且价格不菲，从某些角度来说更建议您在初学时使用Express版，在学习深入后再使用VS进行更加高级的开发

如何制作网页

首先，可以告诉想学网页制作的朋友。学习制作网页和学习其它知识一样，是要有基础的。在基础之上学习起来会比较轻松和快捷的。其次，要清楚学习它是用来做什么。建议你要具备的条件：对电脑熟练操作，使用电脑最好在一年以上，对网页设计感兴趣，有较充足的学习时间，熟悉office办公软件。当然，这些不是一定必须的。第一阶段：开始时最好是学些网页编辑软件，如：FrontPage、Dreamweaver.这样可以使您更了解网页制作与运营的原理。最好使拿本教程来学学，结合教程边学习边制作。第二阶段：会用网页制作软件后，已会制作一个较完整的网站了。但为了能使自己设计制作的网页尽善尽美，还是学习网页的核心技术吧！网页编辑语言（包括:html、css、javascript、asp、xml等）。你可以选择地学习。第三阶段:结合你自己已掌握地知识来开发网站，可以开发出别人给你定义的目标网站。到了这个时候，你就成为真正的网站开发者了。怎样制作网页，不是说一两篇文章能够说清楚的。以上介绍的是制作网页的主要纲要，希望能够给想要学习制作网页的朋友一个参考。二一、工具1、空间网页做好了肯定是要发表上网的，所以必须先申请一个空间；免费的空间不是很稳定，容量又小，也不好申请，建议到大的网站如新浪、网易去先买一个个人空间，大概有个20M以上的就可以了。 2、软件推荐使用Dreamweaver6.0中文版，这个软件最大的特点就是“所见即所得”，也即是制作过程中看到的，便是到时发布到网络上的。二、教程花点时间，找个比较通俗易懂的教程看一看是很有必要的。每个网页的组成，不外是文字、表格、图、动画还有就是背景音乐等几个大的元素，搞清楚如何将这些元素摆放进去，你也就算懂得如何制作网页了。推荐一个教程地址，有空可以去看看，三、制作开始时建议去下载一个比较简单的网页，在制作软件中将它打开，然后仔细观察人家的网页的构成，模仿它去填充各种元素，实践中再配合着教城，进度会快很多，记得也牢一些。其实做网页并不难，但要做出有特色的网页来，那就非一朝一夕之功了。一点个人的粗浅体会，不妥之处敬请指正。三网站设计八步骤由于目前所见即所得类型的工具越来越多，使用也越来越方便，所以制作网页已经变成了一件轻松的工作，不像以前要手工编写一行行的源代码那样。一般初学者经过短暂的学习就可以学会制作网页，于是他们认为网页制作非常简单，就匆匆忙忙制作自己的网站，可是做出来之后与别人一比，才发现自己的网站非常粗糙，这是为什么呢？常言道：“性急吃不了热豆腐”。建立一个网站就像盖一幢大楼一样，它是一个系统工程，有自己特定的工作流程，你只有遵循这个步骤，按部就班地一步步来，才能设计出一个满意的网站。一、确定网站主题网站主题就是你建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。特别是对于个人网站，你不可能像综合网站那样做得内容大而全，包罗万象。你没有这个能力，也没这个精力，所以必须要找准一个自己最感兴趣内容，做深、做透，办出自己的特色，这样才能给用户留下深刻的印象。网站的主题无定则，只要是你感兴趣的，任何内容都可以，但主题要鲜明，在你的主题范围内内容做到大而全、精而深。二、搜集材料明确了网站的主题以后，你就要围绕主题开始搜集材料了。常言道：“巧妇难为无米之炊”。要想让自己的网站有血有肉，能够吸引住用户，你就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。材料既可以从图书、报纸、光盘、多媒体上得来，也可以从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。三、规划网站一个网站设计得成功与否，很大程度上决定于设计者的规划水平，规划网站就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，你只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。也只有如此制作出来的网页才能有个性、有特色，具有吸引力。如何规划网站的每一项具体内容，我们在下面会有详细介绍。四、选择合适的制作工具尽管选择什么样的工具并不会影响你设计网页的好坏，但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。网页制作涉及的工具比较多，首先就是网页制作工具了，目前大多数网民选用的都是所见即所得的编辑工具，这其中的优秀者当然是Dreamweaver和Frontpage了，如果是初学者，Frontpage2000是首选。除此之外，还有图片编辑工具，如Photoshop、Photoimpact等；动画制作工具，如Flash、Cool 3d、Gif Animator等；还有网页特效工具，如有声有色等，网上有许多这方面的软件，你可以根据需要灵活运用。五、制作网页材料有了，工具也选好了，下面就需要按照规划一步步地把自己的想法变成现实了，这是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂来进行制作。所谓先大后小，就是说在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。所谓先简单后复杂，就是先设计出简单的内容，然后再设计复杂的内容，以便出现问题时好修改。在制作网页时要多灵活运用模板，这样可以大大提高制作效率。六、上传测试网页制作完毕，最后要发布到Web服务器上，才能够让全世界的朋友观看，现在上传的工具有很多，有些网页制作工具本身就带有FTP功能，利用这些FTP工具，你可以很方便地把网站发布到自己申请的主页存放服务器上。网站上传以后，你要在浏览器中打开自己的网站，逐页逐个链接的进行测试，发现问题，及时修改，然后再上传测试。全部测试完毕就可以把你的网址告诉给朋友，让他们来浏览。七、推广宣传网页做好之后，还要不断地进行宣传，这样才能让更多的朋友认识它，提高网站的访问率和知名度。推广的方法有很多，例如到搜索引擎上注册、与别的网站交换链接、加入广告链等。八、维护更新网站要注意经常维护更新内容，保持内容的新鲜，不要一做好就放在那儿不变了，只有不断地给它补充新的内容，才能够吸引住浏览者 .四一、首先确定你要制作的网页的主题，就是你建这个网站的内容是什么（注：网站和网页的关系与区别就好比一本书和其中的一个页面的关系）；二、确定你的网页的阅读对象，就是你的网页是准备给那些人看的；三、选择制作网页的工具软件，常见的有dreamweaver和office组件里面的frontpage，如果你是初学者，哪我建议你使用frongpage,因为这个软件的入门比较简单（当然功能也很强大），如果你会使用word的话，哪就可以很快作出网页的，如何你想作专业的网页制作人员，哪我建议你使用dreamweaver，目前的版本是XM，我现在就使用，很好用的，这个软件的好处是不怎么产生垃圾代码，并且支持各种代码的性能很好，基本上各种代码可以直接编辑。四、如果你作好了页面，就需要考虑你的网页放到什么地方发表，也就是平常我们说的发表空间，我们学校的用户网络中心已经申请好了空间，大家可以直接使用（有发布空间的标志是你有了FTP账号，这个需要申请）。五、找到发布空间以后，你需要把自己的网页上传到你的发布空间，这个需要一个上传软件，我推荐使用ACEFTP，这个软件体积小，速度快，注意我发现这个软件的2.0中文版不能够正确使用，我建议使用1.31版。六、制作网页需要的其他相关软件：ACDSEE,这个是查看图片的最好软件，也可以对图片作简单的处理，目前的版本是4.0，网上很多地方可以下载；另外如果你对图片需要复杂处理的话，哪最好选择使用PHOTOSHOP，目前的版本是7.0，也有中文补丁，使用起来很方便，当然，这个软件的学习使用相对是比较难点的。 7、使用层的时候最好定义为div标签而不是layer，因为前者在两种主流浏览器都有很好的兼容性。 8、在用图片制作热区链接时，最好给热区命名，防止有时只能在图片上画出直线。 9、当我们将框架结构建立好后，可以将此框架体文件和Site窗体并排放置，然后从Site中选择网页文件拖放到相应的框架中。这适用于框架比较复杂的页面。 10、如果对一张图片不满意，想更换另一张，最简单的方法双击此图片，直接选择要替换的图片即可。 11、在预览网页之前最好先保存一下，有时候在不能正确预览网页，而存一下就可能会解决这个问题。 12、如果你的页面中使用了CSS或是Java Applet，最好不要使用“file->convert->3.0 browser compatible”命令，因为这一选择会把所有3.0 浏览器不认识的定义都抹去。最可怕的是我们不知道在这个过程中Dreamweaver 到底做了什么，具体发生了那些变化。而且要提醒你，对一批页面执行此操作时，一定要先备份，否则可没地方买后悔药。