《动态网页设计与制作实用教程》电子教案(1).pptx

《《动态网页设计与制作实用教程》电子教案(1).pptx》由会员分享，可在线阅读，更多相关《《动态网页设计与制作实用教程》电子教案(1).pptx（289页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、 动态网页设计与制作实用教程动态网页设计与制作实用教程 电子教案电子教案制制 作：程伟渊作：程伟渊 任俊杰任俊杰2021/9/121目 录n网页设计概述nFlash MX基础知识n动画角色的绘制与编辑n动画的基本形式n洋葱皮、图层及声音的应用n动画技术的综合应用nFireworks MX基础知识n位图编辑与动画制作n图像的优化与导出nDreamweaver MX基础知识n设计页面布局n网页元素的添加与编辑n链接、库与模板n浏览器动态网页的制作n服务器动态网页知识基础n服务器动态网页的制作n动态网页设计实例n站点管理2021/9/1221.1 1.1 网网页设计页设计的基本方式的基本方式 1.2

2、 1.2 网网页页中的常中的常见见元素元素 1.3 1.3 网网页页元素的元素的创创作与作与编辑编辑工具工具 1.4 HTML1.4 HTML基基础础知知识识 1.5 1.5 动态动态网网页页的支持技的支持技术术 第第1章章 网页设计概述网页设计概述2021/9/123第第2章章 Flash MX基础知识基础知识 2.1 认识 Flash MX 2.2 Flash MX 的工作界面 2.3 创建与保存动画 2021/9/124第第3章章 动画角色的绘制与编辑动画角色的绘制与编辑 3.1 图形角色的绘制与填充 3.2 编辑图形角色 3.3 角色创作实例2021/9/125第第4章章 动画的基本形

3、式动画的基本形式 4.1 动画制作的有关概念 4.2 三种基本动画形式2021/9/126第第5章章 洋葱皮、图层及声音的应用洋葱皮、图层及声音的应用 5.1 洋葱皮效果的应用 5.2 图层的应用 5.3 声音效果的应用 2021/9/127第第6章章 动画技术的综合应用动画技术的综合应用 6.1 交互动画的制作 6.2 动画的输出与优化 6.3 动画制作综合实例 2021/9/128第第7章章 Fireworks MX基础知识基础知识 7.1 网页图像概述 7.2 认识 Fireworks MX 7.3 矢量图像的绘制与编辑 7.4 修改对像 2021/9/129第第8章章 位图编辑与动画制

4、作位图编辑与动画制作 8.1 位图的编辑 8.2 在Fireworks MX中建立动画实例 2021/9/1210第第9章章 图像的优化与导出图像的优化与导出 9.1 图像的优化 9.2 图像的导出 2021/9/1211第第10章章Dreamweaver MX基础知识基础知识 10.1 认识Dreamweaver MX 10.2 本地站点的建立 10.3 网页的建立与保存 2021/9/1212第第11章章 设计页面布局设计页面布局 11.1 使用表格对页面进行布局 11.2 在布局视图中对页面进行布局 11.3 使用框架对页面进行布局 11.4 使用层对页面进行布局 2021/9/1213

5、第第12章章 网页元素的添加与编辑网页元素的添加与编辑 12.1 添加文本和设置文本格式 12.2 图像的添加与编辑 12.3 媒体的添加与编辑 12.4 表单的添加与编辑 2021/9/1214第第13章章 链接、库与模板链接、库与模板 13.1 链接 13.2 库项目 13.3 模板 2021/9/1215第第14章章 浏览器动态网页的制作浏览器动态网页的制作 14.1 行为与行为面板 14.2 应用行为制作动态网页 2021/9/1216第第15章章 服务器动态网页知识基础服务器动态网页知识基础 15.1 ASP 技术基础 15.2 脚本语言简介 15.3 数据库基础知识 15.4 测试

6、服务器的建立 15.5 ASP 应用程序举例 2021/9/1217第第16章章 服务器动态网页的制作服务器动态网页的制作 16.1 动态站点的建立 16.2 后台数据库的设计 16.3数据提交功能的实现 16.4 数据显示功能的实现 16.5 数据查询功能的实现 16.6 数据维护功能的实现 16.7 成绩管理系统主页的建立 2021/9/1218第第17章章 服务器动态网页的制作服务器动态网页的制作 17.1 网上新闻发布 172 网上投票系统的设计 2021/9/1219第第18章章 站点管理站点管理 18.1 测试本地站点 18.2 站点文件的上传 18.3 站点的维护与管理 18.4

