《HTML+CSS网页设计与布局》教案.docx

资源描述

1、HTML+CSS网页设计与布局教案HTML+CSS网页设计与布局教案编辑整理：尊敬的读者朋友们：这里是精品文档编辑中心，本文档内容是由我和我的同事精心编辑整理后发布的，发布之前我们对文中内容进行仔细校对，但是难免会有疏漏的地方，但是任然希望（HTML+CSS网页设计与布局教案）的内容能够给您的工作和学习带来便利。同时也真诚的希望收到您的建议和反馈，这将是我们进步的源泉，前进的动力。本文可编辑可修改，如果觉得对您有帮助请收藏以便随时查阅，最后祝您生活愉快业绩进步，以下为HTML+CSS网页设计与布局教案的全部内容。HTML+CSS网页设计与布局课程教案授课教师：授课班级: 地点：周课时：

2、 5 课时章节内容网页设计基础知识Dreamweaver软件介绍及其基础操作HTML基础知识及常用标记教学目标1) 使学生了解网页设计的相关基础知识；2) 使学生熟悉Dreamweaver软件界面的基本操作方法。重点难点1) 了解网页设计相关概念和网页的类型；2) 熟练掌握Dreamweaver软件创建和管理站点的方法。教学方法课堂讲授、案例讲解与指导教学环境计算机机房教学过程及内容提要时间分配备注教学过程设计一、引入1、相互认识，提出与本学科相关的知识，介绍本门课程情况、教学内容及总学时数进度安排，宣讲本课程教学纪律，鼓励学生营造一种学习氛围，尊重同学，互帮互学,真正达到学以致用；2、

3、提出问题：上过网吧？有谁自学过网页设计？听说过HTML或者CSS这两个概念吗？二、告知学生课堂任务本次课所学习的主要内容是HTML相关基础知识和Dreamweaver软件基础操作;三、逐步演示讲解分析教学内容1、网站和网页的区别:（1）网页是Internet基本元素;（2）网站由网页组成；2、静态网页和动态网页:静态网页：纯粹HTML语言格式的网页通常被称为静态网页，静态网页的后缀名通常为.htm、.html、.shtml、.xml.动态网页：许多人认为网页会动就是动态网页，这是个错误的观点，在静态的网页中也可以含有动态的图片，这仅仅是视觉上的动态罢了。真正的动态网页是指实际上并不是

4、独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页.也就是说，它是返回到了客户端上的网页。例如网页文件是以ASP、PHP、JSP、ASPX为结尾就是动态的网页了。静态网页的特点：(1）内容相对稳定，容易被搜索引擎检索到；(2）没有数据库支持,在网站制作和维护方面工作量大；（3）交互性差，在功能方面有很大的限制。动态网页的特点:（1）以数据库技术为基础，可大大降低网站维护的工作量;（2)可实现更多的功能，如用户注册、新闻发布、在线留言等；（3）不利于使用搜索引擎进行网站推广。3、常见网页类型：形象页、主页、栏目页、内页、新闻详细页等;4、网页设计原则：（1）了解客户需求

5、（2）遵循Web标准(3）运用形式美法则5、网页设计流程：（1）手绘效果图:确定网页主题内容和风格（2）设计效果图：搜集、整合设计所需素材（3）版面编辑：网页的制作与实现（4）网页美化：动画设计，网页测试和发布6、网页设计的主要软件:（1）Photoshop（2)Dweamveawer（3）Flash(4)Firworks7、 HTML基础知识:（1）HTML概念：Hyper Text Markup Language 超文本标识语言；（2）HTML文档的编写方法：用记事本手工直接编写、使用可视化HTML编辑器Dreamweaver、由Web 服务器动态生成；（3）网页文件命名：首页文件名默

6、认为：index.htm 或 index。html;（4)HTML 文件结构： HEAD title/title HTML 文件的正文 /HTML(5）用编辑器手工编写第一张网页；8、学生实训及辅导；9、 Dreamweaver软件界面介绍：（1）软件面板组成及基本操作方法(2）软件首选参数设置10、 Dreamweaver站点创建：站点-新建站点-设置站点名称-设置站点默认图像文件夹.11、学生实训操作:Dreamweaver站点创建与设置；12、 Dreamweaver创建第一个网页：（1) 名称：index.html（2) 设置标题、输入文本、输入特殊字符（3）页面属性设置（4）预览

