Web前端开发实操教材（初级）素材

第1章 实践概述 1 1.1 实践目标 1 1.2 实践知识地图 1 1.3 实施安排 6 1.3.1 实验部分（技术专题） 6 1.3.2 综合实践部分 11 第2章 网页设计与制作 19 2.1 实验目标 19 2.2 实验任务 19 2.3 设计思路 20 2.4 实验实施（跟我做） 20 2.4.1 步骤一：设计网页原型 20 2.4.2 步骤二：设计页面效果 21 2.4.3 步骤三：网页切图 22 2.4.4 步骤四：网页设计 25 第3章 开发工具（HBuilder） 26 3.1 实验目标 26 3.2 实验任务 26 3.3 设计思路 26 3.4 实验实施（跟我做） 27 3.3.1 步骤一：下载并安装 HBuilder 27 3.3.2 步骤二：启动HBuilder 27 3.3.3 步骤三：创建工程 28 3.3.4 步骤四：创建HTML页面 29 3.3.5 步骤五：编辑HTML文件 30 3.3.6 步骤六：运行 30 第4章 网站服务器部署 （Apache服务器） 32 4.1 实验目标 32 4.2 实验任务 32 4.3 设计思路 32 4.4 实验实施（跟我做） 32 4.3.1 步骤一：下载Apache 32 4.3.2 步骤二：安装Apache 34 4.3.3 步骤三：测试Apache 35 第5章 HTML制作静态网页 （新闻网站） 36 5.1 实验目标 36 5.2 实验任务 37 5.3 设计思路 37 5.4 实验实施（跟我做） 38 5.4.1 步骤一：创建“登录”页面 38 5.4.2 步骤二：添加“登录” 页面内容 38 5.4.3 步骤三：创建新闻首页和 二级页面 39 5.4.4 步骤四：添加新闻页面 内容 39 5.4.5 步骤五：实现页面跳转 42 第6章 CSS设计页面样式 （购物网站） 43 6.1 实验目标 43 6.2 实验任务 44 6.3 设计思路 44 6.4 实验实施（跟我做） 46 6.4.1 步骤一：创建文件 46 6.4.2 步骤二：链接到外部 样式文件 46 6.4.3 步骤三：导航栏样式 47 6.4.4 步骤四：左边栏 48 6.4.5 步骤五：右边栏 50 6.4.6 步骤六：底边栏 51 第7章 JavaScript开发交互效果页面 （网页计算器） 53 7.1 实验目标 53 7.2 实验任务 54 7.3 设计思路 54 7.4 实验实施（跟我做） 56 7.4.1 步骤一：HTML布局 56 7.4.2 步骤二：CSS添加样式 57 7.4.3 步骤三：JavaScript计算 59 7.4.4 步骤四：扩展功能 （验证正则表达式） 62 第8章 jQuery开发交互效果页面 （手机号抽奖） 64 8.1 实验目标 64 8.2 实验任务 65 8.3 设计思路 65 8.4 实验实施（跟我做） 66 8.4.1 步骤一：页面构建 66 8.4.2 步骤二：下载并引用jQuery 和jQuery UI 67 8.4.3 步骤三：随机生成10个 手机号码 67 8.4.4 步骤四：抽奖 68 8.4.5 步骤五：重置抽奖 68 第9章 CSS3新特性开发页面样式 （微博网站） 70 9.1 实验目标 70 9.2 实验任务 70 9.3 设计思路 71 9.4 实验实施（跟我做） 72 9.4.1 步骤一：搭建页面主体 结构 72 9.4.2 步骤二：搭建页面主体 内容 73 9.4.3 步骤三：添加正文内容 73 9.4.4 步骤四：美化微博话题 75