HTML5+CSS3前端技術(shù)——UI設(shè)計(jì)師與開發(fā)人員合作秘籍
-
【作 者】北京課工場(chǎng)教育科技有限公司Q
【I S B N 】978-7-5170-4224-2
【責(zé)任編輯】李炎
【適用讀者群】本專通用
【出版時(shí)間】2016-04-01
【開 本】16開
【裝幀信息】平裝(光膜)
【版 次】第1版第1次印刷
【頁(yè) 數(shù)】208
【千字?jǐn)?shù)】286
【印 張】13
【定 價(jià)】¥52
【叢 書】互聯(lián)網(wǎng)UI設(shè)計(jì)師
【備注信息】
簡(jiǎn)介
本書特色
前言
章節(jié)列表
精彩閱讀
下載資源
相關(guān)圖書
內(nèi) 容 提 要
作為UI/UE設(shè)計(jì)師,經(jīng)常和Web前端開發(fā)人員“吵架”:開發(fā)人員抱怨UI設(shè)計(jì)師設(shè)計(jì)得過(guò)于復(fù)雜無(wú)法實(shí)現(xiàn),UI設(shè)計(jì)師則吐槽開發(fā)人員最終開發(fā)出來(lái)的產(chǎn)品和最初設(shè)計(jì)效果相差甚遠(yuǎn)。UI設(shè)計(jì)師和開發(fā)人員究竟如何合作和溝通?本書借鑒一位資深Web前端開發(fā)人員的經(jīng)驗(yàn)總結(jié),詳細(xì)介紹了雙方合作必備的兩方面技術(shù)和實(shí)用技巧。
相對(duì)市面上的同類教材,本套教材最大的特色是,提供各種配套的學(xué)習(xí)資源和支持服務(wù),包括:視頻教程、案例素材下載、學(xué)習(xí)交流社區(qū)、作業(yè)提交批改系統(tǒng)、QQ群討論組等,請(qǐng)?jiān)L問(wèn)課工場(chǎng)UI/UE學(xué)院:kgc.cn/uiue。
注重實(shí)用技能培養(yǎng)——打造“互聯(lián)網(wǎng)+”UI 設(shè)計(jì)師 突出創(chuàng)意設(shè)計(jì)訓(xùn)練——授人以漁而不只是作品臨摹
真實(shí)商業(yè)項(xiàng)目驅(qū)動(dòng)——行業(yè)知識(shí)與專業(yè)設(shè)計(jì)相呼應(yīng) 學(xué)習(xí)體驗(yàn)時(shí)尚前衛(wèi)——傳統(tǒng)教材與二維碼革命性攜手
隨著移動(dòng)互聯(lián)技術(shù)的飛速發(fā)展,“互聯(lián)網(wǎng)+”時(shí)代已經(jīng)悄然到來(lái),這自然催生了各行業(yè)、企業(yè)對(duì)UI設(shè)計(jì)人才的大量需求。與傳統(tǒng)美工、設(shè)計(jì)人員相比,新“互聯(lián)網(wǎng)+”時(shí)代對(duì)UI設(shè)計(jì)師提出了更高的要求,傳統(tǒng)美工、設(shè)計(jì)人員已無(wú)法勝任。在這樣的大環(huán)境下,這套“互聯(lián)網(wǎng)UI設(shè)計(jì)師”系列教材應(yīng)運(yùn)而生,它旨在幫助讀者朋友快速成長(zhǎng)為符合“互聯(lián)網(wǎng)+”時(shí)代企業(yè)需求的優(yōu)秀UI設(shè)計(jì)師。
這套教材是由課工場(chǎng)(kgc.cn)的UI/UE教研團(tuán)隊(duì)研發(fā)的。課工場(chǎng)是北大青鳥集團(tuán)下屬企業(yè)北京課工場(chǎng)教育科技有限公司推出的互聯(lián)網(wǎng)教育平臺(tái),專注于互聯(lián)網(wǎng)企業(yè)各崗位人才的培養(yǎng)。平臺(tái)匯聚了數(shù)百位來(lái)自知名培訓(xùn)機(jī)構(gòu)、高校的頂級(jí)名師和互聯(lián)網(wǎng)企業(yè)的行業(yè)專家,面向大學(xué)生以及需要“充電”的在職人員,針對(duì)與互聯(lián)網(wǎng)相關(guān)的產(chǎn)品、設(shè)計(jì)、開發(fā)、運(yùn)維、推廣和運(yùn)營(yíng)等崗位,提供在線的直播和錄播課程,并通過(guò)遍及全國(guó)的幾十家線下服務(wù)中心提供現(xiàn)場(chǎng)面授以及多種形式的教學(xué)服務(wù),且同步研發(fā)出版最新的課程教材。
課工場(chǎng)為培養(yǎng)互聯(lián)網(wǎng)UI設(shè)計(jì)人才設(shè)立了UI/UE設(shè)計(jì)學(xué)院及線下服務(wù)中心,提供各種學(xué)習(xí)資源和支持,包括:
現(xiàn)場(chǎng)面授課程
在線直播課程
錄播視頻課程
案例素材下載
學(xué)習(xí)交流社區(qū)
作業(yè)提交批改系統(tǒng)
QQ討論組(技術(shù)、就業(yè)、生活)
以上所有資源請(qǐng)?jiān)L問(wèn)課工場(chǎng)UI/UE學(xué)院:kgc.cn/uiue。
■ 本套教材特點(diǎn)
(1)課程高端、實(shí)用——拒絕培養(yǎng)傳統(tǒng)美工。
培養(yǎng)符合“互聯(lián)網(wǎng)+”時(shí)代需求的高端UI設(shè)計(jì)人才,包括移動(dòng)UI設(shè)計(jì)師、網(wǎng)頁(yè)UI設(shè)計(jì)師、平面UI設(shè)計(jì)師。
除UI設(shè)計(jì)師所必須具備的技能外,本課程還涵蓋網(wǎng)絡(luò)營(yíng)銷推廣內(nèi)容,包括:網(wǎng)絡(luò)營(yíng)銷基本常識(shí)、符合SEO標(biāo)準(zhǔn)的網(wǎng)站設(shè)計(jì)、Landing Page設(shè)計(jì)優(yōu)化、營(yíng)銷型企業(yè)網(wǎng)站設(shè)計(jì)等。
注重培養(yǎng)產(chǎn)品意識(shí)和用戶體驗(yàn)意識(shí),包括電商網(wǎng)站設(shè)計(jì)、店鋪設(shè)計(jì)、用戶體驗(yàn)、交互設(shè)計(jì)等。
學(xué)習(xí)W3C相關(guān)標(biāo)準(zhǔn)和設(shè)計(jì)規(guī)范,包括HTML5/CSS3、移動(dòng)端Android/iOS相關(guān)設(shè)計(jì)規(guī)范等內(nèi)容。
(2)真實(shí)商業(yè)項(xiàng)目驅(qū)動(dòng)——行業(yè)知識(shí)、專業(yè)設(shè)計(jì)一個(gè)也不能少。
與知名4A公司合作,設(shè)計(jì)開發(fā)項(xiàng)目課程。
幾十個(gè)實(shí)訓(xùn)項(xiàng)目,涵蓋電商、金融、教育、旅游、游戲等行業(yè)。
不僅注重商業(yè)項(xiàng)目實(shí)訓(xùn)的流程和規(guī)范,還傳遞行業(yè)知識(shí)和業(yè)務(wù)需求。
(3)更時(shí)尚的二維碼學(xué)習(xí)體驗(yàn)——傳統(tǒng)紙質(zhì)教材學(xué)習(xí)方式的革命。
每章提供二維碼掃描,可以直接觀看相關(guān)視頻講解和案例效果。
課工場(chǎng)UI/UE學(xué)院(kgc.cn)開辟教材配套版塊,提供素材下載、學(xué)習(xí)社區(qū)等豐富的在線學(xué)習(xí)資源。
■ 讀者對(duì)象
(1)初學(xué)者:本套教材將幫助你快速進(jìn)入互聯(lián)網(wǎng)UI設(shè)計(jì)行業(yè),從零開始,逐步成長(zhǎng)為專業(yè)UI設(shè)計(jì)師。
(2)設(shè)計(jì)師:本套教材將帶你進(jìn)行全面、系統(tǒng)的互聯(lián)網(wǎng)UI設(shè)計(jì)學(xué)習(xí),傳遞最全面、科學(xué)的設(shè)計(jì)理論,提供實(shí)用的設(shè)計(jì)技巧和項(xiàng)目經(jīng)驗(yàn),幫助你向互聯(lián)網(wǎng)方向迅速轉(zhuǎn)型,拓寬設(shè)計(jì)業(yè)務(wù)范圍。
課工場(chǎng)出品(kgc.cn)
課程設(shè)計(jì)說(shuō)明
關(guān)于引用作品的版權(quán)聲明
初識(shí)HTML5
本章簡(jiǎn)介 2
理論講解 2
1.1 網(wǎng)站開發(fā)流程及網(wǎng)頁(yè)基本結(jié)構(gòu) 2
1.1.1 “互聯(lián)網(wǎng)+”時(shí)代的網(wǎng)站開發(fā)流程 2
1.1.2 網(wǎng)頁(yè)的基本結(jié)構(gòu) 3
1.2 HTML5概述 5
1.2.1 什么是HTML 5
1.2.2 HTML5的優(yōu)勢(shì) 6
1.2.3 HTML5文檔的基本結(jié)構(gòu) 6
1.2.4 HTML5代碼編輯工具 7
1.2.5 網(wǎng)頁(yè)基本信息 9
1.3 基本HTML5標(biāo)簽及網(wǎng)站SEO應(yīng)用 11
1.3.1 標(biāo)題標(biāo)簽 11
1.3.2 段落標(biāo)簽和換行標(biāo)簽 13
1.3.3 圖像標(biāo)簽 14
1.3.4 鏈接標(biāo)簽 16
實(shí)戰(zhàn)案例 23
本章總結(jié) 26
本章作業(yè) 27
HTML5的高級(jí)標(biāo)簽
本章簡(jiǎn)介 30
理論講解 30
2.1 列表 30
2.1.1 列表簡(jiǎn)介 30
2.1.2 列表的分類 31
2.1.3 列表的應(yīng)用 32
2.2 表格 37
2.2.1 為什么使用表格 37
2.2.2 表格的基本結(jié)構(gòu) 38
2.2.3 表格的基本語(yǔ)法 38
2.2.4 表格的對(duì)齊方式 40
2.3 表單 41
2.3.1 表單的內(nèi)容 41
2.3.2 表單標(biāo)簽及其屬性 42
2.3.3 表單元素及格式 44
實(shí)戰(zhàn)案例 56
本章總結(jié) 64
本章作業(yè) 65
CSS3樣式及UI設(shè)計(jì)FAQ
本章簡(jiǎn)介 70
理論講解 70
3.1 百度簡(jiǎn)介 70
3.1.1 CSS3簡(jiǎn)介 71
3.1.2 在Dreamweaver中創(chuàng)建CSS3 71
3.1.3 CSS3樣式 73
3.1.4 字體樣式 76
3.1.5 水平對(duì)齊方式 82
3.1.6 制作百度簡(jiǎn)介頁(yè)面 83
3.2 當(dāng)當(dāng)網(wǎng)首頁(yè) 90
3.2.1 背景顏色 90
3.2.2 背景圖像 91
3.2.3 制作當(dāng)當(dāng)網(wǎng)首頁(yè) 95
實(shí)戰(zhàn)案例 102
本章總結(jié) 105
本章作業(yè) 106
盒子模型及UI設(shè)計(jì)FAQ
本章簡(jiǎn)介 110
理論講解 110
4.1 主題相冊(cè) 110
4.1.1 什么是盒子模型 111
4.1.2 盒子模型屬性 112
4.1.3 盒子模型尺寸 121
4.1.4 制作主題相冊(cè)頁(yè)面 122
4.2 騰訊網(wǎng)站導(dǎo)航 127
4.2.1 標(biāo)準(zhǔn)文檔流 128
4.2.2 display屬性 130
4.2.3 制作騰訊網(wǎng)站導(dǎo)航頁(yè)面 133
實(shí)戰(zhàn)案例 139
本章總結(jié) 148
本章作業(yè) 149
HTML5/CSS3標(biāo)準(zhǔn)化布局
本章簡(jiǎn)介 154
理論講解 154
5.1 CSS3排版觀念 155
5.2 基本的DIV+CSS3布局 157
5.3 自動(dòng)居中的布局 159
5.4 “1-2-1”固定寬度布局 160
5.5 HTML5布局的新方法 163
5.6 制作QQ積分頁(yè)面 165
實(shí)戰(zhàn)案例 169
本章總結(jié) 172
本章作業(yè) 173
列表、定位樣式及UI設(shè)計(jì)FAQ
本章簡(jiǎn)介 176
理論講解 176
6.1 商品分類頁(yè)面 176
6.1.1 list-style-type 177
6.1.2 list-style-image 177
6.1.3 list-style-position 177
6.1.4 list-style 178
6.2 北大青鳥首頁(yè) 179
6.2.1 z-index屬性 180
6.2.2 制作北大青鳥網(wǎng)站下拉列表導(dǎo)航菜單頁(yè)面 182
實(shí)戰(zhàn)案例 185
本章總結(jié) 191
本章作業(yè) 192
網(wǎng)站SEO優(yōu)化及jQuery交互設(shè)計(jì)
本章簡(jiǎn)介 196
理論講解 196
7.1 學(xué)習(xí)任務(wù) 196
7.2 自學(xué)內(nèi)容 197
本章總結(jié) 198
本章作業(yè) 199
- C程序設(shè)計(jì)實(shí)踐教程 [劉衛(wèi)國(guó)]
- C程序設(shè)計(jì)(慕課版) [劉衛(wèi)國(guó)]
- 程序設(shè)計(jì)基礎(chǔ)實(shí)踐教程(C/C++語(yǔ)言版) [張桂芬 葛麗娜]
- C++案例項(xiàng)目精講 [主編 楊國(guó)興]
- SwiftUI完全開發(fā) [李智威 著]
- MySQL數(shù)據(jù)庫(kù)項(xiàng)目式教程 [陳亞峰]
- C語(yǔ)言程序設(shè)計(jì)習(xí)題與實(shí)驗(yàn)指導(dǎo)(第二版) [主編 甄增榮 張賓]
- C語(yǔ)言程序設(shè)計(jì)(第二版) [主編 甄增榮 田云霞]
- Unity3D虛擬現(xiàn)實(shí)應(yīng)用開發(fā)實(shí)踐 [主 編 劉龍]
- Python程序設(shè)計(jì) [主編 姜春磊 陳虹潔]
- C語(yǔ)言程序設(shè)計(jì)實(shí)踐教程(活頁(yè)式) [主編 鄭茵 陳巍 滕泓虬]
- 面向?qū)ο蟪绦蛟O(shè)計(jì) [主編 張勇 張平華 趙小龍]
- Python程序設(shè)計(jì)基礎(chǔ)及實(shí)戰(zhàn) [主編 劉健]
- C語(yǔ)言程序設(shè)計(jì) [姜雪]
- Python程序設(shè)計(jì)實(shí)踐教程 [王鶴琴 蔡正保]
- C++程序設(shè)計(jì)實(shí)踐教程(第三版) [主編 劉衛(wèi)國(guó) 曹岳輝]
- C++程序設(shè)計(jì)(第三版) [主編 曹岳輝 劉衛(wèi)國(guó)]
- C語(yǔ)言程序設(shè)計(jì)項(xiàng)目化教程(活頁(yè)式) [主編 張利華 潘曉利]
- 機(jī)器人流程自動(dòng)化(RPA)實(shí)戰(zhàn)——基于UiPath [主編 金鑫]
- Python 語(yǔ)言程序設(shè)計(jì)實(shí)踐指導(dǎo) [主編 張雙獅]
- Python程序設(shè)計(jì)案例教程 [主編 毛錦庚 鐘肖英 周賢來(lái) ]
- 基于.NET Core框架的分布式系統(tǒng)架構(gòu)設(shè)計(jì) [湯佳 著]
- Python語(yǔ)言程序設(shè)計(jì)教程 [郭其標(biāo) 房宜汕]
- Python程序設(shè)計(jì) [李國(guó)燕 王新強(qiáng) 劉佳 等編著]
- Python程序設(shè)計(jì)項(xiàng)目化教程(活頁(yè)式) [主編 盧鳳偉]
- Java編程基礎(chǔ)案例式教程 [主編 陳艷華 唐春蘭]
- Python語(yǔ)言同步案例習(xí)題精解 [主編 肖朝暉]
- Web用戶界面設(shè)計(jì)與制作 [主編 趙娟]
- Unity應(yīng)用開發(fā)與實(shí)戰(zhàn)(微課版) [主 編 程永恒]
- PHP程序設(shè)計(jì)項(xiàng)目化教程 [主 編 杜海穎]
- 生活經(jīng)管more>>
- 移動(dòng)端UI設(shè)計(jì)及規(guī)范——分分鐘搞定App
- 用戶體驗(yàn)及Axure交互設(shè)計(jì)——不懂交互
- 網(wǎng)站配色與布局——好網(wǎng)站,要出“彩”
- HTML5+CSS3前端技術(shù)——UI設(shè)計(jì)師與開發(fā)
- Photoshop入門到創(chuàng)意——UI設(shè)計(jì)師成長(zhǎng)
- Illustrator入門及商業(yè)廣告設(shè)計(jì)——UI
- 網(wǎng)站UI商業(yè)項(xiàng)目實(shí)戰(zhàn)——令人驚叫的網(wǎng)頁(yè)
- 移動(dòng)端UI商業(yè)項(xiàng)目實(shí)戰(zhàn)——讓人愛不釋手