技術(shù)資訊
網(wǎng)頁設(shè)計制作規(guī)范教程
2014-11-05 11:16:16
網(wǎng)頁設(shè)計制作規(guī)范是指一個開發(fā)規(guī)范,也稱是一個腳本的語言參數(shù),本規(guī)范并不是一個一成不變的必須嚴(yán)格遵守的條文,特殊情況下要靈活運(yùn)用,做一定的變通。但是,請大家千萬不要隨意更改規(guī)范。如果有任何問題,請及時與我聯(lián)系,我會及時更改本規(guī)范的相關(guān)代碼樣例和文檔。
主要包含以下步驟:
一、基 本 要 求
1. 在網(wǎng)站根目錄中開設(shè)images common temp 三個子目錄,根據(jù)需要再開設(shè)media 子目錄,images目錄中放不同欄目的頁面都要用到的公共圖片,例如公司的標(biāo)志、banner 條、菜單、按鈕等等;common 子目錄中放css、js,、php、include 等公共文件;temp 子目錄放客戶提供的各種文字圖片等等原始資料;media 子目錄中放flash, avi, quick time 等多媒體文件 。
2. 在根目錄中原則上應(yīng)該按照首頁的欄目結(jié)構(gòu),給每一個欄目開設(shè)一個目錄,根據(jù)需要在每一個欄目的目錄中開設(shè)一個images 和media 的子目錄用以放置此欄目專有的圖片和多媒體文件,如果這個欄目的內(nèi)容特別多,又分出很多下級欄目,可以相應(yīng)的再開設(shè)其他目錄。
3. temp 目錄中的文件往往會比較多,建議以時間為名稱開設(shè)目錄,將客戶陸續(xù)提供的資料歸類整理。
4. 除非有特殊情況,目錄、文件的名稱全部用小寫英文字母、數(shù)字、下劃線的組合,其中不得包含漢字、空格和特殊字符;目錄的命名請盡量以英文為指導(dǎo),不到萬不得已不要以拼音作為目錄名稱,經(jīng)驗(yàn)證明,用拼音命名的目錄往往連一個月后的自己都看不懂
二、一 般 原 則
1. 在排布表格之前,請大家一定要好好思考一個最佳的方案,表格的嵌套盡量控制在三層以內(nèi),并且應(yīng)該盡量避免 <colspan> <rowspan> 兩個標(biāo)記,經(jīng)驗(yàn)表明,這兩個標(biāo)記會帶來許多麻煩。
2. 一個網(wǎng)頁要盡量避免用整個一張大表格,所有的內(nèi)容都嵌套在這個大表格之內(nèi),因?yàn)闉g覽器在解釋頁面的元素時,是以表格為單位逐一顯示,如果一張網(wǎng)頁是嵌套在一個大表格之內(nèi),那么很可能造成的后果就是,當(dāng)瀏覽者敲入網(wǎng)址,他要先面對一片空白很長時間,然后所有的網(wǎng)頁內(nèi)容同時出現(xiàn)。如果必須這樣做,請使用 <tbody>標(biāo)記,以便能夠使這個大表格分塊顯示。
3. 排版中我們經(jīng)常會遇到需要進(jìn)行首行縮進(jìn)的處理,不要使用 或者全角空格來達(dá)到效果,規(guī)范的做法是在樣式表中定義 p { text-indent: 2em; } 然后給每一段加上 <p> 標(biāo)記,注意,一般情況下,請不要省略 </p> 結(jié)束標(biāo)記 。
三、文 件 命 名 原 則
1. 每一個目錄中應(yīng)該包含一個缺省的html 文件,文件名統(tǒng)一用index.htm
2. 件名稱統(tǒng)一用小寫的英文字母、數(shù)字和下劃線的組合。
3. 命名原則的指導(dǎo)思想一是使得你自己和工作組的每一個成員能夠方便的理解每一個文件的意義,二是當(dāng)我們在文件夾中使用“按名稱排例”的命令時,同一種大類的文件能夠排列在一起,以便我們查找、修改、替換、計算負(fù)載量等等操作。
4. 下面以“新聞”(包含“國內(nèi)新聞”和“國際新聞”)這個欄目來說明html 文件的命名原則
四、腳 本 編 寫
我們應(yīng)該有一個腳本整體風(fēng)格一致的概念,意思是一個月后和一個月前的你寫的腳本風(fēng)格保持一致,以及同一個工作組中不同的開發(fā)人員編寫的腳本風(fēng)格保持一致,因?yàn)槲覀儾豢赡苡肋h(yuǎn)孤立的開發(fā),你隨時都有可能和三個月前的自己合作(你的客戶要求改版),也經(jīng)常要和工作室中不同的同事共同開發(fā)一個項(xiàng)目,還有可能被要求修改已經(jīng)離職人員開發(fā)的腳本,當(dāng)然你自己也有可能會扔下一個項(xiàng)目給后來的同事。
1. Html 文件的通用模板:
<html>
<head>
<title> 文檔標(biāo)題 </title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<meta name="author" content="eastline">
其他meta 標(biāo) 記
<link rel="stylesheet" type="text/css" href="style/style.css">
樣式表定義
客戶端Javascript 函數(shù)定義及初始化操作
</head>
<body bgcolor="#ffffff">
… …
</body>
補(bǔ)充:
為了保證網(wǎng)站能夠與下一代的web 語言xml 標(biāo)準(zhǔn)兼容,所有的HTML 標(biāo)簽的屬性都要用單引號或者雙引號括起,即我們應(yīng)該寫 <a href=”url”> 而不 是 <a href=url>.
2. 允許全文檢索的頁面,為了使Internet 上的搜索引擎能夠有效檢索,在頻道的首頁的html的<head></head>之間應(yīng)該加入Keywords 和Description 元標(biāo)記,例如 :
<meta name=”keywords” content=”東方新干線,汽車,買車”>
<meta name=”description” content=”東方新干勁線,全球中文汽車信息第一站”>
3. 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: #FFFFFF; text-decoration: none}
a:visited { font-size: 9pt; color: #99FFFF; 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: #FF9922; text-decoration: none}
.blue { font-family: "宋體"; font-size: 10.5pt; line-height: 20px; color: #0099FF; letter-spacing: 5em}
-->
</style>
這里尤其要注意的是a:link a:visited a:hover a:actived 的排列順序一定要嚴(yán)格照上面的樣例代碼,否則或多或少會出問題。另外我們規(guī)定重定義的最先,偽類其次,自定義最后,便于自己和他人閱讀!
為了保證不同瀏覽器上字號保持一致,字號建議用點(diǎn)數(shù)pt和像素px來定義,pt一般使用中文宋體的9pt和11pt,px一般使用中文宋體12px 和14.7px 這是經(jīng)過優(yōu)化的字號,黑體字或者宋體字加粗時,一般選用11pt和14.7px 的字號比較合適。
近期更新
- [2023-07-26 14:17:28] 為品牌賦能,海外官網(wǎng)品牌數(shù)字化
- [2023-05-06 10:32:26] 青島網(wǎng)站建設(shè)公司,高端網(wǎng)站定制,一站式網(wǎng)站服務(wù)——力圖數(shù)字科技
- [2023-04-27 13:47:54] 高端定制網(wǎng)站建設(shè)——從滿足預(yù)期到走向卓越
- [2023-04-11 09:17:49] H5頁面設(shè)計開發(fā)——移動端傳播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力圖數(shù)字科技配套網(wǎng)站服務(wù)支持
- [2021-05-18 10:14:11] 青島網(wǎng)站建設(shè)的流程
- [2021-04-29 10:14:38] 企業(yè)定制化官網(wǎng)建設(shè)項(xiàng)目
- [2021-03-05 10:34:45] 移動互聯(lián)時代房地產(chǎn)行業(yè)的微信小程序解決方案
- [2021-01-22 17:29:38] 微信小程序有哪些優(yōu)勢?為什么要開發(fā)微信小程序?
- [2021-01-08 17:28:04] 網(wǎng)站建設(shè)最容易忽略的人性化設(shè)計
- [2020-12-16 16:55:32] 建設(shè)一個常規(guī)的公司網(wǎng)站建設(shè)成本大概是多少?
延伸閱讀
- [2012-04-26 00:05:54] 國外網(wǎng)站設(shè)計趨勢
- [2019-05-24 09:56:02] 青島網(wǎng)站制作哪家強(qiáng)
- [2011-12-20 18:45:53] 網(wǎng)站PR值與網(wǎng)站內(nèi)容收錄的關(guān)系
- [2014-07-25 12:40:12] dede:sql 調(diào)用flag att文檔屬性 翻頁
- [2014-05-03 14:57:58] 扁平化網(wǎng)站風(fēng)格設(shè)計的特點(diǎn)
- [2011-10-20 16:45:44] 在青島網(wǎng)站設(shè)計中套用網(wǎng)站模板的弊端有哪些?
- [2011-11-22 23:17:19] 青島英派斯集團(tuán)英文版網(wǎng)站設(shè)計策劃完成
- [2011-11-20 20:40:36] 網(wǎng)站title應(yīng)該怎么寫?
- [2015-03-26 16:49:53] 服務(wù)器不支持中文圖片名字或者中文路徑的解決辦法
- [2012-02-10 15:15:01] 不被處罰的DIV隱藏連接方法
- [2015-06-01 21:45:01] 分享一個多個變量的sql語句
- [2011-12-09 23:13:52] 網(wǎng)站點(diǎn)擊量與排名的關(guān)系
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計解決方案 科技企業(yè)網(wǎng)站設(shè)計解決方案 電子家電網(wǎng)站設(shè)計解決方案 食品行業(yè)網(wǎng)站設(shè)計解決方案 集團(tuán)公司網(wǎng)站設(shè)計解決方案 企事業(yè)單位網(wǎng)站設(shè)計解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計解決方案 健身運(yùn)動網(wǎng)站設(shè)計解決方案 美容與化妝品網(wǎng)站設(shè)計解決方案 建筑設(shè)計行業(yè)網(wǎng)站設(shè)計解決方案 物流行業(yè)網(wǎng)站設(shè)計解決方案
TAGS關(guān)鍵字
響應(yīng)式設(shè)計 企業(yè)網(wǎng)站 膠南網(wǎng)站建設(shè)公司 營銷型網(wǎng)站 網(wǎng)站交互設(shè)計 海信網(wǎng)絡(luò)科技 青島網(wǎng)站建設(shè) 集團(tuán)官網(wǎng) 青島flash網(wǎng)站 青島高端網(wǎng)站建設(shè)公司哪家好 程序開發(fā) 網(wǎng)站設(shè)計 青島IT資訊 扁平化設(shè)計 IT資訊 青島黃島、紅島網(wǎng)站建設(shè)公司 網(wǎng)站視覺 官網(wǎng)網(wǎng)站建設(shè) 網(wǎng)站建設(shè),手機(jī)網(wǎng)站 網(wǎng)站動畫 集團(tuán)性網(wǎng)站 青島網(wǎng)站制作 青島海洋投資集團(tuán) 青島高端網(wǎng)站建設(shè) 集團(tuán)公司網(wǎng)站建設(shè) GOOGLE 視覺靈感 版面布局 robots 企業(yè)網(wǎng)站為什么要備案