教学材料《网页制作》-1_第1页
教学材料《网页制作》-1_第2页
教学材料《网页制作》-1_第3页
教学材料《网页制作》-1_第4页
教学材料《网页制作》-1_第5页
已阅读5页，还剩74页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

学习活动一接受任务,储备知识一、学习准备１.学习工具:电脑、投影仪.２.学习资料:互联网上的资源;«DIV＋CSS网页布局案例精粹»、«精通CSS＋DIV网页样式与布局»等参考教材;网页制作方面的课件.３.分成学习小组.二、学习过程引导问题上网查询或查找参考资料、书籍等完成下面的问题.１.什么是HTML语言?２.什么是HTML的标记?它们由哪两个部分组成?３.写出HTML文件结构.下一页返回学习活动一接受任务,储备知识４.网页文件是如何命名的?５.观察下图的网页,说说是什么标记起了作用?上一页下一页返回学习活动一接受任务,储备知识６.使用记事本制作出如下的网页.上一页下一页返回学习活动一接受任务,储备知识７.HTML语言中的＜meta＞元素有什么作用?它有哪些属性?８.编写一个网页,要求３秒钟后自动跳转到百度网站.上一页下一页返回学习活动一接受任务,储备知识９.为什么要引入CSS样式表?对比以下两个例子说说它们有什么共同点和不同点.１０.什么是CSS选择器?常用的选择器有哪些?１１.如何使用Dreamweaver来编辑CSS?１２.对于CSS代码,默认情况下,语法用(

)进行语法着色,而HTML代码中的标记是(

)色,正文内容在默认情况下是(

)色.在编写具体的CSS代码时,按(

)键或(

)键都可以触发语法提示.上一页下一页返回学习活动一接受任务,储备知识１３.观察下面的代码,说说每一行代码表示什么.<style>h1{color:red;fontＧsize:25px;}</style>上一页下一页返回学习活动一接受任务,储备知识１４.观察下图,在括号内填写出标记选择器的组成元素.上一页下一页返回学习活动一接受任务,储备知识１５.观察下面两个实例,并将该网页效果图显示出来,这些例子说明了什么?１６.选择器是如何进行集体声明,全局声明的?这些声明有什么作用?将下列的实例在网页中显示出来.１７.选择器是如何进行嵌套的１８.如何理解CSS的继承?写出下面例子各个标签的父子关系图.<html><head><title>父子关系</title><basetarget="_blank"><style>上一页下一页返回学习活动一接受任务,储备知识<!--h1{color:red;

/*颜色*/textＧdecoration:underline;

/*下划线*/}h1em{

/*嵌套选择器*/color:#004400;/*颜色*/fontＧsize:40px;/*字体大小*/}--></style></head>上一页下一页返回学习活动一接受任务,储备知识<body><h1>祖国的首都<em>北京</em></h1><p>欢迎来到祖国的首都<em>北京</em>,这里是全国<strong>政治、<ahref="economic

html"><em>经济</em></a>、文化</strong>的中心</p><ul><li>在这里,你可以:<ul><li>感受大自然的美丽</li><li>体验生活的节奏</li>上一页下一页返回学习活动一接受任务,储备知识<li>领略首都的激情与活力</li>

</ul>

</li>

<li>你还可以:<ol><li>去八达岭爬长城</li><li>去香山看红叶</li><li>去王府井逛夜市</li>

</ol>

</li>

</ul>

上一页下一页返回学习活动一接受任务,储备知识<p>如果您有任何问题,欢迎<ahref="contactus">联系我们</a></p></body></html>１９.常用的CSS文字样式的属性有哪些?２０.写出下面文字样式属性的作用,并列举它们的属性值.２１.＜span＞标记有什么作用?上一页下一页返回学习活动一接受任务,储备知识２２.观察下面几个实例,并将它们的网页效果图显示出来,这些例子说明了什么?<html><head><title>文字字体</title><style><!--h2{fontＧfamily:黑体,幼圆;}上一页下一页返回学习活动一接受任务,储备知识p{fontＧfamily:Arial,Helvetica,sansＧserif;}p

kaiti{fontＧfamily:楷体_GB2312,"TimesNewRoman";}--></style></head><body><h2>立春</h2>上一页下一页返回学习活动一接受任务,储备知识<p>自秦代以来,我国就一直以立春作为春季的开始.立春是从天文上来划分的,而在自然界、在人们的心目中,春是温暖,鸟语花香;春是生长,耕耘播种.在气候学中,春季是指候(5天为一候)平均气温10℃至22℃的时段.</p><pclass="kaiti">作者:isaac</p></body></html>该例子用到了CSS样式的文字属性(

)上一页下一页返回学习活动一接受任务,储备知识２３.利用所学的知识制作出google公司的logo,效果如下:上一页下一页返回学习活动一接受任务,储备知识２４.CSS段落样式有哪些属性?它们有什么作用?具体的属性值有哪些?２５.观察下面几个实例,并将它们的网页效果图显示出来,这些例子说明了什么?<html><head><title>水平对齐</title><style><!--p{fontＧsize:12px;}p

left{textＧalign:left;}

/*左对齐*/p

right{textＧalign:right;}/*右对齐*/上一页下一页返回学习活动一接受任务,储备知识p

center{textＧalign:center;}/*居中对齐*/p

justify{textＧalign:justify;}/*两端对齐*/--></style></head><body><pclass="left">这个段落采用左对齐的方式,textＧalign:left,因此文字都采用左对齐.<br>床前明月光,疑是地上霜.<br>举头望明月,低头思故乡.<br>李白</p>上一页下一页返回学习活动一接受任务,储备知识<pclass="right">这个段落采用右对齐的方式,textＧalign:right,因此文字都采用右对齐.<br>床前明月光,疑是地上霜.<br>举头望明月,低头思故乡.<br>李白</p><pclass="center">这个段落采用居中对齐的方式,textＧalign:center,因此文字都采用居中对齐.<br>床前明月光,疑是地上霜.<br>举头望明月,低头思故乡.<br>李白</p>上一页下一页返回学习活动一接受任务,储备知识<pclass="justify">这个段落采用左对齐的方式,textＧalign:justify,因此文字都采用左对齐.<br>床前明月光,疑是地上霜.举头望明月,低头思故乡.<br>李白</p></body></html>上一页下一页返回学习活动一接受任务,储备知识２６.CSS设置图片基本属性的方法有哪些?它们有什么作用?具体的属性值有哪些?２７.观察下面的网页并使用图片的一些属性,实现网页效果图.上一页下一页返回学习活动一接受任务,储备知识２８.观察下面的网页并使用图片的一些属性,实现网页效果图.上一页下一页返回学习活动一接受任务,储备知识２９.观察下面的网页并使用图片的一些属性,实现网页效果图.上一页下一页返回学习活动一接受任务,储备知识３０.观察下面的网页并使用图片的一些属性,实现网页效果图.上一页下一页返回学习活动一接受任务,储备知识３１.观察下面的网页并使用图片的一些属性,实现网页效果图.上一页下一页返回学习活动一接受任务,储备知识３２.观察下面的网页并用代码来实现,说说CSS样式是通过给图片设计什么样的属性来实现文字环绕的.上一页下一页返回学习活动一接受任务,储备知识３３.观察下面的网页并用代码来实现,说说CSS样式是如何设置背景颜色和文字颜色的.上一页下一页返回学习活动一接受任务,储备知识３４.观察下面的网页并用代码来实现,说说CSS样式是如何给页面添加背景图的.上一页下一页返回学习活动一接受任务,储备知识３５.观察下面的网页并用代码来实现,说说CSS样式是如何实现背景图片、背景颜色的.上一页下一页返回学习活动一接受任务,储备知识３６.观察下面的网页并用代码来实现,说说CSS样式是如何实现图片的重复设置的.上一页下一页返回学习活动一接受任务,储备知识３７.观察下面的网页并用代码来实现,说说该网页用到了设置背景图片的哪些知识.上一页下一页返回学习活动一接受任务,储备知识３８.使用网页代码制作出如下网页,说说该网页中都用到了表格的哪些属性.该网页用到的表格属性如下:上一页下一页返回学习活动一接受任务,储备知识３９.观察下列的表格并用代码实现该网页,并说说如何实现表格的隔行变色.上一页下一页返回学习活动一接受任务,储备知识４０.表单中的元素有哪些?这些元素对应的标记是什么?上一页下一页返回学习活动一接受任务,储备知识观察下列的网页并用代码实现它上一页下一页返回学习活动一接受任务,储备知识４１.观察下列的网页并用代码实现它.上一页下一页返回学习活动一接受任务,储备知识４２.在HTML语言中,超链接是通过标记(

)来实现的,链接的具体地址则是利用(

)标记的(

)属性.CSS是通过上４个伪类别,再配合各种属性风格制作出千变万化的动态超链接.这４个伪类别属性及说明如下:上一页下一页返回学习活动一接受任务,储备知识４３.网页中的列表符号采用(

)或者(

)标记,然后配合(

)罗列各个项目.观察下列网页并用代码实现.上一页下一页返回学习活动一接受任务,储备知识４４.填写下面的表格.上一页下一页返回学习活动一接受任务,储备知识４５.除了传统的各种项目符号外,CSS还提供了属性(

),可以将项目符号显示为任意的图片.观察下列的网页并用代码实现该网页.说明:该例中通过隐藏(

)标记的项目列表,然后再设置(

)标记的样式,统一定制文字与图标之间的距离,从而实现了各个浏览器之间的效果.上一页下一页返回学习活动一接受任务,储备知识４６.观察下列的网页并用代码实现它.上一页下一页返回学习活动一接受任务,储备知识４７.观察下面的网页,使用列表将菜单横竖转换,用代码实现该效果.４８.打开搜索引擎百度的网站,可以看到Logo下方的水平导航条,如下图所示,利用前面几节课所学介绍的内容和方法,实现下面百度导航条的制作.上一页下一页返回学习活动一接受任务,储备知识４９.流行的Tab菜单的制作.Tab风格的菜单导航一直受到广大网站制作者的青睐,网上随处可见各式各样的Tab菜单,观察下面的网页并用代码实现该网页.上一页下一页返回上一页学习活动一接受任务,储备知识三、评价反馈学习活动考核评价表学习活动名称:制作手机端网页———接受任务,储备知识上一页下一页返回学习活动一接受任务,储备知识上一页下一页返回学习活动一接受任务,储备知识上一页返回学习活动二工作准备一、学习准备１.学习工具:电脑、投影仪.２.学习资料:互联网上的资源;«DIV＋CSS网页布局案例精粹»、«精通CSS＋DIV网页样式与布局»等参考教材;网页制作方面的课件.３.分成学习小组.二、学习过程请同学们分成学习小组并认真阅读以下的说明书并按要求设计出该网页.下一页返回学习活动二工作准备上一页下一页返回学习活动二工作准备SRS１.０活动广告位上一页下一页返回学习活动二工作准备SRS２.０活动广告位上一页下一页返回学习活动二工作准备三、作品展示同学们分成小组,将设计好的作品展示出来.四、评价反馈学习活动考核评价表学习活动名称:制作手机端网页———工作准备上一页下一页返回学习活动二工作准备上一页返回学习活动三制作校园勋章疯狂任务网页一、学习准备１.学习工具:电脑、投影仪.２.学习资料:互联网上的资源;«DIV＋CSS网页布局案例精粹»、«精通CSS＋DIV网页样式与布局»等参考教材;网页制作方面的课件.３.分成学习小组.二、学习过程根据老师的讲解,按下列的步骤完成校园勋章疯狂任务网页的制作.１.网站logo制作下一页返回学习活动三制作校园勋章疯狂任务网页body{margin:5px;color:#080808;}div{fontＧsize:13px;lineＧheight:21px;color:#999999;margin:3px0;}

logo{height:53px;}学习活动三制作校园勋章疯狂任务网页２.活动专区制作hdt{width:100%;height:30px;margin:0auto;backgroundＧcolor:#FF9900;fontＧfamily:"黑体";fontＧsize:20px;textＧalign:center;color:#FFFFFF;paddingＧtop:10px;letterＧspacing:10px;}上一页下一页返回学习活动三制作校园勋章疯狂任务网页３.广告区制作huodong{width:300px;height:225px;margin:0auto;textＧalign:center;}４.任务宣传制作xiaoy{height:25px;textＧalign:center;textＧalign:center;fontＧweight:600;color:#FF9966;}上一页下一页返回学习活动三制作校园勋章疯狂任务网页５.选择区制作select{borderＧbottom:#FF9966solid1px;textＧalign:center;}６.活动区制作上一页下一页返回学习活动三制作校园勋章疯狂任务网页hdgg{width:300px;height:130px;margin:0auto;padding:3px;borderＧbottom:#FF9933dashed1px;}ggtu{width:80px;height:80px;float:left;marginＧright:3px;}a{color:#0000CC;}bai{color:#FFFFFF;}red{color:#FF0000;}bw{color:#000000;fontＧweight:600;}bw1{color:#000000;fontＧweight:500;}上一页下一页返回学习活动三制作校园勋章疯狂任务网页７.关注人数制作button{width:55px;height:20px;backgroundＧcolor:#FF9966;border:none;}８.页脚区制作上一页下一页返回学习活动三制作校园勋章疯狂任务网页hdgg2{width:300px;height:130px;margin:0auto;padding:3px;}９.最终效果图及代码上一页下一页返回学习活动三制作校园勋章疯狂任务网页上一页下一页返回学习活动三制作校园勋章疯狂任务网页<head><metahttpＧequiv="ContentＧType"content="text/html;charset=utfＧ8"/><title>掌上苏州</title><linkhref="style

css"rel="stylesheet"type="text/css"/><styletype="text/css"><!--

STYLE1{color:#FF0000}--></style>上一页下一页返回学习活动三制作校园勋章疯狂任务网页<linkhref="tpbkＧactivity

css"rel="stylesheet"type="text/css"/><linkhref="css/tpbkＧactivity

css"rel="stylesheet"type="text/css"/></head><body><divclass="logo"><imgsrc="img/logo(5)

gif"width="75"height="52"/></div><divclass="hdt">活动专区</div><divcl

<divclass="xiaoy">校园勋章疯狂任务,你准备好了吗?</div><divclass="select">上一页下一页返回学习活动三制作校园勋章疯狂任务网页<tablewidth="320"border="0"cellspacing="0"><tr><td><form><inputtype="submit"name="button"id="button"value="<"/><inputtype="radio"name="radio"id="raＧdio"value="radio"/><inputtype="radio"name="radio"id="radio"value="radio"/><inputtype="radio"name="radio"id="radio"value="radio"/>上一页下一页返回学习活动三制作校园勋章疯狂任务网页<inputtype="radio"name="radio2"id="radio2"value="radio2"/><inputtype="submit"name="button"id="butＧton"value=">"/>

</form></td>

</tr>

</table></div><divclass="hdgg"><divclass="ggtu"><imgsrc="img/01

gif"width="80"height="80"/></div>上一页下一页返回学习活动三制作校园勋章疯狂任务网页<spanclass="bw">校园勋章疯狂任务</span><br/><spanclass="bw1">活动时间:</span>2012年9月30日<br/>12:00~2012年12月31日24:00<br/><spanclass="bw1">活动简介:</span>疯狂任务赢大奖<br/></p><divclass="center"><tablewidth="295"border="0"><tr>上一页下一页返回学习活动三制作校园勋章疯狂任务网页<tdwidth="169"height="55">已有<spanclass="red">12345人</span>关注</td><tdwidth="116"><button><spanclass="bai">去领任务</span></button></td>

</tr>

</table>

</div></div><div……<div……

<div……

<div……

上一页下一页返回学习活动三制作校园勋章疯狂任务网页<divclass="hdgg2">

1<ahref=

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论