网页设计与制作

广东省《网页设计与制作》大纲

（代码：13167）

目录

Ⅰ  性质与目标

Ⅱ  考核目标

Ⅲ  内容与考核

Ⅳ  关于大纲的说明与考核实施

附录 题型举例

Ⅰ  性质与目标

一、性质和特点

“网页设计与制作”是数字媒体艺术设计（）中的一门基础课

本以科学和人文艺术基本素养能力交叉融合培养出发讲授标准的网页设计基本知识和基本技能涵盖网页设计和基础知识、HTML 5和CSS 3、DIV+CSS网页布局等内容通过本的使掌握构建网站的基本知识、基本能够熟练网页布局、文本、图像、音频、视频、网页链接、列表与表格、表单、CSS样式等设计、制作网页与维护更新

二、目标

 “网页设计与制作”是一门性很强的本的主要目的是使通过、上机等方式掌握HTML制作网页以及CSS控制、美化网页的并能独立完成完整美观的网页

通过本的应达到以下目标：

1.了解网页的基本概念、创建网页的基本

2.熟练掌握文本、图像、音频、视频、超链接等元素在网页中的

3.熟练掌握列表、表格在网页中的

4.掌握表单的

5.熟练掌握CSS样式的

6.熟练掌握网页布局方法及技巧

三、与相关的联系与区别

本需要有一定的计算机基础和网络基础知识因此本以“计算机基础”、“数字媒体基础”等为先导课

四、的重点和难点

本的重点是网页制作相关内容包括文本、段落、图像 、音频、视频、超链接、列表、表格、表单等构成元素在网页中的

本的难点是对网页的控制和美化包括文本样式、列表属性、背景、布局与定位以及网页布局

Ⅱ  考核目标

本大纲是“网页设计与制作”的个人、和命题的依据本的范围以本大纲所限定的内容为准

本大纲在考核目标中按照识记、领会、三个层次其应达到的能力层次三个能力层次是递进关系各能力层次的含义是：

识记：能够识别和记忆“网页设计与制作”中有关知识点的概念性内容（如中给出的基本定义、语法格式、步骤方法、限定规则和特点等）并能够根据考核的不同做出正确的表述、选择和判断

领会：在识记的基础上能够领悟各知识点的内涵和外延熟悉各知识点之间的区别与联系能够根据相关知识点的特性来解决不同的问题；并能够进行简单的分析

：综合运用HTML和CSS多个知识点通过“内容”与“样式”分离的方式设计网页并通过DIV+CSS的布局方式实现较复杂的功能模块相对完整的网页

Ⅲ  内容与考核

第一章 网页基础知识

一、目的与

1.了解网站、网页和HTML的基本概念；

2.了解HTTP、FTP、IP地址、域名和URL等基本概念；

3.能够安装并使用浏览器查看网页；

4.了解从媒体内容和布局元素两个角度出发网页所包含的基本元素；

5.了解网页开发所使用的基本和工具

二、内容

1.1 HTML简介

1.2 HTML的基本概念

1.3 HTML文件类型

1.4 HTML5概述

1.5 HTML编辑器介绍

1.6 基本元素介绍

1.7 HTML5语义化结构性元素

1.8 HTML的有关约定

1.9 代码规范

三、考核知识点与考核

（一）HTML简介

识记：HTML基本概念；HTML发展历程

（二）HTML的基本概念

识记：HTML；HTTP；浏览器

（三）HTML文件类型

识记：标记符；头部标记符；正文标记符；文档标题

领会：HTML文档的完整结构

：HTML基本结构编写简单网页

（四）HTML5概述

识记：HTML5的新功能；HTML5的新特性

领会：HTML5的新增属性

（五）HTML编辑器介绍

识记：常用编辑器

领会：各编辑器之间的异同及优势

：网页基本元素编写简单网页

（六）基本元素介绍

识记：页面信息元素；段落元素；换行元素

领会：标题元素；文字修饰元素；原样显示元素；分割线元素

：分别不同的工具编辑网页进行比较选择合适的工具

（七）HTML5语义化结构性元素

识记：语义指示符；新增的主体结构元素；新增的非主体结构元素

（八）HTML的有关约定

识记：文件扩展名；代码书写规范；标记规则

（九）代码规范

识记：代码规范

四、本章重点、难点

本章的重点：HTML及其与网页的关系

本章的难点：网页开发所使用的基本和工具

第二章 超链接及HTML 5媒体元素

一、目的与

1.理解路径的概念；

2.掌握基本超链接的创建；

