网页设计与制作教案设计

《网页设计与制作教案设计》由会员分享，可在线阅读，更多相关《网页设计与制作教案设计（38页珍藏版）》请在金锄头文库上搜索。

1、word章节名称：网页设计入门根底课堂类型：理论 实训 练习 测试学时安排：2课时目的要求1. 了解网络的根本知识，网页设计的根底知识，网页的分类，动态网页的原理与技术2. 了解网页的根本构成与最简单的html代码3. 了解网页设计的流程重 点了解网页设计的流程，掌握最根本的网页的构成与最简单的网页html代码难 点掌握最根本的网页的构成与最简单的网页html代码教法学法1.采用教授法进展教学讲解，结合疑难点师生互动交流方式进展。2. 练习采用学生自主安排，教师给与个别辅导的方式进展。参考资料Dreamweaver CS5网页设计与制作DIV+CSS版 吴丰,丁欣 主编 清华大学动态网页制作教

2、程第二版X梅彦 徐英慧 编著 清华大学教学过程环节一：结合PPT课件的内容，讲解网络和网页的根本知识。了解网页的分类，网页运行的原理，介绍网页设计的工具，动态网页的技术。环节二：介绍网页的构成，并对一个进展实例分析说明。编写最简单的html代码。 环节三：了解网页设计的流程 主要有以下几个步骤：一. 规划二. 素材资源收集三. 选择开发工具四. 站点建立与规划五. 分模块进展网页设计六. 网页源代码测试与特效添加七. 申请域名与空间八. 网页源代码上传九. 定期的维护环节四： 对本节课的内容进展复习，让学生练习html的代码。并进展疑难解答章节名称：html根底与应用1课堂类型：理论 实训 练

3、习 测试学时安排：2课时目的要求了解html语言的根底知识，结构，掌握html语言设置网页的背景音乐，背景图片，字体的方法。重 点Html语言设置网页的背景音乐，图片，字体难 点Html语言设置网页的方法教法学法1.采用教授法进展教学讲解，结合疑难点师生互动交流方式进展。2. 练习采用学生自主安排，教师给与个别辅导的方式进展。参考资料Dreamweaver CS5网页设计与制作DIV+CSS版 吴丰,丁欣 主编 清华大学动态网页制作教程第二版X梅彦 徐英慧 编著 清华大学 教学过程环节一：复习网页设计的根底知识，介绍如何利用Dreamweaver开发工具，记事本编辑网页的源程序，介绍网页站点的

4、创建与须知事项。环节二：讲解html语言的结构，特点，设置网页页面的背景音乐，图片，字体1. 设置背景颜色 2. 背景图片3. 背景音乐 背景音乐和上边介绍的两个有很大的不同，它的代码是放在页面的头部 里， 4. 标题字体 文字 # =1，2，3，4，5，6 比如：今天是星期三，今天天气晴，温度15-235.字体的大小，用于一般文字。 文字 #=1, 2, 3, 4, 5, 6, 7 or +#, -# 例子：今天天气真好！6. 字体颜色 指定颜色 文字 # =#rrggbb 16 进制数码，或者是如下预定义色彩：Black, Olive, Teal, Red, Blue, Maroon, N

5、avy, Gray, Lime,Fuchsia, White, Green, Purple, Silver, Yellow, Aqua7. 客户端字体(Font Face) . #=客户端可获得的字体，什么是客户端，通俗的讲，就是你的电脑，face=#就是从你的电脑获得的字体环节三：完成课堂讲解的练习例题，并疑难解答环节四：复习本次课内容，步骤课后作业。章节名称：html根底与应用2课堂类型：理论 实训 练习 测试学时安排：2课时目的要求了解html语言的跑马灯效果标签的运用，序列卷标标签的运用重 点Html语言的跑马灯效果标签与序列卷标的应用难 点Html语言的跑马灯效果标签与序列卷标的应用

6、教法学法1.采用教授法进展教学讲解，结合疑难点师生互动交流方式进展。2. 练习采用学生自主安排，教师给与个别辅导的方式进展。参考资料Dreamweaver CS5网页设计与制作DIV+CSS版 吴丰,丁欣 主编 清华大学动态网页制作教程第二版X梅彦 徐英慧 编著 清华大学 教学过程环节一：复习HTML语言中设置背景颜色，背景图片，音乐等标签的知识，介绍HTML语言的编写规X要求。环节二：讲解html语言的跑马灯效果标记，序列卷标标记的使用该标记能实现文字或图片的滚动效果。滚动文字 主要参数： direction: 控制移动方向,可取left, right, up, down四个值 behavi

