第5章_网页设计.ppt

1、第5章 网页设计,大学计算机基础教程,本章主要内容： 1网页编辑工具FrontPage 2003的使用 利用Dreamweaver MX 2004制作网页 使用Flash MX 2004制作网页动画的基本方法。,5.1 设计网站的一般步骤, 总体规划； 准备设计网站所需的素材； 创建站点和制作网页； 浏览和测试站点及网页； 申请存放网页空间； 发布站点； 站点的维护和更新。,5.2 FrontPage 2003,FrontPage 2003启动 执行“开始”“所有程序”“Microsoft Office” “Microsoft Office FrontPage 2003”命令，启动FrontP

2、age 2003。,5.2.2 制作网页的方法 创建网页可以用以下三种方法：一是利用自己创建的网页模板创建网页；二是直接设计和创建网页；三是利用FrontPage提供的模板和向导创建网页。本节只讲直接设计和创建网页。 直接设计和创建网页，具体操作步骤： 执行“文件”“新建”命令； 在主窗口单击“新建网页”选项下的“空白网页”，进入设计窗口进行网页的设计。,5.2.3 网页视图 “设计”视图。 “代码”视图。 “拆分”视图。 “预览”视图。,5.2.4 制作网页 创建一个新的网页或者打开一个已经存在的网页后，可以对网页进行一些设计操作：使用框架、表格、布局或绝对定位来定位网页上的文本和图形；使用

3、添加文本、图形、网页横幅、表格、表单、超链接等网页元素来设计网页；添加Flash内容、视频、声音或GIF动画等动态元素给网页增加动态效果；添加字幕、计数器、时间、交互式按钮等给网页增加更丰富的内容；用颜色或图片可以设置网页背景等。,制作网页有一些操作方法与Word相同，相同地方本节不再介绍，例如文本的输入、文本的删除、文本的移动和复制、文本的颜色、文本的字体、字型和大小等。本节只介绍使用FrontPage 2003制作网页的基本方法。,5.2.4 制作网页 制作网页的基本操作 在网页中可插入如下内容： 插入换行符。 插入水平线。 插入注释。, 网页背景设置 如果使用图片或者某种颜色作为网页背景

4、，操作步骤如下： 在“网页”视图文档窗口的底部，单击“设计”按钮； 右击该网页，再单击快捷菜单上的“网页属性”，出现“网页属性”对话框，如图5-2所示； 选择“格式”选项卡，在“背景”项中，选择“背景图片”，如图5-3所示；, 单击“浏览”按钮，选择图片存放的位置； 单击背景图片的文件，然后单击“打开”； 如果要将图片按水印形式添加，选择“使其成为水印”复选框。 单击“确定”命令按钮； 执行“文件”“在浏览器中预览”命令，浏览设置背景图片的效果。 如果将背景设置成一种颜色，可在“网页属性”对话框中，选择“颜色”项下的“背景”下拉框，选择一种颜色，单击“确定”命令按钮返回。, 插入图片和编辑图片

5、 插入图片 执行“插入”“图片”“来自文件”命令，可以从当前站点选择图片文件，也可以从对话框提供的资源管理器中选择文件。当需要对图片进行编辑时，先选择图片，然后利用图片工具栏对图片进行编辑。如果要将插入的图片作为网页的背景，右击图片区域任意点，在出现的快捷菜单中执行“显示图片工具栏”命令，然后再作相应的选择即可。, 在图片上写字(图片文件格式必须为GIF格式) 在图片上写字的具体操作步骤如下: 选择网页上的图片； 执行“视图”“工具栏”“图片”命令； 单击“图片”工具栏上的“文本”按钮； 在图片文本上输入文字； 若改变文本的属性，可以执行“格式”“字体”命令，在弹出的“字体”对话框中选择有关选

6、项进行设置。, 图片透明的设置 透明是指透过图片可以看见背景。使图片透明的具体操作步骤如下: 执行“视图”“工具栏”“图片”命令； 单击“图片”工具栏上“设置透明色”按钮； 在图片的某种颜色上单击。, 图片翻转的设置 在网页设计中，需要将图片旋转一个角度，其操作步骤如下: 执行“视图”“工具栏”“图片”命令； 单击“图片”工具栏上“向右旋转90 ”(或者向左旋转90、水平翻转、垂直翻转)按钮。, 图片的剪切 假若只使用一幅图的某一部分时，可以使用剪切的方法。其具体操作步骤如下： 执行“视图”“工具栏”“图片”命令，出现“图片”工具栏； 单击“图片”工具栏的“裁剪”按钮，这时图形四周的小点变成黑

