97久久99久久天天综合_在线播放国产成人av_麻豆aa精品无码一区二区_中文字幕无码免费不卡视频

設(shè)為首頁 | 加為收藏 | 聯(lián)系我們 咨詢熱線:0632-5272123
電 話:0632-5272123
傳 真:0632-5271123
地 址: 棗莊市文化西路23號(hào)
E-mail:zzint@zzint.com
  • 技術(shù)咨詢:
  • 業(yè)務(wù)咨詢:
  • 客戶服務(wù):
  • 服務(wù)監(jiān)督:
詳細(xì)資料 您當(dāng)前的位置:網(wǎng)站首頁新聞動(dòng)態(tài)詳細(xì)資料

胡亂談?wù)劸W(wǎng)頁布局心得

現(xiàn)在很多網(wǎng)站還依然保留著傳統(tǒng)布局方式,這種布局是以效果為中心,制作頁面首先考慮的是頁面的布局,例如,一個(gè)兩列布局,首先想到的是用表格的兩列單元格來完成列布局,并且大量使用表格的行列進(jìn)行排版定位,也沒有考慮到網(wǎng)頁的可用性和W3C標(biāo)準(zhǔn)規(guī)范,頁面含有大量的用于表現(xiàn)的標(biāo)簽例如設(shè)置字體樣式的font標(biāo)簽。這些和網(wǎng)頁制作工具的發(fā)展也有關(guān)系,隨著所見即所得工具的發(fā)展,制作網(wǎng)頁變得非常簡(jiǎn)單,只要通過鼠標(biāo)就可以制作一個(gè)簡(jiǎn)單的網(wǎng)頁,在編輯器里使用表格可以快速建立一個(gè)復(fù)雜的布局頁面,由于頁面制作的高效,很多網(wǎng)站都是使用基于表格的布局。

1.1 表格布局

    表格布局是利用表格單元格的拆分,及表格的嵌套來完成復(fù)雜的布局,這種所謂的復(fù)雜布局使用所見即所得工具完成并不復(fù)雜,使用鼠標(biāo)可以非常方便的拖拉表格,通過工具提供的參數(shù)設(shè)置可以快速的建立復(fù)雜的布局,甚至可以不用懂HTML,因?yàn)檫@些都由編輯器自動(dòng)生成

    表格布局的優(yōu)點(diǎn)就是布局效率高,這對(duì)于追求效率的公司來說無疑是件好事,對(duì)于很小的項(xiàng)目使用這種布局并無大礙,并可以保持高效,但對(duì)于大項(xiàng)目使用表格布局,會(huì)給后期維護(hù)帶來風(fēng)險(xiǎn),前期制作會(huì)很高效,但后期維護(hù)會(huì)感覺到繁瑣,復(fù)雜,大量重復(fù)勞動(dòng)。

    為了彌補(bǔ)這些缺點(diǎn),標(biāo)準(zhǔn)布局技術(shù)逐漸發(fā)展起來

1.2標(biāo)準(zhǔn)布局

    標(biāo)準(zhǔn)布局首先考慮的不是如何實(shí)現(xiàn)效果,而是如何用有意義的標(biāo)簽把文檔結(jié)構(gòu)寫出來,當(dāng)結(jié)構(gòu)確定后,再使用CSS來布局,實(shí)現(xiàn)樣式表現(xiàn),把網(wǎng)頁分為3部分,內(nèi)容,表現(xiàn)層,結(jié)構(gòu)

1.2.1 內(nèi)容

    內(nèi)容就是指網(wǎng)頁原始內(nèi)容,如果是一段文字它就是純文字,圖片就是一張圖片,如果光把內(nèi)容顯示出來,不能區(qū)分它們,例如標(biāo)題和段落都是文字,如果光顯示它們會(huì)無法區(qū)分,所以內(nèi)容和結(jié)構(gòu)是密不可分的,這里只是在概念上把它們分開,實(shí)際制作,結(jié)構(gòu)是需要根據(jù)內(nèi)容來編寫的

1.2.2 結(jié)構(gòu)

    結(jié)構(gòu)是把內(nèi)容通過使用復(fù)合語義的HTML標(biāo)簽組成的,例如,一段文字使用p標(biāo)簽,一個(gè)標(biāo)題可以根據(jù)標(biāo)題的級(jí)別使用H1~H6,除了這些標(biāo)簽,還有定義好的ID名,類名這些是給css完成樣式表現(xiàn)的接口

