目录

开　篇

项目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