-
>
中医基础理论
-
>
高校军事课教程
-
>
思想道德与法治(2021年版)
-
>
毛泽东思想和中国特色社会主义理论体系概论(2021年版)
-
>
中医内科学·全国中医药行业高等教育“十四五”规划教材
-
>
中医诊断学--新世纪第五版
-
>
中药学·全国中医药行业高等教育“十四五”规划教材
Web网页设计与前端开发案例教程(第三版) 版权信息
- ISBN:9787030707130
- 条形码:9787030707130 ; 978-7-03-070713-0
- 装帧:一般胶版纸
- 册数:暂无
- 重量:暂无
- 所属分类:>>
Web网页设计与前端开发案例教程(第三版) 内容简介
本书根据作者多年的实际教学经验积累而创作,围绕一个综合网站实例,采用任务驱动和案例教学法组织教材内容,系统地介绍了Web前端开发技术(HTML5、CSS3、JavaScript)与可视化网页开发工具Dreamweaver CC2019的使用方法。 本书共12章,包括网页设计概述、HTML基础、HTML5新功能、Dreamweaver CC 2019概述、Dreamweaver 网页制作入门、CSS、网页布局和排版、行为、创建表单、模板与库、网站综合实例、JavaScript语言基础等内容。 本书案例丰富,将Web开发技术与实例应用相结合,并提供基于实例制作的教学微视频、电子课件、源程序、素材。读者按案例步骤操作就能够掌握网页制作的各个知识点,并提高综合应用的能力。 本书可作为高校数字媒体专业或本科“网页设计”课程的教材,也可作为网页制作人员的参考用书。
Web网页设计与前端开发案例教程(第三版) 目录
第1章 网页设计概述 1
1.1 常用术语 1
1.2 Web开发技术 3
1.2.1 网页编程技术 3
1.2.2 静态网页与动态网页 3
1.3 网页制作的相关软件 5
1.4 网页设计基础 8
1.4.1 网页的基本元素 8
1.4.2 网站的类型 12
1.4.3 网页布局的类型与原则 13
1.4.4 网页配色方法与工具 18
1.4.5 其他网页制作技巧 21
1.5 网站开发的要素 22
1.5.1 设计思路 22
1.5.2 确定网站主题和名称 22
1.5.3 确定网站的整体风格 22
1.5.4 规划网站的结构 23
习题1 24
第2章 HTML基础 25
2.1 HTML简介 25
2.2 HTML文件结构 26
2.2.1 HTML文件基本结构 26
2.2.2 在HTML中嵌入JavaScript脚本程序 27
2.2.3 在HTML中嵌入样式表 28
2.3 HTML基本标记符 29
2.4 常用文本格式标记符 32
2.5 超链接标记符 33
2.5.1 超链接的定义 33
2.5.2 超链接的属性 33
2.6 表格 34
2.6.1 表格的概念 34
2.6.2 表格的定义 34
2.7 HTML列表 37
2.7.1 有序列表 37
2.7.2 无序列表 38
2.8 图像 39
2.8.1 图像的基本知识 39
2.8.2 图像的使用 39
2.9 页内框架 43
2.10 表单 44
2.10.1 表单的概念 44
2.10.2 表单元素 44
2.11 背景音乐 47
习题2 47
第3章 HTML5新功能 50
3.1 HTML5简介 50
3.2 HTML标记符功能分类 50
3.3 HTML属性 54
3.3.1 HTML标准属性 55
3.3.2 HTML事件属性 55
3.4 标记符 59
3.5 标签 61
3.6 HTML5拖放 62
3.7 canvas元素 64
习题3 67
第4章 Dreamweaver CC 2019概述 68
4.1 Dreamweaver CC 2019工作界面 68
4.2 Dreamweaver CC 2019页面的总体设置 72
4.2.1 设置页面的相关信息 72
4.2.2 设置页面属性 73
4.3 网页实例制作 74
4.3.1 新建站点 74
4.3.2 网页制作 76
习题4 79
第5章 Dreamweaver网页制作入门 80
5.1 网站设计的前期工作 80
5.1.1 规划站点 80
5.1.2 收集网页素材 80
5.2 创建和管理站点 81
5.2.1 创建站点 82
5.2.2 管理站点 83
5.2.3 管理站点文件及文件夹 85
5.3 网页的新建、打开与保存 86
5.3.1 新建网页 87
5.3.2 打开网页 87
5.3.3 保存网页 87
5.4 文本 87
5.4.1 插入文本 87
5.4.2 设置文本属性 88
5.4.3 插入水平线和日期 90
5.4.4 网页文字编辑实例 91
5.5 图像 94
5.5.1 常用Web图像格式 94
5.5.2 插入图像 95
5.5.3 插入鼠标经过图像 97
5.5.4 图像的插入与美化实例 97
5.6 超链接 100
5.6.1 超链接的类型 100
5.6.2 文档位置和路径 100
5.6.3 创建页面链接 101
5.6.4 创建锚记链接 102
5.6.5 创建电子邮件链接 104
5.6.6 创建图像热点链接 104
5.6.7 创建空链接和脚本链接 106
5.7 多媒体对象 106
5.7.1 插入Flash动画 107
5.7.2 插入Flash视频 107
5.7.3 插入声音和视频 107
5.7.4 透明Flash动画作背景 108
5.7.5 使用网页音频标签 109
5.7.6 使用网页视频标签 110
5.7.7 水平滚动Flash文字动画
实例 111
习题5 113
第6章 CSS114
6.1 CSS概述 114
6.1.1 CSS的概念 114
6.1.2 定义CSS样式 114
6.2 网页中引入CSS样式的三种方式 117
6.3 样式的层叠 118
6.4 常用CSS3新特性 120
6.4.1 CSS3边框 120
6.4.2 CSS3背景 123
6.4.3 CSS3图片 126
6.4.4 CSS3按钮 129
6.5 创建CSS样式 134
6.5.1 创建外部样式表 134
6.5.2 创建内部样式表 135
6.5.3 附加外部样式表 135
6.5.4 CSS样式的管理 136
6.6 添加CSS选择器 137
6.6.1 添加类选择器 139
6.6.2 添加ID选择器 139
6.6.3 添加标签选择器 140
6.6.4 添加通配符选择器 141
6.6.5 添加分组选择器 141
6.6.6 添加后代选择器 142
6.6.7 添加伪类选择器 143
6.6.8 添加伪元素选择器 143
6.7 编辑CSS样式 145
6.7.1 CSS类型设置 145
6.7.2 CSS背景设置 146
6.7.3 CSS区块设置 147
6.7.4 CSS方框设置 148
6.7.5 CSS边框设置 149
6.7.6 CSS列表设置 150
6.7.7 CSS定位设置 150
6.7.8 CSS扩展设置 152
6.7.9 CSS过渡设置 152
6.8 CSS样式应用实例 153
6.8.1 CSS样式实例1 153
6.8.2 CSS样式实例2 156
6.8.3 CSS样式实例3 158
习题6 161
第7章 网页布局和排版 162
7.1 网页布局概述 162
7.2 表格 163
7.2.1 插入表格 163
7.2.2 编辑表格 166
7.2.3 表格属性 168
7.2.4 单元格、行和列的属性 168
7.2.5 表格布局实例 169
7.3 Div+CSS实现布局 170
7.3.1 Div 170
7.3.2 盒模型 171
7.3.3 CSS网页布局 173
7.3.4 Div+CSS布局实例 174
7.4 jQuery UI 180
7.4.1 Tabs 选项卡 181
7.4.2 Accordion折叠面板 182
习题7 183
第8章 行为 185
8.1 行为的概念 185
8.1.1 行为的基础知识 185
8.1.2 JavaScript源代码简介 185
8.2 “行为”面板 186
8.3 向网页添加行为 187
8.4 使用内置行为 188
8.4.1 显示-隐藏元素 188
8.4.2 设置文本 188
8.4.3 交换图像 191
8.4.4 打开浏览器窗口 194
8.4.5 转到URL 195
8.4.6 设置状态栏文本 196
习题8 196
第9章 创建表单 197
9.1 表单概述 197
9.2 使用表单 197
9.2.1 插入表单 197
9.2.2 表单属性 198
9.3 使用表单元素 198
9.3.1 单行文本框 198
9.3.2 密码框 199
9.3.3 文本区域 199
9.3.4 复选框 200
9.3.5 单选按钮 201
9.3.6 下拉列表 202
9.3.7 标准按钮 203
9.3.8 文件域 204
9.4 “检查表单”动作 205
9.5 创建跳转菜单 206
9.6 Web 服务器的配置 207
习题9 209
第10章 模板与库 210
10.1 模板 210
10.1.1 创建模板 211
10.1.2 创建可编辑区域 211
10.1.3 创建重复区域 212
10.1.4 创建嵌套模板 213
10.1.5 使用模板 214
10.1.6 模板实例——批量制作布局相同的网页 215
10.2 库 217
10.2.1 创建库项目 218
10.2.2 库项目操作 219
习题10 220
第11章 网站综合实例 223
11.1 实例1—个人兴趣网站 223
11.1.1 站点规划 223
11.1.2 前期准备工作 224
11.1.3 网页制作 227
11.2 实例2—宫崎骏漫画网站 230
11.2.1 站点规划 230
11.2.2 前期准备工作 230
11.2.3 网页制作 231
11.3 测试发布网站 236
习题11 237
第12章 JavaScript语言基础 238
12.1 JavaScript简介 238
12.2 JavaScript的数据类型 239
12.3 变量与数组 240
12.3.1 变量 240
12.3.2 数组 241
12.4 表达式与运算符 242
12.4.1 算术运算符 242
12.4.2 关系运算符 243
12.4.3 逻辑运算符 243
12.4.4 字符串连接运算符 243
12.4.5 三目操作符 244
12.4.6 赋值运算符 244
12.4.7 表达式 244
12.5 条件语句 244
12.5.1 if语句 244
12.5.2 switch语句 245
12.6 循环语句 246
12.6.1 for语句 247
12.6.2 for/in语句 248
12.6.3 while与do/while语句 248
12.6.4 break与continue语句 249
12.7 JavaScript函数 250
12.7.1 函数定义 250
12.7.2 带有返回值的函数 250
12.7.3 函数调用 251
12.8 JavaScript内置对象 253
12.8.1 属性和方法 253
12.8.2 Date对象 254
12.8.3 Math对象 255
12.8.4 String对象 257
12.9 表单校验 259
12.9.1 必填项目校验 259
12.9.2 E-mail验证 260
12.10 事件响应 261
12.10.1 事件处理的基本概念 261
Web网页设计与前端开发案例教程(第三版) 节选
第1章 网页设计概述 在互联网高速发展的今天,网络已成为人们生活的一部分,成为人们获取信息资源的重要途径。信息的呈现离不开网页这个重要的界面,网页的主要作用是采用一定的手段将用户需要的信息与资源进行组织,通过网络呈现给用户。网页设计是传统设计与信息、科技和互联网结合而产生的,是交互设计的延伸和发展,是在新媒介和新技术支持下的一个全新的设计创作领域。 随着网络技术及其带宽的提高,网页的构成元素也发生了很大的变化。20世纪90年代末,网页的构成元素主要就是大量的文本、表格(Table)、超链接、极少数量的静态图像和 GIF动图。如今的网页设计往往要结合动画、图像特效与后台的数据交互等,除了以上的构成元素外又增加了图像、动画、视频、音乐、横幅广告以及多种动态效果。 在进行网站制作前,首先要进行网站页面的整体设计。一个网站是由若干个网页构成的,网页是用户访问网站的界面。因此,通常意义上的网站设计,指的是网站中各个页面的设计。而网页设计中,*先提到的就是网页的布局。布局是否合理、美观,将直接影响到用户的阅读体验及访问时长。 1.1 常用术语 1.URL 客户机通过超文本传送协议(Hypertext Transfer Prtcl,HTTP)与 Web服务器完成交互,用户要查询的某一台 Web服务器是通过统一资源定位符(Uniform Resource Locator,URL)来指定的。URL是 Internet(因特网)上标准资源的地址,是 Internet上用来描述信息资源的字符串。 Internet上的每个文件都有唯一的 URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。 与在计算机中根据指明的路径查找文件类似,它是在万维网(World Wide Web,WWW)中浏览超文本文档时保证准确定位的一种机制。它既可指向本地计算机硬盘上的某个文件,也可指向 Internet上的某一个网页。也就是说,通过 URL可访问 Internet上任何一台主机或者主机上的文件和文件夹。它包含被访问资源的类型、服务器的地址、文件的位置等。 URL一般格式如下: 访问协议://服务器主机域名或 IP地址[:端口号]/路径/文件名例如。 (1)访问协议:说明信息资源的类型。例如, http://表示 WWW服务器,ftp://表示 FTP服务器,mms://表示流媒体传送协议。 (2)服务器主机域名或 IP地址:指出信息资源所在的服务器的主机地址。 (3)端口号:默认为80,一般省略。 (4)路径:指明某个信息资源在服务器上所处的位置。 (5)文件名:给出了信息资源文件的名称,如果缺少了路径和文件名,则 URL默认指向 Web站点的首页(Homepage)。首页的文件名默认为 index.htm或 default.htm。 2.WWW WWW可以简称 Web、W3、3W等,它是基于超文本的信息查询和信息发布系统。 Web就是以 Internet上众多的 Web服务器所发布的相互链接的文档为基础组成的一个庞大的信息网,它不仅可以提供文本信息,还可以提供声音、图形、图像以及动画等多媒体信息,它为用户提供了图形化的信息传播界面——网页。 WWW采用 B/S(Browser/Server)结构,即浏览器/服务器结构。它是随着 Internet技术的兴起,对 C/S(客户机/服务器)结构的一种变化或改进的结构。在这种结构下,用户工作界面是通过 WWW浏览器来实现的,主要事务逻辑在服务器端实现,很少部分事务逻辑在前端实现。这样的好处是大大简化了客户端的计算机载荷,减少了系统维护与升级的成本和工作量,降低了用户的总体成本。因此,用户只需要安装浏览器即可浏览页面,不需要知道服务器端使用什么操作系统或服务器端怎么处理浏览器发出的请求(Request),可以方便查看自己想看到的内容。 要访问万维网上的一个网页,或者其他网络资源时,首先在浏览器上输入想访问的网页的统一资源定位符,或者通过超链接方式链接到该网页或网络资源。然后 URL的服务器名部分被分布于全球的因特网数据库(称为域名系统)解析,并根据解析结果确定服务器的 IP地址。接着向该 IP地址的服务器发送一个 HTTP请求。通常, HTML(Hypertext Markup Language,超文本标记语言)文本、图片和构成该网页的一切其他文件很快会被逐一请求并发送回用户。*后浏览器把 HTML、CSS和其他接收到的文件所描述的内容,加上图像、链接和其他必需的资源,显示给用户,这就是用户看到的网页。 总体来说, WWW采用客户机/服务器的工作模式,工作流程如图1-1所示。 图1-1 WWW工作流程 (1)用户使用浏览器或其他程序建立客户机与服务器连接,并发送浏览请求。 (2)Web服务器接收到请求后,返回信息到客户机。 (3)通信完成,关闭连接。 3.浏览器 浏览器是万维网服务的客户端浏览程序,可向万维网服务器发送各种请求,并对从服务器发来的超文本信息和各种多媒体数据格式进行解释、显示和播放。大部分的浏览器本身支持除了 HTML之外的广泛的格式,如 JPEG、PNG、GIF等图像格式,并且能够扩展支持众多的插件(Plug-ins)。另外,许多浏览器还支持其他的 URL类型及其相应的协议,如 FTP、Gopher、 HTTPS(HTTP的加密版本)。 常见浏览器有 Microsoft(微软)公司的 IE、Mozilla公司的 Firefox、Apple(苹果)公司的 Safari、腾讯 TT、搜狗浏览器、百度浏览器等,可以搜索、查看和下载 Internet上的各种信息。 4.网页 WWW通过网页将信息提供给用户。网页是 WWW浏览的*基本的单位,按照网页功能的简单划分,网页可以分为首页和普通页面,并构成多级的网络结构。 网页是由 HTML或者其他语言编写的,通过浏览器解释后供用户获取信息的页面,它又称为 Web页,其中可包含文字、图像、表格、动画和超链接等各种网页元素,以表达丰富多彩的信息。网页实际上只是一个纯文本文件,它通过各式各样的标记对页面上的文本、图片、表格、声音等元素进行描述(如字体、颜色、大小),而浏览器则对这些标记进行解释并生成页面。 5.网站 网站就是完成特定目标的一个或多个网页的集合。网站是因特网上一块固定的面向全世界发布消息的地方,由域名(也就是网站地址)和网站空间构成,通常包括首页和其他具有超链接文件的页面。按网站的内容,网站可分为门户网站、职能网站、专业网站和个人网站等。 1.2 Web开发技术 Web开发技术经历了重大演变。*早的网页仅仅由静态文档构成,用户浏览时只能被动接受网页内容。这与传统媒体相比没有什么变化。随着网络技术的发展,不仅可以在网页中嵌入程序,还可以在运行过程中向网页添加动态内容,用户可以与网页进行交互,实现了全新的媒体形式。 1.2.1 网页编程技术 目前网站上常见的计算器、聊天室、论坛、留言本、网上购物等服务必须得到网页编程技术的支持。根据程序运行地点不同,网页编程技术又分为客户端编程技术与服务器端编程技术。 1.客户端编程技术 客户端编程技术不需要与服务器交互,实现功能的代码往往采用脚本语言(Scripting Language)形式直接嵌入网页中。服务器发送网页给用户后,网页在客户端的浏览器中直接响应用户的动作(Action)。常见的客户端编程技术包括 JavaScript、JavaApplet、DHTML、ActiveX和 VRML等。 2.服务器端编程技术 服务器端编程技术需要服务器端和客户端共同参与。当用户通过浏览器发出页面请求后,服务器根据 URL携带的参数运行服务器端动态程序,产生结果页面再返回客户端。一般涉及数据库操作的网页,如注册、登录、查询、购物等应用都需要服务器端动态程序。典型的服务器端编程技术有 ASP、PHP、JSP、ASP.NET等。 1.2.2 静态网页与动态网页 按网页的表现形式可将网页分为静态网页和动态网页。静态网页和动态网页各有特点,网站采用动态网页还是静态网页主要取决于网站的功能需求和网站内容的多少,如果网站功能比较简单,内容更新量不是很大,采用纯静态网页会更简单;反之一般要采用动态网页来实现。 1.静态网页 在网站设计中,纯粹 HTML格式的网页通常称为静态网页,静态网页是标准的 HTML文件,它的文件扩展名是.htm、.html,可以包含文本、图像、声音、 Flash动画、客户端脚本和 ActiveX控件及 Java小程序等。静态网页是网站建设的基础,早期的网站一般都是由静态网页制作的。 静态网页相对于动态网页而言,是指没有后台数据库、不含程序和不可交互的网页。静态网页更新起来相对比较麻烦,适用于一般更新较少的展示型网站。实际上静态网页也不是完全静态的,它也可以出现各种动态的效果,如 GIF格式的动画、 Flash动画、滚动字幕等。对于静态网页,用户可以直接双击,看到的效果与访问服务器是相同的。 1)静态网页的特点 (1)静态网页的每个网页都有一个固定的 URL,静态网页的网址形式通常为,网页 URL以.htm、.html、.shtml等常见形式为后縀,而不含有“?”。 (2)网页内容一经发布到网站服务器上,无论是否有用户访问,每个静态网页的内容都是保存在网站服务器上的,也就是说,静态网页是实实在在保存在服务器上的文件,每个网页都是一个独立的文件。 (3)静态网页的内容相对稳定,因此容易被搜索引擎检索。 (4)静态网页没有数据库的支持,在网站制作和维护方面的工作量较大。 (5)静态网页的交互性较差,在功能方面有较大的限制。 2)静态网页的工作流程 在静态 Web程序中,客户端使用 Web浏览器经过网络连接到服务器上,使用 HTTP发起一个请求,告诉服务器现在需要得到哪个页面,所有的请求交给 Web服务器,之后 Web服务器根据用户的需要,从文件系统(存放了所有静态页面的磁盘)取出内容。之后通过 Web服务器将内容返回给客户端,客户端接收到内容之后经过浏览器渲染解析,得到显示的效果。 (1)编写一个静态网页,并在 Web服务器上发布; (2)用户在浏览器的“地址”文本框中输入该静态网页的 URL并按回车(Enter)键,浏览器发送请求到 Web服务器; (3)Web服务器找到此静态网页的位置,并将它转换为 HTML流传送到用户的浏览器; (4)浏览器收到HTML流,显示此网页的内容。在步骤(2)~(4)中,静态网页的内容不会发生任何变化。其工作原理如图1-2所示。 图1-2 静态网页的工作原理 2.动态网页 动态网页是指采用了服务器端编程技术,由程序实时生成,可以根据不同条件生成不同内容的网页。它们会随不同客户、不同时间,返回不同的网页。动态网页相对复杂,不能直接双击。 1)动态网页的特点 (1)动态网页的后縀一般为.asp、.jsp或者.php等形式。 (2)动态网页以数据库技术为基础,可以大大减少网站维护的工作量。 (3)动态网页交互性较强,采用动态网页的网站可以实现更多的功能,如用户注册、用户登录、在线查询、用户管理、订单管理等。 (4)动态网页实际上并不是独立存在于服务器上的网页,只有当用户请求时,服务器才会返回一个完整的网页。 2)动态网页的工作流程 动态网
- >
朝闻道
朝闻道
¥15.0¥23.8 - >
苦雨斋序跋文-周作人自编集
苦雨斋序跋文-周作人自编集
¥6.9¥16.0 - >
推拿
推拿
¥12.2¥32.0 - >
我与地坛
我与地坛
¥15.4¥28.0 - >
罗曼·罗兰读书随笔-精装
罗曼·罗兰读书随笔-精装
¥17.4¥58.0 - >
名家带你读鲁迅:故事新编
名家带你读鲁迅:故事新编
¥13.0¥26.0 - >
中国历史的瞬间
中国历史的瞬间
¥16.7¥38.0 - >
名家带你读鲁迅:朝花夕拾
名家带你读鲁迅:朝花夕拾
¥10.5¥21.0
-
食品添加剂
¥33.5¥45 -
VB语言程序设计
¥29.9¥39.8 -
C语言程序设计习题与实验指导
¥9.1¥18 -
地下建筑结构-(第三版)-(赠课件)
¥49.4¥55 -
模具制图
¥37.8¥49 -
工程机械结构认知
¥10.5¥22