HTML5+CSS3新手怎么学习

2023-04-17 18:51:02html-css014

HTML5+CSS3新手怎么学习,第1张

随着移动互联网的发展，web前端逐渐受到企业的重视，前端开发人员的薪资也水涨船高，越来越多的人看好前端行业的发展，想要转行加入。下面，给大家分享一份web前端学习路线图，希望对初学者有所帮助。Web前端行业的发展，让前端人员能完成比以前更多的职责范围，所以未来前端可以宽口径就业，前景非常好。

对于零基础的人而言，要怎么学习web前端呢?

1、前端页面重构。主要内容为PC端网站布局、Photoshop 工具及切图、H5移动端网页布局、HTML5+CSS3新特性与交互。学习目标是完成PC端网站布局，可实现响应式布局，一套代码适配 PC 端、移动端、平板设备等。

2、前后端网页交互。主要内容为JavaScript语法全面进阶、ES6 到 ES10 新语法实践、jQuery 应用及插件使用、设计模式及插件编写、封装JS工具库及Web APIS、AJAX+PHP+MySQL前后端交互、前端工程化与模块化应用以及PC 端全栈开发项目等。学习目标是可以掌握前端工程化工具，如 git、gulp、webpack 等，搭建项目及开发项目。

3、 Node.js + 前端框架。主要内容为Node.js 全面进阶、Koa2+MongoDB搭建服务、Vue.js 框架、React.js 框架、小程序云开发与小程序框架、原生APP与混合APP、数据可视化与桌面应用等。学习目标是掌握桌面应用及可视化大数据，实现复杂数据展示类项目，能够独立完成前后台相关功能，胜任HTML5全栈开发工程师职位。很多学习web前端的朋友都希望在学成后能找到一份满意的工作，所以我们在学习过程中一定要注意实战经验的积累，如果你所学的东西对企业没有用，那你所做的一切都是无用功

网页设计课程

1、课程定位和课程设计

《网页设计与制作》课程是高职电子商务专业的一门专业必修课程。本课程以图形图像处理为前导课程，本课程将从职业技术教育的特点出发，以培养学生实际动手能力为目标，使学生具备网页制作、网站规划与网站维护的专业能力和方法能力，以及培养学生的团队协作、沟通表达、工作责任心、职业规范和职业道德等综合素质和能力。作为专业的核心主干课程，使学生掌握商业网站的开发和流程，并能独立进行操作，在就业时能够成为一个合格的人才。学生毕业后可胜任网站管理员、网页设计师、网页美工师等工作岗位。

2、课程目标

本课程以学生能够网页网站开发与维护的实际工作能力为学习目标，使学生具备计算机及其它相关专业课学习和应用中所必需的网页制作与网站设计的基本知识和基本技能，形成解决实际应用问题的方法能力，为以后的学习动态网页设计课程打下基础。

3、素质目标

(1) 培养具有较强的网页设计创意思维、艺术设计素质

(2) 培养学生在学习过程中解决困难的能力

(3) 培养学生在学习过程中培养兴趣的能力，提高工作、学习的主动性

(4) 培养学生理论联系实际的工作和学生方法

(5) 培养具有高度责任心和良好的团队合作精神

(6) 具有社会责任感。

4、知识目标

(1) 了解WEB站点的工作原理

(2) 理解Internet、WWW、HTTP、HTML的定义，计算机网络概念和作用

(3) 了解服务器、客户端、浏览器的概念和作用

(4) 掌握常规网站的规划及流程

(5) 熟练掌握HTML语言中各种标记符的运用能力

(6) 熟练掌握Dreamweaver应用软件的使用

(7) 理解网页中脚本语言的使用方法

(8) 熟练开发常规静态网站。

5、能力目标

(1) 熟练掌握Dreamweaver应用软件制作网站及网页

(2) 熟练掌握使用绝对和相对URL，创建超链接，图像链接

(3) 掌握在网页中添加CSS的方法

(4) 培养学生设计、制作和维护动态网站。

(5) 培养学生搜集资料、阅读资料和利用资料的能力

(6) 能独立制定、实施工作计划。

(7) 具备检查、判断能力

(8) 具备简单的需求市场分析能力。

6、课程内容与教学要求

第一章：个人网站的制作

【教学内容】

网络相关概念、网站需求分析、风格定位与网站欣赏、草图设计、图像相关概念、Photoshop制作网页平面效果图、 HTML语言简介、HTML语言的基本结构、HTML常用标记、Css样式表的应用。

【教学重点】

项目基础与流程设计，个人网站效果图设计与切片，HTML编辑静态页面，个人网站CSS样式表设计，网站测试。

【教学要求】

了解网站项目建设流程。

掌握个人网站效果图设计。

熟练掌握HTML编写静态页面的方法。

第二章：网页设计与制作精品课程网站建设

【教学内容】

Photoshop的综合运用， Dreamweaver的认识与基本使用方法、Dreamweaver中站点的建立与管理，插入文本、图像、表格、模板等资源，网络空间的申请与与域名的申、网站文件的上传。

【教学重点】

精品课程网站的策划方案，主页面的设计与制作，模板页的制作，效果图的切片与导出，网站后期编辑，网站的发布与测试。

【教学要求】

了解网站建设的流程、需求分析。

理解网站色彩搭配的原则。

掌握网站的建设流程及网页效果图的制作。

能够利用Dreamweaver软件设计精品课程网站。

第三章：企业类网站建设

