目录

开　篇

项目1　网页入门…………………………………………………………………003

任务1-1 基本概念…………………………………………………………004

任务1-2 制作第一个页面…………………………………………………006

个人网站设计篇

项目2　个人简历…………………………………………………………………017

任务2-1 基本概念…………………………………………………………019

任务2-2 文本………………………………………………………………023

任务2-3 图像………………………………………………………………029

任务2-4 表格………………………………………………………………031

任务2-5 个人简历页面……………………………………………………037

项目3　个人博客…………………………………………………………………043

任务3-1 利用区块标签进行简单布局……………………………………045

任务3-2 CSS样式的基本概念（1）………………………………………048

任务3-3 CSS样式的基本概念（2）………………………………………054

任务3-4 文本样式…………………………………………………………062

任务3-5 个人博客页面分析………………………………………………072

任务3-6 个人博客页面页首、页脚模块的实现…………………………075

任务3-7 个人博客页面博客内容模块的实现……………………………077



IV

企业网站设计篇
项目4　企业网站首页…………………………………………………………085

任务4-1 盒子模型…………………………………………………………087
任务4-2 盒子模型进阶……………………………………………………089
任务4-3 显示类型设置……………………………………………………098
任务4-4 定位设置…………………………………………………………104
任务4-5 背景设置…………………………………………………………114
任务4-6 CSS3新增效果设置………………………………………………129
任务4-7 企业网站首页分析………………………………………………143
任务4-8 导航模块的实现…………………………………………………146
任务4-9 巨幕、服务和产品介绍模块的实现……………………………148
任务4-10 浮动图标和页脚模块的实现……………………………………154

行业网站设计篇
项目5　用户注册页面…………………………………………………………159

任务5-1 表单的基本概念…………………………………………………161
任务5-2 表单控件…………………………………………………………164
任务5-3 表单样式设计……………………………………………………182
任务5-4 企业用户注册页面分析…………………………………………194
任务5-5 表单模块的实现…………………………………………………197

项目6　酒店客房预订网站……………………………………………………205

任务6-1 JavaScript概念……………………………………………………207
任务6-2 JavaScript的基本使用……………………………………………210
任务6-3 控制流程…………………………………………………………216
任务6-4 函数………………………………………………………………223
任务6-5 设计酒店客房预订页面…………………………………………228


目 录

V

任务6-6 页首模块的实现…………………………………………………232

任务6-7 酒店介绍模块的实现……………………………………………233

任务6-8 客房预订模块的实现……………………………………………240

任务6-9 酒店客房预订网站脚本的实现…………………………………248

项目7　视频播放网站…………………………………………………………255

任务7-1 JavaScript对象……………………………………………………257

任务7-2 事件………………………………………………………………278

任务7-3 多媒体……………………………………………………………283

任务7-4 地理位置…………………………………………………………288

任务7-5 视频播放网站页面分析…………………………………………291

任务7-6 页首模块的实现…………………………………………………294

任务7-7 视频播放模块的实现……………………………………………297

任务7-8 热门视频模块的实现……………………………………………310

任务7-9 视频播放网站脚本的实现………………………………………313

响应式网站设计篇

项目8　在线订餐页面…………………………………………………………319

任务8-1 响应式设计………………………………………………………320

任务8-2 媒体查询…………………………………………………………323

任务8-3 弹性布局…………………………………………………………327

任务8-4 使用弹性布局进行响应式设计…………………………………337

任务8-5 在线订餐页面分析………………………………………………341

任务8-6 在线订餐页面中导航和订单模块的实现………………………344

任务8-7 在线订餐页面中菜单模块的实现………………………………348

任务8-8 在线订餐页面中业务逻辑的实现………………………………354



项目9　快递柜取件页面………………………………………………………359

任务9-1 网格布局…………………………………………………………360
任务9-2 网格容器属性的设置……………………………………………364
任务9-3 网格项目属性的设置……………………………………………373
任务9-4 使用网格布局实现响应式设计…………………………………377
任务9-5 快递柜取件页面分析……………………………………………382
任务9-6 快递柜取件页面中导航模块的实现……………………………384
任务9-7 快递柜取件页面中取件模块的实现……………………………386
任务9-8 快递柜取件页面中业务逻辑的实现……………………………390

参考文献……………………………………………………………………………392
附录A　HTML常用标签简介………………………………………………393
附录B　CSS属性值简介………………………………………………………395