HTML+CSS网页设计与布置组织-教案课程.doc

《HTML+CSS网页设计与布置组织-教案课程.doc》由会员分享，可在线阅读，更多相关《HTML+CSS网页设计与布置组织-教案课程.doc（25页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、+HTML+CSS网页设计与布局课程教案授课教师： 授课班级： 地点： 周课时： 5 课时 章节内容网页设计基础知识Dreamweaver软件介绍及其基础操作HTML基础知识及常用标记教学目标1) 使学生了解网页设计的相关基础知识；2) 使学生熟悉Dreamweaver软件界面的基本操作方法。重点难点1) 了解网页设计相关概念和网页的类型；2) 熟练掌握Dreamweaver软件创建和管理站点的方法。教学方法课堂讲授、案例讲解与指导教学环境计算机机房教学过程及内容提要时间分配备注教学过程设计一、 引入1、 相互认识，提出与本学科相关的知识，介绍本门课程情况、教学内容及总学时数进度安排，宣讲本课

2、程教学纪律，鼓励学生营造一种学习氛围，尊重同学，互帮互学，真正达到学以致用；2、 提出问题：上过网吧？有谁自学过网页设计？听说过HTML或者CSS这两个概念吗？二、 告知学生课堂任务本次课所学习的主要内容是HTML相关基础知识和Dreamweaver软件基础操作；三、 逐步演示讲解分析教学内容1、 网站和网页的区别：（1）网页是Internet基本元素；（2）网站由网页组成；2、 静态网页和动态网页：静态网页：纯粹HTML语言格式的网页通常被称为静态网页，静态网页的后缀名通常为.htm、.html、.shtml、.xml。动态网页：许多人认为网页会动就是动态网页，这是个错误的观点，在静态的网页

3、中也可以含有动态的图片，这仅仅是视觉上的动态罢了。真正的动态网页是指实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。也就是说，它是返回到了客户端上的网页。例如网页文件是以ASP、PHP、JSP、ASPX为结尾就是动态的网页了。静态网页的特点：（1）内容相对稳定，容易被搜索引擎检索到；（2）没有数据库支持，在网站制作和维护方面工作量大；（3）交互性差，在功能方面有很大的限制。动态网页的特点：（1）以数据库技术为基础，可大大降低网站维护的工作量；（2）可实现更多的功能，如用户注册、新闻发布、在线留言等；（3）不利于使用搜索引擎进行网站推广。3、 常见网页类型：

4、形象页、主页、栏目页、内页、新闻详细页等；4、 网页设计原则：（1）了解客户需求（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编辑器D

5、reamweaver、由Web 服务器动态生成；（3）网页文件命名：首页文件名默认为：index.htm 或 index.html；（4）HTML 文件结构： HTML 文件的正文 （5）用编辑器手工编写第一张网页；8、 学生实训及辅导；9、 Dreamweaver软件界面介绍：（1）软件面板组成及基本操作方法（2）软件首选参数设置10、 Dreamweaver站点创建：站点-新建站点-设置站点名称-设置站点默认图像文件夹。11、 学生实训操作：Dreamweaver站点创建与设置；12、 Dreamweaver创建第一个网页：（1) 名称：index.html（2) 设置标题、输入文本、输入

6、特殊字符（3）页面属性设置（4）预览网页13、 学生实训及辅导；14、 HTML常用标记：（1）标题标记：主题文字（2）段落标记：这里表示段落（3）换行与注释：、（4）粗体与斜体：粗体、斜体（5）删除线与下划线：删除线、下划线（6）上标与下标：上标 下标15、 学生实训及辅导；16、 字体标记：（1）字体大小：字体大小（2）字体颜色：字体颜色（3）设置标题字体：主题文字（4）物理字体： ，将字符设置成粗体。 ，将字符设置成斜体。 ，给字符增加下划线。 ，给字符增加删除线。 ，将字符设置成打字机字体。 ，将字符设置成上标字体。 ，将字符设置成下标字体。（5）逻辑字体： 强调文字。 字体加重。 显

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

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