7、 宣传自己的网站 2021/9/1220附录：经典网页赏析附录：经典网页赏析 经典网页赏析1经典网页赏析2经典网页赏析3经典网页赏析4经典网页赏析5经典网页赏析62021/9/12211.1 1.1 网网页设计页设计的基本方式的基本方式 1.1.1 手工编码方式1.1.2 利用可视化工具1.1.3 手工编码与可视化工具结合 2021/9/12221.2 1.2 网网页页中的常中的常见见元素元素1.2.1 文本1.2.2 图象与动画1.2.3 音频与视频 1.2.4 超级链接1.2.5 表格1.2.6 表单1.2.7 导航栏1.2.8 其他元素2021/9/12231.3 1.3 网网页页元素的

8、元素的创创作与作与编辑编辑工具工具1.3.1 网页图像制作工具1.3.2 动画制作工具1.3.3 网页编辑工具 2021/9/12241.4 HTML1.4 HTML基基础础知知识识1.4.1 HTML的基本概念1.4.2 HTML的基本语法结构 2021/9/12251.5 1.5 动态动态网网页页的支持技的支持技术术 1.5.1 ASP 技术1.5.2 PHP 技术1.5.3 JSP 技术 2021/9/12262.1 2.1 认识认识 Flash MX Flash MX 2.1.1 Flash MX的发展2.1.2 Flash MX的新增功能 2021/9/12272.2 Flash M

9、X 2.2 Flash MX 的工作界面的工作界面 2.2.1 菜单栏2.2.2 工具栏和绘图工具箱2.2.3 时间轴面板2.2.4 属性面板2.2.5 其他面板2021/9/12282.3 2.3 创创建与保存建与保存动动画画 2.3.1 创建与保存动画2.3.2 文档属性设置 2021/9/12293.1 3.1 图图形角色的形角色的绘绘制与填充制与填充 3.1.1 图形角色的绘制3.1.2 颜色的填充 2021/9/12303.2 3.2 编辑图编辑图形角色形角色 3.2.1 选取角色3.2.2 复制和删除3.2.3 擦除角色工具3.2.4 变形工具2021/9/12313.3 3.3

10、角色角色创创作作实实例例 3.3.1 3.3.1 笑脸笑脸/哭脸的绘制哭脸的绘制 3.3.2 花朵的制作花朵的制作3.3.3 3.3.3 放大镜绘制放大镜绘制 3.3.4 水晕的制作水晕的制作3.3.5 3.3.5 放射齿轮的绘制放射齿轮的绘制 3.3.6 弯月的制作弯月的制作2021/9/12324.1 4.1 动动画制作的有关概念画制作的有关概念 4.1.1 场景4.1.2 时间轴4.1.3 帧4.1.4 元件2021/9/12334.2 4.2 三种基本三种基本动动画形式画形式 4.2.1 逐帧动画的制作4.2.2 位移动画的制作4.2.3 变形动画 2021/9/12345.1 洋葱皮

11、效果的葱皮效果的应应用用 Flash MX 中有种专门的多帧编辑与对齐模式，叫作洋葱皮效果(Onion Skin)，它们位于时间轴下面。把洋葱皮视图模式打开，点按时间轴下面的图标，时间轴会变成时间轴上出现了两个圆圈，它们分别代表洋葱皮的起始帧与终止帧，凡是在这个范围内的帧都可在同时间进行显示。现在我们把右边的圆圈拉到第30 帧工作区中的内容也会有所变化，从第1帧到第30帧的内容全显示出来了。洋葱皮模式的作用主要是用来进行多帧编辑，在进行起始帧与终止帧的元素精确定位时，它常常是必不可少的工具。元件有个中心点，它是缩放与旋转操作的参照点，因此在进行多帧编辑时有必要先改变元件的中心点再进行编辑。改变

12、元件中心点的操作是在元件的编辑窗口中进行的。2021/9/12355.2 5.2 图层图层的的应应用用 5.2.1 图层的状态5.2.2 图层的基本操作5.2.3 图层的属性5.2.4 引导层5.2.5 遮罩层2021/9/12365.3 5.3 声音效果的声音效果的应应用用 5.3.1 影响声音质量的因素5.3.2 音频文件的导入5.3.3 给动画加上声音2021/9/12376.1 6.1 交互交互动动画的制作画的制作 6.1.1 交互动画的原理6.1.2 简单交互动画的制作6.1.3 交互动画实例6.1.4 交互性的检测2021/9/12386.2 6.2 动动画的画的输输出与出与优优化

