找回密码
 注册
搜索
热搜: 回贴

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

2009-12-16 23:36| 发布者: admin| 查看: 58| 评论: 0|原作者: 柳梦璃

引言
现在,我要想您介绍一些工作流程中帮我开始新的web开发项目的模板。除了XHTML模板外,我还列出了一些已经帮我为多种网站建立样式指南的CSS模板和XHTML样例。
很早之前,下面这个模板或者叫指引的东西出现在head区。







啊,那真是一个美好的时代啊。然而,现在的世界越来越复杂,当上面的大纲用作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,余下你只需要填空。

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


<br>
















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




修改的CSS部分




修改的JavaScript部分



这些嵌入的部分同时让我不至于忘记正确的编写.js和.css文件。现在没有借口了,因为这实在很容易。JavaScript部分包含了一个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:;
情缘.教程_网 [http://Www.XiuGoo.Com]
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。以下是来自该模板的示例:

Untitled - Online Style Guide Template (h1)


Title : Title of this Document

Description : A description of this document that explains how this guide should be used.


Author : The Author

URL: http://url.to.reference.com


Created : Month DD, YYYY

Modified : Month DD, YYYY








Primary Content (h2)


Headline the Third (h3)


Headline the Fourth (h4)


First 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. Some words in sentences need to be bolded, italicized, strengthened or emphasized.

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.




  1. Ordered List - First item.

  2. Another item with a link.

  3. Another item that is linked.

  4. Last item.


需要注意的是该模板缺少图像元素的例子。因为这些元素都是外部文件,视情况存在,我更喜欢逐个包含他们。
在线样式指南模板
如果你像我一样并且有打印设计的背景,你将很快看到这个模板的价值所在。样式指南十分方便一个设计和开发团队交流和阐明设计要点。
该模板基本上是所有模板集合的一个页面。这个在线样式指南模板很大程度减少创建外部标记规则集的时间。如果你使用Firefox并且安装了Web Developer Toolbar,我强烈推荐你在使用“Edit CSS“编辑CSS,观察页面的变化。编辑完毕,保存已经修改过的CSS到外部文件去,并且更新相应的HTML标记。这就像一个高级的CSS编辑器,还是免费的。
该模板还可以让我安全地测试实验性的CSS设计,查看其如何影响同一页面的其他元素和性质。
总结
创建这些模板的一个最大好处是教会了我很多隐藏在XHTML和CSS背后的细节。我学习了我以前从不会考虑使用的元素,选择器和性质,因而也创建了这些模板。所以这些模板不仅让我设计得更快,而且让我设计得更好。
显然,每个不同的设计者和开发者有自己不同的工作方式。使用XHTML和CSS模板可能并不适合你用来开始一个web项目。我只知道,这是我的工作方式,而且大大地帮助了我。此外,我认为有东西可填入比仅仅打开一个空白文档的工作效率高得多。动力能量可不小。
如果你喜欢,别担心,利用这些模板并且引入你的工作流程中去吧。
原文:Quick Start Your Design with XHTML Templates,Kevin Hale,Particletree

最新评论

QQ|小黑屋|最新主题|手机版|微赢网络技术论坛 ( 苏ICP备08020429号 )

GMT+8, 2024-9-30 03:22 , Processed in 0.276808 second(s), 12 queries , Gzip On, MemCache On.

Powered by Discuz! X3.5

© 2001-2023 Discuz! Team.

返回顶部