《HTML+CSS网页设计与布局》教案_第1页
《HTML+CSS网页设计与布局》教案_第2页
《HTML+CSS网页设计与布局》教案_第3页
《HTML+CSS网页设计与布局》教案_第4页
《HTML+CSS网页设计与布局》教案_第5页
已阅读5页，还剩13页未读， 继续免费阅读

下载本文档

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

文档简介

《HTML+CSS网页设计与布局》第01周—第1/25页课程教案授课教师：授课班级：地点：周课时：5课时章节内容网页设计基础知识Dreamweaver软件介绍及其基础操作HTML基础知识及常用标记教学目标1）使学生了解网页设计的相关基础知识；2）使学生熟悉Dreamweaver软件界面的基本操作方法。重点难点1）了解网页设计相关概念和网页的类型；2）熟练掌握Dreamweaver软件创建和管理站点的方法。教学方法课堂讲授、案例讲解与指导教学环境计算机机房教学过程及内容提要时间分配备注教学过程设计一、引入1、相互认识，提出与本学科相关的知识，介绍本门课程情况、教学内容及总学时数进度安排，宣讲本课程教学纪律，鼓励学生营造一种学习氛围，尊重同学，互帮互学，真正达到学以致用；2、提出问题:上过网吧？有谁自学过网页设计？听说过HTML或者CSS这两个概念吗？二、告知学生课堂任务本次课所学习的主要内容是HTML相关基础知识和Dreamweaver软件基础操作；三、逐步演示讲解分析教学内容1、网站和网页的区别：（1）网页是Internet基本兀素;（2）网站由网页组成；2、静态网页和动态网页：静态网页：纯粹HTML语言格式的网页通常被称为静态网页，静态网页的后缀名通常为.htm、.html、.shtml、.xml。动态网页：许多人认为网页会动就是动态网页，这是个错误的观点，在静态的网页中也可以含有动态的图片，这仅仅是视觉上的动态罢了。真正的动态网页是指实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。也就是说，它是返回到了客户端上的网页。例如网页文件是以ASP、PHP、JSP、ASPX为结尾就是动态的网页了。静态网页的特点：（1）内容相对稳定，容易被搜索引擎检索到；约15分钟约35分钟学生理解

（2）没有数据库支持，在网站制作和维护方面工作量大；（3）交互性差，在功能方面有很大的限制。动态网页的特点：（1）以数据库技术为基础，可大大降低网站维护的工作量；（2）可实现更多的功能，如用户注册、新闻发布、在线留言等；（3）不利于使用搜索引擎进行网站推广。3、常见网页类型：形象页、主页、栏目页、内页、新闻详名细页等；4、网页设计原则：（1）了解客户需求（2）遵循Web标准（3）运用形式美法则5、网页设计流程：（1）手绘效果图：确定网页主题内容和风格（2）设计效果图：搜集、整合设计所需素材（3）版面编辑：网页的制作与实现（4）网页美化：动画设计，网页测试和发布6、网页设计的主要软件：PhotoshopDweamveawerFlashFirworks7、HTML基础知识：（1）HTML概念：HyperTextMarkupLanguage超文本标识语言；（2）HTML文档的编写方法：用记事本手工直接编写、使用可视化HTML编辑器Dreamweaver、由Web服务器动态生成；（3）网页文件命名：首页文件名默认为：index.htm或index.html；（4）HTML文件结构：<HTML><HEAD><title></title></HEAD><BODY>HTML文件的正文</BODY></HTML>（5）用编辑器手工编写第一张网页；约20分钟8、学生实训及辅导；约30分钟9、Dreamweaver软件界面介绍：（1）软件面板组成及基本操作方法（2）软件首选参数设置10、Dreamweaver站点创建：站点->新建站点->设置站点名称->设置站点默认图像文件夹。约20分钟11、学生实训操作：Dreamweaver站点创建与设置；约20分钟12、Dreamweaver创建第一个网页：（1）名称：index.html约20分钟学生熟记学生实践学生实践

