当前位置：文档之家› 网页设计与布局教案.docx

网页设计与布局教案.docx

《HTML+CSS 网页设计与布局》课程教案

授课教师：授课班级：地点：周课时： 5 课时网页设计基础知识

章节内容

教学目标重点难点教学Dreamweaver软件介绍及其基础操作

HTML 基础知识及常用标记

1)使学生了解网页设计的相关基础知识；

2)使学生熟悉 Dreamweaver 软件界面的基本操作方法。

1)了解网页设计相关概念和网页的类型；

2)熟练掌握 Dreamweaver 软件创建和管理站点的方法。课堂讲授、案例讲解与指导

方法

教学

计算机机房

环境

时间

教学过程及内容提要备注分配

一、引入

约 15 分钟

教

1 、相互认识，提出与本学科相关的知识，介绍本门课程情况、教学内

学

容及总学时数进度安排，宣讲本课程教学纪律，鼓励学生营造一种

过

学习氛围，尊重同学，互帮互学，真正达到学以致用；

程

2 、提出问题：上过网吧有谁自学过网页设计听说过HTML或者CSS

设

这两个概念吗

计

约 35 分钟学生理解3、

二、告知学生课堂任务

本次课所学习的主要内容是HTML相关基础知识和

Dreamweaver软件基础操作；

三、逐步演示讲解分析教学内容

1、网站和网页的区别：

2、（ 1 ）网页是Internet基本元素；

3、（ 2 ）网站由网页组成；

4、静态网页和动态网页：

5、静态网页：纯粹HTML语言格式的网页通常被称为静态网页，静

态网页的后缀名通常为.htm 、.html 、 .shtml 、 .xml 。

6、动态网页：许多人认为网页会动就是动态网页，这是个错误的观点，

在静态的网页中也可以含有动态的图片，这仅仅是视觉上的动态罢

了。真正的动态网页是指实际上并不是独立存在于服务器上的网页

文件，只有当用户请求时服务器才返回一个完整的网页。也就是说，

它是返回到了客户端上的网页。例如网页文件是以ASP 、PHP 、JSP、

ASPX 为结尾就是动态的网页了。

约 20 分钟学生熟记

7、静态网页的特点：

8、（ 1 ）内容相对稳定，容易被搜索引擎检索到；

9、（ 2 ）没有数据库支持，在网站制作和维护方面工作量大；

10 、（3）交互性差，在功能方面有很大的限制。

11 、动态网页的特点：

12 、（1）以数据库技术为基础，可大大降低网站维护的工作量；

13 、（2）可实现更多的功能，如用户注册、新闻发布、在线留言

等；

14 、（3）不利于使用搜索引擎进行网站推广。

15 、常见网页类型：形象页、主页、栏目页、内页、新闻详细页等；约30 分钟学生实践约20 分钟

16 、网页设计原则：

17 、（1）了解客户需求

18 、（2）遵循Web标准约20 分钟学生实践约20 分钟

19 、（3）运用形式美法则

20 、网页设计流程：

21 、（1）手绘效果图：确定网页主题内容和风格

22 、（2）设计效果图：搜集、整合设计所需素材

23 、（3）版面编辑：网页的制作与实现

24 、（4）网页美化：动画设计，网页测试和发布

25 、网页设计的主要软件：

26 、（1）Photoshop

27 、（2）Dweamveawer

28 、（3）Flash

29 、（4）Firworks 约30 分钟学生实践约20 分钟

约30 分钟学生实践约20 分钟

30 、HTML 基础知识：

31 、（1）HTML概念：Hyper Text Markup Language超文本

标识语言；

32 、（2）HTML文档的编写方法：用记事本手工直接编写、使用

约 20分钟

约 40分钟学生实践可视化 HTML 编辑器 Dreamweaver、由Web服务器动态生成；

33 、（3）网页文件命名：首页文件名默认为：或；

34 、（4）HTML文件结构：

总结

35 、

36 、

37 、

38 、

39 、

40 、HTML文件的正文

41 、

42 、

43 、（5）用编辑器手工编写第一张网页；

44 、学生实训及辅导；

45 、Dreamweaver软件界面介绍：

46 、（1）软件面板组成及基本操作方法

47 、（2）软件首选参数设置

48 、Dreamweaver站点创建：

49 、站点->新建站点->设置站点名称-> 设置站点默认图像文件

夹。

50 、学生实训操作：Dreamweaver站点创建与设置；

51 、Dreamweaver创建第一个网页：

52 、（1)名称：

53 、（2)设置标题、输入文本、输入特殊字符

54 、（3）页面属性设置

55 、（4 ）网

56 、学生及；

57 、HTML 常用：

58 、（1 ）：主文字

59 、（2 ）段落：

里表示段落

60 、（3 ）行与注：
、

61 、（4 ）粗体与斜体：粗体、斜体

62 、（5 ）除与下划：除、下划

63 、（6 ）上与下： ^上 _下

64 、学生及；

65 、字体：

67 、（2 ）字体色：字体色

68 、（3 ）置字体：主文字

69 、（4 ）物理字体：

70 、 ?，将字符置成粗体。

71 、 ? ，将字符置成斜体。

72 、 ?，字符增加下划。

73 、 ?，字符增加除。

74 、 ? ，将字符置成打字机字体。

75 、^?，将字符置成上字体。

76 、_?，将字符置成下字体。

77 、（5）字体：

78 、 ?文字。

79 、?字体加重。

80 、 ?示程代。

81 、?示示例文字。

82 、 ?示按文字。

83 、?小文字。

84 、 ?放大文字。

85 、字体例解；

86 、学生及；

四、课外作业

五、第 3 章上机践。

六、

七、课堂小结

本次主要内容：

1、网基知；

2、 Dreamweaver基本使用方法；

3、 HTML 基知及常用；

后

记

《H TML+CSS 网页设计与布局》课程教案

授课教师：授课班级：地点：周课时： 5 课时

文字布局

章节

内容教学目标重点难点教学插入图像

超级链接

3)使学生熟练掌握 HTML 常用标记的基本使用方法；

4)使学生掌握 HTML 常用标记各种属性的含义和设置方法。

3)掌握各种 HTML 常用标记的基本使用方法；

4)熟记各种 HTML 常用标记的含义。

课堂讲授、案例讲解与指导

方法

教学

计算机机房

环境

时间

教学过程及内容提要备注

八、引入教

分配约 10 分钟

4 、回顾上周所学内容：上周主要介绍了网页设计和HTML相关基础

学

知识及 Dreamweaver软件基础操作，重点介绍了HTML基础知

过

识及常用标记；

程

5 、提出问题：网页中文字如何布局如何在网页中插入图像如何运用超

设

级链接

计

约 30 分钟学生理解6、

九、告知学生课堂任务

本次所学的主要内容是HTML 文字布局和插入像、超接的用。约30 分钟约40 分钟约20 分钟

十、逐步演示讲解分析教学内容

87 、行控制：文字一

、文字二

88 、不行控制：

89 、文字： align="#"、

居中

90 、置段落：

段落一

、

段落二

91 、学生及；

92 、上周外作点；

93 、无序列表：

94 、

95 、

