课程名称

（中文）网站制作

（英文）website production

课程代码

2030359

课程学分

2

课程学时

32

理论学时

8

实践学时

24

开课学院

新闻传播学院

适用专业与年级

新闻传播专业

一、二年级

课程类别与性质

选修课

考核方式

考察

选用教材

【《网页设计与网站建设从入门到精通》,作者: 龙马高等教育 著,出版社:北京出版社。】

是否为

马工程教材

是

先修课程

【网站内容设计学分2】

课程简介

课程主要讲述互联网及网站制作的基础知识，并能够运用相关软件构建基础网页与网站。包含网站内容设计与制作，网页与网站的制作。是一门理论与实践相结合的课程。本课程建议课时数32，其中实践课时数16，共计4学分

选课建议与学习要求

本课程前应开设《网站内容设计》课程，以使学生有相应的网站图形表现基础和创意策划能力。课程结束后可与高年级的实训实习结合，在实习实训中检验学到的知识与能力。

大纲编写人

（签名）

制/修订时间

2023.12

专业负责人

（签名）

审定时间

2024.03.01

学院负责人

（签名）

批准时间

2024.03.01

LO1品德修养：拥护中国共产党的领导，坚定理想信念，自觉涵养和积极弘扬社会主义核心价值观，增强政治认同、厚植家国情怀、遵守法律法规、传承雷锋精神，践行“感恩、回报、爱心、责任”八字校训，积极服务他人、服务社会、诚信尽责、爱岗敬业。

①爱党爱国，坚决拥护党的领导，热爱祖国的大好河山、悠久历史、灿烂文化，自觉维护民族利益和国家尊严。

LO2专业能力：具有人文科学素养，具备从事信息传播工作或专业的理论知识

③掌握进行网站设计制作发布、推广活动策划能力。

LO3表达沟通：理解他人的观点，尊重他人的价值观，能在不同场合用书面或口头形式进行有效沟通。

②应用书面或口头形式，阐释自己的观点，有效沟通。

LO4自主学习：能根据环境需要确定自己的学习目标，并主动地通过搜集信息、分析信息、讨论、实践、质疑、创造等方法来实现学习目标。①能根据需要确定学习目标，并设计学习计划。

实验1：（网站可行性报告+思维导图）

一、实验目的

网络搜索知识、网站制作基础知识。

二、实验要求

对竞品网站进行数据分析。

三、实验内容

网站可行性报告+思维导图。

四、实验准备

1、网站可行性报告+对竞品网站进行数据分析。

2、网站思维导图。

五、实验步骤

1.准备阶段（对竞品网站进行数据分析）

2.消化阶段（确定不同部分的考核要求和要点）

3.对比阶段（对比自身，查漏补缺，重点对竞品数据分析）

4.提高水平

六、实验学时

4学时。

七、实验考核与评价

学生以小组为单位进行网站可行性报告-数据分析+网站思维导图。

本实验从以下几个方面作出评价：

 1.网页分析报告应该主题明确，结构完整，内容全面，叙述清晰，说服力强。对网站从功能、内容、设计与交互等方面进行分析与评价，从而进行网站设计定位

 2.报告包括封面，目录，主体内容和结论等内容。（目录按指定要求编写）括整个网站的内容介绍、版面编排设计风格、网页设计的主要创意创作过程及技术手段等内容并配有网页效果图及站点结构。

 3. 网页分析报告以ppt的形式上交。内容应该图文并茂，排版美观。策划报告中有效内容至少20页，文件必须可以在PowerPoint2003中打开。

 3. 提案报告以DOC的形式上交。内容应该图文并茂，排版美观。提案报告要求800——1000字左右，文件必须可以在WORD中打开。并能够将品牌视觉形象设计融入于网站设计中。学生能够分析、鉴赏优秀设计网站，能够综合运用电脑（图像、图形处理）软件进行预想图绘制，能够进行类型网站的主页设计，要求同时展现图标、图形、按钮、导航条等网页元素，并初步进行用户可用性的思考。学生要从建立观念做起，充分利用已有的设计知识与经验，并在此基础上循序渐进的学习。

