Web界面设计与制作PDF电子书下载

查看更多关于的内容

项目一 知识储备——Web界面设计规范 1

1.1 网页尺寸规范 1

知识1：网页宽度 1

知识2：网页第一屏最大可视区域 1

知识3：主流浏览器的界面参数 2

知识4：网页浏览设备分辨率统计 2

1.2 设计命名规范 2

知识1：页面基本框架结构 2

知识2：命名规则注意点 2

知识3：常用命名汇总 2

知识4：图片命名规则 3

1.3 字体规范 3

知识1：文字大小 3

知识2：文字颜色 4

知识3：文字行距 5

知识4：英文字体的使用 5

知识5：文字链接 5

1.4 Web界面设计基本原则 6

知识1：以用户为中心的设计原则 6

知识2：一致性原则 6

知识3：简洁与明确原则 7

知识4：体现特色的原则 8

知识5：兼顾不同浏览器的原则 9

知识6：明确的导航设计的原则 9

项目二 Web界面设计色彩搭配 12

2.1 色彩的基本认知 12

2.1.1 知识储备 12

知识1：色彩的产生 12

知识2：光源色与物体色 13

知识3：色彩的属性 13

知识4：主色、背景色、辅助色、点缀色的关系 14

知识5：Web安全色 16

2.1.2 任务实训——绘制PS色轮图 16

2.2 色彩情感在Web界面中的应用 20

2.2.1 知识储备 20

知识1：色彩的冷暖 20

知识2：色彩的软硬 21

知识3：色彩的轻重 21

知识4：色彩的大小 21

知识5：华丽感与质朴感 22

知识6：宁静感与兴奋感 22

知识7：活力感与庄重感 23

2.2.2 任务实训——清新网站主页色彩设计搭配 23

2.3 Web界面色彩配色技巧 25

2.3.1 知识储备 25

知识1：配色原则 25

知识2：配色技巧 28

知识3：根据行业选择网页配色 30

知识4：根据浏览者色彩偏好选择网页配色 31

知识5：根据色彩联想选择网页配色 32

知识6：根据商品销售阶段选择网页配色 32

2.3.2 任务实训——旅游公司网站首页 34

2.4 综合实例——电商网页界面色彩设计 37

2.4.1 成果预期 37

2.4.2 过程实施 37

项目三 使用Photoshop设计制作Web界面 40

3.1 网页Logo设计制作 40

3.1.1 知识储备 40

知识1：Logo的特性 40

知识2：网站Logo的表现形式 40

知识3：Photoshop中移动和复制当前层或选区图像技巧 41

知识4：Photoshop形状工具使用技巧 42

3.1.2 任务实训——百度云Logo制作 42

3.2 网页Banner设计制作 45

3.2.1 知识储备 45

知识1：认识Banner 45

知识2：Banner的优势 46

知识3：Photoshop中的文字类型 46

知识4：创建文字 46

知识5：文字编辑中使用到的面板功能 46

知识6：选区图像的自由变形 47

3.2.2 任务实训——京东网页Banner设计制作 47

3.3 网页导航栏设计制作 52

3.3.1 知识储备 52

知识1：认识导航条 52

知识2：网页导航作用 52

知识3：网页中导航的形式 52

知识4：标尺、辅助线的使用 53

知识5：图层样式 53

知识6：投影和内阴影的区别 54

知识7：定义图案 55

3.3.2 任务实训——女装网站导航条制作 56

3.4 综合实例——艾尔之光游戏网站首页设计制作 59

3.4.1 成果预期 59

3.4.2 过程实施 60

项目四 使用Flash设计制作Web界面 71

4.1 制作网页标志元素 71

4.1.1 知识储备 71

知识1：Flash基本介绍 71

知识2：Flash动画的特点 71

知识3：Flash在网页中的应用 72

4.1.2 任务实训——制作网站动态Logo和Banner动画 72

4.2 设置网页交互动画 74

4.2.1 知识储备 74

知识1：脚本动画制作 74

知识2：ActionScript语言基础 74

4.2.2 任务实训——声音播放控制按钮的制作 75

4.3 导入多媒体素材元件 78

4.3.1 知识储备 78

知识1：音频素材的导入 78

知识2：视频文件的导入 78

4.3.2 任务实训——制作影音库 78

4.4 综合实例——网页广告的制作 79

4.4.1 成果预期 79

