图书简介:
子项目1 网站建设基础知识与整体流程 1
项目任务1.1 了解网站建设的基础知识 1
1.1.1 认识网页和网站 2
1.1.2 了解网页制作技术 3
1.1.3 了解网页制作常用工具 4
1.1.4 编写第一个网页 10
项目任务1.2 熟悉网站建设的整体流程 11
1.2.1 网站前期策划 12
1.2.2 制作裁切网站设计稿 16
1.2.3 规划与建立站点 16
1.2.4 实现网页结构 17
1.2.5 使用CSS样式美化首页 17
1.2.6 创建并应用网页模板 17
1.2.7 测试与发布网站 17
1.2.8 更新与维护网站 18
1.2.9 网站项目总结 18
1.3 小结 18
子项目2 “我的E站”前期策划 19
项目任务2.1 “我的E站”项目立项 19
2.1.1 分析“我的E站”需求说明书 20
2.1.2 组建项目团队 20
项目任务2.2 撰写“我的E站”项目策划书 21
2.2.1 分析确定网站逻辑结构图 22
2.2.2 设计网站界面原型 22
2.2.3 撰写项目策划书 26
2.3 小结 28
子项目3 “我的E站”前期准备 29
项目任务3.1 设计网站LOGO 29
3.1.1 LOGO设计思想与设计原则 30
3.1.2 网站常用图片格式 31
3.1.3 制作“我的E站”LOGO 32
项目任务3.2 加工图像素材 36
3.2.1 批量处理图像 39
3.2.2 去除图片水印 41
3.2.3 调整图像属性 41
3.2.4 美化加工图像 43
3.2.5 应用特殊文字 46
项目任务3.3 设计制作网站界面 48
3.3.1 设置页面大小 49
3.3.2 规划首页内容并设计版式 50
3.3.3 确定配色方案 50
3.3.4 制作网站首页效果图 52
3.3.5 制作网站子页效果图 64
项目任务3.4 裁切网站设计稿 68
3.4.1 切片的原则 70
3.4.2 创建首页切片 70
3.4.3 编辑首页切片 73
3.4.4 命名首页切片 74
3.4.5 导出首页切片 74
3.4.6 裁切子页设计稿 75
项目任务3.5 制作网站中的动画 77
3.5.1 Flash基本概念 77
3.5.2 Flash基本操作 80
3.5.3 Flash基本动画形式 83
3.5.4 制作网站首页banner 88
3.6 小结 93
3.7 技能训练 93
3.7.1 裁切网站设计稿 93
3.7.2 Flash动画设计 94
3.7.3 Flash交互界面开发 99
子项目4 实现网页布局 105
项目任务4.1 创建本地站点 105
4.1.1 规划目录结构 105
4.1.2 熟悉Dreamweaver工作区并新建本地站点 106
4.1.3 管理本地站点 108
4.1.4 HTML基本概念及结构 110
项目任务4.2 一列固定宽度布局 113
4.2.1 插入Div标签 114
4.2.2 样式表种类和CSS选择器 115
4.2.3 在页面中引入CSS样式表 117
4.2.4 CSS样式代码编写规则 118
4.2.5 CSS盒模型 121
项目任务4.3 一列多行固定宽度居中布局 127
4.3.1 一列固定宽度居中布局 128
4.3.2 一列多行固定宽度居中布局 129
项目任务4.4 多列多行固定宽度居中布局 130
4.4.1 DOM树 132
4.4.2 CSS盒子在标准流中的定位 133
4.4.3 CSS盒子浮动方式 133
4.4.4 二列固定宽度居中布局 135
4.4.5 二列多行固定宽度居中布局 135
4.4.6 清除浮动属性 136
4.4.7 三列固定宽度居中布局 137
4.4.8 三列多行固定宽度居中布局 137
项目任务4.5 “我的E站”页面布局 138
4.5.1 “我的E站”子页布局 139
4.5.2 “我的E站”首页布局 143
4.6 小结 150
4.7 技能训练 150
4.7.1 建立站点 150
4.7.2 编写HTML代码结构 150
子项目5 添加和美化网页内容 151
项目任务5.1 “我的E站”子页制作 151
5.1.1 文本图像及样式 152
5.1.2 列表及样式 160
5.1.3 超链接及样式 163
5.1.4 背景样式 166
5.1.5 “关于我们”头部制作 169
5.1.6 “E站日记”列表制作 170
5.1.7 表格及样式 171
项目任务5.2 “我的E站”首页制作 178
5.2.1 头部制作 179
5.2.2 banner制作 180
5.2.3 中部制作 186
5.2.4 其他信息制作 188
5.2.5 底部制作 190
5.3 小结 192
5.4 技能训练 192
5.4.1 使用CSS布局技术完成网页 192
5.4.2 使用列表和CSS制作菜单 193
子项目6 网页模板及多媒体应用 194
项目任务6.1 创建并应用网页模板 194
6.1.1 创建模板 194
6.1.2 制作模板页面 196
6.1.3 插入或删除可编辑区域 200
6.1.4 应用模板 201
项目任务6.2 添加多媒体元素 204
6.2.1 插入多媒体元素 205
6.2.2 应用行为 208
6.2.3 运用JavaScript实现banner效果 210
6.3 小结 211
6.4 技能训练 212
子项目7 “我的E站”测试与发布 213
项目任务7.1 常见浏览器兼容问题及解决方案 213
7.1.1 网页中的标签问题 213
7.1.2 div的垂直居中问题 214
7.1.3 margin加倍的问题 215
7.1.4 浮动IE产生的双倍距离 216
7.1.5 宽度和高度问题 217
7.1.6 DIV浮动IE文本产生3像素的BUG 220
7.1.7 float清除浮动 220
7.1.8 图片间有空白间隙问题 224
7.1.9 不同浏览器对实际像素的解释 225
7.1.10 应用条件注释实现浏览器兼容 225
7.1.11 常用hack方法兼容介绍 226
项目任务7.2 站点的测试与调试 227
7.2.1 检查站点范围的链接 227
7.2.2 改变站点范围的链接 228
7.2.3 清理HTML 228
7.2.4 清理Word生成的HTML 229
7.2.5 同步 229
7.2.6 生成辅助功能报告 230
7.2.7 站点测试指南 230
项目任务7.3 网站的发布 231
7.3.1 申请域名 231
7.3.2 申请空间 235
7.3.3 站点的上传 238
7.4 小结 240
7.5 技能训练 240
子项目8 网站的宣传推广与维护 241
项目任务8.1 网站宣传推广 241
8.1.1 常见网站推广方式 242
8.1.2 网站推广步骤 249
8.1.3 搜索引擎优化工具 250
项目任务8.2 网站维护 252
8.2.1 网站维护的重要性 252
8.2.2 网站维护的基本内容 253
8.3 小结 254
子项目9 “我的E站”项目总结 255
项目任务9.1 文档的书写与整理 255
项目任务9.2 网站展示、交流与评价 257
9.3 小结 259
子项目10 将页面移植到移动设备 260
项目任务10.1 将“我的E站” 页面 转为响应式 设计 260
10.1.1 响应式设计概述 262
10.1.2 移动化“关于我们”页面 264
项目任务10.2 Bootstrap框架介绍 266
10.2.1 Bootstrap框架 简介 267
10.2.2 下载Bootstrap 框架 268
10.2.3 Bootstrap框架文件结构 269
10.2.4 HTML标准模板 269
10.2.5 响应式的栅格系统 270
10.2.6 基于Bootstrap框架的首页制作 271
10.3 小结 275
附录A 常用工具、插件及用户 手册 276
附录B 网站制作规范 277
参考文献 280
展开
前端开发工程师、前端设计师、前端架构师和用户体验设计师等新兴职业的出现,为网站前端设计和开发领域注入了新的生命和活力。随着用户对应用体验的要求越来越高,前端领域面临的挑战越来越大,问题也越来越突出。其中最突出的问题便是缺少复合型的前端人才。从知识体系上讲,复合型的前端人才需要掌握和了解的知识非常之多,甚至可以用“庞杂”二字来形容。这导致一名出色的前端开发人才需要很长的时间来成长,因此行业对此类人才的需求极其迫切。前端开发人才的从业前景较好。
本书是一本注重综合能力提升的整合式书籍,将Dreamweaver、Photoshop、Flash等多个实用软件的应用贯穿于项目开发过程中,有助于培养学生的解决问题能力、工具选择和使用能力。本书以职业活动为导向,以企业的经典网站为项目,将学生引入网站设计职业岗位,再通过完成小型实际商业网站的开发制作,使学生完成从需求分析、整体设计、站点创建与设置、网页设计制作、网站调试、网站推广到文档书写的完整过程。本书重在岗位技能训练,与职业资格、技能证书挂钩,加入大量技能训练题目,学生学完可直接考证,为初次就业打下基础。同时本书又将HTML、CSS、响应式设计等必要的专业知识传授给学生,为学生的后续学习和发展打好基础。
全书按照网站开发流程将“我的E站”这个大项目分解成10个子项目,将交流能力、解决问题能力等五大职业通用能力与站点设置、界面设计、模板创建、网页布局、网站测试等岗位技能有机融合在相应的子项目之中。学生除了要完成案例网站“我的E站”的制作,还要制作一个实践项目。
全书以整体式项目教学为主,共分为10个子项目,遵照网站建设的流程设置。每个子项目分解为多个项目任务,而每个项目任务分别采用任务驱动、案例教学等高效的教学方法,并按照如下思路安排学习内容:“项目引入”→“项目展示”→“能力要求”→“任务实施”→“归纳总结”→“项目训练”。每个子项目结束前还有小结及技能训练,本书免费提供的素材中还赠送与考证挂钩的8套技能训练,可以提高学生的操作技能。一些文档的书写规范也以附录或二维码的形式提供给读者参考。同时配有近100段微课视频可在书中二维码处扫码学习。
本书第1版自2011年出版以来,受到全国广大读者(包括学生、教师和自学者)的广泛好评。本书适用于高职高专院校的教育教学,符合产业与技术发展的新趋势,内容、结构和体系新颖、有特色,在国内同类教材中具有一定的水平和质量。
本书第2版荣幸地获评“‘十二五’职业教育国家规划教材”,该版更加顺应行业需求,以培养复合型网站设计与网页制作人才为目的进行修订,综合了网页美工设计、动画交互设计、网页标准布局、移动互联网站开发设计,以及时下流行的HTML 5、CSS 3等新技术,以适应企业不断发展的需求。
本书在第2版的基础上又做了进一步的修订和扩展,主要涵盖如下几个方面。
? 采用二维码的方式提供相关内容的微课视频、文档及网址等参考资源;
? 项目依然采用合作企业的真实网站;
? 软件版本采用比较成熟的CS6版本;
? 详细介绍了常见的布局方式,降低学习的难度;
? 丰富了浏览器兼容性测试内容;
? 详细介绍了网站宣传推广的常见方式及步骤;
? 新增了搜索引擎优化工具的介绍;
? 新增Bootstrap框架及案例介绍;
? 配备丰富的教学资源,提供精品课程网站。
本书由苏州工业职业技术学院何福男、密海英任主编,苏州工业职业技术学院芮文艳、陈园园、杨小英任副主编,由江苏仕德伟网络科技股份有限公司提供书中项目,由陈德阳、李建中、徐建锋等企业专家给予编写指导,共同完成了本书的结构、章节设计及编写。
本书提供所有书中用到的教学资源、视频、项目素材及技能强化综合练习题的全部素材,可登录华信教育资源网(www.hxedu.com.cn)免费下载。微课视频可在书中二维码处扫码学习。其他教学材料可以参考精品课程网站,地址为http://eol.siit.edu.cn:85/eol/jpk/course/welcome.jsp? courseId=1268。
由于作者水平有限,书中难免存在疏漏与不足之处,敬请广大读者批评指正。
编 者
展开