第四章 媒體項目開發(fā)

第四章媒體項目開發(fā)計算機主機（CPU、RAM）紙質圖片聲音視頻遠程計算機網絡交換文本感覺媒體存儲媒體表現(xiàn)媒體表示媒體表現(xiàn)媒體傳輸媒體紙質圖片聲音視頻文本感覺媒體磁盤、光盤等輸入設備輸出設備4．1數(shù)字媒體出版角度看媒體分類感覺媒體——最終傳達給讀者（使用者）感覺的形式。媒體的研究以用戶感受（感覺媒體）為出發(fā)點和目標表示媒體——文字、音樂、圖像等信息的編碼、組織、加工，技術處理方式表現(xiàn)媒體——接收設備，信息終端。影響受眾的范圍和使用方式存儲媒體——載體，復制品中介物。物的屬性，出版物存在形式傳輸媒體——信息傳遞方式。發(fā)行與傳播形式數(shù)字出版中表現(xiàn)媒體、存儲媒體、傳輸媒體的關系！數(shù)字媒體數(shù)字媒體以信息科學和數(shù)字技術為主導以大眾傳播理論為依據以現(xiàn)代藝術為指導將信息傳播技術應用到文化、藝術、商業(yè)、教育和管理等領域《2005中國數(shù)字媒體技術發(fā)展白皮書》數(shù)字媒體是數(shù)字化的內容作品，以現(xiàn)代網絡為主要傳播載體，通過完善的服務體系，分發(fā)到終端和用戶進行消費的全過程數(shù)字媒體數(shù)字媒體技術是通過現(xiàn)代計算和通信手段綜合處理各種信息使抽象的信息變成可感知、可管理和可交互的技術手段對象目的4．2媒體表現(xiàn)4．2．1媒體特征及其性質不同類型的媒體所表達的信息的程度不同每種媒體有自己承載信息的形式特征，人類對不同種類信息的接受程度和理解不同一般來說，越接近人類原始表達的信息越豐富，但也越模糊，如人類的表情，動作；越是抽象化（即遠離原始信息的表達）的信息，所含信息量越少，但也越精確，如數(shù)字，符號等提供具體信息的媒體使用于最初的探索階段，能描述抽象概念的文本媒體使用于最后的分析階段，而直觀信息介于兩者之間，比較適合于綜合媒體的信息表現(xiàn)媒體的信息表現(xiàn)信息系統(tǒng)角度看，不同類型的媒體數(shù)據適合表示的媒體信息不同，數(shù)據組織和處理的方法也不同文本適合于表現(xiàn)抽象的概念和從各方面刻劃細節(jié)圖形適合于表述事物的輪廓以及蘊涵大量數(shù)值數(shù)據內在聯(lián)系的趨勢性信息視頻適合于表現(xiàn)真實的場景聲音與視頻同時出現(xiàn)時，適用于說明和示意，或起到效果渲染和烘托作用。也可在強調聽覺的地方單獨出現(xiàn)運動媒體則可反映用戶直接的交互意圖有目的的直接經驗設計模型、模擬學習環(huán)境(間接的經驗）演戲的經驗觀摩示范參觀、訪問、考察參觀展覽電視電影錄音、廣播

靜畫視覺符號抽象的形象的能動的語言符號戴爾經驗之塔最底層的經驗最具體，越往上越抽象位于“塔”中間部位的那些視聽經驗，比上層的言語和視覺符號具體、形象，又能突破時間和空間的限制，彌補下層各種直接經驗方式之不足教學活動應從具體經驗入手，逐步進入抽象經驗在學校教學中使用各種媒體，可以使教學活動更具體，也能為抽象概括創(chuàng)造條件4．2．2媒體信息的心理感受聲音心理特征觀測者經驗，響度和聲調，低頻敏感，高頻不敏感

頻率越低或越高，響度感覺越差，而對中高頻率（1kHz～5kHz）的聲音相對比較靈敏

203003K20Kf(Hz)音頻（Audio）帶寬語音(Speech)帶寬次聲帶超聲帶媒體信息的心理感受視覺心理特征亮度，色調，飽和度，對比度視覺敏感程度：對亮度信息敏感，顏色敏感度相對較弱視覺時間特征：視覺圖像建立、持續(xù)、消逝色彩記憶性感覺：暖色較冷色記憶性強色彩心理感受：不同顏色對人的心理影響色彩好惡：地域、文化、宗教、年齡……基于心理學的技術處理編碼：壓縮對人不敏感的信息以減少數(shù)據量DVD（MPEG）聲音—減損式壓縮模式，將聽覺上采擷不到的信息刪除再現(xiàn)：依據人對信息的接受方式表現(xiàn)信息立體聲—聽覺空間的心理模擬，時間差、強度差例：基于心理學的應用——JPGFDCT熵編碼器量化表有失真編碼器源圖像數(shù)據壓縮圖像數(shù)據量化器編碼表88塊例：基于心理學的應用——MP3MPEG音頻壓縮的主要依據是人耳朵的聽覺特性，利用了“心理聲學模型”心理聲學模型的一個基本概念：聽覺閾值。低于聽覺閾值的聲音信號聽不到，因此就可以把這部分信號去掉心理聲學模型的另一個概念：聽覺掩飾特性，即聽覺閾值會隨聽到的不同頻率的聲音而發(fā)生變化例如，同時有兩種頻率的聲音存在，一種是1000Hz的聲音，另一種是1100Hz的聲音，但它的強度比前者低18分貝，在這種情況下，1100Hz的聲音就聽不到MP3文件結構MP3文件大體分為三部分：TAG_V2(ID3V2)，F(xiàn)rame,

TAG_V1(ID3V1)ID3V2包含作者，作曲，專輯等信息，長度不固定，擴展了ID3V1的信息量Frame...Frame一系列的幀，個數(shù)由文件大小和幀長決定，每個FRAME的長度可能不固定，也可能固定，由位率bitrate決定。每個FRAME又分為幀頭和數(shù)據實體兩部分，幀頭記錄了mp3的位率，采樣率，版本等信息，每個幀之間相互獨立ID3V1包含作者，作曲，專輯等信息，長度為128BYTEMPEGaudio層3編碼器和解碼器的結構例：基于心理學的應用——立體聲雙耳效應人雙耳之間有一定的距離（約17cm），若一點聲源偏離聽音人前方主軸方向，到達兩耳的聲音就會產生差別，聽覺系統(tǒng)根據這些差別就可以判斷出聲源的方位，即“雙耳效應”理論。雙耳效應理論認為：人耳對聲源方位的判斷能力是根據雙耳距離差引起的四個物理因素產生的聲音到達雙耳間的時間差聲音到達雙耳間的強度差（聲音在空氣中傳播由于距離造成的衰減差異）聲音低頻分量由于時間差產生的相位差（低頻聲音的波長長，因而在時間差產生的相位差在一定數(shù)量值內，可以作為判斷聲源方位的信息）由于人的頭部對高頻分量的遮蔽作用產生的音色差基于心理學的應用——立體聲聲像聽音人在一定條件（兩揚聲器的信號完全一致）下感覺不到兩個聲源的存在，而是感覺好象在兩個揚聲器之間有一個空間點在發(fā)聲，即聲像，因為這個點實際不存在，所以也稱幻象聲像，或虛聲像幻象聲像的產生利用了“雙耳效應”理論。由于幻象聲像的存在使聽音人能夠在聽音活動過程中感受到聲音方位的變化，使再現(xiàn)聲音的方位信息成為可能基于心理學的應用——立體聲在立體聲重放系統(tǒng)中若在一定范圍內調整兩個揚聲器間信號的時間差或強度差，聲像就會從兩揚聲器連線的中心點沿著這條連線向其中一只揚聲器傳遞，并定位在某一點上。這個現(xiàn)象就是立體聲重放的基礎。某一聲像的定位是兩只揚聲器發(fā)出的兩個聲音重疊后到達聽音人雙耳的結果媒體結合的影響從信息理解角度看，多種媒體的合理結合有利于信息的接受和理解，反映在理解程度和記憶駐留效果上

心理學實驗理解程度：視覺83%，聽覺11%，觸覺3%，其他<4%

記憶駐留：

方式 2小時后 72小時后 談話 70% 10%

觀看 72% 20%視聽并舉 85% 65%“感覺相乘”效應4．2．3出版物的媒體特征文本媒體主要形式：書﹑報﹑刊一般用途：報道，描述，分析主要特點：可以細致地﹑多角度地刻劃事物或人物的各個方面，也可以做深刻的分析，可以表達人們的思想，也可以描述抽象的規(guī)律和概念形態(tài)：靜態(tài)功能：“述”、“析”觀點：文字是人類思維的工具，以文本表示的信息帶有更多的主觀色彩，帶有較多的邏輯思維特征。由于主要是文本媒體記錄了人類的知識﹑文化和思想，因此，它也是各種媒體中最重要﹑最基本的出版物的媒體特征圖畫媒體主要形式：圖片﹑畫冊及幻燈﹑膠片等

一般用途：可以和文字相互補充，用于直觀報道和形象描述，也可以專門用于欣賞

主要特點：直觀，形象

形態(tài)：靜態(tài)

功能：“示”

觀點：圖畫媒體給人的感覺要比文字客觀，表達的信息也更容易使人接受

出版物的媒體特征音像媒體一般用途：欣賞、報道主要特點：比圖畫更加直觀形象，強調可信度和感染力形態(tài)：動態(tài)，過程功能：“演/播”

觀點：音像媒體往往可以給人最客觀的感覺，表達的信息也最容易使人接受，是形象化思維表現(xiàn)4．2．4多媒體的信息表現(xiàn)多媒體綜合各種媒體的表現(xiàn)特征，媒體之間相互作用，可以表達出比各種媒體簡單合在一起更多的信息與心理學中“感覺相乘”對應，可以稱之為“媒體相乘”作用多媒體既適合表現(xiàn)形象的，也適合表現(xiàn)抽象的，既可以含有靜態(tài)的展示，又可以進行動態(tài)的演播，表現(xiàn)既可直觀生動，又可深刻理智，而且各方面可以有機的結合在一起4．2．5形象媒體與抽象媒體抽象符號需要較多理性的思考，如文字、數(shù)學符號形象媒體傳遞給人較多的是感覺人類對信息的接受首先是感覺，然后是感受（與經驗、知識相關）人類心理傾向于感覺、理解，而不是理性分析與探究！多媒體中抽象、理性的內容將受到嚴重影響媒體心理學專家觀點媒體心理學專家彼特.溫特浩夫－斯伯克（德）電視使社會的情感結構趨于膚淺，人的情感趨于做作和以性為取向。結果是情感交流變成了經過精心設計的自我表演，人們不斷追求新的刺激。感情只是被表演給人看，而實際上并沒有被感受到未來的公民將是這樣一種類型的人：他們精神脆弱，自我中心，只注重外在表現(xiàn)，醉心于人工策劃的事件在所謂的具有絕對靈活性和移動性的時代，社會聯(lián)系的紐帶越來越不可靠，而電視就成為了一個隱蔽的教育工作者技術是偏方，人本是正道有人說，他設計了一個實驗室，從這個門進去，你還不是老師；從那個門出來，你就是一個好老師了。你信嗎？4．3媒體設計4．3．1人機交互技術用戶：我又錯了？用戶必須不斷地適應計算機，而不是相反！人機交互技術人機交互定義（ACM,1992）一門研究人類所使用的交互式計算系統(tǒng)的設計、實施、評估及相關主要現(xiàn)象的學科控制信息顯示信息人機交互技術人機交互技術信息表示的多樣化和如何通過多種輸入輸出設備與計算機進行交互是人機交互技術的重要內容未來的用戶界面將更多的運用虛擬現(xiàn)實技術，使用戶能夠擺脫鍵盤與鼠標的交互方式，而通過動作、語言，甚至是腦電波來控制計算機基于視線跟蹤、語音識別、手勢輸入、感覺反饋等交互技術人機交互技術人機交互方式鍵盤輸入：傳統(tǒng)方式鼠標輸入：圖形用戶界面的重要輸入方式折疊鍵盤西門子虛擬鍵盤最古老的鼠標無線電式鼠標人機交互方式手寫輸入：手寫漢字的識別，“平板電腦”語音輸入觸摸屏輸入數(shù)字化儀輸入：適用于CAD/CAM系統(tǒng)掃描輸入：條形碼、掃描儀、光電閱讀器人機交互方式三維輸入：數(shù)據手套、三維鼠標、力矩球等視覺輸入：攝像設備。機器人的視覺顯示終端輸出：重要工具聲響輸出：聲波打印輸出：標準輸出設備之一三維輸出：產生三維輸出的設備有投影顯示器、頭盔顯示器、電視眼鏡等3維鼠標人機交互技術人機交互技術應用領域軟件界面設計：多媒體化自然語言人機交互輸入輸出裝置的設計計算機輔助設計和制造(ComputerAideddesignCAD/ComputeraidedmanufacturingCAM)人機交互技術人機交互技術發(fā)展人機交互是基于視線跟蹤、語音識別、手勢輸入、感覺反饋等新的交互技術視線跟蹤手勢輸入體驗“接吻”感覺的觸覺交互設備人機交互設計原理人機界面的設計需考慮三個元素：人的因素、交互設備、實現(xiàn)人機對話的軟件人機工程與界面設計人機工程學人機系統(tǒng)總體設計人機系統(tǒng)由人和機組成，相互聯(lián)系構成整體強調人機系統(tǒng)的各個成分，克服忽視人和人的效能的問題設計目標：使系統(tǒng)的每個成分都為實現(xiàn)系統(tǒng)目標而能夠協(xié)調一致地發(fā)揮各自的功能人機交互設計原理——屏幕人機交互的創(chuàng)意設計創(chuàng)意設計：即屏幕設計、界面設計屏幕設計創(chuàng)意通過各種手法表現(xiàn)與主題向適應的意境屏幕的各構成要素按照視覺運動的法則精心安排，主次、大小、疏密得當狹義：研究各種視覺元素的位置、面積、大小的排列組合和視覺流程問題廣義：研究各種視覺元素得搭配格調，能通過屏幕信息強化主題人機交互設計原理屏幕創(chuàng)意設計原則內容與形式表現(xiàn)必須統(tǒng)一，形式服從內容充分考慮各視覺元素的視覺流程，突出主題保持屏幕界面視覺上的相對均衡感注意屏幕設計中的空白的處理注重整體的對比因素，強化界面的整體吸引力注意提高屏幕界面信息內容的視讀性創(chuàng)造一定的韻律感，界面流暢人機交互設計原理屏幕創(chuàng)意設計表現(xiàn)手法視覺流程：在閱讀信息時，視線通常是從左到右，從上到下的過程點、線、面的關系形狀間的組合對比與統(tǒng)一節(jié)奏與韻律裝飾與趣味視覺流向人機交互設計原理多媒體人機交互設計原理使界面一致使界面具有指導性使界面健全易用使界面友好使界面功能強大圖形用戶界面交互方式GUI：GraphicsUserInterface4．3．２布局版面結構設計版面指的是瀏覽器看到的完整的一個頁面（可以包含框架和層）布局，就是以最適合瀏覽的方式將圖片和文字排放在頁面的不同位置首先看到什么（用戶）要傳達什么信息（表達者）如何傳達（技術）布局標題欄子欄目名稱主要內容內容提示附加信息網頁布局設計基本布局元素標題：將被顯示在瀏覽器的標題欄中網站標志（LOGO)：放在網頁中最顯眼的位置標識代表網站的形象頁眉：是網頁中最顯眼的位置，用來放置網站中瀏覽者最希望看到網站的內容導航：是提供網站中內容的索引。通過導航可以方便到達網站的各個欄目。一個合理的導航設計可以使得網站變得合理應用正文內容：是網站的精神所在。有方向性頁腳：提供了字數(shù)，版權信息，聯(lián)系方式等4.3.3色彩配色與設計風格給人感覺不同每個人對色彩的感覺不同，所以無法設計出讓瀏覽者感覺相同的網頁配色方案——網頁設計者根據什么設計網頁顏色和色系呢？根據色彩的聯(lián)想決定顏色和色系色彩紅色代表：熱情、活潑、熱鬧、溫暖、幸福橙色代表：光明、華麗、興奮、快樂黃色代表：明朗、愉快、高貴、希望綠色代表：平靜、和平、柔和、安靜、青春藍色代表：永恒、沉靜、理智、誠實紫色代表：高貴、魅力、自傲白色代表：純潔、樸實、神圣灰色代表：消極、謙虛、平凡、中庸、寂寞黑色代表：堅實、嚴肅、粗莽色彩灰色：象征冷靜、中立（蘋果、維基百科、紐約時報……）綠色：象征健康、生命（BP石油、食品超市wholefoods、星巴克……）藍色：象征可靠、力量（戴爾、大眾汽車、IBM……）紫色：象征智慧、想象（雅虎、T-Mobile、科幻主題電視臺Syfy……）紅色：象征血氣、年輕（可口可樂、樂高、肯德基……）橙色：象征歡樂、信任（芬達、亞馬遜、火狐……）黃色：象征溫暖、透明（百思買、法拉利、麥當勞……）色彩的搭配——使用單色通過調整色彩的飽和度和透明度也可以產生變化，避免單調色彩的搭配——使用鄰近色所謂鄰近色，就是在色輪上相鄰近的顏色，例如綠色和藍色，紅色和黃色就互為鄰近色。采用鄰近色設計可以使網頁避色彩雜亂，易于達到和諧統(tǒng)一色彩的搭配——使用對比色對比色可以突出重點，產生了強烈的視覺效果，通過合理使用對比色能夠使特色鮮明、重點突出。在設計時一般以一種顏色為主色調，對比色作為點綴，可以起到畫龍點睛的作用分割互補色——使用一個色調和兩個與它的補色鄰近色調三分色階——使用色輪中的等距三個色調

