网页设计与制作教案46186

网页设计与制作教案46186
网页设计与制作教案46186

[章节名称]:网页设计入门基础

[课堂类型]:理论■实训□练习■测试□

[学时安排]: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

●星座:双子座

其中