曲桂东-Inter技术与应用教程第二版）第10章简单网页制作课件教学.pptVIP

第10章简单网 页 设 计 本章要点 网页编辑工具FrontPage及网页三剑客介绍，网页设计语言及服务器主要技术介绍 Dreamweaver MX简介，定义站点 制作网页的基本方法与操作 时间线动画的使用 站点管理与网页发布 10.1网页制作技术概要 10.1.1网页制作工具简介 10.1.2网页设计语言 10.1.3 服务器端主要技术 10.1.1网页制作工具简介 10.1.2 网页设计语言 HTML语言 超文本标记语言，是一种描述文档结构的标记语言。 JavaScript 是Netscape首创的一种新型Script语言。用JavaScript语言书写的“程序”嵌入到HTML脚本中，再由支持JavaScript的浏览器进行解释并执行。 VBScript 重要的Web脚本语言之一，是IIS、ASP、CGI程序设计的基本工具，也是Microsoft ActiveX和COM技术的重要组成部分 10.1.3 服务器端主要技术 ASP简介 是一套微软开发的服务器端脚本环境。 JSP简介 是Java Server Page的简称，是由Sun公司推出的一种交互式网页编译技术。 10.2 Dreamweaver MX基础 10.2.1 初步认识 Dreamweaver MX 10.2.2 制作前的准备工作——定义站点 10.2.1 初步认识 Dreamweaver MX DreamweaverMX 的启动 编辑窗口 站点窗口 10.1.2 制作前的准备工作—定义站点 定义站点 本节主要内容及要求 熟悉DW MX的窗口组成 熟悉属性面板、面板组的打开、关闭方法 熟悉插入栏的各个选项卡 熟悉站点窗口 会定义站点、编辑站点 10.3 创建基本Web页 10.3.1 新建网页 10.3.2 设置页面属性 10.3.3 层的使用 10.3.4 文字的处理 10.3.5 表格的使用 10.3.6 插入图片及Flash按钮 10.3.7 建立超级链接 10.３.1 新建网页 方法一：选择“我的网站”窗口菜单上的“文件”|“新建文件”项 方法二：在本地目录选中需要新建页面的目录，单击右键，选择“新建文件”项 新建页面的默认文件名为untitled.htm，将默认文件名由untitled.htm 改为index.htm。 网站首页的名字通常是index.html 10.3.2 设置页面属性 “修改”|“页面属性” 10.3.3 层的使用 单击属性面板的 按钮，光标会成为一个十字，在编辑窗口上拖动，就可以创建出一个层 。层可以放置在页面的任何位置 10.3.4 文字的处理 在层中输入文字， 选中文字 ，单击属性面板的字体列表 ，选择“编辑字体列表…” 编辑字体列表 单击颜色按钮弹出调色板，在这里选择文字的颜色。 10.3.5 表格的使用 表格是网页中非常重要的元素，一般借助表格实现网页的精细排版。 单击插入栏“常规”选项卡 ，显示“插入表格”对话框 　在表格线上单击，可以选中整个表格，可看到对应的属性面板。 10.3.6 插入图片及Flash按钮 将光标移到1个层中，单击插入栏上“常用”选项卡上的 按钮，然后弹出对话框，选择需要插入的图片 单击“插入”-“交互式图像”-“Flash按钮”弹出“插入FLASH按钮”对话框。 将现有层转换为表格：单击“修改”“转换”-“层到表格”，弹出“转换层为表格”对话框，单击“确定”按钮 10.3.7 建立超级链接 1．文字超链接 2．图片链接 3．FLASH按钮链接 4．创建电子邮件链接 “插入”|“电子邮件链接”命令 　 10.4 时间线动画 10.4.1 时间轴面板 通过“窗口”-“其它”-“时间轴”显示时间轴面板 主要功能： Fps：动画播放速度（帧/秒）。 行为通道：在行为通道的左边有一个“B”字，它是Behavior的缩写，意思是行为。 时间轴：时间轴上显示帧的序号。 动画通道：显示层和图像的动画条。 动画条：动画条中显示层的名字，表示了该层的动画范围。两边小圆圈表示关键帧。 时间轴面板 10.4.2 创建时间线动画 1．新建一个文档，保存为time1.htm，标题为“天使”。 2．在文档中插入一个层Layer1,在该层中插入飞翔的天使（gif图片。 3．将图层Layer1拖到时间轴第一动画通道的第1帧处，并单击动画通道末尾15帧处，移动图层到窗口最右边，选中“自动播放”、“循环”复选框。 4．单击第7帧处，执行右键弹出菜单中的增加关键帧命令或按F6键，增加关键帧。 5．在文档窗口拖动图层向下，此时可见运动轨迹由直线变成了曲线。按F12键，在浏览器中看到天使按运动轨迹运动起来。 10.4.3 录制层路径