SPOC学校专有课程
Web前端设计
分享
spContent=CSS3交互、HTML5、JavaScript，建立一个网站要懂这么多技术吗？不用焦虑，加入网页设计与制作课程，通过工作流程+项目+任务驱动的学习模式，你每次敲打键盘形成的代码，就会像变魔术似的成为一个个漂亮的网页！理想要靠行动实现，我们开始吧~
—— 课程团队
课程概述

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

      在信息技术时代，网络信息的搜集、处理及发布是基本技能，而Web前端设计是信息发布的基础，了解和掌握HTML、CSS及JavaScript的相关知识和技术非常必要。


2. 这门课程讲些什么？　　

      Web前端设计课程以培养学生的应用能力和技术思维为主线，通过网站建设项目，学生在完成网站策划、网页制作、网站测试与发布的任务中，掌握Web前端设计的相关规范、HTML超文本标记语言、CSS样式、JavaScript脚本等基本知识和操作技术，通过任务实践提升综合应用能力，为从事Web前端设计工作打下基础。


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

      通过课程的学习，你将了解Web前端设计技术的发展现状和趋势，理解Web前端设计规范；掌握HTML5、CSS3和JavaScript的基本知识；掌握Web前端设计基本技能，能够应用HTML5、CSS3和JavaScript合理地设计和制作网页；能遵守网络信息发布与传播的基本规范和相关法律法规，能顺利地与教师和同学进行交流和讨论。


4. 这门课有什么特色？

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

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

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

      l  教学内容分层分模块分层次，按照Web基础知识、HTML5、CSS3、JavaScript四个模块，基础知识、操作技能、应用提高三个层次进行课程体系和教学内容的组织。

      l  运用现代信息技术促进教学资源建设，在中国大学MOOC平台开设《Web前端设计基础》课程，出版与课程配套的新形态教材《Web前端设计基础》。

授课目标

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

1. 知识目标

  • 了解Web前端设计技术的发展现状和趋势，理解Web前端设计规范

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

2. 能力目标

  • 掌握Web前端设计基本技能

  • 能够应用HTML5、CSS3和JavaScript合理地设计和制作网页

3.素质目标

  • 能够遵守网络信息发布与传播的基本规范和相关法律法规，尤其是遵守《网络信息内容生态治理规定》

  • 能够顺利地与教师和同学进行交流和讨论。

成绩要求

考核方式： 线上MOOC学习  + 课堂表现 + 期末考核

（1）线上MOOC

  • 过程考核：任务测试及课堂测验（占15%）和互动讨论（占10%），考察理论知识掌握的情况。

  • 阶段性考核：单元作业（占25%），考察实践操作的能力。

（2）课堂表现

      过程考核：课堂表现（占10%），考核出勤情况及学生自主学习情况。

（3）期末考核

      终结性考核：期末考核（占40%），考察运用所学知识解决问题的能力。


成绩评定：线上MOOC学习 50% +  课堂表现10% + 期末考核40%

课程大纲
预备知识

具备一定的计算机基础知识和操作能力。

参考资料

配套教材：

  • 《Web前端设计基础》，薛晓霞、王晓红主编，清华大学出版社，2020.9


参考资料：

  • 《HTML+CSS+JavaScript网页设计》，夏魁良、王丽红编著，清华大学出版社，2019年第1版。

  • 《Web前端开发技术——HTML5、CSS3、JavaScript（第3版）》，储久良著，清华大学出版社，2018年第3版。

  • 《HTML + CSS + JavaScript网页设计从入门到精通》，胡晓霞著，清华大学出版社，2017年第1版。

  • 《HTML5 + CSS + JavaScript网页设计与制作》，彭进香等主编，清华大学出版社，2019年第1版。

  • 《网页设计与制作教程》，周建锋、朱凤山、张晓君、史英杰编著，清华大学出版社，2015年第1版。


主要参考网站：

  • 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中已存储所有的文字。