雙互補色——使用兩個色調和它們的補色

近似互補色——使用兩個互補色調和一個顏色相近色調

中間色——使用沒有色度的顏色

突出色——在沒有色調的顏色中突出一個高飽和度的色調

使用暖色調的顏色

使用冷色調的顏色

色彩的整體感網頁色彩的整體感很大程度決定了網站風格的確認

色彩的系統(tǒng)性網頁色彩整體感首先指的是網頁之間色彩的系統(tǒng)性

協(xié)調感網頁色彩整體感還體現(xiàn)為網頁頁面本身的協(xié)調感

色彩的形式感

馬蒂斯說：“色彩因自身而存在，色彩具有它自身的美?！鄙适悄痰囊魳?，色彩的音樂感是伴隨著視線的流動而產生的。色彩的音樂感類似于音樂表現(xiàn)的色彩感覺。

www.jazzsaalfelden.at

色彩的節(jié)奏和韻律色彩的節(jié)奏和韻律也是網頁色彩的形式感體現(xiàn)，它是通過色彩的交替變化出現(xiàn)的

www.slagtehal3.dk色彩的均衡與對比色彩的均衡是指各色塊之間的平衡

www.visionmedia.nl

色彩的均衡與對比對比是自然界普遍存在的規(guī)律，色彩的對比也始終存在于網頁色彩當中。應用好色彩的對比，關鍵是把握好“對比之中求調和，調和之中求對比”這一設計法則fuse-media.co.uk

