hi,小慕
Web前端技术基础
第3次开课
开课时间: 2025年02月20日 ~ 2025年07月10日
学时安排: 3-5小时每周
进行至第12周,共21周 已有 266 人参加
立即参加
课程详情
课程评价(17)
spContent=前端开发工程师、前端架构师和用户体验设计师等新兴职业的出现,为网站前端设计和开发领域注入了新的生命和活力。随着用户对应用体验的要求越来越高,前端领域面临的挑战越来越大,一名出色的前端开发人才需要很长的时间来成长,因此行业对此类人才的需求极其迫切。前端开发人才的从业前景较好。 苏州工业职业技术学院开设的Web前端技术基础课程主要培养从事Web前端开发相关岗位必需掌握的技能。在各专业的教学过程中具有重要作用,课程共48个学时。 课程以工作过程为导向、以能力为本位,充分考虑到了 Web前端开发从业人员的职业发展路径与成长路径,依照行业企业专家对Web前端工程师岗位进行的工作任务和职业能力分析,确定了本课程的教学内容。引入企业真实案例,与1+X职业技能证书Web前端开发挂钩,加入大量技能训练题目,学生学完可直接考证,为初次就业打下基础。
前端开发工程师、前端架构师和用户体验设计师等新兴职业的出现,为网站前端设计和开发领域注入了新的生命和活力。随着用户对应用体验的要求越来越高,前端领域面临的挑战越来越大,一名出色的前端开发人才需要很长的时间来成长,因此行业对此类人才的需求极其迫切。前端开发人才的从业前景较好。 苏州工业职业技术学院开设的Web前端技术基础课程主要培养从事Web前端开发相关岗位必需掌握的技能。在各专业的教学过程中具有重要作用,课程共48个学时。 课程以工作过程为导向、以能力为本位,充分考虑到了 Web前端开发从业人员的职业发展路径与成长路径,依照行业企业专家对Web前端工程师岗位进行的工作任务和职业能力分析,确定了本课程的教学内容。引入企业真实案例,与1+X职业技能证书Web前端开发挂钩,加入大量技能训练题目,学生学完可直接考证,为初次就业打下基础。
—— 课程团队
课程概述

本课程是软件学院各专业的专业基础课程,重在培养学生根据实际需求利用HTML和CSS技术进行小型静态网站的设计与开发能力。本课程综合HTML语言、CSS样式技术,通过“教、学、做”理论与实践一体化教学,使学生掌握HTML知识,能熟练编写静态网页代码;掌握CSS样式,能熟练使用CSS美化页面;了解并会使用HTML5及CSS3的一些新特性;会在页面中使用一些JS特效;同时具有前端新知识、新技能的学习能力和创新创业能力。

先修课程为《计算机应用基础》、《UI界面设计》等课程,后继课程是《HTML5+CSS3网页设计》、《JavaScript程序设计》、《响应式网页设计》、《Web应用程序开发》等。

课程紧扣“高、新、融”强内涵,聚力复合型技术技能人才培养,服务学习者终生学习。遵循易学易教、活学活用、理实一体、校企“双元”合作等为原则,是一门基于“1+X”证书、立足岗位需求、注重综合能力提升、立体化项目式的课证融通课程,是学生掌握Web前端职业技能、步入工作岗位的实用课程。

其主要特色与创新点如下:

(1)高:高水平合作,支撑课程建设迈向高质量。

(2)新:四随,推动课程建设内容与形式更新常态化。

§ 课程设计随动学生的高质量发展。课程设计随动学生需求,社会和学生要什么、教师就教什么。注重技术技能积累,实现与1+X “Web前端开发”证书的课证融通,提高就业竞争力和可持续发展能力。

§ 课程内容随动行企技术与典型案例。教学内容以满足最新行企岗位需求核心技术为原则,对接Web前端工程师职业标准和岗位能力要求,融入典型企业的最新典型案例。

§ 课程载体随动信息技术应用与发展。教学载体基于Web前端技术,呈现形式新颖,运用信息化技术手段,配备数字化资源,体现教学做协调统一。