实验2：（网页设计制作）

一、实验目的

通过不同设计风格的设计学习，掌握网站首页效果的制作。

二、实验要求

PS网站首页效果图设计制作+切片html文件。

三、实验内容

在规定时间内，1.网站首页效果和各种链接及相应的动画效果，需有二级以上链接（含二级）

 2.所有链接有效、准确。首页与一级页面不得少于5P。

四、实验准备

1、PS制作首页效果图

2、不同设计风格的学习。

五、实验步骤

 1.网站首页效果和各种链接及相应的动画效果，需有二级以上链接（含二级）

 2.所有链接有效、准确。首页与一级页面不得少于5P。

所有元素齐全、有效（1-网站栏目结构，规划，页面策划

 -网站 Logo的特点，设计规范，表现形式

 -网站图标，图标设计原则，图标应用

 -按钮的功能，设计出色的网站按钮

 -网站导航，导航在界面中的布局位置，导航设计的基本原则

 -的常见类型，如何设计出色的网站广告

）

 4.网页页面编排美观-简单界面架构和复杂的设计元素

 5.技术运用合理

 6.能体现网站策划书的成果

 7.板块划分合理

 8.网站中要有与主题相关的动画呈现。

六、实验考核与评价

网站结构清晰，布局合理、规范色相，明度，饱和度，色调

 -色彩具备合适的敏感度-网页配色的基本方法-主题色，背景色，辅助色，点缀色-网页与文本的配色关系-网页元素色彩搭配-根据受众群体选择网页配色-色彩对比的配色

 UI界面色彩，结构，背景，特殊元素设计一致性。

能够根据UI设计一致性、层次性、情感性的要求进行设计。

情感化设计的指标-独立分析解析常见的界面风格，并做到能够设计出符合风格需要的界面布局

实验3：（网站内容制作）

一、实验目的

能独立制作一个包含分页面跳转和效果的独立网站。

二、实验要求

网站图标，图标设计原则，图标应用

三、实验内容

分组制作一个包含分页面跳转和效果的独立网站。。

四、实验准备

1、首页效果图的制作

五、实验步骤

 1.网站首页效果和各种链接及相应的动画效果，需有二级以上链接（含二级）

 2.所有链接有效、准确。首页与一级页面不得少于5P。

所有元素齐全、有效（1-网站栏目结构，规划，页面策划

 -网站 Logo的特点，设计规范，表现形式

 -网站图标，图标设计原则，图标应用

 -按钮的功能，设计出色的网站按钮

 -网站导航，导航在界面中的布局位置，导航设计的基本原则

 -的常见类型，如何设计出色的网站广告）

 4.网页页面编排美观-简单界面架构和复杂的设计元素

 5.技术运用合理

 6.能体现网站策划书的成果

 7.板块划分合理

 8.网站中要有与主题相关的动画呈现。

六、实验考核与评价

学生分组进行设计制作。

本实验从以下几个方面作出评价：

网站结构清晰，布局合理、规范色相，明度，饱和度，色调

 -如何培养色彩的敏感度

 -网页配色的基本方法

 -主题色，背景色，辅助色，点缀色　

 -网页与文本的配色关系

 -网页元素色彩搭配

 -根据受众群体选择网页配色

 -色彩对比的配色

 UI界面色彩，结构，背景，特殊元素设计一致性。

能够根据UI设计一致性、层次性、情感性的要求进行设计。

情感化设计的指标-独立分析解析常见的界面风格，并做到能够设计出符合风格需要的界面布局

《网站制作》课程以Web应用系统开发流程为主线，系统介绍了HTML语言的常用标记的作用与应用方法，CSS语言的规则、选择符、常用属性作用与应用方法， JavaScript程序设计与开发等内容。课程主要面对大学一年级新生，在课程教学过程中需要进行注重知识传授与思政元素相互融合，加强对学生职业素养的认知教育，引导学生树立正确的价值观与人生观。