網頁色彩的情感

色調與情感色彩的色調如同音樂中的調子，它確定了網頁的整體感覺，決定了網頁的情感傾向

www.download-days.de

色彩排列與情感色彩的排列方式也影響著色彩的情感表現(xiàn)。同樣的色調因色彩的排列方式不同，也會影響著人的情緒

網頁色彩的風格

色彩風格的確立取決于網站的目標定位，網頁的終端受眾首先決定了色彩的傾向

色彩的使用藍色調為主，加上白色和紅色，強調權威與真實色彩的使用橙色為主，白色為輔，具有輕快，時尚的效果色彩的使用綠色為主，白色為輔，產生舒適、優(yōu)雅、適于閱讀的氣氛色彩的使用紅色為主，產生熱情、活力的感覺，充滿歡樂的氣氛4．3．4用戶體驗用戶體驗：UE（UX）用戶體驗并不是指產品本身是如何工作的，而是指產品如何和外界聯(lián)系并發(fā)揮作用，也就是人們如何“接觸“或者“使用”它Web中的用戶體驗是指用戶在訪問平臺的過程中的全部體驗，它包括平臺是否有用，疑惑或者bug程度，功能是否易用、簡約，界面設計和交互設計是否友好等方面。用戶體驗的核心是UCD，即“以用戶為中心的設計”用戶體驗目的留住現(xiàn)有的用戶（提升用戶忠誠度）吸引更多的用戶（口碑傳播）形式幫助人們提升效率減少人們犯錯的幾率“AJAX之父”JesseJamesGarrett（2000）《用戶體驗的要素：以用戶為中心的Web設計》戰(zhàn)略層為底層，表現(xiàn)層為最上層想象一個產品像大樹一樣。從根到軀干，到枝葉，最后到開花結果用戶體驗的要素——戰(zhàn)略層戰(zhàn)略層【自身目標與用戶需求】成功的用戶體驗，其基礎是一個被明確表達的“戰(zhàn)略”戰(zhàn)略層關注的內容主要為用戶需求以及網站目標“我們想要什么”“我們的用戶想要什么用戶體驗的要素——范圍層范圍層【對需求的整合】帶著“我們想要什么”、“我們的用戶想要什么”的明確認識，弄清如何滿足所有這些戰(zhàn)略的目標。當把用戶需求和網站目標轉變成網站應該提供給用戶什么樣的內容和功能時，戰(zhàn)略就變成了范圍可以理解成為功能層，產品可以干些什么。這個產品有哪些功能。例如“”，能發(fā)圖片，發(fā)文字，能互相關注，這就是范圍層需要考慮的東西。范圍層關注的內容為：產品的功能設計和信息的內容需求（定義內容的詳細屬性）用戶體驗的要素——結構層結構層【交互。如何、可以、應該……】在收集完用戶需求并將其排列好優(yōu)先級別之后，對于最終產品將會包括什么特性已經有了清楚的圖像。然而，這些需求并沒有說明如何將這些分散的片段組成一個整體。這就是范圍層的上面一層：為網站創(chuàng)建一個概念結構結構層比較抽象，主要用于設計用戶如何到達某個頁面，當完成了這個頁面的任務以后，用戶又要去什么地方?？蚣軐佣x了導航條上各項的排列方式，而結構層則確定了哪些類別應該出現(xiàn)在導航條上。結構層關注的內容：產品的交互設計和信息架構設計

