製作網站前看看這些好的網頁技術規範

來源:互聯網
上載者:User
規範|網頁 命名規範

檔案命名的原則:以最少的字母達到最容易理解的意義。

一般檔案及目錄命名規範:

每一個目錄中應該包含一個預設的html 檔案,檔案名稱統一用index.htm檔案名稱統一用小寫英文字母、數字和底線的組合;

盡量按單詞的英語翻譯為名稱。例如:feedback(資訊反饋),aboutus(關於我們);

多個同類型檔案使用英文字母加數字命名,字母和數字之間用_分隔。例如:news_01.htm。注意,數字位元與檔案個數成正比,不夠的用0補齊。例如共有200條新聞,其中第18條命名為news_018.htm

圖片的命名規範 :

名稱分為頭尾兩兩部分,用底線隔開。

頭部分表示此圖片的大類性質。例如: 放置在頁面頂部的廣告、裝飾圖案等長方形的圖片我們取名:banner ;標誌性的圖片我們取名為:logo ;在頁面上位置不固定並且帶有連結的小圖片我們取名為button ;在頁面上某一個位置連續出現,性質相同的連結列目的圖片我們取名:menu ;裝飾用的照片我們取名:pic ;不帶連結資料表示標題的圖片我們取名:title 依照此原則類推。

尾部分用來表示圖片的具體含義,用英文字母表示。
例如:banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg pic_hill.jpg.
有onmouse效果的圖片,兩張分別在原有檔案名稱後加"_on"和"_off"命名。

其它檔案命名規範

js的命名原則以功能的英語單詞為名。
例如:廣告條的js檔案名稱為:ad.js;所有的CGI檔案尾碼為cgi。所有CGI程式的設定檔為config.cgi。

目錄結構規範

目錄建立的原則:以最少的層次提供最清晰簡便的訪問結構。

目錄的命名以小寫英文字母,底線組成。(參照命名規範);

根目錄一般只存放index.htm以及其他必須的系統檔案;

每個主要欄目開設一個相應的獨立目錄;

根目錄下的images用於存放各頁面都要使用的公用圖片,子目錄下的images目錄存放本欄目頁面使用的私人圖片;

所有JS,ASP,PHP等指令碼存放在根目錄下的scripts目錄;

所有CGI程式存放在根目錄下的cgi-bin目錄;

所有CSS檔案存放在根目錄下style目錄;

每個語言版本存放於獨立的目錄。例如:簡體中文gb;

所有flash, avi, ram, quicktime 等多媒體檔案存放在根目錄下的media目錄。

尺寸規範

尺寸規範請根據您的實際情況調整:頁面標準按800*600解析度製作,推薦尺寸為766*430px;
頁面長度原則上不超過3屏,寬度不超過1屏;
每個標準頁面為A4幅面大小,即8.5X11英寸;
全尺寸banner為468*60px,半尺寸banner為234*60px,小banner為88*31px,另外120*90,120*60也是小表徵圖的標準尺寸;
每個非首頁靜態頁面含圖片位元組不超過60K,全尺寸banner不超過14K。

首頁代碼規範

首頁的代碼關鍵在head區,head區是指首頁HTML代碼的<head>和</head>之間的內容。 head區必須加入的標識
公司著作權注釋 <!--- The site is designed by yourcompany,Inc 03/2001 --->
網頁顯示字元集 例如:
簡體中文:<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
繁體中文:<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=BIG5">
英 語:<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
原始製作者資訊 <META name="author" content="webmaster@yoursite.com">
網站簡介 <META NAME="DESCRIPTION" CONTENT="這裡填您網站的簡介">
搜尋索引鍵 <META NAME="keywords" CONTENT="關鍵字1,關鍵字2,關鍵字3,...">
網頁的css規範 <LINK href="style/style.css" rel="stylesheet" type="text/css">
網頁標題 <title>這裡是你的網頁標題</title>
head區可以選擇加入的標識
設定網頁的到期時間。一旦網頁到期,必須到伺服器上重新調閱。
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
禁止瀏覽器從本地機的緩衝中調閱頁面內容。
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
用來防止別人在架構裡調用你的頁面。
<META HTTP-EQUIV="Window-target" CONTENT="_top">
自動跳轉。
<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.yahoo.com">
5指時間停留5秒。
網頁搜尋機器人嚮導.用來告訴搜尋機器人哪些頁面需要索引,哪些頁面不需要索引。
<META NAME="robots" CONTENT="none">
CONTENT的參數有all,none,index,noindex,follow,nofollow。預設是all。
收藏夾表徵圖
<link rel = "Shortcut Icon" href="favicon.ico">所有的javascript指令碼盡量採取外部調用
<SCRIPT LANGUAGE="javascript" SRC="script/xxxxx.js"></SCRIPT>

CSS書寫規範

所有的CSS的盡量採用外部調用
<LINK href="style/style.css" rel="stylesheet" type="text/css">
書寫時重定義的最先,偽類其次,自訂最後(其中a:link a:visited a:hover a:actived 要按照順序寫)便於自己和他人閱讀。
為了保證不同瀏覽器上字型大小保持一致,字型大小建議用點數pt和像素px來定義,pt一般使用中文宋體的9pt和11pt,px一般使用中文宋體12px 和14.7px 這是經過最佳化的字型大小,黑體字或者宋體字加粗時,一般選用11pt和14.7px 的字型大小比較合適。

CSS推薦模板。

<style type="text/css">
<!—
p { text-indent: 2em; }
body { font-family: "宋體"; font-size: 9pt; color: #000000; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px}
table { font-family: "宋體"; font-size: 9pt; line-height: 20px; color: #000000}
a:link { font-size: 9pt; color: #0000FF; text-decoration: none}
a:visited { font-size: 9pt; color: #990099; text-decoration: none}
a:hover { font-size: 9pt; color: #FF9900; text-decoration: none}
a:active { font-size: 9pt; color: #FF9900; text-decoration: none}
a.1:link { font-size: 9pt; color: #3366cc; text-decoration: none}
a.1:visited { font-size: 9pt; color: #3366cc; text-decoration: none}
a.1:hover { font-size: 9pt; color: #FF9900; text-decoration: none}
a.1:active { font-size: 9pt; color: #FF9900; text-decoration: none}
.blue { font-family: "宋體"; font-size: 10.5pt; line-height: 20px; color: #0099FF; letter-spacing: 5em}
-->
</style>

body標識

為了保證瀏覽器的相容性,必須設定頁面背景<body bgcolor="#FFFFFF">
形象設計規範
網站的CI整體形象包括下面幾個要素:

標誌(logo)

網站必須有獨立的標誌;

相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。