HTML5+CSS3网页设计与制作实用教程》单元七 网页特效与制作商品详情页面

3．创建网页文档0701.html
在文件夹“0701”中创建网页文档0701.html。商品详情页面0701.html 布局结构对应的 HTML 代码如表7-1 所示。
表7-1 商品详情页面布局结构对应的HTML 代码
行号
01 02 03 04
HTML代码
<div id="header"> <div class="topmenu"> <div class="tx"> </div> <ul class="menur"> </ul>
HTML代码
<div class="pages_nav"> </div> <div id="product_focus"> <div class="product_title"> </div> <div class="l_column"> <div class="slider"> <a> <div class="jqzoom"> </div> </a> <div id="sPicture"> </div> <div class="clear"> </div> <div class="btn"> </div> </div> <div class="info"> <div id="updatePanel4"> </div> <div class="support_payment_box"> </div>
任务描述
①规划商品详情页面0701.html 的布局结构，并绘制各组成部分的页面内容分布示意图。 ②编写商品详情页面0701.html 布局结构对应的HTML 代码。 ③定义商品详情页面0701.html 主体布局结构对应的CSS 样式代码，以及布局结构各个局部 结构对应的CSS 代码。
【任务7-1-1】规划与设计商品详情页面的布局结构
行号
05 06 07 08
HTML代码
</div> <div class="clear"> </div> </div> <div id="page_wrapper">
【任务7-1-1】规划与设计商品详情页面的布局结构
表7-1 商品详情页面布局结构对应的HTML 代码
行号
09 10 11 12 13 14 15 16 17 18 19 20 21 22 23
单元7
网页特效与制作商品详情页面
HTML5+CSS3网页设计与制作实用教程
工业和信息化人才培养规划教材 高职高专计算机系列 国家精品资源共享课程配套教材
本章导读
The chapter’s introduction
将JavaScript 程序嵌入HTML 代码中，对网页元素进行控制，对用户操作进行响应， 从而实现网页动态交互的特殊效果，这种特殊效果通常称为网页特效。在网页中添加一些 恰当的特效，使页面具有一定的交互性和动态性，能吸引浏览者的眼球，提高页面的观赏 性和趣味性。
行号
24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
HTML代码
<div class="promise"> </div> </div> <div class="clear"></div> </div> <div class="r_column"> <div class="sort_info"> <h2> 商品卖点</h2> <div class="content"> </div> </div> </div> <div class="clear"></div> </div> <div id="product_main"> <div class="l_column"> <div class="product_contentbox">
任务实施
1．规划与设计商品详情页面0701.html的布局结构 商品详情页面0701.html 内容分布示意
图如图7-2 所示。
图7-2 商品详情页面内容分布示意图
▲▲▲
【任务7-1-1】规划与设计商品详情页面的布局结构
2．创建所需的文件夹
在站点“易购网”中创建文件夹“07 网页特效与制作商品详情页面”，在该文件夹中创 建文件夹“0701”，并在文件夹“0701”中创建子文件夹“CSS”“image”和“js”，将所需 要的图片文件拷贝到“image”文件夹中，将所需要的JavaScript 文件拷贝到“js”文件夹中。
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】规划与设计商品详情页面的布局结构
【任务7-1-1】规划与设计商品详情页面的布局结构
行号
39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
表7-1 商品详情页面布局结构对应的HTML 代码
HTML代码
<h2> 商品详细信息</h2> <div class="content"> <div class="menu_tag" id="tagtitle1"> </div> <div id="tagcontent1"> <div class="tab_content"> </div> <div class="tab_content"> </div> <div class="tab_content"> </div> <div class="tab_content"> </div> </div> </div> </div> <div class="product_contentbox"> <h2> 推荐商品</h2> <div class="flexslider"> </div> </div>
JavaScript 是一种基于对象和事件驱动的脚本语言。使用它的目的是与HTML 超文本 标记语言一起实现网页中的动态交互功能。JavaScript来自百度文库通过嵌入或调用在标准的HTML 语 言中实现其功能，它与HTML 标记结合在一起，弥补了HTML 语言的不足，JavaScript 使 得网页变得更加生动。