《网页设计与制作(HTMLCSS)》教学大纲

《网页设计与制作》教学大纲一、课程说明1、课程代码：2、总学时数：64 ，其中理论环节学时数：32 ，实验实践环节学时数：323、学分： 44、适用专业：计算机媒体应用技术5、本课程的性质、地位和作用本课程是计算机相关专业的专业课程，同时也是网络营销、网络建设与维护等课程的基础，是一门实用性极强，面向网络建设，使用与维护的技术性课程。

与其它课程的关系本课程的先行课程为“计算机基础”，鉴于网页制作与设计的内容，建议与网络技术、ASP程序设计、网站架设与维护课程中相同内容适当协调。

二、教学基本要求1、本课程的目的、任务本课程以当前流行的网页制作工具为例，使学生掌握HTML语言及常用技巧。

鉴于网页设计是一个综合的艺术，除了基本页设代码外，还有图像、声音等综合运用，本课程除介绍流行软件DREAMWEAVER外，还将对FIREWORK、FLASH作详细讲述，使学生掌握网页制作方法。

2、本课程的教学要求（1）知识要求•掌握网页制作原则、方法及常用技术•熟悉一种主流软件，如DREAMWEAVER•了解一定图像制作及动画软件使用，如FLASH、FIREWORK（2）素质要求•敬业精神：树立敬业精神，网页设计与制作必须全身心投入。

•团队精神：大型网络建设及多人制作中，必须合理协调工作风格及分工•较强的自我知识及技术更新能力，快速跟踪网页制作技术新发展。

（3）能力与技能要求•HTML语言的运用与理解•三剑客的使用•设计一个静态网站主要教学方法与手段采用面授和自学相结合；课堂讲授与实习相结合；多媒体教学与传统教学相结合。

三、学时分配四、大纲具体内容（一）教学大纲内容第一章网页制作基础知识教学目的要求１、掌握：Internet的接入方法，IP地址、域名。

２、理解：Intranet的基本概念，TCP/IP分层模型、IP协议基本内容。

３、了解：Internet的产生、发展、现状、构成和功能。

教学重点：Internet的接入方法，IP地址。

《网页设计与制作》课程教学大纲课程名称：网页设计与制作学分及学时：4学分总学时72学时，理论36学时适用专业：网络工程开课学期：第四学期开课部门：计算机与互联网学院先修课程：计算机文化基础计算机网络考核要求：考试使用教材及主要参考书：向知礼主编：《网页设计与制作》航空工业出版社 2017年杨松主编：《网页设计案例教程》航空工业出版社 2015年一·课程性质和任务：本课程全面地介绍网页制作技术的基本理论和实际应用。

全书共10章，分为3大部分。

前5章为第1部分，主要介绍网页制作的基本理论——HTML，同时穿插介绍Fireworks，Flash，Anfy等软件在网页制作过程中的应用；第6章～第8章为第2部分，主要介绍网页制作技术，包括CSS技术、客户端脚本技术(DHTML)以及XML技术；第9章～第10章为第3部分，主要介绍当前最流行的网页制作工具——Dreamweaver，通过应用实践能够从实际应用的角度进一步巩固所学知识。

课程内容不但包括各种网页制作技术的基础理论，而且强调网页制作的具体应用，使读者既能打下坚实的理论基础，又能掌握实际的操作技能。

二·课程教学目的与要求以Dreamweaver的使用为主线，介绍网页制作的相关技术。

使学生理解网页制作的基本概念和理论,掌握站点的建立和网页的设计,能用HTML语言修改网页;掌握网页制作和站点的基本知识;掌握站点的创建和网页的编辑;掌握超链接、图像、CSS样式的使用;掌握表格、框架、表单、多媒体对象的使用;理解行为、模板、库、CSS布局的概念和使用;理解HTML语言、网站的测试与的发布；要求：教学过程中，须注重学生实践操作能力的培养，采取“面向实践、能力为先”的教学思路，教学内容应结合当前WEB技术的发展趋势，把握未来企业级WEB页面开发的发展方向，兼顾各行各业的需求变化，力争面向社会，服务于企业“互联网+”战略。

三、课程学时分配四·课程教学中应注意的问题理论课讲解WEB页面开发的原理及方法，并在多媒体教师机上进行演示操作；实验课在专业机房协助学生解决课上遗留问题，并安排学生进行实践操作巩固学习效果；考核方法：期终考试占40％，实验成绩20％，平时成绩和作业占40％。