§ 课程思政紧随立德树人根本任务。课程一以贯之立德树人,强化价值引领,弘扬社会主义核心价值观,将工匠精神、创新精神、网络强国等融入教学的各环节。

(3)融:五融,推动课程体系建设更完善。

§ 课程应用融进人才培养体系。课程按照技术技能人才成长规律,通过对网站各模块的模仿与操作,逐步提高学习的复杂度,提升学生独立分析问题、解决问题的能力,培养学生具备前端工程师所需的技术素质和岗位素养。

§ 课程建设融通教师团队发展。以课程建设为纽带,校企团队深度融合,促进教师实践能力不断上升,完成“双师型”团队构建。团队教学、科研能力不断上升,师生在各类专业竞赛中不断获得全国特等奖、一等奖在内的优异成绩。

§ 教学内容融汇技术技能主链。教学内容融入行企最新共性技术,强化承上启下、内提外延的作用,达成中职生提优、高职生强技、应用本科生创新的技术链效应。

§ 教学项目融入真实工作情境。课程以合作企业真实项目为载体,融入产业前沿技术和企业产品质量要求,真实反应工作情境,提高技术技能人才培养的有效性。

§ 课程教法融合混合教学模式。课程既基于项目教学设计,又坚持以学习者为中心的理念,从学生的视角进行开发、教学,在知识传递上尽可能多的采用现代数字技术帮助学生理解,便于其自主学习、泛在学习、线下线上结合学习。

 

授课目标

    通过本课程的学习,掌握网站建设的整体流程,会综合运用PS、HBuilder、 Sublime等工具制作网页,学会DIV+CSS标准布局,CSS3样式设置,能够完成符合主题的静态网站制作。为1+X Web前端开发考证打下坚实的基础。

    教学内容包括HTML和CSS基础、DIV+CSS标准布局、CSS3样式美化、多媒体应用、JavaScript基本应用、网站测试与维护、网站文档书写等。