用戶體驗的要素——框架層框架層（skeleton）【布局】表現(xiàn)層之下是框架層：按鈕、表格、照片和文本區(qū)域的位置?？蚣軐佑糜趦?yōu)化設計布局，以達到這些元素的最大效果和效率——使你在需要的時候，能記得標識并找到購物車的按鈕結構層體現(xiàn)需求，這些需求來自戰(zhàn)略目標需求。在框架層，確定很詳細的界面外觀、導航和信息設計，這能讓晦澀的結構變得更實在用戶體驗的要素——表現(xiàn)層表現(xiàn)層（surface）【視覺呈現(xiàn)】看到的是一系列的網頁，由圖片和文字組成。一些圖片是可以點擊的，從而執(zhí)行某種功能，例如把你帶到購物車里去。一些圖片就只是圖片，比如一本書的封面或網站自己的標志在這個五層模型的頂端，我們把注意力轉移到網站用戶會首先注意到的那方面：視覺設計。這里，內容、功能和美學匯集導一起來產生一個最終設計，這將滿足其他四個層面的所有目標交互設計交互：用戶通過某種方式發(fā)出指令，且系統(tǒng)對此作出相應的反應交互設計是關于創(chuàng)建新的用戶體驗的問題，目的在于增強和擴充人們的工作、通信及交互方式，使他們能夠更加有效地進行日常工作和學習UI設計UserInterfaceDesign用戶界面設計，在很大程度上就是在探討如何讓產品的界面更加具有可用性，如何讓用戶有更良好的體驗。這是一種優(yōu)化后的界面，通過這種界面，用戶能更方面地完成任務，獲得良好的感覺例如：一個按鈕的設計，美工設計考慮如何好看，而用戶界面設計師則考慮按鈕如何擺放，上面顯示什么文字，甚至到底要不要這個按鈕的問題軟件設計、UI設計、交互設計《軟件設計的藝術》TerryWinograd（2004年度的ACM人機交互院士）開發(fā)軟件建房子土木工程師裝修設計師建筑設計師軟件設計ＵＩ設計交互設計實現(xiàn)模型和心理模型心理模型表現(xiàn)模型實現(xiàn)模型容易使用，體驗良好記憶負擔，體驗較差最好的技術是消失在生活當中的技術JakobNielson博士交互設計十原則1.讓用戶隨時了解系統(tǒng)的狀態(tài)例如導入導出的提示功能2.系統(tǒng)應該與真實世界相符合（使用用戶慣用的詞匯和概念）3.給用戶控制權和自主權當系統(tǒng)出錯或者誤操作后能夠緊急退出4.提倡一致性和標準化相似的任務提供相似的元素JakobNielson博士交互設計十原則5.幫助用戶診斷、識別和恢復錯誤。告訴用戶大概的原因和解決辦法6.預防錯誤7.依賴于識別而不是記憶8.強調實用的靈活性和有效性：輸入搜索內容后直接按回車鍵就能搜索而不一定要點擊搜索圖標

9．最小化設計10.提供幫助及文檔BenShneiderman交互設計原則性力求一致性：高度一致性的界面能夠給人清晰和整體的感覺提供明確的反饋設計對話，告訴用戶任務已經完成提供錯誤預防和簡單的糾錯功能應該方便用戶取消某個操作用戶應掌握控制權（授課計劃的跳過該動畫）減輕用戶的記憶負擔4．4Web前端技術網站標準的簡單歷史XHTML1ContentCSS2.1Presentation2001-2006HTML5ContentCSS3Presentation2007-Present2013年Web設計三大趨勢趨勢1：響應式設計響應式設計，是指XHTML/HTML5、CSS（3）和JavaScript技術的組合。使用這三種技術，檢測用戶的屏幕尺寸，自動調整網站的布局以適應用戶的屏幕尺寸不管用戶是使用智能手機瀏覽網站，還是使用Retina高分辨率屏幕的iPad4瀏覽網站，都能獲得很好的視覺效果響應式設計RWD（ResponsiveWebDesign），伊?！ゑR克特（EthanMarcotte），2010三種已有開發(fā)技巧彈性網格布局彈性圖片媒體查詢響應式網頁設計，即是一種針對任意設備對網頁內容都能進行完美布局的顯示機制

