新書推薦:
《
不同境遇的36岁:无尽与有限+人生半熟
》
售價:NT$
510.0
《
小时光 油画棒慢绘零基础教程
》
售價:NT$
403.0
《
可控性混乱
》
售價:NT$
301.0
《
协和专家大医说:医话肿瘤
》
售價:NT$
500.0
《
潜水指南 全彩图解第4版
》
售價:NT$
602.0
《
超大规模集成电路设计——从工具到实例
》
售價:NT$
403.0
《
村上春树·旅(一本充满村上元素的旅行指南,带你寻访电影《挪威的森林》拍摄地,全彩印刷;200余幅摄影作品)
》
售價:NT$
301.0
《
智能驾驶硬件在环仿真测试与实践
》
售價:NT$
709.0
|
內容簡介: |
附DVD一片
以3大實例一探業界極為流行的響應式網頁框架!
熱門的Bootstrap讓許多企業在徵求網頁設計師時都將之列為必備的技能條件,Bootstrap採用了模組化設計,簡易到只要懂得如何套用,就可以快速開發出具有美感的響應式RWD網頁。
對於許多不擅長視覺設計的網頁工程師來說,省去了許多美化的時間與困惱,而對於視覺設計師來說,也能依著自己設計的版型建置出網頁,同時支援市面上大部份的主流瀏覽器,而對於想踏入響應式網頁領域的初學者來說,則可以在短時間就學習到實務的響應式網頁設計技能。
書中從認識響應式網頁與Bootstrap開始,詳解網站開發流程、響應式網頁設計思維、SEO設定,以及網頁設計趨勢,導入視覺設計與網頁製作兩個不同領域的專業知識,並提供120多個Bootstrap功能範例網頁檔,說明如何使用Bootstrap框架所提供的各種CSS與組件等內容,最終再以3個完整實例製作出響應式網頁,以具備實務的設計技能。
書附超值DVD:
135分鐘網站實作專題影音教學範例檔
|
關於作者: |
呂國泰
現職:文藻外語大學數位內容應用與管理學系兼任講師
學歷:亞洲大學數位媒體設計研究所碩士
專長:
1.多媒體技術整合應用開發
2.數位出版內容設計暨系統建置
3.多媒體影音作品設計影像非線性剪輯技術設計
4.網頁視覺設計切版組版與多媒體內容網站設置RWD
5.大型設計案製作流程管理與執行
6.設計業務相關客戶溝通協調
7.廣告設計相關企劃管理作業
8.影視多媒體後製技術行銷企劃、週邊產品與活動規劃與專案管理作業
著作:著有動畫製作、遊戲設計、電子書、多媒體、國際認證 等近16本圖書
曾偉凱
學歷:樹德科技大學應用設計研究所碩士
專長:
1.3D遊戲引擎Unity3D
2.3D行動手機遊戲製作iPhone,iPad,Android,AndroidPad
3.程式語言撰寫JavaScript、C#
4.遊戲動畫與角色動作捕捉器motioncapture
5.遊戲企劃書製作
競賽獲獎:
1.2011年大中華區3DVR遊戲開發盟主競賽手機遊戲開發組「金獎」
2.2011年第八屆育秀盃創意設計大賽軟體應用類Mobile組「佳作」
3.2011年4C數位創作競賽行動內容應用組「大會銀獎」
4.2011年4C數位創作競賽行動內容應用組「奧爾贊助獎」
5.2010年4C數位創作競賽PC遊戲提案組「銅獎」
6.2010年4C數位創作競賽PC遊戲提案組「樂陞遊戲公司贊助獎」
7.2009年第六屆育秀盃創意設計大賽網頁設計組食品達人培訓網特別獎「第一名」
參展紀錄:
1.2011高雄歷史博物館「青春風火輪-哪吒三太子的異想世界」展覽
2.2011台視AppStar高手爭霸戰節目-錄影展出
3.2011高雄左營萬年季-萬年互動館展出
4.2011台北世界設計大展-國際設計學生創作展
何昇隆
現職:銳比數位科技有限公司技術總監
學歷:崑山科技大學資訊管理研究所碩士
專長:
1.行動應用技術整合與開發
2.行動應用SDK開發與維護
3.伺服器網頁程式語言
4.網路伺服器系統管理
|
目錄:
|
PART01響應式網頁介紹
CHAPTER01響應式網頁介紹
了解何謂響應式網頁及彈性圖片與文字上等設計重點,使在網頁製作階段時可減少與避免素材需調整或重新設計等問題。
1.1何謂響應式網頁
1.2響應式網頁的優點
1.3響應式網頁的缺點
1.4響應式的概念純手刻
1.5認識Viewport
1.6流動網格FluidGrid
1.7媒體查詢(MediaQueries)的基礎
1.8流動圖片FluidImage
1.9字體
CHAPTER02何謂Bootstrap
在有了響應式網頁構成的觀念後,進行Bootstrap框架的認識,以理解Bootstrap框架對於響應式網頁製作上之便利性。
2.1Bootstrap簡介
2.2Bootstrap具有那些內容
2.3下載Bootstrap
2.4連結Bootstrap框架
2.5下載與連結jQuery文件
2.6快速體驗-套用CSS樣式
PART02開發的注意事項
CHAPTER03網站的開發流程
了解在一個網頁專案中每個領域所需負責的內容,使理解自己的專長適合扮演專案中的何者角色,以發揮出自己最大的價值。
3.1專案
3.2企劃
3.3設計
3.4前端
3.5後端
3.6測試
3.7上線
CHAPTER04響應式網頁的設計思維
理解傳統網頁設計與響應式網頁設計上之差異點與設計上須考量的要素。使設計出的版型與素材皆能符合各種載具之顯示外,也能讓程式人員順利製作。
4.1與傳統網站開發的差異
4.2響應式網頁的設計考量
4.3行動載具的設計考量
CHAPTER05視覺設計師與前端工程師的專業認知
藉由理解不同領域的專業,可減少或避免在專案配合時的溝通問題,因而提升網頁在製作上的效率與品質。
5.1網頁與印刷的差異
5.2網頁向量格式SVG
5.3版面設計時常用詞彙
5.4網格的套用與製作
5.4.1.網格輔助-PSD
5.4.2.網格輔助-AI
5.4.3.網格輔助-自行設定
5.5讓視覺設計師懂切版
CHAPTER06SEO介紹與作法
了解搜尋引擎的搜尋模式,使在網頁製作階段可完成基本SEO內容設定,以在搜尋時更容易透過關鍵字找到網頁。
6.1何謂SEO
6.2改善網站標題與描述
6.3改善網站架構
6.4可最佳化的內容與作法
6.5管理與行銷
CHAPTER07網頁設計趨勢
了解時下流行的網頁樣式,使在網頁提案階段能提出貼近客戶需求與具創新的網頁。
7.1響應式網頁
7.2全幅背景
7.3單頁式網頁
7.4固定式選單
7.5扁平化設計
7.6微動畫
7.7磚牆式設計
7.8隱藏式選單
7.9超級大的字型
7.10幽靈按鈕
CHAPTER08HTML5+CSS3的基本知識
了解如何利用DIV與CSS來組織網頁,讓設計師可清楚知道一個網頁版型中,哪些元素需要切割出圖檔,哪些則是可利用程式取代圖檔效果。
8.1認識DIV與CSS
8.2HTML5與CSS3之新增內容
PART03Bootstrap介紹與使用方法
CHAPTER09響應式網頁的佈局方式
了解Bootstrap所提供的GridSystem與佈局規則,使程式設計師能快速的規劃出在不同載具上的網頁內容;而視覺設計師則可根據GridSystem來進行各種版型設計。
9.1GridSystem(網格系統)介紹
9.2佈局規則
CHAPTER10BootstrapCSS樣式的使用
了解Bootstrap提供的各種CSS樣式,並學習如何進行套用與推疊各種樣式,以呈現出最佳的效果。
10.1排版
10.2表格
10.3表單
10.4按鈕
10.5圖片
CHAPTER11Bootstrap佈局組件的使用
除了CSS基本的美化樣式外,還可套用Bootstrap所提供的多款組件於網頁內容中,加以呈現出動態的視覺與功能等效果。
11.1符號圖示
11.2下拉式選單
11.3按鈕群組
11.4輸入框(input)群組
11.5導航
11.6導航列
11.7分頁
11.8提示標誌
11.9大螢幕效果
11.10縮圖
11.11進度條
11.12面板
11.13響應式嵌入內容
CHAPTER12BootstrapJS插件的使用
運用Bootstrap所提供的Javascript插件,為網頁添加更多的互動。
12.1概觀
12.2頁籤
12.3提示訊息
12.4彈出提示
12.5摺疊效果
12.6輪播效果
PART04網站製作
將之前所學到的觀念與Bootstrap功能加以整合運用,從無到有完成響應式網頁的製作。範例為,第13章:書籍宣傳網頁、第14章:產品推廣網頁、第15章:網站首頁製作。
CHAPTER13網站實作-書籍宣傳網頁
13.1套入連結
13.2網格佈局
13.3頁面設計
13.4CSS美化與套用
CHAPTER14網站實作-產品推廣網頁
14.1套入連結
14.2網格佈局
14.3頁面設計
CHAPTER15網站實作-網站首頁製作
15.1套入連結
15.2網格佈局
15.3第一層設計-選單
15.4第二層設計-廣告橫幅
15.5第三層設計-最新公告與廣告區
15.6第四層設計-課程分享
15.7第五層設計-按鈕連結
15.8第六層頁面設計-頁腳
15.9回頂部按鈕製作
15.10檢查各尺寸瀏覽狀態
PART05知識補給站
CHAPTER16輔助工具
了解如何利用各種瀏覽器來檢測響應式網頁;了解如何利用線上編輯器快速製作Bootstrap框架;以及字型尺寸上的定義等輔助方式,以解決在製作響應式網頁時有可能遇到的問題。
16.1Bootstrap套版下載
16.2視覺化Bootstrap線上編輯器
16.3瀏覽器開發者模式檢測
16.4尺寸對應工具
16.5檢測優化工具
16.6載具尺寸參考
|
|