商务网页实例项目11课件.pptx

1、 内容提要Internet作为广告的载体有着其他媒体无可比拟的优越性，对于商务网站来说，广告更是不可或缺的内容。Internet上的信息浩如烟海，广告必须在最短的时间内抓住浏览者的注意力，否则浏览者很快就会跳过广告信息进入其他链接。心理学研究表明，动态画面比静态画面更具吸引力。本项目介绍的网页特效能增强网页的动感，为网页平添趣味，使网页生动活泼，更加引人注目，从而增加网页的广告效应和网络营销功能。1什么是网页特效网页特效是用网页脚本代码在网页中实现的特殊效果或者特殊功能的一种技术。丰富多彩的网页特效可以为网页增加各种效果。初学者按照说明也很容易成功地为网页添加网页特效。学会添加网页特效的过程也

2、能帮助网页初学者更加了解HTML语言的结构。它一般分为：时间日期类、页面背景类、页面特效类、图形图像类、按钮特效类、鼠标事件类、文本特效类、导航菜单类、页面搜索类、在线测试类、游戏类、综合类等。2实现网页特效的方法要想在网页中实现各种特效，就需要使用脚本语言。常见的网页脚本语言有JavaScript、VBScript等，通过在网页的HTML代码中添加实现相应效果的脚本代码就可以实现网页特效。活动活动1 1 学习网页特效的相关概念学习网页特效的相关概念 本书主要介绍使用JavaScript脚本实现常见的网页特效的方法。JavaScript是一种解释性的，基于对象的脚本语言。HTML网页在互动性方

3、面能力较弱，例如下拉菜单，就是浏览者单击某一菜单项时，自动会出现该菜单项的所有子菜单，用纯HTML网页无法实现；又如验证表单提交信息的有效性，用户名不能为空，密码不能少于6位，邮政编码只能是数字之类，用纯HTML网页也无法实现。要实现这些功能，就需要用到JavaScript。JavaScript是一种脚本语言，比HTML要复杂。不过即便你不懂编程，也不用担心，因为JavaScript写的程序都是以源代码的形式出现的，也就是说你在一个网页里看到一段比较好的JavaScript代码，恰好你也用得上，就可以直接复制，然后放到你的网页中去。正因为可以借鉴、参考优秀网页的代码，所以使JavaScript

4、本身也变得非常受欢迎，从而被广泛应用。原来不懂编程的人，多参考JavaScript示例代码，也能很快上手。JavaScript主要是基于客户端运行的，浏览者点击带有JavaScript的网页，网页里的JavaScript就传到浏览器，由浏览器对此作处理。前面提到的下拉菜单、验证表单有效性等互动性功能，都是在客户端完成的，不需要和Web服务器发生任何数据交换，因此，不会增加Web服务器的负担。几乎所有浏览器都支持JavaScript，如Internet Explorer(IE)，Firefox，Netscape，Mozilla，Opera等。因此，在网页设计时可以放心使用JavaScript而不

5、用担心浏览者因浏览器不支持无法浏览网页。1为“贸贸女装网”主页“index.html”添加时间日期特效（1）活动分析在页面上显示当前日期，不但可以对浏览者起到提示作用，还能使网页的功能更加完善。要实现日期特效，必须使用JavaScript提供的日期时间函数，使用innerHTML方法在页面的相应位置显示日期和时间。另外，要使时间和日期能随现实日期时间动态改变，需要添加setInterval函数动态地改变当前时间和日期值。（2）知识讲解时间日期特效的代码及相关说明，见表11-1。活动活动2 2 制作滚动特效和时间日期特效制作滚动特效和时间日期特效 （3）动手操作步骤步骤1 前期准备前期准备打开D

6、reamweaver CS5软件，新建maomaonvzhuang站点，将本书配套资源中的文件夹“项目11素材活动2”中的所有文件及文件夹复制到maomaonvzhuang站点内。步骤步骤2 打开打开index.html页面，拆分单元格页面，拆分单元格1）使用Dreamweaver CS5打开“贸贸女装”网主页“index.html”。2）在“设计”视图中找到“您现在所在的位置”文字所在的单元格，单击鼠标右键，在弹出的快捷菜单中选择“表格”“拆分单元格”，在弹出的“拆分单元格”对话框中设置拆分为2列，如图11-1、图11-2所示。用鼠标拖动适当调整第二列的列宽。步骤步骤3 插入插入Div标签标

7、签1）将光标定位到拆分好的第2个单元格内，选择“插入”“布局对象”“Div标签”，在弹出的“插入Div标签”对话框中设置ID为“time”，如图11-3所示。2）将光标定位到Div内部，在属性面板中设置对齐方式为“居中对齐”。步骤4 添加脚本代码1）切换到代码视图，在标签之前插入下面的用于显示时间日期的showtime()函数脚本代码。2）在标签内添加onload事件，调用前面脚本中的showtime()函数，如下所示。整个脚本代码，如图11-4所示。步骤步骤5 保存测试保存测试保存页面，按键测试特效结果，如图11-5所示。2为“贸贸女装”网主页“index.html”添加滚动特效（1）活动分