《网页设计与制作》教学大纲一、说明1、课程的性质与内容《网页设计与制作》课程就是计算机应用技术、电子商务等专业的一门核心课程,也就是其她计算机专业的普及型课程。

内容主要涵盖了HTML语言的语法规则及文字、链接、列表、表格、表单、图像、多媒体、框架元素标记及属性,、JavaScript脚本编程语言、Dreamweaver、Fireworks、Flash、Photoshop等相关知识,全面介绍WEB站点设计的基本操作技术与使用技巧。

2、课程的任务与要求通过本课程的学习,要求学生掌握静态网页的制作方法、学会HTML语言、熟悉站点的上传与维护并能够独立解决网页编辑中遇到的一般问题,能熟练运用Dreamweaver进行网站的导入、规划、管理、发布的相关技术及网页制作的操作技能;能熟练掌握JAVASCRIPT脚本编程语言的基本语法知识,能实现网页的交互与特殊效果;能维护、管理与设计WEB应用程序;能独立设计小型WEB站点。

3、教学中应注意的问题在教学过程中要注重Dreamweaver、Firework或Photoshop与Flash软件的主要功能,其中Dreamweaver主要就是完成网页设计与网站管理;Firework或Photoshop主要进行图像的设计与编辑;Flash主要开发适应网络传输的流媒体电脑规划。

并且要培养学生综合使用这些软件的能力,注重学生动手能力的培养与上机试验。

教学过程中应该以Dreamweaver为主。

在讲授理论的同时加入具体的设计项目实验,力求达到实战的效果避免空洞的理论学习。

二、学时分配三、课程内容及要求模块一、初识网站与网页教学要求:1、使学生对网站及网页有一定的认识,激发学生学习网页设计的兴趣2、了解网页中的常用元素类型3、了解常用网站管理与制作软件4、了解网站建设流程5、理解HTML与CSS基本知识教学内容:1-1 认识网站与网页1-2 网页中的元素类型1-3 常用网站管理与制作软件1-4 网站建设流程1-5 HTML与CSS入门模块二、初识Dreamweaver 教学要求:1、熟悉Dreamweaver操作环境2、了解网站规划与管理3、掌握页面属性的设置教学内容:1-1 熟悉Dreamweaver操作环境1-2 网站规划与管理1-3 设置页面属性模块三、网页布局方法教学要求:1、掌握使用表格来布局来定位网页2、掌握使用使用框架布局网页教学内容:1-1 使用表格布局网页1-2 使用框架布局网页模块四、编辑网页元素教学要求:1、掌握文本输入与编辑2、掌握在网页使用图像3、掌握使用Flash动画4、了解使用其她媒体元素教学内容:1-1 文本输入与编辑1-2 使用图像1-3 使用Flash动画1-4 使用其她媒体元素模块五、使用超链接教学要求:1、掌握超链接的设置2、掌握如何管理超链接教学内容:1-1 设置超链接1-2 管理超链接模块六、HTML样式与CSS样式教学要求:1、掌握编辑基本HTML代码标记2、掌握创建与使用CSS样式表教学内容:1-1 编辑HTML代码1-2 创建与使用CSS样式表模块七、Dreamweaver高级应用教学要求:1、熟悉行为的使用2、掌握时间轴的基本应用3、掌握表单及其应用4、了解模板与库5、熟练掌握CSS样式的应用教学内容:1-1 使用行为1-2 时间轴的应用1-3 表单及其应用1-4 模板与库1-5 CSS样式的应用模块八、网站的优化教学要求:1、掌握网站的基本优化技巧2、掌握页面的美化与工具的使用3、掌握站点的整体优化教学内容:1-1 页面的美化1-3 站点的优化模块九、站点的发布教学要求:1、掌握发站点发布前的工作与程序2、掌握发布站点与站点的后续维护与更新教学内容:1-1 发布前的工作1-2 发布站点与站点的后续维护与更新。

《网页设计与制作(HTML+CSS)》课程教学大纲（课程英文名称）课程编号：2学分：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图像标记及相关标记的属性实现网页中常见的图文混排效果，如下图所示。

《网页设计与制作》课程教学大纲(精)《网页设计与制作》课程教学大纲一、课程的性质和任务课程性质：《网页设计与制作》是现代汽车技术/计算机及应用专业的一门选修课程，是学习网页设计与制作的一门重要课程。

