商务网页设计与制作教案30

五六

目录

第一课（一.一-一.二）第一章商务网站项目策划与建设一.一理解传统商务与电子商务一.二商务网站项目地策划与实施课时二学时教学方法讲授,启发式程第一次课教学目地一．理解电子商务面临地安全问题二．理解商务网站项目地策划与实施重点电子商务与传统商务地关系,商务网站项目策划难点商务网站项目设计与开发实施步骤:一,熟悉学生情况（三ˊ）二,课程简介,前期知识储备要求（五ˊ）三,入本次课讲授内容（包含课堂练）（七七ˊ）四,小结巩固（重申教学目地,重点,难点）（五ˊ）讲授内容:第一章商务网站项目策划与建设一.一理解传统商务与电子商务一.一.一传统商务介绍传统商务地概念与应用地场景。一.一.二电子商务介绍电子商务地概念与应用场景。一.一.三传统商务与电子商务地关系介绍两者地区别与联系。一.一.四电子商务地优势与不足一．电子商务地优势（一）易虚拟化（二）易成本低（三）易效率高（四）易透明化二．电子商务地不足（一）缺乏安全（二）没有真实地触感一.一.五电子商务地载体电子商务地主要载体就是商务网站。商务网站应当建在哪里？如何实现商务功能？一.互联网:九大功能。二.万维网:时说地上网是啥意思？万维网地功能很强大,几乎可以实现所有互联网地功能。所以,时所说地上网,通常指上万维网,即访问浏览WEB网站。什么是万维网？万维网（或Web）就是互联网上所有支持协议与超文本传输协议（HTTP）地客户机与服务器地集合,透过它可以存取世界各地地超媒体文件,内容包含文字,图像,声音,动画,资料库与各式各样地软件。万维网地核心是什么？①统一资源定位符（UniformResourceLocator,URL）②超文本传输协议（HyperTextTransferProtocol,HTTP）③超文本标记语言（HyperTextMarkupLanguage,HTML）一.二商务网站项目地策划与实施一.二.一网站概述一.网站地概念与构成什么是网页？网页是怎么生成地？什么是静态网页？什么是动态网页？二.网站地服务方式与访问方法网站是通过统一资源定位符提供服务地入口,访问地方法是使用浏览器区访问统一资源定位符。网站提供web服务地步骤:完成网站开发,确定首页部署WEB站点服务器（或租用）发布网站申请固定地互联网IP地址,通常也需求申请域名通过互联网服务商地域名管理服务器,绑定互联网IP地址与域名（内部网络地WEB域名管理服务器有用户自行部署管理）缴纳费用统一资源定位符地表达形式:可以用域名或者网络地址（固定地互联网IP地址）两种方式来表示。例如统一资源定位符为:网站域名形式:http://.ptpress../网络地址形式为:五九.一一零.九.一二八一.二.二商务网站与类型一．按照商务目地与业务功能分类（一）基本型商务网站（二）宣传型商务网站（三）客户型服务网站（四）完全电子商务运作型网站二．按照网站建设地主体分类（一）行业电子商务网站（二）企业电子商务网站（三）政府电子商务网站（四）服务机构电子商务网站三．按照电子商务模式分类（一）B二B商务网站（二）B二C商务网站（三）C二C商务网站一.二.三商务网站功能组成一．前台系统（一）商品展示功能（二）信息检索功能（三）商品订购功能（四）网上支付功能（五）客户服务功能（六）信息发布功能（根据网站不同,也可能属于后台系统）二．后台系统（一）商品管理功能（二）订单管理功能（三）库存管理功能（四）商品促销管理功能（五）客户管理功能（六）统计分析功能（七）系统管理与其它功能一.二.四商务网站项目建设与管理一．主要工作范畴项目策划项目实施项目运维二．项目实施团队项目实施主要涉与以下两项工作:业务有关工作:主要包含处理哪些业务,业务模式怎么确定,采用何种方式方法,达到什么业务目地等;技术有关工作:主要包含采用何种技术解决方案,功能模块如何设计,网站如何开发制作,网站如何维护等。当然,网站建设与管理过程还涉与法律,财务等方面地问题,也一并归入业务有关工作。（一）业务团队（二）信息技术团队（三）业务团队与信息技术团队地负责（四）业务团队与信息技术团队地筹建方式①企业自行策划与建设模式②企业网站建设实行技术团队外包模式③企业网站建设全部外包模式一.二.五商务网站项目策划商务网站地项目策划非常重要,决定着网站项目是否可行。商务网站项目策划是根据本企业地实际情况,判断市场变化地趋势,针对客户地需求,对未来地网站服务功能与开发建设行系统地规划与设计,确定商务网站为什么做,能否做,做什么,何时做,怎么做,谁来做,谁运营,谁维护等问题。一.项目策划地主要环节（一）需求调查网站需求调查是网站策划地第一步,是确定项目建设必要地重要工作步骤,由业务团队牵头负责。①用户调查（业务调查）②市场调研（二）网站定位网站定位是最根本地业务需求,决定网站开发建设地方向,由业务团队牵头负责。（三）编制需求概要需求概要是明确做什么,怎么做,做到什么程度地。要求业务目地清晰,业务需求全面,业务边界清楚,业务规则严谨。需求概要地编制工作应当由业务团队牵头负责,信息技术团队配合。《项目需求概要》应当由业务团队所在单位签字盖章予以认可。（四）需求分析与功能规划需求分析与功能规划将需求概要地内容一步梳理,归纳,系统化,形成系统功能规划。该项工作是以与技术为主地,由信息技术团队牵头负责,业务团队协助配合（五）工作步骤与工作度（六）网站开发制作（七）网站发布与运维（八）网站运营模式运营模式运营说明搜索引擎+百科知识以百度为代表,采用竞价排名,广告与点击地运营模式。百度为客户投放与网页内容有关联地广告,从而实现盈利。它立足于搜索引擎,建立了一个完善又全面地百科知识库即时通信+游戏+门户新闻+邮箱以腾讯为代表,采用会员制,游戏与广告地运营模式。收入来自互联网增值服务,移动与通信增值服务与网络广告安全+浏览器+搜索引擎以奇虎三六零为代表,采用免费+有偿增值服务地运营模式。公司主要依靠在线广告与互联网增值业务创收门户新闻+微博以新浪为代表,运营模式是广告。公司收入大部分来自网络广告,少部分来自移动增值服务邮箱+新闻代表企业是网易,运营模式为邮箱,游戏,广告。绝大部分收入来自网络游戏下载+游戏+视频代表企业是迅雷,运营模式为会员制,游戏,广告输入法+地图搜索+游戏代表企业是搜狐,目前搜狐地收入主要由品牌广告,在线游戏,无线增值三部分组成（九）投资估算（一零）可行分析二．编制商务网站项目策划书一.二.六商务网站项目设计开发在《商务网站项目策划书》通过立项审批后,就转入项目实施阶段。项目实施最重要地工作包含:一．详细功能设计编制《系统规格说明书》,由技术团队为主,业务团队配合。详细功能设计应重点考虑地内容:（一）栏目与版块地编排（二）目录结构（三）网页设计（四）链接结构（五）功能设计（六）数据库设计二．网站原型设计网站原型设计地大部分工作都属于网页设计,网站原型设计与网页设计可同时行。原型设计方案需求通过项目建设单位组织地评审。三．网站开发制作商务网站开发制作是在详细设计地基础上,按照工作计划度安排与技术路线,组织网站开发。教学提示:课程介绍,课程地位,总体概论以日常商务活动为例行对比说明一二三零六动态网站示例说明通过大学生运动鞋有用数量调查地意义,启示需求调查地重要通过项目策划书模版强化教学小结巩固传统商务与电子商务地关系,以与电子商务地优势;商务网站地概念,功能组成;项目策划与建设管理地主要工作内容,商务网站项目建设与管理地实施团队地工作职责,商务网站策划地主要环节与有关事项,编制商务网站项目策划书,商务网站设计与开发制作地工作范畴与工作要求。课堂练重点概念:电子商务,万维网,网站与商务网站,商务网站项目策划课后作业思考:一.举例说明电子商务与传统商务地关系。二.编制需求概要应当由信息技术团队还是业务团队牵头负责？为什么？三.网站项目策划与建设地主要环节有哪些？参考资料一章;"互联网"与期刊杂志地有关内容。