表一

96 、

表?

97 、

98 、有序列表：

99 、

100 、

表一

101 、

表?

102 、

103 、欲格式化文本：

文字

、文本 104 、算机出格式：约20 分钟学生实践约30 分钟

约30 分钟学生实践约20 分钟

约30 分钟学生实践约30 分钟

约 30 分钟学生实践

105 、代码样式小型固定宽度字体显示的文本

106 、代码样式固定宽度字体渲染

总结107 、 代码样式固定宽度字体渲染文本

108 、代码样式斜体字渲染

109 、学生实训及辅导；

110 、在网页中插入图像：

111 、图像无法显示时的提示信息：

112 、控制图像的大小：

113 、

height="300px">

114 、设置边框：

115 、

116 、图像的链接：

117 、

118 、学生实训及辅导；

119 、图像映射图：

120 、文本与图像对齐：

121 、学生实训及辅导；

122 、最简单的文字超链：文字链接

123 、超链网页的打开方式：_blank 、 _parent 、 _self 、 _top

124 、链接的注释：

125 、163 网站

126 、设置图片链接：

127 、设置锚点：文章中的文字

128 、邮箱地址链接：

129 、作者的邮箱

130 、相对路径：

131 、相对路径是指这个文件在所在的位置与其他文件或文件夹的关系；

132 、绝对路径：

133 、HTML 绝对路径（ absolute path）指带域名的文件的完整路径。

134 、学生实训及辅导；

十一、课外作业

十二、第 6 章上机实践。

十三、

十四、课堂小结

本次课主要内容：

1、 HTML 文字布局；

2、 HTML 插入图像；

3、 HTML 超级链接。

后

记

《H TML+CSS 网页设计与布局》课程教案

授课教师：授课班级：地点：周课时： 5 课时章节表单的使用

内容插入表格

教学5)使学生熟练掌握 HTML 常用标记的基本使用方法；

目标6)使学生掌握 HTML 常用标记各种属性的含义和设置方法。

重点5)掌握各种 HTML 常用标记的基本使用方法；

难点6)熟记各种 HTML 常用标记的含义。

教学

课堂讲授、案例讲解与指导

方法

教学

计算机机房

环境

时间

教学过程及内容提要备注分配十五、引入

约 10 分钟

教7 、回顾上周所学内容：上周主要介绍了HTML文字布局和插入图像

学过程

的基本方法，重点介绍了超级链接的标记应用；

8 、提出问题：什么是表单常见的表单有哪些如何在网页中使用表格

9、

约 30 分钟学生理解

设十六、告知学生课堂任务

计本次课所学习的主要内容是HTML 表单和表格的标记应用。

十七、逐步演示讲解分析教学内容

约 40 分钟学生实践

135 、表单基本语法：

、属性 action和 method 136 、文本框：约30 分钟约20 分钟

137 、密码框： 138 、单选框：

139 、复选框：

140 、按钮设置： 141 、学生实训及辅导；

142 、上周课外作业点评；

143 、下拉表：

144 、绝对路径

150 、

总结文本域： <! —文本域内容 -->

151 、表单应用实例讲解；152 、学生实训及辅导；153 、表格基本语法：

154 、

155 、标签对表示表行156 、标签对表示表头157 、标签对表示表元

158 、跨多行表元：Rowspan

159 、跨多列表元：colspan

160 、表格内设置文字对齐：

161 、对齐语法用align表示，后面接的值是left 、center和right，分别代表向左、居中和向右对齐复选框

162 、表格在网页中对齐：

；

163 、学生实训及辅导；

164 、表格应用实例讲解；

165 、学生实训及辅导；

十八、课外作业

十九、第 8 章上机实践。

二十、

二十一、课堂小结

本次课主要内容：

1、表单的使用；

2、插入表格；

3、表格应用实例；

后

记

《H TML+CSS 网页设计与布局》授课教师：授课班级：地点：

网页框架

章节

对象移动属性

内容

多媒体对象应用

教学7)使学生熟练掌握 HTML 常用标记的基本使用方法；

目标8)使学生掌握 HTML 常用标记各种属性的含义和设置方法。

重点7)掌握各种 HTML 常用标记的基本使用方法；

难点8)熟记各种 HTML 常用标记的含义。

教学

课堂讲授、案例讲解与指导

方法

教学

计算机机房

环境

教学过程及内容提要

二十二、引入

教

10 、回顾上周所学内容：上周主要介绍了HTML表单和表格的标学

记应用方法，重点介绍了表单的应用实例；

过

11 、提出问题：框架网页如何创建如何使网页中的对象移动如何在

程

网页中插入Flash 、影片、声音

设

12、

计

二十三、告知学生课堂任务课程教案

周课时： 5 课时

时间

备注

分配

约10 分钟

约 20 分钟学生理解

本次课所学习的主要内容是HTML 网页框架和对象移动属性、多媒体对象的标记应用。

二十四、逐步演示讲解分析教学内容

166 、框架的基本语法：

167 、约 30分钟学生实践约 30分钟

168 、

约 10分钟169 、

170 、

171 、

172 、

173 、

174 、框架垂直分栏：约 20分钟学生实践约 20分钟

175 、垂直分栏是在中用 cols

约 40分钟学生实践表示跨多列表元，

分钟

约 20

colspan

176 、框架水平分栏：

177 、水平分栏的语法用rows 表示

约 20分钟学生实践178 、设置不可调节框架大小： noresize

约 10分钟

179 、学生实训及辅导；

180 、上周课外作业点评；

约 20分钟学生实践

181 、

约 30分钟浏览器不支持框架：

182 、设置框架边框：

约 40分钟学生实践frameborder=#>

183 、设置滚动条：

总结184 、设置滚动条在是里面，用scrolling属性

185 、导航框架：

186 、导航框架是在网页框架的中加入name属性，表示

该的名称，然后通过用标记的链接，并用 target 的

属性值等于的名称；

187 、内联框架：

188 、内联框架存在的单个HTML文件中，可以

链接其他网页并显示它，即在一个页面中嵌入一个框架窗口来显示

另一个页面的内容，叫做浮动框架也称内联框架；

197 、文本的移动速度：scrollamount设置移动的速度

202 、align=top 、bottom 、center 、baseline 、 left 、right 、texttop、middle 、 absmiddle 、 absbottom

《H TML+CSS 网页设计与布局》课程教案

授课教师：授课班级：地点：周课时： 5 课时章节CSS 基础知识

内容CSS 字体设置

教学9)使学生熟练掌握 CSS 常用样式的创建方法；

目标10)使学生掌握 CSS 常用样式各种属性的含义和设置方法。

重点9)掌握各种 CSS 常用样式的基本使用方法；

难点10)熟记各种 CSS 常用样式的含义。

教13 、回顾上周所学内容：上周主要介绍了HTML网页框架和多媒体对象

学标记，重点介绍了HTML 对象移动属性设置方法；

过程14 、提出问题：什么是CSSCSS 有什么用如何创建和使用CSS

15、

约 40 分钟

设三十、告知学生课堂任务

学生理解计本次课所学习的主要内容是CSS 基础知识和CSS 字体样式设置方法和