媒體查詢例body{background-color:grey;}@mediascreenand(max-width:960px){body{background-color:red;}}@mediascreenand(max-width:768px){body{background-color:orange;}}媒體查詢例@mediascreenand(max-width:550px){body{background-color:yellow;}}@mediascreenand(max-width:320px){body{background-color:green;}}

2013年Web設計三大趨勢趨勢2：Metro（地鐵）風格MetroUI是一種界面展示技術，和蘋果的iOS、谷歌的Android界面最大的區(qū)別在于：后兩種都是以應用為主要呈現(xiàn)對象，而Metro界面強調的是信息本身，而不是冗余的界面元素為Metro設計主題應該是：“光滑、快、現(xiàn)代”2013年Web設計三大趨勢趨勢3：大按鈕操作Web設計正在受到智能手機和平板電腦的影響手機之類的屏幕，尺寸很小，用手指觸摸操作，如果按鈕很小，那么操作極為不便為了給用戶提供更好的體驗，大按鈕的設計勢在必行4.1.1Web前端技術簡介Web前端主要指瀏覽器端Web2.0時代，網站前端發(fā)生重大變化，網頁不再只呈現(xiàn)供人瀏覽的信息，而是出現(xiàn)大量類似于傳統(tǒng)桌面軟件的應用，媒體信息和交互方式越來越豐富，用戶體驗越來越好智能手機、平板電腦等移動數(shù)字終端的普及使移動互聯(lián)網成為信息產業(yè)當前最重要的應用，各種富媒體讓網頁的內容更加生動，網頁上軟件化的交互形式為用戶提供了更好的使用體驗，這些都是基于前端技術實現(xiàn)的Web前端技術簡介通俗講：通過瀏覽器到用戶端計算機的統(tǒng)稱為前端技術，相反存貯于服務器端的統(tǒng)稱為后端技術前端開發(fā)工作通常需要視覺設計師、交互設計師和網頁設計師相互配合完成，也可以一人兼任多種角色前端開發(fā)主要方向網頁設計（重構）：根據設計圖用HTML和CSS完成頁面制作（與視覺設計師和交互設計師配合）web前端開發(fā)：主要負責交互設計。根據網站的可用性分析和用戶反饋改進和優(yōu)化網站的前端。利用JavaScript結合html+css技術開發(fā)出用戶體驗更好的網站頁面Web前端模型MVC（ModelViewController）模型（model）－視圖（view）－控制器（controller）的縮寫一種軟件設計典范，用于組織代碼一種業(yè)務邏輯和數(shù)據顯示分離的方法方法假設前提是，如果業(yè)務邏輯被聚集到一個部件里面，且界面和用戶圍繞數(shù)據的交互能被改進和個性化定制，而不需要重新編寫業(yè)務邏輯MVC用于把傳統(tǒng)的輸入、處理和輸出功能映射在一個邏輯的圖形化用戶界面結構中Web前端技術簡介Web前端技術簡介Web前端開發(fā)利用(X)HTML/CSS/JavaScript/DOM/Flash等各種Web技術進行產品的界面開發(fā)制作標準優(yōu)化的代碼，并增加交互動態(tài)功能，開發(fā)JavaScript以及Flash模塊同時結合后臺開發(fā)技術模擬整體效果，進行豐富互聯(lián)網的Web開發(fā)致力于通過技術改善用戶體驗前端開發(fā)所需技能精通HTML(5)/XHTML、CSS(3)等網頁制作技術，熟悉頁面架構和布局（盒模型，定位，浮動，段落、圖片、文字的屬性控制，瀏覽器bug…）熟悉W3C標準，對表現(xiàn)與數(shù)據分離、Web語義化等有深刻理解（至此即可實現(xiàn)靜態(tài)頁面開發(fā)）精通JavaScript、Ajax等Web開發(fā)技術

對算法、數(shù)據結構以及后臺開發(fā)(C/C++/PHP/Java等)有一定了解（可實現(xiàn)交互、動畫等功能）前端開發(fā)基本流程需求分析，設計UI界面構建HTML框架結構編寫外部樣式（CSS）編寫外部js文件頁面細節(jié)的完善和優(yōu)化頁面（瀏覽器）兼容性和js效果測試及修正上傳服務器及后期維護Web前端—瀏覽器端瀏覽器主要功能是呈現(xiàn)用戶選擇的Web資源，它從服務器請求資源，并將其顯示在瀏覽器窗口中資源的格式通常是HTML，也包括PDF、image及其他格式用戶用URI(UniformResourceIdentifier統(tǒng)一資源標識符)來指定所請求資源的位置Web即計算機，瀏覽器即桌面瀏覽器演變1995～1998，IEvs.Netscape2005～2007，IEvs.Firefox2012，Chrome份額超過IE今天，IE……瀏覽器的結構與遠程服務器通信輸出至顯示器從鼠標和鍵盤輸入網絡接口可選客戶程序HTML解釋程序可選解釋程序控制程序驅動程序……HTTP客戶程序緩存瀏覽器的主要組件用戶界面-包括地址欄、后退/前進按鈕、書簽目錄等，就是除了用來顯示所請求頁面的主窗口之外的其他部分瀏覽器引擎-用來查詢及操作渲染引擎的接口渲染引擎

–也被稱為瀏覽器內核，用來顯示請求的內容，例如，如果請求內容為html，它負責解析html及css，并將解析后的結果顯示出來網絡

-用來完成網絡調用，例如http請求，它具有平臺無關的接口，可以在不同平臺上工作瀏覽器的主要組件UI后端

-用來繪制類似組合選擇框及對話框等基本組件，具有不特定于某個平臺的通用接口，底層使用操作系統(tǒng)的用戶接口JS解釋器

-用來解釋執(zhí)行JS代碼數(shù)據存儲

-屬于持久層，瀏覽器需要在硬盤中保存類似cookie的各種數(shù)據，HTML5定義了webdatabase技術，這是一種輕量級完整的客戶端存儲技術瀏覽器的主要組件

組件間的通信渲染引擎（Renderingengines）渲染引擎的職責就是渲染，即在瀏覽器窗口中顯示所請求的內容默認情況下，渲染引擎可以顯示html、xml文檔及圖片也可以借助插件(一種瀏覽器擴展)顯示其他類型數(shù)據例如使用PDF閱讀器插件，可以顯示PDF格式Flash也是插件——與HTML5之爭Firefox使用GeokoSafari和Chrome使用webkitIE以webcontrol控件為內核，QQ、360、搜狗、獵豹……h(huán)ttp://

