网页设计(Web前端开发) 13期

第13期

开课时间： 2024-08-15 至 2025-01-15

教学进度：

预报名
进行中
已结束

学时安排：56学时

学分：3分

适合对网页设计制作感兴趣的零基础同学！课程从Web发展史讲起，结合源于淘宝、京东、腾讯、新浪等大型成熟网站页面中的经典案例，详细介绍了Html5标签、CSS3样式设置方法，以及常用的JS脚本和响应式网页布局技术。由易到难、由简到繁，循序渐进地介绍网页前端设计与制作的基础知识与基本技能。

9030817

累计页面浏览量
5106

累计选课人数
11961

累计互动次数

这门课程会讲什么？

* 精灵图技术--淘宝首页局部效果制作……

* 布局定位技术--成龙新浪微博发言版块布局……

* 背景定位技术--腾讯IMQQ页面视差效果制作……

* 滑动门技术--微信官网导航栏效果制作……

* 淘宝焦点轮播图、跑马灯效果案例制作……

* Html5 Canvans 小人侧身走动画......

配套教材：《网页设计与制作（Html5+CSS3+JavaScript）》，梁莉菁，刘巧丽，清华大学出版社，ISBN：9787302560074 ，2020.11

课程采用任务驱动教学方式，将重要知识点及基本技能要求嵌入到各个案例任务的讲解与实际操作中。并且教学案例及实训任务大多从淘宝、京东、腾讯、新浪等大型成熟网站中精心挑选经典应用案例来诠释各知识点与必备技能。课程整体分十个章节：

第一章网页设计概述

主要介绍Web发展史，网页设计相关术语意义，网页开发工具及浏览器开发者工具，学会制作第一个网页；

第二章 Html结构基础篇

主要介绍常用Html标记与常规属性，开始尝试创建网站，从这里起步，对每章案例进行整理，开始创建作业网站；

第三章 CSS样式基础篇

主要介绍网页中引入CSS样式的四种方式及CSS选择器，初步学会在网页中进行CSS样式设置；

第四章 CSS样式进阶篇

主要介绍样式布局中最重要的盒子模型，并且在这章中要尝试用当下流行的精灵图技术制作淘宝首页中的局部效果，同时将介绍iconfont矢量图标库的应用；

第五章网页布局技术

主要介绍布局定位技术，通过模拟制作新浪发言版块，淘宝首页局部精灵图技术应用案例，腾讯QQ页面视差效果强化布局定位技术；

第六章超链接与导航栏

主要介绍超链接的种类及纵向、横向、带下拉菜单的导航栏的制作以及应用了滑动门技术制作的微信官网导航栏的制作；

第七章表格及样式设置

主要介绍表格相关Html标签及样式设置，学会制作常规细线表格、隔行变色及鼠标悬停效果制作；

第八章表单及样式设置

主要介绍表单相关Html标签及常规属性，并且将介绍Html5新增的Input类型及新增属性的应用以及表单样式设置，这一章我们要挑战一下京东帐户登录表单的制作。

第九章 JavaScript基础

通过使用JS制作淘宝焦点图案例，巩固布局定位技巧，初步体会JS的语法规则和强大功能；

第十章感受Html5+CSS3魅力

主要介绍媒体查询、响应式网页制作技术及实现原理，并且在本章中将实战安源路矿工人运动纪念馆官网首页，并且本章中还将不定期追加HTML5+CSS3的实用案例。这章纯线上选修班级将不作考核要求，主要是供有兴趣有能力的同学自主学习。

《网页设计》课程是工学学科计算机类各专业的专业核心课程，也是各高校深受学生欢迎的公共选修课程。欢迎大家加入网页设计课堂！

你将收获什么？

通过学习，你能够学到网页设计与制作的基础知识，初步学会各种大型网站中所用到的常用的网站设计制作技术，如淘宝网中的焦点轮播图技术和几乎所有大型网站的页面中都会用到的精灵图技术等，本套课程的目标是：希望成为引领大家从菜鸟、小白快速通向Web大牛、Web工程师的桥梁。准备好了吗，我们开课了！

课程配套教材：《网页设计与制作（Html5+CSS3+JavaScript）》梁莉菁刘巧丽，清华大学出版社，ISBN：9787302560074 ，2020.11【http://www.tup.tsinghua.edu.cn/booksCenter/book_08493001.html】
课程证书花花202400.png 网页设计课程配套教材.png 教学技能大赛国赛一等奖.png

适合什么人学习？

无需特殊条件，有电脑即OK，人人可学，人人能学。HTML+CSS+JS，HTML5+CSS3，

网页设计入门，小白变为大牛的必经之路。引领大家从菜鸟小白华丽蜕变后通向Web前端工程师！