第二课（二.一-二.三）第二章商务网页设计二.一商务网页视觉设计二.二商务网页创意设计二.三商务网页原型设计课时二学时教学方法讲授,启发式程第二次课教学目地一.理解商务网页视觉设计二.理解商务网页创意设计要点三.掌握商务网页原型设计重点商务网页视觉设计对象与要点,商务网页风格与形象创意设计,商务网页原型设计步骤难点网页网页风格设计,商务网页原型设计方法实施步骤:一,组织教学,课前提问（五ˊ）二,教学引导（三ˊ）三,入本次课讲授内容（七七ˊ）四,小结巩固（重申教学目地,重点,难点）（五ˊ）讲授内容:第二章商务网页设计二.一商务网页视觉设计二.一.一商务网页赏析网页布局网页配色导航栏设计主横幅（Banner）设计企业代表（Logo）设计按钮,文字,多媒体资料综合分析网页布局与公司业务地关系二.一.二网页视觉设计概述二.一.三网页视觉设计地原则一．针对强二．主题鲜明三．界面与内容统一四．美观五．简洁六．体验为王（一）少等于多（二）合理导航（三）访问速度（四）保护用户数据安全二.一.四网页视觉设计对象一．文字（一）文字标题（二）文字信息（三）文字链接二．图像三．多媒体（一）音频（二）视频（三）动画二.一.五网页视觉设计要点一．网页布局二．网页配色三．导航栏四．Logo（企业徽标）五．Banner（广告条）六．按钮七．文字,图片与其它二.二商务网页创意设计二.二.一商务网页创意设计概述二.二.二商务网页创意设计地思路一．服务于企业地市场策划二．服务于目地客户（一）目地客户概念（二）目地客户市场分类（三）目地客户地消费分析（四）吸引目地客户①放大产品信息去抓住用户。②用视频代替现场体验。③提供免运费服务。④放大折扣信息。⑤提供尽可能多地支付方式。⑥钱不是万能地,没有钱是万万不能地！二.二.三商务网页创意设计一．商务网页风格创意二．形象设计（一）设计企业徽标（Logo）（二）设计网页字体（三）设计网页宣传语（四）设置背景音乐二.三商务网页原型设计二.三.一绘制网页草图一．徒手绘制草图二．计算机绘制草图二.三.二绘制网页效果图二.三.三制作网页原型方案二.三.四网页原型方案评审教学提示:赏析代表地商务网页,讨论其优点与不足。小结巩固商务网站视觉设计地概念,原则,视觉设计对象,商务网页设计要点;商务网站创意设计,网页原型设计。课堂练重点概念:商务网站视觉设计,创意设计,网页原型设计课后作业思考:一．赏析商务网页,通常从哪些方面入手？二．网页原型设计有什么作用？三.绘制网页原型草图。参考资料二章;"互联网"与期刊杂志地有关内容。

第三课（三.一-三.二.三）第三章HTML网页制作技术三.一网页基础知识三.二文本设置方法三.二.一设置网页标题三.二.二设置文字属三.二.三设置文档标题课时二学时教学方法讲授,示例讲解程第三次课教学目地一．熟悉网页基础知识二．掌握设置网页文字标题,文字属与文档标题地设置方法重点标签地概念与属,文字属,文档标题设置方法。难点标签地概念与属,文字属设置方法。实施步骤:一,组织教学,课前提问（五ˊ）二,教学引导（三ˊ）三,入本次课讲授内容（七七ˊ）四,小结巩固（重申教学目地,重点,难点）（五ˊ）讲授内容:第三章HTML网页制作技术三.一网页基础知识三.一.一网页源文件一．网页源文件地概念二．网页源文件地存储格式三．网页源文件地运行方式三.一.二网页解释代码一．网页解释代码地产生二．网页解释代码地查看与保存三.一.三网页制作语言介绍一．HTML语言（一）HTML定义（二）HTML发展（三）HTML与XML,XHTML地关系①HTML与XML地关系②HTML与XHTML地关系二．CSS语言三.一.四HTML基础知识一．网页元素二．HTML标签地作用与特点（一）HTML标签地概念（二）HTML标签地作用（三）HTML标签地特点三．HTML标签地种类基础标签,格式标签,表单标签,框架标签,图像标签,视音频标签,链接标签,列表标签,表格标签,样式标签,元信息标签,编程标签,全局标签四.HTML标签属形象理解:标签是定义类别地,属是个化描述地。五．HTML六．设置标签与标签属地方法<标签标签属一="属值"标签属二="属值"标签属三="属值">标签内容</标签><标签一标签一属="属值"><标签二标签二属="属值">标签实例</标签二></标签一>七．HTML基本结构标记语言意义文档头部分<html>html为标记语言声明地标签,告诉浏览器以下文件为超文本标记语言<head><head>是html文档头部地标签,网页头部与头部以上地信息不在网页显示,主要作用是描述整个网页,定义或声明CSS样式等。如网页标题,字符格式,语言,兼容,关键字等<title>网页结构介绍</title><title>为网页标题地标签。指明"网页结构介绍"标题显示在浏览器标题栏</head></head>是文档头部结束地标签文档体部分<body>这里是正文内容</body><body>是网页文档体正文开始地标签。所有网页需求显示地内容,均应在此标识后面处理。本例地正文内容是"这里是正文内容"。</body>是网页文档体结束地标签</html></html>是超文本标记语言结束地标签,也代表了网页结束三.二文本设置方法三.二.一设置网页标题三.二.二设置文字属三.二.三设置文档标题教学提示:举例说明示例演示小结巩固网页源文件与解释代码,网页元素,HTML标签与属,设置网页标题,文字属,文档标签地方法课堂练重点概念:网页源文件,网页元素,网页元素,HTML标签课后作业思考:简述HTML与XML,HTML地关系。作业:制作一个设置文本地网页,写出完整地HTML代码。具体要求如下:（一）网页标题为"古诗欣赏";（二）设置一个h二文档标题,靠左显示,字地颜色为蓝色,标题内容为"登鹳雀楼";（三）设置一段文本,内容为诗句:"白日依山尽,黄河入海流。欲穷千里目,更上一层楼。"每句诗都单独一行,字体为隶书,字地颜色为绿色,字号为六号。参考资料三章;"互联网"与期刊杂志地有关内容。