3.掌握同文件锚点链接创建及跨文件的锚点链接创建；

4.掌握网页中图片创建、以及图片超链接、热点实现；

5.掌握网页中音频文件、视频文件创建；

6.掌握网页中其他常用标签的使用

二、内容

2.1 超链接元素

2.2 锚点链接

2.3 图片元素

2.4 HTML 5的视频

2.5 HTML 5的音频

2.6 其他常用元素

2.7 小型案例实训

三、考核知识点与考核

（一）超链接元素

识记：绝对路径；相对路径；根路径

领会：相对路径相比绝对路径的优势

（二）锚点链接

识记：锚点链接的概念

：在同一页面中使用锚点链接；在不同页面中使用锚点链接

（三）图片元素

识记：图片标签

：网页中插入图片并在图片的指定区域设置热点

（四）HTML 5的视频

识记：视频标签

：在网页中插入视频

（五）HTML 5音频

识记：音频标签

：在网页中插入音频

（六）其他常用元素

识记：内嵌元素；块级元素

领会：div与span标记的区别；上标与下标

：在网页中设置滚动文字效果

（七）小型案例实训

：编写代码实现锚点链接和网页间的超链接

四、本章重点、难点

本章的重点：超链接；HTML 5图片、音频、视频的

本章的难点：相对路径与绝对路径

第三章 列表

一、目的与

1.掌握创建无序列表标签；

2.掌握创建有序列表标签；

3.了解定义列表的创建；

4.掌握嵌套列表的创建

二、内容

3.1 无序列表

3.2 有序列表

3.3 定义列表

3.4 列表的嵌套

3.5 小型案例实训

三、考核知识点与考核

（一）无序列表

识记：无序列表标签

领会：type属性

：在网页中创建无序列表

（二）有序列表

识记：有序列表标签

领会：有序列表的项目类型

：在网页中创建有序列表并设置起始值

（三）定义列表

识记：定义列表标签

（四）列表的嵌套

识记：嵌套列表语法格式

：在网页中创建嵌套列表

（五）小型案例实训

：嵌套列表实现二级导航菜单

四、本章重点、难点

本章的重点：无序列表；有序列表

本章的难点：嵌套列表

第四章 表格与框架

一、目的与

1.掌握基本表格的创建；

2.掌握表格常见属性的使用；

3.掌握合并行表格的创建；

4.掌握合并列表格的创建；

5.了解框架表格

二、内容

4.1 表格的组成

4.2 表格的属性

4.3 表格的行属性

4.4 表格的单元格设置

4.5 框架结构

4.6 小型案例实训

三、考核知识点与考核

（一）表格的组成

识记：表格标记；行标记；列标记；表头标记；表格标题

：在网页中创建一个带有标题的规则表格

（二）表格的属性

识记：表格的宽度；表格的高度；表格的对齐方式

领会：表格边框宽度、颜色；表格的背景颜色

：在网页中添加表格并设置表格宽、高、边框属性

（三）表格的行属性

识记：行的高度；行的水平对齐方式；行的边框颜色；行的背景颜色

（四）表格的单元格设置

领会：单元格的的水平跨度；单元格的垂直跨度；单元格的对齐方式

：在表格中实现合并行设置

（五）框架结构

识记：框架的基本结构

（六）小型案例实训

：表格实现个人简历页面

四、本章重点、难点

本章的重点：表格的创建以及设计各种样式的表格

本章的难点：使用表格进行数据布局

第五章 HTML表单

一、目的与

1.了解表单定义和用法；

2.掌握常用基本表单控件；

3.掌握新增表单控件；

4.掌握常用的表单控件属性；

5.能够设计常见的各种表单

二、内容

5.1表单标签form

5.2 input标签-文本框、密码框

5.3 input标签-单选按钮与复选框

5.4 input标签-按钮

5.5 input标签-图像域、隐藏域以及文件域

5.6 列表、文本区

5.7 新的HTML5输入控件属性

5.8 HTML5新增的input元素

5.9 小型案例实训

三、考核知识点与考核

（一）表单标签form

识记：表单标签；表单名称name

领会：处理动画action属性；表单提交方法methond；编码方式enctype

：在网页中创建表单元素

（二）基本表单控件(此处对应5.2节、5.3节、5.4节、5.5节、5.6节)

识记： input标记；多行文本框textarea；单选按钮radio；复选框checkbox；按钮

领会：选择列表select/option/datalist；图像域；隐藏域；文件域