7、or: 移动方式,可取scroll(循环移动), slide(只走一圈)，alternate(来回移动) loop: 循环次数,不输入表示无限次循环 scrollamount: 移动快慢,数值越大越快 scrolldelay: 每移动一步之后的延时,单位是毫秒 height,width: 移动区域的高和宽,单位像素 bgcolor: 移动区域的背景色该类型标记类似于Word软件中的项目符号与编号，主要分为两种1无序标记无序序列就是序列各条目间无顺序关系某某：吴小娟生日：1993/6/16星座：双子座运行的效果如下：l 某某：吴小娟l 生日：1993/6/16l 星座：双子座其中为无序序列标记，

8、每增加一个条目，就要添加一个还可以通过设置来改变条目前面的图标，属性可以是Disk实心圆,Square方形,Circle空心圆2有序标记无序序列就是序列各条目间有顺序关系某某：吴弘凯生日：1993/6/16星座：双子座运行的效果如下：1. 某某：吴小娟2. 生日：1993/6/163. 星座：双子座其中为无序序列标记，每增加一个条目，就要添加一个还可以通过设置来改变条目前面的编号，属性可以设置为1数字、A大写英文字母、a小写英文字母、I大写罗马字母、i小写罗马字母等五种。环节三：完成课堂讲解的练习例题，并疑难解答环节四：复习本次课内容，步骤课后作业。章节名称：html根底与应用3课堂类型：理论

9、 实训 练习 测试学时安排：2课时目的要求了解Html语言的控制表格与其表项，框架重 点Html语言的表格与其表项的标记使用，超标记，框架标记的使用难 点掌握利用框架标记来设计页面教法学法1.采用教授法进展教学讲解，结合疑难点师生互动交流方式进展。2. 练习采用学生自主安排，教师给与个别辅导的方式进展。参考资料Dreamweaver CS5网页设计与制作DIV+CSS版 吴丰,丁欣 主编 清华大学动态网页制作教程第二版X梅彦 徐英慧 编著 清华大学 教学过程环节一：复习HTML语言中跑马灯效果标记，序列卷标的使用方法。环节二：讲解html语言的表格标记，超标记，框架标记的使用1. 表格标记.

10、- 定义表格 .- 定义表行 .- 定义表头 .- 定义表元超采用标记来实现，文件的路径有以下两种：绝对路径方式相对路径方式框窗实作 在中，COLS表示左右分，ROWS表示上下分。环节三：完成课堂讲解的练习例题，并疑难解答环节四：复习本次课内容，步骤课后作业。章节名称：运用表格设计页面布局课堂类型：理论 实训 练习 测试学时安排：2课时目的要求了解网页中表格布局模式设计的方法重 点了解网页中表格布局模式设计的方法难 点了解网页中表格布局模式设计的方法教法学法1.采用教授法进展教学讲解，结合疑难点师生互动交流方式进展。2. 练习采用学生自主安排，教师给与个别辅导的方式进展。参考资料Dreamwe

11、aver CS5网页设计与制作DIV+CSS版 吴丰,丁欣 主编 清华大学动态网页制作教程第二版X梅彦 徐英慧 编著 清华大学 教学过程环节一：复习HTML语言中表格标记，超，框架的相关知识，讲解上次课布置的作业。环节二：以一个蓝色空间网页的设计为例，讲解采用表格布局模式设计网页的方法。设计规X要求：多采用表格嵌套方式设计页面，少采用表格拆分的设计方法环节三：完成课堂讲解的练习例题，并疑难解答环节四：复习本次课内容，步骤课后作业。章节名称：运用框架结构设计页面布局课堂类型：理论 实训 练习 测试学时安排：2课时目的要求了解网页中框架布局模式设计的方法重 点掌握网页中框架布局模式设计的方法难 点掌握网页中框架布局模式设计的方法教法学法1.采用教授法进展教学讲解，结合疑难点师生互动交流方式进展。2. 练习采用学生自主安排，教师给与个别辅导的方式进展。参考资料Dreamweaver CS5网页设计与制作DIV+CSS版 吴丰,丁欣 主编 清华大学动态网页制作教程第二版X梅彦 徐英慧 编著 清华大学 教学过程环节一：复习采用表格工具设计网页的方法，讲