web入門

開發頁面在很多人眼里很簡單,一點技術含量都沒有。確實html頁面沒有js那么多復雜的交互,也不需要和后臺數據打交道,但并不能代表就沒有技術含量,也不是人人都能做好的。頁面結構好壞直接會影響到css代碼的質量,也會影響js和后臺的開發,還會影響到以后功能的擴展和代碼的優化。
前端頁面的工作很瑣碎,需要的不僅是基礎知識的扎實,知識面的廣泛,很重要的一點還要細心。下面我們就講講頁面開發,開發中需要事項和常遇到的問題吧。
首先分析效果圖,細節上是否和站內風格統一;設計的元素是否便于實現;元素是否能復用。有問題及時和產品人員進行溝通,避免開發過程中的頻繁修改,影響工期和代碼的質量。這些都是為更好的布局和精簡css代碼做的必要工作。
合理布局很重要,如同大廈的地基,大廈的高度再于地基是否牢固,合理的布局能有更好的擴展性。結構要盡量簡潔,盡量減少結構中的嵌套,不要為了實現某種樣式添加多余的空標簽。
標簽盡量語義化,能夠讓代碼更加清晰。現在html5添加了更多的語義化標簽,像header,section等,大膽的使用吧。雖然html5對于標簽的相互嵌套體現了很好的包容性,即使標簽沒有閉合,或是inline元素中包含一堆block元素也不會有問題,但是為了養成良好的習慣還是盡量做到嚴格遵循xhtml的規范。
盡量少在頁面寫inline css,會使頁面代碼臃腫,不便于維護,有悖于樣式和結構相分離的初衷。
頁面中推薦的兩種注釋:

<%!–jsp注釋,不會輸出,推薦使用–%>

另一個總和前端頁面開發打交道的就是圖片。圖片分為兩種,一種是cssimage引用,另一種純Image的頁面引用。

背景圖是通過樣式在頁面上輸出,會在頁面中產生請求,延長頁面的渲染時間,為了解決這個問題,可以把類似的圖片進行合并,減少請求數。在進行合圖的時候,盡量把顏色相近的圖標放到一起,可以減少圖片的大小。

頁面中直接引用的圖片盡可能少的縮放,非常影響頁面的渲染速度;盡可能少的使用前端技術控制圖像顯示大小,對用戶不可見的部分就是浪費帶寬,浪費錢,頁面的渲染速度也肯定會受到影響,影響用戶體驗;在知道圖片寬高的情況下盡量在img中加上寬高,減少頁面reflow造成的速度損耗。

靜態圖片一定要小,建議存成png8格式,在不影響圖片的顯示質量下,可以選擇128色或是更低的顏色輸出圖片。當然有的色彩比較豐富的圖片,存成jpg格式的更小,難道你會非選png的嗎?存儲完后圖片還能用一些壓縮工具進行無損壓縮(如:PNGGauntlet)。

對于圖片來說小就是原則,為什么呢,給你算個帳,節約10K看不出什么,100個用戶是1000K,10000個是100000K,那一億個用戶呢?全是白花花的銀子啊!

圖片有幾點需要注意:
1、我們在使用背景圖做圖標的時候通常會在頁面加一個鉤子——img標簽,img標簽中的src中一定要寫上存在的圖片鏈接,人人網通常使用的是一像素的圖片代替。如果你忽略了這個地址,頁面上會有一個404的請求,在ie6下直接顯示一個叉。
2、如果你的工程已經上線,我們站內對靜態文件會有一個緩存機制。在開發過程中,經常會遇到修改圖片的情況,如果你修改后的圖片不更改文件名或是在樣式中更改引用該圖片的版本號,對于用戶而言,他們仍然看不到修改后的圖片。所以,一定要記得修改文件名。
3、避免過小的背景圖平鋪。
4、盡量將圖片上的文字提取出來用代碼實現,便于圖片的復用和日后文案的修改;

css主要說一下注意事項。
1、class命名建議以功能而不是外觀命名,不建議使用大小,避免起容易沖突的名字,防止樣式被覆蓋。
2、CSS后代選擇器性能:.a{} > .b .a{},查找匹配耗費cpu,代碼復雜,優先級高,修改不方便;
3、編碼時盡可能使用縮寫,如padding:top right bottom left;border-width:1px 0;border-color:#CEE1EE;color:#F05;
4、使用CSS display:none隱藏的元素不會被搜索網站檢索,會影響到網站的SEO,可以使用text-indent:-9999em;來達到同樣效果。
5、減少overflow清除浮動的使用,避免使用無意義的空標簽清除浮動,通常站內使用clearfix來清除浮動。
6、border:none;替換border:0;的寫法;
7、使用css3的屬性來代替陰影或是圓角的圖片;

瀏覽器的兼容問題是頁面開發的永衡話題。結構的合理和簡潔在很大程度上可以減少兼容性的bug,但是ie的特立獨行又不可避免有一些兼容性問題。
IE6、IE7、Firefox之間的兼容寫法:

寫法一:
IE都能識別*;標準瀏覽器(如FF)不能識別*;
同一類class下的CSS hack可寫為:
.classname{
background-color:#333;/*三者皆可*/
*background-color:#666; /*IE*/
_background-color:#999; /*僅IE6及IE6以下*/
}
一般三者的書寫順序為:FF、IE7、IE6.

寫法二:
*+html 與 *html 是IE特有的標簽, Firefox 暫不支持。
.classname{background-color:#333;}
*html .classname{background-color:#666;}/*僅IE6*/
*+html .classname{background-color:#555;}/*僅IE7*/

 




技術文摘

技術文摘
 
  職業室內設計師班(零基礎授課)
  平面設計師班(零基礎授課)
  職業Web前端開發班(零基礎授課)
  職業平面設計師班(零基礎授課)
 
 相關文章:
網頁設計排版技巧
網站的類型
色彩使用技巧
margin的應用

版權所有:北京藝知堂藝術設計工作室 網址:http://www.rrednib.com      咨詢熱線:13552855085    010-56159565
 
 


狠狠射成人网视频网