HTML+CSS+JavaScript网页设计教程(高职)
定 价:39 元
- 作者:孟宪宁
- 出版时间:2020/3/1
- ISBN:9787560655864
- 出 版 社:西安电子科技大学出版社
- 中图法分类:TP312
- 页码:280
- 纸张:胶版纸
- 版次:1
- 开本:16K
本书是作者根据多年的教学和网站设计经验,按照学习网页设计技术的规律,精心设计编写的,书中代码均符合最新的Web开发规范。本书由浅入深,完整而详细地介绍了HTML、CSS和JavaScript这三种网页设计技术,在讲解基本规范的同时,给出了实用性强的案例,可以使读者在掌握基本规范的同时,学习到实用的网页设计技术。
本书内容系统、全面,
在互联网时代,一个好的网页,不仅要有良好的视觉效果,其内容和表现形式更要符合Web标准。传统的网页设计通常是网页的内容和表现形式交织在一起,这就造成了网页源代码可读性不高、后期维护难度大等问题。使用HTML+CSS+JavaScript设计网页,可将网页内容、表现形式和行为相分离,一方面便于在设计网页过程中分工合作,另一方面既可以提高代码复用度,又可以提高代码的可读性和可维护性。
本书是作者根据多年的教学经验以及实际的网站(网页)设计经验,在翻阅了众多网页设计教材的基础上,博采众长,精心编写的。本书采用最新的Web开发标准,既可以使用简单的记事本工具,也可以使用WebStorm、DreamWeaver等流行的专业网页设计工具,由浅入深、系统而全面地介绍HTML、CSS和JavaScript的基本知识和实用技巧,对于当前流行的HTML 5.0和CSS的相关技术也进行了讲解。本书在讲解基本知识点的基础上,精心编写了实际网站设计中应用的案例,理论知识系统而全面,案例丰富而实用。
本书除第6章外,每章后都附有较为丰富的练习题以及精心设计的实践题,读者只要认真学习本书中的内容,并完成练习题和实践题,就能够基本掌握网页设计技术。
全书共6章,各章内容安排如下:
第1章 网页设计综述,主要介绍Web工作原理、常用的浏览器、开发网页的常用工具、基本的术语;对HTML、CSS和JavaScript做了简单介绍;实现了一个简单的仿百度首页的网页,从而让读者对网页设计有一个直观的认识。
第2章 HTML,介绍了HTML的基本语法;分析了一个完整网页的组成部分;重点介绍HTML文档头部的相关标签,并对段落、文本格式化、列表、超链接、图像与多媒体、表单、表格、框架等网页设计中要用到的HTML标签做了详细介绍。
第3章 CSS,介绍了在网页中如何引用CSS样式、CSS样式的基本语法格式;重点介绍了CSS选择器;详细介绍了CSS文本样式,盒子模型,浮动与定位,以及样式的继承、层叠和优先级的概念;给出了一个腾讯网首页的搜索案例,让读者能够把所学的HTML和CSS技术学以致用。
第4章 JavaScript,介绍了在网页中如何引入JavaScript代码,并介绍了在Chrome浏览器中调试JavaScript代码的基本技巧;详细介绍了JavaScript的标识符、变量、基本数据类型、运算符和表达式,以及顺序、分支和循环的语法格式及编程思想,对JavaScript控制网页行为要用到的函数和事件也做了详细介绍;介绍了如何使用DOM模型来控制网页元素的表现行为以及如何使用BOM模型来实现网页和浏览器之间的交互;使用JavaScript技术,实现了腾讯网首页的下拉菜单以及搜索框提示文字的更新显示功能。
第5章 网页设计综合案例,通过实现腾讯网首页案例,将前几章所学的HTML、CSS和JavaScript技术进行综合应用。通过这个综合案例,读者可以掌握符合Web开发规范的网页设计技术。
第6章 拓展知识,对设计一个丰富多彩的网页所需要的配色、版式设计,以及切片工具和技术等进行介绍,并结合具体的网站实例,给读者简单展示了一个网站的设计流程。
本书由孟宪宁、赵春霞、包燕编著,孟宪宁负责本书的组织设计,并完成了前4章的编写,赵春霞完成了第5章“网页设计综合案例”的编写,包燕完成了第6章“拓展知识”的编写。
在本书编写过程中,苗彩霞、高桂霞等几位老师提供了部分案例和试题,在此一并表示感谢!
由于水平有限,书中难免存在不足,敬请广大读者批评指正,并诚恳欢迎大家提出宝贵意见。E-mail:113769283@qq.com。
第1章 网页设计综述 1
1.1 Web起源 1
1.2 Web工作原理 1
1.3 浏览器 2
1.4 网页开发工具 3
1.5 基本概念 3
1.6 网页开发技术简介 5
1.6.1 HTML简介 5
1.6.2 CSS简介 6
1.6.3 JavaScript简介 8
1.7 一个简单的网页 9
1.7.1 准备工作 9
1.7.2 编写HTML代码 10
1.7.3 设计CSS样式 11
1.7.4 添加CSS样式后网页的
显示效果 12
练习与实践 12
第2章 HTML 14
2.1 HTML基本语法 14
2.1.1 双标签 14
2.1.2 单标签 14
2.1.3 属性 15
2.1.4 注释 15
2.2 HTML文档基本结构 16
2.3 HTML文档头部相关标签 17
2.3.1 页面标题标签
17
2.3.2 元信息标签<meta />17
2.3.3 其他标签 18
2.4 段落与文本格式化 19
2.4.1 <span>标签 19
2.4.2 样式标签 20
2.4.3 段落标签<p>21
2.4.4 换行标签<br /> 22
2.4.5 水平分割线标签<hr />22
2.4.6 内容居中标签<center>23
2.4.7 预格式化标签
<pre> 23
2.4.8 标题标签<h1>~<h6>25
2.4.9<div>和<span>标签 25
2.5 列表 26
2.5.1 无序列表标签<ul>26
2.5.2 有序列表标签<ol>27
2.5.3 自定义列表标签<dl>29
2.6 超链接 30
2.6.1 超链接标签<a> 30
2.6.2 路径的表示方法 30
2.6.3 网页内跳转 31
2.7 图像与多媒体 32
2.7.1 图像 32
2.7.2 图像映射 32
2.7.3 音频和视频 35
2.7.4 插入Flash文件 37
2.8 表单 37
2.8.1 表单标签<form>37
2.8.2 信息输入标签<input /> 38
2.8.3 HTML 5.0新增的表单输入类型 40
2.8.4 下拉列表标签<select> 43
2.8.5 多行文本输入标签<textarea> 45
2.8.6 域和域标题 45
2.9 表格 46
2.9.1 表格标签 46
2.9.2 行标签<tr>49
2.9.3 单元格标签<td>50
2.10 框架 51
2.10.1 框架集标签<frameset>52
2.10.2 框架定义标签<frame /> 52
2.10.3 浮动框架标签<iframe>54
2.11 HTML 5.0结构元素 56
练习与实践 58
第3章 CSS 62
3.1 CSS基础 62
3.2 引用CSS样式 63
3.2.1 行内样式 63
3.2.2 内部样式 63
3.2.3 外部样式 65
3.3 CSS选择器 66
3.3.1 标签选择器 66
3.3.2 id选择器 67
3.3.3 类选择器 68
3.3.4 属性选择器 70
3.3.5 后代选择器 72
3.3.6 关系选择器 73
3.3.7 普通兄弟选择器(~) 74
3.3.8 相邻兄弟选择器(+) 75
3.3.9 结构性伪类选择器 76
3.3.10 伪类选择器 79
3.3.11 通配符选择器 81
3.3.12 并集选择器 81
3.4 CSS文本样式 82
3.4.1 字体样式属性:font-family 82
3.4.2 字号属性:font-size 83
3.4.3 字体粗细属性:font-weight 86
3.4.4 字体风格属性:font-style 88
3.4.5 综合字体样式属性:font 88
3.4.6 其他常用的文本样式属性 89
3.5 盒子模型 93
3.5.1 盒子模型概述 94
3.5.2 盒子模型的相关属性 95
3.5.3 盒子的内边距 98
3.5.4 盒子的外边距 100
3.6 背景属性 101
3.6.1 设置背景颜色 102
3.6.2 设置背景图片 103
3.6.3 综合设置背景图片 105
3.7 继承、层叠和优先级 106
3.7.1 继承 106
3.7.2 层叠和优先级 107
3.8 浮动与定位 110
3.8.1 浮动(float) 110
3.8.2 定位 116
3.9 案例:腾讯网首页搜索框布局 121
3.9.1 左、中、右三栏居中布局 122
3.9.2 左侧的腾讯Logo图片 124
3.9.3 中间的搜索框 124
3.9.4 右侧的三个按钮 128
练习与实践 129
第4章 JavaScript 133
4.1 JavaScript概述 133
4.1.1 使用
<script>标签直接嵌入
JavaScript代码 133
4.1.2 引入外部JavaScript代码 134
4.2 标识符、变量和数据类型 135
4.2.1 标识符 135
4.2.2 变量 136
4.2.3 基本数据类型 136
4.2.4 复合数据类型:数组 139
4.2.5 JavaScript对象和this关键字 141
4.3 运算符与表达式 143
4.3.1 赋值运算符 143
4.3.2 算术运算符 143
4.3.3 位运算符 144
4.3.4 比较运算符 144
4.3.5 逻辑运算符 145
4.3.6 条件运算符(三元运算符) 145
4.4 流程控制 146
4.4.1 顺序结构 146
4.4.2 分支结构 146
4.4.3 循环结构 151
4.5 函数 156
4.5.1 定义函数 157
4.5.2 调用函数 157
4.6 事件 159
4.6.1 表单事件 161
4.6.2 鼠标事件 165
4.6.3 键盘事件 167
4.7 DOM 168
4.7.1 获取HTML元素 169
4.7.2 读取或修改HTML元素的属性 170
4.8 BOM 175
4.8.1 history对象 176
4.8.2 navigator对象 178
4.8.3 screen对象 179
4.8.4定时器 180
4.9 案例:腾讯网首页搜索框下拉菜单 185
4.9.1 获取指定的HTML元素对象 186
4.9.2 设置HTML对象的响应事件 186
4.9.3 实现下拉菜单的鼠标移入移出
效果 187
4.9.4 实现下拉菜单的鼠标点击效果 187
练习与实践 188
第5章 网页设计综合案例 192
5.1 网站介绍及定位 192
5.2 准备工作 192
5.2.1 建立站点 192
5.2.2 素材准备 194
5.3 网页布局分析 195
5.3.1 网页整体布局 196
5.3.2 标签页图标和文字显示 197
5.3.3 定义公共样式 197
5.3.4 定义页面大小 198
5.3.5 浮动效果的实现 198
5.4 头部分析与实现 198
5.4.1 效果图分析 198
5.4.2 头部布局分析 199
5.4.3 左侧的腾讯Logo图片 199
5.4.4 中间的搜索框代码实现 200
5.4.5 右侧三个QQ功能按钮的实现 207
5.5 导航部分分析与实现 209
5.5.1 效果图分析 209
5.5.2 导航部分布局整体设计 209
5.5.3 导航部分的CSS样式分析与
设计 213
5.6 广告部分分析与实现 217
5.6.1 效果图分析 217
5.6.2 广告部分布局分析与实现 217
5.6.3 广告部分样式分析与实现 218
5.6.4 广告部分动态效果实现 219
5.7 主体部分分析与实现 221
5.7.1 效果图分析 221
5.7.2 要闻部分和今日话题部分的
分析与实现 222
5.7.3 右侧快速链接部分的分析与
实现 225
练习与实践 230
第6章 拓展知识 231
6.1 网页配色 231
6.1.1 色彩概述 231
6.1.2 色彩的基本特性 232
6.1.3 网页配色的基本概念 234
6.1.4 网页配色技巧 242
6.1.5 网页色彩搭配的原则 245
6.2 网页版式设计 245
6.2.1 网页元素的组成 246
6.2.2 网页设计的构成要素 246
6.2.3 网页版式设计的布局分类 249
6.3 切片工具 257
6.3.1 切片的属性设置 257
6.3.2 切片工具的使用 258
6.4 案例:本源食品有限公司网站页面的
设计与制作 264
6.4.1 网站定位 264
6.4.2 搜集资料 264
6.4.3 网站规划 265
6.4.4 设计网站 266
6.4.5 网站制作 270
6.4.6 网站发布 271</pre>