引言
现在,我要想您介绍一些工作流程中帮我开始新的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>
这些嵌入的部分同时让我不至于忘记正确的编写.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{ }
出处:Realazy
责任编辑:moby
上一页 下一页 使用模板快速启动你的设计 [2]
◎进入论坛网站综合、网页制作版块参加讨论
|