響應式網頁設計——-Bootstrap開發速成 ( 簡體 字) |
作者:呂國泰、何升隆、曾偉凱 | 類別:1. -> 程式設計 -> 網路編程 -> Bootstrap |
譯者: |
出版社:清華大學出版社 | 3dWoo書號: 46359 詢問書籍請說出此書號!【缺書】 NT售價: 225 元 |
出版日:4/1/2017 |
頁數:234 |
光碟數:0 |
|
站長推薦: |
印刷:黑白印刷 | 語系: ( 簡體 版 ) |
|
加入購物車 │加到我的最愛 (請先登入會員) |
ISBN:9787302466314 |
作者序 | 譯者序 | 前言 | 內容簡介 | 目錄 | 序 |
(簡體書上所述之下載連結耗時費功, 恕不適用在台灣, 若讀者需要請自行嘗試, 恕不保證) |
作者序: |
譯者序: |
前言:2012年之后,在各大企業和公司都會聽到一個名詞RWD(Responsive Web Design),即被稱作“響應式網頁設計”的名詞。就網頁發展史而言,無論在美感或技術等層面上,它一直都在不斷地演進與更新,因此對于從事網頁設計的人而言,必須不斷進步以強化自身的實力,進而設計出更好的網頁來呈現在眾人面前。
隨著科技的演進,造就了移動設備的普及,使瀏覽網頁的設備不再僅限于計算機。演變至今,移動設備在尺寸上的不一致使得網頁在視覺呈現上所要顧慮的因素越來越多,為了使瀏覽者在移動設備上能獲得最佳閱讀體驗,因而誕生了“響應式網頁設計”的概念。
預計在今后幾年,響應式網頁(Web或網站)設計仍會繼續鞏固其地位。在這個不斷創新的時代,使用響應式網頁設計技術而制作的網頁已躍升為現代與未來重要的營銷媒介。本書收錄了完整的設計范例和基礎的示范教學,以引導網頁工程師在Bootstrap網頁框架的輔助下快速進入響應式網頁設計領域。
同時,對于從事網頁平面設計的人員而言,也可從書中了解到什么是響應式網頁,以及學習響應式網頁設計與傳統網頁設計之間的差異等知識,使得設計出來的網頁版式能符合工程師的需求。借此希望每位讀者可以通過此書成為一個與時俱進、具有充實技術能力、深得客戶和老板歡心的設計師。
呂國泰 曾偉凱 何升隆
|
內容簡介:本書從認識響應式網頁設計與Bootstrap開始,詳解網站的開發流程、響應式網頁的設計思維、SEO設置以及網頁設計趨勢,導入視覺設計與網頁制作兩個不同領域的專業知識,并提供120多個Bootstrap功能范例網頁文件,說明如何使用Bootstrap框架所提供的各種CSS與組件等內容,最終以3個完整實例(書籍宣傳網頁、產品推廣網頁、網站首頁)制作出響應式網頁,以讓大家綜合運用所學知識,提高實戰技能。 本書以豐富的范例程序和詳細的圖解逐一講解 RWD 技術 + Bootstrap 結合使用的核心技術和方法,既適合負責網頁前端和后端的程序人員閱讀,也適合網站的企劃人員和視覺設計人員參考,還可供想學習和了解響應式網頁設計 + Bootstrap 開發網站的人員自學和參考。 |
目錄:1章響應式網頁簡介11.1何謂響應式網頁1 1.2響應式網頁的優點2 1.3響應式網頁的缺點3 1.4響應式的概念3 1.5Viewport4 1.6流式網格5 1.6.1網格設計5 1.6.2流式布局6 1.7媒體查詢的基礎7 1.7.1使用方法8 1.7.2設置方式8 1.7.3媒體類型8 1.7.4判斷條件9 1.7.5媒體特征10 1.8流式圖像10 1.9字體11 第2章Bootstrap簡介12 2.1何謂Bootstrap12 2.2Bootstrap具有哪些內容12 2.3下載Bootstrap13 2.4鏈接Bootstrap框架15 2.5下載與鏈接jQuery文件16 2.6快速體驗——運用CSS樣式17 第3章網站的開發流程20 3.1項目20 3.2企劃21 3.3設計21 3.4前端22 3.5后端22 3.6測試23 3.7上線23 第4章響應式網頁的設計思維25 4.1與傳統網站開發的差異25 4.2響應式網頁的設計考慮26 4.3移動設備的設計考慮28 4.3.1移動設備的特征28 4.3.2移動設備優先28 第5章視覺設計師與前端工程師的專業認知31 5.1網頁與印刷的差異31 5.2網頁向量格式SVG32 5.3版面設計時的常見詞匯33 5.4網格的運用與制作35 5.4.1網格輔助——PSD35 5.4.2網格輔助——AI36 5.4.3網格輔助——自行設置38 5.5讓視覺設計師懂得切版42 5.5.1切版重點42 5.5.2了解版面的構成42 第6章SEO簡介44 6.1何謂SEO44 6.2改善網站標題與描述45 6.3改善網站架構47 6.3.1網站架構簡介47 6.3.2架構最佳做法48 6.3.3讓網站更易于瀏覽48 6.3.4易于瀏覽的最佳做法49 6.4可優化的內容與做法50 6.4.1優質內容與服務50 6.4.2鏈接50 6.4.3圖片51 6.4.4標題52 6.5管理與營銷53 6.5.1使用網站管理工具53 6.5.2網站營銷工作要點54 第7章網頁設計趨勢56 7.1響應式網頁設計56 7.2全幅背景57 7.3單頁式網頁57 7.4固定式菜單59 7.5扁平化設計59 7.6微動畫60 7.7卡片式設計61 7.8隱藏式菜單61 7.9超大的字體62 7.10幽靈按鈕63 第8章HTML5+CSS3的基礎知識64 8.1認識DIV與CSS64 8.1.1認識DIV64 8.1.2CSSClass與CSSID65 8.2HTML5與CSS3的新增內容67 8.2.1認識HTML567 8.2.2HTML5的新元素與屬性68 8.2.3認識CSS371 8.2.4CSS3新增的屬性71 第9章響應式網頁的布局方式76 9.1GridSystem簡介76 9.1.1何謂GridSystem76 9.1.2網頁的GridSystem77 9.1.3網頁設計為何需要GridSystem78 9.1.4GridSystem的使用方法78 9.2布局規則79 9.2.1Bootstrap中的GridSystem79 9.2.2不同設備的Grid設置80 9.2.3嵌套排版82 9.2.4移動與調整Column的位置83 9.2.5Column的規則83 9.2.6調整Column的順序84 第10章BootstrapCSS樣式的使用86 10.1排版86 10.1.1標題86 10.1.2頁面主題87 10.1.3行內文字元素88 10.1.4對齊類90 10.1.5轉換類91 10.1.6聯系字段91 10.1.7引用91 10.1.8列表93 10.2表格95 10.2.1表格類95 10.2.2狀態類97 10.2.3響應式表格97 10.3窗體98 10.3.1基本范例98 10.3.2窗體布局99 10.3.3支持的控件100 10.3.4焦點狀態105 10.3.5禁用狀態105 10.3.6只讀狀態106 10.3.7驗證狀態106 10.4按鈕108 10.4.1按鈕標簽108 10.4.2顏色類109 10.4.3大小類109 10.4.4啟用狀態111 10.4.5禁用狀態111 10.5圖片113 10.5.1響應式圖片113 10.5.2圖片形狀113 第11章Bootstrap布局組件的使用115 11.1字體圖標115 11.2下拉式菜單116 11.2.1說明116 11.2.2使用的方法116 11.2.3其他輔助項目117 11.2.4范例119 11.3按鈕群組120 11.3.1說明120 11.3.2使用方法120 11.3.3其他輔助項目120 11.3.4范例122 11.4輸入框群組123 11.4.1說明123 11.4.2使用方法123 11.4.3其他輔助項目124 11.4.4范例125 11.5導航127 11.5.1說明127 11.5.2使用方法127 11.5.3其他輔助項目127 11.5.4范例129 11.6導航欄130 11.6.1說明130 11.6.2使用方法130 11.6.3其他輔助項目131 11.6.4范例133 11.7分頁135 11.7.1說明135 11.7.2使用方法135 11.7.3其他輔助項目135 11.7.4范例137 11.8提示標志137 11.8.1說明137 11.8.2范例138 11.9大屏幕效果138 11.9.1說明138 11.9.2范例139 11.10縮略圖139 11.10.1說明139 11.10.2使用方法140 11.10.3范例140 11.11進度條141 11.11.1說明141 11.11.2使用方法142 11.11.3其他輔助項目142 11.11.4范例144 11.12面板144 11.12.1說明144 11.12.2使用方法144 11.12.3其他輔助項目145 11.12.4范例146 11.13響應式嵌入內容147 11.13.1說明147 11.13.2范例147 第12章BootstrapJS插件的使用149 12.1概觀149 12.2頁簽149 12.2.1說明149 12.2.2使用方法150 12.2.3淡入效果150 12.2.4范例150 12.3提示工具152 12.3.1說明152 12.3.2使用方法152 12.3.3范例153 12.4彈出提示154 12.4.1說明154 12.4.2使用方法154 12.4.3范例155 12.5折疊效果156 12.5.1說明156 12.5.2使用方法156 12.5.3范例157 12.6輪播效果159 12.6.1說明159 12.6.2使用方法159 12.6.3標題制作161 12.6.4范例161 第13章網站實踐——書籍宣傳網頁164 13.1套入鏈接164 13.2網格布局165 13.3頁面設計166 13.3.1左邊容器166 13.3.2右邊容器167 13.4CSS美化與運用171 第14章網站實踐——產品推廣網頁174 14.1套入鏈接174 14.2網格布局175 14.2.1建立分層說明文字175 14.2.2最外層與第一層的布局176 14.2.3第二層的布局177 14.2.4第三層左邊的布局178 14.2.5第三層右邊的布局179 14.2.6第四層的布局180 14.3頁面設計180 14.3.1第一層設計180 14.3.2第二層設計180 14.3.3第三層左邊的設計181 14.3.4第三層右邊的設計183 14.3.5第四層設計183 14.4運用CSS184 14.4.1第一層184 14.4.2第二層185 14.4.3第三層左邊186 14.4.4第三層右邊187 14.4.5第四層189 第15章網站實踐——網站首頁制作190 15.1套入鏈接190 15.2網格布局191 15.2.1建立層次說明文字192 15.2.2第一層與第二層布局193 15.2.3第三層布局193 15.2.4第四層布局194 15.2.5第五層與第六層布局195 15.3第一層設計——菜單195 15.3.1運用導航欄JavaScript195 15.3.2修改類196 15.3.3運用CSS樣式197 15.4第二層設計——廣告橫幅198 15.4.1使用輪播JavaScript198 15.4.2修改內容199 15.4.3運用CSS樣式200 15.5第三層設計——最新公告與廣告區200 15.5.1加入最新公告圖片200 15.5.2應用折疊效果JavaScript201 15.5.3修改類201 15.5.4加入廣告圖片202 15.5.5運用CSS樣式203 15.6第四層設計——課程分享204 15.6.1加入課程標題圖片204 15.6.2加入課程1圖片與內容204 15.6.3加入課程2圖片與內容205 15.6.4加入課程3圖片與內容206 15.6.5加入課程4圖片與內容206 15.6.6運用CSS樣式207 15.7第五層設計——按鈕鏈接210 15.7.1加入圖片210 15.7.2運用CSS樣式211 15.8第六層頁面設計——頁腳212 15.8.1加入文字212 15.8.2運用CSS樣式212 15.9回到頂部按鈕的制作212 15.10檢查各尺寸瀏覽狀態214 15.10.1問題一的解決方式214 15.10.2問題二的解決方式215 第16章輔助工具217 16.1Bootstrap套件下載217 16.2可視化Bootstrap在線編輯器219 16.2.1GRIDSYSTEM219 16.2.2BASICCSS220 16.2.3COMPONENTS221 16.2.4JAVASCRIPT222 16.2.5預覽版式222 16.2.6下載結果223 16.3瀏覽器開發者模式檢測224 16.3.1Firefox瀏覽器224 16.3.2IE瀏覽器226 16.3.3GoogleChrome瀏覽器226 16.3.4在線檢測228 16.3.5插件的輔助檢測231 16.4尺寸對照工具232 16.5檢測優化工具233 16.6設備尺寸參考234 |
序: |