网页设计与制作教案

网页设计与制作课程教案-1-[章节名称]：网页设计入门基础[课堂类型]：理论■实训□练习■测试□[学时安排]：2课时[目的要求]1.了解网络的基本知识，网页设计的基础知识，网页的分类，动态网页的原理及技术2.了解网页的基本构成及最简单的html代码3.了解网页设计的流程[重点]了解网页设计的流程，掌握最基本的网页的构成及最简单的网页html代码[难点]掌握最基本的网页的构成及最简单的网页html代码[教法学法]1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。2.练习采用学生自主安排，教师给与个别辅导的方式进行。[参考资料]《DreamweaverCS5网页设计与制作——DIV+CSS版》吴丰,丁欣主编清华大学出版社《动态网页制作教程》（第二版）刘梅彦徐英慧编著清华大学出版社[教学过程]环节一：结合PPT课件的内容，讲解网络和网页的基本知识。了解网页的分类，网页运行的原理，介绍网页设计的工具，动态网页的技术。环节二：介绍网页的构成，并对一个网站进行实例分析说明。编写最简单的html代码。环节三：了解网页设计的流程主要有以下几个步骤：一.网站规划二.素材资源收集网页设计与制作课程教案-2-三.选择开发工具四.站点建立与规划五.分模块进行网页设计六.网页源代码测试与特效添加七.申请域名与空间八.网页源代码上传九.定期的维护环节四：对本节课的内容进行复习，让学生练习html的代码。并进行疑难解答网页设计与制作课程教案-3-[章节名称]：html基础与应用1[课堂类型]：理论■实训□练习■测试□[学时安排]：2课时[目的要求]了解html语言的基础知识，结构，掌握html语言设置网页的背景音乐，背景图片，字体的方法。[重点]Html语言设置网页的背景音乐，图片，字体[难点]Html语言设置网页的方法[教法学法]1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。2.练习采用学生自主安排，教师给与个别辅导的方式进行。[参考资料]《DreamweaverCS5网页设计与制作——DIV+CSS版》吴丰,丁欣主编清华大学出版社《动态网页制作教程》（第二版）刘梅彦徐英慧编著清华大学出版社[教学过程]环节一：复习网页设计的基础知识，介绍如何利用Dreamweaver开发工具，记事本编辑网页的源程序，介绍网页站点的创建及注意事项。环节二：讲解html语言的结构，特点，设置网页页面的背景音乐，图片，字体1.设置背景颜色bodybgcolor=red2.背景图片bodybackgroud＝bg9.gif3.背景音乐背景音乐和上边介绍的两个有很大的不同，它的代码是放在页面的头部head/head里，bgsoundsrc=background_sound.midloop=-1网页设计与制作课程教案-4-4.标题字体h#文字/h##=1，2，3，4，5，6比如：h1今天是星期三，今天天气晴，温度15°-23°/h15.字体的大小，用于一般文字。fontsize=#文字/font#=1,2,3,4,5,6,7or+#,-#例子：fontsize=7今天天气真好！/font6.字体颜色指定颜色fontcolor=#文字/font#=#rrggbb16进制数码，或者是下列预定义色彩：Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,Fuchsia,White,Green,Purple,Silver,Yellow,Aqua7.客户端字体(FontFace)fontface=#,#,...,#.../font#=客户端可获得的字体，什么是客户端，通俗的讲，就是你的电脑，face=#就是从你的电脑获得的字体环节三：完成课堂讲解的练习例题，并疑难解答环节四：复习本次课内容，步骤课后作业。网页设计与制作课程教案-5-[章节名称]：html基础与应用2[课堂类型]：理论■实训□练习■测试□[学时安排]：2课时[目的要求]了解html语言的跑马灯效果标签的运用，序列卷标标签的运用[重点]Html语言的跑马灯效果标签及序列卷标的应用[难点]Html语言的跑马灯效果标签及序列卷标的应用[教法学法]1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。2.练习采用学生自主安排，教师给与个别辅导的方式进行。[参考资料]《DreamweaverCS5网页设计与制作——DIV+CSS版》吴丰,丁欣主编清华大学出版社《动态网页制作教程》（第二版）刘梅彦徐英慧编著清华大学出版社[教学过程]环节一：复习HTML语言中设置背景颜色，背景图片，音乐等标签的知识，介绍HTML语言的编写规范要求。环节二：讲解html语言的跑马灯效果标记，序列卷标标记的使用1.跑马灯效果该标记能实现文字或图片的滚动效果。MARQUEEdirection=upwidth=100height=100bgcolor=#ccffccscrollamount=2滚动文字/MARQUEE主要参数：①direction:控制移动方向,可取left,right,up,down四个值②behavior:移动方式,可取scroll(循环移动),slide(只走一圈)，alternate(来回移动)网页设计与制作课程教案-6-③loop:循环次数,不输入表示无限次循环④scrollamount:移动快慢,数值越大越快⑤scrolldelay:每移动一步之后的延时,单位是毫秒⑥height,width:移动区域的高和宽,单位像素⑦bgcolor:移动区域的背景色2.序列卷标该类型标记类似于Word软件中的项目符号及编号，主要分为两种（1）无序标记无序序列就是序列各条目间无顺序关系ULLI姓名：吴小娟/LILI生日：1993/6/16/LILI星座：双子座/LI/UL运行的效果如下：姓名：吴小娟生日：1993/6/16星座：双子座其中UL为无序序列标记，每增加一个条目，就要添加一个LI还可以通过设置ULtype=”属性”来改变条目前面的图标，属性可以是Disk（实心圆）,Square（方形）,Circle（空心圆）（2）有序标记无序序列就是序列各条目间有顺序关系OLLI姓名：吴弘凯LI生日：1993/6/16LI星座：双子座/OL运行的效果如下：1.姓名：吴小娟网页设计与制作课程教案-7-2.生日：1993/6/163.星座：双子座其中OL为无序序列标记，每增加一个条目，就要添加一个LI还可以通过设置OLtype=”属性”来改变条目前面的编号，属性可以设置为1（数字）、A（大写英文字母）、a（小写英文字母）、I（大写罗马字母）、i（小写罗马字母）等五种。环节三：完成课堂讲解的练习例题，并疑难解答环节四：复习本次课内容，步骤课后作业。网页设计与制作课程教案-8-[章节名称]：html基础及应用3[课堂类型]：理论■实训□练习■测试□[学时安排]：2课时[目的要求]了解Html语言的控制表格及其表项，框架[重点]Html语言的表格及其表项的标记使用，超链接标记，框架标记的使用[难点]掌握利用框架标记来设计页面[教法学法]1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。2.练习采用学生自主安排，教师给与个别辅导的方式进行。[参考资料]《DreamweaverCS5网页设计与制作——DIV+CSS版》吴丰,丁欣主编清华大学出版社《动态网页制作教程》（第二版）刘梅彦徐英慧编著清华大学出版社[教学过程]环节一：复习HTML语言中跑马灯效果标记，序列卷标的使用方法。环节二：讲解html语言的表格标记，超链接标记，框架标记的使用1.表格标记table.../table-定义表格tr.../tr-定义表行th.../th-定义表头td.../td-定义表元2.超链接标记超链接采用a…/a标记来实现，链接文件的路径有以下两种：ahref=/c|/绝对路径方式ahref=text1.htm相对路径方式网页设计与制作课程教案-9-3.框架结构标记HTMLHEADTITLE框窗实作/TITLE/HEADFRAMESETCOLS=120,*FRAMESRC=a.htmNAME=1FRAMESRC=b.htmNAME=2/FRAMESET/HTML在FRAMESET中，COLS表示左右分，ROWS表示上下分。环节三：完成课堂讲解的练习例题，并疑难解答环节四：复习本次课内容，步骤课后作业。[章节名称]：运用表格设计页面布局[课堂类型]：理论■实训□练习■测试□[学时安排]：2课时[目的要求]了解网页中表格布局模式设计的方法[重点]了解网页中表格布局模式设计的方法[难点]了解网页中表格布局模式设计的方法[教法学法]1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。2.练习采用学生自主安排，教师给与个别辅导的方式进行。[参考资料]《DreamweaverCS5网页设计与制作——DIV+CSS版》吴丰,丁欣主编网页设计与制作课程教案-10-清华大学出版社《动态网页制作教程》（第二版）刘梅彦徐英慧编著清华大学出版社[教学过程]环节一：复习HTML语言中表格标记，超链接，框架的相关知识，讲解上次课布置的作业。环节二：以一个蓝色空间网页的设计为例，讲解采用表格布局模式设计网页的方法。设计规范要求：多采用表格嵌套方式设计页面，少采用表格拆分的设计方法环节三：完成课堂讲解的练习例题，并疑难解答环节四：复习本次课内容，步骤课后作业。[章节名称]：运用框架结构设计页面布局[课堂类型]：理论■实训□练习■测试□[学时安排]：2课时[目的要求]了解网页中框架布局模式设计的方法[重点]网页设计与制作课程教案-11-掌握网页中框架布局模式设计的方法[难点]掌握网页中框架布局模式设计的方法[教法学法]1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。2.练习采用学生自主安排，教师给与个别辅导的方式进行。[参考资料]《DreamweaverCS5网页设计与制作——DIV+CSS版》吴丰,丁欣主编清华大学出版社《动态网页制作教程》（第二版）刘梅彦徐英慧编著清华大学出版社[教学过程]环节一：复习采用表格工具设计网页的方法，讲解上次课布置的作业。环节二：介绍框架结构在网页设计中的应用，以一个诗人作品简介网页的设计为例，讲解采用框架布局模式设计网页的方法。设计技巧：框架中每个页面要单独保存命名，需要在超链接属性中设置显示在主框架：target:blank。环节三：完成课堂讲解的练习例题，并疑难解答环节四：复习本次课内容，步骤课后作业。网页设计与制作课程教案-12-[章节名称]：网页CSS样式基础[课堂类型]：理论■实训□练习■测试□[学时安排]：2课时[目的要求]掌握CSS样式的建立及使用的方法[重点]掌握CSS样式的创建及使用的方法[难点]掌握CSS样式的创建及使用的方法[教法学法]1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。2.练习采用学生自主安排，教师给与个别辅导的方式进行。[参考资料]《DreamweaverCS5网页设计与制作——DIV+CSS版》吴丰,丁欣主编清华大学出版社《动态网页制作教程》（第二版）刘梅彦徐英慧编著清华大学出版社[教学过程]环节一：复习采用表格布局模式设计网页的方法，讲解上次课布置的作业。环节二：讲解CSS样式表的基础知识，通过实例说明其应用的方法。1.CSS基础知识CSS是用于控制网页样式的一种标记语言，它以HTML为基础，扩展了HTML的功能，提供了丰富的格式化功能，使网页设计者能够以更有效的方式设置网页的外观。通过CSS，可以实现网页的样式信息与网页内容分离。2.CSS样式的建立在Dreamweaver软件中的CSS面板中新建CSS样式网页设计与制作课程教案-13-3.CSS