13、化 6.2.1 Flash 动画的输出6.2.2 Flash 动画的优化 2021/9/12396.3 6.3 动动画制作画制作综综合合实实例例 6.3.1 下落的弹性小球6.3.2 放大镜 6.3.3 水中倒影 6.3.4 光笔写字光笔写字6.3.5 书本翻页6.3.6 电子琴6.3.7 鼠标跟随效果的制作鼠标跟随效果的制作 6.3.8 秋雨连绵 2021/9/12407.1 网页图像概述7.1.1 图像的格式7.1.2 矢量图像和位图图像 2021/9/12417.2 认识 Fireworks MX7.2.1 Fireworks MX的特点7.2.2 Fireworks MX 的工作界面7

14、.2.3 文档的基本操作2021/9/12427.3 矢量图像的绘制与编辑7.3.1 图像的绘制模式7.3.2 矢量图像的绘制7.3.3 布局工具的使用7.3.4 标题文字的制作 2021/9/12437.4 修改对像7.4.1 选择对像7.4.2 组织和管理对像7.4.3 整形路径 2021/9/12448.1 位图的编辑8.1.1 位图编辑工具8.1.2 位图编辑实例 2021/9/12458.2 在Fireworks MX中建立动画实例8.2.1 建立动画对象8.2.2 动画的设定8.2.3 动画预览8.2.4 动画的编辑8.2.5.编辑运动路径8.2.6 输出gif动画 2021/9/

15、12469.1 图像的优化9.1.1 优化图像应考虑的因素9.1.2 图像优化的途径2021/9/12479.2 图像的导出9.2.1 常规输出9.2.2 输出一个图像的区域9.2.3 输出切片9.2.4 输出Flash格式9.2.5 使用“导出向导”2021/9/124810.1 认识Dreamweaver MX10.1.1 Dreamweaver MX的新增功能10.1.2 Dreamweaver Mx的工作区10.1.3 常规参数的设置10.1.4 在多用户系统中自定义 Dreamweaver MX2021/9/124910.2 本地站点的建立10.2.1 关于站点规划和设计10.2.2

16、 本地站点的建立与编辑 2021/9/125010.3 网页的建立与保存 在完成了本地站点的定义之后，现在开始建立我们的第一个网页，操作步骤如下：1.选择网页格式选择网页格式 选择“文件/新建”菜单或使用“标准工具栏”的新建按钮，则打开一个对话窗口。选择“基本页”中的“HTML”模式。点击右下角的“创建”按钮，打开一个新的文件窗口。2.设置网页属性设置网页属性 在编辑新网页前应该先设置页面属性，也就是对页面进行整体规划。页面属性的设置操作为：选择“修改/页面属性”或在工作区按鼠标右键选择弹出菜单中的“页面属性”选项激活属性设置面板。设置完毕点击右上角的“确定”按钮。3.编辑网页元素编辑网页元素

17、 在网页上添加文本、图片、表格等网页元素。4.在网页中加注释在网页中加注释（1）选中插入注释的位置。（2）选择“插入/文本对象/注释”菜单，在窗口中输入注释内容。（3）编辑注释：双击页面中的注释图标即可进入编辑界面。5保存网页保存网页选择“文件/保存”菜单，给网页命名并存入相应文件夹。2021/9/125111.1 使用表格对页面进行布局11.1.1 创建表格11.1.2 表格的编辑11.1.3 对表格进行排序 2021/9/1252 11.2 在布局视图中对页面进行布局11.2.1 布局视图简介11.2.2 布局视图的切换11.2.3 绘制布局单元格和表格11.2.4 向布局单元格中添加内容

18、11.2.5 布局单元格的调整11.2.6 设置布局单元格的格式11.2.7 设置布局视图参数 2021/9/1253 11.3 使用框架对页面进行布局11.3.1 框架（集）概述11.3.2 创建框架和框架集11.3.3 选择框架和框架集11.3.4 在框架中打开文档11.3.5 保存框架和框架集文件11.3.6 设置框架（集）属性2021/9/1254 11.4使用层对页面进行布局11.4.1 层的创建11.4.2 层的基本操作11.4.3 向层添加内容11.4.4 修改现有层的属性11.4.5 层和表的转换2021/9/125512.1 添加文本和设置文本格式12.1.1 文本元素的添加

