|
引言
現(xiàn)在，我要想您介紹一些工作流程中幫我開始新的web開發(fā)項目的模板。除了XHTML模板外，我還列出了一些已經(jīng)幫我為多種網(wǎng)站建立樣式指南的CSS模板和XHTML樣例。
很早之前，下面這個模板或者叫指引的東西出現(xiàn)在head區(qū)。
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
啊，那真是一個美好的時代啊。然而，現(xiàn)在的世界越來越復(fù)雜，當上面的大綱用作HTML 101教程時，追隨web標準當代潮流的web開發(fā)者需要更多更多的代碼用以開發(fā)適當web頁面。
實際上，對于一個設(shè)計者來說，入門HTML標記是最花費時間的任務(wù)之一。靈感？容易。Multiple comps？沒有問題。但記住所有不同的配置樣式的CSS選擇器（selector）卻是不那么容易。
盡管如此，在我變聰明之前，我使用定制的CSS和XHTML模板的時候發(fā)現(xiàn)，我打開先前項目僅僅是一遍又一遍地回答這些問題：我該怎么樣包含一個外部的JavaScript文件？該如何編寫meta標記？在CSS文件里怎么樣注釋才好？構(gòu)建表單的最佳方法是什么？我的朋友，是時候終結(jié)低效率的動作了。我們開始吧。
文件
XHTML模板1
XHTML模板2
CSS模板1
CSS模板2
XHTML標記模板
在線樣式指南模板
注意：這是譯者修改過的文件，加入少量的翻譯說明。下載原版請到Particletree。
XHTML模板1
XHTML頁面的頭部區(qū)域就像醫(yī)生辦公室里的寫字板——預(yù)備性的文本工作。下面這個模板著重于兼容和完整的頭部結(jié)構(gòu)。除了選擇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對于理解需要填入何種信息十分有用，但不利于快速開發(fā)和樣式化因為附上了.css和.js文件。這意味著我必須得建立2個以上的文件來控制一個頁面的行為（behavior）和樣式。當我在最后期限或者僅僅一個頁面中干活時，管理三個文件是不必要的負擔。在頭部添加嵌入的CSS和JavaScript區(qū)段讓我可以馬上開工。為避免重復(fù)展示整個模板，我只給你展示修改部分（完整部分請看模板文件）：
<!-- 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文件�，F(xiàn)在沒有借口了，因為這實在很容易。JavaScript部分包含了一個window.onload的空函數(shù)，以備有時運行頁面載入腳本之需。當一切運行良好時，如果需要恰當?shù)奈募芾�，我只需要把CSS和JavaScript拷貝到外部文件去。
CSS模板1
如果我知道正在干著的網(wǎng)站會有大塊大塊的CSS來襲，我喜歡使用下面這個有幾分類似飛機起飛前檢查清單的模板，它確保我可以顧及所有基本的選擇器。假使一個頁面的不同區(qū)域的同一組選擇器（比如無序列表）要使用不同的樣式，我只需拷貝粘貼，并加上恰當?shù)膇d和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
上一頁 下一頁 使用模板快速啟動你的設(shè)計 [2]
◎進入論壇網(wǎng)站綜合、網(wǎng)頁制作版塊參加討論
|
第 1 頁 使用模板快速啟動你的設(shè)計 [1]
第 2 頁 