主要任务：向学生全面介绍与网页设计制作有关的知识，向学生阐明Web 基本工作机制，并使学生具有解决一般网页制作问题的能力。

与此同时，通过对Web页制作技术和制作工具的学习，使学生对于网页设计中所涉及的相关知识有一个全面的了解。

掌握通过HTML语言、FrontPage、Flash工具软件设计制作一个网站的方法与技巧。

基本要求：1、了解Internet的过去、现在和将来及有关WWW、HTTP、HTML、CSS的定义，概念和作用；2、了解图像的几种格式：GIF、JPEG、PNG和矢量图格式，它们各自的特点和差别；3、理解服务器、客户端、浏览器的概念和作用；4、深入理解HTML语言中的各种文本格式、字符格式、段落设置、列表、标记、表格、框架、表单的作用；5、理解客户端脚本程序的工作方式；6、熟练掌握使用绝对和相对URL，创建超链接，图象链接，图象映射的建立方法；7、会使用FrontPage2000、DreamWeaver等网页制作工具制作网页；二、课时分配课程教学总学时数为42学时，具体分配见课时分配表。

课时分配表三、本课程的教学内容第一章 HTML概述什么是HTML；什么是WEB；HTML的定义；基本的HTML语法；标记符的属性； WEB页的基本结构；HTML标记；首部标记；正文标记符；添加注释；显示特殊字符。

第二章页面背景与颜色控制页面背景；背景颜色；背景图案；字符和链接的颜色。

第三章文本格式字符格式；物理字符样式；逻辑字符样式；段落格式；分段与换行；段落对齐。

第四章列表格式有序列表；OL标记符和LI标记符；有序列表的嵌套；无序列表；定义无序列表；混合嵌套列表；定义列表；创建定义列表；使用定义列表缩排文档第五章使用图象WEB页图象格式；在网页中插入图象；IMG标记符及其基本属性；图象布局；使用GIF动画；创建GIF动画；注意事项；使用网页图象的要点。

《网页设计与制作》课程教学大纲一、说明（一）课程定义：《网页设计与制作》课程是网络与新媒体专业的一门核心课程，也是其他计算机专业的普及型课程。

内容主要涵盖了HTML语言的语法规则及文字、链接、列表、表格、表单、图像、多媒体、框架元素标记及属性，、JavaScript脚本编程语言、Dreamweaver、Fireworks、Flash、Photoshop 等相关知识，全面介绍WEB站点设计的基本操作技术和使用技巧。

（二）编写依据：本课程根据武汉体育学院体育科技学院人文社科系网络与新媒体专业人才培养方案编写。

（三）目的任务：通过本课程的学习，要求学生掌握静态网页的制作方法、学会HTML语言、熟悉站点的上传和维护并能够独立解决网页编辑中遇到的一般问题，能熟练运用Dreamweaver进行网站的导入、规划、管理、发布的相关技术及网页制作的操作技能；能熟练掌握JAVASCRIPT脚本编程语言的基本语法知识，能实现网页的交互和特殊效果；能维护、管理和设计WEB应用程序；能独立设计小型WEB站点。

（四）学时数与学分数：本课程教学总学时为72课时,4学分，理论48学时，实践/实验24学时。

具体学时分配参照下表。

（五）适用对象：网络与新媒体专业。

（六）课程编码：二、教学内容与学时分配三、教学内容与知识点第一章初识网站和网页第一节网站和网页知识点：网站和网页的概念。

第二节网页中的元素类型知识点：行元素、块元素。

第三节常用网站管理制作软件知识点： Dreamweaver、flash。

第四节网站建设流程知识点：网站建设流程。

第五节 Html与CSS入门知识点：html概念、css概念。

第二章初识Dreamweaver第一节熟悉Dreamweaver操作环境知识点：Dreamweaver操作环境。

第二节网站规划与管理知识点：网站规划原则、管理方法。

第三章网页布局方法第一节使用表格布局网页知识点：表格布局方法。

第二节使用框架布局网页知识点：框架布局网页方法。

《网页制作及设计》教学大纲学时：72 学时课程类别：专业必修课适用专业：软件技术一、课程的性质及任务课程的性质：本课程是一门专业基础课，要求学生掌握HTML、css和dreamweaver制作网页的知识和技术，同时为后续课程的学习奠定基础。

课程的任务：通过本课程的学习，使学生了解网站开发的流程，掌握HTML和CSS技术实现网页的构建和美化，并用dreamweaver CS5工具实现网页的制作。

