VS2010的HTML 5项目模板你用了吗？

473687880

浏览: 484236 次

最近访客更多访客>>

roronoa

devcang

黄小胖

efaekah

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (907)

社区版块

存档分类

2013-11 ( 60)
2013-10 ( 262)
2013-09 ( 96)
更多存档...

Visual Studio 2010中的HTML 5项目模板可以让您率先体验HTML 5的魅力。本文将告诉大家如何运用这一项目模板。

HTML5时代来了，还不为你的Visual Studio 2010添加HTML5的项目模板！！！

本文在简单不过了，就是为你的Visual Studio2010创建一个项目模板，一个HTML5的项目模板。谁叫HTML5时代来了，Visual Studio 2010又没提供此模板呢？那我们就动手做一个吧！

先写一个HTML5的基本模板，index.html代码如下：


<!doctypehtml>

<htmllang="en"><head> 


<metacharset="utf-8"/> 


<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"/> 


<title></title> 


<metaname="description"content=""/> 


<metaname="keywords"content=""/> 


<metaname="author"content=""/> 


<metaname="viewport"content="width=device-width;initial-scale=1.0"/> 


<!--!CSS--> 


<linkhref="css/html5reset.css"rel="stylesheet"/>


<linkhref="css/style.css"rel="stylesheet"/> 

<!--!Modernizr-AllotherJSatbottom 

<scriptsrc="js/modernizr-1.5.min.js">


</script>--> 


<!--GrabMicrosoft'sorGoogle'sCDN'djQuery.fallbacktolocalifnecessary--> 

<!--<scriptsrc="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"type="text/javascript">

</script>--> 


<!--<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>--> 


<script> 


!window.jQuery&&document.write('<scriptsrc="js/jquery-1.4.2.min.js"><\/script>') 


</script></head><body> 


<divid="container"> 


</div></body></html>

按照msdn上的How to: Create Item Templates这篇文章，为Visual Studio 2010创建一个项目模板。当我做到第3步，怎么也找不到Export Template这个菜单项。经过一番摸索，原来Visual Studio 2010还需要安装一个插件才会有这个菜单项，下载地址为：Export Template Wizard。安装完成后按照下面步骤配置。

1、启动 Visual Studio 2010。

2、在“文件”菜单中，依次选择“新建”和“项目”。将打开“新建项目”对话框。在 Visual Basic 或 Visual C# 中选择“WEB应用程序”，然后将其命名为“HTML5Template”。单击“确定”。

3、在这个项目中添加下面这些文件。

两个分别放置js和css的文件夹：css、js

HTML5基本模板页：index.html

jQuery：jquery-1.4.2.min.js
Modernizr ：modernizr-1.5.min.js
HTML5样式文件：html5reset.css

一个空的css文件：style.css

项目结构如下图：

4、在“文件”菜单中选择“全部保存”来保存项目。