网页设计与制作教案admin•2025-09-17 10:59:32•小程序•阅读22网页设计与制作教案2023年7月14日发(作者：)[章节名称]：网页设计入门基础 [课堂类型]：理论■ 实训□ 练习■ 测试□ [学时安排]：2课时 [目的要求] 1. 了解网络的基本知识，网页设计的基础知识，网页的分类，动态网页的原理及技术 2. 了解网页的基本构成及最简单的html代码 3. 了解网页设计的流程 [重 点] 了解网页设计的流程，掌握最基本的网页的构成及最简单的网页html代码 [难 点] ； 掌握最基本的网页的构成及最简单的网页html代码 [教法学法] 1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。 2. 练习采用学生自主安排，教师给与个别辅导的方式进行。 [参考资料] 《Dreamweaver CS5网页设计与制作——DIV+CSS版》 吴丰,丁欣 主编 清华大学出版社 《动态网页制作教程》（第二版）刘梅彦 徐英慧 编著 清华大学出版社 [教学过程] 环节一：结合PPT课件的内容，讲解网络和网页的基本知识。了解网页的分类，网页运行的原理，介绍网页设计的工具，动态网页的技术。 ^ 环节二：介绍网页的构成，并对一个网站进行实例分析说明。编写最简单的html代码。 环节三：了解网页设计的流程 主要有以下几个步骤： 一. 网站规划 二. 素材资源收集 三. 选择开发工具 四. 站点建立与规划 五. 分模块进行网页设计 六. 网页源代码测试与特效添加 七. 申请域名与空间 . 八. 网页源代码上传 九. 定期的维护 环节四： 对本节课的内容进行复习，让学生练习html的代码。并进行疑难解答 " … [章节名称]：html基础与应用1 [课堂类型]：理论■ 实训□ 练习■ 测试□ [学时安排]：2课时 [目的要求] 了解html语言的基础知识，结构，掌握html语言设置网页的背景音乐，背景图片，字体的方法。 [重 点] Html语言设置网页的背景音乐，图片，字体 [难 点] Html语言设置网页的方法 [教法学法] 1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。 2. 练习采用学生自主安排，教师给与个别辅导的方式进行。 [参考资料] 《Dreamweaver CS5网页设计与制作——DIV+CSS版》 吴丰,丁欣 主编 清华大学出版社 ： 《动态网页制作教程》（第二版）刘梅彦 徐英慧 编著 清华大学出版社 [教学过程] 环节一：复习网页设计的基础知识，介绍如何利用Dreamweaver开发工具，记事本编辑网页的源程序，介绍网页站点的创建及注意事项。 环节二：讲解html语言的结构，特点，设置网页页面的背景音乐，图片，字体 1. 设置背景颜色 2. 背景图片 3. 背景音乐 背景音乐和上边介绍的两个有很大的不同，它的代码是放在页面的头部 里， * 4. 标题字体 文字 # =1，2，3，4，5，6 比如：今天是星期三，今天天气晴，温度15°-23° 5.字体的大小，用于一般文字。 文字 #=1, 2, 3, 4, 5, 6, 7 or +#, -# 例子：今天天气真好！ 6. 字体颜色 指定颜色 文字 # ="#rrggbb" 16 进制数码，或者是下列预定义色彩： Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,Fuchsia, White, Green, Purple, Silver, Yellow, Aqua 7. 客户端字体(Font Face) ... #=客户端可获得的字体， 什么是客户端，通俗的讲，就是你的电脑，face="#"就是从你的电脑 获得的字体 环节三：完成课堂讲解的练习例题，并疑难解答 环节四：复习本次课内容，步骤课后作业。 # ` [章节名称]：html基础与应用2 [课堂类型]：理论■ 实训□ 练习■ 测试□ [学时安排]：2课时 [目的要求] 了解html语言的跑马灯效果标签的运用，序列卷标标签的运用 [重 点] Html语言的跑马灯效果标签及序列卷标的应用 … [难 点] Html语言的跑马灯效果标签及序列卷标的应用 [教法学法] 1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。 2. 练习采用学生自主安排，教师给与个别辅导的方式进行。 [参考资料] 《Dreamweaver CS5网页设计与制作——DIV+CSS版》 吴丰,丁欣 主编 清华大学出版社 《动态网页制作教程》（第二版）刘梅彦 徐英慧 编著 清华大学出版社 [教学过程] ) 环节一：复习HTML语言中设置背景颜色，背景图片，音乐等标签的知识，介绍HTML语言的编写规范要求。 环节二：讲解html语言的跑马灯效果标记，序列卷标标记的使用 1.跑马灯效果 该标记能实现文字或图片的滚动效果。 bgcolor="#ccffcc" scrollamount="2">滚动文字 主要参数： ① direction: 控制移动方向,可取"left", "right", "up", "down"四个值 ② behavior: 移动方式,可取"scroll"(循环移动), "slide"(只走一圈)，"alternate"(来回移动) ③ loop: 循环次数,不输入表示无限次循环 # ④ scrollamount: 移动快慢,数值越大越快 ⑤ scrolldelay: 每移动一步之后的延时,单位是毫秒 ⑥ height,width: 移动区域的高和宽,单位像素 ⑦ bgcolor: 移动区域的背景色 2.序列卷标 该类型标记类似于Word软件中的项目符号及编号，主要分为两种 （1）无序标记 无序序列就是序列各条目间无顺序关系 姓名：吴小娟 生日：1993/6/16 星座：双子座 运行的效果如下： 】 姓名：吴小娟 生日：1993/6/16 星座：双子座 其中为无序序列标记，每增加一个条目，就要添加一个 还可以通过设置来改变条目前面的图标，属性可以是Disk（实心圆）,Square（方形）,Circle（空心圆） （2）有序标记 无序序列就是序列各条目间有顺序关系 姓名：吴弘凯 生日：1993/6/16 星座：双子座 运行的效果如下： 1. 姓名：吴小娟 2. | 3. 生日：1993/6/16 4. 星座：双子座 其中为无序序列标记，每增加一个条目，就要添加一个 还可以通过设置来改变条目前面的编号，属性可以设置为1（数字）、A（大写英文字母）、a（小写英文字母）、I（大写罗马字母）、i（小写罗马字母）等五种。 环节三：完成课堂讲解的练习例题，并疑难解答 环节四：复习本次课内容，步骤课后作业。 — , [章节名称]：html基础及应用3 [课堂类型]：理论■ 实训□ 练习■ 测试□ ( [学时安排]：2课时 [目的要求] 了解Html语言的控制表格及其表项，框架 [重 点] Html语言的表格及其表项的标记使用，超链接标记，框架标记的使用[难 点] 掌握利用框架标记来设计页面 [教法学法] 1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。 2. 练习采用学生自主安排，教师给与个别辅导的方式进行。 — [参考资料] 《Dreamweaver CS5网页设计与制作——DIV+CSS版》 吴丰,丁欣 主编 清华大学出版社 《动态网页制作教程》（第二版）刘梅彦 徐英慧 编著 清华大学出版社 [教学过程] 环节一：复习HTML语言中跑马灯效果标记，序列卷标的使用方法。 环节二：讲解html语言的表格标记，超链接标记，框架标记的使用 1. 表格标记 ... - 定义表格 ...- 定义表行 ...- 定义表头 ...- 定义表元 2.超链接标记 超链接采用…标记来实现，链接文件的路径有以下两种： , 绝对路径方式 相对路径方式 3.框架结构标记 框窗实作 在中，COLS表示左右分，ROWS表示上下分。 环节三：完成课堂讲解的练习例题，并疑难解答 环节四：复习本次课内容，步骤课后作业。 ][章节名称]：运用表格设计页面布局 [课堂类型]：理论■ 实训□ 练习■ 测试□ [学时安排]：2课时 [目的要求] 了解网页中表格布局模式设计的方法 [重 点] 了解网页中表格布局模式设计的方法 [难 点] 了解网页中表格布局模式设计的方法 [教法学法] 《 1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。 2. 练习采用学生自主安排，教师给与个别辅导的方式进行。 [参考资料] 《Dreamweaver CS5网页设计与制作——DIV+CSS版》 吴丰,丁欣 主编 清华大学出版社 《动态网页制作教程》（第二版）刘梅彦 徐英慧 编著 清华大学出版社 [教学过程] 环节一：复习HTML语言中表格标记，超链接，框架的相关知识，讲解上次课布置的作业。 环节二：以一个蓝色空间网页的设计为例，讲解采用表格布局模式设计网页的方法。 、 设计规范要求：多采用表格嵌套方式设计页面，少采用表格拆分的设计方法环节三：完成课堂讲解的练习例题，并疑难解答 环节四：复习本次课内容，步骤课后作业。 [章节名称]：运用框架结构设计页面布局 [课堂类型]：理论■ 实训□ 练习■ 测试□ [学时安排]：2课时 [目的要求] 了解网页中框架布局模式设计的方法 [重 点] @ 掌握网页中框架布局模式设计的方法 [难 点] 掌握网页中框架布局模式设计的方法 [教法学法] 1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。 2. 练习采用学生自主安排，教师给与个别辅导的方式进行。 [参考资料] 《Dreamweaver CS5网页设计与制作——DIV+CSS版》 吴丰,丁欣 主编 清华大学出版社 《动态网页制作教程》（第二版）刘梅彦 徐英慧 编著 清华大学出版社 | [教学过程] 环节一：复习采用表格工具设计网页的方法，讲解上次课布置的作业。 环节二：介绍框架结构在网页设计中的应用，以一个诗人作品简介网页的设计为例，讲解采用框架布局模式设计网页的方法。 设计技巧：框架中每个页面要单独保存命名，需要在超链接属性中设置显示在主框架：target:blank。 环节三：完成课堂讲解的练习例题，并疑难解答 环节四：复习本次课内容，步骤课后作业。 [章节名称]：网页CSS样式基础 [课堂类型]：理论■ 实训□ 练习■ 测试□ [学时安排]：2课时 · [目的要求] 掌握CSS样式的建立及使用的方法 [重 点] 掌握CSS样式的创建及使用的方法 [难 点] 掌握CSS样式的创建及使用的方法 [教法学法] 1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。 2. 练习采用学生自主安排，教师给与个别辅导的方式进行。 [参考资料] （ 《Dreamweaver CS5网页设计与制作——DIV+CSS版》 吴丰,丁欣 主编 清华大学出版社 《动态网页制作教程》（第二版）刘梅彦 徐英慧 编著 清华大学出版社 [教学过程] 环节一：复习采用表格布局模式设计网页的方法，讲解上次课布置的作业。 环节二：讲解CSS样式表的基础知识，通过实例说明其应用的方法。 基础知识 CSS是用于控制网页样式的一种标记语言，它以HTML为基础，扩展了HTML的功能，提供了丰富的格式化功能，使网页设计者能够以更有效的方式设置网页的外观。 通过CSS，可以实现网页的样式信息与网页内容分离。 样式的建立 ! 在Dreamweaver软件中的CSS面板中新建CSS样式 样式的类型主要有四种： （1）类选择器：可用于任何标签，名字需要自定义，以“.”开头。 例子：通过CSS样式，设置字体大小与颜色。 （2）ID选择器：针对设置了ID属性的HTML标记，与类选择器类似，以“#”开头。 例子：通过CSS样式，设置指定ID的表格边框 （3）标签选择器：标签也称标记，CSS标签选择器就是针对Html标签设置CSS样式。例如，h2选择器就用于声明页面中所有标记的样式风格。 （4）复合内容选择器：同时影响两个或多个标签、类或 ID 的复合规则，请选择“复合内容（基于选择的内容）”选项并输入用于复合规则的选择器。 环节三：完成课堂讲解的练习例题，并疑难解答 》 环节四：复习本次课内容，步骤课后作业。 [章节名称]：网页CSS样式基础——菜单制作1 [课堂类型]：理论■ 实训□ 练习■ 测试□ [学时安排]：2课时 [目的要求] 掌握运用CSS样式设计网页菜单的方法 [重 点] 掌握运用CSS样式设计网页菜单的方法 [难 点] [ 掌握运用CSS样式设计网页菜单的方法 [教法学法] 1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。 2. 练习采用学生自主安排，教师给与个别辅导的方式进行。 [参考资料] 《Dreamweaver CS5网页设计与制作——DIV+CSS版》 吴丰,丁欣 主编 清华大学出版社 《动态网页制作教程》（第二版）刘梅彦 徐英慧 编著 清华大学出版社 [教学过程] 环节一：复习CSS样式表的基础知识，讲解上次课布置的作业。 ] 环节二：通过一个网页菜单的制作实例，介绍CSS的设置技巧。 1.通过设置a标签的css样式实现菜单的基本显示。 通过设置a标签选择器的宽度高度来实现。 2.通过设置鼠标经过的CSS样式，来实现鼠标移动到某个菜单的背景颜色变化 通过a:hover符合选择器来实现。 3.在不同的浏览器下运行这个网页，分析存在的问题。 环节三：完成课堂讲解的练习例题，并疑难解答 环节四：复习本次课内容，步骤课后作业。 .[章节名称]：网页CSS样式基础——菜单制作2 [课堂类型]：理论■ 实训□ 练习■ 测试□ [学时安排]：2课时 [目的要求] 掌握运用UL，LI标签及它们的CSS样式来设计网页菜单的方法 [重 点] 掌握运用UL，LI标签及它们的CSS样式来设计网页菜单的方法 [难 点] 掌握运用UL，LI标签及它们的CSS样式来设计网页菜单的方法 [教法学法] … 1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。 2. 练习采用学生自主安排，教师给与个别辅导的方式进行。 [参考资料] 《Dreamweaver CS5网页设计与制作——DIV+CSS版》 吴丰,丁欣 主编 清华大学出版社 《动态网页制作教程》（第二版）刘梅彦 徐英慧 编著 清华大学出版社 [教学过程] 环节一：复习上节课介绍的网页菜单的制作方法，讲解上次课布置的作业。 环节二：针对采用设置a标签CSS样式制作菜单的方法存在的问题，介绍采用UL，Li标签的CSS样式设计网页菜单的制作实例，介绍CSS的设置技巧。 网页菜单的设计步骤： 1.通过UL，LI标签创建网页菜单的基本内容。 首页导读 推荐版面 推荐文章 人气排名 新开讨论区 休闲娱乐 常见问题 , 2.通过设置UL，LI标签选择器的CSS样式实现网页菜单的基本显示效果。 #navigation li{ text-align:center; width:80px; height:32px; background:url repeat-x; float:left; } 3.通过设置a:hover复合内容选择器实现菜单的鼠标移动变换背景效果。 #navigation li a:hover{ ; color:#FFFFFF; background:url no-repeat; } 环节三：完成课堂讲解的练习例题，并疑难解答 环节四：复习本次课内容，步骤课后作业。 [章节名称]：网页CSS样式应用实例 [ [课堂类型]：理论■ 实训□ 练习■ 测试□ [学时安排]：2课时 [目的要求] 掌握CSS样式综合运用方法 [重 点] 掌握CSS样式综合运用方法 [难 点] 掌握CSS样式综合运用方法 [教法学法] 1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。[ 2. 练习采用学生自主安排，教师给与个别辅导的方式进行。 [参考资料] 《Dreamweaver CS5网页设计与制作——DIV+CSS版》 吴丰,丁欣 主编 清华大学出版社 《动态网页制作教程》（第二版）刘梅彦 徐英慧 编著 清华大学出版社 [教学过程] 环节一：复习采用UL，LI设计网页菜单的方法，讲解上次课布置的作业。 环节二：讲解CSS样式表的两个应用实例，通过实例说明其中CSS的设置技巧。 1.无边框输入表格案例 & 通过为表格单元格添加css样式，设置样式的边框属性为无边框来实现。 input{ width:100px; padding:1px 3px 1px 3px; margin:0px; border:none; /* 输入框不要边框 */ font-family:Arial; } 2.鼠标经过行变色效果。 ` 这个效果需要结合Javascript代码来实现。 环节三：完成课堂讲解的练习例题，并疑难解答 环节四：复习本次课内容，步骤课后作业。 [章节名称]：DIV+CSS设计实例——花店页面设计上 [课堂类型]：理论■ 实训□ 练习■ 测试□ [学时安排]：2课时 [目的要求] 掌握DIV+CSS设计网页的模式与技巧 [重 点] , 掌握DIV+CSS设计网页的模式与技巧 [难 点] 掌握DIV+CSS设计网页的模式与技巧 [教法学法] 1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。 2. 练习采用学生自主安排，教师给与个别辅导的方式进行。 [参考资料] 《Dreamweaver CS5网页设计与制作——DIV+CSS版》 吴丰,丁欣 主编 清华大学出版社 《动态网页制作教程》（第二版）刘梅彦 徐英慧 编著 清华大学出版社 | [教学过程] 环节一：复习上节课介绍的CSS样式表的应用案例，讲解上次课布置的作业。 环节二：通过一个花店网页设计案例，讲解如何采用DIV+CSS的布局模式来设计网页。 设计步骤： 1.采用Div创建网页的整体结构 2.在每个模块中再添加独立的Div模块，完善网页内容 3.通过对每个模块分别设置CSS样式表完成网页显示效果的设置。 环节三：完成课堂讲解的练习例题，并疑难解答 环节四：复习本次课内容，步骤课后作业。 ； [章节名称]：DIV+CSS设计实例——花店页面设计下 [课堂类型]：理论□ 实训□ 练习■ 测试□ [学时安排]：2课时 [目的要求] 掌握DIV+CSS设计网页的模式与技巧 [重 点] 掌握DIV+CSS设计网页的模式与技巧 [难 点] - 掌握DIV+CSS设计网页的模式与技巧 [教法学法] 1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。 2. 练习采用学生自主安排，教师给与个别辅导的方式进行。 [参考资料] 《Dreamweaver CS5网页设计与制作——DIV+CSS版》 吴丰,丁欣 主编 清华大学出版社 《动态网页制作教程》（第二版）刘梅彦 徐英慧 编著 清华大学出版社 [教学过程] 环节一：复习采用DIV+CSS模式设计网页的方法，讲解上次课布置的作业。] 环节二：让学生完成花店网页设计练习，疑难解答。 [章节名称]：Photoshop设计网页 [课堂类型]：理论■ 实训□ 练习■ 测试□ [学时安排]：2课时 [目的要求] 掌握Photoshop软件在网页设计中的运用 [重 点] 掌握使用Photoshop软件设计网页的方法 [难 点] % 利用切片工具对网页进行分割 [教法学法] 1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。 2. 练习采用学生自主安排，教师给与个别辅导的方式进行。 [参考资料] 《Dreamweaver CS5网页设计与制作——DIV+CSS版》 吴丰,丁欣 主编 清华大学出版社 《动态网页制作教程》（第二版）刘梅彦 徐英慧 编著 清华大学出版社 [教学过程] 环节一：复习采用表格布局模式设计网页的方法。 | 环节二：介绍Photoshop软件在网页设计中的应用，通过一个产品介绍网页的实例说明设计的方法。 Photoshop设计网页的方法： 1.通过布局，色彩搭配，将草图设计的网页在计算机上以图片形式绘制出来。 2.对于设计好的图片形式的网页，通过Photoshop软件的切片功能，将图片的网页分割为各个部分模块，再导出为web格式的文件。 环节三：完成课堂讲解的练习例题，并疑难解答 [章节名称]：网页设计中的动画——Flash动画 [课堂类型]：理论■ 实训□ 练习■ 测试□ [学时安排]：2课时 【 [目的要求] 掌握网页制作中Flash动画的设计方法技巧 [重 点] 掌握网页制作中Flash动画的设计方法技巧 [难 点] 掌握网页制作中Flash动画的设计方法技巧 [教法学法] 1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。 2. 练习采用学生自主安排，教师给与个别辅导的方式进行。 [参考资料] [ 《Dreamweaver CS5网页设计与制作——DIV+CSS版》 吴丰,丁欣 主编 清华大学出版社 《动态网页制作教程》（第二版）刘梅彦 徐英慧 编著 清华大学出版社 [教学过程] 环节一：复习Photoshop软件设计网页的方法，讲解上次课布置的作业。 环节二：介绍Flash动画在网页中的应用，以网站首页光芒文字动画的制作为例，介绍Flash动画的设计方法。 设计步骤： 1.创建动画文字内容，复制一份，并修改其颜色 2.添加遮罩所用的长方形条，设置其从第1帧到100帧移动的动画效果。 3.设置方形条为遮罩。 4.） 5.动画效果测试。 环节三：完成课堂讲解的练习例题，并疑难解答 [章节名称]：网页设计实用工具介绍 [课堂类型]：理论■ 实训□ 练习■ 测试□ [学时安排]：2课时 [目的要求] 掌握几个常用的网页设计工具的使用方法 [重 点] 掌握几个常用的网页设计工具的使用方法 、 [难 点] 掌握几个常用的网页设计工具的使用方法 [教法学法] 1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。 2. 练习采用学生自主安排，教师给与个别辅导的方式进行。 [参考资料] 《Dreamweaver CS5网页设计与制作——DIV+CSS版》 吴丰,丁欣 主编 清华大学出版社 《动态网页制作教程》（第二版）刘梅彦 徐英慧 编著 清华大学出版社 [教学过程] … 环节一：复习采用Flash制作网页动画的方法。 环节二：介绍几个网页制作的实用工具，通过实例说明其应用的方法。 annermaker软件。 能利用简单的设置，完成一个网页的Banner动画 rk软件 利用该工具，可以设计网页中的图标。 环节三：完成课堂讲解的练习例题，并疑难解答 [章节名称]：Javascript语言基础1 " [课堂类型]：理论■ 实训□ 练习■ 测试□ [学时安排]：2课时 [目的要求] 掌握JavaScript程序设计的基础知识 [重 点] 能运用JavaScript语言实现网页中的特定功能 [难 点] 能运用JavaScript语言实现网页中的特定功能 [教法学法] 1.采用教授法进行教学讲解，结合疑难点师生互动交流方式进行。 < 2. 练习采用学生自主安排，教师给与个别辅导的方式进行。 [参考资料] 《Dreamweaver CS5网页设计与制作——DIV+CSS版》 吴丰,丁欣 主编 清华大学出版社 《动态网页制作教程》（第二版）刘梅彦 徐英慧 编著 清华大学出版社 [教学过程] 环节一：复习网页设计几个常用工具的使用方法。 环节二：讲解Javascript程序设计的基础知识，通过实例说明其使用的方法。程序的基本结构：在网页Html代码中添加如下代码
