课程

中国大学MOOC,为你提供一流的大学教育

hi,小mooc
期末考试会员
SPOC学校专有课程
网站视觉设计
第1次开课
开课时间: 2021年03月07日 ~ 2021年07月27日
学时安排: 9小时每周
当前开课已结束 已有 31 人参加
老师已关闭该学期,无法查看
spContent=本课程采用工作流程+(教育类)项目+任务驱动的教学模式,以培养综合应用能力为主线,通过网站建设项目,学生在完成网站策划、网页设计与制作、网站测试与发布的过程中,掌握Web前端设计的相关规范、HTML超文本标记语言、CSS样式等基本知识和操作技术,可为将来学习更多Web相关技术打下基础。从文化自信的角度,为未来人提供科技盛宴带来的有艺术媒体特色的媒体作品,让教育类项目有情怀,有感悟,促进社会主义接班人更好地学习。
本课程采用工作流程+(教育类)项目+任务驱动的教学模式,以培养综合应用能力为主线,通过网站建设项目,学生在完成网站策划、网页设计与制作、网站测试与发布的过程中,掌握Web前端设计的相关规范、HTML超文本标记语言、CSS样式等基本知识和操作技术,可为将来学习更多Web相关技术打下基础。从文化自信的角度,为未来人提供科技盛宴带来的有艺术媒体特色的媒体作品,让教育类项目有情怀,有感悟,促进社会主义接班人更好地学习。
—— 课程团队
课程概述

1. 为什么要学习这门课程? 

      网站视觉设计,是从品牌设计为出发点,以web UI设计为基础,帮助学生理解四原则:把握视觉焦点、层次结构、艺术设计的份量、视觉方法。在信息技术时代,网络信息的搜集、处理及发布是基本技能,而Web前端设计是信息发布的基础,了解和掌握HTML、CSS及JavaScript的相关知识和技术非常必要。


2. 这门课程讲些什么?  

      网站视觉设计课程以培养综合应用能力为主线,通过网站建设项目,使学生在完成网站策划、网页设计与制作、网站测试与发布的过程中,掌握Web前端设计的相关规范、HTML超文本标记语言、CSS样式等基本知识和操作技术,可为将来学习更多Web相关技术打下基础。


3. 学习这门课程可以获得什么?

      通过课程的学习,你将了解网站视觉设计的发展现状和趋势,理解Web前端设计规范;掌握HTML5、CSS3和JavaScript的基本知识;掌握Web前端设计基本技能,能够应用HTML5、CSS3和JavaScript合理地设计和制作网页;能够遵守网络信息发布与传播的基本规范和相关法律法规;鼓励对网站等跨平台设计的现当代特点,进行开拓创新和实战探索。


4. 这门课程有什么特色?

      课程基于OBE理念,采用工作流程+(教育类)项目+任务驱动的教学模式,按照基础知识、操作技能、应用提高三个层次组织教学(如图所示)。

      l  基于网页设计与制作的过程,确定网站主题——收集处理素材——搭建框架结构——填充页面内容-——定义网页样式——实现交互功能——测试发布网站,以建设项目网站为工作任务,通过任务实践提升实践应用能力。

      l  基于工作过程的理念解构课程内容,分解项目案例,提取典型任务,设计教学单元;再拆分为若干个教学任务,设定每个教学任务的学习目标、知识点和技能点;再整合、序化教学内容,构建课程框架及内容体系。

      l  教学内容分层分模块(基础知识、操作技能、应用提高三个层次,基础知识、HTMLCSS、综合应用四个模块),不同水平的学生可依据需求选择不同阶段的内容开始学习。


授课目标

通过课程的学习,学生能够达到的知识、能力和素质目标如下:

1. 知识目标

  • 掌握网站视觉设计规范。

  • 掌握HTML5、CSS3和JavaScript的基本知识。

2. 能力目标

  • 了解Web技术的发展现状和趋势,基本掌握Web前端设计技能。

  • 能够根据不同的需求完成html5基础应用、网页多媒体制作、模块网页设计、跨平台界面制作,焦点广告设计、网站开发等。

3.素质目标

      在建党一百周年即将来临之际,引导学生在社会主义核心价值观的引领下,坚定社会主义制度的优越性。

  • 能够遵守网络信息发布与传播的基本规范和相关法律法规。

  • 能够秉持正向思维与教师和同学进行交流和讨论。

