1.内容简介

教材所涉及技术的核心包括CSS、JavaScript及其jQuery技术。内容既体现了CSS与JavaScript技术的最新成果，也紧跟企业升级需要，关注其在网站开发项目中的交互应用特色和新颖程度，编写了77个最佳范例。包括CSS与页面布局设计；JavaScript基础；对象应用；动态栏效果；页面动态文字效果；时间应用；动态广告；网页导航菜单；动态位置变化；jQuery应用设计；图片切换效果设计；导航条与下拉单设计；jQuery Ajax技术。

2. 任务驱动、知识技能融合的教学设计

教材让学生通过基于实例开发方式，以任务驱动学习设计技术来展开。

在撰写思路上体现如下创新：将知识学习与技能训练融入实例制作过程中，让学生一直参与实践，实现在“学中做、做中学”。注重技能训练过程，既是学习又是实践。每个实例都包括：实例效果、任务要求、程序设计思路、技术要点、程序代码编写、重点代码分析，以及任务拓展或技术拓展等。

　

第1章　CSS与页面布局设计　1
　1.1　玻璃质感导航按钮与主页配色设计　1
　　1.1.1　任务：设计一组玻璃质感按钮　2
　　1.1.2　设计　2
　　1.1.3　知识补充：颜色搭配设计　4
　1.2　页眉图片和Logo视觉修饰设计　4
　　1.2.1　任务：设计一幅页眉图片　5
　　1.2.2　设计　6
　　1.2.3　知识拓展：网站整体风格设计　9
　1.3　用CSS与Div设计网页　10
　　1.3.1　任务：网页的布局设计　11
　　1.3.2　设计　12
　　1.3.3　知识拓展：CSS及其规则　26
　　1.3.4　知识补充：在Dreamweaver中创建CSS　28

第2章　JavaScript基础　32
　2.1　JavaScript概述　32
　　2.1.1　JavaScript的组成　32
　　2.1.2　JavaScript的特点　33
　2.2　JavaScript 基本语法　36
　　2.2.1　程序结构　36
　　2.2.2　JavaScript的数据结构　38
　2.3　JavaScript程序基本构成　48
　　2.3.1　JavaScript程序设计　48
　　2.3.2　函数　52
　　2.3.3　对象　53
　2.4　JavaScript面向对象编程　59
　　2.4.1　函数与对象　60
　　2.4.2　JavaScript中函数的深入认识　63

第3章　对象应用　66
　3.1　日期时间对象　66
　　3.1.1　显示当前星期　66
　　3.1.2　显示当前日期　68
　3.2　字符串和图片对象　70
　　3.2.1　应用String对象截取特定文字　70
　　3.2.2　应用image对象实现动画　72
　　3.2.3　style对象应用74第4章动态栏效果　78
　4.1　修改标题栏和状态栏的默认属性　78
　　4.1.1　利用JavaScript更改标题栏和状态栏显示内容　78
　　4.1.2　修改超链接在状态栏上的显示信息　79
　4.2　在状态栏显示动态效　果83
　　4.2.1　在状态栏显示当前时间 　83
　　4.2.2　状态栏文字由左端弹出显示　87
　4.3　文字循环滚动效果　91
　　4.3.1　文字首尾相接循环滚动显示　91
　　4.3.2　状态栏文字在右端与左端之间循环滚动　94
　
第5章　页面动态文字效果　99
　5.1　单行文本框中的文字特效　99
　　5.1.1　单行文本框文字动态移动　99
　　5.1.2　任务拓展1：单行文本框显示动态文字效果1　101
　　5.1.3　任务拓展2：单行文本框显示动态文字效果2　102
　　5.1.4　任务拓展3：文本框中文字跑马灯效果　103
　　5.1.5　任务拓展4：文字打字显示效果　106
　5.2　多行文本框动态效果　109
　　5.2.1　多行文本框的跳动小人　109
　　5.2.2　任务拓展1：多行文本框中动态文字效果1　114
　　5.2.3　任务拓展2：多行文本框中动态文字效果2　116
　　5.2.4　任务拓展3：多行文本框中动态文字效果3　116
　5.3　文本框中的动态公告　117
　　5.3.1　多条公告显示　117
　　5.3.2　任务拓展：带图片的公告栏　123
　
第6章　时间应用　130
　6.1　日期时间显示　130
　　6.1.1　日期与数字时钟　130
　　6.1.2　任务拓展1：以日历格式显示日期与时间　132
　　6.1.3　任务拓展2：全中文日期显示1366.2网页中时钟动态效果　138
　　6.2.1　网页中图像时钟动态效果　138
　　6.2.2　网页中带有倒影的时钟动态效果　140
　　6.2.3　网页中指针时钟动态效果　143
　6.3　特定日期计时　148
　　6.3.1　进入网页时间计时　148
　　6.3.2　倒计时天数　150　
　　6.3.3　倒计时时钟　152
　　6.3.4　生日提示信息　154
　
第7章　动态广告　157
　7.1　动态文字消息　157
　　7.1.1　两个消息框同时滚动显示　157
　　7.1.2　消息框中渐变交替显示文字信息　162
　　7.1.3　消息框中文字自下而上不停地滚动　166
　7.2　图片广告效果　169
　　7.2.1　利用CSS技术弹出图片浏览器　169
　　7.2.2　控制图片左右滚动　172
　7.3　图片渐变交替显示　179
　　7.3.1　图片渐变交替显示1　179
　　7.3.2　图片渐变交替显示2　184
　　7.3.3　图片渐变交替显示3　188