209 、（1）内联定义：内联定义即是在对象的标记内，使用对象的style 属性定义适用其的样式表属性。

214 、现在浏览器市场的主流浏览器主要是Internet Explorer（简称 IE）

和Mozilla Firefox （简称 FF），网页中的 CSS 因两个浏览器支持不同，所

以对同一代码会显示不同的效果，那么为了达到网页的风格，有时要

注意哪个浏览器要写的 CSS 属性支持如何。如果某一属性只有一个浏览器

支持，那么另一浏览器对这属性代码就不起作用。

215 、CSS 选择符：

216 、CSS 选择符就是CSS 样式的名字，选择符的命名规则可以使用英文字母的大写与小写、数字、连字号、下划线、冒号、句号，CSS 选择符只能以字母开头，选择符在CSS 中可分成多种，在本小节中只介绍常用

的CSS 选择符： HTML 标签选择符、 ID 选择符和 CLASS （类选择符）选择符。约40 分钟

约60 分钟学生实践约50 分钟

约40 分钟

约80 分钟学生实践

217 、CSS 伪类和伪元素：伪类：伪类选择符是基于一组预定义性质的选择符， HTML元素可以占有这些预定义性质。实际上这些性质与class

属性的功能是相同的，因此在CSS 术语中，它们被称作伪类。在对应这

总结些伪类的标记中，不存在真正的class属性，相反，它们代表应用到这

些元素的某些方面，或者是相对于该元素的浏览器用户界面的状态。

218 、CSS 常用单位：

219 、em ：（ em ，元素的字体的高度）。

220 、ex ：（ x-height ，字母 "x" 的高度）。

221 、px ：（像素，相对于屏幕的分辨率）。

222 、绝对长度单位：

223 、in ：（英寸， 1 英寸 = 厘米）。

224 、cm ：（厘米， 1 厘米 =10毫米）。

225 、mm ：（毫米， 1 米 =1000毫米）。

226 、pt ：（点， 1 点 =1/72英寸）。

227 、pc ：（帕， 1 帕 =12点）。

228 、上周课外作业点评；

229 、学生实训及辅导；

230 、字体和字体颜色： font : font-style || font-variant || font-weight ||

font-size || line-height || font-family

231 、字体大小：Font-size，后面可接的参数值有：

maller|length

233 、字体重量：

234 、Font-weight:normal|bold|bolder|lighter|100|200|300|400|500|

600|700|800|900

502043《网页设计与制作》课程标准

《网页设计与制作》课程标准课程代码： 502043 参考学时： 90 学分： 4 课程类型：专业课

2015年 1 月编一、适用专业计算机应用技术（3年制中职，5年制高职）二、开课时间第4学期三、课程定位 1、课程性质本课程是计算机应用技术（3年制中职，5年制高职）的专业课程。 2、教学任务本课程主要以Dreamweaver软件为操作平台，针对职业教育网络技术专业中理论结合实践的特点，以培养高技能应用型人才为目标，重点加强学生的理论基础和训练学生的实际操作能力。在教学知识模块上首先介绍网页的相关知识，学习HTML标记语言，在此基础上深入学习Dreamweaver软件的操作方法以及网页元素在网页中的使用技巧，锻炼学生网页的排版设计能力，最后通过样式表、客户端脚本、服务器行为的学习让学生熟悉并掌握开发简单动态网站的能力。在本课程的实践教学内容中，选取紧密联系实际的项目并进行详细分解，重点培养学生的静态、动态网页制作能力、具备网站的建立和维护能力、独立思考、解决问题以及自主创新的能力。四、课程培养目标 1、方法能力目标 1)培养学生谦虚、好学的品质； 2)培养学生勤于思考、做事严谨的良好作风； 3)培养学生良好的职业道德； 4)培养学生事物美的观念； 2、社会能力目标 1)培养学生的团队协作精神； 2)培养学生分析问题、解决问题的能力； 3)培养学生勇于创新、敬业乐业的工作作风； 4)培养学生诚实、守信、坚忍不拔的性格。 3、专业能力目标 1)掌握网页设计相关知识、网页元素组成、网页结构、网站开发流程、网页设计与制作工具；

2)掌握HTML标记语言并能够熟练使用标记元素来书写网页框架； 3)掌握Dreamweaver软件的使用方法；学习文本、图像等多媒体元素在网页中的使用技巧； 4)熟练掌握表格的弹性控制及表格元素标记的使用方法并能应用单元格的合并拆分、表格嵌套来完成网页的排版； 5)掌握模板的使用方法；熟练应用模板来制作、修改、批量更新网页； 6)掌握两栏框架的制作方法和使用浮动框架嵌套网页的技巧； 7)熟悉AP元素的浮动和定位并能结合时间轴来实现多个AP元素的动画效果； 8)熟练掌握表单的制作方法、表单元素标记、了解网页通过表单来提交数据的原理； 9)掌握网页中客户端行为的概念；能够使用常见的客户端行为来制作前台页面的动态效果； 10)掌握样式表对网页的外观和格式的控制、样式表的冲突与继承并能够熟练书写样式； 11)熟练掌握服务器行为的概念、连接数据库、插入、修改、更新、删除操作记录；能够使用服务器行为开发简单的动态网站。五、课程衔接在课程设置上，前导课程有《Photoshop高级应用》，后续课程有《网站建设》六、教学内容与学时分配教学学时数分配见下表所示表教学内容与学时分配

《网页制作教学设计》教案

《网页制作》教学设计法、说学法、说教学过程、说板书设计。一、说教材： (一)教材分析：本节内容是省编《信息技术》全一册第六章网络与INTERNET基础知识第五节的内容(2000年版为第八章第四节内容，2001、2002版教材第六章第五节内容)。虽然在这一节内容在新版教材变更为拓展模块，但针对现在网络快速发展，广大的学生接触，使用INTERNET的机会也大大增加，学生在使用网络获取信息时，更多的是通过浏览网页这一方式，我认为上好这节课是非常必要的，这对学生进一步认识、使用INTERNET更有益处，同时通过网页制作这一过程也利于学生对计算机常用素材的类型有更深入的了解，在一定程度上也起着培养学生运用综合知识能力作用，所以我认为这节课是非常值得我们去研究上好的，考虑这节课的内容及教法、学法的需要，我把这节分为两课时，第一时：学生自学，自练Word制作网页的基本方法；第二课：让学生自己构思创意一个内容丰富，页面美观的网页。 (二)教学目标：根据对教材的分析及学生实际情况，制定如下的教学目标： (1)知识目标：1、有关网页文件的说明 2、熟悉用Word制作网页的基本方法 3、超级链接是网页实现互相链接的基本方法 (2)能力目标：1、培养学生的自学能力 2、创意构思能力 3、能制作出具有多重链接、多种素材、内容丰富的网页。 (3)情感目标：1、教育学生正确认识和理解信息技术相关文化，伦理和社会问题，负责地使用信息技术。 (三)教学的重、难点：根据对教材的分析及网页制作过程中的实际情况，我认为要出制作内容丰富的网页，关键是要知道网页间互相链接的方法，所以我把超级链接做为本节的

网页设计与制作教案