7、网页13、学生实训及辅导;14、 HTML常用标记：（1)标题标记:h主题文字/h（2）段落标记：、!-这里放注释-（4）粗体与斜体:粗体、i斜体/i(5）删除线与下划线：s删除线、u下划线/u（6）上标与下标： sub下标15、学生实训及辅导；16、字体标记：(1）字体大小：font size=”1”字体大小/font（2）字体颜色:字体颜色/font（3）设置标题字体：主题文字/h（4）物理字体：，将字符设置成粗体. /I,将字符设置成斜体. U，给字符增加下划线。 S/S,给字符增加删除线。 TT，将字符设置成上标字体。 /EM强调文字。 STRONG/CODE显示编程代码。 S

8、AMP/SAMP显示示例文字。缩小文字。 BIG/BIG放大文字。17、字体标记实例讲解；18、学生实训及辅导;四、课外作业第3章上机实践.五、课堂小结本次课主要内容：1、网页设计基础知识；2、Dreamweaver基本使用方法；3、HTML基础知识及常用标记;约15分钟约35分钟约20分钟约30分钟约20分钟约20分钟约20分钟约30分钟约20分钟约30分钟约20分钟约20分钟约40分钟学生理解学生熟记学生实践学生实践学生实践学生实践学生实践总结后记HTML+CSS网页设计与布局课程教案授课教师: 授课班级：地点：周课时： 5 课时章节内容文字布局插入图像超级链接教学目标3)

9、使学生熟练掌握HTML常用标记的基本使用方法；4) 使学生掌握HTML常用标记各种属性的含义和设置方法.重点难点3) 掌握各种HTML常用标记的基本使用方法；4) 熟记各种HTML常用标记的含义。教学方法课堂讲授、案例讲解与指导教学环境计算机机房教学过程及内容提要时间分配备注教学过程设计六、引入3、回顾上周所学内容：上周主要介绍了网页设计和HTML相关基础知识及Dreamweaver软件基础操作，重点介绍了HTML基础知识及常用标记；4、提出问题：网页中文字如何布局？如何在网页中插入图像？如何运用超级链接？七、告知学生课堂任务本次课所学习的主要内容是HTML文字布局和插入图像、超级链

10、接的标记应用.八、逐步演示讲解分析教学内容19、换行控制:文字一p、文字二br /20、不换行控制：nobr/nobr21、文字对齐：align=”、居中/center22、设置段落:p段落一、段落二/p23、学生实训及辅导；24、上周课外作业点评；25、无序列表：ul 表项一/lili表项26、有序列表：olli表项一/lili表项/li/ol27、欲格式化文本：pre文字/pre、文本28、计算机输出格式：代码样式小型固定宽度字体显示的文本kbd代码样式固定宽度字体渲染/kbdtt代码样式固定宽度字体渲染文本代码样式斜体字渲染/var29、学生实训及辅导；30、在

11、网页中插入图像：31、图像无法显示时的提示信息:32、控制图像的大小:33、设置边框： 37、文本与图像对齐：img src=cn。jpg align=middle”38、学生实训及辅导;39、最简单的文字超链：文字链接/a40、超链网页的打开方式：_blank、_parent、_self、_top 41、链接的注释：42、设置图片链接：a href=”img src=/a43、设置锚点:a name=”锚点名文章中的文字44、邮箱地址链接：45、相对路径：相对路径是指这个文件在所在的位置与其他文件或文件夹的关系；46、绝对路径：HTML绝对路径(absolute p

12、ath）指带域名的文件的完整路径。 47、学生实训及辅导；九、课外作业第6章上机实践。十、课堂小结本次课主要内容:1、HTML文字布局；2、HTML插入图像;3、HTML超级链接。约10分钟约30分钟约30分钟约40分钟约20分钟约20分钟约30分钟约30分钟约20分钟约30分钟约30分钟约30分钟学生理解学生实践学生实践学生实践学生实践总结后记HTML+CSS网页设计与布局课程教案授课教师：授课班级：地点：周课时： 5 课时章节内容表单的使用插入表格教学目标5) 使学生熟练掌握HTML常用标记的基本使用方法;6) 使学生掌握HTML常用标记各种属性的含义和设置方法.重点难点5)

