【正文】 設(shè)計(jì)，應(yīng)該包括原型設(shè)計(jì)、交互設(shè)計(jì)、視覺設(shè)計(jì)。”無標(biāo)題文檔/div/div 這個(gè)屬性是無法居中的，如圖所示 33 所示：響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)933 盒子模型 交互設(shè)計(jì)與 UI 交互設(shè)計(jì)是一種目標(biāo)導(dǎo)向設(shè)計(jì)，所有的工作內(nèi)容都是在圍繞著用戶行為去設(shè)計(jì)的。textalign:center。當(dāng)然一定要固定寬度。margin 支持負(fù)值，在頁面布局中，應(yīng)該大膽的用，可以解決很多問題。 padding:0 20px。 上右左下 padding:10px 15px。padding:20px 15px 5px 10px。CSS 盒子模型就是在網(wǎng)頁設(shè)計(jì)中經(jīng)常用到的 CSS 技術(shù)所使用的一種思維模型。CSS 盒模型:網(wǎng)頁設(shè)計(jì)中常聽的屬性名：內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS 盒子模式都具備這些屬性。旁邊的內(nèi)聯(lián)對(duì)象元素會(huì)被呈遞在同一行內(nèi)，允許空格，即可以讓元素同時(shí)擁有塊狀元素設(shè)置寬高行高等特性，同時(shí)也具有行內(nèi)元素的同一行內(nèi)顯示。如圖 32 所示：圖 32 網(wǎng)站首頁導(dǎo)航字體顏色變化 css 元素 CSS 塊狀元素(block)：CSS 塊狀元素非?！鞍缘馈?， 總是另起一行開始，可對(duì)其設(shè)置高度，寬度，行高等等，常用的有：div p table h1 ul dl 等等。不同的文字顏色會(huì)產(chǎn)生不同的效果，這能給瀏覽者一種層次感，方便與閱讀。首頁的頂端使用，滿屏的圖片下面用大量六百這兩個(gè)部分過度的很自然。我們網(wǎng)站上用的色彩系是屬于灰白色系這個(gè)選擇符合網(wǎng)站的整體風(fēng)格，不可能把網(wǎng)站設(shè)計(jì)成五顏六色，因?yàn)閷懸饧瘓F(tuán)是一個(gè)從事建筑行業(yè)的企業(yè)，所以網(wǎng)站要體現(xiàn)一種簡潔，自然，穩(wěn)重的色彩風(fēng)格。所謂鄰近色，就是在色帶上相鄰近的顏色，例如綠色和藍(lán)色，紅色和黃色就互為鄰近色。圖 31 為寫意集團(tuán)響應(yīng)式企業(yè)官網(wǎng)首頁：圖 31 寫意集團(tuán)響應(yīng)式企業(yè)官網(wǎng)首屏著陸頁首頁的 logo 還設(shè)計(jì)了一個(gè)動(dòng)畫，整個(gè)著陸頁使用了一張滿屏大圖。好的 UI 設(shè)計(jì)不僅是讓頁面變得有個(gè)性有品味，還要讓頁面的操作變得舒適、簡單、自由，充分體現(xiàn)頁面的定位和特點(diǎn)。該流程是參照公司開發(fā)流程制定出來的，以經(jīng)過很長時(shí)間的磨合跟改進(jìn)，響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)7盡管雖然不是很完美，但是很適合我們現(xiàn)在開發(fā)這個(gè)項(xiàng)目的需求，優(yōu)點(diǎn)也是很明顯的，能更好的應(yīng)對(duì)高強(qiáng)度，高質(zhì)量的開發(fā)需求，代碼更加容易控制和修改優(yōu)化，充分利用時(shí)間，提高了開發(fā)俠侶 前端 UI 設(shè)計(jì) 模塊分布UI 即 User Interface（用戶界面）的簡稱。 內(nèi)部測試與后續(xù)優(yōu)化前端內(nèi)部測試，主要是觀察頁面與設(shè)計(jì)圖的差異，優(yōu)化頁面細(xì)節(jié)樣式，及時(shí)發(fā)現(xiàn)問題并且進(jìn)行修改。在整個(gè)過程中，先劃分好各模塊的開發(fā)順序，先編寫大概的 HTML 布局，設(shè)計(jì)圖完成后在進(jìn)行 CSS 的開發(fā)，大大節(jié)省開發(fā)時(shí)間，提高開發(fā)效率，同時(shí)也體現(xiàn)了模塊化開發(fā)的重要性，強(qiáng)調(diào)編寫規(guī)范，這樣便于后期維護(hù)，減少維護(hù)成本。并且根據(jù)二三級(jí)頁面的設(shè)計(jì)布局，搭建統(tǒng)一的大致框架。 代碼編寫當(dāng)總規(guī)劃和設(shè)計(jì)圖初稿完成后，就可以進(jìn)入代碼編寫階段，進(jìn)行前期的前端開發(fā)，大致流程如下：搭建大致的 HTML 結(jié)構(gòu)，然后等設(shè)計(jì)圖完成后再對(duì)頁面進(jìn)行細(xì)節(jié)調(diào)整布局，并添加頁面樣式修改完善，最后搭建javascript 腳本開發(fā)，嵌套腳本文件，實(shí)現(xiàn)逐層開發(fā)，減少整體消耗的時(shí)間，使得有更多的時(shí)間對(duì)產(chǎn)品進(jìn)行修改，優(yōu)化和完善。 分層開發(fā)在響應(yīng)式企業(yè)網(wǎng)站的具體概要確定之后，就要著手進(jìn)行分層開發(fā)的劃分，根據(jù)項(xiàng)目內(nèi)容的不同，劃分出不同的功能模塊，分步完成，以便合理地安排開發(fā)時(shí)間，在有限的時(shí)間內(nèi)，有條理地完成模塊和需要功能，減少時(shí)間的浪費(fèi)，降低開發(fā)成本，提高開發(fā)效率。 本章小結(jié)本章介紹了開發(fā)企業(yè)響應(yīng)式網(wǎng)站前端所需要用到的開發(fā)工具其運(yùn)行環(huán)境，同時(shí)講述了相關(guān)的前端開發(fā)語言，比如：Javascript，css，Jquery 等。除此以外，jQuery 提供 API 讓開發(fā)者編寫插件。jQuery 是免費(fèi)、開源的，使用 MIT 許可協(xié)議。jQuery 在 2022 年 1 月由美國人 John Resig 在紐約的 barcamp 發(fā)布，吸引了來自世界各地的眾多 JavaScript 高手加入，由Dave Methvin 率領(lǐng)團(tuán)隊(duì)進(jìn)行開發(fā)。jQuery 能夠使用戶的 html 頁面保持代碼和 html 內(nèi)容分離，也就是說，不用再在 html 里面插入一堆 js 來調(diào)用命令了，只需要定義 id 即可。jQuery 使用戶能更方便地處理 HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用）、events、實(shí)現(xiàn)動(dòng)畫效果，并且方便地為網(wǎng)站提供 AJAX 交互。 jQuery JQuery 是繼 prototype 之后又一個(gè)優(yōu)秀的 Javascript 庫。相對(duì)于傳統(tǒng) HTML 的表現(xiàn)而言，CSS 能夠?qū)W(wǎng)頁中的對(duì)象的位置排版進(jìn)行像素級(jí)的精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁對(duì)象和模型樣式編輯的能力，并能夠進(jìn)行初步交互設(shè)計(jì)，是目前基于文本展示最優(yōu)秀的表現(xiàn)設(shè)計(jì)語言。樣式表插入方法分為 3 種：(1) 內(nèi)聯(lián)式樣式表；(2)嵌入式樣式表；(3)外部式樣式表； CSS 某種程度上來說是擴(kuò)展了 HTML，但不能用來替換 HTML，也就是說 CSS不能脫離 HTML，它只是一種輔助修飾頁面的“工具”，除了可以擴(kuò)展 HTML 默認(rèn)的樣式設(shè)定外，CSS 讓網(wǎng)站的設(shè)計(jì)樣式維護(hù)更加方便搞笑，主要體現(xiàn)是為：減少圖片的使用率，方便管理樣式表樣式，設(shè)置公用樣式，樣式分類設(shè)置調(diào)用。是用來進(jìn)行網(wǎng)頁風(fēng)格修飾的，可以有效地對(duì)各個(gè)標(biāo)簽的樣式進(jìn)行統(tǒng)一的修改。當(dāng)這些事件被觸發(fā)時(shí)就能引起相對(duì)應(yīng)的事件程序響應(yīng)。事件驅(qū)動(dòng)就是指在頁面中執(zhí)行了某種操作所產(chǎn)生的特定事件。從而有效地防止數(shù)據(jù)的丟失。 (2) 簡單性 javascript 的簡單性主要體現(xiàn)在：它是一種弱語言腳本，對(duì)使用的數(shù)據(jù)類型沒做嚴(yán)格的聲明要求,而且 javascript 是基于 Java 基本語句和控制的腳本語言,使其設(shè)計(jì)簡單緊湊(3) 安全性 javascript 是一種安全性語言，它不允許訪問本地的硬盤資料，不能將數(shù)據(jù)存入到服務(wù)器上，不允許對(duì)網(wǎng)絡(luò)文檔進(jìn)行修改和刪除，javascript 安全限制中有同源策略的保護(hù)，一段腳本只能讀取來自同一來源的窗口和文檔的屬性,這里的同一來源指的是主機(jī)名、協(xié)議和端口號(hào)的組合。這意味著它能像其他語言一樣聲明與運(yùn)用自己已經(jīng)創(chuàng)建的對(duì)象。因此，掌握好 javascript 腳本語言的編程方法是目前我們必須去日益關(guān)心和學(xué)習(xí)的。目前它是眾多腳本語言中較為優(yōu)秀的一種，隨著 HTML5 的出現(xiàn)，javascript 的功能已經(jīng)擴(kuò)展到編寫后臺(tái)開發(fā)。它的出現(xiàn)，起初只是進(jìn)行簡單的信息和用戶之間的一種實(shí)時(shí)的，動(dòng)態(tài)的，可交互的腳本表達(dá)能力。是一種動(dòng)態(tài)類型、弱類型、基于原型的語言，內(nèi)置支持類型，具有自己獨(dú)特的垃圾回收等機(jī)制，他的解釋器被稱為Javascript 引擎，為瀏覽器的一部分，目前最新的 javascript 引擎為 V8 引擎它是使用 C++開發(fā)出來的，并在谷歌瀏覽器中使用?？梢詭臀覀兡M網(wǎng)頁在 、IEIEIEIE9 以及IE10 等瀏覽器中的兼容性，讓我們可以檢測到我們做的網(wǎng)站能否兼容各版本的IE 瀏覽器，用于觀察兼容性。ps 有很多功能，在圖像、圖形、文字、視頻、出版等各方面都有涉及。Photoshop 主要處理以像素所構(gòu)成的數(shù)字圖像。整個(gè)網(wǎng)站的詳細(xì)開發(fā)過程在后面將逐步具體介紹。然后根據(jù)設(shè)計(jì)圖制作靜態(tài)頁面，兼容各主流瀏覽器，并做到IE8 下排版不亂，IE9 以上響應(yīng)式布局。被廣大中國JS 開發(fā)者譽(yù)為“Web 前端開發(fā)神器”、“最強(qiáng)大的 HTML5 編輯器”、“最智能的 JavaScript IDE”等。在該項(xiàng)目中用到的開發(fā)工具是 WebStorm。網(wǎng)頁前端主要是由用戶交互設(shè)計(jì)，視覺體驗(yàn)設(shè)計(jì)等配合，根據(jù)設(shè)計(jì)圖合理的規(guī)劃和布局頁面，合理編寫頁面代碼，編寫易于管理具有一定的層次代碼，挖掘用戶深層次的體驗(yàn)效果，進(jìn)一步去優(yōu)化體驗(yàn)。介紹了國內(nèi)外 HTML5響應(yīng)式網(wǎng)站的發(fā)展?fàn)顟B(tài)對(duì)比目前國內(nèi)的現(xiàn)狀，說明建設(shè) HTML5 響應(yīng)式網(wǎng)站的重要性。所以各大企業(yè)官網(wǎng)轉(zhuǎn)型做響應(yīng)式也是勢在必得的過程?！∈聦?shí)上隨著技術(shù)的成熟和各種 H5 工具的涌現(xiàn)，H5 制作已經(jīng)漸漸走向標(biāo)準(zhǔn)化，成本問題也隨著一些工具的出現(xiàn)有了極大的改善。各大主流社交平臺(tái)對(duì) H5 分享的支持都是比較友好的，只不過每個(gè)平臺(tái)的分享接口都需要單獨(dú)的定制。出于好奇，筆者又調(diào)研了國內(nèi)外的幾個(gè)社交平臺(tái)。詳情外鏈的 H5 頁面可以用微信提供的模板，也可以自行定制。在可預(yù)見的未來，F(xiàn)lash 廣告將被 HTML5 廣告所替代。 (數(shù)據(jù)來源：在線 h5 工具平臺(tái)，)谷歌瀏覽器于 9 月 1 日起不再自動(dòng)播放 Flash。15%是社交互動(dòng)游戲，最高 2,892,047 uv。(數(shù)據(jù)來源：國際科技媒體 ReadWriteWeb，2022)瀏覽量最高的 1000 個(gè) H5 作品中，42%是心靈雞湯，最高 17,358,480 uv。 國內(nèi)外 HTML5 響應(yīng)式企業(yè)網(wǎng)站建設(shè)的狀況截至 2022，有 80%的 App 將全部或部分基于 HTML5。這些都是開發(fā)中最基本的技能。css。這些都促成了各個(gè)企業(yè)組織新的信息化建設(shè)，構(gòu)建專業(yè)，易于維護(hù)和管理的網(wǎng)站。與傳統(tǒng)官網(wǎng)相比，響應(yīng)式網(wǎng)站不外乎也是企業(yè)介紹，新聞發(fā)布，產(chǎn)品介紹一類等。整個(gè)官網(wǎng)設(shè)置多個(gè)板塊與分頁面，分別放置相關(guān)內(nèi)容，不同板塊的信息相互獨(dú)立。用戶能在手機(jī)上，隨時(shí)隨地就能看到企業(yè)的最新動(dòng)態(tài)，可以更好的利用用戶的碎片時(shí)間去關(guān)注企業(yè)，網(wǎng)絡(luò)之所以為網(wǎng)，也正是因?yàn)樗哂谐瑫r(shí)空性。目前很多的企業(yè)已經(jīng)建立起了自己的響應(yīng)式官網(wǎng)。響應(yīng)式企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)畢業(yè)論文目 錄第一章 緒 論 ......................................................6 本課題研究的背景和目的 ..........................................6 國內(nèi)外 HTML5 響應(yīng)式企業(yè)網(wǎng)站建設(shè)的狀況 ............................7 本章小結(jié) ........................................................7第二章 前端開發(fā) 及相關(guān)技術(shù) ..........................................7 HTML5 前端開發(fā)環(huán)境 ..............................................8 HTML5 前端開發(fā)工具 ..............................................8 HTML5 前端開發(fā)相關(guān)技術(shù) ..........................................8 javascript 簡介 .............................................8 javascript 基本特點(diǎn) .........................................9 css 簡介 ....................................................9 jQuery.....................................................10 本章小結(jié) .......................................................10第三章 前端布局分析與設(shè)計(jì) ..........................................10 前端總體開發(fā)流程與設(shè)計(jì) .........................................10 分層開發(fā) ...................................................10 代碼編寫 ...................................................11 內(nèi)部測試與后續(xù)優(yōu)化 .........................................11 前端 UI 設(shè)計(jì) ....................................................11 模塊分布 ...................................................11 顏色配置 ...................................................12 css 元素 ...................................................12 交互設(shè)計(jì)與 UI ..............................................