19、和编辑12.1.2 HTML 样式的应用12.1.3 层叠样式（CSS）的应用 2021/9/125612.2 图像的添加与编辑12.2.1 添加图像12.2.2 编辑图像 2021/9/125712.3 媒体的添加与编辑12.3.1 添加 Flash 影片12.3.2 添加 Shockwave 影片12.3.3 向页面添加视频12.3.4 向页面添加声音2021/9/125812.4 表单的添加与编辑 12.4.1 表单及表单对象 2021/9/125913.1 链接13.1.1 链接的创建与管理13.1.2 链接的应用2021/9/126013.2 库项目13.2.1 认识“库“项目13.

20、2.2 创建和编辑库项目13.2.3.使用库项目 2021/9/126113.3 模板13.3.1 创建编辑模板13.3.2 应用模板13.3.3 更新模板 2021/9/126214.1 行为与行为面板14.1.1 行为的工作原理14.1.2 行为面板的应用2021/9/126314.2 应用行为制作动态网页14.2.1 与层有关的行为14.2.2 打开浏览器窗口14.2.3 播放声音14.2.4 弹出消息14.2.5 设置文本14.2.6 显示弹出式菜单14.2.7 检查表单14.2.8 制作时间线动画14.2.9 检查浏览器14.2.10 检查插件2021/9/126415.1 ASP

21、技术基础15.1.1 ASP的概念与工作流程15.1.2 ASP应用程序15.1.3 ASP的内建对象 2021/9/126515.2 脚本语言简介15.2.1 VBscript基础知识15.2.2 VBScript控制结构 2021/9/126615.3 数据库基础知识15.3.1 数据库简介15.3.2 ACCESS 数据库基本操作15.3.3 数据源的建立2021/9/126715.4 测试服务器的建立 ASP应用程序的脚本代码必须用脚本引擎来解释执行。因此运行Asp程序前应该先安装包含脚本引擎的服务器管理程序IIS或PWS，也就是建立一个测试服务器。任何一台具有IP地址的计算机（没有联

22、网的计算机管理程序默认一个IP地址127.0.0.1），安装上服务器管理程序后就构成了一台服务器。常见的 Web 服务器管理软件包括IIS（Microsoft Internet Information Server）、PWS（Microsoft Personal Web Server）、Apache HTTP Server、Netscape Enterprise Server 和 iPlanet Web Server等。安装哪一种Web服务软件根据所用操作系统而定，在Windows NT及Windows 2000以上中安装IIS最为常用，在Windows95/98安装服务器软件一般只能使用PW

23、S。这里主要讲述服务器管理软的安装与服务器站点的发布过程。说明：与真正的INTERNET服务器相比，测试服务器不需要申请外部IP地址，不需要域名解析，主要用来测试本地机上的ASP应用程序。测试服务器可以是局域网上的计算机，也可以是未连网的单机。如果是局域网内的计算机设成了服务器，则它上面的站点可通过内部IP地址进行访问。如：在局域网上建立了内部IP地址为“192.168.0.51”的测试服务器，则在浏览器地址栏中输入“192.168.0.51/站点虚拟目录名/主页名”即可访问测试服务器上的站点。2021/9/126815.5 ASP 应用程序举例15.5.1 数据提交入库的程序设计15.5.2

24、 查询功能的实现15.5.2 ASP程序的调试与纠错2021/9/126916.1 动态站点的建立16.1.1 工作流程和程序结构16.1.2 建立、发布站点16.1.3 在Dreamweaver MX中定义本地站点 2021/9/127016.2 后台数据库的设计16.2.1 设计库结构，创建数据源16.2.2 在Dreamweaver MX中建立数据库 连接 2021/9/127116.3数据提交功能的实现16.3.1 表单网页的建立16.3.2 记录集的建立16.3.3 记录集与表单的绑定 2021/9/127216.4 数据显示功能的实现16.4.1 记录的显示16.4.2 动态显示多

25、条记录16.4.3 记录的计数和统计16.4.4 记录集导航条的建立 2021/9/127316.5 数据查询功能的实现16.5.1 创建查询页面16.5.2 构建结果页面16.5.3 建立查询显示详细面页 2021/9/127416.6 数据维护功能的实现16.6.1 创建登录页面16.6.2 数据维护 2021/9/127516.7 成绩管理系统主页的建立 通过上面的操作，我们已经实现了成绩管理的数据录入、查询显示、数据护等功能。为了便于用户操作使用，下面建立管理主页，将各功能集成起来。2021/9/127617.1网上新闻发布网上新闻发布17.1.1 工作流程图 17.1.2 数据表的结

