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

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

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

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

4、目页、内页、新闻详细页等；4、 网页设计原则：(1）了解客户需求（2)遵循W标准（3）运用形式美法则5、 网页设计流程:（1)手绘效果图：确定网页主题内容与风格(2)设计效果图：搜集、整合设计所需素材（)版面编辑：网页得制作与实现(4）网页美化：动画设计，网页测试与发布6、 网页设计得主要软件:（1）hoosop（2）Dweaar（3）Flash(4）Fworks7、 HTL基础知识：（1）HTML概念：Hyper et arku Lnguae 超文本标识语言；(）TML文档得编写方法:用记事本手工直接编写、使用可视化TL编辑器Dreawavr、由Web 服务器动态生成;（3)网页文件命名：首

5、页文件名默认为：index、tm 或indx、htm；(4)HTML 文件结构: HTL HEA ttl/itle /HEAD TML文件得正文 (5）用编辑器手工编写第一张网页；8、 学生实训及辅导;9、 reaeavr软件界面介绍：（1)软件面板组成及基本操作方法()软件首选参数设置10、 Dremweavr站点创建：站点新建站点设置站点名称-设置站点默认图像文件夹。11、 学生实训操作：Dremweve站点创建与设置；12、 ramwav创建第一个网页:(1）名称:ine、m(） 设置标题、输入文本、输入特殊字符(3)页面属性设置(4)预览网页13、 学生实训及辅导；14、 HTM常用标

6、记:(1)标题标记:h主题文字h（2)段落标记：这里表示段落/（3）换行与注释：br、！这里放注释-（4）粗体与斜体:b粗体/b、斜体(）删除线与下划线:s删除线/s、u下划线(6)上标与下标:up上标 sub下标字体大小font(2)字体颜色：font col=”字体颜色主题文字/h#(4）物理字体: B，将字符设置成粗体. I/I，将字符设置成斜体。 强调文字。 STRONTRONG字体加重。 COE/CODE显示编程代码。 SAM/SAMP显示示例文字。 KBD/SMALL缩小文字。 /BI放大文字。17、 字体标记实例讲解;18、 学生实训及辅导；四、 课外作业第3章上机实践。五、 课

7、堂小结本次课主要内容：、网页设计基础知识；2、Dreaeaver基本使用方法;3、HL基础知识及常用标记；约15分钟约35分钟约20分钟约30分钟约20分钟约20分钟约20分钟约30分钟约20分钟约3分钟约20分钟约20分钟约0分钟学生理解学生熟记学生实践学生实践学生实践学生实践学生实践总结后记HML+SS网页设计与布局课程教案授课教师: 授课班级： 地点： 周课时： 5 课时 章节内容文字布局插入图像超级链接教学目标3) 使学生熟练掌握HTML常用标记得基本使用方法；4) 使学生掌握HTM常用标记各种属性得含义与设置方法.重点难点3) 掌握各种TM常用标记得基本使用方法；4) 熟记各种HTL

8、常用标记得含义。教学方法课堂讲授、案例讲解与指导教学环境计算机机房教学过程及内容提要时间分配备注教学过程设计六、 引入3、 回顾上周所学内容:上周主要介绍了网页设计与HTML相关基础知识及Demweaver软件基础操作，重点介绍了HTL基础知识及常用标记；4、 提出问题:网页中文字如何布局？如何在网页中插入图像?如何运用超级链接？七、 告知学生课堂任务本次课所学习得主要内容就是HTL文字布局与插入图像、超级链接得标记应用。八、 逐步演示讲解分析教学内容19、 换行控制:文字一p、文字二br /20、 不换行控制：nobr21、 文字对齐：agn#”、cener居中eter22、 设置段落:p段

9、落一/p、p段落二p23、 学生实训及辅导;24、 上周课外作业点评；25、 无序列表:ul li表项一/i l表项l26、 有序列表： 表项一/li i表项ol27、 欲格式化文本：pre文字代码样式小型固定宽度字体显示得文本coekbd代码样式固定宽度字体渲染kbdtt代码样式固定宽度字体渲染文本tt29、 学生实训及辅导;30、 在网页中插入图像：img src=”cn、jp”31、 图像无法显示时得提示信息:img src=cn、jpg a”风景32、 控制图像得大小:igsr=cn、jpg” alt=风景” with=”40x heiht=0x”33、 设置边框:imsrc=cn、g

