Web前端技術(shù)HTML5+CSS3+響應(yīng)式設(shè)計(jì) 課件 10-綜合案例

Web前端技術(shù)（Html5+css3+響應(yīng)式設(shè)計(jì)）第10章

綜合案例

HTML教學(xué)目標(biāo)WEB前端設(shè)計(jì)流程網(wǎng)站開(kāi)發(fā)流程案例分析與實(shí)現(xiàn)10.1網(wǎng)站的開(kāi)發(fā)流程1．確定網(wǎng)站主題及網(wǎng)站內(nèi)容2．選擇好的域名3．選擇服務(wù)器技術(shù)4．確定網(wǎng)站結(jié)構(gòu)5．網(wǎng)站風(fēng)格6．?dāng)?shù)據(jù)庫(kù)規(guī)化10.1網(wǎng)站的開(kāi)發(fā)流程7．后臺(tái)開(kāi)發(fā)8．前端開(kāi)發(fā)9．網(wǎng)站測(cè)試10．發(fā)布網(wǎng)站11．網(wǎng)站推廣12．網(wǎng)站日常維護(hù)10.2web前端設(shè)計(jì)流程10.3第1階段——內(nèi)容分析根據(jù)客戶給出的圖片、文字、視頻、音頻等資料進(jìn)行內(nèi)容的分析，明確網(wǎng)站的定位，面向的消費(fèi)群體。由此明確網(wǎng)站欄目，各欄目的內(nèi)容：各種信息的重要性，各種信息的組織架構(gòu)等。確定網(wǎng)站名稱和logo標(biāo)志10.3第2階段結(jié)構(gòu)設(shè)計(jì)在搭建文檔結(jié)構(gòu)時(shí)應(yīng)該注意以下幾點(diǎn)：1)標(biāo)簽的使用要正確，能明確標(biāo)記信息元素2)代碼中盡量先不出現(xiàn)布局標(biāo)記如div等（因?yàn)閐iv不具語(yǔ)義）。3)根據(jù)內(nèi)容的重要性，把重要的內(nèi)容放在html文檔前面，因?yàn)樗阉饕鏁?huì)更加重視接近頂部的代碼。4)相同的欄目?jī)?nèi)容用相同的標(biāo)簽，有規(guī)律的文字可以采用列表來(lái)組織。5)任何一個(gè)頁(yè)面，應(yīng)盡可能保證在不使用CSS的情況下，依然保持良好結(jié)構(gòu)和可讀性，即標(biāo)準(zhǔn)文件流的形式。10.3第3階段原型設(shè)計(jì)所謂原型設(shè)計(jì)就是用線框圖把構(gòu)思、設(shè)計(jì)展示出來(lái)，它最主要的作用是對(duì)網(wǎng)站的完整功能和內(nèi)容進(jìn)行全面的分析，它是團(tuán)隊(duì)內(nèi)部溝通的橋梁，也是與客戶溝通的重要手段。原型設(shè)計(jì)可以用紙和筆，也可以用fireworks或photoshop等圖像處理工具，還可以使用專業(yè)的原型設(shè)計(jì)工具。在線框圖得到各方的認(rèn)可后，根據(jù)線框圖用photoshop制作效果圖，把線框圖中涉及的圖片、文字、按鈕等都內(nèi)容化10.3第4階段布局設(shè)計(jì)根據(jù)線框圖，對(duì)html文檔用div標(biāo)簽進(jìn)行分塊布局，取好相應(yīng)的類名，先進(jìn)行大塊區(qū)域劃分。對(duì)案例中的頁(yè)面粗略的劃分，給定類名。再對(duì)頁(yè)眉部分細(xì)分，分為上、中、下三部分，上部為.top類，分左右2塊，中部為.logo類，也分左右2塊，下部為.nav漢堡菜單對(duì).con類進(jìn)行細(xì)分,可以分為4塊，因?yàn)檫@4塊表現(xiàn)形式相同，取相同的類名item和txt。最后對(duì)頁(yè)腳進(jìn)行細(xì)分，也是分3塊，左右中，但3塊表現(xiàn)相同，取相同的類名linkbox。10.3第5階段公共樣式文件在用css實(shí)現(xiàn)頁(yè)面表現(xiàn)形式之前，應(yīng)該先把html標(biāo)簽的默認(rèn)樣式清除，以避免樣式的層疊與沖突，這對(duì)每一頁(yè)面都是一樣的，因此可以寫(xiě)成一個(gè)公共樣式文件public.css，把它鏈接到任何一個(gè)頁(yè)面。10.3第6階段詳細(xì)設(shè)計(jì)頭部樣式主體樣式頁(yè)腳樣式媒體查詢10.3第7階段交互設(shè)計(jì)交互性設(shè)計(jì)導(dǎo)航的交互鏈接文字的交互圖片的交互進(jìn)行交互設(shè)計(jì)時(shí)可以充分考慮背景、邊框、陰影、圓角，變形等屬性本章小結(jié)Web前端開(kāi)發(fā)的流程案例實(shí)現(xiàn)網(wǎng)站開(kāi)發(fā)流程本章從建站者角度介紹了網(wǎng)站開(kāi)發(fā)的一般流程，通過(guò)一個(gè)案例，講解web前端從設(shè)計(jì)到實(shí)現(xiàn)的全過(guò)程課程總結(jié)HTML