26、构 17.1.3 建立数据库连接 17.1.4 新闻提交功能的实现 17.1.5 创建显示页面 17.1.6 在网页上实现对数据库的维护 2021/9/127717.2网上投票系统的设计网上投票系统的设计17.2.1 工作流程图 17.2.2 站点结构图 17.2.3 后台数据库设计 17.2.4 建立数据库连接 17.2.5 投票页面的设计 17.2.6 投票结果的柱状显示 2021/9/127818.1 测试本地站点18.1.1 测试站点网页与目标浏览器的兼容性18.1.2 预览自己的网页18.1.3 检验文件的大小及下在载时间 2021/9/127918.2 站点文件的上传18.2.1

27、文件传输的基础知识18.2.2 在Dreamweaver MX中传输站点18.2.3 存回/取出功能简介18.2.4 设计备注功能介绍18.2.5 上传网页文件到局域网 2021/9/128018.3 站点的维护与管理18.3.1 站点文件管理18.3.2 远程与本地站点同步18.3.3 检查与修正超级链接2021/9/128118.4 宣传自己的网站18.4.1 注册好记的域名18.4.2 在各大搜索引擎上登陆注册站点18.4.3 在电子邮件签名中添加站点地址18.4.4 到BBS上公布站点信息18.4.5 与相关站点彼此链接 2021/9/12821.1.1 手工编码方式 网页是由HTML

28、（HYPER TEXT MARKUP LANGUAGE）超文本标记语言编码的文本文档，设计制作网页的过程就是生成HTML代码的过程。在WWW（World Wide Web）发展的初期人们制作网页是通过直接编写HTML代码来实现的。手工编码制作网页对网页设计人员的要求较高，编码效率低，调试过程复杂，因此，对大多数网页设计人员来说采用这个方式比较困难。但手工编码可以灵活地制作出丰富的网页效果。2021/9/12831.1.2 可视化工具方式 随着网页制作技术的不断发展，出现了诸如FrontPage、Dreamweaver等可视化的网页编辑工具。利用这些工具人们在可视环境下编辑制作网页元素，由编辑工

29、具自动生成对应的网页代码。如要在网页上显示图1-1中的表格，就可以直接在工作区中绘制表格而不用考虑编码的规则和语法。利用可视化工具编辑网页操作简单直观，调试方便，是大众化的网页编辑方式。但利用可视化工具在制作一些特殊网页效果上有一定的局限性。2021/9/12841.1.3 编码和可视化工具结合方式 编码和可视化工具结合是一种比较成熟的网页制作方式。具体过程为：一般的网页元素通过可视化工具编辑制作，一些特殊的网页效果通过插入代码生成。这种方式效率高、调试方便而且可以实现丰富的网页效果，但要求设计人员既要熟悉Html语言又能运用可视化工具。除了上面三种基本的网页设计制作方式外，我们还可以通过修改

30、已有的网页代码生成自己的网页。在网页编辑制作过程中具体采用何种方式要根据个人的具体情况而定，每必要拘泥于某种固定的模式。2021/9/12851.2.1文本 文本一直是人类最重要的信息载体与交流工具，网页中的信息也以文本为主。与图象相比，文字虽然不如图象那样能够很快引起浏览者的注意，但却能准确地表达信息的内容和含义。为了克服文字固有的缺点，人们赋予了网页中文本更多的属性，如字体，字号，颜色，底纹和边框等，通过不同格式的区别，突出显示重要的内容。此外，用户还可以在网页中设计各种各样的文字列表，来清晰表达一系列项目。这些功能都给网页中的文本赋予了新的生命力。2021/9/12861.2.2图像和动

31、画 图像在网页中具有提供信息，展示作品，装饰网页，表达个人情调和风格的作用。用户可以在网页中使用GIF,JPEG(JPG),PNG三种图象格式，其中使用最 广泛的是GIF和JPEG两种格式。说明：当用户使用所见即所得的网页设计软件在网页上添加其他非GIF,JPEG,或PNG格式的图片并保存时，这些软件通常会自动将少于8位颜色的图片转化为GIF格式，或将多于8位颜色的图片转化为JPEG.在网页中为了更有效地吸引浏览者的注意，许多网站的广告都做成了动画形式。图1-2中的“无限情缘”，就是一个动画广告。2021/9/12871.2.3 声音和视频 声音是多媒体网页的一个重要组成部分。当前存在着一些不