《网页设计与制作教案》湄洲湾职业技术学院 2008-2009学年第一学期教师：唐俊奇系部：信息技术工程系专业：计算机应用电子信息班级：计机07（1）信息07（1）08（2）

第一讲网页设计概述【教学内容】讲解网页设计的相关术语及网站制作的基本流程。【教学目的】使学生对网站及网页有一定的认识，激发学生学习网页设计的兴趣。【教学重点】网页设计中的若干术语。【教学难点】理解网页设计中的若干术语。【教学方式】讲授式、讨论式、案例分析式。【教学参考】 1、《网页设计与制作》杨尚森曲宏山贾文峰等著电子工业出版社。 2、《Internet 网页工场》Wittime工作室重庆出版社。 3、《WEB网站设计》Joel Sklar著高等教育出版社。 4、《HTML网页制作教程》材义语编著铁道出版社。【新课内容】 1.1 WWW和URL 1.1.1 Web的起源 Web是World Wide Web的简称，一般也称之为WWW或3W 1.1.2 Web的特点和结构 Web最大的特点是使用了超文本（Hypertext） WWW采用C/S（客户机/服务器）工作模式在浏览器和服务器之间应用HTTP（Hyper Text Transfer Protocol，超文本传输协议）作为网络应用层通信协议 1.1.3 URL URL的完整格式协议://主机名或IP地址：端口号/路径名/文件名 1.2 IE5的使用 Web浏览器是浏览Internet资源的客户端软件在Windows环境下使用的浏览器主要有Internet Explorer、Netscape Navigator、Mosaic 等 1.2.1 IE5的界面 1.2.2 IE5的使用

网页设计与制作实例教程

网页设计与制作实例教程习题答案第1章网页与网站基础一、选择题 1．A 2．B 3．C 4．C 5．A 二、判断题 1．√2．×3．√4．×5．√ 三、问答题略第2章网页规划设计一、选择题 1．D 2．A 3．C 4．A 5．C 二、判断题 1．×2．×3．×4．√5．√ 三、问答题 1．答：网站需求分析一般包括三个阶段的内容：网站背景分析、总体需求分析、具体需求分析。（每个阶段可再详细描述。） 2．答：可从以下几个方面来阐述网站设计的原则：①日期、时间和数字；②欢迎词； ③弹出窗口和引导页面；④新闻和公告信息；⑤网址；⑥控件；⑦链接；⑧主页内容 3．答：打开新浪网首页，分析其布局类型。（答案略） 4．答：网页色彩搭配方法可从以下两个方面去阐述：①根据页面风格以及产品本身的诉求确定主色；②根据主色确定配色。网页色彩搭配技巧可从以下几个方面去阐述：①用一种色彩；②用两种色彩；③用一个色系；④用黑色和一种色彩以及色彩搭配忌讳的方面。 5．答：打开当当网，具体分析其规划过程。（答案略）第3章初识网页制作软件一、选择题 1．C 2．C 3．B

二、填空题 1．代码、拆分、设计2．文件、资源、规则3．超级链接三、操作题略第4章制作网页内容一、选择题 1．D 2．B 3．A 4．D 5．ABD 6．D 7．B 8．D 9．A 10．A 二、判断题 1．√2．√3．×4．√5．√6．√7．√8．√9．×10．√三、操作题略第5章设置网页超级链接一、选择题 1．D 2．D 3．A 4．D 5． C 二、判断题 1．×2．×3．×4．√5．× 第6章使用CSS样式美化网页一、选择题 1．B 2．C 3．C 4．B 5．A 6．D 7．D 8．D 9．B 10．C 11．A 12．A 13．C 14．D 15．D 16．A 17．A 18．B 19．D 20．D 二、简答题 1．×2．×3．×4．×5．×6．×7．√8．×9．√10．√11．×12．×13．×14．√15．√16．√ 第7章规划布局网页一、选择题 1．B 2．A 3．B 4．B 5．D 二、简答题

网页设计与制作课程标准

《网页设计与制作》课程标准前言：《网页设计与制作》是理实一体化课程，是计算机专业（软件与信息服务、数字媒体、计算机应用专业）的一门重要的专业必修课。本课程定位于WEB技术开发工作岗位。它是WEB前端技术开发的必备课程，在整个课程体系中具有重要的作用，一、课程的说明：通过本课程的学习，使学生了解网页设计技术的起源和发展、常用的网页制作软件及HTML语言，掌握运用Dreamweaver（以下简称DW）网页制作软件制作网页的方法，通过运用Photoshop图像处理软件和Flash动画制作软件，三个软件互相配合，完成网页设计与制作任务的方法。为今后从事网页设计与制作、网站开发和管理奠定基础。在网页设计的实践中重点培养团队协作、沟通交流能力，培养自主学习能力和探索创新能力。二、课程内容与基本要求：该课程涉及的知识是网页设计人员必备的基本技能，职业活动与课程内容的对应关系如下：

三、教学目标 1、职业关键能力目标 (1) 掌握使用Photoshop进行图像处理的基本方法及操作技能 (2) 掌握DreamweaverCS5的基本知识及操作技能 (3) 掌握建立与管理站点的方法 (4) 掌握制作主要内容为文本的网页的方法 (5) 掌握在网页中插入与编辑图像的方法 (6) 掌握在网页中插入多媒体元素的方法 (7) 掌握表格处理与网页布局的方法 (8) 掌握创建超级链接的方法 (9) 掌握使用框架制作旅游网站的方法 (10) 掌握创建和使用模板的方法 (11) 掌握创建和使用库的方法 (12) 掌握在网页中添加AP Div的方法

(13) 掌握在网页中使用行为的方法 (14) 掌握HTML基础知识及通过代码修饰网页的方法 (15) 掌握使用CSS样式表修饰网页的方法 (16) 掌握动态网页的概念及简单动态网页的制作方法 2、职业专门能力目标 (1) 通过完成相关的项目，掌握网页设计的基本工作流程。 (2) 通过完成相关的项目，掌握网页设计常用工具的使用方法。 (3) 通过完成相关的项目，掌握网页布局及美化的基本方法。 (4) 通过完成相关的项目，掌握简单网页交互的制作方法。 3、方法能力目标形成一定的学习能力、沟通与团队的协作能力，形成良好的思考问题、分析问题和解决问题的能力，养成良好的职业素养。遵守国家关于软件与信息技术的相关法律法规，形成关键性的软件开发与应用的能力。四、教学内容第一章网页制作基础知识（4学时）教学目标：网页与网站基本概念、网页基本组成元素、常用网页制作软件主要教学内容：网页制作基础知识网页的基本构成元素网页制作常用软件和技术第二章 Dreamweaver CS6轻松入门（2学时）

网页设计——网页设计概述教案

