本书针对网页设计与制作的初学者,以项目+任务式的编写体例规划理论知识点,并用实际的操作展示学习过程,通过实际的操作让学生掌握项目中的技能点(知识技能—>过程方法—>职业技能)。全面贯彻“理论→实例→实验实训→综合评价”4阶段教学模式。在内容选择、结构安排上更加符合高职学生的认知习惯,从而达到老师易教、学生易学的目的。
全书分为8个项目,结合HTML、CSS和JavaScript的基础知识及应用,提供了7种不同类型的网页设计案例。其中,项目1主要讲解HTML、CSS以及JavaScript的基础知识,包括Web基本概念、HTML/CSS/JavaScript简介、Dreamweaver工具的使用等。项目2至项目8为7个完整的网页设计项目,涉及“旅游”、“网店”、“儿童摄影”、“教育”、“服装”、“美食”等多个方向,有助于学生掌握不同网站的设计风格和制作技巧。全书以项目为导向,通过项目将章节知识点串起来,学完一章内容就能制作一个完整的项目页面,能大大激发学生的学习兴趣。
本书附有配套视频、源代码、习题、教学课件等资源,而且为了帮助初学者更好地学习本书讲解的内容,还提供了在线答疑,希望得到更多读者的关注。
本书既可作为高等院校本、专科相关专业的网页设计与制作课程的教材,也可作为前端与移动开发的培训教材,对于广大网站开发人员来说,更是一本不可多得的阅读与参考的优秀读物。
特色1:项目贯始终
全书以项目为导向,通过项目将章节知识点串起来,学完一章内容就能制作一个完整的项目页面,能大大激发学生的学习兴趣。
特色2:项目丰富
全书包含7个完整的项目,涉及“旅游专题页”、“网上花店”、“儿童摄影”、“教育网站首页”等多个方向,有助于学生掌握不同网站的设计风格和制作技巧。
特色3:通俗易懂
采用比较直接的语言对知识点进行描述,且配合案例演示知识点的应用场景。
特色4:知识点细且全
包含HTML、CSS、JavaScript,体系完整循序渐进。
特色5:配套资源丰富
PPT、教学设计、习题、辅助案例、教学视频等,您需要的我们都有!
项目1 网页制作基础知识 1 【任务1-1】 了解Web基本概念 2 需求分析 2 知识储备 2 1.认识网页 2 2.网页相关名词 4 3.Web标准 5 【任务1-2】 网页制作入门 6 需求分析 6 知识储备 6 1.HTML简介 6 2.CSS简介 8 3.JavaScript简介 9 4.常见浏览器介绍 9 【任务1-3】 Dreamweaver工具的 使用 11 需求分析 11 知识储备 11 1.Dreamweaver界面介绍 11 2.Dreamweaver初始化设置 15 3.创建第一个网页 17 【项目总结】 19 【课后练习】 19 项目2 “说旅游”专题页制作 21 【项目描述】 22 【任务2-1】 认识HTML 23 需求分析 23 知识储备 23 1.HTML文档基本格式 23 2.HTML标记 24 3.标记的属性 26 4.HTML文档头部相关标记 27 【任务2-2】 HTML文本控制标记 29 需求分析 29 知识储备 29 1.标题和段落标记 29 2.文本样式标记(font) 32 3.文本格式化标记 33 4.特殊字符标记 34 知识拓展 35 【任务2-3】 HTML图像标记 36 需求分析 36 知识储备 36 1.常用图像格式 36 2.图像标记 37 3.相对路径与绝对路径 40 知识拓展 41 【任务2-4】 准备工作与页面布局 42 准备工作 42 页面结构分析 44 页面布局 45 【任务2-5】 制作“头部”模块 46 效果分析 46 模块制作 46 【任务2-6】 制作“伊露岛介绍”模块 47 效果分析 47 模块制作 47 【任务2-7】 制作“伊露岛推荐” 模块 48 效果分析 48 模块制作 49 【任务2-8】 制作“驴友评论”模块 50 效果分析 50 模块制作 51 【任务2-9】 制作“页脚”模块 52 效果分析 52 模块制作 53 【项目总结】 54 【课后练习】 54 项目3 “网上花店”专题页制作 56 【项目描述】 57 【任务3-1】 CSS核心基础 58 需求分析 58 知识储备 58 1.CSS样式规则 58 2.引入CSS样式表 59 3.CSS基础选择器 63 【任务3-2】 CSS控制文本样式 65 需求分析 65 知识储备 65 1.CSS字体样式属性 65 2.CSS文本外观属性 68 知识拓展 71 【任务3-3】 CSS高级特性 71 需求分析 71 知识储备 72 1.CSS复合选择器 72 2.CSS层叠性与继承性 74 3.CSS优先级 75 【任务3-4】 布局及定义基础样式 78 准备工作 78 效果分析 79 定义基础样式 80 【任务3-5】 制作“标题”模块 81 效果分析 81 模块制作 81 【任务3-6】 制作“分类”模块 82 效果分析 82 模块制作 83 【任务3-7】 制作“热卖”模块 84 效果分析 84 模块制作 85 【任务3-8】 制作“页脚”模块 86 效果分析 86 模块制作 87 【项目总结】 88 【课后练习】 88 项目4 “青春树儿童摄影网”首页 制作 91 【项目描述】 92 【任务4-1】 认识盒子模型 93 需求分析 93 知识储备 93 认识盒子模型 93 【任务4-2】 盒子模型相关属性 94 需求分析 94 知识储备 95 1.边框属性 95 2.内边距属性 100 3.外边距属性 101 4.背景属性 103 5.盒子的宽与高 107 【任务4-3】 元素的类型与转换 108 需求分析 108 知识储备 109 1.元素的类型 109 2.标记 111 3.元素的转换 112 知识拓展 114 【任务4-4】 元素的浮动 116 需求分析 116 知识储备 117 1.元素的浮动属性 117 2.清除浮动 119 3.overflow属性 124 【任务4-5】 元素的定位 126 需求分析 126 知识储备 126 1.元素的定位属性 126 2.静态定位 126 3.相对定位 127 4.绝对定位 128 5.固定定位 129 6.z-index层叠等级属性 129 【任务4-6】 布局及定义基础样式 130 准备工作 130 效果分析 131 定义基础样式 131 【任务4-7】 制作“导航”及“banner” 模块 132 效果分析 132 模块制作 133 【任务4-8】 制作“最新动态”模块 135 效果分析 135 模块制作 135 【任务4-9】 制作“样片欣赏”模块 137 效果分析 137 模块制作 138 【任务4-10】 制作“页脚”及“悬浮框” 模块 139 效果分析 139 模块制作 139 【项目总结】 140 【课后练习】 140 项目5 “穿搭速递”首页制作 142 【项目描述】 143 【任务5-1】 列表标记 143 需求分析 143 知识储备 144 1.无序列表ul 144 2.有序列表ol 144 3.定义列表dl 145 4.列表的嵌套应用 146 【任务5-2】 CSS控制列表样式 147 需求分析 147 知识储备 147 1.list-style复合属性 147 2.背景图像定义列表项目符号 148 【任务5-3】 超链接标记 149 需求分析 149 知识储备 149 1.创建超链接 149 2.锚点链接 150 3.链接伪类控制超链接 152 【任务5-4】 布局及定义基础样式 154 准备工作 154 效果分析 155 定义基础样式 155 【任务5-5】 制作“头部”导航模块 156 效果分析 156 模块制作 156 【任务5-6】 制作“banner”和 “精品展示”模块 158 效果分析 158 模块制作 159 【任务5-7】 制作“潮流前沿”模块 162 效果分析 162 模块制作 162 【任务5-8】 制作“版权信息”模块 164 效果分析 164 模块制作 165 【项目总结】 166 【课后练习】 166 项目6 “千年之恋”注册页面制作 168 【项目描述】 169 【任务6-1】 认识表格相关标记 170 需求分析 170 知识储备 170 1.表格的创建 170 2.标记的属性 171 3.标记的属性 175 4.标记的属性 176 5.标记及其属性 177 【任务6-2】 CSS控制表格样式 178 需求分析 178 知识储备 178 1.CSS控制表格边框 178 2.CSS控制单元格边距 179 3.CSS控制单元格的宽高 181 【任务6-3】 认识表单 182 需求分析 182 知识储备 182 1.初识表单 182 2.创建表单 183 【任务6-4】 表单控件 184 需求分析 184 知识储备 184 1.input控件 184 2.textarea控件 188 3.select控件 189 【任务6-5】 CSS控制表单样式 192 需求分析 192 知识储备 192 CSS控制表单样式 192 【任务6-6】 布局及定义基础样式 194 准备工作 194 效果分析 195 定义基础样式 196 【任务6-7】 制作头部及导航模块 197 效果分析 197 模块制作 197 【任务6-8】 制作“banner”及“内容” 模块 199 效果分析 199 模块制作 200 【任务6-9】 制作“页脚”模块 204 效果分析 204 模块制作 204 【项目总结】 205 【课后练习】 205 项目7 “赶快回家网”首页制作 207 【项目描述】 208 【任务7-1】 JavaScript概述 209 需求分析 209 知识储备 209 1.JavaScript简介 209 2.JavaScript引入方式 210 3.JavaScript基本语法 212 4.一个简单的JavaScript程序 213 【任务7-2】 JavaScript语言基础 214 需求分析 214 知识储备 214 1.关键字和标识符 214 2.变量和数据类型 215 3.运算符和表达式 218 【任务7-3】 流程控制语句 224 需求分析 224 知识储备 224 1.条件语句 224 2.循环语句 229 3.跳转语句 232 【任务7-4】 函数 234 需求分析 234 知识储备 234 1.初识函数 234 2.函数的调用 235 3.函数中变量的作用域 235 【任务7-5】 布局及定义基础样式 236 准备工作 237 效果分析 237 定义基础样式 237 【任务7-6】 制作“头部”模块 239 效果分析 239 模块制作 240 【任务7-7】 制作“导航”模块 243 效果分析 243 模块制作 243 【任务7-8】 制作“banner”和“时间” 模块 245 效果分析 245 模块制作 246 【任务7-9】 制作“客运信息”模块 248 效果分析 248 模块制作 249 【任务7-10】 制作“底部”模块 252 效果分析 252 模块制作 252 【项目总结】 253 【课后练习】 253 项目8 “学好英语网”首页制作 255 【项目描述】 256 【任务8-1】 认识对象 257 需求分析 257 知识储备 257 1.什么是对象 257 2.对象的属性和方法 257 3.创建和删除对象 257 4.内置对象 259 【任务8-2】 Array数组对象 263 需求分析 263 知识储备 263 1.初识数组 263 2.数组的常见操作 264 3.数组的常用属性和方法 266 4.二维数组 268 【任务8-3】 BOM与DOM对象 269 需求分析 269 知识储备 269 1.BOM对象 269 2.DOM对象 275 【任务8-4】 事件处理 281 需求分析 281 知识储备 281 1.什么是事件 281 2.事件处理程序的调用 281 3.鼠标事件 283 4.键盘事件 284 5.表单事件 286 6.页面事件 287 【任务8-5】 布局及定义基础样式 289 准备工作 289 效果分析 289 定义基础样式 290 【任务8-6】 制作“头部”及“导航” 模块 292 效果分析 292 模块制作 292 【任务8-7】 制作“banner”模块 294 效果分析 294 模块制作 294 【任务8-8】 制作“简介”模块 297 效果分析 297 模块制作 298 【任务8-9】 制作“课程特色”模块 301 效果分析 301 模块制作 301 【任务8-10】 制作“页脚”模块 306 效果分析 306 模块制作 306 【项目总结】 307 【课后练习】 307