8、析滚动特效可以在较小的页面版块中滚动显示较多的文字或图片内容，不但可以节约有限的网页版面，还能使文字和图片有动态的效果，达到吸引用户的目的。滚动特效的实现非常简单，只需在代码窗口中对要设置滚动的文字或图片两端添加和脚本代码即可。（2）知识讲解滚动标记的语法如下：对标记用法的相关说明，见表11-2。在实际应用时，滚动标记的各个参数并不是都需要指定。如果某项参数未指定，浏览器在执行时会使用默认值。（3）动手操作步骤步骤1 打开打开index.html页面，拆分单元格页面，拆分单元格 1）使用Dreamweaver CS5打开“贸贸女装”网主页“index.html”。2）在“设计”视图中找到“请登

9、录 免费注册 帮助中心”文字所在的单元格，单击鼠标右键，在弹出的快捷菜单中选择“表格”“拆分单元格”，在弹出的对话框中设置拆分为2列。用鼠标拖动适当调整第二列的列宽。步骤步骤2 输入文字，添加脚本代码输入文字，添加脚本代码1）将光标定位到拆分好的第1个单元格内，输入需要设置滚动的内容文字“您好，欢迎光临贸贸精品女装网，祝您购物愉快!”。2）切换到代码视图，在刚输入的滚动内容文字两端添加脚本代码，如下所示：整个脚本代码，如图11-6所示。步骤步骤3 保存保存测试测试保存页面，按键测试特效结果，如图11-7所示。互联网作为一个新兴的媒介，日益成为众多商家和企业宣传自身的重要平台，而铺天盖地的广告自

10、然也成为网站利益的重要组成部分。因此，如何制作精美的广告特效，从而吸引人们的注意，是网页设计者必须关注的问题。1活动分析随主页弹出的广告特效的实现方法很简单，思路如下：（1）制作广告页面使用Dreamweaver CS5制作广告页面，广告内容根据需要自行设计。将制作好的广告页面文件保存在站点目录中。（2）打开广告窗口window对象是浏览器对象中的顶级对象，代表了被浏览器打开的页面窗口，一个页面窗口就是一个window对象。运用window对象自身提供的open方法，就可以实现打开新窗口效果。活动活动3 3 制作弹出广告特效制作弹出广告特效（3）实现窗口弹出在打开HTML页面时，如果希望在页面

11、加载完毕后立刻执行某一个操作，可以通过onload页面加载事件来实现。因此，我们只需在onload事件中调用window对象的open方法，就能实现弹出广告窗口特效。2知识讲解（1）window对象当单击一个链接打开一个网页时，首先看到的不是具体的内容，而是一个浏览器窗口，然后才是在窗口中看到的内容，这个浏览器窗口实际上就是一个window对象。（2）window.open()方法window对象提供的open方法用于打开一个浏览器窗口，其语法结构是：window.open(打开的窗口地址,窗口名,窗口特征)（3）窗口特征窗口特征指窗口的大小、工具栏、菜单栏等属性，见表11-3。（4）onlo

12、ad页面加载事件如果希望加载页面时同时开启一个新的窗口（广告窗口），可以使用页面的onload事件来完成。通常都会将onload事件放在HTML页面的标签中，然后在事件中调用相应的脚本代码。例如：，当浏览器加载页面时，就会调用执行onload事件中的脚本代码，打开“adv.html”广告窗口。3动手操作步骤步骤1 前期准备前期准备打开Dreamweaver CS5软件，新建maomaonvzhuang站点，将本书配套资源中的文件夹“项目11素材活动3”中的所有文件及文件夹复制到maomaonvzhuang站点内。步骤步骤2 打开打开index.html页面，切换到代码视图页面，切换到代码视图使

13、用Dreamweaver CS5打开“贸贸女装”网主页“index.html”，并切换到代码视图。步骤步骤3 添加打开广告窗口的脚本代码添加打开广告窗口的脚本代码1）在页面添加脚本标记。2）编写实现打开窗口功能的脚本代码函数init()。脚本代码如下：步骤步骤4 添加页面的添加页面的onload事件，调用脚本函数事件，调用脚本函数在标签内添加onload事件，调用init()函数，如下所示。整个脚本代码，如图11-8所示。步骤步骤5 保存测试保存测试 保存页面，按键测试弹出广告结果，当打开主页index.html后，会自动弹出“最新活动”广告窗口，如图11-9所示。1活动分析在浏览网页时，我们