13、掌握各种HTML常用标记的基本使用方法；6) 熟记各种HTML常用标记的含义。教学方法课堂讲授、案例讲解与指导教学环境计算机机房教学过程及内容提要时间分配备注教学过程设计十一、引入5、回顾上周所学内容：上周主要介绍了HTML文字布局和插入图像的基本方法，重点介绍了超级链接的标记应用;6、提出问题:什么是表单？常见的表单有哪些?如何在网页中使用表格?十二、告知学生课堂任务本次课所学习的主要内容是HTML表单和表格的标记应用。十三、逐步演示讲解分析教学内容48、表单基本语法:form/form、属性action和method49、文本框：input type=text”50、密码

14、框：51、单选框:input type=”radio”52、复选框:input type=”checkbox” 53、按钮设置：input type=”submit value=”按钮提交”54、学生实训及辅导；55、上周课外作业点评；56、下拉表:select选项一/optionoption选项二选项三/option绝对路径57、文本域：/textarea58、表单应用实例讲解；59、学生实训及辅导；60、表格基本语法：tr标签对表示表行th标签对表示表头td标签对表示表元61、跨多行表元：Rowspan62、跨多列表元:colspan 63、表格内设置文字对齐:对

15、齐语法用align表示，后面接的值是left、center和right，分别代表向左、居中和向右对齐复选框 64、表格在网页中对齐:table align=#；65、学生实训及辅导；66、表格应用实例讲解；67、学生实训及辅导;十四、课外作业第8章上机实践.十五、课堂小结本次课主要内容：1、表单的使用;2、插入表格；3、表格应用实例；约10分钟约30分钟约40分钟约30分钟约20分钟约20分钟约40分钟约30分钟约40分钟约20分钟约40分钟学生理解学生实践学生实践学生实践学生实践总结后记HTML+CSS网页设计与布局课程教案授课教师：授课班级：地点：周课时： 5 课时章节

16、内容网页框架对象移动属性多媒体对象应用教学目标7) 使学生熟练掌握HTML常用标记的基本使用方法；8) 使学生掌握HTML常用标记各种属性的含义和设置方法。重点难点7) 掌握各种HTML常用标记的基本使用方法；8) 熟记各种HTML常用标记的含义。教学方法课堂讲授、案例讲解与指导教学环境计算机机房教学过程及内容提要时间分配备注教学过程设计十六、引入7、回顾上周所学内容:上周主要介绍了HTML表单和表格的标记应用方法，重点介绍了表单的应用实例;8、提出问题：框架网页如何创建？如何使网页中的对象移动？如何在网页中插入Flash、影片、声音？十七、告知学生课堂任务本次课所学习的主要内容是HT

17、ML网页框架和对象移动属性、多媒体对象的标记应用.十八、逐步演示讲解分析教学内容68、框架的基本语法:/frameset frameset cols=”25%,50，25%”69、框架垂直分栏：垂直分栏是在frameset中用cols表示跨多列表元，colspan70、框架水平分栏：水平分栏的语法用rows表示71、设置不可调节框架大小:noresize72、学生实训及辅导；73、上周课外作业点评；74、浏览器不支持框架：noframes/noframes 75、设置框架边框：frameset frameborder=76、设置滚动条：设置滚动条在是中加入name属性，表示

18、该frame的名称，然后通过用a标记的链接，并用target的属性值等于frame的名称；78、内联框架：内联框架存在/body的单个HTML文件中，可以链接其他网页并显示它,即在一个页面中嵌入一个框架窗口来显示另一个页面的内容，叫做浮动框架也称内联框架；79、学生实训及辅导；80、框架应用实例讲解；81、学生实训及辅导；82、移动属性基本语法：marquee要移动的对象84、图片移动的设置：marqueeimg src=”仙境。gif”/marquee85、文本移动的方向：marquee direction=up向上移动/marquee86、文本的滚动循环; 87、文本的移