組件間的通信主流程（Themainflow）渲染引擎首先通過網絡獲得所請求文檔的內容解析html以構建dom樹構建render樹布局render樹繪制render樹內容屬性布局繪制Webkit渲染引擎主流程

Mozilla的Geoko渲染引擎主流程HTML頁面加載和解析流程

用戶輸入網址（假設是個html頁面，并且是第一次訪問），瀏覽器向服務器發(fā)出請求（http），服務器返回html文件（http）瀏覽器開始載入html代碼，發(fā)現(xiàn)<head>標簽內有一個<link>標簽引用外部CSS文件瀏覽器發(fā)出CSS文件的請求，服務器返回CSS文件（http）瀏覽器繼續(xù)載入html中<body>部分代碼，由于CSS文件已經載入，可以開始渲染頁面（看來不錯）瀏覽器在代碼中發(fā)現(xiàn)一個<img>標簽引用了一張圖片，向服務器發(fā)出請求。此時瀏覽器不會等到圖片下載完，而是繼續(xù)渲染后面的代碼（http）HTML頁面加載和解析流程服務器返回圖片文件，由于圖片占用了一定面積，影響后面段落布局，因此瀏覽器要重新渲染這部分代碼（MyGod）瀏覽器發(fā)現(xiàn)包含Javascript代碼的<script>標簽，趕快運行它Javascript腳本執(zhí)行這條語句，它命令瀏覽器隱藏代碼中的某個<style>（style.display=“none”）。少了這個元素，瀏覽器不得不重新渲染這部分代碼（MyGod）執(zhí)行到</html>（終于……）HTML頁面加載和解析流程用戶點了一下界面中的“換膚”按鈕，Javascript讓瀏覽器換了一下＜link＞標簽的CSS路徑（淚奔淚流……）瀏覽器召集在座的各位<div><span><ul><li>們，“大伙兒收拾收拾行李，咱得重新來過……”，瀏覽器向服務器請求了新的CSS文件，重新渲染頁面（唉……）瀏覽器加載和渲染HTML的順序下載順序從上到下，渲染（即把請求內容顯示到瀏覽器屏幕）順序也是從上到下，下載和渲染同時進行在渲染到頁面的某一部分時，其上面的所有部分都已經下載完成（并不是說所有相關聯(lián)的元素都已經下載完）如果遇到語義解釋性的標簽嵌入文件（JS腳本，CSS樣式），那么此時的下載過程會啟用單獨連接進行下載樣式表在下載完成后，將和以前下載的所有樣式表一起進行解析，解析完成后，將對此前所有元素（含以前已經渲染的）重新進行渲染JS、CSS中如有重定義，后定義函數(shù)將覆蓋前定義函數(shù)頁面加載速度優(yōu)化近年Web網頁顯著增大。HTTPArchive研究表明，平均一個頁面1.25M，2015年達2M頁面性能優(yōu)化策略不論PC還是移動瀏覽器，頁面展示需要的時間里，20%用來讀取頁面的HTML，80%用來加載額外的像樣式表、腳本文件、或者圖片這樣的資源和執(zhí)行客戶端的程序主要改善性能的策略減少每個頁面需要獲取額外資源的HTTP請求數(shù)（少訪問服務器）減少每個請求加載的大小（少從服務器傳數(shù)據）優(yōu)化客戶端執(zhí)行的優(yōu)先級和腳本執(zhí)行的效率（提高處理速度）YSlowYahoo發(fā)布的一款基于FireFox的插件（YSlowforChrome）分析網站頁面，并告之為了提高網站性能，基于某些規(guī)則（23條）如何進行優(yōu)化頁面加載速度優(yōu)化建議（Radware）合并Js文件和CSS-減http次數(shù)不僅簡化代碼，而且減少Get（http）請求次數(shù)Sprites圖片技術-減http次數(shù)一種網頁圖片應用處理方式。將零星圖片包含到一張大圖中，再利用CSS的“background-image”，“background-repeat”，“background-position”的組合進行背景定位，background-position可以用數(shù)字精確的定位出背景圖片的位置壓縮文本和圖片-減文件大小壓縮技術如gzip可以有效減少頁面加載的時間包括HTML，XML，JSON（JavaScript對象符號），JavaScript和CSS等，壓縮率都可以在大小70%左右頁面加載速度優(yōu)化建議延遲顯示可見區(qū)域外的內容-顯示調度策略為了確保用戶可以更快看見可見區(qū)域的網頁，可以延遲加載或展現(xiàn)可見區(qū)域外的內容，為了避免頁面變形，可以使用占位符標簽制定正確的高度和寬度如jQueryImage

LazyLoad可以在用戶停留在第一屏時，不加載任何第一屏以下的圖片信息，當鼠標往下滾動時，這些圖片才開始加載確保功能圖片優(yōu)先加載-顯示調度策略主要考慮可用性的重要性，一個功能按鈕要提前加載頁面加載速度優(yōu)化建議重新布置Call-to-Action按鈕-顯示調度策略從用戶體驗速度著手，跳過了網頁的整體加載速度，讓一些行為按鈕提前，Call-to-Action按鈕一般習慣設計在頁面底部可以調整CTA按鈕位置或使用滑動圖片按鈕。很多大型購物網站的加入購物車就是這種類型圖片格式優(yōu)化-減文件大小正確的圖片格式可以讓圖片縮小數(shù)倍，可以節(jié)省大量帶寬，減少處理時間，加快頁面加載速度圖片減肥工具如Smush.it和TinyPNG頁面加載速度優(yōu)化建議使用ProgressiveJPEGs-JPEG2000漸進方式低速網絡精簡代碼-減文件大小網頁代碼瘦身，刪除不必要的沉冗代碼，比如不必要的空格、換行符、注釋等，包括JS代碼中的無用代碼也需要清除延遲加載和執(zhí)行非必要腳本-執(zhí)行調度策略網頁中很多腳本在頁面完全加載完前不需要執(zhí)行，可以延遲加載和執(zhí)行非必要腳本這些腳本可以在onload事件之后執(zhí)行，避免對網頁上重要內容的呈現(xiàn)造成影響這些腳本往往是一些第三方腳本，這樣的有很多，比如評論、廣告、智能推薦、百度云圖、分享等等，這些完全可以等主體內容加載完后再執(zhí)行頁面加載速度優(yōu)化建議使用AJAX-異步（調度）+減文件大小AJAX即“AsynchronousJavascript+XML”，通過在后臺與服務器進行少量數(shù)據交換，AJAX可以使網頁實現(xiàn)異步操作局部更新自動化的頁面性能優(yōu)化自動化的頁面性能優(yōu)化是借助工具如Radware推薦了自家的RadwareFastView簡單建議外部JS和CSSHead（顯示主要頁面用）Body尾部（被調用）可以用CSS處盡量用少調文件減少HTTP，DNS（不同域名使用越少越好）合并文件網址尾部加/（不是文件時）圖片或表格指定height和width參數(shù)（減少計算）用緩存（特別是HTML5）減少圖片（如能用HTML或JS生成）和FLASH（特別是HTML5）網頁數(shù)據分析工具（Httpfox）HttpWatch（Httpfox）記錄HTTP