本课程配套教材：

《网页设计与制作（Html5+CSS3+JavaScript）》，梁莉菁，刘巧丽，清华大学出版社，ISBN：9787302560074 ，2020.11【http://www.tup.tsinghua.edu.cn/booksCenter/book_08493001.html】

推荐学习资源：

w3school 在线教程 http://www.w3school.com.cn/

菜鸟教程 - 学的不仅是技术，更是梦想！ https://www.runoob.com/

师资团队

研究领域

凡人一枚，二十余年Flash/网页前端教学与应用经验。

作为教师，感觉真象蜡烛，作为一个电脑迷，我为上天赐予我一个这么好的兴趣感到庆幸和自豪。很开心能与同学们一起互相学习，互相提高，在学习中感受快乐和喜悦，欢迎同学们来到网页设计课堂！

个人网站：http://pxh5.com B 站空间：https://space.bilibili.com/44096601

论文与著作

-《网页设计与制作（Html5+CSS3+JavaScript）》，清华大学出版社，ISBN：9787302560074 ，2020.11

-《Flash CS5.5经典动画制作教程》，人民邮电出版社，2012.9

荣誉与奖励

- 2018年江西省精品在线开放课程： Flash动画设计与制作

- 2019年江西省精品在线开放课程/2019江西省混合式一流本科课程：网页设计

- 2023年全国数字创意教学技能大赛视觉传达组国赛一等奖；

- 2020年省级线上线下混合式一流本科课程：网页设计；

- 2018年~2020年萍乡学院教学质量优秀奖；

- 2019年，2020年萍乡学院教学成果二等奖；

- 2019年萍乡市优秀教师；

- 2019年萍乡学院师德标兵；

- 2020年萍乡学院教学名师；

- 指导学生参赛，获省赛一等奖10次。

研究领域

软件研发与软件过程改进、大数据技术与应用。

论文与著作

教研课题：
[1]应用型本科高校创新创业教育与专业教育深度融合实证研究，江西省教育科学“十三五”规划课题。
[2]以工程创新能力培养为导向的软件工程专业“做中学”实践教学体系构建与实证研究，江西省教育科学“十三五”规划课题。
[3]移动互联网环境下的软件安全漏洞挖掘技术研究，江西省教育厅科学技术研究省级课题。
[4]以工程应用能力培养为导向的软件工程专业实践课程系列化改革与研究，江西省高等学校教学改革研究省级课题。
[5]校企联合办学中《JAVA WEB 程序设计》课程的教学改革研究，江西省高等学校教学改革研究省级课题。
[6]与企业项目相结合“任务驱动式”在《WEB 应用程序设计》教学中的应用研究，江西省高等学校教学改革研究省级课题。
论文与著作：
[1]基于模糊神经网络的故障检测算法[J]. 微电子学与计算机2015.9
[2]基于网络演算的接纳控制算法研究[J]. 萍乡学院学报2015.3
[3]基于α－稳定分布和令牌桶的接纳控制方法[J]. 科学技术与工程2014.11
[4]Xiyong Li. research on the dectection of denial service attack based on the correlation of changing points[J]. advances in computer science research2015.7
[5]Xiyong Li. The prototype of the personalized information recommendation engine[J]. Engineering Index Letters2014.09
[6]Java Web应用（项目教学版），清华大学出版社，2020.12
[7]计算机应用基础，清华大学出版社，2015.
[8]Java Web开发技术教程，清华大学出版社，2014.

廖德伟副教授 | 萍乡学院

研究领域

Web前端应用，网络计算

论文与著作

- SCO UNIX与WINDOWS双系统公用磁盘及启动项配置.《萍乡高等专科学校学报》2006年第3期

- For指令在cmd提示符下的高级应用.《萍乡高等专科学校学报》2008年第6期

- 基于VB6的自动化设计与控制.《萍乡高等专科学校学报》2008年第3期

- 基于.NET架构的新闻管理系统设计浅析. 《萍乡高等专科学校学报》2010年第6期

- 样式和域在长文档中的最强应用技术. 《萍乡高等专科学校学报》2010年第3期

- 高职高专图形图像处理专业教师培养初探.《职教论坛》（北核）2011年第11期

- 基于流的可伸缩性网页布局的最高效设计方法. 《萍乡高等专科学校学报》2011年第6期

- 基于ASP.NET的网站通用登录模块的实现方法. 《萍乡高等专科学校学报》2012年第6期

- 基于C#+SQL SERVER的网站通用注册模块的实现方法. 《萍乡高等专科学校学报》2012年第3期