前导课程：计算机应用基础后续课程：Javascript、 Java Web组件编程等二、教学基本要求本课程以《计算机应用基础》课程为基础，通过本课程的学习，应使学生掌握网页制作的基本方法，掌握HTML、CSS等网页基础编程知识，并使用主流工具Dreamweaver CS5进行网页制作。

三、教学条件多媒体教室，安装Adobe Dreamweaver CS5的一体化实训室四、教学内容及学时安排（一）优秀网页赏析教学时数：4教学目标：1.理解网站相关的概念。

2.了解网页的基本组成元素3.理解网站的主题定位，风格和网站布局。

4.制作第一个简单的静态网页教学重点难点：1. 理解网站的定位和风格2、学习模仿网页的色彩搭配2. 分析网站的布局3. 能模仿制作一个简单网页。

教学方法：案例演示、理论讲解教学案例：海尔集团网站（企业类）、携程旅游网（旅游类）、中国大众体育网（体育类）、新东方教育（教育类）、往届优秀毕业设计答辩系统、一个简单的静态网页理论教学内容：1. 不同行业网站赏析2. 网页及网站的概念和术语。

3. 网页组成元素。

4. 网站的策划及设计原则。

5. 网站的开发流程6. 应用HTML、CSS制作第一个简单静态网页实践教学内容：1.第一个静态网页实验目的：锻炼学生学会使用记事本编辑静态网页，使学生熟悉HTML标记语言和认识HTML语言的结构；提升学生学习兴趣和自信。

实验要求：要求学生会使用HTML搭建网页架构；在合适位置插入CSS代码并体会使用HTML制作网页的方法。

《网页设计与制作》课程教学大纲课程编号:课程名称：网页设计与制作课程类型:专业基础课总学时：64 讲课学时：32 实验学时：32适用班级:一、课程性质、目的和任务：（加粗，以下同）1、目的本课程要求学生掌握基本的HTML语言。

学会使用Dreamweaver开发工具进行网页设计。

这是一门重在实践的科目，因此需要学生多上机、多进行实际操作，把老师所教授的各种网页制作、版面设计以及程序熟练制作或调试出来，并且能够在此基础上有所创造、有更进一步的发挥。

2、任务本课程的主要任务是介绍利用Dreamweaver开发工具进行网页设计，包括新建、编辑和设置一个Web站点；如何对页面属性进行基本的设置，如何设置、编辑CSS层叠式样式表；如何排版文字、表格和层；如何进行基本的图像处理；建立框架；模板和库的使用和编辑；网站的发布与维护等基本知识与应用。

目的是通过本课程的学习，培养学生的实际动手能力和计算机的操作能力，能够运用所学的知识进行网页设计。

二、教学基本要求：（分三级：掌握、理解、了解）1．掌握：要求学生能够全面掌握所学内容，并能够用其分析、应用与Dreamweaver网页设计相关的问题，能够举一反三。

2．理解：要求学生能够较好地理解与Dreamweaver网页设计相关的问题，并且能够进行简单分析和判断。

3．了解：要求学生能够一般地了解的所学内容。

三、教学内容及要求：第1章Dreamweaver基础教学内容：Dreamweaver 的历史和简介Dreamweaver 的安装过程Dreamweaver 的全新界面改进的设计与开发环境主菜单介绍对象控制面板介绍教学要求：掌握：Dreamweaver的基本特点、新增功能及界面组成。

基本操作，如安装、新建、打开、导入、保存、关闭等。

理解：新增功能、界面组成的优点。

了解：Dreamweaver可以为我们做些什么。

第2章网页设计语言基础教学内容：HTML及XHTML语言介绍常用的网页语法标记教学要求：理解：HTML及XHTML语言介绍，常用的网页语法标记第3章文本和图像处理教学内容：文本属性面板编辑文本和插入对象设置文本的格式编号与项目符号在网页中插入图像图像的应用教学要求：掌握：设置文本属性和格式；编号与项目符号的使用；插入、编辑和排版图像。