19、动速度：scrollamount设置移动的速度88、学生实训及辅导；89、网页多媒体的基本语法：90、隐藏面板的设置； 91、对齐方式：align=top、bottom、center、baseline、 left、right、texttop、middle、 absmiddle、absbottom 92、学生实训及辅导;93、移动对象应用实例讲解；94、多媒体对象应用实例讲解；95、学生实训及辅导；十九、课外作业第11章上机实践.二十、课堂小结本次课主要内容：1、网页框架；2、对象移动属性；3、多媒体对象应用。约10分钟约20分钟约30分钟约30分钟约10分钟约20分钟约20

20、分钟约40分钟约20分钟约20分钟约10分钟约20分钟约30分钟约40分钟学生理解学生实践学生实践学生实践学生实践学生实践学生实践总结后记HTML+CSS网页设计与布局课程教案授课教师：授课班级：地点: 周课时： 5 课时章节内容CSS基础知识CSS字体设置教学目标9) 使学生熟练掌握CSS常用样式的创建方法；10) 使学生掌握CSS常用样式各种属性的含义和设置方法。重点难点9) 掌握各种CSS常用样式的基本使用方法；10) 熟记各种CSS常用样式的含义。教学方法课堂讲授、案例讲解与指导教学环境计算机机房教学过程及内容提要时间分配备注教学过程设计二十一、引入9、回顾上周所学内容:上周

21、主要介绍了HTML网页框架和多媒体对象标记，重点介绍了HTML对象移动属性设置方法;10、提出问题：什么是CSS？CSS有什么用？如何创建和使用CSS？二十二、告知学生课堂任务本次课所学习的主要内容是CSS基础知识和CSS字体样式设置方法和技巧。二十三、逐步演示讲解分析教学内容96、 CSS相关基础知识；97、 CSS文件链接方式：（1)内联定义：内联定义即是在对象的标记内，使用对象的style属性定义适用其的样式表属性。链入内部CSS：（2)链接外部CSS：98、 CSS在浏览器兼容性：现在浏览器市场的主流浏览器主要是Internet Explorer（简称IE）和 Mozilla

22、 Firefox（简称FF）,网页中的CSS因两个浏览器支持不同，所以对同一代码会显示不同的效果，那么为了达到网页的风格，有时要注意哪个浏览器要写的CSS属性支持如何。如果某一属性只有一个浏览器支持，那么另一浏览器对这属性代码就不起作用。 99、 CSS选择符：CSS选择符就是CSS样式的名字，选择符的命名规则可以使用英文字母的大写与小写、数字、连字号、下划线、冒号、句号,CSS选择符只能以字母开头，选择符在CSS中可分成多种，在本小节中只介绍常用的CSS选择符：HTML标签选择符、ID选择符和CLASS（类选择符)选择符。 100、 CSS伪类和伪元素：伪类:伪类选择符是基于一组预定义性质的

23、选择符，HTML元素可以占有这些预定义性质。实际上这些性质与class属性的功能是相同的,因此在CSS术语中，它们被称作伪类.在对应这些伪类的标记中，不存在真正的class属性,相反，它们代表应用到这些元素的某些方面,或者是相对于该元素的浏览器用户界面的状态。101、 CSS常用单位：em：(em，元素的字体的高度)。ex:（xheight，字母 ”x” 的高度）。px：（像素，相对于屏幕的分辨率)。绝对长度单位：in:（英寸，1英寸=2。54厘米）.cm：（厘米,1厘米=10毫米)。mm:（毫米，1米=1000毫米）。pt：（点,1点=1/72英寸）。pc：(帕，1帕=12点）.102、上

25、ne-height:；108、字体类型：Font-family：fontname；109、行距：lineheight：；110、间距与间隔：word-spacing：normal|长度单位、letterspacing:normallength111、字体应用实例讲解；112、学生实训及辅导;二十四、课外作业第16章上机实践。二十五、课堂小结本次课主要内容：1、CSS基础知识；2、CSS文件链接方式;3、CSS字体设置。约10分钟约40分钟约40分钟约60分钟约50分钟约40分钟约80分钟学生理解学生实践学生实践总结后记HTML+CSS网页设计与布局课程教案授课教师：授课班级:

26、地点: 周课时： 5 课时章节内容CSS文本设置CSS背景设置对象尺寸设置教学目标11) 使学生熟练掌握CSS常用样式的创建方法；12) 使学生掌握CSS常用样式各种属性的含义和设置方法。重点难点11) 掌握各种CSS常用样式的基本使用方法；12) 熟记各种CSS常用样式的含义。教学方法课堂讲授、案例讲解与指导教学环境计算机机房教学过程及内容提要时间分配备注教学过程设计二十六、引入11、回顾上周所学内容:上周主要介绍了CSS基础知识和CSS文件链接方式,重点介绍了CSS字体样式设置方法；12、提出问题:如何用CSS进行文本和背景设置？如何控制网页中的对象尺寸?二十七、告知学生课堂任务