：在网页中添加包含文本框、单选按钮、复选框、列表/菜单以及按钮的表单

（三）新增的HTML5表单控件（此处对应5.7节、5.8节）

识记：url类型；email类型；和；数字类型

领会：color类型；search类型；tel类型

（四）小型案例实训

：表单元素创建用户信息调查表

四、本章重点、难点

本章的重点：表单控件属性的灵活运用

本章的难点：常见表单的设计

第六章 层叠样式表

一、目的与

1.了解CSS的发展及其特点；

2.掌握CSS的语法规则；

3.了解CSS的属性；

4.掌握在网页中使用CSS的常用方法；

5.掌握CSS中的选择器

二、内容

6.1 层叠样式表（CSS）简介

6.2 CSS的语法

6.3 CSS属性值中的单位

6.4 常用CSS属性介绍

6.5 小型案例实训

三、考核知识点与考核

（一）层叠样式表（CSS）简介

识记：CSS概念

领会：CSS的优势

（二）CSS的语法

识记：语法规则；选择器分类

领会：样式引用方式；选择器的命名规则

：使用内部样式表和链入外部样式表控制页面样式

（三）CSS属性值中的单位

识记：相对单位；绝对单位

（四）常用CSS属性介绍

识记：字体属性；背景属性

领会：区块属性；边框属性；列表属性；方框属性

：创建图文混排网页

（五）小型案例实训

：CSS样式在文件内部的、CSS样式的内嵌的以及CSS样式写在外部文件的

四、本章重点、难点

本章的重点：CSS对文本样式的灵活设置

本章的难点：综合运用背景和前景来进行页面基本色调设计

第七章 CSS属性案例-运用CSS创建导航

一、目的与

1.掌握使用CSS+UL创建导航；

2.掌握使用CSS属性实现导航创建；

3.掌握常用CSS属性的使用

二、内容

7.1 使用CSS+UL创建横向导航

7.2 纵向导航

7.3 下拉及弹出式菜单

7.4 小型案例实训

三、考核知识点与考核

（一）使用CSS+UL创建横向导航

：横向导航的实现

（二）纵向导航

：使用Hn+CSS实现纵向导航

（三）下拉及弹出式菜单

：使用JavaScript实现下拉菜单效果

（四）小型案例实训

：使用列表实现纵向导航

四、本章重点、难点

本章的重点：横向导航创建、纵向导航创建

本章的难点：带下拉菜单导航创建

第八章 利用CSS+DIV进行网页布局

一、目的与

1.理解网页布局思想；

2.理解DIV+CSS布局的方法和过程；

3.掌握CSS制作各种样式链接菜单的方法；

4.理解网页的版心和布局；

5.能够制作单列、两列、三列、通栏等各种布局版式的网页并能在这些基础上布局出其他复杂版式；

6.能够使用CSS样式设置分块的位置和细节

二、内容

8.1 网页布局概述

8.2 认识DIV

8.3 网页布局原则

8.4 常见的网页布局分析

8.5 绝对定位与相对定位

8.6 小型案例实训

三、考核知识点与考核

（一）网页布局概述

识记：网页布局概念

领会：网页布局在网页设计中的作用

（二）认识DIV

识记：DIV标签；DIV+CSS布局

领会：DIV+CSS分块方法

（三）网页布局原则

识记：页面尺寸选择；保持一致的风格；导航栏

（四）常见的网页布局分析

识记：版心和布局

领会：单列布局；两列布局；三列布局；通栏布局

：设计并创建个人博客主页和右侧浮动网页

（五）绝对定位与相对定位

领会：绝对定位与相对定位的区别

（六）小型案例实训

：实现博客网页布局框架

四、本章重点、难点

本章的重点：掌握布局思想、掌握DIV+CSS布局的方法

本章的难点：灵活运用布局方法完成各种版面的布局

第九章 网页布局实例

一、目的与

1.掌握个人博客主页和右侧浮动案例的设计方法；

2.掌握复杂网页版面设计

二、内容

9.1 网页布局实例-个人博客主页

9.2 网页布局实例-右侧浮动案例

9.3 小型案例实训

三、考核知识点与考核

（一）网页布局实例-个人博客主页

：实现个人博客主页

（二）网页布局实例-右侧浮动案例

：实现网页右侧浮动页面

（三）小型案例实训

：制作一个网页轮播图静态效果

四、本章重点、难点

本章的重点：个人博客主页设计

本章的难点：右侧浮动案例设计

第十章 过滤、变形和动画

一、目的与

1.掌握CSS 3过滤属性的；

2.掌握CSS的2D变形；

3.掌握CSS的3D变形；

4.掌握CSS 3中的动画；

二、内容

10.1 过滤

10.2 2D变形

10.3 3D变形

10.4 CSS 3动画使用

10.5 小型案例实训

三、考核知识点与考核

（一）过滤

识记：过滤属性：transition-property、transition-duration、transition-timing-function、transition-delay

：通过transition-property属性修改背景色

（二）2D变形

：在横向导航中实现2D移位、倾斜、旋转、缩放效果

（三）3D变形

：在图片上3D位移、旋转、缩放效果

（四）CSS 3动画使用

：使用@keyframes声明动画、使用animation属性调用已声明的动画

（五）小型案例实训

：使用2D变形属性制作照片墙效果

四、本章重点、难点

本章的重点：过滤属性；2D移位、缩放、倾斜、旋转的创建

本章的难点：3D移位、缩放、旋转的创建；CSS3动画属性

第十一章 实战开发——电子产品购物网站首页实现

一、目的与

1.掌握如何综合HTML 5与CSS 3开发网页布局设置；

2.掌握如何综合HTML 5与CSS 3开发Web网站首页

二、内容

11.1 网页top区

11.2 网页导航菜单（menu）区

11.3 主要内容（main）区

11.4 底端（footer）区

三、考核知识点与考核

（一）实现购物网站首页（此处对应11.2节、11.3节、11.4节、11.5节）

：实现购物网站首页

四、本章重点、难点

本章的重点：网页布局

本章的难点：DIV+CSS布局实现

Ⅳ  关于大纲的说明与考核实施

一、大纲的目的和作用

“网页设计与制作”大纲是根据数字媒体艺术设计（）等的结合的特点而确定其目的是对个人、和命题进行指导和

大纲明确了的内容以及深广度了的范围和标准因此它是编写和辅导书的依据是组织进行辅导的依据是者、掌握内容知识范围和程度的依据也是进行命题的依据

二、大纲与的关系

大纲是进行和考核的依据给出了掌握知识的基本内容与范围的内容还包括大纲所的知识的扩展与发挥内容在中可以体现一定的深度或难度但在大纲中对考核的一定要适当

大纲与所体现的内容基本一致；大纲里面的内容和考核知识点里一般也要有反过来里有的内容大纲里就不一定体现

关于

《HTML 5+CSS 3网页设计教程》张星云、彭进香、邢国波编著清华出版社2021版

本的“第1章的第2节、第9章的第3节、第10章的第2节及第11章的第1节”内容可根据个人能力与兴趣不纳入考核范围

四、关于和方法的指导

本大纲的基本是依据和培养目标而确定的基本还明确了的基本内容以及对基本内容掌握的程度基本中的知识点构成了内容的主体部分因此基本内容掌握程度、考核知识点是考核的主要内容

为有效地指导个人和本大纲已指明了的重点和难点在章节的基本中一般也指明了章节内容的重点和难点

本共5其中1由于的个性化特点建议业余不低于80个学时

建议本时注意以下几点：

1.在本之前应先仔细本大纲了解本的性质和特点熟知本的基本在本时能紧紧围绕本的基本

2.在每一章的之前先本大纲中对应章节的目的与、考核知识点与考核以使在时做到心中有数

3.把基本、基本知识与分析、解决实际问题结合起来首先要弄懂基本、基本原理、基本知识和基本方法；其次要运用这些知识联系实际解决有关实际问题重点是要深刻领会内容将知识转化为能力提高运用知识分析问题和解决问题的能力

4.网页设计与制作的目的是用HTML和CSS设计制作实用美观的网页上机是网页设计最有效的因此加强上机HTML编码能力

5.在平时浏览网页时也需多注意观察一些成熟网站的网页布局特点以及网页元素的并在练习中借鉴

五、对的

对担任本的任课教师和单位提出以下几条基本

1.熟知本大纲的各项熟悉各章节的考核知识点

2.辅导教学以大纲为依据不要随意删减内容以免偏离大纲

3.辅导还要注意突出重点要帮生对内容建立一个整体的概念

4.者在辅导时应帮助者梳理重点内容和一般内容之间的关系在他们全面掌握全部内容的基础上深入HTML语法规则、HTML标记及其属性、CSS语法、CSS属性、网页布局等重点内容注意本内容、样式、布局等内容的性

5.辅导要为提供足够多的上机机会注意培养的上机操作能力让能够通过上机进一步掌握相关知识

本考纲内容学时建议：