- 基于VLOOKUP函数的数据纵向搜索的高效应用. 《萍乡学院学报》2015年第6期

- 基于FOR指令的批量数据文件迁移的实现.《萍乡学院学报》2017年第6期

- 《计算机实用技能教程》人民邮电出版社 2010.8

- 《网站设计与制作》中国铁道出版社 2013.8

- 《Flash CS5.5经典动画制作教程》人民邮电出版社 2012.9

- 《大学计算机基础全任务式教程》清华大学出版社 2014.8

- 《Web前端应用与实践》哈尔滨工业大学出版社 2019.8

邱望讲师 | 萍乡学院

自我介绍

90后新手教师，想成为一名酷酷的老师。(●'◡'●)

研究领域

计算机应用技术，社交网络，虚拟现实技术

论文与著作：

- 语义社交网络中用户信息提取与影响力分析[J]. 小型微型计算机系统, v.39(07):91-96.

王建芳助教 | 萍乡学院

研究领域

思想政治教育；

科研工作

萍乡学院2022年度课程思政示范课程立项

荣誉与奖励

萍乡学院第四届青年教师技能大赛三等奖

萍乡学院2023年专职辅导员教学竞赛一等奖

第18届江西省大学生挑战杯红色专项活动省级铜奖（第一指导老师）

罗晓娟副教授 | 萍乡学院

自我评介

对教育事业的执着和追求让她多年来一直踏踏实实、热情饱满地工作在教学第一线，在平凡的工作岗位上取得了突出的成绩，深受学生、同事、领导的喜爱。

研究领域

动态网站设计

论文与著作

公开发表专业论文15篇，其中核心期刊9篇；主编专业教材8部，参编教材6部。

荣誉与奖励

多年来辅导学生在各级各类比赛中获奖近百人次；多次制作课件在全国多媒体课件大赛中获奖。校级骨干教师、教学能手、优秀教师。

刘巧丽副教授 | 衡水学院

研究领域

数字媒体技术应用

论文与著作

[1]基于混合学习理论的“线—场—线”教学模式，中小学电教，2012,7、8（上）

[2]刘巧丽.数媒专业实践类课程混合教学模式的研究[J].教育现代化,2017,4(26):114-115+122.

[3]衡水内画非物质文化遗产数字化平台的设计[J].农村经济与科技,2019,30(10):258+260.

荣誉与奖励

第二届河北省高校青年教师教学竞赛三等奖（工科组）

第三届全国大学生数字媒体科技作品竞赛二等奖指导教师

衡水学院第二届移动教学比赛二等奖

衡水学院第二届优秀骨干教师

常见问题

1.我该如何学习这门课程？

（1）首先您要注册一个学银在线的账号。

（2）您需要有一定的上网条件，能够流畅的观看教学视频。在观看的过程中，您可以选择在PC端登陆我们的网页，也可以选择下载我们的app学习通，通过手机客户端来学习。

（3）您一旦报名选择了课程，我们的课程主讲老师或课程团队会通过通知的形式给您发送课程有关的消息，同时会抄送您的邮箱，请您及时查收。
2.我在学习过程中遇到问题了，怎么办？

您可以通过以下几种方式获取帮助：

（1）在课程群聊中发布求助信息，说不定和你一起学习这门课的小伙伴就能够解决你的问题呢；

（2）在课程讨论区留言，课程团队看到后将会及时回复。

（3）联系我们的客服，或者随时给我们发邮件，邮箱地址：xueyinkf@chaoxing.com。
3.我是新手，能否给我一些学习建议？

（1）我们的课程采用MOOC的方式授课，因此您可以自由安排您的学习时间、学习地点。但我们仍旧希望您每周能都有固定的时间持续进行本课程的学习，根据人的记忆曲线显示这种规律的学习方式能够最大限度的提升您的学习质量。

（2）学习的过程比较容易，为了检验您的学习成果，我们的课程团队会在课程章节结束后布置测验或作业，希望您尽可能的按时独立完成。如果有没有掌握的知识点，您可以继续回看复习课程。

（3）希望您能够积极参与课程的讨论，与各位学习者一起煮酒论英雄。在讨论的过程中，不光可以对课程所学内容温习内化，还能互相碰撞出思想的火花，相信您一定会有额外的收获。
4.课程会不会很难、很枯燥？

（1）我们的课程都是老师经过精心设计拍摄制作而成，并且由于是MOOC的方式，所以课程拆分成了不同的知识点，学习起来一点也不费劲。

（2）我们的课程多采取理论结合实际的授课方式，课程中也有许多案例的呈现，相信会给学习者带来诸多方面的启发。我们也将力求做到深入浅出，支持学习者将研究发现转化为实践，改进自身教学。