网页设计与制作课程大纲 | AI生成和翻译
广东省高等教育自学考试
课程：Web设计与制作（实践） 课程代码：13168
一、考核目标
本课程旨在培养学生的Web设计与制作实践能力。学生将掌握Web设计基础知识，熟练运用HTML与CSS语法，能够综合运用HTML5 + CSS3进行网页规划与设计，并熟练掌握常用Web设计软件和浏览器基本设置与使用。
具体考核目标：
- 掌握常用浏览器（Chrome、Firefox、Edge等）的设置与使用。
- 掌握常用Web编辑软件（Visual Studio Code等）的设置与使用。
- 熟练掌握HTML5的基本结构、语法规则以及常用HTML标签的使用。
- 掌握CSS3基本语法与规则、元素选择器类型、常用CSS3属性及其应用场景，以及各种CSS链接方式，能够综合运用CSS3属性美化网页样式。
- 综合运用HTML5 + CSS3进行网页开发与设计，为后续专业学习和职场应用打下基础。
二、推荐教材
《HTML5 + CSS3网页设计教程》 张兴云、彭进香、邢国波 主编 清华大学出版社，2021年版 ISBN: 978-7-302-57284-8
三、考核内容
考核内容注重实践性和基础性，涵盖教材核心实践模块，分为4个模块：
1. 浏览器与编辑器基本操作
- 浏览器：Google Chrome、Firefox、Microsoft Edge基本功能；浏览器差异；设置主页、书签、浏览、重新加载、清除缓存等。
- 编辑器：Visual Studio Code安装与使用；安装常用插件（简体中文、JS-CSS-HTML Formatter等）；创建、编辑、保存、预览Web文件；常用快捷键使用。
2. HTML5网页设计
- HTML基础
文件命名规则、基本结构（<html>,<head>,<body>,<title>), HTML5新特性（DOCTYPE、meta charset、语义化标签）、编写规范、缩进、注释。 - 基本HTML元素
meta,p,br,h1~h6,font,pre,hr等及其属性。 - 超链接与锚链接
绝对/相对/根路径，href与target属性，页内与页间锚链接。 - 图像
插入图像（img），常用格式（BMP, GIF, JPEG, PNG），属性（src,width,height,alt,border,align），图像地图（map,area）。 - 表格
创建规则与不规则表格，属性（width,height,border,colspan,rowspan），标签（table,tr,td,th,caption）。 - 表单
form标签及属性（method,action,enctype），input类型（text, password, radio, checkbox, submit, image, hidden, file），select,option,textarea，HTML5新属性（placeholder,required,autofocus,list/datalist），新input类型（email, url, number, date等）。 - 视频与音频
video与audio标签，支持格式，属性（src,controls,autoplay,loop,height等）。 - HTML5新增语义化元素
结构元素（section,article,nav,aside,header,hgroup,footer,address等）。 - 其他常用元素
行内span，块级div，两者差异，marquee滚动文本。
3. CSS3基础与使用
- CSS基础
与HTML关系、特点与应用场景。 - CSS语法
选择器（元素、类、ID、后代、子、相邻兄弟、通用兄弟），伪类（:link,:visited,:hover,:active），选择器优先级，三种链接方式（外部、内部、行内），命名规范。 - CSS中单位
绝对/相对长度单位，百分比，颜色表示（关键字、十六进制、rgb/rgba）。 - 常用CSS属性（重点）
- 文本/字体：
font-family,font-size,font-style,font-weight,font,color,text-decoration,text-align,text-indent,text-shadow等。 - 盒子模型：
width,height,padding,margin,float,display - 背景：
background-color,background-image,background-repeat,background-position,background-attachment - 边框：
border-style,border-width,border-color,border-radius - 列表：
list-style-type,list-style-image,list-style-position
- 文本/字体：
4. HTML5 + CSS3综合网页开发
- 水平导航条 – 运用
ul/li结合float,display: inline-block等。 - 垂直导航条 – 运用外边距、内边距、边框、背景。
- 网页布局原则 – 结构（DIV）与表现（CSS）分离，头部/主体/底部结构。
- 常用布局技术 – 固定宽度、流动、居中自适应、多列浮动布局，
position: relative/absolute运用，margin: auto。 - 综合网站开发 – 运用DIV+CSS构建完整网站（个人博客、电商首页），常见区块：容器、页头、菜单、主体内容、页脚。
四、考核形式（总分：100分）
- HTML5网页设计题 – 2道综合题（30分）
考察字体、图片、链接、表格、表单、音频/视频、跨浏览器一致性。 - CSS3样式设计题 – 2道综合题（40分）
考察选择器、单位、颜色、字体/块/列表/背景/边框/盒子属性、链接方式。 - HTML5 + CSS3综合题 – 1道题（30分）
DIV+CSS整页布局，多区块，跨浏览器一致性。
五、考试要求
- 形式：完全计算机实践考试（不提供纸质）。
- 时长：90分钟。
- 覆盖：全部4个模块均需考查。
- 难度分布：易20%、中易35%、中难35%、难10%。
六、考试环境要求
- 操作系统：Windows 11
- 浏览器：Chrome、Firefox、Edge（干净，无历史/插件，空白主页）
- 编辑器：Visual Studio Code（预装简体中文、格式化插件）
- 网络：局域网 + 有限互联网访问（仅允许访问考试相关网站）
七、注意事项
- 勤保存文件。
- 文件命名格式：如“考生姓名_html.html”
- 保存到指定文件夹（如：D:\Exam Files）
- 命名或路径错误将影响评分。
八、题型示例
1. HTML5网页设计题
任务：根据提供的截图创建页面。 要求：
- 在指定文件夹创建文件“考生姓名_html.html”
- 插入logo.jpg图片（宽度600px）并居中
- 使用
<h2>居中标题 - 链接“百度”到https://www.baidu.com并在新窗口打开 要点：正确HTML5结构，标签和属性运用得当，跨浏览器显示。
2. CSS3页面设计题
任务：创建一个带有特定样式的课程成绩表格。 要求：
- 使用内部CSS
- 标题：32px蓝色
- 表格：蓝色2px外边框，淡蓝色1px内边框，隔行背景色 要点：表格结构，CSS边框/背景/字体设置，隔行效果。
3. HTML5 + CSS3综合题
任务：创建一个包含页头、居中菜单、左右中段和页脚的完整页面。 要点：DIV+CSS布局，浮动/定位使用得当，边框、背景，无序列表制作菜单，跨浏览器外观一致性。