與Internet瀏覽器和Firefox集成獨立的日志文件查看器按頁面的請求分組請求LevelTime圖表頁面事件可定制的數(shù)據列自動化支持毫秒級的計時HTTP壓縮可擴展的Cookie信息原始HTTP流網頁數(shù)據分析工具導入HAR文件鍵盤加速器準確地記錄請求和響應支持國際字符集容易，簡單而且功能強大‘解密HTTPS流量壓縮型和綜合性日志文件記錄的流量摘要信息從您的客戶中收集日志文件實時頁面級時間圖表檢測潛在的問題網頁數(shù)據分析工具數(shù)據提示先進的過濾功能動態(tài)排序網絡級的性能數(shù)據顯示與瀏覽器Cache的交互將數(shù)據導出到CSV,HAR和XML文件中可定制的CSV導出訪問緩存的和已下載的內容自動記錄和保存支持打印Web前端技術簡介基本模型：HTML（5）展示外觀：CSS（3）實現(xiàn)操作：JavaScriptJquery（尤其Chrome）數(shù)據庫技術MySql\SQLServer\Oracle\SQLilePHP/JSP/ASP服務器技術Node.js架構Jquery/Bootstrap4．4．2HTML5HTML發(fā)展歷史19982000200220042007HTML4.0XHTML1XHTML2WHATWGHTML5WHATWG：WebHypertextApplicationTechnologyWorkingGroupHTML5DEMOHTML發(fā)展歷史HTMLfirstpublished199120122002-20092000HTML2.0HTML3.2HTML4.01XHTML1.0XHTML2.0HTML5199519971999HTML5ismuchmoretolerantandcanhandlemarkupfromallthepriorversions.ThoughHTML5waspublishedofficiallyin2012,ithasbeenindevelopmentsince2004.AfterHTML4.01wasreleased,focusshiftedtoXHTMLanditsstricterstandards.XHTML2.0hadevenstricterstandardsthan1.0,rejectingwebpagesthatdidnotcomply.Itfelloutoffavorgraduallyandwasabandonedcompletelyin2009.支持HTML5的瀏覽器Opera9.5+Cross-documentmessagingServer-senteventsWebForms2.0CanvasandvideoSafari3.1+<video>and<audio>tagsOfflinedatastorageAPIWebkit(Iphone/Chrome/Android/

Nokias60/Palm'sWebOS)支持HTML5的瀏覽器FireFox3.1+offlinestorageandcanvasGeolocation/WebWorkers/

ContentEditableGecko(moreHTML5APIs)InternetExplorer8.0+embedelementand

contentEditableattributecross-documentmessagingHTML5概覽通用適合所有瀏覽器結構清晰標簽代替DIV減少JavaScript編程標簽代替API代替插件安全性、兼容性、……TobeornottobeAPIs,還有庫的支持，如jQueryFlash的噩夢:網頁中地位下降HTML5概覽強化Web網頁的表現(xiàn)性能，提供了繪制、視頻和音頻工具，追加本地數(shù)據庫等Web應用的功能促進Web上的和便攜設備的跨瀏覽器應用的開發(fā)。HTML5是驅動移動云計算服務方面發(fā)展的技術之一瀏覽器支持程度評測網站

/HTML5技術概覽HTML5新增和移除的元素HTML5基本布局HTML5對表單的支持HTML5DOM變化HTML5的JavascriptAPIsCanvasVideo/AudioDrag&DropGeolocationApplicationCacheDatabaseStorageX-DocumentMessagingHTML5新增的元素多媒體及交互式元素video,audio...details,menu,command...結構元素header,footer,section,article,nav...塊級語義及行內元素aside,figure,dialog...time,meter,mark,progress...表單控件email,url,datetime,number,range,color...HTML5新增的屬性contenteditable,contextmenu,data-*,hidden,item,itemprop,subject,

role,aria-*,spellcheck,draggable,irrelevant,template,placeholder,autofocus,required,async,manifest...HTML5新增的事件onabort,onbeforeunload,oncontextmenu,ondrag,ondragend,ondragenter,ondragleave,ondragover,ondragstart,ondrop,onerror,onmessage,onmousewheel,onresize,onscroll,onunload...HTML5移除的元素移除的元素font,center,strike,big,s,u,acronym,applet,dir...移除的屬性如a,area,button,input,label,legend和textarea元素的accesskey屬性如link和a元素的rev和charset屬性,link元素的target屬性,td的scope屬性，script元素的language屬性,body元素的alink，link，text和vlink屬性HTML5基本布局HTML4HTML5<!DOCTYPEhtml><htmlang="en"><head><metacharset="utf-8"><title>HTML5Demo</title><body><header><h1></h1><h2></h2></header><nav><ul><li></li><li></li></ul></nav><section><article></article><article></article></section><aside></aside><footer></footer></body></html><!DOCTYPEhtml><html><head><style>*{margin:0;padding:0;}body{width:962px;background-color:white;margin:15pxauto;border:1pxsolidblack;}h1{padding:10px;}header{border-bottom:2pxsolid#ef9c00;}section{height:400px;width:600px;float:left;border-right:2pxsolid#ef9c00;float:left;}aside{width:360px;float:right;}footer{clear:both;border-top:2pxsolid#ef9c00;}</style></head><body><header><h1>Header</h1></header><section><h1>Section</h1></section><aside><h1>Aside</h1></aside><footer><h1>Footer</h1></footer></body></html>標簽CSSHTML5對表單的支持新的控件類型<inputtype="url|email|date|tel|search|datetime|date|month|week|datetime-local|number|range|color">,<selectdata="http://domain/getoptions"></select>文件上傳控件<inputtype="file"accept="image/png"/>重復的模型add,remove,move-up,move-down內建表單驗證<inputtype="email"required/>,<inputtype="number"min=10max=100/>XMLSubmissionapplication/x-www-form+xml

<formaction='/register'enctype="application/x-www-form+xml"method="post"><p><labelfor='name'>ID(請使用Email注冊)</label><inputname='name'requiredtype='email'/><p><labelfor='password'>密碼</label><inputname='password'requiredtype='password'/><p><labelfor='birthday'>出生日期</label><inputtype='date'name='birthday'/><p><labelfor='gender'>國籍</label><selectname='country'data='countries.xml'></select><p><labelfor='photo'>個性頭像</label><inputtype='file'name='photo'accept='image/*'/><table><thead><td><buttontype="add"template="questionId">+</button>保密問題</td><td>答案</td><td></td></thead><trid="questionId"repeat="template"repeat-start="1"repeat-min="1"repeat-max="3"><td><inputtype="text"name="questions[questionId].q"/></td><td><inputtype="text"name="questions[questionId].a"/></td><td><buttontype="remove">刪除</button></td></tr></table><p><inputtype='submit'value='send'class='submit'/></p></form>/Demo/Speech/Demo/form-html5.html

HTML5DOM變化getElementsByClassNameSelectorAPIdocument.querySelector()document.querySelectorAll()TraversalAPI.nextElementSibling.previousElementSibling.firstElementChild.lastElementChild.childrenHTML5的JavascriptAPIsWebForms2.0MessagingOfflineApplicationsHistoryAPIVideo&AudioDrag&DropUndoCanvasEditableX-DomainStorageGeolocationLocalDatabaseVideo&Audio在無需安裝第三方插件的情況下添加圖形和視頻<videoheight="280"width="498"poster="border.png"id="video">

<sourcesrc="coldplay.mp4">

</video><audiosrc="music.oga"controls>

<ahref="music.oga">Downloadsong</a>

</audio>Canvas<canvas>是一個新的HTML元素，這個元素可以被Script語言（通常是JavaScript）用來繪制圖形。例如可以用它來畫圖、合成圖像、或做簡單的（和不那么簡單的）動畫varcanvas=document.getElementById("canvas"),context=canvas.getContext("2d");

context.fillStyle="rgb(0,0,200)";

context.fillRect(10,10,50,50);context.save();

context.restore();

context.scale(x,y);

context.rotate(angle);

context.translate(x,y);

Canvasvs.DOM+CSSCanvas提供像素級API，只要精通算法，理論上幾乎可以做出任何效果大量游戲工程師進入Web前端實現(xiàn)在瀏覽器中的WebGL失去DOM和CSS支持（瀏覽器引擎的核心工作之一），開發(fā)成本增加HTML是DOM樹，瀏覽器引擎解析DOM樹提供瀏覽功能CSS將外觀從內容中分離，提高開發(fā)效率和可維護性平衡的解決方案（結構+處理）甚至PhotoShopDrag&Drop拖拽事件:dragstart,dragend,dragenter,dragleave,dragover,drag,drop<divdraggable="true"ondragstart="dragstartHandler(event)"></div>

functiondragstartHandler(e){

alert('dragstart');}WebWorkers讓JavaScript多線程，可以在后臺做很多工作而不會阻斷當前的瀏覽器（異步化）創(chuàng)建后臺運行的線程varw=newWorker(“worker.js”);

w.onmessage=function(event){ alert(event.data);}

w.postMessage('run');WebWorkers//worker.jsimportScripts(“xhr.js”,“db.js”);onmessage=function(event){

if(event.data=='run'){

run();

}

}functionrun(){

vardata=doCrazyNumberCrunch();

postMessage(data);

}Geolocationnavigator

.geolocation

.getCurrentPosition(

success,

error);支持共享地理位置；通過使用移動智能設備定位功能納入移動云服務和應用ApplicationCache離線存儲<htmlmanifest="rubiks.manifest">rubiks.manifestCACHEMANIFEST

/demo/rubiks/style.css

/demo/rubiks/jquery.min.js

/demo/rubiks/rubiks.js

#version15http:///demo/rubiks

StorageWebSQLDatabases支持SQL規(guī)范的本地數(shù)據庫本地存儲（大小限制5MB,HTTPCookie大小4KB）databasestorage（客戶端數(shù)據庫SQLite）WebKit中已經實現(xiàn)vardatabase=openDatabase('db','1.0');database.executeSql('SELECT*FROMtest',function(result){

database.executeSql('DROPTABLEtest');

});Storagekey/val存儲()sessionStorage(windowbased)localStorage(domainbased)WebKit/IE8/Firefox3.5已經實現(xiàn).setItem(key,value).getItem(key)Cross-DocumentMessaging.postMessage(message,targetOrigin).onMessage(event)event.data==messagedocument.getElementById('iframe').contentWindow.postMessage('mymessage','');window.addEventListener('message',

function(e){

if(e.origion!==''){

return;

}

alert(e.origion+'said:'+e.data);

},false);跨域:不同url/

2022?4．4．3CSS3199619982001CSS1.0CSS2.0CSS3.0CascadingStyleSheetsCSS的發(fā)展歷史CSS3DEMOCSS3技術概況CSS技術的升級版本模塊化發(fā)展以前規(guī)范，一個模塊，太龐大且比較復雜分解為一些小模塊加入新模塊模塊盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局……CSS3技術概況選擇器布局樣式動畫其它CSS3-選擇器屬性選擇器a[href$='.pdf'],a[href^='mailto'],a[class*=‘item’]兄弟選擇器Div~img偽類選擇器:nth-child(n),:nth-last-child(n),:last-child,:checked,:empty,:only-child,:nth-of-type(odd),:nth-of-type(even)CSS3-樣式圓角border-radius:3px-moz-border-radius-topleft-webkit-border-top-left-radius陰影box-shadow:5px5px5pxrgba(0,0,0,0.5)text-shadow:2px2px#444,3px3px#555自定義字體@font-face{

font-family:Adam,src:url(adam.ttf);

}