1.2.3 表現(xiàn)

    表現(xiàn)就是根據(jù)內(nèi)容結(jié)構(gòu)文檔提供的接口也就是標(biāo)簽,ID名,類名來給結(jié)構(gòu)定義樣式,樣式由css選擇符,屬性和屬性值組成。

    光有了這些思想還不夠,由于另外一個(gè)原因?qū)е轮谱魍昝理撁娴睦щy度大大增加。

1.2.4 標(biāo)準(zhǔn)布局的難點(diǎn)

    由于瀏覽器之間對(duì)W3C標(biāo)準(zhǔn)的支持都有差別,導(dǎo)致頁面在各個(gè)瀏覽器之間表現(xiàn)不同,這使得網(wǎng)頁制作人員得花很多時(shí)間針對(duì)各個(gè)瀏覽器來寫特殊樣式,處理瀏覽器之間的差異,而又得差異需要大量的實(shí)踐經(jīng)驗(yàn)才能快速解決,這給標(biāo)準(zhǔn)布局帶來了難度,同時(shí)也降低了制作的效率,雖然標(biāo)準(zhǔn)布局也有缺點(diǎn),但它的優(yōu)點(diǎn)遠(yuǎn)大于缺點(diǎn)。而且未來它的某些缺點(diǎn)將被糾正。

1.2.5標(biāo)準(zhǔn)布局的優(yōu)點(diǎn)

    首先使得網(wǎng)頁更具它本身的語義,web程序開發(fā)人員只需在結(jié)構(gòu)清晰簡(jiǎn)單的頁面文件里加上他們的代碼,不需要去雜亂的頁面代碼中去找放代碼的位置,使得網(wǎng)頁體積更小,大大提高了網(wǎng)頁的加載速度,搜索引擎對(duì)符合標(biāo)準(zhǔn)的頁面青睞有加,使得頁面更容易被訪問,后期維護(hù)的風(fēng)險(xiǎn)大大降低,網(wǎng)頁樣式的修改只需要css文件,修改帶有程序代碼的頁面文件的幾率被大大降低,網(wǎng)頁可以在不同的客戶終端顯示,無須另外做特殊開發(fā)…這是目前我所了解的,還有很多。

    這里介紹了標(biāo)準(zhǔn)布局的分層思想,了解了它的優(yōu)缺點(diǎn),有了正確的思想再按照思想實(shí)踐,還需要加上一些規(guī)范.

2 網(wǎng)頁制作規(guī)范

    網(wǎng)頁制作規(guī)范目前并沒有一個(gè)統(tǒng)一的規(guī)范,都是從軟件工程中借鑒過來的一些規(guī)范

2.1命名規(guī)范

    選擇符命名是在寫結(jié)構(gòu)時(shí)就需要做的事情,一般以小寫英文單詞組合,單詞間可以用”_”,”-”,來間隔單詞,還可以和軟件中變量命名規(guī)范相同,首單詞首字母小寫,后面單詞首字母大寫

2.2 css組織劃分及注釋

    Css雖然簡(jiǎn)單但是良好的組織劃分以及注釋,可以讓css更具可讀性,當(dāng)維護(hù)修改起來時(shí),可以很方便的找到修改的位置,css劃分要看項(xiàng)目大小及項(xiàng)目的頁面特點(diǎn)來分,所有頁面公用樣式以及一些常用的工具樣式的放到一個(gè)文件,其它頁面按照頁面結(jié)構(gòu)劃分,把具有相同頁面結(jié)構(gòu)的頁面的公用樣式提取出來給它們公用,然后就是頁面的私有樣式,看私有樣式的多少,設(shè)定一個(gè)標(biāo)準(zhǔn),多余多少就單獨(dú)提出來,否則合并到局部公用文件。

    有了思想,有了規(guī)范,還有一個(gè)必須的理清楚的,那就是流程。

3 網(wǎng)頁制作的流程

    網(wǎng)頁制作人員應(yīng)該在網(wǎng)頁策劃階段就參與項(xiàng)目,這樣可以有充足的時(shí)間分析頁面結(jié)構(gòu),根據(jù)文檔內(nèi)容寫好結(jié)構(gòu),先寫公用結(jié)構(gòu)的樣式,再寫局部私有結(jié)構(gòu)的樣式,此流程是站在整個(gè)項(xiàng)目所有頁面的全局角度考慮.