第一讲网页设计概述使学生对网站及网页有一定的认识，激发学生学习网页设计的兴趣。【教学内容】讲解网页设计的相关术语及网站制作的基本流程。【教学重点】网页设计中的若干术语。【教学难点】理解网页设计中的若干术语。【教学方式】讲授式、讨论式、案例分析式。【教学参考】 1、《网页设计与制作》杨尚森曲宏山贾文峰等著电子工业出版社。 2、《Internet 网页工场》Wittime工作室重庆出版社。 3、《WEB网站设计》Joel Sklar著高等教育出版社。 4、《HTML网页制作教程》材义语编著铁道出版社。【新课内容】 1.1 WWW和URL 1.1.1 Web的起源 Web是World Wide Web的简称，一般也称之为WWW或3W 1.1.2 Web的特点和结构 Web最大的特点是使用了超文本（Hypertext） WWW采用C/S（客户机/服务器）工作模式在浏览器和服务器之间应用HTTP（Hyper Text Transfer Protocol，超文本传输协议）作为网络应用层通信协议 1.1.3 URL URL的完整格式协议://主机名或IP地址：端口号/路径名/文件名

1.2 IE5的使用 Web浏览器是浏览Internet资源的客户端软件在Windows环境下使用的浏览器主要有Internet Explorer、Netscape Navigator、Mosaic等 1.2.1 IE5的界面 1.2.2 IE5的使用 1.3 网页中所使用的技术 1.3.1 HTML语言和XML语言 1、HTML语言 ?HTML只使用SGML中很小一部分标记 ?HTML语言（Hyper Text Markup Language 超文本标记语言） ?HTML是纯文本的语言，其源代码可以用各种文本编辑工具进行编辑，常用的网页制作软件如FrontPage、Dreamweaver等实际上是自动生成HTML源代码的工具 2、XML语言 XML（eXtensible Markup Language） 1.3.2 动态网页 1.3.3 多媒体技术的应用 1.3.4 Web服务器端程序 1.4 制作网页的基本方法 1.4.1 制作网页的基本步骤 1、确定网页的内容 2、设计网页的组织结构 3、资料的收集与整理 4、选择网页的设计方法 1.4.2 制作网页时要注意的问题 1、网页的标题要简洁，明确。 2、在文本中要使用水平线，以分割不同部分。 3、对重点段落要强调显示。 4、网页中插入的图片要尽量的小。

《网页设计与制作》课程说课稿

《网页设计与制作》课程说课稿一、课程定位《网页设计与制作》课程是我院计算机应用技术专业、计算机网络技术专业及电子商务专业的重要专业基础技能课程，该课程不仅实用性强、应用面广，而且与岗位的联系非常密切，仅仅就这一门课程的学习，学生毕业后就可以从事相关网页设计与制作的工作，考取相关的网页设计与制作员的资格证书，如果将此作为技能基础，继续学好后续基于网络编程的动态网页设计技术，学生还可以从事网络软件的设计与开发，进行商务网站的设计与制作，同时也可以考取网页设计师、网络软件工程师等相关国家职业资格证书。该课程的开设，正好满足我校关于“高素质、技能型人才”培养目标的需求，通过该课程的教学，可以培养出一批优秀的、能够在一线工作岗位上从事网页设计与制作、网站规划、管理与维护的工作人才。基于该课程的主要工作岗位有：网站管理与维护人员、网页设计与编辑人员、网站策划人员及网页美工人员等。二、课程教学设计的过程与思路在教学过程中，结合职业岗位对人才的需求（一线工作岗位上从事网页设计、制作、编辑，网站规划、维护和管理的人员）、我校对人才培养的目标（培养高素质、技能型、应用型人才）及本课程对人才培养的目标（能够独立完成一个网站的建设，毕业后能够从事企事业单位的网页设计与制作、网站维护与管理等工作的人才），我们将培养学生熟练的网页设计与制作操作技能作为培养重点，在具体课程教学设计中，应用“工学结合”的教育思路、实施“建构主义”的教学方法，采取“小组协作学习”的学习方式完成整个课程的教学与学习。在“工学结合”的教育思路下，主要以“工作导向——项目导向——任务驱动——知识学习”的一个架构来完成教学。具体给大家阐述如下：老师教学之前的教学设计：根据知识点——设计任务——组合项目——达成一项工作老师教学中的教学设计：给学生布置一项工作（工作导向）——将工作转化为项目（项目导向）——将项目细化为每一个任务（任务驱动）——通过任务引出知识点（知识学习）

网页设计与布局教案.docx

《HTML+CSS 网页设计与布局》课程教案授课教师：授课班级：地点：周课时： 5 课时网页设计基础知识章节内容教学目标重点难点教学Dreamweaver软件介绍及其基础操作 HTML 基础知识及常用标记 1)使学生了解网页设计的相关基础知识； 2)使学生熟悉 Dreamweaver 软件界面的基本操作方法。 1)了解网页设计相关概念和网页的类型； 2)熟练掌握 Dreamweaver 软件创建和管理站点的方法。课堂讲授、案例讲解与指导方法教学计算机机房环境时间教学过程及内容提要备注分配一、引入约 15 分钟教 1 、相互认识，提出与本学科相关的知识，介绍本门课程情况、教学内学容及总学时数进度安排，宣讲本课程教学纪律，鼓励学生营造一种过学习氛围，尊重同学，互帮互学，真正达到学以致用；程 2 、提出问题：上过网吧有谁自学过网页设计听说过HTML或者CSS 设这两个概念吗计约 35 分钟学生理解3、

二、告知学生课堂任务本次课所学习的主要内容是HTML相关基础知识和 Dreamweaver软件基础操作；三、逐步演示讲解分析教学内容 1、网站和网页的区别： 2、（ 1 ）网页是Internet基本元素； 3、（ 2 ）网站由网页组成； 4、静态网页和动态网页： 5、静态网页：纯粹HTML语言格式的网页通常被称为静态网页，静态网页的后缀名通常为.htm 、.html 、 .shtml 、 .xml 。 6、动态网页：许多人认为网页会动就是动态网页，这是个错误的观点，在静态的网页中也可以含有动态的图片，这仅仅是视觉上的动态罢了。真正的动态网页是指实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。也就是说，它是返回到了客户端上的网页。例如网页文件是以ASP 、PHP 、JSP、 ASPX 为结尾就是动态的网页了。约 20 分钟学生熟记 7、静态网页的特点： 8、（ 1 ）内容相对稳定，容易被搜索引擎检索到； 9、（ 2 ）没有数据库支持，在网站制作和维护方面工作量大； 10 、（3）交互性差，在功能方面有很大的限制。 11 、动态网页的特点： 12 、（1）以数据库技术为基础，可大大降低网站维护的工作量；

网页设计与制作教程

网页设计与制作教程第一章基础篇 1.INTERNET和WWW INTERNET的功能和应用 1．信息的获取与发布 2．电子邮件 3．网上交际 4．电子商务 5．网络电话 6．网上事务处理 7．远程登陆 8．文件传输 9．电子公告版 10．全球信息网 11．INTERNET的其他应用 WWW简介 1．网页，网页文件和网站 2．HTTP和FTP协议 3．超文本和超链接 4．INTERNET地址 5．域名 6．统一资源定位器（URL） 7．HTML 常见网络浏览器----IE 第二章网站建设概论（1）信息类网站（2）交易类网站（3）有偿信息类网站：101网校、（4）功能型网站（5）综合类网站 2.根据网站的性质分类：（1）政府网站（2）企业网站（3）商业网站（4）教育科研机构网站（5）个人网站（6）非赢利机构网站（7）其他类型的网站 3.根据在大型搜索引擎上的设置分类 4.娱乐和休闲类网站；商业与经济类，艺术，人文，健康，医药，政府，政治类，电脑与网络类，社会和文化，科学与教育类，参考资料类 2.1.2网站建设的步骤 1．制作环境的准备：1）设备：扫描仪，数码相机，打印机2）完善系统环境3）备齐网页开发工具软件，网页制作工具，服务器端程序开发工具及一些实用的辅助工具。。。4。