27、本次课所学习的主要内容是CSS文本设置和背景设置、对象尺寸设置的方法和技巧。二十八、逐步演示讲解分析教学内容113、字母大小写转换：texttransform：capitalize | uppercase | lowercase | nonecapitalize:使每个词的首字母大写uppercase：使每个字的所有字母大写lowercase：使每个字的所有字母小写none：字母以正常形式显示114、文字修饰:textdecoration:underline overline | line-throungh blink noneunderline：给文字加下划线overline：给文字加

28、上划线linethrough：给文字加删除线blink：文字在闪烁none：缺省使用无115、文本空格处理方式：whitespace ： normal pre nowrap116、文本水平和垂直对齐：（1）垂直对齐:baseline:使元素和上级元素的基线对齐sub：使对象以下标的形式显示Super：使对象以上标的形式显示top：使元素和行中最高的元素向上对齐text-top：使元素和上级元素的字体向上对齐middle：纵向对齐元素基线加上上级元素的x高度字母”x”的高度的-的一半的中点bottom：使元素和行中最高的元素向下对齐text-bottom：使元素和上级元素的字体向下对齐（2）

29、水平对齐:left：浏览器默认的对齐方式,左对齐Right：右对齐center:居中justify:左右对齐117、文本缩进：textindent：长度百分比118、学生实训及辅导；119、上周课外作业点评;120、设置背景颜色：backgroundcolor ： transparent | color121、设置图像的滚动：backgroundattachment : scroll | fixed122、设置背景图像的位置：backgroundposition ： length lengthbackgroundposition ： position | position123、

30、铺排背景图像：backgroundrepeat ： repeat no-repeat repeatx | repeaty124、学生实训及辅导；125、设置对象宽度:width : auto | length126、设置对象高度：height ： auto | length127、宽度和高度实例：（1）在网页中布局多个层，并在每个层中写上文字；（2）设置层的宽度,使每个层按50像素增加；（3）给每个层添加一个ID，然后在CSS中对ID名称进行控制；（4)设置层居中。128、学生实训及辅导;二十九、课外作业第19章上机实践.三十、课堂小结本次课主要内容：1、CSS文本设置；2、C

31、SS背景设置；3、对象尺寸设置。约10分钟约30分钟约30分钟约60分钟约40分钟约30分钟约40分钟约30分钟约50分钟学生理解学生实践学生实践学生实践总结后记HTML+CSS网页设计与布局课程教案授课教师：授课班级：地点：周课时: 5 课时章节内容设置外补丁和内补丁对象边框和定位设置教学目标13) 使学生熟练掌握CSS常用样式的创建方法；14) 使学生掌握CSS常用样式各种属性的含义和设置方法。重点难点13) 掌握各种CSS常用样式的基本使用方法；14) 熟记各种CSS常用样式的含义。教学方法课堂讲授、案例讲解与指导教学环境计算机机房教学过程及内容提要时间分配备注教学过程设计三十一

