《网页设计与制作》模块6图文模板
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
3.网页完成效果是否和教师讲解的一致。
1.课堂表现 2.学习任务完成 3.网页完成的效果
指导教师综合 评价 指导教师签名：
日期：
60%
模块6：制作手机端网页
任务总结
学习 导入
学习目 标 任务 制作校园勋 章疯狂任务网页
任务 描述任务 目标任务 分析任务 实施任务 评价任务 总结必备 知识
○任务总结 本任务详细校园勋章疯狂任手机端网页的制
value="<"/></li> <li><input type="radio"/></li> <li><input type="radio"/></li> <li><input type="radio"/></li>
CSS 代 码<li><input type="radio"/></li> .biaodan{<mlair>g<iinn:p0utauttyop;eh=e"ibguhttt:o2n0"px; width:200px; line-height:2 .vbailauoed=a"n>"u/l>{<l/ilsit>-style-type:none;}. biaodan l<i/{ufll>oat:left; width:30px;}
模块6：制作手机端网页
任务实施
学习 导入
学习目 标 任务 制作校园勋 章疯狂任务网页
任务 描述任务 目标任务 分析任务 实施任务 评价任务 总结必备 知识
2、活动专区制作
图6-26 活动专区
HTML代 码 <div class="active">活动专区 C<S/Sdi代v> 码 .active{height:30px;width:100%;backgroundcolor:#ff9900; line-height:30px;font-family:"黑体"; color:#FFF; text-align:center; letter-spacing:2px; margin-bottom:3px; font-size:18px;}
模块6：制作手机端网页
任务实施
学习
4、任务宣传制作
导入
学习目
标 任务 制作校园勋
章疯狂任务网页 任务
图6-28 任务宣传
描述任务 目标任务 分析任务 实施任务 评价任务
HTML代 码
<div class="biaoyu">校图勋章疯狂任务，你准 C备SS好代了吗码?</div> .biaoyu{height:20px; width:100%; line-height:20px; color:#ff9966; text-align:center; font-weight:500;}
总结必备
知识
模块6：制作手机端网页
任务实施
学习 导入
学习目 标 任务 制作校园勋 章疯狂任务网页
任务 描述任务 目标任务 分析任务 实施任务 评价任务 总结必备
5、按钮
图6-29 按钮
HTML代 码 <div class="biaodan">
<ul> <li><input type="button"
作过程，使用到的知识点有使用DIV布局网页，CSS样 式的表单、字体、背景、无序列表等样式。在制作过 程中，尽量理解操作步骤中各关键步骤的作用，结合 制作分析，理解这样式表现出来的网页效果，从而达 到熟能生巧的目的。
模块6：制作手机端网页
必备知识
学习 导入
学习目 标 任务 制作校园勋 章疯狂任务网页
自我评价
小组评价
教师（企 业）评价
权重
得分小 计
总分
10%
20%
70%
关键能力
1.计算机操作的规范性； 2.能参与小组讨论，相互交流； 3.能积极主动、勤学好问； 4.能清晰、准确表达。
1.课堂表现 2.学习任务完成
40%
专业能力
1.DIV盒子模型的理解； 2．CSS 样式字体样式、列表样式使用的熟 练程度；
图6-3 网 页效果图
模块6：制作手机端网页
必备知识
学习 导入
学习目 标 任务 制作校园勋 章疯狂任务网页
任务 描述任务 目标任务 分析任务 实施任务 评价任务 总结必备 知识
<Байду номын сангаасtml>
<head>
<title>div 标记范例</title>
<style type="text/css">
<!--
模块6：制作手机端网页
学习 导入
学习目 标 任务 制作校园勋 章疯狂任务网页
任务 描述任务 目标任务 分析任务 实施任务 评价任务 总结必备
7、页脚区 图6-31 页脚区
任务实施
小贴士
HTML代 码 <div class="hdq">
<ul> <li class="duiq"><span><input type="button" class="btw" value="1" />
模块6：制作手机端网页
任务实施
学习 导入
学习目 标 任务 制作校园勋 章疯狂任务网页
任务 描述任务 目标任务 分析任务 实施任务 评价任务 总结必备 知识
3、广告区制作
图6-27 广告区 HTML代 码 <div class="guanggao"><img src="011.gif" /></div> CSS 代 码 .guanggao{ margin:0 auto; width:200px; height:180px;}
书签下载 广告合作<br/>
模块6：制作手机端网页
任务评价
学习 导入
学习目 标 任务 制作校园勋 章疯狂任务网页
任务 描述任务 目标任务 分析任务 实施任务 评价任务 总结必备
○任务评价
学习任务名称：制作校园勋章疯狂任
务网班页级：
学号：
姓名：
指导教师：
评价方式
评价项目
评价标准
评价依据（指信息、佐 证）
模块6：制作手机端网页
学习 导入
学习目 标 任务 制作校园勋 章疯狂任务网页
任务 描述任务 目标任务 分析任务 实施任务 评价任务 总结必备 知识
6、活动区 图6-30 活动区
任务实施
HTML代 码 <div class="hd"></div> <div class="hdq">
<div class="ggt"><img src="01.gif" width="80" height="80"/></div>
任务 描述任务 目标任务 分析任务 实施任务 评价任务 总结必备 知识
○必备知识 1.div盒子模型
<div>（division）简单而言是一个区块容器标记，即 <div>与</div>之间相当于一个容器，可以容纳段落、标题、 表格、图片、乃至章节、摘要和备注等各种HTML元素。因 此，可以把<div>与</div>的内容视为一个独立的对象，用 于控制CSS的控制。声明时只需要对<div>进行相应的控制， 其中的各标记元素都会因此而改变。使用div实现网页,效 果图如图6-3所示。
/* 对齐方式 */
width:300px;
/* 块宽度 */
height:100px;
/* 块高度 */
}
-->
模块6：制作手机端网页
必备知识
学习 导入
学习目 标 任务 制作校园勋 章疯狂任务网页
任务 描述任务 目标任务 分析任务 实施任务 评价任务 总结必备 知识
2.span标签与div标签的区别 <span>标记与<div>标记一样，作为容器标记而被广泛应
div{
font-size:18px;
/* 字号大小 */
font-weight:bold;
/* 字体粗细 */
font-family:Arial;
/* 字体 */
color:#FF0000;
/* 颜色 */
background-color:#FFFF00;
/* 背景颜色 */
text-align:center;
模块6：制作手机端网页
学习目标
学习 导入
学习目 任标务 制作校园勋 章疯狂任务网页
任务 描述任务 目标任务 分析任务 实施任务 评价任务 总结必备
技能目标： 1.能制作简单的手机端网页 2.具有分析、解决网页布局的能力 3.使用CSS样式控制网页元素的能力 知识目标： 1.掌握div布局网页的功能及应用 2.掌握CSS字体、背景、图片、超链接、列表等样式控制网页风格 的方法
模块6：制作手机端网页
学习 导入
学习目 标 任务 制作校园勋 章疯狂任务网页
任务 描述任务 目标任务 分析任务 实施任务 评价任务 总结必备
6、活动区 图6-30 活动区
任务实施
小贴士
CSS代 码
.hd{width:100%; border-bottom:#ff9966 solid 1px;} .hdq{height:130px; width:270px; margin:0 auto; padding-top:5px;} .jc{font-weight:600; lineheight:20px;} .jh{color:#999;} .jr{color:#F00;} .jw{color:#FFF;} gz{margin-top:20px; margin-left:5px;width:250px; 注he：ig后ht面:3四0p个x;活t动ex区t-制al作ig方n:法ce一nt样er。; line-height:30px;} .gz ul{list-style-type:none;}
用在HTML语言中。在<span>与</span>中间同样可以容纳各种 HTML元素，从而形成独立的对象。如果把<div>替换成<span>,样 式表中把“div”替换成“span”执行后也会发现效果完全一样。 可以说<div>与<span>这两个标记起到的作用都是独立出各个区 块，在这个意义上二者没有太多的不同。 <div>与<span>的区别在于，<div>是一个块级（block-level） 元素，它包围的元素会自动换行。而<span>仅仅是一个行内元素 （inline elements），在它的前后不会换行。<span>没有结构 上的意义，纯粹是应用样式，当其他行内元素都不合适时，就可 以使用<span>元素。
<a href="">下一页 >></a></span><br/>
</li> .h.<空drhC<掌su{gS/p间iw{S苏uaqil代<<ln{dilb首>mtnircahe码页>/lr:-<>ag1hhsi0ersn0i会=p-g/"xlh员>h;et<gtf:权/"et2l>x:5益it1p>免-8xa0;意费lpixc见发g;on}l箱飞:olr信e:<f#b看t9r;9/新}9>;闻} 逛
<span class="jc">校园勋章疯狂 任务</span><br/> <span class="jc">活动时间： </span> <span class="jh">2012年9月 30</span> <br/> <span class="jh">12:00～2012年12 月31日 24:00</span><br /> <span class="jc">活动简介:</span>
模块6：制作手机端网页
任务描述
学习 导入
学习目 标 任务 制作校园勋 章疯狂任务网页
任务 描述任务 目标任务 分析任务 实施任务 评价任务 总结必备 知识
○任务描述
苏州某公司与电信公司合作负责制作手机端的网页，该公司 已开发出了掌上苏州网站，该网站为了吸引年青人浏览设计了一系 的活动如：校园勋章疯狂任务、星梦奇缘全城热恋活动，这些活动 的方案已由设计部的工作人员设计出来，请你将这些方案制作成手 机端的网页。
学习目 标 任务 制作校园勋 章疯狂任务网页
任务 描述任务 目标任务 分析任务 实施任务 评价任务 总结必备 知识
○任务实施 1、网站LOGO制作
图6-25 网站logo HMTL代 码 <div id="logo"><img src="logo(5).gif" /></div> CSS 代 码 *{font-size:12px; margin:0px; padding:0px;} #logo{height:53px; width:100%;}
模块6：制作手机端网页
学习导入
学习 导入
学习目 标
任务 制作校园勋 章疯狂任务网页
任务 描述任务 目标任务 分析任务 实施任务 评价任务 总结必备 知识
在本模块中着重介绍使用HTML+CSS+DIV制作手机端网 页，在网页制作过程中用到DIV布局，重点介绍DIV盒子模 型的使用方法，本例子还涉及到了CSS的字体、背景、图 片、列表等样式控制网页元素的方法。
模块6：制作手机端网页
任务目标
学习 导入
学习目 标 任务 制作校园勋 章疯狂任务网页
任务 描述任务 目标任务 分析任务 实施任务 评价任务 总结必备
○任务目标 利用div布局网页，使用CSS的背景、字体、
表单、图片 等样式制作出手机端校园勋章疯狂任务网页效果图， 效果如图6-1所示。
图6-1
模块6：制作手机端网页
学习
○任务分析
导入
“掌上苏州”活动综合整体结构如图6-2
学习目 标
所示，活动广告位及活动信息栏的具体内容 介绍如表6-1和表6-2所示。
任务 制作校园勋 章疯狂任务网页
表6-1
任务
描述任务
目标任务
分析任务 实施任务
表6-2
评价任务
总结必备
知识
任务分析 图6-2
模块6：制作手机端网页
任务实施
学习 导入
1.课堂表现 2.学习任务完成 3.网页完成的效果
指导教师综合 评价 指导教师签名：
日期：
60%
模块6：制作手机端网页
任务总结
学习 导入
学习目 标 任务 制作校园勋 章疯狂任务网页
任务 描述任务 目标任务 分析任务 实施任务 评价任务 总结必备 知识
○任务总结 本任务详细校园勋章疯狂任手机端网页的制
value="<"/></li> <li><input type="radio"/></li> <li><input type="radio"/></li> <li><input type="radio"/></li>
CSS 代 码<li><input type="radio"/></li> .biaodan{<mlair>g<iinn:p0utauttyop;eh=e"ibguhttt:o2n0"px; width:200px; line-height:2 .vbailauoed=a"n>"u/l>{<l/ilsit>-style-type:none;}. biaodan l<i/{ufll>oat:left; width:30px;}
模块6：制作手机端网页
任务实施
学习 导入
学习目 标 任务 制作校园勋 章疯狂任务网页
任务 描述任务 目标任务 分析任务 实施任务 评价任务 总结必备 知识
2、活动专区制作
图6-26 活动专区
HTML代 码 <div class="active">活动专区 C<S/Sdi代v> 码 .active{height:30px;width:100%;backgroundcolor:#ff9900; line-height:30px;font-family:"黑体"; color:#FFF; text-align:center; letter-spacing:2px; margin-bottom:3px; font-size:18px;}
模块6：制作手机端网页
任务实施
学习
4、任务宣传制作
导入
学习目
标 任务 制作校园勋
章疯狂任务网页 任务
图6-28 任务宣传
描述任务 目标任务 分析任务 实施任务 评价任务
HTML代 码
<div class="biaoyu">校图勋章疯狂任务，你准 C备SS好代了吗码?</div> .biaoyu{height:20px; width:100%; line-height:20px; color:#ff9966; text-align:center; font-weight:500;}
总结必备
知识
模块6：制作手机端网页
任务实施
学习 导入
学习目 标 任务 制作校园勋 章疯狂任务网页
任务 描述任务 目标任务 分析任务 实施任务 评价任务 总结必备
5、按钮
图6-29 按钮
HTML代 码 <div class="biaodan">
<ul> <li><input type="button"
作过程，使用到的知识点有使用DIV布局网页，CSS样 式的表单、字体、背景、无序列表等样式。在制作过 程中，尽量理解操作步骤中各关键步骤的作用，结合 制作分析，理解这样式表现出来的网页效果，从而达 到熟能生巧的目的。
模块6：制作手机端网页
必备知识
学习 导入
学习目 标 任务 制作校园勋 章疯狂任务网页
自我评价
小组评价
教师（企 业）评价
权重
得分小 计
总分
10%
20%
70%
关键能力
1.计算机操作的规范性； 2.能参与小组讨论，相互交流； 3.能积极主动、勤学好问； 4.能清晰、准确表达。
1.课堂表现 2.学习任务完成
40%
专业能力
1.DIV盒子模型的理解； 2．CSS 样式字体样式、列表样式使用的熟 练程度；
图6-3 网 页效果图
模块6：制作手机端网页
必备知识
学习 导入
学习目 标 任务 制作校园勋 章疯狂任务网页
任务 描述任务 目标任务 分析任务 实施任务 评价任务 总结必备 知识
<Байду номын сангаасtml>
<head>
<title>div 标记范例</title>
<style type="text/css">
<!--
模块6：制作手机端网页
学习 导入
学习目 标 任务 制作校园勋 章疯狂任务网页
任务 描述任务 目标任务 分析任务 实施任务 评价任务 总结必备
7、页脚区 图6-31 页脚区
任务实施
小贴士
HTML代 码 <div class="hdq">
<ul> <li class="duiq"><span><input type="button" class="btw" value="1" />
模块6：制作手机端网页
任务实施
学习 导入
学习目 标 任务 制作校园勋 章疯狂任务网页
任务 描述任务 目标任务 分析任务 实施任务 评价任务 总结必备 知识
3、广告区制作
图6-27 广告区 HTML代 码 <div class="guanggao"><img src="011.gif" /></div> CSS 代 码 .guanggao{ margin:0 auto; width:200px; height:180px;}
书签下载 广告合作<br/>
模块6：制作手机端网页
任务评价
学习 导入
学习目 标 任务 制作校园勋 章疯狂任务网页
任务 描述任务 目标任务 分析任务 实施任务 评价任务 总结必备
○任务评价
学习任务名称：制作校园勋章疯狂任
务网班页级：
学号：
姓名：
指导教师：
评价方式
评价项目
评价标准
评价依据（指信息、佐 证）
模块6：制作手机端网页
学习 导入
学习目 标 任务 制作校园勋 章疯狂任务网页
任务 描述任务 目标任务 分析任务 实施任务 评价任务 总结必备 知识
6、活动区 图6-30 活动区
任务实施
HTML代 码 <div class="hd"></div> <div class="hdq">
<div class="ggt"><img src="01.gif" width="80" height="80"/></div>
任务 描述任务 目标任务 分析任务 实施任务 评价任务 总结必备 知识
○必备知识 1.div盒子模型
<div>（division）简单而言是一个区块容器标记，即 <div>与</div>之间相当于一个容器，可以容纳段落、标题、 表格、图片、乃至章节、摘要和备注等各种HTML元素。因 此，可以把<div>与</div>的内容视为一个独立的对象，用 于控制CSS的控制。声明时只需要对<div>进行相应的控制， 其中的各标记元素都会因此而改变。使用div实现网页,效 果图如图6-3所示。
/* 对齐方式 */
width:300px;
/* 块宽度 */
height:100px;
/* 块高度 */
}
-->
模块6：制作手机端网页
必备知识
学习 导入
学习目 标 任务 制作校园勋 章疯狂任务网页
任务 描述任务 目标任务 分析任务 实施任务 评价任务 总结必备 知识
2.span标签与div标签的区别 <span>标记与<div>标记一样，作为容器标记而被广泛应
div{
font-size:18px;
/* 字号大小 */
font-weight:bold;
/* 字体粗细 */
font-family:Arial;
/* 字体 */
color:#FF0000;
/* 颜色 */
background-color:#FFFF00;
/* 背景颜色 */
text-align:center;
模块6：制作手机端网页
学习目标
学习 导入
学习目 任标务 制作校园勋 章疯狂任务网页
任务 描述任务 目标任务 分析任务 实施任务 评价任务 总结必备
技能目标： 1.能制作简单的手机端网页 2.具有分析、解决网页布局的能力 3.使用CSS样式控制网页元素的能力 知识目标： 1.掌握div布局网页的功能及应用 2.掌握CSS字体、背景、图片、超链接、列表等样式控制网页风格 的方法
模块6：制作手机端网页
学习 导入
学习目 标 任务 制作校园勋 章疯狂任务网页
任务 描述任务 目标任务 分析任务 实施任务 评价任务 总结必备
6、活动区 图6-30 活动区
任务实施
小贴士
CSS代 码
.hd{width:100%; border-bottom:#ff9966 solid 1px;} .hdq{height:130px; width:270px; margin:0 auto; padding-top:5px;} .jc{font-weight:600; lineheight:20px;} .jh{color:#999;} .jr{color:#F00;} .jw{color:#FFF;} gz{margin-top:20px; margin-left:5px;width:250px; 注he：ig后ht面:3四0p个x;活t动ex区t-制al作ig方n:法ce一nt样er。; line-height:30px;} .gz ul{list-style-type:none;}
用在HTML语言中。在<span>与</span>中间同样可以容纳各种 HTML元素，从而形成独立的对象。如果把<div>替换成<span>,样 式表中把“div”替换成“span”执行后也会发现效果完全一样。 可以说<div>与<span>这两个标记起到的作用都是独立出各个区 块，在这个意义上二者没有太多的不同。 <div>与<span>的区别在于，<div>是一个块级（block-level） 元素，它包围的元素会自动换行。而<span>仅仅是一个行内元素 （inline elements），在它的前后不会换行。<span>没有结构 上的意义，纯粹是应用样式，当其他行内元素都不合适时，就可 以使用<span>元素。
<a href="">下一页 >></a></span><br/>
</li> .h.<空drhC<掌su{gS/p间iw{S苏uaqil代<<ln{dilb首>mtnircahe码页>/lr:-<>ag1hhsi0ersn0i会=p-g/"xlh员>h;et<gtf:权/"et2l>x:5益it1p>免-8xa0;意费lpixc见发g;on}l箱飞:olr信e:<f#b看t9r;9/新}9>;闻} 逛
<span class="jc">校园勋章疯狂 任务</span><br/> <span class="jc">活动时间： </span> <span class="jh">2012年9月 30</span> <br/> <span class="jh">12:00～2012年12 月31日 24:00</span><br /> <span class="jc">活动简介:</span>
模块6：制作手机端网页
任务描述
学习 导入
学习目 标 任务 制作校园勋 章疯狂任务网页
任务 描述任务 目标任务 分析任务 实施任务 评价任务 总结必备 知识
○任务描述
苏州某公司与电信公司合作负责制作手机端的网页，该公司 已开发出了掌上苏州网站，该网站为了吸引年青人浏览设计了一系 的活动如：校园勋章疯狂任务、星梦奇缘全城热恋活动，这些活动 的方案已由设计部的工作人员设计出来，请你将这些方案制作成手 机端的网页。
学习目 标 任务 制作校园勋 章疯狂任务网页
任务 描述任务 目标任务 分析任务 实施任务 评价任务 总结必备 知识
○任务实施 1、网站LOGO制作
图6-25 网站logo HMTL代 码 <div id="logo"><img src="logo(5).gif" /></div> CSS 代 码 *{font-size:12px; margin:0px; padding:0px;} #logo{height:53px; width:100%;}
模块6：制作手机端网页
学习导入
学习 导入
学习目 标
任务 制作校园勋 章疯狂任务网页
任务 描述任务 目标任务 分析任务 实施任务 评价任务 总结必备 知识
在本模块中着重介绍使用HTML+CSS+DIV制作手机端网 页，在网页制作过程中用到DIV布局，重点介绍DIV盒子模 型的使用方法，本例子还涉及到了CSS的字体、背景、图 片、列表等样式控制网页元素的方法。
模块6：制作手机端网页
任务目标
学习 导入
学习目 标 任务 制作校园勋 章疯狂任务网页
任务 描述任务 目标任务 分析任务 实施任务 评价任务 总结必备
○任务目标 利用div布局网页，使用CSS的背景、字体、
表单、图片 等样式制作出手机端校园勋章疯狂任务网页效果图， 效果如图6-1所示。
图6-1
模块6：制作手机端网页
学习
○任务分析
导入
“掌上苏州”活动综合整体结构如图6-2
学习目 标
所示，活动广告位及活动信息栏的具体内容 介绍如表6-1和表6-2所示。
任务 制作校园勋 章疯狂任务网页
表6-1
任务
描述任务
目标任务
分析任务 实施任务
表6-2
评价任务
总结必备
知识
任务分析 图6-2
模块6：制作手机端网页
任务实施
学习 导入