网页设计与制作HTMLCSS教学大纲

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

（课程英文名称）

课程编号：2

学分：5学分

学时：64学时（其中：讲课学时：45 上机学时：19 ）

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

后续课程：设计网页特效

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

开课部门：计算机系

一、课程的性质与目标

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

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

第一章与网页设计概述（4学时）

[知识点]

?的基础知识

?简介

?简介

?常用浏览器介绍

?工具使用

?利用创建第一个页面

[重点]

?简介

?工具使用

[难点]

?工具创建第一个页面

[基本要求]

?了解版本的发展历程

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

第二章入门（6学时）

[知识点]

?基本语法结构

?标记属性

?常用文本控制标记

?文本格式化标记

?图像标记

?相对路径和绝对路径

?图文混排技巧

[重点]

?基本语法结构

?常用文本控制标记

?图像标记

?相对路径和绝对路径

[难点]

?标记属性的使用

?相对路径和绝对路径

[基本要求]

?掌握基本语法结构

?掌握中常用的文本标记

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

?掌握图像标记的使用

?掌握图片混排常用技巧

[阶段案例]

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

第三章入门（8学时）

[知识点]

?入门知识

?样式规则

?样式表书写位置

?基础选择器

?字体样式属性

?样式外观属性

?复合选择器

?层叠性和优先级

[重点]

?样式规则

?基础和复合选择器

?层叠性和优先级

[难点]

?复合选择器

?优先级

[基本要求]

?理解语法结构

?了解在网页中的重要性

?熟悉书写的位置

?掌握基础和复合选择器

?掌握层叠性和优先级

[阶段案例]

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

第四章盒子模型（6学时）

[知识点]

?盒子模型理论知识

?盒子模型属性

?元素类型的分类

?元素类型的相互转换

?盒子外边距合并问题

[重点]

?盒子模型属性

?元素类型分类

?元素类型相互转换

[难点]

?盒子模型复合属性

?盒子模型总的宽度和高度

?元素类型及其转换

[基本要求]

?理解盒子模型

?掌握盒子模型属性

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

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

[阶段案例]

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

第五章列表与超链接（4学时）

[知识点]

?有序列表

?无序列表

?自定义列表

?控制列表样式

?超链接

?锚点链接

?控制链接样式

[重点]

?无序列表

?自定义列表

?控制列表样式

[难点]

?控制列表样式

[基本要求]

?掌握列表的三种分类

?熟悉列表的嵌套

?熟练掌握控制列表样式

?掌握链接标记的使用

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

[阶段案例]

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

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

第六章表格与表单（4学时）

[知识点]

?表格标记

?表格结构

?控制表格

?表单标签

?表单控件

?控制表单

[重点]

?表格标签

?控制表格和表单

?表单标签

[难点]

?表单标签

?控制表单

[基本要求]

?掌握表格标记的使用

?了解表格结构

?掌握表单标记的使用

?掌握控制表单标记

[阶段案例]

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

第七章浮动与定位（8学时）

[知识点]

?元素的浮动

?清除浮动

?属性

?元素的定位

?属性

[重点]

?元素浮动

?元素定位

[难点]

?清除浮动

?元素定位的分类

[基本要求]

?掌握元素浮动

?熟悉清除浮动的方法

?掌握元素定位及其分类

?熟悉设置层的叠放次序

[阶段案例]

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

第八章高级技巧（6学时）

[知识点]

?精灵技术

?滑动门技术

?负值的应用

[重点]

?精灵技术

?滑动门技术

?负值的应用

[难点]

?精灵原理分析

?滑动门原理分析与切图

?运用负值综合运用

[基本要求]

?掌握精灵图的制作

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

?掌握常见滑动门布局

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

[案例实战1]

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

[案例实战2]

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

[案例实战3]

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

第九章布局与浏览器兼容性（6学时）

[知识点]

?常见网页布局

?通栏布局

?分类

?条件注释

?常见6

?盒子外边距合并

[重点]

?通栏布局

?

?常见6

[难点]

?

[基本要求]

?熟悉网页常见的布局

?掌握网页通栏布局技巧

?掌握

?熟悉 6 下常见的

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

[知识点]

?建立站点

?页面分析

?首页切图

?制作头部

?制作

?制作主体

?制作底部版权

[重点]

?制作页面首页

[难点]

?制作页面首页

[基本要求]

?了解一个网站制作流程

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

?掌握切图技巧

?掌握首页布局

[实战开发]

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

第十一章实战开发(下)—传智播客设计学院子页面（6学时）

[知识点]

?利用制作模板文件

?使用模板文件

?引用模板文件

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

[重点]

?利用制作模板文件

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

[难点]

?利用制作模板文件

[基本要求]

?掌握利用制作模板文件

?熟悉模板文件引用

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

[实战开发]

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

关于我们页面效果图

课程介绍页面效果图

课程介绍详情页面效果图

三、学时分配

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

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

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

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

六、大纲说明

本课程的授课模式为：课堂授课+上机，其中，课堂主要采用多媒体的方式进行授课，并且会通过测试题阶段测试学生的掌握程度；上机主要是编写程序，

要求学生动手完成指定的程序设计或验证。

撰写人：审定人：批准人：执行时间：

网页设计与制作课程标准

《网页设计与制作》课程标准前言： 《网页设计与制作》是理实一体化课程，是计算机专业（软件与信息服务、数字媒体、计算机应用专业）的一门重要的专业必修课。本课程定位于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.选择题 (1) 目前，在Internet里，IP地址是（）的二进制地址。 A．8位 B.16位 D.32位 D.64位 (2) 下列不属于Macromedia公司产品的是（）。 A．Dreamweaver B. Fireworks C. Flash D. Frontpage (3) 通常网页的首页被定义为（）。 A．index.htm B. 首页.htm C. shouye.htm D. 都不对 (4) 网页的基本语言是（）。 A. JavaScript B. VBScript C. HTML D. XML (5) 网页在Internet 上是通过URL来指明其所在的位置的，每个不同的网页都应该有不同的URL，比如sina网站主页的URL就是（）。 A．https://www.wendangku.net/doc/b116447315.html, B. http:\\https://www.wendangku.net/doc/b116447315.html, C．ftp://https://www.wendangku.net/doc/b116447315.html, D. mailto: https://www.wendangku.net/doc/b116447315.html, 2.简答题 (1) 什么是Internet？叙述Internet的产生与发展。 (2) 什么是WWW？如何访问WWW？ (3) IP地址与域名之间的关系如何？ (4) HTML文件中的标签是否区分大小写？格式有无严格要求？ 解答： １．选择题： 1）C 2）D 3）A 4）C 5）A 2．简答题：略 第二章练习题 1. 简答题 (1) 简述定义本地站点的流程。 解答： 1．简答题：略 第三章练习题 1. 选择题 (1)网页中常用的图像文件格式包括（）。 A．JPG、BMP、GIF B．JPG、GIF、PNG C．BMP、PNG、GIF D．MP3、JPG、GIF (2)在插入导航条时，（）是必须的。 A．按下图像 B．替换文本 C．状态图像 D．鼠标经过图像 (3)单击（）会跳转到当前页面某个位置，却不会打开新的网页文件。

自考 29942 网页设计与制作

高纲1349 江苏省高等教育自学考试大纲 29942 网页设计与制作（实践） 南京大学编 江苏省高等教育自学考试委员会办公室

Ⅰ课程性质与课程目标 一、课程性质和特点 《网页设计与制作》是为江苏省自学考试“计算机及应用”、“计算机信息管理”或相关专业专科段学生开设的专业基础课，是一门不进行理论考试而仅参加实践考核的课程。本课程重点培养学生基本的网页设计和制作技能，要求学生在自学理论知识的基础上，培养动手能力，加强实践环节，并能熟练使用相关工具软件。 二、课程目标 网页是互联网最常见的应用之一，是人们获取和发布信息的主要途径。本课程从实际应用出发，培养学生了解网页设计和制作基础知识，学习和初步掌握：网页设计和制作、网页编写语言及网站规划和管理的实际能力。通过课程实践考核，要求学生能上机实验验证相关理论知识，设计、制作、修改或完善指定内容的网页，初步掌握网站建设和开发流程、熟悉站点的上传和维护并能独立解决网页编辑中遇到的一般问题，具有一定的计算机网络信息发布常识。 通过本课程的学习，应达到以下目标： 1．理解Fireworks和Dreamweaver软件界面，并能熟练独立进行操作； 2．重点掌握Fireworks画布、图层、修饰位图、绘制矢量图形、文本特效的操作； 3．重点掌握Fireworks图像切片、元件与实例的操作，并灵活运用； 4．重点掌握Dreamweaver基础网页制作、链接的使用、插入多媒体元素的操作； 5．重点掌握Dreamweaver表格、框架、模板的灵活应用。 三、与相关课程的联系与区别 本课程需要具有一定计算机基础知识，程序设计语言基础知识及计算机网络基础知识，因此，要以本专业的“计算机应用技术”、“计算机网络技术”、“高级语言程序设计”等作为先导课程。在学习完毕本课程后，将来可以为“网络信息编辑”、“多媒体技术”等课程，或进行本科段的深造打下坚实基础。

网页设计与制作大纲

《网页设计与制作》大纲 一、课程的地位与性质 “网页设计与制作”是中职动漫设计与制作专业的职业技术课程，重点讲述网页设计与制作的基础知识、基本理论和基本技能，是一门包含了网页、网站的概念、网页主要工具软件HTML、dream weaver中文版的使用等诸多知识的操作性极强的技能型应用课程。“网页设计与制作”以“信息技术与应用”和“计算机辅助平面设计”为前期基础课程。 二、课程的任务与目的 通过对网页设计与制作基础知识和技能的学习，使学生系统了解网页、网站的概念、网页主要工具软件dream weaver的使用等基础知识，熟练运用网页制作的工具软件，使学生具有网页、网站制作的知识与能力，具备应用电脑独立开发网页、网站并将网站上传并测试的技能，具备解决网页设计、网站开发中出现各种问题的能力。本课程培养学生的职业素养和创新能力，为日后走向工作岗位打下理论与实践基础。通过本课程的学习实现学生思想过硬、理论基础扎实、实际工作能力强的教学目标。 三、课程总体结构、教学环节和课时分配 四、教学内容 第一章概述2学时 教学目的： 了解网页及网站基本概念及网页的基本要素分析 教学重点与难点： 网页、网站设计流程，网页基本要素

第一节网页和网站 一、网页 二、网站 三、网页的基本功能 第二节网页中的主要元素 一、文本 二、图像 三、链接标志 四、其他的基本要素 第三节网页制作工具 一、网页编辑工具 二、网页图像编辑工具 三、动态网页技术 第四节网页设计的基本流程 一、网站的设计流程 二、网页的设计与制作 三、网页的测试 四、网页上传和发布 第二章HTML语言基础2学时 教学目的： 了解HTML文件的基本结构，掌握HTML中文本的编辑及图像的语法，掌握HTML 中各种设置超级链接的语法，掌握HTML中表格和框架的基本语法。教学重点与难点： HTML的语法结构、超级链接的语法、表格和框架的基本语法。 第一节HTML 概述 一、HTML简介 二、HTML语法结构 第二节文本的编辑 一、段落标记 二、文本标记 三、标题显示等级 四、列表 第三节图像编辑 一、插入图像 二、使用背景图像

网页设计与制作

《网页设计与制作》教学大纲 第一部分大纲说明 一、课程的性质和任务 《网页设计与制作》是高等职业学校计算机专业的一门必修的专业基础课。本课程讲述了网站创建、网页制作基本知识、Dreamweaver网页制作集成工具使用的方法等内容。通过本课程的学习，使学生掌握构建网站的基本知识，熟悉网页开发平台的使用，能够独立的创建个人网站。 二、课程教学要求 1、理论和实践相结合 本课程是计算机专业的一门必修的专业课程，是理论和实践相结合的课程。该课程重点是构建网站的基本知识，，熟悉网页开发平台的使用，能够独立的创建个人网站。在教学过程中要与Dreamweaver MX、Flash MX和Firework MX 结合起来，同时，应该使课堂理论教学与学生参与专业实践相结合，在课外安排一定的时间进行专业实践，这样学生在学习中，通过理论学习和上机操作实验熟悉构建网站的流程，能够进行简单图像和动画的制作、加工和处理，能够独立的创建个人网站。 2、加强课堂练习与课后练习

为了训练和培养学生的实际操作能力，必须要求学生进行课堂练习与课后作业练习，加强学生的专业技能和基础理论的学习。 三、教学时数与教材 网页设计与制作课程教学总学时数为54学时，其中授课时间为32学时，实验课时为22学时；《网页设计与制作》，田博文编著，人民邮电出版社，2004年。 四、课程教学方法 在网页设计与制作的教学中应当注意： 1、教学方法 本课程应采用理论与实践结合，讲授与自学结合，实践操作与课堂讨论结合的“三结合”教学方法。 2、教学形式 本课程的教学形式可以采用班组教学、课堂讲授、利用业余时间自学等形式。 3、实践性环节教学要求 本课程具有较强的实践性和应用性，教学过程中应该贯彻理论与实践相结合的原则，有重点的组织一些课堂讨论和实践操作以及单元测试，督促并检