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

«HTML+CSS网页设计及布局课程教案授课教师：授课班级：地点：周课时：5课时章节内容网页设计基础知识Dreamweaver软件介绍及其基础操作HTML基础知识及常用标记教学目标1）使学生了解网页设计的相关基础知识；2）使学生熟悉Dreamweaver软件界面的基本操作方法。重点难点1） 了解网页设计相关概念和网页的类型；2）熟练掌握Dreamweaver软件创建和管理站点的方法。教学方法课堂讲授、案例讲解及指导教学环境计算机机房教学过程及内容提要时间分配备注教 学 过 程 设 计一、引入1、相互认识，提出及本学科相关的知识，介绍本门课 程情况、教学内容及总学时数进度安排，宣讲本 课程教学纪律，鼓励学生营造一种学习氛围，尊 重同学，互帮互学，真正达到学以致用；2、提出问题:上过网吧？有谁自学过网页设计？听说 过HTML或者CSS这两个概念吗？约15分钟学生理47、学生实训及辅导；九、课外作业第6章上机实践。十、课堂小结本次课主要内容：1、HTML文字布局;2、HTML插入图像；3、HTML超级链接。后记HTML+CSS网页设计及布局课程教案授课教师：授课班级：地点：周课时：5课时章节内容表单的使用插入表格教学目标5）使学生熟练掌握HTML常用标记的基本使用方法；6）使学生掌握HTML常用标记各种属性的含义和设置方法。重点难点5）掌握各种HTML常用标记的基本使用方法；6）熟记各种HTML常用标记的含义。教学方法课堂讲授、案例讲解及指导教学环境计算机机房教学过程及内容提要时间分配备注十一一、引入约105、回顾上周所学内容：上周主要介绍了 HTML文字布分钟局和插入图像的基本方法，重点介绍了超级链接的标记应用；6、提出问题:什么是表单？常见的表单有哪些？如何在网页中使用表格？学生理解教十二、告知学生课堂任务约30学本次课所学习的主要内容是HTML表单和表格的分钟过标记应用。程学生实十三、逐步演示讲解分析教学内容设48、表单基本语法：formX/form属性action和约40践计method分钟49、文本框：input type二text"约3050、密码框：input type="password"分钟51、单选框：<input type二radio”约2052、复选框：input type=checkbox” >分钟学生实53、按钮设置：input type二submit" value=按钮践提交54、学生实训及辅导；55、上周课外作业点评；56、下拉表：（select><!一设置下拉表选项一>option选项一/option<option> 选项二</option> <option selected> 选 项 三 </option></select绝对路径57、文本域：<textarea><! 文本域内容-></textarea>58、表单应用实例讲解；59、学生实训及辅导；60、表格基本语法：tableX/tableXtr标签对表示 表行th标签对表示表头<td>标签对表示表元61、跨多行表元：Rowspan62、跨多列表元：colspan63、表格内设置文字对齐：对齐语法用align表示， 后面接的值是left、center和right,分别代表 向左、居中和向右对齐复选框64、表格在网页中对齐:<table align=#X/table>；65、学生实训及辅导；66、表格应用实例讲解；67、学生实训及辅导；约20 分钟 约40 分钟 约30 分钟学生实践学生实践总结约40 分钟 约20 分钟 约40 分钟十四、课外作业第8章上机实践。十五、课堂小结本次课主要内容：1、表单的使用；2、插入表格；3、表格应用实例；后记HTML+CSS网页设计及布局课程教案授课教师：授课班级：地点：周课时：5课时章节内容网页框架对象移动属性多媒体对象应用教学目标7）使学生熟练掌握HTML常用标记的基本使用方法；8）使学生掌握HTML常用标记各种属性的含义和设置方法。重点难点7）掌握各种HTML常用标记的基本使用方法；8）熟记各种HTML常用标记的含义。教学方法课堂讲授、案例讲解及指导教学环境计算机机房教学过程及内容提要时间分配备注十六、引入约10分钟7、回顾上周所学内容：上周主要介绍了 HTML表单和 表格的标记应用方法，重点介绍了表单的应用实 例；8、提出问题:框架网页如何创建？如何使网页中的对 象移动？如何在网页中插入Flash、影片、声音？十七、告知学生课堂任务本次课所学习的主要内容是HTML网页框架和对象移动属性、多媒体对象的标记应用。过程设计十八、逐步演示讲解分析教学内容68、框架的基本语法：framesetX/fraiiieset<frame></frameXframesetcols=25%, 50%, 25%<frame约20分钟学生理69、src=/http: /www. haol23. com/<framesrc=/http:/www. sina. com. cn/<framesrc=/http: /www. 163. com/z，></frameset>框架垂直分栏：垂直分栏是在frameset中用约30分钟约30学生实践分钟约10分钟cols表示跨多列表元，colspan70、框架水平分栏：水平分栏的语法用rows表示71、设置不可调节框架大小：noresize72、学生实训及辅导；73、上周课外作业点评；74、浏览器不支持框架：<noframesX/noframes>75、设置框架边框：frameset frameborder=#>76、设置滚动条：设置滚动条在是frame）里面，用 scrolling 属性77、导航框架：导航框架是在网页框架的frame中加 入name属性，表示该frame的名称，然后通过 用<a>标记的链接，并用target的属性值等于 frame的名称；78、内联框架：内联框架存在body/body的单个 HTML文件中，可以链接其他网页并显示它，即在 一个页面中嵌入一个框架窗口来显示另一个页面 的内容，叫做浮动框架也称内联框架；79、学生实训及辅导；80、框架应用实例讲解；81、学生实训及辅导；82、移动属性基本语法：marquee要移动的对象 </marquee>83、文字的移动设置：marquee direction"文字 </marquee>84、图片移动的设置：<marquee><img src二仙 境.gif，zX/marquee>约20 分钟 约20 分钟 约40 分钟 约20 分钟约20 分钟 约10 分钟约20学生实 践学生实践学生实践学生实践学生实践总结分钟 约30 分钟约40 分钟85、文本移动的方向：marquee direction=up>向上 移动/marquee86、文本的滚动循环；87、文本的移动速度：scrollamount设置移动的速度88、学生实训及辅导；89、网页多媒体的基本 语法：<embed src=url loop二true|false”90、隐藏面板的设置；91、对齐方式：align=top、bottom、center> baseline、 left> right> texttop> middle> absmiddle> absbottom92、学生实训及辅导；93、移动对象应用实例讲解；94、多媒体对象应用实例讲解；95、学生实训及辅导；十九、课外作业第H章上机实践。二十、课堂小结本次课主要内容：1、网页框架；2、对象移动属性；3、多媒体对象应用。后记HTML+CSS网页设计及布局课程教案授课教师：授课班级：地点：周课时：5课时章节内容CSS基础知识CSS字体设置教学目标9）使学生熟练掌握CSS常用样式的创建方法；1。）使学生掌握CSS常用样式各种属性的含义和设置方法。重点难点9）掌握各种CSS常用样式的基本使用方法；10）熟记各种CSS常用样式的含义。教学方法课堂讲授、案例讲解及指导教学环境计算机机房教学过程及内容提要时间分配备注教 学 过 程 设 计二H一、引入9、回顾上周所学内容：上周主要介绍了 HTML网页框架和 多媒体对象标记，重点介绍了 HTML对象移动属性设置 方法；10、 提出问题：什么是CSS? CSS有什么用？如何创建 和使用CSS?约10分钟二十二、告知学生课堂任务本次课所学习的主要内容是CSS基础知识和CSS字体 样式设置方法和技巧。二十三、逐步演示讲解分析教学内容96CSS相关基础知识；97、CSS文件链接方式：(1)内联定义：内联定义即是在对象的标记内，使用 对象的Style属性定义适用其的样式表属性。链入内部 CSS： <style type二text/css/*这里写 CSS 内容*/style(2)链接外部CSS：<linktype="text/cssrel=stylesheet”src二style. css>98、CSS在浏览器兼容性：学生理 约40解 分钟学生实 约40践分钟约60分钟现在浏览器市场的主流浏览器主要是Internet Explorer (简称 IE)和 Mozilla Firefox (简称 FF), 网页中的CSS因两个浏览器支持不同，所以对同一代 码会显示不同的效果，则为了达到网页的风格，有时 要注意哪个浏览器要写的css属性支持如何。如果某 一属性只有一个浏览器支持，则另一浏览器对这属性 代码就不起作用。99、CSS选择符：css选择符就是css样式的名字，选择符的命名规则可 以使用英文字母的大写及小写、数字、连字号、下划 线、冒号、句号，css选择符只能以字母开头，选择符 在CSS中可分成多种，在本小节中只介绍常用的CSS 选择符：HTML标签选择符、ID选择符和CLASS （类选 择符）选择符。100、 CSS伪类和伪元素：伪类：伪类选择符是基于一组 预定义性质的选择符，HTML元素可以占有这些预定义 性质。实际上这些性质及class属性的功能是相同的， 因此在CSS术语中，它们被称作伪类。在对应这些伪 类的标记中，不存在真正的class属性，相反，它们 代表应用到这些元素的某些方面，或者是相对于该元 素的浏览器用户界面的状态。101、 CSS常用单位：em： （em,元素的字体的高度）。ex： （x-height,字母 x 的高度）。px：（像素，相对于屏幕的分辨率）。绝对长度单位：in：（英寸,1英寸二2. 54厘米）。cm：（厘米，1厘米=10毫米）。mm：（毫米，1米=1000毫米）。约50 分钟约40 分钟 约80 分钟学生实践总结约35分钟学生熟记约20分钟二、告知学生课堂任务本次课所学习的主要内容是HTML相关基础知识 和Dreamweaver软件基础操作；三、逐步演示讲解分析教学内容1、网站和网页的区别：(1)网页是Internet基本元 素；(2)网站由网页组成；2、静态网页和动态网页：静态网页：纯粹HTML语言格式的网页通常被称为 静态网页，静态网页的后缀名通常 为.htm、. html> .shtml> . xmlo动态网页：许多人认为网页会动就是动态网页， 这是个错误的观点，在静态的网页中也可以含有 动态的图片，这仅仅是视觉上的动态罢了。真正 的动态网页是指实际上并不是独立存在于服务器 上的网页文件，只有当用户请求时服务器才返回 一个完整的网页。也就是说，它是返回到了客户 端上的网页。例如网页文件是以ASP、PHP、JSP、 ASPX为结尾就是动态的网页了。静态网页的特点：(1)内容相对稳定，容易被搜索引擎检索到；(2)没有数据库支持，在网站制作和维护方面工 作量大；pt：（点，1 点二 1/72 英寸）。pc：（帕，1 帕二 12 点）。102、 上周课外作业点评；103、 学生实训及辅导；104、 字体和字体颜色：font : font-style font-variantfont-weightfont-sizeline-heightfont-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、 行距：1 ine-height :#；108>字体类型：Font-family:fontname；109、 行距：1 ine-he ight :#；110、 间距及间隔：word-spacing： normal长度单位、 letter-spacing:normal length111、 字体应用实例讲解；112、 学生实训及辅导；二十四、课外作业第16章上机实践。二十五、课堂小结本次课主要内容：1、CSS基础知识;2、CSS文件链接方式；3、CSS字体设置。后记HTML+CSS网页设计及布局课程教案授课教师：授课班级：地点：周课时：5课时章节内容CSS文本设置CSS背景设置对象尺寸设置教学目标11）使学生熟练掌握css常用样式的创建方法；12）使学生掌握CSS常用样式各种属性的含义和设置方法。重点难点11）掌握各种css常用样式的基本使用方法；12）熟记各种CSS常用样式的含义。教学方法课堂讲授、案例讲解及指导教学环境计算机机房教学过程及内容提要时间分配备注教 学 过 程 设 计二十六、引入11、 回顾上周所学内容：上周主要介绍了 CSS基础 知识和CSS文件链接方式，重点介绍了 CSS字体 样式设置方法；12、 提出问题：如何用CSS进行文本和背景设置？ 如何控制网页中的对象尺寸？二十七、告知学生课堂任务本次课所学习的主要内容是css文本设置和背景 设置、对象尺寸设置的方法和技巧。二十八、逐步演示讲解分析教学内容113> 字母大小写转换:text-transform： capitalize uppercase lowercase nonecapitalize ：使每个词的首字母大写uppercase：使每个字的所有字母大写 lowercase：使每个字的所有字母小写 none：字母以正常形式显示114、 文字修饰： text-decoration ： underline overlineline-throunghblinknoneunderline：给文字加下划线overline：给文字加上划线line-through：给文字加删除线约10 分钟约30 分钟约30 分钟学生理解blink：文字在闪烁 none：缺省使用无115、 文本空格处理方式：white-space : normal pre nowrap116、 文本水平和垂直对齐：(1)垂直对齐：baseline：使元素和上级元素的基线对齐 sub：使对象以下标的形式显示Super：使对象以上标的形式显示top：使元素和行中最高的元素向上对齐 text-top：使元素和上级元素的字体向上对齐 middle：纵向对齐元素基线加上上级元素的x-高 度字母" X”的高度的的一半的中点 bottom：使元素和行中最高的元素向下对齐 text-bottom：使元素和上级元素的字体向下对齐(2)水平对齐：left：浏览器默认的对齐方式，左对齐Right：右对齐center：居中justify：左右对齐117、 文本缩进：text-indent：长度百分比118、 学生实训及辅导；119、 上周课外作业点评；约60 分钟 约40 分钟 约30 分钟约40 分钟约30 分钟约50 分钟学生实践学生实践学生实践总结120、设置背景颜色：background-color :transparent color、设置图像的滚动：background-attachment :scroll fixed122、 设置背景图像的位置：background-position :length1engthbackground-po s i t i on:position position123、 铺排背景图像：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章上机实践。三十、课堂小结本次课主要内容：1、CSS文本设置；2、CSS背景设置；3、对象尺寸设置。HTML+CSS网页设计及布局课程教案授课教师：授课班级：地点：周课时：5课时章节内容设置外补丁和内补丁对象边框和定位设置教学目标13）使学生熟练掌握CSS常用样式的创建方法；14）使学生掌握CSS常用样式各种属性的含义和设置方法。重点难点13）掌握各种CSS常用样式的基本使用方法；14）熟记各种CSS常用样式的含义。教学方法课堂讲授、案例讲解及指导教学环境计算机机房教学过程及内容提要时间分配备注教 学 过 程三十一、引入13、回顾上周所学内容：上周主要介绍了 CSS文本设置和背景设置，重点介绍了对象尺寸设置的方约10分钟设法和技巧；计14、 提出问题：什么是外补丁和内补丁？外补丁和内补丁如何创建？如何给网页中的对象进行定学生理位？三十二告知学生课堂任务本次课所学习的主要内容是css外补丁和内补约20 分钟解丁、对象边框和定位设置的方法和技巧。三十三、逐步演示讲解分析教学内容129、 外补丁:表示具体的精确宽度。margin : autolength约10 分钟学生实践130、 外补丁的外延设置：顶端外补丁用法：约30margin-top:auto length 右端夕卜补丁 用法：分钟margin-right:auto length 底端外补丁用法：约30学生实margin-bottom:auto length 左端夕卜补丁用法：分钟践margin-left:auto length约30131、 外补丁实例；分钟132、 上周课外作业点评；133、学生实训及辅导；134、 层及层的距离效果；约30学生实135、 对层布局；分钟践136、设置层的尺寸；约30137、 设置层漂移；分钟138、 设置层及层之间的间隔；：139、 学生实训及辅导；140、 内补丁：表示对象中的内部填充距离。padding : length、顶端内补丁用法：padding-top: length;142、 右端内补丁用法：padding-right : length143、 底端内补丁用法：padding-bottom : length144、 左端内补丁用法：padding-left : length145、内补丁综合实例；146、 学生实训及辅导；147、 边框的基本语法：border : border-widthborder-style border-color148、 边框颜色:border-color : color149、 边框样式表示：border-style : none dotteddashed solid double groove ridge inset outset参数none：表示无边框，默认值。 参数dotted：表示点线，由一点点组成的边框。 参数dashed：表示虚线，边框由虚线表示。参数 solid：表示实线，边框由实线表示，常用的参数。 参数double：双线边框。参数groove：立体形式 的凹槽。参数ridge：立体形式的凸槽。参数 insert：立体形式的凹边。参数outset：立体形约15 分钟 约30 分钟 约10 分钟约40 分钟约15学生实践学生实践总结分钟约30分钟式的凸边。150、 边框宽度表示：border-width : medium | thin| thick | length参数medium：默认值，表示默 认宽度。参数thin：表示小于默认宽度。参数 thick：表示大于默认宽度。参数length：直接表 示边框宽度的值。151、 学生实训及辅导；152、 定位 的基本语法：position : static absolute | relative153、 对象层叠顺序：z-index : auto | number154、 相对定位实例；155、 学生实训及辅导；三十四、课外作业第22章上机实践。三十五、课堂小结本次课主要内容：1、CSS设置外补丁和内补丁；2、CSS对象边框设置；3、CSS定位设置。后记HTML+CSS网页设计及布局课程教案 授课教师：授课班级：地点：周课时：5课时章节内容CSS使用列表的方法CSS表格控制方法教学目标15）使学生熟练掌握CSS常用样式的创建方法；16）使学生掌握CSS常用样式各种属性的含义和设置方法。重点难点15）掌握各种CSS常用样式的基本使用方法；16）熟记各种CSS常用样式的含义。教学方法课堂讲授、案例讲解及指导教学环境计算机机房教学过程及内容提要时间分配备注教 学 过 程 设 计三十六、引入15、 回顾上周所学内容：上周主要介绍了 CSS外补丁和内补丁，重点介绍了对象边框和定位设置的 方法和技巧；16、 提出问题：如何使用CSS创建CSS列表？如何 使用CSS控制表格？三十七、告知学生课堂任务本次课所学习的主要内容是css列表和表格设置 的方法和技巧。约10 分钟约30 分钟学生理解(3)交互性差，在功能方面有很大的限制。动态网页的特点：(1)以数据库技术为基础，可大大降低网站维护的工作量；(2)可实现更多的功能，如用户注册、新闻发布、在线留言等；(3)不利于使用搜索引擎进行网站推广。3、常见网页类型：形象页、主页、栏目页、内页、新闻详细页等；4、网页设计原则：(1)了解客户需求(2)遵循Web标准(3)运用形式美法则5、网页设计流程：(1)手绘效果图：确定网页主题内容和风格(2)设计效果图：搜集、整合设计所需素材(3)版面编辑：网页的制作及实现(4)网页美化：动画设计，网页测试和发布6、网页设计的主要软件：(1) Photoshop(2) Dweamveawer(3) Flash约30 分钟 约20 分钟约20 分钟约20 分钟约30 分钟 约20 分钟学生实践学生实践学生实践学生实 践三十八、逐步演示讲解分析教学内容156、 列表 的基本 语法：list-style :list-style-imagelist-style-positionlist-style-type 参数 list-style-image：用来 设置列表的图像。参数list-style-position：用 来设置列表项标记如何根据文本排列。参数 list-style-type：用来设置列表项所使用的预设记。157、 设置列表中的图像：list-style-image : none url （url）参数none：表示属性不设置列表图像，是默认值。参数url：使用绝对或相对地址指定背 景图像，这样就可以显示自定义的图像了，要注 意图像大小，如太大会影响列表的美观（图像是 按图像原始大小显示的）。图像链接地址要用括号 括起来，然后用引号引起（也可以不用引号），注 意括号前面有关键字urlo158、 学生实训及辅导；159、 上周课外作业点评；160、 列表中的文本排列：list-style-position :outside inside 参数 outside：默认值。列表 项目标记放置在文本以外，且环绕文本不根据标 记对齐。参数inside：列表项目标记放置在文本约40 分钟 约30 分钟 约30 分钟约40 分钟 约30学生实践学生实践学生实 践以内，且环绕文本根据标记对齐。161、 列表的预设标记：list-style-type : disccircle | square | decimal | lower-roman upper-roman | lower-alpha | upper-alpha none参数disc：默认值。表示实心圆。参数circle： 表示空心圆。参数square：表示实心方块。参 数decimal：表示阿拉伯数字。参数lower-roman： 表示小写罗马数字。参数upper-roman：表示大写 罗马数字。参数lower-alpha：表示小写英文字母。 参数upper-alpha：表示大写英文字母。参数none： 表示不使用项目符号。162、 学生实训及辅导；163、 控制表格的基本语法：border-collapse : separate | collapse 属性 border-collapse 的第 一个值separate,是本属性的默认值，表示边框 独立。而后面的值为collapse,表示相邻边被合 并，前者表示有边框，后者表示合并了边框，很 容易区分其功能。164、 设置表格边框独立或合并：本属性应用在表格分钟学生实约30分钟约40总结 分钟约40分钟是否显示边框，如果要显示其边框，就设置 separate；否贝！J,设置 collapseborder-collapse : separate | collapse165、 学生实训及辅导；166、 设置表格布局的算法：要设置好表格的布局算法，得用到布局算法的属性，表格布局算法用 table-layout表示，其后接auto值，表示默认， 或者可以接fixed ,完整语法如下表示： table-layout : auto | fixed167、 用CSS控制表格实例；168、 学生实训及辅导；三十九、课外作业第25章上机实践。四十、课堂小结本次课主要内容：1、CSS使用列表的方法；2、CSS表格控制方法；3、设置表格布局的算法。约30 分钟 约20 分钟约20 分钟 约40 分钟学生实践总结(4) Firworks7、HTML 基础知识：(1) HTML 概念：Hyper Text Markup Language超文本标识语言；(2) HTML文档的编写 方法：用记事本手工直接编写、使用可视化HTML 编辑器Dreamweaver>由Web服务器动态生成；(3) 网页文件命名：首页文件名默认为：index, htm或 index, html ； ( 4 ) HTML 文件结构：<HTML> <HEADXtitle></title></HEADXBODY> HTML 文 件的正文/BODYX/HTML(5)用编辑器手工编写 第一张网页；8、学生实训及辅导；9、Dreamweaver软件界面介绍：(1)软件面板组成及基本操作方法(2)软件首选参数设置10、Dreamweaver 站点仓U建：站点-> 新建站点-设置站点名称-设置站点默认 图像文件夹。11、学生实训操作：Dreamweaver站点创建及设置；12、Dreamweaver创建第一个网页：(1)名称：index, html(2)设置标题、输入文本、输入特殊字符(3)页面属性设置13、14、15、16、(4)预览网页学生实训及辅导；HTML常用标记：(1)标题标记：h#>主题文字</h#> (2)段落标记：<p>这里表示段落</p(3)换行 及注释：<br>. <!这里放注释一 (4)粗体及 斜体：b粗体</b、<i斜体</i(5)删除线及 下划线：下删除线</s>、<u下划线/u> (6)上 标及下标：sup上标/supsub下标</sub> 学生实训及辅导；字体标记：(1)字体大小：<font size= 1字体 大小/font(2)字体颜色：font color=>字 体颜色/font(3)设置标题字体：h#主题文 字</h#> (4)物理字体:<B>-</B>,将字符设置 成粗体。<1>-</1>,将字符设置成斜体。<U>-</U>,给字符增加下划线。<S>-</S>,给 字符增加删除线。<口>/口>,将字符设置成打 字机字体。<SUP>-</SUP>,将字符设置成上标字 体。<SUB>-</SUB>,将字符设置成下标字体。(5) 逻辑字体：<EM>-</EM>强调文字。 <STRONG>-</STRONG> 字 体 加 重。 <CODE>-</CODE>显示编程代码。<SAMP>- -</SAMP>显示示例文字。<KBD>-</KBD>显示键盘按键文字。SMALL/SMALL缩小文字。BIG/BIG放大文字。17、字体标记实例讲解；18、学生实训及辅导；四、课外作业第3章上机实践。五、课堂小结本次课主要内容：1、网页设计基础知识；2、Dreamweaver基本使用方法；3、HTML基础知识及常用标记；后记HTML+CSS网页设计及布局课程教案授课教师：授课班级：地点：周课时：5课时章节内容文字布局插入图像超级链接教学3）使学生熟练掌握HTML常用标记的基本使用方法；目标4）使学生掌握HTML常用标记各种属性的含义和设置方法。重点3）掌握各种HTML常用标记的基本使用方法；难点4）熟记各种HTML常用标记的含义。教学方法课堂讲授、案例讲解及指导教学环境计算机机房教学过程及内容提要时间分配备注教 学 过 程 设 计六、引入3、回顾上周所学内容：上周主要介绍了网页设计和HTML相关基础知识及Dreamweaver软件基础操作， 重点介绍了 HTML基础知识及常用标记；4、提出问题：网页中文字如何布局？如何在网页中插 入图像？如何运用超级链接？七、告知学生课堂任务本次课所学习的主要内容是HTML文字布局和插 入图像、超级链接的标记应用。八、逐步演示讲解分析教学内容19、换行控制：文字一字>、文字二<br />20、不换行控制:<nobr></nobr>21、文字对齐：align=#、center居中/center22、设置段落：5段落一/p、3段落二/p23、学生实训及辅导；约10 分钟约30 分钟约30 分钟 约40 分钟 约20学生理解24、上周课外作业点评；25、无序列表：<U1><li表项一</li><li> 表项</li></ul>26、有序列表：<ol> Qi表项一</li><li> 表项</li></ol>27、欲格式化文本：pre文字/pre>、<xmp>文本 </xmp>28、计算机输出格式：code代码样式小型固定宽度 字体显示的文本/code>kbd>代码样式固定宽度 字体渲染/kbdXtt代码样式固定宽度字体渲染 文本/ttXvar>代码样式斜体字渲染</var>29、学生实训及辅导；30、在网页中插入图像:<img src=在n. jpg>31、图像无法显示时的提示信息：img src=cn. jpg alt 二风景32、控制图像的大小：<img src=cn. jpg alt二风景 width=400px height=300px>33、设置边框：<img src=cn. jpg alt二风景 border二0px>34、图像的链接：<a分钟约20 分