3.1 結(jié)構(gòu)先行

    一般項(xiàng)目中的頁面會(huì)有個(gè)頁面說明文檔,有功能說明,區(qū)塊欄目劃分和線框圖,這份文檔會(huì)交給設(shè)計(jì)師,讓設(shè)計(jì)師根據(jù)線框圖設(shè)計(jì)出頁面的終樣式,在設(shè)計(jì)師的設(shè)計(jì)過程中,頁面制作人員可以同時(shí)做好頁面結(jié)構(gòu)分析,可以根據(jù)這個(gè)文檔中的內(nèi)容及線框圖把部分結(jié)構(gòu)代碼寫出來,當(dāng)拿到設(shè)計(jì)稿后再根據(jù)設(shè)計(jì)稿修改和添加結(jié)構(gòu),當(dāng)設(shè)計(jì)中有些地方不利于標(biāo)準(zhǔn),或會(huì)增加頁面制作成本,可以和設(shè)計(jì)師以及產(chǎn)品經(jīng)理溝通修改設(shè)計(jì),直到結(jié)構(gòu)終寫完確定。

3.2 先公后私

    當(dāng)文檔結(jié)構(gòu)分析編寫完后,開始寫樣式,首先要寫的是公用結(jié)構(gòu)的樣式,可以看作是制作頁面的樣式框架,當(dāng)公用樣式做好后,頁面的大致雛形會(huì)出來,再寫頁面私有的特殊樣式,即單獨(dú)存在此頁面結(jié)構(gòu)的樣式

3.3 頁面表現(xiàn)測(cè)試

    當(dāng)結(jié)構(gòu)和樣式都完成后,并不代表工作就此完成,因?yàn)榭蛻舨还馐褂靡环N瀏覽器,需要測(cè)試不同瀏覽器下的表現(xiàn),然后根據(jù)表現(xiàn)修改樣式直到在各個(gè)主流瀏覽器下的表現(xiàn)都統(tǒng)一。這個(gè)過程所需時(shí)間,和網(wǎng)頁制作人員的經(jīng)驗(yàn)相關(guān),經(jīng)驗(yàn)豐富的處理這些非常熟練,而對(duì)于新手這將是一個(gè)痛苦的過程。簡(jiǎn)單介紹完了頁面制作的流程,這是網(wǎng)頁制作關(guān)鍵的過程,有了清晰合理的過程,有如一個(gè)良好的計(jì)劃,而前面的頁面標(biāo)準(zhǔn)思想相當(dāng)于豐富的資源,頁面制作規(guī)范相當(dāng)于計(jì)劃的實(shí)施質(zhì)量保證,良好的計(jì)劃+豐富的資源+實(shí)施質(zhì)量保證= 完美的執(zhí)行,即,思想+規(guī)范+流程=完美的頁面。

4 網(wǎng)頁制作的未來

    隨著互聯(lián)網(wǎng)的發(fā)展,頁面類型也在不斷的變化,簡(jiǎn)單的布局技術(shù)已經(jīng)不能滿足需求,頁面將朝著標(biāo)準(zhǔn)化方向發(fā)展,也更注重用戶體驗(yàn)和可用性,而用戶體驗(yàn)需要很多交互,完成頁面交互則需要大量高質(zhì)量的腳本程序,隨著IE 8 宣布完全支持W3C標(biāo)準(zhǔn),這標(biāo)志著在未來瀏覽器表現(xiàn)將終歸統(tǒng)一,頁面制作人員將不需要去考慮瀏覽器兼容性問題,可以把更多的時(shí)間關(guān)注在用戶體驗(yàn)和可用性上,也對(duì)頁面制作人員帶來了更高的挑戰(zhàn)。


上篇文章:網(wǎng)站域名到期后保留多久不被別人注冊(cè)
下篇文章:棗莊做網(wǎng)站通用三欄布局
版權(quán)所有 棗莊市英特信息網(wǎng)絡(luò)有限公司 ◎2017
聯(lián)系電話:0632-5271123 5272123  總部地址:棗莊市市中區(qū)文化西路23號(hào)
魯ICP備09021689號(hào) 增值電信業(yè)務(wù)經(jīng)營許可證編號(hào):魯 B2-20080087號(hào)