9、级链接的标记应用。八、 逐步演示讲解分析教学内容19、 换行控制：文字一、文字二20、 不换行控制：21、 文字对齐：align=#、居中22、 设置段落：段落一、段落二23、 学生实训及辅导；24、 上周课外作业点评；25、 无序列表： 表项一表项26、 有序列表：表项一表项27、 欲格式化文本：文字、文本28、 计算机输出格式：代码样式小型固定宽度字体显示的文本代码样式固定宽度字体渲染代码样式固定宽度字体渲染文本代码样式斜体字渲染29、 学生实训及辅导；30、 在网页中插入图像：31、 图像无法显示时的提示信息：32、 控制图像的大小：33、 设置边框：34、 图像的链接：35、 学生实训

10、及辅导；36、 图像映射图： 37、 文本与图像对齐：38、 学生实训及辅导；39、 最简单的文字超链：文字链接40、 超链网页的打开方式：_blank、_parent、_self、_top 41、 链接的注释：163网站42、 设置图片链接：43、 设置锚点：文章中的文字44、 邮箱地址链接：作者的邮箱45、 相对路径：相对路径是指这个文件在所在的位置与其他文件或文件夹的关系；46、 绝对路径：HTML绝对路径（absolute path）指带域名的文件的完整路径。 47、 学生实训及辅导；九、 课外作业第6章上机实践。十、 课堂小结本次课主要内容：1、HTML文字布局；2、HTML插入图像

11、；3、HTML超级链接。约10分钟约30分钟约30分钟约40分钟约20分钟约20分钟约30分钟约30分钟约20分钟约30分钟约30分钟约30分钟学生理解学生实践学生实践学生实践学生实践总结后记HTML+CSS网页设计与布局课程教案授课教师： 授课班级： 地点： 周课时： 5 课时 章节内容表单的使用插入表格教学目标5) 使学生熟练掌握HTML常用标记的基本使用方法；6) 使学生掌握HTML常用标记各种属性的含义和设置方法。重点难点5) 掌握各种HTML常用标记的基本使用方法；6) 熟记各种HTML常用标记的含义。教学方法课堂讲授、案例讲解与指导教学环境计算机机房教学过程及内容提要时间分配备注教

12、学过程设计十一、 引入5、 回顾上周所学内容：上周主要介绍了HTML文字布局和插入图像的基本方法，重点介绍了超级链接的标记应用；6、 提出问题：什么是表单？常见的表单有哪些？如何在网页中使用表格？十二、 告知学生课堂任务本次课所学习的主要内容是HTML表单和表格的标记应用。十三、 逐步演示讲解分析教学内容48、 表单基本语法：、属性action和method49、 文本框：50、 密码框：51、 单选框：52、 复选框：53、 按钮设置：54、 学生实训及辅导；55、 上周课外作业点评；56、 下拉表：选项一选项二选项三绝对路径57、 文本域：58、 表单应用实例讲解；59、 学生实训及辅导；

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

14、理解学生实践学生实践学生实践学生实践总结后记HTML+CSS网页设计与布局课程教案授课教师： 授课班级： 地点： 周课时： 5 课时 章节内容网页框架对象移动属性多媒体对象应用教学目标7) 使学生熟练掌握HTML常用标记的基本使用方法；8) 使学生掌握HTML常用标记各种属性的含义和设置方法。重点难点7) 掌握各种HTML常用标记的基本使用方法；8) 熟记各种HTML常用标记的含义。教学方法课堂讲授、案例讲解与指导教学环境计算机机房教学过程及内容提要时间分配备注教学过程设计十六、 引入7、 回顾上周所学内容：上周主要介绍了HTML表单和表格的标记应用方法，重点介绍了表单的应用实例；8、 提出问