32、同类型的声音文件和格式，也有不同的方法将这些声音添加到Web页中。在决定添加声音之前，需要考虑的因素包括其用途，格式，文件大小，声音品质和浏览器差别等。不同浏览器对于声音文件的处理方法是非常不同的，彼此之间很可能不兼容。用于网络的声音文件的格式非常多，常用的有MIDI、WAV、MP3和AIF等。设计者在使用这些格式的文件时，需要加以区别。很多浏览器不要插件也可以支持MIDI,WAV和AIF格式的文件，而MP3和RM格式的声音文件则需要专门的浏览器播放。一般来说，不要使用声音文件作为背景音乐，那样会影响网页下载的速度。可以在网页中添加一个打开声音文件的链接，让音乐播放变得可以控制。视频文件的格式

33、也非常多，常见的有Realplay,MPEG,AVI和DivX等。视频文件的采用让网页变得精彩而有动感。2021/9/12881.2.4 超级链接 超级链接技术可以说是万维网流行起来的最主要的原因。它是从一个网页指向另一个目的端的链接，例如指向另一个网页或者相同网页上的不同位置。这个目的端通常是另一个网页，但也可以是一幅图片，一个电子邮件地址，一个文件，一个程序或者是本网页中的其他位置。其热点通常是文本，图片或图片中的区域，也可以是一些不可见的程序脚本。当浏览者单击超级链接热点时，其目的端将显示在Web浏览器上，并根据目的端的类型以不同方式打开。例如，当指向一个AVI文件的超级链接被单击后，该

34、文件将在媒体播放软件中打开；如果单击的是指向一个网页的超级链接，则该网页将显示在Web浏览器上。加下划线的文字，就是已经建立了超链接的文本。2021/9/12891.2.5 表格 在网页中表格用来控制网页中信息的布局方式。这包括两方面：一是使用行和列的形式来布局文本和图像以及其他的列表化数据；二是可以使用表格来精确控制各种网页元素在网页中出现的位置。图1-2中“特色栏目”，就运用了表格进行布局定位。2021/9/12901.2.6 表单表单 使用超级链接，浏览者和Web站点便建立起了一种简单的交互关系。网页中的表单通常用来接受用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端。这个目标

35、可以是文本文件，Web页，电子邮件，也可以是服务器端的应用程序。表单一般用来收集联系信息、接受用户要求、获得反馈意见、设置来宾签名簿、让浏览者注册为会员并以会员的身份登陆站点等。表单由不同功能的表单域组成，最简单的表单也要包含一个输入区域和一个提交按钮。站点浏览者填写表单的方式通常是输入文本，选中单选按钮或复选框，以及从下拉列表框中选择选项等。根据表单功能与处理方式的不同，通常可以将表单分为用户反馈表单，留言簿表单，搜索表单和用户注册表单等类型。中右上角的“手机参与”就是一个手机号的提交表单。2021/9/12911.2.7 导航栏导航栏 导航栏是用户在规划好站点结构，开始设计主页时必须考虑的

36、一项内容。导航栏的作用就是引导浏览者游历站点。事实上，导航栏就是一组超级链接，这组超级链接的目标就是本站点的主页以及其他重要网页。在设计站点中的诸网页时，可以在站点的每个网页上显示一个导航栏，这样，浏览者就可以既快又容易的转向站点的其他网页。一般情况下，导航栏应放在网页中较引人注目的位置，通常是在网页的顶部或一侧。导航栏既可以是文本链接，也可以是一些图形按钮。图1-2中的导航栏就是一组文本链接。2021/9/12921.2.8 其他常见元素其他常见元素 网页中除了以上几种最基本的元素之外，还有一些其它的常用元素，包括悬停按钮，Java特效，ActiveX等各种特效。它们不仅能点缀网页，使网页更

37、活泼有趣，而且在网上娱乐，电子商务等方面也有着不可忽视的作用。2021/9/12931.3.1 网页图像制作工具网页图像制作工具 1.Fireworks MX 1.Fireworks MX Firework MX是Macromedia公司的产品，是目前最流行的网页图像制作软件。只有将Dreamweaver的默认图像编辑器设为Fireworks，那么在Fireworks 中制作完成网页图像后将其输出就会立即在Dreamweaver中更新。Fireworks还可以安装使用所有的Photoshop滤镜，并且可以直接导入PSD格式图像。更方便的是它不仅结合了Photoshop位图功能以及CorelDR

