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

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

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


2. 这门课程讲些什么？　　

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


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

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


4. 这门课有什么特色？

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

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

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

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


授课目标

本课程为专业必修课程。通过本课程的学习，学生能够达到以下目标：

（1）知识：学生能够陈述并解释关于Web前端设计相关规范、HTML超文本标记语言、CSS层叠样式表、JavaScript客户端脚本语言等方面的基本知识；能够简要陈述并解释Web前端设计技术的发展现状和趋势。

（2）应用：能够应用HTML5、CSS3和JavaScript合理地设计和制作网页。 

（3）整合：学生能够结合其他专业知识，综合运用Web前端设计的知识和操作技术创建网站；能够发布和管理网站。

（4）情感：学生能够参与协作学习，具有团队合作意识，能够撰写网站策划报告，进行成果展示和有效沟通与交流。 

（5）价值：学生能够在电子商务专业实践中理解并遵守职业道德和规范，履行责任；能够在网页制作及发布的实践中理解并遵守网络信息发布与传播的基本规范和相关法律法规。 

（6）学习：学生能够利用MOOC、微课等线上学习课程和资源，开展自主学习，提升自主学习能力。 

成绩要求

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

（1）线上MOOC

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

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

（2）课堂表现

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

（3）期末考核

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


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

         

课程大纲
预备知识

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

参考资料

参考资料：

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