7、色，同时还出现了一个裁剪框，调整裁剪框的大小，单击“裁剪”按钮，图片即剪切完成，并将裁剪下来的图片放在网页上。 如果进行了多次剪切操作，图片已不完整，若要重新剪切，可以单击“绘图”工具栏上最右边的“还原”按钮，图片就被恢复。, 保存带有图片的网页,如果网页中嵌有图片，保存网页时图片不会与网页保存在一个文件中，如果网页中的图片取自本地磁盘，在保存网页时，会弹出一个“另存为”的对话框，单击对话框中的“保存”按钮，又弹出一个“保存嵌入式文件”对话框，此时可对保存的位置进行选择，最后按“确定”按钮保存返回。, 超链接的设置,通过超链接可以访问网页内部及其它的网页、网站的内容。 创建超链接。在页面视图中

8、选择超链接的文本或者图片，执行“插入”“超链接”命令，在出现的超链接对话框中，根据超链接的对象(当前网站中的网页、其它网站的网页地址、信箱地址、本地磁盘的文件)选择不同的操作。 创建热点。热点是图片上能够建立超链接的区域，一幅图片上可以创建多个热点。,创建热点的方法如下：选定图片，单击图片工具栏上的热点形状按钮（例如圆、矩形、椭圆)，拖动鼠标在图片上画出热点区域(例如圆、矩形、椭圆)，热点区域画好之后随即弹出一个“创建超链接”对话框，在对话框内设定连接目标，点击“确定”按钮返回。 更改超链接。选定要更改超链接的目标，执行“插入”“超链接”命令，打开“编辑超链接”对话框，在“超链接地址栏”中重新

9、输入一个连接对象的名字或网址。 删除超链接。选定要删除超链接的目标，执行“插入”“超链接”命令，打开“编辑超链接”对话框，单击“删除链接”，单击“确定”按钮即可。, 插入表格和编辑表格 如果要让网页有更好的布局和格式，使用表格是一种好方法。 插入表格 表格插入的方法与在word中插入表格的方法相同，执行“表格”“插入”“表格”或“绘制表格”命令创建表格，也可单击工具栏中的“插入表格”按钮插入表格，还可使用手动绘制表格的方法绘制表格。, 选定表格中的单元格、行、列和块 选定一个单元格。按下Alt键，单击单元格。 选定行。当鼠标指针在表格左侧变为向右的箭头时单击。 选定列。当鼠标指针在表格某列上侧

10、变为向下的箭头时单击。 选定块。按下鼠标左键在表格中拖动。 合并、拆分和删除表格 选定删除、合并、拆分的单元格，执行“表格”菜单中相应的命令完成，如图5-6所示。 格式化表格 在表格中设置表格的背景、底纹、大小等，可执行“表格”“表格属性”“表格”菜单相应的命令完成。, 给表格添加标题 单击要插入标题的单元格，执行“表格”“插入”“标题”命令，这时表格上方出现一个插入点，在插入点中输入标题文字，表格上方的标题即添加完成。 设置隐藏表格线 右单击表格，在弹出的快捷菜单中执行“表格属性”命令，将边框粗细设置为“0”即可。 设置表格背景颜色 设置表格背景颜色的步骤为：切换到普通模式，在表格上右击，执

11、行“表格属性”命令，在背景颜色下拉列表中选择一种颜色，单击“确定”按钮即可。, 设置表格立体效果 设置表格立体效果的步骤为：在表格上右击，在弹出的快捷菜单中执行“表格属性”命令，设定边框粗细，将“亮边框”颜色和“暗边框”颜色分别设为不同颜色，最后单击“确定”按钮即可。 改变表格对齐方式 改变表格对齐方式的步骤为：在表格上右击，在弹出的快捷菜单中执行“表格属 性”命令，在“对齐方式”下拉框中选择对齐方式即可。, 网页特殊效果的设置 网页动画效果的设置 动画效果是指当用户触发的事件发生时，引起网页上的某一元素发生变化，可以引起浏览网页者的注意，同时使网页显得生动。,添加动画效果的具体操作步骤如下：

