第1天源碼等資源其他案例web前端開發(fā)手冊_第1頁
第1天源碼等資源其他案例web前端開發(fā)手冊_第2頁
第1天源碼等資源其他案例web前端開發(fā)手冊_第3頁
第1天源碼等資源其他案例web前端開發(fā)手冊_第4頁
第1天源碼等資源其他案例web前端開發(fā)手冊_第5頁
已閱讀5頁，還剩8頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

為提高團(tuán)隊協(xié)作效率,便于人員添加功能及前端后期優(yōu)化,輸出高質(zhì)量的文檔,特制訂此文檔.文檔一經(jīng)確認(rèn),前端開發(fā)人員必須按本文檔規(guī)范進(jìn)行前臺頁面開發(fā).本文檔不對或者不合適的地方請及時提出,經(jīng)討論決定后可以更改此文檔.a.HTML名原引文件統(tǒng)一使用index.htmindex.htmlindex.asp文件名（小寫）關(guān)于我們\aboutus信息反饋\產(chǎn)品\每一 中應(yīng)該包含一個缺省的html文件，文件名統(tǒng)一用index.htmindex.htmlb.名原放置在頁面頂部的、裝飾圖案等長方形的取名：標(biāo)志性的取名為：在頁面上位置不固定并且?guī)в械男∥覀內(nèi)∶麨樵陧撁嫔夏骋粋€位置連續(xù)出現(xiàn)，性質(zhì)相同的欄目的我們?nèi)∶貉b飾用的我們?nèi)∶簆ic不帶表示標(biāo)題的我們?nèi)∶悍独篵anner_.gif 例如：1_on.gif1_off.gif例如：條的javascript文件名為ad.js彈出窗口的javascript文件名為 HTMLHTMLFlash存放PSD存放flashincludeDW存放JavaScript存放CSSCSS書寫規(guī)范CSS樣式可細(xì)分為3類：自定義樣式、重新定義HTML樣式、狀態(tài)樣式樣式為設(shè)計師自定義的新CSS樣式，影響被使用本樣式的區(qū)域，用于完成網(wǎng)頁中局部的樣式設(shè)定。樣式名“.”+“相應(yīng)樣式效果描述的單詞或縮寫”例：“.shadow”文字樣式樣式名“.no”+“字號”+“行距”+“顏色縮寫”例：“.no12.no12-24義HTML樣式為設(shè)計師重新定義已有的HTML樣式，影響全部的被設(shè)定樣式，用于統(tǒng)一網(wǎng)頁中某一的樣式定義。樣式名“HTML”例：hr{border:1pxdotted#333333}態(tài)樣式為設(shè)計師對不同狀態(tài)設(shè)定特殊樣式，影響被使用本樣式區(qū)域中的該樣式寫法有2種：a.nav:linknav.a:link第一種只能修飾<a>中；第二種可以修飾所有包頁面內(nèi)的樣式加載必須用方式<linkrel="stylesheet"type="text/css"協(xié)作開發(fā)及分工:i會根據(jù)各個模塊,同時根據(jù)頁面相似程序,事先寫好大體框架文件,分配給前端人員實現(xiàn)內(nèi)部結(jié)構(gòu)&表現(xiàn)&行為;共用cssbase.cssi書寫,協(xié)作開發(fā)過程中,每個頁面請務(wù)必都要引入,此文件包含reset及頭部底部樣式,此文件不可隨意修改;class與ididclass是可以重復(fù)的并是子級的,所以id塊上,classidJavaScript為JavaScript預(yù)留鉤子名,請以js_起始,比如:js_hide,class與id命名:大的框架命名比如header/footer/wrapper/left/right2中由i其他樣式名稱由小寫英文&數(shù)字&_來組合命名,如ment,fontred,width200;避免使用中文拼音,盡量使用簡易的單詞組合;總之,命名要語義化,簡明化.class與id命名(此條重要,若有不明白請及時與ia,通過從屬寫避,示例見b,取父級元素id/class命名部分命名,示例見c,重復(fù)使用率高名,請以自己代號加下劃線起始,比如d,a,b兩條,適用于在2中已建好框架的頁面,如,要在2中已建好框架的頁面代碼<divid="mainnav"></div>中加入新的div元素,按a<divid="mainnav"><div樣式寫法:#mainnav 按b<divid="mainnav"><divclass="main_firstnav">樣式寫法: css屬性書寫順序,建議遵循布局定位屬性-->自身屬性-->文本屬性-->其他屬性.此條可根據(jù)自身marginpaddingfloat（包包括:width&height&background&border;文本屬性主要包括：font、color、text-align、text-順序)、zoom等.我所列出的這些屬性只是最常用到的,并不代表全部;充分利用html<ulclass="list"><li>這兒是標(biāo)題列表<span>2010-09-15</span></ul>ul.listli{position:relative}ul.listlispan{position:absoluteright:0}樣式表文字體名,請務(wù)必轉(zhuǎn)碼成unicode碼,以避免編碼錯誤時亂碼背景請盡可能使用sprite技術(shù),減小http請求,考慮到多人協(xié)作開發(fā),sprite按模塊制作使用table時(盡量避免使用table),請不要用width/height/cellspacing/cellpadding等tabletable自身私有屬性分離結(jié)構(gòu)與表現(xiàn),如thead,tr,th,td,tbody,tfoot,colgroup,scope;(cellspaing及cellpadding的css控制方法:table{border:0;margin:0;border-collapse:collapse;}tableth,tabletd{padding:0;},base.css杜絕使用<metahttp- patible"content="IE=7"/>兼容用png做時,要求格式為png-8格式,若png-8實在影響質(zhì)量或其中有半透明效果,請為ie6單獨定義背景:crop,src=’img/bg.png’);避免兼容性屬性的使用,比如text-shadow||css3減少使用影響性能的屬性,比如position:absolute||float代碼縮進(jìn)與格式:建議單行書寫,可根據(jù)自身習(xí)慣,后期優(yōu)化i頭左右中：leftrightcenter加入：指南：guildr/*Footer/*EndFooter*/(三)id名:頁頭左右中：leftrightcenter標(biāo)題:title:current圖標(biāo):icon注釋：e指南：guildr熱點：/*CSSbody{margin:0;padding:0;font:12px"\5B8B\4F53",san-serif;background:#fff;}ol,ul{list-style:none;}h1,h2,h3,h4,h5,h6{font-size:12px;font-weight:normal;}a{color:#2b2b2b;text-decoration:none;}a:visited{text-decoration:none;}a:active不同瀏覽器上字號保持一致，字號建議用點數(shù)pt和像素px來定義，pt一般使用中文宋體的9pt11pt，px12px14.7px11pt14.7pxverdanaarialhtml書寫規(guī)范網(wǎng)頁制作細(xì) head區(qū)代碼規(guī)head區(qū)是指HTML<head>和</head>之間的內(nèi)容。 注釋<!---ThesiteisdesignedbyEHM,Inc07/2005 ";";英語：";網(wǎng)頁制作者信息<METAname="author" 簡介<METANAME="DESCRIPTION搜索關(guān)鍵字<META "css<LINKhref="../css/style.cssrel="stylesheet網(wǎng)頁標(biāo)題<METAHTTP-EQUIV="expires"CONTENT="Wed,26Feb199708：21：57 <METAHTTP-EQUIV="Pragma"CONTENT="no-<METAHTTP-EQUIV="Window-target" ">55CONTENTall,none,index,noindex,follow,nofollowall收藏夾圖標(biāo)<linkrel"ShortcutIcon<SCRIPTLANGUAGE="JavaScript"<body>不屬于head區(qū)，這里強調(diào)一下，為了保證瀏覽器的兼容性，必須設(shè)置頁面背景網(wǎng)頁制作細(xì) 字在設(shè)定字體樣式時對于文字字號樣式和行間距應(yīng)必須使用CSS樣式表。在頁面中出現(xiàn)<fontsize=?>標(biāo)記。在網(wǎng)頁文應(yīng)首選使用宋體。英文和數(shù)字首選使用verdana和arial兩種字體。一般使用中文宋體9pt和11pt或12px和14.7px這是經(jīng)過優(yōu)化的字號，黑體字或者宋體字加粗時，一般選用11pt和14.7px<br>來人工干預(yù)分 空白應(yīng)該盡量使用text-indent,padding,margin,hspace,vspace以及透明的gif來實現(xiàn)。line-排版中我們經(jīng)常會遇到需要進(jìn)行首行縮進(jìn)的處理，不要使用或者全角空格來達(dá)到效果，規(guī)范的做法是在樣式表中定義ptext-indent:2em;}然后給每一段加上<p>標(biāo)記，注意，一般情況下，請不要省略</p>結(jié)束標(biāo)記。網(wǎng)頁制作細(xì)節(jié)----中的路徑全部采用相對路徑，一般到某一下的缺省文件的路徑不必寫全名，如我首頁的寫成<ahref=”/”>網(wǎng)頁制作細(xì) 表1pxstyle="border-collapse:<tableborder="1"cellspacing="0"width="32"height="32"style="border-collapse: <table>，嚴(yán)格按照的規(guī)范，對于單獨的一個<table>來說，<table><tr>對齊，<td>嵌套的表格，</td>結(jié)束標(biāo)記應(yīng)該與<td>處于同一行，不要換行，<td><img<td><img<td><imgsrc=”../images/sample.gif”>使用<tbody>標(biāo)記，以便能夠使這個大表格分塊顯示網(wǎng)頁制作細(xì)節(jié)----速Flash網(wǎng)頁大小應(yīng)限定在200KAction來減小動畫大小。非首頁靜態(tài)頁面含大小應(yīng)限定在70K左右，盡可能的使用背景顏色替換大塊同片。網(wǎng)頁制作細(xì) asp標(biāo)準(zhǔn)寫法<!--#includefile="inc/index_top.asp"-->jsp標(biāo)準(zhǔn)寫法<%@includefile="../inc/index_top..jsp"網(wǎng)頁制作細(xì) Alt和都是提示性語言，請注意它們之間的區(qū)別alt用來給來提示的。Title用來給文字或普通文字提示的。<pTitle="給文字提示">文字<ahref="#"Title="給文字提示">文字<imgsrc=".gif"alt="給提示網(wǎng)頁制作細(xì) 緩<METAHTTP-EQUIV="pragma"CONTENT="no-<METAHTTP-EQUIV="Cache-Control"CONTENT="no-cache,must-<METAHTTP-EQUIV="expires"Response.Expires1Response.ExpiresAbsolute=Now()-1Response.cachecontrol="no-cache"網(wǎng)頁制作細(xì)節(jié)創(chuàng)建站點時，應(yīng)該明白者可能使用各種Web瀏覽器。在已知的其他設(shè)計限制下，盡可能將站點設(shè)計目前使用的Web瀏覽器有二十多種，大多數(shù)已了多個版本。即使您只針對使用NetscapeNavigator和InternetExplorer的大多數(shù)Web用戶，但您應(yīng)明確并不是每個人都在使用這JavaScript。不使用特殊字符的純文本頁面或許能夠在任何瀏覽器中正確顯示，但所有的HTML的屬性都要用單引號或者雙引號括起，即我們應(yīng)該寫<ahref=”url”>而不是<a處理細(xì) 全尺寸banner468X60pxbanner234X60px，banner88X31px。另外120X90，120X60也是小圖標(biāo)的標(biāo)準(zhǔn)尺寸。全尺寸banner不超過14K。普遍的banner次級頁的pip游標(biāo):100X100處理細(xì) 為了便于INTERNET上信息的，一個統(tǒng)一的國際標(biāo)準(zhǔn)是需要的。實際上已經(jīng)有了這樣的一整套標(biāo)準(zhǔn)其中關(guān)于的LOGO，目前有三種規(guī)格：88*31這是互聯(lián)網(wǎng)上最普遍的LOGO120*60這種規(guī)格用于一般大小的LOGO120*90這種規(guī)格用于大型LOGO處理細(xì)節(jié)----頁面修飾處書寫過程中,每行代碼結(jié)束必須有分號;原則上所有功能均根據(jù)XXXdown下來的代碼造成的代碼污染(沉冗代碼||與現(xiàn)有代碼||庫引入:原則上僅引入jQuery庫,若需引入第庫,須與團(tuán)隊其他人員討論決定變量命名:駝峰式命名.原生JavaScriptiTaoLunjQuery變量要求首字符為'_',其他與原生JavaScript規(guī)則相同,如:_iTaoLun;另,要求變量集中,避免全局類命名:首字母大寫,駝峰式命名.如函數(shù)命名:首字母小寫駝峰式命名.如eval()&JavaScriptunicode注重與html分離,減小reflow,注重性能.所有頁面元素類均放入img文件夾,測試用放于img/demoimg文件夾格式僅限于gif||png||命名全部用小寫英文字母||數(shù)字||_的組合，其中不得包含漢字||空格||特殊字符；盡量用易懂的詞匯,便于團(tuán)隊其他成員理解;另,命名分頭尾兩部分,用下劃線隔開,比如ad_left01.gif||在保證視覺效果的情況下選擇最小的格式與質(zhì)量,以減少加載時間盡量避免使用半透明的png(若使用,請參考css規(guī)范相關(guān)說明運用csssprite技術(shù)集中小的背景圖或圖標(biāo),減小頁面http請求,但注意,請務(wù)必在對應(yīng)的spritepsd源圖中劃參考線,并保存至img下.htmlcss注釋:注釋格式/*這兒是注釋JavaScript注釋,單行注釋使用'//這兒是單行注釋',多行注釋使用/*這兒有多行注釋瀏覽器兼容性CSS區(qū)別IE6,IE7,IE8,FFIE*;標(biāo)準(zhǔn)瀏覽器(如FF)不能識別IE6能識別*，但不能識別!important;IE6在樣式前面加IE89例如：background:red不能識別IE6和firefox意思就是火狐瀏覽器的背景顏色是橙色,而IEIE6和IE7意思指的是:IE7的背景顏色是綠色,IE6IE7和FF意思指的是:火狐瀏覽器的背景顏色是橙色,而IE7意思是火狐瀏覽器的的背景橙色,IE7瀏覽器的背景顏色是綠色,而IE6(1).開發(fā)平臺的選擇在Firefox在Firefox上編寫CSS,同時兼容其他瀏覽器的.這樣做肯定會比在IE做好再到別的瀏覽器兼容來得容易,

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論