38、AW矢量图的功能，而且提供了大量的网页图像模板供用户使用。其最方便之处是，它可以将图像切割，图像映射，悬停按钮，图像翻转等效果直接生成HTML代码，或者嵌入到现有的网页中，或者作为单独的网页出现。2.Photo Impact2.Photo Impact Photo Impact是一个功能强大，有趣且好用的基于对象的图像编辑软件。在这个软件中，所有要编辑的图像都会向以独立的对象形式存在，用户可以一直对独立的对象进行编辑，直到满意后再将它合并到图像上。2021/9/12941.3.2 动画制作工具动画制作工具 1.Flash MX1.Flash MX Flash MX也是Macromedia公司的

39、产品，是目前最流行的矢量动画制作软件。与其它的动和软件相比，它具有一些优点：制作的是矢量图像。只有用少量矢量数据就可以描述一个复杂的对象，而占有的存储空间只是位图的几千分之一，非常适合在网络上使用。同时，矢量图像不会随浏览器窗口大小的改变而改变画面质量。使用插件方式工作。提供了一些增强功能。例如，支持位图，声音，渐变色和Alpha透明等。拥有了这些功能，用户就完全可以建立一个全部由Flash制作的站点。Flash影片也是一种流式文件。这就是说，浏览者在观看一个大动画时，可以不必等到影片全部下做到本地在观看，而是可以随时观看，即使后面的内容还没有完全下载，也可以开始欣赏动画。2.Director

40、 Director是Macromedia公司推出的多媒体开发工具，它为广大多媒体制作人员提供了建立交互式应用的强大功能。用户可以在友好的界面下通过使用Director制作出令人满意的多媒体作品。Director是一个简单且直观的软件，即使是首次使用该软件的用户也能编出优秀的程序。而且，Director又是一个高度面向对象的工具，非常适合图像设计者使用。2021/9/12951.3.3 网页编辑工具网页编辑工具 1.FrontPage 20001.FrontPage 2000 FrontPage FrontPage 20002000是是Microsoft Microsoft Office Off

41、ice 20002000家家族族中中的的一一员员，FrontPage FrontPage 20002000的的界界面面，功功能能与与Word Word 2000 2000 都都非非常常相相似似。FrontPage2000FrontPage2000提提供供了了相相当当数数量量的的模模版版和和向向导导，使使初初学学者者能能够够非非常常容容易易的的设设计计出出美美观观实实用用的的网网页页。FrontPage FrontPage 20002000最最强强大大之之处处，是是其其站站点点管管理理与与远远程程发发布布功功能能。用用户户只只需需在在本本地地对对网网页页进进行行编编辑辑，FrontPage Fr

42、ontPage 20002000便便会会跟跟踪踪用用户户编编辑辑过过的的文文件件，在在发发布布时时，自自动动将将修修改改过过的的网网页页进进行行发发布布，未未编编辑辑过过的的网网页页可可由由用用户户决决定定是是否否再再次次向向服服务务器发送。器发送。2.Dreamweaver MX 2.Dreamweaver MX Dreamweaver Dreamweaver MXMX和和Fireworks Fireworks MXMX、Flash Flash MXMX一一起起，被被人人们们喻喻为为“网网页页制制作作三三剑剑客客”。同同FrontPageFrontPage一一样样，DreamweaverDr

43、eamweaver也也是是“所所见见即即所所得得”的的网网页页编编辑辑软软件件。它它能能够够很很好好的的支支持持ActiveX,ActiveX,JavaScript,JavaScript,Java,Java,FlashFlash和和ShockwaveShockwave等等，而而且且还还能能通通过过鼠鼠标标拖拖动动的的方方式式从从头头到到尾尾制制作作动动态态的的HTMLHTML效效果果。DreamweaverDreamweaver还还采采用用了了Roundtrip Roundtrip HTMLHTML技技术术，使使用用这这些些技技术术，网网页页可可以以在在DreamweaverDreamweav

44、er和和HTMLHTML代代码码编编辑辑器器之之间间进进行行自自由由转转化化，而而HTMLHTML语语法法及及结结构构不不变变。这这样样，专业设计者可以在不改变原有编辑习惯的同时，充分享受到专业设计者可以在不改变原有编辑习惯的同时，充分享受到“所见即所得所见即所得”带来的方便。带来的方便。Dreamweaver Dreamweaver 3.HotDog 3.HotDog HotDogHotDog是是较较早早基基于于代代码码的的网网页页设设计计工工具具，其其最最具具特特色色的的地地方方是是提提供供了了许许多多向向导导工工具具，能能帮帮助助设设计计者者制制作作页页面面中中的的复复杂杂部部分分。Ho