12、 执行“视图”“工具栏”“DHTML效果”命令出现“DHTML效果”工具栏，如图5-4所示； 选择“设计”页面视图中需要添加动画效果的文字、图片等； 单击“DHTML效果”工具栏的“在(0)”右方的下三角图标，选择并单击开始启用效果的事件； 在“应用（A)”框中，选择一种动画； 在“到顶端”框中，选择一种路径或效果。, 滚动字幕的设置 在网页中创建字幕可以在浏览器中显示一条水平滚动的文本信息，具体操作步骤如下： 选中要设置滚动的文本，然后执行“插入”“web组件”命令，打开“插入web组件”对话框； 在“组件类型”下拉列表中，选择“动态效果”项，再在“选择一种效果”列表中选择“字幕”选项； 单

13、击“完成”按钮，打开“字幕属性”对话框，如图5-5所示； 在“速度”选项组中设定字幕移动的速度，在“背景色”列表框中设置字幕滚动文本的背景色； 单击“确定”按钮，切换到“预览”视图，即可看到其效果，如图5-6所示。,网页预览 网页设计好之后，单击浏览器“预览”按钮可检查网页设计的效果。也可执行“文件”“在浏览器中预览”命令浏览网页设计的效果。如果不合适，在“设计”视图下进行设置和修改，直至达到目的。,5.3 Dreamweaver MX 2004,Dreamweaver MX 2004 基本知识 Dreamweaver MX 2004的界面 文档窗口 属性面板 工具栏,创建简单的网页 Drea

14、rnweaver在进行文字与图片的插入时非常直观，它们在编辑器中的样式，基本上与在浏览器中的最终效果是一致的，因此，只要学会使用Word，就能很快掌握Dreamweaver的网页制作技术。本节从制作一个图文混排的网页入手，开始学习网页制作全过程。 创建空白网页 页面属性的设置 文本编辑 插入图像（图片） 添加水平线,鼠标经过图像的设置 插入Flash动画文件 插入音乐文件 在代码编辑窗口添加音乐文件 滚动公告板的制作,5.3.3 超级链接 在网页上单击一些文字、图片或其它元素就可以打开相应的页面，而这些元素就是超链接。超链接完成了各个页面的跳转，使整个网站作为一个有机的整体出现在访问者面前。

15、建立超级链接 创建热点链接 创建同一页面的内部链接,表格的应用，最简单的理解是作为数据表进行显示。 在实际应用过程中，表格更多地用在网页定位上，只需通过设定表格宽度、高度、彼此之间的比例大小等，就可以把不同的网页元素分别“框”在不同的单元格之中以达到页面的平衡。 Dreamweaver提供了诸如表格、框架、图层，以及版面规划（Layout）等网页定位技术，将数据、文本、图片、表单等元素有序地排列在页面上。,5.3.4 表格,表格应用 表格的创建 用表格进行网页定位,5.4 Flash MX 2004,Flash MX 2004的启动和关闭 执行“开始”“所有程序”“micromedia” “m

16、icromedia Flash MX 2004”命令，启动应用程序； 在“创建新项目”中单击“Flash文档”，打开主界面； 单击“文件”菜单中的“退出”命令，关闭Hash程序。,Flash基本知识 标题栏、菜单栏、常用工具栏和编辑栏 舞台 时间轴 帧和关键帧,5.4.3 创建Flash动画 创建新文档 编辑文档 添加导航控件 添加特殊动态效果 预览文档 导出Flash文档,5.4.4 制作实例 【示例5-1】制作如图5-20所示的变形文字。,具体操作步骤如下： 执行“文件”“新建”命令； 执行“修改”“文档”命令，设置背景颜色； 单击文本工具图标，输入“多媒体技术”，然后设置字体、字型、字号

