《商务网页设计与制作》教学教案.docx
《《商务网页设计与制作》教学教案.docx》由会员分享，可在线阅读，更多相关《《商务网页设计与制作》教学教案.docx（66页珍藏版）》请在冰豆网上搜索。
《商务网页设计与制作》教学教案
《商务网页设计与制作》
教学教案
授课教师：
授课班级：
课程学分：
总学时数：
周学时数：
上课周次：
教学进度计划
章节
项目
计划课时
教学模式
教学环境
第1章
共2节
理实一体化
理实一体化机房
第2章
共3节
理实一体化
理实一体化机房
第3章
共8节
理实一体化
理实一体化机房
第4章
共7节
理实一体化
理实一体化机房
第5章
共2节
理实一体化
理实一体化机房
第6章
共2节
理实一体化
理实一体化机房
课程考评
总计
第1课（1.1-1.2）
第1章
商务网站项目策划与建设
1.1理解传统商务与电子商务
1.2商务网站项目的策划与实施
课时
2学时
教学方法
讲授、启发式
进程
第1次课
教学目的
1．理解电子商务面临的安全问题
2．理解商务网站项目的策划与实施
重点
电子商务与传统商务的关系，商务网站项目策划
难点
商务网站项目设计与开发
实施步骤：
一、熟悉学生情况（3ˊ）
二、课程简介、前期知识储备要求（5ˊ）
三、进入本次课讲授内容（包括课堂练习）（77ˊ）
四、小结巩固（重申教学目的、重点、难点）（5ˊ）
讲授内容：
第1章商务网站项目策划与建设
1.1理解传统商务与电子商务
1.1.1传统商务
介绍传统商务的概念及应用的场景。
1.1.2电子商务
介绍电子商务的概念及应用场景。
1.1.3传统商务与电子商务的关系
介绍两者的区别和联系。
1.1.4电子商务的优势和不足
1．电子商务的优势
（1）交易虚拟化
（2）交易成本低
（3）交易效率高
（4）交易透明化
2．电子商务的不足
（1）缺乏安全性
（2）没有真实的触感
1.1.5电子商务的载体
电子商务的主要载体就是商务网站。
商务网站应当建在哪里？
如何实现商务功能？
1.互联网：
九大功能。
2.万维网：
平时说的上网是啥意思？
万维网的功能很强大，几乎可以实现所有互联网的功能。
所以，平时所说的上网，通常指上万维网，即访问浏览WEB网站。
什么是万维网？
万维网（WWW或Web）就是互联网上所有支持WWW协议和超文本传输协议（HTTP）的客户机与服务器的集合，透过它可以存取世界各地的超媒体文件，内容包括文字、图像、声音、动画、资料库及各式各样的软件。
万维网的核心是什么？
①统一资源定位符（UniformResourceLocator，URL）
②超文本传输协议（HyperTextTransferProtocol，HTTP）
③超文本标记语言（HyperTextMarkupLanguage，HTML）
1.2商务网站项目的策划与实施
1.2.1网站概述
1.网站的概念及构成
什么是网页？
网页是怎么生成的？
什么是静态网页？
什么是动态网页？
2.网站的服务方式与访问方法
网站是通过统一资源定位符提供服务的入口，访问的方法是使用浏览器区访问统一资源定位符。
网站提供web服务的步骤：
Ø完成网站开发，确定首页
Ø部署WEB站点服务器（或租用）
Ø发布网站
Ø申请固定的互联网IP地址，通常也需要申请域名
Ø通过互联网服务商的域名管理服务器，绑定互联网IP地址和域名（内部网络的WEB域名管理服务器有用户自行部署管理）
Ø缴纳费用
统一资源定位符的表达形式：
可以用域名或者网络地址（固定的互联网IP地址）两种方式来表示。
例如人民邮电出版社统一资源定位符为：
网站域名形式：
网络地址形式为：
59.110.9.128
1.2.2商务网站及类型
1．按照商务目的和业务功能分类
（1）基本型商务网站
（2）宣传型商务网站
（3）客户型服务网站
（4）完全电子商务运作型网站
2．按照网站建设的主体分类
（1）行业电子商务网站
（2）企业电子商务网站
（3）政府电子商务网站
（4）服务机构电子商务网站
3．按照电子商务模式分类
（1）B2B商务网站
（2）B2C商务网站
（3）C2C商务网站
1.2.3商务网站功能组成
1．前台系统
（1）商品展示功能
（2）信息检索功能
（3）商品订购功能
（4）网上支付功能
（5）客户服务功能
（6）信息发布功能（根据网站不同，也可能属于后台系统）
2．后台系统
（1）商品管理功能
（2）订单管理功能
（3）库存管理功能
（4）商品促销管理功能
（5）客户管理功能
（6）统计分析功能
（7）系统管理及其他功能
1.2.4商务网站项目建设与管理
1．主要工作范畴
项目策划
项目实施
项目运维
2．项目实施团队
项目实施中主要涉及以下两项工作：
业务相关工作：
主要包括处理哪些业务、业务模式怎么确定、采用何种方式方法、达到什么业务目标等；
技术相关工作：
主要包括采用何种技术解决方案、功能模块如何设计、网站如何开发制作、网站如何维护等。
当然，网站建设与管理过程中还涉及法律、财务等方面的问题，也一并归入业务相关工作中。
（1）业务团队
（2）信息技术团队
（3）业务团队与信息技术团队的负责人
（4）业务团队与信息技术团队的筹建方式
①企业自行策划与建设模式
②企业网站建设实行技术团队外包模式
③企业网站建设全部外包模式
1.2.5商务网站项目策划
商务网站的项目策划非常重要，决定着网站项目是否可行。
商务网站项目策划是根据本企业的实际情况，判断市场变化的趋势，针对客户的需求，对未来的网站服务功能和开发建设进行系统的规划和设计，确定商务网站为什么做、能否做、做什么、何时做、怎么做、谁来做、谁运营、谁维护等问题。
1.项目策划的主要环节
（1）需求调查
网站需求调查是网站策划的第一步，是确定项目建设必要性的重要工作步骤，由业务团队牵头负责。
①用户调查（业务调查）
②市场调研
（2）网站定位
网站定位是最根本的业务需求，决定网站开发建设的方向，由业务团队牵头负责。
（3）编制需求概要
需求概要是明确做什么、怎么做、做到什么程度的。
要求业务目标清晰、业务需求全面、业务边界清楚、业务规则严谨。
需求概要的编制工作应当由业务团队牵头负责，信息技术团队配合。
《项目需求概要》应当由业务团队所在单位签字盖章予以认可。
（4）需求分析与功能规划
需求分析与功能规划将需求概要的内容进一步梳理、归纳、系统化，形成系统功能规划。
该项工作是以及技术为主的，由信息技术团队牵头负责，业务团队协助配合
（5）工作步骤与工作进度
（6）网站开发制作
（7）网站发布与运维
（8）网站运营模式
运营模式
运营说明
搜索引擎+百科知识
以XX为代表，采用竞价排名、广告和点击的运营模式。
XX为客户投放与网页内容相关联的广告，从而实现盈利。
它立足于搜索引擎，建立了一个完善又全面的百科知识库
即时通信+游戏+门户新闻+邮箱
以腾讯为代表，采用会员制、游戏和广告的运营模式。
收入来自互联网增值服务、移动及通信增值服务与网络广告
安全+浏览器+搜索引擎
以奇虎360为代表，采用免费+有偿增值服务的运营模式。
公司主要依靠在线广告及互联网增值业务创收
门户新闻+微博
以新浪为代表，运营模式是广告。
公司收入大部分来自网络广告，少部分来自移动增值服务
邮箱+新闻
代表企业是网易，运营模式为邮箱、游戏、广告。
绝大部分收入来自网络游戏
下载+游戏+视频
代表企业是迅雷，运营模式为会员制、游戏、广告
输入法+地图搜索+游戏
代表企业是搜狐，目前搜狐的收入主要由品牌广告、在线游戏、无线增值3部分组成
（9）投资估算
（10）可行性分析
2．编制商务网站项目策划书
1.2.6商务网站项目设计开发
在《商务网站项目策划书》通过立项审批后，就转入项目实施阶段。
项目实施最重要的工作包括：
1．详细功能设计
编制《系统规格说明书》，由技术团队为主，业务团队配合。
详细功能设计应重点考虑的内容：
（1）栏目与版块的编排
（2）目录结构
（3）网页设计
（4）链接结构
（5）功能设计
（6）数据库设计
2．网站原型设计
网站原型设计的大部分工作都属于网页设计，网站原型设计与网页设计可同时进行。
原型设计方案需要通过项目建设单位组织的评审。
3．网站开发制作
商务网站开发制作是在详细设计的基础上，按照工作计划进度安排和技术路线，组织网站开发。
教学提示：
【课程介绍、课程地位、总体概论】
【以日常商务活动为例进行对比说明】
12306动态网站示例说明
通过大学生运动鞋有用数量调查的意义，启示需求调查的重要性
通过项目策划书模版强化教学
小结巩固
传统商务与电子商务的关系，以及电子商务的优势；商务网站的概念、功能组成；项目策划与建设管理的主要工作内容，商务网站项目建设与管理的实施团队的工作职责，商务网站策划的主要环节及相关事项，编制商务网站项目策划书，商务网站设计与开发制作的工作范畴及工作要求。
课堂练习
重点概念：
电子商务、万维网、网站与商务网站、商务网站项目策划
课后作业
思考：
1.举例说明电子商务和传统商务的关系。
2.编制需求概要应当由信息技术团队还是业务团队牵头负责？
为什么？
3.网站项目策划与建设的主要环节有哪些？
参考资料
教材1章；
“互联网”及期刊杂志的相关内容。
第2课（2.1-2.3）
第2章
商务网页设计
2.1商务网页视觉设计
2.2商务网页创意设计
2.3商务网页原型设计
课时
2学时
教学方法
讲授、启发式
进程
第2次课
教学目的
1.理解商务网页视觉设计
2.理解商务网页创意设计要点
3.掌握商务网页原型设计
重点
商务网页视觉设计对象及要点，商务网页风格与形象创意设计，商务网页原型设计步骤
难点
网页网页风格设计，商务网页原型设计方法
实施步骤：
一、组织教学、课前提问（5ˊ）
二、教学引导（3ˊ）
三、进入本次课讲授内容（77ˊ）
四、小结巩固（重申教学目的、重点、难点）（5ˊ）
讲授内容：
第2章商务网页设计
2.1商务网页视觉设计
2.1.1商务网页赏析
网页布局
网页配色
导航栏设计
主横幅（Banner）设计
企业标志（Logo）设计
按钮、文字、多媒体资料
综合分析网页布局与公司业务的关系
2.1.2网页视觉设计概述
2.1.3网页视觉设计的原则
1．针对性强
2．主题鲜明
3．界面与内容统一
4．美观
5．简洁
6．体验为王
（1）少等于多
（2）合理导航
（3）访问速度
（4）保护用户数据安全
2.1.4网页视觉设计对象
1．文字
（1）文字标题
（2）文字信息
（3）文字链接
2．图像
3．多媒体
（1）音频
（2）视频
（3）动画
2.1.5网页视觉设计要点
1．网页布局
2．网页配色
3．导航栏
4．Logo（企业徽标）
5．Banner（广告条）
6．按钮
7．文字、图片及其他
2.2商务网页创意设计
2.2.1商务网页创意设计概述
2.2.2商务网页创意设计的思路
1．服务于企业的市场策划
2．服务于目标客户
（1）目标客户概念
（2）目标客户市场分类
（3）目标客户的消费分析
（4）吸引目标客户
①放大产品信息去抓住用户。
②用视频代替现场体验。
③提供免运费服务。
④放大折扣信息。
⑤提供尽可能多的支付方式。
⑥钱不是万能的，没有钱是万万不能的！
2.2.3商务网页创意设计
1．商务网页风格创意
2．形象设计
（1）设计企业徽标（Logo）
（2）设计网页字体
（3）设计网页宣传语
（4）设置背景音乐
2.3商务网页原型设计
2.3.1绘制网页草图
1．徒手绘制草图
2．计算机绘制草图
2.3.2绘制网页效果图
2.3.3制作网页原型方案
2.3.4网页原型方案评审
教学提示：
赏析代表性的商务网页，讨论其优点和不足。
小结巩固
商务网站视觉设计的概念、原则、视觉设计对象、商务网页设计要点；商务网站创意设计、网页原型设计。
课堂练习
重点概念：
商务网站视觉设计、创意设计、网页原型设计
课后作业
思考：
1．赏析商务网页，通常从哪些方面入手？
2．网页原型设计有什么作用？
3.绘制网页原型草图。
参考资料
教材2章；
“互联网”及期刊杂志的相关内容。
第3课（3.1-3.2.3）
第3章
HTML网页制作技术
3.1网页基础知识
3.2文本设置方法
3.2.1设置网页标题
3.2.2设置文字属性
3.2.3设置文档标题
课时
2学时
教学方法
讲授、示例讲解
进程
第3次课
教学目的
1．熟悉网页基础知识
2．掌握设置网页文字标题、文字属性和文档标题的设置方法
重点
标签的概念及属性，文字属性、文档标题设置方法。
难点
标签的概念及属性，文字属性设置方法。
实施步骤：
一、组织教学、课前提问（5ˊ）
二、教学引导（3ˊ）
三、进入本次课讲授内容（77ˊ）
四、小结巩固（重申教学目的、重点、难点）（5ˊ）
讲授内容：
第3章HTML网页制作技术
3.1网页基础知识
3.1.1网页源文件
1．网页源文件的概念
2．网页源文件的存储格式
3．网页源文件的运行方式
3.1.2网页解释代码
1．网页解释代码的产生
2．网页解释代码的查看与保存
3.1.3网页制作语言介绍
1．HTML语言
（1）HTML定义
（2）HTML发展
（3）HTML与XML、XHTML的关系
①HTML与XML的关系
②HTML与XHTML的关系
2．CSS语言
3.1.4HTML基础知识
1．网页元素
2．HTML标签的作用和特点
（1）HTML标签的概念
（2）HTML标签的作用
（3）HTML标签的特点
3．HTML标签的种类
基础标签、格式标签、表单标签、框架标签、图像标签、视音频标签、链接标签、列表标签、表格标签、样式标签、元信息标签、编程标签、全局标签
4.HTML标签属性
形象理解：
标签是定义类别的，属性是个性化描述的。
5．HTML事件
6．设置标签及标签属性的方法
<标签标签属性1="属性值"标签属性2="属性值"标签属性3="属性值">
标签内容
<标签1标签1属性="属性值">
<标签2标签2属性="属性值">
标签实例
7．HTML基本结构
标记语言
含义
文档头部分
html为标记语言声明的标签，告诉浏览器以下文件为超文本标记语言
是html文档头部的标签，网页头部及头部以上的信息不在网页中显示，主要作用是描述整个网页，定义或声明CSS样式等。
如网页标题、字符格式、语言、兼容性、关键字等
网页结构介绍为网页标题的标签。</p><p>指明“网页结构介绍”标题显示在浏览器标题栏中</p><p></head></p><p></head>是文档头部结束的标签</p><p>文档体部分</p><p><body></p><p>这里是正文内容</p><p></body></p><p><body>是网页文档体正文开始的标签。</p><p>所有网页需要显示的内容，均应在此标识后面处理。</p><p>本例中的正文内容是“这里是正文内容”。</p><p></body>是网页文档体结束的标签</p><p></html></p><p></html>是超文本标记语言结束的标签，也代表了网页结束</p><p>3.2文本设置方法</p><p>3.2.1设置网页标题</p><p>3.2.2设置文字属性</p><p>3.2.3设置文档标题</p><p>教学提示：</p><p> </p><p> </p><p> </p><p>举例说明</p><p> </p><p>示例演示</p><p> </p><p>小结巩固</p><p>网页源文件和解释代码，网页元素、HTML标签及属性，设置网页标题、文字属性、文档标签的方法</p><p>课堂练习</p><p>重点概念：</p><p>网页源文件、网页元素、网页元素、HTML标签</p><p>课后作业</p><p>思考：</p><p>简述HTML与XML、HTML的关系。</p><p>作业：</p><p>制作一个设置文本的网页，写出完整的HTML代码。</p><p>具体要求如下：</p><p>（1）网页标题为“古诗欣赏”；</p><p>（2）设置1个h2文档标题，靠左显示，字的颜色为蓝色，标题内容为“登鹳雀楼”；（3）设置一段文本，内容为诗句：</p><p>“白日依山尽，黄河入海流。</p><p>欲穷千里目，更上一层楼。</p><p>”每句诗都单独一行，字体为隶书，字的颜色为绿色，字号为6号。</p><p>参考资料</p><p>教材3章；</p><p>“互联网”及期刊杂志的相关内容。</p><p>第4课（3.2.4-3.2.6）</p><p>第3章</p><p>HTML网页制作技术</p><p>3.2.4设置文本段落</p><p>3.2.5设置文本列表</p><p>3.2.6制作文本网页综合范例</p><p>课时</p><p>2学时</p><p>教学方法</p><p>讲授、示例讲解</p><p>进程</p><p>第4次课</p><p>教学目的</p><p>1．掌握文本段落、文本列表的设置方法</p><p>2．掌握制作文本网页范例的基本方法。</p><p>重点</p><p>设置文本段落、设置文本列表</p><p>难点</p><p>制作文本网页范例</p><p>实施步骤：</p><p>一、组织教学、课前提问（5ˊ）</p><p>二、教学引导（3ˊ）</p><p>三、进入本次课讲授内容（77ˊ）</p><p>四、小结巩固（重申教学目的、重点、难点）（5ˊ）</p><p>讲授内容：</p><p>第3章HTML网页制作技术</p><p>3.2.4设置文本段落</p><p>3.2.5设置文本列表</p><p>1．设置无序列表</p><p>2．设置有序列表</p><p>3.2.6制作文本网页综合范例</p><p>教学提示：</p><p> </p><p>示例教学</p><p> </p><p>小结巩固</p><p>本课程需要理解掌握文本段落、文本列表的设置方法，</p><p>课堂练习</p><p>重点概念：</p><p>无序文本列表、有序文本列表。</p><p>练习：</p><p>制作无序文本列表、有序文本列表网页。</p><p>课后作业</p><p>作业：</p><p>制作一个设置段落的网页，写出完整的HTML代码。</p><p>具体要求如下：</p><p>（1）制作一个文本段落，内容为“诗歌是一种语言凝练而形象，结构自由而跳跃，富有节奏和韵律，饱含联想与想象，高度集中与概括地反映社会生活、表达思想感情的文学体裁。</p><p>诗歌的基本特点为：</p><p>”。</p><p>字体为黑体，字号为5号，字的颜色为蓝色，段落中的文本居中显示；</p><p>（2）制作一个文本段落，在其中再制作一个文本列表，文本列表的字体为楷体，字号为5号，字的颜色为紫色，文本列表的内容如下：</p><p>A．生活美：</p><p>对生活高度的提炼、集中、概括；</p><p>B．思想美：</p><p>饱含深切的思想感情；</p><p>C．意境美：</p><p>用丰富的想象和联想力营造出优美的意境；</p><p>D．语言美：</p><p>文字色彩鲜活、语言节奏分明；</p><p>E．音乐美：</p><p>韵律和谐。</p><p>参考资料</p><p>教材3章；</p><p>“互联网”及期刊杂志的相关内容。</p><p>第5课（3.3-3.3.2）</p><p>第3章</p><p>HTML网页制作技术</p><p>3.3图像设置方法</p><p>3.3.1图像文件的存储管理</p><p>3.3.2图像引用</p><p>课时</p><p>2学时</p><p>教学方法</p><p>讲授、示例讲解</p><p>进程</p><p>第5次课</p><p>教学目的</p><p>1．掌握图像文件的存储管理</p><p>2．掌握引用图像的方法</p><p>重点</p><p>图像文件的存储管理、引用图像的方法。</p><p>难点</p><p>图像文件的存储路径及其引用方法</p><p>实施步骤：</p><p>一、组织教学、课前提问（5ˊ）</p><p>二、教学引导（3ˊ）</p><p>三、进入本次课讲授内容（77ˊ）</p><p>四、小结巩固（重申教学目的、重点、难点）（5ˊ）</p><p>讲授内容：</p><p>第3章HTML网页制作技术</p><p>3.3图像设置方法</p><p>3.3.1图像文件的存储管理</p><p>网站通常有很多图像文件，需要对这些图像文件进行有效的管理。</p><p>一是起好文件名称。</p><p>文件名称应当有助于理解图片内容，言简意赅。</p><p>二是规划好图像文件存储目录。</p><p>3.3.2图像引用</p><p>1．相对路径引用</p><p>（1）引用当前目录下的文件（同级目录）</p><p>（2）引用下级目录下的图像文件</p><p>（3）引用上级目录下的图像文件</p><p>（4）引用上两级目录下的一个子目录中的文件</p><p>2．绝对路径引用</p><p>教学提示：</p><p> </p><p> </p><p> </p><p>示例讲解</p><p> </p><p>小结巩固</p><p>课堂练习</p><p>重点概念：</p><p>相对路径、绝对路径</p><p>练习：</p><p>引用相对路径“photo”下的图像文件“lx1.jpg”。</p><p>引用绝对路径“C:</p><p>/Class3/”下的“lx2.jpg”</p><p>课后作业</p><p>参考资料</p><p>教材3章；</p><p>“互联网”及期刊杂志的相关内容。</p><p>第6课（3.3.3-3.3.7）</p><p>第3章</p><p>HTML网页设计与制作</p><p>3.3.3设置图像显示尺寸</p><p>3.3.4设置图像对齐方式</p><p>3.3.5设置图像替换文本</p><p>3.3.6设置网页背景图像与背景颜色</p><p>3.3.7制作图文网页综合范例</p><p>课时</p><p>2学时</p><p>教学方法</p><p>讲授、示例讲解</p><p>进程</p><p>第6次课</p><p>教学目的</p><p>1．掌握图像尺寸、对齐方式、替换文本、背景图像和背景颜色的设置方法；</p><p>2．掌握简单图文网页的制作方法。</p><p>重点</p><p>图像属性的设置方法，图文网页制作。</p><p>难点</p><p>图文网页制作</p><p>实施步骤：</p><p>一、组织教学、课前提问（5ˊ）</p><p>二、教学引导（3ˊ）</p><p>三、进入本次课讲授内容（77ˊ）</p><p>四、小结巩固（重申教学目的、重点、难点）（5ˊ）</p><p>讲授内容：</p><p>第3章HTML网页制作技术</p><p>3.3.3设置图像显示尺寸</p><p>固定数值、百分比两种赋值形式。</p><p>3.3.4设置图像对齐方式</p><p>水平对齐：</p><p>左中右</p><p>垂直对齐：</p><p>上中下</p><p>3.3.5设置图像替换文本</p><p>3.3.6设置网页背景图像与背景颜色</p><p>3.3.7制作图文网页综合范例</p><p>教学提示：</p><p> </p><p>示例讲解</p><p> </p><p>小结巩固</p><p>回顾图像尺寸的赋值形式，设置图像对齐的方法，以及设置图像替换文本、背景图像和背景颜色的方法。</p><p>课堂练习</p><p>练习：</p><p>制作一个网页，设置图像“lx.jpg”的宽度属性值为60%、高度属性值为200px。</p><p>课后作业</p><p>作业：</p><p>制作一个设置图像的网页，写出完整的HTML代码，具体要求如下：</p><p>（1）设置网页的背景图像，该图像存储在该网页所在目录的下一级目录“images”中，图像文件名称为“photo.jpg”；</p><p>（2）网页中引用一个图像，该图像为该网页所在目录的上两级目录中，这个图像的名称是“computer.jpg”，设置其显示尺寸为宽200px、高180px。</p><p>参考资料</p><p>教材3章；</p><p>“互联网”及期刊杂志的相关内容。</p><p> </p><p>第7课（3.4）</p><p>第3章</p><p>HTML网页设计与制作</p><p>3.4超链接设置方法</p><p>课时</p><p>2学时</p><p>教学方法</p><p>讲授、示例讲解</p><p>进程</p><p>第7次课</p><p>教学目的</p><p>1．理解超链接的概念及类型；</p><p>2．掌握指向网站内部、外部的超链接设置方法；</p><p>3.掌握文本、图像超链接设置方法；</p><p>4.掌握设定超链接打开窗口的方法；</p><p>5.掌握制作简单的图文超链接网页的制作方法。</p><p>重点</p><p>超链接的概念、超链接的设置方法</p><p>难点</p><p>图文超链接网页制作</p><p>实施步骤：</p><p>一、组织教学、课前提问（5ˊ）</p><p>二、教学引导（3ˊ）</p><p>三、进入本次课讲授内容（77ˊ）</p><p>四、小结巩固（重申教学目的、重点、难点）（5ˊ）</p><p>讲授内容：</p><p>第3章HTML网页制作技术</p><p>3.</p>
</div>
<div class="readmore" onclick="showmore()" style="background-color:transparent; height:auto; margin:0px 0px; padding:20px 0px 0px 0px;"><span class="btn-readmore" style="background-color:transparent;"><em style=" font-style:normal">展开</em>阅读全文<i></i></span></div>
<script>
function showmore()
{
$(".readmore").hide();
$(".detail-article").css({
"height":"auto",
"overflow": "hidden"
});
}
$(document).ready(function() {
var dh = $(".detail-article").height();
if(dh >100)
{
$(".detail-article").css({
"height":"100px",
"overflow": "hidden"
});
}
else
{
$(".readmore").hide();
}
});
</script>
</div>
<script>
var defaultShowPage = parseInt("5");
var id = "24870566";
var total_page = "66";
var mfull = false;
var mshow = false;
function DownLoad() {
window.location.href='https://m.bdocx.com/down/24870566.html';
}
function relate() {
var reltop = $('#relate').offset().top-50;
$("html,body").animate({ scrollTop: reltop }, 500);
}
</script>
<script> var pre = "https://file1.bdocx.com/fileroot1/2023-6/2/bc33d8c8-9fa4-4084-977b-b7d2511e32c7/bc33d8c8-9fa4-4084-977b-b7d2511e32c7";
var freepage = parseInt('20');
var total_c = parseInt('66');
var start = defaultShowPage;
var adcount = 0;
var adindex = 0;
var adType_list = ";0;1;2;3;4;5;6;7;8;9;10;11;12;13;14;15;16;17;18;19;";
var end = start;
function ShowSvg() {
end = start + defaultShowPage;
if (end > freepage) end = freepage;
for (var i = start; i < end; i++) {
var imgurl = pre + (i + 1) + '.gif';
var html = "<img src='" + imgurl + "' onerror=\"this.src='/images/s.gif'\" alt=\"《商务网页设计与制作》教学教案.docx_第" + (i + 1) + "页\" width='100%'/>";
$("#page").append("<div class='page'>" + html + "</div>");
$("#page").append("<div class='pageSize'>第" + (i + 1) + "页 / 共" + total_c + "页</div>");
if(adcount > 0 && adType_list.indexOf(";"+(i+1)+";")>-1)
{
if(adindex > (adcount-1)) adindex = 0;
$("#page").append("<div class='pagead' id='addiv"+(i + 1)+"'></div>");
document.getElementById("addiv"+(i + 1)+"").innerHTML =document.getElementById("adpre" + adindex).outerHTML;
adindex += 1;
}
}
start = end;
if (start > (freepage - 1)) {
if (start < total_c)
{
$("#pageMore").removeClass("btnmore");
$("#pageMore").html("亲，该文档总共" + total_c + "页，到这儿已超出免费预览范围，如果喜欢就下载吧！");
}
else
{
$("#pageMore").removeClass("btnmore");
$("#pageMore").html("亲，该文档总共" + total_c + "页全部预览完了，如果喜欢就下载吧！");
}
}
}
//$(document).ready(function () {
// ShowSvg();
//});
</script>
<div id="relate" class="container" style="padding:0px 0px 15px 0px; margin-top:20px; border:solid 1px #dceef8">
<div style=" font-size: 16px; background-color:#e5f0f7; margin-bottom:5px; font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px;">相关资源</div>
<div id="relatelist" style="padding-left:5px;">
<ul>
<li><em class="pptx"/></em><a target="_parent" href="https://m.bdocx.com/doc/30873221.html" title="大学课件《高分子物理》教案..pptx">大学课件《高分子物理》教案..pptx</a>
</li><li><em class="ppt"/></em><a target="_parent" href="https://m.bdocx.com/doc/30873220.html" title="图形创意设计-想象.ppt">图形创意设计-想象.ppt</a>
</li><li><em class="pptx"/></em><a target="_parent" href="https://m.bdocx.com/doc/30873217.html" title="绿色大气简约端午活动策划动态PPT模板.pptx">绿色大气简约端午活动策划动态PPT模板.pptx</a>
</li><li><em class="pptx"/></em><a target="_parent" href="https://m.bdocx.com/doc/30873139.html" title="简洁创意二十届三中全会要点解读PPT深入学习贯彻三中全会精神党课课件.pptx">简洁创意二十届三中全会要点解读PPT深入学习贯彻三中全会精神党课课件.pptx</a>
</li><li><em class="docx"/></em><a target="_parent" href="https://m.bdocx.com/doc/30873121.html" title="技能培训资料：常用水泵大总结.docx">技能培训资料：常用水泵大总结.docx</a>
</li><li><em class="docx"/></em><a target="_parent" href="https://m.bdocx.com/doc/30872930.html" title="2023年住建局工作总结分析(5篇).docx">2023年住建局工作总结分析(5篇).docx</a>
</li><li><em class="docx"/></em><a target="_parent" href="https://m.bdocx.com/doc/30872642.html" title="2021-2022学年四川省成都市高一上英语期末考试题.docx">2021-2022学年四川省成都市高一上英语期末考试题.docx</a>
</li><li><em class="doc"/></em><a target="_parent" href="https://m.bdocx.com/doc/30872310.html" title="复方丹参片前处理及提取生产工规程.doc">复方丹参片前处理及提取生产工规程.doc</a>
</li><li><em class="pptx"/></em><a target="_parent" href="https://m.bdocx.com/doc/30872223.html" title="华中科技大学谭毅华数据挖掘分类.pptx">华中科技大学谭毅华数据挖掘分类.pptx</a>
</li><li><em class="ppt"/></em><a target="_parent" href="https://m.bdocx.com/doc/30872220.html" title="固定污染源烟气排放连续监测系统.ppt">固定污染源烟气排放连续监测系统.ppt</a>
</li>
</ul>
</div>
</div>
<div class="container" style="padding:0px 0px 15px 0px; margin-top:20px; border:solid 1px #dceef8">
<div style=" font-size: 16px; background-color:#e5f0f7; margin-bottom:5px; font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px;">猜你喜欢</div>
<div id="relatelist" style="padding-left:5px;">
<ul>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/24779748.html" target="_parent" title="操作系统复习.docx">操作系统复习.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/24779749.html" target="_parent" title="初一上册生物笔记整理.docx">初一上册生物笔记整理.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/24779750.html" target="_parent" title="城镇供热特许经营协议通用版标准版.docx">城镇供热特许经营协议通用版标准版.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/24779751.html" target="_parent" title="初一语文课题研究.docx">初一语文课题研究.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/24779752.html" target="_parent" title="初中地理会考复习资料课件.docx">初中地理会考复习资料课件.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/24779753.html" target="_parent" title="冲压成型设备之欧阳科创编.docx">冲压成型设备之欧阳科创编.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/24779754.html" target="_parent" title="初中地理《中东》教学设计.docx">初中地理《中东》教学设计.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/24779755.html" target="_parent" title="初中教师述职报告4篇.docx">初中教师述职报告4篇.docx</a></li>
<li><em class="docx"></em>
<a href="https://m.bdocx.com/doc/24779756.html" target="_parent" title="初中电学动态电路教学设计.docx">初中电学动态电路教学设计.docx</a></li>
</ul>
</div>
</div>
<div style=" font-size: 16px; background-color:#e5f0f7; margin-top:20px; font-weight: bold; text-indent:10px; line-height: 40px; height:40px; padding-bottom: 0px; margin-bottom:10px;">
相关搜索</div>
<div class="widget-box pt0" style="border: none; padding:0px 5px;">
<ul class="taglist--inline multi">
<li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=%e5%95%86%e5%8a%a1%e7%bd%91%e9%a1%b5%e8%ae%be%e8%ae%a1%e4%b8%8e%e5%88%b6%e4%bd%9c">商务网页设计与制作</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=%e5%95%86%e5%8a%a1">商务</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=%e7%bd%91%e9%a1%b5">网页</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=%e8%ae%be%e8%ae%a1">设计</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=%e5%88%b6%e4%bd%9c">制作</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=%e6%95%99%e5%ad%a6">教学</a></li> <li class="tagPopup"><a target="_parent" class="tag tagsearch" rel="nofollow" href="https://m.bdocx.com/search.html?q=%e6%95%99%e6%a1%88">教案</a></li> </ul>
</div>
<br />
<div >
当前位置：<a target="_parent" href="https://m.bdocx.com/">首页</a> >
<a href="https://m.bdocx.com/booklist-00016.html">幼儿教育</a><span> > </span><a href="https://m.bdocx.com/booklist-0001600003.html">唐诗宋词</a>
</div>
<br />
<div class="cssnone">
<iframe title="来源" src="https://m.bdocx.com/BookRead.aspx?id=TuzCSvMGP82tCCP6EXQJyw%3d%3d&parto=y0rCahkvGBxmjKZobQhhHIpQk1mA39QCZ4LGi0u9fnj7i2wHhWEl1d0hdJ5PjkknSdsjYt20M8tgY%2fdN4Uh3nQcHdgx2CCbIRcEsUzs9xf02sn7JK54K0IuLE788F2bvrng10DF7kTaSAxxm4PSNKZ8gvU7TqH5lbLi26x4vaOOqaekTZbk0hoGlqkTcA%2fM2JD8%2bfHpRjKyaf%2bJSeGnbUrt0Q%2fN7UPa7" frameborder="0" style="width: 0px; height: 0px">
</iframe>
</div>
<span id="LabelScript"></span>
<script src="https://mstatic.bdocx.com/JS/bootstrap-collapse.js"></script>
</form>
<div class="siteInner_bg" style="margin-top: 40px; border: solid 0px red; margin-left: 0px; margin-right: 0px;">
<div class="siteInner">
<p style="text-align: center;">copyright@ 2008-2022 冰豆网网站版权所有</p><p style="text-align: center;">经营许可证编号:<a href="http://beian.miit.gov.cn/" target="_blank">鄂ICP备2022015515号-1</a></p><script>var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?2e77bd3f6fe91b0e21d3f22267249ee3";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();</script><script>(function(){
var el = document.createElement("script");
el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?81476e42bf626128cf29544ee216a8ed7deb9487dce7ed62313212129c4244a219d1c501ebd3301f5e2290626f5b53d078c8250527fa0dfd9783a026ff3cf719";
el.id = "ttzz";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(el, s);
})(window)</script>
</div>
</div>
<div class="trnav clearfix" id="navcontent" style="display: none; background-color:#3a71b1; ">
<div class="trlogoside" id="navlogo" style="display: none;">
<a href="https://m.bdocx.com/" title="冰豆网"><img src="https://www.bdocx.com/images/logo_bd.png" alt="冰豆网"></a>
<div class="trnavclose" id="navclose">
<span></span>
</div>
</div>
<div class="navcontainer">
<div class="row">
<ul class="nav navbar-nav trnavul headercontent" id="navigation" style="margin:20px 0 0px;">
<li><a target="_parent"href="https://m.bdocx.com/login.aspx">登录</a></li>
<li><a target="_parent"href="https://m.bdocx.com/">首页 </a></li>
<li><a target="_parent"href="https://m.bdocx.com/booklist-0.html">资源分类 </a></li>
<li><a target="_parent"href="https://m.bdocx.com/UserManage/Recharge.aspx?f=0"><img src="https://m.bdocx.com/images/s.gif" alt="new" class="hottip1">升级会员 <img src="https://www.bdocx.com/FileUpload/Images/48520fea-bc98-41ae-b183-84689c7075c9.gif" alt="new" class="hottip"></a></li>
<li><a target="_parent"href="https://m.bdocx.com/newslist.html">通知公告 </a></li>
<li><a target="_parent"href="https://m.bdocx.com/h-0.html">帮助中心 </a></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
function stopPropagation(e) {
var ev = e || window.event;
if (ev.stopPropagation) {
ev.stopPropagation();
}
else if (window.event) {
window.event.cancelBubble = true;//兼容IE
}
}
$("#navmore").click(function (e) {
$("#navcontent").show();
$("#navlogo").show();
stopPropagation(e);
var navcontentwidth = $("#navcontent").width();
$('#navcontent').css({ 'right': '-' + navcontentwidth + 'px' });
$("#navcontent").show().animate({ "right": 0 }, 300);
});
$(document).bind('click', function () {
var navcontentwidth = $("#navcontent").width();
$("#navcontent").animate({ 'right': '-' + navcontentwidth + 'px' }, 300, function () { $("#navcontent").hide(); });
$("#navlogo").fadeOut(300);
});
$("#navcontent").click(function (e) {
stopPropagation(e);
});
$("#navclose").click(function (e) {
var navcontentwidth = $("#navcontent").width();
$("#navcontent").animate({ 'right': '-' + navcontentwidth + 'px' }, 300, function () { $("#navcontent").hide(); });
$("#navlogo").fadeOut(300);
});
</script>
<script>
function BaseShare(title, desc, imgUrl) {
var link = "https://m.bdocx.com/doc/24870566.html";
if (wx) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: 'wx4f717640abfd1120', // 必填，公众号的唯一标识
timestamp: '1730693127', // 必填，生成签名的时间戳
nonceStr: 'A4300B002BCFB71F291DAC175D52DF94', // 必填，生成签名的随机串
signature: 'df65716f425cd36343de944e7fbb30723b2d315b',// 必填，签名，见附录1
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData', 'hideMenuItems'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
//openTagList: ["wx-open-launch-weapp"]//H5打开小程序
});
wx.ready(function () { //需在用户可能点击分享按钮前就先调用
wx.hideMenuItems({// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
menuList: ['menuItem:share:qq', 'menuItem:favorite', 'menuItem:share:QZone', 'menuItem:share:email', 'menuItem:originPage', 'menuItem:readMode', 'menuItem:delete', 'menuItem:editTag', 'menuItem:share:facebook', 'menuItem:share:weiboApp', 'menuItem:share:brand']
});
var shareData = {
title: title, // 分享标题
desc: desc,//这里请特别注意是要去除html
link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
};
wx.updateAppMessageShareData(shareData);//1.4 分享到朋友
wx.updateTimelineShareData(shareData);//1.4分享到朋友圈
});
}
}
function BaseShare(title, desc, imgUrl, link) {
if (link=="")
link = "https://m.bdocx.com/doc/24870566.html";
if (wx) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: 'wx4f717640abfd1120', // 必填，公众号的唯一标识
timestamp: '1730693127', // 必填，生成签名的时间戳
nonceStr: 'A4300B002BCFB71F291DAC175D52DF94', // 必填，生成签名的随机串
signature: 'df65716f425cd36343de944e7fbb30723b2d315b',// 必填，签名，见附录1
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData', 'hideMenuItems'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
//openTagList: ["wx-open-launch-weapp"]//H5打开小程序
});
wx.ready(function () { //需在用户可能点击分享按钮前就先调用
wx.hideMenuItems({// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
menuList: ['menuItem:share:qq', 'menuItem:favorite', 'menuItem:share:QZone', 'menuItem:share:email', 'menuItem:originPage', 'menuItem:readMode', 'menuItem:delete', 'menuItem:editTag', 'menuItem:share:facebook', 'menuItem:share:weiboApp', 'menuItem:share:brand']
});
var shareData = {
title: title, // 分享标题
desc: desc,//这里请特别注意是要去除html
link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
};
wx.updateAppMessageShareData(shareData);//1.4 分享到朋友
wx.updateTimelineShareData(shareData);//1.4分享到朋友圈
});
}
}
</script>
<script>
$(document).ready(function () {
var arr = $(".headercontent");
for (var i = 0; i < arr.length; i++) {
(function (index) {
var url = "https://m.bdocx.com/header.aspx";
$.get(url + "?t=" + (new Date()).valueOf(), function (d) {
try {
arr.eq(index).empty().html(d);
} catch (e) { }
try {
arr.html(d);
} catch (e) { }
});
})(i);
}
});
</script>
<script src="https://mstatic.bdocx.com/js/jquery.lazyload.js"></script>
<script charset="utf-8">
$("img.lazys").lazyload({
threshold: 200,
effect: "fadeIn"
});
</script>
</body>
</html>