（2）设置标题、输入文本、输入特殊字符（3）页面属性设置（4）预览网页13、学生实训及辅导；14、HTML常用标记:（1）标题标记：＜h#＞主题文字＜/h#＞（2）段落标记：＜p＞这里表示段落＜/p＞（3）换行与注释：＜br＞、＜!--这里放注释一＞（4）粗体与斜体：＜b＞粗体＜/b＞、＜i＞斜体＜/i＞（5）删除线与下划线：＜s＞删除线＜/s＞、＜u＞下划线＜/u＞（6）上标与下标：＜sup＞上标＜/sup＞＜sub＞下标＜/sub＞15、学生实训及辅导；16、字体标记：（1）字体大小：＜fontsize=1＞字体大小＜/font＞（2）字体颜色：＜fontcolor=""＞字体颜色＜/font＞（3）设置标题字体：＜h#＞主题文字＜/h#＞（4）物理字体：＜B＞…＜/B＞，将字符设置成粗体。＜I＞・7/I＞，将字符设置成斜体。＜U＞・7/U＞，给字符增加下划线。＜S＞…＜/S＞，给字符增加删除线。＜tt＞...＜/tt＞，将字符设置成打字机字体。＜SUP＞…＜/SUP＞，将字符设置成上标字体。＜SUB＞…＜/SUB＞，将字符设置成下标字体。（5）逻辑字体：＜EM＞・・Y/EM＞强调文字。＜STRONG＞…〈一丁地岭〉字体加重。＜CODE＞・・・＜/CODE＞显示编程代码。＜SAMP＞・・・＜/SAMP＞显示示例文字。＜KBD＞…＜/KBD＞显示键盘按键文字。＜SMALL＞-＜/SMALL＞缩小文字。＜BIG＞…＜/BIG＞放大文字。17、字体标记实例讲解；18、学生实训及辅导；四、课外作业第3章上机实践。五、课堂小结本次课主要内容：1、网页设计基础知识；2、Dreamweaver基本使用方法；3、HTML基础知识及常用标记；约30分钟约20分钟约30分钟约20分钟约20分钟约40分钟学生实践学生实践学生实践总结后

记

《HTML+CSS网页设计与布局》课程教案《HTML+CSS网页设计与布局》授课教师：授课班级：地点：周课时：5课时章节内容文字布局插入图像超级链接教学目标3）使学生熟练掌握HTML常用标记的基本使用方法；4）使学生掌握HTML常用标记各种属性的含义和设置方法。重点难点3）掌握各种HTML常用标记的基本使用方法；4）熟记各种HTML常用标记的含义。教学方法课堂讲授、案例讲解与指导教学环境计算机机房教学过程及内容提要时间分配备注教学过程设计六、引入3、回顾上周所学内容：上周主要介绍了网页设计和HTML相关基础知识及Dreamweaver软件基础操作，重点介绍了HTML基础知识及常用标记；4、提出问题：网页中文字如何布局？如何在网页中插入图像？如何运用超级链接？七、告知学生课堂任务本次课所学习的主要内容是HTML文字布局和插入图像、超级链接的标记应用。八、逐步演示讲解分析教学内容19、换行控制：文字一<p>、文字二<br/>20、不换行控制：<nobr></nobr>21、文字对齐：align="#"、<center>居中</center>22、设置段落：<p>段落一</p>、<p>段落二</p>23、学生实训及辅导；24、上周课外作业点评；25、无序列表：<ul><li>表项一</li><li>表项…</li></ul>26、有序列表：<ol><li>表项一</li>约10分钟约30分钟约30分钟约40分钟约20分钟学生理解

<li>表项…</li></ol>27、欲格式化文本：。=6>文字<々=6>、<xmp>文本</xmp>28、计算机输出格式：<code>代码样式小型固定宽度字体显示的文本</。血6><kbd>代码样式固定宽度字体渲染</kbd><tt>代码样式固定宽度字体渲染文本</e><var>代码样式斜体字渲染</var>29、学生实训及辅导；30、在网页中插入图像：<imgsrc="cn.jpg">31、图像无法显示时的提示信息：<imgsrc="cn.jpg"alt="风景">32、控制图像的大小：<imgsrc="cn.jpg"alt="风景"width="400px“height="300px”>33、设置边框：<imgsrc="cn.jpg"alt="风景"border="0px">34、图像的链接：<ahref=""><imgsrc="cn.jpg"></a>35、学生实训及辅导；36、图像映射图：<map></map>37、文本与图像对齐：<imgsrc=cn.jpgalign:middle>38、学生实训及辅导；39、最简单的文字超链：<ahref="”>文字链接</a>40、超链网页的打开方式：_blank、_parent、_self、_top41、链接的注释：<ahref=""title:“网易网站”>163网站</2>42、设置图片链接：<ahref=""><imgsrc=""></a>43、设置锚点：<aname="锚点名">文章中的文字</a>44、邮箱地址链接：<ahref="mailto:"> 作者的邮箱</a>45、相对路径：相对路径是指这个文件在所在的位置与其他文件或文件夹的关系；46、绝对路径：HTML绝对路径(absolutepath)指带域名的文件的完整路径。47、学生实训及辅导；九、课外作业第6章上机实践。十、课堂小结本次课主要内容：1、HTML文字布局;2、HTML插入图像;3、HTML超级链接。约20分钟约30分钟约30分钟约20分钟约30分钟约30分钟约30分钟学生实践学生实践学生实践学生实践总结后

