网页设计与制作教程——Web前端开发(第6版)课件第2章 块级元素2.7
《网页设计与制作》课件
# 网页设计与制作
本课程旨在传授网页设计与制作的基础知识和技能。通过课程学习，您将掌 握网页设计的流程、布局原则、交互设计以及网站的维护与发布。
第一章：课程介绍
1 学习目标
明确课程学习目标，了解学习内容和要求。
2 课程安排
详细介绍每个章节的内容安排和学习进度。
3 教学方法
2 标准布局
讲解网页布局设计的基本原则和注意事项。
介绍常用的标准网页布局模式和技巧。
3 自适应布局
பைடு நூலகம்
4 响应式布局
学习如何设计适应不同设备和屏幕尺寸的 网页布局。
解析响应式设计的概念和实现方法。
第四章：网页交互设计
1 交互设计概述
揭示交互设计的重要性和基本原则。
3 交互设计流程
探讨交互设计的典型流程和步骤。
2 常用交互元素
介绍常见的网页交互元素和设计技巧。
4 JavaScript基础
入门级JavaScript语法和常用函数的使用。
第五章：网站维护与发布
1 网站测试与调试
学习进行网站测试、调 试和优化的方法。
2 网站备份与恢复
讲解网站备份和恢复的 重要性和实施步骤。
3 网站发布与维护
指导网站发布和日常维 护的关键要点。
介绍教学方法，包括理论讲解、实践演练和案例分析等。
第二章：网页设计基础
1 网页设计概述
2 HTML基础
介绍网页设计的定义、重要性和发展趋势。
学习HTML标签的使用和基本语法规范。
3 CSS基础
学习CSS样式的定义和常用属性。
4 网页设计流程
简要介绍网页设计的典型流程和步骤。
第三章：网页布局设计
《Dreamweaver CS6网页设计与制作》第2章 Dreamweaver基础知识 刘敏娜 主编PPT课件
3、查看面板组的“选项”菜单：单击面板 或面板组右上方的选项按钮，在列表中可 以对网页进行设置，比如有新建和打开文 件等操作。
4、重命名面板组：可以为面板组命名，操 作方法：单击面板组的选项列表，选择重 命名面板组，输入新名称就可以了。
2.2.4自定义快捷键
Dreamweaver为用户定制了一些常用 命令的快捷键，当然用户也可以自己设置 快捷键。方法是：点击“编辑”菜单-〉“快 捷键”，选择需要更改的命令，如“新建” 命令，单击右上角的“复制副本”按钮复 制为副本（可以为副本重命名），在副本 设置中继续选择“新建”，在“按钮”输 入框按下新设置的快捷键（在键盘上直接 输入组合键，要求必须是包含ctrl键）,单击 “确定”即可生效。
窗口的各组成要素
面板组
组合在一个标题下面的多个相关的面板的集合。可以通过 单击组名称左侧的展开箭头将这多个面板在折叠或展开之 间切换。
文件面板
这个面板组非常重要，用来管理文件和文件夹，还可以对 站点进行操作，查看站点中的资源。
标签选择器
处于文档底部的状态栏中，用来显示当前选定html对象标 签的层次结构，单击其中的任何标签，就可以选中该标签 及其内容。
窗口的各组成要素
文档工具栏
文档工具栏上有视图切换的按钮，另外还包含文件管理功 能，上传下载，浏览器预览等功能按钮。
文档窗口
显示用户正在编辑的网页文档。
属性浮动面板
可以查看和编辑当前选定的网页元素的属性，此面板中的 内容会随着选中对象的不同而变化，比如当前选中了文字， 面板中就会显示文字相关的属性，如字体，大小，样式等。
单击文档工具栏左边的3个按钮，可以在“代
码视图”，“设计视图”和“拆分”视图之间切
换。另外在工具栏中还有添加网页标题，文件管理，Βιβλιοθήκη 本地和远程站点间传送文档等命令。如下
Web程序设计(第6版)(国外计算机科学经典教材)
目录第1章基础知识 (1)1.1 Internet简介 (2)1.1.1 起源 (2)1.1.2 Internet的含义 (2)1.1.3 IP地址 (3)1.1.4 域名 (3)1.2 万维网 (5)1.2.1 起源 (5)1.2.2 Web还是Internet (5)1.3 Web浏览器 (6)1.4 Web服务器 (7)1.4.1 Web服务器操作 (7)1.4.2 服务器的一般特性 (8)1.4.3 Apache (9)1.4.4 IIS (9)1.5 统一资源定位符 (9)1.5.1 URL的格式 (10)1.5.2 URL路径 (10)1.6 MIME (11)1.6.1 类型说明 (11)1.6.2 实验性文档类型 (12)1.7 超文本传输协议 (12)1.7.1 请求阶段 (13)1.7.2 响应阶段 (14)1.8 安全性 (15)1.9 Web编程工具箱 (17)1.9.1 XHTML概述 (17)1.9.2 创建XHTML文档的工具 (18)1.9.3 插件和过滤器 (19)1.9.4 XML概述 (19)1.9.5 JavaScript概述 (20)1.9.6 Flash概述 (20)1.9.7 PHP概述 (21)1.9.8 Ajax概述 (21)1.9.9 Servlet、JavaServer Pages和JavaServer Faces概述 (22)1.9.10 概述 (22)1.9.11 Ruby概述 (23)1.9.12 Rails概述 (23)1.10 本章小结 (24)1.11 复习题 (25)1.12 练习题 (26)第2章XHTML简介 (29)2.1 HTML和XHTML的起源和演变 (29)2.1.1 HTML和XHTML的版本 (30)2.1.2 HTML与XHTML (31)2.2 基本语法 (31)2.3 XHTML文档的标准结构 (32)2.4 基本的文本标记 (33)2.4.1 段落 (33)2.4.2 换行 (35)2.4.3 保留空白字符 (35)2.4.4 标题 (36)2.4.5 文本块引用 (37)2.4.6 字体样式与大小 (38)2.4.7 字符实体 (39)2.4.8 水平线 (39)2.4.9 meta元素 (40)2.5 图片 (40)2.5.1 图片格式 (40)2.5.2 <img />标签 (41)2.5.3 XHTML文档的验证 (43)2.6 超链接 (44)Web程序设计(第6版) X2.6.1 链接 (45)2.6.2 位于文档内部的目标 (47)2.6.3 使用链接 (47)2.7 列表 (47)2.7.1 无序列表 (48)2.7.2 有序列表 (48)2.7.3 定义列表 (51)2.8 表格 (52)2.8.1 基本的表格标签 (52)2.8.2 属性rowspan与colspan (54)2.8.3 属性align与valign (56)2.8.4 属性cellpadding与cellspacing (57)2.8.5 表格分块 (59)2.9 表单 (59)2.9.1 <form>标签 (59)2.9.2 <input>标签 (60)2.9.3 <select>标签 (63)2.9.4 <textarea>标签 (65)2.9.5 动作按钮 (66)2.9.6 一个完整的表单示例 (66)2.10 HTML与XHTML之间的语法差异 (69)2.11 本章小结 (71)2.12 复习题 (72)2.13 练习题 (73)第3章层叠样式表 (75)3.1 简介 (75)3.2 样式表的层次 (76)3.3 样式说明格式 (77)3.4 选择器格式 (78)3.4.1 简单的选择器格式 (78)3.4.2 类选择器 (79)3.4.3 通用选择器 (79)3.4.4 id选择器 (80)3.4.5 通配选择器 (80)3.4.6 伪类 (80)3.5 属性值的格式 (81)3.6 字体属性 (82)3.6.1 字体族 (83)3.6.2 字体大小 (83)3.6.3 字体变体 (84)3.6.4 字体样式 (84)3.6.5 字体粗细 (84)3.6.6 简写字体属性 (84)3.6.7 文本修饰 (87)3.7 列表属性 (88)3.8 颜色 (91)3.8.1 颜色组 (91)3.8.2 颜色属性 (92)3.9 文本对齐 (93)3.10 盒模型 (95)3.10.1 边框 (95)3.10.2 内边距和外边距 (97)3.11 背景图片 (99)3.12 <span>标签和<div>标签 (101)3.13 冲突解决方案 (102)3.14 本章小结 (103)3.15 复习题 (104)3.16 练习题 (105)第4章JavaScript基础知识 (107)4.1 JavaScript概述 (107)4.1.1 起源 (107)4.1.2 JavaScript与Java (108)4.1.3 JavaScript的用途 (108)4.1.4 浏览器和XHTML/JavaScript文档 (109)4.2 面向对象和JavaScript (110)4.3 一般的语法特征 (111)4.4 基本数据类型、操作和表达式 (113)4.4.1 基本数据类型 (113)4.4.2 数值型和字符串字面量 (114)4.4.3 其他基本数据类型 (114)目录XI4.4.4 声明变量 (115)4.4.5 数值运算符 (115)4.4.6 Math对象 (116)4.4.7 Number对象 (117)4.4.8 字符串连接运算符 (117)4.4.9 隐式类型转换 (118)4.4.10 显式类型转换 (118)4.4.11 String属性和方法 (119)4.4.12 typeof运算符 (120)4.4.13 赋值语句 (120)4.4.14 Date对象 (121)4.5 屏幕输出和键盘输入 (121)4.6 控制语句 (124)4.6.1 控制表达式 (125)4.6.2 选择语句 (126)4.6.3 switch语句 (127)4.6.4 循环语句 (129)4.7 创建和修改对象 (131)4.8 数组 (132)4.8.1 创建Array对象 (132)4.8.2 Array对象的特征 (133)4.8.3 Array方法 (134)4.9 函数 (136)4.9.1 基础知识 (136)4.9.2 局部变量 (137)4.9.3 参数 (138)4.9.4 复习sort方法 (140)4.10 示例一 (140)4.11 构造函数 (142)4.12 利用正则表达式进行模式匹配 (142)4.12.1 字符和字符类模式 (143)4.12.2 锚 (145)4.12.3 模式修饰符 (145)4.12.4 String对象中的其他模式匹配方法 (146)4.13 示例二 (146)4.14 脚本中的错误 (148)4.15 本章小结 (149)4.16 复习题 (151)4.17 练习题 (152)第5章JavaScript与XHTML文档 (155)5.1 JavaScript的执行环境 (156)5.2 文档对象模型 (156)5.3 在JavaScript中访问元素 (159)5.4 事件与事件处理 (162)5.4.1 事件处理的基本概念 (162)5.4.2 事件、属性和标签 (163)5.5 处理主体元素的事件 (165)5.6 处理按钮元素的事件 (166)5.7 处理文本框和密码框元素的事件 (171)5.7.1 focus事件 (171)5.7.2 验证表单输入 (173)5.8 DOM 2事件模型 (178)5.8.1 事件传播 (179)5.8.2 事件处理程序的注册 (180)5.8.3 DOM 2事件模型示例 (181)5.9 navigator对象 (183)5.10 DOM树的遍历和修改 (185)5.10.1 DOM树的遍历 (185)5.10.2 DOM树的修改 (185)5.11 本章小结 (185)5.12 复习题 (186)5.13 练习题 (187)第6章利用JavaScript开发动态文档 (189)6.1 简介 (189)6.2 元素定位 (190)6.2.1 绝对定位 (190)6.2.2 相对定位 (193)6.2.3 静态定位 (194)6.3 移动元素 (194)6.4 元素可见性 (197)Web程序设计(第6版) XII6.5 修改颜色和字体 (198)6.5.1 修改颜色 (198)6.5.2 修改字体 (199)6.6 动态内容 (201)6.7 堆叠元素 (203)6.8 定位鼠标光标 (206)6.9 响应鼠标单击 (208)6.10 缓慢移动元素 (209)6.11 拖放元素 (212)6.12 本章小结 (216)6.13 复习题 (216)6.14 练习题 (217)第7章XML简介 (219)7.1 简介 (219)7.2 XML语法 (221)7.3 XML文档结构 (223)7.4 文档类型定义 (225)7.4.1 元素声明 (225)7.4.2 属性声明 (227)7.4.3 实体声明 (228)7.4.4 一个DTD的示例 (228)7.4.5 内部和外部DTD (229)7.5 名称空间 (230)7.6 XML架构 (232)7.6.1 架构的基本原理 (232)7.6.2 架构的定义 (233)7.6.3 定义架构实例 (234)7.6.4 数据类型概述 (235)7.6.5 简单类型 (235)7.6.6 复杂类型 (236)7.6.7 架构实例的验证 (238)7.7 显示没有格式化的XML文档 (239)7.8 通过CSS显示XML文档 (240)7.9 XSLT样式表 (241)7.9.1 XSLT概述 (242)7.9.2 用于表现的XSL转换 (243)7.10 XML处理器 (249)7.10.1 XML处理器的用途 (249)7.10.2 SAX方式 (249)7.10.3 DOM方式 (250)7.11 Web服务 (250)7.12 本章小结 (251)7.13 复习题 (253)7.14 练习题 (254)第8章Flash简介 (257)8.1 Flash的起源与用途 (257)8.2 初步了解Flash创作环境 (258)8.3 绘图工具 (262)8.3.1 预定义图形 (262)8.3.2 线条和徒手画 (267)8.3.3 文本 (267)8.3.4 元件和库 (268)8.4 静态图形 (269)8.5 动画和声音 (274)8.5.1 动画简介 (274)8.5.2 移动图形 (274)8.5.3 更多动画 (276)8.5.4 形状动画 (278)8.5.5 声音 (280)8.6 用户交互 (282)8.6.1 动作 (283)8.6.2 Flash组件 (283)8.6.3 示例 (283)8.7 小结 (286)8.8 复习题 (287)8.9 练习题 (288)第9章PHP简介 (289)9.1 PHP的起源和用途 (289)9.2 PHP概述 (290)9.3 基本语法特征 (291)9.4 基本数据类型、操作和表达式 (291)9.4.1 变量 (292)9.4.2 整数类型 (292)目录XIII9.4.3 双精度类型 (292)9.4.4 字符串类型 (292)9.4.5 布尔类型 (293)9.4.6 算术运算符和表达式 (293)9.4.7 字符串操作 (294)9.4.8 标量类型转换 (295)9.4.9 赋值运算符 (296)9.5 输出 (296)9.6 控制语句 (298)9.6.1 关系运算符 (298)9.6.2 布尔运算符 (298)9.6.3 选择语句 (298)9.6.4 循环语句 (299)9.6.5 示例 (299)9.7 数组 (301)9.7.1 创建数组 (301)9.7.2 访问数组元素 (302)9.7.3 数组处理函数 (302)9.7.4 数组元素的按序访问 (304)9.7.5 数组排序 (306)9.8 函数 (307)9.8.1 函数的基本特征 (307)9.8.2 参数 (308)9.8.3 变量的作用域 (309)9.8.4 变量的生命周期 (310)9.9 模式匹配 (311)9.10 表单处理 (313)9.11 文件 (318)9.11.1 打开和关闭文件 (318)9.11.2 读取文件 (319)9.11.3 文件写入操作 (320)9.11.4 文件加锁 (320)9.12 cookie (320)9.12.1 cookie简介 (321)9.12.2 PHP对cookie的支持 (322)9.13 会话跟踪 (322)9.14 本章小结 (323)9.15 复习题 (324)9.16 练习题 (325)第10章Ajax简介 (329)10.1 Ajax概述 (329)10.1.1 Ajax的历史 (329)10.1.2 Ajax技术 (330)10.1.3 实现Ajax (331)10.2 Ajax基础知识 (332)10.2.1 应用程序 (332)10.2.2 表单文档 (332)10.2.3 请求阶段 (334)10.2.4 响应文档 (336)10.2.5 接收器阶段 (337)10.2.6 跨浏览器支持 (339)10.3 返回文档的格式 (340)10.3.1 HTML和XHTML (340)10.3.2 XML (341)10.3.3 JavaScript Object Notation .. 34210.4 Ajax工具包 (343)10.4.1 Dojo (344)10.4.2 示例 (346)10.4.3 Prototype (348)10.5 安全性与Ajax (349)10.6 本章小结 (350)10.7 复习题 (351)10.8 练习题 (351)第11章Java Web软件 (353)11.1 servlet简介 (353)11.1.1 概述 (353)11.1.2 详解 (354)11.1.3 servlet容器 (357)11.2 NetBeans集成开发环境 (358)11.3 调查表示例 (365)11.4 在客户端存储信息 (372)11.4.1 cookie (372)11.4.2 servlet对cookie的支持 (373)11.4.3 示例 (374)Web程序设计(第6版) XIV11.5 JSP (380)11.5.1 开发JSP的动机 (380)11.5.2 JSP文档 (380)11.5.3 表达式语言 (383)11.5.4 JSTL中用于控制的动作元素 (385)11.6 JavaBean (389)11.7 模型-视图-控制器应用体系结构 (392)11.8 JSF (393)11.8.1 内核标签库和HTML标签库 (394)11.8.2 JSF事件处理 (395)11.8.3 示例应用程序 (395)11.9 本章小结 (400)11.10 复习题 (401)11.11 练习题 (402)第12章简介 (405)12.1 .NET Framework概述 (405)12.1.1 背景 (406)12.1.2 .NET语言 (406)12.1.3 公共语言运行库 (406)12.1.4 公共语言基础结构 (407)12.2 C#简介 (408)12.2.1 起源 (408)12.2.2 基本数据类型和表达式.. 40812.2.3 数据结构 (409)12.2.4 控制语句 (409)12.2.5 类、方法和结构 (410)12.2.6 异常处理 (411)12.2.7 输出 (411)12.3 简介 (412)12.3.1 基本知识 (412)12.3.2 文档 (413)12.3.3 代码隐藏文件 (415)12.4 控件 (417)12.4.1 Web控件 (417)12.4.2 简单的文档的生命周期 (418)12.4.3 Visual Studio (422)12.4.4 事件 (427)12.4.5 用代码创建控件元素 (428)12.4.6 控件的响应输出 (429)12.4.7 列表控件 (429)12.4.8 验证控件 (433)12.4.9 主文档 (439)12.5 AJAX (442)12.6 Web服务 (447)12.6.1 构建Web服务 (447)12.6.2 使用Web服务 (450)12.6.3 传播Web服务 (454)12.7 本章小结 (454)12.8 复习题 (455)12.9 练习题 (457)第13章基于Web的数据库访问 (459)13.1 关系数据库 (459)13.2 结构化查询语言简介 (462)13.2.1 SELECT命令 (462)13.2.2 连接 (462)13.2.3 INSERT命令 (464)13.2.4 UPDA TE命令 (464)13.2.5 DELETE命令 (464)13.2.6 DROP命令 (465)13.2.7 CREA TE TABLE命令 (465)13.3 数据库访问的体系结构 (466)13.3.1 客户端-服务器体系结构 (466)13.3.2 Microsoft ODBC体系结构 (466)13.3.3 PHP和数据库访问 (467)13.3.4 Java JDBC体系结构 (467)13.4 MySQL数据库系统 (468)13.5 使用PHP和MySQL实现数据库访问 (470)13.5.1 特殊字符的潜在问题 (470)目录XV13.5.2 连接MySQL并选择数据库 (471)13.5.3 请求MySQL操作 (471)13.5.4 PHP-MySQL示例 (472)13.6 使用JDBC和MySQL实现数据库访问 (477)13.6.1 JDBC和MySQL (477)13.6.2 元数据 (480)13.6.3 示例 (481)13.7 使用和MySQL实现数据库访问 (484)13.7.1 MySQL和 (484)13.7.2 数据绑定 (485)13.7.3 连接字符串 (486)13.8 本章小结 (490)13.9 复习题 (491)13.10 练习题 (492)第14章Ruby简介 (493)14.1 Ruby的起源与用途 (493)14.2 标量类型及其操作 (494)14.2.1 数值与字符串字面量 (494)14.2.2 变量和赋值语句 (495)14.2.3 数值运算符 (496)14.2.4 String的方法 (497)14.3 简单的输入输出 (501)14.3.1 屏幕输出 (501)14.3.2 键盘输入 (501)14.4 控制语句 (503)14.4.1 控制表达式 (503)14.4.2 选择语句和循环语句 (504)14.5 数组基础 (507)14.5.1 for-in语句 (508)14.5.2 数组和列表的内置方法.. 50914.5.3 示例 (511)14.6 散列 (512)14.7 方法 (514)14.7.1 基础知识 (514)14.7.2 局部变量 (515)14.7.3 参数 (515)14.8 类 (517)14.8.1 类的基础知识 (517)14.8.2 访问控制 (519)14.8.3 继承 (521)14.9 块和迭代器 (522)14.10 模式匹配 (524)14.10.1 模式匹配的基础知识 (524)14.10.2 存储匹配 (526)14.10.3 替换 (526)14.11 本章小结 (527)14.12 复习题 (527)14.13 练习题 (528)第15章Rails简介 (529)15.1 Rails概述 (529)15.2 文档请求 (531)15.2.1 静态文档Hello World (531)15.2.2 动态文档 (535)15.3 使用数据库的Rails应用程序 (537)15.3.1 构建基本应用程序 (538)15.3.2 完成应用程序 (546)15.3.3 修改数据库 (550)15.3.4 布局和样式表 (552)15.4 采用Ajax技术的Rails (553)15.4.1 初始的表单文档 (554)15.4.2 触发Ajax (556)15.4.3 控制器 (558)15.5 本章小结 (560)15.6 复习题 (561)15.7 练习题 (561)附录A Java简介 (563)附录B 颜色名及其十六进制值 (577)附录C Java Applet (581)。
网页设计与制作教程PPT课件
案例二：企业官网制作
总结词
专业形象塑造
详细描述
企业官网是企业形象的重要组成部分，设计时需注重专业 形象的塑造。采用符合企业品牌形象的颜色、字体和布局 ，以及专业的图片和内容，提升企业形象和可信度。
总结词
用户体验优化
详细描述
企业官网的用户体验至关重要，设计时应注重用户需求和 习惯。提供清晰的信息架构、便捷的导航和搜索功能，以 及响应式设计，确保用户在不同设备和浏览器上都能获得 良好的访问体验。
使用CSS和JavaScript创建一个模 态对话框，当用户与页面交互时弹 出，并覆盖背景内容。
表单验证
使用JavaScript对表单输入进行验 证，确保用户输入的数据符合要求， 提高数据质量。
特效制作
淡入淡出效果
使用CSS动画实现元素从透明到不透明或从一种颜 色渐变到另一种颜色的效果。
滑动效果
使用CSS或JavaScript实现元素在页面上的滑动效 果，如左右滑动、上下滑动等。
本课程将涵盖网页设计理念、HTML、CSS、JavaScript等前端技术，以及响应 式设计、网页性能优化等方面的知识，使学员能够独立完成一个精美、高效的网 页作品。
学习目标
01
掌握网页设计的基本理 念和原则，能够独立设 计出符合用户需求的网 页。
02
熟悉HTML、CSS、 JavaScript等前端技术， 能够熟练地编写网页代 码。
外部样式表
通过外部CSS文件引入样式，并 在HTML文档中使用`<link>`标
签引入该文件，如`<link rel="stylesheet" type="text/css"
href="styles.css">`
【完整版】网页设计与制作课程课件
网页排版和布局
深入研究网页排版和布局的原则，包括网格系统、流式布局和固定布局等技术。
图像、音频和视频在网页中的应用
学习如何在网页中嵌入各种媒体文件，创建富媒体的用户体验，提升网页的吸引力。
动态交互效果设计实战
通过实际案例和项目，学习如何使用JavaScript和CSS创建各种动态交互效果。
PHP语言基础
介绍PHP的基本语法、函数和流程控制，学习如何使用PHP开发动态网页。
MVC模式与Web应用程序框架
深入研究MVC模式的原理和应用，介绍常用的Web应用程序框架。
网站发布与维护
了解网站发布的流程和方法，学习如何进行网站的维护和更新。
网站安全和防范策略
探索网站安全的重要性和挑战，学习如何应对常见的安全威胁和攻击。
【完整版】网页设计与制 作课程课件
探索网页设计与制作的全过程，从前端开发基础到后端开发基础，通过丰富 的案例和实战项目，提升您的技能与知识。
网页设历程以及课程的主要内容和学习目标。
前端开发基础
介绍前端开发的基本概念、技术工具和流程，包括HTML、CSS和JavaScript。
网页性能和优化
深入了解网页性能优化的技术和策略，提高网页的加载速度和用户体验。
前端框架的使用
介绍常见的前端框架，如Bootstrap和Vue.js，学习如何使用框架开发快速高效的网页。
后端开发基础
探索后端开发的基本概念和技术，包括服务器端语言和数据库。
数据库设计和应用
学习数据库的基本原理和设计方法，以及如何使用SQL语言进行数据查询和操 作。
HTML语言基础
学习HTML的基本语法和标签，掌握常用标签的用法以及语义化网页的重要性。
网页设计与制作教程——Web前端开发(第6版)课件第1章 HTML 5概述1.4
第1章 HTML 5概述
1.4 实训——制作社区网版权信息
HTM是制作网页的基 础语言，是初学者必学的内容。
目录
第1章 HTML5概述
1.1 Web的基本概念 1.2 HTML5的基本结构和语法规则 1.3 编辑HTML文件 1.4 实训——制作社区网版权信息 习题1
1.4 实训——制作社区网版权信息
习题1
1．简述HTML5文档的基本结构及语法规范。 2．使用记事本创建一个JD页脚的版权信息，如图1-12所示（可到 复制需要的文字）。
《网页设计与制作教程：Web前端开发（第6版）》 刘瑞新主编 配套资源
祝贺你有了良好的开端.
1.4 实训——制作社区网版权信息
【实训1-1】制作社区网的页脚版权信息，页面中包括版权符号、空格，本例文件pt1-1.html在浏览 器中显示的效果，如图1-11所示。代码如下：
<!DOCTYPE html> <html>
<head> <meta charset="utf-8"> <title>社区网首页</title>
</head> <body>
<p style="font-size:12px;text-align:center">主办单位名称: 社区研究会 网站备案号: 京ICP备10006066号 营业执照经营许可证编号:
京ICP证160666号 京公网安备: 11011402010666号</p> <p style="font-size:12px;text-align:center">Copyright © 2020 All Rights Reserved. 社区网版权所有</p> </body> </html>
网页设计与制作整套课件完整版电子教案最全ppt整本书课件全套教学教程(最新
1.1 认识网页
1.浏览者能够看到的内容
(1)主题：一般情况下，浏览器在所显示网页窗口的标题栏 上显示“主题”。网页的真正主题不一定出现在网页内部， 而是有可能作为显示此网页的浏览器窗口的标题。然而，大 多数网页的标题表现为屏慕上的文本或图像，标题的作用和 在书本或杂志中的作用一样，位于网页中比较醒目重要的顶 部附近，从而给网页赋予了名字。 (2)标题：浏览器在浏览网页时通常以较大字体、粗体或者 其他的突出显示类型来显示标题。一个网页可以有很多标题， 而且标题还可以有多达6层的嵌套深度。 (3)普通文本：是指组成网页基本内容A.多用途的文本。一 般情况下将普通文本中的线和块当作页面中的“段落”。
网页是一种网络信息传递的载体。这种媒介的性质和日 常的“报纸”、“广播”、“电视”等传统媒体是可以相提 并论的。在网络上传递的相关信息，比如文字、图片甚至多 媒体音影，都是在网页中的存储，浏览者只需要通过浏览网 页，就可以了解到相关信息了。
下一页 返回
1.1 认识网页
1.1.2网页是如何形成的
网页是由一些部件组成的，知道这些部件是做什么的很 重要，因为在网页编写或设计过程中，主要的任务就是为每 一个标准的部件选用或编写相应的内容，这些部件有的能够 在网页中直接看到，而有的却不能在网页中直接看到。
上一页 下一页 返回
1.1 认识网页
(4)签名：通常显示在网页的底部。签名标识了网页的作者，并 且常常还包含作者(或者网络竹理员)的电子邮件地址，从而 使访问者可以发送有关此网页的评论或者建议、问题等。
(5)水平线：用来装饰网页，它将网页分割成逻辑上的几个部分。 (6)动画：可以是网页中出现的文本或者图片，不同的是它们以
上一页 下一页 返回
《网页设计与制作》教学课件
1.1 学习任务：网页和网站基本知识 1.2 学习任务：网站开发的基本流程 1.5 学习任务：HTML标识语言基础 1.3 学习任务：全面认识Dreamweaver CS4 1.4 学习任务：创建和管理本地站点 1.6 应用实例——制作一个简单的网页 1.7 实训
1.1学习任务：网页和网站基本知识
根据提供服务的不同，通常把提供网页服务的服务 器称为Web服务器，相关网站称为Web站点。一个 Web站点由一个或多个Web页组成，这些Web页相 互连接在一起，存放在Web服务器上，以供浏览者 访问。 网站是提供各种信息和服务的基地，如用户熟悉的 搜狐、新浪、雅虎等。网站是由很多网页链接在一 起组成的。用户浏览到一个网站时看到的第一个页 面叫做主页。从主页出发，可以访问到本网站的每 一个页面，也可以链接到其他网站，方便地共享网 站资源。
<b>标签的内容</b> 标签的内容</b </
起始标签 结束标签
标签可以有属性，赋值的时候用“ ， 标签可以有属性，赋值的时候用“=”，多个属性中间用空格隔开 属性要写在开始标签里，并且标签符号和<>中间不可以有空格， <>中间不可以有空格 img>是 属性要写在开始标签里，并且标签符号和<>中间不可以有空格，如< img>是 错误的 结束的标签一定要加“ 结束的标签一定要加“/”
topmargin、leftmargin属性：用于设置网页 主体内容与网页顶端、左端的距离。例如， <body topmargin=0 leftmargin=2>。
上机作业：完成 作业1.txt 中的操作
13. Dreamweaver CS4简介
网页设计与制作教程——Web前端开发(第6版)课件第2章 块级元素2.7
color:#555454;">
<ul>
<li>1在活动现场看到的最有趣的场面<label style="float: right;">2020-
08-23</label></li>
<li>2在活动现场看到的最有趣的场面<label style="float: right;">
2.7 实训——制作精选信息板块
习题2
1．制作如图2-21所示的课程表。
习题2
2. 制作如图2-22所示的注册表单。
习题2
3．使用<div>标签组织段落等网页内容，如图2-23所示。
《网页设计与制作教程：Webቤተ መጻሕፍቲ ባይዱ端开发（第6版）》 刘瑞新主编 配套资源
祝贺你又学完了一章
</head>
<body>
<div style="width: 585px;border:1px solid rgb(220,220,220); margin-top: 16px;margin-left:
25px;">
<div style="height: 34px;padding-top: 5px;border:1px solid rgb(220,220,220);">
<label style="font-size: 18px;">精选信息</label>
<label style="float: right;">more>></label>
网页设计与制作教程——Web前端开发(第6版)课件第1章 HTML 5概述1.2
1.2 HTML5的基本结构和语法规则
4．<meta charset>标签 <head>…</head>标签中的<meta charset>指定网页文档中的字符集， 称为HTML文档编码，HTML5文档直接使用meta元素的charset属性指定文 档编码，语法格式如下： <meta charset="UTF-8"> 为了被浏览器正确解释和通过W3C代码校验，所有的HTML文档都必须声 明它们所使用的编码语言。文档声明的编码应该与实际的编码一致，否则就 会呈现为乱码。对于中文网页的设计者来说，指定代码的字符集为“UTF8”。
1.2 HTML5的基本结构和语法规则
1.2.4 元素的分类 依据元素的作用不同，元素可以分为元信息元素和语义元素。 1．元信息元素 元信息（meta-information）或称元数据（Metadata）类元素是指用于描述文档 自身信息的一类元素，meta元素定义元信息，包含页面的描述、关键字、最后的修改 日期、作者及其它元信息，<meta>标签写在<head>…</head>标签中。元信息类元 素是提供给浏览器、搜索引擎（关键字）以及其它Web服务调用，一般不会显示给用 户。 meta元素的常用属性如下： 1）charset：定义文档的字符编码，常用的是“UTF-8”。 2）content：定义与name和http-equiv相关的元信息。 3）name：关联content的名称（常用的有keyowrd关键字、author作者名、 discriptiont页面描述）。
网页设计与制作Dreamweaver CS6标准教-ppt课件-02
编辑站点可以重新设置站点的一些属性，操作 步骤如下。 选择菜单【站点】|【管理站点】，打开【管 理站点】对话框，选择要编辑的站点名称，如 webtest，单击编辑按钮图标 。 打开【站点设置对象webtest】对话框。经 过对各种设置修改后，单击【保存】按钮，返 回【管理站点】对话框。
Dreamweaver CS6提供了多文档的编辑界面，将多 个文档集中到一个窗口中，用户可以单击文档编辑窗 口上方选项卡的文件名切换到相应的文档，还可以按 住鼠标左键拖动选项卡改变文档的顺序。
站点是存放一个网站所有文件的场所，由若干文 件和文件夹组成。用户在开发网站前必须先建立 站点，便于组织和管理网站文件。
在Dreamweaver中删除站点，只是删除了 Dreamweaver同本地站点之间的关系。本地 站点中的文件夹和文件，仍然保存在硬盘原来 的位置上，没有被删除，也没有任何改变。 删除站点的操作步骤如下。 选择菜单【站点】|【管理站点】，打开【管 理站点】对话框，选择要删除的站点名称，单 击【删除】按钮。 在打开的【Dreamweaver】对话框中单击 【是】按钮，选中的站点就被删除，
建立站点以后，可以对站点进行打开、编辑、 复制和删除等各种操作。
2.3.1打开站点 2.3.2编辑站点 2.3.3复制站点 2.3.4删除站点
Dreamweaver允许建立多个站点，并可以通 过切换打开需要编辑的站点。打开站点的操作 步骤如下。 选择菜单【窗口】|【文件】或按<F8>键打 开【文件】面板，单击左边的下拉框，在下拉 列表中选择要打开的站点。 打开站点后，在【本地文件】下显示该站点 内的所有文件和文件夹。
网页设计与制作课件第2章
对网页进行操作时，多使用“插入”栏和“属性”面板，那样 可以提高制作网站的效率。
上一页 返回
2.1.3用表格制作网页
上一页 返回
2.1.2 表格的修改嵌套
目标案例
2.1.2．表格的修改嵌套
在表格的单元格里嵌入一个表格，并用“属性”面板对表格或单元格进行修 改，实例最终效果如下图所示。
打 开 源 文 件
最 终 效 果 预 览
下一页 返回
操作步骤
步骤1：创建一个站点，主页为index.html页面，打开主页创建一个1行2列，宽为
步骤3：选中创建的表格，在“属性”检查器上给边框添加边框颜色为 #FF0000。
上一页 下一页 返回
知操识作点步评骤
步骤4：把鼠标移到第二个单元格，在“属性”检查器上给单元格添加背景 颜色为#00CC00。
步骤5：执行【文件】→【保存】菜单命令或利用快捷键【Ctrl+S】保存网 页文件，预览网页按【F12】键。
上一页 下一页 返回
知识点评
下面是有关表格属性的各参数含义说明。 『表格Id』如果要在网页中使用脚本语言来控制表格，就需要在该下拉 列表文本框中为表格命名。 『行』和『列』用于设置表格的行数和列数。 『宽』和『高』用于设置表格的宽度和高度。 『填充』用于设定单元格中内容与边框之间的距离，默认值为2。 『间距』用于设定单元格之间的距离，默认值为2。 『对齐』用于设表格的对齐方式。包含4个选项：“默认”“左对 齐”“居中对齐”和“右对齐”。 『边框』用于设定表格边框的宽度。
《网页设计与制作》
插入表单对象，并通过“属性”面板设置其属性。
最后利用Dreamweaver内部行为验证表单。
反馈表单效果图如图6.26所示。
4. 课时安排：2课时
精选课件ppt
27
19
6. 文件域 “文件域”的作用是用户在表单中选择文件，然后 将选中的文件内容发送到服务器。例如：用户在撰 写电子邮件时，采用文件域的方式，附加文件作为 附件传送。 单击“插入栏”｜“表单”选项｜“文件域”按钮， 或选择“插入”菜单｜“表单”｜“文件域”命令。 单击“文件域”对象，将其选中，在“属性”面板 中设置“文本域”的属性：文本域的名称、字符宽 度、最多字符数等，如图所示。
13
（2）文本区域
文本区域同样也是用来输入文本信息的，当 文本字段的类型选择为多行时，即是文本区 域。其属性与文本字段相同。
单击“插入”栏｜“表单”选项｜“文本区 域”按钮，或选择“插入”菜单｜“表 单”｜“文本区域”命令，即插入“文本区 域”对象。
精选课件ppt
14
2. 复选框
复选框是指从一组选项中选择多个选项。操作步 骤如下：
单击“插入”栏｜“表单”选项｜“单选按钮组”按钮， 或选择“插入”菜单｜“表单”｜“单选按钮组”命令， 弹出 “单选按钮组”对话框。
精选课件ppt
17
4. 列表／菜单 “列表”和“菜单”可以在有限的空间内为用户提
供更多的选项。“列表”在滚动条中显示选项 值，并可允许用户在列表中选择多个选项。 “菜单”在下拉式菜单中显示选项值，只允许 用户选择一个选项。操作步骤如下： 单击“插入”栏｜“表单”选项｜“列表／菜单” 按钮，或选择“插入”菜单｜“表单”｜“列 表／菜单”命令，即插入“列表或菜单”。 单击“列表／菜单”，将其选中，在“属性”面板 中设置“列表／菜单”的属性，如图所示。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
color:#555454;">
<ul>
<li>1在活动现场看到的最有趣的场面<label style="float: right;">2020-
08-23</label></li>
<li>2在活动现场看到的最有趣的场面<label style="float: right;">
2.7 实训——制作精选信息板块
<label style="font-size: 18px;">精选信息</label>
Байду номын сангаас
<label style="float: right;">more>></label>
</div>
<div style="margin: 8px;font-size: 14px;line-height: 33px;
08-23</label></li>
08-23</label></li>
08-23</label></li>
08-23</label></li>
08-23</label></li>
</div> </body> </html>
</div>
</ul>
<li>3在活动现场看到的最有趣的场面<label style="float: right;">2020<li>4在活动现场看到的最有趣的场面<label style="float: right;">2020<li>5在活动现场看到的最有趣的场面<label style="float: right;">2020<li>6在活动现场看到的最有趣的场面<label style="float: right;">2020<li>7在活动现场看到的最有趣的场面<label style="float: right;">2020-
习题2
1．制作如图2-21所示的课程表。
习题2
2. 制作如图2-22所示的注册表单。
习题2
3．使用<div>标签组织段落等网页内容，如图2-23所示。
《网页设计与制作教程：Web前端开发（第6版）》 刘瑞新主编 配套资源
祝贺你又学完了一章
</head>
<body>
<div style="width: 585px;border:1px solid rgb(220,220,220); margin-top: 16px;margin-left:
25px;">
<div style="height: 34px;padding-top: 5px;border:1px solid rgb(220,220,220);">
《网页设计与制作教程Web前端开发第6版》 刘瑞新主编 配套资源
第2章 块级元素
2.7 实训——制作精选信息板块
目录
第2章 块级元素
2.1 基本块级元素 2.2 列表元素 2.3 表格元素table 2.4 表单 2.5 分区元素div 2.6 缩排元素blockquote 2.7 实训—制作精选信息板块 习题2
2.7 实训——制作精选信息板块
【实训2-1】用<div>标签组织网页内容，制作精选信息板块。本例文件 pt2-1.html在浏览器中显示的效果如图2-20所示。
2.7 实训——制作精选信息板块
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>社区网主页</title>