第8章　网页导航菜单　193
　8.1　树形目录导航设计　193
　　8.1.1　使用层对象设计树形目录　193
　　8.1.2　任务拓展：使用表格设计多级树形目录　201
　8.2　利用CSS和JavaScript技术设计动态菜单　205
　　8.2.1　伸缩菜单　205
　　8.2.2　设计弹出菜单　213
　8.3　页面移动菜单　219
　　8.3.1　浮在页面可移动的导航菜单　219
　　8.3.2　浮在页面可移动和显示/隐藏的导航菜单　222
　8.4　推拉式导航菜单　226
　　8.4.1　单击推拉式导航菜单　226
　　8.4.2　指向推拉式浮动导航菜单　230
　　8.4.3　任务拓展:使推拉式菜单显示在浏览器右侧　236
　
第9章　动态位置变化效果　238
　9.1　动态对联广告　238
　　9.1.1　随滚动条移动的对联广告　238
　　9.1.2　QQ在线咨询链接上下浮动型代码　243
　　9.1.3　任务拓展：位于页面带有Flash浮动广告的代码编写　246
　9.2　鼠标控制的变化　250
　　9.2.1　跟随鼠标移动的蛇形文字　250
　　9.2.2　围绕鼠标旋转的尾巴253
　
第10章　jQuery应用设计　259
　10.1　jQurey选择器使用　259
　　10.1.1　任务：利用jQuery改变页面显示效果　259
　　10.1.2　编写程序代码　260
　　10.1.3　代码小结　264
　10.2　任务拓展：使用几个常用方法设计页面效果　265
　10.3　知识补充：jQuery选择器与方法271

第11章　图片切换效果设计　274
　11.1　在页面中显示图片切换广告　274
　　11.1.1　任务设计　274
　　11.1.2　编写程序代码　275
　　11.1.3　小结:jQuery选择器　277
　11.2　任务拓展1：页面带有缩略图的图片切换效果　278
　11.3　技术拓展：在页面显示图片切换广告　280
　11.4　任务拓展2：另一种图片切换广告效果　283
　
第12章　导航条与下拉菜单设计　290
　12.1　设计水平二级菜单效果　290
　　12.1.1　任务设计　290
　　12.1.2　编写程序代码　291
　　12.1.3　定义菜单显示格式　294
　12.2　带有滤镜切换效果的导航条设计　294
　
第13章　jQuery Ajax技术　301
　13.1　利用jQuery  Load（）方法加载数据　301
　　13.1.1　任务设计　301
　　13.1.2　编写程序代码　302
　13.2　jQuery常用客户端与服务器端数据加载方法设计　306
　13.3　GET和POST两种方法的差异以及jQuery Ajax操作函数　309