【教学内容】

Photoshop效果图的制作， Flash动画的制作，Dreamweaver中框架、表单、图层、行为、时间轴、简单脚本语言的制作、模板的使用，Dreamweaver的综合使用。

【教学重点】

商务类网站的前期策划，效果图的设计、切片与动画的设计，网站编辑与动画设计，网页的布局及后期制作。

【教学要求】

了解企业类网站的策划过程。

进一步理解Dreamweaver建立网站及网页的流程。

掌握网站动画的设计与制作。

掌握网站的后期制作与编辑，并能够调试。

第四章：自主选题进行网站建设

【教学内容】

Photoshop效果图的制作， Flash动画的制作，HTML语言的综合运用，Dreamweaver的综合运用。

【教学重点】

网站的.前期规划(文字、图片等素材的收集与整理及使用)，网站效果图的制作，网站的建立与网页的制作与编辑，网站的发布五测试。

【教学要求】

了解整个网站的建设流程。

理解制作工具(dreamweaver)的使用方法

掌握网站的制作过程及综合运用方法。

能够独立并完美地完成一个完整网站的建设工作。

7.教学模式、教学方法与手段

1、注意教学方法的灵活性，可组织学生案例教学，进行讨论、问题教学、阅读指导等。全部在实训室授课，提高学生的实践操作能力。

2、充分发挥学生的学习主观能动性。在本课程的教学过程中，注意训练学生的操作动手能力，引导学生理论联系实际，应用课本中的理论知识来解决实际操作问题。本课程的学习过程全部是基于生产过程中的教学过程。

8.课程实施课时安排

(一)课时安排与教学建议

一般情况下，每周四课时，约18周，合72课时。具体课时安排如下：

一、考核方式

本课程为考试科目，期末考试总分100分，包括以下三部分成绩：

建立过程考核与结果考核相结合的方法，强调过程考核的重要性。过程考核占60分，结果考核占40分。

1、过程考核

(1)自评、小组评价和教师评价相结合采用绩效考核，首先学生进行自评，然后再进行小组评价和教师评价。

(2)考核点占分权重：个人作业完成情况(10%)实践操作技能(30%)学习态度(10%)团队合作精神(10%)。

2、结果考核

(1)自评、小组评价和教师评价相结合：对项目完成进行结果性考核，首先学生进行自评，然后再进行小组评价和教师评价。

(2)作品考核：项目结束要求每个小组提交全部作品及资料，根据完成情况进行考核。

(3)小组答辩：小组答辩实际上是各个项目小组对本小组学习情况及成果的总结、汇总和展示。小组答辩的内容包括小组组织过程、工作程序和步骤、学习成果与收获、取得的经验与教训、回答教师提问等。该项由老师给分。

(4)项目报告：报告包括项目描述、主要任务、设计流程、岗位技能及职责，每天的过程记录，以及项目完成后的个人总结等，每人提交一份，字数约2000字左右。该项由教师给分。

南昌技师学院计算机广告设计

一、招生对象、学制及学习形式：

招生对象：初中、高中毕业生

学制：2+1年

学习形式：全日制

二、培养目标

知识目标：

通过三年学习，让学生掌握多媒体技术的基础知识，如艺术构成，相关软件的使用，相关设备的使用，平面设计、广告设计以动画设计的基础知识。让学生具有较全面的多媒体技术知识，且在某一方面有所特长和较深入的研究。

能力目标：

通过三年学习，学生应具备较高的艺术素养和较强的审美能力，有较强的组织能力、社会协调能力和表达能力。

能独立完成平面设计与广告设计工作，具有一定的动画设计能力，有较强的网站设计与开发能力，有一定的视频编辑与处理能力，能独立完成视频作品的制作工作。在专业能力方面较为全面，但应有一方面较为突出。

岗位目标：

在企事业单位进行网站的设计、开发与管理工作

在教育部门或相关单位进行多媒体产品开发

广告及相关单位进行广告设计与制作的相关工作

从事相关方面的自主创业

三、人才培养规格要求和知识、能力、素质结构

（一)综合素质要求

本专业培养拥护党的基本路线、掌握多媒体制作的基本理论和相关应用领域的知识，熟悉多媒体制作环境，精通国际上流行的1-2种多媒体制作软件，能运用它们独立地实现创作者的意图，完成多媒体制作任务。遵守国家信息产业政策和法规，具有良好的职业道德，德、智、体、美全面发展的高等技术应用性人才。毕业时，学生可获得多媒体互动设计师或平面设计员等相关的认证。

知识结构

（1）具有高级应用性技术人才所必须的英语、语言、经济学、哲学以及美育等知识。

（2）掌握能满足本专业所需要的美术基础知识，学会素描，掌握色彩构成、平面构成等基本理论。

（3）掌握多媒体技术的基本理论、熟悉音频编辑与处理的相关知识，能进行多媒体产品的开发。

（4）掌握图像图形、平面排版、视频制作等相关知识。

（5）掌握动画设计、三维动画制作、网页制作等专业知识。

（6）掌握广告设计、包装设计及广告心理学等专业知识。

能力结构

（1）具有一定的美术功底和很强的艺术欣赏能力。

（2）具有熟练运用Office办公软件的能力，计算机应用水平达到办公应用中级水平。

（3）具有一定的英语水平、具有阅读和应用本专业一般性英语资料的能力。

（4）具有较强的平面设计、图形图像制作、平面排版能力。