32、、引入13、回顾上周所学内容：上周主要介绍了CSS文本设置和背景设置,重点介绍了对象尺寸设置的方法和技巧;14、提出问题：什么是外补丁和内补丁？外补丁和内补丁如何创建？如何给网页中的对象进行定位？三十二、告知学生课堂任务本次课所学习的主要内容是CSS外补丁和内补丁、对象边框和定位设置的方法和技巧。三十三、逐步演示讲解分析教学内容129、外补丁:表示具体的精确宽度。margin ： auto | length130、外补丁的外延设置：顶端外补丁用法：margin-top：auto|length右端外补丁用法：marginright:auto|length底端外补丁用法：margin

33、-bottom：autolength左端外补丁用法:marginleft：autolength131、外补丁实例;132、上周课外作业点评；133、学生实训及辅导;134、层与层的距离效果；135、对层布局；136、设置层的尺寸；137、设置层漂移；138、设置层与层之间的间隔;：:139、学生实训及辅导；140、内补丁：表示对象中的内部填充距离.padding : length141、顶端内补丁用法:paddingtop:length;142、右端内补丁用法：padding-right : length143、底端内补丁用法：paddingbottom ： leng

35、由虚线表示.参数solid：表示实线,边框由实线表示，常用的参数。参数double：双线边框。参数groove：立体形式的凹槽。参数ridge：立体形式的凸槽。参数insert：立体形式的凹边.参数outset：立体形式的凸边。150、边框宽度表示:border-width ： medium thin | thick | length参数medium:默认值，表示默认宽度。参数thin：表示小于默认宽度。参数thick：表示大于默认宽度。参数length：直接表示边框宽度的值。151、学生实训及辅导;152、定位的基本语法：position ： static | absolute rel

36、ative153、对象层叠顺序:zindex ： auto | number154、相对定位实例;155、学生实训及辅导;三十四、课外作业第22章上机实践。三十五、课堂小结本次课主要内容:1、CSS设置外补丁和内补丁；2、CSS对象边框设置；3、CSS定位设置。约10分钟约20分钟约10分钟约30分钟约30分钟约30分钟约30分钟约30分钟约15分钟约30分钟约10分钟约40分钟约15分钟约30分钟学生理解学生实践学生实践学生实践学生实践学生实践总结后记HTML+CSS网页设计与布局课程教案授课教师：授课班级: 地点: 周课时： 5 课时章节内容CSS使用列表的方法CSS表格控制

37、方法教学目标15) 使学生熟练掌握CSS常用样式的创建方法；16) 使学生掌握CSS常用样式各种属性的含义和设置方法。重点难点15) 掌握各种CSS常用样式的基本使用方法；16) 熟记各种CSS常用样式的含义。教学方法课堂讲授、案例讲解与指导教学环境计算机机房教学过程及内容提要时间分配备注教学过程设计三十六、引入15、回顾上周所学内容:上周主要介绍了CSS外补丁和内补丁,重点介绍了对象边框和定位设置的方法和技巧；16、提出问题：如何使用CSS创建CSS列表？如何使用CSS控制表格？三十七、告知学生课堂任务本次课所学习的主要内容是CSS列表和表格设置的方法和技巧。三十八、逐步演示讲解分

38、析教学内容156、列表的基本语法:liststyle ： list-styleimage list-style-position | list-styletype参数list-style-image：用来设置列表的图像。参数list-styleposition:用来设置列表项标记如何根据文本排列。参数list-styletype:用来设置列表项所使用的预设标记。157、设置列表中的图像：liststyleimage ： none url (url）参数none：表示属性不设置列表图像，是默认值。参数url:使用绝对或相对地址指定背景图像,这样就可以显示自定义的图像了，要注意图像大小,如太大

39、会影响列表的美观（图像是按图像原始大小显示的)。图像链接地址要用括号括起来，然后用引号引起（也可以不用引号），注意括号前面有关键字url。158、学生实训及辅导;159、上周课外作业点评；160、列表中的文本排列：liststyle-position ： outside inside 参数outside：默认值。列表项目标记放置在文本以外，且环绕文本不根据标记对齐.参数inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐.161、列表的预设标记：list-styletype ： disc circle | square decimal lowerroman upperroman | lower-alpha uppe

展开阅读全文