15、题：框架网页如何创建？如何使网页中的对象移动？如何在网页中插入Flash、影片、声音？十七、 告知学生课堂任务本次课所学习的主要内容是HTML网页框架和对象移动属性、多媒体对象的标记应用。十八、 逐步演示讲解分析教学内容68、 框架的基本语法： 69、 框架垂直分栏：垂直分栏是在中用cols表示跨多列表元，colspan70、 框架水平分栏：水平分栏的语法用rows表示71、 设置不可调节框架大小：noresize72、 学生实训及辅导；73、 上周课外作业点评；74、 浏览器不支持框架： 75、 设置框架边框：76、 设置滚动条：设置滚动条在是里面，用scrolling属性 77、 导航框架

16、：导航框架是在网页框架的中加入name属性，表示该的名称，然后通过用标记的链接，并用target的属性值等于的名称；78、 内联框架：内联框架存在的单个HTML文件中，可以链接其他网页并显示它，即在一个页面中嵌入一个框架窗口来显示另一个页面的内容，叫做浮动框架也称内联框架；79、 学生实训及辅导；80、 框架应用实例讲解；81、 学生实训及辅导；82、 移动属性基本语法：要移动的对象83、 文字的移动设置：文字84、 图片移动的设置：85、 文本移动的方向：向上移动86、 文本的滚动循环； 87、 文本的移动速度：scrollamount设置移动的速度88、 学生实训及辅导；89、 网页多媒体

17、的基本语法：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分钟约40分钟约20分钟约20分钟约10分钟约20分钟约30分钟约40分钟学生理解学生实

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

19、、 提出问题：什么是CSS？CSS有什么用？如何创建和使用CSS？二十二、 告知学生课堂任务本次课所学习的主要内容是CSS基础知识和CSS字体样式设置方法和技巧。二十三、 逐步演示讲解分析教学内容96、 CSS相关基础知识；97、 CSS文件链接方式：（1）内联定义：内联定义即是在对象的标记内，使用对象的style属性定义适用其的样式表属性。 链入内部CSS： /*这里写CSS内容*/（2）链接外部CSS：98、 CSS在浏览器兼容性：现在浏览器市场的主流浏览器主要是Internet Explorer（简称IE）和 Mozilla Firefox（简称FF），网页中的CSS因两个浏览器支持不同

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

21、ass属性的功能是相同的，因此在CSS术语中，它们被称作伪类。在对应这些伪类的标记中，不存在真正的class属性，相反，它们代表应用到这些元素的某些方面，或者是相对于该元素的浏览器用户界面的状态。101、 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点）。102、 上周课外作业点评；103、 学生实训及辅导；104、 字体和字体颜色

22、：font : font-style | font-variant | font-weight | font-size | line-height | font-family105、 字体大小：Font-size，后面可接的参数值有：xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|length106、 字体重量：Font-weight:normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900107、 行距：line-height:#；108

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

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

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

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

27、齐（2）水平对齐：left：浏览器默认的对齐方式，左对齐Right：右对齐center：居中justify：左右对齐117、 文本缩进：text-indent： | 118、 学生实训及辅导；119、 上周课外作业点评；120、 设置背景颜色：background-color : transparent | color121、 设置图像的滚动：background-attachment : scroll | fixed122、 设置背景图像的位置：background-position : length | lengthbackground-position : position | posi

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

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

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

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

32、adding-bottom : length144、 左端内补丁用法：padding-left : length145、 内补丁综合实例；146、 学生实训及辅导；147、 边框的基本语法：border : border-width | border-style | border-color148、 边框颜色：border-color : color149、 边框样式表示：border-style : none | dotted | dashed | solid | double | groove | ridge | inset | outset参数none：表示无边框，默认值。参数dotted：表示点线，由一点点组成的边框。参数dashed：表示虚线，边框由虚线表示。参数solid：表示实线，边框由实线表示，常用的参数。参数double：双线边框。参数groove：立体形式的凹槽。参数ridge：立体形式的凸槽。参数insert：立体形式的凹边。参数outset：立体形式的凸边。150、 边框宽度表示：border-width : medium | thin | thick | length参数medium：默认值，表示默认