记

《HTML+CSS网页设计与布局》课程教案《HTML+CSS网页设计与布局》授课教师：授课班级：地点：周课时：5课时章节内容表单的使用插入表格教学目标5）使学生熟练掌握HTML常用标记的基本使用方法；6）使学生掌握HTML常用标记各种属性的含义和设置方法。重点难点5）掌握各种HTML常用标记的基本使用方法；6）熟记各种HTML常用标记的含义。教学方法课堂讲授、案例讲解与指导教学环境计算机机房教学过程及内容提要时间分配备注教学过程设计十一、引入5、回顾上周所学内容：上周主要介绍了HTML文字布局和插入图像的基本方法，重点介绍了超级链接的标记应用；6、提出问题：什么是表单？常见的表单有哪些？如何在网页中使用表格？十二、告知学生课堂任务本次课所学习的主要内容是HTML表单和表格的标记应用。十三、逐步演示讲解分析教学内容48、表单基本语法：<form></form>、属性action和method49、文本框：<inputtype=text>50、密码框：<inputtype="password"">51、单选框：<inputtype="radio"">52、复选框：<inputtype="checkbox”>53、按钮设置：<inputtype="submit"value:"按钮提交"〉54、学生实训及辅导；55、上周课外作业点评；56、下拉表：（select〉<!一设置下拉表选项一〉（option〉选项一（/option〉（option〉选项二（/option〉（optionselected〉选项三（/option〉（/select〉绝对路径57、文本域：（textarea〉（!一文本域内容--〉（/textarea〉约10分钟约30分钟约40分钟约30分钟约20分钟学生理解学生实践

58、表单应用实例讲解；59、学生实训及辅导；60、表格基本语法：<table></table><tr>标签对表示表行<th>标签对表示表头<td>标签对表示表元61、跨多行表元：Rowspan62、跨多列表元：colspan63、表格内设置文字对齐：对齐语法用align表示，后面接的值是left、center和right，分别代表向左、居中和向右对齐复选框64、表格在网页中对齐：<tablealign=#></table>；65、学生实训及辅导；66、表格应用实例讲解；67、学生实训及辅导；十四、课外作业第8章上机实践。十五、课堂小结本次课主要内容：1、表单的使用；2、插入表格；3、表格应用实例；约20分钟约40分钟约30分钟约40分钟约20分钟约40分钟学生实践学生实践学生实践总结后

第01周—第11/25页《HTML+CSS网页设计与布局》课程教案授课教师：授课班级：地点：授课教师：授课班级：地点：周课时：5课时章节内容网页框架对象移动属性多媒体对象应用教学目标7）使学生熟练掌握HTML常用标记的基本使用方法；8）使学生掌握HTML常用标记各种属性的含义和设置方法。重点难点7）掌握各种HTML常用标记的基本使用方法；8）熟记各种HTML常用标记的含义。教学方法课堂讲授、案例讲解与指导教学环境计算机机房教学过程及内容提要时间分配备注教学过程设计十六、引入7、回顾上周所学内容：上周主要介绍了HTML表单和表格的标记应用方法，重点介绍了表单的应用实例；8、提出问题：框架网页如何创建？如何使网页中的对象移动？如何在网页中插入Flash、影片、声音？十七、告知学生课堂任务本次课所学习的主要内容是HTML网页框架和对象移动属性、多媒体对象的标记应用。十八、逐步演示讲解分析教学内容68、框架的基本语法：<frameset></frameset><frame></frame>（framesetcols="25%,50%,25%”><framesrc="/”>（framesrc="/">（framesrc="/”>（/frameset〉69、框架垂直分栏：垂直分栏是在（frameset〉中用cols表示跨多列表兀，colspan70、框架水平分栏：水平分栏的语法用rows表示71、设置不可调节框架大小：noresize72、学生实训及辅导；73、上周课外作业点评；约10分钟约20分钟约30分钟约30分钟学生理解学生实践