10、35、 学生实训及辅导；36、 图像映射图：ma38、 学生实训及辅导；39、 最简单得文字超链：href=”文字链接/a40、 超链网页得打开方式:_lank、_prnt、_sef、_top 41、 链接得注释:ahr= itl=”网易网站163网站a42、 设置图片链接：ig src=43、 设置锚点:44、 邮箱地址链接：a href=”mailto:作者得邮箱/orm、属性acin与meth49、 文本框：50、 密码框：52、 复选框：npttype=chekox53、 按钮设置：input typ=subit aue”按钮提交”54、 学生实训及辅导；55、 上周课外作业点评；56

11、、 下拉表： !设置下拉表选项- optin选项一/option option选项二/ptiontioselcted选项三/optin/seec绝对路径57、 文本域：textrea!文本域内容-txtaea58、 表单应用实例讲解；59、 学生实训及辅导；60、 表格基本语法：tabletr标签对表示表行th标签对表示表头table；65、 学生实训及辅导；66、 表格应用实例讲解;67、 学生实训及辅导；一十四、 课外作业第章上机实践。一十五、 课堂小结本次课主要内容:、表单得使用；2、插入表格;、表格应用实例;约0分钟约30分钟约40分钟约30分钟约0分钟约20分钟约4分钟约3分钟约分钟

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

13、提出问题:框架网页如何创建？如何使网页中得对象移动？如何在网页中插入Flsh、影片、声音?一十七、 告知学生课堂任务本次课所学习得主要内容就是HTML网页框架与对象移动属性、多媒体对象得标记应用。一十八、 逐步演示讲解分析教学内容68、 框架得基本语法：famesetframt /frafes cos=”25,50%， frame sr=” frsr=” frame69、 框架垂直分栏：垂直分栏就是在rameset中用cols表示跨多列表元,colp70、 框架水平分栏：水平分栏得语法用rows表示71、 设置不可调节框架大小：nesze72、 学生实训及辅导;73、 上周课外作业点评;74、

14、 浏览器不支持框架：nofraes 75、 设置框架边框:frmest frameborer=76、 设置滚动条:设置滚动条在就是里面，用scrolin属性 77、 导航框架:导航框架就是在网页框架得frame中加入name属性,表示该frme得名称，然后通过用a标记得链接,并用target得属性值等于得名称;78、 内联框架:内联框架存在body/body得单个HTML文件中,可以链接其她网页并显示它，即在一个页面中嵌入一个框架窗口来显示另一个页面得内容，叫做浮动框架也称内联框架；79、 学生实训及辅导；80、 框架应用实例讲解；81、 学生实训及辅导；82、 移动属性基本语法：arque要

15、移动得对象83、 文字得移动设置：ig src=仙境、gif85、 文本移动得方向：arueedirection=up向上移动/marqee86、 文本得滚动循环； 87、 文本得移动速度：scrolaunt设置移动得速度88、 学生实训及辅导；89、 网页多媒体得基本语法：embed src=op=tue|false90、 隐藏面板得设置; 91、 对齐方式：alig=top、oom、entr、baelie、let、riht、extto、midde、 abidle、bsboom 92、 学生实训及辅导;93、 移动对象应用实例讲解;94、 多媒体对象应用实例讲解；95、 学生实训及辅导；一十

16、九、 课外作业第1章上机实践。二十、 课堂小结本次课主要内容：1、网页框架；、对象移动属性；3、多媒体对象应用。约10分钟约0分钟约3分钟约3分钟约1分钟约20分钟约0分钟约40分钟约20分钟约20分钟约分钟约0分钟约30分钟约0分钟学生理解学生实践学生实践学生实践学生实践学生实践学生实践总结后记HTML+CSS网页设计与布局课程教案授课教师： 授课班级： 地点: 周课时: 5课时 章节内容CS基础知识SS字体设置教学目标9) 使学生熟练掌握CSS常用样式得创建方法；10) 使学生掌握SS常用样式各种属性得含义与设置方法。重点难点9) 掌握各种CSS常用样式得基本使用方法;10) 熟记各种CS