德育目标：加强理想信念教育，教育引导学生树立共产主义远大理想和中国特色社会主义共同理想，立志肩负起民族复兴的时代重任。加强社会主义核心价值观教育，把社会主义核心价值观渗透到课程教学过程中，弘扬主旋律，传播正能量，在潜移默化中引导学生树立正确的世界观、人生观、价值观。

专业目标：突出培养学生的科学精神、探索创新精神、严谨求实精神。培养学生分析问题、解决问题、终身学习的能力，培养学生在团队协作中团结合作、沟通表达的能力，培养学生在工作中的职业素养和工程规范的能力，培养学生注重网络空间的法治意识，信息安全意识等专业相关领域的信息安全的规范要求。

总评构成

占比

考核方式

课程目标

合计

1

2

3

4

X1

20%

网页分析报告

50

50

100

X2

40%

网页设计作品

30

70

100

X3

40%

网站内容制作

50

50

100

考核项目

课

程

目

考核要求

评价标准

优

100-90

良

89-75

中

74-60

不及格

59-0

X1

1

热爱中国文化，爱党爱国

热爱中国文化，以爱党爱国为荣

较热爱中国文化，愿意爱党爱国

对中国文化无感，无爱党爱国的强烈意愿

无学习热情。

2

能根据需要确定学习目标，提早练习，准备设计素材

能达到正确分析竞品网站+网站思维导图

能达到分析竞品网站+网站思维导图

能达到分析竞品网站

不能通过分析竞品网站+网站思维导图

X2

1

背景恰当、美观。网站中的图形与文字排版设计，图形与文字的使用技巧，页面布局与视觉风格美观。

实现界面视觉布局的概念、基本形式和要点，

首页有导航条，设置准确

，各页面LOGO与图标设计风格一致性美观，能准确显示网页中各要素（图片、动画等）

背景恰当。网站中的图形与文字排版设计，图形与文字的使用技巧，页面布局与视觉风格合理。

实现界面视觉布局的概念、基本形式和要点，

首页有导航条 ，各页面LOGO与图标设计风格一致性美观，能准确显示网页中各要素（图片、动画等）

网站中的图形与文字排版设计，图形与文字的使用技巧，页面布局与视觉风格合理。

首页有导航条 ，各页面LOGO与图标设计风格一致，能显示网页中各要素（图片、动画等）

无设计效果

X3

1

网站结构清晰，布局合理、规范色相，明度，饱和度，色调，UI界面色彩，结构，背景，特殊元素设计一致性。

网站结构清晰，布局合理、规范色相，明度，饱和度，色调，UI界面色彩，结构，背景，特殊元素设计一致性。

情感化设计的指标-独立分析解析常见的界面风格，并做到能够设计出符合风格需要的界面布局，背景恰当、美观。网站中的图形与文字排版设计，图形与文字的使用技巧，页面布局与视觉风格，常见网页视觉风格

实现界面视觉布局的概念、基本形式和要点，首页有导航条，设置准确，各页面LOGO与图标设计风格一致性美化，能准确显示网页中各要素（图片、动画等）

网站结构，布局合理、规范色相，明度，饱和度，色调，UI界面色彩，结构，背景，特殊元素设计一致性。

情感化设计的指标-独立分析解析常见的界面风格，并做到能够设计出符合风格需要的界面布局，背景恰当。网站中的图形与文字排版设计，图形与文字的使用技巧，页面布局与视觉风格，常见网页视觉风格

实现界面视觉布局的概念、基本形式和要点，首页有导航条，设置准确，各页面LOGO与图标设计风格一致，能显示网页中各要素（图片、动画等）

网站中的图形与文字排版设计，图形与文字的使用技巧，页面布局与视觉风格合理。

无设计效果

无。