由于移动端的应用越来越普及，因此，作为构成移动端应用的基本载体网站与网页的设计与制作非常重要，通过本课程的学习，使学生掌握使用和HBuilderX建立网站并规划电脑端网站、响应式网站和移动端网站。

通过本课程的学习，使学生掌握多种类型网站的设计技巧与注意事项，能比较熟练地规划个人网站、企业网站、门户网站、娱乐网站、游戏网站、教学网站等各种不同主题的不同风格效果。促进学生创新意识和综合职业能力的形成：

（1）让学生在学习设计不同主题的网站风格时作一些调查，在此基础上培养自己的创新意识和创新能力，审美能力等。

（2）让学生通过做课程设计或毕业设计，培养自己的创新能力。

（3）让学生掌握自我解决问题的能力、遇到问题和同学、教师的沟通能力。

（4）让学生掌握项目开发的流程以及按计划实施的能力。

通过本课程的学习，学生能了解WWW、HTTP、HTML5、CSS3的定义、概念和作用； 了解服务器、客户端、浏览器的概念和作用，熟悉web项目规划和需求分析的基本方法，具备Web网页设计、制作及站点管理的基本知识和基本技能，学生能够独立制作中小型的网站。熟练掌握HTML5语言中的各种文本格式、字符格式、段落设置、列表、标记的使用方法；熟练CSS3样式表制作方法和技巧；熟悉PC端网站、移动端网页、响应式网页的排版技巧，根据前端设计师的任职要求，参照计算机程序员职业标准和网站开发和网页制作的职业资格标准，改革课程体系和教学内容。课程内容突出职业能力培养，体现基于职业岗位分析和能力为导向的课程设计理念，以真实工作任务或社会产品为载体组织教学内容，在真实工作情境中采用新的教学方法和手段进行实施。

1．知识目标

(1)     掌握HTML5与CSS3基础知识及最新技术。

(2)     掌握常见HTML5跨平台开发工具。

(3)     掌握SEO、BSU等高级实用技术。

(4)     掌握基本C端网站、移动端网页、响应式网页的排版技巧。

2.能力目标

(1)     具有分析问题、解决问题的能力。

(2)     具有建立实验假设、探索查阅知识的能力。

(3)     能够运用系统性思维分析和解决问题。

(4)     具有学习的热情和兴趣，能进行自主学习和自我评价，具有良好的变通能力、一定的创造性思维和批判性思维。

(5)     具备扎实的HTML5与CSS3开发基础。

(6)     能够独立进行整体操作规划及规范编写。

(7)     能负责地完成任务，具有严格的时间观念以及时间管理意识，能了解本专业职业成长过程，并能做好个人的职业规划。

(8)     遵纪守法，爱岗敬业，具有良好的职业道德和职业形象。

3.素质目标

(1)     具有较强的专业学习、执行和创新能力。

(2)     具有自觉的规范意识、团队协作意识和协作能力。

(3)     能运用各种交流手段进行良好地表达和交流。

(4)     具有使用英语进行阅读和交流的能力。

(5)     具有较强的环境适应、人际交往和组织管理能力。

1、计算机应用基础

（1）计算机的基本概念知识；

（2）计算机基本操作能力；

（3）Internet基础知识；

（4）高级语言程序设计基础知识（任何语言均可）；

（5）因特网与万维网运行基本原理；

2、PhotoShop基础应用

（1）版面设计知识；

（2）配色相关知识；

（3）平面图像处理基本技能；

1.教材名称：HTML5+CSS3网页设计任务教程（“十三五”职业教育国家规划教材）

ISBN：9787040505184

主编：汤佳、陈晓男

出版社：高等教育出版社

2. https://www.w3school.com.cn 

此站点是学习Web的重要参考网站，里面包含了课程中几乎所有的Web编程语言的使用，而且配有实例，能让学习者轻松理解相应概念及语法。同学学习课程中除Web安全的内容外，都可参考此网站。

3.https://www.runoob.com/

菜鸟教程提供了编程的基础技术教程, 介绍了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识。 同时本站中也提供了大量的参考手册及用户笔记，在这里是学习也是分享。站内还设置了专门为了用于检验学习成果的测试/考试程序，让大家学有所用，再次巩固。

4.辅助学习教材：HTML5+CSS3网站设计基础教程

ISBN：9787115410641

作者：传智播客高教产品研发部

出版社：人民邮电出版社

5.辅助学习教材：HTML5+CSS3网页设计与制作

ISBN：9787115523242

作者：黑马程序员

出版社：人民邮电出版社

Q :  如何才能学好网页设计？

A :  1、不能像高中一样仅仅只是在教材上用笔划划、读读背背，应该每天坚持练习敲代码实践，从实践的角度理解代码的含义。2、所有知识点需要知其然知其所以然，要对代码有充分的理解，要精确到每一行代码。3、完成有一个完整的项目，用来面试。4、学会交流和沟通，以及编程规范。5、课程结束后，依旧要坚持练习，直到就业。

Q :  开发工具是什么？

A :  本门课程主要用到的程序编辑器是HBuilderX和Google Chrome，可到对应官网下载。

Q :  没有学过编程，可以学习这门课程吗？

A :  可以的。Web前端开发技术3个核心的构成是：HTML、CSS、JavaScript。前两个部分的程序设计不涉及结构化、面向对象程序设计思想，JavaScript部分则涉及到这些，所以HTML和CSS相对而言容易掌握。而JavaScript部分，没有程序设计基础的同学，需要更多练习与实践才能够掌握。

Q :  本门课程怎么考核？

A :  采用项目化考核，人手一题，考核贯穿整个学期，可以充分结合自己的喜好来制作网站。特别强调的是，不会采用笔试，临时抱佛脚的应试是毫无意义的。

Q :  如何开始课程的学习呢？

A :  开始该课程的学习需要从两方面着手准备：

1、了解课程内容组织结构。该课程从内容组织上来看，包括：教学视频、教学课件、课程讨论与答疑、自测习题、单元测试、互评作业、期末考试等环节。其中课程讨论与答疑、单元测试、互评作业和期末考试四部分是课程成绩的构成部分。因此，同学准备开始学习时，可以按照这样的思路展开学习：观看教学视频、学习教学课件、参与课程讨论、完成自测习题、完成单元测试与互评作业，完成期末考试。

2、做好开课前的知识储备。该课程特点是涉及面宽，但每方面并未涉及太深。因此，同学要学好此课程，需要具备相应的先修知识。这些知识主要包含两方面，一方面是关于计算机的基础知识，如果学习过大学计算机基础类的课程，相信在这方面应该不会有太大问题；另一方面是关于计算机程序设计的基础知识，课程中涉及多种与编程有关的语言，因此需要对编程基础知识有所了解。如果以前学习过程序设计类课程，那在学习该课程时会轻松很多。