74、浏览器不支持框架：<noframes></noframes>75、设置框架边框：〈framesetframeborder=#>76、设置滚动条：设置滚动条在是〈frame〉里面，用scrolling属性77、导航框架：导航框架是在网页框架的〈frame〉中加入name属性，表示该〈frame〉的名称，然后通过用<a〉标记的链接，并用target的属性值等于《好!^〉的名称；78、内联框架：内联框架存在〈body〉〈/body〉的单个HTML文件中，可以链接其他网页并显示它，即在一个页面中嵌入一个框架窗口来显示另一个页面的内容，叫做浮动框架也称内联框架；79、学生实训及辅导；80、框架应用实例讲解；81、学生实训及辅导；82、移动属性基本语法：〈marquee〉要移动的对象〈/marquee〉83、文字的移动设置：〈marqueedirection：#〉文字〈/marquee〉84、图片移动的设置：〈marquee〉〈imgsrc="仙境.gif"〉〈/marquee〉85、文本移动的方向：<marqueedirection=up〉向上移动〈/marquee〉86、文本的滚动循环；87、文本的移动速度：scrollamount设置移动的速度88、学生实训及辅导；89、网页多媒体的基本语法:<embedsrc=urlloop="true|false”〉90、隐藏面板的设置；91、对齐方式：align=top、bottom、center、baseline、left、right、texttop、middle、absmiddle、absbottom92、学生实训及辅导；93、移动对象应用实例讲解；94、多媒体对象应用实例讲解；95、学生实训及辅导；十九、课外作业第11章上机实践。二十、课堂小结本次课主要内容：1、网页框架;2、对象移动属性；3、多媒体对象应用。约10分钟约20分钟约20分钟约40分钟约20分钟约20分钟约10分钟约20分钟约30分钟约40分钟学生实践学生实践学生实践学生实践学生实践总结后

《HTML+CSS网页设计与布局》课程教案《HTML+CSS网页设计与布局》授课教师：授课班级：地点：周课时：5课时章节内容CSS基础知识CSS字体设置教学目标9）使学生熟练掌握CSS常制式的创建方法；10）使学生掌握CSS常制式各种属性的含义和设置方法。重点难点9）掌握各种CSS常制式的基本使用方法；10）熟记各种CSS常制式的含义。教学方法课堂讲授、案例讲解与指导教学环境计算机机房教学过程及内容提要时间分配备注教学过程设计二十一、引入9、回顾上周所学内容：上周主要介绍YHTML网页框架和多媒体对象标记，重点介绍了HTML对象移动属性设置方法；提出问题：什么是css？CSS有什么用？如何创建和使用CSS？二十二、告知学生课堂任务本次课所学习的主要内容是CSS基础知识和CSS字体样式设置方法和技巧。二十三、 逐步演示讲解分析教学内容96、CSS相关基础知识；97、CSS文件链接方式:（1）内联定义：内联定义即是在对象的标记内，使用对象的style属性定义适用其的样式表属性。链入内部CSS：<styletype="text/css”>/*这里写CSS内容*/</style>（2）链接外部CSS：<linktype="text/css"rel="stylesheet"src="style.css”>98、CSS在浏览器兼容性：现在浏览器市场的主流浏览器主要是InternetExplorer（简称IE）和MozillaFirefox（简称FF），网页中的CSS因两个浏览器支持不同，所以对同一代码会显示不同的效果，那么为了达到网页的风格，有时要注意哪个浏览器要写的CSS属性支持如何。如果某一属性只有一个浏览器支持，那么另一浏览器对这属性代码就不起作用。99、CSS选择符：CSS选择符就是CSS样式的名字，选择符的命名规则可以使用英文字母的大写与小写、数字、连字号、下划线、冒号、句号，CSS选择符只能约10分钟约40分钟学生理解

以字母开头，选择符在CSS中可分成多种，在本小节中只介绍常用的CSS选择符：HTML标签选择符、ID选择符和CLASS（类选择符）选择符。CSS伪类和伪元素：伪类：伪类选择符是基于一组预定义性质的选择符，HTML兀素可以占有这些预定义性质。实际上这些性质与class属性的功能是相同的，因此在CSS术语中，它们被称作伪类。在对应这些伪类的标记中，不存在真正的class属性，相反，它们代表应用到这些兀素的某些方面，或者是相对于该元素的浏览器用户界面的状态。CSS常用单位：em：（em，元素的字体的高度）。ex：（x-height，字母〃x〃的高度）。px：（像素，相对于屏幕的分辨率）。绝对长度单位：in：（英寸，1英寸=2.54厘米）。cm：（厘米，1厘米=10毫米）。mm：（毫米，1米=1000毫米）。pt：（点，1点=1/72英寸）。pc：（帕，1帕=12点）。上周课外作业点评；学生实训及辅导；字体和字体颜色：font:font-style||font-variant||font-weight||font-size||line-height||font-family字体大小：Font-size,后面可接的参数值有：xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|length字体重量：Font-weight:normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900行距：line-height:#；字体类型:Font-family:fontname；行距：line-hei

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

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

最新文档

评论

0/150

提交评论