使用模板快速启动你的设计

2022-07-15 80酷酷网 80kuku.com

　　模板|设计

引言

现在，我要想您介绍一些工作流程中帮我开始新的web开发项目的模板。除了XHTML模板外，我还列出了一些已经帮我为多种网站建立样式指南的CSS模板和XHTML样例。

很早之前，下面这个模板或者叫指引的东西出现在head区。

啊，那真是一个美好的时代啊。然而，现在的世界越来越复杂，当上面的大纲用作HTML 101教程时，追随web标准当代潮流的web开发者需要更多更多的代码用以开发适当web页面。

实际上，对于一个设计者来说，入门HTML标记是最花费时间的任务之一。灵感？容易。Multiple comps？没有问题。但记住所有不同的配置样式的CSS选择器（selector）却是不那么容易。

尽管如此，在我变聪明之前，我使用定制的CSS和XHTML模板的时候发现，我打开先前项目仅仅是一遍又一遍地回答这些问题：我该怎么样包含一个外部的JavaScript文件？该如何编写meta标记？在CSS文件里怎么样注释才好？构建表单的最佳方法是什么？我的朋友，是时候终结低效率的动作了。我们开始吧。

文件

注意：这是译者修改过的文件，加入少量的翻译说明。下载原版请到Particletree。

XHTML模板1

XHTML页面的头部区域就像医生办公室里的写字板——预备性的文本工作。下面这个模板着重于兼容和完整的头部结构。除了选择doctype，余下你只需要填空。

<!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 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="" />

<link rel="shortcut icon" href="" />

<link rel="stylesheet" href="" media="screen,projection" type="text/css" />
<link rel="stylesheet" href="" media="print" type="text/css" />

<link rel="alternate" href="" title="RSS Feed" type="application/rss+xml" />

<script src="" type="text/javascript"></script>
</head>

XHTML模板2

模板1对于理解需要填入何种信息十分有用，但不利于快速开发和样式化因为附上了.css和.js文件。这意味着我必须得建立2个以上的文件来控制一个页面的行为（behavior）和样式。当我在最后期限或者仅仅一个页面中干活时，管理三个文件是不必要的负担。在头部添加嵌入的CSS和JavaScript区段让我可以马上开工。为避免重复展示整个模板，我只给你展示修改部分（完整部分请看模板文件）：

<link rel="stylesheet" href="" media="screen,projection" type="text/css" />
<link rel="stylesheet" href="" media="print" type="text/css" />
<style type="text/css">

</style>

修改的CSS部分

修改的JavaScript部分

<script src="" type="text/javascript"></script>
<script type="text/javascript">


</script>

这些嵌入的部分同时让我不至于忘记正确的编写.js和.css文件。现在没有借口了，因为这实在很容易。JavaScript部分包含了一个var webSiteID = 6;window.onload的空函数，以备有时运行页面载入脚本之需。当一切运行良好时，如果需要恰当的文件管理，我只需要把CSS和JavaScript拷贝到外部文件去。

CSS模板1

如果我知道正在干着的网站会有大块大块的CSS来袭，我喜欢使用下面这个有几分类似飞机起飞前检查清单的模板，它确保我可以顾及所有基本的选择器。假使一个页面的不同区域的同一组选择器（比如无序列表）要使用不同的样式，我只需拷贝粘贴，并加上恰当的id和class。没有用到的话，我只需删掉。以下是CSS模板1的样例：

/* ----- IDS ----- */
#container{
}
#primaryContent{
}
#secondaryContent{
}
#navigation{
}
#footer{
}
/* ----- CLASSES ----- */
.hide{
}
.show{
}
/* ----- HEADINGS ----- */
h1{
}
h2{
}
h3{
}
h4{
}
/* ----- LISTS ----- */ li{
}
li p{
}
ol{
}
ul{
}
ol li{
}
ul li{
}
/* ----- IMAGES ----- */
img{
}
img a{
}
img a:hover{
}
/* ----- LINKS ----- */
a{
}
a:hover{
}
a:visited, a:active, a:focus{
}
a:visited{
}
a:active{
}
a:focus{
}
/* ----- FORMS ----- */
form{
}
fieldset{
}
legend{
}
label{
}
input{
}
textarea{
}
input, textarea{
}
select{
}
optgroup{
}
option{
}
/* ----- TABLES ----- */
table{
}
caption{
}
thead{
}
tbody{
}
tfoot{
}
tr{
}
tr .alt{
}
th{
}
td{
}

CSS模板2

你知道什么遥不可及吗？记住并且填入所有CSS选择器恰当的性质（property，又译特性，属性）。留意我大部分的项目，我一遍又一遍地为选择器使用相同的性质。所以我创建另外一个基于CSS模板1的模板，在里面为所有CSS选择器添加经常会用的CSS性质。以下是CSS模板2的样例：