备齐素材制作和加工软件，包括对图形，动画，刘媒体和声音进行处理的素材制作和加工软件 5）备齐常用的网站发布工具，如FTP文件传输软件 2.网站目标的确定：对象：访问者的类型；主题明确，数据充分。保持目标的简洁 3.网站主题，风格和创痍点的确定 1）主题选材要小而精 2）擅长或感兴趣的内容）选题不要太滥：因特网上只有第一，人们记不住第二第三名 2）网站的风格：CI（标志，色彩，字体，标语），版面布局，浏览方式，交互性，文字，语气，内容价值，存在意义，站点荣誉等诸多因素 1）确信风格是建立在有价值的内容上的 2）需要彻底弄清楚站点给人的印象是什么 3）在明确网站印象后，开始努力建立和加强这种印象：1）标志（LOGO）2）色彩3）标准字体4）醒目标准口语5）统一图片处理效果7）使用网站特有的图标；使用自己设计的花边，线条和点；；9）展示网站的荣誉和成功作品10）告诉网友关于个人真实的故事和想法3）网站的创意（准备期，孵化期，启事期，验证期，形成期） 4.网站结构的确立：1）网站结构的确立2）网站目录的设置3）网站链接结构的设置：树状连接结构；星状链接结构3）两种结构的综合 5.网站素材的准备 6.网站制作工具的选择和确定：DREAMWEA VER和FRONTPAGE，PHOTOSHOP，FIREWORKS，动画制作工具：FLASH，COOL 3D；网页特效工具，网页特效精灵，有声有色 7.网站的建设 1）申请E---MAIL帐号 2）申请网页空间：1。打开虎翼网空间申请主页 3）域名注册：对于个人网站，在申请免费网页空间的同时也完成了域名的注册 4）网页制作：先简单后复杂，布局先大后小，制作网页时要多灵活运用软件配备的设计模板，这样可以大大提高制作效率 8。网站的测试（看看有没有问题）和上传（将网站发布到WEB服务器，网页制作工具本身具有FTP功能） 9。网站的宣传和推广（搜索引擎上注册，与别的网站交换链接，运用网络广告） 10.网站的更新和维护：必须不断给它补充新的内容，才能够长期吸引住浏览者 2.1.3 网站设计的原则 1）网站主题不要多于三个：小而精，定位小 2）网站的标准色彩不要超过三种 3）重视网站目录结构的创建（创建目录的原则百度上找出来）：不要将所有文件都存在根目录下，目录层次不超过三层，不要使用过长的目录名，尽量不要使用中文目录名 4）链接层次不要超出三层（便于维护） 5）网页长度应限定在三个整屏以内 6）表格的嵌套层次要控制在三层左右（表格插入表格里） 7）网站导航要清晰 2.优秀网站的五大要素 1）网站内容丰富 2）页面下载速度快（网页简单，不要大量图片）

网页设计与制作课程试卷(五)

网页设计与制作课程试卷(五) 一、单项选择题 (本大题共40小题，每小题2分，共80分) (1) Photoshop中，下列__D_____操作不能提交图像变换。 A. 按Return键 B单击选项栏中的“提交”按钮 C. 在变换选框内双击 D在变换选框外双击 (2) Photoshop 中，利用蒙板制作淡出效果的方法为____C____。 A.添加蒙板后使用橡皮图章工具 B.添加蒙板后使用钢笔工具 C.添加蒙板后使用渐变工具 D.添加蒙板后使用填充工具 (3) 下列情况不属于冷色彩的是______A___。 A.黄色 B.蓝色 C.绿色 D.蓝绿 (4)下列情况不属于色彩联想性的是______D__。 A.蓝色——天空 B.黑色——黑夜 C.红色——喜事 D蓝色— —高科技 ^ (5) 创建浮动广告的路径应使用__C______. A.“窗口”—>“时间轴”—>“添加行为”命令 B. “窗口”—>“时间轴”—>“录制层路径”命令 C. “修改”—>“时间轴”—>“录制层路径”命令 D.“修改”—>“时间轴”—>“添加行为”命令 6）下列关于层的说法，不正确的一项是___D_____。 A.在DreamweaverMX中，层用来控制网页中元素的位置 B.层可以放置在网页的任何位置 C.层以点为单位精确定位页面元素 D.层中可以包含任何HTML文件中的元素 (7)要打开网页时弹出一个信息框，可以使用新建行为中的___B____。 A.打开测览器窗口 B.弹出信息 C.调用JavaScript D.播放声音 (8)要上传整个站点，要选定整个站点文件可以按的键是___A_____。 A.Ctrl+A B.Ctrl C.Shift D.Shift+A (9)检查测览器的兼容性应选的选项是_____D__。 A.搜索 B.验证 C.链接检查器 D.目标测览器检查 (10)下列属于合法IP的是_____A__。 A.202.96.1.2 B.257.33. 21.5 C .33.23.99 D.10001111 (11)在模板中，由DreamWeaverMX自动建立的是____D___。 A.可编辑区域 B.可选区域 C.重复区域 D.锁定区域 (12)在DreamWeaverMX中有___B____种方法可以建立基于模板的网页。 A.2 B.3 C.4 D.5 (13)模板文件的扩展名为______C_。 A.lbi B.htm C.dwt D.asp (14)下列不是FlashMX的选取工具的是___D____。 A.箭头工具 B.图标是空心箭头的工具 C.套索工具 D.手形工具

网页设计与制作课程教案

《网页设计与制作》课程教案一、课程定位本课程是计算机应用技术专业的一门专业基础课程，该课程的学习能够提升他们对网页制作的兴趣，让他们学习网页制作的基本技能，为后继课程打下基础，同时扩展其就业面，为就业做好准备。本课程的目的和任务是让学生学会Dreameaver CS6、Flash和Fireworks 的使用方法，并能够使用这3款软件制作出美观实用的网页。二、课程总目标掌握网页制作的基本方法和技能，掌握网站建设的流程，能够运用所学知识建设常用的网页和网站，同时能够美化网页，设计人性化、艺术化的网站静态页面部分。（一）知识目标： 1.熟悉网页制作的基本元素； 2.掌握Dreamweaver CS6软件的基本操作方法； 3.掌握在网页中插入文字、图片、声音、flash等的方法； 4.掌握常见的网页布局方法，学会使用CSS美化网页； 5.掌握在网页中使用表单和制作网页特效的方法； 6.掌握简单图形图像的处理，能够制作符合网页主题的图片和简单动画并巧妙地和网页中内容搭配起来。 7.掌握建设一个功能相对完善的网站的方法并能制作常用的网站的静态页面部分。（二）职业能力培养目标 1. 能够根据网站开发需求，去寻找网页设计和网站开发所需要的文字、图片、动画、声音、视频等素材并作美化处理； 2．能够制作出符合主题色彩的网页，网页要求美化、被绝大多数浏览者接受和喜爱；