课程大纲
基本技能篇
1.1 任务1 网页体验-城市电子名片页面制作
1.1 任务概述
1.2 任务思考
1.3 任务实施
1.4 相关知识
1.4.1 网页相关概念
1.4.2 网页制作技术
1.4.3 常用开发工具
1.4.4 网站建设流程
课后习题
能力拓展:个人电子名片页面制作
任务2 页面制作-人物介绍内容呈现
2.1 任务概述
2.2 任务思考
2.3 任务实施
2.4 相关知识
2.4.1 HTML基本结构
2.4.2 HTML标题元素
2.4.3 HTML注释元素
2.4.4 HTML段落元素
2.4.5 HTML格式化元素
2.4.6 HTML图片元素
课后习题
能力拓展:产品介绍页面内容呈现
任务3 样式设计-人物介绍页面美化
3.1 任务概述
3.2 任务思考
3.3 任务实施
3.4 相关知识
3.4.1 CSS简介
3.4.2 CSS语法
3.4.3 CSS选择器
3.4.4 CSS字体属性
3.4.5 CSS文本属性
3.4.6 CSS背景属性
课后习题
能力拓展:产品介绍页面美化
任务4 图文混排-人物介绍页面布局
4.1 任务概述
4.4 任务思考
4.3 任务实施
4.4 相关知识
4.4.1元素分类
4.4.2 CSS盒模型
4.4.3 CSS布局模型
4.4.4清除浮动
课后习题
能力拓展:产品介绍页面图文混排布局
本篇小结
项目实战篇
任务1“英博特智能科技”企业网站前期策划
1.1 项目立项
1.1.1 分析网站需求说明书
1.1.2 组建项目团队
1.2 撰写项目策划书
1.2.1 分析确定网站逻辑结构图
1.2.2 设计网站界面原型
1.2.3 撰写企业网站项目策划书
能力拓展:自选主题网站策划书撰写
任务2 “英博特智能科技”企业网站开发准备
2.1 设计网站LOGO
2.1.1 新建文档
2.1.2 制作LOGO
2.1.3 保存文档
课后习题
能力拓展:自选主题网站LOGO设计
2.2 加工图像素材
2.2.1 批量处理图像
2.2.2 去除图片水印
2.2.3 调整图像属性
2.2.4 美化加工图像
2.2.5 应用特殊文字
课后习题
能力拓展:自选主题网站图像素材加工
2.3 设计网站首页效果图
2.3.1 设置页面大小
2.3.2 规划首页内容并设计版式
2.3.3 确定配色方案
2.3.4 制作网站首页效果图
2.3.5 以首页为模板制作子页效果
课后习题
能力拓展:自选主题网站首页及子页效果图的设计制作
2.4 裁切网站首页效果图
2.4.1 创建首页切片
2.4.2 编辑首页切片
2.4.3 命名首页切片
2.4.4 导出首页切片
课后习题
能力拓展:自选主题网站首页及子页效果图的裁切
任务3 “英博特智能科技”企业网站首页页面制作
3.1 首页整体布局
3.1.1 新建项目
3.1.2 搭建页面主体结构
3.1.3 编写主体结构样式
课后习题
能力拓展:“我的E站”首页整体布局
3.2 页头制作
3.2.1 页头二列布局
3.2.2 logo制作
3.2.3横向导航制作
3.2.4下拉菜单制作
课后习题
能力拓展:
1. 仿制“中国冬奥_北京2022年冬奥会和冬残奥会组织委员会网站”导航
2. 仿制“中国民俗文化网”中的横向二级菜单
3. 仿制“华为”网站页头
3.3 横幅广告制作
3.3.1 插入图像
3.3.2 样式设计
3.3.3 图像放大特效
课后习题
能力拓展:“BaoSight”网页动态banner的制作
3.4 公司优势制作
3.4.1 搭建公司优势模块结构
3.4.2 实现三列弹性布局
3.4.3 设置图像和文本样式
课后习题
能力拓展:公司优势模块制作
3.5 关于我们制作
3.5.1 搭建关于我们模块结构
3.5.2 实现两列布局
3.5.3 设置文本内容样式
3.5.4 轮播图制作
课后习题
能力拓展:公司介绍模块制作
3.6 服务范围布局
3.6.1 搭建服务范围模块结构
3.6.2 实现列表项内部的两列布局
3.6.3 实现服务范围弹性布局
3.6.2 设置文本内容样式
课后习题
能力拓展:图文展示模块制作
3.7 产品展示布局
3.7.1 搭建产品展示模块结构
3.7.2 实现三列布局
3.7.3 设置文本内容样式
3.7.4 设置CSS3过渡效果
课后习题
能力拓展:图文展示模块制作
3.8 案例展示布局
3.8.1 搭建案例展示模块结构
3.8.2 实现三列布局
3.8.3 设置文本内容样式
3.8.4 设置CSS3转换效果
课后习题
能力拓展:图文展示模块制作
3.9 新闻中心布局
3.9.1 搭建新闻中心模块结构
3.9.2 图片特效制作
3.9.3 新闻列表制作
课后习题
能力拓展:
1. 仿制“中华人民共合作教育部”网站新闻中心模块
2. 仿制“中国冬奥_北京2022年冬奥会和冬残奥会组织委员会网站”新闻速递模块
3.10 合作伙伴布局
3.10.1 搭建合作伙伴模块结构
3.10.2 设置图片内容样式
课后习题
能力拓展:
1. 仿制“中国冬奥_北京2022年冬奥会和冬残奥会组织委员会网站”官方合作模块
2. 仿制“安世亚太”官网合作伙伴模块
3.11 页尾布局
3.11.1 搭建页尾模块结构
3.11.2 分享内容制作
3.11.3 联系我们制作
3.11.4 版权内容制作
课后习题
能力拓展:
1. 仿制“华为”网站页尾
2. 仿制“中国民俗文化网”的页尾
3.12 客户服务布局
3.12.1 搭建客户服务模块结构
3.12.2 图片内容制作
3.12.3 弹出菜单制作
课后习题
能力拓展:
1. 仿制”容联·七陌”网站的客户服务模块
2. 自选主题网站首页页面制作
任务4 “英博特智能科技”企业网站二三级页面布局
4.1 产品案例页面制作
4.1.1 搭建页面结构
4.1.2 竖向导航制作
4.1.3 产品案例图文混排制作
课后习题
能力拓展:
1. 竖向二级导航菜单
2. 产品案例图文混排
4.2 产品详细信息页面制作
4.2.1 搭建页面结构
4.2.2 图文内容制作
4.2.3 数据表格设计
4.2.4 编写相关样式
课后习题
能力拓展:
1. 产品详情一览表制作
2. 房屋信息表制作
4.3 应用场景详细信息页面制作
4.3.1 搭建页面结构
4.3.2 插入音视频
课后习题
能力拓展:
1. 视频和文字的混排
2. 视频和列表的混排
4.4 留言页面布局
4.4.1 搭建页面结构
4.4.2 插入表单元素
4.4.3 编写表单样式
课后习题
能力拓展:
1. 搜索框制作
2. 登录框制作
3. 注册页面制作
4. 评论页面制作
5. 购物车页面制作
任务5 “英博特智能科技”企业网站测试与发布
5.1 网站测试
5.1.1 整体界面测试
5.1.2 超链接测试
5.1.3 图形测试
5.1.4 内容测试
5.1.5 浏览器兼容性测试
5.1.6 打印机测试
5.1.7 显示代码合法性检查
课后习题
能力拓展:选择一个熟悉领域的网站,并对该网站进行测试
5.2 网站发布
5.2.1 申请域名
5.2.2 申请空间
5.2.3 站点上传
课后习题
能力拓展:体验安装IIS服务器并发布访问网站、申请域名、申请虚拟主机
本篇小结
岗位能力强化篇
任务1 HTML制作静态页面
3.1.1 任务概述
3.1.2 任务分析
3.1.3 任务实施
任务2 HTML实现静态页面内容的呈现
3.2.1 任务概述
3.2.2 任务分析
3.2.3 任务实施
任务3 CSS实现网页整体布局
3.3.1 任务概述
3.3.2 任务分析
3.3.3 任务实施
任务4 CSS设计页面样式
3.4.1 任务概述
3.4.2 任务分析
3.4.3 任务实施
任务5 CSS3实现页面动态交互效果
3.5.1 任务概述
3.5.2 任务分析
3.5.3 任务实施
任务6 HTML5制作移动端静态网页
3.6.1 任务概述
3.6.2 任务分析
3.6.3 任务实施
任务7 HTML5优化移动端静态网页结构
3.7.1 任务概述
3.7.2 任务分析
3.7.3 任务实施
任务8 CSS3新特性制作移动端网页加载动画
3.8.1 任务概述
3.8.2 任务分析
3.8.3 任务实施
任务9 CSS3新特性美化移动端页面样式
3.9.1 任务概述
3.9.2 任务分析
3.9.3 任务实施
任务10 CSS3自定义资源美化移动端页面元素
3.10.1 任务概述
3.10.2 任务分析
3.10.3 任务实施
本篇小结
AI辅助网页设计
4.1 AI辅助课程学习之html和css基础学习
4.2 AI辅助课程学习之家乡介绍页面制作
4.3 AI辅助课程学习之logo设计
4.4 AI辅助课程学习之banner设计
4.5 AI辅助课程学习之横向导航菜单
4.6 AI辅助课程学习之滚动图片
4.7 AI辅助课程学习之音乐会演出信息页面制作
4.8 AI辅助课程学习之教育网站新闻中心模块制作
4.9 AI辅助课程学习之快速生成数据表格
4.10 AI辅助课程学习之快速生成注册页面
展开全部
预备知识

    计算机应用基础、UI界面设计

参考资料

 一、教材选用

教材选用团队自编的“十四五”职业教育国家规划教材《网站设计与网页制作立体化项目教程》(第4版),电子工业出版社。

二、参考资料

W3C学习网站: https://www.w3school.com.cn/ 

菜鸟教程:https://www.runoob.com/

常见问题

线上课程有64课时,线下48教学课时,部分学习章节需要学生自学完成。

苏州工业职业技术学院
9 位授课老师
密海英

密海英

副教授

何福男

何福男

副教授

陈莉莉

陈莉莉

副教授

推荐课程

中国书法

任德山

92612人参加

哲学问题

章雪富

143122人参加

金融学(二)

李健

196109人参加

会计学原理

王德宏

89089人参加
下载
下载

下载App