4.4.2 过程实施 79

项目五 使用Dreamweaver排版网页 82

5.1 创建本地站点 82

5.1.1 知识储备 82

知识1：认识Dreamweaver CS6界面 82

知识2：站点的创建与设置 84

知识3：站点文件管理 85

5.1.2 任务实训——创建并设置站点 89

5.2 Dreamweaver静态网页的制作 91

5.2.1 知识储备 91

知识1：实现网页中文本的添加与设置操作 91

知识2：实现网页中添加图像的操作 94

知识3：实现在网页中添加超链接的操作 96

5.2.2 任务实训——制作蛋糕店网页 97

5.3 用表格排版网页 100

5.3.1 知识储备 100

知识1：插入表格 100

知识2：表格的基本操作 101

知识3：表格的其他功能 103

5.3.2 任务实训——运用表格制作网站开发页面 105

5.4 网页中表单的使用 106

5.4.1 知识储备 106

知识1：认识表单 106

知识2：创建表单 107

5.4.2 任务实训——创建花店网站用户调查表 111

5.5 综合实例——旅游网站网页的制作 112

5.5.1 成果预期 112

5.5.2 过程实施 112

项目六 使用HTML辅助Dreamweaver设计制作网页元素 114

6.1 制作W3C标准的HTML 5.0网页 114

6.1.1 知识储备 114

知识1：HTML概述 114

知识2：HTML 5.0的优势 115

知识3：元素、标记和属性 115

知识4：HTML文档的基本结构 116

6.1.2 任务实训——制作W3C标准的HTML 5.0网页 117

6.2 图文并茂的房屋装饰效果图网页 118

6.2.1 知识储备 118

知识1：插入图像 118

知识2：文字 119

6.2.2 任务实训——图文并茂的房屋装饰效果图网页 121

6.3 综合实例——制作百度首页 123

6.3.1 成果预期 123

6.3.2 过程实施 123

项目七 使用DIV+CSS优化网页布局 124

7.1 CSS样式文件的引入 124

7.1.1 知识储备 124

知识1：CSS样式语法 124

知识2：CSS样式引入 124

知识3：CSS选择器 126

7.1.2 任务实训——在网页中添加CSS样式 127

7.2 网页常用的样式实现 129

7.2.1 知识储备 129

知识1：文字样式属性 129

知识2：文本样式属性 129

知识3：链接样式属性 130

知识4：列表样式属性 131

知识5：表格样式属性 131

7.2.2 任务实训——实现网页Logo文字设计效果 133

7.3 DIV+CSS进行网页布局 134

7.3.1 知识储备 134

知识1：CSS盒子模型 134

知识2：CSS定位 135

知识3：浮动和清除浮动 137

知识4：DIV+CSS实现网页布局 140

7.3.2 任务实训——实现“爱上鲜花网”首页的设计布局 141

7.4 综合实例——花店网站首页的设计制作 143

7.4.1 成果预期 143

7.4.2 过程实施 143

项目八 使用JavaScript实现网页动态效果 147

8.1 JavaScript基础语法 147

8.1.1 知识储备 147

知识1：JavaScript导入HTML页面 147

知识2：JavaScript变量和类型 148

知识3：JavaScript函数 149

知识4：JavaScript选择和循环 149

8.1.2 任务实训——判断用户输入年龄是否合法 151

8.2 JavaScript内置对象 152

8.2.1 知识储备 152

知识1：字符串对象String 152

知识2：日期对象Date 153

知识3：数组Array对象 154

知识4：Math和Number对象 155

知识5：JavaScript全局对象 156

8.2.2 任务实训——实现上传图片格式验证 156

8.3 JavaScript浏览器对象模型BOM 158

8.3.1 知识储备 158

知识1：窗口Window对象 158

知识2：浏览器Navigator对象 159

知识3：屏幕Screen对象 160

知识4：浏览历史History和地址Location对象 160

8.3.2 任务实训——实现网页在线电子时钟 162

8.4 JavaScript中的文档对象模型DOM 163

8.4.1 知识储备 163

知识1：文档对象模型DOM节点树 163

知识2：节点模型属性和方法 164

知识3：DOM与事件 166

8.4.2 任务实训——实现网页风格切换效果 167

8.5 综合案例——JavaScript实现网站首页轮播图效果 168

8.5.1 成果预期 168

8.5.2 过程实施 168

查看更多关于的内容