使用模板快速启动你的设计
2008-02-23 08:35:14来源：互联网 阅读 ()
引言
现在，我要想您介绍一些工作流程中帮我开始新的web开发项目的模板。除了XHTML模板外，我还列出了一些已经帮我为多种网站建立样式指南的CSS模板和XHTML样例。
很早之前，下面这个模板或者叫指引的东西出现在head区。
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
啊，那真是一个美好的时代啊。然而，现在的世界越来越复杂，当上面的大纲用作HTML 101教程时，追随web标准当代潮流的web开发者需要更多更多的代码用以开发适当web页面。
实际上，对于一个设计者来说，入门HTML标记是最花费时间的任务之一。灵感？容易。Multiple comps？没有问题。但记住所有不同的配置样式的CSS选择器（selector）却是不那么容易。
尽管如此，在我变聪明之前，我使用定制的CSS和XHTML模板的时候发现，我打开先前项目仅仅是一遍又一遍地回答这些问题：我该怎么样包含一个外部的JavaScript文件？该如何编写meta标记？在CSS文件里怎么样注释才好？构建表单的最佳方法是什么？我的朋友，是时候终结低效率的动作了。我们开始吧。
文件
XHTML模板1
XHTML模板2
CSS模板1
CSS模板2
XHTML标记模板
在线样式指南模板
注意：这是译者修改过的文件，加入少量的翻译说明。下载原版请到Particletree。
XHTML模板1
XHTML页面的头部区域就像医生办公室里的写字板——预备性的文本工作。下面这个模板着重于兼容和完整的头部结构。除了选择doctype，余下你只需要填空。
<!-- Doctype : Choose one and delete this comment -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
</title>
<!-- Meta Tags -->
<meta http-equiv="content-type" content="application/xhtml xml; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<!-- Favicon -->
<link rel="shortcut icon" href="" />
<!-- CSS : Include and embedded versions-->
<link rel="stylesheet" href="" media="screen,projection" type="text/css" />
<link rel="stylesheet" href="" media="print" type="text/css" />
<!-- RSS -->
<link rel="alternate" href="" title="RSS Feed" type="application/rss xml" />
<!-- JavaScript -->
<script src="" type="text/javascript"></script>
</head>
XHTML模板2
模板1对于理解需要填入何种信息十分有用，但不利于快速开发和样式化因为附上了.css和.js文件。这意味着我必须得建立2个以上的文件来控制一个页面的行为（behavior）和样式。当我在最后期限或者仅仅一个页面中干活时，管理三个文件是不必要的负担。在头部添加嵌入的CSS和JavaScript区段让我可以马上开工。为避免重复展示整个模板，我只给你展示修改部分（完整部分请看模板文件）：
<!-- CSS : Include and embedded versions-->
<link rel="stylesheet" href="" media="screen,projection" type="text/css" />
<link rel="stylesheet" href="" media="print" type="text/css" />
<style type="text/css">
<!--
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Title :
Author :
URL :
Description :
Created :
Modified :
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* ----- CSS ----- */
-->
</style>
修改的CSS部分
<!-- CSS : Include and embedded versions-->
<link rel="stylesheet" href="" media="screen,projection" type="text/css" />
<link rel="stylesheet" href="" media="print" type="text/css" />
<style type="text/css">
<!--
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Title :
Author :
URL :
Description :
Created :
Modified :
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* ----- CSS ----- */
-->
</style>
修改的JavaScript部分
<!-- JavaScript : Include and embedded version -->
<script src="" type="text/javascript"></script>
<script type="text/javascript">
<!--
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
//
// Title :
// Author :
// URL :
// // Description :
// // Created :
// Modified :
// // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
// JavaScript
window.onload = function(){}
//-->
</script>
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
