文档库

最新最全的文档下载
  • 求职/职场
  • 总结/汇报
  • 工作bob网页登录网址
  • 教学研究
  • 资格考试
  • 外语考试
  • 高等教育
  • 高中教育
  • 初中教育
  • 小学教育
  • 幼儿教育
  • 表格/模板
  • 人文社科
  • 当前位置:文档库 > 《网页设计与制作(HTML+CSS)》教学大纲

    《网页设计与制作(HTML+CSS)》教学大纲

    《网页设计与制作(HTML+CSS)》课程教学大纲

    (课程英文名称)

    课程编号:201409210011

    学分:5学分

    学时:64学时(其中:讲课学时:45 上机学时: 19 )

    先修课程:计算机基础、计算机网络、计算机应用

    后续课程:UI设计 javascript网页特效

    适用专业:信息及其计算机相关专业

    开课部门:计算机系

    一、课程的性质与目标

    《网页设计与制作(HTML+CSS)》是面向计算机相关专业的一门专业基础课,涉及计算机基础、互联网等内容,通过本课程的学习,学生能够了解网页web 发展历史及其未来方向,熟悉网页设计流程、掌握网络中常见的网页布局效果、学会制作各种企业,门户,电商类网站。

    二、课程的主要内容及基本要求

    第一章HTML与CSS网页设计概述(4学时)

    [知识点]

    Web的基础知识

    HTMLl简介

    CSS简介

    常用浏览器介绍

    Dreamweaver 工具使用

    利用Dreamweaver创建第一个页面

    [重点]

    HTML简介

    Dreamweaver工具使用

    [难点]

    Dreamweaver工具创建第一个页面

    [基本要求]

    了解HTML版本的发展历程

    掌握Dreamweaver工具的使用,能够使用Dreamweaver创建一个包含html结构和CSS样式的简单网页。

    第二章 HTML入门(6学时)

    [知识点]

    HTML基本语法结构

    HTML 标记属性

    HTML 常用文本控制标记

    HTML 文本格式化标记

    HTML 图像标记

    HTML 相对路径和绝对路径

    HTML 图文混排技巧

    [重点]

    HTML基本语法结构

    HTML 常用文本控制标记

    HTML 图像标记

    HTML 相对路径和绝对路径

    [难点]

    HTML 标记属性的使用

    HTML 相对路径和绝对路径

    [基本要求]

    掌握HTML基本语法结构

    掌握HTML中常用的文本标记

    区分什么是相对路径和绝对路径

    掌握HTML图像标记的使用

    掌握图片混排常用技巧

    [阶段案例]

    使用HTML文本控制标记、HTML图像标记及相关标记的属性实现网页中常见的图文混排效果,如下图所示。

    《网页设计与制作(HTML+CSS)》教学大纲

    第三章 CSS 入门(8学时)

    [知识点]

    CSS入门知识

    CSS样式规则

    CSS样式表书写位置

    CSS基础选择器

    CSS字体样式属性

    CSS样式外观属性

    CSS复合选择器

    CSS层叠性和优先级

    [重点]

    CSS样式规则

    CSS基础和复合选择器

    CSS层叠性和优先级

    [难点]

    CSS复合选择器

    CSS优先级

    [基本要求]

    理解CSS语法结构

    了解CSS在网页中的重要性

    熟悉CSS书写的位置

    掌握CSS基础和复合选择器

    掌握CSS层叠性和优先级

    [阶段案例]

    通过CSS文本样式属性控制网页中的文本,制作网页中常见的新闻页面,效果如下图所示。

    《网页设计与制作(HTML+CSS)》教学大纲

    第四章盒子模型(6学时)

    [知识点]

    盒子模型理论知识

    CSS盒子模型属性

    元素类型的分类

    元素类型的相互转换

    盒子外边距合并问题

    [重点]

    盒子模型属性

    元素类型分类

    元素类型相互转换

    [难点]

    盒子模型复合属性

    盒子模型总的宽度和高度

    元素类型及其转换

    [基本要求]

    理解盒子模型

    掌握盒子模型属性

    掌握盒子模型中复合属性的写法

    掌握元素类型及其转换方法

    [阶段案例]

    综合运用盒子模型的相关属性,制作网页中常见的盒子效果,如下图所示。

    《网页设计与制作(HTML+CSS)》教学大纲

    第五章列表与超链接(4学时)

    [知识点]

    有序列表

    无序列表

    自定义列表

    CSS控制列表样式

    超链接

    锚点链接

    CSS控制链接样式

    [重点]

    无序列表

    自定义列表

    CSS控制列表样式

    [难点]

    CSS控制列表样式

    [基本要求]

    掌握列表的三种分类

    熟悉列表的嵌套

    熟练掌握CSS控制列表样式

    掌握链接标记的使用

    掌握结构与样式相分离的写法

    [阶段案例]

    使用列表与超链接标记组织页面,并通过CSS控制列表与超链接的样式实现网页中常见的新闻列表效果,如下图所示。

    《网页设计与制作(HTML+CSS)》教学大纲

    《网页设计与制作(HTML+CSS)》教学大纲

    新闻列表效果展示鼠标以上链接文本效果

    第六章表格与表单(4学时)

    [知识点]

    表格标记

    表格结构

    CSS控制表格

    表单标签

    表单控件

    CSS控制表单

    [重点]

    表格标签

    CSS控制表格和表单

    表单标签

    [难点]

    表单标签

    CSS控制表单

    [基本要求]

    掌握表格标记的使用

    了解表格结构

    掌握表单标记的使用

    掌握CSS控制表单标记

    [阶段案例]

    使用表格与表单组织页面,并通过CSS控制表格与表单的显示样式,制作网页中常见的注册界面,效果如下图所示。

    《网页设计与制作(HTML+CSS)》教学大纲

    第七章浮动与定位(8学时)[知识点]

    元素的浮动

    清除浮动

    Overflow属性

    元素的定位

    z-index属性

    [重点]

    元素浮动

    元素定位

    [难点]

    清除浮动

    元素定位的分类

    [基本要求]

    掌握元素浮动

    熟悉清除浮动的方法

    掌握元素定位及其分类

    熟悉z-index设置层的叠放次序

    [阶段案例]

    综合运用元素的浮动与定位,制作传智播客设计学院首页banner,效果如下图所示。

    《网页设计与制作(HTML+CSS)》教学大纲

    第八章 CSS高级技巧(6学时)

    [知识点]

    CSS精灵技术

    CSS滑动门技术

    margin负值的应用

    [重点]

    CSS精灵技术

    CSS滑动门技术

    margin负值的应用

    [难点]

    CSS精灵原理分析

    CSS滑动门原理分析与切图

    运用margin负值综合运用

    [基本要求]

    掌握精灵图的制作

    掌握利用CSS对精灵图片进行背景设置

    掌握常见滑动门布局

    掌握利用margin负值进行布局技巧

    [案例实战1]

    使用CSS精灵,制作精品课程模块,效果如下图所示。

    《网页设计与制作(HTML+CSS)》教学大纲

    [案例实战2]

    使用CSS滑动门,制作梯形网站导航,效果如下图所示。

    《网页设计与制作(HTML+CSS)》教学大纲

    [案例实战3]

    应用margin的负值,制作压线效果,如下图所示。

    《网页设计与制作(HTML+CSS)》教学大纲

    第九章 CSS布局与浏览器兼容性(6学时)

    [知识点]

    常见CSS网页布局

    通栏布局

    CSS hack 分类

    IE条件注释

    常见IE6 BUG

    盒子外边距合并

    [重点]

    通栏布局

    CSS hack

    常见IE6 BUG

    [难点]

    CSS hack

    [基本要求]

    熟悉网页常见的布局

    掌握网页通栏布局技巧

    掌握 CSS hack

    熟悉 IE6 下常见的BUG

    第十章实战开发(上)—传智播客设计学院首页面(6学时)

    [知识点]

    建立站点

    页面分析

    首页切图

    制作头部

    制作banner

    制作主体

    制作底部版权

    [重点]

    制作页面首页

    [难点]

    制作页面首页

    [基本要求]

    了解一个网站制作流程

    熟悉根据效果图分析页面布局

    掌握切图技巧

    掌握首页布局

    [实战开发]

    综合运用HTML与CSS的基础知识,制作传智播客设计学院首页,效果如下图所示。

    《网页设计与制作(HTML+CSS)》教学大纲

    第十一章实战开发(下)—传智播客设计学院子页面(6学时)[知识点]

    利用Dreamweaver制作模板文件

    使用模板文件

    引用模板文件

    利用模板文件制作列表文件

    [重点]

    利用Dreamweaver制作模板文件

    利用模板文件生成列表页面

    [难点]

    利用Dreamweaver制作模板文件

    [基本要求]

    掌握利用Dreamweaver制作模板文件

    熟悉模板文件引用

    掌握利用模板文件生成其他页面

    [实战开发]

    综合运用HTML与CSS的基础知识,制作关于我们页面、课程介绍页面、课程介绍详情页面,效果图分别如下。

    《网页设计与制作(HTML+CSS)》教学大纲

    关于我们页面效果图

    《网页设计与制作(HTML+CSS)》教学大纲

    课程介绍页面效果图

    《网页设计与制作(HTML+CSS)》教学大纲

    课程介绍详情页面效果图

    三、学时分配

    《网页设计与制作(HTML+CSS)》教学大纲

    四、考核模式与成绩评定办法

    本课程为考试课程,期末考试采用百分制的闭卷考试模式。学生的考试成绩由平时成绩(30%)和期末考试(70%)组成,其中,平时成绩包括出勤(5%)、作业(5%)、实验和上机成绩(20%)。

    五、选用教材和主要参考书

    本大纲是根据教材《网页设计与制作(HTML+CSS)》所设计的。

    六、大纲说明

    本课程的授课模式为:课堂授课+上机,其中,课堂主要采用多媒体的方式进行授课,并且会通过测试题阶段测试学生的掌握程度;上机主要是编写程序,要求学生动手完成指定的程序设计或验证。

    撰写人:审定人:

    批准人:执行时间: