本書(shū)全面系統(tǒng)地講解了網(wǎng)頁(yè)設(shè)計(jì)與制作的相關(guān)知識(shí),全書(shū)共有15章,系統(tǒng)地講述了網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)、Dreamweaver CC基礎(chǔ)、頁(yè)面與文本、圖像和多媒體、超鏈接、表格、CSS樣式、CSS+Div布局、行為、模板和庫(kù)、HTML5和彈性布局、表單和jQuery UI、jQuery Mobile、動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)以及綜合實(shí)訓(xùn)等內(nèi)容。
本書(shū)以知識(shí)體系的構(gòu)建為線索,以課堂案例為載體,通過(guò)知識(shí)講解和案例實(shí)際操作,學(xué)生可以快速掌握網(wǎng)頁(yè)創(chuàng)意、設(shè)計(jì)和制作的方法技巧。練習(xí)案例幫助學(xué)生鞏固和擴(kuò)展相關(guān)的知識(shí)和技能,綜合實(shí)訓(xùn)幫助學(xué)生理解和掌握網(wǎng)站制作的方法和流程。
本書(shū)既可以作為藝術(shù)類本科生或文科本科生網(wǎng)頁(yè)設(shè)計(jì)課程的教材,也可以作為網(wǎng)頁(yè)設(shè)計(jì)培訓(xùn)教材或自學(xué)人員的參考書(shū)籍。
1.本書(shū)針對(duì)CC版本進(jìn)行全面升級(jí)
2.本書(shū)搭配全套微課視頻,讀者掃描書(shū)中二維碼,即可觀看,幫助讀者理解相關(guān)知識(shí)
3.本書(shū)贈(zèng)送全部配套素材、案例效果、PPT課件,輔助教師課堂教學(xué)
修毅 主要教學(xué)項(xiàng)目: 1. “網(wǎng)頁(yè)設(shè)計(jì)”精品課,校級(jí)精品課程建設(shè)項(xiàng)目,2012.05-2014.0,項(xiàng)目主持人 2. 藝術(shù)類本科生web網(wǎng)頁(yè)設(shè)計(jì)類課程體系構(gòu)建及教學(xué)模式研究,校級(jí)教育教學(xué)改革一般項(xiàng)目,2012.05-2013.04,項(xiàng)目主持人 3. 計(jì)算機(jī)公共課教學(xué)模式、方法及手段的創(chuàng)新研究,校級(jí)教育教學(xué)改革重點(diǎn)項(xiàng)目 ,2009.01-2010.12,排名次序2
第 1章 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)
1.1互聯(lián)網(wǎng)基礎(chǔ)
1.1.1 Internet與Web服務(wù)
1.1.2 URL路徑
1.1.3服務(wù)器與客戶機(jī)
1.1.4互聯(lián)網(wǎng)數(shù)據(jù)中心
1.2網(wǎng)頁(yè)設(shè)計(jì)知識(shí)
1.2.1色彩
1.2.2網(wǎng)頁(yè)設(shè)計(jì)元素
1.2.3頁(yè)面布局
1.3網(wǎng)頁(yè)標(biāo)準(zhǔn)化技術(shù)
1.3.1結(jié)構(gòu)化語(yǔ)言
1.3.2 CSS樣式
1.3.3腳本語(yǔ)言
1.3.4 PHP技術(shù)
1.4 前端UI框架技術(shù)
1.4.1 Bootstrap框架
1.4.2 MUI框架
1.5 網(wǎng)站制作流程
1.5.1前期準(zhǔn)備工作
1.5.2方案實(shí)施
1.5.3后期工作
1.6 HTML語(yǔ)言
1.6.1文件結(jié)構(gòu)標(biāo)簽
1.6.2表格標(biāo)簽
1.6.3文本段落標(biāo)簽
1.6.4圖像標(biāo)簽
1.6.5鏈接標(biāo)簽
1.6.6塊標(biāo)簽
1.6.7表單標(biāo)簽
第 2章 Dreamweaver CC基礎(chǔ)
2.1 Dreamweaver CC工作界面
2.1.1工作環(huán)境
2.1.2工作區(qū)布局
2.1.3多文檔的編輯界面
2.2創(chuàng)建網(wǎng)站站點(diǎn)
2.2.1創(chuàng)建新站點(diǎn)
2.2.2新建和保存網(wǎng)頁(yè)
2.2.3 管理站點(diǎn)文件和文件夾
2.2.4課堂案例—慈善救助中心
2.3 管理站點(diǎn)
2.3.1打開(kāi)站點(diǎn)
2.3.2編輯站點(diǎn)
2.3.3復(fù)制站點(diǎn)
2.3.4刪除站點(diǎn)
2.4網(wǎng)頁(yè)文檔頭部信息設(shè)置
2.4.1插入搜索關(guān)鍵字
2.4.2設(shè)置描述信息
2.4.3插入版權(quán)信息
2.4.4設(shè)置刷新時(shí)間
第3章 頁(yè)面與文本
3.1頁(yè)面屬性
3.1.1課堂案例—香格里灣峰會(huì)
3.1.2網(wǎng)頁(yè)的標(biāo)題
3.1.3文本分段與換行
3.1.4輸入空格
3.1.5頁(yè)面文字屬性
3.1.6 顯示不可見(jiàn)元素
3.1.7 設(shè)置頁(yè)邊距
3.1.8背景屬性
3.1.9跟蹤圖像
3.2文本屬性
3.2.1課堂案例—百貨公司
3.2.2設(shè)置文本屬性
3.2.3文本段落
3.2.4 插入日期
3.2.5插入特殊字符
3.3 項(xiàng)目列表和編號(hào)列表
3.3.1課堂案例—咨詢網(wǎng)站
3.3.2設(shè)置項(xiàng)目列表或編號(hào)列表
3.4練習(xí)案例
3.4.1練習(xí)案例—大學(xué)生國(guó)際電影節(jié)
3.4.2練習(xí)案例—移動(dòng)銀行網(wǎng)站
3.4.3練習(xí)案例—化妝品網(wǎng)站
第4章 圖像和多媒體
4.1插入圖像
4.1.1課堂案例—茶葉網(wǎng)站
4.1.2插入圖像
4.1.3圖像源文件
4.1.4 圖像寬度和高度
4.1.5替換文本
4.1.6圖像編輯
4.2網(wǎng)頁(yè)中的多媒體
4.2.1課堂案例—度假村
4.2.2插入Flash動(dòng)畫
4.2.3插入Flash 視頻
4.2.4插入插件—瑜伽會(huì)所
4.2.5 插入插件
4.3 HTML5網(wǎng)頁(yè)多媒體
4.3.1課堂案例—米克音樂(lè)
4.3.2插入HTML5 Video元素
4.3.3插入HTML5 Audio元素
4.4練習(xí)案例
4.4.1練習(xí)案例—五金機(jī)械
4.4.2練習(xí)案例—心緣咖啡屋
4.4.3練習(xí)案例—古典音樂(lè)網(wǎng)
第5章 超鏈接
5.1超鏈接的概念與路徑知識(shí)
5.1.1按超鏈接端點(diǎn)分類
5.1.2按超鏈接路徑分類
5.2文本超鏈接
5.2.1課堂案例—婚禮公司
5.2.2創(chuàng)建文本鏈接
5.2.3頁(yè)面文本鏈接狀態(tài)
5.2.4下載文件鏈接
5.2.5電子郵件鏈接
5.2.6空鏈接
5.3圖像超鏈接
5.3.1課堂案例—手機(jī)商城
5.3.2創(chuàng)建圖像超鏈接
5.3.3鼠標(biāo)經(jīng)過(guò)圖像鏈接
5.4熱點(diǎn)鏈接
5.4.1課堂案例—兒童課堂
5.4.2創(chuàng)建熱點(diǎn)鏈接
5.5錨點(diǎn)超鏈接
5.5.1課堂案例—數(shù)碼商城
5.5.2創(chuàng)建錨點(diǎn)鏈接
5.6鏈接管理
5.6.1課堂案例—百適易得商城
5.6.2 自動(dòng)更新鏈接
5.6.3鏈接檢查
5.6.4 修復(fù)鏈接
5.7練習(xí)案例
5.7.1練習(xí)案例—室內(nèi)設(shè)計(jì)網(wǎng)
5.7.2練習(xí)案例—多美味餐廳
5.7.3練習(xí)案例—生物科普網(wǎng)
第6章 表格
6.1表格的簡(jiǎn)單操作
6.1.1表格的組成
6.1.2插入表格
6.1.3表格屬性
6.1.4表格單元格屬性
6.1.5在表格中插入內(nèi)容
6.1.6選擇表格元素
6.1.7合并和拆分單元格
6.2簡(jiǎn)單表格的排版
6.2.1課堂案例—融通室內(nèi)裝飾
6.2.2復(fù)制和粘貼表格
6.2.3刪除表格和清除表格內(nèi)容
6.2.4增加或減少表格的行和列
6.3復(fù)雜表格的排版
6.3.1課堂案例—江雨橋博客
6.3.2表格的嵌套
6.3.3單元格與表格背景
6.4表格的其他應(yīng)用
6.4.1課堂案例—遠(yuǎn)景苑小區(qū)
6.4.2 細(xì)線表格和帶狀表格
6.4.2 表格排序
6.5練習(xí)案例
6.5.1練習(xí)案例—愛(ài)麗絲家具
6.5.2練習(xí)案例—逸購(gòu)鮮花速遞網(wǎng)
第7章 CSS樣式
7.1 CSS樣式
7.1.1 CSS樣式標(biāo)準(zhǔn)
7.1.2 CSS樣式構(gòu)造規(guī)則
7.1.3 CSS樣式種類
7.1.4 CSS樣式應(yīng)用范圍
7.2 CSS樣式設(shè)計(jì)器
7.2.1 CSS 樣式選擇器
7.2.2課堂案例—美好攝影
7.2.3 CSS樣式的使用
7.2.4 CSS樣式的編輯
7.3 CSS屬性
7.3.1課堂案例—走進(jìn)臺(tái)灣
7.3.2用
和- 創(chuàng)建導(dǎo)航條
7.3.3布局
7.3.4文字
7.3.5邊框
7.3.6背景
7.4 CSS過(guò)渡效果
7.4.1 CSS樣式私有屬性
7.4.2課堂案例—墻體裝飾
7.4.3 CSS過(guò)渡屬性
7.5 CSS動(dòng)畫
7.5.1課堂案例—校園統(tǒng)一認(rèn)證
7.5.2 animation屬性和@keyframes規(guī)則
7.6練習(xí)案例
7.6.1練習(xí)案例—航空旅游
7.6.2練習(xí)案例—狗狗俱樂(lè)部
7.6.3練習(xí)案例—養(yǎng)生美容
第8章 CSS+Div布局
8.1盒子模型
8.1.1盒子結(jié)構(gòu)
8.1.2盒子屬性
8.2布局方法
8.2.1 標(biāo)簽
8.2.2 position定位屬性
8.2.3 浮動(dòng)方式
8.3“上中下”布局
8.3.1課堂案例—網(wǎng)頁(yè)設(shè)計(jì)大賽
8.3.2在Dreamweaver中插入標(biāo)簽
8.4“左中右”布局
8.4.1課堂案例—連鎖餐廳
8.4.2使用CSS樣式布局
8.5練習(xí)案例
8.5.1練習(xí)案例—電子產(chǎn)品
8.5.2練習(xí)案例—裝修公司
第9章 行為
9.1行為簡(jiǎn)介
9.1.1事件
9.1.2 動(dòng)作
9.1.3行為面板
9.2制作圖像特效
9.2.1課堂案例—吉太美食
9.2.2交換圖像
9.2.3顯示-隱藏元素
9.3 改變屬性
9.3.1課堂案例—綠野網(wǎng)站建設(shè)
9.3.2 改變屬性
9.4啟用瀏覽器窗口
9.4.1課堂案例—兒童攝影
9.4.2打開(kāi)瀏覽器窗口
9.4.3轉(zhuǎn)到URL
9.5效果行為
9.5.1課堂案例—藝術(shù)畫廊
9.5.2 Blind、Clip、Slide、Fold
9.5.3 Fade、Highlight、Drop
9.5.4 Puff、Scale
9.5.5 Bounce、Pulsate、Shake
9.6 JavaScript代碼
9.7練習(xí)案例
9.7.1練習(xí)案例—甜品飲料吧
9.7.2練習(xí)案例—信息中心
9.7.3練習(xí)案例—我們愛(ài)貓網(wǎng)
第 10章 模板和庫(kù)
10.1模板
10.1.1課堂案例—花仙子園藝
10.1.2創(chuàng)建模板
10.1.3定義可編輯區(qū)域
10.1.4定義可編輯重復(fù)區(qū)域
10.1.5創(chuàng)建基于模板的網(wǎng)頁(yè)
10.1.6管理模板
10.2庫(kù)
10.2.1課堂案例—時(shí)尚女性網(wǎng)
10.2.2創(chuàng)建庫(kù)項(xiàng)目
10.2.3向頁(yè)面添加庫(kù)項(xiàng)目
10.2.4更新庫(kù)項(xiàng)目文件
10.3練習(xí)案例
10.3.1練習(xí)案例—旗袍文化
10.3.2練習(xí)案例—恒生國(guó)際老年公寓
第 11章 HTML5和彈性布局
11.1 HTML5概述
11.1.1 HTML5簡(jiǎn)介
11.1.2 HTML5特性
11.2 HTML5布局
11.2.1 HTML5結(jié)構(gòu)標(biāo)簽
11.2.2課堂案例—在線課堂
11.3 彈性盒子布局
11.3.1彈性盒子概念
11.3.2 彈性容器屬性
11.3.3 彈性容器項(xiàng)目屬性
11.3.4 課堂案例—尚品家居
11.4 媒體查詢應(yīng)用
11.4.1 媒體查詢
11.4.2 課堂案例—健康大步走
11.5練習(xí)案例
11.5.1練習(xí)案例—優(yōu)勝企業(yè)網(wǎng)站
11.5.2練習(xí)案例—雅派服飾
第 12章 表單和jQuery UI
12.1使用表單
12.1.1課堂案例—網(wǎng)頁(yè)設(shè)計(jì)
12.1.2表單及屬性
12.1.3文本元素
12.1.4單選按鈕和單選按鈕組
12.1.5復(fù)選框和復(fù)選框組
12.1.6選擇
12.1.7文件元素
12.1.8按鈕
12.1.9 HTML5表單元素
12.2 jQuery UI
12.2.1課堂案例—?jiǎng)?chuàng)意家居
12.2.2折疊面板Accordion
12.2.3選項(xiàng)卡Tabs
12.2.4日期選擇器Datepicker
12.2.5對(duì)話框Dialoge
12.3練習(xí)案例
12.3.1練習(xí)案例—咖啡餐廳
12.3.2練習(xí)案例—網(wǎng)上生活超市
第 13章 jQuery Mobile
13.1 jQuery Mobile概述
13.1.1 jQuery Mobile簡(jiǎn)介
13.1.2jQuery Mobile框架
13.1.3 Data- 屬性
13.1.4 jQuery Mobile樣式
13.2使用jQuery Mobile
13.2.1課堂案例—服裝定制I
13.2.2 jQuery Mobile頁(yè)面
13.2.3 jQuery Mobile 列表視圖
13.2.4 jQuery Mobile 布局網(wǎng)格
13.2.5 jQuery Mobile 可折疊區(qū)塊
13.2.6 jQuery Mobile 表單
13.3 jQuery Mobile應(yīng)用
13.3.1 jQuery Mobile版本
13.3.2 面板Pannel
13.3.3 彈窗Popup
13.3.4課堂案例—服裝定制II
13.3.5視口viewport
13.3.6 自定義jQuery Mobile主題
13.3.7 打包jQuery Mobile應(yīng)用
13.4練習(xí)案例
13.4.1練習(xí)案例—男人會(huì)裝I
13.4.2練習(xí)案例—男人會(huì)裝II
第 14章 動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)
14.1動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)概述
14.2開(kāi)發(fā)環(huán)境設(shè)置
14.2.1安裝WAMP
14.2.2設(shè)置WAMP
14.3數(shù)據(jù)庫(kù)設(shè)計(jì)
14.3.1 MySQL數(shù)據(jù)庫(kù)
14.3.2 使用phpMyAdmin創(chuàng)建數(shù)據(jù)庫(kù)
14.4在Dreamweaver中創(chuàng)建PHP環(huán)境
14.4.1建立動(dòng)態(tài)站點(diǎn)
14.4.2創(chuàng)建數(shù)據(jù)庫(kù)連接
14.5數(shù)據(jù)庫(kù)使用
14.5.1定義記錄集
14.5.2數(shù)據(jù)綁定
14.5.3添加服務(wù)器行為
14.6課堂案例—美容美發(fā)
14.6.1設(shè)計(jì)數(shù)據(jù)庫(kù)
14.6.2創(chuàng)建動(dòng)態(tài)站點(diǎn)
14.6.3創(chuàng)建數(shù)據(jù)庫(kù)連接
14.6.4發(fā)表留言頁(yè)面
14.6.5留言詳細(xì)內(nèi)容頁(yè)面
14.6.6留言列表頁(yè)面
14.7練習(xí)案例—電子商務(wù)
第 15章 綜合實(shí)訓(xùn)
15.1網(wǎng)站規(guī)劃
15.2網(wǎng)站設(shè)計(jì)
15.2.1網(wǎng)站標(biāo)識(shí)logo設(shè)計(jì)
15.2.2 banner設(shè)計(jì)
15.2.3頁(yè)面設(shè)計(jì)
15.3主頁(yè)制作
15.3.1主頁(yè)面切圖
15.3.2前期工作
15.3.3主頁(yè)布局分析
15.3.4 header區(qū)域制作
15.3.5導(dǎo)航欄區(qū)域制作
15.3.6 banner區(qū)域制作
15.3.7內(nèi)容區(qū)域制作
15.3.8 footer區(qū)域制作
15.4子頁(yè)面制作
15.4.1 家園簡(jiǎn)介子頁(yè)面切圖
15.4.2 制作子頁(yè)面模板
15.4.3 新建家園簡(jiǎn)介子頁(yè)面
15.5其他子頁(yè)面制作
15.6頁(yè)面超鏈接設(shè)置