网站设计教程第4章 网页设计的标准与特效.ppt
网 站 设 计 教 程,第四章 网页设计的标准和特效,主要内容：HTML语言基础 应用CSS构建符合标准的网页 网页的行为事件 Javascript脚本语言 简单动态网页的特效 网站的简单管理和优化,第四章 网页设计的标准和特效,网页特效是指网页中加入或制作一些特殊的效果制作滚动文本效果、漂浮图片效果、动态状态栏效果等，其目的是为了丰富和美化网页的视觉效果。但是在网页中加入的特效越多，浏览该网页的速度就会越慢，所以只能适量的添加网页特效。网页的特效分为很多类型，例如日期时间特效、页面背景特效、图形图像特效、鼠标事件特效等等。这些特效大部分都是JavaScript（Java脚本），并且将其放在网页中的或标签内。,4.5 简单动态网页的特效,1 日期时间特效 实时显示当前的日期时间要注意页面的刷新，以及和在DM中直接插入日期时间的区别。,4.5 简单动态网页的特效,例如：0411.html,2.左右滚动文本效果：滚动文本效果采用标签来表示，其中有很多属性。如果不添加任何参数，表示该标签的文本从右往左滚动。,4.5 简单动态网页的特效,左右反弹滚动,滚动速度,滚动范围的宽度,范围高度,文本内容,字体大小,例如：0411.html(左右滚动文本),3.上下滚动文本效果：标签中的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软件设计网页的时候，会经常产生一些多余的空标签或嵌套标签代码，因此我们需要清理网页中的这些代码，可以对网页进行一定程度的优化，使网页的体积变小，提高网页的浏览速度。通过“命令-清理HTML”完成。,4.6 网站的简单管理和优化,多余的嵌套标签,多余的空标签,例如：0412.html（多余的HTML被清理）,主要内容：HTML语言基础 应用CSS构建符合标准的网页 网页的行为事件 Javascript脚本语言 简单动态网页的特效 网站的简单管理和优化,小结,网页程序设计-动态网站：ASP应用基础Web服务器使用基础ASP实现数据库访问,后续课程,网站设计课程到此结束谢谢,