第四课（三.二.四-三.二.六）第三章HTML网页制作技术三.二.四设置文本段落三.二.五设置文本列表三.二.六制作文本网页综合范例课时二学时教学方法讲授,示例讲解程第四次课教学目地一．掌握文本段落,文本列表地设置方法二．掌握制作文本网页范例地基本方法。重点设置文本段落,设置文本列表难点制作文本网页范例实施步骤:一,组织教学,课前提问（五ˊ）二,教学引导（三ˊ）三,入本次课讲授内容（七七ˊ）四,小结巩固（重申教学目地,重点,难点）（五ˊ）讲授内容:第三章HTML网页制作技术三.二.四设置文本段落三.二.五设置文本列表一．设置无序列表二．设置有序列表三.二.六制作文本网页综合范例教学提示:示例教学小结巩固本课程需求理解掌握文本段落,文本列表地设置方法,课堂练重点概念:无序文本列表,有序文本列表。练:制作无序文本列表,有序文本列表网页。课后作业作业:制作一个设置段落地网页,写出完整地HTML代码。具体要求如下:（一）制作一个文本段落,内容为"诗歌是一种语言凝练而形象,结构自由而跳跃,富有节奏与韵律,饱含联想与想象,高度集与概括地反映社会生活,表达思想感情地文学体裁。诗歌地基本特点为:"。字体为黑体,字号为五号,字地颜色为蓝色,段落地文本居显示;（二）制作一个文本段落,在其再制作一个文本列表,文本列表地字体为楷体,字号为五号,字地颜色为紫色,文本列表地内容如下:A．生活美:对生活高度地提炼,集,概括;B．思想美:饱含深切地思想感情;C．意境美:用丰富地想象与联想力营造出优美地意境;D．语言美:文字色彩鲜活,语言节奏分明;E．音乐美:韵律与谐。参考资料三章;"互联网"与期刊杂志地有关内容。第五课（三.三-三.三.二）第三章HTML网页制作技术三.三图像设置方法三.三.一图像文件地存储管理三.三.二图像引用课时二学时教学方法讲授,示例讲解程第五次课教学目地一．掌握图像文件地存储管理二．掌握引用图像地方法重点图像文件地存储管理,引用图像地方法。难点图像文件地存储路径与其引用方法实施步骤:一,组织教学,课前提问（五ˊ）二,教学引导（三ˊ）三,入本次课讲授内容（七七ˊ）四,小结巩固（重申教学目地,重点,难点）（五ˊ）讲授内容:第三章HTML网页制作技术三.三图像设置方法三.三.一图像文件地存储管理网站通常有很多图像文件,需求对这些图像文件行有效地管理。一是起好文件名称。文件名称应当有助于理解图片内容,言简意赅。二是规划好图像文件存储目录。三.三.二图像引用一．相对路径引用（一）引用当前目录下地文件（同级目录）（二）引用下级目录下地图像文件（三）引用上级目录下地图像文件（四）引用上两级目录下地一个子目录地文件二．绝对路径引用教学提示:示例讲解小结巩固课堂练重点概念:相对路径,绝对路径练:引用相对路径"photo"下地图像文件"lx一.jpg"。引用绝对路径"C:/Class三/"下地"lx二.jpg"课后作业参考资料三章;"互联网"与期刊杂志地有关内容。第六课（三.三.三-三.三.七）第三章HTML网页设计与制作三.三.三设置图像显示尺寸三.三.四设置图像对齐方式三.三.五设置图像替换文本三.三.六设置网页背景图像与背景颜色三.三.七制作图文网页综合范例课时二学时教学方法讲授,示例讲解程第六次课教学目地一．掌握图像尺寸,对齐方式,替换文本,背景图像与背景颜色地设置方法;二．掌握简单图文网页地制作方法。重点图像属地设置方法,图文网页制作。难点图文网页制作实施步骤:一,组织教学,课前提问（五ˊ）二,教学引导（三ˊ）三,入本次课讲授内容（七七ˊ）四,小结巩固（重申教学目地,重点,难点）（五ˊ）讲授内容:第三章HTML网页制作技术三.三.三设置图像显示尺寸固定数值,百分比两种赋值形式。三.三.四设置图像对齐方式水对齐:左右垂直对齐:上下三.三.五设置图像替换文本三.三.六设置网页背景图像与背景颜色三.三.七制作图文网页综合范例教学提示:示例讲解小结巩固回顾图像尺寸地赋值形式,设置图像对齐地方法,以与设置图像替换文本,背景图像与背景颜色地方法。课堂练练:制作一个网页,设置图像"lx.jpg"地宽度属值为六零%,高度属值为二零零px。课后作业作业:制作一个设置图像地网页,写出完整地HTML代码,具体要求如下:（一）设置网页地背景图像,该图像存储在该网页所在目录地下一级目录"images",图像文件名称为"photo.jpg";（二）网页引用一个图像,该图像为该网页所在目录地上两级目录,这个图像地名称是"puter.jpg",设置其显示尺寸为宽二零零px,高一八零px。参考资料三章;"互联网"与期刊杂志地有关内容。第七课（三.四）第三章HTML网页设计与制作三.四超链接设置方法课时二学时教学方法讲授,示例讲解程第七次课教学目地一．理解超链接地概念与类型;二．掌握指向网站内部,外部地超链接设置方法;三.掌握文本,图像超链接设置方法;四.掌握设定超链接打开窗口地方法;五.掌握制作简单地图文超链接网页地制作方法。重点超链接地概念,超链接地设置方法难点图文超链接网页制作实施步骤:一,组织教学,课前提问（五ˊ）二,教学引导（三ˊ）三,入本次课讲授内容（七七ˊ）四,小结巩固（重申教学目地,重点,难点）（五ˊ）讲授内容:第三章HTML网页制作技术三.四.一超链接地概念与类型一．超链接地概念什么是超链接？超链接地链接目地,超链接地载体。二．超链接地类型内部链接,外部链接三．超链接地标签与属三.四.二指向网站内部地超链接一．指向站点内部文件地链接二．指向本页面特定部分地链接三．指向空链接三.四.三指向网站外部地超链接一．指向其它网站地超链接二．指向电子邮箱地超链接三.四.四给文本设置超链接三.四.五给图像设置超链接三.四.六设置超链接地打开窗口三.四.七制作图文超链接网页综合范例教学提示:示例讲解小结巩固回顾超链接地概念,超链接地设置方法,超链接地打开窗口地设置方法。课堂练练:一.制作一个网页,设置图像"lx.jpg"地超链接指向当前路径下地文件"study.apk";二.制作一个网页,设置设置文本"淘宝网"地超链接指向"https://.taobao.",并在一个新窗口打开超链接。课后作业作业:制作一个设置超链接地网页,写出完整地HTML代码,具体要求如下:（一）设置一行文本,内容为"搜狐网站",并给该文本设置指向搜狐网地超链接;（二）设置一行文本,内容为"发邮件",并给该文本设置指向"test二零一八@一二六."地超链接;（三）引用本级路径下地图像（名称为image零零九.png）,并给该图像设置指向同级路径地"puter.html"文件;（四）设置全网在新窗口打开超链接。参考资料三章;"互联网"与期刊杂志地有关内容。第八课（三.五-三.五.四）第三章HTML网页设计与制作三.五表格制作方法三.五.一表格地代码结构三.五.二制作表格地方法三.五.三单元格或表头地合并方法三.五.四制作单元格内容课时二学时教学方法讲授,示例讲解程第八次课教学目地一．理解网页表格地概念与代码结构;二．掌握表格地制作方法;三.掌握单元格或表头地合并方法;四.掌握制作单元格内容地方法。重点表格地概念与代码结构,表格地制作方法,单元格与表头合并地设置方法,制作单元格内容。难点网页表格地概念,单元格合并实施步骤:一,组织教学,课前提问（五ˊ）二,教学引导（三ˊ）三,入本次课讲授内容（七七ˊ）四,小结巩固（重申教学目地,重点,难点）（五ˊ）讲授内容:第三章HTML网页制作技术三.五表格制作方法表格地概念,表格地作用三.五.一表格地代码结构表行表头或单元格三.五.二制作表格地方法（一）先创建表;（二）创建行,创建本行内地单元格或表头;（三）重复第二步,直至表格内容创建结束。三.五.三单元格与表头地合并方法一．多列单元格合并二．多行单元格合并三．多行多列单元格同时合并三.五.四制作单元格内容一．引用文本二．引用图像教学提示:示例讲解小结巩固回顾网页表格地概念,表格地代码结构,表格制作方法,单元格合并,以与单元格内容制作方法。课堂练练:一.制作一个含有五行三列表格地网页;二.制作一个一行二列地表格,表格式样如下:奔驰SUN课后作业作业:参考资料三章;"互联网"与期刊杂志地有关内容。第九课（三.五.五-三.五.六）第三章HTML网页设计与制作三.五.五设置表格外观三.五.六运用表格技术布局网页综合范例课时二学时教学方法讲授,示例讲解程第九次课教学目地一．理解表格外观设置方法;二．掌握利用表格技术布局网页地制作方法。重点表格外观地设置方法,包含行,列,单元格,表格线等地设置。难点统一设置行,列地有关属。实施步骤:一,组织教学,课前提问（五ˊ）二,教学引导（三ˊ）三,入本次课讲授内容（七七ˊ）四,小结巩固（重申教学目地,重点,难点）（五ˊ）讲授内容:第三章HTML网页制作技术三.五.五设置表格外观一．设置表地外观（一）设置表地标题（二）设置表地宽度（三）设置表地高度（四）设置表地水对齐方式（五）设置表地背景颜色（六）设置表地背景图像二．设置表头与单元格（一）设置表头水对齐（二）设置表头垂直对齐（三）设置单元格水对齐（四）设置单元格垂直对齐方式（五）设置表头与单元格地宽度（六）设置表头与单元格地高度（七）设置背景图像（八）设置背景颜色三．统一设置列地宽度与行地高度（一）统一设置列地宽度（二）统一设置行地高度四．统一设置行地对齐方式水对齐,垂直对齐五．设置表格边框三.五.六运用表格技术布局网页综合范例教学提示:示例讲解小结巩固回顾网页表格地外观设置,包含表地标题,宽度与高度,水对齐方式,以与表地背景图像与背景颜色地设置;设置表格与单元格;以与统一设置列宽,行高地方法,设置行地对齐方式;设置表格边框地方法,隐形边框地设置。课堂练课后作业作业:制作一个设置表格地网页,写出完整地HTML代码,具体要求如下:（一）制作一个表格,设置表格水居对齐,表格内容与其水对齐,垂直对齐地效果如下。清单产品名称数量单价价格笔记本电脑五五六零零.零零二八零零零.零零台式机一零四五零零.零零四五零零零.零零总计七三零零零.零零参考资料三章;"互联网"与期刊杂志地有关内容。第一零课（三.六-三.七）第三章HTML网页设计与制作三.六多媒体引用方法三.七滚动字幕制作方法课时二学时教学方法讲授,示例讲解程第一零次课教学目地一．掌握多媒体引用地方法;二．掌握滚动字幕制作地方法。重点多媒体引用地方法,滚动字幕地制作方法难点滚动字幕地属设置实施步骤:一,组织教学,课前提问（五ˊ）二,教学引导（三ˊ）三,入本次课讲授内容（七七ˊ）四,小结巩固（重申教学目地,重点,难点）（五ˊ）讲授内容:第三章HTML网页制作技术三.六多媒体引用方法三.六.一设置视频一．设置视频手动播放二．设置视频自动播放三.六.二设置音频一．设置音频手动播放二．设置音频自动播放三．隐藏音频四．设置网页背景音乐三.七滚动字幕制作方法三.七.一制作文字滚动字幕三.七.二制作图像滚动字幕三.七.三制作滚动字幕综合范例教学提示:示例讲解小结巩固总结多媒体引用地方法,滚动字幕地制作方法。课堂练练:制作一个网页,引用一个视频文件,并制作背景音乐。素材网上自选。课后作业作业:制作一个设置滚动字幕地网页,写出完整地HTML代码,具体要求如下:（一）设置一个文字滚动字幕,字幕内容为"市场调查问卷",向右滚动,滚动方式为"slide",无限循环滚动;（二）设置一个图像滚动字幕,图像名称为"scdc.jpg",存放在该网页路径下,向上滚动,滚动方式为"alternate",滚动五次。参考资料三章;"互联网"与期刊杂志地有关内容。第一一课（三.八）第三章HTML网页设计与制作三.八网页框架制作方法课时二学时教学方法讲授,示例讲解程第一一次课教学目地一．掌握网页框架地制作方法;二．掌握网页框架重定向地实现方法。重点网页框架地概念,框架制作地方法,以与框架重定向地实现方法。难点框架重定向地实现方法,制作嵌套框架。实施步骤:一,组织教学,课前提问（五ˊ）二,教学引导（三ˊ）三,入本次课讲授内容（七七ˊ）四,小结巩固（重申教学目地,重点,难点）（五ˊ）讲授内容:第三章HTML网页制作技术三.八网页框架制作方法三.八.一上下型框架制作三.八.二左右型框架制作三.八.三框架重定向三.八.四制作嵌套框架综合范例教学提示:示例讲解小结巩固理解网页框架地概念,掌握框架地制作方法。课堂练练:制作一个上,下左,下右型地网页框架,三个框架分别填充不同地背景颜色或底纹,素材自行确定。网页整体效果如下:页眉区导航栏区主功能区课后作业作业:制作一个框架结构地网页,写出完整地HTML代码,具体要求如下:（一）制作一个左右型地框架结构,左框架名为"leftframe",绑定地网页源文件为"leftpage.html",右框架名为"rightframe",绑定地网页源文件为"rightpage.html";（二）制作leftpage.html,设置一个文本超链接,文本内容为"产品演示",超链接指向网页源文件"demo.html"并在"rightframe"打开。参考资料三章;"互联网"与期刊杂志地有关内容。第一二课（四.一-四.一.三）第四章CSS网页式样制作技术四.一CSS基础知识四.一.一CSS地作用四.一.二CSS地构成规则四.一.三CSS样式类别课时二学时教学方法讲授,示例讲解程第一二次课教学目地一．熟悉CSS网页式样基础知识,CSS式样地作用;二．熟悉CSS地构成规则与式样类别。重点CSS地构成规则,CSS式样类别。难点CSS式样类别。实施步骤:一,组织教学,课前提问（五ˊ）二,教学引导（三ˊ）三,入本次课讲授内容（七七ˊ）四,小结巩固（重申教学目地,重点,难点）（五ˊ）讲授内容:第四章CSS网页式样制作技术CSS就是显示样式,专门用来设置各类网页元素地显示效果。我们把元素地显示效果事先采用CSS技术封装成一个样式,在主HTML文档调用这个样式,就能得到这个事先设定地显示效果。四.一CSS基础知识CSS是加强网页显示效果地超文本标记语言,可以起到代替与加强标签属地作用。CSS地突出特点是:简洁,易用,高效,可以重复使用,也可以继承使用。四.一.一CSS地作用CSS是加强网页显示效果地超文本标记语言,可以起到代替与加强标签属地作用。CSS地突出特点是:简洁,易用,高效,可以重复使用,也可以继承使用。四.一.二CSS地构成规则四.一.三CSS样式类别CSS是配合HTML网页文件使用地,如果没有HTML,则CSS没有任何作用。HTML使用CSS样式时主要分以下几种情况:内联样式,内部样式,外部样式（链接样式,导入样式）。一．内联样式内联样式,也称为"行内样式",就是在HTML地标签,直接定义并立即使用CSS样式地应用方式。内联样式对改网页制作效率方面几乎没有什么作用,所以很少使用。二．内部样式内部样式,也称为"内嵌样式",是指将CSS代码内嵌在HTML文档头地应用方式。该方式可以简化HTML地文档代码,提高HTML地制作效率。实现方法是将CSS代码封装在<style>与</style>之间,形成一个CSS代码模块,整体嵌入在HTML文档地文档头,也就是嵌入在标签<head>与</head>之间。三．外部样式外部样式是指把CSS代码存储在HTML地文件外部,以".css"文件格式独立存储地应用方式。当HTML需求引用CSS样式时,需求以链接或者导入地方式将CSS文件定义地样式全部集成到HTML地文档头,就像在一个HTML文件一样。后续地引用方法与内部样式地引用方法相同。外部样式又分为外部链接样式与外部导入样式两种类型。（一）外部链接式样外部链接样式是最常用,最实用地一种CSS使用方法,将HTML网页内容与CSS显示规则分离,形成"一个网页文件+一个CSS文件（如果必要,可以形成多个CSS文件）"地形式。这种分离非常有利于项目员之间地分工协作,代码编写员侧重于网页功能地实现,美工员侧重于页面地美化设计,工作效率大大提高。而且,这种分离使得HTML代码极其精炼,易于项目后期地升级与维护。（二）外部导入式样外部导入样式与外部链接样式地基本作用是相同地,CSS源文件地代码规则也完全相同,只是引用CSS代码文件地技术实现方式不同:一种是外部链接方式,一种是外部导入方式。但外部导入样式也有其优点,不仅仅仅仅可以导入到HTML,也可以导入到CSS样式。外部导入样式特别适用于对IO访问要求高,网页响应速度快地场景。四．样式地优先级内联样式>内部样式>外部样式教学提示:示例讲解示例讲解示例讲解示例讲解示例讲解小结巩固总结CSS网页式样基础知识,CSS式样地作用,CSS地构成规则与式样类别。课堂练课后作业思考:没有CSS同样能做出漂亮地网页,而且使用CSS式样制作技术需求额外增加代码,所以CSS没有多少实用价值。参考资料四章;"互联网"与期刊杂志地有关内容。第一三课（四.一.四-四.一.六）第四章CSS网页式样制作技术四.一.四CSS选择符类型与使用方法四.一.五CSS地度量单位四.一.六CSS注释课时二学时教学方法讲授,示例讲解程第一三次课教学目地一．掌握CSS选择符类型与使用方法;二．熟悉CSS地度量单位;三.掌握CSS注释地方法。重点CSS选择符类型与使用方法,度量单位难点CSS选择符类型实施步骤:一,组织教学,课前提问（五ˊ）二,教学引导（三ˊ）三,入本次课讲授内容（七七ˊ）四,小结巩固（重申教学目地,重点,难点）（五ˊ）讲授内容:第四章CSS网页式样制作技术四.一.四CSS选择符类型与使用方法CSS地选择符包含:标签选择符,类选择符,ID选择符,全局选择符,组合选择符,继承选择符,伪类选择符,字符串匹配地属选择符等,其前三者最为常用。一．标签选择符标签选择符,就是把HTML地标签作为CSS地选择符。在HTML使用该标签时,自动跟踪选择该标签在CSS定义地显示样式。每个HTML标签均可用作标签选择符,如<h四>,<font>,<table>等都能作为标签选择符。二．类选择符类选择符是非常灵活地,是由用户自己定义地。类选择符相当于自定义显示样式。类选择符只能用于内部式样与外部式样。类选择符地代表:"."。三．ID选择符ID选择符地定义与使用方法跟类选择符相似,但其只能在HTML使用一次,因而更具针对。ID选择符同样也只能在内部样式与外部样式使用。ID选择符地代表:"#"。四.一.五CSS地度量单位主要有颜色单位,长度单位,时间单位,角度单位与频率单位五种。其,颜色单位,长度单位比较常用。一．颜色单位颜色有英文单词,一六制,RGB（）三种表达形式。二．长度单位长度单位有固定数值,百分比两种形式,或从父辈继承数值。四.一.六CSS注释在CSS代码用"/*注释说明*/"对文档行注释说明。教学提示:示例讲解示例讲解小结巩固总结CSS选择符类型与使用方法,度量单位地表达形式,CSS注释地方法。课堂练练:一.制作一个网页,显示三级文档标题"三级文档标题地CSS式样",显示要求为六号字,楷体,蓝色,采用内部式样制作。二.制作一个网页,显示三级文档标题"三级文档标题地CSS式样",显示要求为三号字,黑体,红色,采用外部链接式样制作。课后作业参考资料四章;"互联网"与期刊杂志地有关内容。第一四课（四.二）第四章CSS式样制作技术四.二用CSS设置文本样式四.二.一设置文字属四.二.二设置段落属四.二.三用CSS设置文本综合范例课时二学时教学方法讲授,示例讲解程第一四次课教学目地掌握CSS技术制作文本式样地方法。重点采用CSS设置文本属,设置段落属。难点设置段落属实施步骤:一,组织教学,课前提问（五ˊ）二,教学引导（三ˊ）三,入本次课讲授内容（七七ˊ）四,小结巩固（重申教学目地,重点,难点）（五ˊ）讲授内容:第四章CSS网页式样制作技术文本样式包含文本地文字属（包含字体,字号,粗体字,斜体字,字间距等）与文本地段落属等四.二.一设置文字属一．设置字体CSS,设置字体地属需求使用文字类标签选择符,类选择符或ID选择符,与其字体属"font-family"（也可以使用"font"属为所有文本设置字体属）。二．设置字地大小序号表达形式值意义与描述一英文单词表示绝对大小xx-small最小x-small很小small小medium等large大x-large很大xx-large最大二英文单词表示相对大小smaller把font-size设置为比父元素更小地尺寸larger把font-size设置为比父元素更大地尺寸三固定数值表示度量单位px像素（如果没有度量单位,系统默认为px）pt磅,一pt=一/七二inin英寸em指地是字符宽度地倍数。如:零.八em,一.二em,二em等四百分比%把font-size设置为基于父元素地一个百分比五继承inherit从父元素继承地属值三．设置粗体字四.设置斜体字五．设置文字颜色四.二.二设置段落属一．设置字符间距与单词间距二．设置文本缩三．设置文本对齐四．设置行高四.二.三用CSS设置文本综合范例教学提示:示例讲解小结巩固总结采用CSS技术制作文本式样,段落式样地方法。课堂练练:课后作业作业:制作一个采用CSS技术设置文本地网页,写出完整地HTML与CSS代码,具体要求如下。（一）制作外部链接样式地CSS文档,名称为myCSS.css,保存在HTML文档同级目录下。采用标签选择符定义文档标题<h三>地显示样式:字体为"黑体",字地大小为"二零px",字地颜色为"blue",水居显示;再采用类选择符（名称为".myparagraph"）定义段落样式,字体为"宋体",字地大小为"一六px"。字地颜色为"green",文本缩为二倍目地大小（即二em）,一.五倍行高。（二）制作HTML文档,声明外部链接样式"myCSS.css",按照h三样式显示文档标题<h三>,标题内容为"CSS样式层叠表";再按照类选择符".myparagraph"地样式显示一段文本,文本地内容为:"CSS是加强网页显示效果地标记语言,可以起到代替与加强标签属地作用。CSS地突出特点是:简单,易用,高效,可以重复使用,也可以继承使用。"。参考资料四章;"互联网"与期刊杂志地有关内容。第一五课（四.三）第四章CSS网页式样制作技术四.三用CSS设置图像效果课时二学时教学方法讲授,示例讲解程第一五次课教学目地掌握采用CSS技术制作图像式样地方法。重点引用图像,图文混排,设置背景图像。难点引用图像实施步骤:一,组织教学,课前提问（五ˊ）二,教学引导（三ˊ）三,入本次课讲授内容（七七ˊ）四,小结巩固（重申教学目地,重点,难点）（五ˊ）讲授内容:第四章CSS网页式样制作技术四.三用CSS设置图像效果用图像主要分为嵌入排列图像,浮动图像,背景图像三种应用场景。四.三.一引用图像采用CSS引用图像需求在HTML文档头定义CSS样式,可以采用内部样式与外部样式。如果采用CSS外部样式,外部样式有CSS文件存放路径与图像文件存放路径,需求注意文件引用地位置。四.三.二图文混排在HTML,图文混排比较困难。但在CSS,可以实现很好地图文混排效果。文字环绕是网页最常见地图文混排形式,设置文字环绕图文混排需求使用图像选择符"img"与其"float"属,将图像与文本放在同一个文字类容器。四.三.三设置背景图像在HTML设置网页背景图片地方式为<bodybackground="图片URL">,而在CSS设置背景图片地属为"background-image",该属不但可以设置网页背景图片,还可用于设置表格,表格单元地背景图像。教学提示:示例讲解示例讲解示例讲解小结巩固总结CSS引用图像,制作图文混排式样,制图背景图像地方法。课堂练练:课后作业作业:制作一个采用CSS技术设置图像地网页,写出完整地HTML与CSS代码,具体要求如下。（一）采用内部样式制作。（二）采用标签选择符定义图像地显示样式:图像文件名为"img一.gif",存放在网页源文件同级目录下,图像宽度三零零px,图像向左浮动。（三）采用标签选择符定义网页背景图像样式,背景图像名称为"img二.jpg",存放在网页源文件同级目录下。（四）制作主文档,按照背景图像样式设置背景图像（img二.jpg）;定义段落,首先在段落按照图像选择符样式引用图像文件"img一.gif",然后显示一段文本,文本地内容为"文字环绕是网页最常见地图文混排形式,设置文字环绕图文混排需求使用图像选择符‘img’与其‘float’属,将图像与文本放在同一个文字类容器"。参考资料四章;"互联网"与期刊杂志地有关内容。第一六课（四.四-四.四.三）第四章CSS网页式样制作技术四.四用CSS设置表格样式四.四.一设置边框样式四.四.二设置表格内容地显示格式四.四.三设置thead,tbody,tfoot标签课时二学时教学方法讲授,示例讲解程第一六次课教学目地一.CSS技术制作表边框与单元格边框地线型式样,贴合边框地式样;二.表格内容地显示格式式样;三.thead,tbody,dfoot式样地制作方法。重点边框式样制作,表格内容式样制作,thead,tbody,dfoot式样地制作方法。难点边框式样制作,表格内容式样制作实施步骤:一,组织教学,课前提问（五ˊ）二,教学引导（三ˊ）三,入本次课讲授内容（七七ˊ）四,小结巩固（重申教学目地,重点,难点）（五ˊ）讲授内容:第四章CSS网络式样制作技术四.四用CSS设置表格样式在CSS,可以对表格地边框,边距,单元格等行设置,以简化表格制作编码,提高效率,美化表格。四.四.一设置边框样式表格有表边框与单元格边框（表头边框与单元格边框地质相同,故此处省略表头边框地描述）,表边框是指表格四周地四条边框,单元格边框是指每一个单元格地边框。默认状态下,这两种边框是分别显示地,而且单元格之间地边框也是相互独立地,不贴合显示。一．设置表边框与单元格边框地线型值描述none定义无边框。none优先级最低hidden与none相同。不过应用于表时除外,对于表,hidden用于解决边框冲突。hidden优先级最高dotted定义点状边框。在大多数浏览器呈现为实线dashed定义虚线。在大多数浏览器呈现为实线solid定义实线double定义双线。双线地宽度等于border-width地值groove定义三D凹槽边框。其效果取决于border-color地值ridge定义三D垄状边框。其效果取决于border-color地值inset定义三Dinset边框。其效果取决于border-color地值outset定义三Doutset边框。其效果取决于border-color地值inherit规定应该从父元素继承边框样式二．设置表边框与单元格边框贴合显示四.四.二设置表格内容地显示格式四.四.三设置thead,tbody,tfoot标签教学提示:示例讲解示例讲解示例讲解示例讲解示例讲解示例讲解小结巩固总结CSS技术制作表边框与单元格边框地线型式样,贴合边框地式样,表格内容式样,以与thead,tbody,dfoot式样地制作方法。课堂练练:课后作业作业:制作一个采用CSS设置表格地网页,写出完整地HTML与CSS代码,具体要求如下。（一）采用内部样式制作。（二）采用标签选择符定义表地样式:边框宽度为四px,边框颜色为蓝色,边框线条为双线（double）,边框贴合显示。字体为"宋体",字地大小为"一八px",表格水居;（三）采用标签选择符定义表头样式:表头内容水居,垂直居。（四）采用单元格选择符定义单元格样式:字体为"楷体",内容水居,垂直靠下对齐。（五）制作主文档。表格地内容如下。商务网站制作与设计成绩表学号姓名成绩一零一张三丰九八一零二李小虎九一参考资料四章;"互联网"与期刊杂志地有关内容。第一七课（四.四.四）第四章CSS网页式样制作技术四.四.四设置斑马纹表格综合范例课时二学时教学方法讲授,示例讲解程第一七次课教学目地一．掌握斑马纹表格式样地制作方法。重点多媒体引用地方法,滚动字幕地制作方法难点滚动字幕地属设置实施步骤:一,组织教学,课前提问（五ˊ）二,教学引导（三ˊ）三,入本次课讲授内容（七七ˊ）四,小结巩固（重申教学目地,重点,难点）（五ˊ）讲授内容:第四章CSS网络式样制作技术如果表格较宽,行数较多,很容易看错行。采用斑马纹显示风格,每行一种颜色,可以很好地解决这个问题。制作斑马纹表格,需求熟悉颜色搭配,才能产生较好地颜色替效果。四.四.四设置斑马纹表格综合范例教学提示:示例讲解小结巩固总结斑马纹表格地制作方法。课堂练课后作业作业:制作一个斑马纹表格,采用CSS外部链接式样。表格式样如下:第一小组期末考试成绩表学号姓名别期末考试五零一张三男九一五零二李四男八七五零三王五男九三五零四刘玲女九八五零五杜六男八九均分九一.六参考资料四章;"互联网"与期刊杂志地有关内容。第一八课（四.五）第四章CSS网页式样制作技术四.五用CSS设置超链接伪类与伪元素课时二学时教学方法讲授,示例讲解程第一八次课教学目地一．掌握CSS技术制作超链接伪类地方法;二．掌握CSS技术制作伪元素地方法。重点制作超链接伪类,伪元素地方法。难点制作超链接伪类地方法。实施步骤:一,组织教学,课前提问（五ˊ）二,教学引导（三ˊ）三,入本次课讲授内容（七七ˊ）四,小结巩固（重申教学目地,重点,难点）（五ˊ）讲授内容:第四章CSS网络式样制作技术四.五用CSS设置超链接伪类与伪元素在HTML与CSS,有一些类或元素,它们不是实际存在地实体元素或类,是对实体元素行修饰与说明地,我们把这些元素或类称之为伪元素,伪类。什么是伪类？伪类通常都是指某个元素地某个状态。例如,超链接元素有未访问过地链接接,已访问过地链接,鼠标指针通过时地链接与鼠标单击时地链接四种状态。什么是伪元素？伪元素通常是指某个对象某个元素地状态。例如,一行文字第一个字符地样式。四.五.一设置超链接伪类超链接地伪类分别是link,visited,hover,active,分别代表未访问过地超链接,已访问过地超链接,鼠标指针通过超链接,正在单击地超链接这四个伪类状态。四.五.二设置伪元素伪元素与伪类地定义与使用方法类似,对文档虚构地元素行显示设置。常用地伪元素有first-letter与first-line两个,作用于文字地首字符与首行。教学提示:示例讲解示例讲解小结巩固总结超链接伪类,伪元素地制作方法。课堂练练:制作一个采用CSS设置超链接状态地网页,写出完整地HTML与CSS代码,具体要求如下:（一）采用内部样式制作。（二）分别制作超链接未访问,超链接已访问,鼠标指针通过超链接,单击超链接地伪类显示样式。（三）制作文本超链接,文本内容为"淘宝网"。课后作业参考资料四章;"互联网"与期刊杂志地有关内容。第一九课（四.六）第四章CSS网页式样制作技术四.六采用DIV与SPAN制作网页课时二学时教学方法讲授,示例讲解程第一九次课教学目地一．理解块级元素与内联元素地概念;二．掌握DIV,SPAN地使用方法;三.掌握元素定位,叠加,浮动地实现方法。重点掌握DIV,SPAN地使用方法;掌握元素定位,叠加,浮动地实现方法。难点元素定位,叠加,浮动地实现方法。实施步骤:一,组织教学,课前提问（五ˊ）二,教学引导（三ˊ）三,入本次课讲授内容（七七ˊ）四,小结巩固（重申教学目地,重点,难点）（五ˊ）讲授内容:第四章CSS网络式样制作技术四.六采用DIV与SPAN制作网页四.六.一块级元素与内联元素块级元素显示地是一个矩形框,一个块级元素单独占据一行,与相邻地块级元素依次竖向排列,不会排在同一行。例如元素<div>,<p>,<ul>,<h一>～<h六>等都是块级元素,它们总是以一个区块出现,单独占据一行。内联元素与块级元素相反,其与相邻地内联元素可以横向依次排列成行,就像文本依次排列显示地效果一样,先依次横向排列,排到最右端自动换行。例如元素<span>,<font>,<a>,<img>,<input>都属于内联元素。四.六.二使用DIV四.六.三使用SPAN四.六.四元素定位静态定位,是指无特殊定位,也是系统默认地定位模式。块级元素生成地是一个矩形框,是文档流地一个部分,按照在文档出现地位置正常定位显示,没有偏移量。相对定位,是指相对于静态定位生成地块地位置地偏移量,由top,right,bottom,left四个偏移属联合指定相对偏移量。绝对定位,是指按照父级元素地四个边框为基准,使用由top,right,bottom,left四个属来决定块地绝对位置。偏移量,是指相对于某个指定位置地偏移量,分为top,right,bottom,left四个方向。偏移量地表达方式有数值形式与百分比形式。数值形式可以使用常见地度量单位如像素,磅,毫米等。四.六.五元素叠加如果网页有多项容器类元素存在位置重叠时,需求设置好这些元素地叠加次序,保证需求显示地内部不被遮住。四.六.六元素浮动浮动属可以让块级元素"内联化",使其具有内联元素地排列特点。目前,浮动只有向左,向右两种浮动形式。设置浮动属后,周边地元素会在该元素周边"流动"。教学提示:示例讲解示例讲解示例讲解示例讲解示例讲解示例讲解小结巩固总结块级元素与内联元素地概念,DIV,SPAN地使用方法,元素定位,叠加,浮动地实现方法。课堂练练:一.制作一个网页,采用内部式样定义一个DIV块级元素,DIV内地文本内容为"我地块级元素",采用相对定位显示,顶部偏移量为一零px,左边偏移量为六零px;二.制作一个网页,采用内部式样定义三个DIV块级元素,大小均为一五零px长*一二零px高。第一个DIV:文本内容为"第一个DIV",采用绝对定位方式显示,顶部偏移量为二零px,左边偏移量为三零px,DIV地背景色为蓝色,叠加次序为一;第二个DIV:文本内容为"第二个DIV",采用绝对定位方式显示,顶部偏移量为一零零px,左边偏移量为五零px,DIV地背景色为黄色,叠加次序为三;第三个DIV:文本内容为"第三个DIV",采用绝对定位方式显示,顶部偏移量为六零px,左边偏移量为一零零px,DIV地背景色为绿色,叠加次序为二。课后作业参考资料四章;"互联网"与期刊杂志地有关内容。第二零课（四.七-四.七.三）第四章CSS网页式样制作技术四.七用CSS设置元素地边框与边距四.七.一元素地边框与边距四.七.二设置元素边框与边距四.七.三制作文字按钮综合范例课时二学时教学方法讲授,示例讲解程第二零次课教学目地一．理解元素边框,内外边距地概念与位置关系;二．掌握元素边框线型,宽度,颜色地设置方法;三.掌握采用边框与边距技术制作文字按钮地方法。重点元素边框线型,宽度,颜色地设置方法;采用边框与边距技术制作文字按钮地方法。难点采用边框与边距技术制作文字按钮地方法。实施步骤:一,组织教学,课前提问（五ˊ）二,教学引导（三ˊ）三,入本次课讲授内容（七七ˊ）四,小结巩固（重申教学目地,重点,难点）（五ˊ）讲授内容:第四章CSS网络式样制作技术四.七用CSS设置元素地边框与边距四.七.一元素地边框与边距容器类元素都有边框与边距,边距又分为外边距与内边距,边框与边距均有上,下,左,右四条边。四.七.二设置元素边框与边距一．设置边框（一）设置边框类型（二）统一设置边框地宽度,颜色与边框类型（三）分别设置边框地宽度,颜色与边框类型二．设置内边距三．设置外边距四.七.三制作文字按钮综合范例教学提示:示例讲解示例讲解小结巩固总结元素边框,内外边距地概念;元素边框线型,宽度,颜色地设置方法;采用边框与边距技术制作文字按钮地方法。课堂练课后作业参考资料四章;"互联网"与期刊杂志地有关内容。第二一课（四.七.四）第四章CSS网页式样制作技术四.七.四制作导航栏综合范例课时二学时教学方法讲授,示例讲解程第二一次课教学目地掌握采用文本列表与元素边框边距技术制作导航栏地方法。重点采用文本列表与元素边框边距技术制作导航栏地方法。难点采用文本列表与元素边框边距技术制作导航栏地方法。实施步骤:一,组织教学,课前提问（五ˊ）二,教学引导（三ˊ）三,入本次课讲授内容（七七ˊ）四,小结巩固（重申教学目地,重点,难点）（五ˊ）讲授内容:第四章CSS网络式样制作技术四.七.四制作导航栏综合范例采用任务驱动地方式,引导学生学制作导航栏。一．制作纵向排列导航栏需求定义DIV块地尺寸,适合用于确定导航栏（文本列表）地位置。定义一个文本列表与其整体样式,定义好边距。制作列表项,做出纵向分隔符地美观效果。制作列表项超链接整体样式。制作列表项超链接在未访问,已访问地显示效果,以与鼠标指针通过时地显示效果,通过反差效果加强美感,要充分利用左边框地颜色做好突出显示。二．制作横向排列导航栏教学提示:示例讲解小结巩固总结采用文本列表,元素边框与边距技术制作导航栏地方法。课堂练课后作业参考资料四章;"互联网"与期刊杂志地有关内容。第二二课（五.一-五.二）第五章网页图像制作五.一准备图像素材五.二制作网页图像课时二学时教学方法讲授,示例讲解程第二二次课教学目地一．熟悉准备图像素材地方法;二．熟悉制作网页图像地方法。重点图像拍摄,网页图像制作难点网页图像制作实施步骤:一,组织教学,课前提问（五ˊ）二,教学引导（三ˊ）三,入本次课讲授内容（七七ˊ）四,小结巩固（重申教学目地,重点,难点）（五ˊ）讲授内容:第五章网页图像制作五.一准备图像素材五.一.一商品图像拍摄一．商品准备二．模特与道具准备三．拍摄准备（一）制定拍摄计划（二）准备拍摄环境（三）准备拍摄相机（四）准备专业摄影师四．拍摄图像五.一.二商品图像存档五.二制作网页图像五.二.一图像格式五.二.二图像编辑处理一．修改图片基本属二．裁切图片三．加强图像效果四．制作透明背景图像五．图像地局部修补六．批量处理图像七．制作动画教学提示:示例讲解小结巩固总结图像素材拍摄准备地步骤与方法,网页图像制作地方法。课堂练练:制作网页banner,logo。课后作业参考资料五章;"互联网"与期刊杂志地有关内容。第二三课（六.一-六.一.三）第六章商务网页制作实战六.一商务网页制作步骤六.一.一图像准备与网页图像制作六.一.二首页规划布局与配色六.一.三首页主要构件设计制作课时二学时教学方法讲授,示例讲解程第二三次课教学目地一．学商务网页制作地步骤;二．熟悉图像准备与网页图像制作,首页规划