学习领域课程标准目录一、课程性质 (1)二、课程目标 (1)（一）典型工作任务 (1)（二）专业能力与知识目标 (2)三、课程内容安排、课程任务 (10)（一）课程结构、课程任务、课程内容 (10)（二）实践教学体系 (17)（三）认证培训 (18)四、教学方法、教学活动与作业 (18)（一）课程范型 (18)（二）问题中心课程 (18)（三）项目中心课程 (18)（四）证书培训中心课程 (20)（五）主要教学方法 (20)五、专业素质和职业素养教育 (21)六、课时安排 (21)（一）考核评价模式 (22)（二）考核评价类型与分值 (24)（三）考核评分点及评分标准 (25)七、教材及教参 (25)（一）教材 (25)（二）教参 (26)一、课程性质本课程是为本院计算机网络技术专业的学生所开设的一门专业技术课程，本课程的目的是让学生在已学完计算机基础、计算机网络等课程的基础上进一步掌握网页设计的基本技能。

为今后网站艺术设计、设计动态网页奠定基础。

对今后从事网页设计的学生，为深入掌握DIV+CSS 奠定基础。

职业面向：从事网页设计与制作、网页美工职业拓展：网站建设、搜索引擎优化二、课程目标通过本课程的学习，使学生具备手工编写HTML 代码的能力，能够使用Dreamweaver及photoshop工具设计一个完整的静态网站的能力并具有建立站点、管理站点、测试网站与发布网站的能力，具有良好的团队合作精神、获取知识能力、网页设计创意思维能力、色彩感悟能力等素质，达到职业技能鉴定网页制作（Dreamweaver 平台）中高级水平。

（一）典型工作任务根据“计算机网络技术专业培养方案”和职业岗位工作任务分析，确定《网页设计与制作》学习领域，如表1 所示。

表 1 学习领域设计表（二）专业能力与知识目标根据表1 学习领域设计表，确定专业能力与知识目标见如下表2 所示。

表 2 专业能力与知识目标（三）学习情境按照项目任务的编排方式，整合专业能力与知识目标对学习领域的教学内容进行序化，设计出如下图所示8 个网页设计与制作学习情境：（四）专业素质目标１.具有一定策划能力２.具有一定想象力３.色彩感悟能力４.结构布局能力（五）综合能力和职业素养培养目标1.团队协作精神2.自主学习能力3.沟通能力4.表达能力5.获取知识能力6.创新能力7.乐观精神8.敬业精神9.感悟能力10.知识应用能力11.自我发展能力12．责任感13.效率观念三、课程内容安排、课程任务（一）课程结构、课程任务、课程内容分析课程实施的内、外部环境如表3 所示，结合课程目标确定课程结构、课程任务、课程内容，课程分为八个学习情境，“东营培训网”网站制作项目分解到相应的教学单元，如表4 所示。

《网页设计与制作》教学大纲英文名称：Web Design and Production课程代码：221001005课程类别：专业基础课课程性质：必修开课学期：大一第2学期总学时：36（讲课：36）总学分：2考核方式：平时考勤、作业、课堂表现、期末大作业先修课程：计算机基础适用专业：网络与新媒体专业一、课程简介课程是网络与新媒体专业专业基础课，授课学期为大一第二学期，先修课程为《计算机基础》、《计算机网络技术》，后续课程有《动态网页设计》、《新媒体产品设计与管理》、《搜索引擎优化》等。

本课程依据网页设计员、网页制作员、网站管理员所应具备的职业能力，参照计算机高新技术网页制作员4级标准，以互联网上具体企业网站为工作任务，重点培养学生解决实际问题的能力，充分体现“职业性”的特点。

每个模块包含“知识拓展”和“能力拓展”部分，给学生留出足够的拓展空间，引导学生提出自己独特的设计思路，符合高职课程“开放性”的要求。

本课程以学生实践操作为主，要求课程全部在实训室完成，体现高职教育的“实践性”特点。

本课程主要通过理论授课的方式完成教学，授课课时为36学时，考核方式由平时考勤、作业、课堂表现和期末大作业构成。

二、课程目标及其对毕业要求的支撑本课程依据网页设计员、网页制作员、网站管理员所应具备的职业能力，以及计算机高新技术网页制作员（DreamWeaver平台）4级标准，培养学生网页设计与制作的职业能力、认真负责的工作态度、创新进取的学习态度、团结合作的团队精神，培养学生胜任工作岗位的基本技能和综合素质。

三、课程教学要求第一章HTML基础教学内容：第一节 Web技术简介第二节 HTML是什么第三节 HTML入门简介第四节本章总结学生学习预期成果：了解HTML基本概念、web前端技术。

教学重点：无教学难点：无第二章前端开发工具教学内容：第一节前端开发工具第二节新建HTML页面学生学习预期成果：了解前端开发工具，会搭建一个简单的HTML页面。