html的详情页面设计,HTML5+CSS3网页设计与制作实用教程 单元7 网页特效与制作商品详情页面（105页）-原创力文档...

单元7网页特效与制作商品详情页面HTML5+CSS3网页设计与制作实用教程本章导读The chapter’s introduction 将JavaScript 程序嵌入HTML 代码中，对网页元素进行控制，对用户操作进行响应，从而实现网页动态交互的特殊效果，这种特殊效果通常称为网页特效。在网页中添加一些恰当的特效，使页面具有一定的交互性和动态性，能吸引浏览者的眼球，提高页面的观赏性和趣味性。 JavaScript 是一种基于对象和事件驱动的脚本语言。使用它的目的是与HTML 超文本标记语言一起实现网页中的动态交互功能。JavaScript 通过嵌入或调用在标准的HTML 语言中实现其功能，它与HTML 标记结合在一起，弥补了HTML 语言的不足，JavaScript 使得网页变得更加生动。 JavaScript 是一种脚本编程语言，它的基本语法与C 语言类似，但运行过程中不需要单独编译，而是逐行解释执行，运行快。JavaScript 具有跨平台性，与操作环境无关，只依赖于浏览器本身，对于支持JavaScript 的浏览器就能正确执行。目录导航渐进训练任务 7-1 设计与制作电脑版商品详情页面0701.html探索训练 任务 7-2 制作触屏版商品详情页面0702.html 析疑解惑单元小结任务 7-1 设计与制作电脑版商品详情页面0701.html任务描述任务 7-1 设计与制作电脑版商品详情页面0701.html图7-1电脑版商品详情页面的整体浏览效果▲▲▲【任务7-1-1】规划与设计商品详情页面的布局结构任务描述①规划商品详情页面0701.html 的布局结构，并绘制各组成部分的页面内容分布示意图。②编写商品详情页面0701.html 布局结构对应的HTML 代码。③定义商品详情页面0701.html 主体布局结构对应的CSS 样式代码，以及布局结构各个局部结构对应的CSS 代码。【任务7-1-1】规划与设计商品详情页面的布局结构任务实施1．规划与设计商品详情页面0701.html的布局结构 商品详情页面0701.html 内容分布示意图如图7-2 所示。▲▲▲图7-2　商品详情页面内容分布示意图【任务7-1-1】规划与设计商品详情页面的布局结构 在站点“易购网”中创建文件夹“07 网页特效与制作商品详情页面”，在该文件夹中创建文件夹“0701”，并在文件夹“0701”中创建子文件夹“CSS”“image”和“js”，将所需要的图片文件拷贝到“image”文件夹中，将所需要的JavaScript 文件拷贝到“js”文件夹中。3．创建网页文档0701.html 在文件夹“0701”中创建网页文档0701.html。商品详情页面0701.html 布局结构对应的HTML 代码如表7-1 所示。表7-1　商品详情页面布局结构对应的HTML 代码行号HTML代码行号HTML代码

01 02 03 04 050607082．创建所需的文件夹【任务7-1-1】规划与设计商品详情页面的布局结构表7-1　商品详情页面布局结构对应的HTML 代码行号HTML代码行号HTML代码

商品卖点