3.能够设计企业网站、政府门户网站、学校网站等常见网站的基本静态页面。（三）素质目标 1.具有勤奋学习的态度，严谨求实、创新的学习精神； 2.具有良好的心理素质和职业道德素质； 3.具有高度责任心和良好的团队合作精神； 4.具有运用理论知识发现问题、分析问题并解决问题的能力，同时能够不断学习，不断创新，让自己的设计越来越完善，有止于至善的精神。（四）职业技能证书考核要求：可以根据自身情况考取“全国计算机信息高新技术资格证”，“网页设计制作员”，“网页设计师”等职业技能证书。三、重点、难点章节及内容 1.重点章节： 1.2 网页、网站相关术语简介 1.6 网站建设的基本流程 2.3 Dreamweaver CS6的工作环境 3.2 创建本地站点 3.4 使用站点 3.5 网页设计中的规范 4.1 网页文件的基本操作 4.3 插入文本 4.4 插入水平线 4.5 插入其他基本元素 4.6 创建列表 5.1 超级链接概述 5.2 创建超级链接 5.3 使用dw制作各种超级链接

网页设计与制作课程标准

网页设计与制作课程标准公司内部编号：（GOOD-TMMT-MMUT-UUPTY-UUYY-DTTI-

《网页设计基础》教案

《网页设计基础》教案总学时：32 教师：贺苗苗

第一章第一节网站界面设计的认识一、网站的主题定位 1、网站的主题选择企业的性质决定网站的风格，企业的内容决定网站的主题。 2、网站题材选择的原则 ①主题要小而精②题材最好是自己擅长或者喜爱的内容 ③题材不要太滥或者目标太高 3、题材类别二、页面的功能模块设计 1、网站名称（Logo） 2、广告条（banner） 3、主菜单（menu） 4、新闻（news） 5、搜索（search） 6、友情链接（links） 7、邮件和地址（mailand address） 8、版权（copyright）

首页的设计步骤：①确定首页的风格和功能模块 ②设计首页的版面布局 ③处理技术上的细节三、网页界面设计（web interface design）------美观、用户便利、网站流程顺畅! 界面：字典上解释为两者间的界限、接点、共有连接的领域。例子：人与车直接接触的空间，方向盘（即界面）；再如：人和门，门把手（即界面）。过大过小都不好。界面设计最重要的两点：①使用的便利性②美学的层面四、界面设计相关用语 1、UI ( User Interface, 用户界面 ) 即使用者界面的意思。实现互动是用户界面最主要的目的。 2、HCI ( Human-computer Interaction,人与计算机的交互作用 ) 即，以人怎样做能更容易的掌握计算机的使用技术为目标，结果可以使界面技术得到飞跃和发展。 3、GUI ( Graphical User Interface,图形用户界面 ) 图形用户界面是相对于纯文本而言，通过图形构成用户与系统间的界面来实现的。例如：在windows之前的DOS必须输入纯文本，而现在则不用。

网页设计与制作电子教案

实用标准文案电子教案课程：第1章网页制作基础课时内容网页制作基础授课时间学时数2 教学目标了解 HTML 的组成和语法了解网页制作的常用软件掌握网页制作软件的启动和退出方法教学重点网页制作的一些基本知识教学难点HTML的组成和语法教学设计1、教学思路：首先，让同学们说说他们对网页的一个认识。然后进行系统地介绍网页是什么，由哪些部分组成，还有网页制作时所需掌握的一些基础知识和制作网页时常用到的一些软件。最后学习网页制作软件的启动和退出方法。 2、教学方法：先登录一些常用的网站，让同学们看一些网页，然后让同学们说下他们度网页的认识，最后才开始讲解本周内容。 3、教学手段：利用多媒体并结合网络进行教学。 4、教学资料及要求：课前要求学生先大致浏览本书内容，对本书所要讲解的内容有个基本的了解。教学内容讨论问题： 1、什么是网页？ 2、网页的基本组成部分是哪些？ 3、网页有什么作用？第 1 章网页制作基础# 1.1网页制作基础知识 1.1.1网页简介 1.1.2什么是HTML 1.1.3 HTML 的组成结构及语法 1.1.4应用举例——使用记事本编写网页 1.2网页制作的常用软件 1.2.1图形图像处理软件 1.2.2动画制作软件 1.2.3网页布局软件 1.2.4软件配合及制作流程 1.2.5应用举例——实战网页制作流程 1.3网页制作软件的启动与退出 1.3.1网页制作软件的启动 1.3.2文件的打开 1.3.3网页制作软件的退出 1.3.4应用举例——启动并退出 Photoshop CS3 1.4上机及项目实训 1.4.1Flash CS3 的启动与退出 1.4.2制作“蓝莲花”网页

网页设计与制作课程简介

《网页设计与制作》课程简介课程名称：网页设计与制作课程代码：02038 适用专业：初等教育（计算机与信息技术方向）课程性质：专业核心课程、必修课、专业技能课学分：3 学分计划学时：72学时（理论36学时，实训36学时）一、前言 1. 课程性质本课程是初等教育计算机与信息技术专业的一门专业技能课程，培养学生网页设计与制作能力，适应初等教育对信息技术教师的人才基本要求，同时满足社会对计算机专业人才的需求，适合从事网站建设相关的岗位。本课程的先修课程是《计算机应用基础》，后续课程是《https://www.doczj.com/doc/0116160589.html,程序设计》。在完成《计算机应用基础》课程学习后，学生掌握了计算机基本知识和原理，学会了一些应用软件和工具软件的使用，进而学习《网页设计与制作》这门课程不会感到困难。在以后学生还将学习《https://www.doczj.com/doc/0116160589.html,程序设计》课程，能设计和制作动态网页。 2. 课程基本理念初等教育计算机与信息技术专业培养的对象主要是小学信息技术教师，今后从事小学信息技术教学和学校信息化教育教学的管理者及维护者，建设网站和网页是信息技术教师应掌握的基本技能。课程要理论与实践相结合，培养学生动手能力，能胜任今后小学信息技术教师的工作任务。同时满足社会对计算机专业人才的需求，适合从事网站建设相关的岗位群。 3. 课程设计思路根据初等教育计算机与信息技术专业人才培养方案，《网页设计与制作》是重要的专业技能课程，是作为小学信息技术教师基本技能训练与考核的项目之一。课程以工作任务来组织内容，以案例驱动贯穿教学过程。由浅入深，最后完成主题网站的开发项目。课程教学中以Dreamweaver的使用为主线，要重视HTML

《HTML5+CSS3网站设计基础教程》_教学大纲

《HTML5+CSS3网站设计基础教程》课程教学大纲（课程英文名称）课程编号：201601210011 学分：5学分学时：76学时（其中：讲课学时：47 一、课程的性质与目标《HTML5+CSS3网站设计基础教程》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。