14、有时可以看到广告信息在页面中飘浮，很容易引起浏览者的注意力，这就是飘浮广告特效。漂浮广告的原理是将广告信息放置在Div层中，运用JavaScript代码控制层在页面中漂浮，起到醒目的作用。2动手操作1）打开Dreamweaver CS5软件，新建maomaonvzhuang站点，将本书配套资源“网站素材”文件夹中的“项目11素材”文件夹中的“活动4”文件夹中的所有文件及文件夹复制到maomaonvzhuang站点内。2）打开“index.html”文档，将光标定位到网页的顶端，选择“插入记录”“布局对象”“Div标签”，在弹出的“插入Div标签”对话框中设置ID为“fly”，如图11-10所示

15、。将层内自动生成的文字“此处显示id fly的内容”删除。活动活动4 4 制作飘浮广告特效制作飘浮广告特效 3）将光标定位到层中，在层中插入站点内“images”文件夹中的“float.jpg”图片。4）切换到代码视图，在标签中添加内联CSS代码如下。代码解释：style=position:absolute;z-index:1;设置层为绝对定位，z层索引为1。5）切换到代码视图，在和标签对之间添加实现广告漂浮效果的函数floatAD()，如图11-11所示。6）在标签中添加onload事件，调用漂浮广告函数floatAD()。由于前面制作日期特效时已经在标签的onload事件中调用了显示日期的

16、函数showtime()，只需在后面添加floatAD()函数即可，两个函数以“，”隔开，如图11-12所示。7）添加鼠标移入和移出事件，当鼠标移入广告时，广告停止漂浮；当鼠标移出广告时，广告继续在页面中漂浮移动。在标签中添加onmouseover和onmouseout事件，如图11-13所示。8）保存页面，按键测试飘浮广告效果，当打开主页index.html后，可看到广告图片在页面中飘浮，当鼠标移上广告图片时停止飘浮，鼠标移出后广告图片继续飘浮，如图11-14所示。当用户在填写网页中的表单信息时，常常会出现填写错误的情况，比如某些重要信息没有填写，电子邮箱地址格式填写不正确，密码长度不符合要

17、求等。这时需要对用户填写的表单信息进行验证，如果填写不符合要求，则给用户相应的提示，使用户的信息填写更加完整、有效。使用JavaScript脚本可以轻松地实现对表单的验证功能。1为“贸贸女装”网用户注册页“register.html”添加非空验证特效（1）活动分析用户在填写注册信息时，要求将相应的信息填写完整，不允许空置不填，否则将弹出错误对话框提示用户填写完整，这就要求对表单进行非空验证。活动活动5 5 制作注册表单验证特效制作注册表单验证特效（2）知识讲解在使用JavaScript验证表单时，首先要获取表单元素的值，然后对其进行判断，根据判断的情况做出相应操作。在页面中，一个或多个不同类型

18、的表单元素共同构成了一个表单，我们给表单命名为form1，给每个表单元素也都分别命名作为标识，如图11-15所示。在代码视图中，添加提交表单（onsubmit）事件的代码如下。代码解释：onsubmit=return checkform()提交表单则调用验证函数。验证函数的代码，见表11-4。（3）动手操作1）打开Dreamweaver CS5软件，打开maomaonvzhuang站点中的register.html页面。2）选中注册页面中的表单，在代码视图中设置表单名称为form1，如图11-16所示。依次选中表单中的文本域，在属性面板中分别命名为username、password、cfpas

19、sword、email，如图11-15所示。3）切换到代码视图，在标签之前，添加如图11-17所示的非空验证函数。4）在代码视图中，找到form1表单，添加提交表单（onsubmit）事件，调用验证函数，如图11-18所示。5）保存页面，按键测试特效结果，如图11-19所示。2为“贸贸女装”网用户注册页“register.html”添加密码验证特效（1）活动分析在填写密码信息时，为了避免用户密码设置过于简单而造成密码被识破，我们可以设置用户密码输入长度验证，提醒用户设置较长、较复杂的密码；另外，为了确保用户输入密码的正确性，注册时通常还要求用户输入两遍密码，若两次输入的密码不一致，则要求用户重

20、新输入直到一致为止。本活动通过添加JavaScript脚本代码验证用户输入的密码长度是否达到要求。另外还将验证用户两次输入的密码是否一致。（2）知识讲解我们只需在上文所述的验证函数checkform()中添加如下两段代码即可实现密码验证特效，见表11-5。（3）动手操作1）打开Dreamweaver CS5软件，打开maomaonvzhuang站点中的register.html页面。2）给表单和表单元素命名。（由于命名已在上一活动中完成，因此此步骤可以省略）3）切换到代码视图，在前面添加的checkform()函数内，添加如图11-20所示的密码验证脚本代码。4）保存页面，按键测试特效结果，如图11-21所示。JavaScript是一种网页脚本语言，运用JavaScript脚本可以实现各种网页动态特效，使网页效果更加丰富多彩，网页功能更加完善。在本项目中，我们运用JavaScript脚本实现了几种常见的网页动态效果：滚动特效、日期时间特效、广告特效和表单验证特效。通过本项目的学习，对JavaScript脚本有了初步的了解，今后可以以此为基础进一步深入学习JavaScript脚本以实现更多更炫的网页特效。项项 目目 小小 结结