/* ----- CSS ----- */
*{
margin:;
padding:;
font-family:;
font-size:;
}
body{
margin:;
padding:;
background:;
}
/* ----- IDS ----- */
#container{
width:;
margin:;
padding:;
background:;
text-align:;
}
#primaryContent{
position:;
float:;
width:;
margin:;
padding:;
background:;
text-align:;
}
/* ----- CLASSES ----- */
.hide{
display:none;
} .show{
display:block;
}
/* ----- PARAGRAPHS ----- */
p{
font:;
color:;
font-size:;
font-family:;
font-style:;
font-weight:;
font-variant:;
text-align:;
text-indent:;
text-decoration:;
text-shadow:;
text-transform:;
letter-spacing:;
word-spacing:;
}
/* ----- LISTS ----- */
li{
listy-style:;
list-style-type:;
list-style-image:;
list-style-position:;
float:;
margin:;
padding:;
}
/* ----- LINKS ----- */
a{
font:;
color:;
text-decoration:;
border-bottom:;
}
a:hover{
color:;
background-color:;
border-bottom:;
}
a:visited, a:active, a:focus{
color:;
background-color:;
border-bottom:;
}

很好，你已经有所斩获。需要注意的是，我也加入了通用选择器（shorthand selectors）如font和list-style取代与之相应的独个性质。这可以在设计和开发阶段有更多选择。

HTML标记模板

但是没有XHTML标记来示范，这些CSS选择器和性质能有什么好处呢？XHTML模板是我的web设计的Lorem Ipsum。以下是来自该模板的示例：

<div id="container">
<h1><a href="" title="Test Link">Untitled</a> - Online Style Guide Template (h1)</h1>
<p>Title : <em>Title of this Document</em><br />
Description : <em>A description of this document that explains how this guide should be used.</em></p>
<p>Author : <em>The Author</em><br />
URL: <em>http://url.to.reference.com</em><br /></p>
<p>Created : <em>Month DD, YYYY</em><br />
Modified : <em>Month DD, YYYY</em><br /></p>
<hr />
<div id="navigation">
<h2>Navigation (h2)</h2>
<ul>
<li>Unordered List - First item.</li>
<li>Another item with <a href="" title="Test Link">a link.</a></li>
<li><a href="" title="Test Link">Another item that is linked</a></li>
<li>Last item.</li>
</ul>
<ol>
<li>Ordered List - First item.</li>
<li>Another item with <a href="" title="Test Link">a link.</a></li>
<li><a href="" title="Test Link">Another item that is linked.</a></li>
<li>Last item.</li>
</ol>
</div>
<hr />
<div id="primaryContent">
<h2>Primary Content (h2)</h2>
<h3>Headline the Third (h3)</h3>
<h4>Headline the Fourth (h4)</h4>
<p>First paragraph. In <a href="" title="Test Link">typography</a>, a paragraph is a block of text. Paragraphs are the medium-size unit of <a href="" title="Test Link">human-language text</a>. A group of sentences developing a single idea from a topic sentence. Some words in sentences need to be <b>bolded</b>, <i>italicized</i>, <strong>strengthened</strong> or <em>emphasized</em>.</p> <p>Another paragraph. In typography, a paragraph is a block of text. Paragraphs are the medium-size unit of human-language text. A group of sentences developing a single idea from a topic sentence.</p>
<ul>
<li>Unordered List - First item.</li>
<li>Another item with <a href="" title="Test Link">a link.</a></li>
<li><a href="" title="">Another item that is linked</a></li> <li>Last item.</li>
</ul>
<ol>
<li>Ordered List - First item.</li>
<li>Another item with <a href="" title="Test Link">a link.</a></li>
<li><a href="" title="Test Link">Another item that is linked.</a></li>
<li>Last item.</li>
</ol>

需要注意的是该模板缺少图像元素的例子。因为这些元素都是外部文件，视情况存在，我更喜欢逐个包含他们。

在线样式指南模板

如果你像我一样并且有打印设计的背景，你将很快看到这个模板的价值所在。样式指南十分方便一个设计和开发团队交流和阐明设计要点。

该模板基本上是所有模板集合的一个页面。这个在线样式指南模板很大程度减少创建外部标记规则集的时间。如果你使用Firefox并且安装了Web Developer Toolbar，我强烈推荐你在使用“Edit CSS“编辑CSS，观察页面的变化。编辑完毕，保存已经修改过的CSS到外部文件去，并且更新相应的HTML标记。这就像一个高级的CSS编辑器，还是免费的。

该模板还可以让我安全地测试实验性的CSS设计，查看其如何影响同一页面的其他元素和性质。

总结

创建这些模板的一个最大好处是教会了我很多隐藏在XHTML和CSS背后的细节。我学习了我以前从不会考虑使用的元素，选择器和性质，因而也创建了这些模板。所以这些模板不仅让我设计得更快，而且让我设计得更好。

显然，每个不同的设计者和开发者有自己不同的工作方式。使用XHTML和CSS模板可能并不适合你用来开始一个web项目。我只知道，这是我的工作方式，而且大大地帮助了我。此外，我认为有东西可填入比仅仅打开一个空白文档的工作效率高得多。动力能量可不小。

如果你喜欢，别担心，利用这些模板并且引入你的工作流程中去吧。

原文：，Kevin Hale，