45、tDogHotDog的的高高级级HTMLHTML支支持持插插入入marqueemarquee（动动态态文文本本标标记记），并并能能在在预预览览模模式式中中以以正正常常速速度度观观看看。这这点点非非常常难难得得，因因为为即即使使首首创创这这种种标标签签的的MicrosoftMicrosoft在在FrontPage FrontPage 9898中中也也未未提提供供这这样样的的功功能能。HotDogHotDog对对plugpluginin的的支支持持也也远远远远超超过过其其他他产产品品，它它提提供供的的对对话话框框允允许许你你以以手手动动方方式式为为不不同同格格式式的的文文件件选选择择不不同同的的选

46、选项项。但但对对中中文文的的处处理理不不很很方方便便。HotDogHotDog是是个个功功能能强强大大的的软软件件，对对于于那那些些希希望望在在网网页页中中加加入入CSSCSS、JavaJava、RealVideoRealVideo等复杂技术的高级设计者，是个很好的选择。等复杂技术的高级设计者，是个很好的选择。2021/9/12961.4.1 HTML基本概念基本概念 1.HTML1.HTML的概念的概念 HTML HTML是一种描述语言，对是一种描述语言，对WEBWEB页面中显示内容的属性以标签的形式进行描述。客户机上的页面中显示内容的属性以标签的形式进行描述。客户机上的浏览器（浏览器（br

47、owserbrowser）对这些描述进行解释将相应页面内容正确显示在显示器上。一个）对这些描述进行解释将相应页面内容正确显示在显示器上。一个WEBWEB页面页面就是一个就是一个HTMLHTML文档文档 。2.HTML2.HTML文档的构成文档的构成 HTML HTML文档由三大元素构成：文档由三大元素构成：HTMLHTML元素、元素、HEADHEAD元素和元素和BODYBODY元素。每个元素又包含各自相应元素。每个元素又包含各自相应的标记（属性）。的标记（属性）。HTMLHTML元素是最外层的元素，里面包含元素是最外层的元素，里面包含HEADHEAD元素和元素和BODYBODY元素。元素。HE

48、AD HEAD元素中包元素中包含对文档基本信息（文档标题，文档搜索关键字、文档生成器等）描述的标记。含对文档基本信息（文档标题，文档搜索关键字、文档生成器等）描述的标记。BODYBODY元素是元素是文档的主体部分，包含有对网页元素（文本、表格、图片、动画、链接等）描述的标记。文档的主体部分，包含有对网页元素（文本、表格、图片、动画、链接等）描述的标记。HTMLHTML中标记一般成对，如：中标记一般成对，如：HTML等，但也有一些不成对。等，但也有一些不成对。HTML HTML文档的结构形式如下：文档的结构形式如下：HTML VERSION=-/W3C/DTD HTML 3.2 FINAL/EN

49、”页面信息的描述页面信息的描述 页面元素的描述页面元素的描述 3.HTML 3.HTML 文档的编辑文档的编辑 HTML HTML 文档是普通文本文档是普通文本(ASCII)(ASCII)文件文件,它可以用任意编缉器它可以用任意编缉器(如如windowswindows中的记事本、写中的记事本、写字板字板,Macintosh,Macintosh 中的中的BBEditBBEdit等等)生成。生成。你也可以使用字处理软件你也可以使用字处理软件,不过要记住存文件时要不过要记住存文件时要存成存成“带回车的纯文本带回车的纯文本”。早期网页制作的过程就是直接书写。早期网页制作的过程就是直接书写HTMLHTM

50、L代码来定义页面元素的过代码来定义页面元素的过程。程。2021/9/12971.4.2 HTML的基本语法结构的基本语法结构 1.HTML1.HTML元素的标记元素的标记 HTML HTML标记标记HTML标记是对整个文档属性的描述，即告诉浏览器标记是对整个文档属性的描述，即告诉浏览器HTML文档的开始与结束文档的开始与结束。2.HEAD元素元素（1）HEAD标记标记该标记用来表示该标记用来表示HEAD元素的开始和结束。元素的开始和结束。（2）BASE标记标记(不成对标记不成对标记)。（3 3）METAMETA标记（不成对标记）标记（不成对标记）（4）TITLE标记标记 （5 5）SCRIPT