p{font-family:Adam,serif;}文本換行word-wrap:normal|break-wordCSS3-樣式邊框背景border-image:url(border.png)27272727roundround;漸變background:-moz-linear-gradient(20%,center,30%,center,from(blue),to(yellow))no-repeat;背景background-size:100px50px;background-origin:content-box|border-box|padding-box;background-clip:border-box|padding-boxCSS3-樣式透明opacity:0.5;RGBAcolor:rgba(0,255,0,0.5);HSL/Acolor:hsl(240,50%,50%);hsla(240,50%,50%,0.5)調整元素尺寸resize:both|horizontal|verticalCSS3-布局盒模型box-sizing:content-box|border-box;網格模型column-count:3;column-width:13em;column-gap:1em;column-rule:1pxsolidblack;CSSTableDisplay#content{display:table;}

#main{display:table-cell;width:620px;padding-right:22px;}

#side{display:table-cell;width:300px;}Outlineoutline-offsetCSS3-動畫變換transform:rotate(30deg);transform:scale(0.5,2.0);transform:skew(-30deg);transform:translate(30px,0);過渡transition:all1sease-out;動畫animation:greenPulseinfiniteease-in-out3s;CSS3-其它媒體查詢.entry{color:red;}

@mediaalland{min-width:100em}{

.entry{color:black