17、、颜色； 单击任意变形工具图标，再单击文字，移动鼠标进行变形。,【示例5-2】制作如图5-21所示的造型文字。,具体操作步骤如下： 单击“文件”“新建”； 单击“修改”“文档”，设置背景为黑色； 单击文本工具图标，输入“多媒体技术”，然后设置字体、字型、字号、颜色； 执行两次：“修改”“分离”（将文字分离成矢量图）； 单击任意变形工具图标，选择“选项区”的扭曲工具或封套工具，移动鼠标进行造型。,【示例5-3】制作如图5-22所示的空心文字。,具体操作步骤如下： 执行“文件”“新建”命令； 执行“修改”“文档”命令，设置背景颜色； 单击文本工具图标，输入“多媒体技术”，然后设置字体、字型、字号、

18、颜色； 执行两次：“修改”“分离”命令（将文字分离成矢量图）； 用“墨水瓶工具”设置文字的边框颜色（颜色选定后要单击每一个文字），用“颜料桶工具”设置文字的内部颜色（和背景颜色一样，颜色选定后，再单击任意选择工具，单击文字）。,【示例5-4】制作如图5-23所示的彩图文字（用外部的图片填充文字）。,具体操作步骤如下： 执行“文件”“新建”命令； 执行“修改”“文档”命令，设置背景颜色； 单击文本工具图标，输入“多媒体技术”，然后设置字体、字型、字号、颜色； 执行两次：“修改”“分离”（将文字分离成矢量图）； 执行“窗口”“设计面板”“混色器”“位图”命令，选择一个图片； 单击“混色器”面板中的

19、的缩略图，该缩略图出现在绘图工具箱的填充颜色井中； 选择“颜料桶工具”，单击每一个字。,【示例5-5】闪烁文字的制作(从左到右依次显示)。 具体操作步骤如下： 执行“文件”“新建”命令； 执行“修改”“文档”命令，设置背景颜色； 单击文本工具图标，输入“多媒体技术”，然后设置字体、字型、字号、颜色； 执行两次：“修改”“分离”命令（将文字分离成矢量图）； 在时间控制轴上每隔一定的距离插入一个关键帧(用F6,有几个字插入几个关键帧)； 在每两个关键帧中间插入一个空白关键帧(用F7)； 单击第一个关键帧,选定除第一个字以外的所有的字，然后删除。再单击第二个关键帧,选定除第一、第二个字以外的所有的字

20、，然后删除。其它的依次类推。,【示例5-6】闪烁文字的制作(从左到右逐个显示)。 执行“文件”“新建”命令； 执行“修改”“文档”命令，设置背景颜色； 单击文本工具图标“”，输入“多媒体技术”，然后设置字体、字型、字号、颜色； 执行两次：“修改”“分离”命令（将文字分离成矢量图）； 在时间控制轴上每隔一定的距离插入一个关键帧(用F6,有几个字插入几个关键帧)； 在每两个关键帧中间插入一个空白关键帧(用F7)； 从第一个关键帧开始,把文字从左到右,显示的字不删除,不显示的字删除掉。,【示例5-7】闪烁文字的制作(同时闪烁并且颜色在改变)。 具体操作步骤如下： 执行“文件”“新建”命令； 执行“修

21、改”“文档”命令，设置背景颜色； 在时间控制轴上每隔一定的距离插入一个关键帧(用F6,有几种颜色就要插入几个关键帧)； 单击第一帧，输入文字，设置文字颜色 (分离为矢量图)； 单击第二帧，修改文字颜色(在颜料桶中选择文字颜色)，其它的颜色的设置依次类推； 单击第一帧，在“属性”面板的“补间”框中选择“形状”， 单击第二帧，在“属性”面板的“补间”框中选择“形状”，依次类推。,【示例5-8】图片按一定的路线移动(如蜜蜂采花)。 具体操作步骤如下： 执行“文件”“新建”命令； 在图层1导入花图片: 单击“文件”“导入到舞台”，然后选择花图片； 单击“插入图层”图标新建图层2； 在图层2导入蜜蜂图片：单击“文件”“导入到舞台”，然后选择蜜蜂图片； 在图层2插入几个关键帧,每插入一个关键帧,要移动蜜蜂图片(最终到达花图片),然后在每一个关键帧处设置动作补间； 在花层中设置一个关键帧(两个层的最后一帧相同)。,【示例5-