zoukankan      html  css  js  c++  java
  • [转]How to Create HTML5 Website and Page Templates for Visual Studio 2010

    本文转自:http://blog.reybango.com/2010/09/21/how-to-create-html5-website-and-page-templates-for-visual-studio-2010/

    Now that I work at Microsoft, I’m using Visual Studio 2010 as my main editor. By default, an empty web page is created with an XHTML 1.0 doctype and it’s pretty barebones. Since I’m focusing on HTML5 & JavaScript development, having to constantly update the page with references to the new HTML5 doctype, jQuery, Modernizr and all of the other tags I use for my pages was becoming a drag.

    Today, I noticed a blog post by Zander Martineau in which he added a lot of HTML5 goodness to the Coda IDE in the form of clips, which is the code snippet format supported by Coda. This got me inspired to find out how to do something similar in Visual Studio, so I pinged Damian Edwards of the Visual Studio team for advice. He pointed me to the following article which explained how to create “Item Templates” in Visual Stuido.

    The gist of it is that you can take any page that you create and turn it into a re-usable template via the “File->Export Template…” wizard. It walks you through the process of choosing a specific file or entire project/website to use as a template.

    Adding a Page Template

    So here’s the basic HTML5 template I wanted to include:

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta name="author" content="" />
        <meta name="viewport" content="width=device-width; initial-scale=1.0" />
      
        <!-- !CSS -->
        <link href="css/html5reset.css" rel="stylesheet" />
        <link href="css/style.css" rel="stylesheet" />
      
        <!-- !Modernizr - All other JS at bottom
        <script src="js/modernizr-1.5.min.js"></script> -->
      
        <!-- Grab Microsoft's or Google's CDN'd jQuery. fall back to local if necessary -->
        <!-- <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script> -->
        <!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> -->
        <script>      !window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')</script>
      
    </head>
      
    <body>
        <div id="container">
      
        </div>
    </body>
      
    </html>

    After I created and saved this page, I went to “File->Export Template…” and followed these steps:

    Now, when I select “File->New File…” to add a new item, my template is available:

    Adding a Web Site Template

    Creating this page template was a huge help. I can now start with a fresh template that specifically works for my style of development but I didn’t want to stop there. I also wanted to create a skeleton that I could use as the basis for new websites and I wanted it to package all of the important files that I use from the get-go. In this case, I wanted:

    • My HTML5 basic page template
    • jQuery
    • Modernizr
    • HTML5 Reset CSS file
    • An empty CSS file called style.css
    • A consistent folder structure for all of these

    The first thing I needed to do was to create a new website in Visual Studio. From there, I needed to create and/or organize all of the files that I wanted as the basis for my skeleton. Using the same Export Template wizard, I followed the following steps to create my project skeleton:

    So now when I select “File=>New Web Site” I see my new template:

    and when I choose that, here’s what gets loaded for my new site:

    Download the Templates

    Note: The templates in this article have been updated to support jQuery 1.5.1 & Modernizr 1.7. Check it out here.

    This is a huge time-saver for me and I want to share this. I’ve made both templates available for download so you can drop them into Visual Studio yourself. Just grab the specific file and drop the zip into the folder I specified:

    HTML5 Page Template

    Drop this into “Visual Studio 2010 > Templates > ItemTemplates” folder

    HTML5 Web Site Template

    Drop this into “Visual Studio 2010 > Templates > ProjectTemplates” folder

    Related posts:

    1. jQuery JavaScript Templates Tutorial: Nesting Templates In my last post, I presented an intro to how...
    2. Not Using jQuery JavaScript Templates? You’re Really Missing Out. In preparation for my upcoming talk on jQuery Templates, I’ve...
    3. jQuery JavaScript Templates Tutorial: Inline Expressions and Code Blocks So far in my series on jQuery JavaScript Templating, I’ve...
    4. How to Easily Inject jQuery into any Web Page I use jQuery…a lot. It just makes JavaScript development much...
    5. I’m Presenting on jQuery Templates at ThinkVitamin’s jQuery Online Conference This coming Monday (7/12/2010), I’ll be one of the speakers...
  • 相关阅读:
    如何提高逻辑思维的能力 思维的层次 逻辑思维能力练习方式
    淘宝JAVA中间件Diamond详解之简介&快速使用 管理持久配置的系统
    java 取模运算% 实则取余 简述 例子 应用在数据库分库分表
    SpringMVC+Spring+mybatis项目从零开始--Spring mybatis mysql配置实现
    SpringMVC+Spring+mybatis项目从零开始--分布式项目结构搭建
    JS密码校验规则前台验证(不能连续字符(如123、abc)连续3位或3位以上)(不能相同字符(如111、aaa)连续3位或3位以上)
    12 个非常实用的 jQuery 代码片段
    html增加和删除div
    css改变hr颜色
    jquery怎么在点击li标签之后添加一个在class,点击下一个li时删除上一个class?
  • 原文地址:https://www.cnblogs.com/freeliver54/p/2060698.html
Copyright © 2011-2022 走看看