《网站设计教程第4章 网页设计的标准与特效.ppt》由会员分享,可在线阅读,更多相关《网站设计教程第4章 网页设计的标准与特效.ppt(21页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、动态网页程序设计 计算机教 李勇网 站 设 计 教 程第四章 网页设计的标准和特效动态网页程序设计 计算机教 李勇主要内容:HTML语言基础 应用CSS构建符合标准的网页 网页的行为事件 Javascript脚本语言 简单动态网页的特效 网站的简单管理和优化第四章 网页设计的标准和特效动态网页程序设计 计算机教 李勇 网页特效是指网页中加入或制作一些特殊的效果制作滚动文本效果、漂浮图片效果、动态状态栏效果等,其目的是为了丰富和美化网页的视觉效果。但是在网页中加入的特效越多,浏览该网页的速度就会越慢,所以只能适量的添加网页特效。网页的特效分为很多类型,例如日期时间特效、页面背景特效、图形图像特效
2、、鼠标事件特效等等。这些特效大部分都是JavaScript(Java脚本),并且将其放在网页中的或标签内。4.5 简单动态网页的特效动态网页程序设计 计算机教 李勇1 日期时间特效 实时显示当前的日期时间要注意页面的刷新,以及和在DM中直接插入日期时间的区别。4.5 简单动态网页的特效例如:0411.html动态网页程序设计 计算机教 李勇2.左右滚动文本效果:滚动文本效果采用标签来表示,其中有很多属性。如果不添加任何参数,表示该标签的文本从右往左滚动。4.5 简单动态网页的特效左右反弹滚动滚动速度 滚动范围的宽度 范围高度文本内容字体大小例如:0411.html(左右滚动文本)动态网页程序设
3、计 计算机教 李勇3.上下滚动文本效果:标签中的direction表示滚动方向,其具体含义如下:direction=up表示向上滚动;direction=down表示向下滚动;direction=left表示向左滚动;direction=right表示向右滚动;4.5 简单动态网页的特效方向:向上 滚动速度 范围高度例如:0411.html(左右滚动文本)文本内容:可替换成任意元素动态网页程序设计 计算机教 李勇4.图片滚动效果:效果1:4.5 简单动态网页的特效动态网页程序设计 计算机教 李勇4.图片滚动效果:效果2:4.5 简单动态网页的特效动态网页程序设计 计算机教 李勇5.禁止保存网页
4、:如果使用如下代码,网页将不能被以.html等网页格式保存,但能以.txt形式保存。4.5 简单动态网页的特效例如:0411.html(左右滚动文本)动态网页程序设计 计算机教 李勇6.“设为首页,加入收藏,联系我们”其中“设为首页,加入收藏”采用脚本完成,“联系我们”直接采用电子邮件链接完成。4.5 简单动态网页的特效例如:0411.html动态网页程序设计 计算机教 李勇7.状态栏打字机效果 注意其中的msg的文本内容可任意替换成需要的内容4.5 简单动态网页的特效例如:0411.html动态网页程序设计 计算机教 李勇8.漂浮图片效果 注意其中的src后面的内容为图像所在的路径和名称。4
5、.5 简单动态网页的特效例如:0411.html动态网页程序设计 计算机教 李勇主要内容:HTML语言基础 应用CSS构建符合标准的网页 网页的行为事件 Javascript脚本语言 简单动态网页的特效 网站的简单管理和优化第四章 网页设计的标准和特效动态网页程序设计 计算机教 李勇4.6.1 地图视图 在“文件面板”中的视图方式选择中,“地图视图”状态下显示的是本地站点的首页,以及首页中所链接的各个网页文件,其目的是为了查看和管理本地站点中的各个网页的链接。4.6 网站的简单管理和优化例如:index.html动态网页程序设计 计算机教 李勇4.6.2 资源管理 通过“文件面板-资源”选项中
6、,利用该面板可对本地站点中的各种对象,包括图像文件、引用的颜色、网页的超链接、FLASH动画、模板文件等进行查看和编辑管理。通过选择每一元素,可以将其应用到当前网页中。4.6 网站的简单管理和优化例如:index.html(整个站点)动态网页程序设计 计算机教 李勇4.6.3 站点链接检查 在本地站点制作完成后,通过“站点-检查站点范围的链接”来检查本地站点中所有超级链接的正确性,以及本地站点所有各类文件的基本信息。4.6 网站的简单管理和优化例如:index.html(整个站点)断掉的链接:虽然有超级链接存在,但该链接所链到网页文件、图像文件、视频文件或其他类型的文件并不存在。外部链接:该超
7、级链接所链接的是外部地址(网址)。孤立文件:本地站点中的文件并没有链接或者没有被链接。动态网页程序设计 计算机教 李勇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实现数据库访问后续课程动态网页程序设计 计算机教 李勇网站设计课程到此结束谢谢
限制150内