17、常用样式得含义。教学方法课堂讲授、案例讲解与指导教学环境计算机机房教学过程及内容提要时间分配备注教学过程设计二十一、 引入9、 回顾上周所学内容:上周主要介绍了HTML网页框架与多媒体对象标记，重点介绍了HTML对象移动属性设置方法；10、 提出问题:什么就是CSS？S有什么用？如何创建与使用CSS？二十二、 告知学生课堂任务本次课所学习得主要内容就是CSS基础知识与C字体样式设置方法与技巧。二十三、 逐步演示讲解分析教学内容96、 CS相关基础知识；97、 CSS文件链接方式:（1)内联定义：内联定义即就是在对象得标记内，使用对象得style属性定义适用其得样式表属性。 链入内部S: 98、

18、 CSS在浏览器兼容性:现在浏览器市场得主流浏览器主要就是Intenexplor（简称IE)与 ozilla Firefo(简称F）,网页中得CSS因两个浏览器支持不同,所以对同一代码会显示不同得效果,那么为了达到网页得风格,有时要注意哪个浏览器要写得CSS属性支持如何。如果某一属性只有一个浏览器支持，那么另一浏览器对这属性代码就不起作用. 99、 CS选择符：C选择符就就是CSS样式得名字，选择符得命名规则可以使用英文字母得大写与小写、数字、连字号、下划线、冒号、句号，CSS选择符只能以字母开头,选择符在S中可分成多种，在本小节中只介绍常用得CS选择符：TL标签选择符、ID选择符与CLASS

19、（类选择符）选择符。100、 CSS伪类与伪元素：伪类:伪类选择符就是基于一组预定义性质得选择符，TML元素可以占有这些预定义性质。实际上这些性质与cass属性得功能就是相同得，因此在CSS术语中，它们被称作伪类。在对应这些伪类得标记中，不存在真正得cla属性,相反,它们代表应用到这些元素得某些方面，或者就是相对于该元素得浏览器用户界面得状态。101、 C常用单位：m：（em,元素得字体得高度)。：（heigh，字母 x 得高度）.：（像素，相对于屏幕得分辨率）。绝对长度单位：i:(英寸,1英寸=2、54厘米）。m:(厘米，1厘米=10毫米)。m：（毫米,1米=10毫米）。pt：(点,点=1/

20、7英寸）。pc：(帕，1帕=12点）。102、 上周课外作业点评；103、 学生实训及辅导；104、 字体与字体颜色:fnt :ntstyle| font-vaia | font-wigh font-size lin-height| font-amily105、 字体大小：ont-sze，后面可接得参数值有：xxsalxsmlsmallmedmlage|larxxlargelagrsller|lngth106、 字体重量:Fntwigt：rmalld|bolder|igher|10|2000400|5000|700|009107、 行距：linehiht：;108、 字体类型:Font-fm：

21、foname；109、 行距:le-heht:；110、 间距与间隔:wordaig:nmal长度单位、lettspcig:ormallegth111、 字体应用实例讲解；112、 学生实训及辅导；二十四、 课外作业第6章上机实践.二十五、 课堂小结本次课主要内容：1、CS基础知识；2、S文件链接方式；3、CS字体设置.约10分钟约40分钟约40分钟约60分钟约50分钟约40分钟约80分钟学生理解学生实践学生实践总结后记HTM+CSS网页设计与布局课程教案授课教师： 授课班级： 地点： 周课时： 课时章节内容CSS文本设置CSS背景设置对象尺寸设置教学目标11) 使学生熟练掌握CSS常用样式得创建方法；12) 使学生掌握CS常用样式各种属性得含义与设置方法。重点难点11) 掌握各种C常用样式得基本使用方法；12) 熟记各种CSS常用样式得含义.教学方法课堂讲授、案例讲解与指导