HTML5+CSS3网页的设计与制作单元7 网页特效与制作商品详情页面.pptx

工业和信息化人才培养规划教材单元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】规划与设计商品详情页面的布局结构表7-1　商品详情页面布局结构对应的HTML 代码行号HTML代码 行号HTML代码 div class=pages_nav /divdiv id=product_focusdiv class=product_title /divdiv class=l_columndiv class=slideradiv class=jqzoom /div/adiv id=sPicture /divdiv class=clear /divdiv class=btn /div/divdiv class=infodiv id=updatePanel4 /divdiv class=support_payment_box /divdiv class=promise /div/divdiv class=clear/div/divdiv class=r_columndiv class=sort_infoh2 商品卖点/h2div class=content /div/div/divdiv class=clear/div/divdiv id=product_maindiv class=l_columndiv class=product_contentbox091011121314151617181920212223242526272829303132333435363738【任务7-1-1】规划与设计商品详情页面的布局结构表7-1　商品详情页面布局结构对应的HTML 代码行号HTML代码 行号HTML代码 h2 商品详细信息/h2div class=contentdiv class=menu_tag id=tagtitle1 /divdiv id=tagcontent1div class=tab_content /divdiv class=tab_content /divdiv class=tab_content /divdiv class=tab_content /div/div/div/divdiv class=product_contentboxh2 推荐商品/h2div class=flexslider /div/div/divdiv class=r_columndiv class=sidebarh2 同类热卖商品/h2div class=content /div/divdiv class=sidebarh2 最近浏览过的商品/h2div class=content /div/div/div/div/divdiv class=clear/divdiv id=footer /div394041424344454647484