成绩 要求

考核方式:

  • 过程考核:单元测验(共5次,占30%)和互动(讨论3次和答辩1次,占10%),考察理论知识掌握的情况。

  • 阶段性考核:单元作业(共2次,占30%),考察实践操作的能力。

  • 终结性考核:期末大作业(完善自建互动媒体网站,占30%),考察运用所学知识解决问题的能力。


成绩评定:单元测验占30%+单元作业占30%+期末大作业占30%+讨论占10%。

评分标准采取百分制,总分60-84分为合格;85分及以上为优秀。


 制作要求:     

       请综合应用Mugeda、Afftereffect、Premiere、C4D、Dreamweaver等相关软件。

       期末大作业需要上交:网站艺术设计策划ppt、网站二维码、网站可点击的录频文件、网站中相关内容的视频动画类源文件和发布文件等。

课程大纲
导论
课程介绍
课程导学
Web基础知识
任务1:初识网页和网站
任务2:了解Web前端设计技术与工具
任务3:理解Web相关概念
任务4:了解网站建设流程
单元测试
网站视觉艺术策划
任务1:形象设计
任务2:布局设计
任务3:导航及栏目设计
任务4:页面层次结构及目录设计
单元测试
作业 网站视觉艺术策划
首页文档创建
任务1:创建网站首页
任务2: 理解HTML标记语法
任务3:理解HTML布局-div标记和span标记
任务4:理解HTML5结构标记
单元测试
首页内容编辑
任务1:插入文本及列表
任务2:插入图片和媒体
任务3:设置超链接和应用框架
任务4:应用表格和表单
单元测试
单元作业 网站内容编辑
重点是图文设计、动画、视频等媒体艺术设计
首页样式设计
任务1:理解CSS语法
任务2:网页应用CSS样式方法
任务3:理解CSS选择器
任务4:理解CSS层叠性和继承性
单元测试
设置CSS样式
任务1:设置CSS字体和文本属性
任务2:设置CSS背景和列表属性
任务3:设置CSS边框和表格属性
任务4:CSS3效果应用
单元测试
网站视觉设计布局
任务1:CSS盒子模型
任务2:流布局
任务3:浮动布局
任务4:定位布局
单元测试
网站页面制作
任务1:二级菜单制作
任务2:移动端页面制作
任务3:HTML5画布、拖放及地理定位
任务4:了解JavaScript应用
单元测试
期末大作业
网站视觉设计制作完善
展开全部
预备知识

具备网站视觉设计能力,提高计算机基础知识和相关软件的操作能力。

参考资料

主要参考网站:

  • w3school在线教程:https://www.w3school.com.cn/

  • 菜鸟教程:https://www.runoob.com/


常见问题

Q1. 为什么网站的首页文件名为index或default?

  这是一种网站首页命名规范。在浏览器地址栏输入网址,即使不输入首页名称index,浏览器也能正确找到该文件并正确显示出来,因为Web服务器默认的首页文件名是index。通过设置,Web服务器常用的默认首页文件名有index、default等。

Q2. 为什么有时网页图片不可见或超链接页面找不到?

  检查网页中图片的src属性、超链接中的href属性的URL书写是否正确,如果图片、页面文件不存在或不在此路径下,就会出现网页中的图片文件无法显示、点击超链接无法找到页面文件的现象。

Q3. 为什么制作有艺术特色的网页在不同的计算机上浏览效果不一样呢?

  这是因为各计算机的分辨率不同所致,可在计算机桌面单击鼠标右键,从选项菜单中选择“屏幕分辨率“操作来设置分辨率。

Q4. 为什么在进行网页制作时建议尽量使用相对路径呢?

  绝对路径是指提供文档完整的路径,其中包括使用的协议。而相对路径是指相对于当前文件的路径,使用相对路径可以在整个目录方便地移动内容,且测试方法比较灵活,特别是本机测试时比较方便。

Q5. 为什么浏览网页时会出现乱码现象呢?

  在编写网页时,如果未指定字符集就可能会出现乱码现象,可以在<head>区域中添加<meta charset="utf-8">来指定字符集,utf-8中已存储所有的文字。


源课程

该SPOC课程部分内容来自以上源课程,在源基础上老师进一步增加了新的课程内容

北京联合大学
1 位授课老师
范洁

范洁

讲师

下载
下载

下载App