网站设计教程第4章 网页设计的标准与特效.pptVIP

动态网页程序设计 计算机教 李勇 网 站 设 计 教 程 第四章 网页设计的标准和特效 主要内容： HTML语言基础 应用CSS构建符合标准的网页 网页的行为事件 Javascript脚本语言 简单动态网页的特效 网站的简单管理和优化 第四章 网页设计的标准和特效 网页特效是指网页中加入或制作一些特殊的效果制作滚动文本效果、漂浮图片效果、动态状态栏效果等，其目的是为了丰富和美化网页的视觉效果。但是在网页中加入的特效越多，浏览该网页的速度就会越慢，所以只能适量的添加网页特效。 网页的特效分为很多类型，例如日期时间特效、页面背景特效、图形图像特效、鼠标事件特效等等。这些特效大部分都是JavaScript（Java脚本），并且将其放在网页中的head…/head或body…/body标签内。 4.5 简单动态网页的特效 1 日期时间特效 实时显示当前的日期时间要注意页面的刷新，以及和在DM中直接插入日期时间的区别。 4.5 简单动态网页的特效 例如：0411.html 2.左右滚动文本效果： 滚动文本效果采用marquee/marquee标签来表示，其中有很多属性。如果不添加任何参数，表示该标签的文本从右往左滚动。 4.5 简单动态网页的特效 左右反弹滚动 滚动速度 滚动范围的宽度 范围高度 文本内容 字体大小 例如：0411.html(左右滚动文本) 3.上下滚动文本效果： marquee标签中的direction表示滚动方向，其具体含义如下：direction=up表示向上滚动；direction=down表示向下滚动； direction=left表示向左滚动；direction=right表示向右滚动； 4.5 简单动态网页的特效 方向：向上 滚动速度 范围高度 例如：0411.html(左右滚动文本) 文本内容：可替换成任意元素 4.图片滚动效果： 效果1： 4.5 简单动态网页的特效 4.图片滚动效果： 效果2： 4.5 简单动态网页的特效 5.禁止保存网页： 如果使用如下代码，网页将不能被以.html等网页格式保存，但能以.txt形式保存。 4.5 简单动态网页的特效 例如：0411.html(左右滚动文本) 6.“设为首页，加入收藏，联系我们”  其中“设为首页，加入收藏”采用脚本完成，“联系我们”直接采用电子邮件链接完成。 4.5 简单动态网页的特效 例如：0411.html 7.状态栏打字机效果 注意其中的msg的文本内容可任意替换成需要的内容 4.5 简单动态网页的特效 例如：0411.html 8.漂浮图片效果 注意其中的src后面的内容为图像所在的路径和名称。 4.5 简单动态网页的特效 例如：0411.html 主要内容： HTML语言基础 应用CSS构建符合标准的网页 网页的行为事件 Javascript脚本语言 简单动态网页的特效 网站的简单管理和优化 第四章 网页设计的标准和特效 4.6.1 地图视图 在“文件面板”中的视图方式选择中， “地图视图”状态下显示的是本地站点的首页，以及首页中所链接的各个网页文件，其目的是为了查看和管理本地站点中的各个网页的链接。 4.6 网站的简单管理和优化 例如：index.html 4.6.2 资源管理 通过“文件面板-资源”选项中，利用该面板可对本地站点中的各种对象，包括图像文件、引用的颜色、网页的超链接、FLASH动画、模板文件等进行查看和编辑管理。通过选择每一元素，可以将其应用到当前网页中。 4.6 网站的简单管理和优化 例如：index.html（整个站点） 4.6.3 站点链接检查 在本地站点制作完成后，通过“站点-检查站点范围的链接”来检查本地站点中所有超级链接的正确性，以及本地站点所有各类文件的基本信息。 4.6 网站的简单管理和优化 例如：index.html（整个站点） 断掉的链接：虽然有超级链接存在，但该链接所链到网页文件、图像文件、视频文件或其他类型的文件并不存在。外部链接：该超级链接所链接的是外部地址（网址）。孤立文件：本地站点中的文件并没有链接或者没有被链接。 4.6.4 网站图片压缩 由于图片文件的体积比较大，而网络的带宽有限，为了让浏览者快速浏览，所以需要对图片压缩。一般情况下网站中的图像文件是JPG或GIF类型的文件，对于图像颜色丰富的文件长压缩成JPEG格式，对于图像颜色简单的文件常压缩成GIF格式。 4.6 网站的简单管理和优化 4.6.5 HTML网页优化 利用DM软件设计网页的时候，会经常产生一些多余