• News新聞動態
    web頁面入門

     珠海市天惠設計制作有限公司,成立于1996年8月,是為拓展中國Internet領域應用而專門成立的高新技術企業,是企業電子商務技術服務和解決方案綜合服務提供商。

    開發頁面在很多人眼里很簡單,大部分的人都會說不就是把效果圖變成網頁嘛,哪里需要那么多的時間,一點技術含量都沒有。確實html頁面沒有js那 么多復雜的交互,也不需要和后臺數據打交道,但并不能代表就沒有技術含量,也不是人人都能做好的。頁面結構好壞直接會影響到css代碼的質量,也會影響 js和后臺的開發,還會影響到以后功能的擴展和代碼的優化。

    前端頁面的工作很瑣碎,需要的不僅是基礎知識的扎實,知識面的廣泛,很重要的一點還要細心。下面我們就講講頁面開發,開發中需要事項和常遇到的問題吧。

    首先分析效果圖,細節上是否和站內風格統一;設計的元素是否便于實現;元素是否能復用。有問題及時和產品人員進行溝通,避免開發過程中的頻繁修改,影響工期和代碼的質量。這些都是為更好的布局和精簡css代碼做的必要工作。

    合理布局很重要,如同大廈的地基,大廈的高度再于地基是否牢固,合理的布局能有更好的擴展性。結構要盡量簡潔,盡量減少結構中的嵌套,不要為了實現某種樣式添加多余的空標簽。

    標簽盡量語義化,能夠讓代碼更加清晰,F在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中一定要寫上存在的圖片鏈接,人人網通常使用的是一像素的圖片代替(http://a.xnimg.cn/a.gif)。如果你忽略了這個地址,頁面上會有一個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*/
    常見的css bug這里就不說了,稍后會在wiki里總結一個列表供大家查閱和參考。

    對于樣式和圖片的引用a.xnimg.cn,s.xnimg.cn,xnimg.cn。這三種的區別是a.是在其他地方的域,s.是在北京本地的域,xnimg.cn是曾經的域,通,F在使用a.xnimg.cn,除非非常重要的靜態文件才使用s.xnimg.cn。

    在開發過程中,我們應該對bug出現有預見性,特別是常見的bug(QA經常提的bug比如連續字符串沒有換行,鼠標在沒有變成手型…)要提前做出 處理。要考慮各種極端數據和不同大小圖片在頁面中的顯示情況。對于代碼進行合理的規劃,減少冗余,可以簡單寫下注釋,便于以后修改。

    再來說一下快速查bug和解決bug的一些個人見解吧。
    首先要分辨bug的類型,有的bug不一定是頁面的問題。是否是頁面套錯了某個標簽沒有閉合,是否需要js修改或是后臺技術處理。
    查bug,工具是必不可少的,firebug,ie的IEDevToolBar,chrome自帶調試工具都能進行調試和修改;使用工具能很快定位bug的位置和類型,作出修改。
    經驗的積累也是很重要的。有時候你使用了所有的方法解決但問題仍然存在,需要看看DOCTYPE是否在HTML頂部,是否完整,推薦;是否有多余的空格或是編碼格式是否正確,
    比如ie解析的空格間距不太一樣,有時候會導致意想不到的bug。
    還有一種方式是逐步刪代碼方式,看究竟是那個部分是有問題的。

    解決bug常用的幾個方法:
    有人說zoom:1;是解決ie6的兼容問題的萬精油?梢杂,但是不易多用,這個屬性可能會存在一些潛在的問題,至于是什么問題,大家可以google一下。
    position:relative;往往和overflow:hidden;搭配使用能解決ie下滾動圖片側漏問題哦。

    最后要說的是優化,一定要時時刻刻想著優化自己的代碼,珠海網站建設給用戶帶來最好的體驗。永遠記住這句話【HTML結構的簡化>css代碼結構的簡化】

    我們的承諾:
    天惠公司將一如既往,秉承專業服務精神,一切從客戶利益出發,為您率先建站,令您把握先機,長遠的眼光定使您在商海搏擊中穩操勝券。

    国内精品久久久久影院日本