单元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代码

商品卖点

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

  1. 网页设计与制作html5教学目标,HTML5+CSS3网页设计与制作—教学大纲（10页）-原创力文档...

    博学谷--让IT 教学更简单,让IT 学习更有效 <HTML5+CSS3 网页设计与制作>课程教学大纲 (课程英文名称) 课程编号: 学 分:5 学分 学 时:74 学时 (其中:讲课学时 ...

  2. html5网页综合案例制作,网页开发与制作 HTML5页面元素及属性 2-21综合案例（6页）-原创力文档...

    分析效果图 本网页可以分为3部分:头部.导航和内容.如图2-28所示. 结构分析 其中,头部信息通过元素定义,内部由标记插入图片.导航链接由元素定义,内部嵌套无序列表 .文章内容由元素定义,内部由元素 ...

  3. dw html 并排三个正方形边框,dw网页设计与制作题库(单选题)（43页）-原创力文档...

    题目 答案A 答案B 答案C 答案D 答案 安装( )是使用WWW最基本的条件 浏览器 IE 操作系统 Dreamweaver A 网页制作的超文本标记语言称为( ) HTML语言 VB语言 BASI ...

  4. android做试卷的页面,《Android UI界面设计》17移动互联网A卷试题和答案（3页）-原创力文档...

    广州市蓝天技工学校质量记录 期末考试试卷 编号:QD-0812-22 A/0 流水号: 2018 -2019 学年度第一学期 2017级移动互联网应用技术高技专业<UI界面设计>试卷答案 ...

  5. html网上书店首页设计,毕业论文（设计）基于HTML5的网络书店系统 （40页）-原创力文档...

    疥败工U常晚 毕业设计(论文) 设计(论文)题目:基于HTML5的网络书店系统研究 学院名称:专 学 院 名 称: 专 ilk: 班 级: 姓 名: 指 导 教 师: 电子与信息工程学院 计算机科学与 ...

  6. html新闻网页包括主页面,工作报告之html网页制作实验报告（8页）-原创力文档...

    html网页制作实验报告 [篇一:html实验报告] 武夷学院实验报告 课程名称:电子商务网站设计与开发_ 项目名称:_基于html的网页设计 姓名:林元卿专业:旅游管理 班级:3班学号:201360 ...

  7. 网页一般又称为HTML文档,网页设计与制作简答题（16页）-原创力文档

    1.简述 Web 浏览器打开一个 Web 文件的工作过程. 2 .描述网页设计的一般步骤. 3 .简述网页设计的基本准则. 4 .简述规划网站目录结构时应遵循的原则. 5 .描述版面布局的步骤. 6 ...

  8. 10个必知的网页设计术语计算机与网络,计算机网络专业毕业论文-网页设计与制作（23页）-原创力文档...

    安徽工业经济职业技术学院毕业论文 PAGE PAGE 4 - 安徽工业经济职业技术学院 毕业论文(设计) 论文题目: 网页设计与制作 系 部: 计算机科学技术系 专业名称: 计算机网络技术 论文作者: ...

  9. 10个必知的网页设计术语计算机与网络,入学测试计算机与网络应用基础知识题库(公开题)教学文稿（10页）-原创力文档...

    入学测试题库一一计算机与网络应用基础知识 (公开题) .单项选择题(每题给出的四个选项中,只有一个是正确答案,请将正确选项前的字母填 在题后横线上) 1世界上第一台电子计算机是 年研制成功的. D . ...

最新文章

  1. Python3.x（windows系统）安装libxml2库
  2. python 用户认证_python基于mysql的用户认证
  3. 数学之美 系列十六 （下）－ 不要把所有的鸡蛋放在一个篮子里　最大熵模型...
  4. python彩色螺旋线_解决python彩色螺旋线绘制引发的问题
  5. css布局方式_收藏！40 个 CSS 布局技巧
  6. 软考网络工程师学习笔记4-局域网与城域网
  7. SAP License：ERP之路
  8. 买了社保，再买农村医保是不是多余？
  9. golang解决TCP粘包问题
  10. 2018年python工作好找吗-未来十年Python的前景会怎样？
  11. 一个网友提供的SCI 投稿全过程信件模板一览
  12. Linux网络编程 --------- Socket编程---最浅显易懂的介绍
  13. 超硬核详解SpringClould之Gateway网管【含源码例子】
  14. java a标签实现文件下载_a标签实现文件下载 避免直接打开问题
  15. sqli-labs(54-65)终章
  16. PS绘画蒙板使用方法
  17. 如何使用TPTP中的IDatapool
  18. Mac下使用item2建立远程连接
  19. 【校招VIP】产品项目分析之优势或不足
  20. 2016 MCM/ICM E 题渣渣论文

热门文章

  1. Selenium Chrome版本兼容问题
  2. sql统计各科成绩大于平均分的人_数据分析师SQL面试必备50题
  3. B站国外大学公开课（持续更新）
  4. 一位年薪 180 万的蚂蚁金服大佬扔给我的笔记，建议看完
  5. Apple Watch发售在即 苹果门店大变脸
  6. LCD、OLED、QLED、microLED，细说各种显示技术
  7. 大数据_03【大数据基础知识】
  8. 阿里云买的域名备案成功了 后续怎么建站 ？
  9. 【AMD显卡在WIndow10/11部署带GPU支持的深度学习环境(Tensorflow-DirectML篇)】
  10. python进程已结束 退出代码0_PyCharm：进程以退出代码0结束