二、课程设计理念与思路课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。教学整体设计“以职业技能培养为目标，以案例（项目）任务实现为载体、理论学习与时间操作相结合”。开发工具：DreamweaverCS6 第一章初识HTML5

第二章HTML5页面元素及属性

第四章CSS3选择器

e g o o d f o 背景与图片不透明度的设置 √ 设置背景图像平铺√ 设置背景图像的位置√ 设置背景图像固定√设置背景图像的大小√设置背景的显示区域√设置背景图像的裁剪区域√设置多重背景图像√背景复合属性√线性渐变√径向渐变√重复渐变 √ 第七章表单的应用

网页制作基础知识教案

网页制作基础知识教案教学目标：了解网页的组成元素及常用的网页制作工具。了解网页制作的一些基础知识，如网站和网页的区别、网页的类型、网页的构成元素等，然后在了解的基础上再通过练习来巩固。教学重点难点：在深刻了解概念的基础上把理论转化成实际的应用。教学过程：在制作网页之前，首先要了解一些关于web网页的基本知识，了解一下构成一个网站的基本元素等。网页的基本元素文本：基本组成部分图像：更加直观准确地表达某些信息，并且可以起到美化网页，吸引读者注意力的作用超链接：可以方便地转入其他网页进行浏览。网页的其他元素：音乐表格表单美化网页，丰富网页的内容，增强网页的功能。网页的实质网页相当于刊物中所发表的一篇篇文章，但与纸上的文章相比，它增加了多媒体信息和网上交互的功能。网页的实质 = 表格+文本+图片+动画+声音+超级链接+…… ◆网站相当于发行到全世界的期刊。 ◆网站的实质 = 服务器上的文件夹 ◆主页相当于期刊的封面。 ◆主页的实质 = 打开网站的第一个网页网页和网站的分类从网页是否执行程序来分，可分为静态网页和动态网页这两种类型。什么是静态网页、动态网页? ◆所谓静态网页，指的是网页从服务器传到客户端时，网页的内容是“固定不变”的，也就是说，服务器只是把所存储的网页的内容原封不动直接传递给客户端浏览器，这种网页一般是标准的HTML代码。静态网页一般以.htm或.html为后缀结尾的，俗称html文件。本课程就是制作静态网页的课程。 ◆所谓动态网页，它在由服务器传递给客户端的时候必须由服务器把它转换成相应的HTML格式，而且会根据用户的要求和选择在在服务器端做出相应的改变和响应。动态网页一般要用专门的脚本语言编写，如ASP、https://www.doczj.com/doc/0116160589.html,、PHP、JSP等等

《网页设计与制作》课程标准

广西玉林高级技工学校《网页制作与设计》课程标准一、课程基本信息二、课程性质本课程是中职计算机术专业的一门主干专业课程。通过本课程的学习，要求学生掌握网页设计的基本概念，学会使用常用的网页设计工具和常用脚本语言，能够设计制作常见的静态和动态网页，具备网站的建立和维护能力。同时通过本课程的学习，培养学生的综合职业能力、创新精神和良好的职业道德。三、设计思路本课程标准的总体设计思路：以计算机专业学生的就业为导向，根据行业专家对计算机网络技术专业所涵盖的岗位群进行的任务和职业能力分析，紧紧围绕完成工作任务的需要来选择课程内容，设定职业能力培养目标；以“工作项目”为主线，创设工作情景；以书本知识的传授变为动手能力的培养为重点，强化学生实践动手能力的培养，以实现职业能力的培养目标。四、课程目标 1.职业知识目标 1．熟悉HTML 语言的作用和开发环境，能够编写HTML 代码； 2．掌握常用的HTML 标签，能够实现基本的图文信息显示； 3．理解HTML 页面框架的作用，能够针对需求进行框架的设计； 4．掌握各类HTML 表单元素标签，能够进行表单设计；

5．掌握各类HTML 多媒体元素标签，能够进行多媒体页面设计； 6．掌握CSS 样式的基本使用方法，能够应用CSS 样式表美化页面；7．掌握CSS 网页布局的方法，能够结合DIV 标签进行页面布局； 8．掌握JavaScript 的语法基础，能够编写简单的JavaScript 应用程序；9．掌握JavaScript 的函数、内置对象、事件等，能够实现表单的验证；10．掌握DOM 树形结构及其操作方法，能够控制DOM 对象。 2.职业技能目标 1．能独立进行资料收集与整理、具备用户需求的理解能力； 2．能根据项目需求，具备项目页面的设计与实现能力； 3．能根据静态页面设计原则与CSS 技术规范，实现页面美化与布局；4．具有使用JavaScript 技术进行页面事件处理与表单验证的能力； 5．能根据DOM 树形结构，进行页面DOM 的控制； 6．具有综合应用HTML 语言、CSS 样式、JavaScript 脚本进行页面的设计、编码、调试、维护能力。 3.职业素质目标 1．养成善于思考、深入研究的良好自主学习的习惯； 2．通过项目与案例教学，培养学习者的分析问题、解决问题的能力； 3．具有吃苦耐劳、团队协作精神，沟通交流和书面表达能力； 4．通过课外拓展训练，培养学习者的创新意识； 5．具有爱岗敬业、遵守职业道德规范、诚实、守信的高尚品质。五、课程主要内容与要求

《网页设计与制作》课程大纲

《网页设计与制作》课程教学大纲适用专业：计算机网络技术学时：64学时一、编写说明（一）本课程的性质、目的和任务《网页设计与制作》是计算机网络技术专业的一门专业基础课。通过本课程的学习，使学生能够掌握网页设计制作的基本知识和技巧，同时熟悉网站建设的基本知识，达到能独立构建简单网站或通过协作构建较复杂网站并设计相关网页的水平。在完成基本知识教学的同时，还要通过实践环节，强化对学生动手能力的培养与训练。（二）课程教学的基本要求通过本课程的学习，要求学生掌握HTML语言的文档结构和基本标签使用，能综合应用Dreamweaver CS6软件、HTML和CSS技术制作网页；掌握规划、开发、发布和管理静态网站的专业知识和技能；能独立构建简单网站或通过协作方式完成较复杂网站的建设，培养学生将理论知识应用于实践并解决实际问题的能力，为今后的进一步学习打下坚实基础。（三）实践环节

（四）本课程与其它课程的关系先修课程：计算机应用基础、图像处理软件PhotoShop 后续课程：https://www.doczj.com/doc/0116160589.html,动态网站开发、中小型网站设计与开发等（五）教学时数分配表（六）考核方式与要求 1.该课程是考查课 2.考核形式：上机操作 3.成绩的计算方法： ①平时成绩：40％（主要评估学生的现实表现） ②试卷成绩：60％（七）教材与主要参考书 1.教材：《ADOBE DREAMWEAVER CS6标准培训教材》,ACAA专家委员会 DDC传媒编著,人民邮电出版社，2013年1月 2.主要参考书：《中文版Dreamweaver CS6基础培训教程》,数字艺术教育研究室编著,人民邮电出版社，2014年6月

网页设计与制作教案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. 背景音乐背景音乐和上边介绍的两个有很大的不同，它的代码是放在页面的头部